/* =========================================================
   Capital Projects Management SPC — cinematic layer
   Loaded after style.css. All motion respects prefers-reduced-motion.
   ========================================================= */

/* ---------- 1. Opening sequence ---------- */
.intro{ position:fixed; inset:0; z-index:300; background:var(--navy-950); display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden }
.intro[hidden]{ display:none }
.intro__panel{ position:absolute; inset:0; background:var(--navy-950); transform-origin:top }
.intro__mark{ position:relative; z-index:2; width:clamp(84px,12vw,140px); overflow:visible }
.intro__mark rect{ opacity:0; transform-box:fill-box; transform-origin:left center; transform:scaleX(0) }
.intro__mark .dia{ opacity:0; transform-box:fill-box; transform-origin:center; transform:rotate(-90deg) scale(.2) }
.intro__word{ position:relative; z-index:2; margin-top:28px; font-family:var(--serif); font-weight:300; text-transform:uppercase;
  font-size:clamp(.78rem,1.5vw,1.05rem); letter-spacing:.6em; margin-right:-.6em; color:var(--platinum); opacity:0 }
.intro__sweep{ position:absolute; z-index:2; left:50%; top:50%; width:0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); transform:translate(-50%,-50%) }

.is-intro{ overflow:hidden }
.intro.is-playing rect{ animation:barIn .5s var(--ease-out) forwards }
.intro.is-playing rect:nth-of-type(1){ animation-delay:.05s }
.intro.is-playing rect:nth-of-type(2){ animation-delay:.17s }
.intro.is-playing rect:nth-of-type(3){ animation-delay:.29s }
.intro.is-playing .dia{ animation:diaIn .7s var(--ease-out) .44s forwards }
.intro.is-playing .intro__word{ animation:wordIn .9s var(--ease-out) .6s forwards }
.intro.is-playing .intro__sweep{ animation:sweepOut 1s var(--ease-out) .9s forwards }
@keyframes barIn{ from{ opacity:0; transform:scaleX(0) } to{ opacity:1; transform:scaleX(1) } }
@keyframes diaIn{ from{ opacity:0; transform:rotate(-90deg) scale(.2) } to{ opacity:1; transform:rotate(0) scale(1) } }
@keyframes wordIn{ from{ opacity:0; letter-spacing:.95em } to{ opacity:1; letter-spacing:.6em } }
@keyframes sweepOut{ 0%{ width:0; opacity:0 } 30%{ opacity:1 } 100%{ width:min(78vw,900px); opacity:.55 } }

.intro.is-leaving .intro__mark,.intro.is-leaving .intro__word,.intro.is-leaving .intro__sweep{ opacity:0; transition:opacity .45s var(--ease) }
.intro.is-leaving .intro__panel{ transform:scaleY(0); transition:transform 1s var(--ease-out) }
.intro.is-leaving .intro__panel:nth-child(2){ transition-delay:.07s }
.intro.is-leaving .intro__panel:nth-child(3){ transition-delay:.14s }
.intro.is-leaving .intro__panel:nth-child(4){ transition-delay:.21s }
.intro__panel:nth-child(1){ left:0; width:25% }
.intro__panel:nth-child(2){ left:25%; width:25% }
.intro__panel:nth-child(3){ left:50%; width:25% }
.intro__panel:nth-child(4){ left:75%; width:25% }

/* hold the hero until the curtain lifts */
.is-intro .hero__content > *{ animation-play-state:paused }
.is-intro .site-header{ opacity:0 }
.site-header{ transition:opacity .6s var(--ease) .1s, background-color var(--t-mid) var(--ease), backdrop-filter var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease) }

/* ---------- 2. Hero atmosphere ---------- */
.hero__grain{ position:absolute; inset:-120px; z-index:1; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite }
@keyframes grainShift{
  0%{ transform:translate(0,0) } 20%{ transform:translate(-24px,14px) } 40%{ transform:translate(18px,-20px) }
  60%{ transform:translate(-14px,-12px) } 80%{ transform:translate(22px,18px) } 100%{ transform:translate(0,0) } }

.hero__glow{ position:absolute; z-index:1; right:-10%; top:4%; width:min(70vw,880px); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(200,164,93,.2), rgba(200,164,93,.05) 45%, transparent 70%);
  animation:glowBreathe 12s var(--ease) infinite alternate }
@keyframes glowBreathe{ from{ opacity:.55; transform:scale(.9) } to{ opacity:1; transform:scale(1.1) } }

.hero__vignette{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(3,8,16,.6) 100%) }

/* letterbox bars, used only while the opening sequence plays */
.hero__bar{ position:absolute; left:0; right:0; z-index:3; height:0; background:var(--navy-950); pointer-events:none; transition:height 1.3s var(--ease-out) }
.hero__bar--top{ top:0 } .hero__bar--bottom{ bottom:0 }
.is-intro .hero__bar{ height:9vh }

/* headline: per-word mask reveal with a light sweep */
.hero .display .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em }
.hero .display .w > span{ display:inline-block; transform:translateY(110%); animation:wordUp 1.15s var(--ease-out) forwards }
.hero .display .line:nth-child(1) .w:nth-child(1) > span{ animation-delay:.05s }
.hero .display .line:nth-child(1) .w:nth-child(2) > span{ animation-delay:.17s }
.hero .display .line:nth-child(2) .w:nth-child(1) > span{ animation-delay:.29s }
.hero .display .line:nth-child(2) .w:nth-child(2) > span{ animation-delay:.41s }
@keyframes wordUp{ to{ transform:none } }
.hero__shine{ position:absolute; z-index:2; inset:auto 0 0 0; top:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.055) 47%, rgba(214,182,107,.12) 50%, rgba(255,255,255,.055) 53%, transparent 62%);
  background-size:280% 100%; background-position:180% 0; animation:shineSweep 7.5s var(--ease) 2.4s infinite }
@keyframes shineSweep{ 0%{ background-position:180% 0 } 45%,100%{ background-position:-120% 0 } }

/* ---------- 3. Section reveals ---------- */
.js .h2[data-reveal],.js .display[data-reveal]{ transform:translateY(30px) }

/* one-off gold shimmer across a heading as it enters */
.js .shimmer{ position:relative; background-image:linear-gradient(100deg, currentColor 42%, var(--gold-light) 50%, currentColor 58%);
  background-size:260% 100%; background-position:160% 0; -webkit-background-clip:text; background-clip:text }
.js .shimmer.is-visible{ animation:textShine 2.1s var(--ease-out) .25s 1 forwards }
@keyframes textShine{ from{ background-position:160% 0 } to{ background-position:-60% 0 } }

/* images arrive behind a rising curtain */
.js .frame-wrap .frame{ clip-path:inset(0 0 100% 0); transition:clip-path 1.25s var(--ease-out) }
.js .frame-wrap.is-visible .frame,.js [data-reveal].is-visible .frame{ clip-path:inset(0 0 0 0) }
.js .frame img{ transform:scale(1.16); transition:transform 1.6s var(--ease-out) }
.js [data-reveal].is-visible .frame img{ transform:scale(1) }
.frame-wrap:hover .frame img{ transform:scale(1.05) }
.frame-wrap::before{ transform:translate(-14px,14px); opacity:0; transition:transform 1.1s var(--ease-out) .25s, opacity .8s var(--ease) .25s }
.js [data-reveal].is-visible .frame-wrap::before,.js .frame-wrap.is-visible::before{ transform:none; opacity:1 }

/* parallax targets driven by JS */
.par{ will-change:transform }

/* ---------- 4. Interactive lighting ---------- */
@media (hover:hover) and (pointer:fine){
  .card{ --mx:50%; --my:50% }
  .card::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity var(--t-mid) var(--ease);
    background:radial-gradient(220px circle at var(--mx) var(--my), rgba(200,164,93,.13), transparent 65%) }
  .card:hover::after{ opacity:1 }
  .card{ transition:background-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out) }
  .card:hover{ transform:translateY(-4px) }
  .btn{ transition:color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease), transform .45s var(--ease-out) }
  .sector{ transition:transform .9s var(--ease-out) }
  .sector:hover{ transform:translateY(-6px) }
}

/* ---------- 5. Positioning marquee ---------- */
.marquee{ position:relative; overflow:hidden; border-block:1px solid var(--line); padding-block:clamp(18px,2.2vw,30px); background:var(--navy-950) }
.marquee__track{ display:flex; width:max-content; animation:marqueeSlide 46s linear infinite }
.marquee__group{ display:flex; align-items:center; gap:clamp(28px,4vw,60px); padding-right:clamp(28px,4vw,60px) }
.marquee span{ font-family:var(--serif); font-weight:300; text-transform:uppercase; letter-spacing:.16em;
  font-size:clamp(.95rem,1.8vw,1.35rem); color:var(--platinum); white-space:nowrap }
.marquee i{ width:8px; height:8px; background:var(--gold); transform:rotate(45deg); flex:none }
.marquee::before,.marquee::after{ content:""; position:absolute; top:0; bottom:0; width:14vw; z-index:2; pointer-events:none }
.marquee::before{ left:0; background:linear-gradient(90deg,var(--navy-950),transparent) }
.marquee::after{ right:0; background:linear-gradient(270deg,var(--navy-950),transparent) }
@keyframes marqueeSlide{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }

/* ---------- 6. Cinematic statement band ---------- */
.band{ position:relative; min-height:clamp(520px,82vh,860px); display:flex; align-items:center; overflow:hidden; background:var(--navy-950) }
.band__media{ position:absolute; inset:-12% 0 -12% 0; z-index:0 }
.band__media picture,.band__media img{ width:100%; height:100%; object-fit:cover }
.band::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(7,17,31,.95) 0%, rgba(7,17,31,.72) 45%, rgba(7,17,31,.4) 100%),
             linear-gradient(180deg, rgba(7,17,31,.85), transparent 30%, transparent 70%, rgba(7,17,31,.9)) }
.band__inner{ position:relative; z-index:2; width:100% }
.band__quote{ font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,3.6vw,3.3rem); line-height:1.25; color:var(--white); max-width:18ch; margin:0 }
.band__quote .ln{ display:block; overflow:hidden }
.band__quote .ln > span{ display:block; transform:translateY(105%); transition:transform 1.05s var(--ease-out) }
.js .band.is-visible .band__quote .ln > span{ transform:none }
.js .band.is-visible .band__quote .ln:nth-child(2) > span{ transition-delay:.12s }
.js .band.is-visible .band__quote .ln:nth-child(3) > span{ transition-delay:.24s }
.band__meta{ margin-top:36px; display:flex; align-items:center; gap:18px; color:var(--gold-light); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase }
.band__meta::before{ content:""; width:clamp(40px,6vw,90px); height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease-out) .4s }
.js .band.is-visible .band__meta::before{ transform:scaleX(1) }

/* ---------- 7. Scroll progress ---------- */
.progress{ position:fixed; left:0; top:0; z-index:110; height:2px; width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--gold),var(--gold-light)); pointer-events:none }

/* ---------- 8. Process refinements ---------- */
.process.is-visible .process__fill{ transition-duration:2.6s }
.step:last-child::before{ box-shadow:0 0 0 6px rgba(200,164,93,.16) }

/* ---------- 9. Page exit transition ---------- */
.pagefade{ position:fixed; inset:0; z-index:250; background:var(--navy-950); opacity:0; visibility:hidden; transition:opacity .42s var(--ease), visibility 0s linear .42s }
.pagefade.is-on{ opacity:1; visibility:visible; transition:opacity .42s var(--ease) }

@media (max-width:767px){
  .hero__glow{ right:-30%; width:110vw }
  .band{ min-height:clamp(440px,70vh,640px) }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .intro{ display:none!important }
  .hero__grain,.hero__glow,.hero__shine,.marquee__track{ animation:none!important }
  .hero__shine{ display:none }
  .hero__bar{ display:none }
  .js .frame-wrap .frame{ clip-path:none!important }
  .js .frame img,.js [data-reveal].is-visible .frame img{ transform:none!important }
  .frame-wrap::before{ transform:none!important; opacity:1!important }
  .js .shimmer{ background-image:none; -webkit-background-clip:border-box; background-clip:border-box }
  .band__quote .ln > span{ transform:none!important }
  .band__meta::before{ transform:scaleX(1)!important }
  .progress,.pagefade{ display:none }
  .par{ transform:none!important }
}

/* ---------- 10. Word-split heading reveals ---------- */
.js .splitr{ }
.js .splitr .w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em }
.js .splitr .w > span{ display:inline-block; transform:translateY(112%); transition:transform .95s var(--ease-out); transition-delay:var(--d,0ms) }
.js .splitr.is-visible .w > span{ transform:none }
/* the shimmer hook is now a no-op; word reveal replaces it */
.js .shimmer{ background-image:none; -webkit-background-clip:border-box; background-clip:border-box; animation:none }

/* ---------- 11. Staggered list entrances ---------- */
.js .stagger > *{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease-out); transition-delay:var(--d,0ms) }
.js .stagger.is-visible > *{ opacity:1; transform:none }

/* ---------- 12. Hero scroll-out ---------- */
.hero__content{ will-change:transform, opacity }

/* ---------- 13. Sector tiles: curtain entrance ---------- */
.js .sector[data-reveal]{ opacity:1; transform:none }
.js .sector picture{ clip-path:inset(0 0 100% 0); transition:clip-path 1.15s var(--ease-out); transition-delay:var(--delay,0ms) }
.js .sector.is-visible picture{ clip-path:inset(0 0 0 0) }
.js .sector .sector__body{ opacity:0; transform:translateY(14px);
  transition:opacity .8s var(--ease) calc(var(--delay,0ms) + 260ms), transform .9s var(--ease-out) calc(var(--delay,0ms) + 260ms) }
.js .sector.is-visible .sector__body{ opacity:1; transform:none }
.js .sector img{ transform:scale(1.18); transition:transform 1.5s var(--ease-out) }
.js .sector.is-visible img{ transform:scale(1) }
.sector:hover img{ transform:scale(1.07) }

/* ---------- 14. Button shine ---------- */
.btn{ position:relative; overflow:hidden }
.btn > span.shine{ position:absolute; top:0; bottom:0; width:42%; pointer-events:none; z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent); transform:translateX(-160%) skewX(-18deg) }
.btn:hover > span.shine{ animation:btnShine .85s var(--ease-out) }
@keyframes btnShine{ to{ transform:translateX(320%) skewX(-18deg) } }

/* ---------- 15. Card tilt ---------- */
@media (hover:hover) and (pointer:fine){
  .card{ transform-style:preserve-3d; transition:background-color var(--t-mid) var(--ease), transform .5s var(--ease-out) }
  .card.is-tilting{ transition:transform .12s linear, background-color var(--t-mid) var(--ease) }
}

/* ---------- 16. Page transition wipe ---------- */
.pagefade{ background:linear-gradient(180deg,var(--navy-950),#050C17) }
.pagefade::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent); transform:scaleX(0) }
.pagefade.is-on::after{ animation:wipeLine .5s var(--ease-out) forwards }
@keyframes wipeLine{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

@media (prefers-reduced-motion:reduce){
  .js .splitr .w > span,.js .stagger > *{ transform:none!important; opacity:1!important }
  .js .sector picture{ clip-path:none!important }
  .js .sector .sector__body{ opacity:1!important; transform:none!important }
  .js .sector img,.js .sector.is-visible img{ transform:none!important }
  .btn > span.shine{ display:none }
}

/* ---------- 17. Blur-in for lead paragraphs ---------- */
.js .blurin{ opacity:0; filter:blur(7px); transform:translateY(14px);
  transition:opacity 1s var(--ease), filter 1.1s var(--ease-out), transform 1.1s var(--ease-out) }
.js .blurin.is-visible{ opacity:1; filter:blur(0); transform:none }

/* ---------- 18. Eyebrow labels settle ---------- */
.js .label{ }
.js .label.settle{ opacity:0; letter-spacing:.42em; transition:opacity .8s var(--ease), letter-spacing 1.1s var(--ease-out) }
.js .label.settle.is-visible{ opacity:1; letter-spacing:.2em }

/* ---------- 19. Dual-panel image wipe ---------- */
.frame{ position:relative }
.frame .wipe{ position:absolute; inset:0; z-index:3; pointer-events:none; display:block }
.frame .wipe i{ position:absolute; top:0; bottom:0; width:50%; background:var(--navy-950); transition:transform 1.1s var(--ease-out) }
.frame .wipe i:first-child{ left:0; transform:translateX(0) }
.frame .wipe i:last-child{ right:0; transform:translateX(0) }
.js [data-reveal].is-visible .frame .wipe i:first-child,.js .frame-wrap.is-visible .wipe i:first-child{ transform:translateX(-101%) }
.js [data-reveal].is-visible .frame .wipe i:last-child,.js .frame-wrap.is-visible .wipe i:last-child{ transform:translateX(101%) }
.js .frame .wipe i:last-child{ transition-delay:80ms }

/* ---------- 20. Light sweep across dark sections ---------- */
.sweeper{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0 }
.sweeper span{ position:absolute; top:-40%; bottom:-40%; width:38%; left:-45%;
  background:linear-gradient(100deg,transparent,rgba(200,164,93,.09),rgba(255,255,255,.05),transparent);
  transform:skewX(-14deg) }
.js .is-visible > .sweeper span{ animation:sectionSweep 2.4s var(--ease-out) .15s 1 }
@keyframes sectionSweep{ from{ left:-45% } to{ left:120% } }
.section > .container,.section > .cta__inner{ position:relative; z-index:1 }

/* ---------- 21. Tab panel switch ---------- */
.js .switch__panel{ animation:panelIn .6s var(--ease-out) both }
@keyframes panelIn{ from{ opacity:0; transform:translateY(16px); filter:blur(5px) } to{ opacity:1; transform:none; filter:blur(0) } }

@media (prefers-reduced-motion:reduce){
  .js .blurin{ opacity:1!important; filter:none!important; transform:none!important }
  .js .label.settle{ opacity:1!important; letter-spacing:.2em!important }
  .frame .wipe{ display:none }
  .sweeper{ display:none }
  .js .switch__panel{ animation:none }
}

/* =========================================================
   22. Depth layer — CSS 3D (no libraries, GPU transforms only)
   ========================================================= */

/* hero reacts to the pointer, foreground and background at different depths */
.hero{ perspective:1400px; perspective-origin:50% 45% }
.hero__media{ transform-style:preserve-3d; will-change:transform }
.hero__content{ transform-style:preserve-3d }
.hero .display{ transform:translateZ(50px) }
.hero__slogan{ transform:translateZ(34px) }
.hero__eyebrow,.hero__text{ transform:translateZ(22px) }
.hero .btn-row{ transform:translateZ(40px) }
.hero__glow{ transform:translateZ(-60px) }

/* cards, tiles and sector panels arrive out of depth */
.js .cards,.js .tiles,.js .sectors,.js .project-grid{ perspective:1500px }
.js .card[data-reveal],.js .tile[data-reveal]{ opacity:0; transform:translateY(26px) translateZ(-90px) rotateX(7deg);
  transition:opacity .9s var(--ease), transform 1.1s var(--ease-out); transition-delay:var(--delay,0ms) }
.js .card[data-reveal].is-visible,.js .tile[data-reveal].is-visible{ opacity:1; transform:none }
.js .sector{ transform-style:preserve-3d }

/* hover depth */
@media (hover:hover) and (pointer:fine){
  .sector{ transition:transform .7s var(--ease-out), box-shadow .7s var(--ease) }
  .sector:hover{ transform:perspective(1100px) translateZ(26px) translateY(-6px); box-shadow:0 34px 60px rgba(2,6,14,.55) }
  .tile{ transform-style:preserve-3d }
  .tile:hover{ transform:perspective(1000px) translateY(-5px) rotateX(2deg) }
  .switch__btn:hover{ transform:translateZ(0) }
  .leader-strip,.statement,.match{ transition:transform .6s var(--ease-out), box-shadow .6s var(--ease) }
  .statement:hover,.match:hover{ transform:perspective(1200px) translateZ(14px) }
}

/* the opening mark assembles in three dimensions */
.intro{ perspective:900px }
.intro__mark{ transform-style:preserve-3d }
.intro.is-playing rect{ animation:barIn3d .75s var(--ease-out) forwards }
@keyframes barIn3d{
  from{ opacity:0; transform:translateZ(-140px) translateX(-26px) rotateY(38deg) }
  to{ opacity:1; transform:none } }
.intro.is-playing .dia{ animation:diaIn3d .9s var(--ease-out) .46s forwards }
@keyframes diaIn3d{
  from{ opacity:0; transform:rotateY(180deg) rotateZ(-90deg) scale(.2) }
  to{ opacity:1; transform:none } }

/* slowly turning gold marker in the global section */
.gem{ position:absolute; right:6vw; top:48%; width:clamp(96px,10vw,150px); aspect-ratio:1;
  transform:translateY(-50%); transform-style:preserve-3d; animation:gemSpin 18s linear infinite; pointer-events:none; z-index:1 }
.gem i{ position:absolute; inset:0; transform-style:preserve-3d }
.gem i::before,.gem i::after{ content:""; position:absolute; left:50%; top:50%; width:58%; height:58%; margin:-29% 0 0 -29%;
  background:linear-gradient(150deg, rgba(214,182,107,.16), rgba(200,164,93,.05) 60%, transparent);
  border:1px solid rgba(214,182,107,.6); box-shadow:0 0 26px rgba(200,164,93,.12) inset }
.gem i::before{ transform:rotateZ(45deg) translateZ(30px) }
.gem i::after{ transform:rotateZ(45deg) translateZ(-30px) }
.gem i:nth-child(2){ transform:rotateY(90deg) }
.gem i:nth-child(3){ transform:rotateX(90deg) }
@keyframes gemSpin{ from{ transform:translateY(-50%) rotateX(-18deg) rotateY(0) } to{ transform:translateY(-50%) rotateX(-18deg) rotateY(360deg) } }
@media (max-width:1023px){ .gem{ display:none } }

/* page change turns rather than fades */
.pagefade{ transform-origin:top center }
.pagefade.is-on{ animation:doorIn .42s var(--ease-out) }
@keyframes doorIn{ from{ transform:perspective(1400px) rotateX(-14deg); opacity:0 } to{ transform:none; opacity:1 } }

@media (prefers-reduced-motion:reduce){
  .hero .display,.hero__slogan,.hero__eyebrow,.hero__text,.hero .btn-row,.hero__glow{ transform:none!important }
  .js .card[data-reveal],.js .tile[data-reveal]{ opacity:1!important; transform:none!important }
  .gem{ display:none }
  .pagefade.is-on{ animation:none }
  .intro.is-playing rect,.intro.is-playing .dia{ animation:none; opacity:1; transform:none }
}

/* =========================================================
   23. Micro-interactions and polish
   ========================================================= */

/* press feedback — every control confirms the touch */
.btn:active{ transform:scale(.982) }
.nav__link:active,.submenu a:active,.mobile-nav a:active{ opacity:.75 }
.switch__btn:active{ background:var(--light-3) }
.card:active,.tile:active,.sector:active{ transform:scale(.995) }
.btn,.switch__btn,.card,.tile{ -webkit-tap-highlight-color:transparent }

/* ripple from the point of contact */
.btn .ripple,.switch__btn .ripple{ position:absolute; border-radius:50%; pointer-events:none; z-index:2;
  background:radial-gradient(circle, rgba(255,255,255,.42), rgba(255,255,255,0) 68%);
  transform:translate(-50%,-50%) scale(0); animation:rippleOut .62s var(--ease-out) forwards }
.section--light .btn .ripple,.switch__btn .ripple{ background:radial-gradient(circle, rgba(10,20,36,.22), rgba(10,20,36,0) 68%) }
@keyframes rippleOut{ to{ transform:translate(-50%,-50%) scale(1); opacity:0 } }

/* counters */
.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,32px); margin-top:clamp(40px,5vw,72px) }
.stat{ position:relative; padding:clamp(24px,3vw,40px) clamp(20px,2.4vw,32px); border:1px solid var(--line);
  background:rgba(255,255,255,.014); overflow:hidden; transition:border-color .5s var(--ease), transform .6s var(--ease-out) }
.stat::before{ content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:linear-gradient(90deg,var(--gold),var(--gold-light));
  transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease-out); transition-delay:var(--delay,0ms) }
.stat.is-visible::before{ transform:scaleX(1) }
.stat:hover{ border-color:var(--line-gold); transform:translateY(-4px) }
.stat__value{ display:block; font-family:var(--display); font-weight:700; font-size:clamp(2.6rem,5vw,4.2rem); line-height:1;
  letter-spacing:-.03em; color:var(--white); font-variant-numeric:tabular-nums }
.stat__label{ display:block; margin-top:14px; font-size:.78rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold) }
.stat__note{ display:block; margin-top:12px; font-size:.95rem; color:var(--muted); line-height:1.55 }
.section--light .stat{ border-color:rgba(10,20,36,.14); background:#fff }
.section--light .stat__value{ color:var(--ink) }
.section--light .stat__label{ color:var(--gold-ink) }
.section--light .stat__note{ color:var(--ink-muted) }
@media (max-width:767px){ .stats{ grid-template-columns:1fr } }

/* images fade up as each one finishes loading */
.js img[loading="lazy"]{ opacity:0; transition:opacity .8s var(--ease) }
.js img[loading="lazy"].is-loaded,.no-js img[loading="lazy"]{ opacity:1 }

/* dropdown items arrive in sequence */
.submenu li{ opacity:0; transform:translateY(-6px); transition:opacity .3s var(--ease), transform .35s var(--ease-out) }
.nav__item:hover > .submenu li,.nav__item:focus-within > .submenu li{ opacity:1; transform:none }
.submenu li:nth-child(2){ transition-delay:30ms } .submenu li:nth-child(3){ transition-delay:60ms }
.submenu li:nth-child(4){ transition-delay:90ms } .submenu li:nth-child(5){ transition-delay:120ms }
.submenu li:nth-child(6){ transition-delay:150ms } .submenu li:nth-child(7){ transition-delay:180ms }

/* a slow float gives framed images their own life */
.frame-wrap{ animation:floatSlow 9s var(--ease) infinite alternate }
.split--reverse .frame-wrap{ animation-delay:-4.5s }
@keyframes floatSlow{ from{ transform:translateY(0) } to{ transform:translateY(-9px) } }

/* sending state on the enquiry form */
.btn[disabled]{ cursor:progress }
.btn .spin{ width:15px; height:15px; border:1.6px solid currentColor; border-top-color:transparent; border-radius:50%;
  display:inline-block; animation:spin .8s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* input focus micro-interaction */
.field{ position:relative }
.field label{ transition:color .3s var(--ease) }
.field:focus-within label{ color:var(--gold-light) }
.section--light .field:focus-within label{ color:var(--gold-ink) }

@media (prefers-reduced-motion:reduce){
  .frame-wrap{ animation:none }
  .btn .ripple,.switch__btn .ripple{ display:none }
  .js img[loading="lazy"]{ opacity:1 }
  .submenu li{ opacity:1; transform:none }
  .stat.is-visible::before{ transform:scaleX(1) }
  .btn .spin{ animation:none }
}