/* ============================================================================
   SmallPie — Timeless Classic, v4
   Palette: arctic ground, gray ink, dark green sections, gold accent.
   Fonts: Bricolage Grotesque display, Instrument Sans body, IBM Plex Mono data,
          Caveat handwriting for the rotating word.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600..800&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Mono:wght@400;500;600&family=Pinyon+Script&family=Great+Vibes&display=swap');

/* ============================================================================
   1. Design tokens (v4 — Timeless Classic)
   ========================================================================== */
:root {
  /* --- Colour --- */
  --arctic: #F0EBDF;              /* Warm cream — main ground */
  --paper: #F5F0E5;               /* Slightly lifted, warmer */
  /* Royal Navy — reads almost black but blue on a good screen.
     Used for titles, body text over cream, accents, and the header.
     (var name --gray kept so existing references switch over automatically.) */
  --royal: #0A1826;
  --gray: #0A1826;                /* alias of --royal */
  --gray-soft: #16283A;           /* Slightly lifted royal navy */
  --gray-dark: #060F18;           /* Deepest navy — Studio Standards gradient */
  --dark-green: #122B3F;          /* Brighter premium navy — sections */
  --green-deep: #0B1B29;          /* Deeper navy for shadows */
  --gold: #A4863D;                /* Timeless gold accent */
  --gold-lift: #C4A554;           /* Brighter gold for hover on dark */

  /* Section vars */
  --sec-bg: var(--arctic);
  --sec-fg: var(--gray);
  --sec-display: var(--gray);
  --sec-accent: var(--gold);
  --sec-hair: color-mix(in srgb, var(--gray) 22%, transparent);

  /* --- Type --- */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-hand: 'Pinyon Script', 'Great Vibes', ui-serif, cursive;  /* Elegant French copperplate */

  --display-wght: 700;

  /* --- Layout --- */
  --gutter: clamp(20px, 4vw, 40px);
  --container: min(1280px, calc(100vw - 2 * var(--gutter)));
  --content-narrow: min(920px, calc(100vw - 2 * var(--gutter)));
  --section-pad: clamp(72px, 9vw, 140px);
  --radius-img: 14px;             /* Soft rounding for images */

  /* --- Motion system (shared across every component) --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-boutique: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-glide: cubic-bezier(0.22, 0.61, 0.36, 1);   /* refined ease-out for hovers */

  --dur-hover: 0.4s;       /* small hover transitions (250–450ms) */
  --dur-reveal: 0.6s;      /* card expansions / content reveals (450–700ms) */
  --dur-section: 0.8s;     /* section transitions (600–900ms) */
  --dur-ambient: 22s;      /* ambient background cycles (15–30s) */

  --move-hover: 10px;      /* consistent small hover shift distance */

  color-scheme: light;
}

/* ============================================================================
   2. Reset + base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* overflow-x: clip guards against any horizontal overflow (incl. fixed overlays
   and off-screen bleed marks) without creating a scroll container — so desktop
   position: sticky (the pinned gallery) keeps working, unlike overflow:hidden. */
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* The header is sticky, so anchor targets need to clear it. This replaces the
   hard-coded pixel offset the old smooth-scroll library used. */
:target, [id] { scroll-margin-top: 104px; }
@media (max-width: 860px) { :target, [id] { scroll-margin-top: 88px; } }

body {
  background: var(--arctic);
  color: var(--gray);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv02';
  min-height: 100vh;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--dark-green); color: var(--arctic); }

/* Grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* ============================================================================
   3. Typography scale
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--display-wght);
  color: var(--sec-display);
}

.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(52px, 7.5vw, 118px);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 96;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--sec-display);
}
/* Dash between "SmallPie" and "a digital boutique" — identical to the rest */
.h-display .dash { margin-inline: 0.18em; font-weight: inherit; opacity: 1; color: inherit; }

.h-section {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.2vw, 78px);
  font-variation-settings: 'opsz' 72;
  letter-spacing: -0.028em;
  line-height: 1.03;
  color: var(--sec-display);
}

.h-card {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  font-variation-settings: 'opsz' 36;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--sec-display);
}

/* Elegant French script (Pinyon Script) — used for highlighted words in
   section titles: "packaged", "focus", "standards", "journal", "conversation".
   Static, no animation. Oversized because Pinyon has a small x-height. */
.script,
.rotor {
  display: inline-block;
  vertical-align: baseline;
  font-family: var(--font-hand);
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0;
  line-height: 1;
  font-size: 1.28em;
  transform: translateY(2%);
  transform-origin: center;
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sec-fg) 62%, transparent);
}

.lead {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: color-mix(in srgb, var(--sec-fg) 85%, transparent);
  max-width: 58ch;
  font-weight: 400;
}

p { max-width: 68ch; }
p + p { margin-top: 1em; }

.mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.05em; }

/* ============================================================================
   4. Layout primitives + section rhythm
   ========================================================================== */
.container { width: var(--container); margin-inline: auto; position: relative; z-index: 2; }
.narrow    { width: var(--content-narrow); margin-inline: auto; position: relative; z-index: 2; }

.section {
  padding-block: var(--section-pad);
  background: var(--sec-bg);
  color: var(--sec-fg);
  position: relative;
  z-index: 2;
  transition: background 0.9s var(--ease-boutique);
}

.sec--arctic    { --sec-bg: var(--arctic);     --sec-fg: var(--gray);    --sec-display: var(--gray);    --sec-accent: var(--gold);       --sec-hair: color-mix(in srgb, var(--gray) 22%, transparent); }
.sec--paper     { --sec-bg: var(--paper);      --sec-fg: var(--gray);    --sec-display: var(--gray);    --sec-accent: var(--gold);       --sec-hair: color-mix(in srgb, var(--gray) 18%, transparent); }
.sec--green     { --sec-bg: var(--dark-green); --sec-fg: var(--arctic);  --sec-display: var(--arctic);  --sec-accent: var(--gold-lift);  --sec-hair: color-mix(in srgb, var(--arctic) 22%, transparent); }
.sec--royal     { --sec-bg: var(--royal);      --sec-fg: var(--arctic);  --sec-display: var(--arctic);  --sec-accent: var(--gold-lift);  --sec-hair: color-mix(in srgb, var(--arctic) 20%, transparent); }
.sec--royal .script, .sec--royal .rotor { color: var(--gold-lift); }
/* Gray section — subtle diagonal gradient for premium feel */
.sec--gray {
  --sec-fg: var(--arctic);
  --sec-display: var(--arctic);
  --sec-accent: var(--gold-lift);
  --sec-hair: color-mix(in srgb, var(--arctic) 20%, transparent);
  background: linear-gradient(
    135deg,
    var(--gray-dark) 0%,
    var(--gray) 35%,
    var(--gray) 65%,
    var(--gray-dark) 100%
  ) !important;
}

/* Green + gray sections should use the lifted gold */
.sec--green .script, .sec--green .rotor,
.sec--gray .script,  .sec--gray .rotor { color: var(--gold-lift); }

.split {
  display: grid;
  gap: clamp(28px, 5vw, 80px);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.editorial-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: color-mix(in srgb, var(--sec-fg) 10%, transparent);
  border-radius: var(--radius-img);
}
.editorial-photo img { width: 100%; height: 100%; object-fit: cover; }

.rule { height: 1px; background: var(--sec-hair); border: 0; margin: 0; }

/* ============================================================================
   5. Header — dark-green pill; scroll hides logo + CTA, keeps nav at 80% opacity
   ========================================================================== */
.header {
  position: fixed;
  /* Sit a little lower; honour iOS safe-area (notch / Dynamic Island). */
  top: calc(30px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  transition: top var(--dur-hover) var(--ease-boutique);
}

.header__pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3.4vw, 56px);
  padding: 18px 24px;   /* symmetric — keeps the nav mathematically centred */
  min-height: 79px;     /* brand + CTA are absolute — keep the pill's height stable */
  background: var(--royal);
  color: var(--arctic);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 999px;
  box-shadow:
    0 8px 26px color-mix(in srgb, var(--royal) 48%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--arctic) 6%, transparent);
  width: min(1200px, 96vw);
  /* Width + brand/CTA share one duration/easing so they move as one system. */
  transition:
    width 0.55s var(--ease-boutique),
    background var(--dur-hover),
    opacity var(--dur-hover);
  position: relative;
  overflow: hidden;                       /* Contains the cursor halo */
}

/* Cursor halo — softer, less intense. Only inside the pill. */
.header__pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    140px 140px at var(--halo-x, 50%) var(--halo-y, 50%),
    color-mix(in srgb, var(--gold) 26%, transparent) 0%,
    color-mix(in srgb, var(--gold) 8%, transparent) 45%,
    transparent 78%
  );
  opacity: 0;
  transition: opacity 0.35s var(--ease-boutique);
}
.header__pill:hover::before { opacity: 1; }

/* Logo + CTA are ABSOLUTE, pinned to the pill's edges. As the pill collapses
   they move INWARD (toward the centre) AND fade — one synchronised transform +
   opacity animation sharing the pill's width duration/easing. They reach zero
   opacity exactly as the pill reaches its collapsed width, so they never sit
   visibly over the centred nav. Expand reverses it (nearly transparent + inset
   → out + full opacity). No delay, no bounce, no display toggles.
   `--hx` is the inward travel; opacity + transform move together. */
.header__brand {
  position: absolute;
  left: 24px; top: 50%;
  transform: translate(0, -50%);
}
.header__cta {
  position: absolute;
  right: 24px; top: 50%;
  transform: translate(0, -50%);
}
.header__brand,
.header__cta {
  opacity: 1;
  transition:
    transform 0.55s var(--ease-boutique),
    opacity 0.55s var(--ease-boutique),
    visibility 0s 0s,
    background-position 0.7s var(--ease-boutique);
}

/* Collapsed — width shrinks; brand slides right, CTA slides left, both fade.
   visibility flips to hidden only at the END (delay = duration) so they leave
   the tab order once fully faded, without a hard cut mid-animation. */
.header[data-state="small"] .header__pill {
  width: min(640px, 94vw);
  opacity: 0.82;
}
.header[data-state="small"] .header__brand {
  opacity: 0;
  transform: translate(72px, -50%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.55s var(--ease-boutique),
    opacity 0.5s var(--ease-boutique),
    visibility 0s 0.55s;
}
.header[data-state="small"] .header__cta {
  opacity: 0;
  transform: translate(-72px, -50%);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.55s var(--ease-boutique),
    opacity 0.5s var(--ease-boutique),
    visibility 0s 0.55s;
}

/* Hover the collapsed header → expand again (reverse of the above). */
.header[data-state="small"]:hover .header__pill {
  width: min(1200px, 96vw);
  opacity: 1;
}
.header[data-state="small"]:hover .header__brand,
.header[data-state="small"]:hover .header__cta {
  opacity: 1;
  transform: translate(0, -50%);
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 0.55s var(--ease-boutique),
    opacity 0.55s var(--ease-boutique),
    visibility 0s 0s,
    background-position 0.7s var(--ease-boutique);
}

/* Logo — masked span filled with cream so it matches the rest of the palette
   (not a stark pure white). Aspect 1000×220. */
.header__brand { display: inline-flex; align-items: center; }
.header__logo {
  display: block;
  height: 32px;
  width: calc(32px * 1000 / 220);
  background: var(--arctic);
  -webkit-mask: url("../img/smallpie-logo-black.svg") left center / contain no-repeat;
          mask: url("../img/smallpie-logo-black.svg") left center / contain no-repeat;
}

/* Nav is ABSOLUTELY pinned to the pill's centre. Because the pill is centred on
   the viewport and only its width changes on scroll, the nav never moves —
   the logo and CTA simply fade behind the shrinking edges. */
.header__nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: clamp(20px, 2.6vw, 36px);
  align-items: center;
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--arctic) 82%, transparent);
  font-weight: 500;
  white-space: nowrap;
  z-index: 2;
}
.header__nav a { padding: 6px 4px; position: relative; transition: color 0.25s; }
.header__nav a::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-boutique);
}
.header__nav a:hover { color: var(--arctic); }
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* Contact CTA — gold at rest; on hover a cream gradient sweeps across, turning
   it white-ish (same technique family as the .pill button). Text stays dark. */
.header__cta {
  padding: 12px 22px;
  border-radius: 999px;
  color: var(--royal);
  background: linear-gradient(
    270deg,
    var(--arctic) 0%,
    color-mix(in srgb, var(--arctic) 70%, var(--gold)) 22%,
    var(--gold) 50%,
    var(--gold) 100%
  );
  background-size: 240% 100%;
  background-position: 100% 50%;    /* gold showing */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: background-position 0.7s var(--ease-boutique), opacity 0.5s var(--ease-boutique);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--gold) 40%, transparent);
}
.header__cta:hover { background-position: 0% 50%; }   /* cream sweeps in */
.header__cta svg { transition: transform 0.28s var(--ease-out); }
.header__cta:hover svg { transform: translateX(3px); }

/* (Small-state widths live in the state block above so their transition
   sequencing stays in one place.) */

/* --- Mobile menu button — an editorial "Menu" pill (no burger). The word
   says exactly what it is; a small gold tick is the only ornament. The label
   swaps to "Close" while the overlay is open (CSS only, driven by
   aria-expanded, which mobile-menu.js already toggles). --- */
.header__menu-btn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--dur-hover) var(--ease-glide), background var(--dur-hover);
}
.header__menu-btn::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
}
.header__menu-txt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--arctic);
  line-height: 1;
}
.header__menu-txt--close { display: none; }
.header__menu-btn[aria-expanded="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.header__menu-btn[aria-expanded="true"] .header__menu-txt--open { display: none; }
.header__menu-btn[aria-expanded="true"] .header__menu-txt--close { display: inline; }

/* --- Mobile menu overlay --- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--royal);
  color: var(--arctic);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vw, 40px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity var(--dur-section) var(--ease-boutique), transform var(--dur-section) var(--ease-boutique);
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; transform: none; }
.mobile-menu__nav { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 4vw, 26px); }
.mobile-menu__nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 10vw, 60px);
  letter-spacing: -0.02em;
  color: var(--arctic);
  transition: color var(--dur-hover) var(--ease-glide), transform var(--dur-hover) var(--ease-glide);
}
.mobile-menu__nav a:hover,
.mobile-menu__nav a:active { color: var(--gold-lift); transform: translateX(6px); }
.mobile-menu__portal {
  margin-top: 16px;
  padding: 14px 30px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lift);
}
/* Pinned, not overflow:hidden — html's overflow-x:clip stops body overflow
   propagating to the viewport, and iOS ignores it for touch. The JS sets
   an inline top of -scrollY so the page holds its place while pinned. */
body.menu-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

@media (max-width: 780px) {
  .header { top: calc(18px + env(safe-area-inset-top, 0px)); }
  .header__nav { display: none; }
  .header__cta { display: none; }
  .header__menu-btn { display: inline-flex; }
  .header__pill { width: 94vw; padding: 12px 12px 12px 20px; min-height: 0; }
  /* Mobile keeps logo + menu button in normal flow — no absolute pinning, and
     the desktop collapse choreography must NOT move the brand here: the
     small-state translate(72px,-50%) would otherwise win on specificity and
     slide the logo sideways on every scroll. */
  .header__brand { position: static; transform: none; }
  .header[data-state="small"] .header__pill { width: 94vw; transition-delay: 0s; }
  .header[data-state="small"] .header__brand {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
  }
  .header__logo { height: 30px; width: calc(30px * 1000 / 220); }
}

/* ============================================================================
   6. Underline-arrow button — pure CSS, exact geometry.
   Structure: <a class="ua">Text</a>

   ::before = the underline. Full text width at rest; on hover its right edge
              travels 40px past the text.
   ::after  = the arrowhead: a 9×9 square with top+right borders, rotated 45°,
              so its corner points right. Its vertical CENTER sits exactly on
              the line, and its horizontal position is animated with the SAME
              duration/easing as the line — so the head visibly RIDES the tip
              of the line as it extends, and rides back on unhover.

   Geometry (container padding-bottom 14px):
     line:  bottom 6px, height 1px  → line center-y = 6.5px
     head:  height 9px, bottom 2px  → element center-y = 6.5px  ✓ on the line
   ========================================================================== */
.ua {
  display: inline-block;
  position: relative;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sec-display);
  padding: 6px 0 14px;
  cursor: pointer;
  border: 0;
  background: transparent;
  text-decoration: none;
  transition: color 0.32s var(--ease-boutique);
}

/* The line */
.ua::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  transition: right 0.55s var(--ease-boutique), background 0.32s var(--ease-boutique);
}
.ua:hover::before,
.ua:focus-visible::before {
  right: -40px;
  background: var(--sec-accent);
}

/* The arrowhead — rides the line tip */
.ua::after {
  content: "";
  position: absolute;
  right: -6px;                        /* Rest: tucked at the text edge */
  bottom: 2px;                        /* center-y = 2 + 4.5 = 6.5px = line center */
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);           /* Corner points right, centered on the line */
  opacity: 0;
  transition:
    right 0.55s var(--ease-boutique),  /* Same clock as the line = riding effect */
    opacity 0.25s var(--ease-boutique) 0.08s,
    border-color 0.32s var(--ease-boutique);
}
.ua:hover::after,
.ua:focus-visible::after {
  right: -44px;                       /* Chevron tip lands just past the line end */
  opacity: 1;
  border-color: var(--sec-accent);
}
.ua:hover,
.ua:focus-visible {
  color: var(--sec-accent);
}

/* --- Primary pill button — gradient sweep, softer shadow --- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 44px 20px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--gold) 80%, transparent);
  background: linear-gradient(
    270deg,
    color-mix(in srgb, var(--gold) 80%, transparent) 0%,
    color-mix(in srgb, var(--gold) 55%, transparent) 22%,
    color-mix(in srgb, var(--gray) 0%, transparent) 55%,
    color-mix(in srgb, var(--gray) 0%, transparent) 100%
  );
  background-size: 300% 300%;
  background-position: 1% 50%;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-position 0.7s var(--ease-boutique),
    color 0.5s var(--ease-boutique),
    border-color 0.5s,
    transform 0.32s var(--ease-boutique),
    box-shadow 0.4s;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--gray) 12%, transparent);  /* softer shadow */
  cursor: pointer;
}
.pill:hover {
  color: var(--gray);
  border-color: transparent;
  background-position: 99% 50%;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--gold) 32%, transparent);
}
.sec--green .pill,
.sec--gray .pill {
  color: color-mix(in srgb, var(--arctic) 78%, transparent);
  border-color: color-mix(in srgb, var(--arctic) 35%, transparent);
  background: linear-gradient(
    270deg,
    color-mix(in srgb, var(--gold-lift) 88%, transparent) 0%,
    color-mix(in srgb, var(--gold) 65%, transparent) 22%,
    color-mix(in srgb, var(--arctic) 0%, transparent) 55%,
    color-mix(in srgb, var(--arctic) 0%, transparent) 100%
  );
  background-size: 300% 300%;
  background-position: 1% 50%;
}
.sec--green .pill:hover,
.sec--gray .pill:hover {
  color: var(--dark-green);
  border-color: transparent;
  background-position: 99% 50%;
}

/* ============================================================================
   7. Circle mark — rotating text, only 2 used across homepage
   ========================================================================== */
.circle-mark {
  position: relative;
  width: clamp(120px, 12vw, 200px);
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sec-display);
}
.circle-mark--lg { width: clamp(220px, 28vw, 380px); }
@media (max-width: 900px) { .circle-mark--lg { width: clamp(120px, 26vw, 220px); } }

/* Sections hosting the big off-screen rotating mark reserve headroom for it,
   scaled with the mark itself — the heading can never sit underneath it. */
.contact-panel--mark { padding-top: calc(var(--section-pad) + clamp(70px, 12vw, 150px)); }
.circle-mark-anchor {
  position: absolute;
  top: clamp(16px, 3vw, 56px);
  left: calc(clamp(220px, 28vw, 380px) * -0.15);   /* ~15% past the left edge */
  z-index: 1;
}
@media (max-width: 900px) {
  /* Hide more of the mark past the edge and reserve enough headroom that the
     mark always sits ABOVE the heading, never over it. */
  .circle-mark-anchor { left: calc(clamp(110px, 26vw, 220px) * -0.28); top: 10px; }
  .contact-panel--mark { padding-top: calc(var(--section-pad) + clamp(140px, 30vw, 250px)); }
}

/* Smaller right-side variant (Portfolio CTA) */
.circle-mark-anchor--right {
  left: auto;
  right: calc(clamp(140px, 16vw, 220px) * -0.15);
  top: clamp(16px, 3vw, 48px);
}
.circle-mark--md { width: clamp(140px, 16vw, 220px); }
.contact-panel--mark-sm { padding-top: calc(var(--section-pad) + clamp(36px, 7vw, 80px)); }
@media (max-width: 900px) {
  .circle-mark--md { width: clamp(100px, 24vw, 150px); }
  .circle-mark-anchor--right { right: calc(clamp(100px, 24vw, 150px) * -0.15); }
  .contact-panel--mark-sm { padding-top: calc(var(--section-pad) + clamp(40px, 16vw, 80px)); }
}
.circle-mark__spin {
  position: absolute;
  inset: 0;
  animation: spin 30s linear infinite;
  color: color-mix(in srgb, var(--sec-fg) 60%, transparent);
}
.circle-mark__spin text {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;   /* modest — textLength in the SVG does the final fit */
  text-transform: uppercase;
  fill: currentColor;
}
/* Pulsating gold dot — soft waves radiating out */
.circle-mark__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  animation: dot-pulse 2.6s var(--ease-standard) infinite;
}
.sec--green .circle-mark__dot,
.sec--gray  .circle-mark__dot { background: var(--gold-lift); }
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 42%, transparent); }
  70%  { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .circle-mark__dot { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .circle-mark__spin { animation: none; } }

/* ============================================================================
   8. Hero
   ========================================================================== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: clamp(160px, 15vw, 220px);
  padding-bottom: clamp(80px, 10vw, 140px);
  position: relative;
  background: var(--arctic);
}
.hero__inner {
  width: var(--container);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.hero__eyebrow .rule { flex: 0 0 40px; height: 1px; background: color-mix(in srgb, var(--gray) 40%, transparent); }
.hero__title {
  color: var(--gray);
  margin-bottom: clamp(32px, 4vw, 52px);
  white-space: nowrap;          /* one-line statement */
  overflow: visible;
}
@media (max-width: 900px) {
  .hero__title { white-space: normal; }
}
.hero__sub { max-width: 46ch; color: color-mix(in srgb, var(--gray) 82%, transparent); margin-bottom: clamp(32px, 3vw, 44px); }
.hero__cta-row { display: flex; gap: clamp(24px, 3vw, 40px); align-items: center; flex-wrap: wrap; }

.hero__circle { position: absolute; right: -40px; bottom: clamp(40px, 8vw, 100px); z-index: 3; }
@media (max-width: 900px) { .hero__circle { display: none; } }

/* ============================================================================
   9. Focus Areas — cleaner three-column grid, premium hover
   ========================================================================== */
.focus { display: grid; gap: 0; }
.focus__item {
  display: grid;
  grid-template-columns: 50px minmax(0, 1.1fr) minmax(0, 1.9fr);
  align-items: baseline;
  gap: clamp(20px, 3vw, 44px);
  padding-block: clamp(30px, 3.6vw, 46px);
  border-top: 1px solid var(--sec-hair);
  transition: background var(--dur-reveal) var(--ease-glide);
  padding-inline: 6px;
  position: relative;
  overflow: hidden;
}
.focus__item:last-child { border-bottom: 1px solid var(--sec-hair); }

/* Premium hover: gold gradient sweep + shift right + colour lift */
.focus__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gold) 12%, transparent) 0%,
    color-mix(in srgb, var(--gold) 3%, transparent) 40%,
    transparent 100%);
  opacity: 0;
  transform: translateX(-30%);
  transition: opacity 0.7s var(--ease-boutique), transform 0.9s var(--ease-boutique);
  pointer-events: none;
}
.focus__item::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px; bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-boutique);
  pointer-events: none;
}
/* Smooth glide via transform (no padding jump / no reflow) */
.focus__item:hover::before { opacity: 1; transform: translateX(0); }
.focus__item:hover::after { transform: scaleX(1); }

.focus__num,
.focus__title,
.focus__body,
.focus__cta {
  position: relative;
  z-index: 2;
  transition:
    color var(--dur-hover) var(--ease-glide),
    transform var(--dur-hover) var(--ease-glide);
}
.focus__item:hover .focus__num,
.focus__item:hover .focus__title,
.focus__item:hover .focus__body,
.focus__item:hover .focus__cta {
  transform: translateX(var(--move-hover));
}
.focus__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  color: color-mix(in srgb, var(--sec-fg) 65%, transparent);
  letter-spacing: 0.16em;
}
.focus__item:hover .focus__num { color: var(--gold); }

/* Editorial pricing footer — a lower row under the description, separated by a
   thin rule. A small "Starting investment" label on the left; the amount on the
   right in the display face, royal navy, with a small handwritten "from". */
.focus__price {
  grid-column: 2 / -1;
  position: relative;
  z-index: 2;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--sec-hair);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  transition: transform var(--dur-hover) var(--ease-glide);
  /* The hover glide translates this row right by --move-hover, and the item
     clips overflow (for the gradient sweep). space-between pins the amount
     flush right, so without this reserve it would slide past the clip edge
     and vanish. Reserving the exact travel distance means the amount rests
     just short of the edge and ARRIVES at it on hover — nothing ever clips. */
  padding-right: var(--move-hover);
}
.focus__item:hover .focus__price { transform: translateX(var(--move-hover)); }
.focus__price-label {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--sec-fg) 55%, transparent);
}
.focus__price-value {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 2vw, 27px); letter-spacing: -0.02em;
  color: var(--royal);
}
.focus__price-from {
  font-family: var(--font-hand); font-weight: 400;
  font-size: 0.92em; letter-spacing: 0;
  color: color-mix(in srgb, var(--royal) 72%, transparent);
}
/* On dark sections the amount lifts to gold for contrast (safety). */
.sec--green .focus__price-value, .sec--gray .focus__price-value, .sec--royal .focus__price-value { color: var(--gold-lift); }
.sec--green .focus__price-from, .sec--gray .focus__price-from, .sec--royal .focus__price-from { color: color-mix(in srgb, var(--gold-lift) 78%, transparent); }
@media (max-width: 800px) { .focus__price { grid-column: 1 / -1; } }
.focus__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px);
  color: var(--sec-display);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variation-settings: 'opsz' 48;
}
.focus__item:hover .focus__title { color: var(--gold); }
.focus__body {
  color: color-mix(in srgb, var(--sec-fg) 82%, transparent);
  font-size: 15px;
  line-height: 1.55;
  max-width: none;
}
.focus__item:hover .focus__body { color: color-mix(in srgb, var(--sec-fg) 100%, transparent); }

@media (max-width: 800px) {
  .focus__item { grid-template-columns: 40px 1fr; row-gap: 8px; }
  .focus__title { grid-column: 2; }
  .focus__body { grid-column: 1 / -1; }
}

/* ============================================================================
   10. Studio Standards
   ========================================================================== */
.standards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 72px);
}
@media (max-width: 800px) { .standards { grid-template-columns: 1fr; } }
.standard { display: grid; gap: 14px; }
.standard__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 5.5vw, 76px);
  color: var(--gold-lift);
  line-height: 0.9;
  font-variation-settings: 'opsz' 72;
}
.standard__title { color: var(--sec-display); }
.standard p { color: color-mix(in srgb, var(--sec-fg) 82%, transparent); }

/* ============================================================================
   11. HORIZONTAL GALLERY — Ideas We're Exploring → Contact
   Extended so the gallery flows straight into the contact card at the end.
   ========================================================================== */
.gallery-pin {
  position: relative;
  height: 500vh;
  background: var(--paper);
  color: var(--gray);
}
.gallery-pin__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.gallery-track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3.4vw, 56px);
  padding-inline: clamp(28px, 6vw, 96px);
  will-change: transform;
}
.gallery-head,
.gallery-tail {
  flex: 0 0 min(620px, 82vw);
  padding-inline: 20px;
}
.gallery-tail { text-align: left; }
.gallery-card {
  flex: 0 0 min(400px, 78vw);
  display: grid;
  gap: 18px;
}
.gallery-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: color-mix(in srgb, var(--gray) 8%, transparent);
  border-radius: var(--radius-img);
}
.gallery-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease-boutique);
}
.gallery-card:hover .gallery-card__media img { transform: scale(1.04); }
.gallery-card__title,
.gallery-card__body,
.gallery-card .eyebrow { font-size: 15px; }
.gallery-card__title { color: var(--gray); font-size: 22px; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
.gallery-card__body { color: color-mix(in srgb, var(--gray) 78%, transparent); line-height: 1.55; }
.gallery-card .eyebrow { font-size: 11px; }

/* Mobile: the pinned scroll-lock never runs on touch (see gallery-pin.js),
   but the gallery keeps its HORIZONTAL character — a native swipe carousel
   with scroll snap instead of a tall vertical stack. Slides are narrower than
   the viewport so the next card always peeks in from the right (the swipe
   affordance), and the section stays a single compact screenful. */
@media (max-width: 900px) {
  .gallery-pin { height: auto; }
  .gallery-pin__inner {
    position: static;
    height: auto;
    display: block;
    overflow: visible;
    padding-block: var(--section-pad);
  }
  .gallery-track {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding-inline: var(--gutter);
    width: auto;
    transform: none !important;
    will-change: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .gallery-track::-webkit-scrollbar { display: none; }
  .gallery-head,
  .gallery-tail {
    flex: 0 0 min(420px, 82vw);
    scroll-snap-align: start;
    padding-inline: 0;
    align-self: center;
  }
  .gallery-card {
    flex: 0 0 min(320px, 78vw);
    scroll-snap-align: start;
  }
  .gallery-card__media { max-width: none; }

  /* Guided-carousel navigation (built by gallery-pin.js on touch/narrow only) */
  .gallery-nav { display: flex; align-items: center; gap: 16px; padding: 22px var(--gutter) 0; }
  .gallery-nav__rail { position: relative; flex: 1; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--gray) 16%, transparent); overflow: hidden; }
  .gallery-nav__fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0.04); background: linear-gradient(90deg, var(--gold), var(--gold-lift)); transition: transform 0.15s var(--ease-glide); }
  .gallery-nav__dots { display: flex; gap: 9px; }
  .gallery-nav__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--gray) 24%, transparent); transition: background 0.3s var(--ease-glide), transform 0.3s var(--ease-glide); }
  .gallery-nav__dot.is-active { background: var(--gold); transform: scale(1.35); }
}
/* Desktop: the JS-built mobile nav never exists; belt-and-braces hide it. */
@media (min-width: 901px) { .gallery-nav { display: none; } }

/* Scroll-driven card entrance on the mobile carousel — pure CSS, no JS
   scroll-jacking. Cards lift and clarify as they enter the scroll port.
   Progressive enhancement: only where the browser supports view timelines. */
@supports (animation-timeline: view(inline)) {
  @media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
    .gallery-track .jcard {
      animation: jcard-enter linear both;
      animation-timeline: view(inline);
      animation-range: entry 0% entry 62%;
    }
    @keyframes jcard-enter {
      from { opacity: 0.3; transform: translateY(14px) scale(0.97); }
      to   { opacity: 1;   transform: none; }
    }
  }
}

/* ============================================================================
   12. Contact panel — standalone (kept for mobile fallback / footer transition)
   ========================================================================== */
.contact-panel { text-align: center; }
.contact-panel__sub { margin-inline: auto; margin-bottom: clamp(28px, 3vw, 40px); }

/* ============================================================================
   13. Footer
   ========================================================================== */
.footer {
  background: var(--arctic);
  color: var(--gray);
  padding-block: clamp(48px, 5vw, 80px);
  border-top: 1px solid color-mix(in srgb, var(--gray) 15%, transparent);
  position: relative;
  z-index: 2;
}
.footer__inner {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
}
@media (max-width: 800px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
.footer__brand img { height: 34px; }
.footer__brand p { margin-top: 14px; font-size: 14px; max-width: 34ch; color: color-mix(in srgb, var(--gray) 70%, transparent); }

/* Royal-navy logo (masked) — no pure-black logo treatment on cream grounds. */
.logo-navy {
  display: inline-block;
  height: 24px;
  width: calc(24px * 1000 / 220);   /* logo aspect ratio */
  background: var(--royal);
  -webkit-mask: url("../img/smallpie-logo-black.svg") left center / contain no-repeat;
          mask: url("../img/smallpie-logo-black.svg") left center / contain no-repeat;
}
.logo-navy--footer { height: 32px; width: calc(32px * 1000 / 220); }
.footer__col h4 { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--gray) 60%, transparent); margin-bottom: 14px; }
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 10px; font-size: 14px; }
.footer__col a { transition: color 0.2s; }
.footer__col a:hover { color: var(--gold); }
.footer__bottom {
  width: var(--container);
  margin: clamp(28px, 4vw, 48px) auto 0;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--gray) 15%, transparent);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gray) 55%, transparent);
  flex-wrap: wrap;
}
/* Footer Client Portal uses the premium pill treatment */
/* Client Portal is a quiet arrow-link now, not a filled pill — findable but
   not competing with the marketing CTAs. */
.footer__signin { font-size: 11px; }

/* ============================================================================
   14. Scroll reveal
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-boutique), transform 1s var(--ease-boutique);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal="left"]  { opacity: 0; transform: translateX(-40px); }
[data-reveal="left"].is-in { opacity: 1; transform: none; }
[data-reveal="right"] { opacity: 0; transform: translateX(40px); }
[data-reveal="right"].is-in { opacity: 1; transform: none; }

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-boutique), transform 0.8s var(--ease-boutique);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > * { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   15b. Interior page components (shared across all pages)
   ========================================================================== */

/* --- Interior page hero — shorter than the home hero --- */
.page-hero {
  padding-top: clamp(150px, 16vw, 220px);
  padding-bottom: clamp(48px, 6vw, 90px);
  background: var(--arctic);
  position: relative;
}
.page-hero__inner { width: var(--container); margin-inline: auto; position: relative; z-index: 2; }
.page-hero__eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(20px, 3vw, 34px); }
.page-hero__eyebrow .rule { flex: 0 0 40px; height: 1px; background: color-mix(in srgb, var(--gray) 40%, transparent); }
.page-hero__title { color: var(--gray); max-width: 20ch; margin-bottom: clamp(20px, 2.4vw, 32px); }
.page-hero__sub { max-width: 54ch; color: color-mix(in srgb, var(--gray) 82%, transparent); }

/* --- Editorial form --- */
.form { display: grid; gap: clamp(18px, 2.4vw, 26px); max-width: 640px; }
.form__field { display: grid; gap: 8px; }
.form__field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sec-fg) 60%, transparent);
}
.form__field input,
.form__field select,
.form__field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--sec-fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--sec-fg) 26%, transparent);
  padding: 10px 2px;
  transition: border-color 0.35s var(--ease-boutique);
  border-radius: 0;
}
.form__field textarea { resize: vertical; min-height: 120px; }
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus { outline: none; border-color: var(--gold); }
.form__field select { appearance: none; cursor: pointer; }
.form__field--check { grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.form__field--check label { text-transform: none; letter-spacing: 0.01em; font-family: var(--font-body); font-size: 14px; color: color-mix(in srgb, var(--sec-fg) 78%, transparent); }
.form__field--check input { width: 18px; height: 18px; accent-color: var(--gold); border-bottom: 0; }
.form__note { font-family: var(--font-mono); font-size: 12px; color: color-mix(in srgb, var(--sec-fg) 55%, transparent); letter-spacing: 0.02em; }
.form__note a { color: var(--gold); }

/* --- Contact enquiry selector --- */
.enquiry { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.enquiry__opt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sec-fg) 78%, transparent);
  padding: 11px 18px;
  border: 1px solid var(--sec-hair);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition:
    border-color var(--dur-hover) var(--ease-glide),
    color var(--dur-hover) var(--ease-glide),
    background var(--dur-hover) var(--ease-glide),
    transform var(--dur-hover) var(--ease-glide);
}
.enquiry__opt:hover { border-color: color-mix(in srgb, var(--gold) 55%, transparent); transform: translateY(-1px); }
.enquiry__opt.is-active {
  color: var(--royal);
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 22%, transparent);
}
.enquiry__note {
  max-width: 52ch;
  color: color-mix(in srgb, var(--sec-fg) 82%, transparent);
  font-size: 15px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-reveal) var(--ease-glide), transform var(--dur-reveal) var(--ease-glide);
  min-height: 1.5em;
}
.enquiry__note.is-shown { opacity: 1; transform: none; }

/* --- Accordion (FAQ / process) --- */
.acc { display: grid; gap: 0; }
.acc__item { border-top: 1px solid var(--sec-hair); }
.acc__item:last-child { border-bottom: 1px solid var(--sec-hair); }
.acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(22px, 2.6vw, 32px) 4px;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 30px);
  color: var(--sec-display);
  letter-spacing: -0.015em;
  transition: color 0.35s var(--ease-boutique);
}
.acc__head:hover { color: var(--gold); }
.acc__head .chev {
  flex-shrink: 0; width: 18px; height: 18px;
  transition: transform 0.45s var(--ease-boutique), color 0.35s;
  color: var(--sec-accent);
}
.acc__head[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Pure-CSS height animation via :has() + a generous max-height cap. No JS
   measuring; answers are short so 520px never clips. */
.acc__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.55s var(--ease-boutique), opacity 0.4s var(--ease-boutique);
}
.acc__item.is-open .acc__panel { max-height: 520px; opacity: 1; }
.acc__body { padding: 0 4px clamp(22px, 2.6vw, 30px); max-width: 76ch; color: color-mix(in srgb, var(--sec-fg) 82%, transparent); line-height: 1.6; }
.acc__num { font-family: var(--font-mono); font-size: 13px; color: var(--sec-accent); margin-right: 14px; letter-spacing: 0.1em; }

/* --- Pricing plans --- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px); }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
.plan {
  display: grid;
  gap: 14px;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--sec-hair);
  border-radius: var(--radius-img);
  align-content: start;
  transition: transform 0.5s var(--ease-boutique), border-color 0.5s, background 0.5s;
  background: color-mix(in srgb, var(--sec-fg) 2%, transparent);
}
.plan:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.plan--focus {
  border-color: color-mix(in srgb, var(--gold) 60%, transparent);
  border-width: 1.5px;
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  overflow: visible;
  box-shadow: 0 18px 44px -22px color-mix(in srgb, var(--gray-dark) 80%, transparent);
}
/* Subtle elevation for the favourite plan on desktop — restrained, not enlarged */
@media (min-width: 901px) {
  .plan--focus { margin-top: -10px; }
}
/* "Client favourite" — refined editorial handwriting above the Performance
   card. Pure gold script on the dark section (no sticker/pill), with a small
   metallic tick underline. Feels like a margin note, not a discount tag. */
.plan__badge {
  position: absolute;
  top: -26px;
  right: 16px;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: clamp(27px, 2.8vw, 38px);
  line-height: 1;
  color: var(--gold-lift);
  transform: rotate(-5deg);
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
  text-shadow: 0 2px 12px color-mix(in srgb, var(--gray-dark) 65%, transparent);
}
/* Soft illuminated backing — reads as reflected light behind the handwriting,
   separating it from the card. Low opacity, no neon, no hard drop shadow. */
.plan__badge::before {
  content: "";
  position: absolute;
  inset: -40% -8%;
  background: radial-gradient(60% 90% at 50% 55%,
    color-mix(in srgb, var(--gold) 22%, transparent),
    transparent 72%);
  filter: blur(6px);
  z-index: -1;
}
.plan__badge::after {
  content: "";
  position: absolute;
  left: 8%; right: 10%; bottom: -5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.75;
}
/* Mobile: brighter, a touch lower so it never clips, slightly stronger glow. */
@media (max-width: 900px) {
  .plan__badge {
    top: -18px;
    right: 14px;
    font-size: 30px;
    color: color-mix(in srgb, var(--gold-lift) 88%, #fff);
  }
  .plan__badge::before {
    background: radial-gradient(60% 90% at 50% 55%,
      color-mix(in srgb, var(--gold) 30%, transparent),
      transparent 74%);
  }
  .plans { padding-top: 14px; }        /* headroom so the label is never cut */
}
.plan__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); color: var(--sec-display); letter-spacing: -0.02em; }
/* Fancy price — large display figure with a small mono cadence beside it */
.plan__price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.plan__amt {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4vw, 50px);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--sec-display);
}
.plan__per {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-lift);
}
.plan--focus .plan__amt { color: var(--gold-lift); }
.plan__lead { font-size: 15px; color: color-mix(in srgb, var(--sec-fg) 78%, transparent); }
.plan__list { list-style: none; display: grid; gap: 10px; margin-top: 6px; }
.plan__list li { position: relative; padding-left: 22px; font-size: 14px; color: color-mix(in srgb, var(--sec-fg) 82%, transparent); }
.plan__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

/* --- Team grid --- */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
@media (max-width: 900px) { .team { grid-template-columns: 1fr; } }
.team__member { display: grid; gap: 18px; }
.team__photo { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-img); background: color-mix(in srgb, var(--sec-fg) 8%, transparent); }
.team__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 0.9s var(--ease-boutique); }
.team__member:hover .team__photo img { transform: scale(1.04); }
.team__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); color: var(--sec-display); letter-spacing: -0.015em; }
.team__role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.team__bio { font-size: 14px; color: color-mix(in srgb, var(--sec-fg) 80%, transparent); line-height: 1.55; }

/* --- Work project list — editorial rows --- */
.projects { display: grid; gap: 0; }
.project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(36px, 5vw, 72px);
  border-top: 1px solid var(--sec-hair);
}
.project:last-child { border-bottom: 1px solid var(--sec-hair); }
@media (max-width: 800px) { .project { grid-template-columns: 1fr; gap: 20px; } }
.project__media { aspect-ratio: 3/2; overflow: hidden; border-radius: var(--radius-img); background: color-mix(in srgb, var(--sec-fg) 8%, transparent); }
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-boutique); }
.project:hover .project__media img { transform: scale(1.04); }
.project__index { font-family: var(--font-mono); font-size: 13px; color: var(--gold); letter-spacing: 0.1em; }
.project__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4vw, 56px); color: var(--sec-display); letter-spacing: -0.025em; line-height: 1.02; margin: 12px 0; }
.project__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--sec-hair); color: color-mix(in srgb, var(--sec-fg) 70%, transparent); }
.chip--live { border-color: color-mix(in srgb, var(--gold) 50%, transparent); color: var(--gold); }
.project__body { color: color-mix(in srgb, var(--sec-fg) 82%, transparent); }

/* --- Insights card grid --- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }
.card { display: grid; gap: 16px; transition: transform 0.5s var(--ease-boutique); }
.card:hover { transform: translateY(-6px); }
.card__media { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-img); background: color-mix(in srgb, var(--sec-fg) 8%, transparent); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-boutique); }
.card:hover .card__media img { transform: scale(1.04); }
.card__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2vw, 26px); color: var(--sec-display); letter-spacing: -0.015em; line-height: 1.18; }
.card__body { font-size: 14px; color: color-mix(in srgb, var(--sec-fg) 78%, transparent); line-height: 1.55; }

/* --- Design Services — bordered cards + a gold pricing note (no prices) --- */
.design-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 28px); }
@media (max-width: 900px) { .design-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .design-grid { grid-template-columns: 1fr; } }
.design-card {
  display: grid; gap: 11px; align-content: start;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--sec-hair);
  border-radius: var(--radius-img);
  background: color-mix(in srgb, var(--sec-fg) 4%, transparent);
  transition: transform 0.5s var(--ease-boutique), border-color 0.5s, background 0.5s;
}
.design-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.design-card__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-lift); }
.design-card__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 1.8vw, 24px); color: var(--sec-display); letter-spacing: -0.015em; line-height: 1.2; }
.design-card__body { font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--sec-fg) 80%, transparent); }

.svc-note {
  display: flex; gap: clamp(16px, 2.4vw, 28px); align-items: flex-start;
  margin-top: clamp(18px, 2.2vw, 28px);
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius-img);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 20%, transparent), color-mix(in srgb, var(--gold) 7%, transparent));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}
/* Seal — refined line-art mark (thin double ring, centre diamond, four fine
   compass ticks). Gold line-work, no filled badge — reads like a wax seal. */
.svc-note__seal {
  flex: none;
  width: clamp(44px, 4.4vw, 56px); height: clamp(44px, 4.4vw, 56px);
  display: grid; place-items: center;
  color: var(--gold-lift);
}
.svc-note__seal svg { width: 100%; height: 100%; display: block; }
.svc-note__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.8vw, 23px); color: var(--sec-display); letter-spacing: -0.015em; margin-bottom: 6px; }
.svc-note__body { font-size: 14.5px; line-height: 1.6; color: color-mix(in srgb, var(--sec-fg) 86%, transparent); max-width: 62ch; }

/* --- Legal pages — designed, sectioned, readable --- */
.legal { max-width: 80ch; margin-inline: auto; counter-reset: legalsec; }
.legal__meta {
  display: flex; flex-wrap: wrap; gap: 14px 32px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--sec-fg) 62%, transparent);
  margin-bottom: clamp(40px, 5vw, 64px);
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--sec-hair);
  border-radius: var(--radius-img);
  background: color-mix(in srgb, var(--sec-fg) 2%, transparent);
}
.legal__meta strong { color: var(--sec-display); font-weight: 600; }
/* Each h2 opens a numbered section with a gold rule above it */
.legal h2 {
  counter-increment: legalsec;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 42px); color: var(--sec-display);
  letter-spacing: -0.025em; line-height: 1.05;
  margin: clamp(48px, 6vw, 80px) 0 20px;
  padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--sec-hair);
  position: relative;
}
.legal h2::before {
  content: counter(legalsec, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 13px; letter-spacing: 0.14em; color: var(--gold);
  margin-bottom: 14px;
}
.legal h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2vw, 26px); color: var(--sec-display); margin: 32px 0 10px; letter-spacing: -0.015em; }
.legal p, .legal li { color: color-mix(in srgb, var(--sec-fg) 84%, transparent); line-height: 1.7; font-size: clamp(15px, 1.3vw, 17px); }
.legal p { margin-bottom: 16px; }
.legal ul { margin: 0 0 18px 0; padding-left: 0; display: grid; gap: 10px; list-style: none; }
.legal li { position: relative; padding-left: 24px; }
.legal li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* --- Map (interactive NZ) --- */
.map-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (max-width: 900px) { .map-wrap { grid-template-columns: 1fr; } }
.map-figure { position: relative; }
.map-figure svg, .map-figure .nz-map { width: 100%; height: auto; }
.map-figure path[title] {
  fill: color-mix(in srgb, var(--sec-fg) 12%, transparent);
  stroke: color-mix(in srgb, var(--sec-fg) 40%, transparent);
  stroke-width: 0.6;
  transition: fill 0.35s var(--ease-boutique), stroke 0.35s;
  cursor: pointer;
  outline: none;
}
.map-figure path[title].is-hover { fill: color-mix(in srgb, var(--gold) 45%, transparent); }
.map-figure path[title].is-active { fill: var(--gold); stroke: var(--gold); animation: region-pulse 2.4s var(--ease-standard) infinite; }
@keyframes region-pulse { 0%,100% { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 60%, transparent)); } }
@media (prefers-reduced-motion: reduce) { .map-figure path[title].is-active { animation: none; } }
.map-figure path[title]:focus-visible { stroke: var(--gold); stroke-width: 1.2; }
.map-select {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sec-fg);
  background: transparent; border: 0; border-bottom: 1px solid var(--sec-hair);
  padding: 8px 2px; margin-bottom: 20px; cursor: pointer; border-radius: 0;
}
.map-select:focus { outline: none; border-color: var(--gold); }
.map-detail__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4vw, 52px); color: var(--sec-display); letter-spacing: -0.025em; line-height: 1.02; margin-bottom: 16px; transition: opacity 0.4s var(--ease-boutique); }
.map-detail__lead { color: color-mix(in srgb, var(--sec-fg) 90%, transparent); line-height: 1.6; margin-bottom: 18px; }
.map-detail__list { list-style: none; display: grid; gap: 12px; margin-bottom: 18px; }
.map-detail__list li { position: relative; padding-left: 24px; color: var(--sec-fg); line-height: 1.5; }
.map-detail__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-lift); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-lift) 25%, transparent); }
.map-detail__close { color: color-mix(in srgb, var(--sec-fg) 82%, transparent); font-style: italic; font-family: var(--font-body); }
.map-hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-lift); margin-bottom: 12px; display: inline-block; }
/* fade the detail text when switching regions */
.map-detail.is-switching .map-detail__title,
.map-detail.is-switching .map-detail__lead,
.map-detail.is-switching .map-detail__list,
.map-detail.is-switching .map-detail__close { opacity: 0; }
.map-detail__title, .map-detail__lead, .map-detail__list, .map-detail__close { transition: opacity 0.3s var(--ease-boutique); }

/* --- Insights masonry — lively mixed-size grid --- */
.masonry { columns: 4 clamp(220px, 20vw, 300px); column-gap: clamp(16px, 1.6vw, 24px); }
@media (max-width: 1100px) { .masonry { columns: 3 clamp(200px, 28vw, 280px); } }
@media (max-width: 760px)  { .masonry { columns: 2 clamp(150px, 42vw, 260px); } }
@media (max-width: 460px)  { .masonry { columns: 1; } }
.tile {
  break-inside: avoid;
  margin-bottom: clamp(16px, 1.6vw, 24px);
  border-radius: var(--radius-img);
  overflow: hidden;
  position: relative;
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.8s var(--ease-boutique), transform 0.8s var(--ease-boutique);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.masonry.is-in .tile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tile { opacity: 1; transform: none; } }
/* every text-bearing tile gets padding + a border so copy never touches an edge */
.tile--text,
.tile--gold,
.tile--navy {
  padding: clamp(22px, 2vw, 32px);
  border: 1px solid var(--sec-hair);
  transition: opacity 0.8s var(--ease-boutique), transform 0.4s var(--ease-boutique), border-color 0.4s, background 0.4s;
}
.tile--text { background: color-mix(in srgb, var(--sec-fg) 2%, transparent); }
.tile--text:hover,
.tile--gold:hover,
.tile--navy:hover { transform: translateY(-5px); }
.tile--text:hover { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.tile__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; display: block; }
.tile__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(17px, 1.5vw, 23px);
  color: var(--sec-display); letter-spacing: -0.01em; line-height: 1.2;
  overflow-wrap: break-word; word-break: normal; hyphens: auto;
}
.tile__body { font-size: 14px; color: color-mix(in srgb, var(--sec-fg) 78%, transparent); line-height: 1.5; margin-top: 8px; overflow-wrap: break-word; }
/* accent (gold) tile */
.tile--gold { background: linear-gradient(140deg, color-mix(in srgb, var(--gold) 22%, transparent), color-mix(in srgb, var(--gold) 6%, transparent)); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.tile--gold .tile__title { color: var(--sec-display); }
/* navy tile */
.tile--navy { background: var(--dark-green); border-color: transparent; }
.tile--navy .tile__title { color: var(--arctic); }
.tile--navy .tile__body { color: color-mix(in srgb, var(--arctic) 78%, transparent); }
.tile--navy .tile__eyebrow { color: var(--gold-lift); }
/* image tiles */
.tile--img img { width: 100%; height: auto; display: block; transition: transform 0.7s var(--ease-boutique); }
.tile--img:hover img { transform: scale(1.05); }
/* pinned quote block */
.insights-pin { position: relative; }
.insights-quote {
  position: sticky; top: 120px;
  padding: clamp(28px, 3vw, 44px);
  background: var(--royal); color: var(--arctic);
  border-radius: var(--radius-img);
}
.insights-quote .h-card { color: var(--arctic); }
.insights-quote .script { color: var(--gold-lift); }

/* --- Research stat block — big royal-navy square, static (not a card) --- */
.stat-square {
  position: relative;
  display: grid;
  align-content: center;
  gap: clamp(18px, 2vw, 28px);
  width: min(560px, 100%);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  padding: clamp(32px, 5vw, 60px);
  background:
    radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 55%),
    var(--royal);
  color: var(--arctic);
  border-radius: var(--radius-img);
  overflow: hidden;
  text-align: left;
}
.stat-square::before {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  border-radius: inherit;
  pointer-events: none;
}
.stat-square__label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-lift);
}
.stat-square__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(72px, 14vw, 150px);
  line-height: 0.9; letter-spacing: -0.03em;
  color: var(--arctic);
}
.stat-square__num sup { font-size: 0.42em; vertical-align: super; color: var(--gold-lift); }
.stat-square__claim {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.3; letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--arctic) 94%, transparent);
  max-width: 30ch;
}
.stat-square__source {
  font-family: var(--font-mono);
  font-size: 11.5px; line-height: 1.5;
  color: color-mix(in srgb, var(--arctic) 62%, transparent);
  padding-top: clamp(10px, 1.4vw, 16px);
  border-top: 1px solid color-mix(in srgb, var(--arctic) 16%, transparent);
}
@media (max-width: 560px) {
  .stat-square { aspect-ratio: auto; }
}

/* ============================================================================
   15c. Portal (client area) — same design language, on cream
   ========================================================================== */
.portal-main { min-height: 100vh; padding-top: clamp(130px, 15vw, 190px); padding-bottom: clamp(60px, 8vw, 110px); background: var(--arctic); }
.portal-shell { width: var(--container); margin-inline: auto; position: relative; z-index: 2; }
.portal-shell--narrow { width: min(520px, calc(100vw - 2 * var(--gutter))); }
.portal-card {
  background: color-mix(in srgb, var(--gray) 3%, transparent);
  border: 1px solid var(--sec-hair);
  border-radius: var(--radius-img);
  padding: clamp(28px, 4vw, 48px);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.portal-card h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); color: var(--gray); letter-spacing: -0.015em; margin-bottom: 18px; }
.portal-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(28px, 4vw, 48px); }
.portal-topbar img { height: 30px; }
.error-line { color: var(--oxblood, #7A2A1D); font-size: 14px; margin-top: 4px; }
.portal-form { display: grid; gap: 20px; }
.portal-form .field { display: grid; gap: 8px; }
.portal-form label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--gray) 60%, transparent); }
.portal-form input, .portal-form select {
  font-family: var(--font-body); font-size: 16px; color: var(--gray);
  background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--gray) 26%, transparent);
  padding: 10px 2px; border-radius: 0; transition: border-color 0.35s var(--ease-boutique);
}
.portal-form input:focus, .portal-form select:focus { outline: none; border-color: var(--gold); }
.portal-link { color: var(--gold); border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.invoices, .customers { list-style: none; display: grid; gap: 12px; }
.invoice, .customer { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--sec-hair); border-radius: 10px; }
.invoice__head, .customer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.invoice__number, .customer__name { font-family: var(--font-display); font-weight: 700; color: var(--gray); }
.invoice__meta, .customer__meta { display: flex; gap: 12px; font-size: 14px; color: color-mix(in srgb, var(--gray) 70%, transparent); }
.status-chip { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--sec-hair); }
.status-chip--paid { border-color: color-mix(in srgb, var(--gold) 50%, transparent); color: var(--gold); }
.invoices-empty, .customer--empty { padding: 24px; text-align: center; border: 1px dashed var(--sec-hair); border-radius: 10px; color: color-mix(in srgb, var(--gray) 55%, transparent); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .row-2 { grid-template-columns: 1fr; } }
.status { font-family: var(--font-mono); font-size: 12px; color: color-mix(in srgb, var(--gray) 60%, transparent); min-height: 1em; }

/* ============================================================================
   15d. Premium interaction layer (opt-in via classes / data-attributes)
   ========================================================================== */

/* --- Breathing geometric background ---
   A refined triangular "scale" surface that slowly shifts brightness. Applied
   to a section via .breathe-bg. Two offset layers drift out of phase so it
   reads as gentle breathing, never a flashing grid. */
.breathe-bg { position: relative; isolation: isolate; }
.breathe-bg > * { position: relative; z-index: 1; }
.breathe-bg::before,
.breathe-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-position: center;
  background-size: 72px 124px;
  /* triangular scale motif */
  background-image:
    linear-gradient(60deg,  color-mix(in srgb, var(--sec-fg) 5%, transparent) 25%, transparent 25.5%),
    linear-gradient(-60deg, color-mix(in srgb, var(--sec-fg) 5%, transparent) 25%, transparent 25.5%);
  opacity: 0.5;
  will-change: opacity;
  animation: breathe var(--dur-ambient) ease-in-out infinite;
}
.breathe-bg::after {
  background-size: 108px 186px;
  opacity: 0.32;
  animation-duration: calc(var(--dur-ambient) * 1.45);
  animation-direction: reverse;
}
@keyframes breathe {
  0%, 100% { opacity: 0.30; }
  50%      { opacity: 0.60; }
}
@media (max-width: 700px) {
  /* simpler + calmer on mobile */
  .breathe-bg::after { display: none; }
  .breathe-bg::before { background-size: 90px 156px; }
}
@media (prefers-reduced-motion: reduce) {
  .breathe-bg::before, .breathe-bg::after { animation: none; opacity: 0.34; }
}

/* --- Global ambient cursor glow ---
   One soft, low-opacity light for the whole public site. Sits above the page
   sections but below the header (z 100), mobile menu (z 95), and loader, so it
   never touches interactive chrome or readability. pointer-events: none. */
.cursor-glow {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-glide);
  background: radial-gradient(
    560px 560px at var(--gx, 50%) var(--gy, 50%),
    color-mix(in srgb, var(--gold) 9%, transparent) 0%,
    color-mix(in srgb, var(--gold) 4%, transparent) 34%,
    transparent 60%
  );
  will-change: background;
}
.cursor-glow.is-on { opacity: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor-glow { display: none; } }

/* --- Cursor label (project media) --- */
.cursor-label {
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--royal);
  background: var(--gold);
  padding: 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity var(--dur-hover) var(--ease-glide), scale var(--dur-hover) var(--ease-glide);
}
.cursor-label.is-on { opacity: 1; }
[data-cursor-label] { cursor: none; }
@media (pointer: coarse) { .cursor-label { display: none; } [data-cursor-label] { cursor: pointer; } }

/* --- Silk image reveal ---
   Image sits under a clip that lifts away when the element scrolls in. */
.silk { position: relative; overflow: hidden; }
.silk img { clip-path: inset(0 0 0 0); transform: scale(1.06); transition: transform 1.2s var(--ease-glide); }
.silk::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: var(--sec-bg, var(--arctic));
  transform: translateX(0);
  transition: transform 0.95s var(--ease-boutique);
}
.silk.is-in::after { transform: translateX(101%); }
.silk.is-in img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .silk::after { display: none; }
  .silk img { transform: none; }
}

/* --- Metallic sheen (slow reflected light on a gold line) --- */
.sheen {
  position: relative;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--arctic) 85%, transparent), transparent) no-repeat,
    var(--gold);
  background-size: 40% 100%, 100% 100%;
  background-position: -60% 0, 0 0;
  animation: sheen-move calc(var(--dur-ambient) * 0.55) linear infinite;
}
@keyframes sheen-move { to { background-position: 160% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .sheen { animation: none; } }

/* --- Page transition panel --- */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--royal);
  pointer-events: none;
  transform: translateY(101%);           /* parked below, invisible until navigating */
  transition: transform var(--dur-section) var(--ease-boutique);
  display: grid;
  place-items: center;
}
.page-transition::after {
  content: "";
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  transition: opacity var(--dur-hover);
}
.page-transition.is-covering { transform: translateY(0); }         /* wipe up to cover before nav */
.page-transition.is-covering::after { opacity: 0.9; }

/* --- Animated divider (grows in on view) --- */
.divider { height: 1px; width: var(--container); margin: 0 auto; background: transparent; position: relative; }
.divider::before {
  content: "";
  position: absolute; left: 0; top: 0; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--sec-hair), color-mix(in srgb, var(--gold) 55%, transparent), var(--sec-hair));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-section) var(--ease-boutique);
}
.divider.is-in::before { transform: scaleX(1); }

/* Ornate variant — the SmallPie section divider.
   Entrance sequence (precise and symmetrical, runs ONCE):
     1. the centre diamond appears first
     2. the line grows outward from the centre dot in BOTH directions
     3. the finished divider stays still — no continuous animation. */
.divider--ornate { height: 2px; margin-block: clamp(38px, 6vw, 72px); }
.divider--ornate::before {
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--gold) 55%, transparent) 18%,
    var(--gold) 50%,
    color-mix(in srgb, var(--gold) 55%, transparent) 82%,
    transparent);
  transform: scaleX(0);
  transform-origin: center;                 /* grows outward from the dot */
  transition: transform 0.7s var(--ease-boutique) 0.32s;
}
.divider--ornate::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform 0.35s var(--ease-boutique);   /* dot first, no delay */
  box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 55%, transparent);
}
.divider--ornate.is-in::before { transform: scaleX(1); }
.divider--ornate.is-in::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .divider--ornate::before, .divider--ornate::after { transition: none; }
  .divider--ornate::before { transform: scaleX(1); }
  .divider--ornate::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
}

/* Band wrapper — anchors the ornate divider EXACTLY on the boundary between
   two differently-coloured sections. The band itself has zero height, so the
   two section colours meet in a hard edge (no gradient, no coloured strip);
   the divider straddles that seam with its dot centred on the exact line. */
.divider-band {
  position: relative;
  height: 0;
  z-index: 5;                    /* above both section backgrounds */
  pointer-events: none;
}
.divider-band .divider--ornate {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--container);
  max-width: calc(100vw - 2 * var(--gutter));
  margin: 0;
  transform: translate(-50%, -50%);   /* line centre = the colour seam */
}

/* three-up variant of the standards grid (Contact — what happens next) */
.standards--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .standards--three { grid-template-columns: 1fr; } }

/* (The old continuously-animated .seam was replaced by .divider-band with the
   ornate divider — dot first, lines grow from the centre, then still.) */

/* ============================================================================
   15. Utilities
   ========================================================================== */
.mt-1 { margin-top: 14px; } .mt-2 { margin-top: 28px; } .mt-3 { margin-top: 44px; } .mt-4 { margin-top: 68px; }
.mb-1 { margin-bottom: 14px; } .mb-2 { margin-bottom: 28px; } .mb-3 { margin-bottom: 44px; } .mb-4 { margin-bottom: 68px; }
.text-gold { color: var(--gold); }
.text-green { color: var(--dark-green); }
.stack { display: grid; gap: clamp(16px, 2vw, 28px); }

/* ============================================================================
   16. Page loader — ONE continuous line.
   A single SVG path (built responsively by loader.js) carries the entire
   journey: left edge → traces the infinity itself → cycles while loading →
   completes the current pass → exits to the right edge. Nothing is pre-drawn;
   there is no separate loop element — one path, one stroke, one motion.
   ========================================================================== */
.loader {
  --loop-w: clamp(120px, 24vw, 168px);          /* infinity width (JS mirrors this) */
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--arctic);
  opacity: 1;
  transition: opacity 0.55s var(--ease-boutique), visibility 0.55s var(--ease-boutique);
  /* Fail-safe: if JS never runs, fade the loader out on its own after 6s. */
  animation: loader-failsafe 0.01s linear 6s forwards;
}
.loader.is-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: none;                 /* JS is driving the exit — cancel the fail-safe */
}
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* The journey SVG fills the viewport; loader.js writes the path + dash. */
.loader__journey {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.loader__journey path {
  fill: none;
  stroke: var(--gold);
  stroke-linecap: round;
}

/* Wordmark beneath the loop — royal navy, ~10% larger, sitting a touch lower
   with a clear gap below the infinity path so the two never crowd. */
.loader__word {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--loop-w) * 0.26 + 30px);   /* lower + gap from the path */
  transform: translateX(-50%);
  height: 22px;                                    /* +10% from 20px */
  width: calc(22px * 1000 / 220);                  /* logo aspect ratio */
  background: var(--royal);
  -webkit-mask: url("../img/smallpie-logo-black.svg") center/contain no-repeat;
          mask: url("../img/smallpie-logo-black.svg") center/contain no-repeat;
}

/* Page reveals from blur → sharp as the loader lifts (JS toggles .is-revealing). */
body.is-revealing > main { animation: content-unblur 0.85s var(--ease-boutique) both; }
@keyframes content-unblur {
  from { filter: blur(16px); opacity: 0.4; }
  to   { filter: blur(0);    opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  .loader__journey { display: none; }
  body.is-revealing > main { animation: none; }
}

/* ============================================================================
   17. Inquiry Portal — the Contact page's structured project inquiry.
   Ten refined steps, custom SmallPie controls (no native dropdown chrome),
   quiet gold detailing. Rendered by assets/js/inquiry/app.js.
   ========================================================================== */
.inq { max-width: 860px; margin-inline: auto; }

/* Progress */
.inq-progress { margin-bottom: clamp(24px, 3vw, 40px); }
.inq-progress__meta { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.inq-progress__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold);
}
.inq-progress__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.02em;
  color: var(--sec-display); outline: none;
}
.inq-progress__track {
  margin-top: 14px; height: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--sec-fg) 12%, transparent);
  overflow: hidden;
}
.inq-progress__fill {
  display: block; height: 100%; width: 10%;
  background: linear-gradient(90deg, var(--gold), var(--gold-lift));
  transition: width 0.6s var(--ease-boutique);
}

/* Card */
.inq-card {
  border: 1px solid var(--sec-hair);
  border-radius: var(--radius-img);
  background: color-mix(in srgb, var(--sec-fg) 2%, transparent);
  padding: clamp(22px, 3.4vw, 44px);
}
.inq-body { display: grid; gap: clamp(22px, 2.8vw, 32px); }

/* Fields */
.inq-field { display: grid; gap: 10px; }
.inq-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sec-fg) 66%, transparent);
  display: flex; align-items: baseline; gap: 10px;
}
.inq-optional {
  font-size: 9px; letter-spacing: 0.14em; padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 999px; color: var(--gold);
}
.inq-hint { font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--sec-fg) 58%, transparent); }
.inq-error { font-size: 13px; color: #8C5A2B; min-height: 0; }        /* warm amber, not red */
.inq-field.has-error .inq-input,
.inq-field.has-error .inq-select__btn { border-color: #8C5A2B; }

.inq-input {
  font-family: var(--font-body); font-size: 16px;
  color: var(--sec-fg); background: transparent;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--sec-fg) 26%, transparent);
  padding: 10px 2px; border-radius: 0; width: 100%;
  transition: border-color 0.35s var(--ease-boutique);
}
.inq-input:focus { outline: none; border-color: var(--gold); }
.inq-input:focus-visible { outline: 2px solid color-mix(in srgb, var(--gold) 45%, transparent); outline-offset: 3px; }
.inq-input.is-invalid { border-color: #8C5A2B; }
.inq-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
input.inq-input[type="date"] { appearance: none; -webkit-appearance: none; min-height: 44px; }

/* Radio pills + chips */
.inq-pills, .inq-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.inq-pills--stack { flex-direction: column; align-items: flex-start; }
.inq-pill, .inq-chip {
  font-family: var(--font-body); font-size: 14px;
  padding: 11px 18px; min-height: 44px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sec-fg) 24%, transparent);
  background: transparent; color: color-mix(in srgb, var(--sec-fg) 82%, transparent);
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-glide), background var(--dur-hover), color var(--dur-hover), transform 0.3s var(--ease-boutique);
}
.inq-pill:hover, .inq-chip:hover { border-color: color-mix(in srgb, var(--gold) 60%, transparent); transform: translateY(-1px); }
.inq-pill:focus-visible, .inq-chip:focus-visible { outline: 2px solid color-mix(in srgb, var(--gold) 55%, transparent); outline-offset: 2px; }
.inq-pill[aria-checked="true"], .inq-chip[aria-pressed="true"] {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--sec-display);
}
.inq-subhead {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(18px, 2vw, 23px); letter-spacing: -0.015em;
  color: var(--sec-display);
  padding-top: 10px; margin-bottom: -6px;
  border-top: 1px solid var(--sec-hair); padding-top: clamp(18px, 2.4vw, 26px);
}

/* Custom select */
.inq-select { position: relative; }
.inq-select__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; min-height: 48px;
  font-family: var(--font-body); font-size: 16px; text-align: left;
  color: var(--sec-fg); background: transparent; cursor: pointer;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--sec-fg) 26%, transparent);
  padding: 10px 2px;
  transition: border-color 0.35s var(--ease-boutique);
}
.inq-select__btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--gold) 45%, transparent); outline-offset: 3px; }
.inq-select.is-open .inq-select__btn { border-color: var(--gold); }
.inq-select__value.is-placeholder { color: color-mix(in srgb, var(--sec-fg) 45%, transparent); }
.inq-select__chev {
  width: 9px; height: 9px; flex: none;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.35s var(--ease-boutique);
}
.inq-select.is-open .inq-select__chev { transform: rotate(225deg) translateY(-2px); }
.inq-select__pop {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px);
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  border-radius: 14px;
  box-shadow: 0 22px 50px -18px color-mix(in srgb, var(--royal) 40%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.28s var(--ease-boutique), transform 0.28s var(--ease-boutique), visibility 0.28s;
  overflow: hidden;
}
.inq-select.is-open .inq-select__pop { opacity: 1; visibility: visible; transform: none; }
.inq-select__search {
  width: 100%; border: 0; border-bottom: 1px solid var(--sec-hair);
  background: transparent; padding: 13px 16px;
  font-family: var(--font-body); font-size: 15px; color: var(--sec-fg);
}
.inq-select__search:focus { outline: none; }
.inq-select__list {
  list-style: none;
  max-height: min(300px, 40vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;   /* momentum scrolling on iOS */
  overscroll-behavior: contain;        /* wheel/touch never bleeds to the page */
  padding: 6px;
}
.inq-select__opt {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 9px; cursor: pointer;
  font-size: 15px; color: var(--sec-fg);
}
.inq-select__opt.is-active { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.inq-select__opt[aria-selected="true"] { color: var(--sec-display); font-weight: 600; }
.inq-select__flag { font-size: 17px; line-height: 1; }
.inq-select__empty { padding: 14px; font-size: 14px; color: color-mix(in srgb, var(--sec-fg) 55%, transparent); }
.inq-country__sub { margin-top: 12px; }

/* Palette cards */
.inq-palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.inq-palette {
  display: grid; gap: 9px; text-align: left; cursor: pointer;
  padding: 16px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sec-fg) 18%, transparent);
  background: color-mix(in srgb, var(--sec-fg) 2%, transparent);
  position: relative;
  transition: border-color var(--dur-hover) var(--ease-glide), transform 0.35s var(--ease-boutique), background var(--dur-hover);
}
.inq-palette:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.inq-palette:focus-visible { outline: 2px solid color-mix(in srgb, var(--gold) 55%, transparent); outline-offset: 2px; }
.inq-palette[aria-checked="true"] {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  box-shadow: 0 12px 30px -18px color-mix(in srgb, var(--royal) 45%, transparent);
}
.inq-palette[aria-checked="true"]::after {
  content: ""; position: absolute; top: 12px; right: 12px;
  width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg);
}
.inq-palette__swatches { display: flex; border-radius: 8px; overflow: hidden; height: 34px; }
.inq-palette__swatches span { flex: 1; }
.inq-palette__type {
  position: absolute; top: 20px; right: 16px;
  font-size: 17px; color: color-mix(in srgb, var(--sec-fg) 55%, transparent);
}
.inq-palette__type--serif { font-family: Georgia, serif; }
.inq-palette__type--sans { font-family: var(--font-body); }
.inq-palette__type--display { font-family: var(--font-display); font-weight: 700; }
.inq-palette__type--mono { font-family: var(--font-mono); }
.inq-palette__name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--sec-display); }
.inq-palette__desc { font-size: 12.5px; line-height: 1.45; color: color-mix(in srgb, var(--sec-fg) 62%, transparent); }

/* Uploader */
.inq-upload { display: grid; gap: 12px; }
.inq-upload__zone {
  position: relative; display: grid; justify-items: center; gap: 6px;
  padding: clamp(22px, 3vw, 34px);
  border: 1.5px dashed color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 14px; text-align: center;
  transition: border-color var(--dur-hover), background var(--dur-hover);
}
.inq-upload__zone.is-drag { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.inq-upload__icon { width: 26px; height: 26px; color: var(--gold); }
.inq-upload__icon svg { width: 100%; height: 100%; }
.inq-upload__text { font-size: 14.5px; color: color-mix(in srgb, var(--sec-fg) 75%, transparent); }
.inq-upload__browse {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--gold); text-decoration: underline; text-underline-offset: 3px;
  font-size: 14.5px; font-family: var(--font-body);
}
.inq-upload__meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: color-mix(in srgb, var(--sec-fg) 48%, transparent); }
.inq-upload__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.inq-upload__list { list-style: none; display: grid; gap: 8px; }
.inq-upload__row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--sec-hair);
  background: color-mix(in srgb, var(--sec-fg) 2%, transparent);
  font-size: 13.5px;
}
.inq-upload__row.is-error { border-color: color-mix(in srgb, #8C5A2B 55%, transparent); }
.inq-upload__name { font-weight: 600; color: var(--sec-display); overflow-wrap: anywhere; }
.inq-upload__size { font-family: var(--font-mono); font-size: 11px; color: color-mix(in srgb, var(--sec-fg) 55%, transparent); }
.inq-upload__bar { flex: 1 1 80px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--sec-fg) 12%, transparent); overflow: hidden; }
.inq-upload__bar span { display: block; height: 100%; width: 40%; background: var(--gold); animation: upload-slide 0.7s linear infinite; }
@keyframes upload-slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.inq-upload__ok { width: 18px; height: 18px; color: #5F7A5A; flex: none; }        /* muted green */
.inq-upload__ok svg { width: 100%; height: 100%; }
.inq-upload__err { color: #8C5A2B; font-size: 12.5px; }
.inq-upload__remove {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 19px; line-height: 1; color: color-mix(in srgb, var(--sec-fg) 55%, transparent);
  padding: 6px; min-width: 32px; min-height: 32px;
  transition: color var(--dur-hover);
}
.inq-upload__remove:hover { color: var(--sec-display); }

/* URL list + colour chips */
.inq-urls { display: grid; gap: 10px; }
.inq-colors { display: grid; gap: 10px; }
.inq-colors__row { display: flex; gap: 10px; align-items: flex-end; }
.inq-colors__input { max-width: 180px; font-family: var(--font-mono); }
.inq-colors__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.inq-colors__chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px;
  padding: 6px 8px 6px 10px; border-radius: 999px;
  border: 1px solid var(--sec-hair); color: var(--sec-fg);
}
.inq-colors__dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--sec-hair); }

/* Footer / nav */
.inq-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-top: clamp(26px, 3vw, 38px); padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--sec-hair); flex-wrap: wrap;
}
.inq-estimate-hint { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--gold); }
.inq-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); margin-left: auto; }
.inq-back { background: none; border: 0; cursor: pointer; }
.inq-next { border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.inq-next:disabled { opacity: 0.55; cursor: default; }

/* Summary + estimate */
.inq-summary { display: grid; gap: 0; border: 1px solid var(--sec-hair); border-radius: 12px; overflow: hidden; }
.inq-summary__row {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 12px 18px; font-size: 14px;
}
.inq-summary__row + .inq-summary__row { border-top: 1px solid var(--sec-hair); }
.inq-summary__row span { color: color-mix(in srgb, var(--sec-fg) 60%, transparent); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; align-self: center; }
.inq-summary__row strong { color: var(--sec-display); text-align: right; }
.inq-estimate {
  display: grid; gap: 10px; text-align: left;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius-img);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 18%, transparent), color-mix(in srgb, var(--gold) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}
.inq-estimate__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.inq-estimate__num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.inq-estimate__from { font-size: 15px; color: color-mix(in srgb, var(--sec-fg) 75%, transparent); }
.inq-estimate__num strong {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.03em; line-height: 1;
  color: var(--sec-display);
}
.inq-estimate__range { font-size: 14.5px; color: color-mix(in srgb, var(--sec-fg) 78%, transparent); }
.inq-estimate__note { font-size: 13.5px; color: #8C5A2B; }
.inq-estimate__adj {
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 12px; margin-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.02em;
  color: var(--sec-display);
}
.inq-estimate__review { font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--sec-fg) 78%, transparent); }
.inq-estimate__review strong { color: var(--sec-display); }
.inq-estimate__custom {
  font-size: 13.5px; line-height: 1.5; color: #8C5A2B;
  padding: 12px 14px; border-radius: 10px;
  background: color-mix(in srgb, #8C5A2B 8%, transparent);
  border: 1px solid color-mix(in srgb, #8C5A2B 30%, transparent);
}
.inq-estimate__custom strong { color: #7A4E24; }
.inq-estimate__legal { font-size: 12.5px; line-height: 1.55; color: color-mix(in srgb, var(--sec-fg) 58%, transparent); }
.inq-consent { display: flex; gap: 12px; align-items: flex-start; }
.inq-consent label { font-size: 14px; color: color-mix(in srgb, var(--sec-fg) 80%, transparent); cursor: pointer; }
.inq-check { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); flex: none; }

/* Success */
.inq-success { display: grid; justify-items: center; gap: 16px; text-align: center; padding: clamp(40px, 6vw, 80px) 0; }
.inq-success__mark { position: relative; width: 96px; height: 96px; color: var(--gold); }
.inq-success__mark svg { width: 100%; height: 100%; overflow: visible; }
.inq-success__circle {
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: draw-line 0.9s var(--ease-boutique) 0.1s forwards;
}
.inq-success__check {
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: draw-line 0.6s var(--ease-boutique) 0.85s forwards;
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }
.inq-success__rays { position: absolute; inset: 0; }
.inq-success__rays::before, .inq-success__rays::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 148px; height: 148px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  animation: rays-out 1.4s var(--ease-boutique) 1.2s forwards;
}
.inq-success__rays::after { width: 190px; height: 190px; animation-delay: 1.35s; }
@keyframes rays-out { 30% { opacity: 0.8; } to { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.inq-success__title { margin-top: 6px; }
.inq-success__sub { max-width: 52ch; }
.inq-success__mail { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: color-mix(in srgb, var(--sec-fg) 58%, transparent); }

@media (max-width: 640px) {
  .inq-card { padding: 20px 16px; }
  .inq-palettes { grid-template-columns: 1fr 1fr; }
  .inq-footer { flex-direction: column; align-items: stretch; }
  .inq-nav { width: 100%; justify-content: space-between; margin-left: 0; }
}
@media (max-width: 420px) { .inq-palettes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .inq-success__circle, .inq-success__check { animation: none; stroke-dashoffset: 0; }
  .inq-success__rays { display: none; }
}

/* ============================================================================
   18. Portal prototype — Client dashboard + Admin.
   Reuses the inquiry controls (.inq-*) and portal shell; adds the progress
   system, invoice states, stage timeline, tabs, and tables.
   Status colours: muted green = complete, gold = in progress, neutral =
   upcoming, dark navy = primary. No aggressive red.
   ========================================================================== */
:root {
  --ok-green: #5F7A5A;              /* refined muted green */
  --warn-amber: #8C5A2B;            /* warm amber for overdue — never red */
}

.portal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin-bottom: clamp(24px, 4vw, 44px); flex-wrap: wrap;
}
.portal-topbar__right { display: flex; align-items: center; gap: 20px; }
.portal-user { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: color-mix(in srgb, var(--gray) 62%, transparent); }
.portal-logout { background: none; border: 0; cursor: pointer; }

.portal-grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.portal-card h2.h-card { margin-bottom: 14px; }
.portal-card .eyebrow { display: block; margin-bottom: 12px; }

/* Invoice states */
.inv-none {
  display: flex; align-items: center; gap: 14px;
  color: var(--ok-green); font-size: 15.5px;
}
.inv-none__icon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--ok-green) 55%, transparent);
  border-radius: 50%;
}
.inv-none__icon svg { width: 16px; height: 16px; }
.inv-row {
  display: flex; align-items: center; gap: 16px 26px; flex-wrap: wrap;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 6%, transparent);
}
.inv-row + .inv-row { margin-top: 12px; }
.inv-row__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: color-mix(in srgb, var(--gray) 60%, transparent); }
.inv-row__amount { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--gray); }
.inv-row__meta { font-size: 13px; color: color-mix(in srgb, var(--gray) 65%, transparent); }
.inv-row .pill { margin-left: auto; padding: 14px 30px 16px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; border: 1px solid;
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill--paid, .status-pill--complete { color: var(--ok-green); border-color: color-mix(in srgb, var(--ok-green) 45%, transparent); }
.status-pill--due, .status-pill--progress { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.status-pill--processing { color: #5B7A99; border-color: color-mix(in srgb, #5B7A99 50%, transparent); }
.status-pill--overdue { color: var(--warn-amber); border-color: color-mix(in srgb, var(--warn-amber) 50%, transparent); }
.status-pill--upcoming { color: color-mix(in srgb, var(--gray) 55%, transparent); border-color: color-mix(in srgb, var(--gray) 25%, transparent); }

/* Overview grid */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 26px; }
.ov-item { display: grid; gap: 4px; }
.ov-item span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--gray) 55%, transparent); }
.ov-item strong { font-size: 15.5px; color: var(--gray); }

/* Progress ring + stages */
.prog-wrap { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 720px) { .prog-wrap { grid-template-columns: 1fr; justify-items: center; } }
.prog-ring { position: relative; width: 132px; height: 132px; }
.prog-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.prog-ring__track { fill: none; stroke: color-mix(in srgb, var(--gray) 12%, transparent); stroke-width: 6; }
.prog-ring__fill {
  fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 100; transition: stroke-dashoffset 1s var(--ease-boutique);
}
.prog-ring__num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--gray);
}
/* Stage JOURNEY — the status reads as a travelled path, not a flat list.
   A track line connects every stage node; the coloured line grows from the
   first node down to the current stage on load (--fill set inline by the
   dashboard script), each step slides in staggered, completed nodes carry a
   tick, and the current node breathes gently. */
.stage-journey { list-style: none; display: grid; gap: 2px; position: relative; --fill: 0; }
.stage-journey::before,
.stage-journey::after {
  content: ""; position: absolute; left: 8px; width: 2px; border-radius: 2px;
  top: 17px; bottom: 17px;
}
.stage-journey::before { background: color-mix(in srgb, var(--gray) 12%, transparent); }
.stage-journey::after {
  bottom: auto;
  height: calc((100% - 34px) * var(--fill));
  background: linear-gradient(180deg, var(--ok-green), var(--gold));
  transform: scaleY(0); transform-origin: top;
  animation: jline-grow 1.1s var(--ease-boutique) 0.35s forwards;
}
@keyframes jline-grow { to { transform: scaleY(1); } }

.jstep {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 8px 0; font-size: 14px; color: color-mix(in srgb, var(--gray) 55%, transparent);
  opacity: 0; transform: translateX(-8px);
  animation: jstep-in 0.5s var(--ease-boutique) forwards;
  animation-delay: calc(120ms + var(--i, 0) * 90ms);
}
@keyframes jstep-in { to { opacity: 1; transform: none; } }
.jstep__node {
  width: 18px; height: 18px; border-radius: 50%; flex: none; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid color-mix(in srgb, var(--gray) 28%, transparent);
  background: var(--arctic);
  color: transparent;
}
.jstep__node svg { width: 10px; height: 10px; }
.jstep--done { color: color-mix(in srgb, var(--gray) 82%, transparent); }
.jstep--done .jstep__node { background: var(--ok-green); border-color: var(--ok-green); color: var(--arctic); }
.jstep--current { color: var(--gray); font-weight: 600; }
.jstep--current .jstep__node {
  background: var(--gold); border-color: var(--gold); color: var(--royal);
  animation: jnode-breathe 2.4s var(--ease-standard) infinite;
}
@keyframes jnode-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 34%, transparent); }
  55%      { box-shadow: 0 0 0 7px transparent; }
}
.jstep__tag { margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
  .stage-journey::after { animation: none; transform: none; }
  .jstep { animation: none; opacity: 1; transform: none; }
  .jstep--current .jstep__node { animation: none; }
}

/* Working-on note */
.working-on {
  padding: clamp(18px, 2.4vw, 26px);
  border-left: 2px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
  border-radius: 0 12px 12px 0;
  font-size: 15.5px; line-height: 1.6; color: var(--gray);
}

/* Milestones + files */
.mile { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--sec-hair); align-items: baseline; flex-wrap: wrap; }
.mile:last-child { border-bottom: 0; }
.mile__title { font-weight: 600; color: var(--gray); }
.mile__date { font-family: var(--font-mono); font-size: 11.5px; color: color-mix(in srgb, var(--gray) 55%, transparent); }
.mile__desc { flex-basis: 100%; font-size: 13.5px; color: color-mix(in srgb, var(--gray) 65%, transparent); }
.file-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--sec-hair);
  font-size: 14.5px;
}
.file-row:last-child { border-bottom: 0; }
.file-row__kind { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.file-row__name { font-weight: 600; color: var(--gray); overflow-wrap: anywhere; }
.file-row a.ua { margin-left: auto; }

/* Support footer */
.portal-support { text-align: center; padding-block: clamp(20px, 3vw, 34px); }
.portal-support p { color: color-mix(in srgb, var(--gray) 70%, transparent); font-size: 15px; }

/* Prototype demo controls — deliberately discreet */
.proto-controls {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--gray) 45%, transparent);
}
.proto-controls button { background: none; border: 0; cursor: pointer; color: inherit; text-decoration: underline; text-underline-offset: 3px; font: inherit; padding: 6px; }
.proto-controls button:hover { color: var(--gold); }

/* Admin tabs + tables */
.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 30px); }
.admin-tab {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 11px 20px; min-height: 44px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--gray) 22%, transparent);
  background: transparent; color: color-mix(in srgb, var(--gray) 70%, transparent);
  transition: border-color var(--dur-hover), background var(--dur-hover), color var(--dur-hover);
}
.admin-tab[aria-selected="true"] { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gray); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th {
  text-align: left; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--gray) 52%, transparent);
  padding: 10px 12px; border-bottom: 1px solid var(--sec-hair);
}
.admin-table td { padding: 12px; border-bottom: 1px solid var(--sec-hair); vertical-align: middle; color: var(--gray); }
.admin-table .ua { font-size: 10px; }
.admin-tablewrap { overflow-x: auto; }
.admin-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.admin-form { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: end; }
.admin-form .inq-field--wide { grid-column: 1 / -1; }
.admin-select {
  font-family: var(--font-body); font-size: 15px; color: var(--gray);
  background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--gray) 26%, transparent);
  padding: 10px 2px; width: 100%; appearance: auto; cursor: pointer;
}
.admin-select:focus { outline: none; border-color: var(--gold); }
input.inq-range { accent-color: var(--gold); width: 100%; min-height: 34px; }

/* Payment success */
.pay-success { text-align: center; display: grid; justify-items: center; gap: 14px; padding: clamp(30px, 5vw, 60px) 0; }

/* ============================================================================
   20. Insights — the editorial knowledge landscape.
   Not a card grid: six art-directed research clusters (.iz), each laying its
   pieces on its own asymmetric 12-track composition. Formats mix framed
   anchor panels, uncontained statistics, quotes set straight on the page,
   numbered findings, editorial notes, typographic interludes and expandable
   research blocks. DOM order IS the mobile sequence; the desktop layout is
   placement only, so the two can differ without duplicate markup, and grid
   flow guarantees nothing can overlap at any width.
   ========================================================================== */
.iz { padding-block: clamp(40px, 5.5vw, 84px); }
.iz__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(28px, 3.6vw, 50px); }
.iz__no { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--gold); }
.iz__title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--sec-display); }
.iz__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--sec-hair), transparent); }

.iz__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(30px, 3.6vw, 54px) clamp(20px, 2.6vw, 40px);
  align-items: start;
}

/* --- sources: refined editorial annotations -------------------------------- */
.src {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; line-height: 1.5;
  color: color-mix(in srgb, var(--sec-fg) 55%, transparent);
  transition: color 0.35s var(--ease-boutique);
}
.src::before { content: "· "; color: var(--gold); }
:where(.stat-solo, .strip, .finding, .fact-banner, .xp):hover .src { color: color-mix(in srgb, var(--sec-fg) 82%, transparent); }

/* --- anchor panels — one per cluster, each treated differently -------------- */
.big-stat { border-radius: var(--radius-img); padding: clamp(26px, 3.6vw, 54px); display: grid; gap: clamp(12px, 1.6vw, 20px); align-content: start; }
.big-stat__kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-lift); }
.big-stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(76px, 9.5vw, 148px); line-height: 0.88; letter-spacing: -0.035em; }
.big-stat__num sup { font-size: 0.4em; vertical-align: super; color: var(--gold-lift); }
.big-stat__claim { font-family: var(--font-display); font-size: clamp(17px, 1.9vw, 24px); line-height: 1.3; letter-spacing: -0.01em; max-width: 30ch; }
.big-stat--blue {
  background: radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--gold) 11%, transparent), transparent 55%), var(--dark-green);
  color: var(--arctic);
}
.big-stat--navy {
  background: radial-gradient(120% 130% at 0% 100%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 55%), var(--royal);
  color: var(--arctic);
}
.big-stat--blue .big-stat__claim, .big-stat--navy .big-stat__claim { color: color-mix(in srgb, var(--arctic) 92%, transparent); }
.big-stat--blue .src, .big-stat--navy .src {
  color: color-mix(in srgb, var(--arctic) 58%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--arctic) 14%, transparent); padding-top: 12px;
}
.big-stat--frame { background: transparent; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); color: var(--sec-display); }
.big-stat--frame .big-stat__kicker { color: var(--gold); }
.big-stat--frame .big-stat__num sup { color: var(--gold); }
.big-stat--frame .big-stat__claim { color: color-mix(in srgb, var(--sec-fg) 85%, transparent); }

/* --- uncontained statistics -------------------------------------------------- */
.stat-solo { display: grid; gap: 8px; }
.stat-solo__num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(44px, 5vw, 76px); line-height: 0.92; letter-spacing: -0.03em;
  color: var(--sec-display);
  transition: color 0.45s var(--ease-boutique);
}
.stat-solo:hover .stat-solo__num { color: color-mix(in srgb, var(--sec-display) 72%, var(--gold)); }
.stat-solo__unit { font-size: 0.5em; color: var(--gold); }
.stat-solo__body { font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--sec-fg) 78%, transparent); max-width: 34ch; }
.stat-solo--lg .stat-solo__num { font-size: clamp(60px, 7.4vw, 112px); }

/* --- narrow research strip ----------------------------------------------------- */
.strip { border-left: 2px solid var(--gold); padding-left: clamp(16px, 1.8vw, 24px); display: grid; gap: 8px; }
.strip__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: -0.02em; color: var(--sec-display); }
.strip__body { font-size: 13.5px; line-height: 1.55; color: color-mix(in srgb, var(--sec-fg) 76%, transparent); max-width: 40ch; }

/* --- horizontal fact banner ------------------------------------------------------ */
.fact-banner {
  display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); flex-wrap: wrap;
  border-top: 1px solid var(--sec-hair); border-bottom: 1px solid var(--sec-hair);
  padding: clamp(16px, 2vw, 26px) 4px;
}
.fact-banner__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 4.4vw, 64px); letter-spacing: -0.02em; color: var(--gold); line-height: 1; }
.fact-banner__body { flex: 1 1 240px; font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--sec-fg) 80%, transparent); max-width: 46ch; }
.fact-banner .src { flex: 0 1 auto; }

/* --- editorial quotes: typography carries them, no boxes, no quote marks --------- */
.iq { margin: 0; display: grid; gap: 12px; }
.iq__text {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(24px, 2.8vw, 40px); line-height: 1.16; letter-spacing: -0.02em;
  color: var(--sec-display); max-width: 24ch;
}
.iq__cite { font-family: var(--font-mono); font-style: normal; font-size: 11px; letter-spacing: 0.08em; color: color-mix(in srgb, var(--sec-fg) 58%, transparent); }
.iq__cite::before { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--gold); vertical-align: middle; margin-right: 10px; }
.iq--sm .iq__text { font-size: clamp(19px, 2.1vw, 28px); max-width: 36ch; }
.iq--giant .iq__text { font-size: clamp(30px, 4vw, 56px); max-width: 18ch; }
.iq--right { justify-items: end; text-align: right; }
.iq--right .iq__text { max-width: 22ch; }

/* --- numbered findings ------------------------------------------------------------- */
.finding { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--sec-hair); position: relative; }
.finding::before { content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 2px; background: var(--gold); }
.finding__num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.2em; color: var(--gold); }
.finding__text { font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.3; letter-spacing: -0.01em; color: var(--sec-display); max-width: 30ch; }

/* --- SmallPie editorial notes: clearly ours, never dressed as research --------------- */
.ed-note { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: color-mix(in srgb, var(--sec-fg) 82%, transparent); max-width: 52ch; }
.ed-note__tag { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }

/* --- typographic interludes: an oversized pause between dense clusters --------------- */
.interlude { padding-block: clamp(34px, 5.4vw, 88px); }
.interlude__text {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -0.03em;
  color: var(--sec-display); max-width: 16ch;
}
.interlude__tag { display: inline-block; margin-top: 16px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 55%, transparent); }
.interlude--right { text-align: right; }
.interlude--right .interlude__text { margin-left: auto; }

/* --- vertical label (cluster 02) ------------------------------------------------------- */
.vlabel {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  color: color-mix(in srgb, var(--sec-fg) 45%, transparent);
  justify-self: center; align-self: start;
}

/* --- expandable research blocks ----------------------------------------------------------
   Same choreography as the rest of the site: the panel's height animates via
   grid-template-rows, so everything below reflows smoothly with it. */
.xp { border-top: 1px solid var(--sec-hair); border-bottom: 1px solid var(--sec-hair); padding: clamp(16px, 2vw, 24px) 2px; display: grid; gap: 8px; align-content: start; }
.xp--bare { border: 0; padding: 0; }
.xp__kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.xp__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 1.8vw, 23px); letter-spacing: -0.015em; line-height: 1.2; color: var(--sec-display); }
.xp__body { font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--sec-fg) 80%, transparent); max-width: 56ch; }
.xp__toggle { justify-self: start; margin-top: 2px; }
.xp__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s var(--ease-boutique); }
.xp__panel > div { overflow: hidden; }
.xp.is-open .xp__panel { grid-template-rows: 1fr; }
.xp__panel .xp__body { padding-top: 10px; }
/* Contain the toggle's travelling arrow inside the block */
.xp .ua:hover::before, .xp .ua:focus-visible::before { right: -16px; }
.xp .ua:hover::after,  .xp .ua:focus-visible::after  { right: -20px; }
@media (prefers-reduced-motion: reduce) { .xp__panel { transition: none; } }

/* ---- cluster compositions (desktop): six different asymmetric placements ---- */
@media (min-width: 1101px) {
  /* 01 · Speed — blue anchor left, satellite stack right, banner beneath */
  .iz--speed .iz-anchor { grid-column: 1 / 8; grid-row: 1 / 3; }
  .iz--speed .iz-a { grid-column: 9 / 13; grid-row: 1; align-self: end; }
  .iz--speed .iz-b { grid-column: 9 / 13; grid-row: 2; }
  .iz--speed .iz-a, .iz--speed .iz-b { border-left: 1px solid var(--sec-hair); padding-left: clamp(16px, 2vw, 28px); }
  .iz--speed .iz-c { grid-column: 1 / 9;  grid-row: 3; }
  .iz--speed .iz-d { grid-column: 9 / 13; grid-row: 3; }
  .iz--speed .iz-e { grid-column: 1 / 7;  grid-row: 4; align-self: center; }
  .iz--speed .iz-f { grid-column: 7 / 13; grid-row: 4; }

  /* 02 · First impressions — navy anchor right, vertical label in the gutter */
  .iz--trust .iz__grid { grid-template-columns: repeat(5, 1fr) 44px repeat(6, 1fr); }
  .iz--trust .iz-anchor { grid-column: 7 / 13; grid-row: 1 / 3; }
  .iz--trust .iz-vlabel { grid-column: 6 / 7; grid-row: 1 / 3; }
  .iz--trust .iz-a { grid-column: 1 / 6; grid-row: 1; }
  .iz--trust .iz-b { grid-column: 1 / 5; grid-row: 2; align-self: end; }
  .iz--trust .iz-c { grid-column: 1 / 7; grid-row: 3; }
  .iz--trust .iz-d { grid-column: 7 / 13; grid-row: 3; }
  .iz--trust .iz-e { grid-column: 4 / 13; grid-row: 4; }

  /* 03 · Attention — three numbered findings, a wide quote riding right */
  .iz--attn .iz-a { grid-column: 1 / 5;  grid-row: 1; }
  .iz--attn .iz-b { grid-column: 5 / 9;  grid-row: 1; }
  .iz--attn .iz-c { grid-column: 9 / 13; grid-row: 1; }
  .iz--attn .iz-d { grid-column: 1 / 5;  grid-row: 2; align-self: center; }
  .iz--attn .iz-e { grid-column: 5 / 13; grid-row: 2; justify-self: end; }

  /* 04 · Reach & access — the immersive dark band, three numbers abreast */
  .iz--access .iz-a { grid-column: 1 / 5;  grid-row: 1; }
  .iz--access .iz-b { grid-column: 5 / 9;  grid-row: 1; }
  .iz--access .iz-c { grid-column: 9 / 13; grid-row: 1; }
  .iz--access .iz-b, .iz--access .iz-c { border-left: 1px solid var(--sec-hair); padding-left: clamp(16px, 2vw, 28px); }
  .iz--access .iz-d { grid-column: 1 / 9;  grid-row: 2; align-self: center; }
  .iz--access .iz-e { grid-column: 9 / 13; grid-row: 2; }

  /* 05 · Conversion — framed anchor left, evidence stacked right */
  .iz--convert .iz-anchor { grid-column: 1 / 6; grid-row: 1 / 4; }
  .iz--convert .iz-a { grid-column: 7 / 10;  grid-row: 1; }
  .iz--convert .iz-b { grid-column: 10 / 13; grid-row: 1; }
  .iz--convert .iz-c { grid-column: 7 / 13;  grid-row: 2; }
  .iz--convert .iz-d { grid-column: 7 / 13;  grid-row: 3; }

  /* 06 · Brand — a giant quote, quiet numbers, a calm close */
  .iz--brand .iz-a { grid-column: 1 / 9;   grid-row: 1; }
  .iz--brand .iz-b { grid-column: 10 / 13; grid-row: 1; align-self: end; }
  .iz--brand .iz-c { grid-column: 10 / 13; grid-row: 2; }
  .iz--brand .iz-d { grid-column: 1 / 8;   grid-row: 2; align-self: end; }
}

/* ---- tablet (761-1100): intentional two-across editorial, anchors full width ---- */
@media (min-width: 761px) and (max-width: 1100px) {
  .iz__grid { grid-template-columns: repeat(6, 1fr); }
  .iz__grid > * { grid-column: span 3; }
  .iz-anchor, .iq, .fact-banner, .ed-note, .interlude__text { grid-column: 1 / -1; }
  .iz-vlabel { display: none; }
}

/* ---- mobile (≤760): a single editorial sequence in DOM order ---- */
@media (max-width: 760px) {
  .iz__grid { grid-template-columns: 1fr; gap: clamp(30px, 8vw, 42px); }
  .iz-vlabel { display: none; }
  .iq--right { justify-items: start; text-align: left; }
  .interlude--right { text-align: left; }
  .interlude--right .interlude__text { margin-left: 0; }
}

/* ============================================================================
   21. Portal status system — functional colour coding (portals only).
   The marketing site stays tightly controlled; the portals prioritise clarity:
   green = complete/paid/active · yellow = pending/upcoming · orange = action
   needed/due soon · muted red = overdue/failed (portals only, used sparingly) ·
   blue = active progress/informational · grey = inactive/archived.
   All tones muted — nothing neon.
   ========================================================================== */
:root {
  --st-green:  #5F7A5A;
  --st-yellow: #A8892E;
  --st-orange: #B5723A;
  --st-red:    #A64B3C;
  --st-blue:   #5B7A99;
  --st-grey:   color-mix(in srgb, #0A1826 45%, transparent);
}
.status-pill--paid, .status-pill--complete, .status-pill--active { color: var(--st-green); border-color: color-mix(in srgb, var(--st-green) 45%, transparent); }
.status-pill--due, .status-pill--pending, .status-pill--upcoming { color: var(--st-yellow); border-color: color-mix(in srgb, var(--st-yellow) 50%, transparent); }
.status-pill--attention { color: var(--st-orange); border-color: color-mix(in srgb, var(--st-orange) 50%, transparent); }
.status-pill--overdue, .status-pill--failed { color: var(--st-red); border-color: color-mix(in srgb, var(--st-red) 50%, transparent); }
.status-pill--processing, .status-pill--progress { color: var(--st-blue); border-color: color-mix(in srgb, var(--st-blue) 50%, transparent); }
.status-pill--inactive { color: var(--st-grey); border-color: color-mix(in srgb, var(--gray) 25%, transparent); }

/* Client access / password panel (admin) */
.access-panel {
  display: grid; gap: 14px;
  margin-top: 10px; padding: clamp(14px, 2vw, 20px);
  border: 1px dashed color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 12px;
}
.access-panel__row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.access-panel__pw {
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.06em;
  padding: 9px 14px; border: 1px solid var(--sec-hair); border-radius: 8px;
  background: color-mix(in srgb, var(--gray) 3%, transparent);
  min-width: 200px; color: var(--gray);
}
.access-panel__note { font-size: 12.5px; color: color-mix(in srgb, var(--gray) 60%, transparent); }
.access-panel .ua { font-size: 10px; }
.access-panel__msg { font-family: var(--font-mono); font-size: 11.5px; color: var(--st-green); min-height: 1em; }

/* Mobile portals: tables become readable cards */
@media (max-width: 700px) {
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tr {
    border: 1px solid var(--sec-hair); border-radius: 12px;
    padding: 12px 14px; margin-bottom: 12px;
  }
  .admin-table td { border: 0; padding: 6px 0; }
  .admin-table td[data-th]::before {
    content: attr(data-th);
    display: block;
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--gray) 50%, transparent);
    margin-bottom: 2px;
  }
  .inv-row .pill { margin-left: 0; width: 100%; justify-content: center; }
  .portal-topbar__right { width: 100%; justify-content: space-between; }
}

/* ============================================================================
   22. Journal — four expandable research cards (home).
   Read more transitions the IMAGE area into a navy or light-blue information
   panel (no flip, no 3D). Content stays fully contained in the card.
   ========================================================================== */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
}
@media (max-width: 1000px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .journal-grid { grid-template-columns: 1fr; } }

/* Journal cards inside the horizontal pinned track (desktop). Fixed width so
   the scroll-lock travel is stable; on mobile the gallery stacks (rules below). */
.gallery-track .jcard { flex: 0 0 min(390px, 82vw); align-content: start; }
.gallery-track .jcard .jcard__media { aspect-ratio: 5 / 4; }

.jcard { display: grid; gap: 14px; align-content: start; }
.jcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-img);
  overflow: hidden;
  background: color-mix(in srgb, var(--gray) 8%, transparent);
}
.jcard__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Slow, unhurried scale + darken — editorial, not flashy. */
  transition: transform 1.2s var(--ease-boutique), filter 1s var(--ease-boutique);
}
.jcard:hover .jcard__media img { transform: scale(1.03); }
.jcard.is-open .jcard__media img { filter: brightness(0.32) saturate(0.7); transform: scale(1.06); }

/* The reveal panel that the image becomes. Panel fades first, then its content
   rises in with a gentle stagger for an editorial feel. */
.jcard__reveal {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: clamp(18px, 2vw, 26px);
  color: var(--arctic);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.75s var(--ease-boutique), visibility 0s 0.75s;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.jcard--navy .jcard__reveal { background: color-mix(in srgb, var(--royal) 95%, transparent); }
.jcard--blue .jcard__reveal { background: color-mix(in srgb, var(--dark-green) 95%, transparent); }
.jcard.is-open .jcard__reveal { opacity: 1; visibility: visible; transition: opacity 0.75s var(--ease-boutique), visibility 0s 0s; }
.jcard__reveal > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease-boutique), transform 0.7s var(--ease-boutique);
}
.jcard.is-open .jcard__reveal > * { opacity: 1; transform: none; }
.jcard.is-open .jcard__reveal > *:nth-child(1) { transition-delay: 0.18s; }
.jcard.is-open .jcard__reveal > *:nth-child(2) { transition-delay: 0.30s; }
.jcard.is-open .jcard__reveal > *:nth-child(3) { transition-delay: 0.42s; }
.jcard__reveal p { font-size: 13.5px; line-height: 1.55; color: color-mix(in srgb, var(--arctic) 88%, transparent); }
.jcard__reveal ul { list-style: none; display: grid; gap: 7px; }
.jcard__reveal li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.45; color: color-mix(in srgb, var(--arctic) 88%, transparent); }
.jcard__reveal li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-lift); }
.jcard__source {
  margin-top: auto;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--arctic) 60%, transparent);
  padding-top: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .jcard__reveal, .jcard__reveal > * { transition: none; }
}
/* Mobile: journal cards become swipe-carousel slides (see section 11) —
   fixed slide width with the next card peeking in, snap-aligned. */
@media (max-width: 900px) {
  .gallery-track .jcard { flex: 0 0 min(300px, 76vw); scroll-snap-align: start; }
  .gallery-track .jcard .jcard__media { aspect-ratio: 4 / 5; max-width: none; }
}
.jcard__eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.jcard__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 1.7vw, 22px); color: var(--sec-display); letter-spacing: -0.015em; line-height: 1.2; }
.jcard__body { font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--sec-fg) 76%, transparent); }
.jcard__toggle { justify-self: start; }


/* ============================================================================
   24. Work — editorial case zones.
   The Work page reuses the Insights landscape system (.iz / .iz__head /
   .iz__grid): every project is a numbered cluster with its own asymmetric
   placement, mixing imagery, uncontained titles, a supporting outcome
   statistic and an expandable story (.xp). Same rules as Insights: DOM order
   is the mobile sequence, grid flow prevents overlap at any width.
   ========================================================================== */
.wk-media { border-radius: var(--radius-img); overflow: hidden; margin: 0; background: color-mix(in srgb, var(--sec-fg) 6%, transparent); }
.wk-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease-boutique); }
.wk-media:hover img { transform: scale(1.035); }
.wk-media--tall   { aspect-ratio: 4 / 5; }
.wk-media--wide   { aspect-ratio: 16 / 10; }
.wk-media--square { aspect-ratio: 1 / 1; }
.wk-media--band   { aspect-ratio: 16 / 7; }

.izw-head { display: grid; gap: 12px; align-content: start; }
.wk-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 3.6vw, 54px); letter-spacing: -0.025em; line-height: 1.02;
  color: var(--sec-display);
}
.wk-title--giant { font-size: clamp(40px, 6vw, 88px); }
.wk-body { font-size: 15px; line-height: 1.6; color: color-mix(in srgb, var(--sec-fg) 80%, transparent); max-width: 44ch; }
.wk-actions { display: flex; align-items: baseline; gap: 14px 32px; flex-wrap: wrap; margin-top: 2px; }

/* External "visit" pill — same containment rules as everywhere else: the
   inline arrow nudges 2px inside its own padding, never past the border. */
.wk-ext {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold);
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  transition: background var(--dur-hover) var(--ease-glide), border-color var(--dur-hover), color var(--dur-hover);
  text-decoration: none;
}
.wk-ext svg { width: 12px; height: 12px; transition: transform var(--dur-hover) var(--ease-glide); }
.wk-ext:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: var(--gold); }
.wk-ext:hover svg { transform: translate(2px, -2px); }

.wk-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.wk-list li {
  font-size: 13.5px; line-height: 1.5;
  color: color-mix(in srgb, var(--sec-fg) 78%, transparent);
  padding-left: 16px; position: relative;
}
.wk-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 1.5px; background: var(--gold); }

/* Navy case panel (Ops Dashboard) — the one framed exception in the flow */
.wk-panel {
  border-radius: var(--radius-img);
  padding: clamp(24px, 3vw, 44px);
  background: radial-gradient(120% 130% at 0% 100%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 55%), var(--royal);
  color: var(--arctic);
  display: grid; gap: 14px; align-content: start;
}
.wk-panel .wk-title { color: var(--arctic); }
.wk-panel .wk-body { color: color-mix(in srgb, var(--arctic) 84%, transparent); }
.wk-panel .stat-solo__num { color: var(--arctic); }
.wk-panel .stat-solo__body { color: color-mix(in srgb, var(--arctic) 74%, transparent); }
.wk-panel .src { color: color-mix(in srgb, var(--arctic) 58%, transparent); }
.wk-panel .wk-list li { color: color-mix(in srgb, var(--arctic) 78%, transparent); }
.wk-panel .xp { border-color: color-mix(in srgb, var(--arctic) 16%, transparent); }
.wk-panel .xp__title { color: var(--arctic); }
.wk-panel .xp__body { color: color-mix(in srgb, var(--arctic) 80%, transparent); }
.wk-panel .ua { color: var(--arctic); }
.wk-panel .wk-ext { color: var(--gold-lift); border-color: color-mix(in srgb, var(--gold-lift) 45%, transparent); }

/* Mid-page contact band between cases */
.wk-cta { padding-block: clamp(40px, 5.5vw, 76px); }
.wk-cta__row { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap; }

/* The insight break's inline "All Insights" link keeps its arrow contained */
.fact-banner .ua:hover::before, .fact-banner .ua:focus-visible::before { right: -16px; }
.fact-banner .ua:hover::after,  .fact-banner .ua:focus-visible::after  { right: -20px; }

/* ---- case compositions (desktop): seven placements, no two alike ---- */
@media (min-width: 1101px) {
  .izw--a .izw-media { grid-column: 7 / 13; grid-row: 1 / 3; }
  .izw--a .izw-head  { grid-column: 1 / 6;  grid-row: 1; }
  .izw--a .izw-xp    { grid-column: 1 / 6;  grid-row: 2; align-self: end; }

  .izw--b .izw-media { grid-column: 1 / 8;  grid-row: 1 / 4; }
  .izw--b .izw-head  { grid-column: 9 / 13; grid-row: 1; }
  .izw--b .izw-stat  { grid-column: 9 / 13; grid-row: 2; }
  .izw--b .izw-xp    { grid-column: 9 / 13; grid-row: 3; align-self: end; }

  .izw--c .izw-media { grid-column: 1 / 6;  grid-row: 1 / 3; }
  .izw--c .izw-head  { grid-column: 7 / 13; grid-row: 1; }
  .izw--c .izw-xp    { grid-column: 7 / 13; grid-row: 2; align-self: end; }

  .izw--d .izw-media { grid-column: 8 / 13; grid-row: 1 / 3; }
  .izw--d .izw-head  { grid-column: 1 / 7;  grid-row: 1; }
  .izw--d .izw-xp    { grid-column: 1 / 7;  grid-row: 2; align-self: end; }

  .izw--e .izw-panel { grid-column: 1 / 7;  grid-row: 1; }
  .izw--e .izw-media { grid-column: 7 / 13; grid-row: 1; align-self: center; }

  .izw--f .izw-title { grid-column: 1 / 13; grid-row: 1; }
  .izw--f .izw-media { grid-column: 6 / 13; grid-row: 2 / 4; }
  .izw--f .izw-head  { grid-column: 1 / 6;  grid-row: 2; }
  .izw--f .izw-xp    { grid-column: 1 / 6;  grid-row: 3; align-self: end; }

  .izw--g .izw-media { grid-column: 1 / 13; grid-row: 1; }
  .izw--g .izw-head  { grid-column: 1 / 8;  grid-row: 2; }
  .izw--g .izw-stat  { grid-column: 8 / 13; grid-row: 2; border-left: 1px solid var(--sec-hair); padding-left: clamp(16px, 2vw, 28px); }
  .izw--g .izw-xp    { grid-column: 8 / 13; grid-row: 3; }
}

/* ---- tablet: imagery and heads full width, satellites two-across ---- */
@media (min-width: 761px) and (max-width: 1100px) {
  .izw-media, .izw-head, .izw-panel, .izw-title { grid-column: 1 / -1; }
}


/* ============================================================================
   25. Inside — studio zones.
   The Inside page joins the editorial landscape system (.iz): the story is an
   asymmetric cluster with a sourced statistic, the team is a staggered trio
   (two horizontal cards offset around one vertical), the process pairs an
   intro column with the accordion, and cross-page CTAs are woven between the
   zones the same way the insight breaks work on the Work page.
   ========================================================================== */

/* Team member — sec-var driven so it works on the deep-blue band. Photos
   show the FULL image: supporting cards render at the photo's own natural
   ratio (no crop at all), and the lead column is sized so Ivan's tall 1:2
   portrait fills it near-natively, anchored to the top so heads never clip. */
.tm { display: grid; grid-template-columns: minmax(110px, 140px) 1fr; align-items: start; column-gap: clamp(16px, 2vw, 26px); row-gap: 12px; }
.tm__photo { border-radius: var(--radius-img); overflow: hidden; background: color-mix(in srgb, var(--sec-fg) 8%, transparent); }
.tm__photo img { width: 100%; height: auto; display: block; transition: transform 1s var(--ease-boutique); }
.tm:hover .tm__photo img { transform: scale(1.03); }
.tm__text { display: grid; gap: 7px; align-content: start; }
.tm__role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sec-accent); }
.tm__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.02em; line-height: 1.05; color: var(--sec-display); }
.tm__bio { font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--sec-fg) 78%, transparent); max-width: 46ch; }
/* The lead card: more presence in type */
.tm--feature .tm__name { font-size: clamp(26px, 2.8vw, 38px); }

/* ---- inside compositions (desktop) ---- */
@media (min-width: 1101px) {
  /* 02 · The people — Ivan is the tall lead column on the left; Anna and
     Kate stack on the right. Ivan spans both of their grid rows and
     stretches, so his card height IS their combined height, always. */
  .izt-a { grid-column: 1 / 7;  grid-row: 1 / 3; align-self: stretch; }
  .izt-b { grid-column: 7 / 13; grid-row: 1; }
  .izt-c { grid-column: 7 / 13; grid-row: 2; }
  .tm--feature { grid-template-columns: minmax(220px, 258px) 1fr; }
  /* The image is absolutely positioned so its huge intrinsic height can't
     inflate the grid tracks — the pair's content alone sizes the rows, and
     Ivan's frame fills exactly their combined height. */
  .tm--feature .tm__photo { position: relative; height: 100%; min-height: 340px; }
  .tm--feature .tm__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }

  /* 03 · Process — intro column beside the accordion */
  .izp-intro { grid-column: 1 / 5;  grid-row: 1; }
  .izp-acc   { grid-column: 5 / 13; grid-row: 1; }

  /* Research nudge row — quote left, link riding the right edge */
  .izq-a { grid-column: 1 / 8;  grid-row: 1; }
  .izq-b { grid-column: 9 / 13; grid-row: 1; align-self: end; justify-self: end; }
}

/* ---- tablet: intro, accordion and member cards full width ---- */
@media (min-width: 761px) and (max-width: 1100px) {
  .izp-intro, .izp-acc, .tm, .izq-a { grid-column: 1 / -1; }
}


/* ============================================================================
   26. Work — experience-driven case studies.
   Each project is its own small interactive experience with a distinct layout
   and interaction, so the page reads as a curated showcase of how SmallPie
   thinks, not a uniform list. Shared shell (.case) + per-project stages (.fx-*)
   + editorial interstitials (.eco / .principles / .industries). Cover images
   stay on placeholders; every .case__cover is a swap-ready figure.
   ========================================================================== */

/* ---- shared case shell ---- */
.case { padding-block: clamp(44px, 6vw, 86px); }
.case__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(20px, 3vw, 34px); }
.case__no { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; color: var(--gold); }
.case__kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--sec-display); }
.case__line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--sec-hair), transparent); }
/* minmax(0,…) not 1fr: a bare 1fr floors at auto, so a wide child (the Te Awa
   listings rail) inflates its track past the container instead of scrolling. */
.case__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px) clamp(20px, 2.6vw, 40px); align-items: start; }
.case__grid > * { min-width: 0; }
.case__intro { display: grid; gap: 12px; align-content: start; }
.case__title { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; line-height: 1; font-size: clamp(34px, 5vw, 66px); color: var(--sec-display); }
.case__title--giant { font-size: clamp(42px, 7vw, 92px); }
.case__body { font-size: 15.5px; line-height: 1.6; color: color-mix(in srgb, var(--sec-fg) 82%, transparent); max-width: 46ch; }
.case__meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 55%, transparent); }
.case__cover { border-radius: var(--radius-img); overflow: hidden; margin: 0; background: color-mix(in srgb, var(--sec-fg) 6%, transparent); }
.case__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease-boutique); }
.case__cover:hover img { transform: scale(1.03); }
.case__cover--tall { aspect-ratio: 4 / 5; }
.case__cover--wide { aspect-ratio: 16 / 10; }
.case__cover--band { aspect-ratio: 16 / 7; }

/* outcome number (count-up) */
.outcome { display: grid; gap: 6px; }
.outcome__num { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; line-height: .9; font-size: clamp(44px, 5.5vw, 78px); color: var(--sec-display); font-variant-numeric: tabular-nums; }
.outcome__num .u { font-size: .48em; color: var(--gold); letter-spacing: 0; }
.outcome__label { font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--sec-fg) 76%, transparent); max-width: 32ch; }
.outcome__src { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; color: color-mix(in srgb, var(--sec-fg) 50%, transparent); }

/* small stage caption shared by interactive widgets */
.fx-cap { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.fx-cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.fx-hint { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: color-mix(in srgb, var(--sec-fg) 52%, transparent); margin-top: 12px; }
.sec--royal .fx-hint, .sec--green .fx-hint { color: color-mix(in srgb, var(--arctic) 55%, transparent); }

/* generic interactive panel surface */
.fx-panel { border: 1px solid var(--sec-hair); border-radius: 16px; padding: clamp(18px, 2.4vw, 30px); background: color-mix(in srgb, var(--sec-fg) 2.5%, transparent); }
.sec--royal .fx-panel, .sec--green .fx-panel { border-color: color-mix(in srgb, var(--arctic) 16%, transparent); background: color-mix(in srgb, var(--arctic) 5%, transparent); }

/* ---- 01 · FRØST — shop: product tiles + palette + cart micro ---- */
.fx-shop__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fx-tile { border: 1px solid var(--sec-hair); border-radius: 12px; overflow: hidden; background: var(--sec-bg); text-align: left; cursor: pointer; padding: 0; font: inherit; color: inherit; transition: transform .4s var(--ease-boutique), border-color .4s, box-shadow .4s; }
.fx-tile:hover, .fx-tile:focus-visible { transform: translateY(-5px); border-color: color-mix(in srgb, var(--gold) 45%, transparent); box-shadow: 0 18px 34px -26px rgba(10,24,38,.6); }
.fx-tile__swatch { height: 88px; }
.fx-tile__b { padding: 11px 13px 13px; display: grid; gap: 3px; }
.fx-tile__name { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -.01em; color: var(--sec-display); }
.fx-tile__price { font-family: var(--font-mono); font-size: 11.5px; color: var(--gold); letter-spacing: .04em; }
.fx-tile__add { margin-top: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--sec-fg); border: 1px solid var(--sec-hair); border-radius: 999px; padding: 5px 0; text-align: center; transition: background .3s, color .3s, border-color .3s; }
.fx-tile.is-added .fx-tile__add { background: var(--gold); color: var(--royal); border-color: var(--gold); }
.fx-shop__cart { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sec-hair); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--sec-fg); }
.fx-shop__cart b { color: var(--gold); font-weight: 600; }
.fx-palette { display: flex; gap: 8px; margin-top: 14px; }
.fx-palette span { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--sec-hair); }

/* ---- 02 · FAANZ — load-time race ---- */
.fx-race { display: grid; gap: 16px; }
.fx-race__replay { margin-top: 4px; justify-self: start; }

/* The pour — two crystal glasses fill with red wine; the faster site fills
   first. Glass geometry + wine are built by work-experiences.js. A little
   theatre for an executive, old-money feel; still honest about the numbers. */
/* ---- Shared glass strokes. Used by the Harbour & Vine tasting table
   (tastingGlassSVG). These lived with the old FAANZ wine block; they are kept
   here because the tasting glasses still reference them. ---- */
.wine-outline { stroke: currentColor; stroke-opacity: .48; }
.wine-rim { stroke: var(--gold); }

/* ---- FAANZ · the runway ---------------------------------------------------
   Two lanes, two aircraft, the same load times the wine glasses used to carry.
   The transform is a single ease-in transition: X accelerates like a take-off
   roll, and because Y and the rotation ease on the same curve the aircraft
   stays flat down the runway and only rotates into the climb at the end. ---- */

.fx-runway-panel { color: color-mix(in srgb, var(--sec-fg) 46%, transparent); }
.fx-runway { display: grid; gap: clamp(14px, 2.2vw, 24px); padding: 10px 0 4px; }

.plane-lane { display: grid; gap: 7px; --craft-w: clamp(64px, 10vw, 96px); }
.plane-lane__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.plane-lane__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--sec-fg) 58%, transparent); transition: color .4s var(--ease-glide);
  display: inline-flex; align-items: center; gap: 8px;
}
.plane-lane__time {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(21px, 2.3vw, 30px);
  letter-spacing: -.02em; color: var(--sec-display); font-variant-numeric: tabular-nums;
}

/* the strip is the runway; the aircraft flies out of its top edge on lift off */
.plane-lane__strip {
  position: relative; height: clamp(56px, 8vw, 76px);
  border-bottom: 1px solid color-mix(in srgb, var(--sec-fg) 20%, transparent);
}
.plane-lane__marks {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--sec-fg) 42%, transparent) 0 18px,
    transparent 18px 32px);
}

/* The roll used to animate `left` and the trail used to animate `width`. Both
   are layout properties, so every frame of the take-off forced a reflow. They
   are transforms now, which the compositor can handle on its own thread, and
   the whole sequence is keyframed rather than transitioned so the aircraft can
   roll flat, rotate, and only then climb. */

/* full strip width, so a percentage translate resolves against the runway and
   not against the aircraft's own 96px */
.plane-lane__track {
  position: absolute; left: 0; right: 0; bottom: 2px;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.plane-lane.is-flown .plane-lane__track {
  animation: plane-roll var(--roll, 2.4s) cubic-bezier(.5, 0, .78, .36) forwards;
}
@keyframes plane-roll { to { transform: translate3d(var(--run, 72%), 0, 0); } }

/* rotation happens about the main gear, which is where a real aircraft pivots */
.plane-lane__craft {
  display: block; width: var(--craft-w);
  transform-origin: 45% 80%;   /* the main gear, which is where an aircraft pivots */
  transform: translate3d(0, 0, 0) rotate(0deg);
  will-change: transform;
}
.plane-lane.is-flown .plane-lane__craft {
  animation: plane-lift var(--roll, 2.4s) linear forwards;
}
@keyframes plane-lift {
  0%, 64%  { transform: translate3d(0, 0, 0) rotate(0deg);
             animation-timing-function: cubic-bezier(.3, 0, .38, 1); }
  79%      { transform: translate3d(0, -9%, 0) rotate(-12deg);
             animation-timing-function: cubic-bezier(.38, 0, .72, .78); }
  100%     { transform: translate3d(0, -130%, 0) rotate(-17deg); }
}

.plane-lane__craft svg { width: 100%; height: auto; display: block; }
.plane-body    { fill: var(--sec-display); }
.plane-wing    { fill: var(--sec-display); }
.plane-gear    { fill: var(--sec-display); }
/* a few percent off the fuselage: enough to separate the pod and the tailplane
   at 96px without drawing an outline around either */
.plane-nacelle { fill: color-mix(in srgb, var(--sec-display) 92%, var(--sec-bg)); }
.plane-tail    { fill: color-mix(in srgb, var(--sec-display) 86%, var(--sec-bg)); }
.plane-fin     { fill: var(--sec-accent); }
.plane-win     { fill: var(--sec-bg); opacity: .9; }
.plane-intake  { fill: var(--sec-bg); opacity: .34; }

/* gear comes up once the nose does */
.plane-lane.is-flown .plane-gear {
  transform-box: fill-box; transform-origin: 50% 0;
  animation: plane-gear var(--roll, 2.4s) linear forwards;
}
@keyframes plane-gear {
  0%, 68%   { opacity: 1; transform: scaleY(1); }
  86%, 100% { opacity: 0; transform: scaleY(.12); }
}

/* the ground shadow shrinks and fades as the aircraft leaves the runway, which
   is what actually sells the lift at this size */
.plane-lane__shadow {
  position: absolute; left: calc(var(--craft-w) * .16); bottom: -3px;
  width: calc(var(--craft-w) * .56); height: 5px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sec-fg) 34%, transparent), transparent);
  opacity: 0;
}
.plane-lane.is-flown .plane-lane__shadow {
  animation: plane-shadow var(--roll, 2.4s) linear forwards;
}
@keyframes plane-shadow {
  0%, 64%  { opacity: .5; transform: scale(1); }
  100%     { opacity: 0;  transform: scale(1.6, .35); }
}

/* a short vapour trail, glued to the aircraft: same duration and same easing as
   the roll, so it never runs ahead of the wheels */
.plane-lane__trail {
  position: absolute; left: 0; bottom: 14px; height: 2.5px; width: var(--run, 72%);
  border-radius: 2px; transform: scaleX(0); transform-origin: left center; opacity: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sec-accent) 78%, transparent));
}
.plane-lane.is-flown .plane-lane__trail {
  animation: plane-trail var(--roll, 2.4s) cubic-bezier(.5, 0, .78, .36) forwards,
             plane-trail-in .4s ease-out forwards;
}
@keyframes plane-trail    { to { transform: scaleX(1); } }
@keyframes plane-trail-in { to { opacity: .85; } }

/* the faster lane is marked the moment it lifts off */
.plane-lane.is-first .plane-lane__label { color: var(--gold); }
.plane-lane__win {
  width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: var(--royal);
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
  opacity: 0; transform: scale(.5);
  transition: opacity .45s var(--ease-boutique), transform .45s var(--ease-boutique);
}
.plane-lane.is-first .plane-lane__win { opacity: 1; transform: scale(1); }

.sec--royal .fx-runway-panel, .sec--green .fx-runway-panel { color: color-mix(in srgb, var(--arctic) 42%, transparent); }
.sec--royal .plane-lane__time, .sec--green .plane-lane__time { color: var(--arctic); }
.sec--royal .plane-lane__label, .sec--green .plane-lane__label { color: color-mix(in srgb, var(--arctic) 60%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .plane-lane.is-flown .plane-lane__track,
  .plane-lane.is-flown .plane-lane__craft,
  .plane-lane.is-flown .plane-lane__shadow,
  .plane-lane.is-flown .plane-gear,
  .plane-lane.is-flown .plane-lane__trail { animation: none; }
  .plane-lane.is-flown .plane-lane__track { transform: translate3d(var(--run, 72%), 0, 0); }
  .plane-lane.is-flown .plane-lane__trail { transform: scaleX(1); opacity: .85; }
  .plane-lane.is-flown .plane-lane__shadow { opacity: 0; }
}

/* ---- 03 · Harbour & Vine — one system → many outputs ---- */
.fx-system__switch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.fx-chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--sec-hair); background: transparent; color: var(--sec-fg); cursor: pointer; transition: all .3s var(--ease-glide); }
.fx-chip:hover { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.fx-chip.is-active { background: var(--gold); color: var(--royal); border-color: var(--gold); }
.fx-system__outputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fx-out { border: 1px solid var(--sec-hair); border-radius: 12px; padding: 16px; aspect-ratio: 3 / 4; display: grid; align-content: space-between; background: var(--sec-bg); position: relative; overflow: hidden; }
.fx-out__label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 50%, transparent); }
.fx-out__mark { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--sec-hair); transition: all .4s var(--ease-boutique); }
.fx-out__type { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--sec-display); transition: all .4s; }
.fx-out__band { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--sec-fg) 12%, transparent); transition: all .4s; }
/* highlight states driven by data-active on the container */
.fx-system[data-active="colour"] .fx-out__band { background: linear-gradient(90deg, var(--gold), var(--gold-lift)); }
.fx-system[data-active="colour"] .fx-out__mark { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 30%, transparent); }
.fx-system[data-active="type"] .fx-out__type { color: var(--gold); transform: scale(1.06); transform-origin: left; }
.fx-system[data-active="mark"] .fx-out__mark { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent); }

/* ---- 04 · Tasting Menu — menu preview ---- */
/* ---- 04 Tasting Menu — the printed card ---- */
.fx-menu { display: grid; gap: 2px; }
.menu-head { display: grid; justify-items: center; gap: 7px; text-align: center; padding: 4px 0 20px; }
.menu-head__ey { font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 50%, transparent); }
.menu-head__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.03em; line-height: 1; color: var(--sec-display); }
.menu-head__name .script { font-family: var(--font-hand); font-weight: 400; font-size: 1.32em; letter-spacing: 0; color: var(--gold); }
/* a hairline with a diamond at its centre, the way a printed card breaks */
.menu-head__rule { position: relative; width: 72px; height: 1px; background: color-mix(in srgb, var(--gold) 45%, transparent); margin: 3px 0; }
.menu-head__rule::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; background: var(--gold); transform: translate(-50%, -50%) rotate(45deg); }
.menu-head__sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: color-mix(in srgb, var(--sec-fg) 62%, transparent); }
.menu-cat { display: grid; gap: 2px; padding-top: 14px; }
.menu-cat + .menu-cat { margin-top: 12px; }
.menu-cat__t { font-family: var(--font-mono); font-size: 9.5px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); padding-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--gold) 26%, transparent); }
.menu-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sec-hair); font-size: 11.5px; text-align: center; color: color-mix(in srgb, var(--sec-fg) 55%, transparent); }
/* the leader: a dotted run from the dish to its price, as on a printed menu */
.fx-menu__lead { flex: 1 1 auto; min-width: 18px; align-self: center; border-bottom: 1px dotted color-mix(in srgb, var(--sec-fg) 34%, transparent); transform: translateY(-2px); }
.fx-menu__item { border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 15px 4px; border-bottom: 1px solid var(--sec-hair); display: grid; gap: 4px; }
.fx-menu__item:last-child { border-bottom: 0; }
.fx-menu__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.fx-menu__dish { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 24px); letter-spacing: -.02em; color: var(--sec-display); transition: color .3s; }
.fx-menu__item:hover .fx-menu__dish, .fx-menu__item.is-open .fx-menu__dish { color: var(--gold); }
.fx-menu__price { font-family: var(--font-mono); font-size: 12px; color: color-mix(in srgb, var(--sec-fg) 60%, transparent); }
.fx-menu__desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-boutique); }
.fx-menu__desc > span { overflow: hidden; font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--sec-fg) 74%, transparent); }
.fx-menu__item.is-open .fx-menu__desc { grid-template-rows: 1fr; }
.fx-menu__item.is-open .fx-menu__desc > span { padding-top: 6px; }

/* ---- 05 · Ops Dashboard — mini dashboard ---- */
.fx-dash { color: var(--arctic); }
.fx-dash__tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.fx-dash__tab { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 13px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--arctic) 18%, transparent); background: transparent; color: color-mix(in srgb, var(--arctic) 70%, transparent); cursor: pointer; transition: all .3s; }
.fx-dash__tab.is-active { background: var(--gold); color: var(--royal); border-color: var(--gold); }
.fx-dash__panel { display: none; }
.fx-dash__panel.is-active { display: block; animation: fx-fade .4s var(--ease-boutique); }
@keyframes fx-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fx-dash__widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.fx-w { border: 1px solid color-mix(in srgb, var(--arctic) 14%, transparent); border-radius: 12px; padding: 15px; }
.fx-w__label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--arctic) 55%, transparent); }
.fx-w__num { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.fx-w__num .u { font-size: .5em; color: var(--gold-lift); }
.fx-bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-top: 10px; }
.fx-bars i { flex: 1; background: linear-gradient(180deg, var(--gold-lift), color-mix(in srgb, var(--gold) 40%, transparent)); border-radius: 3px 3px 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--ease-boutique); }
.fx-dash__panel.is-active .fx-bars i { transform: scaleY(var(--h, .5)); }
.fx-roles { display: grid; gap: 8px; }
.fx-role { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--arctic) 14%, transparent); border-radius: 10px; }
.fx-role__name { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }
.fx-role__perms { display: flex; gap: 5px; }
.fx-role__perms span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--arctic) 20%, transparent); color: color-mix(in srgb, var(--arctic) 55%, transparent); }
.fx-role__perms span.on { background: color-mix(in srgb, var(--ok-green) 30%, transparent); color: var(--arctic); border-color: transparent; }
.fx-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fx-flow__node { border: 1px solid color-mix(in srgb, var(--arctic) 18%, transparent); border-radius: 10px; padding: 12px 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-align: center; min-width: 92px; }
.fx-flow__node.end { background: var(--gold); color: var(--royal); border-color: var(--gold); }
.fx-flow__arrow { color: var(--gold-lift); }

/* ---- 06 · Meridian — 10-second answer ---- */
.fx-answer__qs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.fx-answer__panel { border-left: 2px solid var(--gold); padding: 4px 0 4px 18px; min-height: 78px; }
.fx-answer__a { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2vw, 24px); line-height: 1.28; letter-spacing: -.01em; color: var(--sec-display); max-width: 34ch; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease-boutique), transform .4s var(--ease-boutique); }
.fx-answer__a.is-shown { opacity: 1; transform: none; }
.fx-answer__clock { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: color-mix(in srgb, var(--sec-fg) 52%, transparent); margin-top: 10px; }

/* ---- 07 · Southern Trails — booking flow ---- */
.fx-book__steps { display: grid; gap: 16px; }
.fx-book__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 58%, transparent); margin-bottom: 8px; }
.sec--royal .fx-book__label { color: color-mix(in srgb, var(--arctic) 58%, transparent); }
.fx-book__opts { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-book__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; min-height: 46px; }
.fx-slot { font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; padding: 10px 8px; border-radius: 9px; border: 1px solid var(--sec-hair); text-align: center; color: var(--sec-fg); background: var(--sec-bg); animation: fx-fade .35s var(--ease-boutique) both; }
.fx-slot.sold { color: color-mix(in srgb, var(--sec-fg) 40%, transparent); text-decoration: line-through; }
.fx-slot.open { border-color: color-mix(in srgb, var(--gold) 45%, transparent); color: var(--gold); }
.fx-weather { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; color: color-mix(in srgb, var(--sec-fg) 68%, transparent); display: inline-flex; align-items: center; gap: 8px; }
.sec--royal .fx-weather { color: color-mix(in srgb, var(--arctic) 70%, transparent); }
.sec--royal .fx-slot { background: color-mix(in srgb, var(--arctic) 6%, transparent); border-color: color-mix(in srgb, var(--arctic) 16%, transparent); color: var(--arctic); }

/* ---- editorial interstitials — tools / industries / principles ---- */
.eco { padding-block: clamp(30px, 4vw, 56px); }
.eco__head { display: grid; gap: 8px; margin-bottom: 22px; max-width: 60ch; }
.eco__ey { font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.eco__title { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(22px, 3vw, 34px); line-height: 1.06; color: var(--sec-display); }
.eco__note { font-size: 14.5px; color: color-mix(in srgb, var(--sec-fg) 76%, transparent); }
.eco__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(20px, 3vw, 40px); }
.eco__group h4 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 55%, transparent); margin: 0 0 12px; }
.eco__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.eco__chips span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--sec-hair); color: var(--sec-fg); transition: border-color .3s var(--ease-glide), color .3s, background .3s; cursor: default; }
.eco__chips span:hover { border-color: color-mix(in srgb, var(--gold) 50%, transparent); color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.sec--royal .eco__chips span, .sec--green .eco__chips span { border-color: color-mix(in srgb, var(--arctic) 20%, transparent); color: color-mix(in srgb, var(--arctic) 85%, transparent); }
.sec--royal .eco__chips span:hover, .sec--green .eco__chips span:hover { color: var(--gold-lift); border-color: color-mix(in srgb, var(--gold-lift) 55%, transparent); background: color-mix(in srgb, var(--gold-lift) 10%, transparent); }
.sec--royal .eco__title, .sec--green .eco__title { color: var(--arctic); }
.sec--royal .eco__note, .sec--green .eco__note { color: color-mix(in srgb, var(--arctic) 80%, transparent); }
.sec--royal .eco__group h4, .sec--green .eco__group h4 { color: color-mix(in srgb, var(--arctic) 55%, transparent); }

/* industries word-list */
.industries { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.industries span { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(22px, 3.4vw, 40px); color: color-mix(in srgb, var(--sec-fg) 34%, transparent); transition: color .35s var(--ease-boutique); }
.industries span:hover { color: var(--gold); }
.sec--royal .industries span { color: color-mix(in srgb, var(--arctic) 34%, transparent); }
.sec--royal .industries span:hover { color: var(--gold-lift); }

/* principles / philosophy manifesto */
.principles__lead { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; font-size: clamp(26px, 4vw, 50px); color: var(--sec-display); max-width: 18ch; }
.principles__lead .script { color: var(--gold); }
.principles__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: clamp(24px, 3vw, 40px); }
.principles__item { display: grid; gap: 6px; padding-top: 16px; border-top: 1px solid var(--sec-hair); }
.principles__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: var(--gold); }
.principles__t { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--sec-display); }
.principles__d { font-size: 13.5px; line-height: 1.55; color: color-mix(in srgb, var(--sec-fg) 76%, transparent); }
.sec--royal .principles__lead, .sec--royal .principles__t { color: var(--arctic); }
.sec--royal .principles__d { color: color-mix(in srgb, var(--arctic) 78%, transparent); }
.sec--royal .principles__item { border-color: color-mix(in srgb, var(--arctic) 16%, transparent); }

/* ---- case desktop layouts — each project composed differently ---- */
@media (min-width: 1101px) {
  /* Safety net: a case part with no placement rule below spans the full row
     rather than auto-placing into a single 70px column. A new case then reads
     plainly instead of collapsing into an unreadable sliver. */
  .case__grid > * { grid-column: 1 / -1; }
  /* 01 Owed — flagship: full title band, wide cover band, intro + check split */
  .case--owed .c-title { grid-column: 1 / 13; grid-row: 1; }
  .case--owed .c-cover { grid-column: 1 / 13; grid-row: 2; }
  .case--owed .c-intro { grid-column: 1 / 6; grid-row: 3; }
  .case--owed .c-stage { grid-column: 6 / 13; grid-row: 3; }
  /* 02 FRØST — cover left, intro + shop stage right */
  .case--frost .c-cover { grid-column: 1 / 6; grid-row: 1 / 3; }
  .case--frost .c-intro { grid-column: 7 / 13; grid-row: 1; }
  .case--frost .c-stage { grid-column: 7 / 13; grid-row: 2; }
  /* 02 FAANZ — intro left, race stage right, outcome under intro */
  .case--faanz .c-intro { grid-column: 1 / 6; grid-row: 1; }
  .case--faanz .c-out   { grid-column: 1 / 6; grid-row: 2; align-self: end; }
  .case--faanz .c-stage { grid-column: 7 / 13; grid-row: 1 / 3; }
  /* 03 Harbour & Vine — full-width system stage under a wide intro */
  .case--harbour .c-intro { grid-column: 1 / 8; grid-row: 1; }
  .case--harbour .c-cover { grid-column: 9 / 13; grid-row: 1; }
  .case--harbour .c-stage { grid-column: 1 / 13; grid-row: 2; }
  /* 04 Tasting Menu — menu stage left, intro + cover right */
  .case--tasting .c-stage { grid-column: 1 / 7; grid-row: 1 / 3; }
  .case--tasting .c-intro { grid-column: 8 / 13; grid-row: 1; }
  .case--tasting .c-cover { grid-column: 8 / 13; grid-row: 2; }
  /* 05 Ops — big navy dashboard, intro strip left */
  .case--ops .c-intro { grid-column: 1 / 5; grid-row: 1; }
  .case--ops .c-stage { grid-column: 5 / 13; grid-row: 1; }
  /* 06 Meridian — giant title band, answer stage split */
  .case--meridian .c-title { grid-column: 1 / 13; grid-row: 1; }
  .case--meridian .c-intro { grid-column: 1 / 5; grid-row: 2; }
  .case--meridian .c-stage { grid-column: 6 / 13; grid-row: 2; }
  /* 07 Southern Trails — full-bleed cover band, then booking + outcome */
  .case--trails .c-cover { grid-column: 1 / 13; grid-row: 1; }
  .case--trails .c-intro { grid-column: 1 / 5; grid-row: 2; }
  .case--trails .c-stage { grid-column: 5 / 10; grid-row: 2; }
  .case--trails .c-out   { grid-column: 10 / 13; grid-row: 2; align-self: center; }
  /* 08 Moana Still — the calmest composition: wide margins, stage given air */
  .case--calm .c-cover { grid-column: 1 / 6; grid-row: 1 / 3; }
  .case--calm .c-intro { grid-column: 7 / 11; grid-row: 1; }
  .case--calm .c-stage { grid-column: 7 / 13; grid-row: 2; }
  /* 09 Cascade Coffee — intro left, loyalty card held small and central */
  .case--cascade .c-intro { grid-column: 1 / 5; grid-row: 1; }
  .case--cascade .c-stage { grid-column: 5 / 10; grid-row: 1; }
  .case--cascade .c-cover { grid-column: 10 / 13; grid-row: 1; }
  /* 10 Te Awa — the rail wants width; it runs wide under a narrow intro */
  .case--teawa .c-intro { grid-column: 1 / 6; grid-row: 1; }
  .case--teawa .c-cover { grid-column: 7 / 13; grid-row: 1; }
  .case--teawa .c-stage { grid-column: 1 / 13; grid-row: 2; }
  /* 11 SmallPie — no stage artwork; the evolution list carries it */
  .case--smallpie .c-intro { grid-column: 1 / 6; grid-row: 1; }
  .case--smallpie .c-stage { grid-column: 7 / 13; grid-row: 1; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .case__grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .fx-shop__tiles, .fx-system__outputs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .case__grid { grid-template-columns: minmax(0, 1fr); }
  .case__grid > * { grid-column: 1 / -1; }
  .fx-shop__tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .fx-system__outputs { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .case__title { font-size: clamp(34px, 12vw, 52px); }
}

/* ---- 03 · Harbour & Vine — live "build the kit" playground ---- */
.fx-kit { --c: #A4863D; }
.fx-kit__controls { display: flex; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; margin-bottom: 18px; }
.fx-kit__group { display: grid; gap: 9px; }
.fx-kit__glabel { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 50%, transparent); }
.fx-kit__swatches { display: flex; gap: 9px; }
.fx-swatch { width: 36px; height: 36px; border-radius: 9px; border: 0; padding: 0; cursor: pointer; background: var(--sw); transition: transform .25s var(--ease-boutique), box-shadow .25s; }
.fx-swatch:hover { transform: translateY(-2px); }
.fx-swatch.is-active { box-shadow: 0 0 0 2px var(--sec-bg), 0 0 0 4px var(--sw); }
.fx-kit__fonts { display: flex; gap: 8px; flex-wrap: wrap; }
.fx-fontbtn { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--sec-hair); background: transparent; color: var(--sec-fg); cursor: pointer; transition: background .3s var(--ease-glide), color .3s, border-color .3s; }
.fx-fontbtn:hover { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.fx-fontbtn.is-active { background: var(--sec-display); color: var(--sec-bg); border-color: var(--sec-display); }
.fx-kit__outputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fx-out2 { border: 1px solid var(--sec-hair); border-radius: 12px; padding: 16px; aspect-ratio: 3 / 4; display: grid; align-content: space-between; gap: 10px; background: var(--sec-bg); overflow: hidden; }
.fx-out2__mark { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--c); position: relative; transition: border-color .45s var(--ease-boutique); }
.fx-out2__mark::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--c); opacity: .28; transition: background .45s; }
.fx-out2__type { font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.02em; color: var(--sec-display); line-height: 1; transition: color .3s; }
.fx-out2__lines { display: grid; gap: 5px; }
.fx-out2__lines i { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--sec-fg) 15%, transparent); }
.fx-out2__lines i:nth-child(2) { width: 74%; }
.fx-out2__lines i:nth-child(3) { width: 88%; }
.fx-out2__band { height: 9px; border-radius: 5px; background: var(--c); transition: background .45s var(--ease-boutique); }
.fx-out2__label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 48%, transparent); }
.fx-kit[data-font="display"] .fx-out2__type { font-family: var(--font-display); font-weight: 700; }
.fx-kit[data-font="mono"] .fx-out2__type { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0; }
.fx-kit[data-font="script"] .fx-out2__type { font-family: var(--font-hand); font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); }
@media (max-width: 760px) { .fx-kit__outputs { gap: 8px; } .fx-out2 { padding: 12px; } }

/* ---- 07 · Southern Trails — booking confirm + animated success ---- */
.fx-slot { cursor: pointer; border: 1px solid var(--sec-hair); background: var(--sec-bg); transition: background .25s var(--ease-glide), color .25s, border-color .25s, transform .25s; }
.fx-slot.open:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.fx-slot.is-selected { background: var(--gold); color: var(--royal); border-color: var(--gold); }
.fx-slot.sold { cursor: not-allowed; }
.fx-book__confirm { margin-top: 18px; border: 0; cursor: pointer; transition: opacity .3s, transform .2s var(--ease-boutique); }
.fx-book__confirm:disabled { opacity: .4; cursor: not-allowed; }
.fx-book__confirm:not(:disabled):active { transform: translateY(1px); }
.fx-book__success { display: flex; align-items: center; gap: 14px; margin-top: 16px; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease-boutique), transform .4s var(--ease-boutique); }
.fx-book__success.is-shown { opacity: 1; transform: none; }
.fx-book__success[hidden] { display: none; }
.fx-tick { width: 42px; height: 42px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--ok-green) 22%, transparent); display: grid; place-items: center; }
.fx-tick svg { width: 22px; height: 22px; }
.fx-tick svg path { stroke: var(--ok-green); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 32; stroke-dashoffset: 32; }
.fx-book__success.is-shown .fx-tick { animation: tick-pop .45s var(--ease-boutique); }
.fx-book__success.is-shown .fx-tick svg path { animation: tick-draw .55s var(--ease-boutique) .1s forwards; }
@keyframes tick-pop { 0% { transform: scale(.5); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
.fx-book__done { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.6vw, 18px); letter-spacing: -.01em; color: var(--sec-display); }
.fx-book__done span { color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .fx-tick svg path { stroke-dashoffset: 0; animation: none; }
  .fx-book__success.is-shown .fx-tick { animation: none; }
}

/* ---- case expandable "full story" (challenge / what we did / outcome / next) ---- */
.case__more { margin-top: clamp(22px, 3vw, 40px); }
.case__deep { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(18px, 2.4vw, 34px); padding-top: 12px; }
.case__deep > div { display: grid; gap: 6px; align-content: start; }
.case__deep h4 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0; }
.case__deep p { font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--sec-fg) 80%, transparent); margin: 0; max-width: 44ch; }
.sec--royal .case__deep p, .sec--green .case__deep p { color: color-mix(in srgb, var(--arctic) 80%, transparent); }

/* ---- 08-10 · reveal + subscription mini widgets ---- */
.fx-reveal__out, .fx-sub__price { margin-top: 16px; font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; color: var(--sec-display); }
.fx-reveal__out { font-size: clamp(18px, 2vw, 24px); opacity: 0; transform: translateY(5px); transition: opacity .35s var(--ease-boutique), transform .35s var(--ease-boutique); }
.fx-reveal__out.is-shown { opacity: 1; transform: none; }
.fx-sub__group { margin-bottom: 14px; }
.fx-sub__price { font-size: clamp(28px, 3.2vw, 44px); font-variant-numeric: tabular-nums; }
.fx-sub__price small { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: .06em; color: color-mix(in srgb, var(--sec-fg) 55%, transparent); }

/* ============================================================================
   27. 404 — the signature line loses its way.
   The middle "0" is a lemniscate that draws itself on load, gently floating,
   with a gold comet dot that rides it. Reduced-motion shows it complete.
   ========================================================================== */
/* ---- 404 · the lost scene -------------------------------------------------
   Adapted from a layered parallax 404 by Rafaela Lucas, rebuilt on SmallPie's
   own palette and type. Three depth layers of pill shapes drift across a
   cream stage, a gold glow opens behind them, and the numeral arrives scaled
   and skewed before settling. Everything is CSS; nothing here needs JS.
   The scene is decorative and marked aria-hidden, so the page still reads
   correctly as a heading, a sentence and two links. ---- */

.notfound {
  position: relative; min-height: 88vh; display: grid; place-items: center;
  text-align: center; padding: clamp(150px, 20vh, 240px) var(--gutter) clamp(72px, 9vh, 130px);
  overflow: hidden; isolation: isolate;
}
.notfound__inner { max-width: 760px; position: relative; z-index: 3; }

/* the stage sits behind the copy and never takes pointer events */
.nf-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }

/* the glow that opens behind everything */
.nf-orb {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%;
  width: clamp(420px, 62vw, 820px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--gold) 26%, transparent) 0%,
    color-mix(in srgb, var(--gold) 10%, transparent) 42%,
    transparent 70%);
  animation: nf-orb 2.6s var(--ease-boutique) both;
}

/* the numeral, twice: a soft ghost behind and the solid one in front */
.nf-num {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(150px, 30vw, 400px); line-height: .8; letter-spacing: -.05em;
  color: color-mix(in srgb, var(--gray) 6%, transparent);
  animation: nf-num 1.6s var(--ease-boutique) both;
  user-select: none;
}
.nf-num--ghost {
  color: color-mix(in srgb, var(--gold) 13%, transparent);
  translate: -50% -50%; margin-left: 10px; margin-top: 8px;
  animation-delay: .12s;
}

/* three depth layers of drifting pills */
.nf-layer { position: absolute; inset: 0; }
.nf-layer i {
  position: absolute; display: block; border-radius: 80px;
  animation-duration: 12s; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; opacity: .62;
}
.nf-layer--1 i { background: linear-gradient(90deg, var(--gold) 14%, var(--gold-lift) 95%); }
.nf-layer--1 i:nth-child(1) { right: 15%; top: 13%; height: 26px; width: 118px; animation-name: nf-right; animation-delay: .4s; }
.nf-layer--1 i:nth-child(2) { left: 14%;  top: 84%; height: 46px; width: 150px; animation-name: nf-left;  animation-delay: 1s; }
.nf-layer--1 i:nth-child(3) { left: 11%;  top: 22%; height: 18px; width: 70px;  animation-name: nf-left;  animation-delay: 1.6s; }

.nf-layer--2 i { background: linear-gradient(90deg, var(--gray) 0%, var(--dark-green) 100%); opacity: .5; }
.nf-layer--2 i:nth-child(1) { left: 2%;   top: 19%; height: 36px; width: 118px; animation-name: nf-left;  animation-delay: 2s; }
.nf-layer--2 i:nth-child(2) { right: 14%; top: 89%; height: 46px; width: 176px; animation-name: nf-right; animation-delay: 2.6s; }
.nf-layer--2 i:nth-child(3) { right: 11%; top: 78%; height: 18px; width: 156px; animation-name: nf-right; animation-delay: 3.2s; }

.nf-layer--3 i { background: color-mix(in srgb, var(--gray) 18%, transparent); opacity: .55; }
.nf-layer--3 i:nth-child(1) { left: 26%;  top: 10%; height: 18px; width: 78px;  animation-name: nf-left;  animation-delay: .9s; }
.nf-layer--3 i:nth-child(2) { right: 10%; top: 93%; height: 36px; width: 138px; animation-name: nf-right; animation-delay: 1.8s; }
.nf-layer--3 i:nth-child(3) { left: 40%;  top: 86%; height: 18px; width: 78px;  animation-name: nf-left;  animation-delay: 2.7s; }

.nf-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.nf-title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; line-height: 1.02;
  font-size: clamp(30px, 5vw, 56px); color: var(--gray); text-wrap: balance; margin: clamp(14px, 2vw, 22px) 0 0;
  animation: nf-rise .9s var(--ease-boutique) .25s both;
}
.nf-sub {
  font-size: clamp(15px, 1.8vw, 19px); line-height: 1.6;
  color: color-mix(in srgb, var(--gray) 74%, transparent); max-width: 46ch; margin: 16px auto 0;
  animation: nf-rise .9s var(--ease-boutique) .4s both;
}
.nf-actions {
  display: flex; gap: clamp(16px, 3vw, 32px); align-items: center; justify-content: center;
  flex-wrap: wrap; margin-top: clamp(24px, 3.5vw, 40px);
  animation: nf-rise .9s var(--ease-boutique) .55s both;
}

/* A pill travels most of the way across, squeezing thin at the midpoint the
   way the original does, then returns. */
@keyframes nf-left  { 50% { left: 78%;  width: 42px; } }
@keyframes nf-right { 50% { right: 78%; width: 42px; } }
@keyframes nf-num   { 0% { opacity: 0; transform: scale(6) skew(16deg, 16deg); } 100% { opacity: 1; transform: none; } }
@keyframes nf-orb   { 0% { opacity: 0; scale: .2; } 100% { opacity: 1; scale: 1; } }
@keyframes nf-rise  { 0% { opacity: 0; transform: translateY(28px); } 100% { opacity: 1; transform: none; } }

@media (max-width: 700px) {
  .nf-layer--3 { display: none; }
  .nf-layer i { transform: scale(.7); }
}

@media (prefers-reduced-motion: reduce) {
  .nf-orb, .nf-num, .nf-layer i, .nf-title, .nf-sub, .nf-actions { animation: none !important; }
  .nf-num { opacity: 1; transform: none; }
  .nf-orb { opacity: 1; scale: 1; }
}

/* ---- Concept flag — speculative demos that were NOT delivered work.
   Deliberately quieter and dashed so it reads as a label, never a claim. ---- */
.fx-concept {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--sec-fg) 62%, transparent);
  border: 1px dashed color-mix(in srgb, var(--sec-fg) 34%, transparent);
  border-radius: 999px; padding: 5px 11px; margin-bottom: 12px;
}
.fx-concept::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--sec-fg) 45%, transparent); }
.fx-shop__intro {
  font-size: 14.5px; line-height: 1.6; font-style: italic;
  color: color-mix(in srgb, var(--sec-fg) 84%, transparent);
  margin: 0 0 16px; max-width: 52ch;
}
.sec--royal .fx-concept, .sec--green .fx-concept { color: color-mix(in srgb, var(--arctic) 62%, transparent); border-color: color-mix(in srgb, var(--arctic) 30%, transparent); }
.sec--royal .fx-shop__intro, .sec--green .fx-shop__intro { color: color-mix(in srgb, var(--arctic) 84%, transparent); }

/* ============================================================================
   28. FRØST — the concept checkout.
   A four-step premium commerce demo: browse (qty) → payment → processing →
   confirmed. The processing state deliberately reuses SmallPie's signature
   infinity line rather than a generic spinner.
   ========================================================================== */
.shop-step[hidden] { display: none; }
.shop-step { animation: fx-fade .45s var(--ease-boutique); }
.shop-back { justify-self: start; margin-bottom: 12px; }

/* --- step 1: browse with quantity --- */
.fx-tile__qty { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; }
.qty-btn { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--sec-hair); background: transparent; color: var(--sec-fg); font: inherit; font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .2s, border-color .2s, color .2s; }
.qty-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.qty-btn:disabled { opacity: .35; cursor: not-allowed; }
.qty-val { font-family: var(--font-mono); font-size: 12px; min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; color: var(--sec-display); }
.fx-tile.is-added { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }

/* --- basket + totals --- */
.basket { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sec-hair); display: grid; gap: 8px; }
.basket__line { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: color-mix(in srgb, var(--sec-fg) 78%, transparent); }
.basket__line--total { padding-top: 8px; border-top: 1px solid var(--sec-hair); font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--sec-display); }
.basket__line--total b { color: var(--gold); }
.basket__empty { font-family: var(--font-mono); font-size: 11.5px; color: color-mix(in srgb, var(--sec-fg) 50%, transparent); }
.shop-cta { margin-top: 14px; border: 0; cursor: pointer; transition: opacity .3s; }
.shop-cta:disabled { opacity: .4; cursor: not-allowed; }

/* --- step 2: the payment page --- */
.pay { display: grid; gap: 18px; }
.pay__head { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2vw, 24px); letter-spacing: -.02em; color: var(--sec-display); }
.pay__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: start; }
@media (max-width: 900px) { .pay__grid { grid-template-columns: 1fr; } }

/* the card object */
.pay-card {
  position: relative; aspect-ratio: 1.586 / 1; border-radius: 14px; padding: 18px;
  background: linear-gradient(145deg, #16283A 0%, #0A1826 60%, #060F18 100%);
  color: var(--arctic); display: grid; align-content: space-between;
  box-shadow: 0 20px 40px -24px rgba(10,24,38,.75);
  overflow: hidden; transition: transform .5s var(--ease-boutique);
}
.pay-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 60%); pointer-events: none; }
.pay-card.is-focus { transform: translateY(-3px) rotate(-.4deg); }
.pay-card__top { display: flex; align-items: center; justify-content: space-between; }
.pay-card__chip { width: 34px; height: 25px; border-radius: 5px; background: linear-gradient(140deg, var(--gold-lift), var(--gold)); position: relative; }
.pay-card__chip::before, .pay-card__chip::after { content: ""; position: absolute; left: 4px; right: 4px; height: 1px; background: rgba(10,24,38,.35); }
.pay-card__chip::before { top: 8px; } .pay-card__chip::after { top: 16px; }
.pay-card__brand { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; color: color-mix(in srgb, var(--arctic) 85%, transparent); }
.pay-card__num { font-family: var(--font-mono); font-size: clamp(13px, 1.5vw, 17px); letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--arctic); }
.pay-card__row { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--arctic) 70%, transparent); }
.pay-card__row span small { display: block; font-size: 7.5px; opacity: .6; margin-bottom: 2px; letter-spacing: .14em; }

/* the form */
.pay-form { display: grid; gap: 10px; }
.pay-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-input { width: 100%; font-family: var(--font-mono); font-size: 12.5px; padding: 11px 13px; border-radius: 9px; border: 1px solid var(--sec-hair); background: var(--sec-bg); color: var(--sec-display); transition: border-color .25s, box-shadow .25s; }
.pay-input::placeholder { color: color-mix(in srgb, var(--sec-fg) 42%, transparent); }
.pay-input:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); }
.pay-autofill { justify-self: start; }
.pay__total { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: color-mix(in srgb, var(--sec-fg) 60%, transparent); }
.pay__secure { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 50%, transparent); }
.pay__secure svg { width: 11px; height: 11px; }

/* --- step 3: processing (the signature line, never a spinner) --- */
.pay-proc { display: grid; justify-items: center; gap: 16px; padding: clamp(24px, 5vw, 48px) 0; text-align: center; }
.pay-proc__svg { width: clamp(130px, 30vw, 190px); height: auto; overflow: visible; }
.pay-proc__track { fill: none; stroke: color-mix(in srgb, var(--sec-fg) 12%, transparent); stroke-width: 4; }
.pay-proc__comet { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: .18 .82; animation: pay-ride 1.6s linear infinite; }
@keyframes pay-ride { to { stroke-dashoffset: -1; } }
.pay-proc__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 62%, transparent); }
.pay-proc__label b { color: var(--gold); font-weight: 500; }

/* --- step 4: confirmed --- */
.pay-done { display: grid; justify-items: center; gap: 14px; padding: clamp(20px, 4vw, 40px) 0; text-align: center; }
.pay-seal { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--gold) 16%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); animation: seal-in .6s var(--ease-boutique) both; }
.pay-seal svg { width: 30px; height: 30px; }
.pay-seal svg path { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 34; animation: tick-draw .55s var(--ease-boutique) .35s forwards; }
@keyframes seal-in { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.pay-done__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.02em; color: var(--sec-display); animation: fx-fade .5s var(--ease-boutique) .5s both; }
.pay-done__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: color-mix(in srgb, var(--sec-fg) 58%, transparent); animation: fx-fade .5s var(--ease-boutique) .65s both; }
.pay-done__meta b { color: var(--gold); font-weight: 500; }
.pay-done .ua { animation: fx-fade .5s var(--ease-boutique) .8s both; }
@media (prefers-reduced-motion: reduce) {
  .shop-step, .pay-done__title, .pay-done__meta, .pay-done .ua { animation: none; }
  .pay-seal { animation: none; }
  .pay-seal svg path { stroke-dashoffset: 0; animation: none; }
  .pay-proc__comet { animation: none; stroke-dasharray: 1 0; }
}

/* --- image slots: where final artwork will drop in --- */
.case-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.slot { aspect-ratio: 4 / 3; border: 1px dashed color-mix(in srgb, var(--sec-fg) 28%, transparent); border-radius: 10px; display: grid; place-items: center; padding: 10px; text-align: center; background: color-mix(in srgb, var(--sec-fg) 2%, transparent); }
.slot span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 52%, transparent); line-height: 1.4; }
.slot--tall { aspect-ratio: 3 / 4; }
.slot--wide { aspect-ratio: 16 / 9; }
.sec--royal .slot, .sec--green .slot { border-color: color-mix(in srgb, var(--arctic) 26%, transparent); background: color-mix(in srgb, var(--arctic) 4%, transparent); }
.sec--royal .slot span, .sec--green .slot span { color: color-mix(in srgb, var(--arctic) 55%, transparent); }

/* --- demo badge --- */
.demo-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 60%, transparent); border: 1px solid color-mix(in srgb, var(--sec-fg) 26%, transparent); border-radius: 999px; padding: 3px 9px; vertical-align: middle; }
.demo-badge::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.sec--royal .demo-badge, .sec--green .demo-badge { color: color-mix(in srgb, var(--arctic) 62%, transparent); border-color: color-mix(in srgb, var(--arctic) 26%, transparent); }
.demo-note { font-size: 13.5px; line-height: 1.6; font-style: italic; color: color-mix(in srgb, var(--sec-fg) 74%, transparent); border-left: 2px solid color-mix(in srgb, var(--gold) 45%, transparent); padding-left: 14px; margin: 14px 0 0; max-width: 60ch; }
.sec--royal .demo-note, .sec--green .demo-note { color: color-mix(in srgb, var(--arctic) 76%, transparent); }

/* ---- editorial story layout (used where a case is a narrative, not a spec) ---- */
.story { display: grid; gap: clamp(18px, 2.4vw, 30px); padding-top: 12px; }
.story p { font-size: 15px; line-height: 1.72; color: color-mix(in srgb, var(--sec-fg) 82%, transparent); max-width: 66ch; margin: 0; }
.story__pull { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2.5vw, 30px); line-height: 1.26; letter-spacing: -.02em; color: var(--sec-display); border-left: 2px solid var(--gold); padding-left: clamp(16px, 2vw, 26px); max-width: 32ch; margin: 0; }
.story__pull cite { display: block; font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.story__sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 6px 0 0; }
.sec--royal .story p, .sec--green .story p { color: color-mix(in srgb, var(--arctic) 82%, transparent); }
.sec--royal .story__pull, .sec--green .story__pull { color: var(--arctic); }

/* FRØST: no interactive stage in the collapsed grid — cover + intro only */
@media (min-width: 1101px) {
  .case--frost .c-cover { grid-column: 1 / 6;  grid-row: 1; }
  .case--frost .c-intro { grid-column: 7 / 13; grid-row: 1; align-self: center; }
}

/* The tile itself is no longer the button — only its qty controls are. */
.fx-tile { cursor: default; }

/* ---- SmallPie's own case: our platform, not a client project ---- */
@media (min-width: 1101px) {
  .case--smallpie .c-intro { grid-column: 1 / 6;  grid-row: 1; }
  .case--smallpie .c-stage { grid-column: 7 / 13; grid-row: 1; }
}
.self-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lift); border: 1px solid color-mix(in srgb, var(--gold-lift) 45%, transparent); border-radius: 999px; padding: 3px 9px; }
.self-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-lift); animation: dot-pulse 2.4s var(--ease-standard) infinite; }
.evo { display: grid; gap: 0; }
.evo__item { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--arctic) 14%, transparent); align-items: baseline; }
.evo__item:last-child { border-bottom: 0; }
.evo__v { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--gold-lift); }
.evo__t { font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--arctic) 82%, transparent); }
@media (prefers-reduced-motion: reduce) { .self-badge::before { animation: none; } }

/* ============================================================================
   29. Harbour & Vine — the tasting table.
   Six empty varietal glasses and a cheese board. "Book a Tasting" pours each
   glass in turn, the table settles, and a booking panel grows out of it.
   ========================================================================== */
.tasting__table { display: grid; gap: clamp(16px, 2.4vw, 26px); }
.tasting__glasses { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(3px, .7vw, 10px); align-items: end; }
.tglass { display: grid; justify-items: center; gap: 7px; transition: transform .9s var(--ease-boutique); }
.tglass__svg { width: 100%; max-width: 82px; height: auto; overflow: visible; }
/* Two lines are reserved whether or not the name needs them: the rack
   bottom-aligns its cells, so a wrapping label ("Sauvignon Blanc") would
   otherwise lift that one glass off the table while the rest sat level. */
.tglass__name { font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 55%, transparent); text-align: center; line-height: 1.3; min-height: 2.6em; transition: color .5s var(--ease-glide); }
.fx-tasting.is-poured .tglass__name { color: var(--sec-display); }
/* Once poured the flight draws together: --dx is each glass's own distance to
   the centre (set in JS), so the gather stays symmetrical at any count. The
   outermost glasses travel furthest and arrive last. */
.fx-tasting.is-poured .tglass {
  transform: translateX(var(--dx, 0)) translateY(-5px);
  transition-delay: calc((3 - var(--gi, 0)) * 55ms);
}
.tglass__fill { transform-box: fill-box; transform: translateY(104%); transition: transform 1.05s cubic-bezier(.45,.03,.34,1); }
/* Bowl runs y=14..92 (78 tall) inside a 96-tall fill rect, so 71% puts the
   surface at y≈72.5 — a quarter full, the way wine is actually poured. */
.tglass.is-full .tglass__fill { transform: translateY(71%); }
.tglass.is-resetting .tglass__fill { transition: none; }


/* booking panel grows out of the table */
.tasting__book { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .75s var(--ease-boutique); }
.fx-tasting.is-booking .tasting__book { grid-template-rows: 1fr; }
.tasting__book > div { overflow: hidden; }
/* The two phases (form, confirmation) each fold on grid-rows, so confirming
   resizes the panel smoothly instead of yanking the page up when the calendar
   is removed. Both sit in normal flow, one open at a time. */
.tphase { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-boutique), opacity .35s var(--ease-glide); opacity: 0; }
.tphase > div { overflow: hidden; min-height: 0; }
.tphase--form { grid-template-rows: 1fr; opacity: 1; }
.fx-tasting.is-done .tphase--form { grid-template-rows: 0fr; opacity: 0; }
.fx-tasting.is-done .tphase--done { grid-template-rows: 1fr; opacity: 1; transition-delay: 0s, .25s; }

.tasting__inner { padding-top: 20px; margin-top: 18px; border-top: 1px solid var(--sec-hair); display: grid; gap: 16px; }
.tasting__sit { display: grid; gap: 8px; }
.cal { display: grid; gap: 10px; }
/* Month reads as a quiet eyebrow, not a headline — the date grid is the
   thing being chosen, so it carries the weight. */
.cal__head { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.cal__month { font-family: var(--font-mono); font-size: 9.5px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.cal__head .tasting__sel { margin-left: auto; text-align: right; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; max-width: 340px; }
.cal__dow { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 45%, transparent); text-align: center; padding-bottom: 2px; }
.cal__day { font-family: var(--font-mono); font-size: 11.5px; aspect-ratio: 1; border-radius: 7px; border: 1px solid transparent; background: transparent; color: color-mix(in srgb, var(--sec-fg) 78%, transparent); cursor: pointer; display: grid; place-items: center; transition: background .22s, color .22s, border-color .22s; font-variant-numeric: tabular-nums; }
.cal__day:hover:not(:disabled) { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.cal__day:disabled { color: color-mix(in srgb, var(--sec-fg) 24%, transparent); cursor: not-allowed; }
.cal__day.is-open { border-color: color-mix(in srgb, var(--sec-fg) 18%, transparent); }
.cal__day.is-sel { background: var(--gold); color: var(--royal); border-color: var(--gold); }
.tasting__times { display: flex; gap: 7px; flex-wrap: wrap; }
.tasting__sel { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: color-mix(in srgb, var(--sec-fg) 62%, transparent); }
.tasting__sel b { color: var(--gold); font-weight: 500; }
.tasting__confirm { justify-self: start; border: 0; cursor: pointer; }
.tasting__confirm:disabled { opacity: .4; cursor: not-allowed; }
.tasting__done { display: flex; align-items: center; gap: 14px; padding-top: 20px; margin-top: 18px; border-top: 1px solid var(--sec-hair); }
.tasting__redo { margin-top: 12px; }
@media (max-width: 760px) {
  /* 8 glasses over two rows of 4; the gather is a horizontal move, so it is
     dropped here where the rows would slide across each other. */
  .tasting__glasses { grid-template-columns: repeat(4, 1fr); row-gap: 16px; }
  .fx-tasting.is-poured .tglass { transform: translateY(-4px); }
  .tglass__name { font-size: 7.5px; }
  /* Not enough width for the month and the sitting side by side: stack them. */
  .cal__head { display: block; }
  .cal__head .tasting__sel { display: block; text-align: left; margin: 3px 0 0; }
  .cal__grid { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tglass__fill, .tglass, .tasting__book { transition: none; }
}

/* ---- 06 · Meridian — the legal assistant demonstration ---- */
.assist__log { display: grid; gap: 10px; max-height: 260px; overflow-y: auto; padding: 4px 2px 2px; overscroll-behavior: contain; }
.bub { max-width: 88%; padding: 11px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; animation: fx-fade .35s var(--ease-boutique); }
.bub p { margin: 0; }
.bub p + p { margin-top: 8px; }
.bub--you { justify-self: end; background: var(--royal); color: var(--arctic); border-bottom-right-radius: 4px; }
.bub--bot { justify-self: start; background: color-mix(in srgb, var(--sec-fg) 5%, transparent); border: 1px solid var(--sec-hair); color: color-mix(in srgb, var(--sec-fg) 86%, transparent); border-bottom-left-radius: 4px; }
.bub__rec { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: color-mix(in srgb, var(--sec-fg) 55%, transparent); }
.bub__rec b { color: var(--gold); font-weight: 500; }
.bub__cta { margin-top: 10px; font-size: 10px; padding: 7px 12px; min-height: 32px; }
.bub__cta:disabled { opacity: .6; cursor: default; }
/* the branches offered after an answer — picking one removes the rest */
.bub__more { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 45%, transparent); margin-top: 10px; }
.bub__opts { display: grid; gap: 5px; margin-top: 7px; justify-items: start; }
.bub__opt { font-size: 10.5px; padding: 7px 12px; min-height: 32px; text-align: left; text-transform: none; letter-spacing: .01em; }
.bub__opt:hover { border-color: var(--gold); color: var(--gold); }
.bub__ok { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--sec-display); }
.fx-tick--sm { width: 18px; height: 18px; flex: none; }
.fx-tick--sm svg { width: 11px; height: 11px; }
.bub__dots { display: inline-flex; gap: 4px; padding: 2px 0; }
.bub__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: bub-blink 1.2s ease-in-out infinite; }
.bub__dots i:nth-child(2) { animation-delay: .16s; } .bub__dots i:nth-child(3) { animation-delay: .32s; }
@keyframes bub-blink { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.assist__bar { display: flex; gap: 8px; margin-top: 12px; }
.assist__bar .pay-input { flex: 1; font-family: var(--font-body); font-size: 13px; }
.assist__send { border: 0; cursor: pointer; padding: 10px 16px; border-radius: 9px; background: var(--royal); color: var(--arctic); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.assist__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.assist__chips .fx-chip { font-size: 10px; padding: 8px 12px; text-transform: none; letter-spacing: .02em; min-height: 34px; }

/* ---- 08 · Wellness — calm session picker ---- */
.fx-calm { text-align: left; }
.calm__opts { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.calm__stage { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2.4vw, 28px); align-items: center; }
@media (max-width: 620px) { .calm__stage { grid-template-columns: 1fr; } }
.calm__ring { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; justify-self: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 14%, transparent), transparent 68%);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent); }
.calm__ring i { width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 34%, transparent); animation: calm-breathe 7s ease-in-out infinite; }
.calm__ring[data-pace="slow"] i { animation-duration: 10s; }
.calm__ring[data-pace="quick"] i { animation-duration: 4.5s; }
@keyframes calm-breathe { 0%,100% { transform: scale(.72); opacity: .55; } 50% { transform: scale(1.25); opacity: 1; } }
.calm__out { display: grid; gap: 5px; opacity: 0; transform: translateY(5px); transition: opacity .45s var(--ease-boutique), transform .45s var(--ease-boutique); }
.calm__out.is-shown { opacity: 1; transform: none; }
.calm__time { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 27px); letter-spacing: -.02em; color: var(--sec-display); }
.calm__with { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.calm__note { font-size: 13.5px; line-height: 1.6; color: color-mix(in srgb, var(--sec-fg) 76%, transparent); max-width: 40ch; }
@media (prefers-reduced-motion: reduce) { .calm__ring i { animation: none; } }

/* ---- 09 · Cascade — digital loyalty card ---- */
.loyal__card { border-radius: 14px; padding: clamp(16px, 2.2vw, 24px); background: linear-gradient(150deg, #2A1C14, #17100B); color: var(--arctic); display: grid; gap: 14px; box-shadow: 0 18px 34px -24px rgba(10,24,38,.7); transition: box-shadow .5s; }
.fx-loyal.is-reward .loyal__card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), 0 18px 40px -22px color-mix(in srgb, var(--gold) 45%, transparent); }
.loyal__top { display: flex; align-items: center; justify-content: space-between; }
.loyal__brand { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.loyal__wallet { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(240,235,223,.5); border: 1px solid rgba(240,235,223,.22); border-radius: 999px; padding: 3px 8px; }
.loyal__cups { display: flex; gap: clamp(6px, 1.4vw, 12px); }
.cup { flex: 1; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 1px dashed rgba(240,235,223,.3); font-size: clamp(13px, 2vw, 18px); filter: grayscale(1); opacity: .38; transform: scale(.86); transition: opacity .45s var(--ease-boutique), transform .45s var(--ease-boutique), filter .45s, border-color .45s, background .45s; }
.cup.is-filled { opacity: 1; transform: scale(1); filter: none; border-style: solid; border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.cup--reward { border-color: color-mix(in srgb, var(--gold-lift) 45%, transparent); }
.fx-loyal.is-reward .cup--reward { animation: cup-win .7s var(--ease-boutique); background: var(--gold); }
@keyframes cup-win { 0% { transform: scale(1); } 45% { transform: scale(1.22) rotate(-6deg); } 100% { transform: scale(1); } }
.loyal__status { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: rgba(240,235,223,.66); }
.loyal__status b { color: var(--gold-lift); font-weight: 500; }
.loyal__acts { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .fx-loyal.is-reward .cup--reward { animation: none; } }

/* ---- 10 · Te Awa — featured listings rail ---- */
/* Five listings, all present at once on desktop — no carousel, no dots, nothing
   to operate. Narrow screens fall back to a plain swipe rail. */
.rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1100px) {
  .rail { grid-auto-flow: column; grid-auto-columns: min(210px, 72%); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .rail::-webkit-scrollbar { display: none; }
  .listing { scroll-snap-align: start; }
}
.listing { min-width: 0; border: 1px solid var(--sec-hair); border-radius: 13px; overflow: hidden; background: var(--sec-bg); display: grid; transition: transform .45s var(--ease-boutique), border-color .45s; }
.listing:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.listing__img { aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
.listing__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease-boutique); }
.listing:hover .listing__img img { transform: scale(1.05); }
.listing__tag { position: absolute; top: 9px; left: 9px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; background: color-mix(in srgb, var(--royal) 82%, transparent); color: var(--arctic); border-radius: 999px; padding: 3px 8px; }
.listing__b { padding: 13px 14px 15px; display: grid; gap: 5px; }
.listing__price { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--sec-display); }
.listing__loc { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.listing__meta { display: flex; gap: 10px; font-size: 12px; color: color-mix(in srgb, var(--sec-fg) 66%, transparent); border-top: 1px solid var(--sec-hair); padding-top: 8px; margin-top: 3px; }

/* ============================================================
   30 · Owed — flagship case (royal band, harbour-blue product)
   ============================================================ */
.case--owed .case__title--owed { position: relative; display: inline-block; font-size: clamp(52px, 7.4vw, 108px); line-height: .96; }
.owed-cross { position: absolute; right: -74px; top: -8px; width: 58px; opacity: .85; }
.owed-cross svg { width: 100%; height: auto; display: block; }
.oc-s { fill: var(--gold); }
.oc-s--dim { fill: color-mix(in srgb, var(--gold) 55%, transparent); }
.owed-strap { margin-top: 14px; max-width: 560px; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; color: color-mix(in srgb, var(--arctic) 78%, transparent); }

.owed-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--arctic) 16%, transparent); }
.owed-fact b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -.02em; color: var(--gold-lift); }
.owed-fact span { font-size: 11.5px; line-height: 1.4; color: color-mix(in srgb, var(--arctic) 66%, transparent); }

/* the check */
.owed__pick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.owed__calc { display: grid; gap: 10px; }
.owed__row { display: grid; grid-template-columns: minmax(120px, 150px) 1fr auto; gap: 10px; align-items: center; }
.owed__lbl { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 62%, transparent); line-height: 1.35; }
.owed__lbl i { font-style: normal; color: var(--gold); }
.owed__bar { height: 12px; border-radius: 7px; background: color-mix(in srgb, var(--sec-fg) 10%, transparent); overflow: hidden; }
.owed__bar i { display: block; height: 100%; width: 0%; border-radius: 7px; background: linear-gradient(90deg, var(--gold), var(--gold-lift)); transition: width .55s var(--ease-boutique); }
.owed__val { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--sec-display); min-width: 76px; text-align: right; }

.sec--arctic 




@media (max-width: 860px) {
    .owed-cross { right: -52px; top: -6px; width: 40px; }
  .owed__row { grid-template-columns: minmax(96px, 116px) 1fr auto; }
    }

/* the budget stage — slider, category rows, and the one number */
.owed__slider { display: grid; gap: 8px; margin-bottom: 16px; }
.owed__slider .owed__lbl { display: flex; justify-content: space-between; align-items: baseline; }
.owed__slider i { font-style: normal; color: var(--gold-lift); font-size: 11px; letter-spacing: .02em; }
.owed__slider input[type="range"] { width: 100%; accent-color: var(--gold); height: 22px; cursor: pointer; background: transparent; }
.owed__cats { display: grid; gap: 9px; }
.owed__today { margin-top: 16px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 13px; display: grid; gap: 3px; justify-items: center; text-align: center; transition: background .4s, border-color .4s; }
.owed__today-ey { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--sec-fg) 55%, transparent); }
.owed__today b { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -.03em; line-height: 1; color: var(--gold-lift); font-variant-numeric: tabular-nums; }
.owed__today-sub { font-size: 11.5px; color: color-mix(in srgb, var(--sec-fg) 62%, transparent); }
/* over-committed weeks go gold, never red — the product's posture, kept */
.owed__today.is-over { background: color-mix(in srgb, var(--gold) 9%, transparent); border-color: var(--gold); }

/* the deep story: same app, two front screens */
.owed-twins { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 6px; }
.owed-twins__col { border: 1px solid var(--sec-hair); border-radius: 12px; padding: 14px 16px; }
.owed-twins__head { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; }
.owed-twins__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.owed-twins__col li { font-size: 12.5px; color: color-mix(in srgb, var(--sec-fg) 78%, transparent); padding-left: 14px; position: relative; }
.owed-twins__col li::before { content: ''; position: absolute; left: 0; top: .52em; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 65%, transparent); }
.owed-twins__cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: color-mix(in srgb, var(--sec-fg) 50%, transparent); margin: 0 0 14px; text-align: center; }
@media (max-width: 540px) { .owed-twins { grid-template-columns: 1fr; } }

/* ============================================================
   31 · Palette studio (Services) — colour decisions, made visible
   ============================================================ */
.pal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 3vw, 40px); align-items: start; position: relative; }
.pal__panel { display: grid; gap: 10px; align-content: start; }
.pal__label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 6px 0 2px; }
.pal__label:first-child { margin-top: 0; }

.pal__seeds { display: flex; flex-wrap: wrap; gap: 7px; }
.pal-seed { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; min-height: 34px; border: 1px solid var(--sec-hair); border-radius: 999px; background: transparent; cursor: pointer; font: inherit; font-size: 11.5px; color: color-mix(in srgb, var(--sec-fg) 78%, transparent); transition: border-color .3s, color .3s; }
.pal-seed::before { content: ''; width: 15px; height: 15px; border-radius: 50%; background: var(--seed); flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.pal-seed:hover { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.pal-seed.is-active { border-color: var(--gold); color: var(--sec-display); }

.pal__hue { display: grid; gap: 5px; margin-top: 4px; }
.pal__hue span { font-size: 11px; color: color-mix(in srgb, var(--sec-fg) 58%, transparent); }
.pal__hue input { width: 100%; height: 22px; cursor: pointer; background: transparent; accent-color: var(--gold);
  /* the track is the wheel itself, so the control explains what it does */
  -webkit-appearance: none; appearance: none; }
.pal__hue input::-webkit-slider-runnable-track { height: 8px; border-radius: 6px; background: linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.pal__hue input::-moz-range-track { height: 8px; border-radius: 6px; background: linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.pal__hue input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -5px; border-radius: 50%; background: var(--paper); border: 2px solid var(--royal); cursor: pointer; }
.pal__hue input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--royal); cursor: pointer; }

.pal__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pal__note { font-size: 12.5px; line-height: 1.6; color: color-mix(in srgb, var(--sec-fg) 72%, transparent); margin: 2px 0 0; min-height: 3.2em; }
.pal__hint { font-size: 11.5px; line-height: 1.55; color: color-mix(in srgb, var(--sec-fg) 55%, transparent); margin: 2px 0 0; }

.pal__swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.pal-sw { aspect-ratio: 7 / 9; position: relative; border: 0; border-radius: 10px; cursor: pointer; font: inherit; padding: 8px 6px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; text-align: left; transition: transform .3s var(--ease-boutique), box-shadow .3s; box-shadow: 0 6px 16px -12px rgba(10,24,38,.5); }
.pal-sw:hover { transform: translateY(-4px); box-shadow: 0 14px 26px -16px rgba(10,24,38,.6); }
.pal-sw.is-copied { transform: translateY(-4px) scale(.97); }
.pal-sw__role { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.pal-sw__meta { display: grid; gap: 1px; margin-top: 2px; }
.pal-sw__hex { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .02em; }
.pal-sw__hsl { font-family: var(--font-mono); font-size: 7px; letter-spacing: .02em; opacity: .62; }
.pal-sw__aa { position: absolute; top: 7px; right: 7px; font-family: var(--font-mono); font-size: 6.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 5px; border-radius: 4px; border: 1px solid currentColor; opacity: .5; }
.pal-sw__aa.is-pass { opacity: .9; }

.pal__stage { display: grid; gap: 8px; }
.pal__score { justify-self: end; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em; padding: 4px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); color: color-mix(in srgb, var(--sec-fg) 72%, transparent); }
.pal__score b { color: var(--gold); font-weight: 500; }
/* fewer than four usable colours is worth saying out loud */
.pal__score.is-weak { border-color: color-mix(in srgb, var(--sec-fg) 26%, transparent); }
.pal__stagecap { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em; color: color-mix(in srgb, var(--sec-fg) 48%, transparent); margin: 0; text-align: center; }
.pal__copied { position: absolute; left: 50%; bottom: -14px; transform: translate(-50%, 8px); opacity: 0; pointer-events: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; padding: 6px 14px; border-radius: 999px; background: var(--royal); color: var(--arctic); transition: opacity .3s, transform .3s var(--ease-boutique); }
.pal__copied.is-on { opacity: 1; transform: translate(-50%, 0); }

/* the miniature page: every surface is a ROLE, not a swatch. Deep carries
   the bar, primary carries the hero, accent carries anything clickable. */
.pal-pv { border-radius: 14px; overflow: hidden; background: var(--p-light, #fff); box-shadow: 0 24px 50px -34px rgba(10,24,38,.65); border: 1px solid color-mix(in srgb, var(--sec-fg) 12%, transparent); transition: background .5s var(--ease-glide); }
.pal-pv__bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--p-deep); color: var(--p-on-deep); transition: background .5s var(--ease-glide), color .5s; }
.pal-pv__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--p-accent); flex: none; transition: background .5s; }
.pal-pv__brand { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: -.01em; }
.pal-pv__links { display: flex; gap: 7px; margin-left: auto; }
.pal-pv__links i { width: 24px; height: 3px; border-radius: 3px; background: currentColor; opacity: .38; }
.pal-pv__cta { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--p-accent); color: var(--p-on-accent); transition: background .5s, color .5s; }

/* the hero wears the primary colour, which is what makes switching harmony
   actually change the character of the page rather than a detail of it */
.pal-pv__hero { position: relative; padding: clamp(20px, 3vw, 32px); overflow: hidden; background: var(--p-primary); color: var(--p-on-primary); transition: background .5s var(--ease-glide), color .5s; }
.pal-pv__ey { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; opacity: .78; }
.pal-pv__h { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: clamp(21px, 3vw, 31px); line-height: 1.05; letter-spacing: -.03em; margin: 8px 0 0; }
.pal-pv__h em { font-family: var(--font-hand); font-style: normal; font-weight: 400; font-size: 1.25em; }
.pal-pv__b { position: relative; z-index: 1; font-size: 11.5px; line-height: 1.5; margin: 8px 0 0; max-width: 32ch; opacity: .8; }
.pal-pv__btns { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.pal-pv__btns b { font-size: 10px; font-weight: 500; padding: 8px 15px; border-radius: 999px; background: var(--p-accent); color: var(--p-on-accent); transition: background .5s, color .5s; }
.pal-pv__btns u { font-size: 10px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; opacity: .8; }
.pal-pv__orb { position: absolute; right: -52px; top: -40px; width: 176px; height: 176px; border-radius: 50%; background: radial-gradient(circle at 34% 34%, var(--p-secondary), var(--p-neutral)); opacity: .42; transition: background .5s; }
.pal-pv__ring { position: absolute; right: 22px; bottom: -34px; width: 96px; height: 96px; border-radius: 50%; border: 1px solid currentColor; opacity: .3; }

/* a derived tone, shifted off the primary: proof a palette needs more than six */
.pal-pv__band { display: flex; background: var(--p-band); color: var(--p-on-band); padding: 12px clamp(14px, 2vw, 20px); gap: clamp(14px, 3vw, 30px); transition: background .5s, color .5s; }
.pal-pv__band span { display: grid; gap: 1px; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .74; }
.pal-pv__band b { font-family: var(--font-display); font-size: 15px; letter-spacing: -.02em; opacity: 1; }

.pal-pv__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: clamp(12px, 2vw, 16px) clamp(14px, 2vw, 20px) clamp(16px, 2.2vw, 20px); }
.pal-pv__card { border-radius: 9px; padding: 8px; background: var(--p-card); color: var(--p-on-light); display: grid; gap: 2px; transition: background .5s, color .5s; }
.pal-pv__thumb { display: block; height: 32px; border-radius: 6px; background: var(--p-primary); transition: background .5s; }
.pal-pv__thumb--b { background: var(--p-secondary); }
.pal-pv__thumb--c { background: var(--p-accent); }
.pal-pv__card b { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; margin-top: 4px; }
.pal-pv__card i { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .08em; text-transform: uppercase; font-style: normal; opacity: .6; }

@media (max-width: 980px) {
  .pal { grid-template-columns: minmax(0, 1fr); }
  .pal__stage { order: -1; }
}
@media (max-width: 560px) {
  .pal__swatches { grid-template-columns: repeat(3, 1fr); }
  .pal-sw { aspect-ratio: 3 / 2; }
  .pal-pv__cards { grid-template-columns: 1fr 1fr; }
  .pal-pv__cards .pal-pv__card:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pal-pv, .pal-pv *, .pal-sw { transition: none !important; }
}

/* ============================================================
   32 · d3 — one case, two engagements
   ============================================================ */
.case--d3 .d3-sup { font-size: .42em; vertical-align: super; margin-left: 2px; color: var(--gold-lift); font-family: var(--font-mono); font-weight: 400; }

/* the strand switcher: an index of the two engagements, not tabs pretending
   to be navigation. Each carries its own roman numeral. */
.d3-strands { display: grid; gap: 8px; margin-top: 18px; }
.d3-strand { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: baseline; text-align: left; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--arctic) 16%, transparent); border-radius: 12px; background: transparent; cursor: pointer; font: inherit; transition: border-color .35s, background .35s; }
.d3-strand:hover { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.d3-strand.is-active { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.d3-strand__no { grid-row: 1 / 3; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--gold-lift); align-self: center; }
.d3-strand b { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--arctic); }
.d3-strand i { font-style: normal; font-size: 11.5px; color: color-mix(in srgb, var(--arctic) 58%, transparent); }




/* before and after, in the expanded story */
.d3-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.d3-two__col { border: 1px solid var(--sec-hair); border-radius: 12px; padding: 15px 17px; }
.d3-two__col--after { border-color: color-mix(in srgb, var(--gold) 50%, transparent); background: color-mix(in srgb, var(--gold) 6%, transparent); }
.d3-two__k { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; }
.d3-two__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.d3-two__col li { font-size: 12.5px; line-height: 1.45; color: color-mix(in srgb, var(--sec-fg) 76%, transparent); padding-left: 14px; position: relative; }
.d3-two__col li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 62%, transparent); }

@media (max-width: 760px) {
  .d3-two { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
}

/* screenshots inside a case story: examples in a grid, shown whole. Never
   cropped, because the layout is the thing being demonstrated. */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin: 18px 0 4px; align-items: start; }
.shot { margin: 0; display: grid; gap: 7px; }
.shot img { width: 100%; height: auto; display: block; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--sec-fg) 16%, transparent); box-shadow: 0 14px 30px -20px rgba(0,0,0,.6); transition: transform .5s var(--ease-boutique); }
.shot:hover img { transform: translateY(-3px); }
/* ---- Reserved image slots. Same grid as .shots, so a supplied photograph
   drops straight into a <figure class="shot"> without touching layout.
   The fixed aspect ratio means nothing shifts when the image arrives. ---- */
.shots--reserved .slot { aspect-ratio: 16 / 10; border-radius: 9px; }
.shots--reserved .slot span { line-height: 1.5; }
.shot figcaption { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .03em; line-height: 1.5; color: color-mix(in srgb, var(--sec-fg) 55%, transparent); }
/* Invisible scroll anchor: lets a section keep an extra id without
   affecting layout. */
.sr-anchor { display:block; height:0; overflow:hidden; }