:root{
  --ink:#060C15; --ink-2:#0B1523; --ink-3:#16283f;
  --ivory:#F8F6F1; --ivory-2:#EFEBE1;
  --blue:#2E6BD6; --sky:#7FB0E8;
  --gold:#DCBB72; --gold-2:#C6A765; --gold-lo:#6B5119;
  --rule:rgba(6,12,21,.13); --rule-d:rgba(248,246,241,.15);
  --dim:#49535F; --dim-d:#94A6BB;
  --wrap:1560px; --pad:clamp(18px,4.5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
section,.worlds,#hc,#main>div{scroll-margin-top:96px}
body{background:var(--ivory);color:var(--ink);font-family:'Manrope',system-ui,sans-serif;font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%} a{color:inherit;text-decoration:none}
.w{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ── type system: Instrument Serif display + Inter Tight UI ── */
.d{font-family:'Prata',Georgia,serif;font-weight:400;letter-spacing:-.015em;line-height:.98}
.d em{font-style:normal;color:var(--gold-lo)}
.dark .d em{color:var(--gold)}
.lab{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lo)}
.dark .lab{color:var(--gold)}
.idx{font-family:'Prata',Georgia,serif;color:var(--gold-lo);font-size:15px;letter-spacing:.06em}
.dark .idx{color:var(--gold)}
.dim{color:var(--dim)} .dark .dim{color:var(--dim-d)}

.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--gold);color:var(--ink);padding:14px 22px;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* consent bar */
#cb{position:fixed;left:0;right:0;bottom:0;z-index:250;background:var(--ink-2);border-top:1px solid var(--gold);color:var(--ivory);padding:20px var(--pad);transform:translateY(110%);transition:transform .7s var(--ease)}
#cb.up{transform:none}
#cb .in{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center}
#cb p{font-size:14.5px;color:var(--dim-d);max-width:74ch}
#cb p b{color:var(--ivory);font-weight:600}
#cb .btns{display:flex;flex-wrap:wrap;gap:10px}
#cb .lnk{background:none;border:0;color:var(--dim-d);font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:underline;min-height:44px;padding:0 8px}
#cb .lnk:hover{color:var(--ivory)}
#cb .prefs{display:none;grid-column:1/-1;border-top:1px solid var(--rule-d);margin-top:16px;padding-top:16px;gap:20px;flex-wrap:wrap}
#cb.open .prefs{display:flex}
#cb .prefs label{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ivory);cursor:pointer;min-height:44px}
#cb .prefs input{width:17px;height:17px;accent-color:var(--gold)}
#cb .prefs em{font-style:normal;color:var(--dim-d);font-size:12.5px}
@media(max-width:860px){#cb .in{grid-template-columns:1fr;gap:14px}}
@media(max-width:640px){
  #cb{padding:15px var(--pad) 17px}
  #cb p{font-size:13.5px;line-height:1.5}
  #cb p .long{display:none}
  #cb .btns{gap:8px}
  #cb .btns .b{flex:1 1 100%}
  #cb .lnk{flex:1 1 auto;text-align:center;padding:0}
  #cb .prefs{gap:6px}
  #cb .prefs label{min-height:42px}
}
#prog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--sky));z-index:300;transition:width .1s linear}
#cur{position:fixed;top:0;left:0;width:32px;height:32px;border:1.5px solid var(--gold);border-radius:50%;pointer-events:none;z-index:290;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s,opacity .3s;mix-blend-mode:difference;opacity:0}
#cur.on{opacity:1} #cur.big{width:74px;height:74px;background:rgba(220,187,114,.16)}
@media(hover:none),(pointer:coarse){#cur{display:none}}

/* ── strip ── */
.strip{background:var(--ink);color:var(--dim-d);border-bottom:1px solid var(--rule-d)}
.strip .w{display:flex;justify-content:space-between;align-items:center;gap:18px;height:42px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;overflow:hidden}
.cities{display:flex;gap:22px;white-space:nowrap;min-width:0;flex:1 1 auto;align-items:center}
.ct{display:inline-flex;align-items:center;gap:7px}
.fl{width:19px;height:13px;flex:none;display:block;border:1px solid rgba(255,255,255,.25);overflow:hidden;line-height:0}
.fl svg{width:100%;height:100%;display:block}
.tm{font-style:normal;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.04em;min-width:62px;display:inline-block}
.tm .sc{opacity:.55}
.cities b{color:var(--ivory);font-weight:600}
.strip .meta{display:flex;gap:20px;white-space:nowrap;flex:none}

/* ── masthead ── */
.mast{position:sticky;top:0;z-index:100;background:rgba(248,246,241,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--rule);transition:background .35s,border-color .35s,color .35s}
.mast.inv{background:rgba(6,12,21,.86);border-color:var(--rule-d);color:var(--ivory)}
.mast .w{display:flex;align-items:center;justify-content:space-between;height:84px;gap:18px;min-width:0}
.wm{display:flex;align-items:center;min-width:0;min-height:48px}
.lg{height:clamp(30px,3vw,44px);width:auto;flex:none}
.lg-w{display:none}
.mast.inv .lg-b{display:none} .mast.inv .lg-w{display:block}

.wm .a{font-family:'Prata',Georgia,serif;font-size:clamp(15px,1.3vw,21px);letter-spacing:0;white-space:nowrap}
.wm .k{font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-lo);margin-top:5px;font-weight:600}
.mast.inv .wm .k{color:var(--gold)}
.menu{display:flex;gap:clamp(14px,1.8vw,32px);font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:600}
.menu a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--dim);overflow:hidden}
.mast.inv .menu a{color:var(--dim-d)}
.menu a span{display:block;transition:transform .4s var(--ease)}
.menu a::before{content:attr(data-t);position:absolute;left:0;top:50%;transform:translateY(140%);transition:transform .4s var(--ease);color:var(--gold-lo)}
.mast.inv .menu a::before{color:var(--gold)}
.menu a:hover span{transform:translateY(-140%)} .menu a:hover::before{transform:translateY(-50%)}
.cta{display:flex;align-items:center;gap:14px;flex:none}
.burger{display:none;width:48px;height:48px;background:none;border:0;cursor:pointer;flex-direction:column;gap:7px;align-items:flex-end;justify-content:center;color:inherit}
.burger i{display:block;height:1.5px;background:currentColor;width:28px}
.burger i:nth-child(2){width:19px}

/* ── buttons ── */
.b{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--gold);color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:18px 32px;min-height:52px;border:0;cursor:pointer;font-family:inherit;overflow:hidden;transition:color .4s var(--ease),transform .25s var(--ease)}
.b span{position:relative;z-index:2}
.b::after{content:"";position:absolute;inset:0;background:var(--ivory);transform:translateY(101%);transition:transform .45s var(--ease);z-index:1}
.b:hover::after{transform:translateY(0)}
.b.sm{padding:13px 22px;min-height:46px;font-size:11.5px}
.u{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:15px 0;min-height:48px;border-bottom:1.5px solid currentColor;transition:color .3s}
.u:hover{color:var(--gold-lo)} .dark .u:hover{color:var(--gold)}
.u .ar{font-family:'Manrope',system-ui,sans-serif;font-weight:400;font-size:16px;transition:transform .35s var(--ease)}
.u:hover .ar{transform:translateX(7px)}


/* ── motion layer ── */
/* page intro curtain */
#curtain{position:fixed;inset:0;z-index:500;background:var(--ink);display:grid;place-items:center;transition:transform 1.05s var(--ease),opacity .5s ease .6s}
#curtain.up{transform:translateY(-101%);opacity:0;pointer-events:none}
/* The opener is the mark, not a sentence. A gold ring draws itself around
   the emblem while the tree settles into place. The emblem's own disc is ink,
   the same value as the curtain, so what actually reads is the white tree
   inside a ring being struck. */
#curtain .cmk{position:relative;display:block;
  width:clamp(96px,10vw,140px);height:clamp(96px,10vw,140px)}
#curtain .cmk svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Order matters: the mark arrives first, then the ring closes around it.
   The reverse reads as a loading spinner. */
#curtain .cring{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:289;stroke-dashoffset:289;              /* 2 x pi x r, r=46 */
  transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset .78s var(--ease) .16s}
#curtain .ctree{position:absolute;inset:15%;
  background:url("/assets/img/icon-512.png") center/contain no-repeat;
  opacity:0;transform:scale(.92);
  transition:opacity .45s var(--ease),transform .7s var(--ease)}
#curtain.in .cring{stroke-dashoffset:0}
#curtain.in .ctree{opacity:1;transform:none}
#curtain .cbar{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .95s var(--ease)}
#curtain.in .cbar{width:100%}

/* drifting aurora behind the hero */
.aur{position:absolute;inset:-20% -10% -10% -20%;z-index:0;pointer-events:none;opacity:.85}
.aur i{position:absolute;display:block;border-radius:50%;filter:blur(60px);opacity:.5}
.aur i:nth-child(1){width:46vw;height:46vw;background:rgba(46,107,214,.42);left:-6%;bottom:-14%;animation:drift1 26s ease-in-out infinite alternate}
.aur i:nth-child(2){width:34vw;height:34vw;background:rgba(220,187,114,.16);right:4%;top:-10%;animation:drift2 32s ease-in-out infinite alternate}
.aur i:nth-child(3){width:26vw;height:26vw;background:rgba(127,176,232,.18);left:38%;top:24%;animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(9vw,-6vh,0) scale(1.16)}}
@keyframes drift2{to{transform:translate3d(-7vw,7vh,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(5vw,9vh,0) scale(.9)}}
@media(max-width:900px){
  .aur i{animation:none;filter:blur(42px);opacity:.42}
  .aur i:nth-child(3){display:none}
}

/* word-level reveal for headings */
.split .wd{display:inline-block;overflow:hidden;vertical-align:top}
.split .wd>i{display:inline-block;font-style:inherit;color:inherit;transform:translateY(108%);transition:transform .95s var(--ease)}
.split.go .wd>i{transform:translateY(0)}

/* rule that draws itself across a section head */
.head{position:relative}
.head::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease)}
.head.drawn::after{transform:scaleX(1)}

/* scroll cue */
.cue{position:absolute;left:var(--pad);bottom:26px;z-index:5;display:flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim-d);font-weight:700}
.cue .ln{display:block;width:54px;height:1px;background:rgba(248,246,241,.25);position:relative;overflow:hidden}
.cue .ln::after{content:"";position:absolute;inset:0;background:var(--gold);transform:translateX(-100%);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media(max-width:980px){.cue{display:none}}

/* marquee reacts to scroll speed */
.rail-tr{will-change:transform}
.rail .vp{transition:transform .5s var(--ease)}

/* peek tilts toward the cursor */
#peek .in{transition:transform .35s var(--ease);transform-style:preserve-3d}

@media(prefers-reduced-motion:reduce){
  #curtain{display:none}
  .aur i{animation:none}
  .split .wd>i{transform:none!important}
  .head::after{transform:scaleX(1)!important}
  .cue .ln::after{animation:none}
  #jcurve{stroke-dashoffset:0!important}
}

/* ── motion primitives ── */
.ln{display:block;overflow:hidden}
.ln>span{display:block;transform:translateY(105%);transition:transform 1.05s var(--ease)}
.go .ln>span{transform:translateY(0)}
.ln:nth-child(2)>span{transition-delay:.09s}.ln:nth-child(3)>span{transition-delay:.18s}.ln:nth-child(4)>span{transition-delay:.27s}
.rv{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv,.ln>span{opacity:1!important;transform:none!important;transition:none!important}
 .spin,.rail-tr,.ecg path{animation:none!important}}

/* ── hero ── */
/* ── hero ──────────────────────────────────────────────────────────────────
   Full bleed photograph, text sitting in the dark left third of the frame
   where the room falls away. The scrim is two gradients rather than one flat
   wash: across, to hold the headline; and down, so the header and the scroll
   cue keep their footing without greying the whole picture. */
.hero{background:var(--ink);color:var(--ivory);position:relative;overflow:hidden;
  min-height:calc(100svh - var(--chrome,0px));display:flex;align-items:center;
  padding:clamp(72px,8vw,108px) 0 clamp(40px,4.4vw,64px)}
/* The photograph is held to the right of the frame rather than centred, so
   the headline never crosses OC's face. The seam on its left is dissolved by
   the scrim, so it still reads as one full-bleed image and not as a panel. */
.hphoto{position:absolute;top:-4%;bottom:-4%;right:-2%;left:26%;z-index:0;
  transform:scale(1.03);will-change:transform}
/* Two frames, crossfading. Each carries its own focal point, because the
   subject does not sit in the same place in both. */
.hphoto .hs{position:absolute;inset:0;display:block;
  background-size:cover;background-repeat:no-repeat;background-position:center;
  opacity:0;transition:opacity 1.15s var(--ease)}
.hphoto .hs.on{opacity:1}

.hdots{position:absolute;right:var(--pad);bottom:clamp(28px,3vw,42px);z-index:5;
  display:flex;gap:10px;pointer-events:auto}
.hdots button{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center}
.hdots button::before{content:"";width:26px;height:2px;background:rgba(248,246,241,.28);
  transition:background .4s var(--ease)}
.hdots button[aria-current="true"]::before{background:var(--gold)}
.hdots button:hover::before{background:rgba(248,246,241,.6)}
.hscrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,var(--ink) 0%,var(--ink) 24%,rgba(6,12,21,.92) 36%,
                          rgba(6,12,21,.60) 48%,rgba(6,12,21,.18) 62%,rgba(6,12,21,.06) 100%),
    linear-gradient(180deg,rgba(6,12,21,.78) 0%,rgba(6,12,21,.06) 24%,
                           rgba(6,12,21,.16) 58%,rgba(6,12,21,.78) 100%)}
/* .w carries margin:0 auto for the normal page flow. Inside a flex hero that
   auto margin centres it, so the copy drifted into the middle of the picture.
   Pinning the width keeps it left where the frame is dark. */
.hero .w{position:relative;z-index:3;width:100%;margin-left:0;margin-right:auto}
.hero h1{font-size:clamp(42px,5.6vw,92px);margin:20px 0 0;max-width:12ch}
.hero h1 em{color:var(--gold)}
.hbot{display:grid;grid-template-columns:minmax(0,1fr);max-width:640px;gap:clamp(26px,4vw,64px);align-items:end;margin-top:clamp(28px,3.4vw,52px)}
.hero .sub{max-width:44ch;color:#C6D3E2;font-size:clamp(15.5px,1.15vw,18.5px)}
.acts{display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-top:34px}
.hfig{position:relative;align-self:end}
.hfig .fill{aspect-ratio:4/4.7;background:linear-gradient(165deg,#17293f,#060C15);display:grid;place-items:center;overflow:hidden}
.hfig .fill span{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(248,246,241,.3);text-align:center;line-height:2.1}
.orbit{position:absolute;pointer-events:none;inset:auto -10% -28% auto;width:min(88vw,1000px);opacity:.9;z-index:1}
.orbit circle{fill:none;stroke:var(--gold);stroke-width:.7;opacity:.38}
.orbit .spin{transform-origin:300px 300px;animation:spin 80s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.glow{position:absolute;inset:auto auto -20% -10%;width:60vw;height:60vw;max-width:760px;max-height:760px;background:radial-gradient(circle,rgba(46,107,214,.2),transparent 66%);z-index:0;pointer-events:none}

/* ── rail ── */
.rail{background:var(--ink-2);color:var(--ivory);border-top:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d);position:relative;z-index:4}
.rail .in{display:flex;align-items:center}
.rail .tag{flex:none;padding:0 24px;height:66px;display:flex;align-items:center;background:var(--gold);color:var(--ink)}
.rail .tag span{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.rail .vp{overflow:hidden;flex:1}
.rail-tr{display:flex;width:max-content;animation:marq 52s linear infinite}
.rail:hover .rail-tr{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.rail a{display:flex;align-items:center;gap:14px;height:66px;padding:0 30px;border-right:1px solid var(--rule-d);white-space:nowrap;font-size:14.5px;transition:background .3s}
.rail a:hover{background:var(--ink-3)}
.rail a i{font-family:'Prata',Georgia,serif;font-style:normal;color:var(--gold);font-size:13px;letter-spacing:.06em}
.rail a b{font-weight:600} .rail a s{text-decoration:none;color:var(--dim-d)}

/* ── proof ── */
.proof{background:var(--ivory);border-bottom:1px solid var(--rule)}
.proof .w{display:grid;grid-template-columns:repeat(5,1fr)}
.proof div{padding:clamp(34px,4vw,62px) 14px;text-align:center;border-right:1px solid var(--rule)}
.proof div:first-child{border-left:1px solid var(--rule)}
.proof b{display:block;font-family:'Prata',Georgia,serif;font-size:clamp(30px,3.9vw,60px);line-height:1;letter-spacing:-.02em}
.proof span{display:block;margin-top:11px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* ── sections ── */
section{padding:clamp(72px,9vw,150px) 0}
.dark{background:var(--ink);color:var(--ivory)}
.head{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline;border-top:1px solid var(--rule);padding-top:22px;margin-bottom:clamp(34px,4vw,60px)}
.dark .head{border-color:var(--rule-d)}
.h2{font-size:clamp(34px,5.2vw,92px)}
.h2 em{color:var(--gold-lo)} .dark .h2 em{color:var(--gold)}

/* ── worlds ── */
.worlds{border-top:1px solid var(--rule);position:relative}
.world{display:grid;grid-template-columns:96px 1.05fr 1.25fr 60px;align-items:center;gap:20px;padding:clamp(24px,2.7vw,38px) var(--pad);border-bottom:1px solid var(--rule);max-width:var(--wrap);margin:0 auto;position:relative;transition:padding-left .55s var(--ease),color .45s}
.world::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease);z-index:0}
.world:hover::before{transform:scaleY(1);transform-origin:top}
.world>*{position:relative;z-index:1}
.world .n{font-family:'Prata',Georgia,serif;font-size:21px;letter-spacing:.06em;color:var(--gold-lo);transition:color .45s}
.world .t{font-family:'Prata',Georgia,serif;font-size:clamp(30px,3.7vw,60px);letter-spacing:-.015em;line-height:1.02}
.world .dsc{color:var(--dim);font-size:16.5px;max-width:44ch;transition:color .45s}
.world .g{justify-self:end;font-family:'Manrope',system-ui,sans-serif;font-size:24px;color:var(--gold-lo);opacity:.4;transform:translateX(-12px);transition:.5s var(--ease)}
.world:hover{color:var(--ivory);padding-left:calc(var(--pad) + 26px)}
.world:hover .n,.world:hover .g{color:var(--gold);opacity:1}
.world:hover .dsc{color:#BCCADA} .world:hover .g{transform:translateX(0)}
#peek{position:fixed;top:0;left:0;width:300px;height:372px;pointer-events:none;z-index:80;opacity:0;transform:translate(-50%,-50%) scale(.86);transition:opacity .6s var(--ease),transform .6s var(--ease)}
#peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#peek .in{width:100%;height:100%;background:linear-gradient(160deg,#1b3252,#060C15);border:1px solid rgba(220,187,114,.4);display:grid;grid-template-rows:1fr auto;overflow:hidden}
#peek .peek-art{position:relative;display:grid;place-items:center;overflow:hidden;color:var(--gold)}
#peek .peek-art svg{width:58%;height:auto;opacity:.9}
#peek .peek-art img{width:100%;height:100%;object-fit:cover}
#peek .peek-cap{border-top:1px solid rgba(220,187,114,.3);padding:15px 18px;background:rgba(6,12,21,.6)}
#peek .peek-cap span{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
@media(hover:none),(pointer:coarse){#peek{display:none}}

/* ── the journey: an ascending curve ── */
.jn-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(30px,4.6vw,78px);align-items:center}
.jn-chart{position:relative}
.jn-chart svg{width:100%;height:auto;display:block;overflow:visible}
.jn-chart .jg-grid,#jcurve,#jfill{pointer-events:none}
.jn-chart .nd{pointer-events:auto}
.jn-chart .ndx{pointer-events:none}
#jcurve{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.15s var(--ease)}
#jclip-r{transition:width 1.15s var(--ease)}
.jn-chart .nd{cursor:pointer}
.jn-chart .nd .hit{fill:transparent;stroke:none}
.jn-chart .nd .halo{fill:none;stroke:#DCBB72;stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .5s var(--ease)}
.jn-chart .nd.on .halo{opacity:.5;animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{r:9;opacity:.55}100%{r:26;opacity:0}}
.jn-chart .nd .dot{fill:#060C15;stroke:#DCBB72;stroke-width:2;transition:all .5s var(--ease)}
.jn-chart .nd.on .dot{fill:#DCBB72;r:8}
.jn-chart .stem{stroke:rgba(220,187,114,.32);stroke-width:1;stroke-dasharray:3 5;opacity:0;transition:opacity .5s}
.jn-chart .ndx.on .stem{opacity:1}
.jn-chart .lab{fill:rgba(148,166,187,.75);font-family:'Manrope',sans-serif;font-size:15px;font-weight:700;letter-spacing:.14em;transition:fill .4s}
.jn-chart .ndx.on .lab{fill:#DCBB72}
.jn-cap{display:flex;align-items:baseline;gap:14px;margin-top:20px;border-top:1px solid var(--rule-d);padding-top:16px}
.jn-cap span{font-family:'Prata',Georgia,serif;font-size:clamp(19px,1.6vw,26px);color:var(--ivory)}
.jn-cap em{font-style:normal;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-d);font-weight:700;margin-left:auto}
.jn-side .h2{margin-bottom:clamp(24px,3vw,40px)}
.lvs{border-top:1px solid var(--rule-d)}
.lv{display:grid;grid-template-columns:50px 1fr;gap:4px 14px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule-d);padding:16px 0;cursor:pointer;font:inherit;color:var(--dim-d);transition:color .4s var(--ease),padding-left .5s var(--ease)}
.lv:hover{padding-left:8px}
.lv-no{font-family:'Prata',Georgia,serif;font-size:14px;letter-spacing:.12em;color:var(--gold);opacity:.4;transition:opacity .4s}
.lv-t{font-family:'Prata',Georgia,serif;font-size:clamp(19px,1.75vw,29px);line-height:1.08;letter-spacing:-.012em;color:var(--dim-d);transition:color .4s var(--ease)}
.lv-x{grid-column:2;display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s var(--ease),opacity .5s var(--ease)}
.lv-x>span{overflow:hidden;display:block}
.lv-s{font-size:15.5px;color:#BCCADA;padding-top:8px}
.lv-do{font-size:11.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);padding-top:10px}
.lv.on .lv-no{opacity:1} .lv.on .lv-t{color:var(--ivory)}
.lv.on .lv-x{grid-template-rows:1fr;opacity:1}
@media(max-width:980px){.jn-grid{grid-template-columns:1fr;gap:36px}.jn-chart{order:2}.jn-side{order:1}}
@media(max-width:640px){.lv{grid-template-columns:40px 1fr}.jn-chart .lab{font-size:20px}}
/* ── health check ── */
.hc{position:relative;overflow:hidden}
.hc .w{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,88px);align-items:center;position:relative;z-index:2}
.hc .steps{border-top:1px solid var(--rule-d)}
.hc .steps>div{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid var(--rule-d)}
.hc .steps i{font-family:'Prata',Georgia,serif;font-style:normal;color:var(--gold);font-size:15px;letter-spacing:.06em}
.hc .steps b{display:block;font-weight:600;font-size:18px;margin-bottom:3px}
.hc .steps p{color:var(--dim-d);font-size:15px}
.ecg{position:absolute;left:0;right:0;bottom:6%;height:200px;opacity:.2;z-index:1}
.ecg path{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-dasharray:2600;stroke-dashoffset:2600}
.ecg.go path{animation:draw 5.5s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ── press ── */
.press{padding:clamp(36px,4vw,60px) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.press .w{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.press .nm{font-family:'Prata',Georgia,serif;font-size:clamp(19px,2vw,29px);color:var(--dim);transition:color .35s}
.press .nm:hover{color:var(--ink)}

/* ── a word from OC ── */
.word{background:var(--ivory-2)}
.word .w{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:center}
.word .pf{aspect-ratio:1/1.16;background:linear-gradient(160deg,#DED6C4,#C9BFA8);display:grid;place-items:center}
.word .pf span{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(6,12,21,.4);text-align:center;line-height:2}
.word q{quotes:none;display:block;font-family:'Prata',Georgia,serif;font-size:clamp(24px,3vw,46px);line-height:1.22;letter-spacing:-.012em}
.word .nmx{margin-top:26px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--gold-lo)}

/* ── testimonial slider ── */
.slid{position:relative;overflow:hidden}
.stage{position:relative;min-height:clamp(300px,32vw,420px)}
.sl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;visibility:hidden;transition:opacity .8s var(--ease),transform .8s var(--ease);transform:translateY(34px) scale(.985)}
.sl.on{opacity:1;visibility:visible;transform:none}
.sl.out{opacity:0;visibility:visible;transform:translateY(-26px) scale(.99)}
.sl q{quotes:none;display:block;font-family:'Prata',Georgia,serif;font-size:clamp(26px,3.9vw,64px);line-height:1.16;letter-spacing:-.015em;max-width:19ch;margin:0 auto}
.sl cite{display:block;margin-top:32px;font-style:normal}
.sl cite b{display:block;font-family:'Prata',Georgia,serif;font-size:19px;font-weight:400;color:var(--ivory);letter-spacing:-.01em}
.sl cite span{display:block;margin-top:6px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-d);font-weight:600}
.snav{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:clamp(26px,3vw,44px)}
.sdots{display:flex;gap:10px}
.sdots button{width:38px;height:44px;border:0;padding:0;background:none;cursor:pointer;position:relative;display:grid;align-items:center}
.sdots button::before{content:"";display:block;height:3px;background:rgba(248,246,241,.22)}
.sdots button i{position:absolute;left:0;right:0;top:50%;margin-top:-1.5px;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left}

.sdots button.on i{animation:fillbar 6.5s linear forwards}
@keyframes fillbar{to{transform:scaleX(1)}}
.sarr{width:52px;height:52px;border:1px solid var(--rule-d);background:none;color:var(--ivory);cursor:pointer;font-family:'Manrope',system-ui,sans-serif;font-size:18px;transition:.35s var(--ease)}
.sarr:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* ── footer ── */
footer{background:var(--ink);color:var(--dim-d);padding:clamp(60px,7vw,110px) 0 34px;border-top:1px solid var(--rule-d)}
.fmark{font-size:clamp(38px,7.2vw,132px);color:var(--ivory);margin-bottom:44px;line-height:1.02}
.fmark em{color:var(--gold)}
.fsub{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;border-top:1px solid var(--rule-d);border-bottom:1px solid var(--rule-d);padding:26px 0;margin-bottom:38px}
.fsub .t{flex:1 1 260px;min-width:0}
.fsub .t b{display:block;font-family:'Prata',Georgia,serif;font-size:26px;color:var(--ivory);letter-spacing:-.02em}
.fsub .t span{font-size:14px}
.fsub form{display:flex;flex-wrap:wrap;gap:12px;flex:1 1 300px;min-width:0;align-items:flex-end}
.fsub input{flex:1;min-width:0;background:none;border:0;border-bottom:1px solid var(--rule-d);color:var(--ivory);font:inherit;font-size:16px;padding:12px 0;min-height:48px}
.fsub input::placeholder{color:rgba(148,166,187,.5)}
.fsub input:focus{outline:none;border-color:var(--gold)}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.fcols h4{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-weight:600}
.fcols ul{list-style:none;font-size:15px}
.fcols li a{display:inline-flex;align-items:center;min-height:44px;transition:color .3s,padding-left .3s}
.fcols li a:hover{color:var(--ivory);padding-left:7px}
.fbase{margin-top:46px;padding-top:22px;border-top:1px solid var(--rule-d);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}

/* ── mobile menu ── */
.mm{position:fixed;inset:0;background:var(--ink);color:var(--ivory);z-index:200;display:none;flex-direction:column;padding:20px var(--pad) 44px;overflow-y:auto}
.mm.open{display:flex}
.mm .top{display:flex;justify-content:space-between;align-items:center;height:60px;margin-bottom:22px}
.mm .x{background:none;border:0;color:var(--ivory);font-size:38px;line-height:1;cursor:pointer;width:48px;height:48px}
.mm a.l{font-family:'Prata',Georgia,serif;font-size:clamp(28px,7.6vw,46px);letter-spacing:-.01em;padding:12px 0;border-bottom:1px solid var(--rule-d);display:flex;justify-content:space-between;align-items:center}
.mm a.l i{font-style:normal;font-family:'Prata',Georgia,serif;color:var(--gold);font-size:15px;letter-spacing:.06em}
.mm .b{margin-top:30px}

/* ── responsive ── */
@media(max-width:1180px){.menu{gap:14px;font-size:12px}}
@media(max-width:1024px){
  .menu,.cta .b{display:none} .burger{display:flex} .strip .meta{display:none}
  .cities .ct:nth-child(n+4){display:none}
  .hbot{grid-template-columns:1fr}
  .orbit{inset:auto -45% -12% auto;width:135vw;opacity:.6}
  .hc .w,.word .w{grid-template-columns:1fr} .word .pf{max-width:420px}
  .proof .w{grid-template-columns:repeat(3,1fr)}
  .proof div:nth-child(3n+1){border-left:1px solid var(--rule)}
  .fcols{grid-template-columns:1fr 1fr}
  .veh .panels{flex-direction:column;height:auto}
  .veh .p{flex:none;min-height:150px;padding:22px}
  .veh .p.open{flex:none} .veh .p .body{max-height:none;opacity:1;margin-top:12px}
  .veh .p::after{opacity:.9}
}
@media(max-width:640px){
  .world{grid-template-columns:50px 1fr;gap:6px 14px}
  .world .dsc{grid-column:2;font-size:15.5px} .world .g{display:none}
  .world:hover{padding-left:var(--pad)}
  .proof .w{grid-template-columns:1fr 1fr}
  .proof div{border-left:0!important} .proof div:nth-child(odd){border-left:1px solid var(--rule)!important}
  .fcols{grid-template-columns:1fr} .ecg{display:none}
  .cities{gap:16px;font-size:10.5px} .cities .ct:nth-child(n+3){display:none}
  .press .w{justify-content:center;gap:16px}
  .fsub form{flex:1 1 100%}
  .fsub input{flex:1 1 100%}
  .fsub form .b{width:100%}
  .snav{gap:16px} .sarr{width:46px;height:46px}
}

/* ── page-level components added for the inner pages ── */
.band-cta{padding:clamp(52px,6vw,90px) 0;border-top:1px solid var(--rule-d)}
.band-cta .h2{font-size:clamp(30px,4vw,62px)}
.side{position:sticky;top:110px}
.card{background:#fff;border:1px solid var(--line,var(--rule));border-radius:0;padding:26px;transition:.4s var(--ease)}
.dark .card{background:var(--ink-2);border-color:var(--rule-d)}
.card h3{font-family:'Prata',Georgia,serif;font-weight:400;font-size:20px;letter-spacing:-.01em;margin-bottom:9px}
.dark .card h3{color:var(--ivory)}
.card p{color:var(--dim);font-size:15px}
.dark .card p{color:var(--dim-d)}
.card:hover{border-color:var(--gold)}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.tier{border:1px solid var(--rule-d);padding:28px;position:relative;background:var(--ink-2);display:flex;flex-direction:column}
.tier.pop{border-color:var(--gold)}
.tier .tag{position:absolute;top:-11px;left:24px;background:var(--gold);color:var(--ink);font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 11px}
.pill{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#6B5119;border:1px solid rgba(107,81,25,.45);padding:5px 10px}
.dark .pill,.tier .pill{color:#E6CF95;border-color:rgba(230,207,149,.45)}
.tier .acts{margin-top:auto;padding-top:20px}
.check{list-style:none;display:grid;gap:9px}
.check li{padding-left:24px;position:relative;font-size:15px;color:var(--dim-d)}
/* A tick, not a floating dash. A 1px line used as a bullet reads as
   decoration rather than a mark, and it is the single most obvious
   template tic in this kind of layout. */
.check li::before{content:"\2713";position:absolute;left:0;top:1px;width:auto;height:auto;background:none;color:var(--gold-lo);font-size:13px;line-height:1.5;font-weight:700}
.dark .check li::before{color:var(--gold)}
.vhs{border-top:1px solid var(--rule)}
.vh{display:grid;grid-template-columns:66px 1fr 1.25fr auto;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--rule)}
.vh-n{font-family:'Prata',Georgia,serif;color:var(--gold-lo);font-size:14px;letter-spacing:.12em}
.vh-t{font-family:'Prata',Georgia,serif;font-size:clamp(21px,2.1vw,32px);letter-spacing:-.015em}
.vh-d{color:var(--dim);font-size:16px}
.vh-l{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lo);text-align:right}
.evs{border-top:1px solid var(--rule)}
.ev-row{display:grid;grid-template-columns:96px 1fr 1.15fr 50px;gap:20px;align-items:center;padding:clamp(22px,2.4vw,32px) 0;border-bottom:1px solid var(--rule);position:relative;transition:padding-left .5s var(--ease),color .4s}
.ev-row:hover{padding-left:20px;color:var(--ink)}
.ev-cad{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lo)}
.ev-t{font-family:'Prata',Georgia,serif;font-size:clamp(21px,2.2vw,34px);letter-spacing:-.015em}
.ev-d{color:var(--dim);font-size:16px}
.ev-g{justify-self:end;font-size:22px;color:var(--gold-lo);opacity:.4;transition:.4s var(--ease)}
.ev-row:hover .ev-g{opacity:1;transform:translateX(5px)}
.book{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:start}
.cover{aspect-ratio:2/3;background-color:#0B1523;background-image:linear-gradient(160deg,#1c3352,var(--ink));display:grid;place-items:center;color:#F0DFB4;font-family:'Prata',serif;font-size:13px;text-align:center;padding:12px;line-height:1.35}
.note{background:rgba(220,187,114,.08);border:1px solid rgba(220,187,114,.35);padding:15px 18px;font-size:14.5px;color:var(--dim)}
.dark .note{color:var(--dim-d)}
.vid{aspect-ratio:16/9;background:var(--ink-2);border:1px solid var(--rule-d);display:grid;place-items:center}
.vid .play{width:58px;height:58px;border-radius:50%;background:var(--gold);display:grid;place-items:center;color:var(--ink);font-size:19px}
.path{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.path a{border:1px solid var(--rule);padding:26px;transition:.4s var(--ease)}
.path a:hover{border-color:var(--gold)}
.path a b{display:block;font-family:'Prata',Georgia,serif;font-weight:400;font-size:22px;margin-bottom:8px}
.path a span{color:var(--dim);font-size:15px;display:block}
.path a i{display:block;margin-top:14px;font-style:normal;color:var(--gold-lo);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.form-card{background:#fff;border:1px solid var(--rule);padding:clamp(22px,3vw,34px);display:grid;gap:18px}
.dark .form-card{background:var(--ink-2);border-color:var(--rule-d)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-card label{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:8px;font-weight:700}
.form-card input,.form-card select,.form-card textarea{width:100%;font:inherit;font-size:16.5px;padding:12px 0;background:none;border:0;border-bottom:1px solid var(--rule);color:var(--text);min-height:48px}
.dark .form-card input,.dark .form-card select,.dark .form-card textarea{border-color:var(--rule-d);color:var(--ivory)}
.form-card textarea{min-height:110px;resize:vertical}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:none;border-color:var(--gold)}
.phone{display:grid;grid-template-columns:118px 1fr;gap:12px}
.micro{font-size:13px;color:var(--dim-2,var(--dim))}
.logos{display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.steps{display:grid;gap:14px}
.steps>div{border-top:1px solid var(--rule);padding-top:16px}
.dark .steps>div{border-color:var(--rule-d)}
.steps h3{font-family:'Prata',Georgia,serif;font-weight:400;font-size:19px;margin-bottom:5px}
.dark .steps h3{color:var(--ivory)}
.steps p{font-size:14.5px;color:var(--dim)}
.dark .steps p{color:var(--dim-d)}
@media(max-width:1024px){.g4{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr}.path{grid-template-columns:1fr}}
@media(max-width:980px){
  .side{position:static}
  section .w[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  .band-cta .w{grid-template-columns:1fr!important}
  .vh{grid-template-columns:52px 1fr;gap:6px 14px}.vh-d,.vh-l{grid-column:2;text-align:left}
  .ev-row{grid-template-columns:80px 1fr}.ev-d{grid-column:2}.ev-g{display:none}
}
@media(max-width:640px){
  .g2,.g3,.g4{grid-template-columns:1fr}.f2{grid-template-columns:1fr}
  .book{grid-template-columns:84px 1fr}.phone{grid-template-columns:104px 1fr}
  .vh{grid-template-columns:40px 1fr}.ev-row{grid-template-columns:1fr}.ev-row .ev-cad{grid-column:1}
}

/* contrast corrections for the light ground */
.proof b{color:var(--ink)}
.proof span{color:var(--dim)}

.card p,.steps p,.vh-d,.ev-d,.path a span,.micro{color:var(--dim)}
.note{color:#4A3D1C}

.cover{color:#F0DFB4}

/* ── form states ───────────────────────────────────────────────────────────
   The honeypot is pushed off-screen rather than display:none, because bots skip
   hidden fields, but a person never reaches this one either way. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.fmsg{margin:0;font-size:14.5px;line-height:1.55;min-height:0}
form:not([data-state]) .fmsg,form[data-state=""] .fmsg{display:none}

form[data-state="sending"] .fmsg{color:var(--dim)}
.dark form[data-state="sending"] .fmsg{color:var(--dim-d)}

/* Success and failure are carried by a rule and a word, not by a coloured
   box. Colour alone is not a message. */
form[data-state="sent"] .fmsg{
  color:var(--gold-lo);border-left:2px solid var(--gold);padding-left:14px;font-weight:600}
.dark form[data-state="sent"] .fmsg{color:var(--gold)}

form[data-state="error"] .fmsg{
  color:#8A2417;border-left:2px solid #8A2417;padding-left:14px;font-weight:600}
.dark form[data-state="error"] .fmsg{color:#F0A093;border-left-color:#F0A093}

.form-card button[type="submit"][disabled]{opacity:.55;cursor:progress}

/* Newsletter sits in the footer .fsub, where the message needs its own line. */
.fsub form{position:relative;flex-wrap:wrap}
.fsub .fmsg{flex:1 0 100%;margin-top:10px}

/* The footer is ink-dark but carries no .dark class, so the light-ground
   colours above would land near-black on near-black. Restate them here. */
footer form[data-state="sending"] .fmsg{color:var(--dim-d)}
footer form[data-state="sent"] .fmsg{color:var(--gold);border-left-color:var(--gold)}
footer form[data-state="error"] .fmsg{color:#F0A093;border-left-color:#F0A093}


/* ═══════════════════════════════════════════════════════════════════════════
   OC MOTION
   The movement that carries from oladipupoclement.org into the subdomains.

   Three things, in order of how much they matter:

   1. A shared easing curve. The main site moves on cubic-bezier(.16,1,.3,1),
      which starts fast and settles slowly. More than any single effect, this
      is what makes two pages feel like one hand made them.
   2. A page veil. Leaving the main site for a subdomain, or moving between
      subdomains, plays the same ink wipe in both directions, so a jump
      between two servers reads as one continuous site.
   3. Reveal on scroll, for pages that do not already have their own.

   FAIL-OPEN BY CONSTRUCTION: every rule here needs a class that only
   JavaScript adds. With no JavaScript, nothing is hidden and nothing moves.
   A visitor can never be left staring at a covered or invisible page.
   ═════════════════════════════════════════════════════════════════════════ */

:root{ --oc-ease:cubic-bezier(.16,1,.3,1); --ease:cubic-bezier(.16,1,.3,1) }

/* ── the veil ─────────────────────────────────────────────────────────── */
#oc-veil{
  position:fixed; inset:0; z-index:99999; pointer-events:none;
  background:#060C15;
  transform:translateY(0);
  transition:transform .72s var(--oc-ease);
  display:flex; align-items:center; justify-content:center;
}
#oc-veil .mk{
  width:64px; height:64px; border-radius:50%;
  background:#F8F6F1 center/86% no-repeat;
  opacity:0; transform:scale(.9);
  transition:opacity .4s var(--oc-ease), transform .6s var(--oc-ease);
}
#oc-veil.show .mk{ opacity:1; transform:scale(1) }
#oc-veil.up  { transform:translateY(-101%) }        /* lifting away on arrival */
#oc-veil.down{ transform:translateY(0) }            /* dropping in on exit */
#oc-veil.armed{ transform:translateY(101%) }        /* parked below the fold */

/* ── reveal ───────────────────────────────────────────────────────────────
   Applied only to elements the page was not already animating itself, so the
   two systems never fight over the same node. */
.oc-rv{ opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--oc-ease), transform .8s var(--oc-ease) }
.oc-rv.oc-in{ opacity:1; transform:none }

/* ── links ────────────────────────────────────────────────────────────────
   The main site moves the arrow on a link rather than the whole element. */
a .arw,a .ar,a .go span{ transition:transform .35s var(--oc-ease) }
a:hover .arw,a:hover .ar,a:hover .go span{ transform:translateX(4px) }

/* ── respect the setting ──────────────────────────────────────────────────
   Someone who has asked their system for less motion gets none of this. The
   veil is removed rather than slowed, because a slow cover is worse than no
   cover at all. */
@media (prefers-reduced-motion:reduce){
  #oc-veil{ display:none !important }
  .oc-rv{ opacity:1 !important; transform:none !important; transition:none !important }
  a .arw,a .ar,a .go span{ transition:none }
}

/* ── hero on small screens ─────────────────────────────────────────────────
   The wide frame would push OC off the edge, so phones get a crop made for
   the shape, and a stronger wash because the copy now sits over the room
   rather than beside it. */
@media (max-width:760px){
  /* A phone gets the portrait treatment: the figure stands on the ink, the
     copy is centred beneath it, and nothing overlaps anything. The frame is
     dissolved into the same ink as the page, so the picture has no visible
     edge and needs no scrim over the words. */
  /* The figure is given real presence, which means the second call to action
     sits just below the fold on a small phone. That is the same trade the
     reference makes: portrait first, the rest on the scroll. */
  .hero{min-height:auto;display:block;text-align:center;
    padding:0 0 clamp(28px,7vw,44px)}
  /* One still frame on a phone. A carousel there costs data and attention
     for a picture the visitor is already looking straight at. */
  .hphoto{position:relative;inset:auto;width:100%;
    height:clamp(290px,48svh,430px);
    background:url("/assets/img/oc-hero-mobile.jpg") center 4%/contain no-repeat;
    transform:none;margin:0 auto}
  .hphoto .hs{display:none}
  .hdots{display:none}
  .hscrim{display:none}

  .hero .w{background:none;padding-top:0;padding-bottom:0;margin-top:-6px}
  .hero .lab{font-size:9.2px;letter-spacing:.13em;display:inline-block}
  .hero h1{font-size:clamp(30px,8.4vw,44px);line-height:1.08;
    max-width:15ch;margin:12px auto 0}
  .hero .sub{max-width:34ch;margin:12px auto 0;font-size:14.5px;line-height:1.55}
  .hbot{max-width:100%;margin-top:0}
  .hero .acts{justify-content:center;margin-top:18px;gap:14px}
  .hero .acts .b{width:100%;justify-content:center}
  .hero .cue{display:none}
}

@media (prefers-reduced-motion:reduce){ .hphoto{transform:none} }

/* ── hero on short screens ─────────────────────────────────────────────────
   A 568px-tall phone cannot hold the eyebrow, three lines of display type, a
   paragraph and two calls to action. The type steps down rather than the
   content being cut, because a call to action below the fold is the one thing
   that must not happen here. */
@media (max-height:620px) and (max-width:760px){
  /* A 568px screen cannot give the figure 42% and still land the button, so
     the picture yields the space rather than the call to action. */
  .hphoto{height:clamp(200px,32svh,260px)}
  .hero h1{font-size:clamp(26px,7.4vw,33px);margin-top:9px}
  .hero .sub{font-size:13.5px;line-height:1.45;margin-top:9px}
  .hero .lab{font-size:9.5px}
  .hero .acts{margin-top:13px}
  .hero{padding-bottom:14px}
}