/* ==========================================================================
   FOCUS MEDIA AU — Brand & UI system
   Built from FocusMediaStyleGuide V1.4 (Jul 2026).
   Colour, typography, spacing, radius, borders, elevation and components
   all derive from the guide's tokens. Gold leads as an accent; surfaces
   stay clean (warm white) or Ink dark, in the restrained property register.
   ========================================================================== */

/* ---- 1. Design tokens ---------------------------------------------------- */
:root{
  /* Brand + neutral (guide pp.06) */
  --gold:#CF9300;          /* Brand Gold — logo, borders, highlights, selected states */
  --gold-dark:#8A5F00;     /* Accessible gold for links/text on light surfaces */
  --gold-50:#FCF7EA;       /* Faint gold tint for surfaces */
  --ink:#161616;           /* Primary text / dark surface */
  --ink-80:#3D3D3D;
  --ink-60:#666666;
  --ink-40:#A3A3A3;
  --line:#E4E0D8;          /* 1px default border */
  --surface:#F7F5F0;       /* Warm secondary surface */
  --white:#FFFFFF;

  /* Approved supporting (guide pp.07) */
  --champagne:#CDA868;
  --cream:#FFF4DC;
  --warm-black:#251A17;
  --amber:#C17A01;
  --highlight:#FDC87C;     /* Dark-hero highlight phrase only */

  /* Approved gradients (guide pp.07) — brand moments + promo CTAs only */
  --grad-champagne:linear-gradient(120deg,#CDA868,#E4C388,#F9DDA9);
  --grad-softwash:linear-gradient(160deg,#F8EAC5,#FFF4DC,#FFFFFF);
  --grad-amber:linear-gradient(120deg,#B86F00,#D99922,#FFD083);

  /* Type (guide pp.09–13) */
  --font:'Inter',system-ui,-apple-system,'Segoe UI','Noto Sans SC','PingFang SC',sans-serif;

  /* Spacing — 4px base, 8px rhythm (guide pp.15) */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --gutter:24px;
  --maxw:1200px;          /* Max content width (guide pp.16) */

  /* Radius (guide pp.16) */
  --r:8px;                /* default */
  --r-lg:14px;            /* modal / large card */

  /* Elevation (guide pp.17) — shadow only when an element floats */
  --e1:0 1px 2px rgba(22,22,22,.08);
  --e2:0 4px 12px rgba(22,22,22,.10);
  --e3:0 12px 32px rgba(22,22,22,.14);

  --nav-h:72px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---- 2. Reset + base ----------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px);-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ---- 3. Typography scale (guide pp.12–13) -------------------------------- */
.eyebrow{
  font-size:12px;line-height:16px;font-weight:600;
  letter-spacing:.20em;text-transform:uppercase;color:var(--gold-dark);
}
.eyebrow.on-dark{color:var(--champagne)}

.display{font-size:clamp(40px,6vw,56px);line-height:1.05;font-weight:700;letter-spacing:-.01em}
h1,.h1{font-size:clamp(34px,5vw,48px);line-height:1.12;font-weight:700;letter-spacing:-.01em}
h2,.h2{font-size:clamp(28px,3.6vw,40px);line-height:1.18;font-weight:700;letter-spacing:-.01em}
h3,.h3{font-size:clamp(21px,2.4vw,26px);line-height:1.25;font-weight:600;letter-spacing:-.005em}
.title{font-size:20px;line-height:28px;font-weight:600}
.lead{font-size:clamp(18px,2vw,20px);line-height:1.5;color:var(--ink-80);font-weight:400;max-width:60ch}
p{font-size:16px;line-height:1.6;color:var(--ink-80)}
.label{font-size:14px;line-height:20px;font-weight:600;letter-spacing:.03em;color:var(--ink-80)}
.caption{font-size:12px;line-height:16px;letter-spacing:.02em;color:var(--ink-60)}

/* Gold highlight — one phrase per headline. Light bg = dark gold; dark = highlight */
.hl{color:var(--gold-dark)}
.on-dark .hl,.dark .hl{color:var(--highlight)}

/* ---- 4. Layout ----------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
@media(min-width:768px){.wrap{padding-inline:40px}}
@media(min-width:1024px){.wrap{padding-inline:80px}}

section{padding-block:clamp(56px,9vw,104px)}
.section-head{max-width:64ch;margin-bottom:var(--s7)}
.section-head .lead{margin-top:var(--s4)}

.dark{background:var(--ink);color:var(--surface)}
.dark p,.dark .lead{color:rgba(247,245,240,.72)}
.dark h1,.dark h2,.dark h3,.dark .display,.dark .title{color:var(--white)}
.warm{background:var(--surface)}

.grid{display:grid;gap:var(--s5)}
@media(min-width:640px){.g-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}}

/* ---- 5. Buttons (guide pp.18) ------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 20px;border-radius:var(--r);
  font-size:15px;font-weight:600;letter-spacing:.01em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--gold);color:var(--ink)}
.btn-primary:hover{background:#b98500;box-shadow:var(--e1)}
.btn-secondary{background:var(--white);color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--surface)}
.on-dark .btn-secondary,.dark .btn-secondary{background:transparent;color:var(--white);border-color:rgba(247,245,240,.45)}
.on-dark .btn-secondary:hover,.dark .btn-secondary:hover{border-color:var(--white);background:rgba(247,245,240,.06)}
.btn-text{background:none;padding:0 4px;color:var(--gold-dark);min-height:auto}
.dark .btn-text,.on-dark .btn-text{color:var(--highlight)}
.btn-text:hover{text-decoration:underline;text-underline-offset:4px}
.btn .arw{transition:transform .2s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}

/* ---- 6. Cards + surfaces (borders before shadow, guide pp.16–17) -------- */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s6);
}
.dark .card{background:#1e1e1e;border-color:rgba(247,245,240,.12)}
.card-media{overflow:hidden;padding:0}
.card-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.card-media .card-body{padding:var(--s6)}
.tint{background:var(--gold-50);border-color:#efe6cf}

/* Screen-format dimension line (Real installs, 3-up) */
.dim-spec{margin-top:6px;font-size:13px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--gold-dark)}

.num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--gold);color:var(--gold-dark);
  font-weight:700;font-size:14px;margin-bottom:var(--s4);
}
.dark .num{color:var(--champagne);border-color:var(--champagne)}

/* Flow / process pill row (Inspect → Recommend → ...) */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s5)}
.flow .step{
  border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-weight:600;font-size:14px;background:var(--white);
}
.dark .flow .step{background:#1e1e1e;border-color:rgba(247,245,240,.14);color:var(--white)}
.flow .arw{color:var(--gold);font-weight:700}

/* Feature list with gold ticks */
.ticks{display:grid;gap:12px;margin-top:var(--s4)}
.ticks li{position:relative;padding-left:28px;color:var(--ink-80);font-size:15px;line-height:1.5}
.ticks li::before{
  content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:4px;
  background:var(--gold-50);border:1px solid var(--gold);
}
.ticks li::after{
  content:"";position:absolute;left:5px;top:10px;width:5px;height:9px;
  border:2px solid var(--gold-dark);border-top:0;border-left:0;transform:rotate(45deg);
}
.dark .ticks li{color:rgba(247,245,240,.8)}
.dark .ticks li::before{background:rgba(207,147,0,.12)}
.dark .ticks li::after{border-color:var(--champagne)}

/* Feature list (Platform showcase, letter-marked rows) */
.feature-list{list-style:none;margin-top:var(--s6);display:flex;flex-direction:column}
.feature-list li{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);
  padding:var(--s4) 0;border-top:1px solid var(--line);align-items:baseline}
.feature-list li:last-child{border-bottom:1px solid var(--line)}
.feature-list .fl-i{font-weight:700;color:var(--gold-dark);font-size:15px;line-height:1.4}
.feature-list b{font-weight:650;display:block;color:var(--ink)}
.feature-list p{color:var(--ink-60);font-size:14px;line-height:1.5;margin-top:2px}
.dark .feature-list li{border-color:rgba(247,245,240,.14)}
.dark .feature-list .fl-i{color:var(--champagne)}
.dark .feature-list b{color:var(--white)}
.dark .feature-list p{color:rgba(247,245,240,.6)}

/* ---- 6b. Platform showcase (screen model switcher, guide pp.16–17) ------- */
.model-switch{display:flex;flex-wrap:wrap;justify-content:center;column-gap:var(--s6);row-gap:4px;
  width:fit-content;margin-inline:auto;border-bottom:1px solid var(--line)}
.model-tab{background:none;border:0;border-bottom:2px solid transparent;padding:12px 2px;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--ink-60);cursor:pointer;
  transition:color .2s,border-color .2s}
.model-tab:hover{color:var(--ink)}
.model-tab.is-on{color:var(--ink);border-color:var(--gold)}
.dark .model-switch{border-color:rgba(247,245,240,.18)}
.dark .model-tab{color:rgba(247,245,240,.55)}
.dark .model-tab:hover{color:var(--white)}
.dark .model-tab.is-on{color:var(--white);border-color:var(--gold)}

.platform-grid{display:grid;gap:var(--s7);align-items:center}
@media(min-width:940px){.platform-grid{grid-template-columns:1fr 1fr;gap:var(--s8)}}

.stage-3d{position:relative;display:flex;align-items:center;justify-content:center;
  gap:var(--s4);perspective:1400px;padding:var(--s5) 0;
  /* Reserve height for the tallest model (55") so switching tabs never shifts the copy column */
  min-height:calc(min(280px,62vw) * 2.341 + var(--s5) * 2)}
.product{position:relative;width:min(280px,62vw);flex:none;transform-style:preserve-3d;
  transition:transform .5s var(--ease)}
.product img{width:100%;height:auto;object-fit:contain;display:block;border-radius:var(--r-lg);
  border:1px solid var(--line);box-shadow:var(--e3);transition:opacity .35s ease}
.dark .product img{border-color:rgba(247,245,240,.14)}

/* Static platform trust chips, floating over the photo edges */
.spec{position:absolute;display:flex;flex-direction:column;gap:2px;padding:9px 12px;
  min-width:128px;border-radius:var(--r);background:rgba(35,35,35,.92);backdrop-filter:blur(8px);
  border:1px solid rgba(247,245,240,.16);box-shadow:var(--e2);
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.in .spec{opacity:1;transform:none}
.spec:nth-child(3){transition-delay:.08s}
.spec:nth-child(4){transition-delay:.16s}
.spec span{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--champagne)}
.spec b{font-size:11px;font-weight:650;color:#fff;line-height:1.3}
.spec.s1{top:4%;left:-10%}
.spec.s2{top:42%;right:-18%}
.spec.s3{bottom:6%;left:-12%}

.stage-arrow{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);display:grid;place-items:center;font-size:20px;line-height:1;color:var(--ink);
  transition:border-color .2s,background .2s}
.stage-arrow:hover{border-color:var(--gold);background:var(--gold-50)}
.dark .stage-arrow{background:#1e1e1e;border-color:rgba(247,245,240,.18);color:var(--white)}
.dark .stage-arrow:hover{border-color:var(--gold);background:rgba(207,147,0,.14)}
.dark .caption{color:rgba(247,245,240,.55)}

@media(min-width:640px) and (max-width:1180px){
  .spec.s1{left:-2%}.spec.s2{right:-6%}.spec.s3{left:-4%}
}
@media(max-width:640px){
  .stage-arrow{display:none}
  .product{width:min(240px,68vw)}
  .stage-3d{flex-wrap:wrap;min-height:calc(min(240px,68vw) * 2.341 + var(--s5) * 2)}
  .spec{position:static;opacity:1;transform:none;min-width:0;margin-top:var(--s3)}
}

/* ---- 6c. Transformation slider (before / after drag, full-bleed) --------- */
/* object-fit:cover always fills edge-to-edge without distorting the photo's ratio —
   how much of the image is visible flexes with the window instead of ever leaving
   empty bars on the sides. */
.ba{position:relative;width:100%;height:min(66vh,540px);min-height:360px;
  overflow:hidden;touch-action:pan-y;cursor:ew-resize;margin-top:var(--s7);
  border-radius:var(--r-lg)}
.ba .scene{position:absolute;inset:0}
.ba .ph{position:absolute;inset:0;overflow:hidden}
.ba .ph img{width:100%;height:100%;object-fit:cover;display:block}
.ba .ph.before img{filter:grayscale(1) brightness(.62) contrast(.92) sepia(.1)}
.ba .ph.before::after{content:"";position:absolute;inset:0;background:rgba(8,9,12,.18)}
.ba .tag{position:absolute;top:var(--s4);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);color:var(--ink-80)}
.ba-before .tag{left:var(--s4)}
.ba-after .tag{right:var(--s4);color:var(--gold-dark);border-color:rgba(207,147,0,.4)}
.ba-after{clip-path:inset(0 0 0 50%)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--gold);
  box-shadow:0 0 14px rgba(207,147,0,.5);z-index:5;transform:translateX(-50%)}
.ba-handle .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border:1px solid var(--line);box-shadow:var(--e2);
  display:flex;align-items:center;justify-content:center;gap:4px;color:var(--ink);font-size:.78rem}
.ba-hint{margin-top:var(--s4);text-align:center;color:var(--ink-60);
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.dark .ba-hint{color:rgba(247,245,240,.55)}

/* ---- 6d. Partnership step timeline (scroll-driven progress rail) --------- */
.step-track{position:relative;margin-top:var(--s7)}
.step-rail{position:absolute;left:calc(50% - 1px);top:0;bottom:0;width:2px;background:rgba(247,245,240,.12)}
.step-rail i{position:absolute;inset:0;background:var(--gold);transform:scaleY(0);transform-origin:top;
  box-shadow:0 0 16px rgba(207,147,0,.55)}
.step{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);
  padding:clamp(2rem,5vh,3.4rem) 0;align-items:center}
.step:nth-child(even) .step-copy{order:2}
.step-num{font-weight:800;font-size:clamp(3.4rem,7vw,6rem);line-height:1;text-align:center;
  color:transparent;-webkit-text-stroke:1px rgba(205,168,104,.75)}
.step-copy .eyebrow{display:block;margin-bottom:.5rem}
.step-copy h3{margin:.2rem 0 .6rem}
.step-copy p{max-width:30rem}
@media(max-width:760px){
  .step{grid-template-columns:1fr;gap:.8rem;text-align:left}
  .step:nth-child(even) .step-copy{order:0}
  .step-num{text-align:left}
  .step-rail{left:6px}
}

/* ---- 7. Header / nav ----------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;font-size:18px}
.brand img{height:48px;width:auto;display:block}
.brand .dot{width:22px;height:22px;border-radius:6px;background:var(--gold);
  display:grid;place-items:center;color:var(--ink);font-size:13px;font-weight:800}
.brand small{display:block;font-size:10px;font-weight:600;letter-spacing:.22em;color:var(--ink-60);text-transform:uppercase}
.nav-links{display:none;align-items:center;gap:var(--s6)}
.nav-links a{font-size:15px;font-weight:500;color:var(--ink-80);transition:color .15s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-cta{display:none}
@media(min-width:900px){.nav-links,.nav-cta{display:flex}}
.burger{display:inline-flex;flex-direction:column;gap:5px;padding:10px;border:1px solid var(--line);
  border-radius:8px;background:var(--white)}
.burger span{width:20px;height:2px;background:var(--ink)}
@media(min-width:900px){.burger{display:none}}
.mobile-menu{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:55;background:var(--white);
  border-bottom:1px solid var(--line);padding:var(--s5) 24px var(--s6);
  display:none;flex-direction:column;gap:4px;box-shadow:var(--e2);
}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:12px 4px;font-size:17px;font-weight:500;border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:var(--s4);justify-content:center}

/* ---- 7b. Transparent overlay nav (index hero) ---------------------------- */
.nav.nav-overlay{
  position:fixed;top:0;left:0;right:0;
  background:transparent;border-bottom-color:transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease);
}
.nav.nav-overlay .brand,
.nav.nav-overlay .brand small{color:var(--white)}
.nav.nav-overlay .nav-links a{position:relative;padding-bottom:4px;color:rgba(247,245,240,.78);
  transition:color .3s var(--ease)}
.nav.nav-overlay .nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav.nav-overlay .nav-links a:hover,
.nav.nav-overlay .nav-links a[aria-current="page"]{color:var(--white)}
.nav.nav-overlay .nav-links a:hover::after,
.nav.nav-overlay .nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav.nav-overlay .burger{background:transparent;border-color:rgba(247,245,240,.35)}
.nav.nav-overlay .burger span{background:var(--white)}
.nav.nav-overlay.solid{
  background:rgba(22,22,22,.72);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(247,245,240,.12);
}

/* Transparent overlay nav for light pageheroes (About / Contact) — same fixed +
   underline-hover behaviour, but keeps the default dark text since it sits on a
   light gradient rather than a dark hero, and settles into the standard solid look. */
.nav.nav-overlay-light{
  position:fixed;top:0;left:0;right:0;
  background:transparent;border-bottom-color:transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease);
}
.nav.nav-overlay-light .nav-links a{position:relative;padding-bottom:4px}
.nav.nav-overlay-light .nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav.nav-overlay-light .nav-links a:hover::after,
.nav.nav-overlay-light .nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav.nav-overlay-light.solid{
  background:rgba(255,255,255,.86);backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}

/* ---- 8b. Collapse hero (sticky-track background collapse into a screen) -- */
.collapse-hero{position:relative;height:220vh;padding:0;background:#0b0b0d;
  --anim:1s;--curve:cubic-bezier(.85,0,.15,1)}
.cstage{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;background:#0b0b0d}
.cstage .lobby{position:absolute;inset:0;z-index:0}
.cstage .lobby img{width:100%;height:100%;object-fit:cover;object-position:center}
/* content layer: full-bleed in state 1, collapses onto the glass rect in state 2.
   The image fills its (shrinking) container directly with object-fit:cover, so the
   WHOLE photo rescales to fit the screen's own ratio as it collapses — it isn't
   locked to a fixed viewport crop-window, so whatever happens to show inside the
   c-frame outline in state 1 is irrelevant; the full photo lands on the screen. */
.cstage .content{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;overflow:hidden;border-radius:0;
  will-change:top,left,width,height,border-radius;
  transition:top var(--anim) var(--curve),left var(--anim) var(--curve),
             width var(--anim) var(--curve),height var(--anim) var(--curve),
             border-radius var(--anim) var(--curve),box-shadow var(--anim) var(--curve)}
.cstage .content img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block}
.cstage .c-ov{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,11,13,.82),rgba(11,11,13,.4) 55%,rgba(11,11,13,.12));
  transition:opacity var(--anim) var(--curve)}
/* glassy focus frame (target hint), pinned to the computed glass rect */
.cstage .c-frame{position:absolute;z-index:3;pointer-events:none;
  top:var(--sy);left:var(--sx);width:var(--sw);height:var(--sh);
  border:2px solid rgba(255,255,255,.7);border-radius:14px;
  box-shadow:0 0 0 1px rgba(0,0,0,.15) inset;
  transition:opacity .55s ease,border-color var(--anim) var(--curve)}
.cstage .c-text-1{position:absolute;z-index:4;left:8vw;top:50%;transform:translateY(-50%);
  max-width:min(560px,80vw);color:#fff;
  transition:opacity .5s ease,transform var(--anim) var(--curve)}
.cstage .c-text-1 .lead{color:rgba(255,255,255,.82)}
.cstage .c-text-2{position:absolute;z-index:4;left:8vw;top:16vh;max-width:min(30ch,80vw);color:var(--ink);
  opacity:0;transform:translateY(12px);
  transition:opacity .6s ease .2s,transform .6s var(--curve) .2s}
.c-scrollhint{position:absolute;z-index:4;bottom:26px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.7);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .4s}
.c-scrollhint::after{content:"";width:1px;height:26px;background:linear-gradient(rgba(255,255,255,.7),transparent);
  animation:hintpulse 1.8s ease-in-out infinite}
@keyframes hintpulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* --- STATE 2: collapsed --- */
.cstage.stage-2 .content{top:var(--sy);left:var(--sx);width:var(--sw);height:var(--sh);
  border-radius:0;box-shadow:0 40px 90px rgba(0,0,0,.30)}
.cstage.stage-2 .c-ov{opacity:0}
.cstage.stage-2 .c-frame{border-color:transparent;opacity:0}
.cstage.stage-2 .c-text-1{opacity:0;transform:translateY(-44px);pointer-events:none}
.cstage.stage-2 .c-text-2{opacity:1;transform:none}
.cstage.stage-2 .c-scrollhint{opacity:0}

@media (max-width:768px){.collapse-hero{display:none}}
@media (prefers-reduced-motion:reduce){.collapse-hero{display:none}}

/* ---- 8. Hero ------------------------------------------------------------- */
.hero{position:relative;background:var(--ink);color:var(--white);overflow:hidden;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 78% 8%,rgba(207,147,0,.28),transparent 55%),
             linear-gradient(180deg,rgba(22,22,22,.35),rgba(22,22,22,.86)),var(--ink)}
.hero .media{position:absolute;inset:0;z-index:-2}
.hero .media img,.hero .media video{width:100%;height:100%;object-fit:cover;opacity:.5}
.hero .wrap{padding-block:clamp(72px,14vh,140px)}
.hero-inner{max-width:min(860px,92%)}
.hero .display{margin-top:var(--s4);text-wrap:balance}
.hero .lead{margin-top:var(--s5);color:rgba(247,245,240,.82);max-width:52ch}
.hero .fine{margin-top:var(--s4);font-size:14px;color:rgba(247,245,240,.6);max-width:52ch}

/* Final CTA — full-bleed photo, text weighted to the left */
.cta-photo{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(4rem,16vh,7.5rem)}
.cta-photo .media{position:absolute;inset:0;z-index:-2}
.cta-photo .media img{width:100%;height:100%;object-fit:cover}
.cta-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(22,22,22,.94) 0%,rgba(22,22,22,.78) 38%,rgba(22,22,22,.4) 68%,rgba(22,22,22,.12) 100%),
    linear-gradient(180deg,rgba(22,22,22,.3),rgba(22,22,22,.48))}
.cta-photo-inner{max-width:min(34rem,92%)}
.cta-photo .lead{color:rgba(247,245,240,.82)}

/* Free content design — full-bleed photo, text weighted to the left */
.content-photo{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(4rem,16vh,7.5rem)}
.content-photo .media{position:absolute;inset:0;z-index:-2}
.content-photo .media img{width:100%;height:100%;object-fit:cover;object-position:15% center}
.content-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(22,22,22,.92) 0%,rgba(22,22,22,.74) 32%,rgba(22,22,22,.32) 62%,rgba(22,22,22,.08) 100%),
    linear-gradient(180deg,rgba(22,22,22,.22),rgba(22,22,22,.4))}
.content-photo-inner{max-width:min(30rem,92%)}
.content-photo .lead{color:rgba(247,245,240,.85)}
.content-photo p{color:rgba(247,245,240,.72)}

@media(max-width:640px){
  .content-photo::after{background:
    linear-gradient(180deg,rgba(22,22,22,.9) 0%,rgba(22,22,22,.78) 48%,rgba(22,22,22,.6) 100%)}
}

.loop-badge{width:172px;height:172px;flex:none;border-radius:50%;border:1px dashed rgba(247,245,240,.4);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(247,245,240,.04)}
.loop-row{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.loop-row b{font-size:26px;font-weight:700;color:var(--highlight)}
.loop-row span{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(247,245,240,.6)}
.loop-split{flex-direction:row;align-items:flex-start;gap:8px}
.loop-split > div{display:flex;flex-direction:column;align-items:center}
.loop-slash{font-size:16px;font-weight:600;color:rgba(247,245,240,.35);margin-top:2px}

/* Page hero (About / Contact) — lighter, gradient brand moment */
.pagehero{background:var(--grad-softwash);border-bottom:1px solid var(--line)}
.pagehero .wrap{padding-top:calc(var(--nav-h) + clamp(24px,6vh,56px));padding-bottom:clamp(56px,10vh,104px)}
.pagehero .display{margin-top:var(--s4);max-width:16ch}
.pagehero .lead{margin-top:var(--s5)}

/* Photo variant — same light scrim treatment as pagehero, over a photo instead of a gradient */
.pagehero-photo{position:relative;overflow:hidden;isolation:isolate;background:var(--surface)}
.pagehero-photo .media{position:absolute;inset:0;z-index:-2}
.pagehero-photo .media img{width:100%;height:100%;object-fit:cover}
.pagehero-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(247,245,240,.94) 0%,rgba(247,245,240,.85) 45%,rgba(247,245,240,.72) 100%)}

/* ---- 9. Logo wall -------------------------------------------------------- */
.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(min-width:640px){.logos{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.logos{grid-template-columns:repeat(5,1fr)}}
.logos .cell{background:var(--white);display:grid;place-items:center;padding:26px 18px;min-height:96px}
.logos .cell img{max-height:34px;width:auto;opacity:.72;filter:grayscale(1);transition:opacity .2s,filter .2s}
.logos .cell:hover img{opacity:1;filter:none}

/* ---- 10. Gallery --------------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media(min-width:768px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery figure{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.gallery img{aspect-ratio:3/4;object-fit:cover;width:100%;transition:transform .4s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;
  font-size:12px;font-weight:600;letter-spacing:.02em;color:#fff;
  background:linear-gradient(0deg,rgba(22,22,22,.8),transparent)}

/* ---- 10b. Rolling marquees (Landmark buildings + Brand partners) -------- */
.marquee{position:relative;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee + .marquee{margin-top:var(--s4)}
.marquee-track{display:flex;gap:var(--s4);width:max-content;
  animation:marquee var(--dur,48s) linear infinite;will-change:transform}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee.rev .marquee-track{animation-direction:reverse}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.lm-card{flex:0 0 auto;width:clamp(260px,26vw,400px);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--white)}
.lm-card .ph{position:relative;aspect-ratio:4/5}
.lm-card .ph img{width:100%;height:100%;object-fit:cover}
.lm-card .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  background:linear-gradient(0deg,rgba(22,22,22,.85),rgba(22,22,22,.15) 70%,transparent)}
.lm-card .cap .nm{color:#fff;font-weight:700;font-size:18px;line-height:1.2}
.lm-card .cap .su{color:var(--highlight);font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;margin-top:4px}

.brand-chip{flex:0 0 auto;width:176px;height:96px;display:grid;place-items:center;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.brand-chip img{max-height:34px;width:auto;filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s}
.brand-chip:hover img{filter:none;opacity:1}

@media(prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;-webkit-mask:none;mask:none}
  .marquee-track{animation:none}
}

/* ---- 11. Global stats grid (About — bordered mosaic, dark) -------------- */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(247,245,240,.12);
  border:1px solid rgba(247,245,240,.12);border-radius:var(--r-lg);overflow:hidden;margin-top:var(--s7)}
@media(min-width:768px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat-cell{background:var(--ink);padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:8px}
.stat-cell .n{font-weight:800;font-size:clamp(2.2rem,4.5vw,3.2rem);color:var(--gold);
  letter-spacing:-.02em;line-height:1}
.stat-cell .k{font-size:14px;color:rgba(247,245,240,.65);line-height:1.4}

/* ---- 11c. Global presence map (About — static image) -------------------- */
.geo-stage{position:relative;width:100%;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);margin-top:var(--s7);background:var(--white)}
.geo-svg{display:block;width:100%;height:auto}

/* Market directory — the real, clickable navigation for each market */
.network-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s7)}
@media(min-width:640px){.network-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.network-grid{grid-template-columns:repeat(4,1fr)}}
.network-item{display:block;padding:var(--s5);border-radius:var(--r);background:var(--white);
  border:1px solid var(--line);text-decoration:none;
  transition:transform .25s var(--ease),border-color .25s var(--ease)}
a.network-item:hover{transform:translateY(-3px);border-color:var(--gold)}
.network-item h3{font-size:16px;font-weight:650;color:var(--ink);margin-bottom:4px}
.network-item p{font-size:13px;color:var(--ink-60)}
.network-item.is-static{opacity:.65}

/* ---- 11d. Rolling logo strip (About — divided, monochrome on dark) ------ */
.logo-strip{flex:0 0 auto;display:flex;align-items:center;height:64px;padding:0 28px;
  border-right:1px solid rgba(247,245,240,.14)}
.logo-strip img{max-height:30px;width:auto;filter:grayscale(1) brightness(0) invert(1);opacity:.6;
  transition:opacity .25s}
.logo-strip:hover img{opacity:1}

/* ---- 11e. Insight cards (About — news & thinking grid) ------------------ */
.insight-grid{display:grid;gap:var(--s5);margin-top:var(--s7)}
@media(min-width:768px){.insight-grid{grid-template-columns:repeat(3,1fr)}}
.insight-card{display:block;border-radius:var(--r-lg);overflow:hidden;background:#1e1e1e;
  border:1px solid rgba(247,245,240,.12);transition:transform .3s var(--ease),border-color .3s var(--ease)}
.insight-card:hover{transform:translateY(-4px);border-color:rgba(207,147,0,.4)}
.insight-card .ph{position:relative;aspect-ratio:4/3;overflow:hidden}
.insight-card .ph img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .5s var(--ease)}
.insight-card:hover .ph img{transform:scale(1.05)}
.insight-card .body{padding:var(--s5)}
.insight-tag{display:inline-block;padding:5px 12px;border-radius:999px;border:1px solid rgba(207,147,0,.4);
  color:var(--champagne);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:12px}
.insight-card .date{display:block;font-size:12px;color:rgba(247,245,240,.5);margin-bottom:6px}
.insight-card h3{color:var(--white);font-size:19px;line-height:1.3;margin-bottom:8px}
.insight-card p{color:rgba(247,245,240,.62);font-size:14px;line-height:1.55}

/* ---- 11b. Testimonials (rolling avatar rail + synced quote) ------------- */
.testi-photo{position:relative;overflow:hidden;isolation:isolate}
.testi-photo .media{position:absolute;inset:0;z-index:-2}
.testi-photo .media img{width:100%;height:100%;object-fit:cover}
.testi-photo::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(247,245,240,.93),rgba(247,245,240,.88))}
.testi-grid{position:relative;display:grid;gap:var(--s7);align-items:center}
@media(min-width:860px){.testi-grid{grid-template-columns:.85fr 1.15fr;gap:var(--s8)}}

.testi-rail{position:relative;margin-top:var(--s6);padding-left:var(--s6)}
.testi-line{position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--line)}
.testi-line i{position:absolute;left:-3px;top:0;width:8px;height:8px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px var(--gold-50);transition:top .5s var(--ease)}
.testi-person{display:flex;align-items:center;gap:14px;width:100%;
  padding:12px 0;opacity:.55;transition:opacity .4s var(--ease)}
.testi-person.is-on{opacity:1}
.testi-avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:14px;letter-spacing:.02em;box-shadow:var(--e1);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.testi-person.is-on .testi-avatar{transform:scale(1.27);box-shadow:0 0 0 3px var(--gold-50),var(--e2)}
.testi-meta{display:flex;flex-direction:column;gap:3px}
.testi-meta b{font-size:15px;font-weight:650;color:var(--ink);transition:color .3s var(--ease)}
.testi-person.is-on .testi-meta b{color:var(--gold-dark)}
.testi-role{font-size:12px;font-weight:600;color:var(--ink-60);letter-spacing:.02em}

.testi-quote{position:relative;padding-left:clamp(1.5rem,4vw,2.8rem)}
.testi-mark{position:absolute;left:-.3rem;top:-1.6rem;font-size:5.5rem;font-weight:700;
  color:rgba(207,147,0,.16);line-height:1;pointer-events:none}
.testi-quote blockquote{position:relative;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.5;
  font-weight:500;letter-spacing:-.005em;color:var(--ink);max-width:46ch;
  opacity:1;transform:none;transition:opacity .26s var(--ease),transform .26s var(--ease)}
.testi-quote blockquote.is-out{opacity:0;transform:translateY(8px)}
.testi-quote cite{display:block;margin-top:var(--s5);font-style:normal;font-size:13px;
  font-weight:600;color:var(--ink-60);letter-spacing:.02em}

/* ---- 12. Forms (guide pp.18) -------------------------------------------- */
.form{display:grid;gap:var(--s4)}
@media(min-width:640px){.form .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}}
.field{display:grid;gap:6px}
.field label{font-size:14px;font-weight:600;color:var(--ink-80)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:15px;color:var(--ink);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;min-height:44px;
  transition:border-color .15s,box-shadow .15s;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(207,147,0,.55)
}
.field .req{color:var(--gold-dark)}
.form-note{font-size:13px;color:var(--ink-60)}
.form-ok{display:none;margin-top:var(--s4);padding:16px;border-radius:var(--r);background:var(--gold-50);
  border:1px solid var(--gold);color:var(--ink);font-weight:500}
.form-ok.show{display:block}
.form-error{display:none;margin-top:var(--s4);padding:16px;border-radius:var(--r);background:#fdf1ef;
  border:1px solid #e8b4a8;color:var(--ink);font-weight:500}
.form-error.show{display:block}
.form-error a{color:var(--gold-dark);text-decoration:underline}

/* ---- 13. Footer ---------------------------------------------------------- */
.footer{background:var(--ink);color:rgba(247,245,240,.72);padding-block:var(--s8) var(--s6)}
.footer a{color:rgba(247,245,240,.72)}
.footer a:hover{color:#fff}
.footer .cols{display:grid;gap:var(--s6);grid-template-columns:1fr}
@media(min-width:720px){.footer .cols{grid-template-columns:2fr 1fr 1fr}}
.footer h4{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.footer ul{display:grid;gap:10px;font-size:15px}
.footer .brand{color:#fff;margin-bottom:14px}
.footer .brand small{color:rgba(247,245,240,.55)}
.footer .fine{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid rgba(247,245,240,.14);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;color:rgba(247,245,240,.5)}

/* ---- 14. Reveal-on-scroll + motion safety ------------------------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
  .gallery img,.btn,.hero .media video{transition:none}
}