/* ============================================================
   XLNC EXOTIC GROUP — coastal-luxury (San Diego coast)
   Pale sky + seafoam surfaces, deep-teal contrast bands,
   muted-gold accent thread. Type: Fraunces (display serif) + Jost (sans).
   ============================================================ */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* ---------- tokens ---------- */
:root {
  /* ---- coastal pastel surface family ---- */
  --bg:        #EAF4F7;   /* pale sky base */
  --bg-2:      #F2F8F6;   /* faint mint */
  --card:      #FFFFFF;
  --card-2:    #F2F8F6;   /* faint mint tint for card gradients */
  --soft-band: #DCEAEC;   /* soft teal-grey band for section rhythm */
  --line:      #D4E4E4;   /* seafoam hairline border */
  --hair:      rgba(27, 58, 68, 0.14);        /* faint slate hairline */
  --seafoam-hair: rgba(84, 158, 158, 0.32);   /* seafoam hairline accent */

  /* ---- muted-gold accent (the premium thread that keeps it out of baby-shower territory) ---- */
  --gold:        #C9A24B;   /* muted gold — hairlines, focus rings, decorative fills */
  --gold-bright: #E4C27A;   /* brighter gold for dark contexts */
  --gold-deep:   #856326;   /* gold for links / icons on light — AA (~4.7:1) */
  --gold-text:   #7C5E1C;   /* gold TEXT on pale bg — AA (~5.2:1) */
  --grad-gold:   linear-gradient(135deg, #E4C27A 0%, #C9A24B 45%, #A9832F 100%);   /* on gold buttons */
  --grad-goldtxt:linear-gradient(135deg, #856326 0%, #785819 55%, #6E5019 100%);   /* gold DISPLAY text on light — deepened so even the lightest stop clears AA-large on pale sky AND over the hero's coastal veil (worst-case dark footage) */

  /* ---- ink / text on light ---- */
  --ink:     #16262E;   /* headings — deep slate (~13:1 on pale) */
  --body:    #26383F;   /* body copy (~9:1) */
  --muted:   #45585F;   /* secondary (~6.3:1 on pale) */
  --muted-2: #52666C;   /* labels (~5:1 on pale) */

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:    "Jost", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --container: 1200px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 4px 14px -6px rgba(17, 45, 55, 0.16);
  --shadow:    0 22px 50px -24px rgba(17, 45, 55, 0.26);
  --glow-gold: 0 12px 30px -12px rgba(201, 162, 75, 0.45);

  /* ---- CINEMATIC GLASS layer ----
     --cine: near-black teal ink used (as rgba(var(--cine), a)) for every LOCAL
     video scrim — nav strip, hero text column, bottom vignette — so the darkening
     stays a single cohesive colour instead of muddy black. The footage reads
     vivid everywhere the scrim feathers to 0.
     --glass-*: the frosted-chip recipe, shared by the hero badge, the 9 logo
     chips and the smoked-glass nav so the glass language is ONE system. */
  --cine: 8, 24, 30;
  --glass-fill:    rgba(255, 255, 255, 0.16);
  --glass-border:  rgba(255, 255, 255, 0.34);
  --glass-glow:    rgba(228, 194, 122, 0.5);   /* gold edge glow on glass hover */

  /* ---- deep coastal band context (deep teal/navy + brighter gold) ----
     Used by .band-dark sections (Approach, Invest) and the footer. Replaces the
     old espresso family — gives the page its light -> contrast -> light rhythm.
     All text tokens below target WCAG AA on --deep. */
  --deep:          #113842;   /* deep teal-navy band base (never pure black) */
  --deep-2:        #0C2A32;   /* deeper stop for band/footer gradient */
  --d-surface:     #16424D;   /* raised dark card surface (pillars / invest panel) */
  --d-surface-2:   #1C4E5A;   /* lighter card-gradient stop */
  --d-text:        #EAF5F6;   /* off-white headings / strong text on deep teal (~14:1) */
  --d-body:        #CFE3E5;   /* body copy on deep teal (~10:1) */
  --d-muted:       #9FBCC0;   /* muted / secondary on deep teal (~6:1, clears AA) */
  --gold-on-dark:  #E4C27A;   /* eyebrows / accents / icons on dark — brighter than light-bg gold */
  --gold-on-dark-2:#D4AF6E;   /* slightly deeper gold accent on dark */
  --d-hair:        rgba(228, 194, 122, 0.24);   /* gold hairline on dark */
  --d-hair-strong: rgba(228, 194, 122, 0.44);   /* gold hairline for focal panels / hover */
  --grad-goldtxt-dark: linear-gradient(135deg, #F2DCA6 0%, #E4C27A 50%, #C79B44 100%); /* gold DISPLAY text on deep teal — all stops clear AA */
  --glow-gold-dark: 0 24px 60px -28px rgba(201, 162, 75, 0.5);
}

/* ---------- base ---------- */
body {
  font-family: var(--font-sans);
  color: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  /* airy coastal wash across the whole page: sky-blue -> seafoam/mint */
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(96, 160, 195, 0.20), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 30%, rgba(150, 205, 190, 0.16), transparent 55%),
    radial-gradient(ellipse 80% 60% at 0% 85%, rgba(120, 185, 175, 0.12), transparent 55%),
    linear-gradient(180deg, #EFF7F9 0%, #E7F1F0 55%, #EAF4F7 100%);
  background-attachment: fixed;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  /* Fraunces variable 600 keeps strokes solid on pale surfaces; opsz:auto ties the
     optical master to size — large heads stay elegant, small heads stay sturdy */
  font-weight: 600;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section { padding-block: clamp(4.5rem, 9vw, 8.5rem); position: relative; }
.section-tight { padding-block: clamp(3rem, 6vw, 5rem); }

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-text);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 34px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.eyebrow.center::before { display: none; }

.grad-text {
  /* background-image (NOT the `background` shorthand) so background-clip:text is
     never reset to border-box — otherwise the gradient fills the box and the
     "transparent" text renders as a solid gold bar. */
  background-image: var(--grad-goldtxt);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--muted);
  line-height: 1.65;
  font-weight: 400;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius-full);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: transform 0.3s var(--ease-expo), box-shadow 0.3s var(--ease-expo), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary {
  background: var(--grad-gold);
  color: #2A2008;                 /* near-black on gold — 7:1+ on every gradient stop */
  box-shadow: var(--glow-gold);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(201, 162, 75, 0.7); }
.btn-ghost {
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  background: rgba(255, 255, 255, 0.6);
}
.btn-ghost:hover { transform: translateY(-2px); background: #fff; border-color: var(--gold-deep); }

/* ---------- header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(234, 244, 247, 0.82);          /* pale coastal glass */
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--hair);
  box-shadow: 0 6px 24px -18px rgba(17, 45, 55, 0.5);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 2rem;
}
/* Brand mark bumped ~+40% (44px -> up to 62px) + wordmark up a step, both on
   clamp() so they scale down gracefully on mobile and never break the 78px nav row. */
.brand { display: inline-flex; align-items: center; gap: clamp(0.6rem, 1vw, 0.85rem); }
.brand img { height: clamp(46px, 6vw, 62px); width: auto; border-radius: 50%; box-shadow: var(--shadow-sm); }
.brand-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
}
.brand-word small {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(0.6rem, 0.78vw, 0.68rem);
  letter-spacing: 0.4em;
  color: var(--gold-text);
  margin-top: 4px;
  font-weight: 500;
}
.nav-links { display: flex; align-items: center; gap: 2.1rem; }
.nav-links a {
  font-size: 0.9rem;
  color: var(--body);
  letter-spacing: 0.04em;
  position: relative;
  transition: color 0.25s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; background: var(--grad-gold);
  transition: width 0.3s var(--ease-expo);
}
.nav-links a:hover { color: var(--gold-deep); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 1rem; }
/* ≥24×24 tap target (WCAG 2.5.8). The 3 hamburger lines stay a 28×20 mark,
   vertically centred inside a 28×24 button — visual unchanged, hit area grows. */
.nav-toggle { display: none; width: 28px; height: 24px; position: relative; }
.nav-toggle span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink); transition: 0.3s var(--ease-expo); }
.nav-toggle span:nth-child(1) { top: 2px; }
.nav-toggle span:nth-child(2) { top: 11px; }
.nav-toggle span:nth-child(3) { top: 20px; }
body.menu-open .nav-toggle span:nth-child(1) { top: 11px; transform: rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

/* header over the CINEMATIC VIDEO hero: at the top the nav floats on a smoked-glass
   dark scrim with LIGHT text (a classic video-hero move) so it reads over the open
   footage; main.js swaps in .scrolled (pale glass + dark text, default styles) once
   you leave the hero. The dark tint is carried far enough down the strip that the
   vertically-centred nav text keeps its backing even over blown-bright sky. */
.site-header:not(.scrolled) {
  background: linear-gradient(180deg,
    rgba(var(--cine), 0.86) 0%,
    rgba(var(--cine), 0.78) 60%,
    rgba(var(--cine), 0.34) 90%,
    transparent 100%);
  -webkit-backdrop-filter: blur(4px) saturate(1.1);
  backdrop-filter: blur(4px) saturate(1.1);
}
.site-header:not(.scrolled) .nav-links a,
.site-header:not(.scrolled) .brand-word {
  color: #FFFFFF;
  text-shadow: 0 1px 12px rgba(var(--cine), 0.55);
}
.site-header:not(.scrolled) .nav-links a:hover { color: var(--gold-bright); }
.site-header:not(.scrolled) .brand-word small { color: var(--gold-bright); }
.site-header:not(.scrolled) .nav-toggle span { background: #FFFFFF; }

/* ---------- ambient background (subtle coastal glows) ---------- */
.ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.6; }
.blob-1 { width: 620px; height: 620px; top: -220px; right: -140px; background: radial-gradient(circle, rgba(120, 180, 210, 0.24), transparent 70%); }
.blob-2 { width: 520px; height: 520px; bottom: -240px; left: -160px; background: radial-gradient(circle, rgba(150, 205, 190, 0.22), transparent 70%); }
.grid-lines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(46, 92, 104, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 92, 104, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
}

/* ---------- hero ---------- */
/* Compact top padding keeps the whole logo showcase ABOVE THE FOLD on a
   1440x820 laptop (deliberately shrunk earlier — preserved). */
.hero { position: relative; padding-top: clamp(104px, 11vw, 132px); padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }

/* ---- FULL-BLEED VIDEO LAYER ----
   .hero-bg breaks out of the 1200px .container to 100vw (body sets
   overflow-x:hidden so 100vw cannot create a horizontal scrollbar). The video
   is object-fit:cover behind everything; the CINEMATIC LOCAL scrims (.hero-overlay)
   darken only where the light text sits. background-color is a deep-teal fallback
   if both video AND poster fail, so the light hero text stays legible no matter
   what. No layout height comes from here — the hero's own content reserves height,
   so there is zero layout shift. */
.hero-bg {
  position: absolute;
  z-index: 0;
  top: 0; bottom: 0; left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
  background-color: #0C2A32;   /* deep-teal fallback if video AND poster fail — keeps the light hero text legible */
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* CINEMATIC LOCAL SCRIMS — the video is NO LONGER globally washed out; it reads
   crisply everywhere these layers feather to transparent (the open right of the
   frame, the mid-band where the glass chips float, and through the chips
   themselves). Darkening is applied ONLY where light text sits. Layered top->bottom
   (first = topmost):
   (1) nav strip vignette — frames the top + backs the white nav;
   (2) text-column scrim — headline/lead/CTAs live upper-left; strong enough (~0.8)
       across the text measure that the light body text clears AA over the worst-case
       bright footage, then feathers out past ~62% so the right of the frame is open;
   (3) bottom vignette — grounds the light stat strip AND melts the hero into the
       deep-teal Approach band that follows;
   (4) whole-frame brand colour-grade — a low teal so the footage feels part of the
       palette without going pastel; the footage stays vivid. */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--cine), 0.48) 0%, rgba(var(--cine), 0.13) 12%, transparent 25%),
    linear-gradient(100deg,
      rgba(var(--cine), 0.86) 0%,
      rgba(var(--cine), 0.80) 32%,
      rgba(var(--cine), 0.62) 48%,
      rgba(var(--cine), 0.34) 64%,
      transparent 82%),
    linear-gradient(0deg,
      rgba(var(--cine), 0.60) 0%,
      rgba(var(--cine), 0.40) 11%,
      rgba(var(--cine), 0.16) 22%,
      transparent 34%),
    linear-gradient(150deg, rgba(17, 56, 66, 0.10) 0%, rgba(10, 34, 42, 0.09) 100%);
}
/* The pastel ambient glows are hidden over the cinematic hero: sitting ABOVE the
   scrim they would lift its luminance and break the guaranteed text contrast, and
   the footage should stay clean. The scrim's teal colour-grade carries cohesion. */
.hero .ambient { display: none; }

/* wider measure so the revamped headline holds ONE line at >=1280px */
.hero-inner { position: relative; z-index: 2; max-width: 1040px; }
/* Hero text is now LIGHT over the cinematic footage; the local scrims (see
   .hero-overlay) guarantee its contrast, and a soft text-shadow gives extra
   perceptual lift over any bright patch. */
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 1rem 0.5rem 0.7rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 10px rgba(var(--cine), 0.45);
  font-weight: 500;
  margin-bottom: 0.95rem;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 10px var(--gold-bright); }
.hero h1 {
  /* Confident editorial one-liner. Sized to hold ONE line inside the container at
     >=1280px (nowrap is enforced there); wraps gracefully below. Shares focus with
     the logo showcase below, so it stays measured (~43px max) rather than huge. */
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.85rem;
  color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(var(--cine), 0.5);
  text-wrap: pretty;
}
.hero h1 em { font-style: italic; font-weight: 600; }
/* gold "exceptional" uses a HERO-SPECIFIC bright champagne-gold gradient — lifted
   so even the darkest stop clears 3:1 (large text) over the now-brighter video,
   without adding scrim that would re-darken the footage. The dark bands keep the
   deeper --grad-goldtxt-dark; only the hero word is brightened. The soft dark
   text-shadow above doubles as a halo behind it. */
.hero h1 em.grad-text { background-image: linear-gradient(135deg, #F5E3B0 0%, #ECD08C 45%, #E0BE80 100%); }
.hero .lead {
  max-width: 540px;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  margin-bottom: 1.4rem;
  color: #EDF6F7;
  text-shadow: 0 1px 12px rgba(var(--cine), 0.45);
}
/* hold the headline on ONE line once there's room for it (deliverable #3) */
@media (min-width: 1280px) { .hero h1 { white-space: nowrap; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
/* hero ghost CTA -> dark-context variant (gold border/label on frosted dark fill),
   mirroring the .band-dark ghost so buttons stay one system. Primary gold works as-is. */
.hero .btn-ghost {
  border-color: var(--gold-on-dark);
  color: var(--gold-on-dark);
  /* smoked-glass fill: a dark backing guarantees the gold label reads over ANY
     footage, and the blur keeps the glass language consistent with the chips */
  background: rgba(var(--cine), 0.30);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero .btn-ghost:hover {
  background: rgba(var(--cine), 0.46);
  border-color: var(--gold-bright);
  color: var(--d-text);
}

/* ---------- hero showcase — the FLOATING LOGO CARDS ----------
   No hard panel: all 9 companies float over the coastline as uniform PREMIUM
   rounded-rectangle LOGO CARDS that show each brand's FULL logo AS-IS (no cropping)
   on ONE unifying near-white surface — so the heterogeneous marks (2DOT2's wide
   lockup, SD Stay's navy crest + URL, Fortune's tagline, the dark XLNC discs and the
   text wordmarks) all read legibly and belong to the same set. Each card is a real
   clickable/focusable link that lifts + tilts in 3D with a gold edge glow + a glass
   sheen sweep on hover/focus. Layout: 3 x 3 on desktop/tablet, 2-per-row on phones. */
.hero-showcase {
  position: relative;
  z-index: 2;
  margin-top: clamp(1rem, 2.2vw, 1.7rem);
}
/* NO hard box: the cards float directly over the coastline under the label. A single
   soft, heavily-feathered radial (no border, no rectangle) is the only atmospheric
   anchor, so it reads as glow rather than a panel. */
.logo-tray {
  position: relative;
  padding: clamp(0.35rem, 1.4vw, 0.8rem) 0 0;
}
.logo-tray::before {
  content: "";
  position: absolute;
  inset: -6% -3% -10%;
  background: radial-gradient(ellipse 60% 60% at 50% 34%, rgba(var(--cine), 0.30), transparent 74%);
  pointer-events: none;
  z-index: 0;
}
.tray-label {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 12px rgba(var(--cine), 0.55);
  margin: 0 0 clamp(0.9rem, 1.8vw, 1.3rem);
}
/* short centred gold rule instead of a full-width divider (no box feel) */
.tray-label::after {
  content: "";
  display: block;
  width: 44px; height: 2px;
  margin: 0.7rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}
/* THE COIN WALL — ONE ROW of 9 coins spanning the full page-content width on desktop.
   A centred flex row (justify-content:center) that wraps cleanly to 5+4 on tablet and
   3×3 on phones, with the partial last row always centred. Per-breakpoint li widths do
   the column math; --tray-gap is shared by the flex gap AND the width calc so the two
   can never disagree and force an unwanted wrap. */
.tray-grid {
  --tray-gap: clamp(0.5rem, 1vw, 0.95rem);
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tray-gap);
  max-width: 100%;
  margin-inline: auto;
}
.tray-grid > li {
  flex: 0 0 auto;
  width: calc((100% - 8 * var(--tray-gap)) / 9);   /* 9 across on desktop */
  min-width: 0;
  perspective: 1000px;                              /* parent perspective for the 3D tilt */
}

/* ---- THE COIN ----
   Uniform circular medallion. A near-white gloss fill + a gold rim, doubled by an
   inset white bevel and a second inset gold hairline, reads as a struck coin. The
   heterogeneous marks are unified by the identical coin frame. .coin-dark swaps the
   fill to brand navy for the light-on-dark marks (SD Stay crest, XLNC Builder &
   Exotic Cars badges). --rx/--ry come from the pointer-parallax handler in main.js;
   --lift/--tz come from the hover rule. */
.tray-cell {
  --rx: 0deg; --ry: 0deg; --lift: 0px; --tz: 0px;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;                /* never let the contained mark force the coin wider */
  container-type: inline-size; /* coin is a query container so text marks scale to its width */
  aspect-ratio: 1 / 1;         /* circle */
  border-radius: 50%;
  padding: clamp(0.7rem, 1.5vw, 1.15rem);
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 52%),   /* top gloss */
    linear-gradient(160deg, #FFFFFF 0%, #F4FAF9 55%, #E6F1EF 100%);                    /* near-white face */
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid var(--gold);
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.60),           /* inner white bevel ring */
    inset 0 0 0 5px rgba(201, 162, 75, 0.42),            /* second gold hairline (double-ring) */
    inset 0 2px 2px rgba(255, 255, 255, 0.90),           /* top inner highlight */
    0 3px 8px -4px rgba(var(--cine), 0.34),              /* contact shadow */
    0 18px 40px -20px rgba(var(--cine), 0.55);           /* soft floating drop shadow */
  transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--tz));
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease-expo), box-shadow 0.35s ease, border-color 0.35s ease;
}
/* dark navy coin — for the light-on-dark marks so they sit on their own field */
.tray-cell.coin-dark {
  background:
    radial-gradient(120% 120% at 50% 26%, rgba(255, 255, 255, 0.12), transparent 62%),
    linear-gradient(160deg, #17294d 0%, #101f3d 55%, #0b1830 100%);
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.10),
    inset 0 0 0 5px rgba(201, 162, 75, 0.55),
    inset 0 2px 3px rgba(255, 255, 255, 0.14),
    0 3px 8px -4px rgba(0, 0, 0, 0.50),
    0 18px 40px -20px rgba(0, 0, 0, 0.58);
}
/* full-bleed round badges (Builder, Cars) get less padding so the badge nearly fills */
.tray-cell.coin-fill { padding: clamp(0.4rem, 1vw, 0.75rem); }

/* SIGNATURE MOMENT — a light refraction sheen that SWEEPS across the card face on
   hover/focus (a single elegant glint, not a loop). Invisible at rest; disabled
   under reduced motion (the card stays static). z-index 2 so it passes OVER the
   logo (z1). */
.tray-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  background-size: 220% 100%;
  background-position: 175% 0;
  opacity: 0;
}
.tray-cell:hover::before,
.tray-cell:focus-visible::before {
  animation: tray-sheen 0.9s var(--ease-expo);
}
@keyframes tray-sheen {
  0%   { background-position: 175% 0; opacity: 0; }
  15%  { opacity: 0.85; }
  100% { background-position: -75% 0; opacity: 0; }
}
/* THE MARK — centred inside the coin at a size that respects the round frame.
   Defaults suit a square-ish emblem; modifier classes tune wide lockups, full-bleed
   round badges, and the SD Stay stack. z-index 1 keeps it below the sheen glint; a
   faint drop-shadow lifts the mark off the coin face. */
.tray-logo {
  position: relative;
  z-index: 1;
  max-width: 60%;
  max-height: 60%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: translateZ(0);
  filter: drop-shadow(0 1px 3px rgba(var(--cine), 0.14));
  transition: filter 0.3s ease, transform 0.3s var(--ease-expo);
}
.coin-wide  .tray-logo { max-width: 84%; max-height: 46%; }   /* wide lockups: 2DOT2, Fortune */
.coin-fill  .tray-logo { max-width: 100%; max-height: 100%; } /* full round badges: Builder, Cars */
.coin-stack .tray-logo { max-width: 82%; max-height: 84%; }   /* SD Stay: crest + wordmark stack */
.coin-emblem .tray-logo { max-width: 56%; max-height: 56%; }  /* compact emblem: Soul & Heart cross */
/* text wordmarks (YorPro.ai / 4Cros / XLNC Capital) ride the IDENTICAL light coin;
   one consistent deep-slate ink treatment, centred and sized to sit inside the circle. */
.tray-wm {
  position: relative;   /* z-index 1: below the sheen */
  z-index: 1;
  max-width: 82%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.72rem, 17cqi, 1.15rem);   /* cqi = % of the coin's own width, so it scales with coin size */
  line-height: 1.05;
  text-align: center;
  letter-spacing: 0.01em;
  color: #1E333B;                 /* deep slate — reads on the light coin */
  transition: color 0.3s ease;
}
.tray-wm-yorpro {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(0.7rem, 16cqi, 1.1rem);
  letter-spacing: -0.01em;
  color: #16324f;                 /* keep YorPro brand navy */
  transition: color 0.3s ease;
}
.tray-wm-yorpro .ai { color: #2f8fbf; transition: color 0.3s ease; }   /* teal .ai accent */

/* hover / keyboard-focus: gentle 3D lift + tilt + the gold rim BRIGHTENS + a gold
   halo + a deeper drop shadow (the sheen sweep is handled by the ::before animation
   above). The coin face is intentionally left unchanged so it never flashes — only
   the rim / depth reacts. */
.tray-cell:hover, .tray-cell:focus-visible {
  --lift: -6px; --tz: 16px; --rx: 3deg; --ry: -3deg;
  border-color: var(--gold-bright);
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.55),
    inset 0 0 0 5px rgba(228, 194, 122, 0.70),
    0 8px 18px -8px rgba(var(--cine), 0.50),
    0 30px 56px -24px rgba(var(--cine), 0.60),
    0 0 0 1px var(--gold-bright),                        /* crisp bright rim */
    0 0 34px -2px rgba(228, 194, 122, 0.60);             /* GOLD HALO */
  z-index: 3;
}
.tray-cell:hover .tray-logo, .tray-cell:focus-visible .tray-logo {
  transform: translateZ(26px) scale(1.05);
  filter: drop-shadow(0 8px 12px rgba(var(--cine), 0.30));
}
.tray-cell:focus-visible { outline: 2px solid var(--gold-on-dark); outline-offset: 3px; }

/* company-name tooltip (a logo may not spell out its name). Deep-teal pill above
   the tile; decorative — the link's aria-label is authoritative. */
.tray-cell::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  background: rgba(11, 40, 48, 0.96);
  border: 1px solid var(--d-hair);
  color: var(--d-text);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-expo);
  z-index: 6;
}
.tray-cell:hover::after, .tray-cell:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* stat strip — sits in the hero's dark bottom vignette: gold hairline divider,
   BRIGHT on-dark gold numerals + near-white labels (both clear AA on the scrim). */
.stats {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: 2.6rem;
  border-top: 1px solid rgba(228, 194, 122, 0.34);
}
.stat .num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
.stats .num { background-image: var(--grad-goldtxt-dark); }   /* bright gold on the dark bottom */
.stat .label {
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--d-text); font-weight: 500;
  text-shadow: 0 1px 10px rgba(var(--cine), 0.5);
}

/* ---------- section heading ---------- */
.sec-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); margin: 1.2rem 0 1.2rem; }
.sec-head p { color: var(--muted); font-weight: 400; font-size: clamp(1rem, 1.5vw, 1.15rem); }

/* ---------- approach / pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.pillar {
  padding: 2.2rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-expo), box-shadow 0.4s ease, border-color 0.4s ease;
}
.pillar:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--seafoam-hair); }
.pillar-ico {
  width: 52px; height: 52px; border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #E4F1EF, #D2E7E4);
  border: 1px solid var(--seafoam-hair);
  margin-bottom: 1.4rem;
}
.pillar-ico svg { width: 24px; height: 24px; stroke: var(--gold-deep); }
.pillar h3 { font-size: 1.5rem; margin-bottom: 0.7rem; }
.pillar p { color: var(--muted); font-size: 0.98rem; font-weight: 400; }
.pillar .idx {
  position: absolute; top: 1.4rem; right: 1.6rem;
  font-family: var(--font-display); font-size: 0.95rem; color: var(--gold); font-weight: 600;
  letter-spacing: 0.1em;
}

/* ---------- portfolio cards (used by both the coverflow and its grid fallback) ---------- */
.pf-card {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.45s var(--ease-expo), border-color 0.4s ease, box-shadow 0.45s var(--ease-expo);
}
/* grid-mode hover lift (coverflow mode drives transforms via inline styles) */
.coverflow:not(.is-coverflow) .pf-card:hover { transform: translateY(-6px); border-color: var(--seafoam-hair); box-shadow: var(--shadow); }
.pf-logo {
  height: 188px;
  display: grid; place-items: center;
  padding: 2rem;
  background: radial-gradient(circle at 50% 42%, #FFFFFF, #F1F8F6 78%);
  border-bottom: 1px solid var(--line);
}
.pf-logo img { max-height: 112px; width: auto; object-fit: contain; }
/* text wordmark logos (no image available) */
.pf-wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em; text-align: center; line-height: 1; }
.wm-yorpro { font-size: 2.5rem; color: #16324f; font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.01em; }
.wm-yorpro .ai { color: #2f8fbf; }
.wm-generic { font-size: 2rem; color: #263842; }
.wm-sub { display:block; font-family: var(--font-sans); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; color: #586E74; margin-top: 0.6rem; }

.pf-body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.pf-tag {
  align-self: flex-start;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-text); padding: 0.3rem 0.7rem; font-weight: 600;
  border: 1px solid var(--seafoam-hair); border-radius: var(--radius-full);
  background: #EEF6F4;
}
.pf-name { font-size: 1.45rem; margin-top: 0.4rem; }
.pf-desc { color: var(--muted); font-size: 0.94rem; font-weight: 400; flex: 1; }
.pf-visit {
  align-self: flex-start;   /* hit area = its text, so clicking elsewhere on a side card just centres it */
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; color: var(--gold-deep); letter-spacing: 0.04em; margin-top: 0.6rem; font-weight: 600;
  transition: gap 0.3s var(--ease-expo);
}
.pf-visit svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease-expo); }
a.pf-visit:hover { gap: 0.8rem; }
a.pf-visit:hover svg { transform: translate(2px,-2px); }
.pf-soon { background: var(--card-2); }
.pf-soon .pf-logo { filter: grayscale(0.12) opacity(0.94); background: radial-gradient(circle at 50% 42%, #FCFEFD, #EAF3F1 78%); }
.pf-badge-soon {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: var(--muted); background: rgba(255,255,255,0.85); backdrop-filter: blur(6px);
  padding: 0.35rem 0.7rem; border: 1px solid var(--seafoam-hair); border-radius: var(--radius-full);
}
.pf-soon .pf-visit { color: var(--muted-2); }

/* ---------- portfolio COVERFLOW (progressive enhancement) ----------
   The BASE below is the accessible responsive GRID. It is ALSO the reduced-motion /
   no-JS fallback: main.js only adds .is-coverflow (the 3D flow) when motion is
   allowed, and under prefers-reduced-motion it tears the flow back down to this
   grid (all 9 cards, no 3D, no transitions). */
.coverflow { position: relative; }
.cf-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: 0; }
/* the arrows / dots / live region are injected by JS and only shown in coverflow mode */
.cf-arrow, .cf-nav, .cf-live { display: none; }
.pf-visit:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 7px; }

/* screen-reader-only (live region + labels) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ===== COVERFLOW MODE (main.js adds .is-coverflow when motion is allowed) ===== */
.coverflow.is-coverflow .cf-stage {
  position: relative;
  perspective: 1300px;
  perspective-origin: 50% 44%;
  overflow: hidden;                       /* clip the 3D flow — guarantees no horizontal PAGE overflow */
  padding: clamp(28px, 4vw, 46px) 0;
  touch-action: pan-y;                    /* vertical page scroll passes through; we own horizontal */
  cursor: grab;
}
.coverflow.is-coverflow .cf-stage:active { cursor: grabbing; }
.coverflow.is-coverflow .cf-stage:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -2px; border-radius: var(--radius-lg); }
.coverflow.is-coverflow .cf-track {
  display: block; position: relative; width: 100%; margin: 0;
  transform-style: preserve-3d;
  /* height is set inline by main.js from the tallest card */
}
.coverflow.is-coverflow .pf-card {
  --cf-card-w: clamp(264px, 27vw, 328px);
  position: absolute; top: 50%; left: 50%;
  width: var(--cf-card-w); margin: 0;
  transform-origin: center center;
  transform: translate(-50%, -50%);       /* main.js overwrites this per position */
  transition: transform 0.55s var(--ease-expo), opacity 0.55s var(--ease-expo), box-shadow 0.5s var(--ease-expo), border-color 0.4s ease;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  cursor: pointer;
  will-change: transform, opacity;
}
/* suppress the first transition so the flow doesn't visibly fan in from a stack on load */
.coverflow.cf-init .pf-card { transition: none !important; }

/* the ACTIVE (centre) card — premium: crisp shadow + a subtle gold accent + rim */
.coverflow.is-coverflow .pf-card.is-active {
  border-color: var(--gold);
  box-shadow:
    0 38px 74px -34px rgba(17, 45, 55, 0.55),
    0 14px 34px -20px rgba(201, 162, 75, 0.4),
    0 0 0 1px rgba(201, 162, 75, 0.5);
}
.coverflow.is-coverflow .pf-card.is-active::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-gold); z-index: 4; pointer-events: none;
}

/* prev / next arrows — gold accent, 52px (>=44px target), injected by JS */
.coverflow.is-coverflow .cf-arrow {
  display: grid; place-items: center;
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--gold); color: var(--gold-deep);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(8px) saturate(1.1); backdrop-filter: blur(8px) saturate(1.1);
  z-index: 60;
  transition: transform 0.3s var(--ease-expo), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.coverflow.is-coverflow .cf-arrow svg { width: 22px; height: 22px; }
.coverflow.is-coverflow .cf-arrow:hover:not(:disabled) { background: #fff; transform: translateY(-50%) scale(1.07); box-shadow: var(--glow-gold); }
.coverflow.is-coverflow .cf-arrow:disabled { opacity: 0.3; cursor: default; }
.coverflow.is-coverflow .cf-arrow:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.coverflow.is-coverflow .cf-prev { left: clamp(-8px, 0.5vw, 6px); }
.coverflow.is-coverflow .cf-next { right: clamp(-8px, 0.5vw, 6px); }

/* position indicator — dots + a "01 / 09" counter */
.coverflow.is-coverflow .cf-nav { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.9rem; }
.cf-dots { display: flex; align-items: center; gap: 0.3rem; }
.cf-dot { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; background: none; border-radius: 999px; cursor: pointer; }
.cf-dot::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--hair); transition: width 0.35s var(--ease-expo), background 0.3s ease; }
.cf-dot:hover::before { background: var(--gold); }
.cf-dot.is-active::before { width: 24px; background-image: var(--grad-gold); }
.cf-dot:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.cf-counter { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.12em; color: var(--muted-2); white-space: nowrap; }
.cf-counter b { color: var(--gold-text); }

/* ============================================================
   PORTFOLIO DARK STAGE
   The Portfolio SECTION stays on the pale body wash; only its heading + coverflow
   sit on a CONTAINED, rounded deep-teal "stage" panel. The pale gutters + section
   padding around the rounded panel — plus its gold hairline, drop shadow and a
   deeper, coastal-tinted gradient (vs the full-bleed flat .band-dark Approach band
   directly above) — keep the two dark areas clearly DISTINCT, so Approach ->
   Portfolio never reads as one long dark blur. Net effect: the near-white cards
   and gold rims POP against the dark pool instead of washing out on pale sky.
   Applies in BOTH coverflow and reduced-motion GRID modes.
   ============================================================ */
.portfolio .container {
  position: relative;
  padding-block: clamp(2.4rem, 5vw, 4rem);
  border: 1px solid var(--d-hair);
  border-radius: clamp(20px, 3vw, 34px);
  background:
    radial-gradient(ellipse 55% 42% at 50% 5%, rgba(228, 194, 122, 0.10), transparent 62%),
    radial-gradient(ellipse 80% 66% at 50% 46%, rgba(30, 86, 99, 0.55), transparent 72%),
    linear-gradient(165deg, #0E323C 0%, #0A252D 55%, #081E25 100%);
  box-shadow:
    inset 0 1px 0 var(--d-hair),
    0 44px 96px -54px rgba(0, 0, 0, 0.70);
}

/* heading / eyebrow / lead restyled light-on-deep for the stage */
.portfolio .sec-head h2 { color: var(--d-text); }
.portfolio .sec-head p { color: var(--d-body); }
.portfolio .eyebrow { color: var(--gold-on-dark); }
.portfolio .eyebrow::before { background: linear-gradient(90deg, var(--gold-on-dark), transparent); }
.portfolio .grad-text { background-image: var(--grad-goldtxt-dark); }

/* active (centre) card: brighter gold rim + gold glow so it pops on the dark pool */
.portfolio .coverflow.is-coverflow .pf-card.is-active {
  border-color: var(--gold-bright);
  box-shadow:
    0 42px 82px -32px rgba(0, 0, 0, 0.70),
    0 16px 40px -18px rgba(201, 162, 75, 0.50),
    0 0 0 1px rgba(228, 194, 122, 0.60);
}

/* arrows -> frosted deep-teal glass with a bright on-dark gold rim + icon */
.portfolio .coverflow.is-coverflow .cf-arrow {
  background: rgba(12, 42, 50, 0.55);
  border-color: var(--gold-on-dark);
  color: var(--gold-on-dark);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
}
.portfolio .coverflow.is-coverflow .cf-arrow:hover:not(:disabled) {
  background: rgba(18, 58, 68, 0.85);
  color: var(--d-text);
  box-shadow: var(--glow-gold-dark);
}
.portfolio .coverflow.is-coverflow .cf-arrow:focus-visible { outline-color: var(--gold-on-dark); }

/* dots + counter on deep teal */
.portfolio .cf-dot::before { background-color: rgba(159, 188, 192, 0.45); }
.portfolio .cf-dot:hover::before { background-color: var(--gold-on-dark); }
.portfolio .cf-dot:focus-visible { outline-color: var(--gold-on-dark); }
.portfolio .cf-counter { color: var(--d-muted); }
.portfolio .cf-counter b { color: var(--gold-on-dark); }

/* ---------- sectors ribbon ---------- */
/* soft coastal band gives the page a light -> soft -> deep rhythm between the two
   deep-teal feature bands (Portfolio wash -> Sectors soft-band -> Invest deep). */
.sectors { background: var(--soft-band); border-top: 1px solid var(--seafoam-hair); border-bottom: 1px solid var(--seafoam-hair); }
/* Sectors gets a real heading (accessible name) sized to suit the tight ribbon. */
.sectors-title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-top: 0.7rem; }
.sector-list { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; justify-content: center; }
.sector-chip {
  font-size: 0.85rem; letter-spacing: 0.06em; color: var(--body); font-weight: 500;
  padding: 0.55rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius-full);
  background: var(--card); box-shadow: var(--shadow-sm); transition: color 0.3s, border-color 0.3s, transform 0.3s;
}
.sector-chip:hover { color: var(--gold-deep); border-color: var(--seafoam-hair); transform: translateY(-2px); }

/* ---------- invest CTA ---------- */
/* base (light) style — overridden by .band-dark .invest-band inside #invest */
.invest-band {
  position: relative;
  border: 1px solid var(--seafoam-hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  background:
    radial-gradient(ellipse 65% 100% at 50% 0%, rgba(150, 205, 190, 0.30), transparent 70%),
    linear-gradient(160deg, #F4FAF8 0%, #E6F1EF 60%, #DCEAEC 100%);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
  text-align: center;
  overflow: hidden;
}
.invest-band h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin-bottom: 1.2rem; }
.invest-band p { color: var(--body); max-width: 560px; margin: 0 auto 2.4rem; font-weight: 400; }
.invest-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ---------- footer ---------- */
/* deep coastal footer closes the light -> deep scroll rhythm. No top border: the
   preceding Invest .band-dark's bottom gold hairline is the seam. */
.site-footer { border-top: none; padding-block: clamp(3rem, 5vw, 4.5rem) 2.5rem; background: linear-gradient(180deg, var(--deep) 0%, var(--deep-2) 100%); color: var(--d-body); }
.footer-brand img { height: 56px; width: auto; border-radius: 50%; margin-bottom: 1.2rem; box-shadow: var(--shadow-sm); }
.footer-brand p { color: var(--d-muted); font-size: 0.92rem; font-weight: 400; max-width: 320px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
.footer-col h3 { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-on-dark); margin-bottom: 1.2rem; font-weight: 600; }
.footer-col a, .footer-col address {
  display: block; color: var(--d-muted); font-size: 0.92rem; font-style: normal;
  margin-bottom: 0.7rem; transition: color 0.25s; font-weight: 400;
}
.footer-col a:hover { color: var(--gold-on-dark); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--d-hair);
  color: var(--d-muted); font-size: 0.82rem;
}

/* ============================================================
   DEEP COASTAL FEATURE BANDS  (Approach + Invest)
   Full-bleed deep-teal sections that break the pale rhythm:
   HERO(video) -> APPROACH(deep) -> PORTFOLIO(light) -> SECTORS(soft)
   -> INVEST(deep) -> FOOTER(deep).
   Markup: <section class="section band-dark"><div class="container">…</div></section>
   ============================================================ */
.band-dark {
  /* OPAQUE deep-teal — must cover the body's fixed coastal wash
     (background-attachment: fixed). Subtle top gold glow adds depth. */
  background:
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(201, 162, 75, 0.12), transparent 62%),
    linear-gradient(180deg, var(--deep) 0%, var(--deep-2) 100%);
  color: var(--d-body);
  box-shadow: inset 0 1px 0 var(--d-hair), inset 0 -1px 0 var(--d-hair);
}

/* type + accents on deep teal */
.band-dark h2, .band-dark h3 { color: var(--d-text); }
.band-dark .sec-head p { color: var(--d-muted); }
.band-dark .eyebrow { color: var(--gold-on-dark); }
.band-dark .eyebrow::before { background: linear-gradient(90deg, var(--gold-on-dark), transparent); }
.band-dark .grad-text { background-image: var(--grad-goldtxt-dark); }

/* pillars -> deep-teal surface cards with gold hairline + glow */
.band-dark .pillar {
  background: linear-gradient(160deg, var(--d-surface-2), var(--d-surface));
  border-color: var(--d-hair);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.6);
}
.band-dark .pillar:hover {
  border-color: var(--d-hair-strong);
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.7), var(--glow-gold-dark);
}
.band-dark .pillar-ico {
  background: linear-gradient(160deg, rgba(228, 194, 122, 0.16), rgba(201, 162, 75, 0.05));
  border-color: var(--d-hair);
}
.band-dark .pillar-ico svg { stroke: var(--gold-on-dark); }
.band-dark .pillar p { color: var(--d-muted); }
.band-dark .pillar .idx { color: var(--gold-on-dark-2); }

/* invest panel -> focal deep-teal card (brighter gold border + glow) */
.band-dark .invest-band {
  border-color: var(--d-hair-strong);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(201, 162, 75, 0.20), transparent 68%),
    linear-gradient(160deg, var(--d-surface-2) 0%, var(--deep) 72%);
}
.band-dark .invest-band p { color: var(--d-body); }

/* ghost button — light-on-dark variant (primary gold already works on dark) */
.band-dark .btn-ghost {
  border-color: var(--gold-on-dark);
  color: var(--gold-on-dark);
  background: rgba(234, 245, 246, 0.05);
}
.band-dark .btn-ghost:hover {
  background: rgba(234, 245, 246, 0.12);
  border-color: var(--gold-bright);
  color: var(--d-text);
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease-expo), transform 0.8s var(--ease-expo); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-expo), transform 0.7s var(--ease-expo); }
.reveal-stagger.in > * { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .cf-track, .pillars { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  /* coin wall wraps to 5 per row on tablet (5 + 4, last row centred) */
  .tray-grid { max-width: 840px; }
  .tray-grid > li { width: calc((100% - 4 * var(--tray-gap)) / 5); }
}
@media (max-width: 760px) {
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: block; }
  .mobile-nav {
    position: fixed; inset: 78px 0 auto 0; z-index: 99;
    background: rgba(234, 244, 247, 0.97); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--hair);
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 1.2rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
    transform: translateY(-120%); transition: transform 0.45s var(--ease-expo);
  }
  body.menu-open .mobile-nav { transform: translateY(0); }
  .mobile-nav a { padding: 0.9rem 0; font-size: 1.05rem; color: var(--ink); border-bottom: 1px solid var(--line); }
  .mobile-nav .btn { margin-top: 1rem; justify-content: center; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
  .cf-track, .pillars { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  /* coverflow compresses on phones: smaller card + side offsets (offsets track card
     width in JS), 44px arrows. The stage clips, so there is no horizontal PAGE overflow. */
  .coverflow.is-coverflow .pf-card { --cf-card-w: clamp(230px, 72vw, 300px); }
  .coverflow.is-coverflow .cf-arrow { width: 44px; height: 44px; }
  .coverflow.is-coverflow .cf-arrow svg { width: 19px; height: 19px; }
  .coverflow.is-coverflow .cf-prev { left: -4px; }
  .coverflow.is-coverflow .cf-next { right: -4px; }
  .coverflow.is-coverflow .cf-nav { gap: 0.7rem; }
  .cf-dot { width: 22px; height: 22px; }
  /* coin wall on phones: 3 per row (a compact 3×3), centred; body clips overflow-x. */
  .tray-grid { max-width: 430px; }
  .tray-grid > li { width: calc((100% - 2 * var(--tray-gap)) / 3); }
  .tray-cell { padding: clamp(0.45rem, 2.6vw, 0.9rem); }
  .tray-cell.coin-fill { padding: clamp(0.3rem, 1.6vw, 0.6rem); }
}
@media (min-width: 761px) { .mobile-nav { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  /* NO tilt/transform on the logo tiles when reduced motion is requested — they
     stay flat + fully usable; hover still deepens the shadow / gold glow via the
     base styles. main.js also skips the pointer-parallax handler. */
  .tray-cell,
  .tray-cell:hover, .tray-cell:focus-visible { transform: none !important; }
  .tray-logo,
  .tray-cell:hover .tray-logo, .tray-cell:focus-visible .tray-logo { transform: none !important; }
  /* the glass stays STATIC — no refraction sheen sweep */
  .tray-cell::before,
  .tray-cell:hover::before, .tray-cell:focus-visible::before { animation: none !important; opacity: 0 !important; }
  /* hide the moving footage; show the poster still (via .hero-bg) instead */
  .hero-video { display: none !important; }
  .hero-bg { background-image: url("/assets/video/sd-hero.jpg"); background-size: cover; background-position: center; }
}