/* ================================================================
   HI Growth Marketing — 2026 Rebuild
   Bricolage Grotesque · DM Sans
   Dual Audience: Kamaʻāina (Local) · West Coast (Mainland)
   ================================================================ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. CUSTOM PROPERTIES — Dual Palette System
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  /* Typography */
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body:    'DM Sans', system-ui, sans-serif;

  /* Easing */
  --ease-out:    cubic-bezier(.22,1,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-expo:   cubic-bezier(.87,0,.13,1);

  /* Radii */
  --r-sm:  10px; --r-md:  16px; --r-lg:  24px;
  --r-xl:  40px; --r-pill: 999px;

  /* Font aliases — both naming conventions work */
  --f-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-body:    'DM Sans', system-ui, sans-serif;

  /* Diagonal scroll amount */
  --diag: 64px;

  /* ── Kamaʻāina (Local) — default palette ── */
  --dark:    #0E2A1F;
  --dark-2:  #162E23;
  --dark-3:  #1F3C2E;
  --mid:     #1A5C42;
  --teal:    #169A8A;
  --teal-l:  #A8D9D0;
  --teal-xl: rgba(22,154,138,.09);
  --accent:  #E8603C;
  --accent-l:#F4A485;
  --gold:    #E8C460;
  --gold-d:  #C4A02C;
  --cream:   #F6F0E6;
  --cream-2: #EDE5D4;
  --white:   #FFFFFF;
  --ink:     #0E2A1F;
  --ink-2:   #2A4A3E;
  --ink-3:   #6A8E87;
  --ink-4:   #A8C4BE;
  --border:  rgba(22,154,138,.14);
  --border-d:rgba(14,42,31,.10);
  --shadow:  0 4px 24px rgba(14,42,31,.18);
  --shadow-l:0 2px 12px rgba(14,42,31,.10);
}

/* ── West Coast (Mainland) palette override ── */
[data-audience="mainland"] {
  --dark:    #0A1628;
  --dark-2:  #0F1E35;
  --dark-3:  #162742;
  --mid:     #1A3A6B;
  --teal:    #00C2B5;
  --teal-l:  #7FE8E0;
  --teal-xl: rgba(0,194,181,.09);
  --accent:  #7FD94C;
  --accent-l:#B5EF8A;
  --gold:    #F2B830;
  --gold-d:  #C48F10;
  --cream:   #F4F6F8;
  --cream-2: #E8EDF2;
  --ink:     #0A1628;
  --ink-2:   #2A3F5E;
  --ink-3:   #6A80A0;
  --ink-4:   #A8BBCC;
  --border:  rgba(0,194,181,.14);
  --border-d:rgba(10,22,40,.10);
  --shadow:  0 4px 24px rgba(10,22,40,.20);
  --shadow-l:0 2px 12px rgba(10,22,40,.12);
}

/* Color transitions on audience switch */
*, *::before, *::after {
  transition: background-color .4s var(--ease-out),
              border-color .4s var(--ease-out),
              color .4s var(--ease-out);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. RESET
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; } /* scroll-behavior removed — Lenis owns smooth scroll */
body {
  font-family: var(--body); font-size: 1rem; line-height: 1.65;
  color: var(--ink-2); background: var(--cream);
  overflow-x: hidden; cursor: none;
}
body.exp-off { cursor: auto; }
@media (hover:none),(pointer:coarse) { body { cursor: auto; } }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: none; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; cursor: auto; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* Skip link */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 99999;
  padding: .5rem 1rem; background: var(--teal); color: #fff;
  border-radius: var(--r-sm); font-size: .85rem; font-weight: 700;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. TYPOGRAPHY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.0; letter-spacing: -.03em; color: var(--ink);
}
h2 { font-size: clamp(2rem,4.5vw,4.5rem); font-weight: 800; }
h3 { font-size: clamp(1rem,1.6vw,1.35rem); font-weight: 700; }

.label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--body); font-size: .6rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--teal);
}
.label::before {
  content: ''; width: 14px; height: 1.5px;
  background: var(--teal); flex-shrink: 0;
}
.label-w { color: rgba(255,255,255,.5); }
.label-w::before { background: rgba(255,255,255,.4); }
.label-accent { color: var(--accent); }
.label-accent::before { background: var(--accent); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. LAYOUT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wrap { width: 100%; max-width: 1380px; margin: 0 auto; padding: 0 clamp(1.5rem,4vw,4rem); }
.sec  { padding: clamp(4.5rem,8vw,8rem) 0; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 2rem; border-radius: var(--r-pill);
  font-family: var(--body); font-weight: 700; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1.5px solid transparent; white-space: nowrap; cursor: none;
  transition: transform .35s var(--ease-spring),
              box-shadow .3s, background .25s, color .25s, border-color .25s;
}
.btn:hover  { transform: translateY(-3px); }
.btn:active { transform: translateY(0); }

/* Teal / primary CTA */
.btn-teal, .btn--teal, .btn--primary {
  background: var(--teal); color: #fff;
  box-shadow: 0 4px 20px rgba(22,154,138,.28);
}
.btn-teal:hover, .btn--teal:hover, .btn--primary:hover {
  box-shadow: 0 8px 32px rgba(22,154,138,.4);
}
[data-audience="mainland"] .btn-teal,
[data-audience="mainland"] .btn--teal,
[data-audience="mainland"] .btn--primary {
  box-shadow: 0 4px 20px rgba(0,194,181,.28);
}

/* Accent (coral) */
.btn-accent, .btn--accent {
  background: var(--accent); color: #fff;
  box-shadow: 0 4px 20px rgba(232,96,60,.28);
}
.btn-accent:hover, .btn--accent:hover { box-shadow: 0 8px 32px rgba(232,96,60,.4); }

/* Ghost (white outline — for dark backgrounds) */
.btn-outline-w, .btn--ghost {
  background: transparent; color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.25);
}
.btn-outline-w:hover, .btn--ghost:hover {
  border-color: rgba(255,255,255,.7); color: #fff;
}

/* Dark (for accent/light section CTAs) */
.btn-outline, .btn--dark {
  background: var(--dark); color: var(--cream);
  border-color: var(--dark);
}
.btn-outline:hover, .btn--dark:hover {
  background: var(--dark-2); border-color: var(--teal); color: var(--teal);
}

/* Small (inside service card back) */
.btn-sm, .btn--sm { padding: .45rem 1.1rem; font-size: .63rem; }

/* Large */
.btn-lg, .btn--lg { padding: 1.1rem 2.6rem; font-size: .78rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. LOADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: all; overflow: hidden;
}
.ld-top, .ld-bot {
  position: absolute; left: 0; right: 0; height: 50%;
  background: var(--dark); transition: transform .9s var(--ease-expo) .15s;
}
.ld-top { top: 0; }
.ld-bot { bottom: 0; }
.loader.done .ld-top { transform: translateY(-100%); }
.loader.done .ld-bot { transform: translateY(100%); }
.ld-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.5rem;
  pointer-events: none; transition: opacity .35s;
}
.loader.done .ld-content { opacity: 0; }
.ld-logo {
  height: 40px; filter: brightness(0) invert(1);
  opacity: 0; animation: ldUp .7s var(--ease-out) .2s forwards;
}
.ld-sub {
  font-family: var(--body); font-size: .62rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.3);
  opacity: 0; animation: ldUp .6s var(--ease-out) .45s forwards;
}
.ld-bar-wrap {
  width: min(280px,70vw); height: 2px;
  background: rgba(255,255,255,.07); overflow: hidden; border-radius: 2px;
  opacity: 0; animation: ldUp .5s var(--ease-out) .65s forwards;
}
.ld-bar { height: 100%; background: var(--teal); width: 0%; transition: width .05s linear; }
@keyframes ldUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
body:not(.loaded) main { opacity: 0; }
body.loaded main { opacity: 1; transition: opacity .4s; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. CURSOR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cur-dot {
  position: fixed; width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal); pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%); transition: background .3s;
}
.cur-ring {
  position: fixed; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--teal); pointer-events: none; z-index: 9997;
  transform: translate(-50%,-50%); opacity: .32;
  transition: width .3s var(--ease-out), height .3s var(--ease-out),
              opacity .3s, border-color .3s;
}
body.ch .cur-dot  { width: 10px; height: 10px; background: var(--accent); }
body.ch .cur-ring { width: 50px; height: 50px; opacity: .16; border-color: var(--accent); }
body.exp-off .cur-dot, body.exp-off .cur-ring { display: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. NAV — Frosted glass, scroll-reveal
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 700;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1.5rem,3vw,3rem);
  height: 66px;
  /* Hidden at top of page */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateY(-100%);
  transition: transform .5s var(--ease-out),
              background .4s, backdrop-filter .4s, box-shadow .4s;
}
.site-nav.scrolled {
  transform: translateY(0);
  background: rgba(14,42,31,.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), var(--shadow-l);
}
[data-audience="mainland"] .site-nav.scrolled {
  background: rgba(10,22,40,.85);
}

/* Logo */
.nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.nav-logo-img {
  height: 26px; width: auto;
  filter: brightness(0) invert(1);
  transition: opacity .3s;
}
.nav-logo:hover .nav-logo-img { opacity: .75; }

/* Nav links */
.nav-links {
  display: flex; align-items: center; gap: .25rem;
  list-style: none;
}
.nav-link {
  display: block; padding: .55rem 1rem;
  font-family: var(--body); font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
  border-radius: var(--r-sm);
  transition: color .25s, background .25s;
  cursor: none;
}
.nav-link:hover, .nav-link.active { color: #fff; background: rgba(255,255,255,.08); }
.nav-link-cta {
  background: var(--teal); color: #fff !important;
  padding: .55rem 1.25rem;
  transition: background .25s, box-shadow .25s !important;
}
.nav-link-cta:hover {
  background: var(--accent) !important;
  box-shadow: 0 4px 16px rgba(232,96,60,.3);
}

/* Services mega-dropdown */
.nav-item { position: relative; }
.nav-dropdown {
  position: absolute; top: calc(100% + .75rem); left: 50%;
  transform: translateX(-50%);
  width: 560px; padding: 1.5rem;
  background: var(--dark-2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  clip-path: inset(0 0 100% 0 round var(--r-lg));
  transition: clip-path .35s var(--ease-out), opacity .25s;
  opacity: 0; pointer-events: none;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  clip-path: inset(0 0 0% 0 round var(--r-lg));
  opacity: 1; pointer-events: all;
}
.nav-dd-item {
  display: flex; align-items: flex-start; gap: .75rem; padding: .85rem;
  border-radius: var(--r-md); cursor: none;
  transition: background .2s;
}
.nav-dd-item:hover { background: rgba(255,255,255,.06); }
.nav-dd-icon {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.06); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; font-size: 1rem;
}
.nav-dd-text strong {
  display: block; font-family: var(--body); font-size: .78rem;
  font-weight: 700; color: var(--white); margin-bottom: .15rem;
}
.nav-dd-text span {
  font-family: var(--body); font-size: .67rem;
  color: rgba(255,255,255,.4);
}

/* Audience toggle pill */
.audience-toggle {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .75rem .35rem .5rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-pill); cursor: none;
  font-family: var(--body); font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
  transition: background .25s, border-color .25s, color .25s;
}
.audience-toggle:hover { background: rgba(255,255,255,.14); color: #fff; }
.at-icon { font-size: .9rem; line-height: 1; }
.at-switch {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0;
  transition: background .4s;
}

/* Experience toggle */
.exp-toggle {
  position: fixed; bottom: 2rem; left: 2rem; z-index: 600;
  display: flex; align-items: center; gap: .4rem;
  background: rgba(14,42,31,.55); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-pill); padding: .3rem .65rem .3rem .45rem;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  cursor: none;
}
[data-audience="mainland"] .exp-toggle { background: rgba(10,22,40,.6); }
.et-label {
  font-family: var(--body); font-size: .5rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.38);
}
.et-btn { display: flex; align-items: center; cursor: none; padding: 0; }
.et-track {
  width: 26px; height: 14px; background: var(--teal);
  border-radius: var(--r-pill); position: relative; transition: background .3s;
}
.et-thumb {
  position: absolute; top: 2px; right: 2px;
  width: 10px; height: 10px; border-radius: 50%; background: #fff;
  transition: transform .3s var(--ease-spring);
}
body.exp-off .et-track { background: rgba(255,255,255,.2); }
body.exp-off .et-thumb { transform: translateX(-12px); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. AUDIENCE POPUP — Gamified "Choose Your Path"
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ── Audience Split Screen ─────────────────────────────────
   Full-screen split: left = local, right = mainland.
   Slides left or right on selection to reveal the page.
──────────────────────────────────────────────────────────── */
.ap-split {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: row;
}
.ap-split[aria-hidden="true"] { display: none; }

/* Curtain: each half exits its own direction */
.ap-half--local.exit-left    { transform: translateX(-100%); }
.ap-half--mainland.exit-right { transform: translateX(100%); }

/* Fade out center logo + divider while curtains close */
.ap-split.exiting .ap-divider,
.ap-split.exiting .ap-center-logo { opacity: 0; transition: opacity .25s ease; }

/* Each half */
.ap-half {
  flex: 1;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: flex .55s cubic-bezier(.25,1,.5,1),
              transform .82s cubic-bezier(.77,0,.18,1);
  will-change: transform;
}
.ap-half:hover { flex: 1.35; }
.ap-half--local   { background: #0B2219; }
.ap-half--mainland { background: #080F1E; }

/* Single logo — top center of the split screen */
.ap-center-logo {
  position: absolute; top: 2.5rem; left: 50%;
  transform: translateX(-50%);
  z-index: 20; pointer-events: none;
  transition: opacity .25s ease;
}
.ap-center-logo img {
  height: 36px; display: block;
  filter: brightness(0) invert(1); opacity: .85;
}

/* Radial glow from bottom of each half */
.ap-bg-glow {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .6s var(--ease-out);
}
.ap-half--local   .ap-bg-glow {
  background: radial-gradient(ellipse 100% 65% at 50% 100%,
    rgba(22,154,138,.5) 0%, rgba(232,96,60,.15) 45%, transparent 70%);
}
.ap-half--mainland .ap-bg-glow {
  background: radial-gradient(ellipse 100% 65% at 50% 100%,
    rgba(0,194,181,.45) 0%, rgba(127,217,76,.12) 45%, transparent 70%);
}
.ap-half:hover .ap-bg-glow { opacity: 1; }

/* Centered content stack */
.ap-half-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 2rem;
  max-width: min(400px, 38vw);
}

/* Logo — faint at top */
.ap-half-logo {
  height: 26px; margin-bottom: clamp(2.5rem,5vh,4.5rem);
  filter: brightness(0) invert(1); opacity: .25;
}
.ap-half-logo--m { filter: brightness(0) invert(1) sepia(1) hue-rotate(170deg); opacity: .25; }

/* Big emoji */
.ap-half-emoji {
  font-size: clamp(3.5rem,7vw,5.5rem);
  line-height: 1; display: block;
  margin-bottom: clamp(1rem,2.5vh,1.75rem);
  transition: transform .5s var(--ease-spring);
}
.ap-half:hover .ap-half-emoji { transform: scale(1.22) rotate(-8deg); }

/* Main title */
.ap-half-title {
  font-family: var(--f-display);
  font-size: clamp(3.5rem,7vw,7rem);
  font-weight: 800; letter-spacing: -.04em; line-height: .88;
  margin-bottom: clamp(.6rem,1.5vh,1rem);
}
.ap-half--local   .ap-half-title { color: #A8D9D0; }
.ap-half--mainland .ap-half-title { color: #7FE8E0; }

/* Region tag */
.ap-half-tag {
  font-family: var(--f-body); font-size: .6rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.3); margin-bottom: clamp(1rem,2vh,1.5rem);
}

/* Description */
.ap-half-desc {
  font-family: var(--f-body); font-size: clamp(.78rem,1.1vw,.88rem);
  color: rgba(255,255,255,.42); line-height: 1.65;
  margin-bottom: clamp(1.5rem,3vh,2.5rem); max-width: 280px;
}

/* CTA pill */
.ap-half-btn {
  display: inline-flex; align-items: center;
  padding: .75rem 2rem; border-radius: var(--r-pill);
  font-family: var(--f-body); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  border: 1.5px solid; cursor: pointer;
  transition: background .3s var(--ease-out), border-color .3s, color .3s, box-shadow .3s;
}
.ap-half--local   .ap-half-btn { color: #A8D9D0; border-color: rgba(168,217,208,.28); }
.ap-half--mainland .ap-half-btn { color: #7FE8E0; border-color: rgba(127,232,224,.28); }
.ap-half--local:hover   .ap-half-btn { background: #169A8A; border-color: #169A8A; color: #fff; box-shadow: 0 0 30px rgba(22,154,138,.45); }
.ap-half--mainland:hover .ap-half-btn { background: #00C2B5; border-color: #00C2B5; color: #fff; box-shadow: 0 0 30px rgba(0,194,181,.45); }

/* Center divider */
.ap-divider {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; transform: translateX(-50%);
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  z-index: 5; pointer-events: none;
}
.ap-divider-label {
  font-family: var(--f-body); font-size: .58rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.25);
  background: #0E1A14; border: 1px solid rgba(255,255,255,.1);
  padding: .45rem .8rem; border-radius: 100px;
}

/* Corner arrows — hint at slide direction */
.ap-arrow {
  position: absolute; bottom: 2.5rem;
  font-size: 1.5rem; color: rgba(255,255,255,.15);
  transition: color .3s, transform .3s;
}
.ap-arrow--left  { left:  2rem; }
.ap-arrow--right { right: 2rem; }
.ap-half:hover .ap-arrow { color: rgba(255,255,255,.5); }
.ap-half--local:hover   .ap-arrow { transform: translateX(-6px); }
.ap-half--mainland:hover .ap-arrow { transform: translateX(6px); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. HERO — Full-height, split layout
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero {
  position: relative; min-height: 100svh;
  background: var(--dark);
  display: grid; grid-template-columns: 44% 56%;
  align-items: center; overflow: hidden; isolation: isolate;
}

/* Subtle noise texture overlay */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: .35; pointer-events: none;
}

/* Left — text */
.hero-text {
  position: relative; z-index: 2;
  padding: clamp(7rem,11vw,10rem) clamp(1.5rem,3vw,3rem) clamp(4rem,6vw,6rem) clamp(1.5rem,5vw,5rem);
  display: flex; flex-direction: column; justify-content: center;
}

/* Hero eyebrow */
.hero-eyebrow {
  font-family: var(--f-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal-l); margin: 0 0 1.25rem;
  opacity: 0; animation: fadeUp .7s var(--ease-out) .8s forwards;
}

/* Hero headline em — accent color for second line */
.hero-headline-em { color: var(--teal-l); display: block; }

/* Hero headline — own animation, no reveal class */
.hero-headline {
  opacity: 0; animation: fadeUp .8s var(--ease-out) 1.0s forwards;
}

/* Hero sub — own animation */
.hero-sub {
  opacity: 0; animation: fadeUp .7s var(--ease-out) 1.35s forwards;
}

/* Hero actions row */
.hero-actions {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .25rem;
  opacity: 0; animation: fadeUp .7s var(--ease-out) 1.65s forwards;
}

/* Badge */
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .28rem .85rem .28rem .4rem;
  border-radius: var(--r-pill);
  background: rgba(22,154,138,.14); border: 1px solid rgba(22,154,138,.22);
  font-family: var(--body); font-size: .56rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--teal-l);
  width: fit-content; margin-bottom: 2rem;
  opacity: 0; animation: fadeUp .7s var(--ease-out) 1.0s forwards;
}
[data-audience="mainland"] .hero-badge {
  background: rgba(0,194,181,.12); border-color: rgba(0,194,181,.2);
}
.hb-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0;
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(22,154,138,.6); }
  50%      { box-shadow: 0 0 0 7px rgba(22,154,138,0); }
}
[data-audience="mainland"] .hb-dot { background: var(--teal); }

/* Kinetic headline — JS wraps each letter in .kl-char */
.hero-h1, .hero-headline {
  font-family: var(--f-display);
  font-size: clamp(3rem,7vw,7.5rem);
  font-weight: 800; line-height: .92; letter-spacing: -.04em;
  color: var(--white); margin: 0 0 1.75rem;
}
.hero-h1 .line { display: block; overflow: hidden; }
.hero-h1 .li {
  display: block; transform: translateY(110%);
  animation: slideUp 1s var(--ease-expo) forwards;
}
.hero-h1 .line:nth-child(1) .li { animation-delay: 1.0s; }
.hero-h1 .line:nth-child(2) .li {
  animation-delay: 1.15s; color: var(--teal-l);
}
.hero-h1 .line:nth-child(3) .li { animation-delay: 1.3s; }

/* Kinetic character — JS adds transform on mousemove */
.kl-char {
  display: inline-block;
  transition: transform .15s var(--ease-out);
  will-change: transform;
}

.hero-sub {
  font-size: clamp(.88rem,1.3vw,1.05rem); color: rgba(255,255,255,.55);
  max-width: 440px; line-height: 1.82; margin-bottom: 2.25rem;
}

.hero-ctas {
  display: flex; gap: 1rem; flex-wrap: wrap;
}

/* Hero headline color */
.hero .hero-headline { color: var(--white); }

/* Scroll indicator */
.hero-scroll {
  position: absolute; bottom: 2.5rem; left: clamp(1.5rem,5vw,5rem); z-index: 4;
  display: flex; align-items: center; gap: .7rem;
  opacity: 0; animation: fadeUp .6s var(--ease-out) 2.6s forwards;
}
.hero-scroll-line, .hs-line {
  width: 36px; height: 1px; background: rgba(255,255,255,.18);
  overflow: hidden; position: relative; flex-shrink: 0;
}
.hero-scroll-line::after, .hs-line::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%; background: var(--teal);
  animation: lineFlow 2.2s ease-in-out infinite;
}
@keyframes lineFlow { 0%{left:-100%} 100%{left:100%} }
.hero-scroll-text, .hs-text {
  font-family: var(--f-body); font-size: .54rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.45);
}

/* Right — SVG scene */
.hero-scene {
  position: relative; z-index: 1;
  width: 100%; height: 100svh; overflow: hidden;
  background: radial-gradient(ellipse 85% 50% at 50% 65%,
    rgba(14,56,46,.45) 0%, rgba(11,30,24,.2) 55%, transparent 80%);
}
[data-audience="mainland"] .hero-scene {
  background: radial-gradient(ellipse 85% 50% at 50% 65%,
    rgba(14,30,60,.5) 0%, rgba(10,22,40,.2) 55%, transparent 80%);
}

.hs-el {
  position: absolute; pointer-events: none; user-select: none;
  opacity: 0;
}

/*
 * Ground-plane scene. ocean-square anchors at bottom: 0.
 * At the primary viewport (1200–1440px wide, 900px tall):
 *   scene ≈ 696–835px wide, 900px tall
 *   ocean-square (1264×712 = 1.775:1) at 115% w ≈ 451–541px tall = 50–60% of scene height
 *   → ocean top sits at ~40–50% from the top of the scene
 * Mountains (1762×298 = 5.91:1) at 190% w ≈ 224–268px tall = ~25–30% of scene height
 *   → top: 22% puts mountain peaks at ~22% from top, base at ~47–52% ≈ ocean top ✓
 * Sun (1154×485 = 2.38:1) at 46% w ≈ 134–161px tall
 *   → top: 5% puts it in upper sky, behind mountains ✓
 * All vegetation anchored bottom: 0 — rooted to the ground.
 */

/* ── Ocean + beach — fills column edge to edge ───────────── */
.hs-ocean {
  width: 100%; bottom: 0; left: 0; z-index: 3;
  animation: hsFadeIn 1.6s var(--ease-out) 1.1s both;
}

/* ── Mountains — slide in from left, prominent center ───── */
.hs-cliff {
  width: 210%; top: 26%; left: -55%; z-index: 2;
  animation: hsMountSlide 1.4s var(--ease-out) .75s both;
}

/* ── Sun — high in sky, rays above mountain peaks ─────────  */
.hs-sun {
  width: 54%; top: 5%; left: 23%; z-index: 1;
  transform-origin: bottom center;
  animation: hsSunRise 1.8s cubic-bezier(.34,1.3,.64,1) .4s both;
}

/* ── Single palm — slim, stands at beach line ────────────── */
.hs-palm-s {
  width: 32%; bottom: 0; left: 2%; z-index: 5;
  transform-origin: bottom center;
  animation: hsPalmPop 1.5s cubic-bezier(.34,1.5,.64,1) 1.5s both;
}

/* ── Plumeria — left foreground, ground flowers ──────────── */
.hs-plumeria {
  width: 42%; bottom: -2%; left: -2%; z-index: 6;
  transform-origin: bottom left;
  animation: hsBloom 1.1s var(--ease-spring) 2.0s both;
}

/* ── Hibiscus — hero level, in front of both columns ─────── */
.hs-hibiscus {
  position: absolute;
  width: 34%; bottom: -5%; right: 1%;
  z-index: 15;
  transform-origin: bottom right;
  animation: hsBloom 1.3s var(--ease-spring) 2.2s both;
}

/* Scene keyframes */
@keyframes hsUp      { from{opacity:0;transform:translateY(55px)} to{opacity:1;transform:translateY(0)} }
@keyframes hsLeft    { from{opacity:0;transform:translateX(-55px)} to{opacity:1;transform:translateX(0)} }
@keyframes hsRight   { from{opacity:0;transform:translateX(55px)} to{opacity:1;transform:translateX(0)} }
@keyframes hsGrow    { from{opacity:0;transform:translateY(55px) scale(.93)} to{opacity:1;transform:translateY(0) scale(1)} }

/* Dramatic entrance animations */
@keyframes hsFadeIn {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes hsMountSlide {
  from { opacity:0; transform:translateX(-180px) translateY(18px); }
  to   { opacity:1; transform:translateX(0) translateY(0); }
}
@keyframes hsSunRise {
  0%   { opacity:0; transform:translateY(160px) scale(.1); }
  60%  { opacity:1; transform:translateY(-10px) scale(1.04); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes hsPalmPop {
  0%   { opacity:0; transform:translateY(240px) scale(.2) rotate(-10deg); }
  60%  { opacity:1; transform:translateY(-14px) scale(1.04) rotate(2deg); }
  100% { opacity:1; transform:translateY(0) scale(1) rotate(0deg); }
}
@keyframes hsBloom {
  0%   { opacity:0; transform:scale(.35) translateY(35px); }
  65%  { transform:scale(1.06) translateY(-4px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}

/* exp-off: instant everything */
body.exp-off .hs-el { animation: none !important; opacity: 1 !important; transform: none !important; }
body.exp-off .hero-h1 .li,
body.exp-off .hero-badge,
body.exp-off .hero-sub,
body.exp-off .hero-ctas,
body.exp-off .hero-scroll { animation: none; opacity: 1; transform: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10b. SECTION BASE + VARIANTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section {
  padding: clamp(4rem,8vw,8rem) 0;
  background: var(--cream);
  color: var(--ink);
}
.section--dark {
  background: var(--dark);
  color: var(--cream);
}
.section--accent {
  background: var(--teal);
  color: #fff;
}
[data-audience="mainland"] .section { background: var(--cream); }
[data-audience="mainland"] .section--dark { background: var(--dark); }
[data-audience="mainland"] .section--accent { background: var(--teal); }

/* Section header */
.section-head { text-align: center; margin-bottom: clamp(2.5rem,5vw,4.5rem); }
.section-eyebrow {
  font-family: var(--f-body); font-size: .64rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 .85rem; display: block;
}
.section--dark .section-eyebrow { color: var(--teal-l); }
.section-title {
  font-family: var(--f-display);
  font-size: clamp(1.8rem,3.5vw,3rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
  color: inherit; margin: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10c. STATS STRIP (index.php class aliases)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stat {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 0 1rem;
}
.stat-num {
  font-family: var(--f-display);
  font-size: clamp(2rem,4vw,3.5rem);
  font-weight: 800; color: var(--ink);
  line-height: 1; letter-spacing: -.04em;
}
/* Alias: stat-label already defined below */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10d. MARQUEE (inline span/dot variant from index.php)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.marquee-track span {
  font-family: var(--f-body); font-size: .63rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.38); white-space: nowrap; padding: 0 1rem;
}
.mx-dot { color: var(--teal) !important; padding: 0 .2rem !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10e. SERVICES GRID (index.php class aliases)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.svc-name {
  font-family: var(--f-display); font-size: 1.1rem;
  font-weight: 800; color: var(--ink); margin: 0 0 .35rem;
  letter-spacing: -.02em;
}
.svc-front-hook {
  font-size: .82rem; color: var(--ink-3); line-height: 1.5;
}
.svc-flip-hint {
  font-size: .58rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin-top: auto;
  padding-top: .75rem;
}
.svc-back-name {
  font-family: var(--f-display); font-size: 1rem; font-weight: 800;
  color: var(--cream); margin: 0 0 .5rem; letter-spacing: -.02em;
}
.svc-back p {
  font-size: .82rem; color: rgba(246,240,230,.6);
  line-height: 1.65; margin: 0 0 1.25rem;
}
.svc-cta { text-align: center; padding-top: 1rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10f. WHY SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.why-section { background: var(--cream); }
.why-inner {
  display: grid; grid-template-columns: 1fr 420px;
  gap: clamp(2rem,5vw,6rem); align-items: center;
}
.why-text { min-width: 0; }
.why-cards { display: flex; flex-direction: column; gap: 2rem; margin-top: 2.5rem; }
.wc {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.5rem; border-radius: var(--r-lg);
  background: var(--cream-2); border: 1px solid var(--border-d);
}
.wc-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: .1rem; }
.wc-title {
  font-family: var(--f-display); font-size: 1rem;
  font-weight: 800; color: var(--ink); margin: 0 0 .4rem;
  letter-spacing: -.02em;
}
.wc-body { font-size: .85rem; color: var(--ink-3); line-height: 1.7; margin: 0 0 .85rem; }
.wc-bar-wrap {
  height: 4px; background: var(--border-d); border-radius: 2px; overflow: hidden;
}
.wc-bar {
  height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--teal-l));
  transition: width 1.2s var(--ease-expo);
}
.wc-bar.animated { width: var(--bar-w, 80%); }
.why-visual {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.why-hibiscus {
  width: 100%; max-width: 380px;
  filter: drop-shadow(0 20px 60px rgba(22,154,138,.2));
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10g. WORK SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.work-section { background: var(--dark); }
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; margin-bottom: 2.5rem;
}
.work-card {
  position: relative; border-radius: var(--r-lg);
  overflow: hidden; min-height: 280px;
  cursor: none;
}
.work-card-img {
  position: absolute; inset: 0; z-index: 1;
}
.work-result {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .5rem;
  background: rgba(14,42,31,.88);
  opacity: 0; transition: opacity .4s;
  padding: 1.5rem;
}
.work-card:hover .work-result { opacity: 1; }
.work-result-num {
  font-family: var(--f-display); font-size: clamp(2rem,4vw,3rem);
  font-weight: 800; color: var(--teal-l); letter-spacing: -.04em;
}
.work-result-label {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.65);
  text-align: center;
}
.work-info {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(0deg, rgba(14,42,31,.9) 0%, transparent 100%);
}
.work-title {
  font-family: var(--f-display); font-size: 1rem;
  font-weight: 800; color: var(--white); margin: 0 0 .2rem;
}
.work-type {
  font-size: .64rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal-l);
}
.work-hover-hint {
  display: block; font-size: .58rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-top: .35rem;
}
.work-cta { text-align: center; }
[data-audience="mainland"] .work-result { background: rgba(10,22,40,.88); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10h. TESTIMONIALS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.testi-section { background: var(--cream); }
.testi-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
}
.testi-card {
  background: var(--white); border-radius: var(--r-lg);
  padding: 2rem; border: 1px solid var(--border-d);
  display: flex; flex-direction: column; gap: 1.25rem;
}
.testi-quote {
  font-size: .9rem; color: var(--ink-2); line-height: 1.75;
  font-style: italic; margin: 0;
  quotes: "\201C" "\201D";
}
.testi-quote::before { content: open-quote; color: var(--teal); font-style: normal; }
.testi-by { display: flex; flex-direction: column; gap: .2rem; margin-top: auto; }
.testi-by strong { font-size: .82rem; color: var(--ink); font-weight: 700; }
.testi-by span { font-size: .72rem; color: var(--ink-3); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10i. FINAL CTA SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cta-section {
  background: var(--mid);
  padding: clamp(5rem,9vw,9rem) 0;
}
[data-audience="mainland"] .cta-section { background: var(--mid); }
.cta-inner { text-align: center; max-width: 680px; margin: 0 auto; }
.cta-headline {
  font-family: var(--f-display);
  font-size: clamp(2rem,4.5vw,4rem);
  font-weight: 800; color: #fff;
  letter-spacing: -.04em; line-height: 1.05;
  margin: 0 0 1.25rem;
}
.cta-sub {
  font-size: clamp(.9rem,1.3vw,1.05rem); color: rgba(255,255,255,.65);
  line-height: 1.75; margin: 0 0 2.25rem;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. MARQUEE STRIP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.marquee-strip {
  background: var(--dark-2); padding: .9rem 0; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.marquee-track {
  display: flex; width: max-content;
  animation: mq 40s linear infinite;
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }
.mq-item {
  display: flex; align-items: center; gap: 1.5rem; padding: 0 2rem;
  white-space: nowrap;
  font-family: var(--body); font-size: .63rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.35);
}
.mq-item strong { color: var(--teal); font-weight: 700; }
.mq-sep {
  display: block; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.15);
}
@keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   12. STATS STRIP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stats-strip {
  background: var(--cream); border-bottom: 1px solid var(--border-d);
  padding: clamp(3rem,5vw,4.5rem) 0;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 2rem; text-align: center;
}
.stat-item { padding: 0 1rem; }
.stat-val {
  font-family: var(--display);
  font-size: clamp(2.2rem,4vw,4rem);
  font-weight: 800; color: var(--ink);
  line-height: 1; letter-spacing: -.04em; margin-bottom: .4rem;
}
.stat-val span { color: var(--teal); }
.stat-label {
  font-family: var(--body); font-size: .62rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   13. SERVICES GRID — Flip/Unlock Mechanic
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.services-sec { background: var(--cream); }
.services-header {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 2rem;
  margin-bottom: clamp(2.5rem,5vw,4rem);
}
.services-header h2 { max-width: 520px; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.svc-card {
  position: relative; height: 320px;
  border-radius: var(--r-lg); overflow: hidden;
  cursor: none; perspective: 1000px;
}
.svc-card-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease-expo);
}
.svc-card:hover .svc-card-inner { transform: rotateY(180deg); }

.svc-front, .svc-back {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--r-lg);
  padding: 2rem;
  display: flex; flex-direction: column;
}
.svc-front {
  background: var(--cream-2);
  border: 1px solid var(--border-d);
  justify-content: space-between;
}
.svc-back {
  transform: rotateY(180deg);
  background: var(--dark);
  justify-content: flex-end; gap: 1rem;
}
[data-audience="mainland"] .svc-back { background: #0A1628; }

.svc-icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  background: var(--teal-xl); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: auto;
  transition: background .3s;
}
.svc-card:hover .svc-icon { background: var(--teal); }
.svc-front-title {
  font-family: var(--display); font-size: clamp(1.1rem,1.8vw,1.45rem);
  font-weight: 800; color: var(--ink); letter-spacing: -.03em;
  margin-bottom: .4rem;
}
.svc-front-tag {
  font-family: var(--body); font-size: .6rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.svc-back-title {
  font-family: var(--display); font-size: 1.1rem; font-weight: 800;
  color: var(--teal-l); letter-spacing: -.03em; margin-bottom: .5rem;
}
.svc-back-desc {
  font-family: var(--body); font-size: .82rem;
  color: rgba(255,255,255,.55); line-height: 1.7; margin-bottom: 1rem;
}
.svc-back-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--body); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-l); transition: gap .25s;
}
.svc-back-link:hover { gap: .7rem; }
.svc-back-link::after { content: '→'; }

/* Audience-specific service copy — hidden/shown via JS */
.svc-txt-local, .svc-txt-mainland { display: block; }
body[data-audience="mainland"] .svc-txt-local { display: none; }
body[data-audience="local"]    .svc-txt-mainland { display: none; }
body:not([data-audience])      .svc-txt-mainland { display: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   14. WHY SECTION — Audience-responsive copy
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.why-sec {
  background: var(--dark); overflow: hidden;
  position: relative;
}
.why-sec::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 80% 50%,
    rgba(22,154,138,.08) 0%, transparent 65%);
}
[data-audience="mainland"] .why-sec::before {
  background: radial-gradient(ellipse 70% 60% at 80% 50%,
    rgba(0,194,181,.07) 0%, transparent 65%);
}
.why-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem,6vw,6rem);
  align-items: center;
}
.why-label { color: rgba(255,255,255,.45); margin-bottom: 1rem; }
.why-label::before { background: rgba(255,255,255,.35); }
.why-h2 {
  font-size: clamp(2rem,4vw,4rem); color: var(--white);
  margin-bottom: 1.5rem;
}
.why-h2 em { font-style: normal; color: var(--teal-l); }
.why-body {
  font-family: var(--body); font-size: clamp(.88rem,1.2vw,.98rem);
  color: rgba(255,255,255,.45); line-height: 1.85;
  margin-bottom: 2.5rem; max-width: 480px;
}
.why-pillars {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.why-pillar {
  padding: 1.25rem; border-radius: var(--r-md);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  transition: background .3s, border-color .3s;
}
.why-pillar:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(22,154,138,.25);
}
[data-audience="mainland"] .why-pillar:hover {
  border-color: rgba(0,194,181,.22);
}
.why-pillar-icon { font-size: 1.4rem; margin-bottom: .6rem; }
.why-pillar-title {
  font-family: var(--display); font-size: .9rem; font-weight: 800;
  color: var(--white); letter-spacing: -.02em; margin-bottom: .25rem;
}
.why-pillar-desc {
  font-family: var(--body); font-size: .75rem;
  color: rgba(255,255,255,.38); line-height: 1.65;
}

/* Right side visual */
.why-visual {
  position: relative; display: flex;
  align-items: center; justify-content: center;
}
.why-card-stack { position: relative; width: 100%; max-width: 400px; }
.why-card {
  border-radius: var(--r-lg);
  padding: 1.75rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
}
.why-card + .why-card {
  position: absolute; top: -18px; right: -18px;
  z-index: -1;
  background: rgba(255,255,255,.025);
  border-color: rgba(255,255,255,.05);
}
.wc-metric {
  font-family: var(--display); font-size: 3rem; font-weight: 800;
  color: var(--teal-l); letter-spacing: -.04em; line-height: 1;
  margin-bottom: .25rem;
}
.wc-label {
  font-family: var(--body); font-size: .72rem;
  color: rgba(255,255,255,.4); margin-bottom: 1.5rem;
}
.wc-bar-wrap { height: 3px; background: rgba(255,255,255,.07); border-radius: 3px; overflow: hidden; }
.wc-bar { height: 100%; background: var(--teal); border-radius: 3px; width: 0%; transition: width 1.5s var(--ease-out); }
.wc-bar.animated { width: var(--pct, 78%); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   15. FEATURED WORK HIGHLIGHT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.work-sec { background: var(--cream); }
.work-header {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 2rem;
  margin-bottom: clamp(2.5rem,5vw,4rem);
}
.work-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.25rem;
}
.work-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--dark); cursor: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 2rem;
  min-height: 260px;
  transition: transform .4s var(--ease-spring);
}
.work-card:hover { transform: translateY(-4px); }
.work-card:nth-child(1) { grid-row: span 2; min-height: 540px; }

.work-card-img {
  position: absolute; inset: 0;
  background: var(--dark-3);
  overflow: hidden;
}
.work-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .55; transition: opacity .4s, transform .6s var(--ease-out);
}
.work-card:hover .work-card-img img { opacity: .7; transform: scale(1.04); }

/* Scratch-off result reveal */
.work-result {
  position: absolute; inset: 0;
  background: var(--dark-2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0; transition: opacity .4s var(--ease-out);
  z-index: 3;
}
.work-card:hover .work-result { opacity: .88; }
.wr-num {
  font-family: var(--display); font-size: clamp(2.5rem,5vw,4.5rem);
  font-weight: 800; color: var(--teal-l); letter-spacing: -.04em;
  line-height: 1; margin-bottom: .25rem;
}
.wr-label {
  font-family: var(--body); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

.work-meta { position: relative; z-index: 2; }
.work-tag {
  display: inline-block; margin-bottom: .6rem;
  padding: .2rem .65rem; border-radius: var(--r-pill);
  background: rgba(22,154,138,.2); border: 1px solid rgba(22,154,138,.3);
  font-family: var(--body); font-size: .56rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--teal-l);
}
[data-audience="mainland"] .work-tag {
  background: rgba(0,194,181,.18); border-color: rgba(0,194,181,.28);
}
.work-title {
  font-family: var(--display); font-size: clamp(1rem,1.8vw,1.5rem);
  font-weight: 800; color: var(--white); letter-spacing: -.03em;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   16. TESTIMONIALS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.testi-sec { background: var(--cream-2); }
.testi-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem;
}
.testi-card {
  padding: 2rem; border-radius: var(--r-lg);
  background: var(--white); border: 1px solid var(--border-d);
  box-shadow: var(--shadow-l);
  transition: transform .35s var(--ease-spring), box-shadow .3s;
}
.testi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.testi-stars { font-size: 1rem; margin-bottom: 1rem; letter-spacing: .1em; }
.testi-quote {
  font-family: var(--body); font-size: clamp(.82rem,1.1vw,.92rem);
  color: var(--ink-2); line-height: 1.8; margin-bottom: 1.5rem;
  font-style: italic;
}
.testi-author { display: flex; align-items: center; gap: .75rem; }
.testi-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--teal-xl); border: 2px solid var(--border);
  overflow: hidden; flex-shrink: 0;
}
.testi-name {
  font-family: var(--body); font-size: .78rem; font-weight: 700;
  color: var(--ink); margin-bottom: .1rem;
}
.testi-biz {
  font-family: var(--body); font-size: .65rem; color: var(--ink-3);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   17. CTA SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cta-sec {
  background: var(--dark); position: relative; overflow: hidden;
  text-align: center;
}
.cta-sec::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 50% 100%,
    rgba(22,154,138,.14) 0%, transparent 65%);
}
[data-audience="mainland"] .cta-sec::before {
  background: radial-gradient(ellipse 60% 80% at 50% 100%,
    rgba(0,194,181,.12) 0%, transparent 65%);
}
.cta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.cta-h2 {
  color: var(--white); font-size: clamp(2.2rem,5vw,5rem);
  margin-bottom: 1.25rem;
}
.cta-h2 em { font-style: normal; color: var(--teal-l); }
.cta-sub {
  font-family: var(--body); font-size: clamp(.88rem,1.3vw,1rem);
  color: rgba(255,255,255,.42); line-height: 1.8; margin-bottom: 2.5rem;
  max-width: 500px; margin-left: auto; margin-right: auto;
}
.cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   18. FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.site-footer {
  background: var(--dark-2); padding: clamp(4rem,7vw,6rem) 0 2rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem; margin-bottom: 4rem;
}
.footer-logo-img {
  height: 30px; filter: brightness(0) invert(1);
  opacity: .8; margin-bottom: 1.25rem;
}
.footer-brand p {
  font-family: var(--body); font-size: .82rem;
  color: rgba(255,255,255,.35); line-height: 1.85; margin-bottom: 1.5rem;
}
.footer-social { display: flex; gap: .5rem; }
.soc-btn {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4); cursor: none;
  transition: border-color .25s, color .25s, background .25s;
}
.soc-btn:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-xl); }
.soc-btn svg { width: 14px; height: 14px; }

.footer-col h5 {
  font-family: var(--body); font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.25);
  margin-bottom: 1.25rem;
}
.footer-col ul li + li { margin-top: .55rem; }
.footer-col ul li a {
  font-family: var(--body); font-size: .82rem;
  color: rgba(255,255,255,.4); cursor: none;
  transition: color .2s;
}
.footer-col ul li a:hover { color: rgba(255,255,255,.8); }
.footer-contacts {
  margin-top: 1.25rem; display: flex; flex-direction: column; gap: .4rem;
}
.footer-contacts a {
  font-family: var(--body); font-size: .82rem;
  color: rgba(255,255,255,.4); cursor: none; transition: color .2s;
}
.footer-contacts a:hover { color: var(--teal); }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.06);
  gap: 1rem; flex-wrap: wrap;
}
.footer-bottom p {
  font-family: var(--body); font-size: .68rem; color: rgba(255,255,255,.2);
}
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a {
  font-family: var(--body); font-size: .68rem;
  color: rgba(255,255,255,.2); cursor: none; transition: color .2s;
}
.footer-legal a:hover { color: rgba(255,255,255,.5); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   19. INNER PAGE HERO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-hero {
  background: var(--dark);
  padding: calc(66px + clamp(3rem,6vw,5rem)) 0 clamp(3rem,5vw,4rem);
}
.page-hero .label { margin-bottom: 1rem; }
.page-hero h1 {
  font-size: clamp(2.5rem,5.5vw,5.5rem); font-weight: 800;
  color: var(--white); max-width: 820px; margin-bottom: 1rem;
}
.page-hero p {
  color: rgba(255,255,255,.45); max-width: 480px;
  font-size: clamp(.88rem,1.2vw,.98rem); line-height: 1.8;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   20. REVEAL ANIMATIONS (IntersectionObserver)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.reveal, .reveal-l, .reveal-r {
  opacity: 0; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal   { transform: translateY(40px); }
.reveal-l { transform: translateX(-40px); }
.reveal-r { transform: translateX(40px); }
.revealed { opacity: 1 !important; transform: none !important; }
body.exp-off .reveal,
body.exp-off .reveal-l,
body.exp-off .reveal-r { opacity: 1; transform: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   21. AI CHAT WIDGET
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ai-chat-fab {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 600;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--teal); border: none; cursor: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(22,154,138,.35);
  transition: transform .35s var(--ease-spring), box-shadow .3s, background .3s;
}
.ai-chat-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 32px rgba(22,154,138,.45);
}
.ai-chat-fab svg { width: 22px; height: 22px; color: #fff; }
[data-audience="mainland"] .ai-chat-fab { box-shadow: 0 6px 24px rgba(0,194,181,.35); }

.ai-chat-panel {
  position: fixed; bottom: calc(2rem + 60px); right: 2rem; z-index: 600;
  width: min(360px, calc(100vw - 2rem)); max-height: 500px;
  background: var(--dark-2); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  transform: translateY(20px) scale(.95); opacity: 0;
  pointer-events: none;
  transition: transform .4s var(--ease-spring), opacity .3s, scale .4s;
}
.ai-chat-panel.open {
  transform: translateY(0) scale(1); opacity: 1; pointer-events: all;
}
.acp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.acp-title {
  font-family: var(--body); font-size: .8rem; font-weight: 700;
  color: var(--white);
}
.acp-sub {
  font-family: var(--body); font-size: .62rem; color: rgba(255,255,255,.35);
}
.acp-close { width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.06); cursor: none; color: rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; transition: background .2s;
}
.acp-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.acp-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.acp-msg { max-width: 85%; }
.acp-msg--ai { align-self: flex-start; }
.acp-msg--user { align-self: flex-end; }
.acp-bubble {
  padding: .65rem 1rem; border-radius: var(--r-md);
  font-family: var(--body); font-size: .8rem; line-height: 1.6;
}
.acp-msg--ai .acp-bubble {
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.8);
  border-bottom-left-radius: 4px;
}
.acp-msg--user .acp-bubble {
  background: var(--teal); color: #fff;
  border-bottom-right-radius: 4px;
}
.acp-input-row {
  display: flex; gap: .5rem; padding: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.acp-input {
  flex: 1; padding: .6rem 1rem; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-pill);
  font-family: var(--body); font-size: .8rem; color: var(--white);
  outline: none; transition: border-color .2s;
}
.acp-input:focus { border-color: rgba(22,154,138,.5); }
.acp-send {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--teal); cursor: none;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .25s, transform .25s var(--ease-spring);
}
.acp-send:hover { transform: scale(1.1); }
.acp-send svg { width: 14px; height: 14px; color: #fff; }

/* Typing indicator */
.acp-typing { display: flex; gap: 4px; align-items: center; padding: .65rem 1rem; }
.acp-typing span {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.3);
  animation: typingDot 1.2s ease-in-out infinite;
}
.acp-typing span:nth-child(2) { animation-delay: .2s; }
.acp-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typingDot {
  0%,60%,100% { transform: translateY(0); opacity: .3; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   22. MOBILE DRAWER + HAMBURGER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  transition: transform .3s, opacity .2s;
}
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: var(--dark);
  transform: translateX(-100%);
  transition: transform .4s var(--ease-expo);
  display: flex;
  flex-direction: column;
  padding: 2rem 2rem 3rem;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer-close {
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--cream);
  font-size: 1.5rem;
  cursor: pointer;
  padding: .5rem;
  margin-bottom: 2rem;
}
.mobile-drawer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-drawer ul li { border-bottom: 1px solid var(--border); }
.mobile-drawer ul li a {
  display: block;
  padding: 1.25rem 0;
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cream);
  text-decoration: none;
  letter-spacing: -.01em;
}
.mobile-drawer ul li a:hover { color: var(--teal); }

/* Footer CTA strip */
.footer-cta {
  text-align: center;
  padding: 3rem 1rem 4rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 3rem;
}
.footer-cta-headline {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--cream);
  margin: 0 0 1.5rem;
}
.footer-tagline {
  color: rgba(246,240,230,.55);
  font-size: .95rem;
  line-height: 1.7;
  margin: 1rem 0 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   23. SHARED KEYFRAMES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes slideUp { from{transform:translateY(110%)} to{transform:translateY(0)} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   23. RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  .hero-scene { height: 50svh; min-height: 320px; }
  .services-grid { grid-template-columns: repeat(2,1fr); }
  .why-grid { grid-template-columns: 1fr; }
  .why-visual { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .nav-dropdown { width: 460px; }
}

@media (max-width: 768px) {
  .hero { padding-top: 0; }
  .hero-text { padding: 5rem 1.5rem 4rem; }
  .hero-scene { height: 44svh; min-height: 280px; }
  /* Split screen — stack vertically on mobile */
  .ap-split { flex-direction: column; }
  .ap-half { flex: 1; }
  .ap-half:hover { flex: 1.2; }
  .ap-half-inner { max-width: 90vw; padding: 1.5rem; }
  .ap-half-emoji { font-size: 2.5rem; margin-bottom: .75rem; }
  .ap-half-title { font-size: clamp(2.5rem,10vw,4rem); }
  .ap-half-desc { display: none; }
  .ap-divider { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; transform: translateY(-50%); flex-direction: row; }
  /* Mobile curtain: local exits up, mainland exits down */
  .ap-half--local.exit-left    { transform: translateY(-100%); }
  .ap-half--mainland.exit-right { transform: translateY(100%); }
  .ap-center-logo { display: none; }
  .ap-arrow { display: none; }
  .services-grid { grid-template-columns: 1fr; }
  .svc-card { height: 260px; }
  .work-grid { grid-template-columns: 1fr; }
  .work-card:nth-child(1) { min-height: 320px; grid-row: span 1; }
  .testi-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .audience-toggle .at-label { display: none; }
  .hero-ctas { flex-direction: column; }
  .exp-toggle { display: none; }
  .ai-chat-fab { bottom: 1.25rem; right: 1.25rem; }
  .ai-chat-panel { right: 1.25rem; bottom: calc(1.25rem + 60px); }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .why-pillars { grid-template-columns: 1fr; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GRADIENT TEXT UTILITY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.grad-text {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-l) 55%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STATS MEGA — dark, full-bleed, huge numbers
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stats-mega {
  position: relative;
  background: var(--dark);
  padding: clamp(5rem,9vw,8rem) 0 calc(clamp(5rem,9vw,8rem) + var(--diag));
  overflow: hidden;
  isolation: isolate;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--diag)), 0 100%);
  margin-bottom: calc(var(--diag) * -1);
  z-index: 3;
}
.sm-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  z-index: 0;
}
.sm-blob--1 {
  width: 700px; height: 700px;
  top: -250px; left: -180px;
  background: rgba(22,154,138,.13);
}
.sm-blob--2 {
  width: 500px; height: 500px;
  bottom: -150px; right: -120px;
  background: rgba(232,96,60,.10);
}
[data-audience="mainland"] .sm-blob--1 { background: rgba(0,194,181,.13); }
[data-audience="mainland"] .sm-blob--2 { background: rgba(127,217,76,.10); }

.sm-eyebrow {
  font-family: var(--f-body); font-size: .64rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 2rem; display: block;
}
.sm-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4,1fr);
}
.sm-stat {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 3rem 1.5rem;
  position: relative;
}
.sm-stat + .sm-stat::before {
  content: ''; position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: rgba(255,255,255,.07);
}
.sm-num {
  font-family: var(--f-display);
  font-size: clamp(3.5rem,7vw,7rem);
  font-weight: 800; letter-spacing: -.05em; line-height: 1;
  color: var(--white); margin-bottom: .6rem; display: block;
}
.sm-label {
  font-family: var(--f-body); font-size: .6rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.32); max-width: 150px; line-height: 1.6;
}
.sm-deco {
  position: absolute; bottom: -20px; right: -30px;
  width: clamp(180px,22vw,320px); opacity: .04;
  pointer-events: none; filter: brightness(0) invert(1);
  z-index: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BENTO SERVICES SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bento-section {
  padding: calc(clamp(5rem,9vw,9rem) + var(--diag)) 0 calc(clamp(5rem,9vw,9rem) + var(--diag));
  background: var(--dark-3);
  position: relative;
  clip-path: polygon(0 var(--diag), 100% 0, 100% calc(100% - var(--diag)), 0 100%);
  margin-bottom: calc(var(--diag) * -1);
  z-index: 2;
}
.bento-head {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 2rem;
  margin-bottom: clamp(2.5rem,5vw,3.5rem);
}
.bento-head-text { min-width: 0; }
.bento-title {
  font-family: var(--f-display);
  font-size: clamp(2rem,5vw,4.5rem);
  font-weight: 800; letter-spacing: -.04em; line-height: .95;
  color: var(--white); margin: .5rem 0 0;
}
.bento-title em { font-style: normal; color: var(--teal-l); }

/* Grid layout — explicit bento placement */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 260px 260px 180px;
  gap: .85rem;
}
.bc-seo     { grid-area: 1 / 1 / 3 / 2; }  /* col 1, rows 1-2 tall */
.bc-ads     { grid-area: 1 / 2 / 2 / 3; }  /* col 2, row 1 */
.bc-web     { grid-area: 1 / 3 / 2 / 4; }  /* col 3, row 1 */
.bc-social  { grid-area: 2 / 3 / 4 / 4; }  /* col 3, rows 2-3 tall */
.bc-content { grid-area: 2 / 2 / 3 / 3; }  /* col 2, row 2 */
.bc-email   { grid-area: 3 / 1 / 4 / 3; }  /* cols 1-2, row 3 wide */

.bento-card {
  position: relative; border-radius: var(--r-xl);
  overflow: hidden; cursor: none;
  background: var(--dark-2);
  border: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease-spring), border-color .3s, box-shadow .4s;
  padding: 2rem;
}
.bento-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(22,154,138,.25);
  box-shadow: 0 20px 50px rgba(0,0,0,.3), 0 0 0 1px rgba(22,154,138,.12);
}
[data-audience="mainland"] .bento-card:hover {
  border-color: rgba(0,194,181,.22);
  box-shadow: 0 20px 50px rgba(0,0,0,.3), 0 0 0 1px rgba(0,194,181,.10);
}

/* Accent stripe at top */
.bc-accent {
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: var(--r-xl) var(--r-xl) 0 0;
  transition: height .3s;
}
.bento-card:hover .bc-accent { height: 4px; }
.bc-accent--teal   { background: linear-gradient(90deg, var(--teal), var(--teal-l)); }
.bc-accent--coral  { background: linear-gradient(90deg, var(--accent), var(--accent-l)); }
.bc-accent--gold   { background: linear-gradient(90deg, var(--gold-d), var(--gold)); }

/* Large muted card number — decorative background element */
.bc-num {
  font-family: var(--f-display);
  font-size: clamp(4rem,8vw,8rem);
  font-weight: 800; letter-spacing: -.06em; line-height: 1;
  color: rgba(255,255,255,.04); user-select: none;
  pointer-events: none; margin-bottom: -1rem;
}

/* Card content */
.bc-body { flex: 1; display: flex; flex-direction: column; }
.bc-name {
  font-family: var(--f-display);
  font-size: clamp(1.1rem,2vw,1.5rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1;
  color: var(--white); margin: 0 0 .5rem;
}
.bc-hook {
  font-family: var(--f-body); font-size: .8rem;
  color: rgba(255,255,255,.4); line-height: 1.6;
}
.bc-pills {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: 1.25rem;
}
.bc-pills li {
  padding: .28rem .7rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  font-family: var(--f-body); font-size: .58rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.bc-cta {
  margin-top: auto; padding-top: 1.25rem;
  font-family: var(--f-body); font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-l); transition: gap .25s, letter-spacing .25s;
  display: inline-block;
}
.bento-card:hover .bc-cta { letter-spacing: .2em; color: var(--teal-l); }

/* Tall card gets bigger name */
.bc-tall .bc-name { font-size: clamp(1.4rem,2.5vw,2rem); }
/* Wide email card — horizontal layout */
.bc-email .bc-body { flex-direction: row; align-items: center; gap: 2rem; }
.bc-email .bc-hook { max-width: 280px; }
.bc-email .bc-cta { margin: 0; padding: 0; align-self: center; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WHY EDITORIAL — full-bleed split
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.why-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative; overflow: hidden;
  min-height: 78vh;
}
.why-ed-blob {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 50% 70% at 30% 60%, rgba(22,154,138,.07) 0%, transparent 65%);
}
[data-audience="mainland"] .why-ed-blob {
  background: radial-gradient(ellipse 50% 70% at 30% 60%, rgba(0,194,181,.07) 0%, transparent 65%);
}

.why-ed-left {
  background: var(--cream);
  padding: clamp(5rem,9vw,9rem) clamp(2rem,5vw,6rem) clamp(5rem,9vw,9rem) clamp(2rem,6vw,8rem);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 1;
}
.why-ed-headline {
  font-family: var(--f-display);
  font-size: clamp(3rem,7vw,6.5rem);
  font-weight: 800; letter-spacing: -.05em; line-height: .92;
  color: var(--ink); margin: 1rem 0 1.75rem;
}
.why-line { display: block; overflow: hidden; }
.why-line--em { color: var(--teal); }
.why-ed-sub {
  font-size: clamp(.9rem,1.3vw,1.05rem);
  color: var(--ink-3); line-height: 1.8;
  max-width: 420px; margin: 0 0 2rem;
}

.why-ed-right {
  background: var(--dark);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: clamp(3rem,6vw,6rem) clamp(2rem,4vw,5rem);
  gap: 1.25rem; position: relative; overflow: hidden;
}
.why-ed-right::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(22,154,138,.1) 0%, transparent 65%);
}
[data-audience="mainland"] .why-ed-right::before {
  background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(0,194,181,.09) 0%, transparent 65%);
}

.why-pill {
  width: 100%; max-width: 400px;
  padding: 1.75rem 2rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-lg);
  display: flex; align-items: center; gap: 1.5rem;
  position: relative; z-index: 1;
  transition: background .3s, border-color .3s, transform .35s var(--ease-spring);
}
.why-pill:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(22,154,138,.28);
  transform: translateX(6px);
}
[data-audience="mainland"] .why-pill:hover { border-color: rgba(0,194,181,.25); }
.wp-num {
  font-family: var(--f-display);
  font-size: clamp(2.5rem,4vw,3.5rem);
  font-weight: 800; letter-spacing: -.05em; line-height: 1; flex-shrink: 0;
}
.wp-pct { font-size: .5em; vertical-align: super; }
.wp-label {
  font-family: var(--f-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.4); line-height: 1.5;
}
.why-tag-cloud {
  display: flex; flex-wrap: wrap; gap: .5rem;
  max-width: 400px; position: relative; z-index: 1;
  margin-top: .25rem;
}
.why-tag-cloud span {
  padding: .35rem .85rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  font-family: var(--f-body); font-size: .58rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.28);
  transition: background .25s, color .25s, border-color .25s;
}
.why-tag-cloud span:hover {
  background: rgba(22,154,138,.15); border-color: rgba(22,154,138,.3);
  color: var(--teal-l);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WORK HORIZONTAL SCROLL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.work-hscroll-section {
  background: var(--dark);
  padding: clamp(4rem,7vw,7rem) 0;
  overflow: hidden;
}
.work-hs-head {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 2rem;
  margin-bottom: 2.5rem;
}
.work-hscroll {
  display: flex; gap: 1.15rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 clamp(1.5rem,5vw,4rem) 1rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.work-hscroll:active { cursor: grabbing; }
.work-hscroll::-webkit-scrollbar { display: none; }
.work-hscroll { scrollbar-width: none; }

.whs-card {
  flex: 0 0 clamp(280px,36vw,460px);
  height: 500px;
  border-radius: var(--r-xl);
  position: relative; overflow: hidden;
  scroll-snap-align: start; cursor: none;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .4s var(--ease-spring);
}
.whs-card:hover { transform: scale(1.025) translateY(-4px); }

.whs-bg {
  position: absolute; inset: 0;
  background: linear-gradient(145deg, var(--card-from, var(--dark)), var(--card-to, var(--mid)));
}
.whs-content {
  position: relative; z-index: 2;
  padding: 1.75rem 2rem 2.25rem;
  background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, transparent 100%);
}
.whs-type {
  font-family: var(--f-body); font-size: .56rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.45); margin-bottom: .5rem; display: block;
}
.whs-title {
  font-family: var(--f-display); font-size: 1.1rem;
  font-weight: 800; color: var(--white); letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.whs-result { display: flex; flex-direction: column; gap: .25rem; }
.whs-num {
  font-family: var(--f-display);
  font-size: clamp(2.8rem,6vw,4.5rem);
  font-weight: 800; letter-spacing: -.05em; line-height: 1;
  color: var(--teal-l);
}
.whs-desc {
  font-family: var(--f-body); font-size: .6rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.whs-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(22,154,138,.28) 0%, transparent 70%);
  transition: opacity .4s;
}
.whs-card:hover .whs-glow { opacity: 1.3; }
[data-audience="mainland"] .whs-glow {
  background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(0,194,181,.28) 0%, transparent 70%);
}

.whs-card--cta {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.09);
  justify-content: center; align-items: center;
  flex-shrink: 0;
}
.whs-cta-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 1.75rem;
  padding: 2.5rem; text-align: center;
}
.whs-cta-text {
  font-family: var(--f-display);
  font-size: clamp(1.6rem,3vw,2.4rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.1;
  color: var(--white);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TESTIMONIALS — dark + glassmorphism
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.testi-dark {
  background: var(--dark-2);
  padding: clamp(5rem,9vw,9rem) 0;
  position: relative; overflow: hidden;
}
.td-blob {
  position: absolute; width: 800px; height: 800px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(22,154,138,.07) 0%, transparent 68%);
  filter: blur(70px); pointer-events: none;
}
[data-audience="mainland"] .td-blob {
  background: radial-gradient(ellipse, rgba(0,194,181,.07) 0%, transparent 68%);
}
.testi-glass-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1.25rem; margin-top: 2.5rem; align-items: start;
}
.tg-card {
  position: relative; padding: 2.25rem;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 1.25rem;
  transition: transform .4s var(--ease-spring), border-color .3s, background .3s;
}
.tg-card:hover {
  transform: translateY(-6px);
  border-color: rgba(22,154,138,.28);
  background: rgba(255,255,255,.06);
}
[data-audience="mainland"] .tg-card:hover { border-color: rgba(0,194,181,.25); }
.tg-card--featured {
  background: rgba(22,154,138,.08);
  border-color: rgba(22,154,138,.18);
}
[data-audience="mainland"] .tg-card--featured {
  background: rgba(0,194,181,.08);
  border-color: rgba(0,194,181,.18);
}
.tg-quote-mark {
  font-family: var(--f-display); font-size: 5rem;
  line-height: .5; color: var(--teal); opacity: .28;
  font-weight: 800; pointer-events: none; user-select: none;
}
.tg-text {
  font-family: var(--f-body); font-size: clamp(.82rem,1.1vw,.92rem);
  color: rgba(255,255,255,.58); line-height: 1.8; margin: 0;
}
.tg-text strong { color: rgba(255,255,255,.9); font-weight: 700; }
.tg-by {
  display: flex; align-items: center; gap: .85rem; margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.06); padding-top: 1.25rem;
}
.tg-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--teal-xl); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-body); font-size: .62rem; font-weight: 800;
  color: var(--teal-l); flex-shrink: 0; letter-spacing: .02em;
}
.tg-by strong {
  display: block; font-family: var(--f-body);
  font-size: .8rem; color: var(--white); font-weight: 700; margin-bottom: .15rem;
}
.tg-by span { font-size: .66rem; color: rgba(255,255,255,.3); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CTA GRADIENT — dramatic mesh, oversized type
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cta-gradient {
  position: relative;
  padding: calc(clamp(6rem,12vw,12rem) + var(--diag)) 0 clamp(6rem,12vw,12rem);
  overflow: hidden; background: var(--dark); isolation: isolate;
  clip-path: polygon(0 var(--diag), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(var(--diag) * -1);
  z-index: 1;
}
.cta-g-blob {
  position: absolute; border-radius: 50%;
  filter: blur(110px); pointer-events: none;
}
.cta-g-blob--1 {
  width: 900px; height: 900px;
  top: -300px; left: -200px;
  background: radial-gradient(ellipse, rgba(22,154,138,.22) 0%, transparent 65%);
}
.cta-g-blob--2 {
  width: 700px; height: 700px;
  bottom: -200px; right: -150px;
  background: radial-gradient(ellipse, rgba(232,96,60,.18) 0%, transparent 65%);
}
[data-audience="mainland"] .cta-g-blob--1 {
  background: radial-gradient(ellipse, rgba(0,194,181,.22) 0%, transparent 65%);
}
[data-audience="mainland"] .cta-g-blob--2 {
  background: radial-gradient(ellipse, rgba(127,217,76,.16) 0%, transparent 65%);
}
.cta-g-inner {
  position: relative; z-index: 1;
  text-align: center; max-width: 820px; margin: 0 auto;
}
.cta-g-headline {
  font-family: var(--f-display);
  font-size: clamp(3.5rem,9vw,8rem);
  font-weight: 800; letter-spacing: -.05em; line-height: .88;
  color: var(--white); margin-bottom: 1.75rem;
}
.cta-g-headline em { font-style: normal; display: block; }
.cta-g-sub {
  font-family: var(--f-body); font-size: clamp(.9rem,1.3vw,1.1rem);
  color: rgba(255,255,255,.45); line-height: 1.8;
  max-width: 520px; margin: 0 auto 2.75rem;
}
.cta-g-actions {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}
.cta-g-deco {
  position: absolute; bottom: -60px; right: -80px;
  width: clamp(220px,32vw,520px); opacity: .05;
  pointer-events: none; filter: brightness(0) invert(1);
  transform: rotate(18deg); z-index: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PINNED SCROLL STORY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pin-story {
  position: relative;
  height: 100vh;
  background: var(--dark);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
}
.ps-blob {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(110px); z-index: 0;
}
.ps-blob--1 {
  width: 900px; height: 900px; top: -300px; left: -250px;
  background: rgba(22,154,138,.11);
  animation: blobDrift 18s ease-in-out infinite;
}
.ps-blob--2 {
  width: 650px; height: 650px; bottom: -220px; right: -150px;
  background: rgba(232,96,60,.08);
  animation: blobDriftAlt 13s ease-in-out infinite 1s;
}
[data-audience="mainland"] .ps-blob--1 { background: rgba(0,194,181,.11); }
[data-audience="mainland"] .ps-blob--2 { background: rgba(127,217,76,.08); }
body.exp-off .ps-blob { animation: none; }

.ps-inner {
  position: relative; z-index: 1;
  width: 100%; height: 100vh;
  max-width: 900px;
  padding: 0 clamp(1.5rem,5vw,4rem);
}

/* All chapters stacked absolutely, GSAP drives opacity + y */
.ps-chapter {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(.9rem,2vw,1.5rem);
  text-align: center;
  will-change: opacity, transform;
}

.ps-eyebrow {
  font-family: var(--f-body); font-size: .62rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--teal); margin-bottom: .25rem;
}

/* Giant ambient word — purely decorative backdrop */
.ps-big-num {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(7rem,22vw,18rem);
  line-height: 1;
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: linear-gradient(135deg, var(--teal) 0%, var(--mid) 80%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: .07; pointer-events: none; user-select: none; z-index: -1;
  letter-spacing: -.06em;
}

.ps-headline {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.8rem,7.5vw,6.5rem);
  line-height: .93; letter-spacing: -.04em;
  color: var(--white);
}
.ps-headline em {
  font-style: normal;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-l) 55%, var(--gold) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: shimmer 4s ease infinite;
}
body.exp-off .ps-headline em { animation: none; background-position: 0 50%; }

.ps-body {
  font-family: var(--f-body); font-size: clamp(.88rem,1.4vw,1.05rem);
  font-weight: 400; color: rgba(255,255,255,.58);
  max-width: 440px; line-height: 1.65;
}

/* Chapter 2 — floating service pills */
.ps-services-float {
  display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center;
  margin-bottom: .5rem;
}
.ps-services-float span {
  padding: .4rem 1rem;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 100px;
  font-family: var(--f-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .3s, color .3s;
}
.ps-services-float span:hover { border-color: var(--teal); color: var(--teal); }

/* Chapter 3 — result stats */
.ps-stats-row {
  display: flex; gap: clamp(2rem,5vw,5rem);
  justify-content: center; align-items: flex-start;
  margin-bottom: .5rem;
}
.ps-stat { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.ps-stat-num {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2rem,5vw,3.8rem);
  line-height: 1;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-l) 60%, var(--gold) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ps-stat-lbl {
  font-family: var(--f-body); font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

/* Right-side progress dots */
.ps-dots {
  position: absolute; right: clamp(1.5rem,3vw,3rem);
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: .75rem; z-index: 10;
}
.ps-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  transition: background .35s, transform .35s, height .35s;
  cursor: default;
}
.ps-dot.active {
  background: var(--teal);
  transform: scale(1.5);
  height: 22px; border-radius: 4px;
}

/* Scroll cue at bottom */
.ps-scroll-cue {
  position: absolute; bottom: 2.2rem;
  left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center; gap: .55rem; z-index: 10;
  color: rgba(255,255,255,.3);
  font-family: var(--f-body); font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase;
}
.ps-scroll-line {
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, transparent, var(--teal) 50%, transparent);
  animation: scrollLinePulse 2s ease-in-out infinite;
}
@keyframes scrollLinePulse {
  0%,100% { opacity: .25; transform: scaleY(.9); }
  50% { opacity: .9; transform: scaleY(1); }
}
body.exp-off .ps-scroll-line { animation: none; opacity: .3; }

/* Mobile fallback — stacked, no pinning */
.pin-story--stacked {
  height: auto;
  padding: clamp(5rem,10vw,8rem) 0;
  align-items: flex-start;
}
.pin-story--stacked .ps-inner {
  height: auto;
  display: flex; flex-direction: column;
  gap: clamp(4rem,9vw,7rem); align-items: center;
}
.pin-story--stacked .ps-chapter {
  position: static; opacity: 1 !important; transform: none !important;
}
.pin-story--stacked .ps-big-num,
.pin-story--stacked .ps-dots,
.pin-story--stacked .ps-scroll-cue { display: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DIAGONAL SCROLL — horizontal drift driven by JS
   (initDiagScroll sets inline transform: translateX)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.diag-drift {
  will-change: transform;
  transition: none; /* JS controls this, no CSS transition interference */
}

/* Diagonal reveal — enters from bottom-right corner */
.reveal-diag {
  opacity: 0;
  transform: translate(40px, 50px) scale(.96);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-expo);
}
/* Diagonal reveal — enters from bottom-left corner */
.reveal-diag-l {
  opacity: 0;
  transform: translate(-40px, 50px) scale(.96);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-expo);
}
.reveal-diag.revealed,
.reveal-diag-l.revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ENHANCED REVEAL — scale + translate + opacity
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* Override the base reveal with a more dramatic keyframe */
.reveal   { opacity: 0; transform: translateY(44px) scale(.97); }
.reveal-l { opacity: 0; transform: translateX(-44px) scale(.97); }
.reveal-r { opacity: 0; transform: translateX(44px) scale(.97); }
.revealed { opacity: 1 !important; transform: none !important; }

/* why-line: clip-reveal (slides up from below) */
.why-line {
  display: block; overflow: hidden;
  opacity: 0; transform: translateY(60px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.why-line.revealed { opacity: 1; transform: translateY(0); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLL PROGRESS BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 99999;
  height: 2.5px; width: 0%; pointer-events: none;
  background: linear-gradient(90deg, var(--teal), var(--teal-l), var(--gold));
  box-shadow: 0 0 8px rgba(22,154,138,.5);
}
[data-audience="mainland"] .scroll-progress {
  box-shadow: 0 0 8px rgba(0,194,181,.5);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BLOB DRIFT ANIMATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes blobDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  25%  { transform: translate(28px,-18px) scale(1.06); }
  50%  { transform: translate(-14px,24px) scale(.94); }
  75%  { transform: translate(20px,10px) scale(1.03); }
}
@keyframes blobDriftAlt {
  0%,100% { transform: translate(0,0) scale(1); }
  33%  { transform: translate(-22px,16px) scale(1.04); }
  66%  { transform: translate(18px,-20px) scale(.96); }
}

.sm-blob--1 { animation: blobDrift 14s ease-in-out infinite; }
.sm-blob--2 { animation: blobDriftAlt 11s ease-in-out infinite; }
.cta-g-blob--1 { animation: blobDrift 16s ease-in-out infinite; }
.cta-g-blob--2 { animation: blobDriftAlt 12s ease-in-out infinite .5s; }
.td-blob { animation: blobDrift 18s ease-in-out infinite 1s; }
.why-ed-blob { animation: blobDriftAlt 20s ease-in-out infinite; }

body.exp-off .sm-blob--1, body.exp-off .sm-blob--2,
body.exp-off .cta-g-blob--1, body.exp-off .cta-g-blob--2,
body.exp-off .td-blob, body.exp-off .why-ed-blob { animation: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FLOATING DECOR (sm-deco, cta-g-deco)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes floatRot {
  0%,100% { transform: rotate(18deg) translateY(0); }
  50%      { transform: rotate(22deg) translateY(-18px); }
}
.sm-deco { animation: float 9s ease-in-out infinite; }
.cta-g-deco { animation: floatRot 11s ease-in-out infinite; }
body.exp-off .sm-deco, body.exp-off .cta-g-deco { animation: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STAT NUMBER GLOW PULSE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes numGlow {
  0%,100% { text-shadow: 0 0 0 rgba(22,154,138,0); }
  50%      { text-shadow: 0 0 40px rgba(22,154,138,.25), 0 0 80px rgba(22,154,138,.08); }
}
.sm-num.revealed { animation: numGlow 3.5s ease-in-out infinite 0.6s; }
[data-audience="mainland"] .sm-num.revealed {
  animation-name: numGlowMainland;
}
@keyframes numGlowMainland {
  0%,100% { text-shadow: 0 0 0 rgba(0,194,181,0); }
  50%      { text-shadow: 0 0 40px rgba(0,194,181,.25), 0 0 80px rgba(0,194,181,.08); }
}
body.exp-off .sm-num.revealed { animation: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GRAD-TEXT SHIMMER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.grad-text {
  background-size: 200% 200%;
  animation: shimmer 4s ease infinite;
}
body.exp-off .grad-text { animation: none; background-position: 0% 50%; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BENTO CARD CURSOR GLOW
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bc-cursor-glow {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22,154,138,.18) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  left: var(--gx, 50%); top: var(--gy, 50%);
  pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity .4s;
  will-change: left, top;
}
[data-audience="mainland"] .bc-cursor-glow {
  background: radial-gradient(circle, rgba(0,194,181,.18) 0%, transparent 70%);
}
.bento-card:hover .bc-cursor-glow { opacity: 1; }

/* Ensure bento card content sits above the glow */
.bc-num, .bc-body, .bc-cta, .bc-accent { position: relative; z-index: 1; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BENTO ACCENT BAR — grows in on card reveal
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.bc-accent {
  width: 0%;
  transition: width .9s var(--ease-expo);
}
.bento-card.revealed .bc-accent { width: 100%; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MARQUEE — speed up on hover (fun reversal)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.marquee-strip:hover .marquee-track {
  animation-duration: 20s;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WHS CARD — result number style
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.whs-num.revealed {
  animation: numGlow 3s ease-in-out infinite .4s;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WHY-PILL slide in from right on stagger
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.why-pill {
  opacity: 0;
  transform: translateX(40px) scale(.97);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out),
              background .3s, border-color .3s;
}
.why-pill.revealed {
  opacity: 1 !important; transform: translateX(0) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION EYEBROW — line draw from left
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.section-eyebrow {
  position: relative; display: inline-block;
  overflow: hidden;
}
.section-eyebrow::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 0%; height: 1.5px;
  background: var(--teal);
  transition: width .7s var(--ease-expo) .3s;
}
.section-eyebrow.revealed::after { width: 100%; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CTA HEADLINE — pulse scale on idle
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes subtlePulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.008); }
}
.cta-g-headline.revealed {
  animation: subtlePulse 6s ease-in-out infinite 1s;
}
body.exp-off .cta-g-headline.revealed { animation: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TESTI CARDS — featured has pulsing border
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes borderPulse {
  0%,100% { border-color: rgba(22,154,138,.18); }
  50%      { border-color: rgba(22,154,138,.45); }
}
.tg-card--featured { animation: borderPulse 3s ease-in-out infinite; }
[data-audience="mainland"] .tg-card--featured {
  animation-name: borderPulseMainland;
}
@keyframes borderPulseMainland {
  0%,100% { border-color: rgba(0,194,181,.18); }
  50%      { border-color: rgba(0,194,181,.42); }
}
body.exp-off .tg-card--featured { animation: none; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NEW SECTIONS RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1100px) {
  .sm-grid { grid-template-columns: repeat(2,1fr); }
  .sm-stat + .sm-stat::before { display: none; }

  .bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .bc-seo     { grid-area: auto; }
  .bc-ads     { grid-area: auto; }
  .bc-web     { grid-area: auto; }
  .bc-social  { grid-area: auto; }
  .bc-content { grid-area: auto; }
  .bc-email   { grid-area: auto; }
  .bc-tall    { min-height: 280px; }
  .bc-email .bc-body { flex-direction: column; }
  .bc-email .bc-cta { align-self: flex-start; padding-top: 1rem; }

  .why-editorial { grid-template-columns: 1fr; }
  .why-ed-right { min-height: 400px; }

  .testi-glass-grid { grid-template-columns: 1fr 1fr; }
  .tg-card--featured { grid-column: span 2; }
}

@media (max-width: 768px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-head { flex-direction: column; align-items: flex-start; }

  .why-editorial { min-height: auto; }
  .why-ed-headline { font-size: clamp(2.5rem,9vw,4rem); }
  .why-pill { max-width: 100%; }

  .whs-card { flex: 0 0 min(320px, calc(100vw - 3rem)); height: 420px; }

  .testi-glass-grid { grid-template-columns: 1fr; }
  .tg-card--featured { grid-column: span 1; }

  .cta-g-headline { font-size: clamp(2.8rem,10vw,4.5rem); }
  .cta-g-deco { display: none; }
}

/* Disable color transitions during theme switch (prevents flash) */
body.switching *, body.switching *::before, body.switching *::after {
  transition: none !important;
}