*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ==========================================================================
   Bedka HQ design system — full token set, inlined (2026-09-18).
   Source of truth: ~/Documents/Claude/Projects/Bedka Studio/brand/design-system/tokens/*.css +
   semantic.css. Per the handoff README, "the tokens win." Inlined here to
   keep this a single self-contained file (no build step, nothing extra to
   serve). Consume SEMANTIC ROLES (--text-*, --surface-*, --border-*), not
   the raw ramps. Legacy short names (--bg, --card, --sage, --gold, --dark…)
   are kept as aliases onto the roles so the existing rules keep working.
   Type: Francois One (display, 400 ONLY — never synth-bold; hierarchy from
   size), Noto Sans (body / UI), Spectral (editorial italic accent only), Hanken Grotesk
   (--font-mono role: labels, counters, numbers — proportional, needs
   tabular-nums to align figures in a column).
   ========================================================================== */
:root {
  /* — RAW RAMPS — consume the semantic roles below, not these directly — */
  --ink-900:#141A18;--ink-800:#1F2624;--ink-700:#2B3330;--ink-600:#3D4A46;--ink-500:#4E5B57;--ink-400:#6B7975;--ink-300:#B3C0BC;--ink-200:#CBD8D4;
  --mint-100:#ECF5F3;--mint-200:#DCECE9;--mint-300:#CBDCD7;--mint-400:#B9CDC8;
  --paper-000:#FFFFFF;--paper-050:#FAFAF7;--paper-100:#F1F1EC;
  --lime-100:#F6FDD4;--lime-200:#EDFBA8;--lime-400:#E3FA74;--lime-500:#D9F94A;--lime-600:#BFE31F;--lime-700:#8B9F16;
  --berry-100:#F8E5EA;--berry-200:#F0C5D0;--berry-400:#D94A6A;--berry-500:#B92F50;--berry-600:#96243F;--berry-700:#731C32;
  --danger-100:#FDEAE4;--danger-400:#F2542D;--danger-500:#D93A0F;--danger-600:#AE2C08;--danger-700:#7F2006;
  /* REBRAND (2026-09-19): violet + gold, pulled from the hero ribbon artwork
     (violet mean #613E87 / streak gold #F8BC7F). These override the lime/berry
     accent system at the role layer below; the ink/paper neutrals are kept. */
  --violet-100:#F2ECFB;--violet-200:#DFD2F4;--violet-300:#C4ABEC;--violet-400:#A07EE0;--violet-500:#7A54C9;--violet-600:#5B3E8F;--violet-700:#3F2A63;
  --gold-100:#FBEEDC;--gold-200:#F6DBB4;--gold-300:#F0C078;--gold-400:#EAA24C;--gold-500:#DD8A2C;--gold-600:#B56C17;--gold-700:#874F12;
  --lavender-100:#F4F2FA;--lavender-200:#E9E5F5;--lavender-300:#DAD3EC;
  --violet-black:#0B0912;--violet-charcoal:#15111F;

  /* — TYPE — */
  --font-display:"Francois One","Haettenschweiler",Impact,sans-serif;
  --font-body:"Noto Sans",system-ui,"Helvetica Neue",Arial,sans-serif;
  --font-editorial:"Spectral",Georgia,"Times New Roman",serif;
  --font-mono:"Hanken Grotesk","Helvetica Neue",system-ui,sans-serif;
  --fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
  /* rem (60/44/32/23/19/17/15/12.5px at the 16px default) so text follows the visitor's browser text size */
  --fs-display:3.75rem;--fs-h1:2.75rem;--fs-h2:2rem;--fs-h3:1.4375rem;--fs-lg:1.1875rem;--fs-base:1.0625rem;--fs-sm:0.9375rem;--fs-xs:0.78125rem;
  --lh-tight:0.96;--lh-snug:1.08;--lh-heading:1.18;--lh-body:1.55;--lh-loose:1.7;
  --ls-display:-0.02em;--ls-headline:-0.01em;--ls-heading-sm:0;--ls-label:0.12em;--ls-eyebrow:0.18em;

  /* — SPACE / RADIUS / SHADOW / MOTION — */
  --page-max:1120px;--page-gutter:24px;
  --radius-xs:4px;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--radius-pill:999px;
  --radius-button:16px;--radius-input:14px;--radius-card:22px;--radius-feature:28px;
  --shadow-card:0 6px 18px rgba(20,26,24,.08);
  --shadow-lift:0 14px 34px rgba(20,26,24,.12);
  --shadow-slab:4px 4px 0 rgba(20,26,24,.10);
  --dur-fast:140ms;--dur-base:200ms;--dur-slow:320ms;--dur-reveal:480ms;
  --ease-standard:cubic-bezier(.2,.6,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --press-scale:0.985;

  /* — SEMANTIC ROLES — */
  --text-strong:var(--ink-900);--text-body:var(--ink-700);--text-muted:var(--ink-600);--text-faint:var(--ink-500);
  --text-on-ink:var(--paper-050);--text-on-ink-muted:rgba(250,250,247,.72);
  --text-editorial:var(--violet-600);--text-attention:var(--violet-500);--text-attention-on-ink:var(--violet-300);
  --text-link:var(--violet-600);--text-link-hover:var(--violet-700);
  --surface-page:var(--lavender-100);--surface-card:var(--paper-050);--surface-white:var(--paper-000);--surface-sunken:var(--lavender-200);
  --surface-ink:var(--violet-black);--surface-charcoal:var(--violet-charcoal);--surface-attention:var(--violet-100);
  --accent:var(--gold-500);--accent-hover:var(--gold-400);--accent-press:var(--gold-600);
  --border-subtle:var(--lavender-300);--border-regular:var(--ink-200);--border-strong:var(--ink-900);
  --highlight-marker:var(--gold-300);

  /* — LEGACY ALIASES (kept so the existing rules keep working) — */
  --bg:var(--surface-page);--card:var(--surface-card);--white:var(--surface-white);
  --ink:var(--text-strong);--muted:var(--text-muted);
  --accent-dark:var(--accent-hover);
  --sage:var(--text-editorial);--sage-rgb:91,62,143;--berry-chip:var(--surface-attention);--gold:var(--gold-300);
  --dark:var(--surface-ink);--dark-2:var(--surface-charcoal);--dark-berry:var(--violet-700);
  --dark-ink:var(--text-on-ink);--dark-ink-muted:var(--text-on-ink-muted);
  --border-input:var(--ink-400);
  --font-heading:var(--font-display);
  /* Focus rings: lime on dark, ink on light. The ink ring keeps the audited
     .60 alpha — the handoff's --ring-focus-ink (.18) measures ~1.4:1 and fails. */
  --ring-focus:0 0 0 3px rgba(221,138,44,.65);
  --ring-focus-ink:0 0 0 3px rgba(20,26,24,.60);
}

/* Keyboard focus ring — per-surface, required scope (portfolio-site convention).
   Default = ink ring for light surfaces; every dark section overrides to lime. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus-ink);
  border-radius: 4px;
}
.hero :focus-visible,
.case-panel :focus-visible,
footer :focus-visible {
  box-shadow: var(--ring-focus);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

::selection { background: var(--gold-300); color: var(--ink-900); }

/* Hanken Grotesk fills the --font-mono role but is proportional — figures
   need tabular-nums to line up. Applies to the tier/counter labels. */
.footer-copy { font-variant-numeric: tabular-nums; }

h1, h2, h3 { text-wrap: balance; }

.js .fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

.js .fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---- NAV ---- */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* 0.97 alpha per the portfolio site's Pass-4 fix: --muted nav links stay ≥7:1
     even composited over the hero's darkest gradient point. */
  background: rgba(233, 229, 245, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(20, 26, 24, 0.08);
  transition: box-shadow 0.3s ease;
}

nav.scrolled { box-shadow: 0 2px 20px rgba(20, 26, 24, 0.08); }

nav .nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav .logo {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 400;              /* Francois One has one weight; hierarchy is size */
  color: var(--ink);
  text-decoration: none;
  letter-spacing: var(--ls-heading-sm);
}

nav .logo { display: flex; align-items: center; }
nav .logo img { display: block; height: 64px; width: auto; margin-left: -6px; } /* cancels the SVG's built-in left padding so the B lines up with the hero text */
/* Nav shares the hero's side padding so the logo and hero content share one left edge */
nav .nav-inner { max-width: none; padding-inline: clamp(24px, 7vw, 96px); }
@media (max-width: 640px) { nav .nav-inner { padding-inline: 20px; } }

nav .nav-links { display: flex; gap: 30px; align-items: center; }

nav .nav-links a {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
}

nav .nav-links a:hover { color: var(--ink); }
nav .nav-links a:not(.nav-cta):active { opacity: 0.6; }

.nav-cta {
  background: var(--accent);
  color: var(--ink) !important;
  padding: 11px 22px;
  border-radius: var(--radius-button);   /* a button is a rounded rect, not a pill */
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  transition: background var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard) !important;
}

.nav-cta:hover { background: var(--accent-dark); transform: translateY(-1px); }
.nav-cta:active { transform: scale(var(--press-scale)); background: var(--accent-press); }

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  border-radius: 2px;
}

/* ==========================================================================
   PAGE GLASS — the ribbon shader runs behind the hero, problem AND services
   sections. `.page-glass` is the tall wrapper hero.js's layout:'page' expects:
   the canvas sticks one screen tall inside it, the artwork scrolls through,
   the vortex unwinds, and the art dissolves into --surface-ink before the
   wrapper ends. Services and everything after it stay light mint, untouched.
   The <img> inside .hero-art is the no-WebGL fallback; hero.js adds .is-ready
   to the container once the texture is live, which hides the img and retires
   the CSS glow blobs.
   ========================================================================== */
.page-glass {
  /* TRUE BLACK ground, not --ink-900. The brand ink (#141A18) read as a
     murky grey-green wash behind the artwork; black lets the glass' own
     colour be the only colour in the region. --glass-ground-rgb is the
     single source of truth: every scrim below composites toward it, and the
     `background` option passed to mountVortexHero MUST be the same value,
     or the shader's dissolve will not match the wrapper behind it. */
  --glass-ground-rgb: 0, 0, 0;
  position: relative;
  isolation: isolate;
  background: rgb(var(--glass-ground-rgb));
}

.hero-art { position: absolute; inset: 0; z-index: 0; }

.hero-art img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  display: block;
  object-fit: cover;
  object-position: 55% 42%;
  /* No-WebGL fallback only. The shader normally dissolves the art's left
     third into the ink (the `fade` option) and the CSS scrim only softens
     what is left; a raw full-bleed <img> has no such dissolve, so the
     headline landed on the artwork's bright panes. Dimming the still to 45%
     keeps it >=7:1 for the body copy and >=4.8:1 for the berry italic even
     against a pure-white pane. Costs nothing once the canvas takes over. */
  filter: brightness(0.45);
}

.hero-art.is-ready img { visibility: hidden; }

/* The CSS glow blobs were the old hero's light. Once the shader is live the
   artwork owns the light — keep the markup as the fallback, hide it here. */
.page-glass:has(.hero-art.is-ready) .hero-glow { display: none; }

/* ---- HERO (dark, cinematic, glass behind, copy left) ---- */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  background: transparent;
  /* Trimmed from 150/110: at 620px of measure this headline sets in three
     lines and the hero lands at 909px, so both CTAs stay above the fold on
     a 1440x900 screen. At 560px (the reference spec's measure) it wrapped to
     four lines, pushed the hero to 1013px and buried the CTAs. */
  padding-block: 140px 57px;
  padding-inline: clamp(24px, 7vw, 96px);
  overflow: hidden;
  color: var(--dark-ink);
}

/* NO desktop scrim. The artwork falls off to pure black on its own and the
   shader's `fade` dissolves whatever is left of the left third, so a scrim
   has nothing to do: sampled with none at all over 14s of live frames, the
   brightest glass under any hero text is 9.85:1 against --text-on-ink at
   1440 and 7.72:1 at 1024 (worst point is the headline's right edge; every
   other element sits over literal rgb(0,0,0)). The old gradient WAS the
   "murky wash" — it is gone. This element now exists only to carry the
   mobile veil below, where the copy really does sit on top of the art. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* The "screen glow": two soft light fields drifting very slowly across the dark
   stage — berry warmth from below, charcoal lift from above. Pure CSS, no
   images, no stock. Decorative only (aria-hidden), paused under reduced motion. */
.hero-glow { position: absolute; inset: -20%; pointer-events: none; }

.hero-glow::before,
.hero-glow::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.hero-glow::before {
  width: 70vw; height: 70vw;
  min-width: 620px; min-height: 620px;
  left: 50%; top: 62%;
  background: radial-gradient(circle at center, rgba(120,80,205,0.85) 0%, rgba(120,80,205,0) 62%);
  animation: drift-a 26s ease-in-out infinite alternate;
}

.hero-glow::after {
  width: 56vw; height: 56vw;
  min-width: 480px; min-height: 480px;
  left: 8%; top: -12%;
  background: radial-gradient(circle at center, rgba(43,51,48,0.9) 0%, rgba(43,51,48,0) 65%);
  animation: drift-b 32s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate(-60%, -40%) scale(1); }
  to   { transform: translate(-40%, -55%) scale(1.12); }
}

@keyframes drift-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(14%, 10%) scale(1.08); }
}

/* Fluid measure: a fixed 620px would still be 620px at 1024, putting the
   end of the headline right on top of the spiral (anchor x 0.68). Capping at
   44vw holds the copy's right edge at ~0.51 of the width all the way down to
   the 720px breakpoint, which keeps it clear of the artwork's bright panes
   (at 48vw the headline's right edge measured 3.6:1 at 1024px). */
.hero-content { position: relative; z-index: 1; max-width: min(620px, 44vw); }

.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 26px;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.9rem, 8vw, 5rem);
  font-weight: 400;              /* Francois One — size carries the weight */
  line-height: 1.0;
  letter-spacing: var(--ls-display);
  margin-bottom: 14px;
  color: var(--dark-ink);
}

/* Editorial device: the last phrase of the headline set in the Spectral
   berry italic against the condensed display face — the system's signature
   accent. "de cine." literally reads as cinema. */
.hero h1 .h1-accent {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

.hero-sub-en {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--dark-ink-muted);
  letter-spacing: 0.04em;
  margin-bottom: 30px;
}

.hero-tagline {
  font-size: 1.08rem;
  color: var(--dark-ink);
  max-width: 52ch;
  margin: 0 0 40px;
  line-height: 1.7;
}

.hero-proof {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.06em;
  border: 1px dashed rgba(223, 210, 244, 0.45);
  border-radius: 100px;
  padding: 8px 18px;
  margin-bottom: 36px;
}

.hero-actions { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; }

.cta-pill {
  display: inline-block;
  background: var(--accent);
  color: var(--ink);
  padding: 16px 36px;
  border-radius: var(--radius-button);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);
}

.cta-pill:hover { background: var(--accent-dark); transform: translateY(-2px); }
.cta-pill:active { transform: scale(var(--press-scale)); background: var(--accent-press); }

.cta-ghost {
  display: inline-block;
  background: rgba(250,250,247,0.06);
  border: 1px solid rgba(250,250,247,0.24);
  color: var(--dark-ink);
  padding: 15px 30px;
  border-radius: var(--radius-button);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);
}

.cta-ghost:hover { background: rgba(250,250,247,0.12); border-color: rgba(250,250,247,0.4); transform: translateY(-2px); }
.cta-ghost:active { transform: scale(var(--press-scale)); }

/* ---- SECTIONS ---- */
section { padding: 62px 24px; }

.section-label {
  display: inline-block;
  font-family: var(--font-mono);          /* Hanken — labels live in the mono register */
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--sage);
  background: var(--berry-chip); /* berry-100 chip — berry-600 text (AAA) */
  padding: 5px 13px;
  border-radius: var(--radius-pill);      /* metadata stays a pill */
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  font-weight: 400;              /* Francois One display */
  letter-spacing: var(--ls-headline);
  margin-bottom: 14px;
  line-height: 1.06;
}

.section-subtitle {
  color: var(--ink);
  font-size: 1.02rem;
  max-width: 580px;
  line-height: 1.7;
  margin-bottom: 8px;
}


/* ---- SERVICES: the tier ladder ----
   Lives INSIDE .page-glass now: the ribbon artwork runs behind it and
   dissolves to black across this section (pageFade). Everything here is a
   translucent dark panel over the canvas — no backdrop-filter (expensive
   over WebGL), just alpha fills that read as smoked glass on black. */
.services { background: transparent; position: relative; z-index: 1; }

.services-head { margin-bottom: 52px; }
.services .section-title { color: var(--text-on-ink); text-shadow: 0 1px 22px rgba(0,0,0,.5); }
.services .section-subtitle {
  color: var(--text-on-ink-muted);
  /* The artwork can be bright violet/gold right behind this line (esp. on
     phones, where there is no horizontal fade). A soft shadow keeps it
     readable at any point of the dissolve without a visible scrim. */
  text-shadow: 0 1px 16px rgba(0,0,0,.6), 0 0 3px rgba(0,0,0,.45);
}
.services :focus-visible { box-shadow: var(--ring-focus); }

/* Three cards in a row (after victoryspringsrg.com/how-it-works): pill label,
   line icon, ghost numeral, and a violet / gold glow that alternates. */
.tiers {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
/* Hairline joining the cards at pill height — reads as one sequence */
.tiers::before {
  content: ''; position: absolute; left: 4%; right: 4%; top: 46px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(250,250,247,.22) 15%, rgba(250,250,247,.22) 85%, transparent);
  pointer-events: none;
}

.tier {
  --glow: 160, 126, 224;           /* violet-400 */
  --tone: var(--violet-300);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  padding: 32px 28px 36px;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-standard);
}
.tier--gold { --glow: 234, 162, 76; --tone: var(--gold-300); }   /* gold-400 */
.tier:hover { transform: translateY(-3px); }

.tier-ghost {
  position: absolute; top: -18px; right: 14px;
  font-family: var(--font-display); font-size: 7.5rem; line-height: 1;
  color: rgba(250, 250, 247, 0.07);
  pointer-events: none;
}

.tier-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--tone);
  background: rgba(var(--glow), 0.14);
  border: 1px solid rgba(var(--glow), 0.40);
  font-variant-numeric: tabular-nums;
}
.tier-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }

.tier-icon { display: block; width: 44px; height: 44px; margin: 28px 0 22px; color: var(--tone); }

.tier h3 {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 400;              /* Francois One display */
  letter-spacing: var(--ls-heading-sm);
  margin-bottom: 10px;
  color: var(--text-on-ink);
}

.tier p { color: rgba(250,250,247,.85); font-size: 0.96rem; line-height: 1.65; margin-bottom: 18px; }

.tier ul { list-style: none; display: grid; gap: 10px; }

.tier li {
  position: relative;
  padding-left: 20px;
  font-size: 0.92rem;
  color: rgba(250,250,247,.72);
  line-height: 1.5;
}

.tier li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--glow), 0.18);
  border: 2px solid var(--tone);
}

.tiers-note {
  margin-top: 26px;
  max-width: 640px;
}

.tiers-note p { font-size: 0.95rem; color: var(--text-on-ink-muted); line-height: 1.7; }

/* ---- PROJECTS / CASE STUDY ---- */
.projects { background: var(--bg); }   /* mint — the page alternates white/mint around the dark stages */

.projects-head { margin-bottom: 52px; }

/* The case panel is literally a screen: a dark rounded stage on the light page. */
.case-panel {
  position: relative;
  background: radial-gradient(130% 110% at 80% 0%, var(--dark-2) 0%, var(--dark) 70%);
  border-radius: var(--radius-feature);
  color: var(--dark-ink);
  padding: clamp(36px, 5.5vw, 64px);
  overflow: hidden;
}

.case-panel::after {
  /* faint berry floor-glow, same cinematic language as the hero */
  content: '';
  position: absolute;
  left: 50%; bottom: -30%;
  width: 90%; height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(120,80,205,0.5) 0%, rgba(120,80,205,0) 70%);
  filter: blur(60px);
  pointer-events: none;
}

.case-inner { position: relative; z-index: 1; }

/* Two (or more) project panels stack in this section — one dark stage each. */
.case-panel + .case-panel { margin-top: 48px; }

.concept-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);                          /* berry-200 — 11.42:1 on ink-900 (AAA) */
  background: rgba(223, 210, 244, 0.12);       /* berry-200 tint chip on dark — AAA pairing from portfolio site */
  border: 1px solid rgba(223, 210, 244, 0.35);
  padding: 8px 16px;
  border-radius: 100px;
  margin-bottom: 8px;
}

.concept-chip { margin-bottom: 22px; }

.case-title-en {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--dark-ink-muted);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 24px;
}

.case-intro { font-size: 1.02rem; line-height: 1.75; color: var(--dark-ink); max-width: 62ch; margin-bottom: 42px; }

.case-grid {
  display: grid;
  grid-template-columns: 1fr;     /* summary card stacks above the reel at every width */
  gap: 32px;
}

.case-facts { display: grid; gap: 26px; }

.case-fact dt,
.screens-head {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}

.screens-head { display: block; margin-bottom: 0; }

.case-fact dd { font-size: 0.95rem; line-height: 1.7; color: var(--dark-ink); }

/* Placeholder slot: content Betsy will supply. Deliberate, visible, honest —
   same "Próximamente" language as the rest of Bedka. */
.case-slot {
  border: 1px dashed rgba(250, 250, 247, 0.35);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 8px;
}
/* A slot holding real case-study copy: solid edge, readable body text. */
.case-slot--filled { border-style: solid; border-color: rgba(250, 250, 247, 0.18); padding: 20px 22px; margin-top: 0; }
.case-slot--filled .concept-chip { margin-bottom: 14px; }
a.concept-chip { text-decoration: none; }
a.concept-chip:hover { text-decoration: underline; text-underline-offset: 3px; }
.case-slot.case-slot--filled p { font-size: 0.92rem; font-style: normal; line-height: 1.7; color: var(--dark-ink); }
.case-slot--filled p + p { margin-top: 12px; }

.case-slot .slot-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}

.case-slot p { font-size: 0.8rem; font-style: italic; color: var(--dark-ink-muted); line-height: 1.55; }

/* Screens column: dashed film-frames waiting for real captures. */
.case-screens { display: grid; gap: 18px; }

.screen-slot {
  aspect-ratio: 16 / 10;
  border: 1px dashed rgba(250, 250, 247, 0.35);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(250, 250, 247, 0.04);
  text-align: center;
  padding: 16px;
}

.screen-slot .frame-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(250,250,247,0.4);
  background: rgba(250,250,247,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen-slot span.caption {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dark-ink-muted);
  font-weight: 600;
}

/* A real capture in a screens slot — same frame as .screen-slot. Holds an
   <img> or a .case-reel <video> (see case-study-guidelines §5). */
.case-shot {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(250, 250, 247, 0.04);
}

.case-shot img,
.case-shot video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The reel opens the live site through an overlay link (its pause button can't
   sit inside a link); the toggle stays above it. */
.shot-link { display: block; height: 100%; }
.shot-link--overlay { position: absolute; inset: 0; z-index: 1; }
.case-shot .reel-toggle { z-index: 2; }

/* Pause/play toggle for a .case-reel video — WCAG 2.2.2. Bottom-right corner,
   readable on the dark panel; the page's shared focus-ring convention (via
   .case-panel :focus-visible above) covers keyboard focus. */
.reel-toggle {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(250, 250, 247, 0.4);
  border-radius: 50%;
  background: rgba(10, 8, 16, 0.55);
  color: var(--dark-ink);
  cursor: pointer;
}

.reel-toggle:hover { background: rgba(10, 8, 16, 0.75); }
.reel-toggle .icon-play { display: none; }
.reel-toggle[aria-pressed="true"] .icon-pause { display: none; }
.reel-toggle[aria-pressed="true"] .icon-play { display: block; }

/* Designed slot for the future "Launch interactive prototype" button (deferred —
   Gate 2). When the prototype is exported and deployed, this pill becomes a live
   link in this exact spot. */
.case-actions { margin-top: 44px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.case-actions--center { justify-content: center; }

.proto-slot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(250, 250, 247, 0.06);
  border: 1px dashed rgba(250, 250, 247, 0.35);
  color: var(--dark-ink-muted);
  padding: 15px 30px;
  border-radius: var(--radius-button);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: not-allowed;
}

.proto-slot svg { opacity: 0.7; }

/* ---- UPCOMING (light continuation of projects) ---- */
.upcoming-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.upcoming-card {
  border: 1px dashed rgba(20, 26, 24, 0.28);
  border-radius: var(--radius-card);
  background: rgba(var(--sage-rgb), 0.06); /* berry blush — muted text 8.36:1 on it (AAA) */
  padding: 34px 32px;
}

.upcoming-card .upcoming-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 10px;
}

.upcoming-card p { font-size: 0.95rem; color: var(--ink); line-height: 1.65; }

/* ---- CONTACT ---- */
.contact { background: var(--bg); }

.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.contact-intro p { font-size: 1.02rem; line-height: 1.75; color: var(--ink); margin-bottom: 22px; max-width: 46ch; }

.direct-mail {
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.7;
}

.direct-mail a, .upcoming-card a {
  color: var(--sage);              /* berry-600 — 8.59:1 on mint (AAA) */
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.direct-mail a:hover, .upcoming-card a:hover { color: var(--ink); }

.contact-form {
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 40px 38px;
}

.form-field { margin-bottom: 22px; }

.form-field label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 4px;
}

.form-field input,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--border-input);  /* ink-400 — ≥3:1 non-text on white */
  border-radius: 14px;                      /* --radius-input */
  padding: 12px 16px;
  min-height: 46px;                         /* ≥ --control-h-md tap target */
  transition: border-color 0.2s;
}

.form-field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

.form-field input:hover,
.form-field textarea:hover { border-color: var(--ink); }

.form-field input:focus-visible,
.form-field textarea:focus-visible { border-color: var(--ink); }

/* Honeypot — invisible to people, tempting to bots. Formspree drops
   submissions where _gotcha has a value. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-submit {
  width: 100%;
  background: var(--accent);
  color: var(--ink);
  border: none;
  border-radius: var(--radius-button);
  padding: 16px 34px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard);
  min-height: 54px;                         /* --control-h-lg hero CTA height */
}

.form-submit:hover { background: var(--accent-dark); transform: translateY(-1px); }
.form-submit:active { transform: scale(var(--press-scale)); background: var(--accent-press); }

.form-note {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}

/* ---- FOOTER ---- */
footer {
  background: var(--dark);
  color: var(--dark-ink-muted);
  padding: 56px 24px 36px;
}

.footer-logo {
  font-family: var(--font-heading);
  font-weight: 400;              /* Francois One */
  font-size: 1.45rem;
  color: var(--dark-ink);
  margin-bottom: 10px;
}
.footer-logo img { display: block; height: 72px; width: auto; }

.footer-tagline { font-size: 0.88rem; color: var(--dark-ink); margin-bottom: 26px; }

.footer-bedka {
  display: inline-block;
  font-size: 0.82rem;
  color: var(--gold);              /* berry-200 — 11.42:1 on ink-900 (AAA) */
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: 26px;
}

.footer-bedka:hover { color: var(--dark-ink); }

/* Tagline + nav, and service line + about link, share a row; wraps on phones */
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 24px;
  margin-bottom: 26px;
}
.footer-row > * { margin-bottom: 0; }
.footer-row > p { flex: 1 1 240px; }  /* text wraps before the right-side link drops */

.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-nav a { font-size: 0.9rem; color: var(--dark-ink-muted); text-decoration: none; }
.footer-nav a:hover { color: var(--dark-ink); }

.footer-divider {
  height: 1px;
  background: rgba(250, 250, 247, 0.12);
  margin: 0 0 20px;
}

.footer-phone { color: inherit; }
.footer-copy { font-size: 0.72rem; color: var(--dark-ink-muted); }

/* ---- PROBLEM ("Sound familiar?") — inside the glass wrapper, so dark ---- */
.problem {
  position: relative;
  z-index: 1;
  background: transparent;
  color: var(--text-on-ink);
}

/* No scrim on desktop: the shader's own left-side dissolve (fade [0.34,0.66]) keeps
   this copy column on near-black, so the ribbon art flows uninterrupted from the
   hero into this section. A flat veil is kept for phones only (see @media 720). */
.problem::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.problem :focus-visible { box-shadow: var(--ring-focus); }

.problem-inner { max-width: 720px; }

.problem .section-title { color: var(--text-on-ink); }

.problem-list { list-style: none; margin: 36px 0 30px; display: grid; gap: 20px; }

.problem-list li {
  position: relative;
  padding-left: 26px;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--text-on-ink);
}

/* On ink the filled berry-100 dot went muddy against the glass; a lime ring
   is the system's on-dark marker (same accent as the CTA and focus ring). */
.problem-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--accent);
}

/* The turn: the section's answer, set in the system's editorial italic.
   berry-600 is a light-surface role — on ink the on-ink berry (berry-200)
   is the audited counterpart. */
.problem-turn {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--text-attention-on-ink);
  max-width: 30ch;
}

/* ---- PROCESS (four steps) ---- */
.process { background: var(--white); }

.process-head { margin-bottom: 44px; }

/* Workflow diagram: a vertical chain of nodes joined by flowing connectors,
   styled like an automation canvas (trigger -> actions -> output).
   Deliberately no cards, so it reads differently from the Services row. */
.flow {
  --node: 88px; --flow-gap: 55px;
  list-style: none; padding: 0;
  max-width: 620px;
  /* Equal rows so every connector between nodes is the same length */
  display: grid; grid-auto-rows: 1fr; row-gap: var(--flow-gap);
}
.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) 1fr;
  column-gap: 28px;
  align-content: start;          /* keep copy tight when the row is taller than it */
}

.flow-node {
  position: relative; z-index: 1;
  grid-row: 1 / span 3;
  display: grid; place-items: center;
  width: var(--node); height: var(--node);
  border-radius: 24px;
  background: rgba(11, 9, 18, 0.72);
  border: 1px solid rgba(196, 171, 236, 0.45);
  color: var(--violet-300);
  box-shadow: 0 0 0 6px rgba(196, 171, 236, 0.06), 0 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-standard);
}
.flow-node svg { width: 38px; height: 38px; }
.flow-step:hover .flow-node { transform: translateY(-3px); border-color: rgba(196, 171, 236, 0.85); }

/* Port badge with the step number, pinned to the node corner */
.flow-port {
  position: absolute; top: -10px; right: -10px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--violet-300); color: var(--violet-black);
}

/* Connector: dashed line flowing down from each node to the next, with an arrowhead */
.flow-step:not(:last-child)::after {
  content: ''; position: absolute; pointer-events: none;
  top: calc(var(--node) + 14px); bottom: calc(10px - var(--flow-gap)); left: calc(var(--node) / 2 - 1px); width: 2px;
  background: repeating-linear-gradient(180deg, rgba(196,171,236,.75) 0 8px, transparent 8px 14px);
  background-size: 2px 28px;
  animation: flow-dash 1.2s linear infinite;
}
.flow-step:not(:last-child)::before {
  content: ''; position: absolute; pointer-events: none;
  bottom: calc(2px - var(--flow-gap)); left: calc(var(--node) / 2 - 5px);
  border: 5px solid transparent; border-top: 8px solid rgba(196,171,236,.85);
}
@keyframes flow-dash { to { background-position: 0 28px; } }

/* Output node: gold, with a slow pulse — the thing that ships */
.flow-step--live .flow-node {
  color: var(--gold-300);
  border-color: rgba(240, 192, 120, 0.7);
  box-shadow: 0 0 0 6px rgba(234, 162, 76, 0.10), 0 0 36px rgba(234, 162, 76, 0.35);
  animation: flow-pulse 2.6s var(--ease-standard) infinite;
}
.flow-step--live .flow-port { background: var(--gold-300); }
@keyframes flow-pulse {
  50% { box-shadow: 0 0 0 10px rgba(234, 162, 76, 0.04), 0 0 48px rgba(234, 162, 76, 0.5); }
}

.flow-tag {
  display: block;
  margin: 8px 0 8px;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--violet-300);
}
.flow-step--live .flow-tag { color: var(--gold-300); }

.flow-step h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 400;              /* Francois One — size carries the weight */
  line-height: 1.15;
  margin-bottom: 8px;
  color: var(--text-on-ink);
}
.flow-step p { font-size: 1rem; color: var(--text-on-ink-muted); line-height: 1.6; max-width: 44ch; }

@media (max-width: 720px) {
  .flow { --node: 72px; --flow-gap: 41px; }
  .flow-step { column-gap: 20px; }
  .flow-node { border-radius: 20px; }
  .flow-node svg { width: 30px; height: 30px; }
  .flow-step h3 { font-size: 1.25rem; }
  .flow-step p { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-step::after, .flow-step--live .flow-node { animation: none; }
}

/* ---- PRICING ---- */
.pricing { background: var(--white); }

.pricing-head { margin-bottom: 44px; }

.price-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 34px 30px;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}

.price-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--violet-300);
}

/* The middle tier is what most small businesses actually buy — one card
   carries the emphasis so the eye has somewhere to land. Violet border +
   a soft violet lift; the chip names it plainly. */
.price-card.featured {
  border-color: var(--violet-400);
  box-shadow: 0 14px 34px rgba(122, 84, 201, 0.16);
}

.price-chip {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold-700);
  background: var(--gold-100);
  border: 1px solid var(--gold-200);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.price-card h3 {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 400;              /* Francois One */
  letter-spacing: var(--ls-heading-sm);
  margin-bottom: 2px;
}

.price-role {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 20px;
}

.price-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.85rem;
  color: var(--ink);
  margin-bottom: 22px;
  line-height: 1;
}

.price-amount .from {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 6px;
}

.price-card ul { list-style: none; display: grid; gap: 10px; margin-top: auto; }

.price-card li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
}

.price-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--berry-chip);
  border: 2px solid var(--sage);
}

/* Founding offer: an honest count, no countdown (pricing plan §6, 2026-09-26).
   Update "0 of 5" by hand, only when it's true. */
.founding {
  max-width: 640px;
  margin-bottom: 22px;
  padding: 20px 24px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(223, 210, 244, 0.42);
  background: rgba(250, 250, 247, 0.07);
}
.founding h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: var(--ls-heading-sm);
  margin-bottom: 8px;
}
.founding p { font-size: 0.95rem; line-height: 1.7; color: var(--text-on-ink-muted); }
.founding-count {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-on-ink);
}

/* The quality baseline, stated once for every tier (pricing plan §2). */
.pricing-baseline {
  max-width: 640px;
  margin-bottom: 30px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-on-ink);
}

/* While the founding offer runs, the regular price is shown struck and small,
   and the founding price takes the big slot. When the 5 are booked, remove
   .price-was / .price-now-label and put the regular price back in .price-now. */
.price-was {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-on-ink-muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  margin-bottom: 6px;
}
.price-now { display: block; }
.price-now-label {
  display: block;
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-300);
}

/* Text for screen readers only (the strike-through itself isn't announced). */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Starter: the entry option, a slim row under the three tiers so it
   doesn't compete with them. No founding discount. */
.price-starter {
  margin-top: 22px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 12px 36px;
  padding: 26px 30px;
}
.price-starter .price-role, .price-starter .price-amount { margin-bottom: 0; }
.price-starter-text { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }

.pricing-notes { margin-top: 36px; max-width: 640px; display: grid; gap: 12px; }

.pricing-notes p { font-size: 0.95rem; color: var(--ink); line-height: 1.7; }

.pricing-notes p strong { font-weight: 600; }

/* ---- ABOUT ---- */
.about { background: var(--bg); }

.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items: center;
}

.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-feature);
  box-shadow: var(--shadow-lift);
}

.about-text p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink);
  max-width: 54ch;
  margin-bottom: 14px;
}

.about-text p:last-child { margin-bottom: 0; }

/* ---- FAQ ---- */
.faq { background: var(--white); }

.faq-head { margin-bottom: 30px; }

.faq-list { max-width: 760px; }

.faq-list details { border-bottom: 1px solid var(--border-regular); }

.faq-list summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 20px 40px 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-standard);
}

.faq-list summary:hover { color: var(--text-link); }
.faq-list summary:active { opacity: 0.6; }

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--sage);
}

.faq-list details[open] summary::after { content: '\2212'; }

.faq-list details p {
  padding: 0 0 22px;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 62ch;
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-glow::before,
  .hero-glow::after { animation: none; }
  .js .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cta-pill, .cta-ghost, .nav-cta, .form-submit,
  .flow-node, .price-card, .faq-list summary { transition: none; }
  .cta-pill:hover, .cta-ghost:hover, .nav-cta:hover, .form-submit:hover,
  .price-card:hover { transform: none; }
}

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .tiers { grid-template-columns: 1fr; max-width: 560px; }
  .tiers::before { display: none; }
  .price-cards { grid-template-columns: 1fr; }
  .price-starter { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-photo { max-width: 420px; }
}

/* Tablet / small-laptop band. Between the shader's 720px breakpoint and
   1200px the copy column is capped at 44vw, so the full 80px display size
   wraps the headline into five or six lines and pushes the hero far past the
   fold. Step it down here only — phones (<=720) and real desktops (>=1200)
   keep the sizes they already had. */
@media (min-width: 721px) and (max-width: 1200px) {
  .hero h1 { font-size: clamp(2.4rem, 5.4vw, 3.6rem); }
  .hero-tagline { font-size: 1rem; }
}

/* 720px is hero.js's own breakpoint: below it the shader switches to
   anchorMobile [0.5, 0.42] and turns the horizontal fade off, so the art is
   full-bleed. The copy is bottom-aligned, but at 375px this hero's own text
   is ~747px tall against an 812px screen — there is no clear band above it
   for the spiral, and a bottom-up scrim left the headline at 1.19:1 over the
   artwork's lime panes (measured). So on phones the glass is a *ground*, not
   a picture: a near-even ink veil that still passes ~30% of the colour and
   its motion through. Worst measured point (the eyebrow, top of the hero)
   lands at 5.0:1 against pure-white glass — AA for small text. */
@media (max-width: 720px) {
  .hero {
    align-items: flex-end;
    padding-block: 132px 45px;
  }
  .hero::before {
    /* Re-tuned for the 2nd ribbon artwork (gold under-glow curve now sits at the
       mobile bottom, brighter than the previous art). Measured worst point in the
       copy band: white ~6.0:1, muted tagline ~4.0:1 against the brightest gold
       sparkle; still light enough that the ribbons read (not a blank black page). */
    background: linear-gradient(0deg, rgba(var(--glass-ground-rgb),0.80) 0%, rgba(var(--glass-ground-rgb),0.70) 45%, rgba(var(--glass-ground-rgb),0.62) 78%, rgba(var(--glass-ground-rgb),0.42) 100%);
  }
  .hero-content { max-width: 100%; }
  .problem::before {
    /* Flat, matching the hero veil's bottom alpha (0.80) so there is no visible
       step between the two sections — the art reads as one continuous flow. */
    background: rgba(var(--glass-ground-rgb),0.78);
  }
}

@media (max-width: 640px) {
  /* Match the base rule's `nav .nav-links` specificity — a bare `.nav-links`
     here loses to it and the menu never collapses (bug found in preview;
     the portfolio site's index.html has the same latent issue). */
  /* The panel stays laid out but hidden, so it can animate both ways: it drops
     from under the nav bar and returns up the same path. Visibility flips after
     the exit finishes, which also keeps closed links out of the tab order. */
  nav .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 68px;
    left: 0; right: 0;
    background: rgba(233, 229, 245, 0.98);
    backdrop-filter: blur(16px);
    padding: 24px;
    gap: 16px;
    border-bottom: 1px solid rgba(20, 26, 24, 0.08);
    opacity: 0;
    transform: translateY(-12px);
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-standard),
                transform var(--dur-slow) var(--ease-out),
                visibility 0s linear var(--dur-slow);
  }
  nav .nav-links.open {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity var(--dur-base) var(--ease-standard),
                transform var(--dur-slow) var(--ease-out),
                visibility 0s;
  }
  .mobile-toggle { display: block; }
  section { padding: 45px 20px; }
  .hero { padding-block: 128px 50px; padding-inline: 20px; }
  .tier { padding: 28px 22px 32px; }
  .upcoming-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 30px 22px; }
  .case-actions { flex-direction: column; align-items: stretch; text-align: center; }
  .proto-slot { justify-content: center; }
}
/* ═══ WHOLE-PAGE GLASS ═══════════════════════════════════════════════════
   The ribbon shader now runs behind EVERY section, so the page scrolls
   through the entire artwork instead of a single loop. These rules convert
   the formerly light sections (white / lavender) onto the dark glass.
   Tokens are not flipped wholesale — `--ink` is also used for dark text on
   the gold CTA and for dark fills, so surfaces and text are set explicitly. */
.process, .projects, .pricing, .about, .faq, .contact { background: transparent; }

/* Per-section readability scrim: strongest on the left where the copy sits,
   compositing toward the same ground the shader dissolves into (no seam). */
.process, .projects, .pricing, .about, .faq, .contact, footer { position: relative; z-index: 1; }
.process::before, .projects::before, .pricing::before,
.about::before, .faq::before, .contact::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Two-column background: the copy column is scrimmed, the ribbon column is
     left completely clear so the artwork reads at full strength. */
  background: linear-gradient(90deg,
    rgba(var(--glass-ground-rgb),0.78) 0%,
    rgba(var(--glass-ground-rgb),0.70) 44%,
    rgba(var(--glass-ground-rgb),0.24) 60%,
    rgba(var(--glass-ground-rgb),0) 66%);
}

/* Type on glass */
.process .section-title, .projects .section-title, .pricing .section-title,
.about .section-title, .faq .section-title, .contact .section-title,
.case-title-en, .screens-head, .upcoming-label,
.about-text p, .contact-intro p, .pricing-notes p, .faq-list details p,
.case-intro, .case-fact, .upcoming-card p, .price-role, .caption,
.footer-tagline, .footer-copy { color: var(--text-on-ink); }
.process .section-subtitle, .projects .section-subtitle, .pricing .section-subtitle,
.about .section-subtitle, .faq .section-subtitle, .contact .section-subtitle,
.slot-label, .form-note, .pricing-notes p, .caption { color: var(--text-on-ink-muted); }
.faq-list summary { color: var(--text-on-ink); }
/* violet-600 is ~2:1 on the dark ground; violet-300 reads ~8.6:1 (AAA) */
.faq-list summary:hover, .faq-list summary::after { color: var(--text-attention-on-ink); }
.direct-mail a, .contact-intro a, .upcoming-card a { color: var(--text-on-ink); }

/* Card surfaces become translucent glass instead of white/lavender panels */
.case-slot, .proto-slot, .screen-slot, .case-shot, .about-photo img {
  background: rgba(250, 250, 247, 0.055);
  border: 1px solid rgba(250, 250, 247, 0.12);
  backdrop-filter: blur(3px);
}
/* Frosted glass: bright enough to lift off the black ground, blurred enough
   that copy still reads over the brightest ribbon. */
.tier, .case-panel, .price-card, .upcoming-card, .contact-form {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.30);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 40px rgba(0, 0, 0, 0.35);
}
.price-card:hover {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 16px 44px rgba(0, 0, 0, 0.45);
}
/* Service cards: frosted base plus a coloured glow rising from the bottom */
.tier { background: radial-gradient(120% 55% at 50% 115%, rgba(var(--glow), 0.38), transparent 70%), rgba(255, 255, 255, 0.10); }
.tier:hover { border-color: rgba(var(--glow), 0.55); }
.price-card.featured { border-color: rgba(223, 210, 244, 0.60); background: rgba(255, 255, 255, 0.18); }
.concept-chip, .price-chip, .section-label {
  background: rgba(250, 250, 247, 0.10); color: var(--text-on-ink);
  border: 1px solid rgba(250, 250, 247, 0.16);
}
.faq-list details { border-bottom-color: rgba(250, 250, 247, 0.14); }
/* Headings inside the glass inherit their colour from the old light theme, so set
   them explicitly (h1 is excluded — the hero owns its own treatment). */
.page-glass h2, .page-glass h3, .page-glass h4, .page-glass h5, .page-glass dt { color: var(--text-on-ink); }
.price-amount .from, .upcoming-label, .upcoming-card .upcoming-label { color: var(--text-on-ink-muted); }
.price-card li, .price-starter-text, .case-fact dd, .case-fact dt, .upcoming-card p,
.tiers-note p, .problem-list li { color: var(--text-on-ink-muted); }
.price-card li::before, .problem-list li::before { color: var(--accent); }
.price-amount { color: var(--text-on-ink); }
.footer-divider { background: rgba(250, 250, 247, 0.14); }

/* Form controls on glass */
.form-field input, .form-field textarea {
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(250, 250, 247, 0.20);
  color: var(--text-on-ink);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: rgba(250,250,247,0.45); }
.form-field input:hover, .form-field textarea:hover,
.form-field input:focus, .form-field textarea:focus { border-color: rgba(250, 250, 247, 0.55); }
.form-field label { color: var(--text-on-ink-muted); }

@media (max-width: 720px) {
  /* Flat scrim on phones: the art is full-bleed there, so a horizontal
     gradient would read as a seam between stacked sections. */
  .process::before, .projects::before, .pricing::before,
  .about::before, .faq::before, .contact::before {
    background: rgba(var(--glass-ground-rgb), 0.78);
  }
}

/* Nav on the dark page: smoked glass instead of the light lavender bar, so the
   ribbon reads continuously from the very top. The gold CTA keeps dark-on-gold. */
nav {
  background: rgba(6, 4, 10, 0.60);
  border-bottom: 0;
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
}
/* Scroll edge instead of a hairline: once content scrolls under the bar, a soft
   fade below it separates the two. At the top the hero flows straight into it.
   z-index -1 keeps it under the open mobile panel. */
nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 18px;
  background: linear-gradient(to bottom, rgba(6, 4, 10, 0.55), rgba(6, 4, 10, 0));
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-standard);
}
nav.scrolled::after { opacity: 1; }
nav .logo { color: var(--text-on-ink); }
nav .nav-links a { color: var(--text-on-ink-muted); }
nav .nav-links a:hover { color: var(--text-on-ink); }
@media (max-width: 640px) {
  nav .nav-links {
    background: rgba(6, 4, 10, 0.94);
    border-bottom: 1px solid rgba(250, 250, 247, 0.10);
  }
  .mobile-toggle span { background: var(--text-on-ink); }
}
/* Reduced motion: the menu cross-fades in place instead of sliding. */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  nav .nav-links { transform: none; transition: opacity var(--dur-base) var(--ease-standard), visibility 0s linear var(--dur-base); }
  nav .nav-links.open { transition: opacity var(--dur-base) var(--ease-standard), visibility 0s; }
}
/* Touch screens have no real hover: a tap would leave cards and buttons stuck
   lifted. Lift and shadow only where a pointer can actually hover. */
@media (hover: none) {
  .cta-pill:hover, .cta-ghost:hover, .nav-cta:hover, .form-submit:hover,
  .price-card:hover, .tier:hover, .flow-step:hover .flow-node { transform: none; }
  .price-card:hover { box-shadow: none; }
}
/* Reduce transparency: glass surfaces go solid (the nearest opaque colour to each
   glass over the black ground) and drop the blur. */
@media (prefers-reduced-transparency: reduce) {
  nav, nav .nav-links { background: rgb(6, 4, 10); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .case-panel, .price-card, .upcoming-card, .contact-form,
  .case-slot, .proto-slot, .screen-slot, .case-shot { background: #0e0e0e; backdrop-filter: none; }
  .tier, .case-panel, .price-card, .upcoming-card, .contact-form { background: #2C2A31; }
  .price-card.featured { background: #34323A; }
}
/* More contrast: solid surfaces plus clearly visible edges. */
@media (prefers-contrast: more) {
  nav, nav .nav-links { background: rgb(6, 4, 10); border-bottom: 1px solid rgba(250, 250, 247, 0.5); }
  .case-panel, .price-card, .upcoming-card, .contact-form,
  .case-slot, .proto-slot, .screen-slot, .case-shot { background: #0e0e0e; border-color: rgba(250, 250, 247, 0.5); }
  nav .nav-links a { color: var(--text-on-ink); }
}

/* Two-column page: hold the content in the LEFT column on wide screens so the
   right-hand ribbon column stays clear. The hero already does this via
   .hero-content; this does the same for every section that uses .container. */
@media (min-width: 1024px) {
  .page-glass .container {
    margin-left: 0;
    margin-right: auto;
    max-width: min(900px, 63vw);
    padding-left: clamp(24px, 5vw, 72px);
    padding-right: 28px;
  }
  .page-glass footer .container { max-width: 1240px; padding-right: clamp(24px, 5vw, 72px); }
  .page-glass .services .container { max-width: 1240px; padding-right: clamp(24px, 5vw, 72px); }
  .services-head { max-width: min(900px, 63vw); }
}

/* ═══ MULTI-PAGE (2026-09-30) ════════════════════════════════════════════
   Pieces the one-page site didn't need: a page header for inner pages, the
   home page's work cards and call-to-action bands, the '85 snapshot from the
   old about-me.html, and the nav's "you are here" state. */

/* Current page in the nav */
nav .nav-links a[aria-current="page"]:not(.nav-cta) { color: var(--text-on-ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* Inner-page header: the hero's type on a shorter stage, clear of the fixed nav */
.page-hero { position: relative; z-index: 1; padding: 150px 24px 30px; }
.page-top { padding-top: 150px; }
.page-title {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 6vw, 4.25rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  margin-bottom: 16px;
  color: var(--text-on-ink);
  text-shadow: 0 1px 22px rgba(0,0,0,.5);
}
.page-title .h1-accent { font-family: var(--font-editorial); font-style: italic; font-weight: 500; color: var(--gold); }
.page-hero .section-subtitle { color: var(--text-on-ink-muted); font-size: 1.08rem; }
.projects--page { padding-top: 20px; }
.case-panel[id] { scroll-margin-top: 96px; }  /* home page links land below the fixed nav */

/* Plain text link on glass */
.text-link { color: var(--text-on-ink); font-weight: 600; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.text-link:hover { color: var(--gold); }

/* Home: one compact card per project */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 36px; }
.work-card h3 { font-family: var(--font-heading); font-weight: 400; font-size: var(--fs-h3); margin: 16px 0 6px; }
.work-card h3 a { color: inherit; text-decoration: none; }
.work-card h3 a:hover { color: var(--gold); }
.work-card p { color: var(--text-on-ink-muted); font-size: var(--fs-sm); line-height: var(--lh-body); }

/* Call-to-action band: pricing teaser on home, closing ask on every page */
.cta-band-inner { max-width: 640px; }
.cta-band .section-subtitle { color: var(--text-on-ink-muted); margin-bottom: 26px; }
.contact-call { margin: 6px 0 18px; }

/* The '85 snapshot (formerly about-me.html): tilted like a pinned photo */
.snapshot-block figure { margin: 0; }
.snapshot {
  display: block;
  width: min(380px, 86vw); height: auto;
  padding: 12px 12px 44px;
  background: #F4EFE6;
  border-radius: 4px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  transform: rotate(-2.5deg);
  transition: transform var(--dur-slow) var(--ease-out);
}
.snapshot:hover { transform: rotate(0deg) scale(1.01); }
.snapshot-block figcaption { margin-top: 26px; font-family: var(--font-editorial); font-style: italic; font-weight: 500; font-size: 1.25rem; color: var(--text-attention-on-ink); }
.snapshot-more { margin-top: 18px; }

/* Same glass treatment the original sections get */
.work-teaser, .cta-band, .snapshot-block { position: relative; z-index: 1; background: transparent; }
.page-hero::before, .work-teaser::before, .cta-band::before, .snapshot-block::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(var(--glass-ground-rgb),0.78) 0%,
    rgba(var(--glass-ground-rgb),0.70) 44%,
    rgba(var(--glass-ground-rgb),0.24) 60%,
    rgba(var(--glass-ground-rgb),0) 66%);
}
.work-teaser :focus-visible, .cta-band :focus-visible, .page-hero :focus-visible, .snapshot-block :focus-visible { box-shadow: var(--ring-focus); outline: none; }

@media (max-width: 900px) {
  .work-grid { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 720px) {
  .page-hero::before, .work-teaser::before, .cta-band::before, .snapshot-block::before { background: rgba(var(--glass-ground-rgb),0.78); }
}
@media (max-width: 640px) {
  .page-hero { padding: 120px 20px 20px; }
  .page-top { padding-top: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .snapshot { transition: none; }
  .snapshot:hover { transform: rotate(-2.5deg); }
}