/* ===========================================================
   MABA Suitez by EXSIM — dark / gold Merdeka aesthetic
   =========================================================== */

:root{
  --night:#07070C;
  --ink:#0A0923;
  --canvas:#FFFFFF;
  --accent:#E8B554;
  --accent-hi:#FBE29A;
  --accent-lo:#B07C22;
  --on-accent:#241703;
  --urgent-a:#E01F26;
  --urgent-b:#DB0F42;
  --line:rgba(255,255,255,.14);
  --dim:rgba(255,255,255,.64);
  --dim-2:rgba(255,255,255,.42);
  --r-pill:999px;
  --r-slab:24px;
  --r-in:8px;
  --gutter:clamp(20px,5vw,64px);
  --maxw:1240px;
  --serif:'Cormorant Garamond', 'Times New Roman', serif;
  --display:'Playfair Display', 'Cormorant Garamond', 'Times New Roman', serif;
  --sans:'Montserrat', -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--night);
  color:var(--canvas);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ===========================================================
   AMBIENT BACKGROUND
   A fixed, viewport-locked wash — warm gold low (where the tower
   base glows) and cool indigo high — so the page reads as one lit
   night rather than a stack of flat black boxes. Sections sit on
   translucent tints so this shows through them.
   =========================================================== */
body::before{
  content:"";position:fixed;inset:-10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 42% at 84% 76%, rgba(232,181,84,.17), transparent 66%),
    radial-gradient(52% 40% at 80% 16%, rgba(52,62,140,.30), transparent 68%),
    radial-gradient(48% 38% at 10% 26%, rgba(140,52,72,.13), transparent 70%),
    radial-gradient(60% 40% at 26% 88%, rgba(176,124,34,.12), transparent 70%),
    linear-gradient(180deg,#06060B 0%,#0A0A15 42%,#08080F 72%,#06060B 100%);
  animation:ambientDrift 38s ease-in-out infinite alternate;
}
@keyframes ambientDrift{
  from{transform:translate3d(0,0,0) scale(1);}
  to  {transform:translate3d(-1.6%,1.2%,0) scale(1.05);}
}
/* fine grain so the gradients don't band on wide screens */
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* keep all real content above the two decorative layers */
body > *{position:relative;z-index:1;}

@media (prefers-reduced-motion:reduce){
  body::before{animation:none;}
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
section{position:relative;}

::selection{background:var(--accent);color:var(--on-accent);}

/* ---------- type ---------- */
.eyebrow{
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);font-weight:600;
}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em;}
.serif{font-family:var(--serif);font-weight:500;font-style:italic;letter-spacing:0;}
.h-section{font-size:clamp(30px,4.4vw,52px);line-height:1.05;font-family:var(--serif);font-style:italic;font-weight:500;}
.lede{color:var(--dim);font-size:clamp(16px,1.6vw,19px);max-width:56ch;}

/* ---------- buttons ---------- */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:16px 30px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;
  white-space:nowrap;
}
.cta:hover{transform:translateY(-2px);}
.cta-gold{
  background:linear-gradient(var(--accent-hi) 0%,var(--accent) 52%,var(--accent-lo) 100%);
  color:var(--on-accent);
  box-shadow:0 10px 30px -10px rgba(232,181,84,.55);
}
.cta-gold:hover{box-shadow:0 16px 36px -10px rgba(232,181,84,.7);}
.cta-ghost{background:rgba(255,255,255,.03);border-color:var(--line);color:var(--canvas);}
.cta-ghost:hover{border-color:var(--accent);background:rgba(232,181,84,.08);}
.cta-whatsapp{
  background:linear-gradient(#3fce6c,#25a85a);color:#06210f;
  box-shadow:0 10px 30px -10px rgba(63,206,108,.5);
}
.cta.block{width:100%;}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
  background:linear-gradient(rgba(7,7,12,.85),rgba(7,7,12,0));
  backdrop-filter:blur(2px);
}
.nav.scrolled{background:rgba(7,7,12,.86);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);}
.brand{display:flex;align-items:baseline;gap:8px;font-family:var(--serif);font-style:italic;font-size:22px;}
.brand b{font-style:normal;font-weight:600;font-family:var(--sans);letter-spacing:.02em;font-size:15px;}
.brand small{color:var(--accent);font-size:11px;letter-spacing:.18em;font-style:normal;font-family:var(--sans);}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);transition:color .2s;}
.nav-links a:hover{color:var(--accent);}
.nav-cta{display:flex;gap:10px;}
.nav .cta{padding:12px 20px;font-size:11px;}
.nav .cta-gold{
  background:#DCB86A;color:#141310;
  border-radius:0;box-shadow:none;
  padding:13px 26px;font-weight:700;letter-spacing:.18em;
}
.nav .cta-gold:hover{background:#C9A659;transform:none;box-shadow:none;}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:42px;height:42px;color:var(--canvas);}

@media (max-width:900px){
  .nav-links{position:fixed;inset:0 0 0 auto;width:78vw;max-width:340px;background:var(--ink);
    flex-direction:column;align-items:flex-start;padding:100px 28px 28px;gap:26px;
    transform:translateX(100%);transition:transform .35s ease;border-left:1px solid var(--line);}
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:14px;}
  .nav-toggle{display:block;}
}

/* ---------- proximity strip ---------- */
.proximity{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#08080F;
}
.prox-bg{position:absolute;inset:0;z-index:0;}
/* Framed on the night sky and the lit tower, where the picture is darkest —
   which is what lets the scrim stay light enough for the photograph to read. */
.prox-bg img{width:100%;height:100%;object-fit:cover;object-position:center 34%;opacity:.9;}
.prox-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,7,12,.72),rgba(7,7,12,.5) 45%,rgba(7,7,12,.8));
}
.proximity-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;padding:0 var(--gutter);}
/* Each figure is introduced by a hairline at its left, inset top and bottom so
   it reads as a rule beside the number rather than a table cell border. */
.prox-item{flex:1 1 220px;padding:48px 24px 50px 28px;position:relative;}
.prox-item::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;
  background:rgba(255,255,255,.32);
}
.prox-dist{
  font-family:var(--serif);font-style:normal;font-weight:500;
  font-size:clamp(40px,4.6vw,64px);line-height:1;letter-spacing:0;
  color:#FFFFFF;
}
.prox-label{
  font-size:clamp(13px,1.05vw,15.5px);line-height:1.45;
  letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.84);margin-top:16px;max-width:23ch;
}

/* ---------- generic section padding ---------- */
.blk{padding:110px 0;}
.blk-tight{padding:70px 0;}
.blk-head{max-width:640px;margin-bottom:52px;}
.blk-head .eyebrow{margin-bottom:14px;display:block;}
.blk-head h2{margin-top:14px;}
.blk-head .lede{margin-top:18px;}

.tags{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px;}
.tag{
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:10px 18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}

/* ---------- two column media block ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.split.rev .split-media{order:2;}
.split-media{border-radius:var(--r-slab);overflow:hidden;border:1px solid var(--line);position:relative;}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
.split-media .cap{
  position:absolute;left:0;right:0;bottom:0;padding:18px 22px;
  background:linear-gradient(rgba(7,7,12,0),rgba(7,7,12,.85));
  font-size:12px;letter-spacing:.06em;color:var(--dim);
}
/* ---------- embedded Street View ----------
   The caption sits BELOW this one rather than floating over it, as the
   overlay .cap does on the photos: a Google embed's own logo and terms
   links have to stay visible and clickable. */
.split-media-embed{aspect-ratio:4/3;}
.split-media-embed iframe{display:block;width:100%;height:100%;border:0;}
.embed-note{
  margin:14px 2px 0;font-size:12px;line-height:1.7;
  letter-spacing:.04em;color:var(--dim-2);
}

.split-text .stat{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:44px;line-height:1;margin-top:26px;}
.split-text .stat span{display:block;font-family:var(--sans);font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:8px;}

@media (max-width:860px){
  .split,.split.rev{grid-template-columns:1fr;gap:34px;}
  .split.rev .split-media{order:0;}
}

/* ===========================================================
   THE LIGHTING FEATURE — Merdeka 118 illuminated on scroll

   Two columns. The left is ordinary flow content and scrolls
   normally. The right is a sticky panel that stays put for the
   whole section — the tower never moves, only its light level
   changes with scroll progress.
   =========================================================== */
.tower-feature{
  position:relative;
  display:grid;
  grid-template-columns:1fr min(42vw,540px);
  background:transparent;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* ---------- night video behind the first screen ----------
   Covers the opening viewport only, not the whole scroll section, so the
   tower's lighting sequence still plays out against black further down.
   The source carries a "SKYRUN MALAYSIA" watermark in its lower-left; the
   scale-and-shift pushes that corner outside the frame. */
.hero-video{
  position:absolute;left:0;right:0;top:0;height:100svh;
  z-index:0;overflow:hidden;pointer-events:none;
}
.hero-video video{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.24) translate(-7.5%,4.5%);
  opacity:.62;
}
.hero-video::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,7,12,.90) 0%,rgba(7,7,12,.74) 34%,rgba(7,7,12,.44) 72%,rgba(7,7,12,.38) 100%),
    linear-gradient(180deg,rgba(7,7,12,.72) 0%,rgba(7,7,12,.28) 34%,rgba(7,7,12,.78) 84%,var(--night) 100%);
}
/* both columns must sit above it */
.tower-panel{z-index:1;}
@media (max-width:760px){
  .hero-video::after{
    background:linear-gradient(180deg,rgba(7,7,12,.80) 0%,rgba(7,7,12,.66) 30%,rgba(7,7,12,.84) 82%,var(--night) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .hero-video video{display:none;}
}

/* ---------- sunset backdrop behind the scrolling steps ----------
   Starts where the hero video ends and runs to the foot of the section.
   The inner box is sticky, so the photo holds still while the altitude
   steps scroll over it rather than sliding a 2700px-tall crop past. */
.hero-still{
  position:absolute;left:0;right:0;top:100svh;bottom:0;
  z-index:0;pointer-events:none;
}
.hero-still-inner{position:sticky;top:0;height:100svh;overflow:hidden;}
.hero-still-inner img{
  width:100%;height:100%;object-fit:cover;
  /* The drawing is dark ink on cream — the wrong way round for a black section.
     Dimming it would have thinned the linework away to nothing, so it is
     inverted instead: the cream ground drops to near-black and the ink comes
     up as pale line, which is what lets it sit at this opacity and still read. */
  filter:invert(1) blur(4px);
  /* blur samples past the edges, so scale up and let overflow:hidden trim the
     soft border it would otherwise leave around the frame */
  transform:scale(1.06);
  opacity:.62;
}
/* The steps are white text and the tower's LEDs have to stay the brightest
   thing here, so the photo sits under a heavy wash: dark on the left where
   the copy runs, and fading to black top and bottom so there is no seam
   against the hero video above or the fireworks finale below. */
.hero-still-inner::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,7,12,.78) 0%,rgba(7,7,12,.52) 34%,rgba(7,7,12,.24) 70%,rgba(7,7,12,.18) 100%),
    linear-gradient(180deg,var(--night) 0%,rgba(7,7,12,.16) 24%,rgba(7,7,12,.26) 66%,rgba(7,7,12,.80) 92%,var(--night) 100%);
}
@media (max-width:760px){
  .hero-still-inner::after{
    background:linear-gradient(180deg,var(--night) 0%,rgba(7,7,12,.76) 20%,rgba(7,7,12,.80) 70%,var(--night) 100%);
  }
}

/* ---------- hero card (left column, first screen) ---------- */
/* The hero is set straight on the scene — no panel, no border, no surface.
   The type is the whole design, so it carries the weight instead. */
.tcard{
  background:none;border:0;border-radius:0;padding:0;
  margin:clamp(120px,20vh,220px) 0 56px;
  max-width:min(60ch,100%);
}
.hero-eyebrow{
  display:flex;align-items:center;gap:20px;margin:0 0 clamp(24px,3.4vh,40px);
  font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.56);
}
.hero-eyebrow .rule{flex:none;width:clamp(36px,5vw,64px);height:1px;background:rgba(255,255,255,.34);}
.hero-title{
  font-family:var(--display);font-weight:400;font-style:normal;
  font-size:clamp(28px,4.1vw,60px);line-height:1.06;letter-spacing:-.012em;
  max-width:14em;text-wrap:balance;
  color:#F3EFE7;margin:0;
}
.hero-title em{font-style:italic;font-weight:400;}
.hero-sub{
  margin:clamp(24px,3vh,38px) 0 0;max-width:34ch;
  font-size:clamp(14px,1.15vw,16.5px);line-height:1.62;color:rgba(255,255,255,.78);
}
/* the call to action is a rule-underlined link, not a filled button */
.hero-cue{
  display:inline-block;margin-top:clamp(30px,4.5vh,52px);padding-bottom:12px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.88);border-bottom:1px solid var(--accent-lo);
  transition:color .25s ease,border-color .25s ease;
}
.hero-cue:hover{color:#FFFFFF;border-bottom-color:var(--accent);}

/* ---------- left column: the scrolling steps ---------- */
/* No z-index here on purpose: any z-index would open a stacking context and
   trap the elevation drawing's screen blend inside this column, painting its
   black ground as a visible box. With z-index:auto it still paints above the
   backdrop layers, which come earlier in the DOM. */
.tower-content{padding:0 var(--gutter);position:relative;}
.tstep{
  min-height:72vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:40px 0;
  border-top:1px solid var(--line);
  opacity:.30;transition:opacity .55s ease;
  max-width:30ch;
}
.tstep.is-lit{opacity:1;}
.tstep .d{
  font-family:var(--serif);font-style:italic;
  color:var(--accent);font-size:clamp(38px,5vw,62px);line-height:1;
  display:block;margin-bottom:16px;
}
.tstep .t{font-size:clamp(15px,1.5vw,17px);line-height:1.7;color:var(--dim);margin:0;}
.tstep.is-lit .t{color:var(--canvas);}

/* the step carrying the elevation drawing needs the full column, not the
   30ch measure the text steps are set to */
.tstep-wide{max-width:none;}
.tstep-art{
  width:100%;max-width:none;height:auto;margin-top:38px;
  /* screen blending drops the drawing's black ground to nothing, so the
     linework sits straight on the section with no visible image edge — and it
     hides the JPEG ringing around the fine strokes at the same time */
  mix-blend-mode:screen;
  opacity:.9;
}
/* The animation is ink on cream, the reverse of the still plates. Inverting
   flips it to pale line on near-black; the small contrast lift then pushes
   that near-black to true black so the screen blend drops it cleanly. */
/* Photographic footage, not line art. Screen blending would wash it out and
   punch holes through its dark sky, and inverting it makes no sense at all —
   so it opts out of both and takes the frame the page's other photos use, so
   the hard edge reads as deliberate rather than pasted on. */
.tstep-film{
  mix-blend-mode:normal;
  filter:none;
  opacity:1;
  border:1px solid var(--line);
  border-radius:var(--r-slab);
  overflow:hidden;
}

@media (max-width:900px){
  .tstep-art{margin-top:24px;}
}

/* ---------- the icon step: a figure set against a statement ----------
   The comp is a light band; this keeps the page's dark key and takes its
   structure instead — index line, oversized numeral, editorial column. */
.icon-index{
  margin:0 0 clamp(20px,2.8vh,34px);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
/* Stacked, not side by side. The comp is full-bleed, but this step lives in
   the tower feature's left column — even at 1440px that is only ~720px wide,
   so a two-track split starved the numeral and it overflowed its own cell. */
.icon-grid{display:grid;gap:clamp(24px,3.2vh,44px);align-items:start;}
.icon-figure{margin:0;}
.icon-num{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(62px,9vw,150px);line-height:.84;letter-spacing:-.025em;
  color:#F3EFE7;
}
/* the unit sits small on the numeral's own baseline, as in the comp */
.icon-num i{
  font-style:normal;font-size:.15em;letter-spacing:.06em;
  margin-left:.1em;color:rgba(243,239,231,.72);
}
.icon-cap{
  display:block;margin-top:16px;
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.icon-head{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(27px,3.2vw,50px);line-height:1.05;letter-spacing:-.01em;
  color:#F3EFE7;
}
.icon-lede{
  margin:clamp(16px,2.2vh,28px) 0 0;
  font-size:clamp(16px,1.45vw,23px);line-height:1.32;
  color:rgba(255,255,255,.9);
}
.icon-note{
  margin:clamp(20px,2.8vh,34px) 0 0;max-width:46ch;
  font-size:13px;line-height:1.65;color:rgba(255,255,255,.5);
}
.icon-step .tstep-art{margin-top:clamp(34px,5vh,62px);}

/* ---------- the developer step ---------- */
/* .tstep is a flex column, so its children stretch — that is what made this
   button run the full width. align-self pulls it back to its own size. */
.dev-more{
  align-self:flex-start;width:auto;
  margin-top:clamp(28px,3.8vh,46px);
  padding:15px 38px;border:0;border-radius:0;
  background:linear-gradient(100deg,#EBE0BE 0%,#DCC98E 36%,#C4A76B 70%,#AC8D50 100%);
  color:#1B1408;
  font-size:12px;font-weight:600;letter-spacing:.22em;
  box-shadow:none;
}
.dev-more:hover{
  transform:none;
  background:linear-gradient(100deg,#F4ECD4 0%,#E6D6A6 36%,#D2B87C 70%,#BD9E60 100%);
}
/* both headings are sized to sit on a single line across the column widths
   this step actually gets; they still wrap on a phone, where one line at a
   readable size is not possible */
.dev-step .reveal-head{font-size:clamp(28px,4.4vw,60px);}
.dev-sub{
  margin:clamp(26px,3.4vh,42px) 0 0;
  font-family:var(--display);font-weight:400;
  font-size:clamp(17px,2.8vw,34px);line-height:1.14;letter-spacing:-.01em;
  color:#F3EFE7;
}
.dev-step .dev-intro{max-width:min(72ch,100%);margin-top:clamp(14px,1.8vh,22px);}
.intro-price{
  margin:clamp(24px,3.2vh,38px) 0 0;
  font-family:var(--display);font-weight:400;
  font-size:clamp(19px,2vw,30px);line-height:1.2;letter-spacing:-.005em;
  color:var(--accent);
}
.intro-price strong{font-weight:400;color:var(--accent-hi);}
.intro-note{
  margin:12px 0 0;max-width:min(72ch,100%);
  font-size:clamp(12.5px,1.05vw,14.5px);line-height:1.6;color:rgba(255,255,255,.48);
}
.dev-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(20px,3vw,44px);
  margin:clamp(34px,5vh,60px) 0 0;padding-top:clamp(24px,3.4vh,38px);
  border-top:1px solid var(--line);
}
.dev-stats dt{
  font-family:var(--display);font-weight:400;
  font-size:clamp(38px,4.6vw,68px);line-height:1;letter-spacing:-.02em;
  color:#F3EFE7;
}
.dev-stats dd{
  margin:10px 0 0;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

/* ---------- the opportunity step: a numbered ledger ---------- */
.opp-step .reveal-head{font-size:clamp(30px,4.3vw,66px);}
.opp-list{
  list-style:none;margin:clamp(30px,4.5vh,56px) 0 0;padding:0;
  border-top:1px solid var(--line);
  --opp-gutter:clamp(22px,2.6vw,34px);--opp-gap:clamp(14px,2.4vw,40px);
}
/* a fixed index column makes the row offset predictable, so the closing line
   below can be aligned to the same column instead of guessed at */
.opp-list li{
  display:grid;grid-template-columns:var(--opp-gutter) minmax(0,1fr);
  gap:var(--opp-gap);align-items:start;
  padding:clamp(18px,2.8vh,30px) 0;border-bottom:1px solid var(--line);
}
.opp-n{
  font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.34);
  padding-top:.65em;font-variant-numeric:tabular-nums;
}
.opp-list h4{
  margin:0;font-family:var(--sans);font-weight:500;
  font-size:clamp(20px,2.5vw,36px);line-height:1.08;letter-spacing:-.02em;
  color:#F3EFE7;
}
.opp-list p{
  margin:8px 0 0;font-size:clamp(12.5px,1vw,14.5px);line-height:1.5;
  color:rgba(255,255,255,.55);
}
/* the closing line: back into the serif, so it lands as a statement rather
   than another row of the ledger above it, indented to the text column and
   balanced so the last line never strands a single word */
.opp-coda{
  margin:clamp(28px,4vh,48px) 0 0;
  margin-left:calc(clamp(22px,2.6vw,34px) + clamp(14px,2.4vw,40px));
  max-width:34ch;text-wrap:balance;
  font-family:var(--display);font-weight:400;
  font-size:clamp(18px,2vw,30px);line-height:1.2;letter-spacing:-.01em;
  color:#F3EFE7;
}
@media (max-width:620px){ .opp-coda{margin-left:0;} }

/* ---------- the reveal step: statement, then the aerial ---------- */
.reveal-head em{font-style:italic;font-weight:400;}
.reveal-head{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(34px,5.4vw,86px);line-height:1.02;letter-spacing:-.018em;
  color:#F3EFE7;
}
.reveal-sub{
  margin:clamp(18px,2.4vh,30px) 0 0;max-width:38ch;
  font-size:clamp(14px,1.2vw,17px);line-height:1.55;color:rgba(255,255,255,.8);
}
.reveal-map{
  position:relative;margin:clamp(30px,4.5vh,54px) 0 0;
  border:1px solid var(--line);border-radius:var(--r-slab);overflow:hidden;
}
/* the annotations anchor to this, not the <figure>, so the caption's height
   cannot shift them off their buildings */
.reveal-canvas{position:relative;display:block;}
.reveal-map img{display:block;width:100%;height:auto;}
/* the SVG shares the image's own pixel viewBox with the aspect preserved, so
   the arrowhead stays a triangle instead of being stretched by the container */
.map-arrow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.map-tag{
  position:absolute;left:39%;top:19.5%;transform:translate(-50%,-50%);
  background:#C2A468;color:#1B1408;padding:7px 14px;white-space:nowrap;
  font-size:clamp(9px,.85vw,12px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  pointer-events:none;
}
.map-note{
  position:absolute;left:2.4%;bottom:5.5%;
  background:rgba(14,11,7,.8);color:#EFE6D6;padding:9px 18px;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(12px,1.15vw,19px);letter-spacing:.01em;
  pointer-events:none;
}
@media (max-width:620px){
  .map-tag{padding:5px 9px;letter-spacing:.1em;}
  .map-note{padding:6px 11px;}
}
/* Street View sits left, the invitation to use it sits beside. Two tracks only
   once the column is wide enough to carry them — below that they stack, since
   this step lives in the tower feature's narrower left column. */
.sv-row{display:grid;gap:clamp(20px,2.4vw,40px);margin-top:clamp(30px,4.5vh,54px);}
@media (min-width:1280px){
  .sv-row{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start;}
}
.sv-row .reveal-map{margin-top:0;}
.sv-copy{text-align:left;}
@media (min-width:1280px){ .sv-copy{align-self:center;} }
.sv-head{
  margin:clamp(10px,1.4vh,16px) 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(21px,2.2vw,34px);line-height:1.08;letter-spacing:-.01em;color:#F3EFE7;
}
.sv-text{
  margin:clamp(12px,1.6vh,18px) 0 0;max-width:34ch;
  font-size:clamp(13.5px,1.15vw,16px);line-height:1.6;color:rgba(255,255,255,.78);
}

.reveal-map-embed iframe{display:block;width:100%;aspect-ratio:4/3;border:0;}
@media (max-width:620px){ .reveal-map-embed iframe{aspect-ratio:1/1;} }
.reveal-map figcaption{
  padding:14px 18px 16px;
  font-size:11.5px;line-height:1.6;letter-spacing:.03em;color:var(--dim-2);
  background:rgba(7,7,12,.55);
}
/* ---------- vertical scale beside the tower ---------- */
.tower-marks{
  /* sit in the strip to the LEFT of the tower, never overlapping it */
  position:absolute;left:0;top:0;bottom:0;width:29%;
  list-style:none;margin:0;padding:9% 0;z-index:2;
  display:flex;flex-direction:column;justify-content:space-between;
  pointer-events:none;
}
.tower-marks .tmark{
  display:flex;align-items:center;gap:12px;
  padding-left:clamp(8px,1.4vw,18px);
  opacity:.42;transition:opacity .45s ease;
}
.tower-marks .tmark.is-lit{opacity:1;}
.tower-marks .ml{
  font-size:12.5px;letter-spacing:.05em;color:var(--dim);
  min-width:60px;font-weight:600;white-space:nowrap;
}
.tower-marks .tmark.is-lit .ml{color:var(--canvas);}
.tower-marks .mline{flex:1;max-width:32px;height:1px;background:var(--line);}
.tower-marks .tmark.is-lit .mline{background:linear-gradient(90deg,var(--accent-lo),var(--accent));}
.tower-marks .mdot{width:6px;height:6px;border-radius:50%;background:var(--dim-2);flex:none;}
.tower-marks .tmark.is-lit .mdot{background:var(--accent);box-shadow:0 0 10px var(--accent);}

/* ---------- right: the sticky tower ---------- */
.tower-panel{
  position:sticky;top:0;
  align-self:start;
  height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.tower-sky{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(90% 60% at 60% 74%,rgba(120,72,26,.30),transparent 70%),
    radial-gradient(70% 50% at 60% 28%,rgba(38,44,96,.34),transparent 72%),
    radial-gradient(120% 80% at 50% 50%,rgba(4,4,9,.94),rgba(4,4,9,.62) 68%,transparent 100%);
}
/* softens the tower's base into the background */
.tower-panel::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:20%;z-index:2;
  pointer-events:none;
  background:linear-gradient(rgba(7,7,12,0),var(--night) 78%);
}
.tower-svg-wrap{position:relative;z-index:1;height:94%;aspect-ratio:400/1780;}
/* the artwork lives in <defs> only — this holder must never paint or take space */
.tower-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;}
/* the "off" state: same artwork, turned right down */
.tower-layer-dim{opacity:.17;}
/* every layer shares the wrap's box so all layers stay in register */
.tower-layer{position:absolute;left:0;top:0;width:100%;height:100%;}
.tower-layer-fx{pointer-events:none;}
/* the reveal: a plain overflow:hidden box anchored to the base, grown by JS.
   Its SVG keeps the wrap's full height (width x 3.6, from the 400/1450 viewBox)
   and is pinned to the bottom, so the artwork never shifts as the box grows. */
.tower-reveal{position:absolute;left:0;right:0;bottom:0;height:0;overflow:hidden;}
.tower-reveal .tower-layer-lit{top:auto;bottom:0;height:auto;}

.tower-progress{
  position:absolute;left:0;right:0;bottom:24px;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.tower-progress .bar{width:120px;height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px;}
.tower-progress .bar i{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,var(--accent-lo),var(--accent-hi));}

@media (max-width:900px){
  .tower-feature{grid-template-columns:1fr 40vw;}
  .tcard{margin:clamp(96px,16vh,150px) 0 32px;padding:0;}
  .tstep{min-height:66vh;max-width:none;}
  .tstep .d{font-size:30px;margin-bottom:10px;}
  .tstep .t{font-size:13.5px;}
  .tower-svg-wrap{height:auto;width:100%;max-height:88%;}
  .tower-progress{display:none;}
  .tower-marks .ml{font-size:11px;min-width:56px;}
  .tower-marks .mline{max-width:24px;}
}
@media (max-width:560px){
  .tower-feature{grid-template-columns:1fr 38vw;}
  .tstep .d{font-size:25px;}
  .tstep .t{font-size:12.5px;}
  .tower-marks .ml{font-size:10px;min-width:46px;}
  .tower-marks .mline{display:none;}
}

/* ---------- the view: a film with the copy set over its foot ---------- */
.view-block{padding:0;}
.view-frame{position:relative;margin:0;overflow:hidden;}
.view-video{display:block;width:100%;height:auto;background:#07070C;}
/* the copy sits over the film's lower edge, so it needs its own ground to
   stay legible against whatever frame happens to be playing behind it */
.view-copy{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(60px,12vh,150px) var(--gutter) clamp(20px,3vh,40px);
  background:linear-gradient(rgba(7,7,12,0),rgba(7,7,12,.62) 42%,rgba(7,7,12,.88));
  pointer-events:none;
}
.view-head{
  margin:clamp(8px,1.2vh,16px) 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(28px,5.4vw,78px);line-height:1.02;letter-spacing:-.02em;
  color:#F3EFE7;
}
.view-sub{
  margin:clamp(8px,1.2vh,16px) 0 0;
  font-size:clamp(13px,1.15vw,16px);line-height:1.5;color:rgba(255,255,255,.82);
}
/* the browser's own controls sit at the very bottom, so lift the copy clear */
.view-video[controls] + .view-copy{padding-bottom:clamp(52px,6vh,74px);}

/* ---------- the residence section ----------
   The headline is sized to hold a single line across the widths this
   full-width section actually gets, rather than breaking as the comp does. */
.res-head{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(24px,4.6vw,62px);line-height:1.06;letter-spacing:-.015em;
  color:#F3EFE7;
}
.res-index{margin-top:clamp(46px,6vh,84px);}
.res-sub{
  margin:clamp(12px,1.6vh,20px) 0 0;
  font-family:var(--display);font-weight:400;
  font-size:clamp(22px,2.8vw,42px);line-height:1.1;letter-spacing:-.01em;
  color:#F3EFE7;
}
.res-lede{
  margin:clamp(16px,2.2vh,26px) 0 0;max-width:min(68ch,100%);
  font-size:clamp(14px,1.2vw,17px);line-height:1.6;color:rgba(255,255,255,.78);
}
.res-tags{margin-top:clamp(24px,3.2vh,38px);}

/* ---------- full-bleed video behind a section ----------
   The scrim is two gradients, not one: a horizontal wash that keeps the
   left column dark enough to read against, and a vertical one that fades
   the footage into the page top and bottom so it has no visible seam. */
.has-video{position:relative;overflow:hidden;}
.section-video{position:absolute;inset:0;z-index:0;pointer-events:none;}
.section-video video{
  width:100%;height:100%;object-fit:cover;
  opacity:.72;
}
.section-video::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(7,7,12,.95) 0%,rgba(7,7,12,.80) 36%,rgba(7,7,12,.26) 76%,rgba(7,7,12,.10) 100%),
    linear-gradient(180deg,var(--night) 0%,rgba(7,7,12,.18) 22%,rgba(7,7,12,.24) 72%,var(--night) 100%);
}
.has-video > .wrap{position:relative;z-index:1;}
/* on narrow screens the copy spans the full width, so the wash must too */
@media (max-width:760px){
  .section-video::after{
    background:linear-gradient(180deg,var(--night) 0%,rgba(7,7,12,.74) 26%,rgba(7,7,12,.78) 72%,var(--night) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .section-video video{display:none;}
}

/* ---------- full-bleed quote / night section ---------- */
.night-cta{padding:140px 0;text-align:center;position:relative;overflow:hidden;}
.night-cta .bg{position:absolute;inset:0;z-index:0;}
.night-cta .bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:.55;}
.night-cta .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--night) 0%,rgba(7,7,12,.35) 40%,var(--night) 100%);}
.night-cta .inner{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 var(--gutter);}
.night-cta .eyebrow{display:block;margin-bottom:20px;}
.night-cta h2{font-size:clamp(32px,5.6vw,64px);}
.night-cta .lede{margin:22px auto 0;}

/* ---------- collaboration ---------- */
.collab{background:rgba(10,9,35,.42);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.collab .wrap{max-width:1500px;}
.collab .split{grid-template-columns:0.62fr 1.38fr;gap:clamp(26px,3.2vw,48px);}
.collab .split-media img{aspect-ratio:auto;height:auto;}
@media (max-width:860px){
  .collab .split{grid-template-columns:1fr;}
}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line);}
.faq-list details{border-bottom:1px solid var(--line);padding:22px 0;}
.faq-list summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  font-size:16px;font-weight:600;gap:20px;
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{
  content:"+";font-family:var(--serif);font-size:26px;color:var(--accent);flex:none;
  transition:transform .25s ease;font-style:normal;
}
.faq-list details[open] summary::after{transform:rotate(45deg);}
.faq-list .a{color:var(--dim);margin-top:14px;max-width:70ch;font-size:14.5px;line-height:1.7;}
.faq-list .a a{color:var(--accent);border-bottom:1px solid var(--accent-lo);}

/* ---------- register ---------- */
.register{
  /* deep blue gradient rather than a flat panel — it lifts toward the middle
     so the form sits on the lighter part of the sweep */
  background:
    radial-gradient(80% 60% at 68% 34%, rgba(46,64,140,.34), transparent 70%),
    linear-gradient(158deg,#080D24 0%,#111B45 44%,#0A1130 74%,#070A1C 100%);
  border-top:1px solid var(--line);
}
/* the PDPA link is the one thing here a visitor may need to act on, so it is
   set apart from the note around it rather than blending into it */
.register .access-note{color:rgba(255,255,255,.56);}
.register .access-note a{
  color:var(--accent-hi);font-weight:600;
  border-bottom:1px solid var(--accent);padding-bottom:1px;
  transition:color .2s ease,border-color .2s ease;
}
.register .access-note a:hover{color:#FFFFFF;border-bottom-color:#FFFFFF;}
.register-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:flex-start;}
.register-card{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid var(--line);border-radius:var(--r-slab);padding:36px;
}
.field{margin-bottom:18px;}
.field label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:8px;}
.field input,.field select{
  width:100%;padding:14px 16px;border-radius:var(--r-in);
  background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--canvas);font-family:var(--sans);font-size:14.5px;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);background:rgba(232,181,84,.05);}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23E8B554' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;}
.consent{font-size:12px;color:var(--dim-2);margin-top:18px;line-height:1.7;}
.consent a{color:var(--accent);}
.form-msg{
  margin-top:20px;padding:14px 18px;display:none;
  border-left:2px solid var(--accent);
  background:rgba(232,181,84,.08);
  font-size:clamp(14px,1.2vw,16px);line-height:1.5;color:var(--accent-hi);
}
.form-msg-link{display:inline-block;margin-top:6px;color:#FFFFFF;border-bottom:1px solid var(--accent);}
.form-msg.show{display:block;}
.divider-or{display:flex;align-items:center;gap:14px;margin:26px 0;color:var(--dim-2);font-size:11px;letter-spacing:.14em;text-transform:uppercase;}
.divider-or::before,.divider-or::after{content:"";flex:1;height:1px;background:var(--line);}

/* ---------- private access ---------- */
.access-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vh,72px);}
@media (min-width:960px){
  .access-grid{grid-template-columns:1fr 1.05fr;gap:clamp(48px,6vw,96px);align-items:start;}
}
.access-head{
  margin:clamp(20px,3vh,34px) 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(34px,5vw,74px);line-height:1.02;letter-spacing:-.02em;color:#F3EFE7;
}
.access-sub{
  margin:clamp(16px,2.2vh,26px) 0 0;max-width:34ch;
  font-size:clamp(14px,1.15vw,16px);line-height:1.55;color:rgba(255,255,255,.7);
}

.access-choice{border:0;margin:0 0 clamp(22px,3vh,34px);padding:0;}
.access-choice legend{
  padding:0;margin-bottom:14px;
  font-size:clamp(14px,1.2vw,17.5px);letter-spacing:.02em;
  color:rgba(255,255,255,.62);
}
.access-choice label{
  display:inline-flex;align-items:center;gap:9px;
  margin:0 22px 10px 0;cursor:pointer;
  /* deliberately larger than the comp sets these: they are the first thing a
     visitor reads in the form, and the comp runs them at caption size */
  font-size:clamp(15px,1.3vw,18px);line-height:1.3;color:rgba(255,255,255,.92);
}
.access-choice input{accent-color:var(--accent);width:17px;height:17px;cursor:pointer;flex:none;}

/* underline fields, as the comp sets them — no boxes */
.access-field{margin:0 0 clamp(20px,2.8vh,30px);}
.access-field label{
  display:block;margin-bottom:8px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.access-field input{
  width:100%;padding:10px 2px;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:var(--canvas);
  font-family:var(--sans);font-size:clamp(15px,1.3vw,17px);
}
.access-field input:focus{outline:none;border-bottom-color:var(--accent);}

.access-submit{
  margin-top:clamp(10px,1.6vh,18px);padding:16px 30px;border:0;cursor:pointer;
  background:var(--accent);color:#1B1408;
  font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  transition:background .25s ease;
}
.access-submit:hover{background:var(--accent-hi);}
.access-note{
  margin:clamp(18px,2.4vh,26px) 0 0;max-width:60ch;
  font-size:12px;line-height:1.6;color:rgba(255,255,255,.42);
}
.access-note a{color:var(--accent);}


.ex-plates img{cursor:zoom-in;}
.ex-plates figcaption{
  padding:11px 16px 13px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);background:rgba(7,7,12,.5);
}
.lightbox[hidden]{display:none;}
.lightbox{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,3vw,48px);
  background:rgba(4,4,9,.94);
  cursor:zoom-out;
}
.lightbox img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
  cursor:default;background:#fff;
}
.lightbox-close{
  position:absolute;top:clamp(10px,2vw,24px);right:clamp(10px,2vw,24px);
  width:44px;height:44px;line-height:1;
  background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:50%;
  color:#F3EFE7;font-size:24px;cursor:pointer;
}
.lightbox-close:hover{background:rgba(255,255,255,.18);}

/* the same block inline on the landing page, sitting under the collaboration */
.ex-inline{border-top:1px solid var(--line);}
.ex-inline .ex-head{font-size:clamp(28px,4vw,58px);}
.ex-inline .ex-sub{font-size:clamp(22px,2.8vw,40px);}
.ex-gap{margin-top:clamp(46px,7vh,96px);}
.ex-disclaim{
  margin:clamp(30px,4vh,50px) 0 0;max-width:72ch;
  font-size:12px;line-height:1.7;color:rgba(255,255,255,.42);
}

/* ---------- EXSIM profile page ---------- */
.ex-hero{padding-top:clamp(120px,18vh,190px);}
.ex-head{
  margin:clamp(18px,2.6vh,30px) 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(32px,5vw,72px);line-height:1.04;letter-spacing:-.02em;color:#F3EFE7;
}
.ex-sub{
  margin:clamp(14px,2vh,24px) 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(26px,3.4vw,50px);line-height:1.06;letter-spacing:-.015em;color:#F3EFE7;
}
.ex-lede{
  margin:clamp(16px,2.2vh,26px) 0 0;max-width:min(72ch,100%);
  font-size:clamp(14px,1.2vw,17px);line-height:1.65;color:rgba(255,255,255,.72);
}
.ex-band{background:rgba(10,9,35,.42);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* the award and milestone montages, side by side where there is room */
.ex-plates{
  display:grid;gap:clamp(18px,2.4vw,34px);
  margin-top:clamp(28px,4vh,48px);
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
}
.ex-plates figure{margin:0;border:1px solid var(--line);border-radius:var(--r-slab);overflow:hidden;}
.ex-plates img{display:block;width:100%;height:auto;}

/* year in a fixed gutter so every entry lines up down the page */
.ex-list{
  list-style:none;margin:clamp(26px,3.6vh,44px) 0 0;padding:0;
  border-top:1px solid var(--line);
}
.ex-list li{
  display:grid;grid-template-columns:clamp(48px,6vw,76px) minmax(0,1fr);
  gap:clamp(12px,1.8vw,26px);align-items:baseline;
  padding:clamp(13px,1.8vh,18px) 0;border-bottom:1px solid var(--line);
}
.ex-yr{
  font-size:12px;letter-spacing:.1em;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.ex-list b{
  display:block;font-weight:600;font-size:clamp(13.5px,1.15vw,15.5px);
  line-height:1.4;color:#F3EFE7;
}
.ex-list span{
  display:block;margin-top:3px;
  font-size:clamp(13px,1.1vw,15px);line-height:1.5;color:rgba(255,255,255,.62);
}
.ex-cta{text-align:center;border-top:1px solid var(--line);}
.ex-cta .ex-lede{margin-left:auto;margin-right:auto;}
.ex-cta .cta{margin-top:clamp(24px,3.4vh,38px);}

/* ---------- footer ---------- */
footer{padding:70px 0 40px;border-top:1px solid var(--line);}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;padding-bottom:40px;border-bottom:1px solid var(--line);margin-bottom:34px;}
.foot-links{display:flex;gap:26px;flex-wrap:wrap;}
.foot-links a{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
.foot-links a:hover{color:var(--accent);}
.disclaimer{font-size:11.5px;line-height:1.8;color:var(--dim-2);max-width:1000px;}
.dev-info{font-size:12px;color:var(--dim);margin-top:22px;line-height:1.9;}
.dev-info b{color:var(--canvas);}
.copyright{font-size:11px;color:var(--dim-2);margin-top:26px;}

/* ---------- opening logo curtain ---------- */
.intro{
  position:fixed;inset:0;z-index:400;
  display:grid;place-items:center;overflow:hidden;
  /* deep ground, the same night the page opens on */
  background:
    radial-gradient(120% 90% at 50% 45%,rgba(38,44,58,.55) 0%,rgba(8,9,14,0) 62%),
    linear-gradient(118deg,#0A0C11 0%,#05060A 34%,#0E1118 58%,#05060A 82%,#0B0E14 100%);
  animation:introOut .7s ease 2.8s forwards;
}
/* the lockup surfaces over two and a half seconds, reversed to platinum */
.intro img{
  width:min(44vw,400px);height:auto;position:relative;z-index:1;
  filter:brightness(0) invert(1);
  animation:introLogoIn 2.5s cubic-bezier(.42,.06,.34,1) .15s both;
}
/* a light catch travelling across, the way a metal plate reads under a lamp */
.intro-sheen{
  position:absolute;top:-40%;bottom:-40%;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);
  transform:skewX(-14deg);
  animation:introSheen 2.3s ease-in-out .3s both;
}
@keyframes introLogoIn{
  from{opacity:0;transform:scale(.985);}
  to{opacity:1;transform:none;}
}
@keyframes introSheen{
  from{left:-60%;} to{left:120%;}
}
@keyframes introOut{
  to{opacity:0;visibility:hidden;}
}
.intro[hidden]{display:none;}
/* while the curtain is up the page behind must not scroll */
body.intro-open{overflow:hidden;}

@media (prefers-reduced-motion:reduce){
  .intro{animation:introOut .4s ease .9s forwards;}
  .intro img{animation:none;}
  .intro-sheen{display:none;}
}

/* ---------- floating whatsapp ---------- */
.float-wa{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(#3fce6c,#25a85a);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px -6px rgba(37,168,90,.6);
  color:#FFFFFF;
}
/* the real WhatsApp glyph, inline so it stays sharp and costs no request */
.float-wa svg{width:30px;height:30px;display:block;}
.float-wa:hover{transform:scale(1.06);}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

@media (max-width:640px){
  .blk{padding:76px 0;}
  .proximity-row{flex-direction:column;}
  .prox-item{padding:30px 0 32px 22px;}
  .register-grid{grid-template-columns:1fr;gap:40px;}
  .foot-top{flex-direction:column;}
}