@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --paper:#f7f3eb;
  --paper-2:#eee9df;
  --white:#fffdf8;
  --ink:#101a19;
  --muted:#68716c;
  --green:#173b33;
  --green-2:#2c574b;
  --gold:#b8843b;
  --gold-2:#d9b36e;
  --line:rgba(16,26,25,.13);
  --header:86px;
  --rail:78px;
  --max:1320px;
  --shadow:0 24px 70px rgba(16,26,25,.09);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Manrope",sans-serif;
  overflow-x:hidden;
}
body.is-menu-open{overflow:hidden}
a{text-decoration:none;color:inherit}
button{font:inherit}
img{max-width:100%;display:block}
::selection{background:var(--green);color:#fff}


.site-header{
  position:fixed;
  z-index:1000;
  inset:0 0 auto;
  height:var(--header);
  background:rgba(247,243,235,.86);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(16,26,25,.07);
}
.header-inner{
  width:min(var(--max),calc(100% - 70px));
  height:100%;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.logo-link{width:225px;flex:0 0 225px}
.site-logo{width:225px;height:auto}
.main-nav{display:flex;align-items:center;gap:24px}
.main-nav a{
  position:relative;
  padding:12px 0;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.main-nav a:after{
  content:"";
  position:absolute;
  left:0;bottom:3px;
  width:0;height:2px;
  background:var(--gold);
  transition:width .25s ease;
}
.main-nav a:hover:after,.main-nav a.active:after{width:100%}
.header-cta,.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:46px;
  padding:0 22px;
  border-radius:999px;
  background:var(--green);
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.header-cta .material-symbols-outlined{font-size:17px}
.mobile-menu{display:none;border:0;background:none;padding:8px}
.mobile-menu span{display:block;width:28px;height:2px;background:var(--ink);margin:5px}

.page-hero{
  min-height:68vh;
  padding:calc(var(--header) + 90px) 0 90px;
  display:flex;
  align-items:end;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 35%,rgba(217,179,110,.18),transparent 25%),
    linear-gradient(135deg,#f9f6ef,#eeeae1);
}
.page-hero:after{
  content:"";
  position:absolute;
  width:620px;height:620px;
  right:-220px;top:-250px;
  border:1px solid rgba(184,132,59,.25);
  border-radius:50%;
  box-shadow:0 0 0 60px rgba(184,132,59,.035),0 0 0 120px rgba(184,132,59,.025);
}
.page-hero-inner{width:min(var(--max),calc(100% - 70px));margin:auto;position:relative;z-index:2}
.eyebrow{
  color:var(--gold);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:0 0 20px;
}
h1,h2,h3,h4{font-family:"Space Grotesk",sans-serif}
.page-hero h1{
  max-width:920px;
  margin:0;
  font-size:clamp(58px,7vw,108px);
  line-height:.92;
  letter-spacing:-.065em;
}
.page-hero h1 em{color:var(--gold);font-style:normal}
.page-hero .lead{
  max-width:680px;
  margin:30px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.75;
}
.page-hero-meta{
  margin-top:42px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.meta-pill{
  padding:11px 15px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
}

.content-section{padding:120px 0}
.content-inner{width:min(var(--max),calc(100% - 70px));margin:auto}
.section-title{
  font-size:clamp(42px,5vw,76px);
  line-height:.98;
  letter-spacing:-.06em;
  margin:0;
}
.section-title em{color:var(--gold);font-style:normal}
.section-copy{font-size:16px;line-height:1.85;color:var(--muted);max-width:680px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.card{
  background:rgba(255,255,255,.65);
  border:1px solid var(--line);
  border-radius:24px;
  padding:34px;
  box-shadow:var(--shadow);
}
.card .material-symbols-outlined{font-size:42px;color:var(--green);margin-bottom:30px}
.card h3{font-size:24px;margin:0 0 12px}
.card p{font-size:13px;line-height:1.75;color:var(--muted);margin:0}

.dark-band{background:var(--green);color:#fff}
.dark-band .section-copy{color:#c7d2cd}
.dark-band .eyebrow{color:var(--gold-2)}

.number-list{display:grid;gap:0;border-top:1px solid var(--line)}
.number-item{
  display:grid;
  grid-template-columns:75px 1fr 35px;
  align-items:center;
  gap:20px;
  padding:28px 0;
  border-bottom:1px solid var(--line);
}
.number-item>span:first-child{font:600 14px "Space Grotesk";color:var(--gold)}
.number-item h3{margin:0;font-size:24px}
.number-item p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.number-item .material-symbols-outlined{color:var(--gold)}

.cta-band{padding:90px 0;background:linear-gradient(110deg,#dfe7df,#f7f3eb)}
.cta-band-inner{width:min(var(--max),calc(100% - 70px));margin:auto;display:flex;align-items:end;justify-content:space-between;gap:50px}
.cta-band h2{font-size:clamp(42px,5vw,72px);line-height:.95;letter-spacing:-.06em;margin:0}
.cta-band h2 em{font-style:normal;color:var(--gold)}

.site-footer{background:var(--green);color:#fff;padding:70px 0 22px}
.footer-inner{width:min(var(--max),calc(100% - 70px));margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:60px}
.footer-brand img{width:230px;filter:brightness(0) invert(1)}
.footer-brand p{max-width:300px;color:#bac7c1;font-size:12px;line-height:1.7;margin-top:25px}
.footer-column{display:flex;flex-direction:column;gap:12px}
.footer-column h3{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-2);margin:0 0 10px}
.footer-column a{font-size:11px;color:#d5ddd8}
.footer-contact>a{font-size:12px}
.social-row{display:flex;gap:8px;margin-top:15px}
.social-row a{width:34px;height:34px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:grid;place-items:center}
.social-row .material-symbols-outlined{font-size:16px}
.footer-bottom{width:min(var(--max),calc(100% - 70px));margin:55px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;color:#9fb0a8;font-size:9px}

.hero-home{min-height:100vh;padding-top:var(--header);position:relative;display:flex;align-items:center;overflow:hidden;background:linear-gradient(135deg,#faf7f0,#edf0eb)}
.hero-home-inner{width:min(var(--max),calc(100% - 160px));margin:auto;position:relative;z-index:5}
.hero-home h1{font-size:clamp(60px,7vw,105px);line-height:.9;letter-spacing:-.065em;margin:0;max-width:800px}
.hero-home h1 em{font-style:normal;color:var(--gold)}
.hero-home .lead{font-size:16px;line-height:1.8;color:var(--muted);max-width:570px;margin:28px 0}
.hero-actions{display:flex;gap:15px;align-items:center}
.text-link{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:800;text-transform:uppercase}
.hero-visual{position:absolute;right:-2%;top:8%;width:54vw;height:84vh}
.hero-visual canvas{width:100%;height:100%;display:block}
.hero-object-shadow{position:absolute;left:50%;bottom:15%;width:410px;height:80px;transform:translateX(-50%);background:rgba(0,0,0,.12);filter:blur(25px);border-radius:50%}
.hero-scroll{position:absolute;right:4vw;bottom:34px;z-index:7;font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.home-sections .content-section:nth-child(even){background:var(--paper-2)}

@media(max-width:1200px){
  .main-nav{gap:14px}.main-nav a{font-size:9px}
  .header-inner{width:min(100% - 40px,1100px)}
  .logo-link,.site-logo{width:195px}
}
@media(max-width:900px){
  :root{--header:72px}
  .main-nav{display:none;position:fixed;left:0;right:0;top:var(--header);padding:12px 22px 22px;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0}
  .main-nav.open{display:flex}.main-nav a{padding:15px 0}.header-cta{display:none}.mobile-menu{display:block}
  .page-hero{min-height:65vh;padding-top:130px}.page-hero-inner,.content-inner,.cta-band-inner,.footer-inner,.footer-bottom{width:min(100% - 40px,720px)}
  .grid-2{grid-template-columns:1fr;gap:45px}.grid-3{grid-template-columns:1fr}
  .content-section{padding:80px 0}
  .footer-inner{grid-template-columns:1fr 1fr;gap:40px}.footer-brand{grid-column:1/-1}
  .hero-home{min-height:900px;align-items:flex-start;padding-top:135px}.hero-home-inner{width:min(100% - 40px,720px)}
  .hero-home h1{font-size:clamp(52px,12vw,78px);max-width:650px}
  .hero-visual{top:430px;right:-25%;width:135%;height:450px;opacity:.95}
}
@media(max-width:560px){
  .page-hero h1{font-size:52px}.page-hero .lead{font-size:14px}
  .footer-inner{grid-template-columns:1fr}.footer-brand{grid-column:auto}
  .footer-bottom{display:block}.footer-bottom span{display:block;margin-bottom:7px}
  .hero-home h1{font-size:50px}.hero-home .lead{font-size:14px}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .number-item{grid-template-columns:45px 1fr 25px}.number-item h3{font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

.contact-form{display:grid;gap:18px}
.contact-form label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.contact-form input,.contact-form textarea{
  width:100%;margin-top:7px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.6);padding:14px;font:inherit;font-size:13px;outline:none;
}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--gold)}
.contact-form .button{border:0;cursor:pointer;justify-self:start}

/* ===== Opticore Motion Layer — additive enhancement; original styling preserved ===== */
.ui-icon{width:20px;height:20px;display:inline-block;object-fit:contain;vertical-align:middle;color:currentColor;flex:0 0 auto}
.header-cta .ui-icon,.button .ui-icon{width:17px;height:17px}
.card>.ui-icon{width:42px;height:42px;color:var(--green);margin-bottom:30px}
.number-item>.ui-icon{color:var(--gold)}
.footer-column>a{display:flex;align-items:center;gap:8px}
.footer-column>a .ui-icon{width:15px;height:15px}
.social-row a .ui-icon{width:16px;height:16px;color:currentColor}
.hero-actions .text-link .ui-icon{width:20px;height:20px;color:var(--gold)}
.hero-scroll .ui-icon{width:17px;height:17px;vertical-align:middle;color:var(--gold)}
.card{position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s}
.card:before{content:"";position:absolute;width:180px;height:180px;right:-90px;top:-90px;border-radius:50%;background:rgba(184,132,59,.08);pointer-events:none}
.card:after{content:"";position:absolute;left:-80%;top:0;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);animation:cardShine 6s ease-in-out infinite;pointer-events:none}
@keyframes cardShine{0%,65%{left:-80%}100%{left:140%}}
.hero-visual{isolation:isolate}
.hero-visual:after{content:"";position:absolute;inset:10% 8% 8% 30%;border:1px solid rgba(184,132,59,.16);border-radius:50%;animation:orbitGlow 18s linear infinite;pointer-events:none}
@keyframes orbitGlow{to{transform:rotate(360deg)}}
.motion-image{position:relative;overflow:hidden;border-radius:24px;min-height:390px;background:linear-gradient(135deg,#173b33,#2c574b);box-shadow:0 30px 80px rgba(16,26,25,.12);isolation:isolate}
.motion-image .motion-lines{position:absolute;inset:-40%;background:linear-gradient(90deg,transparent 48%,rgba(223,189,125,.25) 49%,transparent 50%),linear-gradient(transparent 48%,rgba(255,255,255,.12) 49%,transparent 50%);background-size:55px 55px;transform:rotate(15deg);animation:gridDrift 16s linear infinite}
.motion-image .motion-orb{position:absolute;width:180px;height:180px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(223,189,125,.55);border-radius:50%;box-shadow:0 0 60px rgba(223,189,125,.12);animation:orbSpin 10s linear infinite}
.motion-image .motion-orb:before,.motion-image .motion-orb:after{content:"";position:absolute;inset:20px;border:12px solid rgba(223,189,125,.75);border-right-color:transparent;border-radius:50%}
.motion-image .motion-orb:after{inset:55px;border-width:8px;border-left-color:transparent;border-bottom-color:rgba(255,255,255,.5);animation:orbSpin 5s linear reverse infinite}
.motion-image .motion-core{position:absolute;width:46px;height:46px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);background:var(--gold);box-shadow:0 0 60px rgba(223,189,125,.6);animation:coreFloat 3.5s ease-in-out infinite}
.motion-image .motion-particle{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--gold2);box-shadow:0 0 16px rgba(223,189,125,.6);animation:particleFloat 5s ease-in-out infinite}
.motion-image .p1{left:18%;top:24%}.motion-image .p2{right:18%;top:35%;animation-delay:-1s}.motion-image .p3{left:28%;bottom:20%;animation-delay:-2.5s}.motion-image .p4{right:27%;bottom:24%;animation-delay:-3.5s}
@keyframes gridDrift{to{transform:rotate(15deg) translate(100px,100px)}}@keyframes orbSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes coreFloat{50%{margin-top:-18px;transform:translate(-50%,-50%) rotate(225deg)}}@keyframes particleFloat{50%{transform:translateY(-25px) scale(1.5);opacity:.45}}
.cinematic-stage{position:relative;height:480vh;min-height:4800px;background:radial-gradient(circle at 72% 45%,rgba(184,132,59,.10),transparent 24%),radial-gradient(circle at 30% 60%,rgba(23,59,51,.08),transparent 28%),var(--cream);}
.cinematic-pin{position:sticky;top:0;width:100%;height:100vh;min-height:680px;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 72% 50%,rgba(223,189,125,.16),transparent 24%),linear-gradient(120deg,rgba(247,243,235,.98),rgba(247,243,235,.82));}
.cinematic-pin canvas{width:100%;height:100%;display:block}
.cinematic-copy{position:absolute;left:max(35px,calc((100vw - var(--max))/2));top:50%;transform:translateY(-50%);z-index:10;width:min(540px,44vw);min-height:320px;pointer-events:auto;}
.cinematic-copy .scene-copy{position:absolute;inset:0;display:block!important;opacity:0;visibility:hidden;transform:translate3d(0,28px,0) scale(.985);transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1),visibility .55s;pointer-events:none;}
.cinematic-copy .scene-copy.active{display:block}
.scene-copy h2{font-size:clamp(48px,5.4vw,82px);line-height:.93;letter-spacing:-.06em;margin:0 0 24px;font-family:"Space Grotesk",sans-serif}
.scene-copy h2 em{color:var(--gold);font-style:normal}
.scene-copy p{color:var(--muted);font-size:15px;line-height:1.8}
.scene-copy .scene-number{color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.cinematic-progress{position:absolute;right:28px;top:50%;z-index:8;transform:translateY(-50%);display:grid;gap:12px}
.cinematic-progress span{display:block;width:6px;height:6px;border-radius:50%;background:rgba(16,26,25,.2);transition:.35s}
.cinematic-progress span.active{background:var(--gold);transform:scale(1.7)}
.scroll-hint{position:absolute;right:35px;bottom:30px;z-index:8;font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){
 .cinematic-stage{height:480vh}.cinematic-copy{left:20px;top:34%;transform:none;width:calc(100% - 60px)}.cinematic-copy .scene-copy{background:rgba(247,243,235,.72);backdrop-filter:blur(12px);padding:20px;border-radius:18px;border:1px solid var(--line)}.cinematic-progress{right:14px}.scroll-hint{display:none}
 .motion-image{min-height:300px}
}

/* ===== V5 Hero Identity + Cinematic Polish ===== */
:root{--hero-gold:rgba(184,132,59,.32)}
body{background:#f7f3eb;overflow-x:hidden}
.site-header{z-index:1000}
.logo-link{width:270px;flex:0 0 270px}
.site-logo{width:270px;height:auto}
.hero-home{background:radial-gradient(circle at 76% 44%,rgba(255,255,255,.96) 0 8%,rgba(255,255,255,.48) 22%,transparent 43%),linear-gradient(135deg,#fbf8f1 0%,#eef1ec 58%,#e8ede8 100%)}
.hero-home:before{content:"";position:absolute;width:620px;height:620px;right:4%;top:17%;border-radius:50%;border:1px solid rgba(184,132,59,.15);box-shadow:0 0 0 70px rgba(184,132,59,.025),0 0 0 150px rgba(23,59,51,.018);animation:heroHalo 18s linear infinite;pointer-events:none}
.hero-home:after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.55));pointer-events:none}
.hero-home-inner{max-width:1450px}
.hero-home h1{font-size:clamp(70px,7.8vw,118px);max-width:850px}
.hero-home .lead{font-size:18px;max-width:650px}
.hero-visual{right:-1%;top:8%;width:58vw;height:84vh;display:grid;place-items:center;z-index:2}
.hero-visual canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.08;pointer-events:none}
.hero-logo-orbit{position:relative;width:min(43vw,520px);height:min(43vw,520px);display:grid;place-items:center;filter:drop-shadow(0 35px 50px rgba(23,59,51,.13));animation:heroLogoFloat 5.5s ease-in-out infinite}
.hero-logo-aura{position:absolute;width:72%;height:72%;border-radius:50%;background:radial-gradient(circle,rgba(217,179,110,.18),rgba(217,179,110,.04) 45%,transparent 72%);filter:blur(9px);animation:heroAura 4s ease-in-out infinite}
.hero-logo-ring{position:absolute;border-radius:50%;border:1px solid rgba(184,132,59,.35);transform-style:preserve-3d}
.hero-logo-ring-a{inset:8%;animation:heroRingA 14s linear infinite}
.hero-logo-ring-b{inset:18%;border-color:rgba(23,59,51,.24);animation:heroRingB 10s linear infinite reverse}
.hero-logo-mark-wrap{width:60%;height:60%;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fffdf8,#f4efe5 58%,#ddd4c4);border:1px solid rgba(184,132,59,.24);box-shadow:inset 0 0 50px rgba(255,255,255,.8),0 22px 55px rgba(16,26,25,.12);transform-style:preserve-3d;animation:heroMarkSpin 12s linear infinite}
.hero-logo-mark{width:72%;height:72%;object-fit:contain}
.hero-logo-caption{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);text-align:center;display:flex;flex-direction:column;gap:5px;letter-spacing:.16em;white-space:nowrap}
.hero-logo-caption strong{font:800 clamp(22px,2.1vw,34px) "Space Grotesk",sans-serif;letter-spacing:.12em;color:#101a19}
.hero-logo-caption span{font:700 clamp(8px,.72vw,11px) "Manrope",sans-serif;letter-spacing:.34em;color:#68716c}
.hero-object-shadow{display:none}
@keyframes heroHalo{to{transform:rotate(360deg)}}
@keyframes heroLogoFloat{0%,100%{transform:translateY(0) rotateX(0)}50%{transform:translateY(-16px) rotateX(2deg)}}
@keyframes heroAura{50%{transform:scale(1.16);opacity:.7}}
@keyframes heroRingA{to{transform:rotate(360deg) rotateX(65deg)}}
@keyframes heroRingB{to{transform:rotateY(360deg) rotateZ(25deg)}}
@keyframes heroMarkSpin{to{transform:rotateY(360deg) rotateZ(360deg)}}
.cinematic-stage{background:radial-gradient(circle at 78% 50%,rgba(217,179,110,.18),transparent 24%),linear-gradient(135deg,#f8f5ee,#eef1eb 55%,#e6ece7);overflow:hidden}
.cinematic-stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(23,59,51,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(23,59,51,.035) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);animation:stageGrid 24s linear infinite;pointer-events:none}
.cinematic-pin{background:transparent}
.cinematic-pin canvas{background:transparent!important}
@keyframes stageGrid{to{background-position:80px 80px}}
.content-section{position:relative;overflow:hidden}
.content-section:before{content:"";position:absolute;width:520px;height:520px;right:-250px;top:-260px;border:1px solid rgba(184,132,59,.12);border-radius:50%;animation:sectionOrbit 24s linear infinite;pointer-events:none}
@keyframes sectionOrbit{to{transform:rotate(360deg)}}
.dark-band{position:relative;overflow:hidden;background:radial-gradient(circle at 80% 50%,#315a4d,#173b33 48%,#102f29)}
.dark-band:after{content:"";position:absolute;width:800px;height:800px;right:-350px;top:-300px;border:1px solid rgba(217,179,110,.15);border-radius:50%;box-shadow:0 0 0 70px rgba(217,179,110,.025),0 0 0 140px rgba(255,255,255,.018);animation:sectionOrbit 28s linear infinite reverse}
.cta-band{position:relative;overflow:hidden;background:radial-gradient(circle at 80% 30%,rgba(217,179,110,.22),transparent 28%),linear-gradient(110deg,#dfe7df,#f7f3eb)}
.cta-band:after{content:"";position:absolute;width:520px;height:120px;right:4%;bottom:10%;border-top:2px solid rgba(184,132,59,.25);border-radius:50%;transform:rotate(-12deg);box-shadow:0 25px 0 rgba(184,132,59,.08),0 50px 0 rgba(184,132,59,.05);animation:ctaFlow 7s ease-in-out infinite}
@keyframes ctaFlow{50%{transform:rotate(-12deg) translateX(-30px)}}
@media(max-width:1100px){.logo-link,.site-logo{width:230px}.hero-visual{right:-9%;width:61vw}.hero-logo-orbit{width:min(48vw,460px);height:min(48vw,460px)}}
@media(max-width:900px){.logo-link,.site-logo{width:205px}.hero-home{min-height:920px;align-items:flex-start;padding-top:calc(var(--header) + 90px)}.hero-home-inner{width:min(var(--max),calc(100% - 44px))}.hero-home h1{font-size:clamp(54px,13vw,82px)}.hero-home .lead{font-size:15px}.hero-visual{position:absolute;right:-16%;top:48%;width:92vw;height:52vh}.hero-logo-orbit{width:min(76vw,440px);height:min(76vw,440px)}.hero-home:before{right:-30%;top:42%;width:500px;height:500px}.cinematic-stage{height:500vh}.cinematic-copy{top:31%;width:calc(100% - 54px)}.content-section{padding:90px 0}}
@media(prefers-reduced-motion:reduce){.hero-logo-orbit,.hero-logo-aura,.hero-logo-ring-a,.hero-logo-ring-b,.hero-logo-mark-wrap,.hero-home:before,.content-section:before,.dark-band:after,.cta-band:after{animation:none!important}}

/* ===== CINEMATIC STAGE VISIBILITY / ROBUST SCROLL FIX ===== */
.cinematic-stage{
  position:relative!important;
  height:600vh!important;
  min-height:600vh;
  overflow:visible!important;
  background:
    radial-gradient(circle at 72% 35%, rgba(184,132,59,.10), transparent 24%),
    radial-gradient(circle at 18% 70%, rgba(23,59,51,.07), transparent 28%),
    linear-gradient(135deg,#f7f3eb 0%,#eef0eb 50%,#f7f3eb 100%);
  isolation:isolate;
}
.cinematic-pin{
  position:sticky!important;
  top:0!important;
  left:auto!important;
  right:auto!important;
  inset:auto!important;
  width:100%!important;
  height:100vh!important;
  min-height:620px;
  display:block!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 68% 48%, rgba(184,132,59,.13), transparent 17%),
    radial-gradient(circle at 74% 54%, rgba(23,59,51,.10), transparent 27%),
    transparent;
  z-index:2;
}
.cinematic-pin canvas{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  z-index:1;
  background:transparent!important;
}
.cinematic-copy{z-index:5!important}
.cinematic-progress{z-index:7!important}
.scroll-hint{z-index:7!important}
.cinematic-pin::before{
  content:"";
  position:absolute;
  width:min(52vw,760px);
  height:min(52vw,760px);
  right:3%;
  top:50%;
  transform:translateY(-50%);
  border:1px solid rgba(184,132,59,.18);
  border-radius:50%;
  box-shadow:
    0 0 0 50px rgba(184,132,59,.025),
    0 0 0 100px rgba(23,59,51,.018);
  animation:cinematicOrbit 24s linear infinite;
  pointer-events:none;
  z-index:0;
}
.cinematic-pin::after{
  content:"";
  position:absolute;
  width:280px;height:280px;
  right:18%;top:50%;
  transform:translate(50%,-50%);
  border:1px solid rgba(23,59,51,.12);
  border-radius:50%;
  box-shadow:0 0 70px rgba(184,132,59,.10);
  animation:cinematicOrbitReverse 14s linear infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes cinematicOrbit{to{transform:translateY(-50%) rotate(360deg)}}
@keyframes cinematicOrbitReverse{to{transform:translate(50%,-50%) rotate(-360deg)}}

/* Visible fallback graphics behind the WebGL canvas. */
.cinematic-pin .cinematic-copy::after{
  content:"";
  position:absolute;
  left:calc(100% + 7vw);
  top:50%;
  width:190px;height:190px;
  transform:translateY(-50%) rotate(30deg);
  border:22px solid rgba(184,132,59,.62);
  border-left-color:rgba(23,59,51,.85);
  border-radius:18%;
  opacity:.13;
  animation:fallbackCube 8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes fallbackCube{50%{transform:translateY(-50%) rotate(210deg) scale(1.15)}}

@media(max-width:900px){
 .cinematic-stage{height:500vh!important;min-height:500vh}
 .cinematic-pin{min-height:100svh;height:100svh!important}
 .cinematic-pin::before{width:100vw;height:100vw;right:-35%;top:58%}
 .cinematic-pin::after{right:4%;top:58%}
 .cinematic-copy{z-index:8!important}
 .cinematic-pin .cinematic-copy::after{display:none}
}
@media(prefers-reduced-motion:reduce){
 .cinematic-pin::before,.cinematic-pin::after{animation:none}
}

/* Cinematic scene visibility fix */
.scene-copy.active{
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
  pointer-events:auto;
}
.cinematic-copy .scene-copy{
  background:rgba(247,243,235,.76);
  border:1px solid rgba(23,59,51,.10);
  border-radius:22px;
  padding:30px 32px;
  box-shadow:0 28px 80px rgba(23,59,51,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.cinematic-copy .scene-copy h2{
  margin-top:0;
  margin-bottom:22px;
}
.cinematic-copy .scene-copy p{
  max-width:470px;
  margin-bottom:0;
}
.cinematic-pin canvas{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  z-index:1;
  display:block;
}
.cinematic-progress{z-index:20}
.scroll-hint{z-index:20}
@media(max-width:900px){
  .cinematic-stage{height:480vh;min-height:4200px}
  .cinematic-pin{min-height:640px}
  .cinematic-copy{left:18px;right:18px;top:auto;bottom:70px;transform:none;width:auto;min-height:0}
  .cinematic-copy .scene-copy{padding:22px}
  .cinematic-copy .scene-copy h2{font-size:clamp(38px,11vw,58px)}
  .cinematic-copy .scene-copy p{font-size:14px;line-height:1.65}
}

/* =========================================================
   OPTICORE CINEMATIC V6 — DEFINITIVE SCROLL IMPLEMENTATION
   The six step markers below control the six visible scenes.
   ========================================================= */
.cinematic-stage{
  position:relative!important;
  height:600vh!important;
  min-height:600vh!important;
  overflow:visible!important;
  isolation:isolate;
  background:
    radial-gradient(circle at 75% 38%,rgba(217,179,110,.16),transparent 23%),
    radial-gradient(circle at 18% 70%,rgba(23,59,51,.07),transparent 28%),
    linear-gradient(135deg,#f7f3eb 0%,#eef1eb 52%,#f7f3eb 100%)!important;
}
.cinematic-pin{
  position:sticky!important;
  top:0!important;
  width:100%!important;
  height:100vh!important;
  min-height:680px!important;
  display:block!important;
  overflow:hidden!important;
  z-index:5!important;
  background:
    radial-gradient(circle at 74% 50%,rgba(217,179,110,.13),transparent 22%),
    linear-gradient(120deg,rgba(247,243,235,.98),rgba(238,241,235,.88))!important;
}
.cinematic-pin canvas{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:1!important;
  display:block!important;
  background:transparent!important;
}
.cinematic-copy{
  position:absolute!important;
  left:max(35px,calc((100vw - var(--max))/2))!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:min(550px,44vw)!important;
  min-height:340px!important;
  z-index:20!important;
  pointer-events:none!important;
}
.cinematic-copy .scene-copy{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translate3d(0,35px,0) scale(.97)!important;
  transition:
    opacity .55s ease,
    transform .7s cubic-bezier(.16,1,.3,1),
    visibility .55s!important;
  pointer-events:none!important;
}
.cinematic-copy .scene-copy.active{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0) scale(1)!important;
}
.cinematic-copy .scene-copy{
  background:rgba(247,243,235,.82)!important;
  border:1px solid rgba(23,59,51,.11)!important;
  border-radius:24px!important;
  padding:32px 34px!important;
  box-shadow:0 30px 90px rgba(16,26,25,.10)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
.cinematic-copy .scene-copy h2{
  margin:0 0 22px!important;
  font-size:clamp(48px,5.1vw,78px)!important;
  line-height:.94!important;
}
.cinematic-copy .scene-copy p{
  margin:0!important;
  max-width:480px!important;
  font-size:15px!important;
  line-height:1.8!important;
}
.cinematic-progress{
  z-index:30!important;
}
.scroll-hint{
  z-index:30!important;
}
.cinematic-steps{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  grid-template-rows:repeat(6,100vh)!important;
  width:100%!important;
  height:600vh!important;
  z-index:1!important;
  pointer-events:none!important;
}
.cinematic-step{
  width:100%;
  height:100vh;
}
@media(max-width:900px){
  .cinematic-stage{height:600vh!important;min-height:600vh!important}
  .cinematic-pin{min-height:640px!important;height:100svh!important}
  .cinematic-copy{
    left:18px!important;
    right:18px!important;
    top:auto!important;
    bottom:64px!important;
    transform:none!important;
    width:auto!important;
    min-height:0!important;
  }
  .cinematic-copy .scene-copy{
    padding:22px!important;
  }
  .cinematic-copy .scene-copy h2{
    font-size:clamp(38px,11vw,58px)!important;
  }
}

/* =========================================================
   OPTICORE CINEMATIC — MOBILE CENTERING FIX
   ========================================================= */
@media (max-width: 900px) {
  .cinematic-stage{
    position:relative!important;
    width:100%!important;
    height:600vh!important;
    min-height:600vh!important;
    overflow:visible!important;
  }

  .cinematic-pin{
    position:sticky!important;
    top:0!important;
    width:100%!important;
    height:100svh!important;
    min-height:620px!important;
    display:block!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 50% 34%,rgba(217,179,110,.18),transparent 30%),
      linear-gradient(145deg,#f7f3eb 0%,#eef1eb 100%)!important;
  }

  .cinematic-pin canvas{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    z-index:1!important;
    display:block!important;
    transform:none!important;
  }

  .cinematic-copy{
    position:absolute!important;
    left:16px!important;
    right:16px!important;
    top:auto!important;
    bottom:42px!important;
    width:auto!important;
    min-height:0!important;
    height:auto!important;
    transform:none!important;
    z-index:20!important;
    display:block!important;
    pointer-events:none!important;
  }

  .cinematic-copy .scene-copy{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:auto!important;
    bottom:0!important;
    width:100%!important;
    box-sizing:border-box!important;
    padding:20px 20px 21px!important;
    border-radius:20px!important;
    text-align:left!important;
    background:rgba(247,243,235,.88)!important;
    box-shadow:0 20px 55px rgba(16,26,25,.13)!important;
    backdrop-filter:blur(15px)!important;
    -webkit-backdrop-filter:blur(15px)!important;
  }

  .cinematic-copy .scene-copy h2{
    font-size:clamp(34px,10.5vw,54px)!important;
    line-height:.95!important;
    letter-spacing:-.055em!important;
    margin:0 0 13px!important;
  }

  .cinematic-copy .scene-copy p{
    font-size:13px!important;
    line-height:1.62!important;
    max-width:none!important;
    margin:0!important;
  }

  .cinematic-copy .scene-number{
    font-size:9px!important;
    letter-spacing:.15em!important;
    margin-bottom:11px!important;
  }

  .cinematic-progress{
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:18px!important;
    transform:translateX(-50%)!important;
    display:flex!important;
    gap:9px!important;
    z-index:30!important;
  }

  .cinematic-progress span{
    width:6px!important;
    height:6px!important;
  }

  .scroll-hint{
    display:none!important;
  }

  .cinematic-steps{
    grid-template-rows:repeat(6,100svh)!important;
    height:600svh!important;
  }
}

/* Smaller phones */
@media (max-width: 480px) {
  .cinematic-pin{
    min-height:600px!important;
  }

  .cinematic-copy{
    left:12px!important;
    right:12px!important;
    bottom:24px!important;
  }

  .cinematic-copy .scene-copy{
    padding:17px 17px 18px!important;
    border-radius:17px!important;
  }

  .cinematic-copy .scene-copy h2{
    font-size:clamp(31px,10.8vw,47px)!important;
  }

  .cinematic-copy .scene-copy p{
    font-size:12.5px!important;
    line-height:1.55!important;
  }
}

/* =========================================================
   OPTICORE MOBILE V8 — HERO + CINEMATIC LAYOUT
   ========================================================= */
@media (max-width: 900px) {
  .hero-home{
    min-height:760px!important;height:auto!important;
    padding-top:calc(var(--header) + 48px)!important;
    padding-bottom:32px!important;align-items:flex-start!important;
    overflow:hidden!important;
  }
  .hero-home-inner{
    position:relative!important;z-index:10!important;width:100%!important;
    max-width:none!important;padding:0 22px!important;box-sizing:border-box!important;
  }
  .hero-home .eyebrow{width:56%!important;max-width:300px!important;font-size:9px!important;line-height:1.45!important}
  .hero-home h1{
    position:relative!important;z-index:12!important;width:59%!important;max-width:420px!important;
    font-size:clamp(43px,11.5vw,70px)!important;line-height:.94!important;
    letter-spacing:-.055em!important;margin:15px 0 18px!important;
  }
  .hero-home .lead{
    position:relative!important;z-index:12!important;width:58%!important;max-width:330px!important;
    font-size:13px!important;line-height:1.65!important;
  }
  .hero-actions{position:relative!important;z-index:14!important;width:58%!important;max-width:330px!important;gap:12px!important}
  .hero-actions .button{white-space:nowrap!important;font-size:11px!important;padding:13px 16px!important}

  /* Dedicated right-side logo zone: it cannot sit underneath the hero copy. */
  .hero-visual{
    position:absolute!important;z-index:4!important;
    top:calc(var(--header) + 42px)!important;right:-3%!important;
    width:45%!important;height:360px!important;display:grid!important;
    place-items:center!important;pointer-events:none!important;opacity:1!important;
  }
  .hero-logo-orbit{
    width:min(39vw,230px)!important;height:min(39vw,230px)!important;
    max-width:230px!important;max-height:230px!important;
  }
  .hero-logo-mark{width:48%!important;height:48%!important}
  .hero-logo-caption{
    bottom:-42px!important;width:260px!important;left:50%!important;
    transform:translateX(-50%)!important;
  }
  .hero-logo-caption strong{font-size:clamp(24px,7vw,38px)!important;letter-spacing:.14em!important}
  .hero-logo-caption span{font-size:8px!important;letter-spacing:.34em!important}
  .hero-object-shadow{display:none!important}
  .hero-home .hero-scroll{left:22px!important;bottom:18px!important;z-index:15!important}

  /* Start cinematic immediately after the hero. */
  .cinematic-stage{
    margin-top:0!important;width:100%!important;
    height:600vh!important;min-height:600vh!important;
    overflow:visible!important;
    background:radial-gradient(circle at 50% 28%,rgba(217,179,110,.14),transparent 28%),linear-gradient(145deg,#f7f3eb,#edf0eb)!important;
  }
  .cinematic-pin{
    position:sticky!important;top:0!important;width:100%!important;
    height:100svh!important;min-height:620px!important;overflow:hidden!important;
    background:radial-gradient(circle at 50% 35%,rgba(217,179,110,.15),transparent 30%),linear-gradient(145deg,#f7f3eb,#edf0eb)!important;
  }
  .cinematic-pin canvas{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    z-index:1!important;opacity:1!important;display:block!important;
  }
  .cinematic-copy{
    position:absolute!important;left:14px!important;right:14px!important;
    top:auto!important;bottom:26px!important;width:auto!important;
    min-height:0!important;height:auto!important;transform:none!important;
    z-index:20!important;display:block!important;pointer-events:none!important;
  }
  .cinematic-copy .scene-copy{
    position:absolute!important;inset:auto 0 0 0!important;width:100%!important;
    box-sizing:border-box!important;display:none!important;opacity:0!important;visibility:hidden!important;
  }
  .cinematic-copy .scene-copy.active{display:block!important;opacity:1!important;visibility:visible!important}
  .cinematic-copy .scene-copy h2{font-size:clamp(34px,10.2vw,52px)!important;line-height:.96!important}
  .cinematic-copy .scene-copy p{font-size:12.5px!important;line-height:1.6!important}
  .cinematic-progress{
    position:absolute!important;left:50%!important;right:auto!important;top:17px!important;
    transform:translateX(-50%)!important;display:flex!important;gap:8px!important;
  }
  .scroll-hint{display:none!important}
  .cinematic-steps{
    position:absolute!important;inset:0!important;height:600vh!important;
    display:grid!important;grid-template-rows:repeat(6,100vh)!important;
    z-index:0!important;pointer-events:none!important;
  }
}
@media (max-width:560px){
  .hero-home{min-height:700px!important;padding-top:calc(var(--header) + 34px)!important}
  .hero-home-inner{padding:0 17px!important}
  .hero-home h1{width:60%!important;font-size:clamp(38px,11.2vw,54px)!important}
  .hero-home .lead{width:59%!important;font-size:12px!important}
  .hero-actions{width:60%!important}
  .hero-visual{top:calc(var(--header) + 32px)!important;right:-2%!important;width:42%!important;height:300px!important}
  .hero-logo-orbit{width:min(36vw,185px)!important;height:min(36vw,185px)!important}
  .hero-logo-caption{bottom:-38px!important}.hero-logo-caption strong{font-size:24px!important}.hero-logo-caption span{font-size:6.5px!important}
  .cinematic-pin{min-height:590px!important;height:100svh!important}
  .cinematic-copy{bottom:18px!important;left:10px!important;right:10px!important}
  .cinematic-copy .scene-copy{padding:16px 16px 17px!important;border-radius:16px!important}
  .cinematic-copy .scene-copy h2{font-size:clamp(30px,10.5vw,46px)!important;margin-bottom:10px!important}
}

/* =========================================================
   OPTICORE MOBILE — HIDE CINEMATIC EXPERIENCE
   Desktop cinematic experience remains unchanged.
   ========================================================= */
@media (max-width: 900px) {
  .cinematic-stage,
  #cinematic-experience,
  .cinematic-stage + .home-sections {
    /* The cinematic section itself is hidden below. */
  }

  #cinematic-experience {
    display:none!important;
  }
}

@media (max-width: 900px) {
  .hero-home{
    min-height:760px!important;
    height:auto!important;
    padding-bottom:40px!important;
  }
}
@media (max-width:560px) {
  .hero-home{
    min-height:700px!important;
  }
}