/* ============================================================================

 * 3DPE Brand Preview Stylesheet · single source of truth for all preview pages

 * ----------------------------------------------------------------------------

 * Locked 2026-04-27. Derived strictly from:

 *   - brand-colour-palette.md   (Stage 7.1, locked 2026-04-21)

 *   - brand-font-pairings.md    (Stage 7.1, locked 2026-04-21)

 *   - design-system.md          (Stage 7.2, locked 2026-04-25)

 *   - accessibility-conventions.md (Stage 5.4, locked 2026-04-21)

 *   - wp-child-theme/design-tokens.css (Stage 7.2, locked 2026-04-22)

 *

 * NO invented values. Every colour, size, radius, and component spec traces

 * back to one of the locked sources above.

 *

 * FORBIDDEN PATTERNS · do not add (these violate the locked brand):

 *   · Gradient borders or border-image on any default card variant

 *   · nth-child colour rotation on chip / tile grids

 *   · White text on mint (1.6:1 contrast — catastrophic AA fail)

 *   · More than one .cta.secondary per primary CTA in a section

 *   · Decorative top-borders on default cards (only .card.highlight earns one)

 *   · Off-scale spacing / radius / z-index values

 *   · Em-dashes anywhere

 *

 * Per-page polish CSS is forbidden. If a page needs a one-off look, it goes

 * through this file or it does not ship. Enforcement: tests/brand-rules.spec.ts.

 * ============================================================================ */



/* ============================================================

 * 1. TOKEN LAYER — extends design-tokens.css with full colour palette

 *    (design-tokens.css ships only RGB components for shadow alpha)

 * ============================================================ */

:root {

  /* --- Purple --- (palette doc table) */

  --purple-50:  #f6f1fa;

  --purple-100: #ece0f3;

  --purple-200: #d9c1e7;

  --purple-300: #c3a1d8;

  --purple-400: #ab7fc8;

  --purple-500: #8f5eab;  /* Brand primary — logo match */

  --purple-600: #7a4b95;

  --purple-700: #6a4489;  /* Body links on white (5.8:1 AA) */

  --purple-800: #523569;

  --purple-900: #3a2549;  /* Footer, deep emphasis */



  /* --- Mint --- (palette doc table) */

  --mint-50:  #ebfdf8;

  --mint-100: #c8f9ea;

  --mint-200: #8ef2d5;

  --mint-300: #4cecbe;

  --mint-400: #0ee7bf;  /* Brand accent — primary CTA fill */

  --mint-500: #0ac9a5;

  --mint-600: #08a387;

  --mint-700: #067d68;

  --mint-800: #045a4c;

  --mint-900: #033d34;



  /* --- Ink + Paper --- (palette doc table) */

  --ink:      #0c111a;

  --ink-800:  #1a2130;

  --ink-700:  #2d3648;

  --ink-600:  #4a5568;

  --ink-500:  #6b7280;

  --ink-400:  #9ca3af;

  --ink-300:  #cbd5e0;

  --ink-200:  #e2e8f0;

  --ink-100:  #edf2f7;

  --ink-50:   #f7fafc;

  --paper:        #fafafa;  /* Page background */

  --paper-white:  #ffffff;  /* Card backgrounds */



  /* --- Semantic colours --- (palette doc semantic table) */

  --success-500: #10b981;

  --success-700: #047857;

  --warning-500: #f59e0b;

  --warning-700: #b45309;

  --error-500:   #dc2626;

  --error-700:   #991b1b;

  --info-500:    #2563eb;

  --info-700:    #1d4ed8;



  /* --- Typography stacks --- (brand-font-pairings.md locked CSS stack) */

  --font-display: 'Archivo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-body:    'Inter',   system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

}



/* ============================================================

 * 1b. ACCESSIBILITY UTILITIES — skip-link, visually-hidden

 * ============================================================ */

.skip-link {

  position: absolute;

  top: -100px;

  left: 16px;

  z-index: 1000;

  padding: 12px 18px;

  background: var(--purple-900);

  color: var(--paper);

  text-decoration: none;

  font-family: var(--font-body);

  font-size: 14px;

  font-weight: 600;

  border-radius: 6px;

  box-shadow: 0 4px 16px rgba(58, 37, 73, 0.32);

  transition: top 200ms ease;

}

.skip-link:focus {

  top: 16px;

  outline: 2px solid var(--mint-400);

  outline-offset: 2px;

}

.visually-hidden {

  position: absolute;

  width: 1px; height: 1px;

  padding: 0; margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



/* ============================================================

 * 2. RESET + BASE

 * ============================================================ */

* {

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

html { scroll-behavior: smooth; }

body {

  background: var(--paper);

  color: var(--ink);

  font-family: var(--font-body);

  font-size: 16px;     /* design-system §2 body */

  line-height: 1.6;

}



/* ============================================================

 * 3. TYPOGRAPHY — design-system.md §2 + brand-font-pairings.md

 * ============================================================ */

h1, h2, h3, .hero-h1, .cta-band h3 {

  font-family: var(--font-display);

  font-weight: 700;

  letter-spacing: -0.025em;

  color: var(--ink);

}

h4, h5, h6 {

  font-family: var(--font-body);

  color: var(--ink);

}

.hero-h1 {

  font-weight: 800;

  letter-spacing: -0.04em;

  line-height: 1.05;

  font-size: clamp(2.5rem, 5vw, 4rem);  /* mobile 40px → desktop 64px display-xl */

  color: var(--ink);

}

h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); line-height: 1.15; font-weight: 700; }

h2 { font-size: clamp(1.5rem,  3vw,   2rem);   line-height: 1.2;  font-weight: 700; }

h3 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.25; font-weight: 700; }

h4 { font-size: 1.25rem; line-height: 1.3;  font-weight: 600; }

h5 { font-size: 1.125rem; line-height: 1.4; font-weight: 600; }

h6 { font-size: 1rem;     line-height: 1.5; font-weight: 600; }



.hero-h1 .accent {

  background: linear-gradient(180deg, transparent 60%, rgba(14, 231, 191, 0.32) 60%);

  border-radius: 0;

  padding: 0 4px;

}



/* Eyebrow — design-system §2 (Inter 11px 600 uppercase 0.05em) +

   palette purple pill treatment (sanctioned in brand-colour-palette.md

   section backgrounds — purple-50 with purple-100 border) */

.eyebrow, .hero-eyebrow {

  font-family: var(--font-mono);   /* JetBrains Mono — design-system §2 code uses mono for technical labels */

  font-size: 11px;

  font-weight: 500;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--purple-700);

  background: var(--purple-50);

  border: 1px solid var(--purple-100);

  padding: 6px 12px;

  border-radius: 999px;

  display: inline-block;

}



/* ============================================================

 * 4. LINKS — design-system §12, palette §"Links in body copy"

 * ============================================================ */

a {

  color: var(--purple-700);

  text-decoration: underline;

  text-underline-offset: 2px;

  text-decoration-thickness: 1px;

  transition: color 150ms ease, text-decoration-thickness 100ms ease;

}

a:hover { color: var(--purple-800); text-decoration-thickness: 2px; }

a:visited { color: var(--purple-900); }

a:focus-visible {

  outline: 2px solid var(--purple-500);

  outline-offset: 2px;

  border-radius: 2px;

}



/* ============================================================

 * 5. BUTTONS — design-system §5

 * ============================================================ */

.cta {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;                          /* space-2 */

  font-family: var(--font-body);

  font-weight: 600;

  font-size: 16px;

  line-height: 1;

  padding: 14px 24px;                /* hits 44px min-height with line-height 1 */

  min-height: 44px;                  /* WCAG mobile tap target */

  min-width: 88px;

  /* border-box: the mobile rule `.hero-ctas .cta { width:100% }` (line

     ~9347) + the default content-box made each button 100% + 48px

     padding + 4px border = ~52px WIDER than its container, overflowing

     the viewport right edge and getting clipped by an overflow-hidden

     ancestor → buttons looked "cropped" on the right. 2026-05-18. */

  box-sizing: border-box;

  /* Brand CTA shape = full pill, matching the nav .cta-slot (9999px).

     Was `var(--radius-1, 4px)` but --radius-1 is undefined nowhere in

     the system, so every .cta fell back to a near-sharp 4px and read

     as a flat cut-out block on mobile. 2026-05-18. */

  border-radius: 9999px;

  border: 2px solid transparent;

  cursor: pointer;

  text-decoration: none;

  transition: background 150ms ease, transform 100ms ease, box-shadow 150ms ease, border-color 150ms ease;

}



/* Primary — mint fill + ink text (14.2:1 AAA) */

.cta.primary {

  background: var(--mint-400);

  color: var(--ink);

  border-color: var(--mint-400);

  box-shadow: 0 8px 24px rgba(14, 231, 191, 0.18), 0 2px 8px rgba(14, 231, 191, 0.10);

}

.cta.primary::after { content: '→'; transition: transform 200ms ease; }

.cta.primary:hover {

  background: var(--mint-500);

  border-color: var(--mint-500);

  transform: translate(var(--magnet-x, 0), calc(-2px + var(--magnet-y, 0px)));

  box-shadow: 0 12px 32px rgba(14, 231, 191, 0.28);

}

.cta.primary:hover::after { transform: translateX(4px); }

.cta.primary:active {

  background: var(--mint-600);

  transform: translateY(0);

}

.cta.primary:focus-visible {

  outline: 2px solid var(--mint-600);

  outline-offset: 2px;

}



/* Secondary — purple ghost. NEVER more than one per primary in a section.

   Light-bg default. Dark-context variants override below for hero + cta-band. */

.cta.secondary {

  background: transparent;

  color: var(--purple-700);

  border-color: var(--purple-500);

}

.cta.secondary:hover { background: var(--purple-50);  border-color: var(--purple-700); }

.cta.secondary:active { background: var(--purple-100); }

.cta.secondary:focus-visible { outline: 2px solid var(--purple-500); outline-offset: 2px; }



/* Dark-context override · applies wherever the secondary sits on a dark

   surface (hero overlay + closing cta-band). Paper text + paper-40% border

   both pass AA contrast against purple-900. */

.sec-02 .cta.secondary,

.cta-band .cta.secondary,

.cta-inner .cta.secondary {

  color: var(--paper);

  border-color: rgba(250, 250, 250, 0.5);

  background: transparent;

}

.sec-02 .cta.secondary:hover,

.cta-band .cta.secondary:hover,

.cta-inner .cta.secondary:hover {

  background: rgba(250, 250, 250, 0.10);

  border-color: var(--paper);

  color: var(--paper);

}



/* Tertiary — text-only with persistent underline · WCAG 2.5.5 min-height 40px tap target */

.cta.tertiary {

  background: transparent;

  color: var(--purple-700);

  border: none;

  padding: 10px 0;

  min-height: 40px;

  display: inline-flex;

  align-items: center;

  text-decoration: underline;

  text-underline-offset: 3px;

  box-shadow: none;

}

.cta.tertiary:hover { color: var(--purple-800); text-decoration-thickness: 2px; }



/* ============================================================

 * 6. CARDS — design-system §7

 * ============================================================ */

.card,

.case-card,

.why-card,

.faq-item,

.logo-box {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 16px;               /* radius-4, feature-card scale */

  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;

}

.card:hover,

.why-card:hover,

.faq-item:hover {

  border-color: var(--purple-300);

  box-shadow: 0 1px 2px rgba(58, 37, 73, 0.04), 0 1px 1px rgba(58, 37, 73, 0.03);

  transform: translateY(-2px);

}

/* Case cards · scale + slight tilt on hover for a playful pop · 2026-05-08

 * Specificity bumped above `.stagger.visible > *` (0,2,0) which sets a

 * cascade-later transform: translateY(0) and would otherwise win. */

.case-card {

  transition: border-color 220ms ease, box-shadow 220ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform;

  position: relative;

}

.case-row .case-card:hover,

.case-row.stagger.visible > .case-card:hover {

  border-color: var(--purple-300);

  box-shadow: 0 18px 38px rgba(42, 26, 68, 0.18), 0 6px 14px rgba(42, 26, 68, 0.10);

  transform: translateY(-6px) scale(1.10) rotate(-1.5deg);

  z-index: 3;

}

.case-row .case-card:nth-child(even):hover,

.case-row.stagger.visible > .case-card:nth-child(even):hover {

  transform: translateY(-6px) scale(1.10) rotate(1.5deg);

}

@media (prefers-reduced-motion: reduce) {

  .case-card,

  .case-card:hover { transition: none; transform: none !important; }

}



/* Highlight — the ONE sanctioned decorative-border card variant */

.card.highlight {

  background: var(--purple-50);

  border-left: 4px solid var(--purple-500);

  border-radius: 4px;                /* radius-1, per design-system §7.3 */

  padding: 16px 20px;

}



/* ============================================================

 * 6c. SITE HEADER — body-level sticky wrapper holding sec-00 + nav-pill.

 *    Sits as direct body child so position:sticky scopes to the entire

 *    page · works on body-level full-bleed pages (hero-dark, perfect-for,

 *    not-for, cta-close) where the legacy in-container sticky pattern

 *    would unstick the moment you scrolled past the first .container.

 * ============================================================ */

.site-header {

  position: sticky;

  top: 0;

  z-index: 50;

  padding: 12px 0 14px;

  background: transparent;

}



/* ============================================================

 * 7. NAV PILL — purple-900 dark pill (the original brand spec, restored).

 *    Single consistent treatment in every scroll state · NEVER flips colour.

 *    Brand-coloured logo (mint + purple) reads on the dark bg via its own

 *    mint highlights · paper-coloured links + mint CTA slot.

 * ============================================================ */

.nav-pill {

  background: linear-gradient(180deg, rgba(58, 37, 73, 0.92) 0%, rgba(12, 17, 26, 0.94) 100%);

  -webkit-backdrop-filter: blur(14px) saturate(160%);

  backdrop-filter: blur(14px) saturate(160%);

  color: var(--paper);

  padding: 12px 16px 12px 24px;

  border-radius: 9999px;

  border: 1px solid rgba(255, 255, 255, 0.16);

  box-shadow:

    0 18px 48px rgba(0, 0, 0, 0.45),

    0 4px 12px rgba(0, 0, 0, 0.25),

    0 0 0 1px rgba(14, 231, 191, 0.06),

    inset 0 1px 0 rgba(255, 255, 255, 0.10);

  transition: box-shadow 250ms ease, transform 250ms ease, border-color 250ms ease;

}

.nav-pill .logo {

  width: 36px; height: 36px;

  border-radius: 8px;

  display: inline-flex; align-items: center; justify-content: center;

  text-decoration: none;

  flex-shrink: 0;

  background: transparent;

  transition: transform 200ms ease;

}

.nav-pill .logo:hover { transform: scale(1.06); }

.nav-pill .logo img {

  width: 100%; height: 100%;

  object-fit: contain;

  display: block;

  /* No filter · the brand logo renders in its real brand colours.

     Mint highlights ensure readability on purple-900. */

}

.nav-pill .links {

  display: flex;

  gap: 8px;

  align-items: center;

  font-size: 13px;

  position: relative;

}

.nav-pill .links .nav-item {

  position: relative;

}

.nav-pill .links .nav-link {

  color: rgba(250, 250, 250, 0.85);

  position: relative;

  padding: 8px 14px;

  font-weight: 500;

  text-decoration: none;

  border-radius: 9999px;

  display: inline-flex; align-items: center; gap: 4px;

  transition: color 200ms ease, background 200ms ease;

}

.nav-pill .links .nav-link .nav-caret {

  font-size: 9px;

  opacity: 0.65;

  transition: transform 200ms ease;

}

.nav-pill .links .nav-link:hover,

.nav-pill .links .nav-item:hover .nav-link,

.nav-pill .links .nav-item:focus-within .nav-link {

  color: var(--paper);

  background: rgba(255, 255, 255, 0.08);

}

.nav-pill .links .nav-item:hover .nav-link .nav-caret,

.nav-pill .links .nav-item:focus-within .nav-link .nav-caret { transform: rotate(180deg); }



/* ===== Mega-menu dropdown ===== */

.nav-dropdown {

  position: absolute;

  top: calc(100% + 10px);

  /* Default: anchor LEFT edge to trigger (dropdown opens to the right).

     Per-dropdown overrides below for centred / right-anchored variants. */

  left: 0;

  right: auto;

  transform: translate(0, -6px);

  min-width: 560px;

  max-width: min(720px, 90vw);

  padding: 14px;

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  box-shadow:

    0 18px 44px rgba(58, 37, 73, 0.16),

    0 3px 8px rgba(58, 37, 73, 0.06);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;

  z-index: 200;

}

/* Hover-shown state · transform also drops the -6px so the dropdown slides into place */

.nav-pill .links .nav-item:hover .nav-dropdown,

.nav-pill .links .nav-item:focus-within .nav-dropdown {

  transform: translate(0, 0);

}

.nav-dropdown-narrow {

  min-width: 340px;

  max-width: 380px;

}

/* Case Studies dropdown · 2-col case-grid + bar · sized to fit content */

.nav-item[data-dropdown="case-studies"] .nav-dropdown {

  min-width: 480px;

  max-width: 540px;

}

/* Materials anchored RIGHT with a NEGATIVE right offset so the

   dropdown's right edge sits exactly under the About us trigger right

   edge (measured at 1280px: Materials right 765, About us right 884,

   gap = 119px). Position-based shift keeps transform free for the

   open-state animation. */

.nav-item[data-dropdown="materials"] .nav-dropdown {

  left: auto;

  right: -119px;

  transform: translate(0, -6px);

}

.nav-item[data-dropdown="materials"]:hover .nav-dropdown,

.nav-item[data-dropdown="materials"]:focus-within .nav-dropdown {

  transform: translate(0, 0);

}

/* About us is the rightmost dropdown · anchor RIGHT edge to trigger

   so it doesn't extend off-screen to the right */

.nav-item[data-dropdown="about"] .nav-dropdown {

  left: auto;

  right: 0;

  transform: translate(0, -6px);

}

.nav-item[data-dropdown="about"]:hover .nav-dropdown,

.nav-item[data-dropdown="about"]:focus-within .nav-dropdown {

  transform: translate(0, 0);

}

/* Hover or keyboard focus on the parent nav-item opens the dropdown.

   The transform stays at the per-dropdown anchored value (left/centre/right);

   only opacity + visibility flip on hover. Per-dropdown transform overrides

   above set the actual translate values. */

.nav-pill .links .nav-item:hover .nav-dropdown,

.nav-pill .links .nav-item:focus-within .nav-dropdown {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}

/* Hover bridge · invisible padding above the dropdown so the cursor doesn't

   leave the hover area between the trigger and the dropdown panel */

.nav-dropdown::before {

  content: '';

  position: absolute;

  top: -14px; left: 0; right: 0;

  height: 14px;

  background: transparent;

}

.nav-dropdown-grid {

  display: grid;

  gap: 8px;

}

.services-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }

.cases-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

/* Materials dropdown · 3 grouped columns with subtle category tints

   (composites / nylons / commodity) · sanctioned palette colours

   (purple-50, mint-50, ink-50) so each category reads visually distinct

   without breaking the brand. */

.materials-cols { grid-template-columns: repeat(3, 1fr); gap: 8px; }

.materials-cols .nav-col {

  padding: 10px 10px 12px;

  border-radius: 8px;

  border: 1px solid var(--ink-100);

  transition: border-color 200ms ease;

}

.materials-cols .nav-col:nth-child(1) {

  background: var(--purple-50);

  border-color: var(--purple-100);

}

.materials-cols .nav-col:nth-child(2) {

  background: var(--mint-50);

  border-color: rgba(14, 231, 191, 0.18);

}

.materials-cols .nav-col:nth-child(3) {

  background: var(--ink-50);

  border-color: var(--ink-100);

}

/* Materials columns · per-column accent color so the 3 categories are

   visually distinct at a glance. Eyebrow + bullet + bottom border all

   take the column's accent. */

.materials-cols .nav-col-head {

  padding-bottom: 8px;

  margin-bottom: 6px;

}

.materials-cols .nav-col:nth-child(1) .nav-col-head { border-bottom-color: var(--purple-500); color: var(--purple-700); }

.materials-cols .nav-col:nth-child(1) .nav-col-head::before { background: var(--purple-500); }

.materials-cols .nav-col:nth-child(2) .nav-col-head { border-bottom-color: var(--mint-500, #0a9477); color: var(--mint-700, #067d68); }

.materials-cols .nav-col:nth-child(2) .nav-col-head::before { background: var(--mint-500, #0a9477); }

.materials-cols .nav-col:nth-child(3) .nav-col-head { border-bottom-color: var(--ink-700); color: var(--ink-800, #1c2230); }

.materials-cols .nav-col:nth-child(3) .nav-col-head::before { background: var(--ink-700); }

/* Row hover slightly different per column to keep the tint readable */

.materials-cols .nav-col:nth-child(1) .nav-row:hover { background: var(--purple-100); }

.materials-cols .nav-col:nth-child(2) .nav-row:hover { background: rgba(14, 231, 191, 0.14); color: var(--mint-700); }

.materials-cols .nav-col:nth-child(3) .nav-row:hover { background: var(--ink-100); color: var(--ink); }

/* About dropdown · 2 standard columns (3DPE links + Resources) */

.about-cols { grid-template-columns: repeat(2, 1fr); gap: 20px; }



/* Featured items inside About dropdown · bigger, bolder, mint accent

   (per James 2026-04-27 + Modal screenshot reference). */

.nav-feature-col {

  display: flex;

  flex-direction: column;

  gap: 14px;

}

.nav-feature {

  display: block;

  padding: 16px 18px;

  border-radius: 10px;

  border: 1px solid var(--ink-200);

  background: linear-gradient(180deg, var(--ink-50) 0%, var(--paper-white) 100%);

  text-decoration: none;

  color: var(--ink);

  position: relative;

  overflow: hidden;

  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);

}

.nav-feature::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--purple-500) 0%, var(--mint-400) 100%);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);

}

.nav-feature:hover {

  border-color: var(--purple-300);

  background: linear-gradient(180deg, var(--purple-50) 0%, var(--paper-white) 100%);

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(143, 94, 171, 0.12);

}

.nav-feature:hover::before { transform: scaleX(1); }

.nav-feature-title {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 16px;

  color: var(--ink);

  letter-spacing: -0.01em;

  margin-bottom: 4px;

}

.nav-feature:hover .nav-feature-title { color: var(--purple-700); }

.nav-feature-sub {

  font-size: 12px;

  line-height: 1.4;

  color: var(--ink-600);

}



/* Service tile · icon mark + title + sub-line · COMPACT */

.nav-tile {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  padding: 8px 10px;

  border-radius: 8px;

  text-decoration: none;

  color: var(--ink);

  transition: background 200ms ease, transform 200ms ease;

}

.nav-tile:hover {

  background: var(--purple-50);

  transform: translateY(-1px);

}

.nav-tile-mark {

  flex-shrink: 0;

  width: 26px; height: 26px;

  display: inline-flex; align-items: center; justify-content: center;

  border-radius: 6px;

  background: linear-gradient(135deg, var(--purple-500) 0%, var(--mint-400) 100%);

  color: var(--paper);

  font-size: 13px;

  font-family: var(--font-display);

  font-weight: 800;

}

.nav-tile-title {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 13px;

  color: var(--ink);

  letter-spacing: -0.005em;

  line-height: 1.25;

  margin-bottom: 1px;

}

.nav-tile-sub {

  font-size: 11px;

  line-height: 1.35;

  color: var(--ink-600);

}



/* Materials / About column lists · COMPACT */

.nav-col-head {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: var(--ink-800, #1c2230);

  padding: 0 0 8px;

  margin-bottom: 6px;

  border-bottom: 2px solid var(--ink-200);

  display: flex;

  align-items: center;

  gap: 8px;

}

.nav-col-head::before {

  content: '';

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--ink-400);

  flex-shrink: 0;

}

.nav-row {

  display: block;

  padding: 5px 8px;

  margin: 0 -8px;

  font-size: 12.5px;

  font-weight: 500;

  color: var(--ink-700);

  border-radius: 5px;

  text-decoration: none;

  line-height: 1.3;

  transition: background 150ms ease, color 150ms ease;

}

.nav-row:hover {

  background: var(--purple-50);

  color: var(--purple-700);

}



/* Case study tile · COMPACT */

.nav-case {

  display: block;

  padding: 10px 12px;

  border-radius: 8px;

  text-decoration: none;

  color: var(--ink);

  transition: background 200ms ease, transform 200ms ease;

  border: 1px solid transparent;

}

.nav-case:hover {

  background: var(--purple-50);

  border-color: var(--purple-100);

  transform: translateY(-1px);

}

.nav-case-tag {

  display: inline-block;

  font-family: var(--font-mono);

  font-size: 9px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--mint-600);

  background: rgba(14, 231, 191, 0.10);

  padding: 2px 6px;

  border-radius: 999px;

  margin-bottom: 5px;

}

.nav-case-title {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 13px;

  color: var(--ink);

  margin-bottom: 2px;

  line-height: 1.25;

}

.nav-case-meta {

  font-size: 11px;

  color: var(--ink-600);

  line-height: 1.35;

}



/* Dropdown footer · COMPACT */

.nav-dropdown-foot {

  margin-top: 10px;

  padding-top: 10px;

  border-top: 1px solid var(--ink-100);

  display: flex;

  justify-content: flex-end;

}

.nav-foot-link {

  font-family: var(--font-body);

  font-size: 12px;

  font-weight: 600;

  color: var(--purple-700);

  text-decoration: none;

  padding: 5px 10px;

  border-radius: 5px;

  transition: background 150ms ease, color 150ms ease;

}

.nav-foot-link:hover {

  background: var(--purple-50);

  color: var(--purple-800);

}



/* Big "View all" bar · used in Case Studies dropdown · full-width

   prominent CTA replacing the small footer link, per James 2026-04-27. */

.nav-foot-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-top: 10px;

  padding: 12px 18px;

  background: linear-gradient(135deg, var(--purple-700) 0%, var(--purple-900) 100%);

  color: var(--paper);

  border-radius: 10px;

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 13px;

  letter-spacing: -0.005em;

  text-decoration: none;

  text-transform: none;

  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);

  box-shadow: 0 4px 12px rgba(58, 37, 73, 0.18);

}

.nav-foot-bar:hover {

  background: linear-gradient(135deg, var(--purple-800) 0%, var(--ink) 100%);

  transform: translateY(-1px);

  box-shadow: 0 8px 20px rgba(58, 37, 73, 0.28);

  color: var(--paper);

}

.nav-foot-bar-arrow {

  font-size: 16px;

  color: var(--mint-300);

  transition: transform 200ms ease;

}

.nav-foot-bar:hover .nav-foot-bar-arrow {

  transform: translateX(3px);

  color: var(--mint-400);

}



/* Mobile · collapse to single-column accordion */

@media (max-width: 900px) {

  .nav-pill .links { display: none; }

  /* (mobile menu trigger to be added in a future pass) */

}

/* Right-side actions cluster · Contact link + Get a quote pill */

.nav-pill .nav-actions {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  flex-shrink: 0;

}

.nav-pill .nav-contact-link {

  color: rgba(250, 250, 250, 0.85);

  font-family: var(--font-body);

  font-weight: 500;

  font-size: 13px;

  text-decoration: none;

  padding: 8px 14px;

  border-radius: 9999px;

  transition: color 200ms ease, background 200ms ease;

}

.nav-pill .nav-contact-link:hover {

  color: var(--paper);

  background: rgba(255, 255, 255, 0.08);

}



/* Phone CTA in nav · paper-on-purple text + mint icon · 2026-05-08

 * Explicit :link and :visited so Chrome's default visited-purple doesn't muddy the tel: link. */

.nav-pill .nav-phone,

.nav-pill .nav-phone:link,

.nav-pill .nav-phone:visited {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--paper-white) !important;

  font-family: var(--font-body);

  font-weight: 600;

  font-size: 13px;

  text-decoration: none;

  padding: 9px 16px;

  border-radius: 9999px;

  border: 1.5px solid var(--mint-400);

  background: rgba(14, 231, 191, 0.06);

  transition: color 200ms ease, background 200ms ease, border-color 200ms ease, transform 200ms ease;

  white-space: nowrap;

}

.nav-pill .nav-phone svg {

  flex-shrink: 0;

  color: var(--mint-300, #14e7bf);

}

.nav-pill .nav-phone:hover,

.nav-pill .nav-phone:focus-visible {

  color: var(--ink) !important;

  background: var(--mint-400);

  border-color: var(--mint-400);

  transform: translateY(-1px);

}

.nav-pill .nav-phone:hover svg,

.nav-pill .nav-phone:focus-visible svg {

  color: var(--ink);

}

@media (max-width: 1100px) {

  .nav-pill .nav-phone span { display: none; }

  .nav-pill .nav-phone { padding: 8px 10px; }

}

@media (max-width: 880px) {

  .nav-pill .nav-phone { display: none; }

}



/* Phone CTA in hero · ghost variant · 2026-05-08 */

.cta.ghost.hero-phone-cta {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--paper-white);

  background: transparent;

  border: 1px solid rgba(250, 250, 250, 0.30);

  padding: 11px 18px;

  border-radius: 9999px;

  font-weight: 500;

  text-decoration: none;

  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;

}

.cta.ghost.hero-phone-cta:hover,

.cta.ghost.hero-phone-cta:focus-visible {

  background: rgba(14, 231, 191, 0.12);

  border-color: var(--mint-400);

  color: var(--mint-300, #14e7bf);

}

.cta.ghost.hero-phone-cta svg { flex-shrink: 0; }



/* Legal NAP block · operating address line above the legal-reg · 2026-05-08 */

.legal-nap {

  font-size: 14px;

  margin: 0 0 4px;

  color: var(--paper-white);

  line-height: 1.55;

}

.legal-nap a {

  color: var(--mint-300, #14e7bf);

  text-decoration: none;

}

.legal-nap a:hover { text-decoration: underline; }

.nav-pill .cta-slot {

  background: var(--mint-400);

  color: var(--ink);

  border-radius: 9999px;

  padding: 10px 22px;

  font-weight: 600;

  font-size: 13px;

  text-decoration: none;

  display: inline-flex; align-items: center; gap: 6px;

  box-shadow: 0 4px 12px rgba(14, 231, 191, 0.25);

  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);

}

.nav-pill .cta-slot:hover {

  background: var(--mint-500);

  transform: translateY(-1px);

  box-shadow: 0 8px 24px rgba(14, 231, 191, 0.32);

}



/* ============================================================

 * 7b. LAYOUT PRIMITIVES — ported from the locked wireframe

 *     The wireframe's inline <style> block defined every grid /

 *     flex layout. Without these, sections collapse to single-

 *     column flow. Brand colours substituted for wireframe greys.

 * ============================================================ */



.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

.page-wrap { padding: 0 0 120px; }



main, section, .wf {

  display: block;

}



/* ----- Sec 00 announcement bar -----

   Sits above the hero · transparent so the hero gradient (pulled up via

   sec-02 margin-top: -120) shows through, giving an unbroken dark top

   region instead of a white strip. */

.sec-00 {

  padding: 10px 20px;

  /* a11y: was `transparent` — the white+mint-300 text was designed for a

     dark backdrop but the bar actually sits on the near-white page

     (#fafafa), giving 1.4:1. A solid dark pill makes every bit of bar

     text high-contrast (mint-300 on --ink ≈ 9:1) and reads as the

     standard announcement-banner idiom. */

  background: var(--ink);

  border: none;

  border-radius: 4px;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 13px;

  gap: 12px;

  margin-bottom: 10px;

  position: relative;

  z-index: 2;

  color: rgba(250, 250, 250, 0.92);

  font-family: var(--font-mono);

  font-size: 12px;

  letter-spacing: 0.04em;

}

.sec-00 strong { color: var(--mint-300); font-weight: 600; }

/* a11y: explicit link colour on the dark pill (global <a> purple would

   be ~2:1 on --ink). mint-300 on --ink ≈ 9:1; underline keeps the

   link affordance without relying on colour alone. */

.sec-00 a,

.sec-00-link {

  color: var(--mint-300);

  text-decoration: underline;

  text-underline-offset: 2px;

}



/* ----- Sec 01 sticky pill nav (homepage variant) -----

   Sticky needs to be on the OUTERMOST element that's a child of <main>.

   The wireframe nests the sticky on an inner div which traps it inside

   sec-01 (~120px tall) → nav only sticks for that distance.

   Fix: make .sec-01 itself sticky, neutralise the inner sticky div. */

.sec-01 {

  position: sticky;

  top: 0;

  z-index: 100;

  background: transparent;

  padding: 16px 0;

  margin-bottom: 24px;

  /* 2026-05-05 · NO padding/height transition · padding-change on a sticky

   * element shifts content below by the height delta, which can re-cross the

   * scroll threshold and visually reads as "the nav vibrates". Kept the

   * background transition for the frosted-glass scrolled state below. */

  transition: background-color 250ms cubic-bezier(0.16, 1, 0.3, 1),

              backdrop-filter 250ms cubic-bezier(0.16, 1, 0.3, 1);

}

/* Scrolled state · transparent wrapper · the .nav-pill itself provides the

 * chrome (purple bg + shadow) so the wrapper stays clear. This avoids the

 * white horizontal strip across the top of the hero (and any other dark

 * section) that a paper-white frosted-glass wrapper bg would create over

 * a dark photo · 2026-05-06. */

.sec-01.scrolled {

  background-color: transparent;

  backdrop-filter: none;

  -webkit-backdrop-filter: none;

}

/* Neutralise the wireframe's inner sticky wrapper so it doesn't re-trap */

.sec-01 > div[style*="sticky"] {

  position: static !important;

  top: auto !important;

  padding: 0 !important;

  z-index: auto !important;

}

.sec-01.scrolled .nav-pill {

  box-shadow: 0 6px 28px rgba(58, 37, 73, 0.16), 0 1px 2px rgba(58, 37, 73, 0.08);

}

.nav-pill {

  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: center;

  gap: 24px;

  max-width: 1180px;

  margin: 0 auto;

}

.nav-pill > .logo { grid-column: 1; justify-self: start; }

.nav-pill > .links { grid-column: 2; justify-self: center; display: flex; gap: 24px; font-size: 13px; }

.nav-pill > .nav-actions {

  grid-column: 3;

  justify-self: end;

  display: flex;

  align-items: center;

  gap: 8px;

}



/* ----- Sec 02 HERO · FULL-BLEED across the viewport (James 2026-04-27) -----

   Hero image goes edge-to-edge. Implementation:

     - .sec-02 breaks out of its .container parent via negative margins +

       100vw width (full-bleed trick). Inner copy block re-centres at

       container max-width so text alignment matches the rest of the page.

     - .hero-visual is position: absolute; inset: 0 → fills the full bleed.

     - Inner copy sits at z-index: 2, max-width 720px, paper text. */

.sec-02 {

  position: relative;

  min-height: 700px;

  padding: 180px 0 100px;          /* top padding pushes copy past the sticky nav + announcement bar */

  border-radius: 0;

  overflow: hidden;

  margin-top: -200px;              /* pull hero up to cover BOTH announcement bar AND sticky nav */

  margin-right: calc(50% - 50vw);

  margin-bottom: 24px;

  margin-left: calc(50% - 50vw);

  width: 100vw;

  max-width: 100vw;

  display: flex;

  align-items: center;

  isolation: isolate;

}

.sec-02 > div:first-child {

  position: relative;

  z-index: 2;

  max-width: 1216px;       /* matches .container max-width minus padding */

  width: 100%;

  margin: 0 auto;

  padding: 0 32px;

  color: var(--paper);

}

.sec-02 > div:first-child > * {

  max-width: 720px;        /* keep copy lines readable inside the wide bleed */

}

.sec-02 > div:first-child .hero-ctas,

.sec-02 > div:first-child .hero-google-reviews {

  max-width: none;

}

.hero-eyebrow {

  margin-bottom: 16px;

  background: rgba(255, 255, 255, 0.10);

  border-color: rgba(255, 255, 255, 0.18);

  color: var(--paper);

}

.hero-h1 {

  font-size: clamp(2.75rem, 6vw, 5rem);

  margin-bottom: 24px;

  color: var(--paper);

}

.hero-h1 .accent {

  /* James 2026-05-07: solid mint text · no highlighter band.

   * Sanctioned exception to brand-rules "no mint body text" rule —

   * exemption added to tests/brand-rules.spec.ts for .hero-h1 .accent. */

  color: var(--mint-400);

  background: transparent;

  padding: 0;

}

.hero-sub {

  font-size: 18px;

  color: rgba(250, 250, 250, 0.88);

  max-width: 560px;

  margin-bottom: 28px;

}

.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }



/* Google Reviews trust pill · sits under the hero CTAs · brand-aware

   styling for the dark hero overlay. Real Place ID data swap-in

   pending Stage 24. */

.hero-google-reviews {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 10px 16px;

  margin-top: 20px;

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.14);

  border-radius: 9999px;

  font-family: var(--font-body);

  font-size: 13px;

  font-weight: 500;

  color: var(--paper);

  text-decoration: none;

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);

  width: fit-content;

}

.hero-google-reviews:hover {

  background: rgba(255, 255, 255, 0.14);

  border-color: rgba(255, 255, 255, 0.28);

  transform: translateY(-1px);

  color: var(--paper);

}

.hero-google-reviews .g-mark {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 22px;

  height: 22px;

  background: var(--paper-white);

  border-radius: 50%;

  flex-shrink: 0;

  padding: 2px;

}

.hero-google-reviews .g-stars {

  display: inline-flex;

  gap: 1px;

  font-size: 14px;

  letter-spacing: 0.5px;

  line-height: 1;

}

.hero-google-reviews .g-star {

  color: #fbbc05;            /* Google amber · matches Google brand stars */

  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);

}

.hero-google-reviews .g-rating {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 14px;

  color: var(--paper);

  letter-spacing: -0.01em;

}

.hero-google-reviews .g-divider {

  width: 1px;

  height: 16px;

  background: rgba(255, 255, 255, 0.20);

  flex-shrink: 0;

}

.hero-google-reviews .g-label {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 500;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: rgba(250, 250, 250, 0.85);

  white-space: nowrap;

}

/* Hero visual = full-bleed background panel */

.hero-visual {

  position: absolute;

  inset: 0;

  z-index: 0;

  height: auto;

  border-radius: 24px;

  background:

    radial-gradient(ellipse 80% 60% at 80% 30%, rgba(14, 231, 191, 0.30) 0%, transparent 60%),

    radial-gradient(ellipse 70% 80% at 20% 80%, rgba(143, 94, 171, 0.45) 0%, transparent 60%),

    linear-gradient(135deg, var(--purple-900) 0%, var(--purple-700) 50%, var(--ink) 100%);

  display: flex;

  align-items: flex-end;

  justify-content: flex-end;

  padding: 24px;

  text-align: right;

  font-family: var(--font-mono);

  font-size: 11px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: rgba(250, 250, 250, 0.4);

}

.hero-visual::after {

  content: '';

  position: absolute; inset: 0;

  background: repeating-linear-gradient(0deg,

    transparent 0, transparent 10px,

    rgba(14, 231, 191, 0.04) 10px, rgba(14, 231, 191, 0.04) 11px);

  pointer-events: none;

}

/* Override the brand .sec-02 paper bg + dot pattern from §8 since hero is now dark */

.sec-02::before {

  content: '';

  position: absolute; inset: 0;

  z-index: 1;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0);

  background-size: 32px 32px;

  pointer-events: none;

  mask-image: linear-gradient(180deg, transparent 0%, black 50%, black 100%);

  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 50%, black 100%);

}



/* ----- Sec 03 logo wall · 6-column grid ----- */

.sec-03 { padding: 32px; margin-bottom: 24px; }

.logo-row {

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 24px;

  align-items: center;

}

.logo-box {

  height: 40px;

  border-radius: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 13px;

}



/* ----- Sec 04 timeline · 4-column grid (vertical line + dot rules

         live in §9 Animation block, kept together) ----- */

.timeline-row {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

}



/* ----- Sec 04½ Start Here · 3-column grid (image+content+CTA) ----- */

/* The wireframe puts this inline; brand.preview.css §8 styles the bg. */



/* ----- Sec 05 services scroll-spy · 2-column grid (sidebar + panels) ----- */

.services-scrollspy {

  display: grid;

  grid-template-columns: 260px 1fr;

  gap: 40px;

  align-items: start;

  padding: 12px 0;

}

.spy-nav {

  position: sticky;

  top: 150px;

  align-self: start;

}

.spy-nav-inner {

  padding: 16px 0;

  border-left: 1px solid var(--ink-200);

}

.spy-nav-eyebrow {

  font-family: var(--font-mono);

  font-size: 10px;

  font-weight: 600;

  color: var(--ink-500);

  letter-spacing: 0.12em;

  padding: 0 0 12px 20px;

  text-transform: uppercase;

}

.spy-link {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 10px 0 10px 20px;

  margin-left: -1px;

  border-left: 2px solid transparent;

  color: var(--ink-600);

  text-decoration: none;

  font-size: 13px;

  line-height: 1.35;

  font-family: var(--font-mono);

  letter-spacing: 0.02em;

  transition: border-color 200ms, color 200ms, background 200ms;

}

.spy-link:hover {

  color: var(--ink);

  background: var(--purple-50);

}

.spy-marker {

  width: 10px;

  height: 10px;

  border-radius: 2px;

  background: var(--ink-200);

  border: 1px solid var(--ink-300);

  flex-shrink: 0;

  transition: background 250ms, border-color 250ms, transform 250ms;

}

.spy-link.is-active {

  color: var(--ink);

  font-weight: 700;

  border-left-color: var(--purple-500);

  background: var(--purple-50);

}

.spy-link.is-active .spy-marker {

  background: var(--mint-400);

  border-color: var(--mint-400);

  transform: scale(1.15);

}

.spy-panels { display: flex; flex-direction: column; gap: 0; }

/* Optional snap-to-panel mode · gated by JS-toggled .spy-snap class on the

   wrapping <html> · scroll lands on each panel instantly. */

html.spy-snap .spy-panels {

  scroll-snap-type: y mandatory;

}

html.spy-snap .spy-panel { scroll-snap-align: start; scroll-snap-stop: always; }

.spy-panel {

  padding: 0;

  scroll-margin-top: 120px;

  background: var(--paper);

  min-height: var(--spy-panel-min-h, 360px);

  position: sticky;

  display: flex;

  flex-direction: column;

  border-radius: 12px;

  overflow: hidden;

}

.spy-panel:nth-child(1) { top: 120px; }

.spy-panel:nth-child(2) { top: 172px; }

.spy-panel:nth-child(3) { top: 224px; }

.spy-panel:nth-child(4) { top: 276px; }

.spy-panel:nth-child(5) { top: 328px; }

.spy-panel:nth-child(6) { top: 380px; }

.spy-panel-title-strip {

  /* Title strip · brand gradient (per James 2026-04-27) ·

     mint-tinted on inactive, purple-mint gradient when in view */

  background: linear-gradient(180deg, var(--purple-50) 0%, var(--paper-white) 100%);

  border-top: 3px solid;

  border-image: linear-gradient(90deg, var(--purple-500) 0%, var(--mint-400) 100%) 1;

  padding: 0 28px;

  font-family: var(--font-display);

  font-size: 16px;

  font-weight: 700;

  letter-spacing: -0.01em;

  color: var(--ink);

  display: flex;

  align-items: center;

  gap: 14px;

  height: 52px;

  flex-shrink: 0;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  box-shadow: 0 1px 0 var(--ink-200);

  position: relative;

  transition: background 250ms;

}

.spy-panel.is-in-view .spy-panel-title-strip {

  background: linear-gradient(135deg, var(--purple-900) 0%, var(--purple-700) 100%);

  color: var(--paper);

}

.spy-panel.is-in-view .spy-panel-title-strip .spy-panel-num {

  color: var(--mint-300);

}

.spy-panel-title-strip::before {

  content: "";

  width: 6px; height: 22px; border-radius: 2px;

  background: linear-gradient(180deg, var(--purple-500) 0%, var(--mint-400) 100%);

  flex-shrink: 0;

  transition: transform 200ms;

}

.spy-panel.is-in-view .spy-panel-title-strip::before {

  background: var(--mint-400);

  transform: scale(1.1);

}

/* Sticky-stacking REMOVED 2026-05-06 · panels scroll normally now.

 * No need to hide inactive strips · they render at their natural y. */

.spy-panel-title-strip .spy-panel-num {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 500;

  color: var(--ink-500);

  letter-spacing: 0.08em;

  flex-shrink: 0;

}

.spy-panel-body {

  flex: 1;

  /* Right padding dropped so the spy-visual photo reaches the panel's

   * rounded right edge instead of leaving a thin white strip. The

   * head card on the left has its own internal padding so it still

   * breathes inside the column · 2026-05-06 (James). */

  padding: 28px 0 28px 36px;

  display: grid;

  grid-template-columns: 1fr 1.1fr;

  column-gap: 36px;

  align-items: start;

  background: var(--paper);

  transition: background 250ms;

}

/* spy-panel-head now contains lede + linkout · styled as a single subtle

 * container so the words + button feel grouped (James 2026-05-06). */

.spy-panel-head {

  background: var(--paper-50);

  border: 1px solid var(--ink-100);

  border-radius: 10px;

  padding: 24px 24px 22px;

  display: flex;

  flex-direction: column;

  gap: 18px;

  align-items: flex-start;

  align-self: start;

}

.spy-panel-body .spy-visual { align-self: start; }

.spy-panel-head .spy-link-out { align-self: flex-start; margin-top: 0; }

.spy-panel.is-in-view .spy-panel-body { background: var(--paper-white); }

.spy-panel-head h3 {

  font-size: 28px;

  font-weight: 700;

  color: var(--ink);

  margin-bottom: 14px;

  line-height: 1.15;

  letter-spacing: -0.015em;

}

/* Spy-panel stat chip · skim-friendly value signal above each lede.

 * Mint-tinted mono pill, sanctioned-eyebrow grammar (pairs colour with

 * background, no white-on-mint risk). Reusable on any page that has a

 * .services-scrollspy or service-overview pattern. */

.spy-stat-chip {

  display: inline-block;

  font-family: var(--font-mono);

  font-size: 11px;

  letter-spacing: 0.06em;

  text-transform: none;

  color: var(--mint-700);

  background: var(--mint-50);

  border: 1px solid var(--mint-100);

  padding: 3px 10px;

  border-radius: 999px;

  margin-bottom: 12px;

  white-space: nowrap;

}

.spy-lede {

  font-size: 15px;

  line-height: 1.55;

  color: var(--ink-700);

  max-width: 520px;

  margin-bottom: 18px;

}

/* Spy-panel CTA · proper button treatment per James 2026-04-27.

   Mint primary fills + ink text · same brand language as hero CTA. */

.spy-link-out {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 12px 22px;

  background: var(--mint-400);

  color: var(--ink);

  border: 2px solid var(--mint-400);

  border-radius: var(--radius-1, 4px);

  font-family: var(--font-body);

  font-weight: 600;

  font-size: 14px;

  text-decoration: none;

  width: fit-content;

  box-shadow: 0 8px 24px rgba(14, 231, 191, 0.18), 0 2px 8px rgba(14, 231, 191, 0.10);

  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);

}

.spy-link-out:hover {

  background: var(--mint-500);

  border-color: var(--mint-500);

  color: var(--ink);

  transform: translateY(-2px);

  box-shadow: 0 12px 32px rgba(14, 231, 191, 0.28);

}

.spy-link-out:active { background: var(--mint-600); transform: translateY(0); }

.spy-link-out:focus-visible { outline: 2px solid var(--mint-600); outline-offset: 2px; }

.spy-visual {

  background: var(--ink-50);

  border: none;

  border-radius: 8px;

  /* 2026-05-06 (James) · explicit landscape aspect-ratio · the photo

   * always lands in a 16:10 frame regardless of grid-row stretch. Source

   * photos at 1:1 / 4:3 / portrait crop into this shape via object-fit:

   * cover. Stops the visual from stretching nearly square when the grid

   * row matches a tall left-column. */

  aspect-ratio: 16 / 10;

  width: 100%;

  height: auto;                   /* override grid stretch */

  align-self: start;              /* don't fill row height · cap to aspect */

  min-height: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

  box-shadow: 0 12px 28px rgba(58, 37, 73, 0.08);

}

/* Title-bar / dots pseudo-chrome removed 2026-05-06 (James) ·

 * spy-visual now hosts a real photo that should fill the whole cell.

 * Hide the placeholder pseudo-strip when an img is present; keep the

 * empty-state placeholder treatment for spy-panels still awaiting a

 * real image. */

.spy-visual:has(> img)::before,

.spy-visual:has(> img)::after { content: none; }

.spy-visual::before {

  content: "";

  position: absolute; top: 0; left: 0; right: 0; height: 28px;

  background: var(--ink-100);

  border-bottom: 1px solid var(--ink-200);

}

.spy-visual::after {

  content: "";

  position: absolute; top: 10px; left: 14px; width: 8px; height: 8px;

  border-radius: 50%; background: var(--ink-300);

  box-shadow: 14px 0 0 var(--ink-300), 28px 0 0 var(--ink-300);

}

.spy-visual-label {

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--ink-600);

  text-align: center;

  padding: 24px 16px 8px;

  line-height: 1.7;

  margin-top: 20px;

}

@media (max-width: 900px) {

  .services-scrollspy { grid-template-columns: 1fr; gap: 20px; }

  .spy-nav { position: static; }

  .spy-panel { position: static; min-height: auto; }

}



/* ----- Sec 05/06 materials · 6-column grid · Anim 14 cascade -----

   Per scroll-animations.html §14: square tiles, real material colours,

   tag (mono uppercase) + descriptive label (display font). Each chip

   has its own background colour from MATERIAL_TILES in the transformer. */

/* Shared section-head pattern · used by Materials + Process (timeline) +

 * Case studies + Why-3DPE blocks. Visual rhythm is consistent: small mint

 * eyebrow, bold display H2, optional lede paragraph. Centred, narrow. */

.materials-head,

.howitworks-head,

.cases-head,

.why-head {

  text-align: center;

  max-width: 720px;

  margin: 0 auto 28px;

}

.howitworks-head { margin-bottom: 36px; }

.cases-head { margin-bottom: 32px; }

.why-head { margin-bottom: 32px; }

.materials-eyebrow,

.howitworks-eyebrow,

.cases-eyebrow,

.why-eyebrow {

  display: inline-block;

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  color: var(--mint-700); /* a11y: 5.1:1 on white (was --mint-600 3.2:1) */

  text-transform: uppercase;

  letter-spacing: 0.14em;

  margin-bottom: 10px;

}

.materials-title,

.howitworks-title,

.cases-title,

.why-title {

  font-family: var(--font-display);

  font-size: clamp(1.5rem, 2.4vw, 1.875rem);

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--ink);

  margin: 0 0 10px;

  line-height: 1.2;

}

.materials-lede,

.howitworks-lede,

.cases-lede,

.why-lede {

  font-size: 15px;

  color: var(--ink-700);

  line-height: 1.5;

  margin: 0;

}



/* (legacy block kept for backwards-compat selectors elsewhere) */

.materials-head {

  text-align: center;

  max-width: 720px;

  margin: 0 auto 28px;

}

.materials-eyebrow {

  display: inline-block;

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  color: var(--mint-700); /* a11y: 5.1:1 on white (was --mint-600 3.2:1) */

  text-transform: uppercase;

  letter-spacing: 0.14em;

  margin-bottom: 10px;

}

.materials-title {

  font-family: var(--font-display);

  font-size: clamp(1.5rem, 2.4vw, 1.875rem);

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--ink);

  margin: 0 0 10px;

  line-height: 1.2;

}

.materials-lede {

  font-size: 15px;

  color: var(--ink-700);

  line-height: 1.5;

  margin: 0;

}

.materials-bento {

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 20px;

  margin-top: 12px;

}

.materials-help {

  margin-top: 28px;

  padding: 18px 24px;

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  flex-wrap: wrap;

  text-align: center;

}

.materials-help-text {

  margin: 0;

  font-size: 15px;

  color: var(--ink-700);

}

.materials-help-text strong { color: var(--ink); font-weight: 700; }

.materials-help-cta {

  display: inline-flex;

  align-items: center;

  padding: 9px 18px;

  font-family: var(--font-display);

  font-size: 14px;

  font-weight: 600;

  color: var(--paper-white);

  background: var(--ink);

  border-radius: 9999px;

  text-decoration: none;

  transition: background 150ms ease, transform 150ms ease;

}

.materials-help-cta:hover,

.materials-help-cta:focus-visible {

  background: var(--mint-600);

  transform: translateY(-1px);

}

@media (max-width: 720px) {

  .materials-help { flex-direction: column; gap: 12px; padding: 16px; }

}

.mat-chip {

  aspect-ratio: 1;

  border-radius: 10px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 12px;

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 13px;

  line-height: 1.2;

  color: var(--paper);

  box-shadow: 0 4px 12px rgba(12, 17, 26, 0.08);

  position: relative;

  overflow: hidden;

}

.mat-chip .tag {

  display: block;

  font-family: var(--font-mono);

  font-size: 10px;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  opacity: 0.85;

  margin-bottom: 4px;

}



/* ----- Sec 07 case studies · horizontal scroll-snap row ----- */

.case-row-wrap { position: relative; }

.case-row {

  display: flex;

  gap: 16px;

  overflow-x: auto;

  padding: 28px 24px;

  scroll-snap-type: x mandatory;

}

.case-row > * { scroll-snap-align: start; }

/* a11y: the row is a keyboard-focusable scroll region (tabindex=0).

   Give it a visible focus ring so keyboard users can see it has focus

   before arrow-scrolling through the case studies. */

.case-row:focus-visible {

  outline: 2px solid var(--purple-500);

  outline-offset: 3px;

  border-radius: 8px;

}

.case-card {

  flex: 0 0 260px;

  aspect-ratio: 4 / 5;

  padding: 20px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  position: relative;

}

.case-card .img-area {

  position: absolute; inset: 0;

  border-radius: 16px;

  z-index: 0;

  overflow: hidden;

}

.case-card .img-area > img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  border-radius: inherit;

}

/* Bottom-up dark shader so the text band at the bottom of each card

 * stays legible regardless of how light the underlying photo is.

 * Top of card photo stays untouched; the bottom 65% fades to ink at 90%

 * by the time it reaches the text. White text on top reads cleanly.

 * 2026-05-06 (James). */

.case-card .img-area::after {

  content: '';

  position: absolute;

  inset: 0;

  z-index: 1;

  /* Bottom-half darker · 2026-05-06 (James) · text band sits at 50%+

   * down so the gradient ramps hard into ~95% ink-opacity by 60%.

   * Top half shows photo cleanly, bottom half is reading-band. */

  background: linear-gradient(180deg,

    rgba(12, 17, 26, 0.05) 0%,

    rgba(12, 17, 26, 0.18) 30%,

    rgba(12, 17, 26, 0.78) 50%,

    rgba(12, 17, 26, 0.94) 70%,

    rgba(12, 17, 26, 0.97) 100%);

  border-radius: inherit;

  pointer-events: none;

}

.case-card h4, .case-card h3, .case-card p, .case-card small {

  position: relative; z-index: 2;

  color: var(--paper);

}

.case-card h4, .case-card h3 { font-weight: 700; }

.case-card small { color: rgba(250, 250, 250, 0.85); }

.case-card p { color: rgba(250, 250, 250, 0.85); }



/* ----- Sec 08 why-bento · 2fr 1fr 1fr grid ----- */

.why-bento {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr;

  gap: 12px;

  margin-top: 12px;

}



/* ----- Sec 09 CTA band ----- */

.sec-09 { margin-bottom: 24px; }



/* ----- Sec 10 FAQ ----- */

.sec-10 {

  max-width: 880px;

  margin: 0 auto;

  padding: 8px 24px 80px;

}

.faq-head {

  margin-bottom: 36px;

  text-align: left;

}

.faq-eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.18em;

  color: var(--purple-700);

  text-transform: uppercase;

}

.faq-title {

  font-family: var(--font-display);

  font-size: 40px;

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--ink);

  margin: 8px 0 14px;

  line-height: 1.05;

}

.faq-lede {

  font-size: 16px;

  line-height: 1.55;

  color: var(--ink-700);

  max-width: 640px;

  margin: 0;

}

.faq-lede a {

  color: var(--purple-700);

  text-decoration: underline;

  text-underline-offset: 2px;

}

.faq-meta {

  font-family: var(--font-mono);

  font-size: 11px; /* a11y: bumped from 9.5px */

  color: #646b78; /* a11y: 5.2:1 on white (was light grey ~2.5:1) */

  letter-spacing: 0.02em;

  margin: 8px 0 0;

  /* a11y: opacity:0.65 removed — it blended the text to ~2.6:1.

     The muted footnote feel is now in the colour (#646b78 = 5.2:1). */

}

.faq-meta time { font-weight: 500; }



/* FAQ · BIG-label variant 2026-05-10. Heading is the primary scannable

 * landmark (visitors look for "FAQs" not "Common questions"). Sub-line +

 * meta moved to .faq-foot below the questions. */

.faq-head--big {

  text-align: center;

  margin-bottom: 28px;

}

.faq-title--big {

  font-size: clamp(2.5rem, 5vw, 3.75rem);

  font-weight: 800;

  letter-spacing: -0.025em;

  color: var(--ink);

  margin: 0 0 8px;

  line-height: 1;

}

.faq-subtitle {

  font-family: var(--font-display);

  font-size: 16px;

  font-weight: 500;

  color: var(--ink-700);

  margin: 0;

  letter-spacing: -0.005em;

}

.faq-foot {

  max-width: 720px;

  margin: 28px auto 0;

  text-align: center;

  padding-top: 20px;

  border-top: 1px solid var(--ink-200);

}

.faq-foot .faq-lede { margin: 0 auto; }

.faq-foot .faq-meta { margin-top: 10px; }



/* ============================================================

 * About-3DPE definition block · 40-60 word answer-first passage

 * sits between hero and logo-wall · feeds AI Overviews + Perplexity

 * the entity-defining context they need to cite the brand. */

.sec-about-block {

  margin: 32px 0;

  padding: 0 16px;

}

.sec-about-block .wf {

  max-width: 1040px;

  margin: 0 auto;

  text-align: center;

}

.about-block-eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  color: var(--mint-700); /* a11y: 5.1:1 on white (was --mint-600 3.2:1) */

  text-transform: uppercase;

  letter-spacing: 0.14em;

  margin: 0 0 12px;

}

.about-block-body {

  font-family: var(--font-display);

  font-size: clamp(1rem, 1.6vw, 1.25rem);

  font-weight: 500;

  line-height: 1.55;

  letter-spacing: -0.01em;

  color: var(--ink);

  max-width: 1040px;

  margin: 0 auto;

}

.about-block-body strong { color: var(--purple-700); font-weight: 700; }

.about-block-body .count-up { color: var(--mint-600); font-weight: 700; }



/* ============================================================

 * Comparison table · 3DPE vs Xometry / 3DPRINTUK / Injection moulding

 * Sits under the Jennifer Bell testimonial. Highest AI-citation pattern (33%).

 * Locked 2026-05-08 (James). */

.sec-compare {

  margin: 56px 0;

}

.compare-head {

  text-align: center;

  max-width: 720px;

  margin: 0 auto 32px;

}

/* Services section · transition header bridging trust band → services scrollspy.

 * Added 2026-05-10 (James) so the visitor feels a clear shift from "stats"

 * to "what we actually do". Centred, with a short mint divider above. */

.services-head {

  text-align: center;

  max-width: 720px;

  margin: 0 auto 36px;

  padding-top: 8px;

}

.services-divider {

  display: block;

  width: 56px;

  height: 4px;

  margin: 0 auto 18px;

  border-radius: 4px;

  background: linear-gradient(90deg, var(--purple-500), var(--mint-400));

}

.services-eyebrow {

  display: inline-block;

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  color: var(--mint-700); /* a11y: 5.1:1 on white (was --mint-600 3.2:1) */

  text-transform: uppercase;

  letter-spacing: 0.14em;

  margin-bottom: 10px;

}

.services-title {

  font-family: var(--font-display);

  font-size: clamp(1.75rem, 3vw, 2.25rem);

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--ink);

  margin: 0 0 10px;

  line-height: 1.15;

}

.services-lede {

  font-size: 16px;

  color: var(--ink-700);

  line-height: 1.55;

  margin: 0;

}

.compare-eyebrow {

  display: inline-block;

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  color: var(--mint-700); /* a11y: 5.1:1 on white (was --mint-600 3.2:1) */

  text-transform: uppercase;

  letter-spacing: 0.14em;

  margin-bottom: 12px;

}

.compare-title {

  font-family: var(--font-display);

  font-size: clamp(1.75rem, 3vw, 2.25rem);

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--ink);

  margin: 0 0 12px;

  line-height: 1.15;

}

.compare-lede {

  font-size: 16px;

  color: var(--ink-700);

  line-height: 1.55;

  margin: 0;

}

.compare-table-wrap {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 16px;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  box-shadow: 0 6px 20px rgba(58, 37, 73, 0.06);

}

.compare-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 14px;

  table-layout: fixed;

}

.compare-table thead th {

  background: var(--ink-50, var(--paper-white));

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 14px;

  color: var(--ink);

  text-align: left;

  padding: 16px 18px;

  border-bottom: 1px solid var(--ink-200);

  vertical-align: middle;

}

.compare-table thead th.compare-us {

  background: linear-gradient(180deg, var(--mint-200, rgba(14, 231, 191, 0.18)) 0%, var(--mint-100, rgba(14, 231, 191, 0.08)) 100%);

  color: var(--purple-900);

  font-weight: 800;

  position: relative;

}

.compare-table thead th.compare-us::after {

  content: '';

  position: absolute;

  left: 0; right: 0; bottom: 0;

  height: 3px;

  background: var(--mint-400);

}

.compare-table tbody td,

.compare-table tbody th {

  padding: 18px;

  vertical-align: top;

  border-bottom: 1px solid var(--ink-100);

  color: var(--ink-700);

  font-weight: 400;

  text-align: left;

  line-height: 1.45;

}

.compare-table tbody tr:last-child td,

.compare-table tbody tr:last-child th { border-bottom: none; }

.compare-table tbody td.compare-us {

  background: rgba(14, 231, 191, 0.05);

  color: var(--ink);

}

.compare-table tbody td.compare-us strong {

  color: var(--ink);

  font-weight: 600;

}

.compare-row-label {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  color: var(--ink-700);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  background: var(--ink-50, #f8f6f0);

  width: 18%;

}

@media (max-width: 880px) {

  .sec-compare { margin: 40px 0; }

  .compare-head { padding: 0 16px; margin-bottom: 24px; }

  .compare-table-wrap { border-radius: 12px; }

  .compare-table { font-size: 13px; table-layout: auto; }

  .compare-table thead th,

  .compare-table tbody td,

  .compare-table tbody th { padding: 12px 10px; }

  .compare-row-label { font-size: 10px; width: 30%; padding: 12px 10px; }

}

.faq-list { display: flex; flex-direction: column; }

.faq-item {

  padding: 22px 4px;

  margin-bottom: 0;

  font-family: var(--font-display);

  font-size: 17px;

  font-weight: 700;

  letter-spacing: -0.01em;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 24px;

  width: 100%;

  text-align: left;

  cursor: pointer;

  color: var(--ink);

  background: transparent;

  border: none;

  border-top: 1px solid var(--ink-200);

  border-radius: 0;

  transition: color 150ms ease;

}

.faq-list .faq-answer:last-of-type ~ .faq-item,

.faq-list > .faq-answer:last-child {

  border-bottom: 1px solid var(--ink-200);

}

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

.faq-item:hover { color: var(--purple-700); }

.faq-item[aria-expanded="true"] { color: var(--purple-700); }

.faq-item .plus {

  color: var(--ink-500);

  font-family: var(--font-mono);

  font-size: 18px;

  font-weight: 700;

  transition: transform 200ms ease, color 200ms ease;

}

.faq-item[aria-expanded="true"] .plus {

  color: var(--purple-700);

}



/* FAQ answer body · added 2026-05-05. Sibling combinator on aria-expanded

 * means the existing inline accordion JS (which only toggles aria-expanded

 * + the +/- glyph) drives the expand/collapse with zero JS changes. */

.faq-answer {

  max-height: 0;

  opacity: 0;

  padding: 0 4px;

  margin: 0;

  font-size: 15px;

  line-height: 1.65;

  color: var(--ink-700);

  overflow: hidden;

  transition: max-height 320ms cubic-bezier(0.16, 1, 0.3, 1),

              opacity 240ms ease,

              padding 220ms ease;

  pointer-events: none;

}

.faq-answer p { margin: 0; max-width: 720px; }

.faq-answer a {

  color: var(--purple-700);

  text-decoration: underline;

  text-underline-offset: 2px;

}

.faq-item[aria-expanded="true"] + .faq-answer {

  max-height: 520px;

  opacity: 1;

  padding: 0 4px 26px;

  pointer-events: auto;

}



/* ----- Sec 11 footer · 4-column grid ----- */

.sec-11 { padding: 48px 32px; position: relative; }

.footer-grid {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1fr;

  gap: 32px;

}

.footer-col h5, .footer-col h3 {

  color: var(--paper);

  font-size: 14px;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  margin-bottom: 16px;

}

.footer-col ul { list-style: none; padding: 0; margin: 0; }

.footer-col li {

  list-style: none;

  margin-bottom: 10px;

  font-size: 14px;

  color: rgba(250, 250, 250, 0.85);

}

.footer-col a {

  color: rgba(250, 250, 250, 0.78);

  text-decoration: none;

  transition: color 150ms ease;

  border-bottom: 1px solid transparent;

  padding-bottom: 1px;

}

.footer-col a:hover,

.footer-col a:focus-visible {

  color: var(--mint-300, #14e7bf);

  border-bottom-color: var(--mint-400);

}



/* Footer tagline · single line just above the legal block */

.footer-tagline {

  margin-top: 32px;

  padding-top: 20px;

  border-top: 1px solid var(--ink-700);

  color: var(--ink-300);

  font-size: 12px;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 8px;

}



/* ===== Legal footer · 2026-05-07 ===== */

.legal-footer {

  background: var(--ink, #2d3648);

  color: rgba(250, 250, 250, 0.85);

  margin-top: 0;

  padding: 0;

  position: relative;

}

.legal-rule {

  height: 6px;

  background: var(--mint-400);

  width: 100%;

}

.legal-inner {

  max-width: 1100px;

  margin: 0 auto;

  padding: 28px 32px 32px;

  text-align: center;

  display: flex;

  flex-direction: column;

  gap: 14px;

}

.legal-reg {

  font-size: 13.5px;

  line-height: 1.55;

  margin: 0;

  color: var(--paper-white);

}

.legal-links {

  font-size: 14px;

  margin: 0;

  display: flex;

  justify-content: center;

  gap: 12px;

  flex-wrap: wrap;

  color: var(--ink-300);

}

.legal-links a {

  color: var(--paper-white);

  text-decoration: underline;

  text-underline-offset: 3px;

  transition: color 150ms ease;

}

.legal-links a:hover,

.legal-links a:focus-visible {

  color: var(--mint-300, #14e7bf);

}

.legal-copy {

  font-size: 12.5px;

  line-height: 1.55;

  margin: 0;

  color: rgba(250, 250, 250, 0.78);

}

@media (max-width: 720px) {

  .legal-inner { padding: 22px 18px 26px; }

  .legal-reg { font-size: 12.5px; }

}



/* ============================================================

 * 8. SECTION BACKGROUND RULES — palette doc "Section backgrounds"

 *    Page bg = paper. Cards = paper-white. Emphasis = purple-50.

 *    Footer + cta-band = purple-900. Hero override = ink (rare).

 * ============================================================ */



/* Hero §8 background block · DEPRECATED · replaced by §7b full-width

   overlay treatment per James 2026-04-27. Left here as a historical

   marker so future readers see the override is intentional. */



/* Logo wall — branded treatment per James 2026-04-27.

   The wireframe logo-box was a small flat grey square; the production

   treatment makes them read as actual brand logos: uppercase letterforms

   on a tinted background, monospaced in JetBrains Mono so each reads as

   a wordmark rather than a sentence label. Hover lifts the tile + tints

   purple. When real logos drop in (Stage 8), swap the textContent for

   <img> and these styles still hold. */

.sec-03 {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 16px;

  padding: 32px;

}

.sec-03::before {

  content: 'TRUSTED BY UK BRANDS AND ENGINEERS';

  display: block;

  text-align: center;

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.18em;

  color: var(--ink-500);

  margin-bottom: 24px;

}

.logo-box {

  /* 2026-05-06 · bordered card kept (James prefers ours over the

   * Disney/Bugatti reference's borderless treatment). The MONO filter on

   * the inner img still applies so all 6 logos read with equal visual

   * weight inside their cards. Hover lifts + brightens. Each card is now

   * a link to its client case study. */

  height: 80px;

  min-width: 24px; /* a11y: WCAG 2.2 target-size minimum */

  background: linear-gradient(180deg, var(--ink-50) 0%, var(--paper-white) 100%);

  color: var(--ink-700);

  border: 1px solid var(--ink-200);

  border-radius: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 0 12px;

  text-decoration: none;

  cursor: pointer;

  transition: border-color 250ms ease, transform 250ms ease, box-shadow 250ms ease, background 250ms ease;

}

.logo-box:hover {

  border-color: var(--purple-300);

  background: linear-gradient(180deg, var(--purple-50) 0%, var(--paper-white) 100%);

  transform: translateY(-3px);

  box-shadow: 0 8px 24px rgba(143, 94, 171, 0.12);

}

.logo-box .logo-mark {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 22px;

  height: 22px;

  font-size: 13px;

  color: var(--purple-700);

  background: var(--purple-50);

  border: 1px solid var(--purple-100);

  border-radius: 4px;

  flex-shrink: 0;

  transition: all 250ms ease;

}

.logo-box .logo-wordmark {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 14px;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  color: var(--ink-700);

  white-space: nowrap;

  transition: color 200ms ease;

}

.logo-box:hover .logo-img { opacity: 1; }

.logo-box:hover .logo-wordmark { color: var(--purple-700); }

.logo-box:hover .logo-mark {

  background: var(--mint-100);

  border-color: var(--mint-300);

  color: var(--purple-800);

}

/* Real-logo variant · 2026-05-06

 * When a `<img class="logo-img">` is placed inside .logo-box the

 * placeholder mark + wordmark are hidden and the image fills the box

 * with object-fit: contain so any banner-shaped or square logo scales

 * cleanly into the 64px slot. Hover unsaturates the grayscale baseline. */

/* Press-strip mono treatment · all logos rendered as a flat dark

 * silhouette at consistent height (~46px), opacity 0.78 baseline, full

 * opacity on hover. This matches the Disney/Aston Martin/Bugatti

 * convention where every brand reads with equal visual weight regardless

 * of its native palette · 2026-05-06. */

.logo-box .logo-img {

  max-width: 100%;

  max-height: 46px;

  width: auto;

  height: auto;

  object-fit: contain;

  display: block;

  opacity: 0.78;

  transition: opacity 200ms ease;

  /* Default mono treatment · grayscale removes colour, contrast + low

   * brightness pulls everything towards a unified dark tone. Preserves

   * internal detail (seal rings, wing feathers, etc.) better than a flat

   * brightness(0). Pale source logos like Telesoft still read as dark. */

  filter: grayscale(1) contrast(1.3) brightness(0.45);

}

/* White-fill brand logos (Beryl, Bruff) shipped only as `_white.svg` /

 * `whitewordmark.png` from the company sites · invert flips them to dark,

 * then the same grayscale treatment as the rest unifies the strip. */

.logo-box .logo-img.logo-img-invert {

  filter: invert(1) grayscale(1) contrast(1.3) brightness(0.45);

}

/* Logos that need to keep their native rendering (rare). */

.logo-box .logo-img.logo-img-asis {

  filter: none;

  opacity: 1;

}

.logo-box:has(.logo-img) .logo-mark,

.logo-box:has(.logo-img) .logo-wordmark {

  display: none;

}



/* Section spacing (design-system spacing scale) */

.sec-04, .sec-05, .sec-06, .sec-07, .sec-08, .sec-09, .sec-10 { margin: 64px 0; }



/* "Start Here" · purple-50 emphasis block (palette doc sanctions this as

   the standard "emphasised section · purple-50 (#f6f1fa)" treatment). */

#sec-045 .wf,

.start-here {

  background: var(--purple-50);

  border: 1px solid var(--purple-100);

  border-radius: 16px;

}



/* Trust band (sec-025) — paper-white cards on paper page (default) */

#sec-025 { background: var(--paper-white); border: 1px solid var(--ink-200); border-radius: 16px; }



/* Timeline */

.timeline-row::before { background: var(--ink-200); }

.timeline-node::before {

  background: var(--mint-400);

  border: 3px solid var(--paper);

  width: 16px; height: 16px;

  box-shadow: 0 0 0 1px var(--ink-200);

}

.timeline-node h4 { font-family: var(--font-display); color: var(--ink); }

.timeline-node p  { color: var(--ink-600); }



/* Materials chips — paper-white pill, no nth-child rotation */

.mat-chip {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 999px;

  aspect-ratio: auto;

  padding: 12px 18px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-body);

  font-weight: 500;

  font-size: 14px;

  color: var(--ink-700);

  text-decoration: none;

  transition: all 200ms ease;

  cursor: pointer;

}

.mat-chip:hover {

  background: var(--purple-50);

  border-color: var(--purple-300);

  color: var(--purple-700);

  transform: translateY(-1px);

}

/* (materials-bento grid layout defined in §7b · 6 tracks per wireframe spec) */



/* Case cards — feature-card on paper page (palette + design-system §7.2) */

.case-card .img-area {

  background: linear-gradient(135deg, var(--purple-900), var(--purple-500));

  opacity: 0.9;

}

.case-card h4, .case-card h3 { color: var(--paper); font-family: var(--font-display); font-size: 1rem; }

.case-card p  { color: rgba(250, 250, 250, 0.85); font-size: 12px; }



/* Why-bento — default paper-white cards. Mint-purple gradient on the

   big-num is sanctioned (numbers are display, not body — and gradient-

   clipped numerics appear in the about preview which James approved). */

.why-card { padding: 32px; }

.why-card .big-num {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 56px;

  background: linear-gradient(135deg, var(--purple-700) 0%, var(--mint-400) 100%);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  letter-spacing: -0.02em;

  line-height: 1;

}

.why-card h4, .why-card h3 { font-family: var(--font-display); color: var(--ink); font-size: 1.25rem; }

.why-card p  { color: var(--ink-600); font-size: 14px; line-height: 1.6; }



/* H2 accent — small mint underline bar on every section opener · earned colour */

section h2 {

  position: relative;

}

section h2::after {

  content: '';

  display: block;

  width: 48px;

  height: 3px;

  background: linear-gradient(90deg, var(--purple-500), var(--mint-400));

  border-radius: 2px;

  margin-top: 12px;

}

/* Don't apply to h2s inside cards / pill-stats / cta-band (already coloured) */

.sec-025 h2::after,

.cta-band h2::after,

.cta-inner h2::after,

.spy-panel-title-strip h2::after,

/* New 2026-05-10 section heads use their own centred divider patterns

 * (services-head ships a separate divider span; the rest don't need one).

 * Without this opt-out the global rule renders an off-centre gradient bar

 * below the centred title, which reads as a misalignment bug. */

.materials-head h2::after,

.howitworks-head h2::after,

.cases-head h2::after,

.why-head h2::after,

.services-head h2::after { display: none; }



/* Trust-stat — single consistent gradient fill across numbers + units.

   Per James 2026-04-27: gradient must NOT mix with grey unit labels.

   Transformer strips inline `color: ink-600` on unit spans so the gradient

   below applies to every glyph. Each inline span gets its own copy of the

   gradient (background-clip:text doesn't propagate to inline children),

   ensuring no glyph renders as solid colour. */

.trust-stat {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 34px;

  line-height: 1;

  margin: 4px 0 10px;

  letter-spacing: -0.02em;

}

.trust-stat,

.trust-stat span,

.trust-stat .count-up {

  background: linear-gradient(135deg, var(--purple-700) 0%, var(--mint-400) 100%);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;

}



/* Testimonial — redesigned per James 2026-04-27.

   Big serif-weight quote with a giant decorative quote mark in purple-300,

   attribution in mono with mint accent dot. Sits on purple-50 emphasis bg

   (sanctioned by palette doc). */

.sec-08 {

  background: transparent;

  border: none;

  border-radius: 0;

  padding: 56px 64px 56px 76px;

  position: relative;

  margin-top: 24px;

}

.sec-08::before {

  content: '\201C';                       /* opening curly double quote */

  position: absolute;

  top: 8px;

  left: 24px;

  font-family: var(--font-display);

  font-size: 140px;

  font-weight: 800;

  color: var(--purple-300);

  line-height: 1;

  z-index: 0;

  user-select: none;

  pointer-events: none;

}

.quote-text {

  position: relative;

  z-index: 1;

  color: var(--ink);

  font-family: var(--font-display);

  font-weight: 500;

  font-size: clamp(1.25rem, 2.4vw, 1.75rem);

  line-height: 1.4;

  letter-spacing: -0.015em;

  max-width: 880px;

  margin: 0 0 24px;

}

.quote-text::after {

  content: '\201D';                       /* closing curly double quote */

  display: inline-block;

  font-family: var(--font-display);

  font-weight: 800;

  color: var(--purple-300);

  margin-left: 4px;

  vertical-align: -0.05em;

  user-select: none;

}

.quote-source {

  position: relative;

  z-index: 1;

  color: var(--ink-700);

  font-family: var(--font-mono);

  font-size: 12px;

  font-weight: 500;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  display: inline-flex;

  align-items: center;

  gap: 12px;

}

.quote-source::before {

  content: '';

  width: 8px; height: 8px;

  border-radius: 50%;

  background: var(--mint-400);

  box-shadow: 0 0 0 3px rgba(14, 231, 191, 0.25);

}



/* 2-up testimonials grid · 2026-05-10. Jennifer (purple LHS) +

 * Andy (teal RHS) sit side by side for stronger social proof. The colour

 * contrast carries the visual difference; copy stays the focus. */

.sec-08--grid {

  background: transparent;

  padding: 32px 24px;

  margin-top: 24px;

}

.sec-08--grid::before { display: none; } /* per-card opening quote handles the mark */

.testimonials-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 28px;

  max-width: 1180px;

  margin: 0 auto;

}

.quote-card {

  position: relative;

  border-radius: 16px;

  padding: 56px 36px 64px;

  overflow: hidden;

  /* Block-level link · strip default underline + colour, keep card layout */

  display: block;

  color: inherit;

  text-decoration: none;

  cursor: pointer;

  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),

              box-shadow 220ms ease,

              border-color 220ms ease;

  box-shadow: 0 1px 2px rgba(12, 17, 26, 0.04);

}

.quote-card:hover,

.quote-card:focus-visible {

  transform: translateY(-4px);

  box-shadow: 0 16px 32px rgba(12, 17, 26, 0.10);

  outline: none;

}

.quote-card:focus-visible { outline: 3px solid var(--mint-400); outline-offset: 3px; }

.quote-card:active { transform: translateY(-1px); transition-duration: 100ms; }

.quote-cta {

  position: absolute;

  bottom: 24px;

  left: 36px;

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.10em;

  text-transform: uppercase;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  transition: gap 200ms ease, color 200ms ease;

}

.quote-cta-arrow {

  display: inline-block;

  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);

}

.quote-card:hover .quote-cta { gap: 12px; }

.quote-card:hover .quote-cta-arrow { transform: translateX(4px); }

.quote-card--purple .quote-cta { color: var(--purple-700); }

.quote-card--purple:hover { border-color: rgba(143, 94, 171, 0.45); }

.quote-card--teal .quote-cta { color: var(--mint-700, #067d68); }

.quote-card--teal:hover { border-color: rgba(14, 231, 191, 0.55); }

.quote-card::before {

  content: '\201C';

  position: absolute;

  top: 8px;

  left: 24px;

  font-family: var(--font-display);

  font-size: 110px;

  font-weight: 800;

  line-height: 1;

  user-select: none;

  pointer-events: none;

  opacity: 0.85;

}

.quote-card .quote-text {

  font-size: clamp(1.05rem, 1.45vw, 1.25rem);

  line-height: 1.5;

  margin: 0 0 22px;

  font-weight: 500;

}

.quote-card .quote-source {

  font-size: 11px;

}

/* Purple variant · LHS · Jennifer */

.quote-card--purple {

  background: linear-gradient(135deg, rgba(143, 94, 171, 0.08) 0%, rgba(143, 94, 171, 0.16) 100%);

  border: 1px solid rgba(143, 94, 171, 0.22);

}

.quote-card--purple::before { color: var(--purple-500); }

.quote-card--purple .quote-text { color: var(--ink); }

.quote-card--purple .quote-source { color: var(--purple-700); }

.quote-card--purple .quote-source::before {

  background: var(--purple-500);

  box-shadow: 0 0 0 3px rgba(143, 94, 171, 0.22);

}

/* Teal variant · RHS · Andy */

.quote-card--teal {

  background: linear-gradient(135deg, rgba(14, 231, 191, 0.10) 0%, rgba(6, 125, 104, 0.14) 100%);

  border: 1px solid rgba(14, 231, 191, 0.30);

}

.quote-card--teal::before { color: var(--mint-500, #0a9477); }

.quote-card--teal .quote-text { color: var(--ink); }

.quote-card--teal .quote-source { color: var(--mint-700, #067d68); }

.quote-card--teal .quote-source::before {

  background: var(--mint-500, #0a9477);

  box-shadow: 0 0 0 3px rgba(14, 231, 191, 0.25);

}

@media (max-width: 880px) {

  .testimonials-grid { grid-template-columns: 1fr; gap: 20px; }

  .quote-card { padding: 48px 24px 24px; }

}



/* CTA band — palette §"Section backgrounds" footer override scaled up:

   purple-900 base + paper text + mint primary button.

   Locked spec: no white-on-mint, no decorative gradients overlaying text. */

.cta-band {

  background:

    radial-gradient(ellipse 60% 80% at 80%   0%, rgba(14, 231, 191, 0.16) 0%, transparent 60%),

    radial-gradient(ellipse 50% 60% at  0% 100%, rgba(143, 94, 171, 0.40) 0%, transparent 60%),

    var(--purple-900);

  color: var(--paper);

  border: none;

  border-radius: 24px;

  padding: 80px 48px;

  box-shadow: 0 8px 32px rgba(143, 94, 171, 0.20), 0 2px 8px rgba(143, 94, 171, 0.12);

  position: relative;

  overflow: hidden;

}

.cta-band::before {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);

  background-size: 24px 24px;

  pointer-events: none;

}

.cta-band > * { position: relative; z-index: 1; }

.cta-band h1, .cta-band h2, .cta-band h3,

.cta-band p,  .cta-band .eyebrow,

.cta-band a:not(.cta) {

  color: var(--paper);

  font-family: var(--font-display);

}

.cta-band p { font-family: var(--font-body); }

.cta-band .eyebrow {

  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(255, 255, 255, 0.16);

  color: var(--paper);

}

/* Secondary CTA on dark cta-band background — paper text + paper-30% border.

   Brand-sanctioned dark-context variant (palette doc allows mint focus + paper

   text on purple-900 surfaces; secondary keeps purple ghost reserved for

   light-bg use). */

.cta-band .cta.secondary {

  color: var(--paper);

  border-color: rgba(250, 250, 250, 0.4);

  background: transparent;

}

.cta-band .cta.secondary:hover {

  background: rgba(250, 250, 250, 0.08);

  border-color: var(--paper);

  color: var(--paper);

}



/* Footer — purple-900 (palette doc) */

.sec-11 {

  background: var(--purple-900);

  color: var(--paper);

  border-radius: 24px;

  margin: 64px 0 32px;

}

.sec-11 a { color: rgba(250, 250, 250, 0.85); }

.sec-11 a:hover { color: var(--mint-400); }



/* Scroll-spy active state */

.spy-link.is-active {

  color: var(--purple-700);

  border-left-color: var(--mint-400);

  background: var(--purple-50);

}

.spy-link.is-active .spy-marker {

  background: var(--mint-400);

  border-color: var(--mint-400);

}



/* ============================================================

 * 9. ANIMATIONS — fade-in + stagger + count-up + reduced-motion

 * ============================================================ */

.fade-in {

  opacity: 0;

  transform: translateY(24px);

  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);

  will-change: opacity, transform;

}

.fade-in.visible {

  opacity: 1;

  transform: translateY(0);

}



.stagger > * {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);

}

.stagger.visible > *      { opacity: 1; transform: translateY(0); }

.stagger.visible > *:nth-child(1)  { transition-delay:  60ms; }

.stagger.visible > *:nth-child(2)  { transition-delay: 120ms; }

.stagger.visible > *:nth-child(3)  { transition-delay: 180ms; }

.stagger.visible > *:nth-child(4)  { transition-delay: 240ms; }

.stagger.visible > *:nth-child(5)  { transition-delay: 300ms; }

.stagger.visible > *:nth-child(6)  { transition-delay: 360ms; }

.stagger.visible > *:nth-child(7)  { transition-delay: 420ms; }

.stagger.visible > *:nth-child(8)  { transition-delay: 480ms; }

.stagger.visible > *:nth-child(9)  { transition-delay: 540ms; }

.stagger.visible > *:nth-child(10) { transition-delay: 600ms; }

.stagger.visible > *:nth-child(11) { transition-delay: 660ms; }

.stagger.visible > *:nth-child(12) { transition-delay: 720ms; }



/* ===== Anim 09 · Split-text char reveal (hero h1 only) =====

   .word holds chars together (no mid-word breaks); .char animates per-letter. */

.split-text { display: block; }

.split-text .word {

  display: inline-block;

  white-space: nowrap;

}

.split-text .char {

  display: inline-block;

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 400ms ease-out, transform 400ms ease-out;

  transition-delay: var(--d, 0ms);

}

.split-text.in-view .char,

.split-text.visible .char { opacity: 1; transform: translateY(0); }



/* ===== Anim 14 · Material palette cascade (filament flip) =====

   Per scroll-animations.html §14: chips flip in on Y-axis like opening

   a swatch book. Origin left-centre · 60ms stagger via --i inline var. */

.materials-bento.stagger > .mat-chip {

  opacity: 0;

  transform: rotateY(-90deg);

  transform-origin: left center;

  transition: opacity 600ms ease-out, transform 800ms cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay: var(--i, 0ms);

  will-change: transform, opacity;

}

.materials-bento.stagger.visible > .mat-chip {

  opacity: 1;

  transform: rotateY(0);

}

/* Hover · slight lift + brighten · matches the rest of the brand interaction language */

.materials-bento .mat-chip {

  transition: opacity 600ms ease-out, transform 800ms cubic-bezier(0.22, 1, 0.36, 1),

              box-shadow 200ms ease, filter 200ms ease;

}

.materials-bento.visible .mat-chip:hover {

  transform: translateY(-3px);

  box-shadow: 0 12px 32px rgba(12, 17, 26, 0.18);

  filter: brightness(1.08);

}



/* ===== Timeline node copy · 2-line treatment ===== */

.timeline-node-lead {

  font-size: 14px;

  font-weight: 600;

  color: var(--ink);

  margin: 0 0 6px;

}

.timeline-node-detail {

  font-size: 13px;

  line-height: 1.55;

  color: var(--ink-600);

  margin: 0;

  max-width: 260px;

  margin-left: auto;

  margin-right: auto;

}



/* ===== Anim 15 · Process timeline · mint fill 0→100% on scroll =====

   Line and dots share the same y-position ABOVE the heading text.

   Layout:

     [row top]

       padding-top: 60px   ← creates space for line + dots above text

       ┌──── line at y=18px ────┐  (background grey, gradient overlay 0→100%)

       ●────────●────────●────────●  (dots centred on the line)

     "01 · Brief"  "02 · Quote" ...   ← heading flows below the dots

     "Send the file" "Inside 24 hours" ... */

.timeline-row {

  position: relative;

  padding-top: 60px;       /* room for line + dots above headings */

  padding-bottom: 16px;

  margin-top: 12px;

}

/* Background line · sits at y=18px, 40px inset on each side so it stops short of edges */

.timeline-row::before {

  content: "";

  position: absolute;

  top: 18px;

  left: 40px;

  right: 40px;

  height: 3px;

  background: var(--ink-200);

  border-radius: 3px;

}

/* Mint-purple gradient overlay · fills 0→100% on scroll-into-view */

.timeline-row::after {

  content: "";

  position: absolute;

  top: 18px;

  left: 40px;

  height: 3px;

  background: linear-gradient(90deg, var(--purple-500), var(--mint-400));

  border-radius: 3px;

  width: 0%;

  max-width: calc(100% - 80px); /* matches the 40px inset on both sides */

  transition: width 2.5s cubic-bezier(0.65, 0, 0.35, 1);

}

.timeline-row.visible::after { width: calc(100% - 80px); }



.timeline-node {

  position: relative;

  text-align: center;

  padding-top: 0;          /* nodes are children of the grid · spacing comes from row padding */

}

/* Dot · centred on the line · sits at y≈18px from row top */

.timeline-node::before {

  content: "";

  position: absolute;

  top: -51px;              /* line-y(18) - node-y(60) - dot-half-height(9) = -51 · centres dot on the line */

  left: 50%;

  width: 18px; height: 18px;

  border-radius: 50%;

  background: var(--paper-white);

  border: 3px solid var(--ink-300);

  transform: translate(-50%, 0) scale(0);

  opacity: 0;

  box-shadow: 0 0 0 1px var(--ink-200);

  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1),

              border-color 400ms,

              opacity 300ms;

  transition-delay: var(--d, 0ms);

  z-index: 1;

}

.timeline-row.visible .timeline-node::before {

  transform: translate(-50%, 0) scale(1);

  opacity: 1;

  border-color: var(--mint-400);

}

.timeline-row.visible .timeline-node:nth-child(1)::before { --d:    0ms; }

.timeline-row.visible .timeline-node:nth-child(2)::before { --d:  600ms; }

.timeline-row.visible .timeline-node:nth-child(3)::before { --d: 1200ms; }

.timeline-row.visible .timeline-node:nth-child(4)::before { --d: 1800ms; }



/* ===== Anim 05 · Parallax hero background ===== */

.sec-02::before { will-change: transform; }



/* ===== Anim 17 · Magnetic primary button (hero + closing CTA only) =====

   --magnet-x / --magnet-y are set by brand.preview.js on mousemove and

   compose with the CSS hover transform. */

[data-magnet] {

  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms;

  will-change: transform;

  transform: translate(var(--magnet-x, 0), var(--magnet-y, 0));

}



/* ===== Sec 00 · Announcement bar auto-dismiss on scroll ===== */

.sec-00 {

  transition: opacity 250ms ease, transform 250ms ease, max-height 300ms ease, margin 250ms ease, padding 250ms ease;

  overflow: hidden;

  max-height: 64px;

}

.sec-00.dismissed {

  opacity: 0;

  transform: translateY(-8px);

  max-height: 0;

  margin-top: 0;

  margin-bottom: 0;

  padding-top: 0;

  padding-bottom: 0;

  pointer-events: none;

}



/* 2026-05-05 · DEAD RULE REMOVED. Earlier `.nav-pill.scrolled { padding: 8px ... }`

 * lived here but the JS adds `.scrolled` to `.sec-01`, never to `.nav-pill`, so

 * this never fired. It also would have caused the same vibration as the

 * `.sec-01.scrolled` padding shift fixed above. The active scrolled-state rule

 * is `.sec-01.scrolled .nav-pill { box-shadow: ... }` (paint-only). */



/* Hero loads visibly cascading on page load (above-the-fold), no scroll wait */

.sec-02 .fade-in {

  animation: heroIn 800ms cubic-bezier(0.16, 1, 0.3, 1) both;

  opacity: 1;

  transform: none;

  transition: none;

}

.sec-02 .fade-in:nth-child(1) { animation-delay:   0ms; }

.sec-02 .fade-in:nth-child(2) { animation-delay: 100ms; }

.sec-02 .fade-in:nth-child(3) { animation-delay: 200ms; }

.sec-02 .fade-in:nth-child(4) { animation-delay: 300ms; }

@keyframes heroIn {

  from { opacity: 0; transform: translateY(28px); }

  to   { opacity: 1; transform: translateY(0); }

}



@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }

  html { scroll-behavior: auto; }

  .fade-in, .stagger > * { opacity: 1 !important; transform: none !important; }

}





/* ============================================================

 * SERVICE-PAGE BREATHING ROOM · added 2026-05-05 (Stage 13 redo polish pass)

 *

 * James's feedback after first chrome pass: "sections look very tight together

 * and could do with some space around them". Service-page wireframes use bare

 * <section> elements (no .sec-NN class) — this rule adds vertical rhythm to

 * those without affecting homepage's .sec-XX sections which already have

 * bespoke spacing. Selector :not([class*="sec-"]) excludes the homepage.

 * ============================================================ */

.container > section:not([class*="sec-"]),

.container > .hero,

.container > footer.footer {

  margin-bottom: 36px;

}

.container > section:not([class*="sec-"]):first-of-type,

.container > .hero {

  margin-top: 0;

}

/* Service pages don't have section headings inside <section> — the wireframe

 * placed them in a sec-heading div above the content. With dev chrome stripped

 * those headings are gone. The section content itself becomes the visual unit;

 * extra margin between sections gives the reader the rhythm the dev chrome

 * used to provide. */



/* ============================================================

 * SERVICE-PAGE COMPONENTS · added 2026-05-05 (Stage 13 redo)

 *

 * Shared chrome for service-page section roots, hand-authored to match the

 * homepage's visual language (.cta-band purple-900 hero, paper-white cards

 * with ink-200 borders, gradient-text big numbers, mint accents).

 *

 * Used by every service page: small-batch-production, product-development,

 * events-and-brand-activations, large-scale-activations,

 * niche-and-obsolete-parts, cad-design-services, print-and-fulfil,

 * quote-request. Each page's wireframe markup uses these classes; brand

 * decoration lives here (per memory rule feedback_brand_rules_locked.md).

 * Per-page <page>.preview.css files contain LAYOUT PRIMITIVES ONLY.

 * ============================================================ */



/* ----- Hero · dark feature, mirrors .cta-band radial-gradient pattern ----- */

.hero {

  background:

    radial-gradient(ellipse 60% 80% at 80%   0%, rgba(14, 231, 191, 0.16) 0%, transparent 60%),

    radial-gradient(ellipse 50% 60% at  0% 100%, rgba(143, 94, 171, 0.40) 0%, transparent 60%),

    var(--purple-900);

  color: var(--paper);

  border-radius: 24px;

  padding: 56px 48px;

  position: relative;

  overflow: hidden;

  box-shadow: 0 8px 32px rgba(143, 94, 171, 0.20), 0 2px 8px rgba(143, 94, 171, 0.12);

}

.hero::before {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);

  background-size: 24px 24px;

  pointer-events: none;

}

.hero > * { position: relative; z-index: 1; }

.hero h1 {

  color: var(--paper);

  font-family: var(--font-display);

  font-size: clamp(2rem, 4vw, 2.875rem);

  line-height: 1.05;

  font-weight: 800;

  letter-spacing: -0.025em;

  margin: 0 0 18px;

}

/* Hero h1 accent uses mint highlighter UNDERLAY pattern (matches homepage .hero-h1 .accent

 * line 163-167). Solid mint TEXT colour would violate brand-rules.spec.ts:105 (mint

 * reserved for CTA fill, not body text). The gradient sits behind the paper text. */

.hero h1 .accent {

  color: inherit;

  background: linear-gradient(180deg, transparent 60%, rgba(14, 231, 191, 0.32) 60%);

  border-radius: 0;

  padding: 0 4px;

}

.hero h1 .accent::after { display: none; }

.hero .eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--paper);  /* sanctioned dark-context eyebrow per palette doc */

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.16);

  padding: 3px 10px;

  border-radius: 999px;

  display: inline-block;

  margin-bottom: 14px;

}

.hero .sub {

  color: rgba(250, 250, 250, 0.78);

  font-size: 16px;

  max-width: 520px;

  margin-bottom: 22px;

  line-height: 1.55;

}

.hero .slider-wrap {

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.16);

  border-radius: 10px;

  padding: 16px 18px;

  margin-bottom: 22px;

}

.hero .slider-wrap label {

  font-family: var(--font-mono);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: rgba(250, 250, 250, 0.6);

}

.hero .slider-wrap .slider-readout {

  color: var(--mint-400);

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 26px;

  margin: 6px 0;

}

.hero .slider-wrap input[type=range] { width: 100%; accent-color: var(--mint-400); }

.hero .slider-wrap .slider-msg { font-size: 12px; color: rgba(250, 250, 250, 0.65); margin-top: 6px; }

.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.hero .cta.secondary {

  color: var(--paper);

  border-color: rgba(250, 250, 250, 0.4);

  background: transparent;

}

.hero .cta.secondary:hover {

  background: rgba(250, 250, 250, 0.08);

  border-color: var(--paper);

  color: var(--paper);

}

/* Image fills inside service-page slots · 2026-05-06 ·

 * Photo slots (.hero-visual, .case .visual, .icp-card .avatar) are flex

 * containers with fixed dimensions. When real photos are wired in, the img

 * needs to fill the container with object-fit: cover so partial-aspect-ratio

 * mismatches crop cleanly instead of letterboxing. */

.hero .hero-visual img,

.case .visual img,

.icp-card .avatar img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  border-radius: inherit;

}



/* Hero · ICP intake-strip · 3 routing chips below the primary CTA pair.

 * Routes ICPs to /quote-request?intake=<cad|photo|part>. Locked 2026-05-08.

 * Sits inside .hero · paper-on-purple, mint hover, no border-radius dependence on

 * fade-in (intake-chip stays visible immediately). */

.hero-intake-strip {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 10px;

  margin-top: 18px;

}

.hero-intake-label {

  font-family: var(--font-mono);

  font-size: 11px;

  letter-spacing: 0.10em;

  text-transform: uppercase;

  color: rgba(250, 250, 250, 0.65);

  margin-right: 4px;

}

.hero-intake-chip,

.hero-intake-chip:link,

.hero-intake-chip:visited {

  display: inline-flex;

  align-items: center;

  padding: 9px 16px;

  font-size: 13.5px;

  font-weight: 500;

  color: var(--paper-white) !important;

  background: rgba(250, 250, 250, 0.06);

  border: 1px solid rgba(250, 250, 250, 0.18);

  border-radius: 9999px;

  text-decoration: none;

  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;

}

.hero-intake-chip:hover,

.hero-intake-chip:focus-visible {

  background: rgba(14, 231, 191, 0.14) !important;

  border-color: var(--mint-400) !important;

  color: var(--mint-300, #14e7bf) !important;

  transform: translateY(-1px);

}

@media (max-width: 880px) {

  .hero-intake-strip { gap: 8px; margin-top: 14px; }

  .hero-intake-label { width: 100%; margin-bottom: 2px; }

  .hero-intake-chip { padding: 8px 14px; font-size: 13px; }

}



/* Homepage photo slots · 2026-05-06

 * Three families of homepage photo slots, each with its own container

 * style already locked. img-fill rules below let real photos drop in

 * without disturbing the surrounding chrome.

 *   1. .hero-visual (sec-02 hero) · gradient panel + dev-screen pseudo

 *   2. .spy-visual (services scrollspy) · paper card with title-bar

 *   3. .case-card .img-area · absolute-positioned full-card photo */

.hero-visual img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  border-radius: inherit;

  z-index: 1;  /* sits above the gradient · below the dark shader and ::after overlay */

}

.hero-visual picture {

  position: absolute;

  inset: 0;

  display: block;

  border-radius: inherit;

}

/* Dark shader · sits on top of the photo so paper-white headlines + body

 * stay legible. Darkened 2026-05-06 (James) · stronger purple-900 + ink

 * wash, photo still reads through but the mood + text contrast are now

 * significantly heavier. */

.hero-visual::before {

  content: '';

  position: absolute;

  inset: 0;

  z-index: 2;

  background:

    linear-gradient(135deg, rgba(58, 37, 73, 0.78) 0%, rgba(12, 17, 26, 0.70) 60%, rgba(12, 17, 26, 0.55) 100%);

  pointer-events: none;

  border-radius: inherit;

}

.spy-visual > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  z-index: 0;

  border-radius: inherit;

}

.case-card .img-area > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  border-radius: inherit;

}



/* SCOPED to .hero descendant only · 2026-05-05.

 * Earlier this rule was bare `.hero-visual` and clobbered the homepage's

 * radial-gradient + purple-900-to-ink linear-gradient at brand.preview.css:1000.

 * Homepage `.hero-visual` lives inside `<section class="sec-02">` (not inside

 * `.hero`), so scoping to `.hero .hero-visual` keeps the homepage rule

 * winning and lets service-page heroes have their own placeholder treatment. */

.hero .hero-visual {

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 12px;

  /* Definite height · matches the original wireframe placeholder shape.

   * The img inside is width:100% height:100% object-fit:cover at the

   * dedicated rule above, so a 1100×825 photo crops to fit this exact

   * slot rather than dictating a new shape. */

  height: 320px;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: rgba(250, 250, 250, 0.5);

  font-family: var(--font-mono);

  font-size: 12px;

  text-align: center;

  padding: 0;

  overflow: hidden;

}



/* ----- Trust band cards · paper-white tiles + gradient-text big numbers ----- */

.trust-card {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  padding: 24px;

  border-radius: 12px;

  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;

}

.trust-card:hover {

  border-color: var(--purple-300);

  transform: translateY(-2px);

  box-shadow: 0 4px 16px rgba(58, 37, 73, 0.08);

}

.trust-card .eyebrow {

  font-family: var(--font-mono);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--purple-700);

  background: var(--purple-50);

  border: 1px solid var(--purple-100);

  padding: 3px 9px;

  border-radius: 999px;

  display: inline-block;

  margin-bottom: 8px;

}

.trust-card .stat {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 38px;

  line-height: 1;

  margin: 12px 0 8px;

  letter-spacing: -0.02em;

  background: linear-gradient(135deg, var(--purple-700) 0%, var(--mint-400) 100%);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;

}

.trust-card .stat span,

.trust-card .stat .unit,

.trust-card .stat .pc-mirror,

.trust-card .stat .count-up {

  background: linear-gradient(135deg, var(--purple-700) 0%, var(--mint-400) 100%);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;

}

.trust-card .stat .unit { font-size: 22px; }

.trust-card .stat-sub {

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--ink-600);

  text-transform: uppercase;

  letter-spacing: 0.06em;

  margin-bottom: 12px;

}

.trust-card h4 {

  font-family: var(--font-display);

  font-size: 16px;

  font-weight: 700;

  color: var(--ink);

  margin: 0 0 8px;

  letter-spacing: -0.01em;

}

.trust-card p {

  font-size: 14px;

  color: var(--ink-600);

  margin: 0;

  line-height: 1.55;

}



/* ----- Service-page case studies · paper-white (vs homepage's dark .case-card) ----- */

.case {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  overflow: hidden;

  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;

}

.case:hover {

  border-color: var(--purple-300);

  transform: translateY(-2px);

  box-shadow: 0 4px 16px rgba(58, 37, 73, 0.08);

}

.case .visual {

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-50) 100%);

  height: 180px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--ink-600);

  font-family: var(--font-mono);

  font-size: 11px;

  text-align: center;

  padding: 16px;

  position: relative;

}

.case .visual::after {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(58, 37, 73, 0.04) 1px, transparent 0);

  background-size: 16px 16px;

}

.case .body { padding: 20px; }

.case .client {

  font-family: var(--font-mono);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--purple-700);

  margin-bottom: 6px;

}

.case h4 {

  font-family: var(--font-display);

  font-size: 16px;

  color: var(--ink);

  margin: 0 0 8px;

  letter-spacing: -0.01em;

}

.case .metric {

  font-size: 13px;

  color: var(--ink-600);

  margin-bottom: 14px;

  line-height: 1.55;

}

.case .link {

  color: var(--ink);

  text-decoration: none;

  font-weight: 700;

  font-size: 13px;

  border-bottom: 2px solid var(--mint-400);

  padding-bottom: 1px;

}

.case .link:hover { color: var(--purple-700); }



/* ----- Comparison band · 3-col, middle col purple-tinted with "YOU ARE HERE" pill -----

 * 2026-05-05 · pill moved INSIDE the column (top: 16px, was -10px floating above)

 * to fix clipping inside .cmp { overflow: hidden } container that James spotted

 * in the small-batch preview. Column gets extra top padding so heading sits

 * below the pill with breathing room.

 */

.cmp {

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  overflow: hidden;

  background: var(--paper-white);

}

.cmp .col { padding: 28px 24px 24px; }

.cmp .col.us {

  background: linear-gradient(180deg, var(--purple-50) 0%, rgba(255, 255, 255, 0) 100%);

  border-left: 1px solid var(--purple-200);

  border-right: 1px solid var(--purple-200);

  position: relative;

  padding-top: 48px;

}

.cmp .col.us::before {

  content: 'YOU ARE HERE';

  position: absolute;

  top: 16px;

  left: 50%;

  transform: translateX(-50%);

  background: var(--purple-700);

  color: var(--paper);

  padding: 4px 14px;

  border-radius: 999px;

  font-family: var(--font-mono);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.14em;

}

.cmp .col h4 {

  font-family: var(--font-display);

  font-size: 16px;

  font-weight: 800;

  margin: 0 0 14px;

  letter-spacing: -0.01em;

}

.cmp .col.us h4 { color: var(--purple-900); }

.cmp .col.other h4 { color: var(--ink-700); }

.cmp .row {

  display: flex;

  justify-content: space-between;

  padding: 10px 0;

  border-top: 1px solid var(--ink-100);

  font-size: 13px;

}

.cmp .row:first-of-type { border-top: none; }

.cmp .row .label {

  color: var(--ink-600);

  font-family: var(--font-mono);

  font-size: 11px;

}

.cmp .row .val { font-weight: 600; color: var(--ink); }

.cmp .col.other .row .val { color: var(--ink-600); }



/* ----- ICP card · paper-50 bg with gradient avatar ----- */

.icp-card {

  background: var(--ink-50);

  border: 1px solid var(--ink-200);

  padding: 32px;

  border-radius: 12px;

}

.icp-card h3 {

  font-family: var(--font-display);

  font-size: 24px;

  font-weight: 700;

  margin: 0 0 8px;

  color: var(--ink);

  letter-spacing: -0.02em;

}

.icp-card p {

  font-size: 14px;

  color: var(--ink-600);

  margin: 0 0 14px;

  line-height: 1.55;

}

.icp-card ul {

  margin: 12px 0 0;

  padding-left: 22px;

  font-size: 14px;

  color: var(--ink-700);

  line-height: 1.65;

}

.icp-card ul li { margin-bottom: 8px; }

.icp-card ul li strong { color: var(--ink); }

.icp-card .avatar {

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-50) 100%);

  border-radius: 10px;

  /* Definite height · matches the original wireframe placeholder shape.

   * The img inside fills via object-fit: cover so it crops to fit this

   * exact slot rather than dictating a new shape. */

  height: 200px;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--ink-600);

  font-family: var(--font-mono);

  font-size: 11px;

  padding: 0;

  text-align: center;

  position: relative;

  overflow: hidden;

}

.icp-card .avatar::after {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(58, 37, 73, 0.04) 1px, transparent 0);

  background-size: 16px 16px;

}



/* ----- Why-grid · 3 paper-white cards with gradient-text big-num -----

 * 2026-05-05 · James "needs more colour": bumped padding 28→32 and .num

 * 32px→48px to push the gradient closer to homepage's .why-card .big-num

 * 56px scale. Bigger gradient = more brand colour reading on the section. */

.why-grid .why-card {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  padding: 32px 28px;

  border-radius: 12px;

  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;

  position: relative;

  overflow: hidden;

}

.why-grid .why-card::before {

  content: '';

  position: absolute;

  top: 0; left: 0; right: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--purple-700) 0%, var(--mint-400) 100%);

}

.why-grid .why-card:hover {

  border-color: var(--purple-300);

  transform: translateY(-2px);

  box-shadow: 0 4px 16px rgba(58, 37, 73, 0.08);

}

.why-grid .why-card .num {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 48px;

  line-height: 1;

  margin: 0 0 14px;

  letter-spacing: -0.02em;

  background: linear-gradient(135deg, var(--purple-700) 0%, var(--mint-400) 100%);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;

}

.why-grid .why-card h4, .why-grid .why-card h3 {

  font-family: var(--font-display);

  font-size: 17px;

  font-weight: 700;

  color: var(--ink);

  margin: 0 0 8px;

  letter-spacing: -0.01em;

}

.why-grid .why-card p {

  font-size: 14px;

  color: var(--ink-600);

  margin: 0;

  line-height: 1.55;

}



/* ----- Process steps · 4 paper-white cards, step.gate purple-tinted with badge -----

 * 2026-05-05 · James "could be a little bigger on the height side": bumped

 * padding 22→28 and added min-height 200px so each card has consistent

 * vertical rhythm regardless of body length. */

.steps .step {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  padding: 28px 24px;

  border-radius: 12px;

  position: relative;

  transition: border-color 200ms ease;

  min-height: 200px;

  display: flex;

  flex-direction: column;

}

.steps .step:hover { border-color: var(--purple-300); }

.steps .step.gate {

  background: linear-gradient(180deg, var(--purple-50) 0%, rgba(255, 255, 255, 0) 100%);

  border-color: var(--purple-200);

}

.steps .step .num {

  display: inline-block;

  width: 32px;

  height: 32px;

  line-height: 32px;

  border-radius: 50%;

  background: var(--ink);

  color: var(--paper);

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 14px;

  text-align: center;

  margin-bottom: 14px;

}

.steps .step.gate .num { background: var(--purple-700); }

.steps .step.gate::after {

  content: 'APPROVAL GATE';

  position: absolute;

  top: -10px;

  right: 12px;

  background: var(--purple-700);

  color: var(--paper);

  padding: 3px 10px;

  border-radius: 999px;

  font-family: var(--font-mono);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;

}

.steps .step h4 {

  font-family: var(--font-display);

  font-size: 15px;

  font-weight: 700;

  color: var(--ink);

  margin: 0 0 6px;

  letter-spacing: -0.01em;

}

.steps .step p {

  font-size: 13px;

  color: var(--ink-700);

  margin: 0 0 10px;

  line-height: 1.5;

}

.steps .step .fear {

  font-size: 11px;

  color: var(--ink-500);

  font-style: italic;

  font-family: var(--font-mono);

}



/* ----- Materials chips (service-page row variant) ----- 2026-05-06

 * Each chip shows a filament-on-spool style texture: parallel close-up

 * strands tinted to the material's colour (--filament-tint) with a dark

 * gradient overlay on top to keep the white display text + uppercase

 * mono reason legible. The pattern works in three modes:

 *

 *   1. NO inline overrides     · procedural stripes in --filament-tint

 *                                (default · works without any photos)

 *   2. inline --filament-tint  · same procedural pattern, different colour

 *                                (per material · set on the chip in HTML)

 *   3. inline --filament-bg    · real close-up filament photo overrides

 *                                the procedural texture (drop into

 *                                wp-import/photos/filaments/ then set the

 *                                URL on the chip)

 *

 * The dark linear-gradient shader is ALWAYS on top so text legibility

 * never depends on the photo being well-exposed. */

.mat-row .mat-chip {

  --filament-tint: var(--ink-700);  /* fallback · cool dark grey */

  /* Inline --filament-bg should be a `url(...)` (real photo). When set, the

   * dark shader sits ON TOP of the photo and the procedural stripes/tint

   * are skipped — see the override block below. */

  background-color: var(--filament-tint);

  background-image:

    /* shader on top · keeps white text legible over any backdrop */

    linear-gradient(135deg, rgba(12, 17, 26, 0.62) 0%, rgba(12, 17, 26, 0.38) 100%),

    /* tight parallel-strand pattern · vertical stripes mimic wound filament */

    repeating-linear-gradient(90deg,

      rgba(0, 0, 0, 0.32) 0px,

      rgba(255, 255, 255, 0.06) 1px,

      rgba(0, 0, 0, 0.42) 2px,

      rgba(255, 255, 255, 0.10) 3px),

    /* tint colour wash · per material via --filament-tint */

    linear-gradient(135deg, var(--filament-tint) 0%, var(--filament-tint) 100%),

    /* deepest fallback · cool ink gradient if neither tint nor photo set */

    linear-gradient(135deg, var(--ink) 0%, var(--ink-800) 100%);

  background-size: cover, 6px 100%, cover, cover;

  background-position: center, center, center, center;

  background-repeat: no-repeat, repeat, no-repeat, no-repeat;

  background-blend-mode: normal, multiply, normal, normal;

  color: var(--paper);

  padding: 16px 18px;

  border-radius: 10px;

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 15px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-height: 80px;

  aspect-ratio: auto;

  letter-spacing: -0.01em;

  box-shadow: 0 4px 12px rgba(12, 17, 26, 0.08);

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);  /* extra legibility over textured filament */

  position: relative;

  overflow: hidden;

  isolation: isolate;

  transition: transform 200ms ease, box-shadow 200ms ease;

}

/* When a chip has a real filament photo (inline `--filament-bg: url(...)`

 * via the [style*=...] selector), drop the procedural stripes/tint and

 * layer the photo directly under the dark shader. The shader + chip text

 * shadow keep contrast strong even over a bright photo. */

.mat-row .mat-chip[style*="--filament-bg"] {

  background-image:

    /* dark shader stays on top · keeps white text legible over any photo */

    linear-gradient(135deg, rgba(12, 17, 26, 0.62) 0%, rgba(12, 17, 26, 0.38) 100%),

    /* the close-up filament photo · injected via inline --filament-bg */

    var(--filament-bg);

  background-size: cover, cover;

  background-position: center, center;

  background-repeat: no-repeat, no-repeat;

  background-blend-mode: normal, normal;

}

.mat-row .mat-chip:hover {

  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(12, 17, 26, 0.18);

}

.mat-row .mat-chip .reason {

  display: block;

  font-weight: 400;

  font-size: 11px;

  color: var(--paper);  /* paper, dimmed via opacity — mint is reserved for CTA fill not body text */

  opacity: 0.85;

  font-family: var(--font-mono);

  margin-top: 8px;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



/* ----- Pricing band · purple gradient with mint anchor + drivers list ----- */

.pricing-band {

  background:

    radial-gradient(ellipse 60% 80% at 80%   0%, rgba(14, 231, 191, 0.16) 0%, transparent 60%),

    radial-gradient(ellipse 50% 60% at  0% 100%, rgba(143, 94, 171, 0.40) 0%, transparent 60%),

    linear-gradient(135deg, var(--purple-900) 0%, var(--purple-700) 100%);

  color: var(--paper);

  padding: 44px;

  border-radius: 16px;

  box-shadow: 0 8px 32px rgba(143, 94, 171, 0.20);

  position: relative;

  overflow: hidden;

}

.pricing-band::before {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);

  background-size: 24px 24px;

  pointer-events: none;

}

.pricing-band > * { position: relative; z-index: 1; }

.pricing-band .anchor {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 56px;

  line-height: 1;

  letter-spacing: -0.03em;

  color: var(--mint-400);

  margin-bottom: 12px;

  display: inline-block;

}

.pricing-band .anchor .small {

  font-size: 22px;

  color: rgba(250, 250, 250, 0.7);

  font-weight: 700;

}

.pricing-band h3 {

  font-family: var(--font-display);

  font-size: 22px;

  font-weight: 700;

  margin: 0 0 8px;

  color: var(--paper);

  letter-spacing: -0.015em;

}

.pricing-band p {

  color: rgba(250, 250, 250, 0.85);

  font-size: 14px;

  margin: 0 0 14px;

  line-height: 1.55;

}

.pricing-drivers {

  list-style: none;

  padding: 0;

  margin: 0;

  display: grid;

  gap: 10px;

}

.pricing-drivers li {

  font-size: 13px;

  color: rgba(250, 250, 250, 0.88);

  padding-left: 26px;

  position: relative;

  line-height: 1.45;

}

.pricing-drivers li::before {

  content: '+';

  position: absolute;

  left: 0;

  top: -2px;

  color: var(--mint-400);

  font-weight: 800;

  font-size: 18px;

  line-height: 1;

}



/* ----- Objection cards · paper-white tiles ----- */

.obj-grid .obj {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  padding: 22px;

  border-radius: 12px;

  transition: border-color 200ms ease;

}

.obj-grid .obj:hover { border-color: var(--purple-300); }

.obj-grid .obj .q {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 15px;

  color: var(--ink);

  margin-bottom: 10px;

  letter-spacing: -0.01em;

}

.obj-grid .obj .a {

  font-size: 13px;

  color: var(--ink-700);

  margin: 0;

  line-height: 1.6;

}



/* ----- Risk band · purple-900 + mint number accents ----- */

.risk-band {

  background:

    radial-gradient(ellipse 60% 80% at 80%   0%, rgba(14, 231, 191, 0.12) 0%, transparent 60%),

    radial-gradient(ellipse 50% 60% at  0% 100%, rgba(143, 94, 171, 0.40) 0%, transparent 60%),

    var(--purple-900);

  color: var(--paper);

  padding: 40px 36px;

  border-radius: 16px;

  position: relative;

  overflow: hidden;

}

.risk-band::before {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);

  background-size: 24px 24px;

  pointer-events: none;

}

.risk-band > * { position: relative; z-index: 1; }

.risk-promise .num {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 26px;

  color: var(--mint-400);

  margin: 0 0 8px;

  line-height: 1;

}

.risk-promise h4 {

  font-family: var(--font-display);

  font-size: 16px;

  font-weight: 700;

  color: var(--paper);

  margin: 0 0 6px;

  letter-spacing: -0.01em;

}

.risk-promise p {

  font-size: 13px;

  color: rgba(250, 250, 250, 0.85);

  margin: 0;

  line-height: 1.55;

}



/* ----- Fulfil teaser · ink-50 bg with dashed border + paper-white pipeline tags ----- */

.fulfil-teaser {

  background: var(--ink-50);

  border: 1px dashed var(--ink-300);

  padding: 32px;

  border-radius: 12px;

}

.fulfil-teaser h3 {

  font-family: var(--font-display);

  font-size: 22px;

  font-weight: 700;

  margin: 0 0 8px;

  color: var(--ink);

  letter-spacing: -0.015em;

}

.fulfil-teaser p {

  font-size: 14px;

  color: var(--ink-700);

  margin: 0 0 16px;

  line-height: 1.55;

}

.fulfil-teaser .pipeline {

  display: flex;

  gap: 6px;

  flex-wrap: wrap;

  align-items: center;

  font-family: var(--font-mono);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  color: var(--ink-600);

}

.fulfil-teaser .pipeline span {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  padding: 8px 12px;

  border-radius: 6px;

}



/* ----- Closing CTA · purple-900 hero-style band (separate selector from .cta-band) ----- */

.close-band {

  background:

    radial-gradient(ellipse 60% 80% at 80%   0%, rgba(14, 231, 191, 0.16) 0%, transparent 60%),

    radial-gradient(ellipse 50% 60% at  0% 100%, rgba(143, 94, 171, 0.40) 0%, transparent 60%),

    var(--purple-900);

  color: var(--paper);

  padding: 64px 32px;

  border-radius: 24px;

  text-align: center;

  position: relative;

  overflow: hidden;

  box-shadow: 0 8px 32px rgba(143, 94, 171, 0.20);

}

.close-band::before {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);

  background-size: 24px 24px;

  pointer-events: none;

}

.close-band > * { position: relative; z-index: 1; }

.close-band .eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--paper);  /* sanctioned dark-context eyebrow per palette doc */

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.16);

  padding: 3px 10px;

  border-radius: 999px;

  display: inline-block;

  margin-bottom: 18px;

}

.close-band h3 {

  font-family: var(--font-display);

  font-size: clamp(1.75rem, 3vw, 2.25rem);

  font-weight: 800;

  color: var(--paper);

  margin: 0 auto 18px;

  letter-spacing: -0.025em;

  line-height: 1.15;

  max-width: 760px;

}

.close-band p {

  color: rgba(250, 250, 250, 0.85);

  font-size: 15px;

  margin-bottom: 28px;

}

.close-band .cta.secondary {

  color: var(--paper);

  border-color: rgba(250, 250, 250, 0.4);

  background: transparent;

}

.close-band .cta.secondary:hover {

  background: rgba(250, 250, 250, 0.08);

  border-color: var(--paper);

}



/* ----- §05b "Parts moulding can't make" · breathing room override -----

 * 2026-05-05 · James "Maybe some more negative space, how can we make it

 * flow a little better". The wireframe inlined `gap: 28px` on the outer

 * 1fr 1.4fr grid and `gap: 12px` on the inner 1fr 1fr cards grid. We can't

 * remove inline styles without mutating the wireframe, so we override with

 * !important via attribute selectors that match these specific inline rules.

 * v2 should add a class to the section via the orchestrator and clean these up. */

.container > section > div[style*="grid-template-columns: 1fr 1.4fr"] {

  gap: 48px !important;

  align-items: start !important;

}

.container > section > div[style*="grid-template-columns: 1fr 1.4fr"] > div[style*="grid-template-columns: 1fr 1fr"] {

  gap: 20px !important;

}

/* Soften the parts-moulding cards · slightly larger radius + more padding

 * inside, leaving the inline border + bg as authored. */

.container > section > div[style*="grid-template-columns: 1fr 1.4fr"] > div[style*="grid-template-columns: 1fr 1fr"] > div {

  border-radius: 10px !important;

  transition: border-color 200ms ease, transform 200ms ease;

}

.container > section > div[style*="grid-template-columns: 1fr 1.4fr"] > div[style*="grid-template-columns: 1fr 1fr"] > div:hover {

  border-color: var(--purple-300) !important;

  transform: translateY(-2px);

}



/* ----- Service-page footer · 4-col grid, purple-900 (matches .sec-11 pattern) ----- */

.footer {

  background: var(--purple-900);

  color: rgba(250, 250, 250, 0.85);

  padding: 48px 32px;

  border-radius: 24px;

  margin-top: 64px;

}

.footer h5, .footer h3 {

  color: var(--paper);

  font-family: var(--font-display);

  font-size: 14px;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  margin: 0 0 16px;

}

.footer a {

  color: rgba(250, 250, 250, 0.85);

  text-decoration: none;

  display: block;

  font-size: 14px;

  margin-bottom: 8px;

  transition: color 150ms ease;

}

.footer a:hover { color: var(--mint-400); }



/* ============================================================

 * EVENTS-AND-BRAND-ACTIVATIONS · service-page chrome · added 2026-05-06

 *

 * Components introduced by the events wireframe that didn't exist on the

 * gold-standard small-batch page. All decoration · layout primitives sit

 * in events-and-brand-activations.preview.css per the locked rule.

 *

 * Intent: ICP A (creative / event buyer) gets a LIGHT hero (vs the dark

 * .hero used on small-batch / product-dev) because the wireframe's

 * SYNTHESIS.md routes light treatment to creative audiences. WOW gallery

 * + workshop band model on the homepage's .case-card horizontal-snap

 * track and .cta-band purple-900 layered gradient respectively.

 * ============================================================ */



/* ----- §02 Hero · LIGHT treatment · full-bleed photo + paper-tinted overlay copy block ----- */

.hero-light {

  position: relative;

  border-radius: 24px;

  overflow: hidden;

  background: var(--ink-100);

  box-shadow: 0 8px 32px rgba(58, 37, 73, 0.10);

  isolation: isolate;

}

.hero-light .stage {

  position: relative;

  width: 100%;

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-50) 100%);

  overflow: hidden;

}

.hero-light .stage > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.hero-light .stage::after {

  /* Subtle bottom-left shader · keeps the overlay copy block sitting on a slightly

   * darker zone so the eyebrow + h1 read regardless of the photo's local exposure.

   * Lighter than the dark .hero shader (this is the LIGHT variant). */

  content: '';

  position: absolute; inset: 0;

  background:

    linear-gradient(15deg, rgba(12, 17, 26, 0.42) 0%, rgba(12, 17, 26, 0.18) 38%, rgba(12, 17, 26, 0) 62%);

  pointer-events: none;

}

.hero-light .overlay {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: flex-end;

  padding: 48px;

  pointer-events: none;

  z-index: 2;

}

.hero-light .copy {

  pointer-events: auto;

  max-width: 680px;

  background: rgba(250, 250, 247, 0.92);

  padding: 28px 32px;

  border-radius: 12px;

  border: 1px solid var(--ink-200);

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

  box-shadow: 0 4px 20px rgba(58, 37, 73, 0.10);

}

.hero-light .eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--purple-700);

  background: var(--purple-50);

  border: 1px solid var(--purple-100);

  padding: 3px 10px;

  border-radius: 999px;

  display: inline-block;

  margin-bottom: 14px;

}

.hero-light h1 {

  font-family: var(--font-display);

  font-size: clamp(1.75rem, 4vw, 2.625rem);

  line-height: 1.05;

  font-weight: 800;

  letter-spacing: -0.025em;

  color: var(--ink);

  margin: 0 0 14px;

}

/* Mint highlighter underlay · same pattern as .hero h1 .accent so the brand

 * decision (mint reserved for CTA fill, not body text colour) holds. */

.hero-light h1 .accent {

  color: inherit;

  background: linear-gradient(180deg, transparent 60%, rgba(14, 231, 191, 0.40) 60%);

  border-radius: 0;

  padding: 0 4px;

}

.hero-light h1 .accent::after { display: none; }

.hero-light .sub {

  font-size: 15px;

  color: var(--ink-700);

  margin: 0 0 20px;

  line-height: 1.55;

}

.hero-light .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-light .cta.secondary {

  color: var(--ink);

  border-color: var(--ink-300);

  background: transparent;

}

.hero-light .cta.secondary:hover {

  background: var(--ink-50);

  border-color: var(--ink);

  color: var(--ink);

}



/* ----- §02b WOW gallery · full-bleed dark, horizontal scroll-snap ----- */

.wow-gallery {

  background:

    radial-gradient(ellipse 60% 80% at 80%   0%, rgba(14, 231, 191, 0.10) 0%, transparent 60%),

    radial-gradient(ellipse 50% 60% at  0% 100%, rgba(143, 94, 171, 0.32) 0%, transparent 60%),

    var(--purple-900);

  color: var(--paper);

  border-radius: 24px;

  position: relative;

  overflow: hidden;

  padding: 44px 0;

  box-shadow: 0 8px 32px rgba(143, 94, 171, 0.20);

}

.wow-gallery::before {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);

  background-size: 24px 24px;

  pointer-events: none;

}

.wow-gallery > * { position: relative; z-index: 1; }

.wow-gallery .header {

  padding: 0 40px 22px;

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  gap: 20px;

  flex-wrap: wrap;

}

.wow-gallery h2 {

  font-family: var(--font-display);

  font-size: clamp(1.5rem, 2.6vw, 2rem);

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--paper);

  margin: 0;

}

.wow-gallery .header p {

  color: rgba(250, 250, 250, 0.72);

  font-size: 14px;

  margin: 0;

  max-width: 420px;

}

.wow-gallery .track {

  padding: 0 40px 20px;

  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;

}

.wow-gallery .track::-webkit-scrollbar { height: 6px; }

.wow-gallery .track::-webkit-scrollbar-thumb {

  background: rgba(255, 255, 255, 0.3);

  border-radius: 999px;

}

.wow-gallery .card {

  scroll-snap-align: start;

  background: var(--ink-900);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 12px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 18px;

  position: relative;

  color: var(--paper);

  overflow: hidden;

  isolation: isolate;

  transition: transform 220ms ease, border-color 220ms ease;

}

.wow-gallery .card:hover {

  transform: translateY(-3px);

  border-color: rgba(14, 231, 191, 0.5);

}

.wow-gallery .card > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  z-index: 0;

}

/* Bottom-up shader · keeps the tag chip + h4 + p readable over any photo */

.wow-gallery .card::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(12, 17, 26, 0) 35%, rgba(12, 17, 26, 0.85) 100%);

  pointer-events: none;

  z-index: 1;

}

.wow-gallery .card > .tag,

.wow-gallery .card > h4,

.wow-gallery .card > p {

  position: relative;

  z-index: 2;

}

.wow-gallery .card .tag {

  font-family: var(--font-mono);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: var(--mint-400);

  margin-bottom: 8px;

  align-self: flex-start;

  background: rgba(12, 17, 26, 0.72);

  border: 1px solid rgba(14, 231, 191, 0.3);

  padding: 3px 9px;

  border-radius: 999px;

}

.wow-gallery .card h4 {

  font-family: var(--font-display);

  font-size: 16px;

  font-weight: 700;

  color: var(--paper);

  margin: 0 0 4px;

  letter-spacing: -0.01em;

}

.wow-gallery .card p {

  font-size: 12px;

  color: rgba(250, 250, 250, 0.85);

  margin: 0;

  line-height: 1.5;

}

.wow-gallery .scroll-hint {

  padding: 0 40px;

  font-family: var(--font-mono);

  font-size: 10px;

  color: rgba(250, 250, 250, 0.5);

  letter-spacing: 0.1em;

  text-transform: uppercase;

}



/* ----- §02c Workshop band · split video-left + copy-right · dark NLM §8 wedge ----- */

.workshop-band {

  background:

    radial-gradient(ellipse 50% 70% at 100% 0%, rgba(14, 231, 191, 0.10) 0%, transparent 60%),

    radial-gradient(ellipse 50% 60% at  0% 100%, rgba(143, 94, 171, 0.36) 0%, transparent 60%),

    var(--purple-900);

  color: var(--paper);

  border-radius: 24px;

  overflow: hidden;

  position: relative;

  box-shadow: 0 8px 32px rgba(143, 94, 171, 0.20);

}

.workshop-band::before {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);

  background-size: 24px 24px;

  pointer-events: none;

}

.workshop-band > * { position: relative; z-index: 1; }

.workshop-band .video-slot {

  position: relative;

  background: var(--ink-900);

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  isolation: isolate;

}

.workshop-band .video-slot > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  z-index: 0;

}

.workshop-band .video-slot::after {

  content: '';

  position: absolute; inset: 0;

  background: linear-gradient(135deg, rgba(58, 37, 73, 0.55) 0%, rgba(12, 17, 26, 0.70) 100%);

  pointer-events: none;

  z-index: 1;

}

.workshop-band .play-icon {

  position: relative;

  z-index: 2;

  width: 72px;

  height: 72px;

  border-radius: 50%;

  background: rgba(250, 250, 250, 0.16);

  border: 2px solid var(--paper);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 26px;

  color: var(--paper);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

}

.workshop-band .copy {

  padding: 48px 44px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.workshop-band .eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--paper);

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.16);

  padding: 3px 10px;

  border-radius: 999px;

  display: inline-block;

  align-self: flex-start;

  margin-bottom: 14px;

}

.workshop-band h2 {

  font-family: var(--font-display);

  font-size: clamp(1.5rem, 2.6vw, 2rem);

  font-weight: 800;

  line-height: 1.1;

  letter-spacing: -0.02em;

  color: var(--paper);

  margin: 0 0 12px;

}

.workshop-band .copy p {

  font-size: 14px;

  color: rgba(250, 250, 250, 0.85);

  margin: 0 0 10px;

  line-height: 1.55;

}

.workshop-band .wedge {

  font-family: var(--font-mono);

  font-size: 11px;

  color: rgba(250, 250, 250, 0.65);

  margin-top: 18px;

  padding-top: 16px;

  border-top: 1px solid rgba(255, 255, 255, 0.14);

  text-transform: uppercase;

  letter-spacing: 0.1em;

  line-height: 1.5;

}



/* ----- §03 Ideas gallery · 4×2 paper-white card grid ----- */

.ideas-grid .idea-card {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  overflow: hidden;

  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;

}

.ideas-grid .idea-card:hover {

  border-color: var(--purple-300);

  transform: translateY(-2px);

  box-shadow: 0 4px 16px rgba(58, 37, 73, 0.08);

}

.ideas-grid .idea-card .visual {

  aspect-ratio: 1 / 1;

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-50) 100%);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--ink-600);

  font-family: var(--font-mono);

  font-size: 10px;

  text-align: center;

  padding: 10px;

  position: relative;

  overflow: hidden;

}

.ideas-grid .idea-card .visual > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.ideas-grid .idea-card .body { padding: 14px 16px 18px; }

.ideas-grid .idea-card h4 {

  font-family: var(--font-display);

  font-size: 14px;

  font-weight: 700;

  color: var(--ink);

  margin: 0 0 6px;

  letter-spacing: -0.01em;

}

.ideas-grid .idea-card p {

  font-size: 12px;

  color: var(--ink-700);

  margin: 0;

  line-height: 1.5;

}



/* ----- §03b Survive band · dark · checks list with mint ✓ ----- */

.survive-band {

  background:

    radial-gradient(ellipse 60% 80% at 80%   0%, rgba(14, 231, 191, 0.12) 0%, transparent 60%),

    radial-gradient(ellipse 50% 60% at  0% 100%, rgba(143, 94, 171, 0.40) 0%, transparent 60%),

    var(--purple-900);

  color: var(--paper);

  padding: 44px 40px;

  border-radius: 16px;

  position: relative;

  overflow: hidden;

  box-shadow: 0 8px 32px rgba(143, 94, 171, 0.20);

}

.survive-band::before {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);

  background-size: 24px 24px;

  pointer-events: none;

}

.survive-band > * { position: relative; z-index: 1; }

.survive-band h2 {

  font-family: var(--font-display);

  font-size: clamp(1.5rem, 2.6vw, 2rem);

  font-weight: 800;

  line-height: 1.1;

  letter-spacing: -0.02em;

  color: var(--paper);

  margin: 0 0 14px;

}

.survive-band > div > p {

  font-size: 14px;

  color: rgba(250, 250, 250, 0.85);

  margin: 0 0 10px;

  line-height: 1.55;

}

.survive-band .checks {

  list-style: none;

  padding: 0;

  margin: 18px 0 0;

  display: grid;

  grid-template-columns: 1fr;

  gap: 10px;

}

.survive-band .checks li {

  font-size: 13px;

  color: rgba(250, 250, 250, 0.92);

  padding-left: 28px;

  position: relative;

  line-height: 1.55;

}

.survive-band .checks li::before {

  content: '✓';

  position: absolute;

  left: 0;

  top: 0;

  color: var(--mint-400);

  font-weight: 800;

  font-family: var(--font-display);

  font-size: 16px;

  line-height: 1.4;

}

.survive-band .checks li strong { color: var(--paper); font-weight: 700; }

.survive-band .visual {

  position: relative;

  background: var(--ink-900);

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  overflow: hidden;

  isolation: isolate;

  height: 100%;

  min-height: 280px;

}

.survive-band .visual > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.survive-band .visual::after {

  content: '';

  position: absolute; inset: 0;

  background: linear-gradient(135deg, rgba(58, 37, 73, 0.45) 0%, rgba(12, 17, 26, 0.55) 100%);

  pointer-events: none;

}



/* ----- §07 Process · 4-col variant of .steps · inherits step / .num / .fear ----- */

/* The wireframe uses .steps-4 (4 columns) where small-batch uses .steps (4 columns

 * with optional .gate). We re-use the existing .steps step chrome by aliasing

 * descendant selectors so we don't duplicate decoration. */

.steps-4 .step {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  padding: 28px 24px;

  border-radius: 12px;

  position: relative;

  transition: border-color 200ms ease;

  min-height: 200px;

  display: flex;

  flex-direction: column;

}

.steps-4 .step:hover { border-color: var(--purple-300); }

.steps-4 .step .num {

  display: inline-block;

  width: 32px;

  height: 32px;

  line-height: 32px;

  border-radius: 50%;

  background: var(--ink);

  color: var(--paper);

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 14px;

  text-align: center;

  margin-bottom: 14px;

}

.steps-4 .step h4 {

  font-family: var(--font-display);

  font-size: 15px;

  font-weight: 700;

  color: var(--ink);

  margin: 0 0 6px;

  letter-spacing: -0.01em;

}

.steps-4 .step p {

  font-size: 13px;

  color: var(--ink-700);

  margin: 0 0 10px;

  line-height: 1.5;

}

.steps-4 .step .fear {

  font-size: 11px;

  color: var(--ink-500);

  font-style: italic;

  font-family: var(--font-mono);

  margin-top: auto;

}



/* ----- Bridge copy · centred italic hand-off line between sections ----- */

.bridge-copy {

  text-align: center;

  max-width: 680px;

  margin: 8px auto 28px;

  font-size: 17px;

  line-height: 1.4;

  color: var(--ink-700);

  font-family: var(--font-display);

  font-style: italic;

  letter-spacing: -0.01em;

}

.bridge-copy::before {

  content: '↓';

  display: block;

  color: var(--ink-400);

  font-size: 14px;

  font-style: normal;

  margin-bottom: 8px;

}



/* ===== Trust band · §02½ · 2026-05-06 =====

 * Decluttered version · drop the bordered cards, centre the stats, more

 * breathing room. Subtle vertical hairline between columns gives the eye

 * structure without feeling boxed in. */

.trust-band {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 0;

  padding: 32px 0 8px;

}

.trust-stat-block {

  text-align: center;

  padding: 8px 24px;

  border-left: 1px solid var(--ink-100);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

}

.trust-stat-block:first-child { border-left: none; }

.trust-eyebrow {

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--ink-600);

  text-transform: uppercase;

  letter-spacing: 0.14em;

  font-weight: 600;

}

.trust-stat-block .trust-stat {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 44px;

  line-height: 1;

  color: var(--ink);

  letter-spacing: -0.02em;

  margin: 0;

}

.trust-stat-block .trust-stat-suffix {

  font-size: 22px;

  font-weight: 700;

  color: var(--ink-700);

}

.trust-caption {

  font-family: var(--font-mono);

  font-size: 14px;

  font-weight: 700;

  color: var(--ink);

  letter-spacing: 0.02em;

  line-height: 1.45;

  max-width: 240px;

}

.trust-foot {

  font-family: var(--font-mono);

  font-size: 11px !important; /* a11y: bumped from 8.5px */

  font-weight: 400 !important;

  color: #646b78; /* a11y: 5.2:1 on white (was light grey ~2.5:1) */

  text-align: center;

  letter-spacing: 0.01em !important;

  text-transform: none !important;

  margin-top: 6px;

  padding-bottom: 8px;

  /* a11y: opacity:0.65 removed — it blended the text to ~2.6:1.

     The muted footnote feel is now in the colour (#646b78 = 5.2:1). */

}

.trust-foot .pc-mirror { color: var(--ink); font-weight: 700; }

@media (max-width: 720px) {

  .trust-band { grid-template-columns: 1fr; }

  .trust-stat-block { border-left: none; border-top: 1px solid var(--ink-100); padding: 24px 16px; }

  .trust-stat-block:first-child { border-top: none; }

}



/* ===== Print-queue tiers · §10b · 2026-05-06 =====

 * Inspired by 3DPRINTUK's Express vs Economy diagram. 4 cards (one per

 * tier from small-batch §09b source-of-truth). Each card has an inline

 * SVG showing a printer + 8-square queue with the user's part highlighted

 * mint at the position implied by the tier. Top tier (Express) gets a

 * dark card to match the §09b convention. Reusable across homepage +

 * service pages. */

.sec-turnaround {

  margin: 64px 0;

  padding: 0;

}

.qt-section-title {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: clamp(1.5rem, 3vw, 2rem);

  letter-spacing: -0.02em;

  color: var(--ink);

  margin: 0 0 12px;

}

.qt-section-lede {

  font-size: 14px;

  color: var(--ink-700);

  line-height: 1.55;

  max-width: 720px;

  margin: 0 0 12px;

}

.qt-section-tiers {

  list-style: none;

  padding: 0;

  margin: 0 0 16px;

  max-width: 720px;

  display: flex;

  flex-direction: column;

  gap: 6px;

  font-size: 14px;

  color: var(--ink-700);

  line-height: 1.5;

}

.qt-section-tiers li { padding-left: 14px; position: relative; }

.qt-section-tiers li::before {

  content: '';

  position: absolute;

  left: 0;

  top: 0.65em;

  width: 6px; height: 6px;

  border-radius: 50%;

  background: var(--mint-400);

}

.qt-section-tiers strong { color: var(--ink); font-weight: 700; }

.qt-section-foot {

  font-size: 13px;

  color: var(--ink-500, var(--ink-700));

  line-height: 1.5;

  max-width: 720px;

  margin: 0 0 28px;

  font-style: italic;

}

.queue-tiers {

  /* Legacy 2x2 grid · superseded by .queue-belt 2026-05-06 (James). */

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 14px;

}



/* ===== Queue belt · §10b · 2026-05-06 (James) =====

 * Single conveyor belt running left-to-right with 8 parcel positions.

 * 4 of them are TAGGED with their tier (callout above/below). Printer

 * sits at the LEFT (start of belt · the parcel at position 1 is closest

 * to going into the printer next). Stagger animation drops parcels in

 * one-by-one when the section enters view. */

.queue-belt {

  display: grid;

  grid-template-columns: 110px 1fr;

  gap: 24px;

  align-items: center;

  padding: 200px 32px 200px;         /* room for callouts above + below the belt */

  background: linear-gradient(180deg, var(--paper-white) 0%, var(--ink-50) 100%);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  position: relative;

  overflow: visible;                 /* don't clip callouts */

}

/* Printer at the left end of the belt */

.qb-printer {

  width: 100px;

  height: 110px;

  background: linear-gradient(180deg, var(--ink-700) 0%, var(--ink) 100%);

  border-radius: 8px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  box-shadow: 0 8px 24px rgba(12, 17, 26, 0.18);

  z-index: 2;

}

.qb-printer-screen {

  width: 56px;

  height: 36px;

  background: var(--mint-400);

  border-radius: 4px;

  border: 2px solid var(--ink-800);

  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.2);

  position: relative;

}

.qb-printer-screen::after {

  content: '';

  position: absolute;

  inset: 4px;

  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.18) 3px 4px);

  border-radius: 2px;

}

.qb-printer-arrow {

  position: absolute;

  right: -16px;

  top: 50%;

  transform: translateY(-50%);

  font-family: var(--font-mono);

  font-size: 22px;

  font-weight: 700;

  color: var(--mint-500);

  z-index: 3;

}

/* The belt track itself */

.qb-belt {

  position: relative;

  flex: 1;

  height: 110px;

}

.qb-belt-track {

  position: absolute;

  left: 0;

  right: 0;

  top: 50%;

  height: 38px;

  transform: translateY(-50%);

  background:

    linear-gradient(180deg, var(--ink-800) 0%, var(--ink) 50%, var(--ink-800) 100%),

    var(--ink);

  border-radius: 4px;

  box-shadow: 0 6px 16px rgba(12, 17, 26, 0.25), inset 0 1px 0 rgba(255,255,255,0.06);

  /* Slight infinite scroll on the belt texture · suggests motion */

  background-size: 100% 100%, 24px 100%;

  background-position: 0 0, 0 0;

  background-repeat: no-repeat, repeat-x;

  background-image:

    linear-gradient(180deg, var(--ink-800) 0%, var(--ink) 50%, var(--ink-800) 100%),

    repeating-linear-gradient(90deg,

      var(--ink-700) 0px,

      var(--ink-700) 12px,

      var(--ink-800) 12px,

      var(--ink-800) 24px);

}

@media (prefers-reduced-motion: no-preference) {

  .queue-belt.visible .qb-belt-track {

    animation: qb-belt-scroll 8s linear infinite;

  }

}

@keyframes qb-belt-scroll {

  from { background-position: 0 0, 0 0; }

  to   { background-position: 0 0, -240px 0; }

}

/* Parcels sit on the belt */

.qb-parcels {

  list-style: none;

  margin: 0;

  padding: 0;

  position: absolute;

  inset: 0;

  display: grid;

  grid-template-columns: repeat(8, 1fr);

  align-items: center;

}

.qb-parcel {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%;

}

.qb-parcel-box {

  width: 44px;

  height: 44px;

  background: linear-gradient(180deg, var(--paper-white) 0%, var(--paper) 100%);

  border: 1.5px solid var(--ink-300);

  border-radius: 4px;

  display: block;

  position: relative;

  box-shadow: 0 4px 10px rgba(12, 17, 26, 0.18);

  z-index: 2;

}

/* Tape strip across the box */

.qb-parcel-box::before {

  content: '';

  position: absolute;

  left: -2px; right: -2px;

  top: 50%;

  height: 6px;

  transform: translateY(-50%);

  background: rgba(143, 94, 171, 0.18);

}

/* Tagged parcels (the 4 tiers) get a mint accent + slight scale up */

.qb-parcel.qb-tag .qb-parcel-box {

  background: linear-gradient(180deg, var(--mint-200) 0%, var(--mint-300) 100%);

  border-color: var(--mint-600);

  width: 54px;

  height: 54px;

  box-shadow: 0 6px 14px rgba(14, 231, 191, 0.30), 0 2px 4px rgba(12, 17, 26, 0.10);

}

.qb-parcel.qb-tag .qb-parcel-box::before {

  background: rgba(58, 37, 73, 0.30);

}

/* Express tier · top paid · darker accent for emphasis */

.qb-parcel.qb-tag-express .qb-parcel-box {

  background: linear-gradient(180deg, var(--purple-700) 0%, var(--purple-900) 100%);

  border-color: var(--mint-400);

  box-shadow: 0 6px 14px rgba(143, 94, 171, 0.40), 0 2px 4px rgba(12, 17, 26, 0.20);

}

.qb-parcel.qb-tag-express .qb-parcel-box::before {

  background: rgba(14, 231, 191, 0.40);

}

/* Connector line from parcel to its callout · dashed mint */

.qb-callout {

  position: absolute;

  left: 50%;

  width: 220px;

  transform: translateX(-50%);

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 8px;

  padding: 14px 14px 12px;

  display: flex;

  flex-direction: column;

  gap: 6px;

  z-index: 3;

  box-shadow: 0 8px 22px rgba(58, 37, 73, 0.10);

}

.qb-callout-top {

  bottom: calc(100% + 16px);

}

.qb-callout-bottom {

  top: calc(100% + 16px);

}

/* Connector tick from belt to callout */

.qb-callout::before {

  content: '';

  position: absolute;

  left: 50%;

  width: 0;

  height: 16px;

  border-left: 2px dashed var(--mint-400);

  transform: translateX(-50%);

}

.qb-callout-top::before    { top: 100%; }

.qb-callout-bottom::before { bottom: 100%; }

/* Callout typography */

.qb-eyebrow {

  font-family: var(--font-mono);

  font-size: 9px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  color: var(--ink-600);

}

.qb-name {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 16px;

  letter-spacing: -0.01em;

  color: var(--ink);

  margin: 0;

}

.qb-tagline {

  font-size: 12px;

  color: var(--ink-700);

  line-height: 1.45;

  margin: 0;

}

.qb-foot {

  margin-top: 4px;

  padding-top: 8px;

  border-top: 1px solid var(--ink-100);

  font-family: var(--font-mono);

  font-size: 10px;

  font-weight: 700;

  color: var(--purple-900);

  letter-spacing: 0.04em;

}

/* Express callout · darker theme to match its dark parcel */

.qb-tag-express .qb-callout {

  background: var(--ink);

  border-color: var(--ink-700);

  color: var(--paper);

}

.qb-tag-express .qb-eyebrow { color: var(--ink-300); }

.qb-tag-express .qb-name { color: var(--paper-white); }

.qb-tag-express .qb-tagline { color: var(--ink-200); }

.qb-tag-express .qb-foot { color: var(--mint-300); border-top-color: var(--ink-700); }

.qb-tag-express .qb-callout::before { border-left-color: var(--mint-400); }



/* Stagger animation · parcels drop in from above when section enters view.

 * Uses the existing `.stagger > *` pattern · brand.preview.js adds `.visible`

 * to .queue-belt when it scrolls into view. */

@media (prefers-reduced-motion: no-preference) {

  .queue-belt.stagger .qb-parcel {

    opacity: 0;

    transform: translateY(-30px);

    transition: opacity 600ms ease-out, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);

  }

  .queue-belt.stagger .qb-parcel:nth-child(1) { transition-delay: 0ms; }

  .queue-belt.stagger .qb-parcel:nth-child(2) { transition-delay: 80ms; }

  .queue-belt.stagger .qb-parcel:nth-child(3) { transition-delay: 160ms; }

  .queue-belt.stagger .qb-parcel:nth-child(4) { transition-delay: 240ms; }

  .queue-belt.stagger .qb-parcel:nth-child(5) { transition-delay: 320ms; }

  .queue-belt.stagger .qb-parcel:nth-child(6) { transition-delay: 400ms; }

  .queue-belt.stagger .qb-parcel:nth-child(7) { transition-delay: 480ms; }

  .queue-belt.stagger .qb-parcel:nth-child(8) { transition-delay: 560ms; }

  .queue-belt.stagger.visible .qb-parcel {

    opacity: 1;

    transform: translateY(0);

  }

  .queue-belt.stagger .qb-callout {

    opacity: 0;

    transition: opacity 500ms ease-out 800ms;     /* fade in AFTER parcels land */

  }

  .queue-belt.stagger.visible .qb-callout {

    opacity: 1;

  }

  .queue-belt.stagger .qb-printer {

    opacity: 0;

    transform: translateX(-20px);

    transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);

  }

  .queue-belt.stagger.visible .qb-printer {

    opacity: 1;

    transform: translateX(0);

  }

}

/* Mobile · stack callouts vertically since horizontal belt won't fit */

@media (max-width: 880px) {

  .queue-belt {

    grid-template-columns: 1fr;

    padding: 32px 16px;

  }

  .qb-printer { display: none; }

  .qb-belt {

    height: auto;

    overflow-x: auto;

  }

  .qb-parcels {

    position: relative;

    grid-auto-flow: column;

    grid-template-columns: repeat(8, 60px);

    gap: 4px;

    height: 80px;

  }

  .qb-callout {

    position: relative;

    width: auto;

    margin-top: 12px;

    transform: none;

    left: 0;

  }

  .qb-callout-top, .qb-callout-bottom { top: auto; bottom: auto; }

  .qb-callout::before { display: none; }

}



/* ===== Queue snake · §10b · 2026-05-06 (James) =====

 * Replaces the straight-line conveyor with a 3-row meandering belt path.

 * SVG-based · the belt is a thick stroke following an S-bezier path with

 * smooth U-turns at each end. Parcels are <g> elements positioned along

 * the path. Callouts are HTML overlays positioned via percent of the SVG

 * viewBox (1200x760). Whole component is taller (760 unit height) for

 * the "longer down the page" feel James asked for. */

.queue-snake {

  /* 2026-05-06 (James) · NO container chrome · let the SVG flow with the

   * page bg · only the parcels + printer + callouts carry the design.

   * Bottom padding trimmed 2026-05-10 after the qx-tier-strip was removed

   * (used to be 90px to clear the tier callouts beneath). */

  position: relative;

  max-width: 1100px;

  margin: 0 auto;

  padding: 12px 0 16px;

  isolation: isolate;

  position: relative;

}



.qs-svg {

  width: 100%;

  height: auto;

  display: block;

  position: relative;

  z-index: 1;

  /* Drop shadow on the whole SVG so the belt has lift off the bg */

  filter: drop-shadow(0 12px 24px rgba(12, 17, 26, 0.12));

}

/* The belt path itself · stroked with the tread pattern + soft glow */

.qs-belt-path {

  filter: url(#qs-belt-shadow);

}

/* Parcel base · paper-white box with subtle shadow */

/* Isometric parcel faces · cardboard with 3 visible faces · 2026-05-06 */



















/* Tape across the cardboard (purple by default · mint on Express) */







.qs-tag-express 

.qs-tag-express 

.qs-tag-express 

/* Subtle wood-grain layer lines on the cardboard front */



.qs-tag 

/* Group-level drop shadow lifts every parcel off the belt */







/* Legacy 2D parcel classes (still used as fallback if isometric ever swapped back) */









.qs-tag.qs-tag-express 

.qs-tag.qs-tag-priority 



/* Layer-line texture on parcels · subtle horizontal stripes that read as

 * "this is a 3D-printed part" · brand decorator + wayfinding. */



.qs-tag 

.qs-tag-express 

/* HTML callouts overlaid on the SVG · positioned absolute via inline style */



























/* Stagger animation · 2026-05-06.

 * On `.queue-snake.visible` (added by IO when section enters view):

 *   - belt path draws via stroke-dasharray animation (1500ms)

 *   - parcels drop in from above, staggered 60ms each (16 parcels)

 *   - callouts fade in last (delay 1800ms)

 *   - printer fades in first (300ms)

 */

@media (prefers-reduced-motion: no-preference) {

  /* Belt drawing · uses stroke-dasharray to "draw" the path */

  .queue-snake .qs-belt-path,

  .queue-snake .qs-belt-rail {

    stroke-dasharray: 5000;

    stroke-dashoffset: 5000;

    transition: stroke-dashoffset 1800ms cubic-bezier(0.65, 0, 0.35, 1);

  }

  .queue-snake.visible .qs-belt-path,

  .queue-snake.visible .qs-belt-rail {

    stroke-dashoffset: 0;

  }

  /* Rail dasharray locked separately so it shows the dotted pattern correctly */

  .queue-snake .qs-belt-rail {

    stroke-dasharray: 6 8;

    stroke-dashoffset: 0;

    opacity: 0;

    transition: opacity 600ms ease-out 1500ms;

  }

  .queue-snake.visible .qs-belt-rail {

    opacity: 1;

  }

  /* Printer · fades in. (Same SVG-transform-conflict reason as parcels:

   * the inline transform="translate(8 56)" can't be augmented via CSS

   * transform without breaking position. Opacity-only animation.) */

  .queue-snake .qs-printer {

    opacity: 0;

    transition: opacity 600ms ease-out 200ms;

  }

  .queue-snake.visible .qs-printer {

    opacity: 1;

  }

  /* Parcels · fade in staggered. SVG inline transform="translate(x y)"

   * is overridden by CSS transform · so we animate opacity only. The

   * illusion of "dropping in" is carried by the staggered timing. */

  .queue-snake 

  /* Stagger 16 parcels with 60ms increments after the belt has drawn enough */

  .queue-snake .qs-parcel:nth-child(1)  { transition-delay: 1100ms; }

  .queue-snake .qs-parcel:nth-child(2)  { transition-delay: 1160ms; }

  .queue-snake .qs-parcel:nth-child(3)  { transition-delay: 1220ms; }

  .queue-snake .qs-parcel:nth-child(4)  { transition-delay: 1280ms; }

  .queue-snake .qs-parcel:nth-child(5)  { transition-delay: 1340ms; }

  .queue-snake .qs-parcel:nth-child(6)  { transition-delay: 1400ms; }

  .queue-snake .qs-parcel:nth-child(7)  { transition-delay: 1460ms; }

  .queue-snake .qs-parcel:nth-child(8)  { transition-delay: 1520ms; }

  .queue-snake .qs-parcel:nth-child(9)  { transition-delay: 1580ms; }

  .queue-snake .qs-parcel:nth-child(10) { transition-delay: 1640ms; }

  .queue-snake .qs-parcel:nth-child(11) { transition-delay: 1700ms; }

  .queue-snake .qs-parcel:nth-child(12) { transition-delay: 1760ms; }

  .queue-snake .qs-parcel:nth-child(13) { transition-delay: 1820ms; }

  .queue-snake .qs-parcel:nth-child(14) { transition-delay: 1880ms; }

  .queue-snake .qs-parcel:nth-child(15) { transition-delay: 1940ms; }

  .queue-snake .qs-parcel:nth-child(16) { transition-delay: 2000ms; }

  .queue-snake.visible 

  /* Callouts · fade in once parcels have settled */

  .queue-snake 

  .queue-snake.visible 

}

@media (prefers-reduced-motion: reduce) {

  /* All elements visible immediately, no animation */

  .queue-snake .qs-belt-path,

  .queue-snake .qs-belt-rail,

  .queue-snake .qs-printer,

  .queue-snake .qs-parcel,

  .queue-snake 

}





/* ===== Wavy queue · waypoint typography (no boxed callouts) ===== */



.qs-waypoints g:nth-child(2) ~ * 



@media (max-width: 880px) {

  

}













/* ===== Wavy queue · flat premium silhouettes (replaces cartoon parcels) ===== */







.qs-tag-express 

.qs-tag-express 

.qs-tag-express 

.qs-parcel { filter: drop-shadow(0 4px 6px rgba(12, 17, 26, 0.18)); }

.qs-tag.qs-tag-express { filter: drop-shadow(0 4px 10px rgba(14, 231, 191, 0.40)); }



/* Tier connector dots + lines · short, tight, ink colour with mint accent on Express */











/* Tier names · big enough to read against the page, no shadow boxes */







/* Origin marker · "PRINT QUEUE →" at the start, replaces cartoon printer */











/* Wavy queue · WARM CREAM parcels (popped against dark conveyor) */

.qs-iso-front { fill: #d9d0bb; stroke: none; }   /* mid warm grey-cream */

.qs-iso-right { fill: #918774; stroke: none; }   /* deep warm grey */

.qs-iso-top   { fill: #f3ede0; stroke: none; }   /* pale warm cream */

/* Tier-coded parcels · each tier gets its own colour so you can see at a glance */

.qs-tag-express .qs-iso-front { fill: var(--mint-500); }

.qs-tag-express .qs-iso-right { fill: #0a9477; }

.qs-tag-express .qs-iso-top   { fill: var(--mint-400); }

.qs-tag-priority .qs-iso-front { fill: #6a4489; }   /* purple-700 */

.qs-tag-priority .qs-iso-right { fill: #4a2f63; }

.qs-tag-priority .qs-iso-top   { fill: #8a64a4; }

.qs-tag-fast-track .qs-iso-front { fill: #f59e0b; }  /* amber */

.qs-tag-fast-track .qs-iso-right { fill: #b87707; }

.qs-tag-fast-track .qs-iso-top   { fill: #fab64a; }

.qs-tag-standard .qs-iso-front { fill: #6a7180; }    /* ink-500 grey · "back of queue" feel */

.qs-tag-standard .qs-iso-right { fill: #3a4658; }

.qs-tag-standard .qs-iso-top   { fill: #9aa3ad; }



/* Printer end-goal label */

.qs-printer-name {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.22em;

  fill: var(--mint-700, #0a9477);

  text-transform: uppercase;

}





/* ===== Wavy queue · tier cards as a SVG-overlay so each hangs under its parcel ===== */

.qx-tier-strip {

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  pointer-events: none;

  z-index: 5;

}

.qx-t {

  position: absolute;

  width: 180px;

  padding: 14px 0 4px;

  border-top: 1px solid var(--ink-200);

  display: flex;

  flex-direction: column;

  gap: 6px;

  transform: translateX(-50%);

  pointer-events: auto;

}

.qx-t .qx-n {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.18em;

  color: var(--ink-500);

  text-transform: uppercase;

}

.qx-t.qx-t-express .qx-n { color: var(--mint-600); }

.qx-t .qx-h {

  font-family: var(--font-display);

  font-size: 17px;

  font-weight: 800;

  letter-spacing: -0.012em;

  color: var(--ink);

  margin: 0;

  line-height: 1.15;

}

.qx-t .qx-time {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.04em;

  color: var(--purple-700);

  text-transform: uppercase;

  margin: 4px 0 2px;

  padding: 4px 8px;

  background: rgba(142, 92, 170, 0.10);

  border-radius: 4px;

  display: inline-block;

}

.qx-t.qx-t-express .qx-time {

  color: var(--mint-600);

  background: rgba(14, 231, 191, 0.14);

}

.qx-t.qx-t-priority .qx-time {

  color: var(--purple-700);

  background: rgba(142, 92, 170, 0.14);

}

.qx-t.qx-t-standard .qx-time {

  color: var(--ink-700);

  background: var(--ink-100, rgba(12, 17, 26, 0.05));

}

.qx-t .qx-d {

  font-size: 12px;

  color: var(--ink-700);

  line-height: 1.4;

  margin: 0;

}

.qx-t .qx-c {

  margin-top: 4px;

  padding-top: 6px;

  font-family: var(--font-mono);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.04em;

  color: var(--purple-900);

}

.qx-t.qx-t-standard .qx-c { color: var(--ink-500); }

.qx-t.qx-t-express .qx-c { color: #0a9477; }



/* Per-tier positioning · calibrated to parcel positions in the 1300×420 viewBox.

 * queue-snake content area: 1100px wide, padding-top 70px, SVG height ~355px.

 * Parcel x in viewBox / 1300 ≈ % across queue-snake.

 * Card top = parcel-bottom-y-in-CSS + small gap for connector. */

.qx-t.qx-t-standard {

  left: 15.4%;

  top: 254px;

  border-top-color: #6a7180;  /* matches ink-grey parcel */

}

.qx-t.qx-t-fast {

  left: 35.4%;

  top: 324px;

  border-top-color: #f59e0b;  /* matches amber parcel */

}

.qx-t.qx-t-priority {

  left: 52.7%;

  top: 266px;

  border-top-color: #6a4489;  /* matches purple parcel */

}

/* Express · the premium tier · subtle mint background tint, larger card,

 * thicker top border, "PREMIUM" pill next to the 01 mono number */

.qx-t.qx-t-express {

  left: 76%;

  top: 306px;

  width: 200px;

  padding: 18px 12px 12px;

  border-top: 2px solid var(--mint-400);

  background: linear-gradient(180deg,

    rgba(14, 231, 191, 0.08) 0%,

    rgba(14, 231, 191, 0) 70%);

  box-shadow: 0 6px 20px rgba(14, 231, 191, 0.10);

  transform: translateX(-50%);

}

.qx-t.qx-t-express .qx-n {

  display: inline-flex;

  align-items: center;

  gap: 8px;

}

.qx-t.qx-t-express .qx-n::after {

  content: "PREMIUM";

  font-family: var(--font-mono);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.18em;

  color: var(--paper-white);

  background: var(--mint-500);

  padding: 3px 8px 2px;

  border-radius: 99px;

}

.qx-t.qx-t-express .qx-h {

  font-size: 19px;

  letter-spacing: -0.015em;

}

.qx-t.qx-t-express .qx-d {

  color: var(--ink-700);

  font-size: 13px;

}

.qx-t.qx-t-express .qx-c {

  font-weight: 700;

  font-size: 11px;

  color: var(--mint-700, #0a9477);

}



/* 200px bottom padding reserves vertical space for the absolute-positioned

 * .qx-tier-strip cards that sit below the SVG. Restored 2026-05-12 after

 * James asked for the cards back on the live WP build (had been stripped

 * on 2026-05-10 then re-added). */

.queue-snake {

  padding-bottom: 200px;

}



@media (max-width: 880px) {

  /* On mobile the SVG shrinks · revert to a clean stacked grid below the SVG */

  .queue-snake { padding-bottom: 90px; }

  .qx-tier-strip {

    position: static;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;

    padding: 24px 16px 0;

    pointer-events: auto;

  }

  .qx-t,

  .qx-t.qx-t-standard,

  .qx-t.qx-t-fast,

  .qx-t.qx-t-priority,

  .qx-t.qx-t-express {

    position: static;

    width: auto;

    left: auto;

    top: auto;

    transform: none;

    background: none;

    padding: 18px 0 4px;

  }

}

@media (max-width: 480px) {

  .qx-tier-strip { grid-template-columns: 1fr; }

}





/* Bold connector line + dot from each tier card up to its parcel */

.qx-t::before,

.qx-t::after {

  content: "";

  position: absolute;

  left: 50%;

  pointer-events: none;

}

.qx-t::before {

  width: 2.5px;

  background: var(--ink-500);

  bottom: 100%;

  transform: translateX(-50%);

}

.qx-t::after {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: var(--ink);

  border: 2.5px solid var(--paper-bg, #f8f6f0);

  transform: translate(-50%, -50%);

  box-shadow: 0 1px 3px rgba(12, 17, 26, 0.40);

}

.qx-t-express::before { background: var(--mint-500); width: 3px; }

/* Connector dots match their parcel colour · James 2026-05-07 */

.qx-t-standard::after  { bottom: calc(100% + 124px); background: #6a7180; }   /* ink-grey */

.qx-t-standard::before { height: 124px; background: #6a7180; }

.qx-t-fast::after      { bottom: calc(100% + 74px); background: #f59e0b; }    /* amber */

.qx-t-fast::before     { height: 74px; background: #f59e0b; }

.qx-t-priority::after  { bottom: calc(100% + 112px); background: #6a4489; }   /* purple */

.qx-t-priority::before { height: 112px; background: #6a4489; }

.qx-t-express::after   { bottom: calc(100% + 80px); background: var(--mint-500); width: 12px; height: 12px; box-shadow: 0 0 12px rgba(14, 231, 191, 0.60); }

.qx-t-express::before  { height: 80px; }



/* Mobile · drop the connector pseudos when the layout collapses to a stacked grid */

@media (max-width: 880px) {

  .qx-t::before, .qx-t::after { display: none; }

}



/* Mobile · stack callouts under the SVG, since absolute-positioning

 * via percent breaks at narrow widths · 2026-05-06. */

@media (max-width: 880px) {

  .queue-snake { padding: 16px; }

  .queue-snake 

  .queue-snake 

}



.qx-version-note {

  font-weight: 500;

  text-transform: none;

  letter-spacing: 0.04em;

  color: var(--ink-600);

  font-size: 10px;

  margin-left: 6px;

}





/* ===== Option 3 · Build-plate grid ===== */

.queue-bed { max-width: 980px; margin: 0 auto; }

.qb2-bed-frame {

  background: linear-gradient(180deg, var(--ink-800) 0%, var(--ink) 100%);

  border: 2px solid var(--ink-700);

  border-radius: 10px; padding: 16px;

  position: relative;

  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.30), 0 6px 24px rgba(12, 17, 26, 0.18);

}

.qb2-bed-rails {

  position: absolute; inset: 6px;

  border: 1px dashed rgba(14, 231, 191, 0.20);

  border-radius: 6px; pointer-events: none;

}

.qb2-zones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

.qb2-zone {

  background: var(--paper-white); border: 1px solid var(--ink-200);

  border-radius: 8px; padding: 18px 16px 16px;

  display: flex; flex-direction: column; gap: 10px;

  position: relative;

  transition: transform 200ms ease, box-shadow 200ms ease;

}

.qb2-zone:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(58, 37, 73, 0.12); }

.qb2-zone-express {

  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-800) 100%);

  border-color: var(--mint-400); color: var(--paper);

}

.qb2-zone-express::after {

  content: 'PRINTING NOW';

  position: absolute; top: 10px; right: 10px;

  font-family: var(--font-mono); font-size: 8px; font-weight: 800;

  letter-spacing: 0.14em; color: var(--mint-300);

  background: rgba(14, 231, 191, 0.10);

  padding: 3px 6px; border-radius: 3px;

  border: 1px solid rgba(14, 231, 191, 0.30);

}

.qb2-eyebrow {

  font-family: var(--font-mono); font-size: 9px; font-weight: 600;

  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-600);

}

.qb2-zone-express .qb2-eyebrow { color: var(--ink-300); }

.qb2-name {

  font-family: var(--font-display); font-weight: 800; font-size: 16px;

  letter-spacing: -0.01em; margin: 0; color: var(--ink);

}

.qb2-zone-express .qb2-name { color: var(--paper-white); }

.qb2-print {

  height: 80px; background: var(--ink-50);

  border: 1px solid var(--ink-200); border-radius: 4px;

  position: relative; overflow: hidden;

}

.qb2-zone-express .qb2-print { background: var(--ink-800); border-color: var(--ink-700); }

.qb2-cube {

  position: absolute; bottom: 14px; left: 50%;

  transform: translateX(-50%); width: 36px;

  background:

    repeating-linear-gradient(0deg, transparent 0 4px, rgba(0, 0, 0, 0.18) 4px 5px),

    linear-gradient(180deg, var(--mint-300) 0%, var(--mint-400) 100%);

  border: 1px solid var(--mint-600); border-radius: 1px;

  box-shadow: 0 2px 6px rgba(14, 231, 191, 0.30);

}

.qb2-cube-100 { height: 56px; }

.qb2-cube-75  { height: 40px; }

.qb2-cube-50  { height: 26px; }

.qb2-cube-25  { height: 12px; }

.qb2-bed-line {

  position: absolute; bottom: 12px; left: 8px; right: 8px;

  height: 2px;

  background: linear-gradient(90deg, var(--ink-300), var(--ink-500), var(--ink-300));

  border-radius: 1px;

}

.qb2-zone-express .qb2-bed-line {

  background: linear-gradient(90deg, var(--ink-700), var(--mint-600), var(--ink-700));

}

.qb2-tagline { font-size: 12px; color: var(--ink-700); line-height: 1.45; margin: 0; flex: 1; }

.qb2-zone-express .qb2-tagline { color: var(--ink-200); }

.qb2-foot {

  margin-top: 4px; padding-top: 8px;

  border-top: 1px solid var(--ink-100);

  font-family: var(--font-mono); font-size: 10px; font-weight: 700;

  color: var(--purple-900); letter-spacing: 0.04em;

}

.qb2-zone-express .qb2-foot { color: var(--mint-300); border-top-color: var(--ink-700); }

@media (prefers-reduced-motion: no-preference) {

  .queue-bed.stagger .qb2-zone {

    opacity: 0; transform: translateY(20px);

    transition: opacity 600ms ease-out, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);

  }

  .queue-bed.stagger .qb2-zone:nth-child(1) { transition-delay: 100ms; }

  .queue-bed.stagger .qb2-zone:nth-child(2) { transition-delay: 250ms; }

  .queue-bed.stagger .qb2-zone:nth-child(3) { transition-delay: 400ms; }

  .queue-bed.stagger .qb2-zone:nth-child(4) { transition-delay: 550ms; }

  .queue-bed.stagger.visible .qb2-zone { opacity: 1; transform: translateY(0); }

}

@media (max-width: 880px) { .qb2-zones { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 480px) { .qb2-zones { grid-template-columns: 1fr; } }



.queue-tier {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 8px;

  padding: 22px 20px;

  display: flex;

  flex-direction: column;

  gap: 14px;

  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;

}

.queue-tier:hover {

  border-color: var(--purple-300);

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(143, 94, 171, 0.10);

}

.queue-tier.qt-top {

  background: var(--ink);

  border-color: var(--ink-700);

  color: var(--paper);

}

.queue-tier .qt-eyebrow {

  font-family: var(--font-mono);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--ink-600);

  font-weight: 600;

}

.queue-tier.qt-top .qt-eyebrow { color: var(--ink-300); }

.queue-tier .qt-name {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 18px;

  letter-spacing: -0.01em;

  margin: 0;

  color: var(--ink);

}

.queue-tier.qt-top .qt-name { color: var(--paper-white); }

.qt-diagram {

  width: 100%;

  height: 64px;

  display: block;

  margin: 4px 0 6px;

}

.qt-diagram .qt-printer {

  fill: var(--paper-white);

  stroke: var(--ink-300);

  stroke-width: 1.5;

}

.queue-tier.qt-top .qt-diagram .qt-printer {

  fill: var(--ink-800);

  stroke: var(--ink-500);

}

.qt-diagram .qt-printer-screen {

  fill: var(--mint-100);

  stroke: var(--ink-300);

  stroke-width: 0.75;

}

.queue-tier.qt-top .qt-diagram .qt-printer-screen { fill: var(--mint-400); stroke: var(--ink-700); }

.qt-diagram .qt-arrow { stroke: var(--ink-500); stroke-width: 1.5; }

.queue-tier.qt-top .qt-diagram .qt-arrow { stroke: var(--ink-300); }

.qt-diagram .qt-q {

  fill: var(--paper);

  stroke: var(--ink-300);

  stroke-width: 1;

}

.queue-tier.qt-top .qt-diagram .qt-q { fill: var(--ink-700); stroke: var(--ink-500); }

.qt-diagram .qt-q-active {

  fill: var(--mint-400);

  stroke: var(--mint-600);

  stroke-width: 1.5;

}

.qt-diagram .qt-q-label {

  font-family: var(--font-mono);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 0.08em;

  fill: var(--purple-900);

  text-transform: uppercase;

}

.queue-tier.qt-top .qt-diagram .qt-q-label { fill: var(--mint-200); }

.queue-tier .qt-tagline {

  font-size: 13px;

  color: var(--ink-700);

  line-height: 1.5;

  margin: 0;

  font-weight: 600;

}

.queue-tier.qt-top .qt-tagline { color: var(--ink-100); }

.queue-tier .qt-bullets {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.queue-tier .qt-bullets li {

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--ink-700);

  line-height: 1.5;

  padding-left: 14px;

  position: relative;

}

.queue-tier.qt-top .qt-bullets li { color: var(--ink-200); }

.queue-tier .qt-bullets li::before {

  content: '+';

  position: absolute;

  left: 0;

  top: 0;

  color: var(--mint-500);

  font-weight: 700;

}

.queue-tier .qt-foot {

  margin-top: auto;

  padding-top: 12px;

  border-top: 1px solid var(--ink-100);

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  color: var(--purple-900);

  letter-spacing: 0.04em;

}

.queue-tier.qt-top .qt-foot { color: var(--mint-300); border-top-color: var(--ink-700); }

.qt-section-foot {

  margin: 24px auto 0;

  font-size: 13px;

  color: var(--ink-700);

  line-height: 1.55;

  max-width: 720px;

  text-align: center;

}

@media (max-width: 520px) {

  .queue-tiers { grid-template-columns: 1fr; }

}



/* ============================================================

 * PRODUCT-DEVELOPMENT SERVICE-PAGE COMPONENTS · added 2026-05-06

 *

 * Five new selector families needed by the product-development

 * wireframe. Strictly additive · no modifications to any prior

 * rule. Each block below maps to one wireframe section.

 *

 *   1. Hero · intake radio group (.hero .intake)

 *   2. ICP card · 4-state grid (.icp-card .states / .state)

 *   3. Wedge "moulding can't make" feature

 *      (.wedge-intro / .wedge-grid / .wedge-card / .impossible)

 *   4. Steps-5 · 5-step process inheriting .steps chrome with

 *      an "ITERATION GATE" pill instead of "APPROVAL GATE"

 *

 * Layout primitives (grid track counts, gaps, mobile collapse)

 * stay in product-development.preview.css per locked memory rule

 * feedback_brand_rules_locked.md. Decoration only here.

 * ============================================================ */



/* ----- 1 · Hero intake radio group · sits inside dark .hero -----

 * Paper-tinted bg + paper border on the wrapper. Each option is a

 * subtle tile that lifts on hover. .selected gets a heavier border

 * and lighter bg to read as "this is your state".

 */

.hero .intake {

  margin-bottom: 24px;

  padding: 16px 18px;

  background: rgba(255, 255, 255, 0.06);

  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.14);

}

.hero .intake-label {

  font-family: var(--font-mono);

  font-size: 11px;

  text-transform: uppercase;

  color: var(--ink-300);

  letter-spacing: 0.12em;

  margin-bottom: 12px;

}

.hero .intake .opt {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 11px 14px;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.18);

  border-radius: 8px;

  font-size: 13px;

  color: var(--ink-200);

  cursor: pointer;

  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;

  user-select: none;

}

.hero .intake .opt:hover {

  background: rgba(255, 255, 255, 0.10);

  border-color: rgba(255, 255, 255, 0.32);

}

.hero .intake .opt.selected {

  background: rgba(255, 255, 255, 0.14);

  border-color: var(--mint-300);

  color: var(--paper-white);

}

.hero .intake .opt input[type="radio"] {

  accent-color: var(--mint-400);

  margin: 0;

  width: 14px;

  height: 14px;

}



/* ----- 2 · ICP card · 4-state grid -----

 * Sits inside .icp-card (paper-50 bg) on the right column. Each

 * state is a small paper-white tile with a mono eyebrow + body

 * sentence. Provides an at-a-glance "where am I in the journey"

 * diagnostic for product-dev buyers.

 */

.icp-card .state {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 8px;

  padding: 12px 14px;

  font-size: 13px;

  color: var(--ink-700);

  line-height: 1.5;

  transition: border-color 200ms ease;

}

.icp-card .state:hover { border-color: var(--purple-300); }

.icp-card .state strong {

  display: block;

  font-family: var(--font-mono);

  font-size: 10px;

  text-transform: uppercase;

  color: var(--ink);

  letter-spacing: 0.1em;

  margin-bottom: 6px;

}



/* ----- 3 · "Parts moulding can't make" wedge (load-bearing feature) -----

 * Two-part feature: a wide intro row (.wedge-intro · 1.1fr/1fr text + visual)

 * followed by a 6-card grid (.wedge-grid · 3-col cards each with photo +

 * body + "Moulding equivalent: ✗ ..." mono chip).

 *

 * Replicates the .case paper-white pattern (border, hover lift, photo slot

 * with definite height) so the feature reads as a continuation of the

 * service-page card vocabulary rather than a foreign element.

 */

.wedge-intro h2 {

  font-family: var(--font-display);

  font-size: 32px;

  line-height: 1.1;

  letter-spacing: -0.02em;

  font-weight: 800;

  color: var(--ink);

  margin: 0 0 16px;

}

.wedge-intro p {

  font-size: 15px;

  color: var(--ink-700);

  line-height: 1.55;

  margin: 0 0 12px;

}

.wedge-intro p.tagline {

  font-size: 14px;

  color: var(--ink-600);

  font-style: italic;

  margin-top: 14px;

}

.wedge-intro .visual {

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-50) 100%);

  border-radius: 12px;

  height: 280px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--ink-600);

  font-family: var(--font-mono);

  font-size: 11px;

  text-align: center;

  padding: 16px;

  position: relative;

  overflow: hidden;

}

.wedge-intro .visual > img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  border-radius: inherit;

}



.wedge-card {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  overflow: hidden;

  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;

  display: flex;

  flex-direction: column;

}

.wedge-card:hover {

  border-color: var(--purple-300);

  transform: translateY(-2px);

  box-shadow: 0 4px 16px rgba(58, 37, 73, 0.08);

}

.wedge-card .visual {

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-50) 100%);

  height: 160px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--ink-600);

  font-family: var(--font-mono);

  font-size: 10px;

  text-align: center;

  padding: 12px;

  position: relative;

  overflow: hidden;

}

.wedge-card .visual > img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.wedge-card .body {

  padding: 18px 18px 16px;

  display: flex;

  flex-direction: column;

  flex: 1;

}

.wedge-card .body h4 {

  font-family: var(--font-display);

  font-size: 16px;

  font-weight: 700;

  color: var(--ink);

  margin: 0 0 8px;

  letter-spacing: -0.01em;

}

.wedge-card .body p {

  font-size: 13px;

  color: var(--ink-700);

  margin: 0;

  line-height: 1.55;

}

.wedge-card .impossible {

  display: inline-block;

  margin-top: 12px;

  padding-top: 12px;

  border-top: 1px solid var(--ink-100);

  font-family: var(--font-mono);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--purple-700);

  font-weight: 700;

}



/* ----- 4 · Steps-5 · 5-step process inheriting .steps chrome -----

 * The wireframe uses `<div class="steps steps-5">` so the existing

 * .steps .step / .steps .step.gate / .num / h4 / p / .fear chrome

 * cascades naturally. The only override below changes the gate pill

 * content from "APPROVAL GATE" (small-batch · first-article approval)

 * to "ITERATION GATE" (product-dev · iteration loop).

 *

 * Specificity is identical (0,2,1) to .steps .step.gate::after but

 * this rule appears LATER in the file so it wins for elements that

 * have BOTH .steps and .steps-5 classes, which is the only shape we

 * use this on.

 */

.steps-5 .step.gate::after { content: 'ITERATION GATE'; }



/* ============================================================

 * CAD-DESIGN-SERVICES COMPONENTS · added 2026-05-06

 *

 * Service-page-specific chrome for the CAD design + reverse engineering

 * page. Rules below are reusable on any future service page that adopts

 * the same component shapes (e.g. .ip-strip on niche-and-obsolete-parts,

 * .canny-band on events / large-scale, .humans-close on print-and-fulfil).

 *

 * Sign-off A1-A14 from James 2026-05-06 (audit table). All chrome lives

 * here per locked rule feedback_brand_rules_locked.md; per-page CSS holds

 * layout primitives only (grid track counts, sticky offsets, mobile

 * collapse).

 * ============================================================ */



/* ----- Hero · CAD-to-real 4-frame scroll-pin -----

 * Visual wedge of the CAD page · zero UK / international competitors found

 * doing this (research/wireframe-research-audit-2026-04-23.md §A). Pin-scroll

 * holds the 4-frame visual deck while the right sidebar copy stays fixed.

 * Scroll progress cross-fades frames 1 → 2 → 3 → 4. JS observer in

 * brand.preview.js maps scrollY → activeIndex. */

.hero-cadtoreal {

  position: relative;

  border-radius: 24px;

  overflow: hidden;

  background:

    radial-gradient(ellipse 60% 80% at 80%   0%, rgba(14, 231, 191, 0.16) 0%, transparent 60%),

    radial-gradient(ellipse 50% 60% at  0% 100%, rgba(143, 94, 171, 0.40) 0%, transparent 60%),

    var(--purple-900);

  box-shadow: 0 8px 32px rgba(143, 94, 171, 0.20), 0 2px 8px rgba(143, 94, 171, 0.12);

}

.cadtoreal-scroll-wrap {

  height: 320vh;

  position: relative;

}

.cadtoreal-pin {

  position: sticky;

  top: 0;

  height: 100vh;

  width: 100%;

  display: flex;

  align-items: stretch;

}

.cadtoreal-stage {

  flex: 1;

  position: relative;

  overflow: hidden;

}

.cadtoreal-stage::before {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);

  background-size: 24px 24px;

  pointer-events: none;

  z-index: 3;

}

.cadtoreal-frame {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  transition: opacity 600ms ease-out;

  z-index: 1;

}

.cadtoreal-frame.active { opacity: 1; z-index: 2; }

.cadtoreal-frame > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.cadtoreal-frame::after {

  content: '';

  position: absolute; inset: 0;

  background: linear-gradient(135deg, rgba(58, 37, 73, 0.42) 0%, rgba(12, 17, 26, 0.32) 60%, rgba(12, 17, 26, 0.18) 100%);

  pointer-events: none;

  z-index: 2;

}

.cadtoreal-sidebar {

  width: 380px;

  padding: 56px 40px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  background: linear-gradient(180deg, rgba(12, 17, 26, 0.78) 0%, rgba(58, 37, 73, 0.72) 100%);

  border-left: 1px solid rgba(255, 255, 255, 0.08);

  z-index: 10;

  position: relative;

  color: var(--paper);

}

.cadtoreal-sidebar .eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--paper);

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.16);

  padding: 3px 10px;

  border-radius: 999px;

  display: inline-block;

  margin-bottom: 16px;

}

.cadtoreal-sidebar h1 {

  font-family: var(--font-display);

  font-size: clamp(1.75rem, 3vw, 2.25rem);

  line-height: 1.1;

  font-weight: 800;

  letter-spacing: -0.025em;

  color: var(--paper);

  margin: 0 0 18px;

}

.cadtoreal-sidebar h1 .accent {

  color: inherit;

  background: linear-gradient(180deg, transparent 60%, rgba(14, 231, 191, 0.32) 60%);

  border-radius: 0;

  padding: 0 4px;

}

.cadtoreal-sidebar .sub {

  color: rgba(250, 250, 250, 0.78);

  font-size: 15px;

  margin: 0 0 22px;

  line-height: 1.55;

}

.cadtoreal-sidebar .micro-proofs {

  display: grid;

  gap: 10px;

  margin-bottom: 24px;

}

.cadtoreal-sidebar .micro-proofs .mp {

  font-family: var(--font-mono);

  font-size: 11px;

  color: rgba(250, 250, 250, 0.72);

  letter-spacing: 0.04em;

  padding-left: 22px;

  position: relative;

  line-height: 1.45;

}

.cadtoreal-sidebar .micro-proofs .mp::before {

  content: '+';

  position: absolute;

  left: 0;

  top: -1px;

  color: var(--mint-400);

  font-weight: 800;

  font-family: var(--font-display);

  font-size: 16px;

  line-height: 1;

}

.cadtoreal-sidebar .cta-row {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-bottom: 28px;

}

.cadtoreal-sidebar .cta.secondary {

  color: var(--paper);

  border-color: rgba(250, 250, 250, 0.4);

  background: transparent;

}

.cadtoreal-sidebar .cta.secondary:hover {

  background: rgba(250, 250, 250, 0.08);

  border-color: var(--paper);

}

.cadtoreal-sidebar .frame-tracker {

  border-top: 1px solid rgba(255, 255, 255, 0.16);

  padding-top: 18px;

  margin-top: auto;

}

.cadtoreal-sidebar .frame-tracker .ft-label {

  font-family: var(--font-mono);

  font-size: 10px;

  color: rgba(250, 250, 250, 0.55);

  letter-spacing: 0.12em;

  text-transform: uppercase;

  margin-bottom: 12px;

}

.cadtoreal-sidebar .frame-tracker ol {

  list-style: none;

  padding: 0;

  margin: 0;

  display: grid;

  gap: 8px;

}

.cadtoreal-sidebar .frame-tracker li {

  font-family: var(--font-mono);

  font-size: 11px;

  color: rgba(250, 250, 250, 0.55);

  display: flex;

  align-items: center;

  gap: 12px;

  transition: color 200ms ease;

}

.cadtoreal-sidebar .frame-tracker li .dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.18);

  transition: background 200ms ease, transform 200ms ease;

  flex-shrink: 0;

}

.cadtoreal-sidebar .frame-tracker li.active { color: var(--paper); }

.cadtoreal-sidebar .frame-tracker li.active .dot {

  background: var(--mint-400);

  transform: scale(1.25);

}

.scroll-hint {

  position: absolute;

  bottom: 24px;

  left: calc(50% - 190px);

  transform: translateX(-50%);

  color: rgba(255, 255, 255, 0.55);

  font-family: var(--font-mono);

  font-size: 11px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  z-index: 11;

  animation: scroll-hint-bob 2.2s ease-in-out infinite;

  pointer-events: none;

}

@keyframes scroll-hint-bob {

  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }

  50%      { transform: translateX(-50%) translateY(6px); opacity: 0.85; }

}

@media (max-width: 860px) {

  .cadtoreal-scroll-wrap { height: auto; }

  .cadtoreal-pin {

    position: relative;

    top: auto;

    height: auto;

    flex-direction: column-reverse;

  }

  .cadtoreal-stage {

    aspect-ratio: 4 / 3;

    min-height: 320px;

  }

  .cadtoreal-sidebar {

    width: 100%;

    padding: 32px 24px;

    border-left: none;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

  }

  .cadtoreal-sidebar h1 { font-size: 26px; }

  .scroll-hint { display: none; }

}



/* ----- IP / NDA strip · above-fold trust band -----

 * Above-fold IP placement is the #1 competitor gap in the steal sheet.

 * No competitor in UK Tier 1 puts NDA copy above the fold; we do. */

.ip-strip {

  background: var(--ink);

  color: var(--paper);

  padding: 24px 32px;

  border-radius: 12px;

  display: grid;

  grid-template-columns: auto 1fr auto;

  gap: 28px;

  align-items: center;

  position: relative;

  overflow: hidden;

}

.ip-strip::before {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0);

  background-size: 20px 20px;

  pointer-events: none;

}

.ip-strip > * { position: relative; z-index: 1; }

.ip-strip .icon-stack {

  font-family: var(--font-mono);

  font-size: 16px;

  color: var(--mint-400);

  font-weight: 700;

  letter-spacing: 0.12em;

  line-height: 1.4;

  text-align: center;

  border-right: 1px solid rgba(255, 255, 255, 0.16);

  padding-right: 24px;

}

.ip-strip p {

  margin: 0;

  font-size: 14px;

  line-height: 1.55;

  color: rgba(250, 250, 250, 0.85);

}

.ip-strip p strong { color: var(--paper); font-weight: 700; }

.ip-strip .ip-badges {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

}

.ip-strip .ip-badges span {

  font-family: var(--font-mono);

  font-size: 10px;

  color: rgba(250, 250, 250, 0.78);

  letter-spacing: 0.08em;

  text-transform: uppercase;

  background: rgba(255, 255, 255, 0.06);

  padding: 6px 12px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.14);

}

@media (max-width: 720px) {

  .ip-strip { grid-template-columns: 1fr; gap: 18px; }

  .ip-strip .icon-stack { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.16); padding-right: 0; padding-bottom: 16px; }

}



/* ----- Cost-contrast anchor · ink-dark figure box -----

 * Hormozi-style contrast close · since we don't publish a rate, anchor

 * the service against the cost of a botched design reaching tooling. */

.cost-contrast {

  background: var(--ink);

  color: var(--paper);

  padding: 28px 32px;

  border-radius: 12px;

  display: grid;

  grid-template-columns: auto 1fr;

  gap: 32px;

  align-items: center;

  position: relative;

  overflow: hidden;

}

.cost-contrast::before {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0);

  background-size: 20px 20px;

  pointer-events: none;

}

.cost-contrast > * { position: relative; z-index: 1; }

.cost-contrast .figure {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 40px;

  line-height: 1;

  letter-spacing: -0.025em;

  color: var(--paper);

}

.cost-contrast .figure .small {

  font-size: 18px;

  color: rgba(250, 250, 250, 0.6);

  font-weight: 700;

}

.cost-contrast .figure .sub {

  font-family: var(--font-mono);

  font-size: 10px;

  color: rgba(250, 250, 250, 0.55);

  letter-spacing: 0.12em;

  text-transform: uppercase;

  margin-top: 8px;

  font-weight: 500;

}

.cost-contrast h4 {

  font-family: var(--font-display);

  font-size: 17px;

  font-weight: 700;

  color: var(--paper);

  margin: 0 0 6px;

  letter-spacing: -0.01em;

  line-height: 1.3;

}

.cost-contrast p {

  font-size: 13.5px;

  color: rgba(250, 250, 250, 0.78);

  margin: 0;

  line-height: 1.55;

}

@media (max-width: 720px) {

  .cost-contrast { grid-template-columns: 1fr; gap: 18px; text-align: left; }

}



/* ----- Bridge copy · already covered by the existing .bridge-copy + ::before

 *       rule earlier in this file (centred italic, ↓ arrow above). The CAD page

 *       reuses that rule as-is; no per-page override needed. ----- */



/* ----- Intake tiles · 5-tile intake counter ----- */

.intake-tile {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  padding: 22px 18px;

  text-align: center;

  display: flex;

  flex-direction: column;

  gap: 10px;

  align-items: center;

  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;

}

.intake-tile:hover {

  border-color: var(--purple-300);

  transform: translateY(-2px);

  box-shadow: 0 4px 16px rgba(58, 37, 73, 0.08);

}

.intake-tile .iconbox {

  width: 52px;

  height: 52px;

  border-radius: 50%;

  background: var(--ink-50);

  border: 1px solid var(--ink-200);

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-mono);

  font-weight: 800;

  font-size: 16px;

  color: var(--purple-700);

  letter-spacing: 0;

}

.intake-tile h4 {

  font-family: var(--font-display);

  font-size: 14px;

  font-weight: 700;

  color: var(--ink);

  margin: 0;

  letter-spacing: -0.01em;

}

.intake-tile p {

  font-size: 12.5px;

  color: var(--ink-700);

  margin: 0;

  line-height: 1.5;

  flex: 1;

}

.intake-tile .formats {

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--purple-700);

  background: var(--purple-50);

  border: 1px solid var(--purple-100);

  padding: 4px 10px;

  border-radius: 999px;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  margin-top: 4px;

}



/* ----- Steps · tolerance chip on .step (CAD process ladder reuses .steps) ----- */

.steps .step .tol {

  display: inline-block;

  background: var(--ink-50);

  border: 1px solid var(--ink-200);

  border-radius: 6px;

  padding: 6px 10px;

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--ink-700);

  letter-spacing: 0.04em;

  margin-top: auto;

}

.steps .step .tol strong {

  color: var(--purple-900);

  font-weight: 800;

}

.steps .step.gate .tol {

  background: var(--paper-white);

  border-color: var(--purple-200);

}

.steps .step.gate .tol strong { color: var(--purple-700); }



/* ----- Turnaround band · 3-tier committed-window ladder -----

 * Different concept from .queue-tiers: this shows committed day-counts

 * (48hr / 3-5 days / 10-14 days) per project shape, with the middle

 * "Standard" tile in dark emphasis. No queue-position diagram. */

.turnaround-band {

  background: var(--ink-50);

  border: 1px solid var(--ink-200);

  padding: 36px 32px;

  border-radius: 16px;

}

.turnaround-band > h2 {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: clamp(1.5rem, 3vw, 1.75rem);

  letter-spacing: -0.02em;

  color: var(--ink);

  margin: 0 0 8px;

}

.turnaround-band > .lede {

  font-size: 14px;

  color: var(--ink-700);

  max-width: 720px;

  margin: 0 0 24px;

  line-height: 1.55;

}

.turnaround-tier {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 10px;

  padding: 26px 22px;

  text-align: center;

  display: flex;

  flex-direction: column;

  gap: 8px;

  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;

}

.turnaround-tier:hover {

  border-color: var(--purple-300);

  transform: translateY(-2px);

  box-shadow: 0 4px 16px rgba(58, 37, 73, 0.08);

}

.turnaround-tier.headline {

  background: var(--ink);

  border-color: var(--ink-700);

  color: var(--paper);

  box-shadow: 0 8px 24px rgba(12, 17, 26, 0.18);

}

.turnaround-tier.headline:hover {

  border-color: var(--mint-400);

  transform: translateY(-2px);

  box-shadow: 0 12px 32px rgba(12, 17, 26, 0.24);

}

.turnaround-tier h3 {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  color: var(--ink-600);

  letter-spacing: 0.14em;

  text-transform: uppercase;

  margin: 0 0 4px;

}

.turnaround-tier.headline h3 { color: var(--mint-300); }

.turnaround-tier .days {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 42px;

  line-height: 1;

  letter-spacing: -0.025em;

  color: var(--ink);

  margin: 0;

}

.turnaround-tier.headline .days { color: var(--paper); }

.turnaround-tier .days .unit {

  font-size: 16px;

  color: var(--ink-600);

  font-weight: 600;

}

.turnaround-tier.headline .days .unit { color: rgba(250, 250, 250, 0.7); }

.turnaround-tier .for {

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--ink-600);

  letter-spacing: 0.06em;

  text-transform: uppercase;

  margin: 6px 0 8px;

  line-height: 1.4;

}

.turnaround-tier.headline .for { color: var(--mint-200); }

.turnaround-tier p {

  font-size: 13px;

  color: var(--ink-700);

  margin: 0;

  line-height: 1.55;

}

.turnaround-tier.headline p { color: rgba(250, 250, 250, 0.85); }



/* ----- Capabilities band · 2x2 cap-card grid -----

 * Four capability cards: CAD-stack chips, named engineers, tolerance ladder

 * table, industries served. Each card shares the paper-white base + hover

 * lift; internal patterns (chips / human stack / table / list) are specific. */

.cap-card {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  padding: 26px 24px;

  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;

}

.cap-card:hover {

  border-color: var(--purple-300);

  transform: translateY(-2px);

  box-shadow: 0 4px 16px rgba(58, 37, 73, 0.08);

}

.cap-card h4 {

  font-family: var(--font-display);

  font-size: 16px;

  font-weight: 700;

  color: var(--ink);

  margin: 0 0 14px;

  padding-bottom: 10px;

  border-bottom: 1px solid var(--ink-100);

  letter-spacing: -0.01em;

}

.cap-card .software-row {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin-bottom: 12px;

}

.cap-card .software-row .chip {

  background: var(--ink);

  color: var(--paper);

  padding: 6px 12px;

  border-radius: 999px;

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.04em;

}

.cap-card .software-row .chip.secondary {

  background: var(--ink-50);

  color: var(--ink-800);

  border: 1px solid var(--ink-200);

  font-weight: 500;

}

.cap-card p {

  font-size: 13px;

  color: var(--ink-700);

  margin: 6px 0 0;

  line-height: 1.55;

}

.cap-card ul {

  list-style: none;

  padding: 0;

  margin: 12px 0 0;

  display: grid;

  gap: 8px;

}

.cap-card ul li {

  font-size: 13px;

  color: var(--ink-700);

  padding-left: 22px;

  position: relative;

  line-height: 1.5;

}

.cap-card ul li::before {

  content: '+';

  position: absolute;

  left: 0;

  top: -1px;

  color: var(--mint-500);

  font-weight: 800;

  font-family: var(--font-display);

  font-size: 16px;

  line-height: 1;

}

.cap-card .human {

  display: grid;

  grid-template-columns: 64px 1fr;

  gap: 14px;

  align-items: center;

  margin-bottom: 10px;

}

.cap-card .human .headshot {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-50) 100%);

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-mono);

  font-size: 9px;

  color: var(--ink-600);

  text-align: center;

  padding: 4px;

  overflow: hidden;

  position: relative;

}

.cap-card .human .headshot > img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: inherit;

  display: block;

}

.cap-card .human .bio strong {

  display: block;

  font-family: var(--font-display);

  font-size: 14px;

  color: var(--ink);

  font-weight: 700;

  letter-spacing: -0.01em;

}

.cap-card .human .bio span {

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--ink-600);

  letter-spacing: 0.04em;

}

.cap-card .tol-ladder {

  width: 100%;

  border-collapse: collapse;

  margin-top: 8px;

  font-size: 12.5px;

}

.cap-card .tol-ladder th,

.cap-card .tol-ladder td {

  padding: 9px 10px;

  border-bottom: 1px solid var(--ink-100);

  text-align: left;

  vertical-align: top;

}

.cap-card .tol-ladder th {

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--ink-600);

  letter-spacing: 0.08em;

  text-transform: uppercase;

  font-weight: 600;

}

.cap-card .tol-ladder tbody tr:last-child td { border-bottom: none; }

.cap-card .tol-ladder td.tol-val {

  font-family: var(--font-mono);

  color: var(--purple-900);

  font-weight: 700;

  white-space: nowrap;

}



/* ----- Case-card extensions · .summary + .metrics-row -----

 * CAD case studies use a different body shape from small-batch's .metric

 * single-line: a longer summary paragraph and a 4-cell metric grid. */

.case .summary {

  font-size: 13px;

  color: var(--ink-700);

  margin: 0 0 14px;

  line-height: 1.55;

}

.case .metrics-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

  border-top: 1px solid var(--ink-100);

  padding-top: 12px;

}

.case .metrics-row .m {

  font-family: var(--font-mono);

  font-size: 11.5px;

  color: var(--ink-700);

  font-weight: 600;

  letter-spacing: 0.02em;

}

.case .metrics-row .m .lbl {

  display: block;

  font-size: 9px;

  color: var(--ink-500);

  letter-spacing: 0.1em;

  text-transform: uppercase;

  margin-bottom: 3px;

  font-weight: 500;

}



/* ----- Canny-band · we do / we don't honest two-column -----

 * Scope-lock via honest limits is a trust-lifting pattern across multiple

 * service pages (events §08, large-scale §10, niche-obsolete §08). */

.canny-band > .can,

.canny-band > .cant {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  padding: 28px 26px;

  position: relative;

  transition: border-color 200ms ease;

}

.canny-band > .can:hover { border-color: var(--purple-300); }

.canny-band > .cant:hover { border-color: var(--ink-300); }

.canny-band > .can { border-top: 3px solid var(--purple-700); }

.canny-band > .cant { border-top: 3px solid var(--ink-300); }

.canny-band h3 {

  font-family: var(--font-display);

  font-size: 18px;

  font-weight: 700;

  color: var(--ink);

  margin: 0 0 16px;

  letter-spacing: -0.01em;

}

.canny-band ul {

  list-style: none;

  padding: 0;

  margin: 0;

  display: grid;

  gap: 10px;

}

.canny-band ul li {

  font-size: 13.5px;

  line-height: 1.55;

  padding-left: 26px;

  position: relative;

  color: var(--ink-700);

}

.canny-band > .can ul li::before {

  content: '✓';

  position: absolute;

  left: 0;

  top: -1px;

  color: var(--purple-700);

  font-weight: 800;

  font-family: var(--font-display);

  font-size: 15px;

  line-height: 1.4;

}

.canny-band > .cant ul li::before {

  content: '✗';

  position: absolute;

  left: 0;

  top: -1px;

  color: var(--ink-400);

  font-weight: 800;

  font-family: var(--font-display);

  font-size: 15px;

  line-height: 1.4;

}

.canny-band > .cant .close-line {

  font-family: var(--font-display);

  font-style: italic;

  font-size: 14px;

  color: var(--ink-600);

  margin-top: 16px;

  padding-top: 14px;

  border-top: 1px solid var(--ink-100);

  letter-spacing: -0.01em;

  line-height: 1.5;

}



/* ----- Humans-close · purple-900 close band with two named avatars -----

 * Same colour grammar as .close-band, different layout: 2-col grid with

 * overlapping circular avatars on the left. James + Freddy headshots. */

.humans-close {

  background:

    radial-gradient(ellipse 60% 80% at 80%   0%, rgba(14, 231, 191, 0.16) 0%, transparent 60%),

    radial-gradient(ellipse 50% 60% at  0% 100%, rgba(143, 94, 171, 0.40) 0%, transparent 60%),

    var(--purple-900);

  color: var(--paper);

  padding: 56px 48px;

  border-radius: 24px;

  display: grid;

  grid-template-columns: auto 1fr;

  gap: 48px;

  align-items: center;

  position: relative;

  overflow: hidden;

  box-shadow: 0 8px 32px rgba(143, 94, 171, 0.20);

}

.humans-close::before {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);

  background-size: 24px 24px;

  pointer-events: none;

}

.humans-close > * { position: relative; z-index: 1; }

.humans-close .avatars {

  display: flex;

  align-items: center;

}

.humans-close .avatars .avatar {

  width: 150px;

  height: 150px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-50) 100%);

  border: 4px solid var(--purple-900);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--ink-600);

  font-family: var(--font-mono);

  font-size: 10px;

  text-align: center;

  padding: 10px;

  position: relative;

  overflow: hidden;

  box-shadow: 0 8px 24px rgba(12, 17, 26, 0.32);

}

.humans-close .avatars .avatar > img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: inherit;

  display: block;

}

.humans-close .avatars .avatar:last-child { margin-left: -40px; }

.humans-close .eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--paper);

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.16);

  padding: 3px 10px;

  border-radius: 999px;

  display: inline-block;

  margin-bottom: 14px;

}

.humans-close h3 {

  font-family: var(--font-display);

  font-size: clamp(1.5rem, 2.6vw, 1.875rem);

  font-weight: 800;

  color: var(--paper);

  margin: 0 0 14px;

  letter-spacing: -0.025em;

  line-height: 1.2;

}

.humans-close p {

  color: rgba(250, 250, 250, 0.85);

  font-size: 15px;

  margin: 0 0 22px;

  line-height: 1.55;

}

.humans-close .cta-row {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

}

.humans-close .cta.secondary {

  color: var(--paper);

  border-color: rgba(250, 250, 250, 0.4);

  background: transparent;

}

.humans-close .cta.secondary:hover {

  background: rgba(250, 250, 250, 0.08);

  border-color: var(--paper);

}

@media (max-width: 860px) {

  .humans-close { grid-template-columns: 1fr; gap: 28px; padding: 40px 28px; text-align: center; }

  .humans-close .avatars { justify-content: center; }

  .humans-close .cta-row { justify-content: center; }

}



/* ============================================================

 * LARGE-SCALE-ACTIVATIONS SERVICE-PAGE COMPONENTS · added 2026-05-06

 *

 * Adds the .build-story chrome family used by the cinematic

 * headline-builds section (3 alternating dark/light/reversed

 * cards · F1, character-build, dinosaur). Sister chrome

 * (.hero-light, .workshop-band, .ideas-grid, .survive-band,

 * .bridge-copy, .steps-4) is already present higher in this

 * file from the earlier large-scale pass.

 *

 * Each card is a 2-col grid (photo-slot + copy panel). Layout

 * track count + photo-slot height live in

 * large-scale-activations.preview.css. Decoration only here.

 * ============================================================ */



/* Default (light) build-story · paper-white card with ink-200 border. */

.build-story {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 16px;

  overflow: hidden;

  position: relative;

  isolation: isolate;

  box-shadow: 0 4px 16px rgba(58, 37, 73, 0.06);

}



/* Dark variant · purple-900 cta-band gradient + paper text.

 * Same colour grammar as .cta-band / .hero so the page reads as one

 * design system across the light/dark/light alternation. */

.build-story.dark {

  background:

    radial-gradient(ellipse 60% 80% at 80%   0%, rgba(14, 231, 191, 0.10) 0%, transparent 60%),

    radial-gradient(ellipse 50% 60% at  0% 100%, rgba(143, 94, 171, 0.36) 0%, transparent 60%),

    var(--purple-900);

  color: var(--paper);

  border-color: rgba(255, 255, 255, 0.06);

  box-shadow: 0 8px 32px rgba(143, 94, 171, 0.20);

}

.build-story.dark::before {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);

  background-size: 24px 24px;

  pointer-events: none;

  z-index: 0;

}

.build-story > * { position: relative; z-index: 1; }



/* Photo slot · gradient placeholder fallback, photo fills via object-fit cover.

 * Subtle shader keeps eyebrow chip + h3 readable if the build's headline drops

 * onto a light region of the photo. */

.build-story .photo-slot {

  position: relative;

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-50) 100%);

  overflow: hidden;

  isolation: isolate;

  /* Wireframe placeholder text is hidden when a real photo is wired (img

   * sits on top with z-index implied by source order). When no photo is

   * present the placeholder text shows for sketching purposes. */

  display: flex;

  align-items: flex-end;

  padding: 24px;

  font-family: var(--font-mono);

  font-size: 11px;

  line-height: 1.5;

  color: var(--ink-600);

}

.build-story.dark .photo-slot {

  background: linear-gradient(135deg, rgba(143, 94, 171, 0.20) 0%, rgba(12, 17, 26, 0.60) 100%), var(--ink-900);

  color: rgba(250, 250, 250, 0.65);

}

.build-story .photo-slot > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  z-index: 0;

}

.build-story .photo-slot::after {

  /* Bottom-left shader on the photo so the section reads cleanly when

   * placed against the page bg, regardless of photo edge brightness. */

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(15deg, rgba(12, 17, 26, 0.32) 0%, rgba(12, 17, 26, 0.10) 38%, rgba(12, 17, 26, 0) 60%);

  pointer-events: none;

  z-index: 1;

}



/* Copy panel · sits to the right of photo-slot (or left when .reversed). */

.build-story .copy {

  padding: 40px 36px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.build-story .copy .eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--purple-700);

  background: var(--purple-50);

  border: 1px solid var(--purple-100);

  padding: 3px 10px;

  border-radius: 999px;

  display: inline-block;

  align-self: flex-start;

  margin-bottom: 14px;

}

.build-story.dark .copy .eyebrow {

  color: var(--paper);

  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(255, 255, 255, 0.16);

}

.build-story h3 {

  font-family: var(--font-display);

  font-size: clamp(1.5rem, 2.6vw, 1.875rem);

  line-height: 1.1;

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--ink);

  margin: 0 0 12px;

}

.build-story.dark h3 { color: var(--paper); }

.build-story p.lede {

  font-size: 15px;

  line-height: 1.55;

  color: var(--ink-700);

  margin: 0 0 16px;

}

.build-story.dark p.lede { color: rgba(250, 250, 250, 0.85); }



/* Specs row · hairline borders top + bottom · mono label + archivo strong value. */

.build-story .specs {

  display: flex;

  gap: 22px;

  flex-wrap: wrap;

  padding: 14px 0;

  border-top: 1px solid var(--ink-100);

  border-bottom: 1px solid var(--ink-100);

  margin-bottom: 16px;

}

.build-story.dark .specs {

  border-top-color: rgba(255, 255, 255, 0.14);

  border-bottom-color: rgba(255, 255, 255, 0.14);

}

.build-story .spec {

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--ink-600);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  line-height: 1.2;

}

.build-story.dark .spec { color: rgba(250, 250, 250, 0.65); }

.build-story .spec strong {

  display: block;

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 18px;

  color: var(--ink);

  text-transform: none;

  letter-spacing: -0.01em;

  margin-top: 2px;

}

.build-story.dark .spec strong { color: var(--paper); }



/* Brief-pair · "What this shows / What you could brief" two-stacked block.

 * Replaces the inline-styled wireframe markup. Keeps colour decisions in

 * brand.preview.css per locked memory rule (no per-page polish CSS). */

.build-story .brief-pair {

  padding: 14px 0;

  border-top: 1px solid var(--ink-100);

  margin-bottom: 16px;

}

.build-story.dark .brief-pair { border-top-color: rgba(255, 255, 255, 0.14); }

.build-story .brief-pair .brief-label {

  font-family: var(--font-mono);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: var(--ink-600);

  margin-bottom: 6px;

}

.build-story.dark .brief-pair .brief-label { color: rgba(250, 250, 250, 0.65); }

.build-story .brief-pair .brief-body {

  font-size: 13px;

  line-height: 1.55;

  color: var(--ink-700);

  margin: 0 0 12px;

}

.build-story.dark .brief-pair .brief-body { color: rgba(250, 250, 250, 0.82); }

.build-story .brief-pair .brief-body:last-child { margin-bottom: 0; }



/* Brief-list · scannable bullet variant of .brief-body. Use when the

 * "What we can build / What you could brief" content is best read as a

 * tight list rather than a paragraph (lighter on the eye on already-

 * dense pages). Mint-dot markers match .pricing-drivers / .checks

 * grammar. */

.build-story .brief-pair .brief-list {

  list-style: none;

  margin: 0 0 14px;

  padding: 0;

  display: grid;

  grid-template-columns: 1fr;

  gap: 4px;

}

.build-story .brief-pair .brief-list li {

  font-size: 13px;

  line-height: 1.5;

  color: var(--ink-700);

  padding-left: 16px;

  position: relative;

}

.build-story.dark .brief-pair .brief-list li { color: rgba(250, 250, 250, 0.82); }

.build-story .brief-pair .brief-list li::before {

  content: '';

  position: absolute;

  left: 0;

  top: 8px;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--mint-400);

}

.build-story .brief-pair .brief-list:last-child { margin-bottom: 0; }



/* Tail link · mint underline matches .case .link grammar. */

.build-story .link {

  color: var(--ink);

  text-decoration: none;

  font-weight: 700;

  font-size: 13px;

  border-bottom: 2px solid var(--mint-400);

  padding-bottom: 1px;

  align-self: flex-start;

}

.build-story.dark .link { color: var(--paper); }

.build-story .link:hover { color: var(--purple-700); }

.build-story.dark .link:hover { color: var(--mint-300); }



/* ============================================================

 * NICHE-AND-OBSOLETE-PARTS SERVICE-PAGE COMPONENTS · added 2026-05-06

 *

 * ICP D landing (classic-car restorers, farmers, industrial maintenance,

 * domestic-appliance owners). Adds chrome for proof before/after pairs,

 * failed-route framing, intake card grid, industries-with-flagship grid,

 * non-expert material matrix, published-pricing wedge, digital-warehouse

 * reorder band, single case-feature card, and bridge-copy connector.

 * Sister chrome (.hero-light, .canny-band, .humans-close, .steps-5,

 * .obj-grid, .risk-band, .trust-card, .footer) is already in this file

 * from earlier passes.

 *

 * Layout primitives (grid track counts, gaps, mobile collapse) live in

 * niche-and-obsolete-parts.preview.css. Decoration only here.

 * ============================================================ */



/* §02b · Proof band · before/after pairs · paper-white cards on paper bg */

.proof-band {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 16px;

  padding: 36px;

  position: relative;

}

.proof-band > header { margin-bottom: 22px; }

.proof-band > header h2 {

  font-family: var(--font-display);

  font-size: clamp(1.5rem, 2.6vw, 1.875rem);

  line-height: 1.15;

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--ink);

  margin: 0 0 6px;

}

.proof-band > header p {

  font-size: 14px;

  color: var(--ink-700);

  margin: 0;

  max-width: 720px;

  line-height: 1.55;

}

.proof-card {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  overflow: hidden;

  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;

}

.proof-card:hover {

  border-color: var(--purple-300);

  transform: translateY(-2px);

  box-shadow: 0 4px 16px rgba(58, 37, 73, 0.08);

}

.proof-card .visual-pair {

  position: relative;

  border-bottom: 1px solid var(--ink-200);

  background: var(--ink-50);

  overflow: hidden;

}

.proof-card .visual-pair > .before,

.proof-card .visual-pair > .after {

  position: relative;

  display: flex;

  align-items: flex-end;

  justify-content: flex-start;

  padding: 10px 12px;

  font-family: var(--font-mono);

  font-size: 10px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--paper);

  overflow: hidden;

  isolation: isolate;

}

.proof-card .visual-pair > .after { border-left: 1px solid var(--ink-200); }

.proof-card .visual-pair > .before > img,

.proof-card .visual-pair > .after > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  z-index: 0;

}

.proof-card .visual-pair > .before::after,

.proof-card .visual-pair > .after::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(12, 17, 26, 0) 55%, rgba(12, 17, 26, 0.78) 100%);

  pointer-events: none;

  z-index: 1;

}

.proof-card .visual-pair > .before > *,

.proof-card .visual-pair > .after > * {

  position: relative;

  z-index: 2;

}

.proof-card .tag {

  display: block;

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--purple-700);

  letter-spacing: 0.1em;

  text-transform: uppercase;

  padding: 16px 18px 0;

}

.proof-card h4 {

  font-family: var(--font-display);

  font-size: 16px;

  font-weight: 700;

  letter-spacing: -0.01em;

  color: var(--ink);

  padding: 4px 18px 8px;

  margin: 0;

}

.proof-card .summary {

  font-size: 13px;

  color: var(--ink-700);

  padding: 0 18px 14px;

  margin: 0;

  line-height: 1.55;

}

.proof-card .specs {

  background: var(--ink-50);

  padding: 12px 18px;

  border-top: 1px solid var(--ink-100);

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--ink-700);

  letter-spacing: 0.04em;

}

.proof-card .specs > div { line-height: 1.4; }

.proof-card .specs .label {

  color: var(--ink-500);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  font-size: 9px;

  margin-bottom: 1px;

  display: block;

}



/* §02c · Tried band · honest grey-market framing (4 failed routes) */

.tried-band {

  background: var(--ink-50);

  border: 1px solid var(--ink-200);

  padding: 36px;

  border-radius: 16px;

  position: relative;

}

.tried-band h2 {

  font-family: var(--font-display);

  font-size: clamp(1.375rem, 2.4vw, 1.75rem);

  line-height: 1.15;

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--ink);

  margin: 0 0 8px;

}

.tried-band > .lede {

  font-size: 14px;

  color: var(--ink-700);

  max-width: 780px;

  margin: 0 0 22px;

  line-height: 1.55;

}

.tried-card {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 8px;

  padding: 18px;

  transition: border-color 200ms ease, transform 200ms ease;

}

.tried-card:hover {

  border-color: var(--purple-300);

  transform: translateY(-2px);

}

.tried-card .label {

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--purple-700);

  text-transform: uppercase;

  letter-spacing: 0.1em;

  margin-bottom: 6px;

}

.tried-card h4 {

  font-family: var(--font-display);

  font-size: 15px;

  font-weight: 700;

  letter-spacing: -0.01em;

  color: var(--ink);

  margin: 0 0 6px;

}

.tried-card p {

  font-size: 13px;

  color: var(--ink-700);

  margin: 0;

  line-height: 1.5;

}

.tried-band .close-line {

  margin-top: 22px;

  font-family: var(--font-display);

  font-style: italic;

  font-size: 16px;

  color: var(--ink);

  letter-spacing: -0.01em;

  line-height: 1.4;

}



/* Bridge copy · single-line connector between sections */

.bridge-copy {

  text-align: center;

  max-width: 720px;

  margin: -8px auto 24px;

  font-size: 17px;

  line-height: 1.4;

  color: var(--ink-700);

  font-family: var(--font-display);

  font-style: italic;

  letter-spacing: -0.01em;

}

.bridge-copy::before {

  content: '\2193';

  display: block;

  color: var(--mint-400);

  font-size: 16px;

  font-style: normal;

  font-family: var(--font-mono);

  margin-bottom: 8px;

}



/* §03 · Intake band · 4 input cards with example photo slots (the wedge) */

.intake-band > .sec-heading,

.intake-band > h2,

.intake-band > p { padding: 0; }

.intake-band > h2 {

  font-family: var(--font-display);

  font-size: clamp(1.5rem, 2.6vw, 1.875rem);

  line-height: 1.15;

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--ink);

  margin: 0 0 8px;

}

.intake-band > p {

  font-size: 14px;

  color: var(--ink-700);

  max-width: 720px;

  margin: 0 0 22px;

  line-height: 1.55;

}

.intake-card {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  padding: 22px 20px;

  position: relative;

  display: flex;

  flex-direction: column;

  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;

}

.intake-card:hover {

  border-color: var(--purple-300);

  transform: translateY(-2px);

  box-shadow: 0 4px 16px rgba(58, 37, 73, 0.08);

}

.intake-card .num {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 30px;

  height: 30px;

  border-radius: 50%;

  background: var(--purple-700);

  color: var(--paper);

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 13px;

  margin-bottom: 12px;

}

.intake-card h4 {

  font-family: var(--font-display);

  font-size: 16px;

  font-weight: 700;

  letter-spacing: -0.01em;

  color: var(--ink);

  margin: 0 0 6px;

}

.intake-card > p {

  font-size: 13px;

  color: var(--ink-700);

  margin: 0 0 12px;

  line-height: 1.5;

}

.intake-card .example-slot {

  position: relative;

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-50) 100%);

  border-radius: 6px;

  display: flex;

  align-items: flex-end;

  justify-content: flex-start;

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--ink-600);

  padding: 10px;

  margin-bottom: 10px;

  overflow: hidden;

  isolation: isolate;

}

.intake-card .example-slot > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  z-index: 0;

  border-radius: inherit;

}

.intake-card .effort {

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--ink-500);

  text-transform: uppercase;

  letter-spacing: 0.1em;

  margin-top: auto;

  padding-top: 4px;

}



/* §03 · CAD file format icons grid · CSS-only fallback for intake card 4 */

.cad-format-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 6px;

  width: 100%;

  height: 100%;

}

.cad-format-grid .fmt {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 4px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 6px 4px;

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  color: var(--ink);

  letter-spacing: 0.08em;

}

.cad-format-grid .fmt::before {

  content: '\25A1';

  display: block;

  font-size: 14px;

  color: var(--purple-700);

  margin-bottom: 2px;

}



/* §04 · Industries band · 1 flagship + 4 secondary + 1 catch-all */

.industry-band > h2 {

  font-family: var(--font-display);

  font-size: clamp(1.5rem, 2.6vw, 1.875rem);

  line-height: 1.15;

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--ink);

  margin: 0 0 8px;

}

.industry-band > p {

  font-size: 14px;

  color: var(--ink-700);

  max-width: 760px;

  margin: 0 0 22px;

  line-height: 1.55;

}

.industry-card {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  padding: 22px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  transition: border-color 200ms ease, transform 200ms ease;

}

.industry-card:hover {

  border-color: var(--purple-300);

  transform: translateY(-2px);

}

.industry-card.flagship {

  background:

    radial-gradient(ellipse 60% 80% at 80%   0%, rgba(14, 231, 191, 0.10) 0%, transparent 60%),

    radial-gradient(ellipse 50% 60% at  0% 100%, rgba(143, 94, 171, 0.32) 0%, transparent 60%),

    var(--purple-900);

  color: var(--paper);

  border-color: rgba(255, 255, 255, 0.06);

  box-shadow: 0 8px 32px rgba(143, 94, 171, 0.20);

  padding: 26px;

  position: relative;

  overflow: hidden;

  isolation: isolate;

}

.industry-card.flagship::before {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);

  background-size: 24px 24px;

  pointer-events: none;

  z-index: 0;

}

.industry-card.flagship > * { position: relative; z-index: 1; }

.industry-card.flagship .tag { color: var(--mint-400); }

.industry-card.flagship h4 { color: var(--paper); }

.industry-card.flagship p,

.industry-card.flagship ul li { color: rgba(250, 250, 250, 0.85); }

.industry-card.flagship .visual-slot {

  position: relative;

  background: linear-gradient(135deg, rgba(143, 94, 171, 0.20) 0%, rgba(12, 17, 26, 0.60) 100%), var(--ink-900);

  border-radius: 8px;

  display: flex;

  align-items: flex-end;

  padding: 14px;

  font-family: var(--font-mono);

  font-size: 10px;

  color: rgba(250, 250, 250, 0.55);

  overflow: hidden;

  isolation: isolate;

}

.industry-card.flagship .visual-slot > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  z-index: 0;

}

.industry-card.flagship .visual-slot::after {

  content: '';

  position: absolute; inset: 0;

  background: linear-gradient(135deg, rgba(58, 37, 73, 0.28) 0%, rgba(12, 17, 26, 0.55) 100%);

  pointer-events: none;

  z-index: 1;

}

.industry-card .tag {

  font-family: var(--font-mono);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--purple-700);

}

.industry-card h4 {

  font-family: var(--font-display);

  font-size: 17px;

  font-weight: 700;

  letter-spacing: -0.01em;

  color: var(--ink);

  margin: 0;

}

.industry-card p {

  font-size: 13px;

  color: var(--ink-700);

  margin: 0;

  line-height: 1.55;

}

.industry-card ul {

  margin: 4px 0 0;

  padding-left: 18px;

  font-size: 12.5px;

  color: var(--ink-700);

  line-height: 1.55;

}

.industry-card ul li { margin-bottom: 2px; }

.industry-card .caveat {

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--ink-500);

  border-top: 1px solid var(--ink-100);

  padding-top: 8px;

  margin-top: auto;

  letter-spacing: 0.04em;

}

.industry-card.catch-all {

  background: var(--paper-white);

  border-style: dashed;

  border-color: var(--purple-300);

  justify-content: center;

}



/* §04b · Material band · 5-chip non-expert explainer */

.material-band {

  background: var(--ink-50);

  border: 1px solid var(--ink-200);

  padding: 36px;

  border-radius: 16px;

  position: relative;

}

.material-band h2 {

  font-family: var(--font-display);

  font-size: clamp(1.375rem, 2.4vw, 1.75rem);

  line-height: 1.15;

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--ink);

  margin: 0 0 8px;

}

.material-band > .lede {

  font-size: 14px;

  color: var(--ink-700);

  max-width: 720px;

  margin: 0 0 22px;

  line-height: 1.55;

}

.material-chip {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 8px;

  padding: 16px;

  display: flex;

  flex-direction: column;

  gap: 6px;

  transition: border-color 200ms ease, transform 200ms ease;

}

.material-chip:hover {

  border-color: var(--purple-300);

  transform: translateY(-2px);

}

.material-chip .code {

  font-family: var(--font-mono);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: var(--purple-700);

}

.material-chip h5 {

  font-family: var(--font-display);

  font-size: 15px;

  font-weight: 700;

  letter-spacing: -0.01em;

  color: var(--ink);

  margin: 0;

}

.material-chip .use {

  font-size: 12.5px;

  color: var(--ink-700);

  line-height: 1.5;

  margin: 0;

}

.material-chip .nope {

  font-size: 11px;

  color: var(--ink-500);

  font-style: italic;

  margin-top: 4px;

}

.material-band .reframe {

  margin-top: 20px;

  padding: 14px 18px;

  background: var(--paper-white);

  border: 1px dashed var(--purple-300);

  border-radius: 6px;

  font-family: var(--font-display);

  font-style: italic;

  font-size: 15px;

  color: var(--ink);

  letter-spacing: -0.01em;

  line-height: 1.4;

}



/* §05 · Cost band · published-pricing wedge · purple-900 layered gradient */

.cost-band {

  background:

    radial-gradient(ellipse 60% 80% at 80%   0%, rgba(14, 231, 191, 0.10) 0%, transparent 60%),

    radial-gradient(ellipse 50% 60% at  0% 100%, rgba(143, 94, 171, 0.36) 0%, transparent 60%),

    var(--purple-900);

  color: var(--paper);

  padding: 44px;

  border-radius: 16px;

  position: relative;

  overflow: hidden;

  isolation: isolate;

  box-shadow: 0 8px 32px rgba(143, 94, 171, 0.20);

}

.cost-band::before {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);

  background-size: 24px 24px;

  pointer-events: none;

  z-index: 0;

}

.cost-band > * { position: relative; z-index: 1; }

.cost-band .anchor {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: clamp(2.25rem, 5vw, 3.5rem);

  line-height: 1;

  letter-spacing: -0.03em;

  color: var(--paper);

  margin: 0 0 6px;

}

.cost-band .anchor-unit {

  font-family: var(--font-mono);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: rgba(250, 250, 250, 0.65);

  margin-bottom: 10px;

}

.cost-band .anchor-eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--paper);

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.16);

  padding: 3px 10px;

  border-radius: 999px;

  margin: 0 0 12px;

  display: inline-block;

}

.cost-band h3 {

  font-family: var(--font-display);

  font-size: clamp(1.25rem, 2.2vw, 1.625rem);

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--paper);

  margin: 0 0 10px;

  line-height: 1.2;

}

.cost-band p {

  color: rgba(250, 250, 250, 0.85);

  font-size: 14px;

  margin: 0 0 16px;

  line-height: 1.6;

}

.cost-compare {

  list-style: none;

  padding: 0;

  margin: 0;

  display: grid;

  gap: 10px;

}

.cost-compare li {

  font-size: 13px;

  color: rgba(250, 250, 250, 0.85);

  padding-left: 28px;

  position: relative;

  line-height: 1.55;

}

.cost-compare li::before {

  content: 'vs';

  position: absolute;

  left: 0;

  top: 2px;

  color: rgba(250, 250, 250, 0.5);

  font-family: var(--font-mono);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}

.cost-compare li:first-child::before {

  content: 'us';

  color: var(--mint-400);

}

.cost-compare li strong { color: var(--paper); font-weight: 700; }



/* §06 · Reorder band · digital warehouse promise */

.reorder-band {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  padding: 36px;

  border-radius: 16px;

  position: relative;

}

.reorder-band h2 {

  font-family: var(--font-display);

  font-size: clamp(1.5rem, 2.6vw, 1.875rem);

  line-height: 1.15;

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--ink);

  margin: 0 0 12px;

}

.reorder-band > div:first-child > .sec-heading {

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--purple-700);

  text-transform: uppercase;

  letter-spacing: 0.1em;

  margin-bottom: 10px;

}

.reorder-band > div:first-child > p {

  font-size: 14px;

  color: var(--ink-700);

  margin: 0 0 12px;

  line-height: 1.55;

}

.reorder-ladder {

  list-style: none;

  padding: 0;

  margin: 16px 0 0;

  display: grid;

  gap: 10px;

}

.reorder-ladder li {

  font-size: 13px;

  color: var(--ink-800);

  padding-left: 28px;

  position: relative;

  line-height: 1.55;

}

.reorder-ladder li::before {

  content: '\2192';

  position: absolute;

  left: 0;

  top: 0;

  color: var(--mint-400);

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 16px;

}

.reorder-ladder li strong { color: var(--ink); font-weight: 700; }

.reorder-visual {

  position: relative;

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-50) 100%);

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px;

  min-height: 260px;

  overflow: hidden;

  isolation: isolate;

}

.reorder-visual > svg { width: 100%; max-width: 360px; height: auto; position: relative; z-index: 1; }

.reorder-visual::after {

  content: '';

  position: absolute;

  inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(58, 37, 73, 0.06) 1px, transparent 0);

  background-size: 16px 16px;

  pointer-events: none;

  z-index: 0;

}



/* §07 · Step-5 gate label override · APPROVAL GATE on niche page */

.steps-5.gate-approval .step.gate::after { content: 'APPROVAL GATE'; }

.steps-5 .step .fear {

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--ink-500);

  font-style: italic;

  letter-spacing: 0.04em;

  margin-top: 6px;

}

.steps-5 .step.gate .fear { color: rgba(250, 250, 250, 0.65); }



/* §09 · Objection card · Autocar attribution source badge */

.obj .q .source {

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--ink-500);

  letter-spacing: 0.06em;

  font-weight: 400;

  text-transform: uppercase;

  margin-left: 6px;

  white-space: nowrap;

}



/* §10b · Google Reviews band · platform-authority trust embed */

.google-reviews-band {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 16px;

  padding: 32px;

  position: relative;

}

.google-reviews-band > h2 {

  font-family: var(--font-display);

  font-size: clamp(1.375rem, 2.4vw, 1.625rem);

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--ink);

  margin: 0 0 8px;

  line-height: 1.15;

}

.google-reviews-band > p {

  font-size: 13.5px;

  color: var(--ink-700);

  max-width: 700px;

  margin: 0 0 22px;

  line-height: 1.55;

}

.google-reviews-band .gr-frame {

  background: var(--ink-50);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  padding: 24px;

}

.google-reviews-band .gr-summary {

  display: flex;

  align-items: center;

  gap: 18px;

  padding-bottom: 18px;

  border-bottom: 1px solid var(--ink-200);

  margin-bottom: 18px;

  flex-wrap: wrap;

}

.google-reviews-band .gr-mark {

  width: 52px;

  height: 52px;

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 22px;

  color: #4285F4;

  flex-shrink: 0;

}

.google-reviews-band .gr-rating {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 22px;

  letter-spacing: -0.02em;

  color: var(--ink);

  display: flex;

  align-items: center;

  gap: 6px;

}

.google-reviews-band .gr-stars { color: #F5B400; letter-spacing: 0.04em; }

.google-reviews-band .gr-meta {

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--ink-600);

  letter-spacing: 0.04em;

  margin-top: 2px;

}

.google-reviews-band .gr-see-all {

  margin-left: auto;

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--ink-700);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  border: 1px solid var(--ink-300);

  padding: 8px 14px;

  border-radius: 4px;

  text-decoration: none;

  transition: border-color 150ms ease, color 150ms ease;

}

.google-reviews-band .gr-see-all:hover {

  border-color: var(--purple-700);

  color: var(--purple-700);

}

.google-reviews-band .gr-card {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 8px;

  padding: 16px;

}

.google-reviews-band .gr-card .gr-stars { font-size: 12px; margin-bottom: 6px; }

.google-reviews-band .gr-card p {

  font-size: 13px;

  color: var(--ink-800);

  margin: 0 0 10px;

  line-height: 1.5;

}

.google-reviews-band .gr-card .gr-author {

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--ink-500);

  letter-spacing: 0.04em;

}



/* §11 · Case-feature · single hero case study with photo + metrics grid */

.case-feature {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 16px;

  overflow: hidden;

  transition: border-color 200ms ease, box-shadow 200ms ease;

}

.case-feature:hover {

  border-color: var(--purple-300);

  box-shadow: 0 4px 16px rgba(58, 37, 73, 0.08);

}

.case-feature .visual {

  position: relative;

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-50) 100%);

  display: flex;

  align-items: flex-end;

  justify-content: flex-start;

  padding: 18px;

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--ink-600);

  overflow: hidden;

  isolation: isolate;

}

.case-feature .visual > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  z-index: 0;

}

.case-feature .body {

  padding: 32px 28px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.case-feature .tag {

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--purple-700);

  text-transform: uppercase;

  letter-spacing: 0.1em;

  margin-bottom: 10px;

}

.case-feature h3 {

  font-family: var(--font-display);

  font-size: clamp(1.25rem, 2.2vw, 1.5rem);

  font-weight: 800;

  letter-spacing: -0.02em;

  color: var(--ink);

  margin: 0 0 12px;

  line-height: 1.2;

}

.case-feature .body > p {

  font-size: 14px;

  color: var(--ink-700);

  margin: 0 0 18px;

  line-height: 1.55;

}

.case-feature .metrics {

  background: var(--ink-50);

  border: 1px solid var(--ink-100);

  border-radius: 8px;

  padding: 16px;

}

.case-feature .metrics .m { padding: 0; }

.case-feature .metrics .num {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 22px;

  line-height: 1;

  letter-spacing: -0.02em;

  color: var(--ink);

}

.case-feature .metrics .lbl {

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--ink-600);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  margin-top: 4px;

  line-height: 1.3;

}



/* ============================================================

 * VISUAL-RELIEF COMPONENTS · added 2026-05-06 (James "middle is heavy")

 *

 * Two new families used to break up text-dense card sequences on

 * service pages without disturbing the gold-standard chrome:

 *   1. .process-shot · wide 21:9 photo banner with caption overlay

 *   2. .fulfil-pipeline · inline SVG flow diagram (replaces the

 *      old .fulfil-teaser .pipeline word-token row)

 * Both reusable across every service page.

 * ============================================================ */



/* ----- .process-shot · wide photo banner (visual relief) ----- */

.process-shot {

  margin: 0;

  position: relative;

  border-radius: 12px;

  overflow: hidden;

  width: 100%;

  aspect-ratio: 21 / 9;

  background: var(--ink-100);

  box-shadow: 0 12px 28px rgba(58, 37, 73, 0.10);

}

.process-shot > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  border-radius: inherit;

}

.process-shot::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(12, 17, 26, 0) 55%, rgba(12, 17, 26, 0.55) 100%);

  pointer-events: none;

  border-radius: inherit;

}

.process-shot figcaption {

  position: absolute;

  left: 24px;

  bottom: 22px;

  z-index: 2;

  color: var(--paper-white);

  font-family: var(--font-mono);

  font-size: 11px;

  letter-spacing: 0.08em;

  line-height: 1.5;

  max-width: 540px;

  background: rgba(12, 17, 26, 0.62);

  padding: 10px 14px;

  border-radius: 6px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(4px);

  -webkit-backdrop-filter: blur(4px);

}

.process-shot figcaption strong {

  color: var(--mint-300);

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  margin-right: 6px;

}

@media (max-width: 720px) {

  .process-shot { aspect-ratio: 16 / 10; }

  .process-shot figcaption {

    left: 12px;

    right: 12px;

    bottom: 12px;

    font-size: 10px;

    max-width: none;

  }

}



/* ----- .fulfil-pipeline · inline SVG flow diagram ----- */

.fulfil-pipeline {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  align-items: stretch;

  gap: 0;

  width: 100%;

}

.fulfil-pipeline .node {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  gap: 8px;

  padding: 14px 8px 12px;

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 8px;

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  color: var(--ink-800);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  text-align: center;

  z-index: 1;

  transition: border-color 200ms ease, transform 200ms ease;

}

.fulfil-pipeline .node:hover {

  border-color: var(--purple-300);

  transform: translateY(-2px);

}

.fulfil-pipeline .node + .node { margin-left: -1px; }

.fulfil-pipeline .node svg {

  width: 28px;

  height: 28px;

  display: block;

  color: var(--purple-700);

  flex-shrink: 0;

}

.fulfil-pipeline .node:last-child svg { color: var(--mint-500); }

.fulfil-pipeline .node .arrow {

  position: absolute;

  top: 50%;

  right: -8px;

  transform: translateY(-50%) rotate(45deg);

  width: 14px;

  height: 14px;

  background: var(--paper-white);

  border-top: 1px solid var(--ink-200);

  border-right: 1px solid var(--ink-200);

  z-index: 2;

}

.fulfil-pipeline .node:last-child .arrow { display: none; }



@media (max-width: 720px) {

  .fulfil-pipeline {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 8px;

  }

  .fulfil-pipeline .node { margin-left: 0; }

  .fulfil-pipeline .node .arrow { display: none; }

}



/* Angle picker labels (3 conveyor angle options · 2026-05-06) */

/* Single tier-info list shared by all 3 angles */

















@media (max-width: 720px) {





}



/* ============================================================

 * OBJECTION-CARD ICON + SKIM-BOLD · added 2026-05-06 (James)

 *

 * James "the 6-card objection grid is text-heavy · add icons + bold

 * the keywords so it can be skimmed". Two additions:

 *   1. .obj .icon · small SVG slot top-left of each card, beside .q

 *   2. .obj .a strong · skim-bold treatment for the load-bearing

 *      phrases inside the answer paragraph

 *

 * Layout becomes: [icon] | [q] above [a]. Icon stays fixed-size,

 * question wraps next to it. Answer flows below the entire row.

 * ============================================================ */



.obj-grid .obj { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 0; align-items: start; }



.obj-grid .obj .icon {

  grid-row: 1 / 2;

  grid-column: 1 / 2;

  width: 36px;

  height: 36px;

  border-radius: 8px;

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-50) 100%);

  border: 1px solid var(--ink-200);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  margin-top: 2px;

}

.obj-grid .obj .icon svg {

  width: 20px;

  height: 20px;

  color: var(--purple-700);

  display: block;

}

.obj-grid .obj .q {

  grid-row: 1 / 2;

  grid-column: 2 / 3;

  align-self: center;

}

.obj-grid .obj .a {

  grid-row: 2 / 3;

  grid-column: 1 / -1;

  margin-top: 8px;

}

.obj-grid .obj .a strong {

  /* Skim-bold · darker ink + slightly heavier weight so the keyword

   * pops out of the paragraph without screaming. Italics preserved. */

  color: var(--ink);

  font-weight: 700;

}

.obj-grid .obj .a em strong,

.obj-grid .obj .a strong em {

  font-style: italic;

}



/* ============================================================

 * CAD-DARK MODE · added 2026-05-06

 *

 * Page-scope dark theme for the CAD-design-services service page.

 * Engineer-professional aesthetic per James 2026-05-06: deep ink page

 * background, ink-800 card surfaces, paper-tinted body text, mint-400

 * accents, gradient stat numbers (purple-700 to mint-400) preserved.

 *

 * Activated by `<body class="cad-dark">`. All rules scoped to that

 * class so other service pages stay light-mode unchanged. Existing

 * dark bands (.hero, .risk-band, .humans-close, .close-band, .footer)

 * already work on either page mode and need no override.

 * ============================================================ */



body.cad-dark {

  background: var(--ink);

  color: var(--paper);

}



body.cad-dark .bridge-copy {

  color: rgba(250, 250, 250, 0.72);

}

body.cad-dark .bridge-copy::before { color: rgba(250, 250, 250, 0.45); }



body.cad-dark .container > section > h2,

body.cad-dark .container > section > h3 {

  color: var(--paper);

}

body.cad-dark .container > section > p { color: rgba(250, 250, 250, 0.78); }



/* ----- Trust card (paper-white to ink-800) ----- */

body.cad-dark .trust-card {

  background: var(--ink-800);

  border-color: var(--ink-700);

}

body.cad-dark .trust-card:hover {

  border-color: var(--mint-400);

  box-shadow: 0 4px 16px rgba(14, 231, 191, 0.10);

}

body.cad-dark .trust-card .eyebrow {

  color: var(--paper);

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(255, 255, 255, 0.16);

}

body.cad-dark .trust-card .stat-sub { color: rgba(250, 250, 250, 0.55); }

body.cad-dark .trust-card h4 { color: var(--paper); }

body.cad-dark .trust-card p { color: rgba(250, 250, 250, 0.78); }



/* ----- Cost-contrast (ink to ink-800 with border so it lifts off ink page) ----- */

body.cad-dark .cost-contrast {

  background: var(--ink-800);

  border: 1px solid var(--ink-700);

}



/* ----- IP strip (ink to ink-800 with border) ----- */

body.cad-dark .ip-strip {

  background: var(--ink-800);

  border: 1px solid var(--ink-700);

}



/* ----- Intake tile (paper-white to ink-800) ----- */

body.cad-dark .intake-tile {

  background: var(--ink-800);

  border-color: var(--ink-700);

}

body.cad-dark .intake-tile:hover {

  border-color: var(--mint-400);

  box-shadow: 0 4px 16px rgba(14, 231, 191, 0.10);

}

body.cad-dark .intake-tile .iconbox {

  background: var(--ink-700);

  border-color: var(--ink-600);

  color: var(--mint-300);

}

body.cad-dark .intake-tile h4 { color: var(--paper); }

body.cad-dark .intake-tile p { color: rgba(250, 250, 250, 0.72); }

body.cad-dark .intake-tile .formats {

  background: rgba(14, 231, 191, 0.08);

  border-color: rgba(14, 231, 191, 0.24);

  color: var(--mint-300);

}



/* ----- Steps · process ladder (paper-white to ink-800) ----- */

body.cad-dark .steps .step {

  background: var(--ink-800);

  border-color: var(--ink-700);

}

body.cad-dark .steps .step:hover { border-color: var(--mint-400); }

body.cad-dark .steps .step h4 { color: var(--paper); }

body.cad-dark .steps .step p { color: rgba(250, 250, 250, 0.72); }

body.cad-dark .steps .step .num {

  background: var(--mint-400);

  color: var(--ink);

}

body.cad-dark .steps .step .fear { color: rgba(250, 250, 250, 0.45); }

body.cad-dark .steps .step .tol {

  background: var(--ink-700);

  border-color: var(--ink-600);

  color: rgba(250, 250, 250, 0.78);

}

body.cad-dark .steps .step .tol strong { color: var(--mint-300); }



body.cad-dark .steps .step.gate {

  background: linear-gradient(180deg, rgba(143, 94, 171, 0.20) 0%, var(--ink-800) 100%);

  border-color: rgba(143, 94, 171, 0.35);

}

body.cad-dark .steps .step.gate .num { background: var(--purple-400); color: var(--ink); }

body.cad-dark .steps .step.gate::after {

  background: var(--purple-400);

  color: var(--ink);

}



/* ----- Turnaround band (ink-50 to transparent with border) ----- */

body.cad-dark .turnaround-band {

  background: transparent;

  border-color: var(--ink-700);

}

body.cad-dark .turnaround-band > h2 { color: var(--paper); }

body.cad-dark .turnaround-band > .lede { color: rgba(250, 250, 250, 0.72); }

body.cad-dark .turnaround-tier {

  background: var(--ink-800);

  border-color: var(--ink-700);

}

body.cad-dark .turnaround-tier:hover { border-color: var(--mint-400); }

body.cad-dark .turnaround-tier h3 { color: rgba(250, 250, 250, 0.65); }

body.cad-dark .turnaround-tier .days { color: var(--paper); }

body.cad-dark .turnaround-tier .days .unit { color: rgba(250, 250, 250, 0.55); }

body.cad-dark .turnaround-tier .for { color: rgba(250, 250, 250, 0.65); }

body.cad-dark .turnaround-tier p { color: rgba(250, 250, 250, 0.78); }



body.cad-dark .turnaround-tier.headline {

  background: linear-gradient(180deg, rgba(14, 231, 191, 0.12) 0%, var(--ink-800) 100%);

  border-color: var(--mint-400);

  box-shadow: 0 8px 24px rgba(14, 231, 191, 0.10);

}

body.cad-dark .turnaround-tier.headline h3 { color: var(--mint-300); }

body.cad-dark .turnaround-tier.headline .days { color: var(--paper); }

body.cad-dark .turnaround-tier.headline .days .unit { color: var(--mint-200); }

body.cad-dark .turnaround-tier.headline .for { color: var(--mint-200); }

body.cad-dark .turnaround-tier.headline p { color: rgba(250, 250, 250, 0.85); }



/* ----- ICP card (ink-50 to ink-800) ----- */

body.cad-dark .icp-card {

  background: var(--ink-800);

  border-color: var(--ink-700);

}

body.cad-dark .icp-card h3 { color: var(--paper); }

body.cad-dark .icp-card p { color: rgba(250, 250, 250, 0.78); }

body.cad-dark .icp-card ul { color: rgba(250, 250, 250, 0.78); }

body.cad-dark .icp-card ul li strong { color: var(--paper); }

body.cad-dark .icp-card .avatar {

  background: linear-gradient(135deg, var(--ink-700) 0%, var(--ink-800) 100%);

  color: rgba(250, 250, 250, 0.55);

}

body.cad-dark .icp-card .avatar::after {

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0);

}



/* ----- Capabilities · cap-card (paper-white to ink-800) ----- */

body.cad-dark .cap-card {

  background: var(--ink-800);

  border-color: var(--ink-700);

}

body.cad-dark .cap-card:hover {

  border-color: var(--mint-400);

  box-shadow: 0 4px 16px rgba(14, 231, 191, 0.10);

}

body.cad-dark .cap-card h4 {

  color: var(--paper);

  border-bottom-color: var(--ink-700);

}

body.cad-dark .cap-card .software-row .chip {

  background: var(--mint-400);

  color: var(--ink);

}

body.cad-dark .cap-card .software-row .chip.secondary {

  background: var(--ink-700);

  color: rgba(250, 250, 250, 0.78);

  border-color: var(--ink-600);

}

body.cad-dark .cap-card p { color: rgba(250, 250, 250, 0.78); }

body.cad-dark .cap-card ul li { color: rgba(250, 250, 250, 0.78); }

body.cad-dark .cap-card .human .headshot {

  background: linear-gradient(135deg, var(--ink-700) 0%, var(--ink-800) 100%);

  color: rgba(250, 250, 250, 0.55);

}

body.cad-dark .cap-card .human .bio strong { color: var(--paper); }

body.cad-dark .cap-card .human .bio span { color: rgba(250, 250, 250, 0.65); }



body.cad-dark .cap-card .tol-ladder th { color: rgba(250, 250, 250, 0.65); }

body.cad-dark .cap-card .tol-ladder td { color: rgba(250, 250, 250, 0.78); }

body.cad-dark .cap-card .tol-ladder th,

body.cad-dark .cap-card .tol-ladder td {

  border-bottom-color: var(--ink-700);

}

body.cad-dark .cap-card .tol-ladder td.tol-val { color: var(--mint-300); }



/* ----- Case cards (paper-white to ink-800) ----- */

body.cad-dark .case {

  background: var(--ink-800);

  border-color: var(--ink-700);

}

body.cad-dark .case:hover {

  border-color: var(--mint-400);

  box-shadow: 0 4px 16px rgba(14, 231, 191, 0.10);

}

body.cad-dark .case .visual {

  background: linear-gradient(135deg, var(--ink-700) 0%, var(--ink-800) 100%);

  color: rgba(250, 250, 250, 0.55);

}

body.cad-dark .case .visual::after {

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.04) 1px, transparent 0);

}

body.cad-dark .case .client { color: var(--mint-300); }

body.cad-dark .case h4 { color: var(--paper); }

body.cad-dark .case .summary { color: rgba(250, 250, 250, 0.78); }

body.cad-dark .case .metrics-row { border-top-color: var(--ink-700); }

body.cad-dark .case .metrics-row .m { color: rgba(250, 250, 250, 0.78); }

body.cad-dark .case .metrics-row .m .lbl { color: rgba(250, 250, 250, 0.45); }

body.cad-dark .case .metric { color: rgba(250, 250, 250, 0.72); }

body.cad-dark .case .link { color: var(--paper); }

body.cad-dark .case .link:hover { color: var(--mint-300); }



/* ----- Canny-band · we do / we don't (paper-white to ink-800) ----- */

body.cad-dark .canny-band > .can,

body.cad-dark .canny-band > .cant {

  background: var(--ink-800);

  border-color: var(--ink-700);

}

body.cad-dark .canny-band > .can { border-top-color: var(--mint-400); }

body.cad-dark .canny-band > .cant { border-top-color: var(--ink-600); }

body.cad-dark .canny-band > .can:hover { border-color: var(--mint-400); }

body.cad-dark .canny-band > .cant:hover { border-color: var(--ink-500); }

body.cad-dark .canny-band h3 { color: var(--paper); }

body.cad-dark .canny-band ul li { color: rgba(250, 250, 250, 0.78); }

body.cad-dark .canny-band > .can ul li::before { color: var(--mint-400); }

body.cad-dark .canny-band > .cant ul li::before { color: rgba(250, 250, 250, 0.32); }

body.cad-dark .canny-band > .cant .close-line {

  color: rgba(250, 250, 250, 0.65);

  border-top-color: var(--ink-700);

}



/* ----- Objection cards (paper-white to ink-800) ----- */

body.cad-dark .obj-grid .obj {

  background: var(--ink-800);

  border-color: var(--ink-700);

}

body.cad-dark .obj-grid .obj:hover { border-color: var(--mint-400); }

body.cad-dark .obj-grid .obj .q { color: var(--paper); }

body.cad-dark .obj-grid .obj .a { color: rgba(250, 250, 250, 0.78); }

body.cad-dark .obj-grid .obj .a strong { color: var(--paper); }



/* ----- FAQ accordion on dark ----- */

body.cad-dark .faq-item {

  color: var(--paper);

  border-top-color: var(--ink-700);

}

body.cad-dark .faq-item:hover { background: var(--ink-800); }

body.cad-dark .faq-item .plus { color: rgba(250, 250, 250, 0.55); }

body.cad-dark .faq-answer { color: rgba(250, 250, 250, 0.78); }



/* ----- Section heading + lede on dark ----- */

body.cad-dark section > h2,

body.cad-dark section > h3,

body.cad-dark section.capabilities-band > h2 {

  color: var(--paper);

}

body.cad-dark section > p { color: rgba(250, 250, 250, 0.78); }



/* ----- Existing dark bands · refine outer halo so they lift off the ink page ----- */

body.cad-dark .hero-cadtoreal {

  box-shadow: 0 8px 32px rgba(14, 231, 191, 0.10), 0 2px 8px rgba(143, 94, 171, 0.18);

}

body.cad-dark .risk-band {

  box-shadow: 0 8px 32px rgba(143, 94, 171, 0.18);

}

body.cad-dark .humans-close {

  box-shadow: 0 8px 32px rgba(14, 231, 191, 0.10), 0 2px 8px rgba(143, 94, 171, 0.18);

}

body.cad-dark .footer {

  background: var(--ink-800);

  border: 1px solid var(--ink-700);

}

body.cad-dark .footer h5 { color: var(--paper); }

body.cad-dark .footer a { color: rgba(250, 250, 250, 0.72); }

body.cad-dark .footer a:hover { color: var(--mint-400); }



/* ----- CTA secondary on dark · paper border + paper text + transparent fill ----- */

body.cad-dark .cta.secondary {

  color: var(--paper);

  border-color: rgba(250, 250, 250, 0.4);

  background: transparent;

}

body.cad-dark .cta.secondary:hover {

  background: rgba(250, 250, 250, 0.08);

  border-color: var(--paper);

}



/* =============================================================

 * UI/UX Pro Max audit refinements · 2026-05-07

 * Added by ui-ux-pro-max skill audit · keep at end of file.

 * Replaces emoji icons + placeholder rectangles + adds focus-visible.

 * ============================================================= */



/* Announcement bar · ruler icon stroke matches the bar's text colour */

.sec-00 .sec-00-icon {

  color: currentColor;

  flex-shrink: 0;

  margin-right: 4px;

  vertical-align: -2px;

}



/* Size the inline announcement-bar SVGs UNSCOPED. The per-icon sizing further

   down is scoped to .homepage-uxv2 / .product-dev-page body classes; the live

   homepage carries neither, so without this the inline SVGs (message icon, tel

   icon) render at their unconstrained intrinsic size — the 333px "zoomed-in"

   chevron James reported. (2026-06-05) */

.sec-00 svg,

.sec-00 .sec-00-icon svg,

.sec-00 .announce-tel svg {

  width: 18px;

  height: 18px;

  display: block;

  flex-shrink: 0;

}



/* Keep each icon ON THE SAME LINE as its text (the message and the tel link).

   Without this the block-level SVG above stacks ABOVE the text. inline-flex +

   align-items:center sits the icon and text on one vertically-centred row. */

.sec-00 .sec-00-msg,

.sec-00 .announce-tel {

  display: inline-flex;

  align-items: center;

  gap: 6px;

}



/* Risk-reversal band · was inline-styled · now a proper component */

.risk-band-card {

  margin-top: 20px;

  background: var(--purple-900);

  color: var(--ink-50);

  padding: 24px 28px;

  border-radius: 6px;

  display: grid;

  grid-template-columns: auto 1fr;

  gap: 22px;

  align-items: center;

}

.risk-band-icon {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background: rgba(14, 231, 191, 0.12);

  color: var(--mint-400);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.risk-band-h {

  font-weight: 700;

  margin: 0 0 6px;

  color: var(--ink-50);

  font-size: 18px;

  letter-spacing: -0.01em;

}

.risk-band-p {

  font-size: 13px;

  color: var(--ink-200);

  line-height: 1.55;

  margin: 0;

  max-width: 720px;

}



/* Centred variant · 2026-05-10 · used when the band is the section's hero

 * trust-reversal moment rather than a side-note. Bigger icon, stacked

 * layout, copy reads to first-timers + batch clients in one breath. */

.risk-band-card--centred {

  grid-template-columns: 1fr;

  justify-items: center;

  text-align: center;

  padding: 40px 32px;

  margin-top: 32px;

  gap: 18px;

}

.risk-band-icon--lg {

  width: 112px;

  height: 112px;

}

.risk-band-icon--lg svg {

  width: 64px;

  height: 64px;

}

.risk-band-card--centred .risk-band-h {

  font-size: 22px;

  margin: 0 0 8px;

}

.risk-band-card--centred .risk-band-p {

  font-size: 15px;

  line-height: 1.6;

  max-width: 640px;

  margin: 0 auto;

}

@media (max-width: 720px) {

  .risk-band-card--centred { padding: 28px 20px; }

  .risk-band-icon--lg { width: 88px; height: 88px; }

  .risk-band-icon--lg svg { width: 50px; height: 50px; }

}



/* Risk-band bullet list variant · mint-✓ markers · scannable alternative

 * to .risk-band-p when the guarantee reads as 3 distinct promises rather

 * than a single sentence. Same colour grammar as .survive-band .checks. */

.risk-band-list {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  grid-template-columns: 1fr;

  gap: 6px;

  max-width: 720px;

}

.risk-band-list li {

  font-size: 13px;

  line-height: 1.55;

  color: var(--ink-200);

  padding-left: 26px;

  position: relative;

}

.risk-band-list li::before {

  content: '✓';

  position: absolute;

  left: 0;

  top: 0;

  color: var(--mint-400);

  font-weight: 800;

  font-family: var(--font-display);

  font-size: 16px;

  line-height: 1.4;

}

.risk-band-list li strong {

  color: var(--ink-50);

  font-weight: 700;

}



/* Start Here free guide · was inline grid · now a component */

.sec-startguide { margin-top: 64px; margin-bottom: 24px; }

.startguide-row {

  display: grid;

  grid-template-columns: auto 1fr auto;

  gap: 32px;

  align-items: center;

  padding: 28px 32px;

}

.startguide-cover {

  flex-shrink: 0;

  display: block;

  border-radius: 6px;

  overflow: hidden;

  box-shadow: 0 6px 20px rgba(12, 17, 26, 0.10);

}

.startguide-eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  color: var(--mint-700); /* a11y: 5.1:1 on white (was --mint-600 3.2:1) */

  text-transform: uppercase;

  letter-spacing: 0.14em;

  margin-bottom: 8px;

}

.startguide-h {

  font-family: var(--font-display);

  font-size: 26px;

  font-weight: 800;

  letter-spacing: -0.018em;

  line-height: 1.12;

  margin: 0 0 10px;

  color: var(--ink);

}

.startguide-p {

  color: var(--ink-700);

  max-width: 540px;

  font-size: 14.5px;

  line-height: 1.55;

  margin: 0;

}

@media (max-width: 720px) {

  .startguide-row {

    grid-template-columns: 1fr;

    gap: 18px;

    padding: 16px;

  }

  .startguide-cover { width: 96px; height: 120px; }

  .startguide-cover svg { width: 96px; height: 120px; }

}



/* Team workshop photo · single landscape image of the workshop · placeholder for real

 * James/Freddy headshots once shot. Honest visual: the actual fleet, not faces we

 * don't have yet. 2026-05-07. */

.team-workshop {

  position: relative;

  width: 380px;

  flex-shrink: 0;

  border-radius: 10px;

  overflow: hidden;

  box-shadow: 0 12px 32px rgba(12, 17, 26, 0.16);

  border: 4px solid var(--paper-white);

}

.team-workshop img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  display: block;

  aspect-ratio: 4 / 5;

}

.team-workshop-caption {

  position: absolute;

  left: 14px;

  bottom: 14px;

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.14em;

  color: var(--paper-white);

  text-transform: uppercase;

  background: rgba(12, 17, 26, 0.65);

  padding: 6px 10px;

  border-radius: 4px;

  backdrop-filter: blur(4px);

}

@media (max-width: 720px) {

  .team-workshop { width: 100%; max-width: 320px; margin: 0 auto; }

}



/* Team photos · real headshots in framed circles · 2026-05-07 */

.team-avatars-photo {

  display: flex;

  align-items: center;

  position: relative;

}

.team-photo {

  width: 110px;

  height: 110px;

  border-radius: 50%;

  border: 4px solid var(--paper-white);

  box-shadow: 0 6px 18px rgba(12, 17, 26, 0.12);

  overflow: hidden;

  flex-shrink: 0;

  position: relative;

}

.team-photo-james { z-index: 2; }

.team-photo-freddy { margin-left: -22px; z-index: 1; }

.team-photo img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center top;

  display: block;

}

@media (max-width: 720px) {

  .team-avatars-photo { justify-content: center; margin-bottom: 8px; }

  .team-photo { width: 96px; height: 96px; }

}



/* Team row · was inline · now a component

 * Avatars are JC + FB monograms · clearly placeholder for real photos

 * but no longer reads as broken stripes */

.team-row {

  display: grid;

  grid-template-columns: auto 1fr;

  gap: 40px;

  align-items: center;

  max-width: 880px;

  margin: 0 auto;

}

.team-avatars {

  display: flex;

  align-items: center;

  position: relative;

}

.team-avatar {

  width: 96px;

  height: 96px;

  border-radius: 50%;

  border: 4px solid var(--paper-white);

  box-shadow: 0 4px 14px rgba(12, 17, 26, 0.10);

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-display);

  font-size: 26px;

  font-weight: 800;

  letter-spacing: 0.04em;

  color: var(--paper-white);

}

.team-avatar-james {

  background: linear-gradient(135deg, var(--purple-700) 0%, var(--purple-900) 100%);

  position: relative;

  z-index: 2;

}

.team-avatar-freddy {

  background: linear-gradient(135deg, var(--ink-700) 0%, var(--ink) 100%);

  margin-left: -22px;

}

@media (max-width: 720px) {

  .team-row { grid-template-columns: 1fr; gap: 20px; text-align: center; }

  .team-avatars { justify-content: center; }

}



/* ============================================================

 * MOBILE FIXES · added 2026-05-11 after visual mobile audit.

 *

 * Caught by inspection at 390x844 (iPhone 13 emulation):

 *   1. Sticky nav overlapped every section title on scroll-through.

 *      Fix: auto-hide on scroll-down via JS · this CSS handles the slide.

 *   2. Timeline had orphan dots floating between vertically-stacked nodes

 *      because the horizontal-line+dot geometry didn't reflow.

 *      Fix: hide line + dots on mobile, let the numbered H3s structure the

 *      flow; padding on the row gets recovered too.

 *   3. Testimonial cards · .quote-cta (absolute-positioned at bottom-left)

 *      overlapped .quote-source on the narrower mobile card.

 *      Fix: switch to flow layout on mobile · CTA sits below source.

 * ============================================================ */



/* 1. Nav-pill auto-hide on mobile (JS toggles .nav-hidden on .nav-pill itself,

 *    because the sticky positioning lives on a child <div> wrapper · transforming

 *    the parent <section> doesn't move sticky descendants out of view). */

.nav-pill {

  transition: transform 250ms ease, opacity 250ms ease;

}

.nav-pill.nav-hidden {

  transform: translateY(-130%);

  opacity: 0;

  pointer-events: none;

}

@media (prefers-reduced-motion: reduce) {

  .nav-pill { transition: none; }

}



@media (max-width: 880px) {

  /* 2. Timeline on mobile · drop the horizontal line + dot geometry · just

   *    show stacked numbered nodes. Recover the wasted 60px top padding. */

  .timeline-row {

    padding-top: 0 !important;

  }

  .timeline-row::before,

  .timeline-row::after,

  .timeline-node::before {

    display: none !important;

  }

  .timeline-node {

    padding: 16px 0 !important;

    border-bottom: 1px solid var(--ink-200);

  }

  .timeline-node:last-child {

    border-bottom: 0;

  }



  /* 3. Testimonial card · CTA in flow below source, not absolute-positioned. */

  .quote-card {

    padding: 48px 24px 24px !important;

  }

  .quote-cta {

    position: static !important;

    margin-top: 14px;

    display: flex;

  }

  .quote-source {

    margin-bottom: 0;

  }

}



/* Skip link · only visible when keyboard-focused, pops as a top-left chip */

.skip-link {

  position: absolute;

  left: -9999px;

  top: 12px;

  padding: 10px 16px;

  background: var(--ink);

  color: var(--paper-white);

  border-radius: 6px;

  font-family: var(--font-mono);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-decoration: none;

  z-index: 9999;

}

.skip-link:focus,

.skip-link:focus-visible {

  left: 12px;

  outline: 2px solid var(--mint-400);

  outline-offset: 2px;

}



/* Focus-visible rings on interactive elements · keyboard-only, won't fire on click

 * Mint outline + 3px gap for clear visibility on both light + dark surfaces */

.cta:focus-visible,

.cta-slot:focus-visible,

.nav-link:focus-visible,

.spy-link:focus-visible,

.faq-item:focus-visible,

.logo-box:focus-visible,

.case-card a:focus-visible,

button:focus-visible,

a:focus-visible {

  outline: 2.5px solid var(--mint-400);

  outline-offset: 3px;

  border-radius: 4px;

}

/* Reduce focus offset on already-rounded surfaces */

.cta:focus-visible,

.cta-slot:focus-visible {

  outline-offset: 2px;

}



/* Scroll-margin · stop deep-link anchors hiding behind sticky nav (~64px nav + 16px buffer) */

[id^="sec-"],

[id^="svc-"],

#sec-team,

#sec-turnaround {

  scroll-margin-top: 96px;

}



/* ===== Logo wall · full-bleed strip override · James 2026-05-07 =====

 * Removes the bordered-card chrome and stretches the 6 logos edge-to-edge

 * across the section width. Logos go monochrome with subtle hover restore. */

.sec-03 {

  background: transparent;

  border: none;

  border-radius: 0;

  padding: 28px 0 16px;

  /* Break out of .container (max-width: 1280px) so logos span the full viewport.

   * Negative margins equal half the difference between container and viewport;

   * width: 100vw forces edge-to-edge. */

  margin-left: calc(-50vw + 50%);

  margin-right: calc(-50vw + 50%);

  width: 100vw;

  max-width: 100vw;

  overflow: hidden;

}

.sec-03::before {

  margin-bottom: 26px;

}

.logo-row {

  display: grid;

  grid-template-columns: repeat(8, 1fr);

  gap: 0;

  align-items: center;

  width: 100%;

  max-width: none;

  padding: 0 32px;

  margin: 0;

  box-sizing: border-box;

}

/* Belt-and-braces · stop a sub-pixel scrollbar from the 100vw trick */

body { overflow-x: hidden; }



/* =====================================================================

 * MOBILE NAV · hamburger toggle for <880px viewports · 2026-05-07

 * Desktop nav-pill stays unchanged. On mobile, the hamburger is the only

 * visible nav control · tapping it slides down a stacked menu of links

 * with 48px tap targets, dropdown panels become tap-to-expand accordions.

 * ===================================================================== */

.nav-hamburger {

  display: none;  /* hidden on desktop */

  align-items: center;

  justify-content: center;

  width: 44px;

  height: 44px;

  margin-left: auto;

  border: none;

  background: transparent;

  color: var(--paper-white);

  cursor: pointer;

  border-radius: 999px;

  transition: background 150ms ease;

}

.nav-hamburger:hover { background: rgba(250, 250, 250, 0.12); }

.nav-hamburger svg { display: block; pointer-events: none; }

.nav-hamburger .icon-close { display: none; }

.nav-pill[data-mobile-open="true"] .nav-hamburger .icon-open  { display: none; }

.nav-pill[data-mobile-open="true"] .nav-hamburger .icon-close { display: block; }



@media (max-width: 880px) {

  /* Show the hamburger, push it to the right · hide the desktop CTA pill on mobile */

  .nav-pill { position: relative; flex-wrap: wrap; }

  .nav-hamburger { display: inline-flex; }

  .nav-pill > .cta-slot { display: none; }



  /* Collapse desktop links container · only visible when menu open */

  .nav-pill .links {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    margin-top: 8px;

    background: var(--paper-white);

    padding: 18px 18px 22px;

    border-radius: 16px;

    box-shadow: 0 16px 40px rgba(58, 37, 73, 0.20);

    z-index: 100;

    flex-direction: column;

    gap: 0;

    max-height: 80vh;

    overflow-y: auto;

  }

  .nav-pill[data-mobile-open="true"] .links { display: flex; }



  .nav-pill .links .nav-item {

    width: 100%;

    margin: 0;

    border-bottom: 1px solid var(--ink-100);

  }

  .nav-pill .links .nav-item:last-child { border-bottom: none; }

  .nav-pill .links .nav-link {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    min-height: 48px;

    padding: 6px 4px;

    font-size: 16px;

    font-weight: 600;

    color: var(--ink) !important;

    background: transparent !important;

  }



  /* Dropdown panels become inline accordions · hidden by default, shown on tap */

  .nav-pill .links .nav-dropdown {

    display: none;

    position: static;

    width: 100%;

    box-shadow: none;

    padding: 4px 0 12px;

    background: transparent;

    border-radius: 0;

    transform: none;

    opacity: 1;

    pointer-events: auto;

  }

  .nav-pill .links .nav-item.is-open .nav-dropdown { display: block; }



  /* Inside-dropdown layout · single column, generous tap targets */

  .nav-pill .links .nav-dropdown-grid {

    display: flex !important;

    flex-direction: column;

    gap: 2px;

    grid-template-columns: none !important;

  }

  .nav-pill .links .nav-tile,

  .nav-pill .links .nav-row,

  .nav-pill .links .nav-case {

    min-height: 44px;

    padding: 10px 8px;

    font-size: 15px;

    background: transparent;

    border: none;

  }

  .nav-pill .links .nav-tile-title { font-size: 15px; }

  .nav-pill .links .nav-tile-sub { font-size: 13px; }

  .nav-pill .links .nav-tile-mark { display: none; }  /* skip decorative glyphs in mobile menu */

  .nav-pill .links .nav-col-head {

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.14em;

    color: var(--ink-500);

    padding: 12px 8px 6px;

  }

  .nav-pill .links .nav-foot-link,

  .nav-pill .links .nav-foot-bar {

    min-height: 44px;

    padding: 10px 8px;

    font-size: 14px;

  }



  /* Caret rotates when item is open */

  .nav-pill .links .nav-caret {

    display: inline-block;

    transition: transform 200ms ease;

  }

  .nav-pill .links .nav-item.is-open .nav-caret {

    transform: rotate(180deg);

  }



  /* Get-a-quote CTA shown at the bottom of the open menu (full-width pill) */

  .nav-pill .links .mobile-cta-slot {

    display: flex !important;

    align-items: center;

    justify-content: center;

    margin-top: 16px;

    width: 100%;

    min-height: 48px;

    border-radius: 999px;

    background: var(--mint-400);

    color: var(--ink);

    font-weight: 700;

    text-decoration: none;

    font-size: 15px;

  }

}

@media (min-width: 881px) {

  .nav-pill .links .mobile-cta-slot { display: none; }

}



/* Mobile · also bump small-text + announcement bar */

@media (max-width: 880px) {

  .sec-00 { font-size: 14px; padding: 8px 16px; }

  .nav-pill .links .nav-tile-sub { font-size: 14px; }



  /* Content-section overflow fixes from mobile audit · 2026-05-07

   * Decorative .cta-band-glow elements (520px+ radial blobs) push past viewport on phones.

   * Case row collapses to single column. Footer grid collapses to 2-col. */

  .cta-band-glow,

  .cta-band-glow-bottom { max-width: 100%; right: -40px !important; left: -40px !important; }



  .case-row {

    grid-template-columns: 1fr !important;

    gap: 16px !important;

  }

  .case-card,

  .case-card .img-area,

  .case-card img { max-width: 100%; box-sizing: border-box; }



  /* Footer · single-column stack on phones with subtle dividers between sections.

   * Mismatched column heights + line-wrap don't align across cols, so single-col

   * is the right move. 2-col returns at iPad-Mini width (handled below).

   * Breathing room tuned 2026-05-08: bigger headers, larger items, generous

   * vertical pitch so the footer reads as airy rather than cramped. */

  .sec-11 { padding: 36px 18px 28px !important; }

  .footer-grid {

    grid-template-columns: 1fr !important;

    gap: 30px !important;

    padding: 0;

  }

  .footer-col {

    min-width: 0;

    word-wrap: break-word;

    overflow-wrap: anywhere;

    padding-bottom: 28px;

    border-bottom: 1px solid rgba(250, 250, 250, 0.14);

  }

  .footer-col:last-child { border-bottom: none; padding-bottom: 4px; }

  .footer-col h5, .footer-col h3 {

    font-size: 13px;

    letter-spacing: 0.10em;

    margin-bottom: 18px;

    color: var(--mint-300, #14e7bf);

  }

  .footer-col ul { display: flex; flex-direction: column; gap: 4px; }

  .footer-col li {

    margin-bottom: 0;

    line-height: 1.45;

    font-size: 15.5px;

  }

  .footer-col a {

    display: block;

    min-height: 40px;

    padding: 8px 0;

    line-height: 1.4;

  }

  .footer-tagline {

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

    margin-top: 32px;

    padding-top: 22px;

    font-size: 12px;

    line-height: 1.5;

  }

  .legal-inner { padding: 22px 16px 26px; gap: 12px; }

  .legal-reg { font-size: 12.5px; line-height: 1.55; }

  .legal-links { font-size: 13px; gap: 8px; flex-direction: column; align-items: center; }

  .legal-links a { padding: 4px 0; min-height: 32px; }

  .legal-links span[aria-hidden] { display: none; }

  .legal-copy { font-size: 12px; line-height: 1.55; }

}



/* Tablet · footer returns to 2-col at iPad-Mini and up · single col stays for phones */

@media (min-width: 600px) and (max-width: 880px) {

  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 24px !important; }

  .footer-col { border-bottom: none !important; padding-bottom: 0 !important; }

}

@media (max-width: 880px) {

  /* re-open the mobile media block · this padded close above was a stub for the tablet rule */



  /* Touch target floor on visible action elements (not inline body links) */

  .cta, .cta-slot, .mobile-cta-slot, .spy-link, .faq-item,

  .greviews-link, .gr-see-all, .nav-foot-link, .nav-foot-bar,

  .step-btn, .fulfil-link {

    min-height: 44px;

    display: inline-flex;

    align-items: center;

  }



  /* Long-word break globally · prevents h4 / body text overflow on phones */

  h1, h2, h3, h4, h5, p, li, span, .case-card *, .why-card *, .spy-panel * {

    overflow-wrap: break-word;

    word-wrap: break-word;

  }



  /* Mobile-menu nav-case panel (Case Studies dropdown) needs bumps too */

  .nav-pill .links .nav-case-title { font-size: 15px; line-height: 1.2; }

  .nav-pill .links .nav-case-meta  { font-size: 13px; }

  .nav-pill .links .nav-case-tag   { font-size: 11px; }



  /* All grid items can shrink past content-min-size */

  .case-row > *, .why-bento > *, .timeline-row > *, .footer-grid > *,

  .greviews-grid > *, .qx-tier-strip > *, .materials-bento > * { min-width: 0; }



  /* Bound any image to its container · stops natural-size images from pushing layout */

  img { max-width: 100%; height: auto; }



  /* === Materials bento · 6-col → 3-col on mobile so chips are readable === */

  .materials-bento {

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 8px !important;

  }

  .mat-chip {

    aspect-ratio: 1 !important;

    font-size: 11px !important;

    padding: 8px !important;

    border-radius: 12px !important;

  }

  .mat-chip .tag {

    font-size: 9px !important;

    line-height: 1.1;

  }



  /* === Trust band · ensure single column with airy spacing === */

  .trust-band {

    grid-template-columns: 1fr !important;

    gap: 32px !important;

    padding: 24px 16px !important;

  }

  .trust-stat-block {

    border-right: none !important;

    border-bottom: 1px solid var(--ink-200);

    padding-bottom: 24px !important;

  }

  .trust-stat-block:last-child { border-bottom: none; padding-bottom: 0 !important; }

  .trust-stat { font-size: 56px !important; }



  /* === Queue conveyor · scaled bigger on mobile so cubes are visible === */

  #sec-turnaround { padding: 8px 4px 24px !important; }

  .queue-snake { padding: 0 !important; }

  .qs-svg { min-height: 200px; }



  /* === Service-page sections · ensure single-column on phones === */

  .cmp,

  .obj-grid,

  .why-bento,

  .timeline-row,

  .ideas-grid,

  .build-story,

  .humans-close .avatars,

  .wow-gallery {

    grid-template-columns: 1fr !important;

    gap: 16px !important;

  }

  .pricing-band { padding: 24px 16px !important; text-align: left; }

  .risk-band   { padding: 24px 16px !important; }

  .close-band  { padding: 24px 16px !important; }

  .fulfil-pipeline { flex-direction: column !important; gap: 12px !important; }

  .fulfil-pipeline > * { width: 100% !important; }



  /* services-scrollspy · at mobile, sidebar above panels (already exists at 880px) */

  .services-scrollspy {

    grid-template-columns: 1fr !important;

    gap: 16px !important;

  }

  .spy-nav { position: static !important; top: auto !important; }

  .spy-panel {

    position: static !important;

    min-height: auto !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    overflow: hidden;

  }

  .spy-panel-body, .spy-panel-head, .spy-visual,

  .spy-panel-title-strip { max-width: 100%; box-sizing: border-box; }

  .spy-panel-body { padding: 12px !important; flex-direction: column !important; }

  .spy-visual img { width: 100% !important; height: auto !important; }



  /* Hero h1 floor on phones · prevent it shrinking too small */

  .hero-h1, .hero h1, .hero-light h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.08 !important; }

  .hero { padding: 24px 16px !important; }



  /* Hero CTAs stack and full-width */

  .hero-ctas { flex-direction: column !important; gap: 10px !important; }

  .hero-ctas .cta { width: 100%; justify-content: center; }



  /* Section padding floors · ONLY on outer container · don't stack via .wf and section */

  .container { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }

  /* Nested wrappers should NOT add padding · prevents cumulative push that overflows panels */

  .wf,

  section .wf,

  .container > section { padding-left: 0; padding-right: 0; }

  /* services-scrollspy nested wrappers · clamp them all to fit the viewport */

  .services-scrollspy,

  .spy-panels,

  .spy-panel {

    min-width: 0 !important;

    max-width: 100% !important;

    width: auto !important;

    box-sizing: border-box !important;

    padding: 0;

    margin: 0;

  }

  /* spy-panel BODY · grid-based · force single column on mobile */

  .spy-panel-body {

    grid-template-columns: 1fr !important;

    padding: 16px !important;

    gap: 16px !important;

  }

  .spy-panel-head { padding: 16px !important; }

  .spy-panel-head h3 { font-size: 22px !important; }

  .spy-panel-head p,

  .spy-panel-head .spy-lede { font-size: 14px !important; line-height: 1.55 !important; }

  .spy-link-out {

    align-self: stretch !important;

    width: 100%;

    text-align: center;

    padding: 12px 16px !important;

    font-size: 14px !important;

    min-height: 48px;

    box-sizing: border-box;

  }

  .spy-visual { width: 100% !important; }

  .spy-visual img { width: 100% !important; height: auto !important; max-height: 240px; object-fit: cover; border-radius: 8px; }

  /* Let the long service titles wrap on phones instead of being

     hard-clipped mid-word. Base rule has white-space:nowrap +

     overflow:hidden + fixed height:52px (fine on wide desktop, but

     the titles are 110-135px too wide at 342px). 2026-05-18. */

  .spy-panel-title-strip {

    padding: 12px 16px !important;

    font-size: 15px !important;

    white-space: normal !important;

    overflow: visible !important;

    text-overflow: clip !important;

    height: auto !important;

    min-height: 52px;

    line-height: 1.28;

    align-items: center;

  }

  .spy-panel-num { font-size: 13px !important; }



  /* Catch wireframe-era inline-styled multi-col grids · force collapse on phones */

  div[style*="repeat(4, 1fr)"],

  div[style*="repeat(5, 1fr)"],

  div[style*="repeat(6, 1fr)"] {

    grid-template-columns: 1fr 1fr !important;

  }

  div[style*="repeat(3, 1fr)"] {

    grid-template-columns: 1fr 1fr !important;

  }

}

.sec-03 .logo-box {

  background: transparent;

  border: none;

  border-radius: 0;

  height: 64px;

  padding: 0 16px;

  filter: grayscale(1);

  opacity: 0.7;

  transition: opacity 200ms ease, filter 200ms ease, transform 200ms ease;

}

.sec-03 .logo-box:hover {

  filter: grayscale(0);

  opacity: 1;

  transform: translateY(-1px);

  background: transparent;

  border-color: transparent;

  box-shadow: none;

}

/* F1 + Hasbro PNGs have transparent padding around the actual mark, so they

 * render smaller than vector wordmarks. Bump their max-height so they read

 * at the same visual weight as the other logos. James 2026-05-07. */

.sec-03 .logo-box[data-sector="motorsport"] .logo-img,

.sec-03 .logo-box[data-sector="toys"] .logo-img {

  max-height: 84px;

  max-width: 100%;

}

@media (max-width: 1100px) {

  .logo-row { grid-template-columns: repeat(4, 1fr); row-gap: 14px; }

}

@media (max-width: 720px) {

  .logo-row { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }

}



/* ===== Richer closing CTA band · used on how-it-works (and reusable elsewhere) ===== */

.cta-band-hiw {

  position: relative;

  overflow: hidden;

  padding: 72px 32px 64px !important;

  text-align: center;

}

.cta-band-glow {

  position: absolute;

  pointer-events: none;

  width: 480px;

  height: 480px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(14, 231, 191, 0.20) 0%, rgba(14, 231, 191, 0) 65%);

  top: -180px;

  left: -120px;

  z-index: 0;

}

.cta-band-glow-bottom {

  top: auto;

  left: auto;

  bottom: -200px;

  right: -140px;

  background: radial-gradient(circle, rgba(106, 68, 137, 0.30) 0%, rgba(106, 68, 137, 0) 65%);

}

.cta-band-inner {

  position: relative;

  z-index: 1;

  max-width: 720px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

}

.cta-band-icon {

  margin-bottom: 18px;

  filter: drop-shadow(0 0 24px rgba(14, 231, 191, 0.35));

  animation: ctab-paperplane 4s ease-in-out infinite;

}

@keyframes ctab-paperplane {

  0%, 100% { transform: translate(0, 0) rotate(-8deg); }

  50%      { transform: translate(4px, -4px) rotate(-6deg); }

}

@media (prefers-reduced-motion: reduce) {

  .cta-band-icon { animation: none; }

}

.cta-band-eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--ink-300);

  margin-bottom: 16px;

}

.cta-band-h {

  font-family: var(--font-display);

  font-size: 56px;

  font-weight: 800;

  letter-spacing: -0.022em;

  line-height: 1.05;

  color: var(--paper-white);

  margin: 0 0 18px;

  max-width: 720px;

}

.cta-band-h-accent {

  color: var(--mint-400);

}

.cta-band-p {

  font-size: 16px;

  line-height: 1.55;

  color: var(--ink-200);

  margin: 0 0 32px;

  max-width: 540px;

}

.cta-band-row {

  display: flex;

  gap: 14px;

  justify-content: center;

  flex-wrap: wrap;

}

@media (max-width: 720px) {

  .cta-band-hiw { padding: 56px 20px 48px !important; }

  .cta-band-h { font-size: 38px; }

  .cta-band-p { font-size: 14.5px; }

}



/* ===== "How it works" page · plain-language 6-step explainer · 2026-05-07 ===== */

.hiw-hero {

  max-width: 880px;

  margin: 64px auto 24px;

  padding: 0 24px;

  text-align: center;

}

.hiw-hero-inner { display: flex; flex-direction: column; gap: 12px; align-items: center; }

.hiw-eyebrow {

  font-family: var(--font-mono);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.18em;

  color: var(--mint-600);

  text-transform: uppercase;

}

.hiw-h1 {

  font-family: var(--font-display);

  font-size: 44px;

  font-weight: 800;

  letter-spacing: -0.02em;

  line-height: 1.08;

  color: var(--ink);

  margin: 0;

  max-width: 720px;

}

.hiw-lede {

  font-size: 17px;

  color: var(--ink-700);

  line-height: 1.55;

  margin: 8px 0 0;

  max-width: 580px;

}



.hiw-steps {

  max-width: 760px;

  margin: 32px auto 64px;

  padding: 0 24px;

}

.hiw-steps-inner {

  display: flex;

  flex-direction: column;

  position: relative;

}

/* Vertical connector line on the left of the numbers */

.hiw-steps-inner::before {

  content: '';

  position: absolute;

  left: 33px;

  top: 36px;

  bottom: 36px;

  width: 2px;

  background: var(--ink-200);

  z-index: 0;

}

.hiw-step {

  display: grid;

  grid-template-columns: 70px 1fr;

  gap: 22px;

  padding: 28px 0;

  position: relative;

  z-index: 1;

  align-items: start;

}

.hiw-step:not(:last-child) { border-bottom: 1px solid var(--ink-100); }

.hiw-step-num {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  background: var(--paper-white);

  border: 2px solid var(--ink-200);

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-display);

  font-size: 22px;

  font-weight: 800;

  letter-spacing: -0.01em;

  color: var(--ink);

  position: relative;

  z-index: 2;

  box-shadow: 0 4px 10px rgba(58, 37, 73, 0.04);

}

.hiw-step:nth-child(1) .hiw-step-num,

.hiw-step:nth-child(6) .hiw-step-num {

  background: var(--mint-400);

  border-color: var(--mint-500);

  color: var(--ink);

}

.hiw-step-body { padding-top: 12px; }

.hiw-step-h {

  font-family: var(--font-display);

  font-size: 22px;

  font-weight: 800;

  letter-spacing: -0.012em;

  color: var(--ink);

  margin: 0 0 10px;

  line-height: 1.2;

}

.hiw-step-p {

  font-size: 15.5px;

  line-height: 1.6;

  color: var(--ink-700);

  margin: 0 0 12px;

  max-width: 580px;

}

.hiw-step-meta {

  font-family: var(--font-mono);

  font-size: 12px;

  color: var(--ink-500);

  margin: 0;

  line-height: 1.5;

}

.hiw-step-meta strong {

  color: var(--ink);

  font-weight: 700;

}

.hiw-step-meta a {

  color: var(--purple-700);

  text-decoration: underline;

  text-underline-offset: 2px;

}



@media (max-width: 720px) {

  .hiw-h1 { font-size: 32px; }

  .hiw-lede { font-size: 15px; }

  .hiw-step { grid-template-columns: 56px 1fr; gap: 16px; }

  .hiw-step-num { width: 52px; height: 52px; font-size: 18px; }

  .hiw-steps-inner::before { left: 27px; }

  .hiw-step-h { font-size: 19px; }

}



/* ===== Google Reviews widget · added 2026-05-07 ===== */

.sec-greviews {

  max-width: 1200px;

  margin: 56px auto 24px;

  padding: 36px 32px;

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  box-shadow: 0 8px 28px rgba(58, 37, 73, 0.06);

}

.greviews-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 24px;

  margin-bottom: 28px;

  flex-wrap: wrap;

}

.greviews-brand {

  display: flex;

  align-items: center;

  gap: 16px;

}

.greviews-g {

  flex-shrink: 0;

}

.greviews-headline { display: flex; flex-direction: column; gap: 4px; }

.greviews-title {

  font-family: var(--font-display);

  font-size: 22px;

  font-weight: 800;

  letter-spacing: -0.012em;

  color: var(--ink);

  margin: 0;

  line-height: 1.15;

}

.greviews-rating-row {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 13px;

  color: var(--ink-700);

}

.greviews-stars {

  color: #fbbc05;

  letter-spacing: 1px;

  font-size: 14px;

}

.greviews-rating {

  font-family: var(--font-display);

  font-size: 16px;

  font-weight: 800;

  color: var(--ink);

}

.greviews-count {

  color: var(--ink-500);

}

.greviews-link {

  font-family: var(--font-mono);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.08em;

  color: var(--purple-700);

  text-decoration: none;

  border-bottom: 1.5px solid var(--purple-700);

  padding-bottom: 2px;

  transition: color 150ms ease, border-color 150ms ease;

}

.greviews-link:hover {

  color: var(--mint-700, #0a9477);

  border-bottom-color: var(--mint-700, #0a9477);

}



.greviews-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;

}

.greview-card {

  background: var(--paper-bg, #f8f6f0);

  border: 1px solid var(--ink-200);

  border-radius: 10px;

  padding: 18px 20px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;

}

.greview-card:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 18px rgba(58, 37, 73, 0.08);

  border-color: var(--ink-300);

}

.greview-head {

  display: flex;

  align-items: center;

  gap: 12px;

}

.greview-avatar {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--font-display);

  font-size: 14px;

  font-weight: 800;

  letter-spacing: 0.04em;

  color: var(--paper-white);

  flex-shrink: 0;

}

.greview-name {

  font-family: var(--font-display);

  font-size: 15px;

  font-weight: 700;

  color: var(--ink);

  letter-spacing: -0.005em;

}

.greview-meta {

  font-size: 12px;

  color: var(--ink-500);

  display: flex;

  align-items: center;

  gap: 6px;

}

.greview-meta .greview-stars {

  color: #fbbc05;

  letter-spacing: 0.5px;

}

.greview-text {

  font-size: 14px;

  line-height: 1.55;

  color: var(--ink-700);

  margin: 0;

}



@media (max-width: 880px) {

  .sec-greviews { padding: 24px 18px; margin: 32px 16px 16px; }

  .greviews-grid { grid-template-columns: 1fr; }

  .greviews-head { flex-direction: column; align-items: flex-start; }

}



/* Animated belt · cross-treads scroll toward the printer.

 * stroke-dasharray="0.6 8" stays from inline SVG · we just animate the offset.

 * Pattern length = 8.6 per tread, so -86 = 10 cycles for a seamless loop.

 * Negative offset shifts the dash pattern in the path's drawing direction (left→right

 * = toward printer). Tier-tagged parcels stay anchored · only the belt surface moves,

 * so each card label stays clearly attached to its specific cube. */

@media (prefers-reduced-motion: no-preference) {

  @keyframes qsW-belt-run {

    from { stroke-dashoffset: 0; }

    to   { stroke-dashoffset: -86; }

  }

  .queue-snake .qs-belt-treads {

    animation: qsW-belt-run 3.5s linear infinite;

  }



  /* Parcels bob gently on the moving belt · each at a slightly different phase.

   * Use the CSS `translate` property (NOT `transform`) so it composes with the SVG

   * `transform="translate(x y)"` attribute · CSS transform would clobber the position. */

  @keyframes qsW-parcel-bob {

    0%, 100% { translate: 0 0; }

    50%      { translate: 0 -6px; }

  }

  .queue-snake .qs-parcel {

    animation: qsW-parcel-bob 2.4s ease-in-out infinite;

    transform-box: fill-box;

  }

  .queue-snake .qs-parcel:nth-child(1)  { animation-delay: -0.0s; }

  .queue-snake .qs-parcel:nth-child(2)  { animation-delay: -0.4s; }

  .queue-snake .qs-parcel:nth-child(3)  { animation-delay: -0.8s; }

  .queue-snake .qs-parcel:nth-child(4)  { animation-delay: -1.2s; }

  .queue-snake .qs-parcel:nth-child(5)  { animation-delay: -1.6s; }

  .queue-snake .qs-parcel:nth-child(6)  { animation-delay: -2.0s; }

  .queue-snake .qs-parcel:nth-child(7)  { animation-delay: -0.2s; }

  .queue-snake .qs-parcel:nth-child(8)  { animation-delay: -0.6s; }

}



/* ============================================================

 * HOMEPAGE-UIUX OVERLAY · added 2026-05-06

 *

 * Page-scope visual improvements for the A/B comparison variant

 * homepage-uiux.preview.html. Pure additive CSS · activated by

 * `<body class="homepage-uiux">`. The original homepage.preview.html

 * is untouched and will never see any of these rules.

 *

 * What this overlay improves vs the baseline homepage:

 *   1. Hero · adds an eyebrow pill before the H1 and tighter sub→CTA rhythm

 *   2. Logo wall · adds a "Trusted by" eyebrow and softer hover micro-interaction

 *   3. Trust band · subtly elevates with bottom shadow + tighter foot caption

 *   4. Materials chips · slightly smaller radius for engineer-precision feel

 *   5. Case cards · firmer hover lift (translateY -3 + soft purple shadow)

 *   6. Why-bento · softer card shadows

 *   7. Team band · gradient avatars get an inner ring for depth

 *   8. Testimonial · slight padding bump + a leading double-quote glyph

 *   9. FAQ eyebrow · fixed colour from mint-600 (forbidden body-text mint)

 *      to purple-700 · resolves brand-rules.spec.ts:105 violation

 *  10. Closing CTA · tighter line-height on H2, calmer mono eyebrow

 * ============================================================ */



/* 1 · Hero eyebrow pill · placed on the text column wrapper, NOT on

 * .hero-h1 itself (brand.preview.js splits .hero-h1 into char spans for

 * the letter-by-letter reveal · a ::before on it breaks that animation). */

body.homepage-uiux .sec-02 > div:first-child::before {

  content: 'UK · BOURNEMOUTH WORKSHOP · NEXT-DAY DISPATCH';

  display: block;

  width: fit-content;

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--paper);

  background: rgba(255, 255, 255, 0.10);

  border: 1px solid rgba(255, 255, 255, 0.22);

  padding: 4px 12px;

  border-radius: 999px;

  margin: 0 0 18px;

}



/* 2 · Logo wall · "Trusted by" line via ::before, softer hover */

body.homepage-uiux .sec-03 {

  position: relative;

}

body.homepage-uiux .sec-03::before {

  content: 'Trusted by UK product teams, brands and engineers';

  display: block;

  text-align: center;

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.18em;

  color: var(--ink-500);

  margin: 0 auto 22px;

  max-width: 540px;

}

body.homepage-uiux .sec-03 .logo-box {

  transition: transform 220ms ease, opacity 220ms ease;

}

body.homepage-uiux .sec-03 .logo-box:hover {

  transform: translateY(-2px) scale(1.02);

  opacity: 1;

}



/* 3 · Trust band · subtle elevation + tighter foot */

body.homepage-uiux .trust-band {

  position: relative;

}

body.homepage-uiux .trust-band::after {

  content: '';

  position: absolute;

  left: 10%;

  right: 10%;

  bottom: -10px;

  height: 1px;

  background: linear-gradient(90deg, transparent 0%, var(--ink-200) 50%, transparent 100%);

}

body.homepage-uiux .trust-foot { margin-top: 24px; }



/* 4 · Materials chips · tighter radius for precision feel */

body.homepage-uiux .materials-bento .mat-chip {

  border-radius: 10px;

  transition: transform 200ms ease, box-shadow 200ms ease;

}

body.homepage-uiux .materials-bento .mat-chip:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(12, 17, 26, 0.16);

}



/* 5 · Case cards · firmer lift + soft purple halo on hover */

body.homepage-uiux .case-card {

  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;

}

body.homepage-uiux .case-card:hover {

  transform: translateY(-3px);

  box-shadow: 0 8px 24px rgba(143, 94, 171, 0.18);

}



/* 6 · Why-bento · softer shadow for premium feel */

body.homepage-uiux .why-bento .why-card {

  box-shadow: 0 2px 12px rgba(58, 37, 73, 0.06);

  transition: box-shadow 220ms ease, transform 220ms ease;

}

body.homepage-uiux .why-bento .why-card:hover {

  box-shadow: 0 8px 28px rgba(58, 37, 73, 0.12);

  transform: translateY(-2px);

}



/* 7 · Team band · gradient avatar gets a soft ring */

body.homepage-uiux #sec-team [style*="border-radius: 50%"] {

  box-shadow: 0 0 0 1px rgba(143, 94, 171, 0.18), 0 4px 14px rgba(58, 37, 73, 0.18) !important;

}



/* 8 · Testimonial · padding bump + leading "double quote" glyph */

body.homepage-uiux .sec-08 {

  padding: 56px 48px;

  position: relative;

}

body.homepage-uiux .sec-08::before {

  content: '\201C';

  position: absolute;

  top: 12px;

  left: 24px;

  font-family: var(--font-display);

  font-size: 88px;

  line-height: 1;

  color: var(--purple-200);

  font-weight: 800;

  pointer-events: none;

}

body.homepage-uiux .sec-08 .quote-text {

  position: relative;

  z-index: 1;

}



/* 9 · FAQ eyebrow · fix forbidden mint-600 body text colour

 * Resolves the only failing brand-rules assertion on the homepage.

 * Switching to purple-700 keeps the same visual hierarchy on the

 * service-page palette while passing the body-text-not-mint rule. */

body.homepage-uiux .faq-eyebrow {

  color: var(--purple-700);

}



/* 10 · Closing CTA band · tighter h2 + calmer eyebrow */

body.homepage-uiux .sec-09 .cta-band h2 {

  font-size: clamp(1.75rem, 3.5vw, 2.375rem);

  letter-spacing: -0.025em;

  line-height: 1.12;

}

body.homepage-uiux .sec-09 .cta-band [style*="JetBrains Mono"] {

  color: rgba(250, 250, 250, 0.62) !important;

  font-size: 11px !important;

  letter-spacing: 0.16em !important;

}



/* ============================================================

 * HOMEPAGE UX-V2 COMPONENTS · added 2026-05-06

 * Used by homepage.ux-edited.preview.html (an A/B variant of the

 * homepage) to apply ui-ux-pro-max audit fixes without touching

 * the original. Every rule scoped under `.homepage-uxv2` on body

 * so it only fires on the edited variant.

 * ============================================================ */



.homepage-uxv2 .sec-00-icon {

  display: inline-flex; align-items: center; justify-content: center;

  width: 18px; height: 18px; color: var(--purple-700); flex-shrink: 0;

}

.homepage-uxv2 .sec-00-icon svg { width: 18px; height: 18px; display: block; }



.homepage-uxv2 .trust-band dl.trust-stat-block { margin: 0; }

.homepage-uxv2 .trust-band dl.trust-stat-block dt {

  font-family: var(--font-mono); font-size: 11px; font-weight: 700;

  color: var(--purple-700); letter-spacing: 0.1em; margin-bottom: 8px;

  text-transform: uppercase;

}

.homepage-uxv2 .trust-band dl.trust-stat-block dd { margin: 0; }



.homepage-uxv2 .start-here-band {

  display: grid; grid-template-columns: auto 1fr auto; gap: 32px;

  align-items: center; padding: 24px;

  background: var(--paper-white); border: 1px solid var(--ink-200);

  border-radius: 12px;

}

.homepage-uxv2 .start-here-band .pdf-cover {

  position: relative; width: 130px; height: 170px; border-radius: 4px;

  background: linear-gradient(135deg, var(--purple-900) 0%, var(--purple-700) 100%);

  box-shadow:

    0 1px 0 var(--ink-300),

    4px 4px 0 var(--paper-white),

    4px 4px 0 1px var(--ink-200),

    8px 8px 0 var(--paper-white),

    8px 8px 0 1px var(--ink-200),

    0 16px 32px rgba(58, 37, 73, 0.18);

  overflow: hidden; flex-shrink: 0;

  display: flex; flex-direction: column; justify-content: space-between;

  padding: 14px 12px; color: var(--paper-white);

}

.homepage-uxv2 .start-here-band .pdf-cover::before {

  content: ''; position: absolute; top: 0; left: 0; right: 0;

  height: 4px; background: var(--mint-400);

}

.homepage-uxv2 .start-here-band .pdf-cover .pdf-eyebrow {

  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em;

  text-transform: uppercase; opacity: 0.78; font-weight: 700;

}

.homepage-uxv2 .start-here-band .pdf-cover .pdf-title {

  font-family: var(--font-display); font-size: 17px; font-weight: 800;

  line-height: 1.15; letter-spacing: -0.01em;

}

.homepage-uxv2 .start-here-band .pdf-cover .pdf-foot {

  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;

  opacity: 0.65; font-weight: 700;

}

.homepage-uxv2 .start-here-band .start-here-eyebrow {

  font-family: var(--font-mono); font-size: 11px; color: var(--ink-600);

  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px;

  font-weight: 700;

}

.homepage-uxv2 .start-here-band h2 {

  font-family: var(--font-display); font-size: 26px; font-weight: 700;

  margin: 0 0 10px; letter-spacing: -0.01em; color: var(--ink);

}

.homepage-uxv2 .start-here-band p {

  color: var(--ink-700); font-size: 15px; line-height: 1.55;

  max-width: 540px; margin: 0;

}



.homepage-uxv2 .risk-reversal-band {

  margin-top: 20px; background: var(--purple-900); color: var(--ink-50);

  padding: 28px; border-radius: 6px;

  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;

}

.homepage-uxv2 .risk-reversal-band .shield-icon {

  display: inline-flex; align-items: center; justify-content: center;

  width: 56px; height: 56px; border-radius: 50%;

  background: rgba(14, 231, 191, 0.14);

  border: 1px solid rgba(14, 231, 191, 0.32);

  color: var(--mint-300); flex-shrink: 0;

}

.homepage-uxv2 .risk-reversal-band .shield-icon svg { width: 28px; height: 28px; display: block; }

.homepage-uxv2 .risk-reversal-band h4 {

  font-weight: 700; margin: 0 0 6px; color: var(--ink-50);

  font-family: var(--font-display); font-size: 16px;

}

.homepage-uxv2 .risk-reversal-band p {

  font-size: 13px; color: var(--ink-200); margin: 0; line-height: 1.55;

}



.homepage-uxv2 .team-band {

  background: var(--paper-white); border-radius: 12px;

  padding: 48px 40px; margin-top: 10px; border: 1px solid var(--ink-200);

}

.homepage-uxv2 .team-band-inner {

  display: grid; grid-template-columns: auto 1fr; gap: 40px;

  align-items: center; max-width: 880px; margin: 0 auto;

}

.homepage-uxv2 .team-band .avatar-stack { display: flex; align-items: center; }

.homepage-uxv2 .team-band .monogram-avatar {

  width: 96px; height: 96px; border-radius: 50%;

  border: 4px solid var(--paper-white);

  display: flex; align-items: center; justify-content: center;

  font-family: var(--font-display); font-weight: 800;

  font-size: 28px; letter-spacing: 0.04em;

  color: var(--paper-white);

  box-shadow: 0 4px 14px rgba(58, 37, 73, 0.16);

  flex-shrink: 0;

}

.homepage-uxv2 .team-band .monogram-avatar.mono-jc {

  background: linear-gradient(135deg, var(--purple-700) 0%, var(--purple-900) 100%);

  z-index: 2; position: relative;

}

.homepage-uxv2 .team-band .monogram-avatar.mono-fb {

  background: linear-gradient(135deg, var(--mint-300) 0%, var(--mint-500) 100%);

  margin-left: -22px;

  color: var(--ink);

}

.homepage-uxv2 .team-band h2 {

  font-family: var(--font-display); font-size: 26px; font-weight: 700;

  line-height: 1.15; margin: 0 0 10px; color: var(--ink); letter-spacing: -0.01em;

}

.homepage-uxv2 .team-band p {

  font-size: 15px; color: var(--ink-700); line-height: 1.6;

  max-width: 540px; margin: 0;

}

.homepage-uxv2 .team-band .team-meta {

  display: flex; gap: 16px; margin-top: 18px; flex-wrap: wrap;

  font-family: var(--font-mono); font-size: 11px; color: var(--ink-600);

  text-transform: uppercase; letter-spacing: 0.08em;

}

.homepage-uxv2 .team-band .team-meta-sep { color: var(--ink-400, var(--ink-300)); }



.homepage-uxv2 .cta-band-inner { max-width: 720px; margin: 0 auto; }

.homepage-uxv2 .cta-band-eyebrow {

  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;

  text-transform: uppercase; color: var(--ink-300); margin-bottom: 14px;

}

.homepage-uxv2 .cta-band h2 {

  font-family: var(--font-display); font-size: 38px; letter-spacing: -0.02em;

  line-height: 1.1; margin: 0 0 16px; color: var(--paper-white); font-weight: 800;

}

.homepage-uxv2 .cta-band-sub {

  color: var(--ink-300); font-size: 15px; margin: 0 0 28px; line-height: 1.5;

}

.homepage-uxv2 .cta-band-row {

  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;

}



.homepage-uxv2 .faq-answer p strong { color: var(--ink); font-weight: 700; }

.homepage-uxv2 .faq-answer p em strong,

.homepage-uxv2 .faq-answer p strong em { font-style: italic; }



@media (max-width: 720px) {

  .homepage-uxv2 .start-here-band { grid-template-columns: 1fr; text-align: center; }

  .homepage-uxv2 .start-here-band .pdf-cover { margin: 0 auto; }

  .homepage-uxv2 .team-band-inner { grid-template-columns: 1fr; gap: 24px; text-align: left; }

  .homepage-uxv2 .team-band .avatar-stack { justify-content: flex-start; }

  .homepage-uxv2 .risk-reversal-band { grid-template-columns: 1fr; text-align: center; }

  .homepage-uxv2 .risk-reversal-band .shield-icon { margin: 0 auto; }

}





/* UX-v2 override · make .team-avatar-freddy mint-themed (vs dark ink in original) */

.homepage-uxv2 .team-avatar-freddy {

  background: linear-gradient(135deg, var(--mint-300) 0%, var(--mint-500) 100%);

  color: var(--ink);

}

.homepage-uxv2 .team-avatar-freddy span { color: var(--ink); }



/* ============================================================

 * CAD-UI-EDIT OVERLAY · added 2026-05-06

 *

 * UI/UX-Pro-Max audit applied to cad-design-services.preview.html.

 * Activated by `<body class="cad-dark cad-ui-edit">`. The original CAD

 * preview is untouched; this overlay only fires on the .ui-edit variant

 * so James can A/B compare via the pinned switcher in the top-right.

 *

 * Engineer-professional polish per the audit:

 *   1. Hero · subtle technical-grid pattern overlay on the stage,

 *      sharper paper-tinted eyebrow pill

 *   2. Trust band · stat-block hover with mint-edge glow, tabular figures

 *   3. Cost-contrast · mint hairline on the LHS to anchor the figure

 *   4. Bridge copy · paper-tinted with stronger leading caret

 *   5. Intake tiles · monospace iconbox numerals (S/P/D/R/C) in a sharper

 *      mint chip + soft inner shadow

 *   6. Process steps · approval-gate pill upgraded with mint pulse on

 *      hover, tolerance chip gets a tabular-num treatment

 *   7. Turnaround tier · "Standard" headline tier gets a subtle mint

 *      cross-hatch backdrop so it reads as the recommended tier without

 *      shouting · all three tiers get tabular figures for day counts

 *   8. Capabilities · cap-card hover lifts mint-edge ring; software chip

 *      "primary" stays mint, secondary chips get a sharper border

 *   9. Tolerance ladder table · alternating-row tint with mint accent on

 *      every td.tol-val (tabular figures lock alignment)

 *  10. Case cards · inner mint hairline above the metrics-row, hover lift

 *      stronger (translate -3 + mint-edge glow)

 *  11. Canny-band · the "we DO" column gets a subtle mint cross-hatch

 *      pattern so the positive list reads first at glance

 *  12. Risk-band · 4 promises get a left mint-bar accent (vertical hair)

 *      and tabular-num for the 01/02/03/04 numerals

 *  13. Humans-close · avatars get a mint glow ring on hover, CTA primary

 *      gets a magnetic-style halo

 *  14. FAQ accordion · plus-icon micro-rotation on expand, divider hairs

 *      tighten to var(--ink-700)

 *  15. Section spacing rhythm · consistent 56px bottom on dark cards

 * ============================================================ */



/* 1 · Hero · technical-grid pattern overlay + sharper eyebrow */

body.cad-ui-edit .cadtoreal-stage::before {

  background-image:

    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),

    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);

  background-size: 40px 40px, 40px 40px, 24px 24px;

}

body.cad-ui-edit .cadtoreal-sidebar .eyebrow {

  background: rgba(14, 231, 191, 0.10);

  border-color: rgba(14, 231, 191, 0.32);

  color: var(--mint-200);

}



/* 2 · Trust band · hover ring + tabular figures */

body.cad-ui-edit .trust-card:hover {

  border-color: var(--mint-400);

  box-shadow: 0 0 0 1px rgba(14, 231, 191, 0.32), 0 8px 24px rgba(14, 231, 191, 0.12);

}

body.cad-ui-edit .trust-card .stat,

body.cad-ui-edit .trust-card .stat span,

body.cad-ui-edit .trust-card .stat .unit,

body.cad-ui-edit .turnaround-tier .days,

body.cad-ui-edit .turnaround-tier .days .unit,

body.cad-ui-edit .case .metrics-row .m,

body.cad-ui-edit .cap-card .tol-ladder td.tol-val {

  font-variant-numeric: tabular-nums;

  font-feature-settings: 'tnum' 1;

}



/* 3 · Cost-contrast · mint hairline anchor */

body.cad-ui-edit .cost-contrast {

  border-left: 3px solid var(--mint-400);

  padding-left: 36px;

}



/* 4 · Bridge copy · stronger leading caret */

body.cad-ui-edit .bridge-copy::before {

  background: var(--mint-400);

  opacity: 0.42;

  height: 28px;

  top: -28px;

}



/* 5 · Intake tiles · sharper mint iconbox */

body.cad-ui-edit .intake-tile .iconbox {

  background: rgba(14, 231, 191, 0.08);

  border: 1px solid rgba(14, 231, 191, 0.32);

  color: var(--mint-300);

  box-shadow: inset 0 1px 0 rgba(14, 231, 191, 0.12);

  font-weight: 800;

}

body.cad-ui-edit .intake-tile:hover .iconbox {

  background: rgba(14, 231, 191, 0.14);

  border-color: var(--mint-400);

}



/* 6 · Process steps · gate pulse + tolerance chip tabular */

body.cad-ui-edit .steps .step.gate::after {

  transition: transform 200ms ease, box-shadow 200ms ease;

}

body.cad-ui-edit .steps .step.gate:hover::after {

  transform: scale(1.06);

  box-shadow: 0 0 0 4px rgba(143, 94, 171, 0.22);

}

body.cad-ui-edit .steps .step .tol {

  font-variant-numeric: tabular-nums;

  font-feature-settings: 'tnum' 1;

}



/* 7 · Turnaround tier · mint cross-hatch on the recommended tier

 *     plus tabular figures for day counts. */

body.cad-ui-edit .turnaround-tier.headline {

  background:

    repeating-linear-gradient(135deg,

      rgba(14, 231, 191, 0.04) 0,

      rgba(14, 231, 191, 0.04) 1px,

      transparent 1px,

      transparent 8px),

    linear-gradient(180deg, rgba(14, 231, 191, 0.14) 0%, var(--ink-800) 100%);

}



/* 8 · Capabilities · mint-edge ring on hover */

body.cad-ui-edit .cap-card:hover {

  box-shadow: 0 0 0 1px rgba(14, 231, 191, 0.32), 0 8px 24px rgba(14, 231, 191, 0.12);

}

body.cad-ui-edit .cap-card .software-row .chip {

  box-shadow: 0 1px 2px rgba(12, 17, 26, 0.45);

}

body.cad-ui-edit .cap-card .software-row .chip.secondary:hover {

  border-color: var(--mint-400);

  color: var(--mint-200);

}



/* 9 · Tolerance ladder table · alternating zebra-row tint */

body.cad-ui-edit .cap-card .tol-ladder tbody tr:nth-child(odd) td {

  background: rgba(255, 255, 255, 0.02);

}

body.cad-ui-edit .cap-card .tol-ladder tbody tr:hover td {

  background: rgba(14, 231, 191, 0.04);

}



/* 10 · Case cards · inner mint hairline above metrics-row + stronger hover */

body.cad-ui-edit .case .metrics-row {

  border-top: 1px solid rgba(14, 231, 191, 0.20);

}

body.cad-ui-edit .case:hover {

  transform: translateY(-3px);

  box-shadow: 0 0 0 1px rgba(14, 231, 191, 0.32), 0 12px 32px rgba(14, 231, 191, 0.10);

}



/* 11 · Canny-band · "WE DO" column gets a subtle mint cross-hatch */

body.cad-ui-edit .canny-band > .can {

  background:

    repeating-linear-gradient(135deg,

      rgba(14, 231, 191, 0.025) 0,

      rgba(14, 231, 191, 0.025) 1px,

      transparent 1px,

      transparent 6px),

    var(--ink-800);

}



/* 12 · Risk-band · left mint hair accent + tabular numerals */

body.cad-ui-edit .risk-promise {

  position: relative;

  padding-left: 18px;

}

body.cad-ui-edit .risk-promise::before {

  content: '';

  position: absolute;

  left: 0;

  top: 4px;

  bottom: 4px;

  width: 2px;

  background: var(--mint-400);

  opacity: 0.7;

  border-radius: 2px;

}

body.cad-ui-edit .risk-promise .num {

  font-variant-numeric: tabular-nums;

  font-feature-settings: 'tnum' 1;

}



/* 13 · Humans-close · avatar mint-glow on hover */

body.cad-ui-edit .humans-close .avatars .avatar {

  transition: box-shadow 240ms ease, transform 240ms ease;

}

body.cad-ui-edit .humans-close .avatars .avatar:hover {

  transform: scale(1.04);

  box-shadow: 0 0 0 4px rgba(14, 231, 191, 0.28), 0 12px 32px rgba(12, 17, 26, 0.45);

}



/* 14 · FAQ accordion · plus-icon micro-rotation + tighter dividers */

body.cad-ui-edit .faq-item {

  border-top-color: var(--ink-700);

}

body.cad-ui-edit .faq-item .plus {

  display: inline-block;

  transition: transform 200ms ease, color 200ms ease;

}

body.cad-ui-edit .faq-item[aria-expanded="true"] .plus {

  transform: rotate(45deg);

  color: var(--mint-300);

}



/* 15 · Section spacing rhythm · consistent breathing room on dark page */

body.cad-ui-edit .container > section:not([class*="sec-"]) {

  margin-bottom: 56px;

}

body.cad-ui-edit .container > section:last-of-type { margin-bottom: 0; }



/* CTA-row spacing fix · tighter on dark hero so the secondary doesn't

 * float on its own line on narrow viewports */

body.cad-ui-edit .cadtoreal-sidebar .cta-row {

  gap: 12px;

}

body.cad-ui-edit .cadtoreal-sidebar .cta.primary {

  background: var(--mint-400);

  color: var(--ink);

  border-color: var(--mint-400);

  box-shadow: 0 4px 14px rgba(14, 231, 191, 0.32);

  font-weight: 700;

}

body.cad-ui-edit .cadtoreal-sidebar .cta.primary:hover {

  background: var(--mint-300);

  border-color: var(--mint-300);

  box-shadow: 0 6px 22px rgba(14, 231, 191, 0.42);

}



/* Frame-tracker · sharper active state */

body.cad-ui-edit .cadtoreal-sidebar .frame-tracker li.active .dot {

  box-shadow: 0 0 0 4px rgba(14, 231, 191, 0.20);

}



/* ============================================================

 * PRODUCT-DEV PAGE COMPONENTS · promoted 2026-05-06 · added 2026-05-06

 *

 * Used by product-development.ux-edited.preview.html · A/B variant

 * applying ui-ux-pro-max audit fixes without touching the original.

 * Every rule scoped under `.product-dev-page` on body.

 *

 * Scope of additions:

 *   1. Announcement-bar SVG icon (replaces 📏 emoji)

 *   2. Trust-band <dl>/<dt>/<dd> semantic style

 *   3. Skim-bold across .why-grid / .steps-5 / .risk-band / .wedge-card / .icp-card .state / .faq-answer

 *   4. Pricing-band driver icons (small inline SVG before each driver)

 *   5. Fulfil-teaser link chrome class (kills inline <a style="...">)

 *   6. Close-band CTA wrapper class (kills inline <div style="display: flex...">)

 *   7. ICP intro paragraph class (kills inline <p style="color:...">)

 *   8. Pricing eyebrow class (kills inline <p style="color: var(--ink-200)...">)

 * ============================================================ */



/* 1 · Announcement-bar SVG icon */

.product-dev-page .sec-00-icon {

  display: inline-flex; align-items: center; justify-content: center;

  width: 18px; height: 18px; color: var(--purple-700); flex-shrink: 0;

}

.product-dev-page .sec-00-icon svg { width: 18px; height: 18px; display: block; }



/* 2 · Trust-band semantic dl/dt/dd · visual-identical to original .trust-card */

.product-dev-page .trust-grid dl.trust-card { margin: 0; }

.product-dev-page .trust-grid dl.trust-card dt {

  font-family: var(--font-mono); font-size: 11px; font-weight: 700;

  color: var(--purple-700); letter-spacing: 0.1em; text-transform: uppercase;

  margin-bottom: 6px;

}

.product-dev-page .trust-grid dl.trust-card dd { margin: 0; }



/* 3 · Skim-bold across all dense card-body text sections */

.product-dev-page .why-grid .why-card p strong,

.product-dev-page .steps-5 .step p strong,

.product-dev-page .risk-band .risk-promise p strong,

.product-dev-page .wedge-intro p strong,

.product-dev-page .wedge-card .body p strong,

.product-dev-page .icp-card .state strong + br + span,

.product-dev-page .icp-card .icp-intro strong,

.product-dev-page .pricing-band p strong,

.product-dev-page .fulfil-teaser p strong,

.product-dev-page .faq-answer p strong,

.product-dev-page .faq-answer strong {

  color: var(--ink); font-weight: 700;

}

.product-dev-page .why-grid .why-card p em strong,

.product-dev-page .why-grid .why-card p strong em,

.product-dev-page .faq-answer strong em,

.product-dev-page .faq-answer em strong { font-style: italic; }



/* On dark .risk-band (purple-900 bg) the strong needs to be paper not ink */

.product-dev-page .risk-band .risk-promise p strong { color: var(--paper-white); }



/* 4 · Pricing-band drivers · small inline SVG slot before each <li> */

.product-dev-page .pricing-drivers li {

  display: flex; align-items: center; gap: 10px;

  padding-left: 0;

}

.product-dev-page .pricing-drivers li::before { content: none; }   /* kill the "+" marker */

.product-dev-page .pricing-drivers li .pd-icon {

  flex-shrink: 0;

  display: inline-flex; align-items: center; justify-content: center;

  width: 22px; height: 22px;

  color: var(--mint-400);

}

.product-dev-page .pricing-drivers li .pd-icon svg {

  width: 16px; height: 16px; display: block;

}



/* 5 · Fulfil-teaser link · kills inline <a style="..."> */

.product-dev-page .fulfil-teaser .fulfil-link {

  font-weight: 700;

  color: var(--ink);

  text-decoration: none;

  border-bottom: 2px solid var(--mint-400);

  padding-bottom: 2px;

  font-size: 14px;

}

.product-dev-page .fulfil-teaser .fulfil-link:hover { color: var(--purple-700); }



/* 6 · Close-band CTA wrapper · kills inline <div style="display: flex..."> */

.product-dev-page .close-band .close-cta-row {

  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;

}



/* 7 · ICP intro paragraph · kills inline <p style="color: var(--ink-700)..."> */

.product-dev-page .icp-card .icp-intro {

  color: var(--ink-700);

  font-size: 14px;

  margin: 0 0 6px;

  line-height: 1.55;

}



/* 8 · Pricing eyebrow on right column · kills inline <p style="color: var(--ink-200)..."> */

.product-dev-page .pricing-band .pricing-eyebrow {

  color: var(--ink-200);

  font-size: 13px;

  margin-bottom: 10px;

  font-family: var(--font-mono);

  text-transform: uppercase;

  letter-spacing: 0.1em;

}



/* 9 · Skim-bold inside fulfil-teaser body */

.product-dev-page .fulfil-teaser p strong { color: var(--ink); font-weight: 700; }





/* ============================================================

 * A/B preview toggle pill · added 2026-05-06

 * Floating bottom-right link that flips between two preview

 * variants without leaving the page or switching tabs. Used on

 * the product-dev original + ux-edited pair (and reusable for

 * any future A/B preview pair).

 * ============================================================ */

.ab-toggle {

  position: fixed;

  right: 24px;

  bottom: 24px;

  z-index: 9999;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 12px 18px;

  background: var(--ink);

  color: var(--paper-white);

  font-family: var(--font-mono);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  text-decoration: none;

  border-radius: 999px;

  box-shadow: 0 8px 22px rgba(12, 17, 26, 0.28);

  border: 1px solid rgba(255, 255, 255, 0.10);

  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;

}

.ab-toggle:hover {

  background: var(--purple-700);

  transform: translateY(-2px);

  box-shadow: 0 12px 28px rgba(58, 37, 73, 0.32);

}

.ab-toggle .ab-toggle-label {

  display: flex; flex-direction: column; line-height: 1.15;

}

.ab-toggle .ab-toggle-eyebrow {

  font-size: 9px;

  letter-spacing: 0.16em;

  color: var(--mint-300);

  font-weight: 700;

  margin-bottom: 2px;

}

.ab-toggle .ab-toggle-arrow {

  font-family: var(--font-mono);

  font-size: 16px;

  color: var(--mint-400);

}

.ab-toggle.ab-toggle-uxedit { background: var(--purple-700); }

.ab-toggle.ab-toggle-uxedit:hover { background: var(--purple-900); }

@media (max-width: 720px) {

  .ab-toggle { right: 12px; bottom: 12px; padding: 10px 14px; font-size: 10px; }

}





/* PRICING-BAND DARK-BG STRONG OVERRIDE · 2026-05-06 (James contrast fix)

 * The product-dev .pricing-band has a dark purple gradient bg with paper-tinted

 * body text. The generic .product-dev-page p strong rule sets color: var(--ink)

 * which renders as dark-on-dark · invisible. Override to mint-300 so skim-bold

 * keywords pop as accent highlights on the gradient. Same logic as risk-band. */

.product-dev-page .pricing-band p strong {

  color: var(--mint-300);

}



/* ============================================================

 * CAD-UI-EDIT · LIGHT + PHOTOS BANDS · added 2026-05-06

 *

 * James asked for "more light" + "more photos" + "better flow" on the

 * dark CAD page. Two new bands are injected ONLY into the UI-edit

 * variant (cad-design-services.ui-edit.preview.html). Both serve as

 * visual breaths between dense text sections:

 *

 *   1. .cad-journey-band  (between §04 process ladder and §05 turnaround)

 *      4 small process-thumb photos with mint arrows · paper-tinted dark

 *      bg lifts the rhythm. Ties the abstract steps to real photos.

 *

 *   2. .cad-workshop-band (between §08 cases and §09 we-do/we-don't)

 *      Full-bleed workshop wide-shot with paper-tinted overlay caption.

 *      "More light" comes from the photo's ambient brightness · the band

 *      bg is paper-tinted (not ink) so it reads as a clear breath in the

 *      otherwise-dark page.

 *

 * Activated by `body.cad-ui-edit` so the original CAD page stays clean

 * and the chrome doesn't ship until James greenlights the photos.

 * ============================================================ */



/* ----- 1 · Process journey strip ----- */

body.cad-ui-edit .cad-journey-band {

  background: linear-gradient(180deg, var(--ink-800) 0%, var(--ink) 100%);

  border: 1px solid var(--ink-700);

  border-radius: 16px;

  padding: 36px 32px 32px;

  position: relative;

}

body.cad-ui-edit .cad-journey-eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.18em;

  color: var(--mint-300);

  text-transform: uppercase;

  margin: 0 0 18px;

  text-align: center;

}

body.cad-ui-edit .cad-journey-strip {

  display: grid;

  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;

  gap: 14px;

  align-items: center;

}

body.cad-ui-edit .cad-journey-frame {

  margin: 0;

  border-radius: 10px;

  overflow: hidden;

  background: var(--ink-700);

  transition: transform 220ms ease, box-shadow 220ms ease;

}

body.cad-ui-edit .cad-journey-frame:hover {

  transform: translateY(-2px);

  box-shadow: 0 0 0 1px rgba(14, 231, 191, 0.32), 0 8px 22px rgba(14, 231, 191, 0.10);

}

body.cad-ui-edit .cad-journey-frame-img {

  aspect-ratio: 4 / 3;

  width: 100%;

  overflow: hidden;

  position: relative;

}

body.cad-ui-edit .cad-journey-frame-img > img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

body.cad-ui-edit .cad-journey-frame figcaption {

  display: flex;

  align-items: baseline;

  gap: 10px;

  padding: 12px 14px;

  font-family: var(--font-mono);

  font-size: 12px;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: rgba(250, 250, 250, 0.78);

  background: var(--ink-800);

}

body.cad-ui-edit .cad-journey-frame .cad-journey-step {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 18px;

  color: var(--mint-400);

  letter-spacing: -0.01em;

  font-variant-numeric: tabular-nums;

  font-feature-settings: 'tnum' 1;

}

body.cad-ui-edit .cad-journey-arrow {

  color: var(--mint-400);

  font-family: var(--font-display);

  font-size: 22px;

  font-weight: 800;

  line-height: 1;

  text-align: center;

  opacity: 0.78;

}

@media (max-width: 860px) {

  body.cad-ui-edit .cad-journey-strip {

    grid-template-columns: 1fr 1fr;

    gap: 12px;

  }

  body.cad-ui-edit .cad-journey-arrow { display: none; }

}



/* ----- 2 · Workshop full-bleed band · the "more light" moment -----

 *

 * Paper-tinted dark mix (rgba paper over ink-800) gives the band a

 * lifted feel against the surrounding ink page. The photo carries the

 * ambient brightness; the caption sits as a paper-tinted overlay panel

 * on the LHS so the photo reads first. */

body.cad-ui-edit .cad-workshop-band {

  position: relative;

  border-radius: 16px;

  overflow: hidden;

  display: grid;

  grid-template-columns: minmax(280px, 38%) 1fr;

  gap: 0;

  background: linear-gradient(135deg,

    rgba(255, 255, 255, 0.04) 0%,

    rgba(255, 255, 255, 0.02) 100%),

    var(--ink-800);

  border: 1px solid var(--ink-700);

  box-shadow: 0 0 0 1px rgba(14, 231, 191, 0.16), 0 12px 36px rgba(12, 17, 26, 0.45);

  isolation: isolate;

  padding: 0;

  margin-bottom: 56px;

}

body.cad-ui-edit .cad-workshop-band-caption {

  padding: 40px 32px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  background:

    linear-gradient(180deg, rgba(14, 231, 191, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%),

    var(--ink-800);

  border-right: 1px solid var(--ink-700);

}

body.cad-ui-edit .cad-workshop-band-eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--mint-300);

  background: rgba(14, 231, 191, 0.10);

  border: 1px solid rgba(14, 231, 191, 0.28);

  padding: 4px 10px;

  border-radius: 999px;

  display: inline-block;

  margin-bottom: 16px;

  width: fit-content;

}

body.cad-ui-edit .cad-workshop-band-caption p {

  font-family: var(--font-display);

  font-size: clamp(1.125rem, 1.6vw, 1.375rem);

  font-weight: 700;

  color: var(--paper);

  margin: 0;

  letter-spacing: -0.015em;

  line-height: 1.4;

}

body.cad-ui-edit .cad-workshop-band-img {

  position: relative;

  overflow: hidden;

  min-height: 260px;

}

body.cad-ui-edit .cad-workshop-band-img > img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

/* Subtle mint-edge wash on the photo so it ties to the ui-edit accent

 * without obscuring the workshop scene. */

body.cad-ui-edit .cad-workshop-band-img::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(90deg,

    rgba(12, 17, 26, 0.32) 0%,

    rgba(12, 17, 26, 0.08) 30%,

    rgba(12, 17, 26, 0.0) 70%,

    rgba(14, 231, 191, 0.10) 100%);

  pointer-events: none;

}

@media (max-width: 860px) {

  body.cad-ui-edit .cad-workshop-band {

    grid-template-columns: 1fr;

  }

  body.cad-ui-edit .cad-workshop-band-caption {

    border-right: none;

    border-bottom: 1px solid var(--ink-700);

    padding: 28px 24px;

  }

  body.cad-ui-edit .cad-workshop-band-img {

    min-height: 240px;

    aspect-ratio: 16 / 9;

  }

}



/* ----- 3 · Section spacing rhythm bump · 56px → 72px on dark cards

 *     for more breathing room between dense sections.

 *     Overrides the earlier .cad-ui-edit 56px rule. ----- */

body.cad-ui-edit .container > section:not([class*="sec-"]) {

  margin-bottom: 72px;

}

body.cad-ui-edit .container > section:last-of-type { margin-bottom: 0; }





/* PRICING-BAND CTA ROW · 2026-05-06 (James: "no CTA on the offer card")

 * Two-button row sits below the offer body in the left column. Mint primary

 * "Claim your free V1 sample" + paper-bordered ghost "Or book a call".

 * Wraps below 480px. */

.product-dev-page .pricing-band .pricing-cta-row {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  margin-top: 22px;

  align-items: center;

}





/* PRICING-BAND .cta.secondary on dark gradient · stronger paper border for visibility */

.product-dev-page .pricing-band .cta.secondary {

  color: var(--paper-white);

  border-color: rgba(255, 255, 255, 0.55);

  background: transparent;

}

.product-dev-page .pricing-band .cta.secondary:hover {

  border-color: var(--paper-white);

  background: rgba(255, 255, 255, 0.08);

}



/* ============================================================

 * CAD-UI-EDIT · LIGHTER PAGE BG · added 2026-05-06 (round 3)

 *

 * James: "Yes still make it lighter maybe the overall background

 * aswell?". Lifting the dark mode without going light · subtle

 * brand-tinted radial washes + a soft vertical gradient lift the

 * bg, and cards get a paper-wash + 1px highlight so they read as

 * glass surfaces floating on the new bg.

 *

 * Activated by `body.cad-ui-edit`. Original CAD page (cad-dark

 * without ui-edit) keeps its uniform --ink page bg unchanged.

 *

 * Token resolution at runtime:

 *   ink-800   #1a2130

 *   ink       #0c111a

 *   purple-900 (radial top wash, 8% opacity)

 *   mint-400 (radial bottom-right wash, 5% opacity)

 *   paper (1-2% wash on cards · the "glass" lift)

 * ============================================================ */



body.cad-ui-edit {

  background:

    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(143, 94, 171, 0.14) 0%, transparent 60%),

    radial-gradient(ellipse 60% 40% at 90% 80%, rgba(14, 231, 191, 0.07) 0%, transparent 60%),

    linear-gradient(180deg, #1a2130 0%, #161b27 50%, #11151c 100%);

  background-attachment: fixed;

  min-height: 100vh;

}



/* Card surfaces · paper wash + 1px top highlight = glass-on-dark feel.

 * Applied broadly to every card-shaped element on the CAD page so the

 * rhythm stays consistent. The wash is tonal-only (white at 4%/1.5%) so

 * brand colours are unaffected. */

body.cad-ui-edit .trust-card,

body.cad-ui-edit .case,

body.cad-ui-edit .icp-card,

body.cad-ui-edit .cap-card,

body.cad-ui-edit .intake-tile,

body.cad-ui-edit .steps .step,

body.cad-ui-edit .turnaround-tier,

body.cad-ui-edit .obj-grid .obj,

body.cad-ui-edit .canny-band > .can,

body.cad-ui-edit .canny-band > .cant,

body.cad-ui-edit .ip-strip,

body.cad-ui-edit .cost-contrast {

  background:

    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%),

    var(--ink-800);

  border-color: rgba(255, 255, 255, 0.10);

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.05),

    0 1px 0 rgba(0, 0, 0, 0.18);

}

body.cad-ui-edit .turnaround-tier.headline {

  background:

    repeating-linear-gradient(135deg,

      rgba(14, 231, 191, 0.04) 0,

      rgba(14, 231, 191, 0.04) 1px,

      transparent 1px,

      transparent 8px),

    linear-gradient(180deg, rgba(14, 231, 191, 0.18) 0%, rgba(14, 231, 191, 0.08) 100%),

    var(--ink-800);

  border-color: var(--mint-400);

}

body.cad-ui-edit .canny-band > .can {

  background:

    repeating-linear-gradient(135deg,

      rgba(14, 231, 191, 0.025) 0,

      rgba(14, 231, 191, 0.025) 1px,

      transparent 1px,

      transparent 6px),

    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%),

    var(--ink-800);

}



/* Process journey strip frames also lift to glass-on-dark */

body.cad-ui-edit .cad-journey-frame {

  background:

    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%),

    var(--ink-800);

  border: 1px solid rgba(255, 255, 255, 0.10);

}

body.cad-ui-edit .cad-journey-frame figcaption {

  background:

    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%),

    var(--ink-800);

}



/* Workshop band caption panel · slightly lifted to match the rest */

body.cad-ui-edit .cad-workshop-band {

  background:

    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%),

    var(--ink-800);

  border-color: rgba(255, 255, 255, 0.12);

}

body.cad-ui-edit .cad-workshop-band-caption {

  background:

    linear-gradient(180deg, rgba(14, 231, 191, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%),

    var(--ink-800);

  border-right-color: rgba(255, 255, 255, 0.10);

}



/* Capabilities tolerance ladder zebra-row tint a touch brighter against

 * the new lifted bg so rows still feel structured. */

body.cad-ui-edit .cap-card .tol-ladder tbody tr:nth-child(odd) td {

  background: rgba(255, 255, 255, 0.025);

}



/* Hover halos lift further on the new bg · same mint-edge ring but

 * stronger glow because the bg is a touch lighter. */

body.cad-ui-edit .trust-card:hover,

body.cad-ui-edit .case:hover,

body.cad-ui-edit .cap-card:hover,

body.cad-ui-edit .intake-tile:hover,

body.cad-ui-edit .obj-grid .obj:hover,

body.cad-ui-edit .turnaround-tier:hover {

  border-color: var(--mint-400);

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.08),

    0 0 0 1px rgba(14, 231, 191, 0.32),

    0 12px 32px rgba(14, 231, 191, 0.14);

}



/* Footer · also lifted so it doesn't sink into the new bg */

body.cad-ui-edit .footer {

  background:

    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%),

    var(--ink-800);

  border-color: rgba(255, 255, 255, 0.10);

}



/* Frame-tracker dots · paper-tinted dim state reads better on the

 * lifted bg than a low-contrast dark dot. */

body.cad-ui-edit .cadtoreal-sidebar .frame-tracker li .dot {

  background: rgba(255, 255, 255, 0.22);

}

body.cad-ui-edit .cadtoreal-sidebar .frame-tracker li.active .dot {

  background: var(--mint-400);

}





/* HERO PHOTO SHADER · product-dev override · 2026-05-06 (James: "too dark, can't see it")

 * Default .hero-visual::before shader is 78%/70%/55% opacity for cases where text

 * overlays the photo. Product-dev hero is text-on-LEFT, photo-on-RIGHT (no overlap),

 * so the photo doesn't need heavy shading. Lightened to a barely-there top edge fade

 * for mild brand-purple cohesion with the dark left column · photo reads almost

 * full strength. */

.product-dev-page .hero-visual::before {

  background:

    linear-gradient(135deg, rgba(58, 37, 73, 0.18) 0%, rgba(12, 17, 26, 0.08) 50%, rgba(12, 17, 26, 0) 100%);

}





/* WEDGE-GRID HEADING · 2026-05-06 (James: "add a title above the 6 cards")

 * Sits between .wedge-intro (top text + bracket photo) and .wedge-grid (6 cards).

 * Mono eyebrow + display h3 · narrows the gap between the abstract argument

 * (intro) and the concrete examples (cards). */

.product-dev-page .wedge-grid-heading {

  display: flex;

  flex-direction: column;

  gap: 6px;

  align-items: flex-start;

  margin: 8px 0 22px;

}

.product-dev-page .wedge-grid-heading .eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  color: var(--purple-700);

  letter-spacing: 0.12em;

  text-transform: uppercase;

}

.product-dev-page .wedge-grid-heading h3 {

  font-family: var(--font-display);

  font-size: 22px;

  font-weight: 700;

  letter-spacing: -0.01em;

  color: var(--ink);

  margin: 0;

  line-height: 1.2;

}





/* HERO H1 ACCENT · product-dev override · 2026-05-06 (James: "weird highlighted section")

 * Default .hero h1 .accent uses a mint highlighter-pen underlay. James flagged it as

 * visually weird on "a part on your desk". Strip the highlight on product-dev so the

 * accent phrase reads as plain hero h1 text. Other pages (small-batch etc.) keep the

 * highlighter effect. */

.product-dev-page .hero h1 .accent {

  background: none;

  padding: 0;

}



/* ============================================================

 * QUOTE-REQUEST PAGE COMPONENTS · added 2026-05-07

 *

 * Used by wp-import/quote-request.preview.html. Every rule scoped

 * under `.quote-request-page` on body so it only fires on this page.

 * ~25 selectors covering: mini-hero · 3-step form · ICP tiles ·

 * start-state tiles · file drop · NDA toggle · conditional blocks ·

 * step buttons · trust sidebar (humans, badges, counter, video,

 * macro photo, example reply) · "what happens next" · fallback

 * channels.

 *

 * Design language follows the gold-standard small-batch-production

 * + product-development pattern: paper-white cards, ink-200 borders,

 * purple-700 + mint-400 accents, JetBrains-Mono micro-eyebrows.

 * ============================================================ */



/* ----- Page wrapper · enables scoped chrome ----- */

.quote-request-page .container { padding-top: 12px; padding-bottom: 24px; }



/* ----- 02 · Mini-hero · stripped-down conversion-page hero ----- */

.quote-request-page .mini-hero {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  padding: 36px 40px;

  margin-bottom: 28px;

  position: relative;

}

.quote-request-page .mini-hero .eyebrow {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  color: var(--purple-700);

  letter-spacing: 0.14em;

  text-transform: uppercase;

  margin-bottom: 14px;

  display: inline-block;

  /* Override the global .eyebrow pill (purple-50 bg + border + padding) */

  background: transparent;

  border: none;

  padding: 0;

  border-radius: 0;

}

.quote-request-page .mini-hero h1 {

  font-family: var(--font-display);

  font-size: 38px;

  font-weight: 800;

  letter-spacing: -0.02em;

  line-height: 1.1;

  color: var(--ink);

  margin: 0 0 14px;

}

.quote-request-page .mini-hero h1 .accent {

  color: var(--ink);

  background: linear-gradient(180deg, transparent 60%, rgba(14, 231, 191, 0.32) 60%);

  padding: 0 4px;

}

.quote-request-page .mini-hero .sub {

  font-size: 16px;

  color: var(--ink-700);

  line-height: 1.55;

  margin: 0 0 18px;

  max-width: 720px;

}

.quote-request-page .mini-hero .anti-spam {

  margin-top: 14px;

  font-size: 13px;

  color: var(--ink-700);

  font-family: var(--font-mono);

  letter-spacing: 0.02em;

}

.quote-request-page .mini-hero .anti-spam strong {

  color: var(--purple-700);

  font-weight: 700;

}



/* "What you'll get back" callout box · ported to chrome (was inline) */

.quote-request-page .mini-hero .what-back {

  margin-top: 14px;

  padding: 14px 18px;

  background: linear-gradient(135deg, var(--purple-50) 0%, var(--mint-50) 100%);

  border-left: 3px solid var(--purple-700);

  border-radius: 6px;

  font-size: 13px;

  color: var(--ink);

  line-height: 1.6;

}

.quote-request-page .mini-hero .what-back strong { color: var(--purple-900); font-weight: 700; }



/* "Free printability check" promoted-freebie callout (move 7) */

.quote-request-page .mini-hero .freebie-callout {

  margin-top: 16px;

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 12px 16px;

  background: var(--mint-50);

  border: 1px solid var(--mint-300);

  border-radius: 8px;

  font-size: 13px;

  color: var(--ink-800);

  line-height: 1.5;

}

.quote-request-page .mini-hero .freebie-callout .freebie-eyebrow {

  font-family: var(--font-mono);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--mint-700);

  white-space: nowrap;

  padding: 4px 8px;

  background: var(--paper-white);

  border-radius: 4px;

  flex-shrink: 0;

}

.quote-request-page .mini-hero .freebie-callout strong { color: var(--ink); font-weight: 700; }

/* a11y: scarcity text — #9a3412 on --mint-100 (#c8f9ea) = 5.75:1 (was #c2410c = 4.48:1 FAIL).

 * !important beats custom-css-js post-64 which loads after brand.css and still had #C2410C. */

.quote-request-page .mini-hero .freebie-callout .freebie-scarcity {

  font-weight: 800;

  color: #9a3412 !important;

  white-space: nowrap;

}

/* a11y: claim button — white on #b83a09 = 5.32:1 (was #e0480c = 4.11:1 FAIL).

 * !important beats custom-css-js post-64 override. */

.quote-request-page .mini-hero .freebie-callout .freebie-claim {

  flex-shrink: 0;

  margin-left: auto;

  font-family: var(--font-display);

  font-size: 13px;

  font-weight: 800;

  color: var(--paper-white);

  background: #b83a09 !important;

  border: none;

  border-radius: 999px;

  padding: 9px 18px;

  cursor: pointer;

  white-space: nowrap;

  box-shadow: 0 2px 8px rgba(184, 58, 9, 0.35);

  transition: background 160ms ease, transform 160ms ease;

}

.quote-request-page .mini-hero .freebie-callout .freebie-claim:hover {

  background: #9a3008;

  transform: translateY(-1px);

}

.quote-request-page .mini-hero .freebie-callout .freebie-claim.claimed {

  background: var(--mint-700);

  box-shadow: none;

  cursor: default;

  transform: none;

}



/* ----- 03 · Main body · 2-column SaaS-demo layout ----- */

.quote-request-page .qr-main {

  display: grid;

  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);

  gap: 28px;

  align-items: start;

}



/* Two-column field row · used in Step 3 for company + job-title side-by-side

 * to keep the form short. Stacks below 600px. */

.quote-request-page .field-row-2 {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

  margin-bottom: 0;

}

@media (max-width: 600px) {

  .quote-request-page .field-row-2 { grid-template-columns: 1fr; }

}



/* Extended proof row · 3-col grid below the form (reply mockup, macro, video).

 * Moved here from the trust sidebar 2026-05-08 to stop competing with the form. */

.quote-request-page .qr-extended-proof {

  margin-top: 48px;

}

.quote-request-page .extended-proof-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 22px;

  align-items: stretch;

}

.quote-request-page .qr-extended-proof .media-slot {

  margin-bottom: 0;

}

@media (max-width: 900px) {

  .quote-request-page .extended-proof-grid { grid-template-columns: 1fr; gap: 18px; }

}



/* Form shell · paper-white card with shadow */

.quote-request-page .qr-form-shell {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  padding: 32px 36px;

  box-shadow: 0 4px 14px rgba(58, 37, 73, 0.04);

}



/* Progress bar · 3 numbered dots with connecting line */

.quote-request-page .qr-progress {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 0;

  margin-bottom: 8px;

  position: relative;

}

.quote-request-page .qr-progress::before {

  content: '';

  position: absolute;

  top: 14px;

  left: 16%;

  right: 16%;

  height: 2px;

  background: var(--ink-200);

  z-index: 0;

}

.quote-request-page .qr-progress-step {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  position: relative;

  z-index: 1;

}

.quote-request-page .qr-progress-step .num {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  background: var(--paper-white);

  border: 2px solid var(--ink-300);

  color: var(--ink-500);

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 13px;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;

}

.quote-request-page .qr-progress-step .label {

  font-family: var(--font-mono);

  font-size: 10px;

  letter-spacing: 0.1em;

  color: var(--ink-500);

  text-transform: uppercase;

  font-weight: 700;

}

.quote-request-page .qr-progress-step.active .num {

  background: var(--purple-700);

  border-color: var(--purple-700);

  color: var(--paper-white);

}

.quote-request-page .qr-progress-step.active .label { color: var(--purple-700); }

.quote-request-page .qr-progress-step.done .num {

  background: var(--mint-400);

  border-color: var(--mint-400);

  color: var(--ink);

}

.quote-request-page .qr-progress-meta {

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--ink-600);

  text-align: center;

  margin-bottom: 28px;

  letter-spacing: 0.02em;

}

.quote-request-page .qr-progress-meta strong { color: var(--ink); font-weight: 700; }



/* Step container */

.quote-request-page .qr-step .step-heading {

  font-family: var(--font-mono);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--purple-700);

  margin-bottom: 8px;

}

.quote-request-page .qr-step h3 {

  font-family: var(--font-display);

  font-size: 22px;

  font-weight: 700;

  letter-spacing: -0.01em;

  color: var(--ink);

  margin: 0 0 8px;

}

.quote-request-page .qr-step > p {

  font-size: 14px;

  color: var(--ink-700);

  line-height: 1.55;

  margin: 0 0 22px;

}



/* ICP tiles · 5 radio-cards (Step 1) */

.quote-request-page .icp-tiles {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

  margin-bottom: 22px;

}

.quote-request-page .icp-tile {

  background: var(--paper-white);

  border: 1.5px solid var(--ink-200);

  border-radius: 10px;

  padding: 18px 20px;

  text-align: left;

  cursor: pointer;

  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;

  font: inherit;

  color: inherit;

  display: flex;

  flex-direction: column;

  justify-content: center;

  min-height: 64px;

  gap: 4px;

}

.quote-request-page .icp-tile:hover {

  border-color: var(--purple-300);

  transform: translateY(-1px);

  box-shadow: 0 3px 10px rgba(58, 37, 73, 0.08);

}

.quote-request-page .icp-tile:focus-visible {

  outline: 2.5px solid var(--mint-400);

  outline-offset: 3px;

}

.quote-request-page .icp-tile.selected {

  border-color: var(--purple-700);

  background: var(--purple-50);

  box-shadow: 0 0 0 3px rgba(143, 94, 171, 0.15);

}

.quote-request-page .icp-tile .code {

  font-family: var(--font-mono);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--purple-700);

  margin-bottom: 4px;

}

.quote-request-page .icp-tile h4 {

  font-family: var(--font-display);

  font-size: 15px;

  font-weight: 700;

  color: var(--ink);

  margin: 0;

  letter-spacing: -0.01em;

  line-height: 1.25;

}

.quote-request-page .icp-tile p {

  font-size: 12.5px;

  color: var(--ink-700);

  margin: 4px 0 0;

  line-height: 1.45;

}

.quote-request-page .icp-tile.fallback {

  border-style: dashed;

  background: var(--ink-50);

  grid-column: 1 / -1;

}



/* Skip-the-router escape · slimmed 2026-05-08 (round 2) from boxed block to

 * a simple inline text link to keep Step 1 airy. */

.quote-request-page .icp-skip-link {

  display: inline-block;

  margin: 16px 0 22px;

  font-family: var(--font-body);

  font-size: 13px;

  color: var(--purple-700);

  text-decoration: underline;

  text-underline-offset: 3px;

}

.quote-request-page .icp-skip-link:hover,

.quote-request-page .icp-skip-link:focus-visible {

  color: var(--purple-900);

  outline: none;

}



/* Field groups (label + input/textarea/select) */

.quote-request-page .field-group {

  margin-bottom: 18px;

}

.quote-request-page .field-group label {

  display: block;

  font-family: var(--font-display);

  font-size: 13.5px;

  font-weight: 700;

  color: var(--ink);

  margin-bottom: 8px;

  letter-spacing: -0.005em;

}

.quote-request-page .field-group label .opt {

  font-family: var(--font-mono);

  font-size: 10px;

  font-weight: 500;

  color: var(--ink-500);

  letter-spacing: 0.06em;

  text-transform: uppercase;

  margin-left: 6px;

}

.quote-request-page .field-group input[type="text"],

.quote-request-page .field-group input[type="email"],

.quote-request-page .field-group input[type="tel"],

.quote-request-page .field-group select,

.quote-request-page .field-group textarea {

  width: 100%;

  padding: 11px 14px;

  background: var(--paper);

  border: 1.5px solid var(--ink-200);

  border-radius: 8px;

  font-family: var(--font-body);

  font-size: 14px;

  color: var(--ink);

  transition: border-color 180ms ease, box-shadow 180ms ease;

  box-sizing: border-box;

}

.quote-request-page .field-group textarea { min-height: 88px; resize: vertical; line-height: 1.5; }

.quote-request-page .field-group input:focus,

.quote-request-page .field-group select:focus,

.quote-request-page .field-group textarea:focus {

  outline: none;

  border-color: var(--purple-700);

  box-shadow: 0 0 0 3px rgba(143, 94, 171, 0.15);

}

.quote-request-page .field-group .hint {

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--ink-600);

  margin-top: 6px;

  letter-spacing: 0.02em;

}



/* Start-state tiles · 5 small icon-tiles (Step 2) */

.quote-request-page .start-state-row {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 8px;

}

.quote-request-page .start-state {

  background: var(--paper-white);

  border: 1.5px solid var(--ink-200);

  border-radius: 8px;

  padding: 12px 8px;

  text-align: center;

  cursor: pointer;

  transition: border-color 180ms ease, transform 180ms ease;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 4px;

  font: inherit;

  color: inherit;

}

.quote-request-page .start-state:hover { border-color: var(--purple-300); transform: translateY(-1px); }

.quote-request-page .start-state:focus-visible {

  outline: 2px solid var(--purple-700);

  outline-offset: 2px;

}

.quote-request-page .start-state.selected {

  border-color: var(--purple-700);

  background: var(--purple-50);

  box-shadow: 0 0 0 2px rgba(143, 94, 171, 0.12);

}

.quote-request-page .start-state .ico {

  font-size: 20px;

  line-height: 1;

}

.quote-request-page .start-state .label-txt {

  font-family: var(--font-display);

  font-size: 12px;

  font-weight: 700;

  color: var(--ink);

}

.quote-request-page .start-state .formats {

  font-family: var(--font-mono);

  font-size: 9px;

  letter-spacing: 0.06em;

  color: var(--ink-500);

  text-transform: uppercase;

}



/* File drop zone */

.quote-request-page .file-drop {

  margin-top: 18px;

  padding: 28px 20px;

  background: var(--ink-50);

  border: 2px dashed var(--ink-300);

  border-radius: 10px;

  text-align: center;

  transition: border-color 180ms ease, background 180ms ease;

  cursor: pointer;

}

.quote-request-page .file-drop:hover { border-color: var(--purple-700); background: var(--purple-50); }

.quote-request-page .file-drop strong {

  display: block;

  font-family: var(--font-display);

  font-size: 14px;

  color: var(--ink);

  margin-bottom: 6px;

}

.quote-request-page .file-drop .sub {

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--ink-600);

  letter-spacing: 0.02em;

}

.quote-request-page .file-drop .fallback {

  margin-top: 10px;

  padding-top: 10px;

  border-top: 1px solid var(--ink-200);

  font-size: 11.5px;

  color: var(--ink-700);

  line-height: 1.5;

}



/* NDA toggle · slimmed 2026-05-08 (round 2) from boxed block to a single inline checkbox + label. */

.quote-request-page .nda-toggle {

  display: flex;

  gap: 10px;

  align-items: center;

  margin-top: 14px;

  font-size: 13px;

  color: var(--ink-700);

  cursor: pointer;

}

.quote-request-page .nda-toggle input[type="checkbox"] {

  width: 16px;

  height: 16px;

  accent-color: var(--purple-700);

  flex-shrink: 0;

}

.quote-request-page .nda-toggle .text {

  line-height: 1.5;

}



/* Conditional ICP-specific blocks */

.quote-request-page .conditional-block {

  margin-top: 18px;

  padding: 16px 18px;

  background: var(--ink-50);

  border-left: 3px solid var(--purple-700);

  border-radius: 0 8px 8px 0;

}

.quote-request-page .conditional-block .cond-label {

  font-family: var(--font-mono);

  font-size: 9px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--purple-700);

  margin-bottom: 10px;

  font-weight: 700;

}

.quote-request-page .conditional-block .cond-label strong { color: var(--ink); font-weight: 700; }



/* Step navigation buttons */

.quote-request-page .step-nav {

  margin-top: 22px;

  display: flex;

  justify-content: space-between;

  gap: 12px;

  align-items: center;

  flex-wrap: wrap;

}

.quote-request-page .step-btn {

  font-family: var(--font-display);

  font-weight: 700;

  font-size: 14px;

  padding: 12px 22px;

  border-radius: 999px;

  border: 1.5px solid transparent;

  cursor: pointer;

  transition: background 200ms ease, transform 200ms ease, border-color 200ms ease;

  letter-spacing: -0.005em;

}

.quote-request-page .step-btn.primary {

  background: var(--purple-700);

  color: var(--paper-white);

}

.quote-request-page .step-btn.primary:hover { background: var(--purple-900); transform: translateY(-1px); }

.quote-request-page .step-btn.secondary {

  background: transparent;

  color: var(--ink);

  border-color: var(--ink-300);

}

.quote-request-page .step-btn.secondary:hover { border-color: var(--ink); background: var(--ink-50); }

.quote-request-page .step-btn.submit {

  background: var(--mint-400);

  color: var(--ink);

  padding: 14px 26px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 4px;

  line-height: 1.2;

}

.quote-request-page .step-btn.submit:hover { background: var(--mint-500); transform: translateY(-1px); }

.quote-request-page .step-btn.submit strong { font-size: 15px; font-weight: 800; }

.quote-request-page .step-btn.submit .sla {

  font-family: var(--font-mono);

  font-size: 10px;

  font-weight: 500;

  letter-spacing: 0.04em;

  color: var(--ink-700);

}



/* "Or book a 15-min call" secondary CTA below submit */

.quote-request-page .submit-alt {

  text-align: center;

  margin-top: 14px;

  font-family: var(--font-mono);

  font-size: 12px;

  color: var(--ink-600);

  letter-spacing: 0.02em;

}

.quote-request-page .submit-alt a {

  color: var(--purple-700);

  text-decoration: none;

  font-weight: 700;

  border-bottom: 1.5px solid var(--mint-400);

  padding-bottom: 1px;

}

.quote-request-page .submit-alt a:hover { color: var(--purple-900); }



/* ----- 03R · Trust sidebar ----- */

.quote-request-page .qr-sidebar {

  position: sticky;

  top: 96px;

  display: flex;

  flex-direction: column;

  gap: 14px;

}



/* Trust humans · founder avatars + bio */

.quote-request-page .trust-humans {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  padding: 18px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}

.quote-request-page .trust-humans .avatars {

  display: flex;

  align-items: center;

  gap: -12px;

  margin-bottom: 4px;

}

.quote-request-page .trust-humans .avatar {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  border: 3px solid var(--paper-white);

  background: var(--ink-100);

  overflow: hidden;

  position: relative;

  box-shadow: 0 2px 6px rgba(58, 37, 73, 0.12);

  flex-shrink: 0;

  display: block;

}

.quote-request-page .trust-humans .avatar:nth-child(2) { margin-left: -16px; }

.quote-request-page .trust-humans .avatar img {

  width: 100%; height: 100%; object-fit: cover; display: block;

}

.quote-request-page .trust-humans .copy strong {

  font-family: var(--font-display);

  font-size: 14px;

  color: var(--ink);

  display: block;

  margin-bottom: 4px;

}

.quote-request-page .trust-humans .copy p {

  font-size: 12px;

  color: var(--ink-700);

  line-height: 1.5;

  margin: 0 0 6px;

}

.quote-request-page .trust-humans .copy .bio {

  font-size: 11.5px;

  color: var(--ink-600);

  line-height: 1.55;

  font-style: italic;

}



/* Trust badge · ico circle + text */

.quote-request-page .trust-badge {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 10px;

  padding: 14px 16px;

  display: flex;

  gap: 12px;

  align-items: flex-start;

}

.quote-request-page .trust-badge .ico {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-100) 100%);

  color: var(--purple-700);

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  letter-spacing: -0.01em;

}

.quote-request-page .trust-badge .txt strong {

  font-family: var(--font-display);

  font-size: 13.5px;

  color: var(--ink);

  display: block;

  margin-bottom: 4px;

}

.quote-request-page .trust-badge .txt p {

  font-size: 11.5px;

  color: var(--ink-700);

  line-height: 1.5;

  margin: 0;

}



/* Trust counter · big number */

.quote-request-page .trust-counter {

  background: linear-gradient(135deg, var(--purple-50) 0%, var(--mint-50) 100%);

  border: 1px solid var(--ink-200);

  border-radius: 10px;

  padding: 16px;

  text-align: center;

}

.quote-request-page .trust-counter .num {

  font-family: var(--font-display);

  font-size: 32px;

  font-weight: 800;

  letter-spacing: -0.02em;

  background: linear-gradient(135deg, var(--purple-700) 0%, var(--mint-400) 100%);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;

  line-height: 1;

}

.quote-request-page .trust-counter .sub {

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--ink-600);

  letter-spacing: 0.06em;

  text-transform: uppercase;

  margin-top: 6px;

  font-weight: 700;

}



/* Anti-nurture block · subtle highlighted box */

.quote-request-page .trust-anti-nurture {

  background: var(--purple-900);

  color: var(--paper-white);

  border-radius: 10px;

  padding: 16px;

}

.quote-request-page .trust-anti-nurture strong {

  display: block;

  font-family: var(--font-display);

  font-size: 14px;

  margin-bottom: 6px;

  color: var(--mint-300);

}

.quote-request-page .trust-anti-nurture p {

  font-size: 12px;

  margin: 0;

  line-height: 1.5;

  color: var(--ink-200);

}



/* Recent clients · muted name list */

.quote-request-page .trust-clients {

  padding: 12px 0;

  border-top: 1px solid var(--ink-200);

}

.quote-request-page .trust-clients .label {

  font-family: var(--font-mono);

  font-size: 10px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--ink-500);

  margin-bottom: 6px;

  font-weight: 700;

}

.quote-request-page .trust-clients .quantified {

  font-family: var(--font-display);

  font-size: 13px;

  color: var(--ink);

  margin-bottom: 6px;

  line-height: 1.4;

}

.quote-request-page .trust-clients .quantified strong {

  color: var(--purple-700);

  font-weight: 800;

}

.quote-request-page .trust-clients .names {

  font-size: 12px;

  color: var(--ink-700);

  line-height: 1.6;

}



/* Media slots (video, macro photo, example reply) · scoped to BOTH the sidebar AND

 * the new .qr-extended-proof row 2026-05-08 so styling survives the move. */

.quote-request-page :is(.qr-sidebar, .qr-extended-proof) .media-slot {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 10px;

  padding: 14px;

  display: flex;

  flex-direction: column;

}

/* Extended-proof tile headings · large display titles (Step 6 feedback 2026-05-08).

 * Sidebar variant stays compact (mono eyebrow); extended-proof gets full display heading. */

.quote-request-page :is(.qr-sidebar, .qr-extended-proof) .media-slot .media-eyebrow {

  font-family: var(--font-mono);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--ink-500);

  margin-bottom: 10px;

}

.quote-request-page .qr-extended-proof .media-slot .media-eyebrow {

  font-family: var(--font-display);

  font-size: 22px;

  font-weight: 700;

  letter-spacing: -0.01em;

  text-transform: none;

  color: var(--ink);

  line-height: 1.2;

  margin-bottom: 14px;

}

.quote-request-page :is(.qr-sidebar, .qr-extended-proof) .media-frame {

  aspect-ratio: 4 / 3;

  background: var(--ink);

  border-radius: 6px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

}

.quote-request-page :is(.qr-sidebar, .qr-extended-proof) .media-frame > img {

  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;

}

.quote-request-page :is(.qr-sidebar, .qr-extended-proof) .video-placeholder {

  background:

    linear-gradient(135deg, rgba(58, 37, 73, 0.55) 0%, rgba(12, 17, 26, 0.65) 100%),

    linear-gradient(135deg, var(--purple-900) 0%, var(--ink) 100%);

  color: var(--ink-300);

  font-family: var(--font-mono);

  font-size: 10px;

  text-align: center;

  padding: 20px;

}

.quote-request-page :is(.qr-sidebar, .qr-extended-proof) .video-placeholder .play {

  width: 44px; height: 44px;

  border-radius: 50%;

  border: 2px solid var(--mint-300);

  background: rgba(14, 231, 191, 0.14);

  color: var(--mint-300);

  display: flex; align-items: center; justify-content: center;

  font-size: 16px;

  margin: 0 auto 10px;

}

.quote-request-page :is(.qr-sidebar, .qr-extended-proof) .media-caption {

  margin-top: 8px;

  font-size: 11px;

  color: var(--ink-600);

  line-height: 1.5;

  font-style: italic;

}



/* Example-reply email mockup */

.quote-request-page :is(.qr-sidebar, .qr-extended-proof) .reply-mock {

  background: var(--paper);

  border: 1px solid var(--ink-200);

  border-radius: 6px;

  padding: 14px;

  font-size: 11.5px;

  color: var(--ink-700);

  line-height: 1.55;

  flex: 1;

}

.quote-request-page :is(.qr-sidebar, .qr-extended-proof) .reply-mock .reply-head {

  font-family: var(--font-mono);

  font-size: 10px;

  color: var(--ink-600);

  margin-bottom: 8px;

  padding-bottom: 8px;

  border-bottom: 1px solid var(--ink-200);

  line-height: 1.6;

}

.quote-request-page :is(.qr-sidebar, .qr-extended-proof) .reply-mock p { margin: 0 0 8px; }

.quote-request-page :is(.qr-sidebar, .qr-extended-proof) .reply-mock p:last-child { margin: 0; color: var(--ink-600); }

.quote-request-page :is(.qr-sidebar, .qr-extended-proof) .reply-mock strong { color: var(--ink); font-weight: 700; }

.quote-request-page :is(.qr-sidebar, .qr-extended-proof) .reply-mock .indent { padding-left: 12px; }



/* ----- 04 · "What happens next" band ----- */

.quote-request-page .next-band {

  margin-top: 32px;

  padding: 32px 36px;

  background: var(--ink-50);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

}

.quote-request-page .next-band h2 {

  font-family: var(--font-display);

  font-size: 26px;

  font-weight: 700;

  letter-spacing: -0.01em;

  color: var(--ink);

  margin: 0 0 22px;

}

.quote-request-page .next-band .next-steps {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

}

.quote-request-page .next-band .next-step {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 10px;

  padding: 20px;

  display: flex;

  flex-direction: column;

  gap: 6px;

}

.quote-request-page .next-band .next-step .num {

  font-family: var(--font-display);

  font-weight: 800;

  font-size: 28px;

  background: linear-gradient(135deg, var(--purple-700) 0%, var(--mint-400) 100%);

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  color: transparent;

  margin-bottom: 4px;

  line-height: 1;

}

.quote-request-page .next-band .next-step h4 {

  font-family: var(--font-display);

  font-size: 15px;

  font-weight: 700;

  color: var(--ink);

  margin: 0;

  letter-spacing: -0.01em;

}

.quote-request-page .next-band .next-step p {

  font-size: 13px;

  color: var(--ink-700);

  line-height: 1.55;

  margin: 0;

}

.quote-request-page .next-band .next-step .when {

  font-family: var(--font-mono);

  font-size: 11px;

  color: var(--purple-700);

  font-weight: 700;

  letter-spacing: 0.04em;

  margin-top: 6px;

}



/* ----- 05 · Fallback channels ----- */

.quote-request-page .fallback-band {

  margin-top: 24px;

  padding: 24px 28px;

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  display: grid;

  grid-template-columns: 1fr auto;

  gap: 24px;

  align-items: center;

}

.quote-request-page .fallback-band h3 {

  font-family: var(--font-display);

  font-size: 18px;

  font-weight: 700;

  color: var(--ink);

  margin: 0 0 4px;

  letter-spacing: -0.01em;

}

.quote-request-page .fallback-band p {

  font-size: 13px;

  color: var(--ink-700);

  margin: 0;

}

.quote-request-page .fallback-channels {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

}

.quote-request-page .fallback-channels a {

  font-family: var(--font-mono);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.04em;

  color: var(--ink);

  background: var(--ink-50);

  border: 1px solid var(--ink-200);

  border-radius: 999px;

  padding: 8px 14px;

  text-decoration: none;

  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;

}

.quote-request-page .fallback-channels a:hover {

  background: var(--purple-700);

  color: var(--paper-white);

  border-color: var(--purple-700);

}



/* Mobile · stack everything */

@media (max-width: 860px) {

  .quote-request-page .mini-hero { padding: 24px 22px; }

  .quote-request-page .mini-hero h1 { font-size: 28px; }

  .quote-request-page .qr-main { grid-template-columns: 1fr; }

  .quote-request-page .qr-sidebar { position: static; }

  .quote-request-page .qr-form-shell { padding: 24px 22px; }

  .quote-request-page .icp-tiles { grid-template-columns: 1fr; }

  .quote-request-page .start-state-row { grid-template-columns: repeat(3, 1fr); }

  .quote-request-page .next-band .next-steps { grid-template-columns: 1fr; }

  .quote-request-page .fallback-band { grid-template-columns: 1fr; }

  .quote-request-page .next-band { padding: 24px 20px; }

  .quote-request-page .step-nav { flex-direction: column-reverse; align-items: stretch; }

  .quote-request-page .step-btn.submit { width: 100%; }

}

@media (max-width: 480px) {

  .quote-request-page .start-state-row { grid-template-columns: repeat(2, 1fr); }

}



/* Fluent Forms submit button — brand colours.

 * Default plugin style: white on #1a7efb = 3.87:1 (WCAG AA FAIL).

 * Override: --ink on --mint-400 = 14.2:1 AAA. */

.quote-request-page .ff-btn,

.quote-request-page .ff-btn-submit,

.quote-request-page .ff_btn_style {

  background: var(--mint-400) !important;

  color: var(--ink) !important;

  border-color: var(--mint-400) !important;

  font-weight: 600 !important;

}

.quote-request-page .ff-btn:hover,

.quote-request-page .ff-btn-submit:hover {

  background: var(--mint-500) !important;

  border-color: var(--mint-500) !important;

}



/* ============================================================

 * MATERIAL-PAGE COMPONENTS · added 2026-05-06 (canary: PA12-CF)

 *

 * Shared chrome for every material page. Decoration only · per-page

 * CSS files hold layout primitives.

 *

 * Brand-supplier names are NEVER in the UI · ISO standards are the

 * cited authority (per James 2026-05-06 · don't reveal supplier).

 * ============================================================ */



/* ---- 1 · Hero · DARK · engineer audience ---- */

.hero-dark {

  position: relative;

  background:

    radial-gradient(ellipse 60% 80% at 80%   0%, rgba(14, 231, 191, 0.12) 0%, transparent 60%),

    radial-gradient(ellipse 50% 60% at  0% 100%, rgba(143, 94, 171, 0.36) 0%, transparent 60%),

    var(--purple-900);

  color: var(--paper);

  border-radius: 0;

  overflow: hidden;

  display: grid;

  grid-template-columns: 1.1fr 1fr;

  isolation: isolate;

  box-shadow: 0 8px 32px rgba(143, 94, 171, 0.20);

}

.hero-dark::before {

  content: '';

  position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);

  background-size: 24px 24px;

  pointer-events: none;

  z-index: 0;

}

.hero-dark > * { position: relative; z-index: 1; }

.hero-dark .copy { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; }

.hero-dark .breadcrumb {

  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;

  letter-spacing: 0.14em; color: rgba(250, 250, 250, 0.55); margin-bottom: 18px;

}

.hero-dark .breadcrumb a { color: rgba(250, 250, 250, 0.75); text-decoration: none; }

.hero-dark .breadcrumb a:hover { color: var(--paper); }

.hero-dark h1 {

  font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.875rem);

  line-height: 1.05; font-weight: 800; letter-spacing: -0.025em;

  color: var(--paper); margin: 0 0 14px;

}

.hero-dark h1 .accent {

  color: var(--mint-400);

  background: none;

  border-radius: 0;

  padding: 0;

}

.hero-dark .sub { color: rgba(250, 250, 250, 0.82); font-size: 16px; max-width: 540px; margin: 0 0 22px; line-height: 1.55; }

.hero-dark .hero-promise {

  display: flex; align-items: center; gap: 14px;

  margin: 0 0 26px; padding: 14px 18px;

  max-width: 560px;

  background: rgba(14, 231, 191, 0.06);

  border: 1px solid rgba(14, 231, 191, 0.22);

  border-radius: 8px;

  color: var(--paper);

  font-size: 17px; font-weight: 500; line-height: 1.45;

  letter-spacing: -0.005em;

}

.hero-dark .hero-promise .hp-bar {

  flex: 0 0 auto; width: 3px; align-self: stretch;

  background: var(--mint); border-radius: 2px;

}

.hero-dark .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-dark .cta.secondary { color: var(--paper); border-color: rgba(250, 250, 250, 0.4); background: transparent; }

.hero-dark .cta.secondary:hover { background: rgba(250, 250, 250, 0.08); border-color: var(--paper); }

.hero-dark .stage { position: relative; background: var(--ink-900); overflow: hidden; }

.hero-dark .stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-dark .stage::after {

  content: ''; position: absolute; inset: 0;

  background: linear-gradient(135deg, rgba(58, 37, 73, 0.20) 0%, rgba(12, 17, 26, 0.30) 100%);

  pointer-events: none;

}



/* CTA tertiary · close-band only · paper-tint pill that reads cleanly on dark purple */

.close-band .cta.tertiary {

  display: inline-block; padding: 12px 22px; border-radius: 999px;

  background: rgba(250, 250, 250, 0.06);

  border: 1px solid rgba(250, 250, 250, 0.30);

  color: var(--paper);

  font-weight: 600; font-size: 13px; text-decoration: none;

  transition: background 200ms ease, border-color 200ms ease;

}

.close-band .cta.tertiary:hover {

  background: rgba(250, 250, 250, 0.12);

  border-color: var(--paper);

}



/* ---- 2 · Process-class banner ---- */

.process-banner {

  background: var(--mint-50); border: 1px solid var(--mint-100);

  border-left: 4px solid var(--mint-400); border-radius: 8px;

  padding: 16px 22px; display: flex; align-items: center; gap: 18px;

  font-size: 13.5px; line-height: 1.55; color: var(--ink-700);

}

.process-banner .tag {

  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;

  text-transform: uppercase; background: var(--ink); color: var(--paper);

  padding: 5px 10px; border-radius: 4px; white-space: nowrap; flex-shrink: 0;

}

.process-banner .body { flex: 1; }

.process-banner .body strong { color: var(--ink); font-weight: 700; }

.process-banner a { color: var(--purple-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.process-banner a:hover { color: var(--purple-800); }



/* ---- 3 · Anchor nav · sticky jump-to-section ---- */

.anchor-nav {

  background: var(--paper-white); border: 1px solid var(--ink-200);

  border-radius: 10px; padding: 14px 22px;

  position: sticky; top: 60px; z-index: 15;

  box-shadow: 0 2px 8px rgba(58, 37, 73, 0.06);

}

.anchor-nav ol {

  list-style: none; padding: 0; margin: 0;

  display: flex; gap: 4px; flex-wrap: wrap; font-family: var(--font-mono);

}

.anchor-nav ol li { font-size: 11.5px; }

.anchor-nav ol a {

  color: var(--ink-700); text-decoration: none;

  padding: 6px 12px; border-radius: 6px; letter-spacing: 0.04em;

  display: inline-block; transition: background 150ms ease, color 150ms ease;

}

.anchor-nav ol a:hover { background: var(--purple-50); color: var(--purple-700); }

.anchor-nav ol .active a { background: var(--ink); color: var(--paper); }



/* ---- 4 · TL;DR card · 1-min / 5-min condensed overview ---- */

.tldr-card {

  background: var(--paper-white); border: 1px solid var(--ink-200);

  border-radius: 14px; padding: 28px 30px;

  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;

}

.tldr-card .col + .col { padding-left: 32px; border-left: 1px solid var(--ink-100); }

.tldr-card .eyebrow {

  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;

  text-transform: uppercase; color: var(--purple-700);

  background: var(--purple-50); border: 1px solid var(--purple-100);

  padding: 4px 10px; border-radius: 999px; display: inline-block; margin-bottom: 14px;

}

.tldr-card h3 {

  font-family: var(--font-display); font-size: 18px; font-weight: 800;

  letter-spacing: -0.01em; color: var(--ink); margin: 0 0 12px;

}

.tldr-card .tldr-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }

.tldr-card .tldr-list li {

  font-size: 13.5px; line-height: 1.55; color: var(--ink-700);

  padding-left: 22px; position: relative;

}

.tldr-card .tldr-list li::before {

  content: ''; position: absolute; left: 0; top: 8px;

  width: 8px; height: 8px; border-radius: 50%; background: var(--mint-400);

}

.tldr-card .tldr-list li strong { color: var(--ink); font-weight: 700; }

.tldr-card .tldr-prose { font-size: 13.5px; color: var(--ink-700); line-height: 1.65; margin: 0; }

.tldr-card .tldr-prose + .tldr-prose { margin-top: 10px; }



/* ---- 4-NEW · TL;DR tablet · vertical anchor nav (left) + stacked 1-min/5-min cards (right) ---- */

.tldr-tablet {

  background: var(--paper-white); border: 1px solid var(--ink-200);

  border-radius: 14px; padding: 28px 30px;

  display: grid; grid-template-columns: 280px 1fr; gap: 36px;

  align-items: stretch;

}

.tldr-tablet .tldr-nav-col {

  position: sticky; top: 80px; align-self: start;

  border-right: 1px solid var(--ink-100);

  padding-right: 28px;

}

.tldr-tablet .nav-eyebrow {

  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;

  text-transform: uppercase; color: var(--mint-700); font-weight: 700;

  margin-bottom: 6px;

}

.tldr-tablet .nav-title {

  font-family: var(--font-display); font-size: 19px; font-weight: 800;

  letter-spacing: -0.015em; color: var(--ink);

  margin: 0 0 18px; line-height: 1.18;

}

.tldr-tablet .tldr-anchor-list {

  list-style: none; padding: 0; margin: 0;

  display: flex; flex-direction: column; gap: 1px;

}

.tldr-tablet .tldr-anchor-list li { font-size: 12.5px; }

.tldr-tablet .tldr-anchor-list a {

  display: flex; align-items: center; gap: 10px;

  color: var(--ink-700); text-decoration: none;

  padding: 8px 12px; border-radius: 6px;

  font-family: var(--font-mono); letter-spacing: 0.02em;

  transition: background 150ms ease, color 150ms ease, transform 150ms ease;

}

.tldr-tablet .tldr-anchor-list a::before {

  content: ''; flex: 0 0 auto;

  width: 5px; height: 5px; border-radius: 50%;

  background: var(--ink-300);

  transition: background 150ms ease, transform 150ms ease;

}

.tldr-tablet .tldr-anchor-list a:hover {

  background: var(--purple-50); color: var(--purple-700);

  transform: translateX(2px);

}

.tldr-tablet .tldr-anchor-list a:hover::before {

  background: var(--mint-500); transform: scale(1.6);

}

.tldr-tablet .tldr-anchor-list .active a {

  background: var(--ink); color: var(--paper);

}

.tldr-tablet .tldr-anchor-list .active a::before {

  background: var(--mint);

}



.tldr-tablet .tldr-cards-col {

  display: flex; flex-direction: column; gap: 22px;

  min-width: 0;

}

.tldr-tablet .tldr-block {

  background: var(--paper);

  border: 1px solid var(--ink-100);

  border-radius: 12px;

  padding: 22px 24px;

}

.tldr-tablet .tldr-block .eyebrow {

  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;

  text-transform: uppercase; color: var(--purple-700);

  background: var(--purple-50); border: 1px solid var(--purple-100);

  padding: 4px 10px; border-radius: 999px; display: inline-block; margin-bottom: 12px;

}

.tldr-tablet .tldr-block h3 {

  font-family: var(--font-display); font-size: 18px; font-weight: 800;

  letter-spacing: -0.01em; color: var(--ink); margin: 0 0 12px;

}

.tldr-tablet .tldr-block .tldr-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }

.tldr-tablet .tldr-block .tldr-list li {

  font-size: 13.5px; line-height: 1.55; color: var(--ink-700);

  padding-left: 22px; position: relative;

}

.tldr-tablet .tldr-block .tldr-list li::before {

  content: ''; position: absolute; left: 0; top: 8px;

  width: 8px; height: 8px; border-radius: 50%; background: var(--mint-400);

}

.tldr-tablet .tldr-block .tldr-list li strong { color: var(--ink); font-weight: 700; }



@media (max-width: 860px) {

  .tldr-tablet { grid-template-columns: 1fr; gap: 24px; padding: 22px 20px; }

  .tldr-tablet .tldr-nav-col {

    position: static; border-right: none; padding-right: 0;

    border-bottom: 1px solid var(--ink-100); padding-bottom: 18px;

  }

  .tldr-tablet .tldr-anchor-list {

    display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px;

  }

}



/* ---- Compare-band sub-section · second comparison table (FDM vs SLS) ---- */

.compare-band .compare-subhead {

  font-family: var(--font-display); font-size: 20px; font-weight: 800;

  color: var(--ink); letter-spacing: -0.015em; line-height: 1.2;

  margin: 28px 0 6px; padding-top: 22px; border-top: 1px solid var(--ink-100);

}

.compare-band .compare-sublede {

  font-size: 13.5px; color: var(--ink-700); max-width: 720px;

  margin: 0 0 16px; line-height: 1.55;

}



/* ---- Lead-time benchmark strip · concrete prototype/batch/rush numbers ---- */

.lead-time-strip {

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 14px;

  padding: 24px 28px;

}

.lead-time-strip .lt-eyebrow {

  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;

  text-transform: uppercase; color: var(--mint-700); font-weight: 700;

  margin-bottom: 16px;

}

.lead-time-strip .lt-grid {

  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px;

}

.lead-time-strip .lt-card {

  background: var(--ink-50); border: 1px solid var(--ink-100);

  border-radius: 10px; padding: 16px 18px;

  display: flex; flex-direction: column; gap: 4px;

}

.lead-time-strip .lt-card.lt-card--accent {

  background: var(--mint-50); border-color: var(--mint-200);

  border-left: 4px solid var(--mint-400);

}

.lead-time-strip .lt-label {

  font-family: var(--font-mono); font-size: 10.5px;

  letter-spacing: 0.1em; text-transform: uppercase;

  color: var(--ink-700); font-weight: 700;

}

.lead-time-strip .lt-value {

  font-family: var(--font-display); font-size: 18px; font-weight: 800;

  color: var(--ink); letter-spacing: -0.01em; line-height: 1.2;

}

.lead-time-strip .lt-note {

  font-size: 12px; color: var(--ink-700); line-height: 1.5; margin-top: 4px;

}

.lead-time-strip .lt-foot {

  margin: 18px 0 0; font-size: 12.5px; color: var(--ink-700); line-height: 1.55;

  padding-top: 14px; border-top: 1px solid var(--ink-100);

}

@media (max-width: 1100px) {

  .lead-time-strip .lt-grid { grid-template-columns: 1fr 1fr; }

}

@media (max-width: 540px) {

  .lead-time-strip .lt-grid { grid-template-columns: 1fr; }

}



/* ---- Photo-breaker · wide aspect placeholder strip between dense text sections ---- */

.photo-breaker {

  display: flex; align-items: center; gap: 28px;

  background: var(--ink-50);

  border: 2px dashed var(--ink-200);

  border-radius: 14px;

  padding: 36px 40px;

  margin: 36px 0;

  color: var(--ink-700);

  position: relative;

  overflow: hidden;

}

.photo-breaker::before {

  content: ''; position: absolute; inset: 0;

  background-image: linear-gradient(135deg, transparent 0%, transparent 49%, var(--ink-200) 49%, var(--ink-200) 51%, transparent 51%, transparent 100%);

  background-size: 14px 14px;

  opacity: 0.18; pointer-events: none;

}

.photo-breaker > * { position: relative; z-index: 1; }

.photo-breaker .pb-icon {

  width: 64px; height: 64px; flex-shrink: 0;

  background: var(--paper-white);

  border: 1px solid var(--ink-200);

  border-radius: 12px;

  display: flex; align-items: center; justify-content: center;

  color: var(--purple-700);

}

.photo-breaker .pb-icon svg { width: 32px; height: 32px; }

.photo-breaker .pb-text { flex: 1; min-width: 0; }

.photo-breaker .pb-text strong {

  display: block; font-family: var(--font-display);

  font-size: 16px; font-weight: 800; color: var(--ink);

  letter-spacing: -0.005em; margin-bottom: 4px;

}

.photo-breaker .pb-text span {

  font-size: 13px; color: var(--ink-700); line-height: 1.5;

}

.photo-breaker .pb-tag {

  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;

  text-transform: uppercase; color: var(--mint-700); font-weight: 700;

  background: var(--mint-50); border: 1px solid var(--mint-200);

  padding: 4px 10px; border-radius: 999px; flex-shrink: 0;

  align-self: flex-start;

}

@media (max-width: 720px) {

  .photo-breaker { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 22px; }

}



/* ---- Section visualisations · same v-block component, different grid widths ---- */

.chem-visuals,

.dfam-visuals,

.post-visuals { display: grid; gap: 12px; margin: 0 0 24px; }

.chem-visuals { grid-template-columns: 1fr 1fr 1fr; }

.dfam-visuals,

.post-visuals { grid-template-columns: 1fr 1fr 1fr 1fr; }

.chem-visuals .v-block,

.dfam-visuals .v-block,

.post-visuals .v-block { background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: 10px; padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 8px; }

.chem-visuals .v-block .v-diagram,

.dfam-visuals .v-block .v-diagram,

.post-visuals .v-block .v-diagram { height: 70px; display: flex; align-items: center; justify-content: center; background: var(--paper-white); border-radius: 8px; padding: 8px; }

.chem-visuals .v-block .v-diagram svg,

.dfam-visuals .v-block .v-diagram svg,

.post-visuals .v-block .v-diagram svg { max-width: 100%; max-height: 100%; }

.chem-visuals .v-block .v-eyebrow,

.dfam-visuals .v-block .v-eyebrow,

.post-visuals .v-block .v-eyebrow { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple-700); font-weight: 700; }

.chem-visuals .v-block .v-headline,

.dfam-visuals .v-block .v-headline,

.post-visuals .v-block .v-headline { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; line-height: 1.25; margin: 0; }

.chem-visuals .v-block .v-caption,

.dfam-visuals .v-block .v-caption,

.post-visuals .v-block .v-caption { font-size: 12px; color: var(--ink-700); line-height: 1.5; margin: 0; }

@media (max-width: 1100px) {

  .dfam-visuals,

  .post-visuals { grid-template-columns: 1fr 1fr; }

}

@media (max-width: 540px) {

  .chem-visuals,

  .dfam-visuals,

  .post-visuals { grid-template-columns: 1fr; }

}



/* TL;DR visual blocks · 4 mini-cards in the "Got 5 minutes" column.

 * Each block carries a small inline SVG diagram + tight caption · the

 * "5-min view" is depth conveyed visually, not by longer prose. */

.tldr-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.tldr-visual .v-block {

  background: var(--ink-50);

  border: 1px solid var(--ink-200);

  border-radius: 10px;

  padding: 14px 14px 12px;

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.tldr-visual .v-block .v-diagram {

  height: 70px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--paper-white);

  border-radius: 8px;

  padding: 8px;

}

.tldr-visual .v-block .v-diagram svg { max-width: 100%; max-height: 100%; }

.tldr-visual .v-block .v-eyebrow {

  font-family: var(--font-mono);

  font-size: 9.5px;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--purple-700);

  font-weight: 700;

}

.tldr-visual .v-block .v-headline {

  font-family: var(--font-display);

  font-size: 14px;

  font-weight: 700;

  color: var(--ink);

  letter-spacing: -0.005em;

  line-height: 1.25;

  margin: 0;

}

.tldr-visual .v-block .v-caption {

  font-size: 12px;

  color: var(--ink-700);

  line-height: 1.5;

  margin: 0;

}



/* TL;DR mini-grid for ✓/✗ envelope */

.tldr-visual .v-envelope {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4px 10px;

  margin: 0;

  padding: 0;

  list-style: none;

}

.tldr-visual .v-envelope li {

  font-size: 11.5px;

  line-height: 1.45;

  color: var(--ink-800);

  padding-left: 18px;

  position: relative;

}

.tldr-visual .v-envelope li.ok::before {

  content: '✓'; position: absolute; left: 0; top: -1px;

  color: var(--mint-600); font-weight: 800; font-family: var(--font-display);

}

.tldr-visual .v-envelope li.no::before {

  content: '✗'; position: absolute; left: 0; top: -1px;

  color: var(--ink-500); font-weight: 800; font-family: var(--font-display);

}



/* TL;DR pick / pick-something-else two-column block */

.tldr-visual .v-pick {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

  font-size: 11.5px;

}

.tldr-visual .v-pick .col-pick { padding: 8px 10px; background: rgba(14, 231, 191, 0.08); border-radius: 6px; }

.tldr-visual .v-pick .col-no   { padding: 8px 10px; background: rgba(143, 94, 171, 0.08); border-radius: 6px; }

.tldr-visual .v-pick strong { display: block; font-size: 10px; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; color: var(--ink-700); }

.tldr-visual .v-pick .col-pick strong { color: var(--mint-700); }

.tldr-visual .v-pick .col-no strong   { color: var(--purple-700); }

.tldr-visual .v-pick p { font-size: 11.5px; line-height: 1.45; color: var(--ink-800); margin: 0; }



/* .tldr-visual stays as 2-col on mobile · keep the 4 depth-cards in a grid

 * rather than full-width stack (James 2026-05-11 mobile review). The nested

 * .v-pick inside the decision-trigger card stacks to 1-col so its

 * min-content doesn't push the outer grid past the viewport.

 * Cards densify (smaller padding + type) so 2-col doesn't feel squashed. */

@media (max-width: 540px) {

  /* .tldr-visual depth-cards · less squashed */

  .tldr-visual { gap: 10px; }

  .tldr-visual .v-block { min-width: 0; padding: 11px 11px 10px; gap: 6px; overflow: hidden; }

  .tldr-visual .v-block .v-diagram { height: 60px; padding: 6px; overflow: hidden; }

  /* SVG inside v-diagram: lock to width so it never exceeds the card.

   * Without explicit width:100% the SVG renders at its intrinsic 300x150

   * fallback on some browsers, overflowing the card horizontally. */

  .tldr-visual .v-block .v-diagram svg { width: 100%; height: auto; max-height: 100%; }

  .tldr-visual .v-block .v-eyebrow { font-size: 9px; }

  .tldr-visual .v-block .v-headline { font-size: 12.5px; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }

  .tldr-visual .v-block .v-caption { font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }

  .tldr-visual .v-pick { grid-template-columns: 1fr; gap: 6px; font-size: 11px; }

  .tldr-visual .v-pick .col-pick,

  .tldr-visual .v-pick .col-no { padding: 6px 8px; min-width: 0; }

  .tldr-visual .v-pick strong { font-size: 9.5px; }

  .tldr-visual .v-pick p { font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }

  /* v-envelope (✓/✗ list) · stack to 1-col so long phrases don't force overflow */

  .tldr-visual .v-envelope { grid-template-columns: 1fr; gap: 4px; }

  .tldr-visual .v-envelope li { font-size: 11px; padding-left: 16px; line-height: 1.4; overflow-wrap: anywhere; }



  /* .key-props · less squashed at 2-col mobile */

  .key-props { gap: 10px; }

  .key-props .key-prop { padding: 14px 14px 12px; }

  .key-props .key-prop .prop-label { font-size: 9.5px; letter-spacing: 0.06em; margin-bottom: 6px; }

  .key-props .key-prop .num { font-size: 30px; margin: 0 0 6px; letter-spacing: -0.015em; }

  .key-props .key-prop .num .unit { font-size: 14px; margin-left: 3px; }

  .key-props .key-prop .num.num-text { font-size: 18px; }

  .key-props .key-prop .prop-sub { font-size: 12.5px; line-height: 1.45; }

  .key-props .key-prop .cite { font-size: 9.5px; margin-top: 8px; padding-top: 6px; }

}



/* ---- 5 · Key-property tiles ---- */

.key-props .key-prop {

  background: var(--paper-white); border: 1px solid var(--ink-200);

  border-radius: 12px; padding: 22px 22px; position: relative;

  transition: border-color 200ms ease, box-shadow 200ms ease;

}

.key-props .key-prop:hover { border-color: var(--purple-300); box-shadow: 0 4px 16px rgba(58, 37, 73, 0.06); }

.key-props .key-prop .prop-label {

  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-600);

  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px;

}

.key-props .key-prop .num {

  font-family: var(--font-display); font-weight: 800; font-size: 38px;

  line-height: 1; color: var(--ink); letter-spacing: -0.02em; margin: 0 0 10px;

}

.key-props .key-prop .num .unit { font-size: 17px; color: var(--ink-600); font-weight: 700; margin-left: 4px; }

.key-props .key-prop .num.num-text { font-size: 22px; letter-spacing: -0.01em; }

.key-props .key-prop .prop-sub { font-size: 13px; color: var(--ink-700); margin: 0; line-height: 1.5; }

.key-props .key-prop .cite {

  font-family: var(--font-mono); font-size: 10px; color: var(--ink-500);

  letter-spacing: 0.04em; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--ink-100);

}



/* ---- 6 · Chemistry explainer · prose + sticky reference sidebar ---- */

.chem-explainer { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: start; }

.chem-explainer h3 {

  font-family: var(--font-display); font-size: 19px; font-weight: 700;

  color: var(--ink); margin: 0 0 10px; letter-spacing: -0.01em;

}

.chem-explainer h3 + p { margin-top: 0; }

.chem-explainer p { font-size: 14.5px; color: var(--ink-800); line-height: 1.7; margin: 0 0 14px; }

.chem-explainer p:last-child { margin-bottom: 0; }

.chem-explainer .ref-sidebar {

  background: var(--ink-50); border: 1px solid var(--ink-200);

  border-radius: 12px; padding: 22px 24px;

  position: sticky; top: 160px;

}

.chem-explainer .ref-sidebar .ref-eyebrow {

  font-family: var(--font-mono); font-size: 10px; color: var(--ink-600);

  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px;

}

.chem-explainer .ref-sidebar ul { margin: 0; padding: 0 0 0 18px; font-size: 13px; color: var(--ink-800); line-height: 1.65; }

.chem-explainer .ref-sidebar li { margin-bottom: 10px; }

.chem-explainer .ref-sidebar li:last-child { margin-bottom: 0; }

.chem-explainer .ref-sidebar a { color: var(--purple-700); text-decoration: underline; text-underline-offset: 2px; }

.chem-explainer .ref-sidebar a:hover { color: var(--purple-800); }



/* ---- 7 · Spec table · ISO-referenced canonical 20-field set ---- */

.spec-table-wrap { border: 1px solid var(--ink-200); border-radius: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--paper-white); }

.spec-table { width: 100%; border-collapse: collapse; }

.spec-table th, .spec-table td { padding: 13px 18px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--ink-100); }

.spec-table thead th {

  background: var(--purple-900); color: var(--paper);

  font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase;

  letter-spacing: 0.08em; font-weight: 600; padding: 14px 18px;

}

.spec-table .group-row td {

  background: var(--ink-50); font-family: var(--font-mono); font-size: 10.5px;

  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;

  color: var(--ink); padding: 11px 18px;

}

.spec-table .property { color: var(--ink); font-weight: 500; }

.spec-table .value-xy { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }

.spec-table .value-z { font-family: var(--font-mono); color: var(--ink-700); }

.spec-table .unit { font-family: var(--font-mono); color: var(--ink-700); font-size: 12px; }

.spec-table .standard { font-family: var(--font-mono); font-size: 11px; color: var(--ink-700); letter-spacing: 0.04em; }

.spec-table tr:last-child td { border-bottom: none; }

.spec-table tr:hover td { background: var(--ink-50); }

.spec-caption {

  background: var(--ink-50); padding: 14px 20px; font-size: 12.5px;

  color: var(--ink-700); border-top: 1px solid var(--ink-200);

  display: flex; justify-content: space-between; align-items: center;

  gap: 14px; flex-wrap: wrap;

}

.spec-caption .source { font-family: var(--font-mono); font-size: 11px; color: var(--ink-600); letter-spacing: 0.04em; }

.spec-caption a { color: var(--purple-700); text-decoration: underline; font-family: var(--font-mono); font-size: 11px; font-weight: 600; }



/* ---- 8 · Workshop blocks · print settings + DfAM + post-options ---- */

.print-settings, .dfam-grid, .post-options {

  background: var(--paper-white); border: 1px solid var(--ink-200);

  border-radius: 12px; padding: 24px 26px;

}

.print-settings h3, .dfam-grid h3, .post-options h3 {

  font-family: var(--font-display); font-size: 17px; font-weight: 700;

  color: var(--ink); margin: 0 0 14px; letter-spacing: -0.01em;

}

.print-settings .setting-row {

  display: grid; grid-template-columns: 1fr 2fr; gap: 16px;

  padding: 10px 0; border-bottom: 1px solid var(--ink-100); font-size: 13.5px;

}

.print-settings .setting-row:last-child { border-bottom: none; }

.print-settings .setting-row .lbl {

  font-family: var(--font-mono); font-size: 11px; color: var(--ink-600);

  letter-spacing: 0.06em; text-transform: uppercase;

}

.print-settings .setting-row .val { color: var(--ink); font-weight: 500; }

/* Process/route cards · subtle per-card tint + accent left-border so the

 * different cards read as distinct, not a wall of white (James 2026-05-26).

 * Scoped to the post-options grid (finishing routes) + dfam grid (design

 * rules) so the print-environment .print-settings cards are untouched.

 * nth-child(4n+N) cycles for any card count. */

.post-options-grid .print-settings, .dfam-grid .print-settings { border-left-width: 3px; }

.post-options-grid .print-settings:nth-child(4n+1), .dfam-grid .print-settings:nth-child(4n+1) { background: rgba(143, 94, 171, 0.06); border-left-color: #8f5eab; }

.post-options-grid .print-settings:nth-child(4n+2), .dfam-grid .print-settings:nth-child(4n+2) { background: rgba(217, 119, 6, 0.07);  border-left-color: #d97706; }

.post-options-grid .print-settings:nth-child(4n+3), .dfam-grid .print-settings:nth-child(4n+3) { background: rgba(10, 148, 119, 0.07); border-left-color: #0a9477; }

.post-options-grid .print-settings:nth-child(4n+4), .dfam-grid .print-settings:nth-child(4n+4) { background: rgba(220, 38, 38, 0.055); border-left-color: #dc2626; }



/* ---- 9 · Apps grid · 4-card industry application matrix ---- */

.apps-grid .app-card {

  background: var(--paper-white); border: 1px solid var(--ink-200);

  border-radius: 12px; overflow: hidden;

  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;

}

.apps-grid .app-card:hover {

  border-color: var(--purple-300); transform: translateY(-2px);

  box-shadow: 0 4px 16px rgba(58, 37, 73, 0.08);

}

.apps-grid .app-card .visual {

  aspect-ratio: 4 / 3;

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-50) 100%);

  display: flex; align-items: center; justify-content: center;

  color: var(--ink-600); font-family: var(--font-mono); font-size: 10px;

  text-align: center; padding: 12px; position: relative; overflow: hidden;

}

.apps-grid .app-card .visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.apps-grid .app-card .body { padding: 18px 20px; }

.apps-grid .app-card .industry {

  font-family: var(--font-mono); font-size: 10px; color: var(--purple-700);

  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px;

}

.apps-grid .app-card h4 {

  font-family: var(--font-display); font-size: 15px; font-weight: 700;

  color: var(--ink); margin: 0 0 6px; letter-spacing: -0.01em; line-height: 1.25;

}

.apps-grid .app-card p { font-size: 12.5px; color: var(--ink-700); margin: 0; line-height: 1.55; }



/* ---- 9b · Perfect-for · positive use-cases mint band (paired with .not-for below) ---- */

.perfect-for {

  background:

    radial-gradient(ellipse 60% 80% at 80% 0%,    rgba(143, 94, 171, 0.08) 0%, transparent 60%),

    radial-gradient(ellipse 50% 60% at 0% 100%,   rgba(14, 231, 191, 0.20) 0%, transparent 60%),

    var(--mint-50);

  color: var(--ink);

  padding: 44px 48px; border-radius: 0;

  position: relative; overflow: hidden;

  display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: start;

  isolation: isolate;

}

.perfect-for::before {

  content: ''; position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(14, 231, 191, 0.12) 1px, transparent 0);

  background-size: 24px 24px; pointer-events: none; z-index: 0;

}

.perfect-for > * { position: relative; z-index: 1; }

.perfect-for h2 {

  color: var(--ink); font-family: var(--font-display);

  font-size: clamp(1.5rem, 2.4vw, 1.75rem); font-weight: 800;

  line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px;

}

.perfect-for > div:first-child p { color: var(--ink-700); font-size: 14.5px; margin: 0; line-height: 1.65; }

.perfect-for ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }

.perfect-for ul li { color: var(--ink-700); font-size: 14px; padding-left: 30px; position: relative; line-height: 1.55; }

.perfect-for ul li::before {

  content: '✓'; position: absolute; left: 0; top: -2px;

  color: var(--mint-700); font-family: var(--font-display);

  font-weight: 800; font-size: 18px;

}

.perfect-for ul li strong { color: var(--ink); display: block; margin-bottom: 2px; font-weight: 700; }



/* ---- 10 · Not-for · honest limits dark band ---- */

.not-for {

  background:

    radial-gradient(ellipse 60% 80% at 80%   0%, rgba(14, 231, 191, 0.10) 0%, transparent 60%),

    radial-gradient(ellipse 50% 60% at  0% 100%, rgba(143, 94, 171, 0.36) 0%, transparent 60%),

    var(--purple-900);

  color: var(--paper);

  padding: 44px 48px; border-radius: 0;

  position: relative; overflow: hidden;

  display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: start;

  isolation: isolate;

}

.not-for::before {

  content: ''; position: absolute; inset: 0;

  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);

  background-size: 24px 24px; pointer-events: none; z-index: 0;

}

.not-for > * { position: relative; z-index: 1; }

.not-for h2 {

  color: var(--paper); font-family: var(--font-display);

  font-size: clamp(1.5rem, 2.4vw, 1.75rem); font-weight: 800;

  line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px;

}

.not-for > div:first-child p { color: rgba(250, 250, 250, 0.78); font-size: 14.5px; margin: 0; line-height: 1.65; }

.not-for ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }

.not-for ul li { color: rgba(250, 250, 250, 0.88); font-size: 14px; padding-left: 30px; position: relative; line-height: 1.55; }

.not-for ul li::before {

  content: '✗'; position: absolute; left: 0; top: -2px;

  color: rgba(250, 250, 250, 0.45); font-family: var(--font-display);

  font-weight: 800; font-size: 18px;

}

.not-for ul li strong { color: var(--paper); display: block; margin-bottom: 2px; font-weight: 700; }



/* ---- 11 · Compare-band · material decision helper ---- */

.compare-band { background: var(--paper-white); border: 2px solid var(--ink); padding: 32px 36px; border-radius: 14px; }

.compare-band .compare-chart {

  background: var(--paper); border: 1px solid var(--ink-100);

  border-radius: 10px; padding: 16px 18px; margin: 0 0 0;

  max-width: 720px;

}

.compare-band .compare-chart svg { width: 100%; height: auto; display: block; }

.compare-band h2 {

  font-family: var(--font-display); font-size: 26px; font-weight: 800;

  color: var(--ink); margin: 0 0 8px; letter-spacing: -0.02em;

}

.compare-band > .lede { font-size: 14.5px; color: var(--ink-700); max-width: 720px; margin: 0 0 22px; line-height: 1.55; }

.compare-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }

.compare-table th, .compare-table td { padding: 14px 18px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--ink-100); }

.compare-table thead th {

  background: var(--ink-50); font-family: var(--font-mono); font-size: 11px;

  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); font-weight: 700;

}

.compare-table thead th.ours { background: var(--ink); color: var(--paper); }

.compare-table td.property { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--ink-700); letter-spacing: 0.06em; }

.compare-table td.ours-val { background: var(--purple-50); font-weight: 700; color: var(--ink); }

.compare-table td.winner { font-weight: 700; }

.compare-table td.winner::after { content: ' ★'; color: var(--mint-600); font-size: 14px; font-weight: 800; }

.compare-close {

  background: var(--ink-50); padding: 16px 22px; border-radius: 8px;

  font-family: var(--font-display); font-style: italic; font-size: 15px;

  color: var(--ink); letter-spacing: -0.01em; text-align: center;

}

.compare-close a { color: var(--purple-700); text-decoration: underline; font-weight: 700; font-style: normal; }



/* ---- 12 · Process strip · 6-step horizontal ---- */

.proc-strip .step {

  background: var(--paper-white); border: 1px solid var(--ink-200);

  border-radius: 10px; padding: 18px 16px; text-align: center;

  transition: border-color 200ms ease;

}

.proc-strip .step:hover { border-color: var(--purple-300); }

.proc-strip .step .num {

  font-family: var(--font-display); font-weight: 800; font-size: 22px;

  color: var(--ink-400); margin: 0 0 6px; line-height: 1;

}

.proc-strip .step h4 {

  font-family: var(--font-display); font-size: 13.5px; font-weight: 700;

  color: var(--ink); margin: 0 0 6px; letter-spacing: -0.005em; line-height: 1.25;

}

.proc-strip .step p { font-size: 11.5px; color: var(--ink-600); margin: 0; line-height: 1.5; }



/* ---- 13 · Case-link · 16:9 named case study tile ---- */

.case-link {

  display: grid; grid-template-columns: 1fr 1.4fr;

  background: var(--paper-white); border: 1px solid var(--ink-200);

  border-radius: 14px; overflow: hidden;

  text-decoration: none; color: inherit;

  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;

}

.case-link:hover { border-color: var(--purple-300); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(58, 37, 73, 0.08); }

.case-link .visual {

  aspect-ratio: 16 / 9;

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-50) 100%);

  display: flex; align-items: center; justify-content: center;

  color: var(--ink-600); font-family: var(--font-mono); font-size: 11px;

  text-align: center; padding: 16px; position: relative; overflow: hidden;

}

.case-link .visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.case-link .body { padding: 26px 30px; display: flex; flex-direction: column; justify-content: center; }

.case-link .tag {

  font-family: var(--font-mono); font-size: 10.5px; color: var(--purple-700);

  letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 8px;

}

.case-link h3 {

  font-family: var(--font-display); font-size: 21px; font-weight: 800;

  color: var(--ink); margin: 0 0 8px; letter-spacing: -0.015em;

}

.case-link p { font-size: 14px; color: var(--ink-700); margin: 0 0 14px; line-height: 1.55; }

.case-link .metrics { display: flex; gap: 22px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-700); flex-wrap: wrap; }

.case-link .metrics strong { color: var(--ink); font-weight: 700; }



/* ---- 14 · Trust stack · 4-up + humans-card ---- */

.trust-stack .t-card {

  background: var(--paper-white); border: 1px solid var(--ink-200);

  border-radius: 10px; padding: 20px 22px;

}

.trust-stack .t-card .ico {

  width: 42px; height: 42px; border-radius: 8px;

  background: var(--ink); color: var(--paper);

  display: flex; align-items: center; justify-content: center;

  font-family: var(--font-mono); font-weight: 800; font-size: 12px;

  letter-spacing: 0.04em; margin-bottom: 12px;

}

.trust-stack .t-card h4 {

  font-family: var(--font-display); font-size: 14px; font-weight: 700;

  color: var(--ink); margin: 0 0 6px; letter-spacing: -0.005em;

}

.trust-stack .t-card p { font-size: 12.5px; color: var(--ink-700); margin: 0; line-height: 1.55; }

.trust-stack .humans-card {

  background:

    radial-gradient(ellipse 60% 80% at 80%   0%, rgba(14, 231, 191, 0.16) 0%, transparent 60%),

    var(--purple-900);

  color: var(--paper); padding: 20px 22px; border-radius: 10px;

  display: flex; flex-direction: column; gap: 12px;

  border: 1px solid rgba(255, 255, 255, 0.06);

}

.trust-stack .humans-card .avs { display: flex; align-items: center; }

.trust-stack .humans-card .av {

  width: 44px; height: 44px; border-radius: 50%;

  background: linear-gradient(135deg, var(--purple-100) 0%, var(--mint-50) 100%);

  border: 2px solid var(--purple-900);

  display: flex; align-items: center; justify-content: center;

  font-family: var(--font-display); font-weight: 800; font-size: 14px;

  color: var(--purple-700); flex-shrink: 0;

}

.trust-stack .humans-card .av:last-child { margin-left: -14px; }

.trust-stack .humans-card h4 { color: var(--paper); font-family: var(--font-display); font-size: 14px; font-weight: 700; margin: 0; }

.trust-stack .humans-card p { font-size: 12.5px; color: rgba(250, 250, 250, 0.85); margin: 0; line-height: 1.55; }



/* ---- 15 · FAQ accordion (native <details>) + chemistry resistance table ---- */

.faq-acc { display: grid; gap: 8px; }

.faq-item-full { background: var(--paper-white); border: 1px solid var(--ink-200); border-radius: 10px; overflow: hidden; }

.faq-item-full summary {

  padding: 18px 24px; cursor: pointer;

  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink);

  list-style: none; position: relative; padding-right: 50px;

  user-select: none; letter-spacing: -0.005em;

}

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

.faq-item-full summary::after {

  content: '+'; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);

  font-size: 22px; font-weight: 700; color: var(--ink-500);

}

.faq-item-full[open] summary::after { content: '−'; color: var(--purple-700); }

.faq-item-full[open] summary { border-bottom: 1px solid var(--ink-100); }

.faq-item-full .a { padding: 16px 24px 20px; font-size: 13.5px; color: var(--ink-700); line-height: 1.65; margin: 0; }

.faq-item-full .chem-table {

  width: calc(100% - 48px); margin: 0 24px 14px;

  border-collapse: collapse; font-size: 13px;

  border-radius: 6px; overflow: hidden;

}

.faq-item-full .chem-table thead th {

  background: var(--ink-50); color: var(--ink);

  font-family: var(--font-mono); font-size: 10.5px;

  letter-spacing: 0.08em; text-transform: uppercase;

  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--ink-200);

}

.faq-item-full .chem-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--ink-100); color: var(--ink); }

.faq-item-full .chem-table tbody tr:last-child td { border-bottom: none; }

.faq-item-full .chem-table tbody td.ok   { color: #065f46; font-weight: 700; background: #d1fae5; }

.faq-item-full .chem-table tbody td.warn { color: #92400e; font-weight: 700; background: #fef3c7; }

.faq-item-full .chem-table tbody td.fail { color: #991b1b; font-weight: 700; background: #fee2e2; }



/* ---- 16 · Glossary · engineering-term definitions ---- */

.glossary { background: var(--paper-white); border: 1px solid var(--ink-200); border-radius: 12px; padding: 28px 32px; display: grid; gap: 18px; }

.glossary .gloss-item {

  display: grid; grid-template-columns: 200px 1fr; gap: 24px;

  padding-bottom: 18px; border-bottom: 1px solid var(--ink-100);

}

.glossary .gloss-item:last-child { padding-bottom: 0; border-bottom: none; }

.glossary .gloss-item dt, .glossary .gloss-item .term {

  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em;

  color: var(--purple-700); font-weight: 700; text-transform: uppercase;

}

.glossary .gloss-item dd, .glossary .gloss-item .def {

  font-size: 13.5px; color: var(--ink-800); line-height: 1.65; margin: 0;

}



/* ---- 15c · Photo placeholder · styled mockup until real photo lands ----

 * Used in .apps-grid .app-card .visual, .case-link .visual, and the

 * hero stage when no photo is wired. Reads as intentional industry-icon

 * card, not as a TODO/broken state. */

.photo-placeholder {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  color: var(--purple-700);

  text-decoration: none;

  padding: 14px;

}

.photo-placeholder .ph-icon {

  width: 44px;

  height: 44px;

  color: var(--purple-700);

  opacity: 0.85;

}

.photo-placeholder .ph-label {

  font-family: var(--font-mono);

  font-size: 10.5px;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--purple-700);

  font-weight: 700;

}

.photo-placeholder .ph-sub {

  font-family: var(--font-mono);

  font-size: 9.5px;

  letter-spacing: 0.06em;

  color: var(--ink-500);

  font-weight: 500;

  text-transform: uppercase;

}

/* Dark-context variant · for hero-dark .stage */

.photo-placeholder.in-dark {

  color: rgba(250, 250, 250, 0.5);

}

.photo-placeholder.in-dark .ph-icon { color: rgba(250, 250, 250, 0.45); }

.photo-placeholder.in-dark .ph-label { color: rgba(250, 250, 250, 0.65); }

.photo-placeholder.in-dark .ph-sub { color: rgba(250, 250, 250, 0.35); }



/* ---- 16a · EEAT byline · author + last-verified signal ----

 * Trust signal placed (1) below the hero CTAs in dark context, and

 * (2) below the spec-table caption in light context. Mono small text,

 * subtle but present. Carries Experience/Expertise/Authority/Trust

 * indicators per Google EEAT framework. Cite the reviewer's role +

 * date the page was checked against the manufacturer TDS. */

.eeat-byline {

  font-family: var(--font-mono);

  font-size: 11.5px;

  color: var(--ink-600);

  letter-spacing: 0.04em;

  line-height: 1.55;

  margin: 0;

  padding-top: 14px;

  border-top: 1px solid var(--ink-100);

}

.eeat-byline strong { color: var(--ink); font-weight: 700; }

.eeat-byline a { color: var(--purple-700); text-decoration: underline; }

.eeat-byline.in-dark {

  color: rgba(250, 250, 250, 0.55);

  border-top-color: rgba(255, 255, 255, 0.10);

}

.eeat-byline.in-dark strong { color: rgba(250, 250, 250, 0.85); }

.eeat-byline.in-dark a { color: rgba(250, 250, 250, 0.85); }

.eeat-byline .verified-icon {

  display: inline-block;

  width: 12px; height: 12px;

  margin-right: 6px;

  vertical-align: -2px;

}



/* ---- 16b · Help nudge · in-your-face "talk to us" off-ramp ----

 * Bold mint-block card placed AFTER dense info sections. Hard to scroll

 * past on purpose · the engineer who's overwhelmed gets a clear out.

 * Solid mint icon disc, ink-coloured CTA button, big body text. */

.help-nudge {

  background: var(--mint-50);

  border: 2px solid var(--mint-300);

  border-radius: 14px;

  padding: 22px 28px;

  display: flex;

  align-items: center;

  gap: 22px;

  box-shadow: 0 4px 18px rgba(14, 231, 191, 0.12);

  margin: 28px 0;

  position: relative;

  overflow: hidden;

}

.help-nudge::before {

  content: '';

  position: absolute; left: 0; top: 0; bottom: 0;

  width: 5px; background: var(--mint);

}

.help-nudge .nudge-ico {

  width: 48px; height: 48px; flex-shrink: 0;

  border-radius: 50%; background: var(--mint);

  color: var(--ink);

  display: flex; align-items: center; justify-content: center;

  box-shadow: 0 2px 10px rgba(14, 231, 191, 0.45);

}

.help-nudge .nudge-ico svg { width: 22px; height: 22px; }

.help-nudge .nudge-body { flex: 1; min-width: 0; }

.help-nudge .nudge-body p {

  margin: 0; font-size: 15px; color: var(--ink-800); line-height: 1.5;

}

.help-nudge .nudge-body p strong {

  display: block; font-family: var(--font-display);

  font-size: 17px; font-weight: 800; color: var(--ink);

  letter-spacing: -0.005em; margin-bottom: 4px;

}

.help-nudge .nudge-cta {

  display: inline-flex; align-items: center; gap: 8px;

  background: var(--ink); color: var(--paper);

  font-family: var(--font-body); font-weight: 700; font-size: 14px;

  letter-spacing: -0.005em;

  padding: 12px 22px; border-radius: 999px;

  text-decoration: none;

  white-space: nowrap; flex-shrink: 0;

  box-shadow: 0 2px 10px rgba(12, 17, 26, 0.20);

  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;

}

.help-nudge .nudge-cta:hover {

  transform: translateY(-1px);

  background: var(--ink-800);

  box-shadow: 0 6px 18px rgba(12, 17, 26, 0.28);

}

@media (max-width: 720px) {

  .help-nudge { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 22px; }

  .help-nudge .nudge-cta { align-self: stretch; text-align: center; justify-content: center; }

}



/* ---- 17 · Related-materials crosslinks band ---- */

.related-materials {

  display: flex; gap: 8px; flex-wrap: wrap;

  padding: 18px 22px; background: var(--ink-50);

  border: 1px solid var(--ink-200); border-radius: 12px;

}

.related-materials .lbl {

  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;

  text-transform: uppercase; color: var(--ink-600); margin-right: 10px; align-self: center;

}

.related-materials a {

  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;

  color: var(--purple-700); background: var(--paper-white);

  border: 1px solid var(--ink-200); border-radius: 999px;

  padding: 6px 14px; text-decoration: none;

  transition: background 150ms ease, border-color 150ms ease;

}

.related-materials a:hover { background: var(--purple-50); border-color: var(--purple-300); color: var(--purple-800); }



/* ---- Mobile collapse · 860px ---- */

@media (max-width: 860px) {

  .hero-dark { grid-template-columns: 1fr; }

  .hero-dark .copy { padding: 32px 24px; }

  .hero-dark .stage { min-height: 280px; }

  .anchor-nav { position: static; }

  .anchor-nav ol { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }

  .anchor-nav ol a { white-space: nowrap; }

  .tldr-card { grid-template-columns: 1fr; gap: 24px; }

  .tldr-card .col + .col { padding-left: 0; padding-top: 24px; border-left: none; border-top: 1px solid var(--ink-100); }

  .chem-explainer { grid-template-columns: 1fr; }

  .chem-explainer .ref-sidebar { position: static; }

  .not-for { grid-template-columns: 1fr; padding: 32px 24px; }

  .compare-band { padding: 24px 22px; }

  .case-link { grid-template-columns: 1fr; }

  .glossary .gloss-item { grid-template-columns: 1fr; gap: 6px; }

  .spec-table th, .spec-table td,

  .compare-table th, .compare-table td { padding: 11px 14px; font-size: 12.5px; }

}



/* ── Footer additions · 2026-05-09 · byline + social row + share UX + trust badges + cookie banner ── */



.footer-byline {

  margin-top: 14px;

  padding: 10px 18px;

  text-align: center;

  font-size: 12.5px;

  color: var(--ink-400, #6a7280);

  letter-spacing: 0.01em;

}

.footer-byline a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

.footer-byline a:hover { color: var(--ink-900, #0c111a); }



.about-block-byline { font-size: 13px; color: var(--ink-400, #6a7280); }

.about-block-byline a { color: inherit; text-decoration: underline; }



.footer-social {

  display: flex;

  gap: 18px;

  flex-wrap: wrap;

  justify-content: center;

  margin-top: 14px;

  padding: 10px 18px;

}

.footer-social-link {

  font-size: 13px;

  color: var(--ink-500, #4a5568);

  text-decoration: none;

  padding: 8px 12px;

  min-height: 24px;

  display: inline-flex;

  align-items: center;

  border-radius: 6px;

  transition: background 0.15s ease;

}

.footer-social-link:hover { background: var(--ink-50, #f1f5f9); color: var(--ink-900, #0c111a); }

.footer-social-google { color: #1a73e8; }



.footer-share {

  display: flex;

  gap: 10px;

  align-items: center;

  flex-wrap: wrap;

  justify-content: center;

  margin-top: 18px;

  padding: 10px 18px;

}

.footer-share-label { font-size: 13px; color: var(--ink-400, #6a7280); margin-right: 6px; }

/* `.sec-11 .` prefix: `.sec-11 a` (0,1,1) was beating the single-class

   `.footer-share-btn`/`.footer-trust-badge` (0,1,0) and whitening every

   <a> here → invisible white-on-light pills. The <button> Copy link was

   immune (not an <a>), which is why only the links broke. 2026-05-18. */

.sec-11 .footer-share-btn {

  font-size: 12.5px;

  color: var(--ink-700, #2d3648);

  background: var(--ink-50, #f1f5f9);

  border: 1px solid var(--ink-100, #e2e8f0);

  padding: 8px 14px;

  border-radius: 6px;

  text-decoration: none;

  cursor: pointer;

  min-height: 32px;

  display: inline-flex;

  align-items: center;

  font-family: inherit;

  transition: all 0.15s ease;

}

.sec-11 .footer-share-btn:hover { background: var(--ink-100, #e2e8f0); color: var(--ink-900, #0c111a); }

.footer-share-copy { font-family: inherit; }



.footer-trust {

  display: flex;

  gap: 16px;

  flex-wrap: wrap;

  justify-content: center;

  margin-top: 14px;

  padding: 12px 18px 24px;

  border-top: 1px solid var(--ink-100, #e2e8f0);

}

.sec-11 .footer-trust-badge {

  font-size: 12.5px;

  color: var(--ink-500, #4a5568);

  text-decoration: none;

  padding: 8px 14px;

  border: 1px solid var(--ink-100, #e2e8f0);

  border-radius: 999px;

  min-height: 24px;

  display: inline-flex;

  align-items: center;

  background: var(--ink-50, #f9fafb);

  transition: border-color 0.15s ease, background 0.15s ease;

}

.sec-11 .footer-trust-badge:hover { border-color: var(--ink-300, #cbd5e1); background: #fff; color: var(--ink-900, #0c111a); }



/* Cookie banner · GDPR/PECR · Pillar 15 */



.cookie-banner {

  position: fixed;

  bottom: 16px;

  left: 16px;

  right: 16px;

  max-width: 840px;

  margin: 0 auto;

  background: var(--ink-900, #0c111a);

  color: #fafafa;

  padding: 14px 18px;

  border-radius: 10px;

  box-shadow: 0 12px 40px rgba(12, 17, 26, 0.18);

  z-index: 50;

  font-size: 13px;

  display: none;  /* JS toggles to flex on first visit; for now visible by default for the audit */

  align-items: center;

  gap: 16px;

  flex-wrap: wrap;

}

.cookie-banner[data-cookie-banner]:not(.hidden) { display: flex; }

.cookie-banner-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; flex: 1; }

.cookie-banner-text { margin: 0; flex: 1 1 320px; line-height: 1.5; }

.cookie-banner-text a { color: #0ee7bf; text-decoration: underline; }

.cookie-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cookie-banner-btn {

  font-size: 12.5px;

  font-family: inherit;

  padding: 8px 14px;

  border-radius: 6px;

  border: 1px solid transparent;

  min-height: 32px;

  cursor: pointer;

  transition: all 0.15s ease;

}

.cookie-banner-accept { background: #0ee7bf; color: #0c111a; border-color: #0ee7bf; }

.cookie-banner-accept:hover { background: #07d2af; border-color: #07d2af; }

.cookie-banner-reject { background: transparent; color: #fafafa; border-color: rgba(250,250,250,0.4); }

.cookie-banner-reject:hover { border-color: #fafafa; }



/* Cookie banner default = visible. Once user accepts/rejects, JS adds .hidden + writes localStorage

   so subsequent visits stay hidden. !important on .hidden ensures it wins specificity vs the

   data-cookie-banner attribute selector above. (cookieBannerInit lives in brand.preview.js.) */

.cookie-banner[data-cookie-banner] { display: flex; }

.cookie-banner[data-cookie-banner].hidden { display: none !important; }



/* Mobile responsive · footer additions · @media max-width 720 */

@media (max-width: 720px) {

  .footer-byline, .footer-social, .footer-share, .footer-trust { padding-left: 12px; padding-right: 12px; }

  .footer-social, .footer-share, .footer-trust { gap: 8px; }

  .cookie-banner { bottom: 8px; left: 8px; right: 8px; padding: 12px 14px; }

  .cookie-banner-inner { flex-direction: column; align-items: flex-start; gap: 12px; }

  .cookie-banner-actions { width: 100%; }

  .cookie-banner-btn { flex: 1; min-width: 110px; }

}



/* Howitworks ordered list · keep visual identical to old timeline-row.

 * Only reset the default <ol> inline-start indent (the gutter that holds list

 * markers) — must not zero padding-top, because .timeline-row relies on a

 * 60px top padding for the dot-on-line geometry. */

.howitworks-ol {

  list-style: none;

  padding-inline-start: 0;

  margin: 0;

  counter-reset: howitworks-step;

}

.howitworks-ol > li.timeline-node {

  /* inherits all timeline-node styling unchanged */

  list-style: none;

}



/* ============================================================

 * Mobile table-overflow guard · 2026-05-11 mobile audit

 * Every table on a material page (.compare-table, .spec-table, .chem-table,

 * .hub-compare-table, .ul94-table) must scroll horizontally inside itself

 * on viewports ≤ 860px · NEVER push the document beyond viewport width.

 *

 * Approach: turn each table into a block-level scroll-x container directly.

 * thead/tbody/tfoot re-promoted to display:table inside the block so

 * column layout is preserved. Wraps (where present) also get overflow-x.

 * ============================================================ */

@media (max-width: 860px) {

  /* Wrap containers (where used) */

  .spec-table-wrap,

  .compare-table-wrap,

  .hub-compare-table-wrap,

  .ul94-table-wrap {

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    max-width: 100%;

  }

  /* Details containers around chem-tables */

  details.faq-item-full {

    max-width: 100%;

  }

  /* All material-page tables become block-scroll containers on mobile */

  .compare-table,

  .spec-table,

  .faq-item-full .chem-table,

  .hub-compare-table,

  .ul94-table {

    display: block;

    max-width: 100%;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

  }

  /* Re-promote the table internals back to table layout inside the scroll block */

  .compare-table > thead,

  .compare-table > tbody,

  .compare-table > tfoot,

  .spec-table > thead,

  .spec-table > tbody,

  .spec-table > tfoot,

  .faq-item-full .chem-table > thead,

  .faq-item-full .chem-table > tbody,

  .hub-compare-table > thead,

  .hub-compare-table > tbody,

  .ul94-table > thead,

  .ul94-table > tbody {

    display: table;

    width: max-content;

    min-width: 100%;

  }

}



/* ============================================================

 * 2026-05-11 mobile refinements (James review)

 *   - .perfect-for collapses to 1-col on mobile + smaller text

 *   - .compare-table becomes a tab-switcher on mobile (progressive

 *     enhancement · JS in brand.preview.js tags cells with data-col,

 *     inserts a .compare-tabs strip, sets .compare-table-tabbed)

 * ============================================================ */

@media (max-width: 860px) {

  /* Perfect-for 1-column + text shrink (matches .not-for pattern) */

  .perfect-for {

    grid-template-columns: 1fr;

    padding: 32px 24px;

    gap: 24px;

  }

  .perfect-for h2,

  .not-for h2 {

    font-size: 1.375rem;

    line-height: 1.2;

  }

  .perfect-for > div:first-child p,

  .not-for > div:first-child p {

    font-size: 13.5px;

  }

  .perfect-for ul li,

  .not-for ul li {

    font-size: 13px;

    padding-left: 26px;

    line-height: 1.5;

  }



  /* Compare-table tab-switcher strip (JS-injected) */

  .compare-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin: 8px 0 12px;

  }

  .compare-tab {

    flex: 1 1 calc(50% - 6px);

    min-width: calc(33% - 6px);

    padding: 9px 10px;

    border: 1px solid var(--ink-200);

    background: var(--paper-white);

    border-radius: 10px;

    font-family: var(--font-mono);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: var(--ink-700);

    cursor: pointer;

    min-height: 40px;

    line-height: 1.2;

    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;

    -webkit-tap-highlight-color: rgba(143, 94, 171, 0.3);

  }

  .compare-tab.is-active {

    background: var(--purple-900);

    color: var(--paper);

    border-color: var(--purple-900);

  }

  .compare-tab:focus-visible {

    outline: 2px solid var(--mint-400);

    outline-offset: 2px;

  }



  /* Tabbed table · overrides the block-scroll guard above */

  .compare-table.compare-table-tabbed {

    display: table;

    width: 100%;

    max-width: 100%;

    overflow: visible;

    table-layout: auto;

  }

  .compare-table.compare-table-tabbed > thead {

    display: none; /* Replaced by .compare-tabs strip above the table */

  }

  .compare-table.compare-table-tabbed > tbody {

    display: table-row-group;

    width: auto;

    min-width: 0;

  }

  /* Hide every non-property data cell · only the active material column shows */

  .compare-table.compare-table-tabbed tbody tr > [data-col]:not([data-col="0"]) {

    display: none;

  }

  .compare-table.compare-table-tabbed[data-active-col="1"] tbody tr > [data-col="1"],

  .compare-table.compare-table-tabbed[data-active-col="2"] tbody tr > [data-col="2"],

  .compare-table.compare-table-tabbed[data-active-col="3"] tbody tr > [data-col="3"],

  .compare-table.compare-table-tabbed[data-active-col="4"] tbody tr > [data-col="4"],

  .compare-table.compare-table-tabbed[data-active-col="5"] tbody tr > [data-col="5"],

  .compare-table.compare-table-tabbed[data-active-col="6"] tbody tr > [data-col="6"] {

    display: table-cell;

  }

}



/* Desktop · keep .compare-tabs hidden (it only renders on mobile) */

.compare-tabs { display: none; }



/* ============================================================

 * PERF · content-visibility on deep below-the-fold sections.

 * Lighthouse flagged 2.9s main-thread work — the browser was

 * laying out/painting the entire ~21k-px DOM at load. These

 * sections sit far below the first viewport and are NOT sticky

 * or the scrollspy (sec-01 nav / sec-05 spy are excluded), so

 * skipping their offscreen render is safe. `contain-intrinsic-

 * size: auto <h>` reserves the right space up front (sizes from

 * measured mobile heights) AND the `auto` keyword makes the

 * browser remember the real size after first render → CLS stays

 * 0, no scroll-jump. IntersectionObserver reveal animations

 * still fire (the browser renders each section as it nears the

 * viewport). 2026-05-18. */

#sec-07, #sec-08, #sec-team, #sec-testimonials, #sec-compare,

#sec-turnaround, #sec-09, #sec-10, #sec-11, #sec-legal {

  content-visibility: auto;

}

#sec-07         { contain-intrinsic-size: auto 560px; }

#sec-08         { contain-intrinsic-size: auto 1400px; }

#sec-team       { contain-intrinsic-size: auto 1080px; }

#sec-testimonials { contain-intrinsic-size: auto 720px; }

#sec-compare    { contain-intrinsic-size: auto 560px; }

#sec-turnaround { contain-intrinsic-size: auto 1440px; }

#sec-09         { contain-intrinsic-size: auto 800px; }

#sec-10         { contain-intrinsic-size: auto 840px; }

#sec-11         { contain-intrinsic-size: auto 2360px; }

#sec-legal      { contain-intrinsic-size: auto 440px; }





/* === MOBILE-NAV-FIX 2026-05-22 === append-only overrides (James/Claude) ===

 * Three mobile-only nav defects found via iPhone-13 render audit:

 *  (2) open menu panel collapsed to ~165px and centred — .nav-pill>.links

 *      inherited desktop justify-self:center (line ~1030); never reset <=880px.

 *  (3) hamburger was low-affordance: thin 22px icon, no button chrome.

 * Fix (1) the hero-overlap lives in material-layout.css. */

@media (max-width: 880px) {

  /* (2) let the absolute panel (left:0;right:0) span the full pill width */

  .nav-pill > .links { justify-self: stretch !important; grid-column: 1 / -1 !important; }



  /* (3) make the 44px hamburger read as a tappable control */

  .nav-hamburger {

    background: var(--mint-400) !important;

    color: var(--ink) !important;

    border: none !important;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);

  }

  .nav-hamburger:hover,

  .nav-pill[data-mobile-open="true"] .nav-hamburger {

    filter: brightness(1.06);

  }

}

/* === /MOBILE-NAV-FIX 2026-05-22 === */





/* === MOBILE-A11Y-FIX 2026-05-22 === append-only (James/Claude) · round 3 ===

 * Found via iPhone-13 scan across home/hub/quote/service/material pages:

 *  (A) CF chemistry table clipped (overflow:hidden, 644px content in 356px box)

 *  (B) breadcrumb links 14px tall (fail WCAG 2.5.8 AA 24px)

 *  (C) NDA opt-in checkbox 13x13 (fail AA)

 *  (D) quote-page trust logos squished to 16px-wide slivers (too many grid cols) */

@media (max-width: 880px) {

  /* (A) scroll the chem table instead of cutting columns off */

  .faq-item-full .chem-table {

    display: block !important;

    overflow-x: auto !important;

    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

  }

  /* (B) enlarge breadcrumb tap target to >=24px without shifting layout */

  .hero-dark .breadcrumb a {

    display: inline-block;

    padding: 6px 4px;

  }

  /* (C) enlarge the form checkbox to >=24px */

  body .ff-el-form-check-input,

  body .ff-el-form-check input[type="checkbox"],

  body .ff-el-form-check input[type="radio"] {

    width: 24px !important;

    height: 24px !important;

  }

}

/* (D) phones only (<=560px): stop the trust-logo grid squishing logos to slivers */

@media (max-width: 560px) {

  body .quote-request-page .qr-brandstrip .logo-row { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; }

}

@media (max-width: 380px) {

  body .quote-request-page .qr-brandstrip .logo-row { grid-template-columns: repeat(2, 1fr) !important; }

}

/* === /MOBILE-A11Y-FIX 2026-05-22 === */





/* === MOBILE-NAV-BLUR-FIX 2026-05-22 === iPhone Safari scroll-freeze mitigation.

 * backdrop-filter: blur() on a position:sticky element over a long page is a

 * well-known iOS Safari cause of severe scroll jank / "freezing". The nav-pill

 * gradient is already 92-94% opaque, so dropping the blur on mobile is visually

 * near-identical but removes the per-frame backdrop rasterisation. */

@media (max-width: 880px) {

  .nav-pill { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

}

/* === /MOBILE-NAV-BLUR-FIX 2026-05-22 === */





/* === PROCESS-OL-RESET 2026-05-23 (Tier 1B GEO citability) ===

 * Service/material process blocks (.steps/.steps-4/.steps-5/.flow-steps) are now

 * <ol> with <li> step cards so AI crawlers parse them as an ordered procedure.

 * Neutralise <ol> UA defaults so the existing grid layout is visually unchanged. */

ol.steps, ol.steps-4, ol.steps-5, ol.flow-steps { list-style: none; margin: 0; padding: 0; }

ol.steps > li, ol.steps-4 > li, ol.steps-5 > li, ol.flow-steps > li { list-style: none; }

/* === END PROCESS-OL-RESET === */





/* ============================================================

 * 3DPE canonical SITE FOOTER · Option C (asymmetric) · locked 2026-05-28.

 * Single source of truth for the site-wide footer rendered by tdpe_render_footer().

 * Class tree under .site-footer-c (deliberate, to coexist with deprecated .footer).

 * ============================================================ */



.site-footer-c {

  background: var(--purple-900);

  color: var(--paper);

  padding: 56px 48px 0;

  margin-top: 64px;

  border-radius: 24px;

  font-family: var(--font-body);

  font-size: 14px;

  line-height: 1.7;

}

.site-footer-c a { color: var(--paper); text-decoration: none; transition: color 150ms ease; }

.site-footer-c a:hover, .site-footer-c a:focus-visible { color: var(--mint-400); }

.site-footer-c h2, .site-footer-c h3 {

  font-family: var(--font-display);

  font-weight: 600;

  margin: 0;

}



/* --- Top row: contact card 0.9fr | links 1.5fr --- */

.site-footer-c .sf-row {

  display: grid;

  grid-template-columns: 0.9fr 1.5fr;

  gap: 32px;

  align-items: stretch;

}



/* --- Left: mint-bordered contact card --- */

.site-footer-c .sf-contact-card {

  background: rgba(255,255,255,0.04);

  border: 2px solid var(--mint-400);

  border-radius: 16px;

  padding: 28px 28px 24px;

}

.site-footer-c .sf-card-eyebrow {

  font-size: 18px;

  color: var(--mint-400);

  margin: 0 0 12px;

  letter-spacing: 0.04em;

  text-transform: uppercase;

}

.site-footer-c .sf-card-lead {

  color: var(--paper);

  font-size: 15px;

  line-height: 1.6;

  margin: 0 0 18px;

}

.site-footer-c .sf-phone {

  display: block;

  font-weight: 700;

  font-size: 18px;

  color: var(--paper);

  padding: 4px 0;

}

.site-footer-c .sf-email {

  display: block;

  color: var(--mint-400);

  font-size: 15px;

  padding: 0 0 14px;

  word-break: break-all;

}

.site-footer-c .sf-reply {

  font-size: 13px;

  color: rgba(255,255,255,0.7);

  margin-bottom: 18px;

}

.site-footer-c .sf-reply::before { content: "● "; color: var(--mint-400); font-size: 9px; vertical-align: middle; }

.site-footer-c .sf-send-cta {

  display: inline-block;

  background: var(--mint-400);

  color: var(--ink);

  font-weight: 700;

  padding: 12px 20px;

  border-radius: 8px;

  font-size: 14px;

  text-decoration: none;

  min-height: 44px;

  box-sizing: border-box;

}

.site-footer-c .sf-send-cta:hover,

.site-footer-c .sf-send-cta:focus-visible {

  background: var(--paper);

  color: var(--ink);

}



/* --- Right: 2 link columns + meta strip --- */

.site-footer-c .sf-right { display: flex; flex-direction: column; gap: 16px; }

.site-footer-c .sf-cols {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 32px;

}

.site-footer-c .sf-col-head {

  font-size: 12px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--mint-400);

  margin: 0 0 16px;

}

.site-footer-c .sf-col a {

  display: block;

  padding: 6px 0;

  font-size: 14px;

  min-height: 32px;

}

.site-footer-c .sf-meta {

  grid-column: 1 / -1;

  border-top: 1px solid rgba(255,255,255,0.10);

  padding-top: 16px;

  margin-top: 8px;

  color: rgba(255,255,255,0.7);

  font-size: 13px;

}

.site-footer-c .sf-meta a {

  display: inline;

  padding: 0;

  margin-right: 18px;

  color: rgba(255,255,255,0.85);

}



/* --- Foot bar: company registration --- */

.site-footer-c .sf-foot {

  margin-top: 48px;

  padding: 20px 0;

  border-top: 1px solid rgba(255,255,255,0.12);

  color: rgba(255,255,255,0.62);

  font-size: 12px;

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 12px;

}

.site-footer-c .sf-legal { color: rgba(255,255,255,0.62); }

.site-footer-c .sf-legal strong { color: rgba(255,255,255,0.85); font-weight: 700; }



/* --- Mobile: ≤880px stack everything --- */

@media (max-width: 880px) {

  .site-footer-c { padding: 40px 20px 0; border-radius: 16px; }

  .site-footer-c .sf-row { grid-template-columns: 1fr; gap: 24px; }

  .site-footer-c .sf-cols { grid-template-columns: 1fr; gap: 24px; }

  .site-footer-c .sf-foot { flex-direction: column; }

  .site-footer-c .sf-send-cta { display: block; text-align: center; width: 100%; box-sizing: border-box; }

}





/* ----- /quote-request/ launch fixes 2026-05-28 ----- */

@media (max-width: 768px) {

  .quote-request-page .mini-hero .freebie-callout { flex-wrap: wrap; gap: 12px; }

  .quote-request-page .mini-hero .freebie-callout .freebie-claim { margin-left: 0 !important; width: 100%; min-height: 44px; }

}

.page-id-71 .widget-area, .page-id-71 #right-sidebar, .page-id-71 #left-sidebar,

.page-id-71 .sidebar, .page-id-71 aside.widget-area,

body.page-id-71 .secondary, body.page-id-71 .comments-area { display: none !important; }

.page-id-71 .container.grid-container, .page-id-71 .site-content .container { grid-template-columns: 1fr !important; max-width: 1200px; }

.page-id-71 #primary { width: 100% !important; flex: 1 1 100% !important; max-width: 100% !important; padding-right: 0 !important; }





/* ----- /services/events-and-brand-activations/ mobile fix 2026-05-28 ----- */

/* The .ev2-finish-table is 888px wide; on <820px it caused horizontal page scroll.

   Wrap-style mobile-scroll: the table itself becomes a scroll container, page doesn't widen. */

@media (max-width: 820px) {

  .ev2-finish-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .ev2-finish-table thead, .ev2-finish-table tbody, .ev2-finish-table tr { display: table; width: max-content; min-width: 100%; }

}





/* ----- a11y fix · 2026-05-29 · bournemouth eyebrow labels mint-600 → mint-700 (was 3.04:1, needs 4.5:1) ----- */

.page-id-118 span[style*="--mint-600"],

body.page-id-118 .trust-eyebrow,

body.page-id-118 .eyebrow { color: var(--mint-700) !important; }

/* =====================================================================

 * Deep-audit fix · CAD page · 2026-05-29

 * 1. Hero scroll-pin → 4-up storyboard grid (kills 320vh colour wall)

 * 2. Card-accent rotation for 4 monotone grids (mint/purple alternating)

 * 3. .photo-break full-bleed image block (visual rhythm between dense sections)

 * Locked at brand chassis level — never per-page polish.

 * ===================================================================== */



/* --- 1. Hero storyboard mode ----------------------------------------- */

/* Activated by adding .hero-cadtoreal--storyboard alongside .hero-cadtoreal.

 * Kills the 320vh sticky pin, lays all 4 frames as a visible 4-up storyboard. */

.hero-cadtoreal--storyboard .cadtoreal-scroll-wrap {

  height: auto;

}

.hero-cadtoreal--storyboard .cadtoreal-pin {

  position: relative;

  top: auto;

  height: auto;

  flex-direction: column;

  min-height: unset;

}

.hero-cadtoreal--storyboard .cadtoreal-stage {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 4px;

  aspect-ratio: 4 / 1;            /* makes each cell 1:1 of the 4-up · stays 16:9 with cover-trim */

  min-height: 240px;

  max-height: 320px;

  width: 100%;

}

.hero-cadtoreal--storyboard .cadtoreal-stage::before {

  display: none;                  /* kill the dot pattern overlay in storyboard mode */

}

.hero-cadtoreal--storyboard .cadtoreal-frame {

  position: relative;             /* override absolute */

  inset: auto;

  opacity: 1;                     /* override opacity gating */

  display: block;

  overflow: hidden;

  z-index: auto;

}

.hero-cadtoreal--storyboard .cadtoreal-frame > img {

  position: relative;

  inset: auto;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

}

.hero-cadtoreal--storyboard .cadtoreal-frame::after {

  background: linear-gradient(180deg, rgba(12, 17, 26, 0.15) 0%, rgba(12, 17, 26, 0.55) 100%);

}

.hero-cadtoreal--storyboard .cadtoreal-frame .frame-label {

  position: absolute;

  left: 12px;

  bottom: 10px;

  z-index: 3;

  font-family: var(--font-mono);

  font-size: 10px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--paper);

  background: rgba(12, 17, 26, 0.6);

  padding: 4px 8px;

  border-radius: 4px;

  border: 1px solid rgba(255, 255, 255, 0.16);

}

.hero-cadtoreal--storyboard .cadtoreal-sidebar {

  position: relative;

  width: 100%;

  padding: 36px 40px 32px;

  border-left: none;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  background: linear-gradient(180deg, rgba(12, 17, 26, 0.0) 0%, rgba(12, 17, 26, 0.0) 100%);

}

.hero-cadtoreal--storyboard .cadtoreal-sidebar .frame-tracker {

  display: none;                  /* storyboard frames carry their own labels now */

}

.hero-cadtoreal--storyboard .scroll-hint {

  display: none;

}

@media (max-width: 860px) {

  .hero-cadtoreal--storyboard .cadtoreal-stage {

    grid-template-columns: repeat(2, 1fr);

    aspect-ratio: 2 / 1;

    min-height: 320px;

    max-height: 380px;

  }

  .hero-cadtoreal--storyboard .cadtoreal-pin {

    flex-direction: column;       /* override the column-reverse from main mobile rule */

  }

  .hero-cadtoreal--storyboard .cadtoreal-sidebar {

    padding: 28px 22px;

  }

}



/* --- 2. Card-accent rotation · brand chassis level ------------------- */

/* Applies to all pages using these grids. Alternating subtle accents

 * break up grid monotony without per-page polish CSS. */

.obj-grid > .obj:nth-child(odd) {

  border-top: 3px solid var(--mint-400);

}

.obj-grid > .obj:nth-child(even) {

  border-top: 3px solid var(--purple-700, #6a4489);

}

.cap-grid > .cap-card:nth-child(odd) {

  background: linear-gradient(180deg, rgba(14, 231, 191, 0.04) 0%, transparent 60%), var(--ink-50, #f5f6f8);

  border-top: 3px solid var(--mint-400);

}

.cap-grid > .cap-card:nth-child(even) {

  background: linear-gradient(180deg, rgba(143, 94, 171, 0.05) 0%, transparent 60%), var(--ink-50, #f5f6f8);

  border-top: 3px solid var(--purple-700, #6a4489);

}

.risk-band > .risk-promise:nth-child(odd) {

  border-top: 3px solid var(--mint-400);

  padding-top: 14px;

}

.risk-band > .risk-promise:nth-child(even) {

  border-top: 3px solid rgba(143, 94, 171, 0.9);

  padding-top: 14px;

}

.intake-tiles > .intake-tile:nth-child(odd) {

  border-top: 2px solid var(--mint-400);

}

.intake-tiles > .intake-tile:nth-child(even) {

  border-top: 2px solid var(--purple-700, #6a4489);

}

.intake-tiles > .intake-tile:nth-child(3n) {

  border-top-color: var(--ink-700, #1f2937);

}



/* --- 3. Photo-break section · full-bleed visual rhythm --------------- */

/* Drop between dense text-only sections. Real photo, 16:9, no extra chrome. */

.photo-break {

  position: relative;

  margin: 32px 0;

  border-radius: 16px;

  overflow: hidden;

  aspect-ratio: 16 / 7;

  background: var(--ink-50, #f5f6f8);

}

.photo-break > img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.photo-break .pb-caption {

  position: absolute;

  left: 24px;

  bottom: 20px;

  font-family: var(--font-mono);

  font-size: 11px;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--paper);

  background: rgba(12, 17, 26, 0.55);

  padding: 6px 12px;

  border-radius: 4px;

  border: 1px solid rgba(255, 255, 255, 0.18);

}

@media (max-width: 860px) {

  .photo-break {

    aspect-ratio: 4 / 3;

    margin: 24px 0;

  }

}



/* Fix #2 · Hide top announcement strip on mobile (2026-06-01) */

/* Fix #3 · Mobile nav current page label (2026-06-01) */

.nav-current-page { display: none; }

@media (max-width: 720px) {

  header.site-header .sec-00 { display: none; }

  .nav-current-page { display: inline-flex; align-items: center; color: #fff; font-weight: 600; font-size: 14px; flex: 1; justify-content: center; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

}





/* ===== Launch a11y · WCAG-AA contrast override for quote-request CTAs =====

 * High specificity (html body ...) + !important to beat Fluent Forms defaults

 * and the custom-css-js plugin (#freebieClaim #e0480c, .ff-btn #1a7efb). 2026-06-05. */

html body .quote-request-page #freebieClaim,

html body .quote-request-page .freebie-claim {

  background: #b83a09 !important;   /* white on #b83a09 = 5.32:1 */

  color: #ffffff !important;

}

html body .quote-request-page .freebie-scarcity {

  color: #9a3412 !important;        /* on light-mint callout = ~6:1 */

}

html body .quote-request-page .ff-btn,

html body .quote-request-page .ff-btn-submit,

html body .quote-request-page .ff_btn_style,

html body .quote-request-page button.ff-btn {

  background: var(--mint-400) !important;  /* ink on mint-400 = 14.2:1 AAA */

  color: var(--ink) !important;

  border-color: var(--mint-400) !important;

}



/* ============================================================
 * Homepage material chips - filament-strand texture (James 2026-06-05)
 * Each .mat-chip keeps its inline background COLOUR; a neutral grey
 * wound-filament photo is blended OVER that colour via mix-blend-mode:
 * overlay, so the card shows the real filament texture tinted to its own
 * colour (no colours changed). Bottom shader + text-shadow keep labels
 * legible. Homepage-only (.materials-bento renders on the front page).
 * ============================================================ */
.materials-bento .mat-chip { isolation: isolate; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.materials-bento .mat-chip::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url("../photos/filaments/filament-grey.webp") center / cover no-repeat;
  mix-blend-mode: overlay; opacity: 0.9;
}
.materials-bento .mat-chip::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(12,17,26,0.42) 100%);
}