/* Spectra: About, "The Prism". Reads css/site.css for tokens, header, focus ring, .cta.
   A white beam hits the building; the building splits it into the brand spectrum; each ray carries one idea.
   No canvas, no WebGL: SVG mark + transforms/opacity, driven by js/about.js (scroll progress + one rAF loop).
   Base rules = the static, fully lit page (no JS, reduced motion). `.live` (added by JS when motion is welcome)
   turns the scenes into pinned, scroll-driven ones. */

:root{
  --r1:#fb1a08;--r2:#fe7a05;--r3:#fe9a04;--r4:#fce3a3;--r5:#f3d6e2;--r6:#cf99d3;--r7:#9c92f2;--r8:#3045e0;
  --r8t:#7d8cf5;                       /* the blue, lifted so type in it clears 4.5:1 on black */
  --pad:calc(var(--gut) + var(--sal));
}
html{-webkit-text-size-adjust:100%}
body{overflow-x:clip}
#main{padding-top:0;outline:none}
.ab-in{max-width:1400px;margin:0 auto;padding-inline:var(--pad)}

/* ================= HERO ================= */
.ab-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  max-width:1400px;margin:0 auto;padding:calc(var(--head) + 24px) var(--pad) 10svh}
.ab-hero h1{margin:0;font-family:var(--sans);font-weight:300;font-size:clamp(42px,8.4vw,128px);line-height:.98;
  letter-spacing:-.02em;color:var(--ink);text-wrap:balance;max-width:12.5em}
.ab-sub{margin:clamp(22px,4vh,40px) 0 0;max-width:30ch;font-size:clamp(19px,1.9vw,26px);font-weight:300;line-height:1.35;color:var(--soft)}
.hw{display:inline-block;white-space:nowrap}
.hl{display:inline-block;position:relative}
@media (scripting:enabled){
  .ab-hero h1:not(.ready){opacity:0}
  .ab-sub{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease) 1.5s,transform .9s var(--ease) 1.5s}
  .ab-hero.ready .ab-sub{opacity:1;transform:none}
}
/* white light refracts into colour, then settles */
@keyframes refract{
  0%{opacity:0;transform:translate3d(0,.3em,0) skewX(-7deg);color:var(--lc);text-shadow:-.09em 0 rgba(251,26,8,.9),.09em 0 rgba(48,69,224,.9)}
  50%{opacity:1;color:var(--lc);text-shadow:-.05em 0 rgba(251,26,8,.7),.05em 0 rgba(48,69,224,.7)}
  100%{opacity:1;transform:none;color:var(--ink);text-shadow:0 0 0 rgba(251,26,8,0),0 0 0 rgba(48,69,224,0)}
}
@keyframes flare{
  0%{color:var(--ink);text-shadow:0 0 0 rgba(251,26,8,0),0 0 0 rgba(48,69,224,0)}
  35%{color:var(--lc);text-shadow:-.06em 0 rgba(251,26,8,.75),.06em 0 rgba(48,69,224,.75)}
  100%{color:var(--ink);text-shadow:0 0 0 rgba(251,26,8,0),0 0 0 rgba(48,69,224,0)}
}
.live .hl{animation:refract 1.2s var(--ease) both;animation-delay:calc(var(--n)*42ms + 150ms)}
.live .hl.settled{animation:none}
.live .hl.hot{animation:flare .9s var(--ease) 1}

/* ================= THE PRISM ================= */


  background:radial-gradient(closest-side,rgba(252,227,163,.20),rgba(156,146,242,.10) 48%,rgba(0,0,0,0) 72%)}
.rm .pr-hint{display:none}

.live .pr{height:430vh}
.live .pr-stage{position:sticky;top:0;height:100vh;height:100svh}

/* ================= MISSION ================= */
.ms-stage{position:relative;padding:clamp(72px,12vh,140px) var(--pad)}
.ms-in{max-width:1300px;margin:0 auto}
.ms-vis{font-family:var(--sans);font-weight:300;color:var(--ink)}
.ms-l{display:block}
.ms-a{font-size:clamp(20px,2.7vw,38px);line-height:1.3;color:var(--ink);margin:0 0 clamp(14px,2.6vh,28px)}
.ms-k{font-size:clamp(30px,7.3vw,112px);line-height:1.04;letter-spacing:-.02em;margin:0 0 clamp(6px,1.4vh,14px)}
.ms-l{text-align:left;pointer-events:none;cursor:default;user-select:none}
.ms-rail{display:none}
.mw{display:inline-block;white-space:nowrap}
.lt{position:relative;display:inline-block;white-space:pre}
.lc{position:absolute;left:0;top:0;opacity:0;pointer-events:none}
.live .ms{height:400vh}
.live .ms-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-top:calc(var(--head) + 8px);padding-bottom:24px;overflow:clip}
.live .ms-in{width:100%}
.live .ms-rail{display:block;position:absolute;left:0;top:calc(var(--head) + 12px);bottom:24px;width:2px;background:var(--line);margin-left:calc(var(--gut) * .5)}
.live .ms-rail i{position:absolute;inset:0;background:linear-gradient(#fb1a08,#fe9a04,#fce3a3,#cf99d3,#9c92f2,#3045e0);transform-origin:50% 0;transform:scaleY(0);will-change:transform}

/* ================= VISION ================= */
.vs{max-width:1400px;margin:0 auto;padding:clamp(96px,20vh,220px) var(--pad) clamp(80px,14vh,160px)}
.vs-vis{max-width:1120px;margin-left:clamp(0px,11vw,170px)}
.vs-p{margin:0;font-size:clamp(20px,2.5vw,34px);font-weight:300;line-height:1.36;color:var(--soft);max-width:34ch}
.vs-big{margin:clamp(20px,4vh,40px) 0 0;font-size:clamp(34px,7vw,104px);line-height:1.04;font-weight:300;letter-spacing:-.02em;color:var(--ink)}
.vs-still,.vs-live{display:block;white-space:nowrap}
.vs-still{color:var(--dim)}
.vs-live{position:relative;margin-top:.04em;touch-action:pan-y pinch-zoom;cursor:default}
.vw{display:inline-block}
.pl{position:relative;display:inline-block;white-space:pre;will-change:transform}
.pc{position:absolute;left:0;top:0;opacity:0;pointer-events:none}
.live .vw{opacity:0;transform:translate3d(0,.45em,0);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i)*26ms)}
.live .vs.on .vw{opacity:1;transform:none}
.live .vs-still,.live .vs-live{opacity:0;transform:translate3d(0,.3em,0);transition:opacity 1s var(--ease) .9s,transform 1s var(--ease) .9s}
.live .vs-live{transition-delay:1.25s}
.live .vs.on .vs-still,.live .vs.on .vs-live{opacity:1;transform:none}

/* ================= FACTS ================= */
.fx{max-width:1400px;margin:0 auto;padding:clamp(40px,8vh,90px) var(--pad) clamp(80px,14vh,160px)}
.fx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,72px)}
.fx-row{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-top:clamp(22px,3.4vh,34px)}
.fx-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.fx-ray{display:none}
.fx-ray::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--c),var(--c) 55%,rgba(0,0,0,0));transform-origin:0 50%;transform:scaleX(0);opacity:.85}
.fx-ray b{position:absolute;left:0;top:-6px;bottom:-6px;width:20%;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 70%,rgba(255,255,255,0));opacity:0;transform:translate3d(-110%,0,0)}
.fx-n{margin:0;font-family:var(--sans);font-weight:300;font-size:clamp(52px,6.6vw,104px);line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.num{position:relative;display:inline-block;white-space:nowrap}
.num-g{visibility:hidden}
.num-l{position:absolute;left:0;top:0}
.fx-t{margin:0;font-size:clamp(16px,1.25vw,18px);line-height:1.45;color:var(--soft);max-width:24ch}
.fx-rooms{list-style:none;margin:clamp(34px,5vh,52px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px clamp(16px,2vw,28px)}
.fx-rooms li{font-family:var(--sans);font-size:clamp(15px,1.15vw,17px);font-weight:300;letter-spacing:.04em;color:var(--soft)}
.fx-note{margin:clamp(28px,4vh,40px) 0 0;padding-top:clamp(18px,2.6vh,26px);border-top:1px solid var(--line);color:var(--dim);font-size:clamp(15px,1.2vw,17px)}
.live .fx-t,.live .fx-n{opacity:0;transform:translate3d(0,18px,0);transition:opacity .9s var(--ease) .15s,transform .9s var(--ease) .15s}
.live .fx-row.on .fx-t,.live .fx-row.on .fx-n{opacity:1;transform:none}
.live .fx-rooms li{color:var(--dim)}
.live .fx-rooms.on li{animation:lamp 1.4s var(--ease) both;animation-delay:calc(var(--k)*150ms + 350ms)}
@keyframes lamp{0%{color:var(--dim)}30%{color:var(--c)}100%{color:var(--ink)}}
.fx-rooms li{font-family:var(--sans);font-size:clamp(15px,1.15vw,17px);font-weight:300;letter-spacing:.04em;color:var(--soft)}
@media (hover:hover){.fx-rooms li:hover{color:var(--c)!important;animation:none!important}}
.fx-n{cursor:default}

/* ================= FINALE: the rays come home ================= */
.en-stage{position:relative;min-height:70svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(60px,12vh,120px) var(--pad);max-width:1400px;margin:0 auto}
.en-lines{display:none}
.en-p{margin:0;font-family:var(--sans);font-weight:300;font-size:clamp(34px,6.6vw,104px);line-height:1.03;letter-spacing:-.02em;max-width:13em;color:var(--ink);position:relative;z-index:2}
.en-w{display:inline-block}
.en-tp{padding-bottom:.06em}
.en-p{touch-action:pan-y pinch-zoom;cursor:default}
.en-nw{color:var(--soft)}
.geo .en-lines{display:block;position:absolute;inset:0;pointer-events:none;overflow:hidden}
.en-lines i{position:absolute;left:0;top:0;height:2px;margin-top:-1px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(255,255,255,.9),var(--c) 12%,var(--c));mix-blend-mode:screen;will-change:transform,opacity}
.en-lines i.en-white{background:#fff;box-shadow:0 0 18px 3px rgba(255,255,255,.55);mix-blend-mode:normal;opacity:0}
.live .en{height:195vh}
.live .en-stage{position:sticky;top:0;height:100vh;height:100svh;min-height:0;padding-top:0;padding-bottom:0;justify-content:flex-start;overflow:clip}
.live .en-p{position:absolute;left:var(--pad);right:var(--pad);top:var(--ptop,52%)}
.live .en-w{opacity:0;transform:translate3d(0,.5em,0);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i)*70ms)}
.live .en-stage.on .en-w{opacity:1;transform:none}
.live .en-stage:not(.on) .en-w{transition-delay:0s;transition-duration:.35s}

/* ================= ACTIONS ================= */
.ac{max-width:1400px;margin:0 auto;padding:clamp(24px,5vh,56px) var(--pad) clamp(90px,16vh,180px)}
.ac-in{display:flex;flex-wrap:wrap;align-items:center;gap:20px clamp(28px,4vw,56px)}
.ac-book{min-height:60px;padding:0 36px;font-size:18px}
.ac-link{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:clamp(18px,1.6vw,21px);color:var(--ink);text-decoration:none}
.ac-link::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--spectrum);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease)}
.ac-link::before{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:rgba(252,252,252,.4)}
.ac-link:focus-visible::after{transform:scaleX(1)}@media (hover:hover){.ac-link:hover::after{transform:scaleX(1)}}

/* ================= PHONE ================= */
@media (max-width:759px){
  .live .pr{height:400vh}
  .live .ms{height:380vh}
  .ms-k{font-size:11vw}
  .ms-a{font-size:5vw}
  .live .en{height:185vh}
  .fx-grid{grid-template-columns:1fr;gap:clamp(24px,5vh,36px)}
  .vs-vis{margin-left:0}
  .fx-n{font-size:clamp(56px,18vw,88px)}
  .ac-book{width:100%}
}

/* ================= REDUCED MOTION / STATIC: all lit ================= */
.rm .ab-hero h1,.rm .ab-sub{opacity:1!important;transform:none!important;transition:none!important}
.rm .pr,.rm .ms,.rm .en{height:auto!important}
.rm .pr-stage,.rm .ms-stage,.rm .en-stage{position:relative!important}
@media (prefers-reduced-motion:reduce){
  .ab-hero h1,.ab-sub{opacity:1!important;transform:none!important;transition:none!important}
  .hl{animation:none!important}
  .fx-t,.fx-n,.vw,.vs-still,.vs-live,.en-w{transition:none!important}
  .ac-link::after{transition:none}
}