:root {
        --ink-0: #0a0a1a;
        --moss-500: #6fa37a;
        --moss-600: #3f6b54;
        --moss-700: #24453a;
        --moss-900: #0f1713;
        --amber-500: #cd8a4b;
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      html, body { background: var(--ink-0); color: #f1f5f9; }
      body {
        font-family: 'Inter', system-ui, sans-serif;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
        /* Wave R-2 (§45 B1/R1/R2): readable baseline for body text that has no
           explicit Tailwind size class + sitewide legibility hints. This does
           NOT change the rem grid (html stays at the browser default), so every
           Tailwind text-size and spacing utility is untouched — it only raises
           the floor for unclassed prose and improves kerning sitewide. */
        font-size: 17px;
        line-height: 1.65;
        text-rendering: optimizeLegibility;
        font-feature-settings: "kern", "liga";
      }
      /* Tight default leading for headings that lack an explicit leading-*
         utility (a bare h1-h6 type selector loses to any leading class, so
         this only affects headings the templates didn't size — keeping them
         from inheriting the loose 1.65 body line-height). */
      h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.02em; line-height: 1.15; }

      /* === Wave R-2 · typography polish + keyboard a11y (§45 R3/R4/S1/S2) === */
      /* R3 — balance headline wrapping (kills single-word orphans). Degrades
         gracefully where text-wrap is unsupported. */
      h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
      /* R4 — prettier ragged edges + orphan control on body paragraphs. */
      p { text-wrap: pretty; }
      /* S2 — visible keyboard focus ring (keyboard nav only, never mouse). */
      a:focus-visible, button:focus-visible, summary:focus-visible,
      input:focus-visible, textarea:focus-visible, select:focus-visible,
      [tabindex]:focus-visible {
        outline: 2px solid var(--moss-500);
        outline-offset: 2px;
        border-radius: 3px;
      }
      /* S1 — skip-to-content link: visually hidden until keyboard-focused,
         then slides down from the top-left. Target is <main id="main-content">
         in base.njk. */
      .dh-skip-link {
        position: fixed; top: 0; left: 0; z-index: 200;
        transform: translateY(-130%);
        background: var(--moss-600); color: #f5f0e8;
        font-family: 'Space Grotesk', system-ui, sans-serif;
        font-weight: 600; font-size: 14px;
        padding: 10px 18px; border-radius: 0 0 8px 0;
        text-decoration: none;
        transition: transform 0.18s ease;
      }
      .dh-skip-link:focus { transform: translateY(0); outline: 2px solid #f5f0e8; outline-offset: -4px; }

      /* === Committed-palette scrollbar (moss only) === */
      ::-webkit-scrollbar { width: 8px; height: 8px; }
      ::-webkit-scrollbar-track { background: var(--ink-0); }
      ::-webkit-scrollbar-thumb { background: var(--moss-600); border-radius: 4px; }
      ::-webkit-scrollbar-thumb:hover { background: var(--moss-500); }
      html { scrollbar-width: thin; scrollbar-color: var(--moss-600) var(--ink-0); }

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

      /* === Editorial accents === */
      .serif { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; letter-spacing: -0.01em; }
      .caption {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
        color: rgba(255, 255, 255, 0.65);
      }
      .caption em {
        font-family: 'Instrument Serif', Georgia, serif;
        font-style: italic; text-transform: none; letter-spacing: -0.01em;
        font-size: 12px; color: rgba(255, 255, 255, 0.7);
      }

      /* ── POST BYLINE ─────────────────────────────────────────────────
         Sits under the page hero on long-form pages (journal, case studies,
         services, industries) when frontmatter sets `author: <slug>`.
         Layout: avatar (56px) + two stacked rows of meta. Brand-aligned:
         cream-on-deep-space in dark mode, ink-on-cream in light mode.
         Per master-prompt § 36.4 + PAGE-ROADMAP § 25.1 (T1 byline rollout).
         ─────────────────────────────────────────────────────────────── */
      .post-byline {
        max-width: 56rem;
        margin: 1.5rem auto 0;
        padding: 1.25rem 1.5rem 1.5rem;
        border-top: 1px solid rgba(63, 107, 84, 0.18);
        border-bottom: 1px solid rgba(63, 107, 84, 0.18);
      }
      @media (min-width: 768px) {
        .post-byline { padding: 1.5rem 3rem 1.75rem; max-width: 64rem; }
      }
      .post-byline__inner { display: flex; align-items: center; gap: 1rem; }
      .post-byline__avatar-link {
        flex-shrink: 0; display: block; width: 56px; height: 56px;
        border-radius: 50%; overflow: hidden;
        outline: 2px solid rgba(111, 163, 122, 0.3); outline-offset: 2px;
        transition: outline-color 200ms ease;
      }
      .post-byline__avatar-link:hover { outline-color: rgba(111, 163, 122, 0.7); }
      .post-byline__avatar {
        display: block; width: 100%; height: 100%;
        object-fit: cover; object-position: center top;
        border-radius: 50%;
      }
      .post-byline__avatar--initials {
        display: flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, var(--moss-600, #3f6b54), var(--moss-700, #24453a));
        color: rgba(245, 240, 232, 0.95);
        font-family: 'Space Grotesk', 'Inter', sans-serif;
        font-weight: 600; font-size: 22px; letter-spacing: -0.01em;
      }
      .post-byline__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
      .post-byline__row-1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
      .post-byline__row-2 {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
        font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.6);
      }
      .post-byline__name {
        font-family: 'Space Grotesk', 'Inter', sans-serif;
        font-weight: 600; font-size: 16px; line-height: 1.3;
        color: rgba(255, 255, 255, 0.92);
        text-decoration: none; letter-spacing: -0.005em;
      }
      .post-byline__name:hover {
        color: var(--moss-400, #86b696);
        text-decoration: underline; text-decoration-thickness: 1px;
        text-underline-offset: 3px; text-decoration-color: rgba(111, 163, 122, 0.5);
      }
      .post-byline__date {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px; letter-spacing: 0.04em;
        color: rgba(255, 255, 255, 0.55);
      }
      .post-byline__role { color: rgba(255, 255, 255, 0.7); font-weight: 400; }
      .post-byline__office { color: rgba(255, 255, 255, 0.5); font-weight: 400; }
      .post-byline__sep { color: rgba(255, 255, 255, 0.25); user-select: none; }
      .post-byline__reading { color: rgba(255, 255, 255, 0.6); }
      .post-byline__updated {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px; letter-spacing: 0.02em;
        color: rgba(205, 138, 75, 0.75);
      }
      .light .post-byline {
        border-top-color: rgba(63, 107, 84, 0.22);
        border-bottom-color: rgba(63, 107, 84, 0.22);
      }
      .light .post-byline__name { color: rgba(15, 23, 19, 0.95); }
      .light .post-byline__name:hover { color: var(--moss-700, #24453a); }
      .light .post-byline__date { color: rgba(15, 23, 19, 0.6); }
      .light .post-byline__row-2 { color: rgba(15, 23, 19, 0.65); }
      .light .post-byline__role { color: rgba(15, 23, 19, 0.75); }
      .light .post-byline__office { color: rgba(15, 23, 19, 0.55); }
      .light .post-byline__reading { color: rgba(15, 23, 19, 0.65); }
      .light .post-byline__sep { color: rgba(15, 23, 19, 0.3); }
      @media (max-width: 480px) {
        .post-byline__inner { gap: 0.75rem; }
        .post-byline__avatar-link { width: 48px; height: 48px; }
        .post-byline__name { font-size: 15px; }
        .post-byline__row-2 { font-size: 12px; }
      }

      /* ── Share + AI-summary bar (src/_includes/_share-ai.njk) ──────────────
         Sits directly under the byline. Three "summarize this article" AI
         buttons (ChatGPT / Perplexity / Gemini, each with its real brand mark)
         + social share. Width matches .post-byline so the two align. */
      .share-ai { max-width: 56rem; margin: 0 auto; padding: 1rem 1.5rem 1.25rem; }
      @media (min-width: 768px) {
        .share-ai { max-width: 64rem; padding: 1.1rem 3rem 1.5rem; }
      }
      .share-ai__label {
        display: block; font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
        color: rgba(255, 255, 255, 0.5); margin-bottom: 0.7rem;
      }
      .share-ai__label em { color: var(--moss-400); font-style: italic; text-transform: none; letter-spacing: 0; }
      .light .share-ai__label { color: rgba(15, 23, 19, 0.55); }
      .light .share-ai__label em { color: var(--moss-600); }
      .share-ai__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
      .share-ai__group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
      .share-ai__divider { width: 1px; height: 22px; background: rgba(111, 163, 122, 0.25); margin: 0 0.15rem; }
      .share-ai__ai {
        display: inline-flex; align-items: center; gap: 0.45rem;
        padding: 0.42rem 0.85rem 0.42rem 0.5rem; border-radius: 999px;
        border: 1px solid rgba(111, 163, 122, 0.28); background: rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.9); font-family: 'Space Grotesk', system-ui, sans-serif;
        font-weight: 600; font-size: 0.82rem; line-height: 1; text-decoration: none;
        transition: border-color 0.18s, background 0.18s, transform 0.18s;
      }
      .share-ai__ai:hover { border-color: var(--ai, var(--moss-500)); background: rgba(255, 255, 255, 0.07); transform: translateY(-1px); text-decoration: none; }
      .share-ai__ai-badge { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ai, var(--moss-500)); color: #fff; flex: none; }
      .light .share-ai__ai { border-color: rgba(63, 107, 84, 0.28); background: rgba(15, 23, 19, 0.03); color: rgba(15, 23, 19, 0.9); }
      .light .share-ai__ai:hover { background: rgba(15, 23, 19, 0.05); }
      .share-ai__soc {
        display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
        border: 1px solid rgba(111, 163, 122, 0.28); background: rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.72);
        transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.18s;
      }
      .share-ai__soc:hover { border-color: var(--moss-500); color: var(--moss-400); background: rgba(111, 163, 122, 0.12); transform: translateY(-1px); }
      .light .share-ai__soc { border-color: rgba(63, 107, 84, 0.28); background: rgba(15, 23, 19, 0.03); color: rgba(15, 23, 19, 0.6); }
      .light .share-ai__soc:hover { color: var(--moss-700); background: rgba(111, 163, 122, 0.1); }
      @media (max-width: 480px) { .share-ai__divider { display: none; } .share-ai { padding-left: 1.25rem; padding-right: 1.25rem; } }
      /* Compact variant — icon-only AI buttons inside the left-rail ToC */
      .share-ai--compact { max-width: none; margin: 0; padding: 0; }
      .share-ai--compact .share-ai__row { gap: 0.4rem; }
      .share-ai--compact .share-ai__ai { padding: 0.28rem; gap: 0; }
      .share-ai--compact .share-ai__ai-badge { width: 22px; height: 22px; }
      /* Narrow-phone header compression (owner report 2026-07-05: the Book
         pill was clipped off the right edge on mobile). <480px the header
         WhatsApp circle hides — the floating bottom-right WhatsApp bubble
         covers that job on phones; <380px the logo drops a step so
         logo + hamburger + search + theme + Book always fit, down to 320px. */
      @media (max-width: 479.9px) {
        nav .nav-wa { display: none !important; }
      }
      @media (max-width: 379.9px) {
        /* header#home variants outgun the homepage mobile rules (logo 40px
           !important at 2394, pill padding at ~2478) that otherwise win. */
        nav .dh-logo img, header#home nav .dh-logo img { height: 2rem !important; }
        nav a.glass:last-child, header#home nav a.glass:last-child { padding-left: 0.625rem; padding-right: 0.625rem; }
      }

      /* ERP journal tables: on phones cells wrap at WORD boundaries so columns
         stay readable (the wrapper scrolls sideways when the table is wider
         than the screen); on md+ cells may wrap anywhere so the table sits
         flush with the text column without a stray horizontal scrollbar. */
      /* Words NEVER split mid-word ("digitalher/oesco.com") — cells wrap at
         word boundaries; only a token wider than its whole column may break.
         Wide tables scroll sideways inside the wrapper instead. */
      .erp-table td { overflow-wrap: break-word; }
      .erp-table th { overflow-wrap: normal; }
      /* PC: let journal tables break OUT of the prose column to the right
         (owner ask 2026-07-04) — width grows toward the free right-hand space,
         left edge stays aligned with the text, so the fixed ToC rail on the
         left is never touched. div.erp-table-wrap outranks Tailwind's .w-full. */
      @media (min-width: 1024px) {
        div.erp-table-wrap { width: min(72rem, calc(50vw + 26rem)); max-width: none; }
      }

      /* Compact "Preferred Source on Google" button for the narrow ToC rail —
         same .gpref anchor as the article bar/footer, scaled down. */
      .page-toc__gpref { margin-top: 0.85rem; }
      /* Must stay ONE line inside the 224px rail: nowrap + sized to fit. */
      .page-toc__gpref .gpref { padding: 0.32rem 0.5rem; gap: 0.35rem; border-radius: 8px; font-size: 0.58rem; white-space: nowrap; letter-spacing: -0.01em; }
      .page-toc__gpref .gpref__g { width: 15px; height: 15px; border-radius: 4px; }
      .page-toc__gpref .gpref__g svg { width: 10px; height: 10px; }
      .page-toc__ai-label {
        margin: 0.9rem 0 0.45rem; font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4);
      }
      .light .page-toc__ai-label { color: rgba(15, 23, 19, 0.45); }

      /* ── Mobile table of contents (src/_layouts/page.njk) ──────────────
         Collapsible "On this page" box shown ONLY <1280px, where the fixed
         desktop rail (.page-toc) is hidden. Revealed by scripts.njk (pageToc)
         once it finds >=4 chapters; stays [hidden] otherwise. */
      .page-toc-mobile {
        margin: 1.75rem 0 0.25rem;
        border: 1px solid rgba(111, 163, 122, 0.22);
        border-radius: 0.85rem;
        background: rgba(15, 23, 19, 0.5);
        overflow: hidden;
      }
      .page-toc-mobile__summary {
        display: flex; align-items: center; gap: 0.6rem;
        min-height: 48px; padding: 0.75rem 1rem;
        cursor: pointer; list-style: none;
        font-family: 'Space Grotesk', system-ui, sans-serif;
        font-weight: 600; font-size: 0.95rem; color: #f1f5f9;
        -webkit-tap-highlight-color: transparent;
      }
      .page-toc-mobile__summary::-webkit-details-marker { display: none; }
      .page-toc-mobile__icon { width: 18px; height: 18px; flex: none; color: var(--moss-400, #86b696); }
      .page-toc-mobile__title { flex: 1 1 auto; }
      .page-toc-mobile__chevron { width: 18px; height: 18px; flex: none; color: rgba(241,245,249,0.55); transition: transform 200ms ease; }
      .page-toc-mobile[open] .page-toc-mobile__chevron { transform: rotate(180deg); }
      .page-toc-mobile__list {
        list-style: none; margin: 0; padding: 0 0.5rem 0.5rem;
        border-top: 1px solid rgba(111, 163, 122, 0.15);
      }
      .page-toc-mobile__list li { margin: 0; }
      .page-toc-mobile__list a {
        display: block; min-height: 44px; padding: 0.65rem 0.75rem;
        display: flex; align-items: center;
        font-size: 0.9rem; line-height: 1.4; color: rgba(241, 245, 249, 0.7);
        text-decoration: none; border-radius: 0.5rem;
        transition: background 140ms ease, color 140ms ease;
      }
      .page-toc-mobile__list a:hover, .page-toc-mobile__list a:active { background: rgba(111, 163, 122, 0.12); color: var(--moss-400, #86b696); }
      /* Light mode */
      .light .page-toc-mobile { background: rgba(255, 255, 255, 0.6); border-color: rgba(36, 69, 58, 0.18); }
      .light .page-toc-mobile__summary { color: #0f1713; }
      .light .page-toc-mobile__icon { color: var(--moss-600, #3f6b54); }
      .light .page-toc-mobile__chevron { color: rgba(15,23,19,0.5); }
      .light .page-toc-mobile__list { border-top-color: rgba(36, 69, 58, 0.14); }
      .light .page-toc-mobile__list a { color: rgba(15, 23, 19, 0.65); }
      .light .page-toc-mobile__list a:hover, .light .page-toc-mobile__list a:active { background: rgba(63, 107, 84, 0.1); color: var(--moss-600, #3f6b54); }
      /* Desktop: hide the mobile box entirely — the fixed rail takes over. */
      @media (min-width: 1280px) { .page-toc-mobile { display: none !important; } }

      /* "Add as a Preferred Source on Google" badge (_google-source.njk) */
      .gpref-lead { display: block; font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-bottom: 0.55rem; }
      .gpref-lead em { color: var(--moss-400); font-style: normal; font-weight: 600; }
      .light .gpref-lead { color: rgba(15,23,19,0.6); }
      .light .gpref-lead em { color: var(--moss-600); }
      .gpref {
        display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; border-radius: 12px;
        background: #131316; color: #fff; border: 1px solid rgba(255,255,255,0.08);
        font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 500; font-size: 0.85rem;
        text-decoration: none; transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
      }
      .gpref:hover { transform: translateY(-1px); background: #0b0b0d; box-shadow: 0 6px 20px rgba(0,0,0,0.28); text-decoration: none; }
      .gpref__g { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #fff; flex: none; }
      .gpref__t strong { font-weight: 700; }

      .dropcap::first-letter {
        font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
        font-size: 3.8em; line-height: 0.85; float: left; padding: 0.08em 0.1em 0 0;
        color: var(--moss-500); font-weight: 400;
      }
      .section-marker {
        font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
        color: var(--moss-500);
      }

      /* === Glass (moss-tinted, not grey) === */
      .glass {
        background: rgba(15, 23, 19, 0.55);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border: 1px solid rgba(111, 163, 122, 0.15);
      }
      .glass-soft {
        background: rgba(255, 255, 255, 0.035);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(111, 163, 122, 0.12);
      }
      /* Footer "View all" expandable — smooth grid-rows reveal, no layout jank */
      .footer-more-btn {
        margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
        cursor: pointer; background: transparent; border: 0; padding: 0;
        font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.02em;
        color: #6fa37a; transition: color 0.2s ease;
      }
      .footer-more-btn:hover { color: #a1c4ab; }
      .footer-more-chev { width: 13px; height: 13px; transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1); }
      .footer-more.open .footer-more-chev { transform: rotate(180deg); }
      .footer-more-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.2,0.7,0.2,1); }
      .footer-more.open .footer-more-body { grid-template-rows: 1fr; }
      .footer-more-body > div { overflow: hidden; }
      @media (prefers-reduced-motion: reduce) { .footer-more-body, .footer-more-chev { transition: none; } }

      /* === Accent gradient (moss → amber ONLY) === */
      .text-mossamber {
        background: linear-gradient(135deg, var(--moss-500), var(--amber-500));
        -webkit-background-clip: text; background-clip: text;
        color: transparent;
      }

      /* === Tool form controls (theme-aware, replaces bg-[rgba(15,23,19,0.6)]) === */
      /* Keeps Tailwind size utilities (px-*, py-*, text-*) intact; only owns colour + focus. */
      .tool-input {
        border: 1px solid rgba(63, 107, 84, 0.28);
        background: rgba(15, 23, 19, 0.55);
        color: rgba(255, 255, 255, 0.95);
        transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
      }
      .tool-input::placeholder { color: rgba(255, 255, 255, 0.35); }
      .tool-input:focus {
        outline: none;
        border-color: var(--moss-500);
        box-shadow: 0 0 0 3px rgba(111, 163, 122, 0.18);
      }
      .tool-textarea { min-height: 6rem; resize: vertical; line-height: 1.55; }
      .tool-select {
        appearance: none;
        padding-right: 2.25rem;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236fa37a'><path d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/></svg>");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1rem;
      }

      /* Light-mode overrides: cream paper inputs with moss border, dark ink text */
      .light .tool-input {
        background: rgba(255, 253, 249, 0.92);
        border-color: rgba(63, 107, 84, 0.35);
        color: var(--moss-900);
      }
      .light .tool-input::placeholder { color: rgba(15, 23, 19, 0.35); }
      .light .tool-input:focus {
        border-color: var(--moss-600);
        box-shadow: 0 0 0 3px rgba(111, 163, 122, 0.25);
      }
      .light .tool-select {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%233f6b54'><path d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/></svg>");
      }

      /* === Tool output panels (theme-aware replacement for amber-heavy results) === */
      .tool-result-panel {
        border-radius: 1rem;
        padding: 1.5rem 1.75rem;
        background: linear-gradient(145deg, rgba(36, 69, 58, 0.45), rgba(15, 23, 19, 0.60));
        border: 1px solid rgba(111, 163, 122, 0.30);
      }
      .light .tool-result-panel {
        background: linear-gradient(145deg, rgba(111, 163, 122, 0.10), rgba(36, 69, 58, 0.06));
        border: 1px solid rgba(63, 107, 84, 0.28);
      }

      /* Primary metric — always moss (the signature), never amber */
      .tool-metric-primary {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        color: var(--moss-500);
        letter-spacing: -0.02em;
      }
      .light .tool-metric-primary { color: var(--moss-600); }

      /* Secondary metric — subdued body colour, same size */
      .tool-metric-secondary {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.92);
      }
      .light .tool-metric-secondary { color: var(--moss-900); }

      /* Amber reserved: single "celebration" accent — use on max ONE metric per tool */
      .tool-metric-accent {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        color: var(--amber-500);
        letter-spacing: -0.02em;
      }
      .light .tool-metric-accent { color: #a86930; }

      /* Code / output block (JSON-LD, robots.txt, XML) — high-contrast for readability.
         T11 theme-chaining fix (added 2026-05-20): the `.light .text-white\/XX`
         rules further down this file (~lines 1785-1791) rewrite every text-white
         opacity utility to dark ink via !important in light mode. Without the
         !important overrides + descendant-targeted selectors below, any inline
         <span class="text-white/55">/* comment */</span> inside a <pre class="tool-code">
         renders as dark-ink-on-dark-green-black in light mode = invisible.
         Reported on /services/brand-identity/ 2026-05-20. */
      .tool-code {
        background: rgba(15, 23, 19, 0.92);
        border: 1px solid rgba(111, 163, 122, 0.45);
        color: rgba(220, 236, 222, 0.98);
        border-radius: 0.5rem;
        padding: 1rem;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 0.78rem;
        line-height: 1.55;
        overflow-x: auto;
        max-width: 100%;
        min-width: 0;
      }
      /* Mobile/tablet overflow guard: tool layouts collapse to a single column
         below the lg breakpoint, where a <pre class="tool-code"> with white-space:pre
         and long lines (e.g. minified JSON-LD output) sizes its grid column to its
         max-content width (~700px) and overflows a ~330px viewport — the root cause
         of the "overlapping / conflicting" tool UIs. Wrapping below 1024px lets the
         code reflow to the container instead of forcing the column wide. Desktop
         (lg+ grid columns) keeps horizontal scroll via overflow-x:auto above. */
      @media (max-width: 1023px) {
        .tool-code { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
      }
      /* Force cream text on <pre>, <code>, AND every descendant <span> that ISN'T
         one of the four syntax-highlight classes — wins against the global
         .light .text-white\/XX !important overrides. */
      .tool-code,
      .tool-code code,
      .tool-code span:not(.k):not(.s):not(.n):not(.p) {
        color: rgba(220, 236, 222, 0.98) !important;
      }
      .light .tool-code {
        background: rgba(15, 23, 19, 0.96);
        color: rgba(228, 242, 230, 1);
        border: 1px solid rgba(111, 163, 122, 0.55);
      }
      .light .tool-code,
      .light .tool-code code,
      .light .tool-code span:not(.k):not(.s):not(.n):not(.p) {
        color: rgba(228, 242, 230, 1) !important;
      }
      /* JSON-LD syntax-highlight friendly tints when applied via spans.
         !important so a span with BOTH a syntax-class AND an accidental
         text-white class still gets the syntax tint, not the ink override. */
      .tool-code .k { color: rgba(205, 138, 75, 0.95) !important; }   /* keys = amber */
      .tool-code .s { color: rgba(228, 242, 230, 1) !important; }     /* strings = cream */
      .tool-code .n { color: rgba(155, 207, 160, 1) !important; }     /* numbers/bool = moss */
      .tool-code .p { color: rgba(228, 242, 230, 0.55) !important; }  /* punctuation = dim cream */

      /* Tool label — consistent across light/dark */
      .tool-label {
        display: block;
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 600;
        font-size: 0.8125rem;
        margin-bottom: 0.5rem;
        color: rgba(255, 255, 255, 0.80);
      }
      .light .tool-label { color: rgba(15, 23, 19, 0.75); }

      /* Tool help-text under inputs */
      .tool-help {
        font-size: 0.75rem;
        font-style: italic;
        color: rgba(255, 255, 255, 0.55);
        margin-top: 0.375rem;
        line-height: 1.5;
      }
      .light .tool-help { color: rgba(15, 23, 19, 0.55); }

      /* Tool chart container (Chart.js canvas parent) */
      .tool-chart {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        max-height: 340px;
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 0.75rem;
        background: rgba(15, 23, 19, 0.35);
        border: 1px solid rgba(63, 107, 84, 0.22);
      }
      .light .tool-chart {
        background: rgba(245, 240, 232, 0.85);
        border-color: rgba(63, 107, 84, 0.20);
      }

      /* Privacy trust badge (top of every tool page) — light-mode variant */
      .light .tool-privacy-badge { background: rgba(63, 107, 84, 0.10); border-color: rgba(63, 107, 84, 0.30); color: #24453a; }
      .light .tool-privacy-badge svg { color: #3f6b54; }
      .light .tool-privacy-badge em { color: #0f1713; }

      /* === NEXA liquid backdrop (hero + every section) === */
      .liquid-bg {
        background:
          radial-gradient(120% 80% at 75% 40%, rgba(155, 207, 160, 0.14) 0%, transparent 55%),
          radial-gradient(80% 60% at 30% 85%, rgba(63, 107, 84, 0.25) 0%, transparent 60%),
          radial-gradient(55% 55% at 82% 78%, rgba(16, 31, 24, 0.90) 0%, rgba(10, 10, 26, 1) 70%),
          linear-gradient(180deg, #0a0f0c 0%, #0a0a1a 100%);
      }
      .section-hero {
        position: relative; isolation: isolate;
      }
      .section-hero::before {
        content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
        background:
          radial-gradient(80% 50% at 90% 20%, rgba(111, 163, 122, 0.08) 0%, transparent 55%),
          radial-gradient(60% 40% at 10% 90%, rgba(63, 107, 84, 0.10) 0%, transparent 60%);
      }

      /* === Drop orb (the signature) === */
      .drop-orb {
        background:
          radial-gradient(circle at 32% 28%, #ffffff 0%, rgba(255,255,255,0.35) 12%, transparent 32%),
          radial-gradient(circle at 65% 65%, #cd8a4b 0%, #7a4423 30%, #2b1308 75%);
        box-shadow:
          inset 0 -25px 60px rgba(0,0,0,0.7),
          inset 0 20px 40px rgba(255,255,255,0.08),
          0 40px 100px rgba(205,138,75,0.25),
          0 0 80px rgba(111,163,122,0.15);
      }
      .drop-orb-sm {
        background:
          radial-gradient(circle at 35% 30%, #ffffff 0%, rgba(255,255,255,0.28) 12%, transparent 32%),
          radial-gradient(circle at 65% 65%, #cd8a4b 0%, #7a4423 35%, #2b1308 80%);
        box-shadow: inset 0 -10px 26px rgba(0,0,0,0.55), inset 0 8px 16px rgba(255,255,255,0.08), 0 16px 36px rgba(0,0,0,0.35);
      }
      .drop-orb-moss {
        background:
          radial-gradient(circle at 35% 30%, #ffffff 0%, rgba(255,255,255,0.3) 14%, transparent 34%),
          radial-gradient(circle at 65% 65%, #7ba98c 0%, #3f6b54 30%, #0f1713 75%);
        box-shadow: inset 0 -10px 26px rgba(0,0,0,0.55), inset 0 8px 16px rgba(255,255,255,0.08), 0 16px 36px rgba(0,0,0,0.35);
      }
      .leaf-bg {
        background: radial-gradient(circle at 50% 50%, #6fa37a 0%, #3f6b54 45%, #1a2e25 85%);
      }
      .leaf-veins {
        background-image:
          repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 18px),
          radial-gradient(circle at 30% 60%, rgba(255,255,255,0.08), transparent 60%);
      }

      /* === Vertical wordmark === */
      .wordmark {
        position: absolute; writing-mode: vertical-rl; transform: rotate(180deg);
        font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700;
        font-size: clamp(80px, 9vw, 140px); line-height: 0.9; letter-spacing: -0.04em;
        color: rgba(111, 163, 122, 0.05); pointer-events: none; user-select: none; z-index: 0;
      }

      /* === Animation primitives === */
      @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
      @keyframes floatX { 0%,100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
      @keyframes blob-morph {
        0%,100% { border-radius: 42% 58% 52% 48% / 48% 44% 56% 52%; }
        33%     { border-radius: 58% 42% 38% 62% / 42% 58% 42% 58%; }
        66%     { border-radius: 48% 52% 62% 38% / 58% 42% 58% 42%; }
      }
      @keyframes pulse-ring { 0% { transform: scale(.85); opacity:.55; } 100% { transform: scale(1.7); opacity:0; } }
      @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
      @keyframes marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
      @keyframes sheen { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
      .float-y  { animation: floatY 6s ease-in-out infinite; }
      .float-x  { animation: floatX 9s ease-in-out infinite; }
      .blob     { animation: blob-morph 18s ease-in-out infinite; }
      .marquee  { animation: marquee 60s linear infinite; }
      .marquee-rev { animation: marquee-rev 55s linear infinite; }

      /* Awards marquee — seamless left-drift; JS handles position-based spotlight */
      .marquee-slow {
        animation: marquee 55s linear infinite;
        will-change: transform;
      }
      /* Mobile 50% faster (duration / 1.5 ≈ 37s) */
      @media (max-width: 767px) {
        .marquee-slow { animation-duration: 37s; }
      }
      .marquee-slow-container:hover .marquee-slow { animation-play-state: paused; }

      /* Seamless loop: use margin-right on each image INSTEAD of flex gap.
         With flex gap, the trailing gap after set 2 is missing, so -50% shift
         creates a visible stutter every cycle. Margin-right on each logo gives
         every logo the same trailing space, so translateX(-50%) wraps cleanly. */
      .marquee-slow img {
        /* The badges carry HTML width/height attrs (for CLS) AND a Tailwind height
           class. Without an explicit width:auto the attr-width wins and the height
           class squashes them — stretching every badge horizontally. width:auto
           lets the height class drive size while the intrinsic aspect ratio is kept. */
        width: auto;
        max-width: none;
        object-fit: contain;
        /* default state until JS starts — greyscale is already the desired "resting" look */
        filter: grayscale(1) brightness(0.92) opacity(0.55);
        transform: scale(0.94);
        transition: filter .35s ease-out, transform .35s ease-out;
        margin-right: 2.5rem;
      }
      /* Added by the spotlight loop in scripts.njk only while it is actually running
         (marquee on screen, tab visible, motion allowed). The transition above is for
         the resting / no-JS state; leaving it on while JS writes a new filter every
         frame restarts a 350ms interpolation on every logo 60x a second, which is what
         PageSpeed flagged as non-composited animations. will-change lives here too so
         the compositor layers are created on scroll-in and released on scroll-out
         instead of being pinned for the whole session. */
      .marquee-slow img.spotlight-live {
        transition: none;
        will-change: filter, transform;
      }
      @media (min-width: 768px) {
        .marquee-slow img { margin-right: 4rem; }
      }

      /* Edge-fade via mask — no overlay divs, no visible "white line" */
      .marquee-slow-container {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
      }

      .pulse-dot { position: relative; }
      .pulse-dot::after {
        content:''; position:absolute; inset:-6px; border-radius: 9999px; border: 2px solid currentColor;
        animation: pulse-ring 1.8s cubic-bezier(.2,.7,.2,1) infinite;
      }

      /* === Scroll reveal === */
      .reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
      .reveal.in { opacity: 1; transform: translateY(0); }
      .rd-1 { transition-delay: .08s; } .rd-2 { transition-delay: .16s; }
      .rd-3 { transition-delay: .24s; } .rd-4 { transition-delay: .32s; }
      .rd-5 { transition-delay: .40s; } .rd-6 { transition-delay: .48s; }

      /* === Digital Heroes logo — theme-specific image swap (real files from brand kit) === */
      .dh-logo img {
        transition: transform .3s ease, filter .3s ease;
        filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25));
      }
      .dh-logo .logo-dark  { display: block; }
      .dh-logo .logo-light { display: none; }
      .light .dh-logo .logo-dark  { display: none; }
      .light .dh-logo .logo-light { display: block; }
      .dh-logo:hover img {
        transform: scale(1.03);
        filter: drop-shadow(0 0 14px rgba(111, 163, 122, 0.55));
      }
      .light .dh-logo:hover img {
        filter: drop-shadow(0 0 14px rgba(63, 107, 84, 0.4));
      }

      /* ============================================================ */
      /* § 08 · Video Constellation — iframe embed of Claude Design    */
      /* ============================================================ */
      /* Open constellation — no frame, no bg, no border. Iframe dissolves into the section.
         16:9 aspect matches the canvas exactly so chips fill the iframe with no letterbox bands. */
      .yt-constellation-open {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        background: transparent;
      }
      /* Section-level moss drop blob (decoration outside the iframe) */
      .yt-section-drop {
        position: absolute;
        right: -80px;
        bottom: 120px;
        width: 340px;
        height: 340px;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(circle at 35% 35%, #9dc9a7, #3f6b54 62%, #24453a);
        opacity: 0.6;
        filter: blur(1px);
        animation: yt-morph 20s cubic-bezier(0.22, 0.8, 0.24, 1) infinite;
      }
      @keyframes yt-morph {
        0%,100% { border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%; }
        25%     { border-radius: 48% 52% 62% 38% / 58% 42% 58% 42%; }
        50%     { border-radius: 58% 42% 38% 62% / 42% 55% 45% 58%; }
        75%     { border-radius: 42% 58% 48% 52% / 55% 45% 58% 42%; }
      }
      @media (max-width: 767px) {
        /* On mobile the iframe has its own moss blob visible on the mobile canvas
           (see #canvas.mobile .drop in the iframe) — so section-level drop is hidden
           to avoid doubling up. */
        .yt-section-drop { display: none; }
      }
      .yt-constellation-open iframe {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        border: 0;
        background: transparent;
        display: block;
      }
      @media (max-width: 767px) {
        /* 27:40 ≈ 0.675 aspect-ratio — ~20% taller than 4:5. Needed so the
           expanded 540-tall card near the bottom of the chip grid doesn't get
           clipped by the iframe edge (or bleed into the next section). Must
           match the mobile canvas dimensions 1080×1600 inside the iframe. */
        .yt-constellation-open { aspect-ratio: 27 / 40; }
      }

      /* Legacy video-chip classes (kept for cascade stability; unused after iframe swap) */
      #videoConstellation { position: relative; }
      @keyframes chip-drift-1 {
        0%, 100% { transform: translate3d(-50%, -50%, 0) rotate(-.5deg); }
        33%      { transform: translate3d(calc(-50% + 8px), calc(-50% - 12px), 0) rotate(.8deg); }
        66%      { transform: translate3d(calc(-50% - 10px), calc(-50% - 4px), 0) rotate(-1deg); }
      }
      @keyframes chip-drift-2 {
        0%, 100% { transform: translate3d(-50%, -50%, 0) rotate(.4deg); }
        50%      { transform: translate3d(calc(-50% - 14px), calc(-50% + 10px), 0) rotate(-.8deg); }
      }
      @keyframes chip-drift-3 {
        0%, 100% { transform: translate3d(-50%, -50%, 0) rotate(-.3deg); }
        25%      { transform: translate3d(calc(-50% + 12px), calc(-50% + 6px), 0) rotate(.6deg); }
        75%      { transform: translate3d(calc(-50% - 6px), calc(-50% - 10px), 0) rotate(-.6deg); }
      }

      .video-chip {
        position: absolute;
        left: var(--x, 50%);
        top: var(--y, 50%);
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        cursor: pointer;
        text-decoration: none;
        overflow: hidden;
        background: var(--glass-bg, rgba(15, 23, 19, 0.55));
        border: 1px solid var(--rule, rgba(111, 163, 122, 0.22));
        backdrop-filter: blur(12px);
        color: var(--fg, #f1f5f9);
        font-family: var(--font-heading, 'Space Grotesk', sans-serif);
        font-weight: 600;
        letter-spacing: -0.01em;
        border-radius: 9999px;
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
        width: auto;
        max-width: 280px;
        will-change: transform;
        animation: chip-drift-1 16s ease-in-out infinite;
        transition:
          width 0.5s cubic-bezier(.2,.7,.2,1),
          max-width 0.5s cubic-bezier(.2,.7,.2,1),
          border-radius 0.45s cubic-bezier(.2,.7,.2,1),
          background 0.35s ease,
          border-color 0.35s ease,
          color 0.35s ease,
          box-shadow 0.4s ease;
        z-index: 2;
      }
      .video-chip[style*="--drift:2"] { animation-name: chip-drift-2; animation-duration: 20s; }
      .video-chip[style*="--drift:3"] { animation-name: chip-drift-3; animation-duration: 24s; }

      /* Secondary/small chips — fainter at rest so the hierarchy reads clearly */
      .video-chip.vc-sm {
        max-width: 200px;
        opacity: 0.55;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
      }
      .video-chip.vc-sm .chip-body { font-size: 11px; padding: 6px 12px; }
      .video-chip.vc-sm:hover { opacity: 1; }

      /* Media wrapper — grows from height 0 on expand (smooth push-below) */
      .chip-media {
        position: relative;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        background: #0a0a1a;
        transition: max-height 0.55s cubic-bezier(.2,.7,.2,1);
      }
      .chip-media img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
      }
      .chip-media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 40%);
        pointer-events: none;
      }
      .chip-media-play {
        position: absolute;
        left: 12px;
        bottom: 12px;
        width: 36px; height: 36px;
        border-radius: 9999px;
        background: #dc2626;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.5);
      }
      .chip-media-duration {
        position: absolute;
        right: 10px;
        bottom: 10px;
        background: rgba(0, 0, 0, 0.78);
        color: #fff;
        font-family: 'JetBrains Mono', monospace;
        font-size: 9px;
        padding: 2px 6px;
        border-radius: 3px;
        letter-spacing: 0.03em;
      }
      .chip-media-yt {
        position: absolute;
        top: 10px;
        left: 10px;
        background: #dc2626;
        color: #fff;
        font-family: 'JetBrains Mono', monospace;
        font-weight: 700;
        font-size: 8px;
        padding: 2px 5px;
        border-radius: 3px;
        letter-spacing: 0.08em;
      }
      /* Secondary chip placeholder (no YouTube thumbnail — branded moss gradient) */
      .chip-media.chip-media--branded {
        background: linear-gradient(135deg, #6fa37a 0%, #3f6b54 55%, #24453a 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 16 / 9;
        padding: 18px 22px;
      }
      .chip-media.chip-media--branded::after { display: none; }
      .chip-media.chip-media--branded .chip-media-label {
        color: #ffffff;
        font-family: 'Instrument Serif', serif;
        font-style: italic;
        font-weight: 400;
        font-size: 20px;
        text-align: center;
        line-height: 1.2;
        letter-spacing: -0.01em;
        text-shadow: 0 2px 10px rgba(0,0,0,0.25);
      }

      .chip-body {
        padding: 10px 16px;
        font-size: calc(13px * var(--size, 1));
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: padding 0.4s ease, color 0.35s ease, font-size 0.4s ease, white-space 0s linear 0.25s;
      }
      .chip-body em {
        color: var(--moss-500, #6fa37a);
        font-family: 'Instrument Serif', serif;
        font-style: italic;
        font-weight: 400;
      }
      .chip-meta {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        padding: 0 16px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        letter-spacing: 0.05em;
        color: rgba(15, 23, 19, 0.55);
        transition:
          max-height 0.45s cubic-bezier(.2,.7,.2,1) 0.05s,
          opacity 0.3s ease 0.15s,
          padding 0.4s ease;
      }
      .chip-meta-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 8px;
        border-top: 1px solid rgba(15, 23, 19, 0.1);
      }
      .chip-meta-cta {
        color: #3f6b54;
        font-weight: 700;
      }

      /* Expanded state — triggered by :hover (desktop) OR .is-open (mobile tap) */
      .video-chip:hover,
      .video-chip.is-open {
        z-index: 15 !important;
        width: 300px !important;
        max-width: 300px !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        border-color: rgba(63, 107, 84, 0.25) !important;
        color: #0a0a1a !important;
        box-shadow: 0 22px 55px rgba(0, 0, 0, 0.42), 0 6px 18px rgba(111, 163, 122, 0.28) !important;
        animation-play-state: paused !important;
        opacity: 1 !important;
      }
      .video-chip.vc-sm:hover,
      .video-chip.vc-sm.is-open {
        width: 260px !important;
        max-width: 260px !important;
      }
      .video-chip:hover .chip-media,
      .video-chip.is-open .chip-media {
        max-height: 200px !important;
      }
      .video-chip:hover .chip-media img,
      .video-chip.is-open .chip-media img {
        transform: scale(1.01);
      }
      .video-chip:hover .chip-body,
      .video-chip.is-open .chip-body {
        padding: 12px 14px 8px !important;
        white-space: normal !important;
        font-size: 14.5px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        color: #0a0a1a !important;
        transition: padding 0.4s ease, color 0.35s ease, font-size 0.4s ease !important;
      }
      .video-chip.vc-sm:hover .chip-body,
      .video-chip.vc-sm.is-open .chip-body {
        font-size: 13px !important;
      }
      .video-chip:hover .chip-meta,
      .video-chip.is-open .chip-meta {
        max-height: 42px !important;
        opacity: 1 !important;
        padding: 0 14px 12px !important;
      }

      /* When constellation is being hovered, non-hovered chips dim slightly */
      #videoConstellation:hover .video-chip:not(:hover):not(.is-open) {
        opacity: 0.45;
        filter: blur(0.3px);
        transition: opacity 0.3s ease, filter 0.3s ease;
      }
      #videoConstellation:hover .video-chip.vc-sm:not(:hover):not(.is-open) {
        opacity: 0.28;
      }

      /* Light-mode overrides for chip resting state */
      .light .video-chip {
        background: rgba(255, 252, 245, 0.72);
        border-color: rgba(63, 107, 84, 0.18);
        color: var(--fg);
        box-shadow: 0 6px 22px rgba(10, 10, 26, 0.08);
      }
      .light .video-chip:hover,
      .light .video-chip.is-open {
        background: #ffffff;
        color: #0a0a1a;
        border-color: rgba(63, 107, 84, 0.3);
        box-shadow: 0 22px 55px rgba(10, 10, 26, 0.18), 0 6px 18px rgba(111, 163, 122, 0.22);
      }

      /* Mobile — smaller pills, tighter widths */
      @media (max-width: 767px) {
        .video-chip { font-size: calc(12px * var(--size, 1)); max-width: 220px; }
        .video-chip.vc-sm { max-width: 160px; opacity: 0.7; }
        .video-chip:hover, .video-chip.is-open { width: 260px; max-width: 260px; }
        .video-chip.vc-sm:hover, .video-chip.vc-sm.is-open { width: 220px; max-width: 220px; }
        .chip-body { font-size: 12px; padding: 7px 12px; }
        .video-chip.vc-sm .chip-body { font-size: 10px; padding: 5px 10px; }
      }

      /* Reduced motion */
      @media (prefers-reduced-motion: reduce) {
        .video-chip { animation: none !important; }
        .chip-media, .chip-body, .chip-meta { transition-duration: 0.01ms !important; }
      }

      /* ============================================================ */
      /* § 05 · Process Reels — animation is the hero, no card chrome */
      /* ============================================================ */
      .process-reel {
        position: relative;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        background: transparent;
        border: 0;
        overflow: visible;
        transition: transform .45s cubic-bezier(.2,.7,.2,1);
        will-change: transform;
      }
      .process-reel:hover,
      .process-reel.is-active {
        transform: translateY(-3px);
        z-index: 3;
      }
      .process-reel:not(:hover):not(.is-active) {
        /* When something else in the row is active, inactive reels dim slightly */
      }
      /* Kept hover lift + shadow on the hovered card; other cards stay at full opacity (no dimming). */

      /* ============================================================ */
      /* § 05 · Zigzag lifecycle — 3 staggered 67% cards threaded by  */
      /* a right-angle scroll-drawn SVG timeline path                 */
      /* ============================================================ */
      .process-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(3, auto);
        column-gap: 16px;
        row-gap: 80px;
        position: relative;
        align-items: start;
      }
      /* Each card spans 8 of 12 cols = ~67% width, alternating L/R/L */
      .reel-web      { grid-column: 1 / span 8; grid-row: 1; z-index: 2; }
      .reel-shopify  { grid-column: 5 / span 8; grid-row: 2; z-index: 2; }
      .reel-software { grid-column: 1 / span 8; grid-row: 3; z-index: 2; }

      /* Intro block — lives in row 1's right gutter (cols 9-12), aligned to top */
      .process-intro {
        grid-column: 9 / span 4;
        grid-row: 1;
        align-self: start;
        position: relative;
        z-index: 3;
        padding: 0 4px 0 24px;
        max-width: 360px;
      }
      .process-intro__eyebrow {
        margin-bottom: 14px;
      }
      .process-intro__title {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        font-size: clamp(22px, 2vw, 30px);
        line-height: 1.05;
        letter-spacing: -0.015em;
        color: inherit;
        margin: 0 0 16px;
      }
      .process-intro__title em {
        font-family: 'Instrument Serif', Georgia, serif;
        font-style: italic;
        color: #6fa37a;
        font-weight: 400;
      }
      .process-intro__body {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.65);
        margin: 0 0 14px;
      }
      .process-intro__accent {
        font-family: 'Instrument Serif', Georgia, serif;
        font-style: italic;
        color: #6fa37a;
        font-size: 16px;
        line-height: 1.35;
        margin: 12px 0 0;
        padding-top: 12px;
        border-top: 1px solid rgba(111, 163, 122, 0.22);
      }
      .light .process-intro__body { color: rgba(15, 23, 19, 0.7); }
      .light .process-intro__title em,
      .light .process-intro__accent { color: #3f6b54; }

      /* SVG overlay — right-angle zigzag path threading the empty gutters */
      .process-line {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        overflow: visible;
      }
      .process-line path {
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
        vector-effect: non-scaling-stroke;
      }
      /* Simple solid line — draws progressively as section scrolls through view */
      .process-line .line-trail {
        stroke: rgba(111, 163, 122, 0.55);
        stroke-width: 1.5;
        stroke-dasharray: 100;
        stroke-dashoffset: 100;
        animation: process-draw linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 55%;
      }
      @keyframes process-draw {
        to { stroke-dashoffset: 0; }
      }
      @supports not (animation-timeline: view()) {
        .process-line .line-trail { stroke-dashoffset: 0; }
      }

      /* 5 stage markers — dot sits ON the line (center of gutter, at 83% right or 17% left);
         text sits entirely beside the line so nothing is cut through. Kept simple — no fancy animations. */
      .process-step {
        position: absolute;
        display: flex;
        flex-direction: column;
        gap: 4px;
        z-index: 3;
        pointer-events: none;
        /* Width tracks the gutter (16% of grid, capped 210px) so the box can
           never spill out of the ~17% gutter into a card at narrow widths. */
        width: min(210px, 16%);
        transform: translateY(-50%);
      }

      /* Simple moss dot on the line with a small bg ring for visual break */
      .process-step::before {
        content: '';
        position: absolute;
        top: 50%;
        width: 10px; height: 10px;
        border-radius: 50%;
        background: #6fa37a;
        box-shadow: 0 0 0 4px var(--bg, #0a0a1a);
        z-index: 3;
      }

      /* Right-line markers (Discover, Launch, Optimize): the line runs at 83%.
         The card in these rows sits on the LEFT (cols 1-8), so the text must live
         in the RIGHT gutter — box LEFT edge on the line, text flowing right, away
         from the card. This is what guarantees no overlap at any width/zoom. */
      .process-step--s1,
      .process-step--s4,
      .process-step--s5 {
        left: 83%;            /* box left edge = the line; box extends right into the empty gutter */
        padding-left: 22px;
        text-align: left;
      }
      .process-step--s1::before,
      .process-step--s4::before,
      .process-step--s5::before {
        left: 0;
        transform: translate(-50%, -50%);  /* dot center sits exactly AT box left edge = line */
      }

      /* Left-line markers (Design, Build): the line runs at 17%. The card in this
         row sits on the RIGHT (cols 5-12), so the text lives in the LEFT gutter —
         box RIGHT edge on the line, text flowing left, away from the card. */
      .process-step--s2,
      .process-step--s3 {
        right: 83%;           /* box right edge = the line (17% from left); box extends left into the empty gutter */
        padding-right: 22px;
        text-align: right;
      }
      .process-step--s2::before,
      .process-step--s3::before {
        right: 0;
        transform: translate(50%, -50%);  /* dot center sits exactly AT box right edge = line */
      }

      .process-step .ps-num {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        letter-spacing: 0.14em;
        color: rgba(111, 163, 122, 0.9);
        text-transform: uppercase;
      }
      .process-step .ps-title {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        font-size: 20px;
        letter-spacing: -0.015em;
        color: inherit;
        line-height: 1.05;
        margin-top: 2px;
      }
      .process-step .ps-desc {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.65);
        margin-top: 5px;
      }
      .process-step .ps-desc em {
        font-family: 'Instrument Serif', Georgia, serif;
        font-style: italic;
        color: rgba(111, 163, 122, 0.95);
        font-size: 14px;
      }
      .process-step .ps-desc .no-italic {
        font-style: italic;
        color: #6fa37a;
      }
      .light .process-step .ps-desc { color: rgba(15, 23, 19, 0.72); }
      .light .process-step .ps-desc em { color: rgba(63, 107, 84, 0.95); }

      /* Vertical anchor positions along the path. Horizontal position is handled
         by the right/left rules above (all on the grid edge, line doesn't cut text). */
      .process-step--s1 { top: 27%; }   /* Discover — below intro block */
      .process-step--s2 { top: 42%; }   /* Design */
      .process-step--s3 { top: 58%; }   /* Build */
      .process-step--s4 { top: 77%; }   /* Launch */
      .process-step--s5 { top: 93%; }   /* Optimize */

      /* ── §07 credentials · badge containment ──────────────────────────────
         The verified·trusted stamps sit in fixed h-16 (64px, p-3 → 40px content)
         flex boxes. Tailwind `max-h-full` (max-height:100%) is silently ignored
         on a flex <img> (percentage max-height on a replaced flex item doesn't
         resolve), so only max-w-full constrained them and at wide widths the
         width-driven height grew PAST the box (e.g. Upwork 67px in a 64px box).
         A concrete px cap browsers honor keeps every stamp inside its box at
         any width/aspect ratio. */
      .creds-stamp-grid img { max-height: 36px !important; width: auto; }
      /* Square industry-recognition badges: clip at the rounded box so no browser
         (Safari/Firefox resolve aspect-ratio % heights differently than Chrome)
         can spill a badge past its cell. object-contain already fits in Chrome. */
      .creds-badge-cell { overflow: hidden; }

      /* Mobile fallback — hide SVG + absolute markers, show intro + compact timeline stacked */
      .process-timeline-mobile { display: none; }
      @media (max-width: 767px) {
        .process-grid {
          grid-template-columns: 1fr;
          grid-template-rows: auto;
          row-gap: 40px;
        }
        .reel-web, .reel-shopify, .reel-software {
          grid-column: 1;
          grid-row: auto;
        }
        .process-intro {
          grid-column: 1;
          grid-row: auto;
          max-width: 100%;
          padding: 0;
          order: -1;  /* Shows first */
        }
        .process-line, .process-step { display: none; }
        .process-timeline-mobile {
          display: flex;
          flex-wrap: wrap;
          gap: 12px 20px;
          padding: 14px 0;
          border-top: 1px solid rgba(111, 163, 122, 0.22);
          border-bottom: 1px solid rgba(111, 163, 122, 0.22);
        }
        .process-timeline-mobile .ps-row {
          display: inline-flex;
          gap: 6px;
          align-items: baseline;
          font-family: 'Space Grotesk', sans-serif;
        }
        .process-timeline-mobile .ps-num {
          font-family: 'JetBrains Mono', monospace;
          font-size: 10px;
          letter-spacing: 0.14em;
          color: rgba(111, 163, 122, 0.9);
        }
        .process-timeline-mobile .ps-title {
          font-weight: 600;
          font-size: 13px;
          color: inherit;
        }
      }

      /* Framed preview — iframe is scaled-down 1920×1080 animation;
         frame is 16:11 (wider cream strip at the bottom for the heading) */
      .process-reel__frame {
        position: relative;
        aspect-ratio: 16 / 11;
        background: #f5f0e8;
        border-radius: 0;
        overflow: hidden;
        box-shadow:
          0 24px 60px -18px rgba(0, 0, 0, 0.45),
          0 0 0 1px rgba(111, 163, 122, 0.15);
        transition: box-shadow .4s ease, transform .45s cubic-bezier(.2,.7,.2,1);
      }
      /* Iframes on mobile are embedded directly with loading="lazy" — browser
         defers the actual fetch until the iframe approaches the viewport.
         No JS hydration / display:none gating any more (it was breaking on
         real iOS Safari). The cream paper background on .process-reel__frame
         above shows through the iframe's transparent body until React paints. */
      .process-reel:hover .process-reel__frame {
        box-shadow:
          0 32px 80px -16px rgba(0, 0, 0, 0.55),
          0 0 0 1px rgba(111, 163, 122, 0.32);
      }
      .light .process-reel__frame {
        box-shadow:
          0 18px 48px -16px rgba(10, 10, 26, 0.14),
          0 0 0 1px rgba(63, 107, 84, 0.18);
      }
      .process-reel__frame iframe {
        position: absolute;
        top: 0; left: 0;
        width: 1920px;
        height: 1080px;
        transform-origin: top left;
        border: 0;
        pointer-events: none; /* the whole card is clickable */
      }
      /* Default scale assumes ~900px card (67% of 1344 container = 900 / 1920 = 0.469).
         JS overrides dynamically for pixel-perfect fit. */
      .process-reel__frame iframe { transform: scale(0.469); }
      /* Baked MP4 reels (replaced the React/Babel iframes). Fill the frame width
         at native 16:9, top-aligned so the cream caption strip — the frame is
         16:11 — shows below. No JS scaling needed; the video scales fluidly. */
      .process-reel__frame video {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        display: block;
        border: 0;
        pointer-events: none; /* the whole card is clickable */
      }

      /* In-frame caption — sits in the cream strip below the scaled iframe
         (frame 16:11 leaves a taller strip for a proper heading size) */
      .process-reel__frame-caption {
        position: absolute;
        left: 0; right: 0; bottom: 0;
        z-index: 4;
        padding: 18px 32px 22px;
        pointer-events: none;
        background: linear-gradient(
          to top,
          #f5f0e8 0%,
          #f5f0e8 80%,
          rgba(245, 240, 232, 0) 100%
        );
      }
      .process-reel__frame-caption h3 {
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 700;
        font-size: 28px;
        color: #0f1713;
        letter-spacing: -0.015em;
        line-height: 1.02;
        margin: 0;
      }
      .process-reel__frame-caption h3 em {
        font-family: 'Instrument Serif', Georgia, serif;
        font-style: italic;
        color: #3f6b54;
        font-weight: 400;
      }
      .process-reel__frame-caption p {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13.5px;
        line-height: 1.55;
        color: rgba(15, 23, 19, 0.68);
        margin: 8px 0 0;
        max-width: 620px;
      }

      /* Guarantee 100% opacity at rest — no dimming regardless of hover state */
      .process-reel, .process-reel__frame { opacity: 1 !important; filter: none !important; }

      /* Small corner labels */
      .process-reel__num,
      .process-reel__badge {
        position: absolute;
        top: 12px;
        z-index: 3;
        font-family: 'JetBrains Mono', monospace;
        font-size: 9px;
        letter-spacing: 0.16em;
        padding: 4px 8px;
        border-radius: 3px;
        background: rgba(252, 249, 241, 0.92);
        color: #3f6b54;
        border: 1px solid rgba(63, 107, 84, 0.15);
        white-space: nowrap;
      }
      .process-reel__num { left: 14px; }
      .process-reel__badge { right: 14px; display: inline-flex; align-items: center; gap: 6px; }
      .process-reel__dot { width: 6px; height: 6px; border-radius: 50%; background: #6fa37a; box-shadow: 0 0 6px #6fa37a; }

      /* Play overlay — shown at rest, hidden when active */
      .process-reel__overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background: linear-gradient(180deg, rgba(10,10,26,0.05) 0%, rgba(10,10,26,0.25) 100%);
        opacity: 0;
        transition: opacity .35s ease;
        z-index: 2;
        pointer-events: none;
      }
      .process-reel:hover .process-reel__overlay,
      .process-reel.is-active .process-reel__overlay {
        opacity: 0;
      }
      .process-reel__play {
        font-size: 22px;
        color: #ffffff;
        width: 48px; height: 48px;
        border-radius: 50%;
        background: #3f6b54;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 6px 18px rgba(63, 107, 84, 0.4);
      }
      .process-reel__play-label {
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        letter-spacing: 0.16em;
        color: #ffffff;
        text-transform: uppercase;
        text-shadow: 0 2px 8px rgba(0,0,0,0.4);
      }

      /* Body text under the preview */
      .process-reel__body {
        padding: 20px 22px 22px;
      }
      .process-reel__body h3 {
        color: inherit;
      }
      .process-reel__meta {
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid var(--rule, rgba(111, 163, 122, 0.18));
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: 'JetBrains Mono', monospace;
        font-size: 10px;
        letter-spacing: 0.1em;
        color: rgba(255, 255, 255, 0.4);
      }
      .process-reel__open { color: #6fa37a; font-weight: 700; }

      /* Light mode overrides */
      .light .process-reel {
        background: rgba(255, 252, 245, 0.72);
        border-color: rgba(63, 107, 84, 0.18);
        box-shadow: 0 6px 20px rgba(10, 10, 26, 0.08);
      }
      .light .process-reel:hover,
      .light .process-reel.is-active {
        border-color: rgba(63, 107, 84, 0.4);
        box-shadow: 0 24px 60px -8px rgba(10, 10, 26, 0.18), 0 0 0 1px rgba(63, 107, 84, 0.22);
      }
      .light .process-reel__meta { color: rgba(15, 23, 19, 0.55); }

      /* Mobile — stacked, card-in-card layout. Each animation gets an OUTER card (bg + border + padding)
         containing an INNER card (the 16:9 animation frame) and a caption below inside the same outer card.
         This gives clear separation between reels. */
      @media (max-width: 767px) {
        .process-reel__body { padding: 16px 18px 18px; }
        .process-reel__body h3 { font-size: 1.5rem; }
        .process-reel__frame iframe { transform: scale(0.175); }

        /* OUTER CARD — glass container wrapping the whole reel */
        .process-reel {
          position: relative;
          background: var(--glass-bg, rgba(15, 23, 19, 0.55));
          border: 1px solid var(--rule, rgba(111, 163, 122, 0.22));
          border-radius: 18px;
          padding: 10px 10px 100px;     /* top, sides, reserved space for caption below frame */
          box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.4);
          margin-bottom: 32px;           /* clear space between reels */
          overflow: hidden;              /* keeps caption within card bounds */
        }
        .light .process-reel {
          background: rgba(255, 252, 245, 0.72);
          border-color: rgba(63, 107, 84, 0.18);
          box-shadow: 0 8px 24px -12px rgba(10, 10, 26, 0.1);
        }

        /* INNER CARD — the animation frame. Full 16:9 visibility, no cream strip clipping */
        .process-reel__frame {
          aspect-ratio: 16 / 9;
          border-radius: 10px;
          overflow: visible;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(111, 163, 122, 0.15);
        }
        .light .process-reel__frame {
          box-shadow: 0 4px 12px rgba(10, 10, 26, 0.08), 0 0 0 1px rgba(63, 107, 84, 0.15);
        }

        /* CAPTION — sits below the inner frame, inside the outer card's reserved bottom padding */
        .process-reel__frame-caption {
          position: absolute;
          top: calc(100% + 14px);
          bottom: auto;
          left: 0; right: 0;
          padding: 0 2px;
          background: none;
          opacity: 0;
          transform: translateY(8px);
          animation: reel-caption-rise linear both;
          animation-timeline: view();
          animation-range: entry 15% entry 85%;
        }
        @supports not (animation-timeline: view()) {
          .process-reel__frame-caption { opacity: 1; transform: none; }
        }
        @keyframes reel-caption-rise {
          to { opacity: 1; transform: translateY(0); }
        }
        .process-reel__frame-caption h3 {
          font-size: 19px;
          color: inherit;
          letter-spacing: -0.01em;
          line-height: 1.1;
        }
        .process-reel__frame-caption h3 em { color: #6fa37a; }
        .process-reel__frame-caption p {
          font-size: 12px;
          line-height: 1.5;
          color: rgba(255, 255, 255, 0.65);
          margin-top: 5px;
        }
        .light .process-reel__frame-caption h3 { color: #0f1713; }
        .light .process-reel__frame-caption h3 em { color: #3f6b54; }
        .light .process-reel__frame-caption p { color: rgba(15, 23, 19, 0.68); }

        .process-grid { row-gap: 0; }

        /* Borders clean-up on mobile — remove the redundant rule above the step list (kept single divider) */
        .process-intro__accent {
          border-top: 0;
          padding-top: 0;
          margin-top: 10px;
        }
        .process-timeline-mobile {
          border-bottom: 0;
        }

        /* Bottom caption strip — stack vertically, normalize typography (was mono/serif mashup) */
        .process-footer-row {
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 18px;
          margin-top: 32px;
        }
        .process-footer-tagline {
          font-family: 'Inter', system-ui, sans-serif !important;
          font-size: 12px !important;
          text-transform: none !important;
          letter-spacing: normal !important;
          color: rgba(255, 255, 255, 0.6) !important;
          line-height: 1.55;
          flex-wrap: wrap;
          justify-content: center;
          max-width: 340px;
        }
        .process-footer-tagline em {
          font-family: 'Instrument Serif', Georgia, serif;
          font-style: italic;
          color: #6fa37a;
          font-size: 14px;
          text-transform: none;
        }
        .light .process-footer-tagline { color: rgba(15, 23, 19, 0.62) !important; }
        .light .process-footer-tagline em { color: #3f6b54; }
        .process-footer-cta {
          width: 100%;
          max-width: 300px;
          justify-content: center;
          height: 44px !important;
        }
      }

      /* Team DP stack — small overlapping avatars that separate on hover */
      .team-dp-stack { padding-left: 2px; }
      .team-dp {
        width: 28px; height: 28px; border-radius: 9999px;
        border: 2px solid var(--bg);
        object-fit: cover;
        object-position: center 20%;
        flex-shrink: 0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        transition: margin .45s cubic-bezier(.2,.7,.2,1),
                    transform .35s cubic-bezier(.2,.7,.2,1),
                    border-color .25s, box-shadow .25s;
      }
      .team-dp + .team-dp { margin-left: -11px; }
      /* Hover — fan out horizontally + slight lift, moss ring */
      .team-dp-stack:hover .team-dp + .team-dp { margin-left: 3px; }
      .team-dp-stack:hover .team-dp {
        transform: translateY(-2px);
        border-color: var(--moss-500, #6fa37a);
        box-shadow: 0 4px 14px rgba(111, 163, 122, 0.35);
      }
      /* Individual DP on direct hover — pop forward slightly */
      .team-dp-stack .team-dp:hover { transform: translateY(-4px) scale(1.08); }

      /* Social icon links — brand SVGs using CSS vars that auto-swap per theme */
      .social-icon {
        background: var(--glass-soft-bg, rgba(255, 255, 255, 0.06));
        border: 1px solid var(--rule, rgba(111, 163, 122, 0.22));
        color: var(--fg-muted, rgba(255, 255, 255, 0.85));
        backdrop-filter: blur(10px);
        transition: background .25s, color .25s, border-color .25s, transform .25s;
      }
      .social-icon svg { transition: transform .25s ease; fill: currentColor; }
      .social-icon:hover {
        background: #3f6b54;
        color: #ffffff;
        border-color: #3f6b54;
      }
      .social-icon:hover svg { transform: scale(1.1); }

      /* Shopify Premier Partner badge — theme-reactive */
      .shopify-badge {
        filter: invert(1) brightness(1.1);
        transition: filter .3s;
      }
      .light .shopify-badge {
        filter: invert(0) brightness(1);
      }

      /* Footer credential badges — frameless, greyscale at rest, colorize on hover */
      .footer-credential-img {
        filter: grayscale(1) brightness(0.95) opacity(0.7);
        transition: filter .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
      }
      .footer-credential-img:hover {
        filter: grayscale(0) brightness(1.05) opacity(1);
        transform: scale(1.06);
      }
      .light .footer-credential-img {
        filter: grayscale(1) brightness(0.7) opacity(0.7);
      }
      .light .footer-credential-img:hover {
        filter: grayscale(0) brightness(1) opacity(1);
      }

      /* Landmark icons — frameless PNGs in footer location list, theme-reactive */
      .landmark-icon {
        width: 48px;
        height: 60px;
        object-fit: contain;
        object-position: top center;
        flex-shrink: 0;
        margin-top: -2px;
        filter: invert(1) brightness(1.08) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
        transition: filter .35s, transform .35s cubic-bezier(.2,.7,.2,1);
      }
      .light .landmark-icon {
        filter: invert(0) brightness(0.85) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
      }
      .landmark-icon:hover {
        transform: scale(1.06) translateY(-1px);
      }
      @media (max-width: 639px) {
        .landmark-icon { width: 42px; height: 52px; }
      }

      /* === Timeline — rich details always visible, hover highlights === */
      .tl-item { transition: transform .3s ease; }
      .tl-item:hover, .tl-item.is-open { transform: translateX(4px); }
      .tl-item:hover .tl-expand, .tl-item.is-open .tl-expand {
        border-left-color: rgba(111, 163, 122, 0.7) !important;
        background: rgba(111, 163, 122, 0.06);
        transition: background .3s, border-color .3s;
      }
      .tl-item:hover > div[class*="rounded-full"]:first-of-type,
      .tl-item.is-open > div[class*="rounded-full"]:first-of-type {
        box-shadow: 0 0 0 4px rgba(111, 163, 122, 0.2), 0 0 20px rgba(111, 163, 122, 0.6);
      }

      /* === Laurel wreath award frames (like the reference) === */
      .laurel-award {
        position: relative;
        aspect-ratio: 1.05 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10% 18%;
        max-width: 280px;
        margin: 0 auto;
      }
      /* Mobile: smaller laurel, 2-up grid, compact */
      @media (max-width: 639px) {
        .laurel-award { max-width: 170px; padding: 12% 16%; }
        .laurel-award .award-name { font-size: 10.5px !important; line-height: 1.2 !important; }
        .laurel-caption { font-size: 11px !important; margin-top: 4px !important; }
      }
      .laurel-award::before {
        content: ''; position: absolute; inset: 0;
        background: url('/assets/badges/laurel-wreath.png') center/contain no-repeat;
        filter: invert(1) brightness(0.95);
        opacity: 0.88;
      }
      .light .laurel-award::before { filter: none; opacity: 0.92; }
      .laurel-award .award-name {
        position: relative; z-index: 1;
        font-family: 'Space Grotesk', system-ui, sans-serif;
        font-weight: 500;
        font-size: clamp(12px, 1vw, 15px);
        line-height: 1.25;
        text-align: center;
        color: var(--fg);
        letter-spacing: -0.01em;
      }
      .laurel-caption {
        font-family: 'Instrument Serif', Georgia, serif;
        font-style: italic;
        text-align: center;
        color: var(--fg-muted);
        font-size: 14px;
        margin-top: 8px;
      }

      /* === Team card text legibility boost === */
      #about .group .absolute.bottom-3 .font-heading {
        text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 14px rgba(0,0,0,0.4);
        letter-spacing: -0.005em;
      }
      #about .group .absolute.bottom-3 .caption {
        text-shadow: 0 1px 2px rgba(0,0,0,0.8);
        color: rgba(255, 255, 255, 0.78);
      }
      #about .group .absolute.bottom-3 .caption em {
        color: rgba(255, 255, 255, 0.95);
      }
      /* In light mode, photos still need dark gradient backdrop for white text */
      .light #about .group .absolute.bottom-3 .font-heading,
      .light #about .group .absolute.bottom-3 .caption,
      .light #about .group .absolute.bottom-3 .caption em {
        color: rgba(255, 255, 255, 0.95) !important;
      }

      /* === Split char (hero headline) === */
      .split-char {
        display: inline-block; opacity: 0;
        transform: translateY(110%) rotate(8deg) scale(0.92);
        transform-origin: 50% 100%;
        will-change: transform, opacity;
      }

      /* Hero headline — subtle continuous breathe */
      @keyframes hero-breathe {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(-2px); }
      }
      header#home h1 {
        position: relative;
        animation: hero-breathe 9s ease-in-out infinite;
      }
      header#home h1 [data-split] {
        position: relative;
        cursor: default;
      }
      /* Each line slides subtly on hover */
      header#home h1 [data-split]:hover .split-char {
        transition: transform .5s cubic-bezier(.2,.7,.2,1), color .5s;
      }
      header#home h1 [data-split]:hover .split-char {
        color: #6fa37a;
      }
      header#home h1 [data-split] .split-char {
        transition: transform .4s cubic-bezier(.2,.7,.2,1), color .4s;
      }
      header#home h1 [data-split]:hover .split-char:nth-child(1) { transform: translateY(-6px) rotate(-1deg); }
      header#home h1 [data-split]:hover .split-char:nth-child(2) { transform: translateY(-6px) rotate(0.5deg); }
      header#home h1 [data-split]:hover .split-char:nth-child(3) { transform: translateY(-6px) rotate(-0.5deg); }
      header#home h1 [data-split]:hover .split-char:nth-child(4) { transform: translateY(-6px) rotate(1deg); }
      header#home h1 [data-split]:hover .split-char:nth-child(5) { transform: translateY(-6px) rotate(-1deg); }
      header#home h1 [data-split]:hover .split-char:nth-child(6) { transform: translateY(-6px) rotate(0.5deg); }
      header#home h1 [data-split]:hover .split-char:nth-child(7) { transform: translateY(-6px) rotate(-0.5deg); }

      /* Heart-beat dot */
      @keyframes dot-beat {
        0%, 100% { transform: scale(1); }
        15%      { transform: scale(1.35); }
        30%      { transform: scale(1.05); }
        45%      { transform: scale(1.2); }
        60%      { transform: scale(1); }
      }
      #heroDot {
        display: inline-block;
        animation: dot-beat 3.5s ease-in-out infinite;
        animation-delay: 2s;
      }

      /* === Hero "NO MORE …" rotating frustration phrases (homepage h1) === */
      /* Phrases stack + absolutely position inside a fixed-height box (zero vertical
         layout shift — the contact form below never moves; min-height is in em so the
         2-line reservation scales with the h1's responsive 64/104px size). Rendered
         UPPERCASE; the last word of each phrase is brand green (.hr-green). On rotation
         the JS splits each phrase into per-letter .flip-char spans which FLIP (rotateX)
         in/out, staggered by --i. Cadence: scripts.njk (HERO_ROTATE_MS). */
      header#home .hero-rotator {
        position: relative;
        display: block;
        text-transform: uppercase; /* source stays lowercase for a clean aria-label reading */
        /* Smaller than "NO MORE" and sized per breakpoint so the LONGEST phrase
           ("MISSED DEADLINES.") always fits on ONE line (white-space:nowrap) — no word
           break, no overflow. Sizes are <= the measured max-fit per column width; the
           column narrows at md (the 2-col grid kicks in), which is why md dips before
           lg/xl grow again. */
        font-size: 30px;
        line-height: 1.05;
        min-height: 1.15em;        /* exactly one line reserved — zero layout shift */
        margin-top: 0.12em;        /* small gap below the big "NO MORE" */
      }
      @media (min-width: 768px)  { header#home .hero-rotator { font-size: 34px; } }
      @media (min-width: 1024px) { header#home .hero-rotator { font-size: 42px; } }
      @media (min-width: 1280px) { header#home .hero-rotator { font-size: 52px; } }
      header#home .hero-rot {
        position: absolute; top: 0; left: 0; right: 0;
        opacity: 0;                 /* hidden by default; .is-active reveals it (also the no-JS fallback) */
        pointer-events: none;
        white-space: nowrap;        /* keep each phrase on one line — never break a word or letter */
      }
      header#home .hero-rot.is-active,
      header#home .hero-rot.is-leaving { opacity: 1; }
      /* Last word in brand green — theme-aware for contrast (darker moss on cream). */
      header#home .hero-rot .hr-green { color: var(--moss-500); }
      .light header#home .hero-rot .hr-green { color: #3f6b54; }
      /* Per-letter flip (replaces the old fade/slide). Letters hidden until they flip in. */
      /* Per-WORD flip — each whole word flips (rotateX) from the old phrase's word to the
         new one, smoothly and slowly (a gentle, passive motion, not a fast per-letter
         cascade). Each leaving word flips out first, then the matching new word flips in
         (480ms base delay) so they swap IN PLACE — "the word flips to another word" — with
         no doubled text. Words stagger gently left-to-right by --i. */
      header#home .hero-rot .flip-word {
        display: inline-block;
        transform-origin: 50% 60%;
        backface-visibility: hidden;
        opacity: 0;
        will-change: transform, opacity;
      }
      header#home .hero-rot.is-active .flip-word {
        animation: hero-flip-in .68s cubic-bezier(.22,.61,.27,1) both;
        animation-delay: calc(480ms + var(--i, 0) * 130ms);
      }
      header#home .hero-rot.is-leaving .flip-word {
        animation: hero-flip-out .46s cubic-bezier(.45,0,.65,1) both;
        animation-delay: calc(var(--i, 0) * 130ms);
      }
      @keyframes hero-flip-in {
        0%   { transform: perspective(720px) rotateX(-90deg); opacity: 0; }
        45%  { opacity: 1; }
        100% { transform: perspective(720px) rotateX(0deg);   opacity: 1; }
      }
      @keyframes hero-flip-out {
        0%   { transform: perspective(720px) rotateX(0deg);   opacity: 1; }
        100% { transform: perspective(720px) rotateX(90deg);  opacity: 0; }
      }
      @media (prefers-reduced-motion: reduce) {
        header#home .hero-rot .flip-word { animation: none !important; opacity: 1 !important; transform: none !important; }
      }

      /* Rotating credentials / recognition under the hero form — each whole line flips
         (rotateX) to the next, gently, reusing the headline's flip keyframes. Reserves a
         2-line box so varied-length lines cause no layout shift; each line is vertically
         centred so short (1-line) lines don't leave a gap. */
      header#home .cred-rotator {
        position: relative;
        display: block;
        min-height: 3em; /* ~2 lines at line-height 1.5 — tallest credential fits, no reflow */
      }
      header#home .cred-rot {
        position: absolute; inset: 0;
        display: flex; align-items: center;
        opacity: 0;
        backface-visibility: hidden;
        will-change: transform, opacity;
      }
      /* base opacity for the active line is the no-JS / reduced-motion fallback; the
         flip animation (with `both`) controls opacity while it runs. */
      header#home .cred-rot.is-active  { opacity: 1; animation: hero-flip-in .6s cubic-bezier(.22,.61,.27,1) both; animation-delay: 440ms; }
      header#home .cred-rot.is-leaving { animation: hero-flip-out .42s cubic-bezier(.45,0,.65,1) both; }
      @media (prefers-reduced-motion: reduce) {
        header#home .cred-rot { animation: none !important; }
      }

      /* Nav 3-column grid: side columns reserve their content width so the wide
         center pill never squeezes the logo or the right cluster (US phone +
         "Book a Call") into wrapping. Replaces the old lg:grid-cols-[1fr_auto_1fr]
         which forced equal 1fr sides too narrow for the right cluster across
         1024–1536px (Book-a-Call wrapped to 2 lines, the phone to 4). With
         minmax(max-content,1fr) both sides still hit 1fr on wide screens so the
         pill stays centered, but shrink only to their content (never wrapping)
         when space is tight.
         NOTE: this rule must NOT be scoped to header#home — the same nav.njk
         renders on every page, so scoping the grid-template to the home header
         left all other pages with `lg:grid` + no column template, collapsing
         logo / pill / actions into a single stacked column. Universal selector. */
      @media (min-width: 1024px) {
        nav.dh-nav-cols {
          grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
        }
      }

      /* === Liquid cursor aurora === */
      .liquid-cursor {
        position: fixed; top: 0; left: 0; width: 520px; height: 520px;
        border-radius: 9999px; pointer-events: none; z-index: 0;
        background: radial-gradient(circle, rgba(111,163,122,0.22) 0%, rgba(205,138,75,0.08) 40%, transparent 70%);
        filter: blur(60px); transform: translate(-50%, -50%);
        mix-blend-mode: screen;
      }

      /* === Scroll progress (moss only) === */
      .scroll-progress {
        position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 100;
        background: var(--moss-500);
      }

      /* === Pill nav active === */
      .pill-nav a.active {
        background: linear-gradient(135deg, rgba(11, 61, 46, 0.9), rgba(36, 69, 58, 0.9));
        border: 1px solid rgba(111, 163, 122, 0.35);
        color: #d9f5e3;
      }

      /* === Tilt (subtle) === */
      .tilt { transition: transform .28s cubic-bezier(.2,.7,.2,1); will-change: transform; }

      /* === Hover list (hero-style services) === */
      .hero-item {
        position: relative; display: block; padding: 18px 0; border-bottom: 1px solid rgba(111,163,122,0.12);
        transition: padding .4s cubic-bezier(.2,.7,.2,1);
      }
      .hero-item:hover { padding-left: 28px; }
      .hero-item .arrow {
        position: absolute; left: 0; top: 50%; transform: translate(-30px, -50%);
        opacity: 0; transition: opacity .4s, transform .4s; color: var(--moss-500);
      }
      .hero-item:hover .arrow { opacity: 1; transform: translate(0, -50%); }
      /* Tech-stack label on the right — fades and slides out of the way when hovering */
      .hero-item .tech-tag {
        transition: opacity .35s ease, transform .45s cubic-bezier(.2,.7,.2,1), filter .35s ease;
        transform-origin: right center;
      }
      .hero-item:hover .tech-tag {
        opacity: 0; transform: translateX(24px); filter: blur(4px);
      }
      /* Orb now bleeds off the right edge so it never covers the headline text */
      .hero-item .hover-img {
        position: absolute; right: -60px; top: 50%;
        transform: translate(60px, -50%) scale(.45) rotate(-35deg);
        width: 170px; height: 170px; border-radius: 9999px; opacity: 0; pointer-events: none;
        transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.85,.25,1), filter .55s ease;
        filter: blur(10px) saturate(0.9);
        z-index: 2;
      }
      .hero-item:hover .hover-img {
        opacity: 1;
        transform: translate(0, -50%) scale(1) rotate(0deg);
        filter: blur(0) saturate(1.05);
      }
      /* On ultra-wide screens, give the orb even more room to bleed further right */
      @media (min-width: 1280px) {
        .hero-item .hover-img { right: -90px; width: 200px; height: 200px; }
      }
      @media (min-width: 1600px) {
        .hero-item .hover-img { right: -120px; width: 230px; height: 230px; }
      }

      /* === Zigzag funnel === */
      .zig-stage:nth-child(even) { margin-left: auto; text-align: right; }
      .zig-stage:nth-child(even) .zig-num { margin-left: auto; }

      /* =========================================== */
      /* === THEME SYSTEM (CSS VARS + LIGHT MODE) === */
      /* =========================================== */
      :root {
        --bg:              #0a0a1a;
        --bg-soft:         #10161a;
        --fg:              #f1f5f9;
        --fg-muted:        rgba(255, 255, 255, 0.72);
        --fg-dim:          rgba(255, 255, 255, 0.55);
        --fg-faint:        rgba(255, 255, 255, 0.38);
        --glass-bg:        rgba(15, 23, 19, 0.55);
        --glass-border:    rgba(111, 163, 122, 0.15);
        --glass-soft-bg:   rgba(255, 255, 255, 0.04);
        --glass-soft-border: rgba(111, 163, 122, 0.12);
        --rule:            rgba(111, 163, 122, 0.2);
        --input-bg:        rgba(15, 23, 19, 0.5);
        --input-border:    rgba(36, 69, 58, 0.35);
        --grain-opacity:   0.4;
        --grain-blend:     overlay;
      }
      :root.light {
        color-scheme: light;
        --bg:              #f5f0e8;
        --bg-soft:         #ebe4d5;
        --fg:              #0f1713;
        --fg-muted:        rgba(15, 23, 19, 0.95);
        --fg-dim:          rgba(15, 23, 19, 0.86);
        --fg-faint:        rgba(15, 23, 19, 0.80);
        --glass-bg:        rgba(255, 252, 245, 0.65);
        --glass-border:    rgba(63, 107, 84, 0.22);
        --glass-soft-bg:   rgba(15, 23, 19, 0.03);
        --glass-soft-border: rgba(63, 107, 84, 0.15);
        --rule:            rgba(63, 107, 84, 0.22);
        --input-bg:        rgba(255, 252, 245, 0.7);
        --input-border:    rgba(63, 107, 84, 0.28);
        --grain-opacity:   0.12;
        --grain-blend:     multiply;
      }
      /* Small-text readability in light mode (AA pass at 10-12px) */
      .light .caption { color: rgba(15, 23, 19, 0.85); }
      .light .caption em { color: rgba(15, 23, 19, 0.95); }

      /* Hero subtitle — matches the photo's medium gray weight, not too bold */
      header#home p.dropcap { color: rgba(255, 255, 255, 0.78); font-weight: 400; letter-spacing: -0.005em; }
      .light header#home p.dropcap { color: rgba(15, 23, 19, 0.78) !important; }
      /* Drop cap W pops slightly larger + italic serif (as in photo) */
      header#home p.dropcap::first-letter { font-size: 4.2em; line-height: 0.82; padding-right: 0.08em; }
      /* Arrow / accent glyphs use darker moss in light mode */
      .light .hero-item .arrow { color: #3f6b54; }
      .light .hero-item .group .caption { color: rgba(15, 23, 19, 0.7); }
      /* === HERO DECORATIVE LAYER === */
      #heroBrandLabel { color: rgba(255, 255, 255, 0.35); }
      .light #heroBrandLabel { color: rgba(15, 23, 19, 0.50); }

      /* HEROES ghost — visible vertical watermark on the LEFT edge */
      #heroGhost { color: rgba(111, 163, 122, 0.18); left: 1rem; }
      .light #heroGhost { color: rgba(36, 69, 58, 0.28); }
      #heroGhostText {
        font-size: clamp(140px, 14vw, 220px);
        animation: ghost-drift 14s ease-in-out infinite;
      }

      /* Shift hero content RIGHT past the HEROES ghost so it fills the middle space */
      @media (min-width: 768px) {
        header#home .md\:col-span-7 { padding-left: 5vw; }
      }
      @media (min-width: 1024px) {
        header#home .md\:col-span-7 { padding-left: 11vw; }
      }
      @media (min-width: 1440px) {
        header#home .md\:col-span-7 { padding-left: 13vw; }
      }
      @media (min-width: 1920px) {
        header#home .md\:col-span-7 { padding-left: 14vw; }
      }
      @keyframes ghost-drift {
        0%, 100% { transform: rotate(180deg) translateX(0); letter-spacing: -0.04em; }
        50%      { transform: rotate(180deg) translateX(6px); letter-spacing: -0.035em; }
      }

      /* Hero telemetry (mission-control detail) */
      #heroTelemetry { color: rgba(255, 255, 255, 0.4); }
      .light #heroTelemetry { color: rgba(15, 23, 19, 0.55); }
      #heroTelemetry [data-tele="status"] { color: #6fa37a; }
      .light #heroTelemetry [data-tele="status"] { color: #3f6b54; }

      /* Apply vars so both themes inherit */
      html, body { background: var(--bg); color: var(--fg); }
      .bg-deep-space { background: var(--bg) !important; }
      .text-starlight { color: var(--fg) !important; }
      .glass { background: var(--glass-bg); border: 1px solid var(--glass-border); }
      /* .glass-flat = identical look to .glass but WITHOUT backdrop-filter. Use it
         on any card that wraps an <iframe> (e.g. the footer NY-HQ Google Map):
         backdrop-filter flattens descendant iframes into a 1x backing store, which
         renders blurry on retina/mobile (DPR 2-3). The footer bg behind these cards
         is near-flat, so dropping the backdrop-blur is visually negligible. */
      .glass-flat { background: var(--glass-bg); border: 1px solid var(--glass-border); }
      .glass-soft { background: var(--glass-soft-bg); border: 1px solid var(--glass-soft-border); }
      .caption { color: var(--fg-faint); }
      .caption em { color: var(--fg-dim); }
      body::before { opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); }

      /* ---- LIGHT MODE overrides ---- */
      .light .hero-liquid, .light .liquid-bg {
        background:
          radial-gradient(120% 80% at 75% 40%, rgba(111, 163, 122, 0.15) 0%, transparent 55%),
          radial-gradient(80% 60% at 30% 85%, rgba(63, 107, 84, 0.10) 0%, transparent 60%),
          radial-gradient(55% 55% at 82% 78%, rgba(205, 184, 145, 0.35) 0%, rgba(245, 240, 232, 1) 70%),
          linear-gradient(180deg, #f5f0e8 0%, #ebe4d5 100%);
      }
      .light .section-hero::before {
        background:
          radial-gradient(80% 50% at 90% 20%, rgba(111, 163, 122, 0.10) 0%, transparent 55%),
          radial-gradient(60% 40% at 10% 90%, rgba(63, 107, 84, 0.08) 0%, transparent 60%);
      }
      .light .wordmark { color: rgba(63, 107, 84, 0.08); }
      .light .liquid-cursor {
        background: radial-gradient(circle, rgba(63, 107, 84, 0.22) 0%, rgba(205, 138, 75, 0.08) 40%, transparent 70%);
        mix-blend-mode: multiply;
      }
      .light .leaf-bg { background: radial-gradient(circle at 50% 50%, #a1c4ab 0%, #6fa37a 45%, #3f6b54 85%); }

      /* Text color tailwind utility overrides under .light */
      .light .text-white { color: var(--fg) !important; }
      .light .text-white\/95, .light .text-white\/90, .light .text-white\/85 { color: var(--fg) !important; }
      .light .text-white\/80 { color: var(--fg) !important; }
      .light .text-white\/70, .light .text-white\/75 { color: var(--fg-muted) !important; }
      .light .text-white\/60, .light .text-white\/65 { color: var(--fg-muted) !important; }
      .light .text-white\/55, .light .text-white\/50 { color: var(--fg-dim) !important; }
      .light .text-white\/45, .light .text-white\/40, .light .text-white\/35 { color: var(--fg-faint) !important; }
      .light .text-white\/30, .light .text-white\/20, .light .text-white\/15, .light .text-white\/10 { color: rgba(15, 23, 19, 0.18) !important; }

      /* Background utility overrides under .light */
      .light .bg-moss-900\/40, .light .bg-moss-900\/50, .light .bg-moss-900 { background-color: var(--input-bg) !important; }
      .light .bg-moss-700\/20, .light .bg-moss-700\/30, .light .bg-moss-700\/40 { background-color: rgba(63, 107, 84, 0.12) !important; }
      .light .bg-moss-700\/50 { background-color: rgba(63, 107, 84, 0.22) !important; }
      .light .bg-white\/5, .light .bg-white\/10, .light .bg-white\/20 { background-color: rgba(15, 23, 19, 0.05) !important; }
      .light .bg-white\/30, .light .bg-white\/40 { background-color: rgba(15, 23, 19, 0.1) !important; }

      /* Border utility overrides */
      .light .border-moss-700\/20, .light .border-moss-700\/30 { border-color: var(--rule) !important; }
      .light .border-white\/5, .light .border-white\/10 { border-color: rgba(15, 23, 19, 0.08) !important; }
      .light .divide-moss-700\/20 > * + *, .light .divide-white\/5 > * + * { border-color: var(--rule) !important; }

      /* === Owner directive 2026-05-14 — kill the alternating section "division" band.
         Every <section> shares the page paper/ink background, exactly like the
         homepage (which uses clean .section-hero and never carries a dark fill).
         The translucent dark-ink tint that read as an ugly cream / dark-cream
         band — and the moss hairline that sat on it — are neutralized site-wide
         so content flows as one continuous editorial column. Selector is
         section-scoped: inner cards, .tool-code <pre>, glass panels and overlays
         that legitimately reuse the same rgba(15,23,19,…) ink are untouched. */
      section[class*="bg-[rgba(15,23,19,0."] {
        background-color: transparent !important;
        border-top-color: transparent !important;
        border-top-width: 0 !important;
      }

      /* Scrollbar in light mode */
      .light::-webkit-scrollbar-track, .light ::-webkit-scrollbar-track { background: var(--bg-soft); }
      .light::-webkit-scrollbar-thumb, .light ::-webkit-scrollbar-thumb { background: #6fa37a; }
      .light html, .light body { scrollbar-color: #6fa37a var(--bg-soft); }

      /* Inputs in light mode */
      .light input, .light textarea, .light select { color: var(--fg); }
      .light input::placeholder, .light textarea::placeholder { color: var(--fg-faint); }

      /* Hero floating chips readable in light */
      .light .glass, .light .glass-flat { color: var(--fg) !important; }
      .light .glass *, .light .glass-flat * { color: inherit; }
      /* Buttons/links inside glass inherit fg unless explicit */
      .light a.glass, .light button.glass { color: var(--fg) !important; }
      .light a[class*="glass"], .light button[class*="glass"] { color: var(--fg) !important; }
      /* Active pill keeps its special moss palette, tuned for light */
      .light .pill-nav a.active { color: #0f1713 !important; background: linear-gradient(135deg, rgba(111,163,122,0.35), rgba(63,107,84,0.35)); }
      /* Buttons with moss-600 bg stay white text */
      .light .bg-moss-600, .light .bg-moss-500 { color: #ffffff !important; }
      .light .bg-moss-600 *, .light .bg-moss-500 * { color: inherit !important; }

      /* ===== Desktop nav mega-menu (hover opens; click pins) ===== */
      .nav-item { position: relative; }
      .nav-trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; background: transparent; border: 0; color: rgba(255,255,255,0.72); transition: color 0.2s ease; }
      .nav-trigger:hover, .nav-item.open .nav-trigger, .nav-trigger.active { color: #fff; }
      .nav-chev { width: 12px; height: 12px; opacity: 0.6; transition: transform 0.25s ease; flex-shrink: 0; }
      .nav-item.open .nav-chev, .nav-item:focus-within .nav-chev { transform: rotate(180deg); }
      .nav-panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 14px; z-index: 60; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s ease, visibility 0.12s; }
      .nav-item.open > .nav-panel, .nav-item:focus-within > .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; z-index: 70; }
      /* opaque card (NOT see-through) — overrides the .glass 0.55 alpha */
      .nav-panel-card { background: #15201a; border-radius: 20px; padding: 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); transform: translateY(8px); transition: transform 0.12s ease; }
      .nav-item.open .nav-panel-card, .nav-item:focus-within .nav-panel-card { transform: translateY(0); }
      .nav-panel-wide .nav-panel-card { width: 680px; max-width: calc(100vw - 32px); }
      .nav-panel-mid .nav-panel-card { width: 460px; max-width: calc(100vw - 32px); }
      .nav-panel-narrow .nav-panel-card { width: 230px; }
      .nav-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; }
      .nav-cat { display: block; padding: 7px 9px; border-radius: 10px; transition: background 0.15s ease; }
      .nav-cat:hover { background: rgba(111,163,122,0.14); }
      .nav-cat-name { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 13.5px; color: rgba(255,255,255,0.9); }
      .nav-cat-desc { display: block; font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 1px; }
      .nav-search { width: 100%; margin-bottom: 14px; background: rgba(15,23,19,0.5); border: 1px solid rgba(111,163,122,0.3); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: #fff; outline: none; transition: border-color 0.2s ease; }
      .nav-search::placeholder { color: rgba(255,255,255,0.4); }
      .nav-search:focus { border-color: #6fa37a; }
      .nav-mega-grid { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 14px 22px; }
      .nav-mega-grid-2 { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
      .nav-mega-head { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #6fa37a; margin-bottom: 8px; }
      .nav-link { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 13.5px; color: rgba(255,255,255,0.72); padding: 3px 0; transition: color 0.15s ease; }
      .nav-link:hover { color: #a1c4ab; }
      .nav-panel-foot { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(111,163,122,0.18); font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #6fa37a; transition: color 0.2s ease; }
      .nav-panel-foot:hover { color: #a1c4ab; }
      .nav-hidden { display: none !important; }
      .light .nav-trigger { color: var(--fg-dim); }
      .light .nav-trigger:hover, .light .nav-item.open .nav-trigger, .light .nav-trigger.active { color: var(--fg); }
      .light .nav-link { color: var(--fg-dim); }
      .light .nav-link:hover { color: #3f6b54; }
      .light .nav-mega-head, .light .nav-panel-foot { color: #3f6b54; }
      .light .nav-search { background: rgba(0,0,0,0.04); color: var(--fg); border-color: rgba(63,107,84,0.25); }
      .light .nav-search::placeholder { color: var(--fg-faint); }
      /* Opaque panel must be THEME-AWARE: dark card (#15201a, set above) is correct
         in dark mode, but in light mode the nav text is dark (.light .nav-link →
         var(--fg-dim)), so the card must be light/opaque or text vanishes. */
      .light .nav-panel-card { background: #fffcf5; }
      .light .nav-cat-name { color: var(--fg); }
      .light .nav-cat-desc { color: var(--fg-dim); }
      .light .nav-cat:hover { background: rgba(63,107,84,0.10); }
      /* Wide Tools panel shows categories 3-up so 11 items stay ~4 rows. */
      .nav-panel-wide .nav-cat-grid { grid-template-columns: repeat(3, 1fr); }
      @media (max-width: 600px) { .nav-panel-wide .nav-cat-grid { grid-template-columns: repeat(2, 1fr); } }

      /* ── Global site search modal (⌘K / "/" / header icon) ─────────────── */
      .dh-gs { display: none; position: fixed; inset: 0; z-index: 200; }
      .dh-gs.is-open { display: block; }
      .dh-gs__scrim { position: absolute; inset: 0; background: rgba(8,12,10,0.62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
      .dh-gs__panel { position: relative; margin: 10vh auto 0; width: calc(100% - 32px); max-width: 640px; max-height: 74vh; display: flex; flex-direction: column;
        background: #15201a; border: 1px solid rgba(111,163,122,0.30); border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,0.55); overflow: hidden;
        animation: dhgsIn 0.16s cubic-bezier(0.2,0.7,0.2,1); }
      @keyframes dhgsIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
      .light .dh-gs__panel { background: #fffcf5; border-color: rgba(63,107,84,0.25); }
      .dh-gs__bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(111,163,122,0.18); flex-shrink: 0; }
      .light .dh-gs__bar { border-bottom-color: rgba(63,107,84,0.15); }
      .dh-gs__icon { width: 19px; height: 19px; color: #6fa37a; flex-shrink: 0; }
      .dh-gs__input { flex: 1; background: transparent; border: 0; outline: none; font-family: 'Space Grotesk', sans-serif; font-size: 16px; color: #fff; }
      .dh-gs__input::placeholder { color: rgba(255,255,255,0.4); }
      .light .dh-gs__input { color: var(--fg); }
      .light .dh-gs__input::placeholder { color: var(--fg-faint); }
      .dh-gs__esc, .dh-gs__foot kbd { font-family: 'JetBrains Mono', monospace; font-size: 10px; line-height: 1; color: rgba(255,255,255,0.55); border: 1px solid rgba(111,163,122,0.3); border-radius: 5px; padding: 3px 5px; cursor: pointer; background: rgba(255,255,255,0.03); }
      .light .dh-gs__esc, .light .dh-gs__foot kbd { color: var(--fg-dim); border-color: rgba(63,107,84,0.25); background: rgba(0,0,0,0.03); }
      .dh-gs__results { overflow-y: auto; padding: 8px; flex: 1; -webkit-overflow-scrolling: touch; }
      .dh-gs__hint, .dh-gs__empty { padding: 22px 16px; text-align: center; color: rgba(255,255,255,0.55); font-size: 13.5px; line-height: 1.6; }
      .light .dh-gs__hint, .light .dh-gs__empty { color: var(--fg-dim); }
      .dh-gs__empty a { color: #6fa37a; text-decoration: underline; }
      .dh-gs__group { margin-bottom: 6px; }
      .dh-gs__group-h { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #6fa37a; padding: 10px 12px 5px; }
      .light .dh-gs__group-h { color: #3f6b54; }
      .dh-gs__row { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none; cursor: pointer; }
      .dh-gs__row[aria-selected="true"], .dh-gs__row:hover { background: rgba(111,163,122,0.16); }
      .light .dh-gs__row[aria-selected="true"], .light .dh-gs__row:hover { background: rgba(63,107,84,0.10); }
      .dh-gs__row-t { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 14px; color: rgba(255,255,255,0.92); }
      .light .dh-gs__row-t { color: var(--fg); }
      .dh-gs__row-x { display: block; font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .light .dh-gs__row-x { color: var(--fg-dim); }
      .dh-gs__row-x mark { background: rgba(205,138,75,0.28); color: inherit; border-radius: 2px; padding: 0 1px; }
      .dh-gs__more { display: block; padding: 6px 12px; font-size: 11.5px; color: #6fa37a; text-decoration: none; }
      .dh-gs__more:hover { color: #a1c4ab; }
      .dh-gs__foot { display: flex; align-items: center; gap: 14px; padding: 9px 16px; border-top: 1px solid rgba(111,163,122,0.18); font-size: 11px; color: rgba(255,255,255,0.45); flex-shrink: 0; }
      .light .dh-gs__foot { border-top-color: rgba(63,107,84,0.15); color: var(--fg-faint); }
      .dh-gs__foot kbd { cursor: default; margin-right: 2px; }
      .dh-gs__foot-right { margin-left: auto; }
      @media (max-width: 600px) {
        .dh-gs__panel { margin-top: 0; width: 100%; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; border: 0; }
        .dh-gs__foot-right { display: none; }
      }
      /* the header search trigger button */
      .dh-gs-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
      @media (prefers-reduced-motion: reduce) { .nav-panel, .nav-panel-card, .nav-chev { transition: none; } }
      /* Moss-500 accent text darkens for WCAG contrast */
      .light .text-moss-500 { color: #3f6b54 !important; }
      /* Section marker and serif accents stay moss-600 for readability */
      .light .serif.text-moss-500, .light .section-marker { color: #3f6b54 !important; }

      /* Brand gradient wordmark (DH footer) — lift for light */
      .light footer .font-heading[style*="background"] {
        background: linear-gradient(180deg, rgba(63,107,84,0.28) 0%, rgba(63,107,84,0.03) 100%) !important;
        -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
      }

      /* Theme toggle icon swap */
      .light #iconMoon { display: none; }
      .light #iconSun  { display: block; }
      :root:not(.light) #iconSun { display: none; }

      /* =========================================== */
      /* === RESPONSIVE (phone → tablet → ultrawide) === */
      /* =========================================== */

      /* PHONE — hide decorative noise, shrink aggressive sizing */
      @media (max-width: 767px) {
        .wordmark { display: none; }
        .liquid-cursor { display: none; }
        .cursor-dot, .cursor-ring { display: none; }

        section[class*="py-32"] { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
        section[class*="px-12"], footer > div[class*="px-12"] { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

        /* Hero — tighten */
        header#home { height: auto !important; min-height: auto !important; padding-bottom: 1.5rem; }
        header#home h1 { font-size: 56px !important; }
        header#home .pill-nav { gap: 0; padding: 4px; }
        header#home .pill-nav a { padding: 0.45rem 0.7rem; font-size: 11px; }

        /* Hero mobile reorganization — status chip spaced away from nav/logo */
        header#home nav { padding-top: 1rem !important; }
        header#home > .flex-1 { margin-top: 1.25rem; padding-top: 0.5rem; }
        header#home .flex.items-center.gap-2.text-\[10px\].font-mono {
          margin-bottom: 1.25rem !important;
          padding-top: 0.75rem;
        }
        /* Subtitle more breathing room */
        header#home p.dropcap { margin-top: 1.25rem !important; font-size: 15px; }
        /* Buttons stack full-width, more top margin so they sit above Contact visually */
        header#home .flex.flex-wrap.gap-3 { margin-top: 1.75rem !important; flex-direction: column; align-items: stretch; gap: 0.6rem; }
        header#home .flex.flex-wrap.gap-3 > a { justify-content: center; padding: 0.85rem 1.25rem; }

        /* Hero video frame — push max-width bigger on mobile so video dominates */
        #heroComposition { max-width: 100% !important; margin: 1rem auto 0; }
        #heroFireFrame { box-shadow: 0 14px 40px rgba(15,23,19,0.55) !important; }

        /* Hero ghost HEROES wordmark — shrink + push further left so it doesn't crowd content */
        #heroGhost { font-size: 110px !important; left: -8px !important; top: 50% !important; transform: translateY(-50%); }
        /* Brand label (vertical EST 2015) — hide on mobile, too cramped */
        #heroBrandLabel { display: none !important; }

        /* On narrow phones, hide inactive pills — sticky nav handles navigation on scroll */
        @media (max-width: 479px) {
          header#home .pill-nav a:not(.active) { display: none; }
          /* Logo scale down a touch on tiny phones */
          header#home .dh-logo img { height: 40px !important; }
        }
        /* Sticky nav — compact pills on phone */
        #stickyNav { max-width: calc(100vw - 24px); }
        #stickyNav .glass { padding: 3px; flex-wrap: nowrap; }
        #stickyNav a { padding: 0.35rem 0.55rem; font-size: 10px; }
        @media (max-width: 479px) {
          #stickyNav a:nth-child(3), #stickyNav a:nth-child(4) { display: none; }
        }
        /* Footer legal bar — wrap when cramped */
        footer .flex.gap-5 { flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
        /* ============================================ */
        /* MOBILE FOOTER — 2 sections side-by-side       */
        /* ============================================ */
        @media (max-width: 639px) {
          /* Nav grid: 2-col, brand & locations full width, services side-by-side */
          footer .grid.grid-cols-2.md\:grid-cols-12 {
            grid-template-columns: 1fr 1fr !important;
            gap: 1.25rem !important;
          }
          /* Brand (first): full width */
          footer .grid.grid-cols-2.md\:grid-cols-12 > .col-span-2:first-child { grid-column: 1 / -1 !important; }
          /* Web Services (left) + Shopify Services (right) — 2-col internal lists */
          footer .col-span-1.md\:col-span-2:nth-of-type(2),
          footer .col-span-1.md\:col-span-2:nth-of-type(3) {
            grid-column: span 1 !important;
          }
          /* Company — full width on its own row */
          footer .col-span-1.md\:col-span-2:nth-of-type(4) {
            grid-column: 1 / -1 !important;
          }
          /* Locations — full width */
          footer .grid.grid-cols-2.md\:grid-cols-12 > .col-span-2:last-child { grid-column: 1 / -1 !important; }
          /* List items: single column on tight mobile (so text doesn't wrap ugly) */
          footer ul.space-y-2\.5 { display: block !important; }
          footer ul.space-y-2\.5 > li { margin-top: 0.5rem !important; }
          footer ul.space-y-2\.5 a { font-size: 12.5px; }
          /* Company (full width): use 2-col list */
          footer .col-span-1.md\:col-span-2:nth-of-type(4) ul.space-y-2\.5 {
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            gap: 0.55rem 1rem;
          }
          footer .col-span-1.md\:col-span-2:nth-of-type(4) ul.space-y-2\.5 > li { margin: 0 !important; }
          /* Trust badges: 2-col on phone, not 1-stacked */
          footer .grid.grid-cols-2.md\:grid-cols-6 { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; }
          /* Shopify services column — left-aligned (same as Web Services) on mobile */
          footer .col-span-1.md\:col-span-2:nth-of-type(3) { text-align: left; }
          footer .col-span-1.md\:col-span-2:nth-of-type(3) ul { text-align: left; }
        }

        /* ============================================ */
        /* MOBILE — BLOG (equal-size cards, no featured stretch) */
        /* ============================================ */
        @media (max-width: 767px) {
          /* ── Mobile glass de-fog ──────────────────────────────────────────
             backdrop-filter: blur() makes the ENTIRE glass subtree render hazy
             on many phone GPUs — worst when nested (the #contact "Ready for
             liftoff" card is a .glass card containing a .glass-soft form, two
             stacked backdrop blurs under an overflow:hidden + rounded parent).
             On phones we drop the backdrop blur and use a near-opaque tinted
             background instead, so every section's text/buttons/forms stay
             crisp. Desktop keeps the frosted-glass look. */
          .glass, .glass-soft {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
          }
          .glass { background: rgba(15, 23, 19, 0.94) !important; }
          .glass-soft { background: rgba(26, 38, 31, 0.92) !important; }
          .light .glass { background: rgba(250, 247, 240, 0.97) !important; }
          .light .glass-soft { background: rgba(255, 255, 255, 0.93) !important; }
          /* Featured article: override aspect to match side cards */
          .section-hero .md\:col-span-8 article .aspect-\[2\/1\] { aspect-ratio: 16 / 9 !important; }
          /* Featured article padding: match side */
          .section-hero .md\:col-span-8 article .p-10 { padding: 1.25rem !important; }
          /* Featured article headline: match side */
          .section-hero .md\:col-span-8 article h3 { font-size: 1.25rem !important; line-height: 1.2 !important; }
          /* Hide the long chapter-chips row on mobile */
          .section-hero .md\:col-span-8 article .flex.flex-wrap.gap-2.mt-5 { display: none; }
          /* Hide the long paragraph on mobile — keep only short excerpt */
          .section-hero .md\:col-span-8 article p.max-w-2xl { display: none; }
        }
        /* Footer trust badges — tighter gap */
        footer .grid.grid-cols-2.md\:grid-cols-6 { gap: 0.5rem; }
        header#home nav .glass:last-child { padding: 0.5rem 1rem; font-size: 11px; }
        /* Amber orb on mobile: smaller + positioned lower-right so it doesn't cover the video */
        header#home [id="heroOrb"] { width: 30% !important; height: auto !important; aspect-ratio: 1 / 1 !important; right: -12% !important; bottom: -12% !important; }
        /* Fire video now fills the orb (no size override needed) */
        header#home .md\:col-span-5 > .relative {
          width: 100% !important;
          max-width: 300px;
          height: auto !important;
          aspect-ratio: 1 / 1 !important;
          margin: 0 auto;
        }
        header#home .md\:col-span-5 .float-y, header#home .md\:col-span-5 .absolute { pointer-events: none; }
        header#home [style*="writing-mode"] { display: none; }
        /* Brand vertical label and HEROES ghost hidden on phone already via hidden md:flex / lg:block */

        /* Services hero-list — tap friendly */
        .hero-item .hover-img { display: none; }
        .hero-item { padding: 14px 0; }
        .hero-item:hover { padding-left: 0; }
        .hero-item .arrow {
          position: static; opacity: 1;
          transform: none; display: inline-block; margin-right: 0.5rem;
        }
        .hero-item .font-heading { font-size: 2rem !important; line-height: 1.05 !important; }
        .hero-item .text-xs { display: none; }

        /* Funnel — straight vertical, left aligned */
        .zig-stage { width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; padding-right: 0 !important; text-align: left !important; }
        .zig-stage .flex.justify-end { justify-content: flex-start !important; flex-direction: row !important; }
        .zig-stage .zig-num { font-size: 4.5rem !important; margin-left: 0 !important; }
        /* Hide decorative dots outside on phone */
        .zig-stage > div[class*="absolute"][class*="rounded-full"] { display: none; }

        /* About portrait shrink */
        #about .aspect-\[4\/5\] { aspect-ratio: 1 / 1; }

        /* Footer columns — tighten */
        footer .grid-cols-2 > * { font-size: 13px; }
        footer h2 { font-size: 2.75rem !important; line-height: 1 !important; }
        footer .font-heading[style*="background"] { font-size: 56px !important; }

        /* Case-study featured — stack cleanly */
        #projects .grid.md\:grid-cols-12 { grid-template-columns: 1fr !important; }

        /* Mobile case-study fixes:
           - Featured Emani image aspect shrunk so the card isn't an oversized banner
           - Big Game + Noble Paris cards become borderless/edge-to-edge, matching Emani's feel
           - Image fills column width fully, no inner padding */
        #projects .md\:col-span-7.relative.aspect-\[4\/3\] { aspect-ratio: 16/10 !important; min-height: auto !important; }
        #projects .glass.rounded-3xl.p-6 {
          padding: 0 !important;
          background: transparent !important;
          border: none !important;
          box-shadow: none !important;
          backdrop-filter: none !important;
        }
        #projects .glass.rounded-3xl.p-6 .relative.aspect-\[16\/9\] {
          aspect-ratio: 16/10 !important;
          border-radius: 20px !important;
          margin-bottom: 1rem !important;
        }
        #projects .glass.rounded-3xl.p-6 > .flex { padding: 0 0.25rem 0.5rem !important; }

        /* Broadcast — featured fits, side list below already stacks */
      }

      /* TABLET — moderate */
      @media (min-width: 768px) and (max-width: 1023px) {
        section[class*="py-32"] { padding-top: 6rem !important; padding-bottom: 6rem !important; }
        header#home h1 { font-size: 72px !important; } /* 768–1023: fits the narrow grid column so "NO MORE" stays one line (no break) */
        header#home [id="heroOrb"] { width: 28% !important; height: auto !important; aspect-ratio: 1 / 1 !important; right: -10% !important; bottom: -10% !important; }
        header#home .md\:col-span-5 > .relative {
          width: 100% !important;
          max-width: 380px;
          height: auto !important;
          aspect-ratio: 1 / 1 !important;
        }
        .hero-item .font-heading { font-size: 2.75rem !important; }
        footer .big-wordmark { font-size: 9vw !important; }
      }

      /* WIDE — expand padding, scale wordmarks */
      @media (min-width: 1600px) {
        section, footer > div { padding-left: 5rem !important; padding-right: 5rem !important; }
        header#home > nav, header#home > div { padding-left: 5rem !important; padding-right: 5rem !important; }
      }
      @media (min-width: 1920px) {
        .wordmark { font-size: 180px !important; }
        header#home h1 { font-size: 130px !important; }
        section h2 { max-width: 1000px; }
      }
      @media (min-width: 2400px) {
        section, footer > div, header#home > div, header#home > nav { max-width: 2200px; margin-left: auto !important; margin-right: auto !important; }
      }

      /* Touch — no hover effects, no cursor blobs */
      @media (hover: none), (pointer: coarse) {
        .cursor-dot, .cursor-ring, .liquid-cursor { display: none !important; }
        .hero-item:hover { padding-left: 0; }
        .hero-item .hover-img { display: none !important; }
      }

      /* ============================================
         OFFICE PHOTO LABEL OVERLAY (/team/ page)
         Photos vary widely (dark rooms, sunlit windows,
         outdoor shots) so a Tailwind opacity-gradient
         alone is unreliable. Use a strong fixed scrim
         + AAA-contrast text-shadow that works on every
         photo and in both light + dark page themes.
         ============================================ */
      .office-photo__scrim {
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.92) 0%,
          rgba(0, 0, 0, 0.78) 35%,
          rgba(0, 0, 0, 0.45) 70%,
          rgba(0, 0, 0, 0) 100%
        );
        pointer-events: none;
      }
      .office-photo__tz {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: rgba(255, 255, 255, 0.85);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
      }
      .office-photo__city {
        font-family: 'Space Grotesk', system-ui, sans-serif;
        font-weight: 700;
        font-size: 1.05rem;
        line-height: 1.1;
        letter-spacing: -0.01em;
        color: #ffffff;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7), 0 2px 12px rgba(0, 0, 0, 0.4);
      }
      @media (min-width: 768px) {
        .office-photo__city { font-size: 1.18rem; }
      }
      /* Hover: lift the scrim slightly so the city becomes more readable */
      .office-photo:hover .office-photo__scrim {
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.96) 0%,
          rgba(0, 0, 0, 0.85) 40%,
          rgba(0, 0, 0, 0.55) 75%,
          rgba(0, 0, 0, 0) 100%
        );
      }
      /* Both themes use the same dark scrim — the photo is the surface,
         not the page. White-on-dark contrast is consistent regardless
         of whether the surrounding page is cream or near-black. */
      .light .office-photo__scrim,
      .light .office-photo__city,
      .light .office-photo__tz { /* explicitly assert dark scrim in light mode */
        /* No overrides — the dark scrim + white text is correct on cream too. */
      }

      /* === Reduced motion === */
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
      }

      /* ============================================
         READABLE PROSE — formatting components for
         long-form content (journal articles, services,
         industries). Use inside .prose-readable wrapper
         or apply classes directly. Goal: scannable
         content with visual hierarchy.
         ============================================ */

      /* Lead paragraph — the opening of an article. Larger, lighter weight,
         slightly more line-height, with a drop-cap on the first letter. */
      .prose-lead {
        font-size: 1.18rem;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.82);
        margin-bottom: 1.5rem;
      }
      .prose-lead::first-letter {
        font-family: 'Instrument Serif', Georgia, serif;
        font-style: italic;
        color: var(--moss-500);
        font-size: 3.4rem;
        line-height: 0.85;
        float: left;
        padding: 0.3rem 0.6rem 0 0;
      }
      .light .prose-lead { color: rgba(15, 23, 19, 0.82); }
      .light .prose-lead::first-letter { color: var(--moss-600); }

      /* TL;DR / Key takeaway box — top-of-section summary.
         Use for "in 30 seconds" content readers can eyeball. */
      .prose-tldr {
        background: rgba(63, 107, 84, 0.12);
        border-left: 3px solid var(--moss-500);
        padding: 1.25rem 1.5rem;
        margin: 1.5rem 0 2rem 0;
        border-radius: 0 0.5rem 0.5rem 0;
      }
      .prose-tldr__label {
        display: inline-block;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--moss-500);
        margin-bottom: 0.6rem;
      }
      .prose-tldr ul, .prose-tldr ol {
        margin: 0;
        padding-left: 1.2rem;
      }
      .prose-tldr li {
        font-size: 0.95rem;
        line-height: 1.55;
        margin-bottom: 0.4rem;
        color: rgba(255, 255, 255, 0.85);
      }
      .prose-tldr li:last-child { margin-bottom: 0; }
      .prose-tldr li strong { color: rgba(255, 255, 255, 0.95); font-weight: 600; }
      .light .prose-tldr { background: rgba(63, 107, 84, 0.06); }
      .light .prose-tldr li { color: rgba(15, 23, 19, 0.85); }
      .light .prose-tldr li strong { color: rgba(15, 23, 19, 0.95); }

      /* Numbered list with bold sub-heads. Replaces "First, X. Second, Y."
         enumerative prose with scannable structure. */
      .prose-numbered {
        list-style: none;
        counter-reset: prose-counter;
        padding: 0;
        margin: 1.5rem 0;
      }
      .prose-numbered > li {
        counter-increment: prose-counter;
        position: relative;
        padding-left: 3rem;
        padding-bottom: 1.25rem;
        margin-bottom: 1.25rem;
        border-bottom: 1px solid rgba(111, 163, 122, 0.1);
      }
      .prose-numbered > li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
      .prose-numbered > li::before {
        content: counter(prose-counter, decimal-leading-zero);
        position: absolute;
        left: 0;
        top: 0.05rem;
        font-family: 'Instrument Serif', Georgia, serif;
        font-style: italic;
        font-size: 1.6rem;
        color: var(--moss-500);
        line-height: 1;
        font-weight: 400;
      }
      .prose-numbered > li > strong:first-child {
        display: block;
        font-family: 'Space Grotesk', system-ui, sans-serif;
        font-size: 1.05rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.95);
        margin-bottom: 0.4rem;
        letter-spacing: -0.01em;
      }
      .light .prose-numbered > li::before { color: var(--moss-600); }
      .light .prose-numbered > li > strong:first-child { color: rgba(15, 23, 19, 0.95); }
      .light .prose-numbered > li { border-bottom-color: rgba(36, 69, 58, 0.1); }

      /* Bulleted list with custom moss bullet. */
      .prose-bullets {
        list-style: none;
        padding: 0;
        margin: 1rem 0 1.5rem 0;
      }
      .prose-bullets > li {
        position: relative;
        padding-left: 1.6rem;
        margin-bottom: 0.65rem;
        line-height: 1.6;
      }
      .prose-bullets > li::before {
        content: '';
        position: absolute;
        left: 0.2rem;
        top: 0.7rem;
        width: 0.45rem;
        height: 0.45rem;
        background: var(--moss-500);
        border-radius: 50%;
      }
      .prose-bullets > li > strong:first-child {
        font-weight: 600;
        color: rgba(255, 255, 255, 0.92);
      }
      .light .prose-bullets > li > strong:first-child { color: rgba(15, 23, 19, 0.92); }

      /* Pull quote — for strong opinion / insight breaks. */
      .prose-pullquote {
        font-family: 'Instrument Serif', Georgia, serif;
        font-style: italic;
        font-size: 1.7rem;
        line-height: 1.3;
        color: var(--moss-500);
        border-left: 3px solid var(--moss-500);
        padding: 0.5rem 0 0.5rem 1.5rem;
        margin: 2rem 0;
        max-width: 80%;
      }
      .light .prose-pullquote { color: var(--moss-600); border-left-color: var(--moss-600); }

      /* Inline highlight — for tool names, metrics, claims. */
      .prose-highlight {
        color: var(--moss-500);
        font-weight: 600;
      }
      .light .prose-highlight { color: var(--moss-600); }

      /* Compare grid — two-column "do this / not that". */
      .prose-compare {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin: 1.5rem 0;
      }
      .prose-compare__col {
        padding: 1rem 1.25rem;
        border-radius: 0.5rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(111, 163, 122, 0.15);
      }
      .prose-compare__col h4 {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin: 0 0 0.6rem 0;
        font-weight: 500;
      }
      .prose-compare__col--good h4 { color: var(--moss-500); }
      .prose-compare__col--bad h4 { color: var(--amber-500); }
      .prose-compare__col p, .prose-compare__col li {
        font-size: 0.9rem;
        line-height: 1.55;
        margin-bottom: 0.35rem;
      }
      @media (max-width: 640px) {
        .prose-compare { grid-template-columns: 1fr; }
      }

      /* Section sub-head (h3 within a long section). */
      .prose-subhead {
        font-family: 'Space Grotesk', system-ui, sans-serif;
        font-weight: 600;
        font-size: 1.25rem;
        color: rgba(255, 255, 255, 0.92);
        letter-spacing: -0.01em;
        margin: 2rem 0 0.8rem 0;
        line-height: 1.3;
      }
      .light .prose-subhead { color: rgba(15, 23, 19, 0.92); }

      /* Improve default <p> readability inside .prose-readable wrapper. */
      .prose-readable p {
        margin-bottom: 1.1rem;
        line-height: 1.7;
      }
      .prose-readable p:last-child { margin-bottom: 0; }
      .prose-readable strong {
        font-weight: 600;
        color: rgba(255, 255, 255, 0.95);
      }
      .light .prose-readable strong { color: rgba(15, 23, 19, 0.95); }

      /* ============================================
         PAGE TABLE OF CONTENTS
         Sticky left-side nav for long-form pages.
         Auto-populated by scripts.njk on pages with
         >=4 section[id]>h2 patterns. Hidden <1280px.
         ============================================ */
      .page-toc {
        display: none;
      }
      /* ToC is rendered only on pages with `showToc: true` in frontmatter
         (per-page opt-in introduced 2026-05-11). The page author has asserted
         that this page's main content column is max-w-4xl-narrow, so the
         gutter math (vw-896)/2 needs to clear ~280px on each side. We use
         1280px as the floor — that's the standard xl: breakpoint and gives
         (1280-896)/2 = 192px gutter, tight but enough at 224px ToC width.
         For widescreens the gutter is generous.
         The JS still runs its content-fit check as a belt-and-suspenders
         safeguard: if any section's measured leftmost edge crops into the
         ToC area, the aside hides via data-toc-overflow. */
      @media (min-width: 1280px) {
        .page-toc[data-toc-active] {
          display: block;
          position: fixed;
          top: 50%;
          /* Positioned for max-w-7xl (1280px) content — the widest layout
             used by service pages. Math:
               left = max(16px, (vw - 1280) / 2 - 248px)
               where 248px = 224 (ToC width) + 24 (gap before content edge)
             At 1920px: left = max(16, 72) = 72; toc-right = 296;
                        max-w-7xl content starts at 320 → 24px gap ✓
                        max-w-4xl content starts at 512 → 216px gap ✓
             At 1700px: left = max(16, -38) = 16; toc-right = 240;
                        max-w-7xl content at 210 → overlap → JS hides
                        max-w-4xl content at 402 → 162px gap ✓
             At 1280px: left = 16; toc-right = 240;
                        max-w-4xl content at 192 → overlap → JS hides
                        max-w-3xl content at 256 → 16px gap (tight)
             Widescreens (1828px+) get the ToC on every opt-in page.
             Mid-width (1280-1820px) gets it on narrow pages only.
             Laptops (<1280px) get nothing — CSS breakpoint hides. */
          left: max(16px, calc((100vw - 1280px) / 2 - 256px));
          transform: translateY(-50%);
          width: 224px;
          max-height: 78vh;
          z-index: 25;
          padding-right: 1rem;
          opacity: 1;
          visibility: visible;
          transition: opacity 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
                      transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
                      visibility 0s linear 0s;
        }
        /* Hide while hero or footer is in viewport — the hero extends to
           max-w-7xl (1280px) which is wider than body content and would
           overlap the fixed-position ToC. Footer is full-width so always
           overlaps. The transition delays visibility:hidden until after
           opacity fades and adds a small Y-shift for a cinematic effect. */
        .page-toc[data-toc-active][data-toc-hidden] {
          opacity: 0;
          visibility: hidden;
          transform: translateY(calc(-50% + 8px));
          transition: opacity 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
                      transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1),
                      visibility 0s linear 320ms;
          pointer-events: none;
        }
        /* Hide entirely when measured content edge is too close to the
           ToC. Pages using max-w-6xl/7xl on their main sections won't
           have enough gutter even at 1600px viewports; the JS measures
           leftmost content position and toggles this attribute. */
        .page-toc[data-toc-active][data-toc-overflow] {
          display: none;
        }
      }
      /* Respect reduced-motion: drop the slide-in transform, keep opacity. */
      @media (prefers-reduced-motion: reduce) {
        .page-toc[data-toc-active],
        .page-toc[data-toc-active][data-toc-hidden] {
          transform: translateY(-50%);
          transition: opacity 160ms linear, visibility 0s linear;
        }
      }
      .page-toc__inner {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-height: 80vh;
      }
      .page-toc__time {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.55);
      }
      .page-toc__time-icon {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        opacity: 0.65;
      }
      .page-toc__progress {
        height: 2px;
        width: 100%;
        background: rgba(111, 163, 122, 0.12);
        border-radius: 2px;
        overflow: hidden;
      }
      .page-toc__progress-fill {
        height: 100%;
        width: 0;
        background: var(--moss-500);
        transition: width 60ms linear;
      }
      .page-toc__heading {
        font-family: 'Space Grotesk', system-ui, sans-serif;
        font-weight: 700;
        font-size: 1.05rem;
        margin: 0.25rem 0 0.4rem 0;
        color: rgba(255, 255, 255, 0.92);
        letter-spacing: -0.01em;
      }
      .page-toc__list {
        list-style: none;
        margin: 0;
        padding: 0;
        overflow-y: auto;
        flex: 1 1 auto;
        max-height: 50vh;
        /* Scroll works (wheel/touch/keys) but the bar itself stays invisible. */
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .page-toc__list::-webkit-scrollbar { display: none; width: 0; }
      .page-toc__list li {
        margin: 0;
        padding: 0;
      }
      .page-toc__list a {
        display: block;
        padding: 0.42rem 0 0.42rem 0;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 0.82rem;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.62);
        text-decoration: none;
        border-left: 2px solid transparent;
        padding-left: 0.85rem;
        margin-left: -0.85rem;
        transition: color 160ms ease, border-color 160ms ease, padding-left 160ms ease;
      }
      .page-toc__list a:hover {
        color: var(--moss-500);
        border-left-color: rgba(111, 163, 122, 0.4);
      }
      .page-toc__list a.is-active {
        color: var(--moss-500);
        border-left-color: var(--moss-500);
        font-family: 'Instrument Serif', Georgia, serif;
        font-style: italic;
        font-size: 0.92rem;
        padding-left: 1rem;
      }
      .page-toc__share {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.75rem;
        padding-top: 0.85rem;
        border-top: 1px solid rgba(111, 163, 122, 0.18);
      }
      .page-toc__share a {
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        background: rgba(111, 163, 122, 0.08);
        color: rgba(255, 255, 255, 0.55);
        transition: background 160ms ease, color 160ms ease, transform 160ms ease;
      }
      .page-toc__share a:hover {
        background: rgba(111, 163, 122, 0.18);
        color: var(--moss-500);
        transform: translateY(-1px);
      }
      .page-toc__share svg {
        width: 13px;
        height: 13px;
      }

      /* Light mode adjustments */
      .light .page-toc__time { color: rgba(36, 69, 58, 0.55); }
      .light .page-toc__heading { color: rgba(15, 23, 19, 0.92); }
      .light .page-toc__list a { color: rgba(15, 23, 19, 0.62); }
      .light .page-toc__share a { background: rgba(36, 69, 58, 0.08); color: rgba(15, 23, 19, 0.5); }
      .light .page-toc__share a:hover { background: rgba(36, 69, 58, 0.16); color: var(--moss-600); }
      .light .page-toc__progress { background: rgba(36, 69, 58, 0.12); }

      /* ── Reach-us contact forms (WhatsApp + direct email) — theme-aware ──
         Used in the footer, the homepage liftoff section, and the /book/ page.
         Dark surface on dark theme; cream paper on light theme. */
      .dh-cf-input {
        width: 100%;
        background: rgba(15, 23, 19, 0.45);
        border: 1px solid rgba(111, 163, 122, 0.30);
        border-radius: 10px;
        padding: 10px 12px;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.92);
        outline: none;
        transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
        -webkit-appearance: none; appearance: none;
      }
      .dh-cf-input::placeholder { color: rgba(255, 255, 255, 0.35); }
      .dh-cf-input:focus {
        border-color: #6fa37a;
        box-shadow: 0 0 0 3px rgba(111, 163, 122, 0.18);
      }
      textarea.dh-cf-input { resize: vertical; min-height: 72px; line-height: 1.5; }
      .light .dh-cf-input {
        background: #fbf6ec;
        border-color: rgba(63, 107, 84, 0.30);
        color: rgba(15, 23, 19, 0.92);
      }
      .light .dh-cf-input::placeholder { color: rgba(15, 23, 19, 0.40); }
      .light .dh-cf-input:focus {
        border-color: #3f6b54;
        box-shadow: 0 0 0 3px rgba(111, 163, 122, 0.25);
      }
      /* Budget <select> inside the reach-us forms — custom caret (dh-cf-input sets
         appearance:none, so we draw our own SVG caret to avoid native-paint bugs). */
      .dh-cf-select-wrap { position: relative; display: block; }
      .dh-cf-select-wrap select.dh-cf-input { padding-right: 34px; cursor: pointer; }
      .dh-cf-select-caret {
        position: absolute; right: 13px; top: 50%; width: 12px; height: 8px;
        margin-top: -4px; pointer-events: none; color: #9dc9a7;
      }
      .light .dh-cf-select-caret { color: #3f6b54; }
      .dh-cf-input option { background: #131e1a; color: #f5f0e8; }

      /* ── Homepage hero split CTA — "Email us | Live Chat" ─────────────────
         Two moss halves (no amber) meeting at an INCLINED cream seam (clip-path
         diagonal). The live-chat half carries a travelling light sweep + a
         pulsing "live" dot so it reads as the active, higher-intent action. */
      .dh-split {
        position: relative; flex: 1; display: flex; align-items: stretch;
        height: 2.75rem; border-radius: 0.6rem; overflow: hidden;
        background: #eadfc6; /* shows through the diagonal seam = the inclined divider line */
        box-shadow: 0 10px 24px -12px rgba(18, 40, 28, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
        transition: transform .18s ease, box-shadow .18s ease;
      }
      .dh-split:hover { transform: translateY(-1px); box-shadow: 0 15px 30px -12px rgba(18, 40, 28, 0.72); }
      .dh-split__btn {
        position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center;
        gap: 0.45rem; border: 0; cursor: pointer; color: #fff; overflow: hidden;
        font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 0.875rem;
        letter-spacing: .01em; white-space: nowrap; -webkit-tap-highlight-color: transparent;
      }
      .dh-split__btn svg { width: 1rem; height: 1rem; }
      .dh-split__btn::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0); transition: background .18s ease; }
      .dh-split__btn:hover::after { background: rgba(255, 255, 255, 0.12); }
      .dh-split__btn:active::after { background: rgba(0, 0, 0, 0.10); }
      .dh-split__email {
        background: linear-gradient(135deg, #3f6b54, #274535);
        clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
        padding-right: 20px;
      }
      .dh-split__chat {
        background: linear-gradient(135deg, #56906f, #386550);
        clip-path: polygon(21px 0, 100% 0, 100% 100%, 3px 100%);
        margin-left: -18px; padding-left: 20px;
      }
      .dh-split__chat::before {
        content: ""; position: absolute; inset: 0; z-index: 1;
        background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.30) 50%, transparent 65%);
        transform: translateX(-130%); animation: dh-split-sweep 3.4s ease-in-out infinite;
      }
      .dh-split__label { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.45rem; }
      /* Live Chat rendered alone (site.features.heroEmailButton = false). The chat
         half is normally clipped on its left edge and pulled under the email half
         by a negative margin to make the diagonal seam; with nothing to its left
         both would show as a bitten-off corner, so reset them. */
      .dh-split--solo { background: transparent; }
      .dh-split--solo .dh-split__chat {
        clip-path: none; margin-left: 0; padding-left: 0;
        border-radius: 0.6rem;
      }
      /* Stack proof, now BELOW the hero CTA (owner 2026-08-04). */
      .dh-cta-proof {
        margin-top: 0.6rem;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 0.7rem; letter-spacing: .02em; line-height: 1.5;
        color: var(--fg-muted, rgba(255, 255, 255, 0.72));
      }
      /* Two-line CTA: label on top, response time as bracketed subtext under it.
         The button grows to fit both lines and the label switches to a column, so
         the inherited nowrap and single-line centring do not apply here. */
      .dh-split:has(.dh-split__btn--stacked) { height: auto; }
      .dh-split__btn--stacked { padding-block: 0.55rem; min-height: 3.4rem; }
      .dh-split__btn--stacked .dh-split__label { align-items: center; gap: 0.5rem; }
      /* Centred, not flex-start: the icon and this two-line stack are centred as a
         group inside the button, so left-aligning the text inside the stack left
         the label visibly off-centre against the button it sits in. */
      .dh-split__stack { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
      .dh-split__title { font-size: 0.9375rem; font-weight: 600; }
      .dh-split__sub {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 0.65rem; font-weight: 400; letter-spacing: .01em;
        opacity: 0.82; margin-top: 0.15rem;
      }
      /* The longest label the solo button carries is "Talk to a Developer Now".
         nowrap on .dh-split__btn would overflow the 310px mobile track, so allow
         a slightly tighter type on the narrowest screens instead of clipping. */
      @media (max-width: 400px) {
        .dh-split--solo .dh-split__btn { font-size: 0.8125rem; gap: 0.35rem; }
        .dh-split__title { font-size: 0.8125rem; }
        .dh-split__sub { font-size: 0.6rem; }
      }
      /* Light mode, inside a .glass card (the hero contact form).
         `.light .glass * { color: inherit }` further up forces EVERY descendant of
         a glass card to the card's dark text colour. That is right for copy and
         wrong for a solid moss button sitting inside one: it rendered the CTA
         label near-black on green (measured rgb(15,23,19) on the live service
         pages). These selectors carry one more class than that rule, so they win
         wherever the button appears, glass card or not. */
      .light .glass .dh-split__btn,
      .light .glass .dh-split__btn *,
      .light .glass .dh-split__title,
      .light .glass .dh-split__sub { color: #fff; }
      /* Same rule flattened the proof line to full-strength body text; it is
         supporting copy and should read as such. */
      .light .glass .dh-cta-proof { color: rgba(15, 23, 19, 0.62); }

      /* Arrow on the "Talk to a Developer Now" buttons (owner, 2026-08-21): the
         button performs an action rather than reading as a label, and the arrow
         says so. A straight arrow, not the diagonal one the site uses on links:
         the diagonal conventionally means "this navigates somewhere", and this
         opens a panel on the page you are already on. It nudges right on hover,
         which is the affordance doing the work. */
      .dh-cta-arrow { width: 1rem; height: 1rem; flex-shrink: 0; transition: transform .18s ease; }
      button:hover > .dh-cta-arrow,
      button:hover .dh-split__label > .dh-cta-arrow,
      button:hover .dh-cta-arrow { transform: translateX(3px); }
      @media (prefers-reduced-motion: reduce) { .dh-cta-arrow { transition: none; } button:hover .dh-cta-arrow { transform: none; } }

      @keyframes dh-split-sweep { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
      .dh-live-dot {
        width: 7px; height: 7px; border-radius: 50%; background: #8ef0b0; flex-shrink: 0;
        box-shadow: 0 0 0 0 rgba(142, 240, 176, 0.75); animation: dh-live-pulse 1.9s infinite;
      }
      @keyframes dh-live-pulse {
        0% { box-shadow: 0 0 0 0 rgba(142, 240, 176, 0.6); }
        70% { box-shadow: 0 0 0 7px rgba(142, 240, 176, 0); }
        100% { box-shadow: 0 0 0 0 rgba(142, 240, 176, 0); }
      }
      @media (prefers-reduced-motion: reduce) {
        .dh-split__chat::before { animation: none; opacity: 0; }
        .dh-live-dot { animation: none; }
        .dh-split:hover { transform: none; }
      }
      .light .dh-cf-input option { background: #fbf6ec; color: #0f1713; }