/* pw2.css — puntWork v2 "Op punt" design system (FAITHFUL PORT)
   Source of truth: design_handoff_website/colors_and_type.css + index.html <style> block.
   Only transforms vs prototype: (1) dark selector html[data-theme="dark"] -> html.dark
   (the app toggles the .dark class, not a data attribute); (2) bare-element resets
   (body/a/input::placeholder/body transition) scoped under .pw-v2 so non-v2 pages are
   untouched; (3) the redundant '* {box-sizing}' / 'html,body{margin}' resets dropped
   (Tailwind preflight already owns them). Everything else is byte-faithful. */

/* ============================================================
   puntWork — Foundations (v2 canonical · "Op punt")
   ------------------------------------------------------------
   Job-discovery platform for Belgium. Ink-teal editorial.
   BRAND (resolved): deep teal #0F766E primary · vibrant teal
   #14B8A6 for CTAs / interactive. Slate stays the neutral spine
   (site theme-color #0f172a is a confirmed hard fact).
   TYPE: Bricolage Grotesque (display voice) · Inter (UI/body) ·
   Spline Sans Mono (live data, overlines, breadcrumbs).

   This file IS the design system's base — link it (or styles.css)
   first in any new file. Legacy --emerald-* names are kept as
   aliases of the teal ramp so older components pick up the brand
   with zero edits.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600..800&family=Inter:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- Neutrals (slate ramp — the neutral spine) ---------- */
  --slate-950: #020617;
  --slate-900: #0f172a; /* theme-color — primary ink, dark surfaces */
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-150: #eef2f6;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;
  --white:     #ffffff;

  /* ---------- Brand accent — teal (resolved v2) ----------
     700 = brand primary (text accents, links, hover)
     500 = CTAs, active facets, interactive
     400 = on-ink accent, glows · 950 = hero ink-teal stage */
  --brand-950: #042f2e; /* @kind color */
  --brand-700: #0f766e; /* @kind color */
  --brand-600: #0d9488; /* @kind color */
  --brand-500: #14b8a6; /* @kind color */
  --brand-400: #2dd4bf; /* @kind color */
  --brand-100: #ccfbf1;
  --brand-50:  #f0fdfa;

  /* legacy aliases (pre-rebase var names — point at the teal ramp) */
  --emerald-700: var(--brand-700);
  --emerald-600: var(--brand-600);
  --emerald-500: var(--brand-500);
  --emerald-400: var(--brand-400);
  --emerald-100: var(--brand-100);
  --emerald-50:  var(--brand-50);

  /* accent glows (beacon / dot / constellation) */
  --accent-glow:        rgba(20,184,166,.50);
  --accent-glow-strong: rgba(45,212,191,.85);
  --accent-ink-tint:    rgba(45,212,191,.16);

  /* gradient-flow stops (light-canvas defaults; brighten on ink) */
  --grad-a: #0f766e;
  --grad-b: #0891b2;
  --grad-c: #0d9488;

  /* ---------- Semantic palette ---------- */
  --info-600:    #2563eb;  --info-50:    #eff6ff;
  --warning-600: #d97706;  --warning-50: #fffbeb;
  --danger-600:  #dc2626;  --danger-50:  #fef2f2;
  --success-600: #059669;  --success-50: #ecfdf5; /* success stays emerald — distinct from brand */

  /* ---------- Category accent dots ("punt" = dot) ---------- */
  --cat-sales:        #059669; /* emerald  */
  --cat-admin:        #2563eb; /* blue     */
  --cat-science:      #7c3aed; /* violet   */
  --cat-manufacturing:#d97706; /* amber    */
  --cat-logistics:    #ea580c; /* orange   */
  --cat-healthcare:   #e11d48; /* rose     */
  --cat-finance:      #0284c7; /* sky — re-hued in v2; old teal collided with brand */
  --cat-hr:           #4f46e5; /* indigo   */
  --cat-it:           #0891b2; /* cyan     */
  --cat-construction: #ca8a04; /* gold     */

  /* ---------- Semantic surface + text roles ---------- */
  --bg:          var(--slate-50);   /* app background          */
  --bg-elevated: var(--white);      /* cards / panels          */
  --bg-sunken:   var(--slate-100);  /* inset wells, chips      */
  --bg-ink:      var(--slate-900);  /* dark footer / featured  */

  /* fixed ink surfaces (stay dark in BOTH skins) */
  --ink:      #0f172a;
  --ink-2:    #0b1322;
  --ink-line: rgba(255,255,255,.08);

  --fg1: var(--slate-900);  /* primary text / headings        */
  --fg2: var(--slate-600);  /* secondary / body               */
  --fg3: var(--slate-500);  /* muted / meta / captions        */
  --fg4: var(--slate-400);  /* faint / placeholder            */
  --fg-on-ink:   #f8fafc;   /* text on dark surfaces          */
  --fg-on-ink-2: #94a3b8;   /* muted text on dark             */

  --border:        var(--slate-200); /* default hairline       */
  --border-strong: var(--slate-300);
  --border-ink:    rgba(255,255,255,.10);

  /* primary action = ink; apply/go action = teal */
  --action:        var(--slate-900);
  --action-hover:  var(--slate-800);
  --accent:        var(--brand-500);
  --accent-hover:  var(--brand-700);
  --accent-soft-bg:var(--brand-50);
  --accent-soft-fg:var(--brand-700);

  /* focus ring follows the CTA teal */
  --ring: 0 0 0 3px rgba(20,184,166,.38);

  /* ---------- Type families (v2 stack) ---------- */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', 'Manrope', 'Inter', sans-serif;
  --font-mono2:   'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-mono:    var(--font-mono2); /* legacy alias */

  /* ---------- Type scale (px) ---------- */
  --text-display: 60px;  /* hero headline (clamp larger in heroes) */
  --text-h1: 40px;
  --text-h2: 30px;
  --text-h3: 22px;
  --text-h4: 18px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-sm: 14px;
  --text-caption: 13px;
  --text-overline: 11px; /* mono eyebrows / section labels */

  /* weights */
  --fw-regular: 400;  /* @kind font */
  --fw-medium: 500;   /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700;     /* @kind font */
  --fw-extra: 800;    /* @kind font */

  /* line heights */
  --lh-tight: 1.0;    /* @kind font */
  --lh-snug: 1.2;     /* @kind font */
  --lh-normal: 1.5;   /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* tracking */
  --tracking-tight: -0.02em;
  --tracking-snug: -0.015em;
  --tracking-wide: 0.06em;   /* sans overlines (legacy) */
  --tracking-label: 0.14em;  /* mono overlines / section labels */

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;   /* cards            */
  --r-xl: 20px;   /* large panels     */
  --r-2xl: 24px;  /* CTA band         */
  --r-pill: 999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---------- Elevation (soft, low-contrast) ---------- */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.10), 0 4px 8px rgba(15,23,42,.05);
  --shadow-ink: 0 16px 40px rgba(2,6,23,.35);

  /* container */
  --container: 1200px;
  --container-narrow: 760px;
}

/* ============================================================
   Semantic element styles — apply these classes or copy rules.
   Display voice = Bricolage Grotesque; UI/body = Inter;
   data/labels = Spline Sans Mono.
   ============================================================ */

.pw-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.pw-h1 { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-h1); line-height: 1.04; letter-spacing: var(--tracking-snug); color: var(--fg1); }
.pw-h2 { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-h2); line-height: 1.08; letter-spacing: var(--tracking-snug); color: var(--fg1); }
.pw-h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-h3); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--fg1); }
.pw-h4 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--text-h4); line-height: var(--lh-snug); color: var(--fg1); }

.pw-body-lg { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--text-body-lg); line-height: var(--lh-relaxed); color: var(--fg2); }
.pw-body    { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--text-body); line-height: var(--lh-normal); color: var(--fg2); }
.pw-sm      { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--fg2); }
.pw-caption { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--text-caption); line-height: var(--lh-normal); color: var(--fg3); }

/* Overline / eyebrow — v2: Spline Sans Mono, wide-tracked uppercase.
   Used for category labels, "01 Step", breadcrumbs, section numbers. */
.pw-overline {
  font-family: var(--font-mono2);
  font-weight: var(--fw-semibold);
  font-size: var(--text-overline);
  line-height: 1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg3);
}

/* Data / numeric — tabular figures for salary, counts, percentages */
.pw-num { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--fg1); }
.pw-mono { font-family: var(--font-mono2); font-size: var(--text-caption); color: var(--fg2); }

/* ============================================================
   v2 editorial system — "Op punt" helpers
   ============================================================ */

/* display voice shorthand */
.pw2-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em; }
.pw2-mono { font-family: var(--font-mono2); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* section label — mono overline led by the brand dot */
.pw2-sec-label { font-family: var(--font-mono2); font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--brand-700); display: inline-flex; align-items: center; gap: 9px; }
.pw2-sec-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-500); }
.pw2-sec-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em;
    font-size: clamp(30px, 4.4vw, 54px); line-height: 1.02; color: var(--fg1); margin: 12px 0 0; text-wrap: balance; }

/* outlined giant numerals (how-it-works 01/02/03) */
.pw2-numeral { font-family: var(--font-display); font-weight: 800; font-size: clamp(64px, 8vw, 110px); line-height: .9;
    color: transparent; -webkit-text-stroke: 1.5px var(--brand-600); opacity: .75; letter-spacing: -0.01em; }

/* stat block — editorial big numbers */
.pw2-stat-n { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em;
    font-size: clamp(40px, 5.2vw, 72px); line-height: 1; color: var(--fg1); font-variant-numeric: tabular-nums; }

/* page heads (jobs / detail) */
.pw2-page-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em;
    font-size: clamp(34px, 5vw, 58px); line-height: 1.0; color: var(--fg1); margin: 0; }

/* editorial prose for story/legal pages (about / methodology / cookies / privacy):
   v2 typography + teal link idiom, replacing the legacy Tailwind indigo prose. */
.pw-prose { color: var(--fg2); font-size: 16.5px; line-height: 1.68; max-width: 70ch; }
.pw-prose p { margin: 0 0 18px; }
.pw-prose h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.012em;
    font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12; color: var(--fg1); margin: 34px 0 12px; }
.pw-prose h3 { font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--fg1); margin: 22px 0 8px; }
.pw-prose ul { margin: 0 0 18px; padding-left: 1.15em; }
.pw-prose li { margin: 0 0 6px; }
.pw-prose a, a.pw-prose-link { color: var(--emerald-700); text-decoration: none;
    border-bottom: 1px solid color-mix(in oklab, var(--emerald-600) 36%, transparent); transition: border-color .18s ease, color .18s ease; }
.pw-prose a:hover, a.pw-prose-link:hover { color: var(--emerald-600); border-bottom-color: var(--emerald-600); }

/* CTA band — the single vibrant-teal block (one accent action per page) */
.pw2-cta-band { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 70%, #2dd4bf 100%);
    border-radius: var(--r-2xl); position: relative; overflow: hidden; }
.pw2-cta-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(640px 300px at 85% 0%, rgba(255,255,255,.22), transparent 60%); }

/* gradient-flow headline — seamless by construction (a,b,c,a tile) */
@keyframes pw-gradientFlow { 0% { background-position: 0% 50%; } 100% { background-position: 150% 50%; } }
.pw-gradient-text {
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c), var(--grad-a));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: pw-gradientFlow 21s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .pw-gradient-text { animation: none; } }

/* ===== component system (from index.html <style> block, lines 13-802) =====
   NOTE: the prototype's bare-element resets are scoped to body.pw-v2 here so
   non-v2 pages (legacy home / error / facet-directory) keep their own chrome.
   '* {box-sizing}' and 'html,body{margin}' are dropped — Tailwind preflight
   already owns them site-wide. */
  body.pw-v2 { font-family: var(--font-sans); background: var(--slate-50); color: var(--slate-900); -webkit-font-smoothing: antialiased; }
  button { font-family: inherit; }
  body.pw-v2 a { text-decoration: none; }
  /* lucide sizing: replaced <svg> inherits font-size via 1em */
  svg.lucide { width: 1em; height: 1em; stroke-width: 2; vertical-align: middle; }
  body.pw-v2 ::selection { background: var(--emerald-100); }
  body.pw-v2 input::placeholder { color: var(--slate-400); }

  /* ===================================================================
     V2 ACCENT — RESOLVED: TEAL. Primary brand = deep teal #0F766E
     (teal-700); CTAs / highlights / interactive = vibrant teal #14B8A6
     (teal-500). The ramp keeps its historical --emerald-* names so every
     older component picks it up with zero edits.
     =================================================================== */
  :root {
    --emerald-50:  #f0fdfa;  --emerald-100: #ccfbf1;  --emerald-400: #2dd4bf;
    --emerald-500: #14b8a6;  --emerald-600: #0d9488;  --emerald-700: #0f766e;
    --brand-700:   #0f766e;  --brand-500:   #14b8a6;  --brand-950: #042f2e;
    --accent-glow:        rgba(20,184,166,.50);
    --accent-glow-strong: rgba(45,212,191,.85);
    --accent-ink-tint:    rgba(45,212,191,.16);

    /* fixed ink surfaces (stay dark in BOTH skins) */
    --ink: #0f172a;  --ink-2: #0b1322;  --ink-line: rgba(255,255,255,.08);
    /* info notice */
    --info-bg: #eff6ff;  --info-border: #bfdbfe;  --info-fg: #1e40af;

    /* header — liquid glass. LIGHT skin = light frosted glass (most legible). */
    --header-bg:   rgba(255,255,255,.60);
    --popover-bg:  rgba(255,255,255,.92);  /* popovers hold READING content — near-opaque glass */
    --header-fg:   #0f172a;
    --header-dim:  rgba(15,23,42,.56);
    --header-line: rgba(15,23,42,.08);
    --header-chip: rgba(15,23,42,.05);
    --header-glass-hi: rgba(255,255,255,.80);
    --header-sheen: rgba(255,255,255,.42);
    /* wordmark reveal tones follow the glass (light glass → on-light) */
    --rv-punt: var(--emerald-600);  --rv-work: #0f172a;
    --rv-dot:  var(--emerald-600);  --rv-glow: var(--accent-glow);

    /* animated banner gradient — LIGHT skin uses darker stops so the
       headline keeps ≥3:1 contrast at every point of the cycle */
    --grad-a: #0F766E;  --grad-b: #0891B2;  --grad-c: #0D9488;

    /* theme-following accent (on-surface accent that flips with the skin) */
    --accent-auto: var(--emerald-600);
    --accent-glow-auto: var(--accent-glow);

    /* hero stage — LIGHT skin: airy mint-teal wash, dark teal-ink type */
    --hero-bg:
      radial-gradient(1100px 600px at 78% 32%, rgba(20,184,166,.16), transparent 60%),
      radial-gradient(900px 500px at 10% 85%, rgba(8,145,178,.10), transparent 55%),
      linear-gradient(168deg, #ecfaf7 0%, #def3ef 52%, #eefaf7 100%);
    --hero-title: #052e2b;
    --hero-dim: rgba(5,46,43,.40);
    --hero-accent: var(--emerald-600);
    --hero-sub: rgba(5,46,43,.68);
    --hero-meta: rgba(5,46,43,.58);
    --hero-grain: rgba(5,46,43,.06);
    --hero-line: rgba(15,118,110,.18);
    --hero-chip-bg: rgba(255,255,255,.45);
    --hero-ticker-bg: rgba(255,255,255,.45);
    --hero-tick: rgba(5,46,43,.66);

    /* job-feed card — LIGHT skin: elevated white card */
    --feed-bg: #ffffff; --feed-line: #e2e8f0;
    --feed-fg: #0f172a; --feed-sub: #64748b; --feed-faint: #94a3b8;
    --feed-chip-bg: rgba(15,23,42,.04); --feed-chip-line: rgba(15,23,42,.10); --feed-chip-fg: #475569;
    --feed-act-bg: #ffffff; --feed-act-line: #e2e8f0;
    --feed-cue-bg: rgba(255,255,255,.82); --feed-cue-lockfg: #ffffff;
    --feed-track: #e2e8f0;
    --feed-accent: var(--emerald-600);
    --feed-shadow: 0 20px 44px -20px rgba(15,23,42,.28);
    --cue-save: #059669; --cue-skip: #e11d48; --cue-nav: #64748b;
  }

  /* ===================================================================
     DARK SKIN — remap the slate ramp + surface so existing var() usage flips.
     Ink surfaces use --ink (unchanged). Text "#fff"/"#f8fafc" sits on ink → stays.
     =================================================================== */
  html.dark {
    --white:     #0f1a2e;   /* card surface */
    --slate-50:  #0a1220;   /* page background */
    --slate-100: #18233b;   /* soft fills / dividers */
    --slate-200: #243349;   /* borders */
    --slate-300: #33455f;   /* strong borders */
    --slate-400: #7e8da6;   /* muted icons / text */
    --slate-500: #9fadc4;   /* tertiary text */
    --slate-600: #bdc8db;   /* secondary text */
    --slate-700: #d7dfeb;
    --slate-800: #e9eef6;
    --slate-900: #f4f7fb;   /* primary text */
    --ink: #131f36;  --ink-2: #0d1729;  --ink-line: rgba(255,255,255,.10);
    /* accent tints — remapped so every emerald-50 surface reads as a soft
       teal TINT on ink (not bright mint: fixes the "light hover" on the
       region leaderboard + all fresh badges/chips), and emerald-700 text
       lifts to the light teal that keeps contrast on dark surfaces */
    --emerald-50: rgba(45,212,191,.10);  --emerald-100: rgba(45,212,191,.22);  --emerald-700: var(--emerald-400);
    --info-bg: #11233f;  --info-border: #1e3a63;  --info-fg: #bcd6ff;

    /* header glass — DARK skin = dark frosted glass (most legible) */
    --header-bg:   rgba(16,25,43,.62);
    --popover-bg:  rgba(15,24,42,.94);
    --header-fg:   #f8fafc;
    --header-dim:  rgba(248,250,252,.60);
    --header-line: rgba(255,255,255,.10);
    --header-chip: rgba(255,255,255,.07);
    --header-glass-hi: rgba(255,255,255,.10);
    --header-sheen: rgba(255,255,255,.06);
    --rv-punt: var(--emerald-400);  --rv-work: #f8fafc;
    --rv-dot:  var(--emerald-400);  --rv-glow: var(--accent-glow-strong);
    /* DARK skin — brighter gradient stops (sit on ink, need lift not depth) */
    --grad-a: #2DD4BF;  --grad-b: #5EEAD4;  --grad-c: #22D3EE;

    /* theme-following accent (on-surface accent that flips with the skin) */
    --accent-auto: var(--emerald-400);
    --accent-glow-auto: var(--accent-glow-strong);

    /* hero stage — DARK skin: deep ink-teal */
    --hero-bg:
      radial-gradient(1200px 640px at 78% 36%, rgba(20,184,166,.14), transparent 60%),
      radial-gradient(900px 500px at 12% 80%, rgba(8,145,178,.10), transparent 55%),
      linear-gradient(168deg, #03110f 0%, #042f2e 52%, #06201f 100%);
    --hero-title: #f0fdfa;
    --hero-dim: rgba(240,253,250,.42);
    --hero-accent: var(--emerald-400);
    --hero-sub: rgba(204,251,241,.66);
    --hero-meta: rgba(204,251,241,.55);
    --hero-grain: rgba(255,255,255,.06);
    --hero-line: rgba(45,212,191,.16);
    --hero-chip-bg: rgba(4,47,46,.45);
    --hero-ticker-bg: rgba(4,47,46,.55);
    --hero-tick: rgba(204,251,241,.78);

    /* job-feed card — DARK skin: ink surface */
    --feed-bg: var(--ink); --feed-line: var(--ink-line);
    --feed-fg: #f8fafc; --feed-sub: #9fadc4; --feed-faint: #7e8da6;
    --feed-chip-bg: rgba(255,255,255,.05); --feed-chip-line: rgba(255,255,255,.09); --feed-chip-fg: #cbd5e1;
    --feed-act-bg: rgba(255,255,255,.06); --feed-act-line: rgba(255,255,255,.16);
    --feed-cue-bg: rgba(2,6,23,.55); --feed-cue-lockfg: #0b1322;
    --feed-track: rgba(255,255,255,.08);
    --feed-accent: var(--emerald-400);
    --feed-shadow: 0 24px 54px -18px rgba(2,6,23,.6);
    --cue-save: #10b981; --cue-skip: #fb7185; --cue-nav: #cbd5e1;
  }

  html { color-scheme: light; transition: none; }
  html.dark { color-scheme: dark; }
  body.pw-v2 { transition: background .45s ease, color .45s ease; }

  /* ===================================================================
     ASSISTED SCROLLING — momentum handled in JS (App.jsx). Keep CSS scroll
     instant so the per-frame lerp doesn't fight a smooth animation.
     =================================================================== */
  html { scroll-behavior: auto; }

  /* ===== LIQUID-GLASS MATERIAL (canonical recipe) =====
     Layer order: top sheen gradient → tinted translucent fill → blur+saturate
     of whatever scrolls beneath → hairline border → inner highlight.
     Use ONLY on floating chrome (header, sticky bars, FAB pills, popovers,
     sheets) — never on content cards, which stay opaque. */
  /* OVERLAY header — fixed over the page so the banner/hero reads straight
     through the glass from the very first paint (never "stacked above" it).
     Pages clear it with their own top padding; the glass shows what's behind. */
  .pw-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: linear-gradient(180deg, var(--header-sheen), transparent 42%), var(--header-bg);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    backdrop-filter: blur(20px) saturate(200%);
    border-bottom: 1px solid var(--header-line);
    box-shadow: inset 0 1px 0 var(--header-glass-hi), inset 0 -1px 0 rgba(255,255,255,.04), 0 10px 30px -12px rgba(2,6,23,.45);
    transition: transform .42s cubic-bezier(.4,0,.2,1), opacity .32s ease, background .45s ease;
    will-change: transform;
  }
  .pw-header.hide { transform: translateY(-102%); opacity: 0; pointer-events: none; box-shadow: none; border-bottom-color: transparent; visibility: hidden; transition: transform .42s cubic-bezier(.4,0,.2,1), opacity .32s ease, visibility 0s linear .42s, box-shadow .2s ease, border-color .2s ease; }

  /* sticky floating cluster that replaces the header on scroll-down. Lives
     BOTTOM-RIGHT (thumb zone on touch, the web convention for back-to-top,
     and it never collides with the facet bar riding the top edge):
     [● brand-beacon pill = back to top] + [contextual accent CTA] */
  .pw-fab {
    position: fixed; bottom: 18px; right: 18px; z-index: 60;
    display: flex; align-items: center; gap: 8px;
    transform: translateY(140%) scale(.96); opacity: 0; pointer-events: none;
    transition: transform .44s cubic-bezier(.34,1.45,.5,1), opacity .3s ease;
  }
  .pw-fab.show { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

  /* TOP-RIGHT contextual action — when the header hides, the page's forward
     CTA (home → Jobs · detail → Apply Now) stays where the header had it:
     top right. Back-to-top alone lives bottom-right (thumb zone / convention). */
  .pw-fab-top {
    position: fixed; top: 14px; right: 18px; z-index: 60;
    display: flex; align-items: center; gap: 8px;
    transform: translateY(-140%) scale(.96); opacity: 0; pointer-events: none;
    transition: transform .44s cubic-bezier(.34,1.45,.5,1), opacity .3s ease;
  }
  .pw-fab-top.show { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

  /* glass pills inside the scroll FAB cluster (match the header material) */
  .pw-fab-glass {
    display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans);
    font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--header-fg);
    background: linear-gradient(180deg, var(--header-sheen), transparent 55%), var(--header-bg);
    -webkit-backdrop-filter: blur(20px) saturate(200%); backdrop-filter: blur(20px) saturate(200%);
    border: 1px solid var(--header-line); border-radius: 999px; padding: 9px 14px; cursor: pointer;
    box-shadow: inset 0 1px 0 var(--header-glass-hi), 0 10px 26px -10px rgba(2,6,23,.55);
    transition: transform .14s ease;
  }
  .pw-fab-glass:active { transform: scale(.96); }

  /* horizontal facet scroller — no scrollbar (no edge fade: facets must read fully) */
  .pw-scrollrow { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 3px 1px;
    scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; }
  .pw-scrollrow::-webkit-scrollbar { display: none; height: 0; }
  .pw-scrollrow > * { scroll-snap-align: start; flex: none; }

  /* ===== language switcher — compact trigger → spring popover ===== */
  .pw-lang { position: relative; }
  .pw-lang-trigger { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 13px; font-weight: 700;
    color: var(--header-fg); background: var(--header-chip); border: 1px solid var(--header-line); border-radius: 999px;
    padding: 6px 9px 6px 11px; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; }
  .pw-lang-trigger:hover { background: var(--header-line); }
  .pw-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 174px; z-index: 60;
    background: var(--popover-bg); -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
    border: 1px solid var(--header-line); border-radius: 14px; padding: 6px;
    box-shadow: 0 20px 46px -14px rgba(2,6,23,.5), inset 0 1px 0 var(--header-glass-hi);
    transform-origin: top right; transform: translateY(-7px) scale(.93); opacity: 0; pointer-events: none;
    transition: transform .22s cubic-bezier(.34,1.56,.5,1), opacity .16s ease; }
  .pw-lang-menu.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
  .pw-lang-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font-family: var(--font-sans);
    font-size: 13px; font-weight: 600; color: var(--header-fg); background: none; border: 0; border-radius: 9px; padding: 8px 10px; cursor: pointer; transition: background .12s ease; }
  .pw-lang-item:hover { background: var(--header-chip); }
  .pw-lang-item.on { font-weight: 800; }
  .pw-lang-item .code { font-size: 11px; font-weight: 800; letter-spacing: .04em; width: 22px; color: var(--emerald-500); flex: none; }
  .pw-lang-item .name { flex: 1; }
  .pw-lang-item .lucide { color: var(--emerald-500); margin-left: auto; }

  /* ===== home horizontal carousels — fixed-width cards, right-edge fade hint ===== */
  .pw-hscroll-wrap { position: relative; }
  .pw-hscroll { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 4px 1px 8px;
    scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; scroll-padding-left: 1px; }
  .pw-hscroll::-webkit-scrollbar { display: none; height: 0; }
  .pw-hscroll > * { scroll-snap-align: start; flex: none; }
  /* loop mode (AutoCarousel) — per-frame drift owns the position, so snap
     must not fight it; both edges fade because the shelf is endless */
  .pw-hscroll.loop { scroll-snap-type: none; }
  .pw-hscroll-fade { position: absolute; top: 0; bottom: 8px; right: -1px; width: 66px; pointer-events: none; z-index: 2;
    background: linear-gradient(90deg, transparent, var(--slate-50)); opacity: 1; transition: opacity .25s ease; }
  .pw-hscroll-fade.hide { opacity: 0; }
  .pw-hscroll-fade.left { right: auto; left: -1px; background: linear-gradient(270deg, transparent, var(--slate-50)); }

  /* two-line title clamp — job cards reserve the same title box everywhere,
     one ingredient of their equal heights */
  .pw-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* ===== jobs · “more filters” expandable panel ===== */
  @keyframes pw-morein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  /* one-shot rise for accordion answers (home FAQ + detail “Before you apply”)
     — behavioral feedback at System-2 moments: quick, single, never loops */
  .pw-faq-a { animation: pw-morein .26s cubic-bezier(.2,.7,.3,1) both; }
  @media (prefers-reduced-motion: reduce) { .pw-faq-a { animation: none; } }
  /* section-head forward action — the → nudges right on hover, the same
     forward cue every card and link already speaks (consistency = fluency) */
  .pw2-sec-action { transition: color .15s ease; }
  .pw2-sec-action .arr { display: inline-flex; transition: transform .16s ease; }
  .pw2-sec-action:hover { color: var(--emerald-600); }
  .pw2-sec-action:hover .arr { transform: translateX(3px); }
  .pw-morefilters { animation: pw-morein .26s cubic-bezier(.2,.7,.3,1) both; padding-top: 11px; margin-top: 11px; border-top: 1px dashed var(--slate-200); }
  .pw-fgroup { display: flex; align-items: center; gap: 12px; }
  .pw-fgroup + .pw-fgroup { margin-top: 9px; }
  .pw-fglabel { flex: none; width: 74px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-400); }

  /* save (bookmark) toggle — fill the glyph when saved */
  .pw-savebtn.on svg.lucide { fill: currentColor; }

  /* active-filter chips (removable) */
  .pw-fchip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 700;
    border-radius: 999px; padding: 5px 7px 5px 12px; background: var(--emerald-50); color: var(--emerald-700); border: 1px solid var(--emerald-100); white-space: nowrap; }
  .pw-fchip .x { display: inline-flex; border: 0; background: none; cursor: pointer; color: inherit; padding: 2px; border-radius: 50%; opacity: .65; transition: opacity .12s ease, background .12s ease; }
  .pw-fchip .x:hover { opacity: 1; background: rgba(15,23,42,.08); }

  /* saved jobs / searches popover (glass, matches header material) */
  .pw-saved-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 312px; z-index: 60;
    background: var(--popover-bg); -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
    border: 1px solid var(--header-line); border-radius: 16px; padding: 8px;
    box-shadow: 0 24px 54px -16px rgba(2,6,23,.55), inset 0 1px 0 var(--header-glass-hi);
    transform-origin: top right; transform: translateY(-8px) scale(.93); opacity: 0; pointer-events: none;
    transition: transform .22s cubic-bezier(.34,1.56,.5,1), opacity .16s ease; }
  .pw-saved-menu.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
  .pw-saved-list { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
  .pw-count-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--emerald-600); color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--header-bg); }

  /* swipe "job feed" card */
  .pw-feed-card { touch-action: none; -webkit-user-select: none; user-select: none; will-change: transform; cursor: grab; }
  .pw-feed-card.grab { cursor: grabbing; }
  /* feed card title doubles as the full-details link */
  .pw-feed-titlelink { display: block; cursor: pointer; }
  .pw-feed-titlelink .t { transition: color .14s ease; }
  .pw-feed-titlelink:hover .t { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
  .pw-feed-titlelink .ico { display: inline-flex; opacity: .45; transition: opacity .14s ease, transform .18s ease; }
  .pw-feed-titlelink:hover .ico { opacity: 1; transform: translate(2px, -2px); color: var(--feed-accent); }
  .pw-feed-hintchip { position: absolute; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .02em;
    padding: 4px 9px; border-radius: 999px; pointer-events: none; z-index: 4; white-space: nowrap; transition: opacity .16s ease, transform .16s ease; }
  @keyframes pw-nudge { 0%,100% { transform: translate(0,0); } 50% { transform: var(--nudge); } }
  @keyframes pw-iconpop { 0% { transform: rotate(-110deg) scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
  .pw-saved-item:hover { background: var(--header-chip); }
  .pw-savedglyph svg.lucide, .pw-lang-trigger .pw-savedglyph { fill: currentColor; }

  /* facet pill (single-select badge) */
  .pw-facet { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer; font-family: var(--font-sans);
    font-size: 13px; font-weight: 600; border-radius: 999px; padding: 8px 14px; border: 1px solid var(--slate-200);
    background: var(--white); color: var(--slate-600); transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
  .pw-facet:hover { border-color: var(--slate-300); color: var(--slate-900); }
  .pw-facet:active { transform: scale(.97); }
  .pw-facet.on { background: var(--emerald-600); color: #fff; border-color: var(--emerald-600); font-weight: 700;
    box-shadow: 0 5px 14px -4px var(--accent-glow); }
  .pw-facet .ct { font-size: 11px; font-weight: 700; opacity: .62; font-variant-numeric: tabular-nums; }
  .pw-facet.on .ct { opacity: .85; }

  /* sticky facet bar — liquid glass, sits under the header; rides to the top
     when the header hides so results scroll beneath frosted filters */
  .pw-facetbar { position: sticky; top: 62px; z-index: 40;
    background: linear-gradient(180deg, var(--header-sheen), transparent 60%), var(--header-bg);
    -webkit-backdrop-filter: blur(20px) saturate(200%); backdrop-filter: blur(20px) saturate(200%);
    border-bottom: 1px solid var(--header-line); transition: top .32s cubic-bezier(.4,0,.2,1), background .45s ease;
    box-shadow: inset 0 1px 0 var(--header-glass-hi), 0 6px 16px -14px rgba(2,6,23,.5); }
  body.pw-header-hidden .pw-facetbar { top: 0; }

  /* fresh-row entrance for full-width job rows (staggered via inline delay) */
  @keyframes pw-rowin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .pw-jobrow { animation: pw-rowin .42s cubic-bezier(.2,.7,.3,1) both; }
  @media (prefers-reduced-motion: reduce) { .pw-jobrow { animation: none; } }

  /* skeleton shimmer rows — jobs list batched loading */
  @keyframes pw-shimmer { from { background-position: -420px 0; } to { background-position: 420px 0; } }
  .pw-skel { border: 1px solid var(--slate-200); border-radius: 14px; background: var(--white); padding: 20px; }
  .pw-skel .bar { height: 12px; border-radius: 7px;
    background: linear-gradient(90deg, var(--slate-100) 25%, var(--slate-200) 50%, var(--slate-100) 75%);
    background-size: 420px 100%; animation: pw-shimmer 1.2s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .pw-skel .bar { animation: none; } }

  /* job-detail apply rail — the aside must stretch to the row's full height
     or the sticky card has no room to travel */
  .pw-detail-grid > aside { align-self: stretch; }

  /* mobile menu trigger — appears exactly where the wide-screen nav hides */
  .pw-menu-btn { display: none; }
  @media (max-width: 560px) { .pw-menu-btn { display: inline-flex; } }

  /* glass modal — apply-redirect interstitial */
  .pw-modal-ov { position: fixed; inset: 0; z-index: 120; background: rgba(2,6,23,.46);
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; pointer-events: none; transition: opacity .22s ease; }
  .pw-modal-ov.open { opacity: 1; pointer-events: auto; }
  .pw-modal { width: min(460px, 100%); background: var(--popover-bg);
    -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
    border: 1px solid var(--header-line); border-radius: 20px; padding: 26px;
    box-shadow: 0 30px 70px -20px rgba(2,6,23,.6), inset 0 1px 0 var(--header-glass-hi);
    transform: translateY(12px) scale(.96); transition: transform .28s cubic-bezier(.34,1.45,.5,1); }
  .pw-modal-ov.open .pw-modal { transform: none; }
  @media (prefers-reduced-motion: reduce) { .pw-modal-ov, .pw-modal { transition: none; } }

  /* cookie-FREE note — the anti-cookie-bar, bottom-left glass (FABs own the
     bottom-right corner) */
  .pw-cookienote { position: fixed; right: 18px; bottom: 18px; z-index: 80;
    display: flex; align-items: flex-start; gap: 12px; max-width: min(430px, calc(100vw - 36px));
    background: linear-gradient(180deg, var(--header-sheen), transparent 55%), var(--header-bg);
    -webkit-backdrop-filter: blur(20px) saturate(200%); backdrop-filter: blur(20px) saturate(200%);
    border: 1px solid var(--header-line); border-radius: 16px; padding: 13px 15px;
    box-shadow: inset 0 1px 0 var(--header-glass-hi), 0 14px 34px -12px rgba(2,6,23,.5);
    transform: translateY(150%); opacity: 0;
    transition: transform .55s cubic-bezier(.34,1.4,.5,1), opacity .3s ease, bottom .32s cubic-bezier(.4,0,.2,1); }
  .pw-cookienote.show { transform: none; opacity: 1; }
  /* the scroll FAB cluster owns the corner while the header is hidden — the
     note steps up so the two never overlap */
  body.pw-header-hidden .pw-cookienote { bottom: 78px; }
  @media (prefers-reduced-motion: reduce) { .pw-cookienote { transition: opacity .3s ease; } }

  /* footer — editorial ink stage */
  .pw-foot-link { display: inline-flex; align-items: center; gap: 7px; color: rgba(226,232,240,.72);
    font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 3px 0; border: 0; background: none;
    font-family: var(--font-sans); transition: color .15s ease; text-align: left; }
  .pw-foot-link:hover { color: #f0fdfa; }
  .pw-foot-domain { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    width: 100%; padding: 9px 2px; border: 0; border-bottom: 1px solid rgba(255,255,255,.07); background: none;
    font-family: var(--font-mono2); font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
    color: rgba(226,232,240,.78); cursor: pointer; transition: color .15s ease, border-color .15s ease; }
  .pw-foot-domain b { font-weight: 600; color: var(--emerald-400); font-variant-numeric: tabular-nums; }
  .pw-foot-domain:hover { color: #f0fdfa; border-bottom-color: rgba(45,212,191,.45); }
  .pw2-watermark { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; line-height: .78;
    font-size: clamp(110px, 16.5vw, 250px); color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.08);
    user-select: none; pointer-events: none; white-space: nowrap; }
  .pw2-watermark .dot { display: inline-block; width: .14em; height: .14em; border-radius: 50%;
    background: var(--emerald-400); opacity: .85; margin-left: .04em;
    animation: pw-breath 5s ease-in-out infinite; --pw-glow: var(--accent-glow-strong); }

  /* ===== AWARD-AUDIT LAYERS — cursor dot · skip link ===== */
  /* the cursor IS the punt — a teal companion dot with soft lag. Fine
     pointers only (CSS hides it on touch); JS skips it under reduced motion.
     System cursor stays visible — this is a companion, not a replacement. */
  .pw-cursor { position: fixed; left: 0; top: 0; z-index: 500; pointer-events: none;
    width: 9px; height: 9px; border-radius: 50%; background: var(--emerald-500);
    box-shadow: 0 0 10px var(--accent-glow); display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: width .2s ease, height .2s ease, background .2s ease, border .2s ease, opacity .25s ease; }
  .pw-cursor.on { opacity: 1; }
  .pw-cursor .lbl { font-family: var(--font-sans); font-size: 15px; font-weight: 800; color: var(--accent-auto); opacity: 0; transition: opacity .15s ease; line-height: 1; }
  .pw-cursor.view { width: 42px; height: 42px; background: rgba(20,184,166,.10); border: 1.5px solid var(--emerald-500); box-shadow: none; }
  .pw-cursor.view .lbl { opacity: 1; }
  .pw-cursor.act { width: 17px; height: 17px; background: rgba(20,184,166,.4); box-shadow: none; }
  .pw-cursor.dot { width: 22px; height: 22px; }
  @media (pointer: coarse) { .pw-cursor { display: none; } }

  /* keyboard path — visible focus on the row/ticker link surfaces */
  .pw2-region-row:focus-visible, .pw2-tick:focus-visible {
    outline: 2px solid var(--emerald-500); outline-offset: 2px; border-radius: 10px; }

  /* keyboard path — skip link surfaces on first Tab */
  .pw-skip { position: fixed; top: 10px; left: 10px; z-index: 600; transform: translateY(-260%);
    font-family: var(--font-mono2); font-size: 12px; font-weight: 600; letter-spacing: .08em;
    color: #fff; background: var(--emerald-600); border-radius: 999px; padding: 10px 18px;
    transition: transform .2s ease; box-shadow: 0 10px 26px -8px var(--accent-glow); }
  .pw-skip:focus-visible { transform: none; }

  /* theme circle reveal — the View Transitions snapshots animate as one
     expanding circle from the toggle; defaults neutralized so only ours runs */
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-old(root) { z-index: 1; }
  ::view-transition-new(root) { z-index: 2; }

  /* ===== ANIMATED GRADIENT BANNER TEXT =====
     Stops are theme- and accent-aware (--grad-*). The gradient tile starts and
     ends on the same stop (a,b,c,a) and background-repeat tiles it, so driving
     background-position 0% → 150% at constant (linear) speed is a PERFECT
     seamless loop — no snap, no visible direction reversal. ~21s: felt, not
     watched. */
  @keyframes pw-gradientFlow { 0% { background-position: 0% 50%; } 100% { background-position: 150% 50%; } }
  .pw-gradient-text {
    background: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c), var(--grad-a));
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: pw-gradientFlow 21s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) { .pw-gradient-text { animation: none; } }

  /* ===================================================================
     V2 REDESIGN — “Op punt” editorial system
     Display face: Bricolage Grotesque (brand voice — hero, titles, numerals)
     UI/body: Inter · Data/labels: Spline Sans Mono. The dot (punt) is the
     recurring motif. Manrope stays loaded as display fallback.
     =================================================================== */
  :root {
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Bricolage Grotesque', 'Manrope', 'Inter', sans-serif;
    --font-mono2: 'Spline Sans Mono', ui-monospace, monospace;
  }
  .pw2-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em; }
  .pw2-mono { font-family: var(--font-mono2); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

  /* hero — full-bleed deep ink-teal stage; constellation lives inside it */
  .pw2-hero { position: relative; overflow: hidden; background: var(--hero-bg); transition: background .45s ease; }
  .pw2-hero-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
      font-size: clamp(44px, 7.6vw, 104px); line-height: .98; color: var(--hero-title); margin: 0; text-wrap: balance; }
  .pw2-hero-title .accent { color: var(--hero-accent); }
  .pw2-hero-title .dim { color: var(--hero-dim); }
  .pw2-hero-canvas { position: absolute; inset: 0; opacity: .8; }
  .pw2-hero-grain { position: absolute; inset: 0; pointer-events: none; opacity: .55;
      background-image: radial-gradient(var(--hero-grain) 1px, transparent 1.2px); background-size: 26px 26px; }

  /* live province ticker — social proof marquee (mono, dot-separated) */
  .pw2-ticker { overflow: hidden; border-top: 1px solid var(--hero-line); border-bottom: 1px solid var(--hero-line);
      background: var(--hero-ticker-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .45s ease; }
  .pw2-ticker-track { display: flex; gap: 0; width: max-content; animation: pw2-marquee 46s linear infinite; }
  .pw2-ticker:hover .pw2-ticker-track { animation-play-state: paused; }
  @keyframes pw2-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .pw2-tick { display: inline-flex; align-items: center; gap: 10px; padding: 11px 26px; white-space: nowrap;
      font-family: var(--font-mono2); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--hero-tick); cursor: pointer; }

  /* popular-searches drift — example queries under the hero search bar.
     Duplicate track + translateX(-50%) loop (the province-ticker mechanic),
     masked edges, pause on hover; reduced motion → static scrollable row. */
  .pw2-pop { display: flex; align-items: center; gap: 12px; margin-top: 18px; max-width: 560px; min-width: 0; }
  .pw2-pop-label { display: inline-flex; align-items: center; gap: 6px; flex: none;
      font-family: var(--font-mono2); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hero-meta); }
  .pw2-pop-mask { overflow: hidden; min-width: 0; flex: 1;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 26px), transparent);
      mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 26px), transparent); }
  .pw2-pop-track { display: flex; gap: 8px; width: max-content; padding: 2px 0; animation: pw2-marquee 36s linear infinite; }
  .pw2-pop:hover .pw2-pop-track, .pw2-pop:focus-within .pw2-pop-track { animation-play-state: paused; }
  .pw2-pop-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer;
      font-family: inherit; font-size: 12px; font-weight: 700; color: var(--hero-sub);
      background: var(--hero-chip-bg); border: 1px solid var(--hero-line); border-radius: 999px; padding: 6px 12px;
      transition: color .15s ease, border-color .15s ease, transform .15s ease; }
  .pw2-pop-chip:hover { color: var(--hero-accent); border-color: var(--hero-accent); transform: translateY(-1px); }
  @media (prefers-reduced-motion: reduce) {
    .pw2-pop-track { animation: none; overflow-x: auto; }
    .pw2-pop-track > [aria-hidden="true"] { display: none; }
  }
  .pw2-tick b { color: var(--hero-accent); font-weight: 600; font-variant-numeric: tabular-nums; }
  .pw2-tick .pt { width: 5px; height: 5px; border-radius: 50%; background: var(--hero-accent); flex: none; }
  @media (prefers-reduced-motion: reduce) { .pw2-ticker-track { animation: none; } }

  /* section label — mono overline + giant display title */
  .pw2-sec-label { font-family: var(--font-mono2); font-size: 11.5px; font-weight: 600; letter-spacing: .16em;
      text-transform: uppercase; color: var(--emerald-700); display: inline-flex; align-items: center; gap: 9px; }
  .pw2-sec-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald-500); }
  .pw2-sec-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em;
      font-size: clamp(30px, 4.4vw, 54px); line-height: 1.02; color: var(--slate-900); margin: 12px 0 0; text-wrap: balance; }

  /* outlined giant numerals (how-it-works) */
  .pw2-numeral { font-family: var(--font-display); font-weight: 800; font-size: clamp(64px, 8vw, 110px); line-height: .9;
      color: transparent; -webkit-text-stroke: 1.5px var(--emerald-600); opacity: .75; letter-spacing: -0.01em; }
  html.dark .pw2-numeral { -webkit-text-stroke-color: var(--emerald-400); }

  /* CTA band — the single vibrant-teal block (one accent action per page) */
  .pw2-cta-band { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 70%, #2dd4bf 100%); border-radius: 24px; position: relative; overflow: hidden; }
  .pw2-cta-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(640px 300px at 85% 0%, rgba(255,255,255,.22), transparent 60%); }

  /* magnetic button base (transform applied by JS) */
  .pw2-magnet { display: inline-flex; transition: transform .28s cubic-bezier(.22,1,.36,1); will-change: transform; }

  /* stat block — editorial big numbers */
  .pw2-stat-n { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em;
      font-size: clamp(40px, 5.2vw, 72px); line-height: 1; color: var(--slate-900); font-variant-numeric: tabular-nums; }

  /* page heads (jobs/detail) get the display face */
  .pw2-page-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em;
      font-size: clamp(34px, 5vw, 58px); line-height: 1.0; color: var(--slate-900); margin: 0; }

  /* hero composition — content left, constellation RIGHT, side by side in
     normal flow (no absolute overlap: every node stays visible + clickable at
     every width); stacks below the copy on small screens */
  .pw2-hero-grid { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 140px 24px 84px;
      display: flex; flex-direction: row; align-items: center; gap: clamp(20px, 4vw, 56px);
      min-height: min(78vh, 760px); }
  .pw2-hero-left { flex: 1 1 560px; min-width: 0; max-width: 640px; }
  .pw2-hero-right { position: relative; flex: 1 1 380px; min-width: 300px; height: clamp(360px, 42vw, 520px); z-index: 1; }
  .pw2-hl { display: block; overflow: hidden; }
  .pw2-hl-inner { display: block; }
  /* hero scope word-roll (Accountable-audit steal #1, adapted) — the "One
     country." line cycles through the network's scope levels inside its own
     line mask. Em-based heights track the clamp() font-size; the column
     holds with a long dwell, then rolls with an expo snap. */
  .pw2-roll { display: block; height: .98em; overflow: hidden; }
  .pw2-roll-col { display: block; transition: transform .65s cubic-bezier(.76,0,.24,1); will-change: transform; }
  .pw2-roll-line { display: block; height: .98em; }
  @media (prefers-reduced-motion: reduce) { .pw2-roll-col { transition: none; } }
  @media (max-width: 980px) {
    .pw2-hero-grid { flex-direction: column; align-items: stretch; min-height: 0; padding: 126px 24px 40px; gap: 0; }
    .pw2-hero-right { width: 100%; min-width: 0; height: 320px; margin-top: 16px; }
  }

  /* scope chip — DEV-ONLY preview control. In production each .work domain
     auto-selects its own constellation; this dashed amber-tagged chip only
     exists in the kit so every scope can be reviewed. */
  .pw2-scope { position: absolute; top: 2px; right: 2px; z-index: 4; display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-mono2); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--hero-tick);
    background: var(--hero-ticker-bg); border: 1px dashed rgba(245,158,11,.55); border-radius: 999px; padding: 6px 9px 6px 7px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .2s ease; }
  .pw2-scope:hover { border-color: rgba(245,158,11,.9); }
  .pw2-scope .devtag { font-size: 8.5px; font-weight: 800; letter-spacing: .12em; color: #b45309; background: rgba(245,158,11,.18);
    border: 1px solid rgba(245,158,11,.4); border-radius: 5px; padding: 2px 5px; line-height: 1; flex: none; }
  html.dark .pw2-scope .devtag { color: #fbbf24; }
  .pw2-scope select { font-family: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--hero-accent);
    background: transparent; border: 0; outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; }
  .pw2-scope select option { color: #0f172a; background: #fff; }

  /* constellation tooltip — one soft rise on first appearance, then it GLIDES
     between nodes (position transitions, no re-pop): continuous object
     permanence instead of a popping card, calm for the subconscious. */
  @keyframes pw-tipin { from { opacity: 0; transform: translateY(7px) scale(.96); } to { opacity: 1; transform: none; } }
  .pw-const-tip { animation: pw-tipin .32s cubic-bezier(.22,1,.36,1) both;
    transition: left .34s cubic-bezier(.22,1,.36,1), top .34s cubic-bezier(.22,1,.36,1); will-change: left, top; }
  @media (prefers-reduced-motion: reduce) { .pw-const-tip { animation: none; transition: none; } }

  /* region leaderboard — editorial rows with share bars */
  .pw2-region-row { display: grid; grid-template-columns: 56px 1fr 130px; gap: 18px; align-items: center;
      padding: 18px 4px; border-top: 1px solid var(--slate-200); cursor: pointer; transition: background .18s ease; }
  .pw2-region-row:hover { background: var(--emerald-50); }
  .pw2-region-name { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em;
      font-size: clamp(19px, 2.4vw, 27px); color: var(--slate-900); line-height: 1.1; }
  .pw2-region-bar { height: 4px; border-radius: 999px; background: var(--slate-100); overflow: hidden; margin-top: 8px; max-width: 420px; }
  .pw2-region-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--emerald-700), var(--emerald-400));
      transform-origin: left; transform: scaleX(var(--share, 0)); transition: transform 1.1s cubic-bezier(.22,1,.36,1) .15s; }
  @media (max-width: 640px) { .pw2-region-row { grid-template-columns: 40px 1fr 92px; gap: 12px; } }

  /* ===================================================================
     RESPONSIVE LAYOUT — the kit is desktop-first with inline styles;
     these classes own every structural breakpoint (mobile ≤ 920px).
     =================================================================== */
  .pw-hero-title { font-size: clamp(34px, 7.5vw, 56px); }
  .pw-detail-title { font-size: clamp(26px, 5.8vw, 36px); }
  .pw-snapshot { display: flex; gap: 28px; }
  .pw-snap-div { width: 1px; background: var(--slate-200); flex: none; }
  .pw-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .pw-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 36px; align-items: start; }
  .pw-searchbar { display: flex; background: var(--white); border: 1px solid var(--slate-300); border-radius: 14px; box-shadow: 0 4px 12px rgba(15,23,42,.08); overflow: hidden; }
  .pw-sb-div { width: 1px; background: var(--slate-200); margin: 10px 0; flex: none; }
  @media (max-width: 920px) {
    .pw-detail-grid { grid-template-columns: 1fr; gap: 26px; }
  }
  @media (max-width: 860px) {
    .pw-how-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 760px) {
    .pw-snapshot { flex-direction: column; gap: 18px; }
    .pw-snap-div { width: auto; height: 1px; }
  }
  @media (max-width: 560px) {
    .pw-hide-mobile { display: none !important; }
    .pw-searchbar.duo { flex-direction: column; }
    .pw-searchbar.duo .pw-sb-div { width: auto; height: 1px; margin: 0 14px; }
    .pw-searchbar.duo .pw-sb-btn { padding: 7px; }
    .pw-searchbar.duo .pw-sb-btn > * { width: 100%; }
  }

  /* soft aurora glow behind the hero — a weather system, not a light show.
     SEAMLESS by construction: two counter-rotating gradient layers spin full
     360° turns at constant speed (52s / 74s), so the loop can never snap.
     Opacity is constant (no pulsing); the bottom mask fades it out before the
     search bar so form controls always sit on calm canvas. */
  @keyframes pw-aur-a { to { transform: rotate(360deg); } }
  @keyframes pw-aur-b { to { transform: rotate(-360deg); } }
  .pw-aurora { position: absolute; inset: -12% -6% auto -6%; height: 440px; pointer-events: none; z-index: 0;
    filter: blur(64px); opacity: .5; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%); }
  .pw-aurora::before, .pw-aurora::after { content: ""; position: absolute; left: 50%; top: 50%;
    width: 170%; aspect-ratio: 1; margin: -85% 0 0 -85%; transform-origin: center; }
  .pw-aurora::before {
    background:
      radial-gradient(26% 20% at 32% 38%, var(--grad-a) 0%, transparent 70%),
      radial-gradient(22% 18% at 68% 32%, var(--grad-b) 0%, transparent 70%);
    animation: pw-aur-a 52s linear infinite; }
  .pw-aurora::after {
    background:
      radial-gradient(24% 19% at 62% 66%, var(--grad-c) 0%, transparent 70%),
      radial-gradient(18% 15% at 36% 62%, var(--grad-b) 0%, transparent 72%);
    animation: pw-aur-b 74s linear infinite; opacity: .8; }
  html.dark .pw-aurora { opacity: .34; }
  @media (prefers-reduced-motion: reduce) { .pw-aurora::before, .pw-aurora::after { animation: none; } }

  /* dev accent switcher overlay — liquid glass, three swatches */
  .pw-devtoggle { position: fixed; left: 14px; bottom: 14px; z-index: 90;
    display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans);
    font-size: 12px; font-weight: 700; color: var(--header-fg);
    background: linear-gradient(180deg, var(--header-sheen), transparent 55%), var(--header-bg);
    border: 1px solid var(--header-line); border-radius: 999px;
    padding: 7px 9px 7px 13px; box-shadow: inset 0 1px 0 var(--header-glass-hi), 0 10px 26px -10px rgba(2,6,23,.4);
    -webkit-backdrop-filter: blur(20px) saturate(200%); backdrop-filter: blur(20px) saturate(200%); user-select: none; }
  .pw-devtoggle .sw { display: inline-flex; align-items: center; gap: 4px; }
  .pw-devtoggle .opt { display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer; font-family: inherit;
    font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 4px 9px; background: transparent; color: var(--header-dim);
    transition: background .15s ease, color .15s ease; }
  .pw-devtoggle .opt:hover { background: var(--header-chip); }
  .pw-devtoggle .opt.on { background: var(--header-chip); }
  .pw-devtoggle .chip { width: 12px; height: 12px; border-radius: 50%; }
  .pw-devtoggle .key { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-400); }

  /* ===== sort / filters glass popovers — float OVER the facets without
     displacing them (facets stay visible and usable); right-anchored, capped
     to the viewport on mobile ===== */
  .pw-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 55; min-width: 264px;
    max-width: min(380px, calc(100vw - 28px));
    background: var(--popover-bg); -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%);
    border: 1px solid var(--header-line); border-radius: 16px; padding: 10px;
    box-shadow: 0 24px 54px -16px rgba(2,6,23,.5), inset 0 1px 0 var(--header-glass-hi);
    transform-origin: top right; transform: translateY(-8px) scale(.95); opacity: 0; pointer-events: none;
    transition: transform .22s cubic-bezier(.34,1.56,.5,1), opacity .16s ease; }
  .pw-pop.open { transform: none; opacity: 1; pointer-events: auto; }
  .pw-pop-title { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--slate-400); padding: 4px 6px 7px; }

  /* facet group label = a quiet search field that filters its row's pills.
     DISCOVERABILITY: each label carries its facet's own glyph (briefcase,
     map-pin, …) which MORPHS into a magnifier on hover/focus, the dashed
     underline brightens to accent, and the field gently widens — three small
     synchronized cues that say "this label is also a search box". */
  .pw-fglabel-search { display: inline-flex; align-items: center; gap: 6px; flex: none; width: 104px; cursor: text;
    padding-bottom: 2px; border-bottom: 1px dashed var(--slate-300);
    transition: border-color .2s ease, width .3s cubic-bezier(.3,1.1,.4,1); }
  .pw-fglabel-search:hover, .pw-fglabel-search:focus-within { border-bottom-color: var(--emerald-500); width: 134px; }
  .pw-fglabel-search .flic { position: relative; width: 12px; height: 12px; flex: none; }
  .pw-fglabel-search .flic > span { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center;
    transition: opacity .18s ease, transform .3s cubic-bezier(.34,1.56,.5,1); }
  .pw-fglabel-search .flic .fa { opacity: 1; color: var(--slate-400); }
  .pw-fglabel-search .flic .fb { opacity: 0; transform: scale(.4) rotate(-50deg); color: var(--emerald-600); }
  .pw-fglabel-search:hover .flic .fa, .pw-fglabel-search:focus-within .flic .fa { opacity: 0; transform: scale(.4) rotate(50deg); }
  .pw-fglabel-search:hover .flic .fb, .pw-fglabel-search:focus-within .flic .fb { opacity: 1; transform: none; }
  .pw-fglabel-search input { width: 100%; border: 0; outline: none; background: transparent; font-family: inherit;
    font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-600); padding: 0; }
  .pw-fglabel-search input::placeholder { color: var(--slate-400); opacity: 1; transition: color .18s ease; }
  .pw-fglabel-search:hover input::placeholder, .pw-fglabel-search:focus-within input::placeholder { color: var(--slate-500); }
  .pw-fglabel-search .clr { display: inline-flex; border: 0; background: none; cursor: pointer; color: var(--slate-400); padding: 1px; }
  @media (prefers-reduced-motion: reduce) { .pw-fglabel-search, .pw-fglabel-search .flic > span { transition: none; } }

  /* swipe cues — edge-anchored action chips that fill with drag progress and
     LOCK (solid fill + check) at the commit threshold: an unambiguous go/no-go
     signal exactly where the eye already is */
  /* swipe cues — anchored to the card FRAME (the stationary wrapper), never
     the moving card, so they stay readable at the edges mid-swipe. The chip
     fills with drag progress and LOCKS (solid fill + check) at the commit
     threshold: an unambiguous go/no-go signal that never leaves the frame. */
  .pw-feed-cue { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 7px; pointer-events: none;
    font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 7px 14px;
    border: 1.5px solid; background: var(--feed-cue-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap;
    box-shadow: 0 8px 22px -8px rgba(2,6,23,.35); }

  /* ===== intro sequencing — attention chaining =====
     One motion onset at a time: while [data-pw-intro] is set, every beacon
     loop holds still; the conductor (App) lets the hero numbers land, then
     cues the wordmark sweep, then releases the beacons. */
  html[data-pw-intro] .pw-beacon .ring,
  html[data-pw-intro] .pw-beacon .core { animation-play-state: paused !important; }

  /* ===== puntWork attention system — shared motion tokens ===== */
  /* locator beacon: a solid emerald core with a ring pinging outward.
     mode "live"   — continuous ping (always-fresh markers, pins).
     mode "signal" — one ping on load, then the canonical 0.2 Hz living breath. */
  .pw-beacon { position: relative; display: inline-block; flex: none; }
  .pw-beacon .core { position: absolute; inset: 0; border-radius: 50%; }
  .pw-beacon .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid; }
  /* live */
  .pw-beacon-live .ring { animation: pw-ping 2.6s cubic-bezier(0,0,.2,1) infinite; }
  .pw-beacon-live .ring.r2 { animation-delay: 1.3s; }
  /* signal (CANONICAL): single ping (replayable via .beep), then the core
     settles into a 0.2 Hz "breath" — a living scale + ember glow.
     Tone (light vs ink) is carried by --pw-glow + core color. */
  .pw-beacon-signal .ring { opacity: 0; }
  .pw-beacon-signal .ring.beep { animation: pw-ping 1.5s cubic-bezier(0,0,.2,1) both; }
  .pw-beacon-signal .core { animation: pw-breath 5s ease-in-out 1.2s infinite; }
  .pw-beacon-signal { outline: none; border-radius: 50%; }
  @keyframes pw-ping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(3); opacity: 0; } }
  @keyframes pw-ember {
    0%, 100% { box-shadow: 0 0 3px 0 var(--pw-glow, rgba(5,150,105,.55)); filter: brightness(1); }
    50% { box-shadow: 0 0 12px 3px var(--pw-glow, rgba(5,150,105,.55)); filter: brightness(1.12); }
  }
  /* 0.2 Hz living breath — gentle scale fused with the warm ember glow */
  @keyframes pw-breath {
    0%, 100% { transform: scale(.94); box-shadow: 0 0 3px 0 var(--pw-glow, rgba(5,150,105,.55)); filter: brightness(1); }
    50% { transform: scale(1); box-shadow: 0 0 11px 2px var(--pw-glow, rgba(5,150,105,.55)); filter: brightness(1.1); }
  }
  @keyframes pw-blink { 50% { opacity: 0; } }
  /* fresh-row sheen: a slow one-shot highlight sweep on newly surfaced items */
  @keyframes pw-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .pw-beacon .ring { animation: none !important; transform: scale(2); opacity: .22; }
    .pw-beacon .ring.r2 { display: none; }
    .pw-beacon-signal .core { animation: none !important; box-shadow: 0 0 8px 2px var(--pw-glow, rgba(5,150,105,.55)); }
    .pw-beacon-signal .ring.beep { animation: none !important; }
  }

  /* ===== Animated full wordmark reveal — CANONICAL "Sweep" =====
     Arrives spelled out as "puntWork" (emerald "punt"), then the emerald word
     wipes left→right and condenses into the dot → ●Work, which rests in the
     0.2 Hz signal breath. Used in the header. Tone = on-ink (emerald-400). */
  /* ===== Wordmark "Sweep" — reversible hover morph (●Work ⇄ puntWork) =====
     Rest = ●Work; hover/focus expands the emerald word and back. Tuned snappy
     (~0.24s, slight overshoot) — fast enough to read as an instant orienting
     response, slow enough for the eye to track the morph. Tone via --rv-*. */
  /* ===== Wordmark "Sweep" — reversible hover morph (●Work ⇄ puntWork) =====
     Rest = ●Work; hover/focus expands the emerald word and back. Tuned
     UNHURRIED (~0.55s morph with a soft overshoot, 1.4s ping) so the eye has
     time to watch "punt" condense into the dot — the morph IS the brand story,
     so it plays at storytelling speed, not UI speed. Entrance: the full word
     holds for ~2.2s before the first sweep. Leave is debounced ~380ms in JS so
     a grazing cursor doesn't flicker it. Tone via --rv-*. */
  .pw-reveal { display: inline-flex; align-items: center; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--rv-work); cursor: pointer; outline: none; }
  .pw-reveal .rv-punt { display: inline-block; overflow: hidden; white-space: nowrap; text-align: right; color: var(--rv-punt);
    max-width: 0; opacity: 0; letter-spacing: -.16em;
    transition: max-width .6s cubic-bezier(.3,1.12,.35,1), opacity .42s ease .06s, letter-spacing .6s cubic-bezier(.3,1.12,.35,1); }
  .pw-reveal .rv-dot { position: relative; display: inline-block; width: .58em; height: .58em; border-radius: 50%;
    background: var(--rv-dot); transform: scale(1); margin-right: .16em; --pw-glow: var(--rv-glow);
    transition: width .55s cubic-bezier(.3,1.12,.35,1), transform .55s cubic-bezier(.34,1.4,.5,1), margin-right .55s ease;
    animation: pw-dotglow 5s ease-in-out infinite; }
  .pw-reveal .rv-dot .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--rv-dot); opacity: 0; }
  .pw-reveal .rv-dot .ring.beep { animation: pw-ping 1.4s cubic-bezier(0,0,.2,1) both; }
  .pw-reveal.show-word .rv-punt { max-width: 2.6em; opacity: 1; letter-spacing: -.03em; transition-delay: 0s; }
  .pw-reveal.show-word .rv-dot { width: 0; transform: scale(0); margin-right: 0; animation: none; }
  @keyframes pw-dotglow { 0%,100% { box-shadow: 0 0 3px 0 var(--pw-glow); filter: brightness(1); } 50% { box-shadow: 0 0 11px 2px var(--pw-glow); filter: brightness(1.08); } }
  @media (prefers-reduced-motion: reduce) {
    .pw-reveal .rv-punt, .pw-reveal .rv-dot { transition: none !important; }
    .pw-reveal .rv-dot { animation: none !important; }
    .pw-reveal .rv-dot .ring.beep { animation: none !important; }
  }

  /* ===== header wordmark morph (puntWork ⇄ ●Work) — driven by wordmark-v2.js =====
     Rest = full "puntWork"; one auto-condense ~2.2s after load tells the brand
     story (punt collapses into the teal dot → ●Work), then settles back. The dot
     IS the punt. Client-only enhancement (SSR keeps "punt<span>Work</span>"). */
  .pw2-wm-punt { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 4em; opacity: 1;
    vertical-align: baseline; transition: max-width .55s cubic-bezier(.3,1.12,.35,1), opacity .42s ease; }
  .pw2-wm-dot { display: inline-block; width: 0; opacity: 0; overflow: hidden; text-align: center;
    color: var(--emerald-500); transform: translateY(-0.02em);
    transition: width .5s cubic-bezier(.3,1.12,.35,1), opacity .35s ease; }
  .pw2-wm-condensed .pw2-wm-punt { max-width: 0; opacity: 0; }
  .pw2-wm-condensed .pw2-wm-dot { width: .62em; opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .pw2-wm-punt, .pw2-wm-dot { transition: none; } }

  /* Mobile guard — never let a too-wide element create a horizontal scroll/bleed.
     `clip` (not `hidden`) so position:sticky chrome keeps working. */
  html { overflow-x: clip; }
  body.pw-v2 { overflow-x: clip; max-width: 100%; }

  /* v2 theme track-switch — the knob slides to the moon pole in dark mode.
     dark-mode.js morphs the data-theme-icon path; this slides the knob. */
  /* knob slides with a slight spring overshoot (HeaderV2 timing), owns its own
     transition so it isn't capped by the markup's transition-transform util. */
  .pw-theme-knob { transform: translateX(0); transition: transform .38s cubic-bezier(.34, 1.6, .45, 1); }
  html.dark .pw-theme-knob { transform: translateX(21px); }
  @media (prefers-reduced-motion: reduce) { .pw-theme-knob { transition: none; } }
  /* HeaderV2 toggle anatomy: knob = current mode, track shows the TARGET pole.
     Light → moon visible (switch to dark); dark → sun visible. */
  .pw-theme-sun  { opacity: 0;   transition: opacity .25s ease; }
  .pw-theme-moon { opacity: .55; transition: opacity .25s ease; }
  html.dark .pw-theme-sun  { opacity: .55; }
  html.dark .pw-theme-moon { opacity: 0; }
  /* knob glyph pops when dark-mode.js swaps it (adds .pw-knob-pop briefly) */
  .pw-knob-pop { animation: pw-iconpop .36s cubic-bezier(.34,1.6,.5,1); }
  @media (prefers-reduced-motion: reduce) { .pw-knob-pop { animation: none; } }

  /* home-FAQ disclosure marker — native <details>, +/− flips on open */
  .answer-disclosure > summary { list-style: none; }
  .answer-disclosure > summary::-webkit-details-marker { display: none; }
  .answer-disclosure > summary .pw-faq-mark::after { content: "+"; }
  .answer-disclosure[open] > summary .pw-faq-mark::after { content: "−"; }

  /* ===== Fixed liquid-glass overlay header (prototype parity) =====
     The .pw-header is position:fixed and the page scrolls beneath it. Content
     pages clear it with top padding; pages with a full-bleed .pw2-hero let the
     hero background read straight through the glass (the hero's own top padding
     clears the bar). :has() guards hero pages; older engines just keep the pad. */
  body { padding-top: 58px; }
  body:has(.pw2-hero) { padding-top: 0; }
  /* the mobile sticky search bar rides just under the fixed header, not behind it */
  body [data-mobile-search-bar] { top: 58px !important; }

  /* ===== KineticTitle entrance (ExperienceV2) — titles rise + fade in on load.
     Lighter than the GSAP yPercent mask but the same gesture; reduced-motion off. */
  @keyframes pw-title-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .pw2-hero-title, .pw2-page-title, .pw-detail-title, .pw2-sec-title {
    animation: pw-title-in .72s cubic-bezier(.16,1,.3,1) both;
  }
  @media (prefers-reduced-motion: reduce) {
    .pw2-hero-title, .pw2-page-title, .pw-detail-title, .pw2-sec-title { animation: none; }
  }

  /* ===== FooterDotGrid — interactive dot grid that ripples teal near the pointer.
     Canvas sits behind the footer content; reduced-motion = static faint grid. */
  .pw-foot-dotgrid { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6; }