/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --bg:          #ffffff;   /* white canvas */
  --card:        #ffffff;
  --text:        oklch(12%  0.008 145);
  --text-muted:  oklch(44%  0.008 145);
  --text-dim:    oklch(48%  0.006 145);
  --accent:      #7dea96;
  --accent-ink:  oklch(18%  0.03  150);  /* dark green-ink for text on accent */
  --accent-dark: oklch(52%  0.16  145);
  --border:      oklch(88%  0.006 145);
  --border-mid:  oklch(80%  0.008 145);

  --nav-bg:      rgba(255,255,255,0.62);
  /* subtle lift for the white cards */
  --card-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 40px -12px rgba(0,0,0,0.12);
  /* shared by every floating white pill (labels, carousel dots, arrows) */
  --pill-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.15);
  --pill-shadow-hover: 0 2px 4px rgba(0,0,0,0.06), 0 14px 30px -12px rgba(0,0,0,0.22);
  --control-h:   48px;   /* dots pill and arrow buttons share this height */

  /* Dark footer palette */
  --footer-bg:         oklch(14% 0.014 175);
  --footer-card:       oklch(18% 0.014 175);
  --footer-text:       oklch(95% 0.005 145);
  --footer-text-muted: oklch(72% 0.008 145);
  --footer-border:     oklch(32% 0.012 175);

  --font-display: 'Season',  Georgia, serif;
  --font-body:    'Saans',   system-ui, -apple-system, sans-serif;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --sp-24: 96px; --sp-32: 128px;

  --container:        min(1160px, 100% - 64px);
  --container-narrow: min(820px,  100% - 64px);
}

/* ============================================================
   FONTS
   ============================================================ */
@font-face {
  font-family: 'Season';
  src: url("assets/fonts/Season/SeasonMix-Light.ttf") format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Saans';
  src: url("assets/fonts/Saans/Saans-Regular.ttf") format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Saans';
  src: url("assets/fonts/Saans/SaansMedium.ttf") format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Ginto';
  src: url("assets/fonts/Ginto/ABCGintoRoundedNordCondensed-Ultra.woff2") format('woff2'),
       url("assets/fonts/Ginto/ABCGintoRoundedNordCondensed-Ultra.woff") format('woff');
  font-weight: 900;
  font-display: swap;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Branded focus ring everywhere */
:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
  border-radius: 4px;
}
.nav-cta:focus-visible,
.btn-primary:focus-visible { border-radius: 100px; }

/* ============================================================
   FIXED GRADIENT BACKGROUND
   ============================================================ */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--bg);
}
.page-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("assets/gradients/Gradient.bg.1.png");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  /* multiply keeps the PNG's white field reading as the white canvas */
  mix-blend-mode: multiply;
  opacity: 1;
  transition: opacity 0.9s ease;
}
/* When an offering is open, fade the base gradient out so the phase
   gradient reads cleanly instead of mixing with bg.1 */
body.phase-active .page-bg::after { opacity: 0; }
.page-bg-phase {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
}
.page-bg-phase.phase-test    { opacity: 1; background-image: url("assets/gradients/Gradient.bg.2.png"); }
.page-bg-phase.phase-scale   { opacity: 1; background-image: url("assets/gradients/Gradient.bg.3.png"); }
.page-bg-phase.phase-modular { opacity: 1; background-image: url("assets/gradients/Gradient.bg.4.png"); }

/* ============================================================
   NAV: full-width glassy masthead (West Star style)
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.nav.scrolled {
  border-bottom-color: var(--border);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
/* Reading-progress hairline across the bottom of the nav */
.nav-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--accent);
  border-radius: 0 100px 100px 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nav.scrolled .nav-progress { opacity: 1; }
.nav-inner {
  width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 68px;
}
.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-height: 44px;
}
/* Nav wordmark stays hidden while the big hero wordmark is on screen,
   then crossfades in as the hero fades out (JS drives .logo-visible) */
.nav-logo-img {
  height: 20px;
  width: auto;
  display: block;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.nav.logo-visible .nav-logo-img {
  opacity: 1;
  transform: none;
}
.nav-links {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
}
.nav-links a {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: 9px 16px;
  border-radius: 100px;
  transition: color 0.25s ease;
}
.nav-links a:hover,
.nav-links a.active { color: var(--text); }
/* Sliding capsule: snaps to the section you're in, follows the cursor on hover */
.nav-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  height: 34px;
  width: 0;
  transform: translateY(-50%);
  border-radius: 100px;
  background: color-mix(in oklch, var(--accent) 40%, transparent);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(.34,1.1,.3,1),
              width 0.42s cubic-bezier(.34,1.1,.3,1),
              opacity 0.3s ease;
  pointer-events: none;
}
.nav-indicator.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nav-indicator { transition: opacity 0.2s ease; }
}
a.nav-ext {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
a.nav-ext::after {
  content: '↗';
  font-size: 0.85em;
  opacity: 0.7;
}
.nav-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ---- Hamburger (mobile only) ---- */
.nav-burger {
  display: none;          /* shown at the mobile breakpoint */
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  place-items: center;
  color: var(--text);
}
.nav-burger-box {
  position: relative;
  display: block;
  width: 20px;
  height: 12px;
}
.nav-burger-box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.32s cubic-bezier(.2,.7,.2,1), top 0.32s cubic-bezier(.2,.7,.2,1);
}
.nav-burger-box span:first-child { top: 0; }
.nav-burger-box span:last-child  { top: 10.5px; }
/* collapse into an X */
.nav.menu-open .nav-burger-box span:first-child { top: 5px; transform: rotate(45deg); }
.nav.menu-open .nav-burger-box span:last-child  { top: 5px; transform: rotate(-45deg); }

/* ---- Mobile menu panel ---- */
.nav-mobile {
  display: none;          /* shown at the mobile breakpoint */
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(.2,.7,.2,1);
}
.nav.menu-open .nav-mobile { grid-template-rows: 1fr; }
.nav-mobile-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.nav-mobile-inner a {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--text);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border);
}
.nav-mobile-inner a:first-child { border-top: none; }
.nav-mobile-inner a:active { background: rgba(0,0,0,0.04); }
.nav-cta {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 12px 24px;
  border-radius: 100px;
  transition: opacity 0.2s, transform 0.15s;
}
.nav-cta:hover { opacity: 0.85; transform: translateY(-1px); }

/* ============================================================
   HERO: fixed big logo, content scrolls up over it
   ============================================================ */
.hero {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  background-image: url("assets/photos/hero-prism.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Soft scrim: mutes the photo's mid-tone detail behind the wordmark + tagline
   so thin serif strokes read cleanly, while the prism still shows at the edges */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 44% at 50% 50%,
              rgba(255,255,255,0.88) 0%,
              rgba(255,255,255,0.62) 48%,
              rgba(255,255,255,0) 76%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  will-change: opacity, transform;
}
.hero-logo-img {
  width: min(78vw, 980px);
  height: auto;
}
.hero-tagline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  color: var(--text);
  letter-spacing: 0.005em;
  line-height: 1.35;
  text-align: center;
  max-width: 26ch;
}
.hero-scroll {
  position: absolute;
  bottom: var(--sp-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: nudgeDown 2.4s ease-in-out infinite;
}
.hero-scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--text-muted), transparent);
}
@keyframes nudgeDown {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}
.scroll-layer {
  position: relative;
  z-index: 1;
  margin-top: 100svh;
}

/* ============================================================
   SHARED
   ============================================================ */
.section {
  padding: clamp(var(--sp-16), 8vw, var(--sp-32)) 0;
}
.container        { width: var(--container);        margin: 0 auto; }
.container-narrow { width: var(--container-narrow); margin: 0 auto; }

.section-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
}

/* Reveal: soft "pull up into place" */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1),
              transform 0.9s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-scroll { animation: none; }
}

/* ============================================================
   IDENTITY SPLIT
   ============================================================ */
.section-identity .container {
  background: none;
}
.identity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Globe width drives the whole connector geometry (see .identity-center).
     Gap is derived from it so the globe always overlaps the left card by the
     same 30px, well inside the cards' 48px padding, so text stays clear. */
  --globe-w: clamp(150px, 14vw, 195px);
  gap: calc(var(--globe-w) + 34px);
  align-items: stretch;
  position: relative;
}
.identity-col {
  background: var(--card);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  padding: var(--sp-16) var(--sp-12);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.identity-logo-img {
  height: 30px;
  width: auto;
  margin: 0 auto var(--sp-8);
}
/* The globe/pearl assembly bridges the two cards. Anchor is the PEARL CENTRE,
   which lands exactly on the right card's left edge (as in the deck), so the
   globe sits biased left, overlapping the left card, rather than centred in
   the gap. Pearl centre = globe width + 64px from the assembly's left edge,
   so shifting left by (globe/2 + 47) puts it right on the card edge. */
.identity-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(var(--globe-w) / -2 - 47px), -50%);
  z-index: 5;
  pointer-events: none;
}
.identity-body {
  font-size: 0.98rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 34ch;
  margin: 0 auto;
}
.identity-body strong { color: inherit; font-weight: 500; }
.identity-body + .identity-body { margin-top: var(--sp-4); }
.globe-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.identity-globe {
  width: var(--globe-w);
  height: auto;
  display: block;
  /* soft atmospheric halo so the globe floats */
  filter: drop-shadow(0 0 34px rgba(90, 170, 235, 0.35))
          drop-shadow(0 0 60px rgba(125, 234, 150, 0.18));
}
/* Connection motif: green dot on the globe → line → green dot at the pearl's centre.
   All offsets are relative to the globe's right edge (100% = globe width):
   dot at -32, line -32 → +64, pearl centred on +64, terminus dot at +64.
   Stacking: pearl sits under the line so the line reads on top of it. */
.globe-pearl {
  position: absolute;
  left: calc(100% + 36px);   /* 56px wide → centre lands on +64 */
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 0 16px rgba(190, 205, 255, 0.45));
}
.globe-line {
  position: absolute;
  left: calc(100% - 32px);
  top: 50%;
  width: 96px;
  height: 1px;
  background: var(--accent);
  opacity: 0.9;
  z-index: 2;
}
.globe-dot {
  position: absolute;
  left: calc(100% - 32px);
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  z-index: 3;
}
.globe-node-end {
  position: absolute;
  left: calc(100% + 64px);   /* pearl centre */
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px var(--accent);
  z-index: 3;
}

/* ============================================================
   OFFERINGS ACCORDION
   ============================================================ */
/* centred so the eyebrow label stays with its title */
.offerings-header {
  margin-bottom: var(--sp-8);
  text-align: center;
}
/* Shared by the Work and Offerings headings so they stay identical */
.section-title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  text-align: center;
}
.offerings-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.offering-item {
  background: var(--card);
  border-radius: 10px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.offering-summary {
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  font-family: var(--font-body);
  color: inherit;
  display: grid;
  grid-template-columns: 56px 1fr 1fr auto;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-6);
  cursor: pointer;
  user-select: none;
}
.offering-summary:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: -2px;
  border-radius: 10px;
}
.offering-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.offering-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  color: var(--text);
  letter-spacing: 0;
  line-height: 1.05;
}
.offering-desc-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.offering-pitch {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.offering-fit-tag {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.offering-toggle {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1), color 0.2s;
  line-height: 1;
}
.offering-item.open .offering-toggle {
  transform: rotate(45deg);
  color: var(--text);
}
/* Smooth height via grid-template-rows 0fr -> 1fr */
.offering-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(.2,.7,.2,1);
}
.offering-item.open .offering-panel {
  grid-template-rows: 1fr;
}
.offering-body {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  /* mirror .offering-summary tracks exactly (incl. the 44px toggle column)
     so the body columns line up under the name + subhead */
  display: grid;
  grid-template-columns: 56px 1fr 1fr 44px;
  gap: var(--sp-6);
  padding: 0 var(--sp-6) var(--sp-8);
}
.offering-item.open .offering-body {
  opacity: 1;
  transition: opacity 0.4s ease 0.12s;
}
.offering-body-left  { grid-column: 2; }   /* under the name */
.offering-body-right { grid-column: 3; }   /* under the subhead */
.offering-body-left, .offering-body-right {
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border);
}
.offering-body-left p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: var(--sp-4);
  max-width: 52ch;
}
.offering-body-left p:first-child {
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.4;
}
.offering-features {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.offering-features li {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
}
.offering-features li:first-child { padding-top: 0; }
/* Per-offering CTA: jumps to the contact form in the footer */
.offering-cta {
  display: inline-flex;
  align-items: center;
  margin-top: var(--sp-2);
  padding: 13px 26px;
  border-radius: 100px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 500;
  font-size: 0.9rem;
  transition: opacity 0.2s, transform 0.15s;
}
.offering-cta:hover { opacity: 0.88; transform: translateY(-1px); }
.offering-cta:focus-visible { border-radius: 100px; }

/* ============================================================
   CLIENT LOGOS: continuous marquee
   ============================================================ */
.section-clients {
  padding-top: clamp(var(--sp-10), 5vw, var(--sp-16));
  padding-bottom: clamp(var(--sp-8), 4vw, var(--sp-12));
}
.logo-marquee {
  width: 100%;
  overflow: hidden;
  /* fade the logos out at both edges instead of hard-cutting them */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.logo-track {
  display: flex;
  width: max-content;
  animation: logoMarquee 42s linear infinite;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes logoMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* one full set = 50% of the track */
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
  .logo-marquee { overflow-x: auto; }
}
.logo-set {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The supplied SVGs are pre-normalised to a uniform 200x111 frame with the
   mark centred inside, so a single width is all the sizing needed: no
   per-logo tuning, and nothing clips. */
.logo-item {
  flex: 0 0 auto;
  width: clamp(124px, 12vw, 172px);
  margin: 0 var(--sp-2);
  display: grid;
  place-items: center;
}
.logo-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   WORK: continuous marquee of creative examples
   ============================================================ */
.section-work {
  /* extra top padding gives the logo marquee above room to breathe */
  padding-top: clamp(var(--sp-12), 5vw, 80px);
  padding-bottom: clamp(var(--sp-8), 4vw, var(--sp-12));
}
.work-title { margin-bottom: var(--sp-8); }
/* Endless carousel. No scroll-snap and no CSS scroll-behavior here: the loop
   works by silently shifting scrollLeft by exactly one set width, which has to
   be instant. Smooth motion comes from scrollTo({behavior:'smooth'}) in JS. */
.reel-viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reel-viewport::-webkit-scrollbar { display: none; }
.reel-track {
  display: flex;
  gap: var(--sp-4);
  width: max-content;
}
.reel-card {
  position: relative;
  flex: 0 0 auto;
  width: 248px;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  background: oklch(20% 0.01 145);
}
.reel-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Hover-to-result panel: client pill top-left, figure anchored bottom-left */
.reel-metric {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  text-align: left;
  padding: var(--sp-6);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.reel-card:hover .reel-metric,
.reel-card.show-metric .reel-metric {
  opacity: 1;
}
.reel-metric-client {
  padding: 8px 18px;
  border-radius: 100px;
  background: color-mix(in oklch, var(--accent-ink) 12%, transparent);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}
.reel-metric-figure {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.reel-metric-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.8rem, 4.4vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.reel-metric-label {
  font-size: 0.95rem;
  line-height: 1.3;
}

/* Carousel controls: arrows + progress bar */
/* Arrows sit either side of the dots pill, the trio centred as one group */
.reel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.reel-arrow {
  flex-shrink: 0;
  width: var(--control-h);
  height: var(--control-h);
  border-radius: 50%;
  border: none;
  background: var(--card);
  box-shadow: var(--pill-shadow);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.24s ease, transform 0.16s ease;
}
.reel-arrow:hover {
  box-shadow: var(--pill-shadow-hover);
  transform: translateY(-1px);
}
/* Dot indicator: one dot per clip, sitting in a pill the same height as the
   arrows. The dot for whichever clip is centred goes full opacity and elongates. */
.reel-dots-wrap {
  display: flex;
  justify-content: center;
}
.reel-dots {
  height: var(--control-h);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 20px;
  border-radius: 100px;
  background: var(--card);
  box-shadow: var(--pill-shadow);
}
.reel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background: var(--text);
  opacity: 0.25;
  cursor: pointer;
  transition: width 0.34s cubic-bezier(.2,.7,.2,1), opacity 0.28s ease;
}
.reel-dot:hover { opacity: 0.55; }
.reel-dot[aria-current="true"] {
  width: 26px;
  opacity: 1;
}
.reel-dot:focus-visible { outline-offset: 3px; }

/* ============================================================
   CONTACT + FOOTER: large dark closing block
   ============================================================ */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  margin-top: clamp(var(--sp-16), 8vw, var(--sp-24));
  padding: clamp(var(--sp-16), 8vw, var(--sp-32)) 0 var(--sp-10);
}
.footer-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: start;
}
.site-footer .section-label { color: var(--footer-text-muted); }
.contact-headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-6);
  color: var(--footer-text);
}
.contact-sub {
  font-size: 1rem;
  color: var(--footer-text-muted);
  line-height: 1.55;
  max-width: 46ch;
}
/* Lineage band: full-width row between the contact grid and the meta line.
   Shares the contact grid's columns so the footer reads as three clean bands. */
.footer-lineage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: end;
  margin-top: var(--sp-16);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--footer-border);
}
.footer-lineage-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.15;
  color: var(--footer-text);
}
.footer-lineage-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}
.footer-lineage-sub {
  font-size: 0.95rem;
  color: var(--footer-text-muted);
  line-height: 1.55;
  max-width: 38ch;
}
.footer-lineage-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--footer-text);
  border-bottom: 1px solid var(--footer-border);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.footer-lineage-link:hover { color: var(--accent); border-color: var(--accent); }
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.contact-form > form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.hubspot-form-noscript {
  color: var(--footer-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
.hubspot-form-noscript a {
  color: var(--footer-text);
  text-decoration: underline;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--footer-text-muted);
}
.form-field input,
.form-field textarea {
  background: var(--footer-card);
  border: 1.5px solid var(--footer-border);
  border-radius: 10px;
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--footer-text);
  outline: none;
  resize: none;
  width: 100%;
  transition: border-color 0.2s;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: oklch(52% 0.008 145); }
.form-field input:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--accent);
  outline: none;
}
.form-field input.invalid,
.form-field textarea.invalid { border-color: oklch(62% 0.19 25); }
.form-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.field-error {
  font-size: 0.8rem;
  color: oklch(72% 0.16 25);
}
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: oklch(15% 0.02 145);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 14px 28px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; }
.form-success { font-size: 0.95rem; font-weight: 500; color: var(--accent); }
.form-error {
  font-size: 0.9rem;
  color: oklch(72% 0.16 25);
}
.form-error a { text-decoration: underline; }
.form-status:empty { display: none; }
.footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--footer-border);
}
.footer-logo-img {
  height: 20px;
  width: auto;
  filter: brightness(0) invert(1);
}
.footer-copy { font-size: 0.8rem; color: var(--footer-text-muted); }
.footer-email a {
  font-size: 0.88rem;
  color: var(--footer-text-muted);
  transition: color 0.2s;
}
.footer-email a:hover { color: var(--accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; }
  .nav-mobile { display: grid; }
  /* .nav-links was the flex:1 spacer holding the actions right, and with it
     hidden, push the actions over so they sit flush with the container edge
     and mirror the logo's padding on the left. */
  .nav-actions { margin-left: auto; }
  /* burger's 44px touch target is wider than its 20px icon; pull the optical
     edge back in line with the container */
  .nav-burger { margin-right: -12px; }
  /* Nav wordmark is always visible on mobile (no hero crossfade). The hero
     logo is off-screen fast on a phone, so the nav needs to carry the brand. */
  .nav-logo-img {
    opacity: 1;
    transform: none;
    height: 15px;
  }
  .nav-inner { min-height: 60px; }
  .nav-cta { padding: 10px 18px; font-size: 0.82rem; }
  /* opaque panel background so menu links never sit over page content */
  .nav.menu-open { background: var(--card); }
}
@media (max-width: 900px) {
  .nav-links { gap: var(--sp-6); }

  /* Art-directed hero: the desktop photo is landscape, so a portrait viewport
     crops it to ~31% of its width, landing on an extreme facial close-up.
     Swap in a portrait-native shot instead (barely crops, and far calmer).
     Browsers only fetch the image whose media query matches, so phones skip
     the 3.2MB desktop PNG entirely and load 167KB here. */
  .hero {
    background-image: url("assets/photos/hero-prism-mobile.jpg");
    background-position: center;
  }

  .identity-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  /* Stack: globe sits between the two cards, connection accent hidden */
  .identity-center {
    position: static;
    transform: none;
    display: flex;
    justify-content: center;
    margin: calc(var(--sp-8) * -1) 0;   /* pull cards toward the globe a touch */
  }
  .globe-dot, .globe-line, .globe-pearl, .globe-node-end { display: none; }
  .identity-globe { width: 150px; }

  .offering-summary { grid-template-columns: 44px 1fr auto; }
  .offering-desc-group { grid-column: 2 / 3; grid-row: 2; }
  .offering-body { grid-template-columns: 1fr; gap: 0; padding: 0 var(--sp-6) var(--sp-8); }
  .offering-body-left, .offering-body-right { grid-column: 1; }
  .offering-body-right { border-top: none; padding-top: 0; }

  .footer-contact { grid-template-columns: 1fr; gap: var(--sp-10); }
  .footer-lineage { grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }
  .form-row { grid-template-columns: 1fr; }
  .footer-meta { flex-direction: column; text-align: center; }
}

@media (max-width: 600px) {
  :root { --container: min(1160px, 100% - 32px); }
  .hero-logo-img { width: 88vw; }
  .hero-tagline { max-width: 30ch; }
  .identity-col { padding: var(--sp-10) var(--sp-6); }
  .reel-card { width: 200px; }
  .logo-item { width: 108px; }
}