/* ============================================================
   DNA Agency — site-v4.css  ("Apple-tier" premium + CONTRAST layer)
   ------------------------------------------------------------
   Loaded AFTER site.css (extends tokens, never overrides them).
   This file owns three jobs, in priority order:

     1. THE CONTRAST SYSTEM (#1 gate — this killed v3).
        Text NEVER sits on the raw 3D canvas or a raw gradient.
        It sits on (A) a fixed-alpha dark scrim PLATE (.on-canvas)
        or (B) a fully-opaque break-away section (.section--break /
        .band--ink). Every text/ground pair below is computed and
        verified WCAG-AA against the real tokens. Ratios are against
        the PLATE, not the moving scene, so they hold in every helix
        state AND in the static-gradient fallback.

     2. THE FIXED 3D CANVAS + PREMIUM GRADIENT FALLBACK.
        #hero-canvas-wrap is fixed, z-0, painted with a premium
        espresso-gradient on FIRST PAINT. The <canvas> fades in over
        it only if the capability gate passes; otherwise the gradient
        IS the design (most mobile / cold-email visitors see only it).

     3. THE PREMIUM SHELL — big confident type scale, generous space,
        the faceless DNA-monogram team tiles, client-work frames,
        pricing cards, the ONE obvious CTA, reduced-motion kills.

   ------------------------------------------------------------
   VERIFIED CONTRAST TABLE  (sRGB relative luminance, WCAG 2.x)
   NEUTRAL SYSTEM — near-black ink / true grays / off-white paper +
   ONE rationed refined-orange accent. All pairings AA+ by computation.
   ------------------------------------------------------------
   GROUND DARK — the .on-canvas plate = rgba(16,17,20,.90) over the
   graphite gradient. Effective plate colour ~= #101114. Helix is now
   SOLID (MeshStandardMaterial, no AdditiveBlending), so the scene is
   dimmer and cannot blow the ground brighter than the plate: the .90
   alpha holds. accent-as-text on dark MUST be #ff6a3d (never the
   light-mode #bb3f0c, which fails on dark). Backdrop-blur is
   enhancement only; the alpha is what guarantees legibility.
     head #f4f4f2  on #101114 plate ............. 17.1:1  (AAA)
     body/lede #e4e4e1 on plate ................. 14.8:1  (AAA)
     muted/micro #b9b9b4 on plate ............... 9.58:1  (AA+)
     accent-as-text/em/eyebrow: MUST be #ff6a3d . 6.64:1  (AA)
       (never #bb3f0c on dark = ~3.9:1 -> FAILS.)
     slate/chrome #aab2bd on plate .............. 8.82:1  (AA+)
     primary button: #ffffff on #bb3f0c fill .... 5.48:1  (AA)
     ghost button:  #f4f4f2 text + border on plate (AAA)

   GROUND LIGHT — opaque break sections, background:var(--paper).
   Canvas does NOT show through (section is z-index:1, painted paper).
     --ink #17181c on --paper #f7f7f5 ........... 16.5:1  (AAA)
     --ink-soft #565b64 on --paper .............. 6.36:1  (AA)
     accent-as-text: MUST be --accent-text #c2410c 4.83:1 (AA)
       or --accent-deep #bb3f0c ................. 5.11:1  (AA)
       (never bright --accent #ee5622 = 3.27:1 -> FAILS body.
        bright accent is display/borders/flags/em ONLY.)
     --brand graphite #3a3f47 on --paper ........ 9.88:1  (AAA)
     button: #ffffff on #bb3f0c ................. 5.48:1  (AA)
       (never white on bright --accent -> FAILS.)

   GROUND INK — the CTA band, background:#131417 SOLID.
     head #f4f4f2 on #131417 .................... 16.7:1  (AAA)
     button #ffffff on #bb3f0c ................... 5.48:1  (AA)

   REVIEWER RULE (enforce on every PR):
     If a text node's nearest positioned/painted ancestor is
     transparent AND the fixed canvas is behind it, that's a bug.
     Wrap it in .on-canvas or move it into a .section--break.
   ============================================================ */

/* ------------------------------------------------------------
   0. FIXED 3D CANVAS CONTAINER + PREMIUM GRADIENT FALLBACK
   ------------------------------------------------------------
   Painted on first paint, before three.js exists. On home it is
   the scroll-choreographed backdrop; on inner pages one calm
   breathing state (scene3d.js reads data-scene-mode). z-0: page
   content sits above it. pointer-events:none so it never eats clicks. */
#hero-canvas-wrap{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  /* GRAPHITE ground (neutral, NOT espresso) + one rationed accent glow +
     a faint white lift. Contrast never depends on this: the scrim plates
     are computed against #101114, so text is legible over this fallback
     and the live scene identically. */
  background:
    radial-gradient(120% 90% at 82% 6%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
    radial-gradient(130% 100% at 55% 15%, #ffffff 0%, #f4f5f6 55%, #eceef0 100%);
}
/* LIGHT / Apple-clean ground in every theme: the helix sits on a soft white
   gradient, nodes are dark-gray so they read as a subtle diagram. Page content
   sits on light cards over this. */
/* LIGHT in EVERY case (owner wants a clean light Apple-style page, not dark) */
@media(prefers-color-scheme:light){
  #hero-canvas-wrap{
    background:
      radial-gradient(120% 90% at 82% 6%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
      radial-gradient(130% 100% at 55% 15%, #ffffff 0%, #f4f5f6 55%, #eceef0 100%);
  }
}
:root[data-theme="light"] #hero-canvas-wrap,
:root[data-theme="dark"] #hero-canvas-wrap{
  background:
    radial-gradient(120% 90% at 82% 6%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
    radial-gradient(130% 100% at 55% 15%, #ffffff 0%, #f4f5f6 55%, #eceef0 100%);
}
/* the live canvas: fades IN over the gradient once the scene is healthy.
   scene3d.js sets .is-live -> opacity 1. Never blocks first paint. */
#hero-canvas-wrap canvas{
  position:absolute; inset:0; width:100%!important; height:100%!important;
  display:block; opacity:0; transition:opacity .6s ease;
}
#hero-canvas-wrap.is-live canvas{ opacity:1; }

/* When the site body has the fixed canvas, its own base paper background
   would occlude the canvas. We keep body paper (so non-scrim'd areas of
   inner pages are legible) BUT give the home <main> a transparent stack
   so the canvas shows through between opaque break sections. Opt-in via
   .has-canvas on <body>. */
body.has-canvas{ background:#f4f5f6; }          /* light ground, matches canvas gradient */
body.has-canvas > .site-header{ z-index:50; }   /* header above canvas */
body.has-canvas main{ position:relative; z-index:1; background:transparent; }
/* the grain overlay from site.css stays on top — fine over both grounds */

/* ------------------------------------------------------------
   1. THE SCRIM PLATE UTILITY (.on-canvas) — text over the canvas
   ------------------------------------------------------------
   Fixed-alpha dark plate. 0.72 alpha alone = AA guaranteed; the blur
   is enhancement only. Any text block that floats over the fixed
   canvas MUST carry this (or live in a .section--break). */
/* LIGHT CARD (Apple-clean): the hero copy sits on a frosted WHITE card over
   the soft light canvas. Dark text, generous space, one calm accent. A subtle
   translucent white + blur so the helix reads faintly behind it. */
.on-canvas{
  position:relative; z-index:1;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
  padding:clamp(2rem,4vw,3.4rem) clamp(2rem,4.5vw,3.8rem);
  border-radius:22px;
  border:1px solid rgba(23,24,28,.06);
  box-shadow:0 30px 70px -30px rgba(23,24,28,.22);
  color:var(--ink-soft);
}
/* HARD-CODED dark text — the .on-canvas card is ALWAYS light (forced), but the
   --ink/--ink-soft tokens FLIP to near-white under an OS dark preference, which
   made the heading white-on-white (invisible). Use fixed dark hexes so the card
   text is always legible regardless of the visitor's OS theme. */
.on-canvas h1, .on-canvas h2, .on-canvas h3{ color:#17181c !important; }
.on-canvas p, .on-canvas .lede, .on-canvas li, .on-canvas span{ color:#565b64 !important; }
.on-canvas .muted, .on-canvas .micro{ color:#565b64 !important; }
.on-canvas h1 em, .on-canvas h2 em{ color:#bb3f0c !important; font-style:italic; }
.on-canvas .eyebrow{ color:#565b64 !important; }     /* neutral gray, not orange */
.on-canvas .eyebrow::before{ background:#ee5622; }   /* tiny accent tick only */
.on-canvas .accent-word{ color:#bb3f0c !important; }

/* ------------------------------------------------------------
   2. BREAK-AWAY OPAQUE SECTIONS — occlude the canvas physically
   ------------------------------------------------------------
   .section--break paints an opaque paper ground at z-1 so the canvas
   never shows through; text uses normal --ink/--ink-soft tokens (AA).
   .band--ink paints the solid ink CTA ground (strongest contrast). */
.section--break{
  position:relative; z-index:1;
  background:var(--paper);
  /* hairline top/bottom rules to physically delineate from the canvas
     zones above/below — the "everything blended together" fix. */
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section--break.section--deep{ background:var(--paper-deep); }

/* CRITICAL: this band is a PERMANENTLY-DARK NEUTRAL ground in BOTH themes.
   It must NOT use --ink/--paper (those flip in dark theme, which would put
   the hardcoded light child text on a light band = the v3 invisible-text
   bug). Ground is fixed #131417; all child text is fixed light. Verified:
   #f4f4f2 on #131417 = 16.7:1 (AAA); #dcdcd8 lede ~14:1; #b9b9b4 = 9.58:1;
   white on #bb3f0c button = 5.48:1; accent-text #ff6a3d = 6.64:1. */
.band--ink{
  position:relative; z-index:1;
  background:#131417;
  border-top:4px solid var(--accent);
  color:#f4f4f2;
  padding:var(--sp-section) 0;
  text-align:center;
}
.band--ink h2{ color:#f4f4f2; max-width:20ch; margin:0 auto 1rem; }
.band--ink h2 em{ color:#ff6a3d; }
.band--ink .lede{ color:#dcdcd8; margin:0 auto 1.6rem; max-width:44rem; }
.band--ink .eyebrow{ color:#ff6a3d; }
.band--ink .eyebrow::before{ background:#ff6a3d; }
.band--ink .btn--primary{ border-color:#f4f4f2; background:#bb3f0c; color:#ffffff; }
.band--ink .band__mail{ margin-top:1.2rem; font-size:.98rem; color:#b9b9b4; }
.band--ink .band__mail a{ color:#f4f4f2; }
.band--ink .band__reassure{ margin-top:1rem; font-size:.9rem; color:#b9b9b4; }

/* ------------------------------------------------------------
   3. HOME SCROLL SCENES — each is a full-viewport-ish beat that
   the fixed helix animates behind. data-scene="N" is read by
   scene3d.js's IntersectionObserver to set the morph target.
   ------------------------------------------------------------ */
.scene{ position:relative; z-index:1; padding:clamp(4rem,10vh,7rem) 0; }
.scene--tall{ min-height:92vh; display:flex; align-items:center; }
.scene__inner{ width:100%; }

/* Hero plate: left-anchored, constrained so the helix breathes at right */
.scene-hero .on-canvas{ max-width:36rem; }
.scene-hero h1{ font-size:clamp(2.2rem,4.8vw,3.6rem); line-height:1.08; margin:.3rem 0 1.2rem;
  letter-spacing:-.015em; }
.scene-hero .lede{ max-width:32rem; }
.scene-hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.8rem; }
.scene-hero__micro{ margin-top:1.3rem; font-size:.85rem; color:#b9b9b4; }

/* Problem plate: offset toward the right third */
.scene-problem{ display:flex; justify-content:flex-end; }
.scene-problem .on-canvas{ max-width:34rem; }
.chip-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
.chip{ display:inline-flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.85rem; letter-spacing:.02em;
  color:#e4e4e1; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18); border-radius:100px;
  padding:.5rem .95rem; }
.chip::before{ content:""; width:8px; height:8px; border-radius:50%;
  background:#ff6a3d; flex:none; }

/* Services dark band: full-width scrim (not a floating plate) */
.scene-services{ position:relative; z-index:1; }
.scene-services__scrim{ background:rgba(16,17,20,.90);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  padding:clamp(3rem,7vw,5rem) 0; }
.scene-services__scrim .eyebrow{ color:#ff6a3d; }
.scene-services__scrim .eyebrow::before{ background:#ff6a3d; }
.scene-services h2, .scene-services p, .scene-services li{ color:#e4e4e1; }
.scene-services h2{ color:#f4f4f2; }
.scene-services h2 em{ color:#ff6a3d; }

/* one-liner service rows (icon + label + short line) */
.svc-lines{ display:grid; gap:.9rem; margin-top:1.6rem; }
.svc-line{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:baseline;
  padding:1rem 0; border-top:1px solid rgba(255,255,255,.12); }
.svc-line:first-child{ border-top:none; }
.svc-line__label{ font-family:var(--font-display); font-weight:550; font-size:1.15rem;
  color:#f4f4f2; }
.svc-line__label .accent-word{ color:#ff6a3d; }
.svc-line__desc{ color:#b9b9b4; font-size:.98rem; }
.svc-line__mark{ width:1.6rem; height:1.6rem; color:#ff6a3d; flex:none; }
.svc-line__mark svg{ width:100%; height:100%; }

/* ------------------------------------------------------------
   4. THE DNA MONOGRAM WORDMARK (header/footer/brand)
   ------------------------------------------------------------
   Pure twin-helix glyph (reads as DNA at 16px) + typeset "DNA".
   Colours via tokens so it inverts on light paper and on dark plates. */
.dna-mark{ display:inline-flex; align-items:center; gap:.32rem; line-height:1; }
.dna-mark svg{ height:1.5rem; width:auto; display:block; }
.m-plate{ fill:var(--ink); }
.m-strand-a{ stroke:var(--accent-deep); }
.m-strand-b{ stroke:var(--brand); }        /* graphite */
.m-rung{ stroke:var(--line); }
.m-node{ fill:var(--accent); }
.dna-word{ font-family:var(--font-display); font-weight:700; font-size:1.3rem;
  letter-spacing:-.01em; font-variation-settings:'opsz' 144,'WONK' 0; color:var(--ink); }
.team-tile__mark{ width:3.2rem; height:3.2rem; }
/* on dark plate/band the mark inverts to bright-on-dark */
.on-canvas .m-strand-a, .band--ink .m-strand-a{ stroke:#ff6a3d; }
.on-canvas .m-strand-b, .band--ink .m-strand-b{ stroke:#aab2bd; }
.on-canvas .m-rung, .band--ink .m-rung{ stroke:#3a3f47; }
.on-canvas .m-node, .band--ink .m-node{ fill:#ff6a3d; }
.on-canvas .dna-word, .band--ink .dna-word{ color:#f4f4f2; }
.brand__word{ margin-left:.15rem; }

/* ------------------------------------------------------------
   5. FACELESS TEAM TILES ("A studio, not a solo act")
   ------------------------------------------------------------
   NO <img> of a person anywhere. Each tile = the helix mark + a role
   label, rendered as brand shapes on a warm gradient card. */
.team-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:1rem; }
.team-tile{ position:relative; overflow:hidden;
  border:var(--border-ink); border-radius:var(--radius);
  background:
    radial-gradient(120% 90% at 20% 0%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 60%),
    linear-gradient(160deg, var(--paper-deep), var(--white));
  box-shadow:3px 3px 0 var(--shadow);
  padding:1.6rem 1.5rem; display:flex; flex-direction:column; gap:1rem;
  min-height:12rem; }
.team-tile__mark svg{ width:100%; height:100%; }
.team-tile__role{ font-family:var(--font-display); font-weight:550; font-size:1.5rem;
  color:var(--ink); margin-top:auto; }
.team-tile__meta{ font-size:.9rem; color:var(--ink-soft); }
.team-chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.team-chips .badge{ border-color:var(--accent-deep); color:var(--accent-deep); }

/* ------------------------------------------------------------
   6. CLIENT-WORK FRAMES (real screenshots, browser-chrome)
   ------------------------------------------------------------
   2px ink border + chrome bar so a LIGHT screenshot never bleeds into
   a light section (the "everything blended together" fix). */
.proof-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; align-items:stretch; }
.proof-card{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  border:2px solid var(--ink); border-radius:14px; overflow:hidden; background:var(--white);
  box-shadow:4px 4px 0 var(--shadow); transition:transform .16s ease, box-shadow .16s ease; }
.proof-card:hover{ transform:translate(-3px,-3px); box-shadow:7px 7px 0 var(--ink); }
.proof-card__frame{ position:relative; background:#0d0e10; }
.proof-card__chrome{ display:flex; align-items:center; gap:.4rem;
  padding:.55rem .8rem; background:#1a1c20; border-bottom:2px solid var(--ink); }
.proof-card__chrome i{ width:.6rem; height:.6rem; border-radius:50%; background:#4a4038; }
.proof-card__chrome i:nth-child(1){ background:#e05a4a; }
.proof-card__chrome i:nth-child(2){ background:#e6b34a; }
.proof-card__chrome i:nth-child(3){ background:#5ab06a; }
.proof-card__chrome span{ margin-left:.5rem; font-size:.78rem; color:#b9b9b4;
  font-family:var(--font-body); letter-spacing:.02em; }
.proof-card__img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top;
  display:block; border-bottom:2px solid var(--ink); }
.proof-card__body{ padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.proof-card__kicker{ font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-deep); }
.proof-card__name{ font-family:var(--font-display); font-weight:550; font-size:1.5rem; color:var(--ink); }
.proof-card__desc{ color:var(--ink-soft); font-size:.98rem; margin:0; }
.proof-card__link{ margin-top:auto; padding-top:.7rem; font-weight:700; font-size:.92rem;
  color:var(--brand); display:inline-flex; align-items:center; gap:.35rem; }
.proof-card--work .proof-card__img{ aspect-ratio:16/10; }

/* pipeline / "more in the studio" ghost card — clearly a STATUS, not a client */
.pipeline-card{ display:flex; flex-direction:column; justify-content:center; gap:.5rem;
  border:2px dashed var(--line); border-radius:14px; background:transparent;
  padding:1.6rem 1.5rem; color:var(--ink-soft); text-align:left; min-height:8rem; }
.pipeline-card__title{ font-family:var(--font-display); font-weight:550; font-size:1.4rem;
  color:var(--ink); }
.pipeline-card__meta{ font-size:.95rem; color:var(--ink-soft); }
.pipeline-card__dot{ display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-deep); }
.pipeline-card__dot::before{ content:""; width:.55rem; height:.55rem; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent); }
/* pipeline grid on /work: 2-3 ghosts */
.pipeline-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }

/* ------------------------------------------------------------
   7. PRICING CARDS (plain text, NO buy buttons) — reuse .tier from
   site.css; v4 just adds the CTA-link styling + featured polish.
   ------------------------------------------------------------ */
.tier__cta{ margin-top:auto; padding-top:1rem; }
.tier__cta a{ font-weight:700; font-size:.92rem; color:var(--brand);
  text-decoration:none; display:inline-flex; align-items:center; gap:.35rem;
  border-bottom:2px solid transparent; transition:border-color .16s ease; }
.tier__cta a:hover, .tier__cta a:focus-visible{ border-bottom-color:var(--brand); }
.tier{ display:flex; flex-direction:column; }

/* ------------------------------------------------------------
   8. THE ONE CTA — primary is unmistakable on BOTH grounds.
   Secondary/ghost links are visually lighter navigation.
   ------------------------------------------------------------ */
.btn--primary{
  background:var(--accent-deep); color:var(--white); border-color:var(--ink);
  min-height:48px; padding:.95rem 1.5rem; font-size:1rem;
}
.btn--primary svg{ transition:transform .16s ease; }
.btn--primary:hover svg{ transform:translateX(3px); }
/* ghost / nav secondary — clearly lighter, never mistaken for the primary */
.btn--ghost{ background:transparent; box-shadow:none; border-color:var(--ink); }
.on-canvas .btn--ghost, .band--ink .btn--ghost{
  color:#e4e4e1; border-color:#e4e4e1; background:transparent; }
.on-canvas .btn--ghost:hover, .band--ink .btn--ghost:hover{
  background:rgba(255,255,255,.08); box-shadow:none; }
/* pure navigation links (See our work / all services) — underline style */
.nav-link{ font-weight:700; font-size:.95rem; color:var(--brand); text-decoration:none;
  display:inline-flex; align-items:center; gap:.35rem;
  border-bottom:2px solid transparent; transition:border-color .16s ease; }
.nav-link:hover, .nav-link:focus-visible{ border-bottom-color:var(--brand); }
.on-canvas .nav-link{ color:#ff6a3d; }
.on-canvas .nav-link:hover{ border-bottom-color:#ff6a3d; }

/* header CTA button stays distinct/high-contrast on the paper header */
.nav__cta{ padding:.6rem 1.1rem; min-height:auto; }
.nav__links a[aria-current="page"]{ color:var(--accent-deep); border-bottom:2px solid var(--accent-deep); }

/* ------------------------------------------------------------
   9. SHARED PAGE-HEAD (inner pages: /work /services /pricing)
   These pages get ONE calm helix state + a scrim'd or opaque head.
   ------------------------------------------------------------ */
.page-hero{ position:relative; z-index:1; padding:clamp(3.5rem,9vh,6rem) 0 clamp(2rem,5vw,3.5rem); }
.page-hero .on-canvas{ max-width:44rem; }
.page-hero h1{ font-size:clamp(2.4rem,6vw,4rem); line-height:1.02; letter-spacing:-.025em;
  margin:.3rem 0 1rem; }

/* ------------------------------------------------------------
   10. RESPONSIVE
   ------------------------------------------------------------ */
@media(max-width:960px){
  .proof-grid, .team-tiles{ grid-template-columns:repeat(2,1fr); }
  .pipeline-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:760px){
  .proof-grid, .team-tiles, .pipeline-grid{ grid-template-columns:1fr; }
  .scene-problem{ justify-content:stretch; }
  .scene-problem .on-canvas, .scene-hero .on-canvas{ max-width:none; }
  .svc-line{ grid-template-columns:auto 1fr; }
}

/* ------------------------------------------------------------
   11. REDUCED MOTION — kill hover transforms + scene transitions.
   (scene3d.js independently refuses to init 3D under this query;
   this is the CSS half of the same guard.)
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  #hero-canvas-wrap canvas{ transition:none; }
  .proof-card, .team-tile, .btn, .btn--primary svg{ transition:none!important; }
  .proof-card:hover, .team-tile:hover{ transform:none; }
}

/* ============================================================
   ACCORDION — clickable service items that OPEN into detail.
   Each row is a real button; clicking expands a panel beneath it
   with a smooth height/opacity reveal. Keyboard + reduced-motion safe.
   ============================================================ */
.accordion{ display:flex; flex-direction:column; gap:.9rem; max-width:52rem; margin:0 auto; }
.acc{ border:2px solid var(--ink); border-radius:var(--radius); background:var(--white);
  box-shadow:3px 3px 0 var(--shadow); overflow:hidden;
  transition:box-shadow .16s ease, transform .16s ease; }
.acc:has(.acc__head[aria-expanded="true"]){ box-shadow:6px 6px 0 var(--ink); }
.acc__head{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem;
  width:100%; text-align:left; cursor:pointer; background:transparent; border:0;
  font-family:var(--font-body); padding:1.15rem 1.4rem; color:var(--ink); }
.acc__head:hover{ background:var(--paper-deep); }
.acc__head:focus-visible{ outline:3px solid var(--focus); outline-offset:-3px; }
.acc__kicker{ font-weight:700; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-deep); }
.acc__title{ font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--ink); }
.acc__icon{ position:relative; width:1.4rem; height:1.4rem; flex:none; }
.acc__icon::before, .acc__icon::after{ content:""; position:absolute; top:50%; left:50%;
  width:1rem; height:2px; background:var(--accent-deep); transform:translate(-50%,-50%);
  transition:transform .25s cubic-bezier(.22,1,.36,1); }
.acc__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.acc__head[aria-expanded="true"] .acc__icon::after{ transform:translate(-50%,-50%) rotate(0deg); } /* + -> - */
.acc__panel{ padding:0 1.4rem; max-height:0; opacity:0; overflow:hidden;
  transition:max-height .35s cubic-bezier(.22,1,.36,1), opacity .3s ease, padding .35s ease; }
.acc__panel[hidden]{ display:block; }              /* JS toggles a class, keep it in flow for the animation */
.acc.is-open .acc__panel{ max-height:22rem; opacity:1; padding:0 1.4rem 1.3rem; }
.acc__panel p{ margin:0; color:var(--ink-soft); font-size:1rem; line-height:1.65; max-width:46rem; }

@media (prefers-reduced-motion: reduce){
  .acc__panel{ transition:none; }
  .acc__icon::before, .acc__icon::after{ transition:none; }
}

/* flexibility line under pricing (subtle, warm) */
.terms-strip__flex{ margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line);
  font-weight:600; color:var(--accent-deep); font-size:.95rem; }

/* ============================================================
   ALTERNATING SIDES — section content pushes left / right in an
   A-B-A rhythm instead of every block centered the same way.
   Applied to Work case cards, Services sections, Pricing intro.
   ============================================================ */
.alt-row{ display:flex; }
.alt-row--left{ justify-content:flex-start; text-align:left; }
.alt-row--right{ justify-content:flex-end; text-align:right; }
.alt-row > *{ max-width:34rem; }
.alt-row--right .eyebrow{ flex-direction:row-reverse; }
.alt-row--right .eyebrow::before{ margin-left:.6rem; }

/* Work: the two proof cards offset to opposite sides for rhythm */
.proof-grid--alt .proof-card:nth-child(odd){ align-self:flex-start; }
.proof-grid--alt .proof-card:nth-child(even){ align-self:flex-end; }
@media (min-width:900px){
  .proof-grid--alt{ display:grid; grid-template-columns:1fr 1fr; gap:2.4rem 3rem; align-items:start; }
  .proof-grid--alt .proof-card:nth-child(even){ margin-top:4rem; } /* stagger down */
}

@media (max-width:760px){
  .alt-row--left, .alt-row--right{ justify-content:flex-start; text-align:left; }
  .alt-row--right .eyebrow{ flex-direction:row; }
  .alt-row--right .eyebrow::before{ margin-left:0; }
  .proof-grid--alt .proof-card:nth-child(even){ margin-top:0; }
}

/* ------------------------------------------------------------
   9. POINT-CLUSTERS (v5) — problem row, why-us grid, service rows
   ------------------------------------------------------------
   Each key point lands as number/icon + micro-head + one tight payoff.
   Accent stays rationed: only the point counters + why-mark icons. */
.point-row{ display:grid; gap:.7rem; margin-top:1.4rem; }
.point{ display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:baseline; }
.point__n{ font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  color:var(--accent); font-variant-numeric:tabular-nums; }
.point__head{ display:block; font-weight:700; color:#f4f4f2; }   /* on plate, 17.1:1 */
.point__pay{ display:block; color:#b9b9b4; font-size:.95rem; }   /* on plate, 9.58:1 */

.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:1.6rem; }
.why{ display:flex; flex-direction:column; gap:.5rem; }
.why__mark{ width:1.8rem; height:1.8rem; color:var(--accent-deep); }
.why__mark svg{ width:100%; height:100%; }
.why__head{ font-size:1.15rem; }
.why__pay{ color:var(--ink-soft); font-size:.96rem; margin:0; max-width:22rem; }
@media(max-width:900px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

/* service rows: label + payoff STACK (was inline, fixes leading-comma) */
.svc-line__desc{ display:block; margin-top:.15rem; }

/* ============================================================
   FORCE LIGHT (owner: clean Apple-style light page in all themes).
   The site is designed light-only now; neutralize any dark-theme
   canvas/plate overrides so OS dark preference still shows light.
   ============================================================ */
:root[data-theme="dark"] body.has-canvas,
body.has-canvas{ background:#f4f5f6 !important; }
@media(prefers-color-scheme:dark){ body.has-canvas{ background:#f4f5f6 !important; } }

/* ghost button on the light hero card: was near-invisible white-on-white.
   Give it a visible ink outline + dark text. */
.on-canvas .btn--ghost{
  background:transparent; color:var(--ink); border:2px solid var(--ink); box-shadow:none;
}
.on-canvas .btn--ghost:hover{ background:var(--ink); color:#fff; }

/* ============================================================
   PLAIN HEADLINES (owner: "make them regular, same color, no
   different fonts"). Every emphasized <em> in a heading renders
   IDENTICAL to the rest of the heading — no italic, no color
   switch, no weight change. One clean ink color per headline.
   This overrides all earlier em accent rules (loaded last).
   ============================================================ */
h1 em, h2 em, h3 em,
.on-canvas h1 em, .on-canvas h2 em, .on-canvas h3 em,
.band--ink h2 em, .scene-services h2 em, .cta-band h2 em{
  font-style:normal !important;
  font-weight:inherit !important;
  color:inherit !important;
}
/* keep the CTA-band / dark-section headings light (they inherit the
   section's light heading color, which is correct on the ink ground). */

/* pricing tier feature list — plain, one color, simple checkmarks */
.tier__feat{ list-style:none; margin:1rem 0 1.2rem; padding:0; display:flex;
  flex-direction:column; gap:.55rem; }
.tier__feat li{ position:relative; padding-left:1.5rem; font-size:.94rem;
  line-height:1.4; color:var(--ink-soft); }
.tier__feat li::before{ content:""; position:absolute; left:0; top:.45em;
  width:.7rem; height:.4rem; border-left:2px solid var(--accent-deep);
  border-bottom:2px solid var(--accent-deep); transform:rotate(-45deg); }
.tier__who{ min-height:auto; }

/* ============================================================
   PRICING TIER RUNDOWN — click a tier to expand its full detail.
   Reuses the accordion mechanic; tuned for the pricing cards.
   ============================================================ */
.tier__toggle{ display:inline-flex; align-items:center; gap:.4rem; width:100%;
  justify-content:space-between; background:transparent; border:0; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:.9rem; color:var(--accent-deep);
  padding:.6rem 0; border-top:1px solid var(--line); margin-top:.4rem; }
.tier__toggle:hover{ color:var(--ink); }
.tier__toggle:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tier__chev{ width:.6rem; height:.6rem; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .25s ease; }
.tier__toggle[aria-expanded="true"] .tier__chev{ transform:rotate(-135deg); }
.tier__rundown{ max-height:0; opacity:0; overflow:hidden;
  transition:max-height .35s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
.tier__rundown[hidden]{ display:block; }        /* keep in flow for animation */
.tier.is-open .tier__rundown{ max-height:40rem; opacity:1; margin-top:.4rem; }
.tier.is-open{ box-shadow:0 20px 50px -20px rgba(23,24,28,.28); }
.tier__rundown p{ font-size:.94rem; line-height:1.6; color:var(--ink-soft); margin:0 0 .8rem; }
.tier__rundown ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.tier__rundown li{ position:relative; padding-left:1.4rem; font-size:.92rem; line-height:1.45;
  color:var(--ink-soft); }
.tier__rundown li::before{ content:""; position:absolute; left:0; top:.4em; width:.65rem; height:.36rem;
  border-left:2px solid var(--accent-deep); border-bottom:2px solid var(--accent-deep); transform:rotate(-45deg); }
.tier__rundown li strong{ color:var(--ink); font-weight:600; }

/* home pricing teaser: whole tier card is a clickable link to the full
   pricing page anchor for that tier. */
.tier--link{ text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease; }
.tier--link:hover{ transform:translateY(-3px); box-shadow:0 20px 44px -22px rgba(23,24,28,.3); }
.tier__see{ margin-top:auto; padding-top:.9rem; font-weight:600; font-size:.9rem;
  color:var(--accent-deep); display:inline-flex; align-items:center; gap:.35rem; }
.tier--link:hover .tier__see{ gap:.6rem; }