/* ==========================================================================
   tnmsolutions.co.uk — site.css (the Custom-level rebuild, 6 Oct 2026, D91)

   Light, precise and friendly: a white page drawn on a faint blueprint grid,
   hairline rules, monospaced labels, TNM's navy and blue, and the promo's
   helping hand. One accent (blue) for primary actions only; the logo's
   blue→violet gradient for the odd moment of "magic"; a warm sun yellow for
   highlights, never for text.

   Rules this file keeps (CLAUDE.md, non-negotiables):
   - WCAG 2.2 AA: every text colour below passes 4.5:1 on the surface it is
     used on (checked 6 Oct; notes beside each token).
   - No style="" anywhere in the HTML (the CSP drops it): use classes.
   - Motion is opt-in: html.motion is set by pre.js only when the visitor has
     not asked for reduced motion, and only then is anything hidden for GSAP
     to reveal. Without it, every page is complete and still.
   - The form classes (.form, .field, .options, .option, .form__screen …)
     are what site.js and support.js look for: keep the names.
   ========================================================================== */

/* -------------------------------------------------------------------------- fonts */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2");
}

/* -------------------------------------------------------------------------- tokens */
:root {
  /* Brand */
  --navy:        #14264A;
  --navy-deep:   #0C1830;
  --accent:      #1A56DB;   /* white on it 5.9:1; it on white 5.9:1 */
  --accent-dark: #1442AC;
  --accent-tint: #EAF0FE;
  --violet:      #7B3FA0;   /* the logo's M runs #1E88E5 → #7B3FA0 */
  --grad:        linear-gradient(115deg, #1E88E5 0%, #3D5BD9 45%, #7B3FA0 100%);
  --sun:         #FFC94A;   /* highlights behind ink text only */
  --sun-soft:    #FFE7A3;
  --good:        #0F6E3F;   /* 6.4:1 on white */

  /* Text: all pass 4.5:1 on --paper and --surface */
  --ink:         #0E1A30;
  --body:        #3D4A61;   /* 8.4:1 on --paper */
  --muted:       #566380;   /* 5.6:1 on --paper */

  /* Surfaces */
  --paper:       #F7F8FB;
  --surface:     #FFFFFF;
  --surface-2:   #F0F3F9;
  --line:        #DCE2EC;
  --line-strong: #C3CCDB;
  --grid:        rgba(26, 86, 219, .055);

  --error:       #B3261E;
  --error-tint:  #FDECEA;

  /* On dark (the footer, the final band) */
  --on-dark:       #FFFFFF;
  --on-dark-body:  #C9D4E8;   /* 9.6:1 on --navy-deep */
  --on-dark-muted: #A9B6CE;   /* 7.4:1 on --navy-deep */
  --on-dark-rule:  rgba(255,255,255,.14);

  /* Type */
  --font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Bricolage Grotesque", var(--font);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif: "Instrument Serif", Georgia, serif;

  /* Space and shape */
  --wrap:   1200px;
  --wrap-narrow: 760px;
  --gutter: clamp(16px, 4vw, 32px);
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(14, 26, 48, .05);
  --shadow:    0 1px 2px rgba(14, 26, 48, .05), 0 12px 32px -14px rgba(14, 26, 48, .18);
  --shadow-lg: 0 2px 4px rgba(14, 26, 48, .04), 0 30px 60px -24px rgba(14, 26, 48, .28);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* -------------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: 400 1.0625rem/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--sun-soft); color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6.2vw, 4.75rem); letter-spacing: -0.035em; line-height: 1.0; }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.2; letter-spacing: -0.015em; }
h4 { font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
p, li { text-wrap: pretty; }
strong { color: var(--ink); font-weight: 650; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
address { font-style: normal; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }
/* The hidden attribute always hides (D98): without this, .form__screen { display: grid } beat it and every step of the brief
   and the contact form showed at once, so "Next" only scrolled to the top of the form. */
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: calc(var(--wrap-narrow) + 2 * var(--gutter)); }
.section { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.section--tint { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--line { border-top: 1px solid var(--line); }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }
.pt-0 { padding-top: 0 !important; }

.grid { display: grid; gap: clamp(20px, 3vw, 32px); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1020px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.grid--center { align-items: center; }

/* The section head: a mono label, the heading, a lede. */
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head p { font-size: 1.15rem; color: var(--body); }
.section__head { max-width: 760px; margin-bottom: 40px; }   /* older pages */

.label {
  display: inline-flex; align-items: center; gap: .6em;
  font: 600 .75rem/1 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}
.label::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.label--plain::before { display: none; }
/* D104: the hero's label in full where it fits on one line, and short where the column is narrow (no orphaned dots) */
.label__short { display: none; }
@media (max-width: 479px), (min-width: 1020px) and (max-width: 1239px) { .label__long { display: none; } .label__short { display: inline; } }
.eyebrow { font: 600 .8rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .75rem; }

.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--body); }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.hl {
  background: linear-gradient(transparent 58%, var(--sun) 58%, var(--sun) 92%, transparent 92%);
  padding: 0 .08em; border-radius: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mono { font-family: var(--font-mono); font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.center { text-align: center; }

/* -------------------------------------------------------------------------- buttons */
.btn {
  --b-bg: var(--surface); --b-fg: var(--ink); --b-line: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: .8em 1.3em;
  font: 700 1rem/1.15 var(--font);
  letter-spacing: -0.005em;
  color: var(--b-fg); background: var(--b-bg);
  border: 1px solid var(--b-line); border-radius: 12px;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, border-color .2s;
}
.btn:hover { color: var(--b-fg); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--ink); }
.btn:active { transform: translateY(0); }
.btn--primary { --b-bg: var(--accent); --b-fg: #fff; --b-line: var(--accent); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 8px 20px -8px rgba(26,86,219,.55); }
.btn--primary:hover { --b-bg: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.btn--secondary { --b-bg: var(--surface); }
.btn--ghost { --b-bg: transparent; box-shadow: none; }
.btn--on-dark { --b-bg: #fff; --b-fg: var(--navy); --b-line: #fff; }
.btn--on-dark:hover { --b-bg: var(--accent-tint); color: var(--navy); border-color: #fff; }
.btn--ghost-on-dark { --b-bg: transparent; --b-fg: #fff; --b-line: rgba(255,255,255,.45); box-shadow: none; }
.btn--ghost-on-dark:hover { color: #fff; border-color: #fff; }
.btn--block { width: 100%; }
.btn--lg { min-height: 56px; font-size: 1.06rem; padding: .9em 1.5em; }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.75rem; }
.btn-row.mt-0 { margin-top: 0; }
.link-arrow { font-weight: 700; text-decoration: none; display: inline-flex; gap: .4em; align-items: center; }
.link-arrow:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------- header */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 248, 251, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background-color .2s;
}
.header.is-solid { border-bottom-color: var(--line); background: rgba(247, 248, 251, .94); }
.header__inner { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.header__logo { flex: none; display: block; }
/* The wordmark (C, the tile: D97): the tile is an SVG, the name beside it is text in the system font it was drawn in */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__tile { flex: none; display: block; width: 42px; height: 42px; border-radius: 23%; box-shadow: 0 1px 2px rgba(14, 26, 48, .08); }
/* D101: the tile reads "TNM", so the name beside it is just "Solutions" (no "TNM … TNM"), and where there's room a
   mono line rolls through what we build. Decorative: the link's aria-label carries the name. */
.brand__word { font: 700 1.22rem/1 var(--font-head); letter-spacing: -0.02em; color: var(--navy); white-space: nowrap; }
.brand--dark .brand__tile { width: 46px; height: 46px; }
.brand--dark .brand__word { font-size: 1.32rem; color: #fff; }
.brand__what { display: none; }
@media (min-width: 1240px) {
  .header .brand__what {
    display: block; position: relative; height: 1.1em; width: max-content; overflow: hidden; margin-left: 4px; padding-left: 14px;
    border-left: 1px solid var(--line-strong); font: 600 .68rem/1.1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  }
}
.brand__roll { display: flex; flex-direction: column; }
.brand__roll > span { display: block; height: 1.1em; white-space: nowrap; }
html.motion .brand__roll { animation: brandroll 9s cubic-bezier(.7, 0, .2, 1) infinite; }
.brand:hover .brand__roll { animation-play-state: paused; }
@keyframes brandroll {
  0%, 28% { transform: translateY(0); }
  33%, 61% { transform: translateY(-1.1em); }
  66%, 94% { transform: translateY(-2.2em); }
  100% { transform: translateY(-3.3em); }
}
/* With the full menu folded away (720–1139 px) the header carries the main button; on phones the call bar does. */
.header__cta { display: none !important; }

.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.nav { display: none; }
.nav[data-open="true"] {
  display: block; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
  padding: 8px var(--gutter) 20px;
}
.nav__list { list-style: none; margin: 0; padding: 0; }
.nav__list a {
  display: block; padding: 14px 4px; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font-weight: 650; font-size: 1.05rem;
}
.nav__list a[aria-current="page"] { color: var(--accent); }
.nav__cta { margin-top: 16px; }
.nav__cta a { border: 0; }
.nav__list .nav__cta a.btn { display: flex; padding: .8em 1.3em; color: #fff; }
.nav__list .nav__cta a.btn[aria-current="page"] { color: #fff; background: var(--accent-dark); }

/* The header shows the main button from 720 px; the full menu from 1140 px (D98: "Services & pricing" needs the room). No phone (D100). */
@media (min-width: 720px) and (max-width: 1139px) {
  .header__cta { display: inline-flex !important; order: 2; margin-left: auto; min-height: 44px; padding: .6em 1em; font-size: .95rem; }
  .nav-toggle { order: 3; margin-left: 4px; }
}
@media (min-width: 1140px) {
  .nav-toggle { display: none; }
  .nav, .nav[data-open="true"] {
    display: block; position: static; background: none; border: 0; box-shadow: none; padding: 0;
    margin-left: auto;
  }
  .nav__list { display: flex; align-items: center; gap: 4px; }
  .nav__list a { border: 0; padding: 8px 12px; font-size: .97rem; border-radius: 8px; color: var(--body); white-space: nowrap; }
  .nav__list a:hover { color: var(--ink); background: var(--surface-2); }
  .nav__list a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
  .nav__cta { margin: 0 0 0 10px; }
  .nav__list .nav__cta a.btn { min-height: 42px; padding: .6em 1em; font-size: .95rem; color: #fff; }
  .nav__list .nav__cta a.btn:hover, .nav__list .nav__cta a.btn[aria-current="page"] { background: var(--accent-dark); color: #fff; }
}

/* -------------------------------------------------------------------------- blueprint grid */
.blueprint {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}
.blueprint--fade { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }

/* -------------------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 8vw, 104px); }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__inner { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 1020px) { .hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6.2fr); } }
.hero__visual { position: relative; }
.hero h1 { margin-bottom: .35em; }
.hero__tag { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.25; color: var(--ink); margin-bottom: .9rem; }
.hero__lede { max-width: 34em; }
.hero__note { margin-top: 1.5rem; font-size: .95rem; color: var(--muted); }
.hero__note a { font-weight: 650; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.facts li {
  display: inline-flex; align-items: center; gap: .5em;
  font: 600 .78rem/1.2 var(--font-mono); letter-spacing: .02em; color: var(--body);
}
.facts li::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2 6 9.5l4.6-5' fill='none' stroke='%231A56DB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }

/* -------------------------------------------------------------------------- the browser frame */
.frame {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  isolation: isolate;
}
.frame__bar {
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(#FBFCFE, #F3F5FA);
}
.frame__dots { display: flex; gap: 6px; flex: none; }
.frame__dots i { width: 10px; height: 10px; border-radius: 50%; background: #D5DBE6; }
.frame__url {
  flex: 1; min-width: 0; height: 28px; display: flex; align-items: center; gap: 6px;
  padding: 0 12px; border-radius: 8px; background: #fff; border: 1px solid var(--line);
  font: 500 .78rem/1 var(--font-mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.frame__url svg { width: 12px; height: 12px; flex: none; color: var(--good); }
.frame__tag {
  flex: none; font: 700 .66rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--violet); background: #F3ECF8; border-radius: 6px; padding: 6px 8px;
}
.frame__view { position: relative; overflow: hidden; background: #fff; }
.frame__view--hero { aspect-ratio: 16 / 11; }
@media (max-width: 600px) { .frame__view--hero { aspect-ratio: 4 / 4.4; } }

/* The stage: a preview drawn at its design width and scaled to fit (preview.js sets the scale). */
.stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

/* Chips under the hero frame */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; align-items: center; }
.chips__label { font: 600 .72rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: .45em; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface);
  font: 650 .9rem/1 var(--font); color: var(--ink); cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip--go { background: var(--accent-tint); border-color: transparent; color: var(--accent-dark); text-decoration: none; }
.chip--go:hover { border-color: var(--accent); color: var(--accent-dark); text-decoration: none; }

/* The hand that builds the hero preview */
.hand {
  position: absolute; z-index: 5; pointer-events: none;
  width: 78px; left: 0; top: 0;
  transform-origin: 34% 3.6%;
  filter: drop-shadow(0 18px 18px rgba(14, 26, 48, .18));
  display: none;
}
html.motion .hand { display: block; visibility: hidden; opacity: 0; }   /* D104: shown by motion.js once it's turned and placed (it was upside down for a moment) */
.hand svg { display: block; width: 100%; height: auto; overflow: visible; }   /* inline since D104 (see index.html) */
@media (min-width: 760px) { .hand { width: 110px; } }   /* D98: a shorter arm, the glove kept readable */

/* -------------------------------------------------------------------------- cards */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(22px, 2.6vw, 30px); box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }
.card--lift { transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card__num {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 10px; background: var(--accent-tint); color: var(--accent-dark);
  font: 700 .85rem/1 var(--font-mono); margin-bottom: 18px;
}
.card__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); margin-bottom: 18px; }
.card__icon svg { width: 22px; height: 22px; }
.card__how { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-strong); font: 500 .82rem/1.5 var(--font-mono); color: var(--muted); }
.card__how b { color: var(--ink); font-weight: 650; }

/* -------------------------------------------------------------------------- the free-preview steps */
.how3 { counter-reset: how; display: grid; gap: 20px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .how3 { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.how3__step { position: relative; padding: 28px 28px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
@media (min-width: 900px) {
  .how3__step { border-radius: 0; margin-left: -1px; }
  .how3__step:first-child { border-radius: var(--r) 0 0 var(--r); margin-left: 0; }
  .how3__step:last-child { border-radius: 0 var(--r) var(--r) 0; }
}
.how3__step::before {
  counter-increment: how; content: "0" counter(how);
  display: block; font: 700 .8rem/1 var(--font-mono); letter-spacing: .1em; color: var(--accent); margin-bottom: 22px;
}
.how3__step h3 { font-size: 1.3rem; }
.how3__step p { margin: 0; }
.how3__time { position: absolute; top: 26px; right: 26px; font: 600 .72rem/1 var(--font-mono); color: var(--muted); letter-spacing: .04em; }

/* -------------------------------------------------------------------------- anatomy: the exploded site */
.anatomy { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1020px) { .anatomy { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; } }
.stack {
  position: relative; height: clamp(360px, 52vw, 560px);
  perspective: 1600px; perspective-origin: 50% 30%;
}
.stack__inner {
  position: absolute; left: 50%; top: 52%; width: min(420px, 74%); aspect-ratio: 4 / 3;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-38deg);
}
.layer {
  position: absolute; inset: 0; border-radius: 16px;
  border: 1px solid rgba(14, 26, 48, .14);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 20px 40px -20px rgba(14, 26, 48, .35);
  transform: translateZ(calc(var(--i) * 70px));
  overflow: hidden;
}
.layer:nth-child(1) { --i: 0; } .layer:nth-child(2) { --i: 1; } .layer:nth-child(3) { --i: 2; } .layer:nth-child(4) { --i: 3; } .layer:nth-child(5) { --i: 4; }
.layer__name {
  position: absolute; left: 12px; top: 10px;
  font: 700 .62rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
/* What each layer draws, in CSS only */
.layer--structure { background: #fff; }
.layer--structure::after {
  content: ""; position: absolute; inset: 28px 16px 16px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 10px);
  border: 1.5px dashed var(--line-strong); border-radius: 8px;
  box-shadow: inset 0 46px 0 -44px var(--line-strong);
}
.layer--words::after {
  content: ""; position: absolute; left: 20px; right: 40%; top: 40px; height: 80px;
  background: repeating-linear-gradient(var(--ink) 0 10px, transparent 10px 20px);
  opacity: .78; border-radius: 3px;
}
.layer--words::before {
  content: ""; position: absolute; left: 20px; right: 20px; top: 140px; height: 60px;
  background: repeating-linear-gradient(var(--line-strong) 0 6px, transparent 6px 14px);
}
.layer--look { background: var(--grad); border-color: transparent; }
.layer--look .layer__name { color: rgba(255,255,255,.85); }
.layer--look::after {
  content: ""; position: absolute; right: 18px; bottom: 18px; width: 46%; height: 42%;
  border-radius: 10px; background: rgba(255,255,255,.22); box-shadow: -100px -30px 0 -16px rgba(255,201,74,.95);
}
.layer--engine { background: var(--navy); border-color: var(--navy-deep); }
.layer--engine .layer__name { color: var(--on-dark-muted); }
.layer--engine::after {
  content: ""; position: absolute; left: 20px; right: 20px; top: 40px; bottom: 20px;
  background:
    radial-gradient(circle at 22% 50%, transparent 30px, rgba(255,255,255,.75) 31px 34px, transparent 35px),
    linear-gradient(90deg, transparent 45%, rgba(255,255,255,.25) 45% 46%, transparent 46%),
    repeating-linear-gradient(rgba(255,255,255,.16) 0 2px, transparent 2px 16px);
}
.layer--app { background: #fff; }
.layer--app::after {
  content: ""; position: absolute; left: 16px; right: 16px; top: 34px; bottom: 16px;
  background:
    linear-gradient(var(--accent-tint), var(--accent-tint)) 0 0 / 100% 22px no-repeat,
    repeating-linear-gradient(var(--line) 0 1px, transparent 1px 22px);
  border: 1px solid var(--line); border-radius: 8px;
}
.stack__badge {
  position: absolute; z-index: 2; right: 4%; top: 6%;
  font: 700 .7rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; color: var(--muted);
}

.layers-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.layers-list li { display: grid; grid-template-columns: 48px 1fr auto; gap: 4px 14px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: start; }
.layers-list__n { font: 700 .8rem/1.9 var(--font-mono); color: var(--accent); }
.layers-list h3 { font-size: 1.12rem; margin: 0 0 .25em; }
.layers-list p { margin: 0; font-size: .98rem; }
.layers-list__tier {
  font: 700 .66rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: 6px 8px; border-radius: 6px; background: var(--surface-2); color: var(--body); margin-top: 4px;
}
.layers-list__tier--custom { background: #F3ECF8; color: var(--violet); }

/* -------------------------------------------------------------------------- real work (MBU) */
.work-hero { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1020px) { .work-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.phones { display: flex; gap: clamp(12px, 2vw, 24px); justify-content: center; align-items: flex-start; }
.phone { margin: 0; flex: 0 1 260px; }
.phone__screen {
  width: 100%; height: auto; border-radius: 28px;
  border: 8px solid var(--ink); background: var(--ink);
  box-shadow: var(--shadow-lg);
}
.phone figcaption { margin-top: 12px; text-align: center; font: 600 .74rem/1.4 var(--font-mono); color: var(--muted); letter-spacing: .02em; }
.phones--pair .phone:nth-child(2) { margin-top: 48px; }
.phones--trio .phone { flex-basis: 220px; }
.phones--trio .phone:nth-child(2) { margin-top: 56px; }
@media (max-width: 560px) {
  .phones--trio .phone:nth-child(3) { display: none; }
}
.outcomes { display: grid; gap: 14px; }
@media (min-width: 760px) { .outcomes { grid-template-columns: 1fr 1fr; } }
.outcomes--one { grid-template-columns: 1fr !important; }
.outcome { padding: 22px 22px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.outcome h3 { font-size: 1.1rem; margin-bottom: .35em; }
.outcome p { margin: 0; font-size: .97rem; }
.outcome .card__how { margin-top: 12px; padding-top: 12px; }

/* Ideas: "what could yours do?" */
.ideas { display: grid; gap: 14px; }
@media (min-width: 760px) { .ideas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ideas { grid-template-columns: repeat(3, 1fr); } }
.idea { display: flex; gap: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: inherit; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s; }
.idea:hover { color: inherit; border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.idea__icon { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; color: var(--ink); }
.idea__icon svg { width: 22px; height: 22px; }
.idea__who { display: block; font: 600 .72rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.idea h3 { font-size: 1.05rem; margin: 0 0 .3em; }
.idea p { margin: 0; font-size: .95rem; }

/* -------------------------------------------------------------------------- pricing */
.paytoggle {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.paytoggle button {
  min-height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font: 650 .93rem/1 var(--font); color: var(--body);
}
.paytoggle button:hover { color: var(--ink); background: var(--surface-2); }
.paytoggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.paynote { margin: 14px 0 0; font-size: .93rem; color: var(--muted); }
.paynote strong { color: var(--ink); }

.tiers { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 960px) { .tiers { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.tier {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 26px 26px; box-shadow: var(--shadow-sm);
}
.tier--featured { border: 2px solid var(--accent); box-shadow: 0 30px 60px -30px rgba(26, 86, 219, .45); }
.tier__flag {
  position: absolute; top: -13px; left: 24px;
  font: 700 .68rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent); color: #fff; padding: 7px 10px; border-radius: 6px;
}
.tier__name { font-size: 1.5rem; margin: 0 0 .2em; }
.tier__for { color: var(--body); font-size: .97rem; margin-bottom: 18px; min-height: 3em; }
.tier__price { margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tier__amount { font: 800 2.6rem/1 var(--font-head); color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tier__per { font: 600 .95rem/1 var(--font); color: var(--muted); }
.tier__was { font-weight: 600; color: var(--muted); text-decoration: line-through; }
.tier__then { min-height: 2.9em; margin: 6px 0 18px; font: 500 .84rem/1.45 var(--font-mono); color: var(--body); }
.tier__then b { color: var(--ink); }
.tier__list { flex: 1; }
.tier__cta { margin: 20px 0 0; }
/* D95: the step up to the next package, and what comes on top */
.tier__step { margin: 0 0 10px; font: 700 .72rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.tier__plus { margin: 0 0 8px; font-weight: 700; font-size: .93rem; color: var(--ink); }
.tier__care { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line-strong); font-size: .88rem; color: var(--muted); }
.custom-band { display: grid; gap: 18px; align-items: center; margin-top: 18px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); }
.custom-band h3 { margin: 4px 0 6px; font-size: 1.3rem; }
.custom-band p:last-child { margin: 0; color: var(--body); }
@media (min-width: 860px) { .custom-band { grid-template-columns: 1fr auto; } }

.ticks, .crosses { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li, .crosses li { position: relative; padding-left: 30px; margin-bottom: .6em; }
.ticks li::before, .crosses li::before {
  content: ""; position: absolute; left: 0; top: .28em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3 7.8 12 13 6.3' fill='none' stroke='%231A56DB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
}
.crosses li::before {
  background: #F4E9E8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 6l6 6M12 6l-6 6' fill='none' stroke='%23B3261E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat;
}
.tier .ticks li { font-size: .97rem; }

/* The payment schedule (services page) */
.schedule { margin-top: 28px; display: grid; gap: 18px; }
@media (min-width: 960px) { .schedule { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.sched-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.sched-card h3 { font-size: 1.15rem; }
.sched-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.sched-card .paytoggle { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.sched-card .paytoggle button { padding: 8px 10px; line-height: 1.2; font-size: .88rem; }
@media (max-width: 480px) { .sched-card .paytoggle { grid-template-columns: 1fr; } }
.sched-total { font: 800 2.4rem/1 var(--font-head); color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin: 6px 0 6px; }
.sched-sum { font-size: .95rem; color: var(--body); }
.sched-rows { list-style: none; padding: 0; margin: 16px 0 0; border-top: 1px solid var(--line); max-height: 360px; overflow: auto; }
.sched-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); font: 500 .9rem/1.3 var(--font-mono); color: var(--body); }
.sched-rows li b { color: var(--ink); font-variant-numeric: tabular-nums; }
.sched-rows li:first-child { color: var(--ink); }

/* -------------------------------------------------------------------------- the no-risk promises */
.promises { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 760px) { .promises { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .promises { grid-template-columns: repeat(3, 1fr); } }
.promise { background: var(--surface); padding: 28px 26px; }
.promise h3 { font-size: 1.15rem; display: flex; gap: 12px; align-items: flex-start; }
.promise h3 svg { flex: none; width: 24px; height: 24px; color: var(--accent); margin-top: 1px; }
.promise p { margin: 0; font-size: .97rem; }

/* -------------------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center;
  padding: 22px 2px; font: 700 1.1rem/1.35 var(--font-head); color: var(--ink); letter-spacing: -0.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M10 15h10M15 10v10' stroke='%230E1A30' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/30px no-repeat;
  transition: transform .25s var(--ease), background-color .2s;
}
.faq__item[open] summary::after { transform: rotate(45deg); background-color: var(--surface-2); }
.faq__item summary:hover { color: var(--accent-dark); }
.faq__answer { padding: 0 2px 22px; max-width: 46em; }
.faq__answer p:last-child { margin-bottom: 0; }
.faq__q { font: 600 .72rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 6px; }

/* -------------------------------------------------------------------------- the closing band */
.band {
  position: relative; overflow: hidden;
  background: var(--navy-deep); color: var(--on-dark-body);
  border-radius: clamp(20px, 3vw, 32px);
  padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px);
  display: grid; gap: 32px; align-items: center;
}
@media (min-width: 900px) { .band { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.band::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle at 80% 30%, #000, transparent 70%); mask-image: radial-gradient(circle at 80% 30%, #000, transparent 70%);
}
.band > * { position: relative; }
.band h2 { color: #fff; }
.band p { font-size: 1.15rem; }
.band .serif { color: #fff; }
.band .label { color: var(--on-dark-muted); }
.band__contact { margin: 18px 0 0; font-size: 1rem !important; color: var(--on-dark-muted); }
.band__contact a { color: #fff; }
/* The thumbs-up: the glove sits in the band's bottom corner, its sleeve runs off the bottom edge. */
.band { padding-bottom: 190px; }
.band__hand { position: absolute; right: 8%; top: calc(100% - 190px); width: 150px; transform: rotate(-8deg); }
@media (min-width: 900px) {
  .band { padding-bottom: clamp(40px, 6vw, 80px); }
  .band__hand { right: 9%; top: calc(100% - 280px); width: 220px; }
}
.cta-band { background: var(--navy-deep); color: var(--on-dark-body); border-radius: clamp(20px, 3vw, 32px); padding: clamp(36px, 5vw, 64px); }
.cta-band h2 { color: #fff; }

/* -------------------------------------------------------------------------- inner pages */
.page-head { padding: clamp(48px, 7vw, 96px) 0 clamp(36px, 5vw, 56px); }
.page-head h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); max-width: 16em; }
.page-head p { font-size: clamp(1.1rem, 1.6vw, 1.25rem); max-width: 40em; }
.prose { max-width: 46em; }
.side h2 { font-size: clamp(1.25rem, 2vw, 1.5rem); margin: 1.6em 0 .5em; }
.side h2.mt-6 { margin-top: 40px; }
.side .note h2 { margin-top: 0; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 1.8em; }
.prose h3 { margin-top: 1.5em; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .97rem; }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font: 700 .95rem/1.3 var(--font-head); color: var(--ink); background: var(--surface-2); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { color: var(--ink); font-weight: 600; }
.yes { color: var(--accent); font-weight: 800; }
.no { color: var(--muted); }

.split { display: grid; gap: 32px; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 64px; } }
.sticky-col { position: sticky; top: 100px; align-self: start; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { background: var(--surface); padding: 26px; counter-increment: step; }
.steps li::before { content: "0" counter(step); display: block; font: 700 .8rem/1 var(--font-mono); color: var(--accent); margin-bottom: 14px; letter-spacing: .1em; }
.steps h3 { font-size: 1.1rem; margin-bottom: .3em; }
.steps p { margin: 0; font-size: .97rem; }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 1px; background: var(--line-strong); }
.timeline > li { position: relative; padding: 0 0 36px 60px; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline__n {
  position: absolute; left: 0; top: 0; width: 35px; height: 35px; border-radius: 10px;
  display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-strong);
  font: 700 .8rem/1 var(--font-mono); color: var(--accent);
}
.timeline h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-bottom: .4em; }
.timeline__when { display: inline-block; font: 600 .72rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }

.note {
  border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--surface);
  border-radius: var(--r-sm); padding: 16px 18px; font-size: .97rem;
}
.note--sun { border-left-color: var(--sun); background: #FFFBEF; }

.glance { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.glance dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; }
.glance dt { font: 600 .74rem/1.7 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.glance dd { margin: 0; color: var(--ink); }

.placeholder {
  display: inline; background: #FFF4D6; color: #6B4A00; border: 1px dashed #C99A2E;
  border-radius: 4px; padding: 0 .3em; font: 600 .85em/1.5 var(--font-mono);
}

/* Old components still used by the support, privacy and thank-you pages */
.proof { display: grid; gap: 18px; }
@media (min-width: 760px) { .proof { grid-template-columns: repeat(3, 1fr); } }
.proof__figure { display: block; font: 800 1.6rem/1.1 var(--font-head); color: var(--ink); }
.proof__label { margin: 6px 0 0; font-size: .95rem; }
.shot { margin: 0; }
.shot--empty { padding: 28px; border: 1.5px dashed var(--line-strong); border-radius: var(--r); background: var(--surface); }

/* -------------------------------------------------------------------------- forms */
.form { display: grid; gap: 22px; }
.card:has(> .form) { align-self: start; }   /* a stepped form shouldn't stretch to the sidebar's height (D98) */
.form__screen { display: grid; gap: 22px; }
.form__progress { font: 600 .75rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.field { display: grid; gap: 6px; }
.field label, .fieldset__legend { font-weight: 650; color: var(--ink); }
.field__hint { font-size: .9rem; color: var(--muted); }
.field__error { color: var(--error); font-weight: 650; font-size: .93rem; }
.field__error:empty { display: none; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: 400 1rem/1.4 var(--font); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); }
[aria-invalid="true"] { border-color: var(--error) !important; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.fieldset__legend { padding: 0; margin-bottom: 4px; }
.options { display: grid; gap: 8px; }
@media (min-width: 560px) { .options { grid-template-columns: 1fr 1fr; } }
.option {
  display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.option:hover { border-color: var(--ink); }
.option input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 0; }
.option:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.option:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.form__status { padding: 16px 18px; border-radius: 10px; font-size: .97rem; }
.form__status--error { background: var(--error-tint); color: #6E1712; border: 1px solid #F1B8B3; }
.form__status:focus { outline: 3px solid var(--error); outline-offset: 2px; }
.form__note { font-size: .93rem; color: var(--muted); margin: 0; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------------------- footer */
.footer { background: var(--navy-deep); color: var(--on-dark-muted); padding: 72px 0 32px; margin-top: 0; font-size: .97rem; }
.footer a { color: var(--on-dark-body); }
.footer a:hover { color: #fff; }
.footer h2 { color: #fff; font: 700 .78rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 16px; }
.footer__grid { display: grid; gap: 36px; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1100px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } }
.footer__logo { margin-bottom: 16px; }
.footer__list { list-style: none; padding: 0; margin: 0; }
.footer__list li { margin-bottom: 8px; }
.footer__bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--on-dark-rule); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .88rem; }
.footer .placeholder { color: #6B4A00; }

/* "This page", measured in the visitor's own browser (spec.js). */
.spec { list-style: none; padding: 0; margin: 0; font: 500 .82rem/1.5 var(--font-mono); }
.spec li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--on-dark-rule); }
.spec b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.spec__note { font-size: .8rem; margin-top: 10px; }

/* -------------------------------------------------------------------------- call bar (phones) */
/* D104 (12 Oct): in the site's own paper and glass rather than a dark slab, and (tnm.js part 10) only once the page's
   first buttons have scrolled away, never over a form, the closing band or the footer. Without JavaScript it's always on. */
.callbar {
  position: fixed; z-index: 40; left: 12px; right: 12px; bottom: 12px;
  display: flex; gap: 8px; padding: 6px;
  background: rgba(247, 248, 251, .86); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 14px 34px -14px rgba(14, 26, 48, .35);
}
.callbar a {
  flex: 1; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: .4em;
  border-radius: 10px; font: 700 .95rem/1 var(--font); text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
}
.callbar a.callbar__primary { background: var(--accent); border-color: var(--accent); color: #fff; flex: 1.3; }
.callbar-auto .callbar {
  transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, visibility 0s linear .35s;
}
.callbar-auto .callbar.is-shown { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
@media (min-width: 760px) { .callbar { display: none; } }
body.has-callbar { padding-bottom: 84px; }
body.has-callbar.callbar-auto { padding-bottom: 0; }
@media (min-width: 760px) { body.has-callbar { padding-bottom: 0; } }

/* -------------------------------------------------------------------------- motion (opt-in) */
/* (Since D103 nothing is hidden by CSS for the reveals: motion.js hides only what's still below the fold, after load.) */
/* (reveal.js's CSS transitions went in D102: every page reveals with GSAP now, motion.js) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* -------------------------------------------------------------------------- utilities */
.mb-0 { margin-bottom: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 18px !important; }
.mt-5 { margin-top: 28px !important; }
.mt-6 { margin-top: 40px !important; }
.mt-7 { margin-top: 56px !important; }
.maxw-sm { max-width: 34em; }
.hide-sm { display: none; }
@media (min-width: 760px) { .hide-sm { display: initial; } }

/* ================================================================== the design brief (/brief, D94) */
@media (min-width: 960px) { .brief-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
/* D103: as many columns as fit at a readable width, so short answers never wrap into two lines */
@media (min-width: 560px) { .options--3 { grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); } }
.brief .field input + input { margin-top: 8px; }
.brief__from { margin: 0; }
.brief-steps { padding-left: 1.2em; }
.brief-steps li { margin-bottom: .8em; }

/* ================================================================== the app, shown (D94): self-scrolling phones */
.sec-head--wide { max-width: 880px; }
.appshow { display: grid; gap: clamp(18px, 2.4vw, 28px); grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
@media (max-width: 1099px) { .appshow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 619px) {
  .appshow { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 4px 4px 12px; margin: 0 -4px;
    scrollbar-width: thin; overscroll-behavior-x: contain; }
  .appshow__item { flex: 0 0 82%; scroll-snap-align: center; }
}
.appshow__item { margin: 0; }
.pscroll {
  position: relative; width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 34px;
  border: 7px solid var(--navy-deep); background: #fff; box-shadow: var(--shadow-lg); cursor: pointer;
}
.pscroll img { display: block; width: 100%; height: auto; will-change: transform; }
.pscroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pscroll.is-paused::before { content: "Paused"; position: absolute; right: 10px; bottom: 10px; z-index: 1; padding: 5px 8px;
  border-radius: 6px; background: rgba(14, 26, 48, .78); color: #fff; font: 700 .66rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
/* Without motion (reduced motion, or no JavaScript) the phone simply scrolls by hand. */
html:not(.motion) .pscroll { overflow-y: auto; overscroll-behavior: contain; cursor: auto; }
.appshow__item figcaption { margin-top: 16px; }
.appshow__item h3 { font-size: 1.12rem; margin: 0 0 .35em; }
.appshow__item p { font-size: .95rem; margin: 0 0 .5em; color: var(--body); }
.appshow__you { padding-top: .5em; border-top: 1px dashed var(--line-strong); }
.appshow__you b { color: var(--ink); }
.appshow__foot { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; margin-top: clamp(22px, 3vw, 34px); }
/* Four hero facts (D94): two by two from tablet width, so none sits alone on a line */
@media (min-width: 560px) { .hero .facts { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 28px; } }

/* ================================================================== /work: the app, problem by problem (D94) */
.caserow { display: grid; gap: clamp(20px, 4vw, 56px); align-items: center; margin-bottom: clamp(36px, 6vw, 72px); }
@media (min-width: 860px) {
  .caserow { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .caserow--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .caserow--flip .caserow__phone { order: 2; }
}
.caserow__phone { margin: 0; max-width: 300px; width: 100%; justify-self: center; }
.caserow__text h3 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin: 0 0 .6em; }
.casefacts { margin: 0; display: grid; gap: 6px 0; }
.casefacts dt { font: 700 .72rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-top: 12px; }
.casefacts dt:first-child { margin-top: 0; }
.casefacts dd { margin: 0; color: var(--body); font-size: 1.02rem; }

/* ================================================================== the videos (D72, D94): tap to play, self-hosted */
.videoblock { display: grid; gap: clamp(18px, 3vw, 40px); align-items: center; }
@media (min-width: 960px) { .videoblock { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); } }
.video { margin: 0; }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: var(--navy-deep); box-shadow: var(--shadow-lg); }
.video figcaption { margin-top: 10px; font: 600 .74rem/1.4 var(--font-mono); color: var(--muted); letter-spacing: .02em; }

/* /build (D94): the builder is laid out from the first paint when JavaScript is on (pre.js sets html.js), so the footer
   doesn't jump when it fills in; without JavaScript it stays hidden and the <noscript> note shows instead. */
html:not(.js) [data-builder] { display: none; }


/* ================================================================== home: services, the video, our work (D98) */
.custom-band--software { border: 2px solid var(--violet); background: linear-gradient(180deg, #FBF8FD, var(--surface)); }
.custom-band--software .label { color: var(--violet); }
.workteaser { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .workteaser { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.workteaser h2 { max-width: 14em; }
/* Two phones, still, the shape of real phones (9 : 19.5), the second set back */
.devices { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(14px, 3vw, 28px); flex-wrap: wrap; }
.device {
  margin: 0; flex: 0 0 auto; width: clamp(170px, 42%, 260px); aspect-ratio: 9 / 19.5; overflow: hidden;
  border-radius: 32px; border: 7px solid var(--navy-deep); background: #fff; box-shadow: var(--shadow-lg);
}
.device img { display: block; width: 100%; height: auto; }
.device--back { margin-top: 56px; }
.devices__note { flex-basis: 100%; margin: 6px 0 0; text-align: center; font: 600 .74rem/1.4 var(--font-mono); color: var(--muted); letter-spacing: .02em; }

/* /work: the DMS, module by module (D98) */
.modules { display: grid; gap: 14px; }
@media (min-width: 680px) { .modules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .modules { grid-template-columns: repeat(3, 1fr); } }
.module { padding: 24px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.module h3 { font-size: 1.12rem; margin: 14px 0 .35em; }
.module p { margin: 0; font-size: .96rem; }
.module__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); }
.module__icon svg { width: 22px; height: 22px; }

/* ================================================================== the Custom-level motion layer (D102, 11 Oct 2026)
   Everything here is decoration on top of a complete page: it only applies under html.motion (pre.js: no reduced-motion
   preference) and, for pointer effects, only with a fine pointer. motion.js drives it with GSAP, ScrollTrigger and
   SplitText, self-hosted. Without motion the page is the same page, still. */

/* Scroll progress: a hairline under the header */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--violet)); transform: scaleX(0); transform-origin: 0 50%; }
html:not(.motion) .progress { display: none; }

/* The header steps out of the way on the way down, back on the way up */
.header { transition: border-color .2s, background-color .2s, transform .35s var(--ease); }
.header.is-hidden { transform: translateY(-101%); }

/* The yellow highlight is drawn in like a marker, left to right */
html.motion .hl { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 1.1s cubic-bezier(.65, 0, .25, 1); }
html.motion .hl.is-lit { background-size: 100% 100%; }

/* A split heading's lines rise inside their own masks (only headings still below the fold, D103) */
.split-line { padding-bottom: .06em; margin-bottom: -.06em; }

/* The blueprint wakes up under the pointer: a brighter copy of the grid, seen through a soft circle */
.page-head { position: relative; isolation: isolate; }
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent);
}
.hero__bg::after, .page-head::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s;
  background-image: linear-gradient(rgba(26, 86, 219, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 86, 219, .22) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), #000, transparent 70%);
  mask-image: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), #000, transparent 70%);
}
.hero__bg::after { z-index: 0; }
html.motion .is-spot::after, html.motion .is-spot .hero__bg::after { opacity: 1; }

/* Cards that tilt towards the pointer, with a soft light on them */
@media (hover: hover) and (pointer: fine) {
  html.motion [data-tilt] { transform-style: preserve-3d; will-change: transform; }
  html.motion [data-tilt]::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, .55), transparent 45%);
    mix-blend-mode: soft-light;
  }
  html.motion [data-tilt].is-tilting::after { opacity: 1; }
}
.tier, .idea, .module, .outcome, .glance, .custom-band { position: relative; }

/* The hero's example site lands on the page in 3D, then leans gently towards the pointer */
.hero__visual { perspective: 1400px; }
html.motion .hero__visual .frame { transform-origin: 50% 60%; }

/* The video opens like a window as it scrolls in */
html.motion .section--video .video video { will-change: clip-path; }

/* "Our work": two phones in 3D that turn to face you as you scroll */
.devices { perspective: 1200px; }
html.motion .device { transform-style: preserve-3d; will-change: transform; }

/* The free design's three steps: a line runs through them as you scroll */
.how3 { position: relative; }
@media (min-width: 900px) {
  html.motion .how3::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; z-index: 2;
    background: linear-gradient(90deg, var(--accent), var(--violet)); transform: scaleX(var(--run, 0)); transform-origin: 0 50%;
    border-radius: var(--r) var(--r) 0 0; }
  .how3__step.is-on::before { color: var(--violet); }
}

/* /process: the timeline draws itself down the page */
.timeline::after { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; margin-left: -.5px;
  background: linear-gradient(var(--accent), var(--violet)); transform: scaleY(var(--fill, 0)); transform-origin: 50% 0; }
html:not(.motion) .timeline::after { display: none; }
.timeline__n { transition: background-color .3s, color .3s, border-color .3s; z-index: 1; }
.timeline > li.is-reached .timeline__n { background: var(--accent); border-color: var(--accent); color: #fff; }

/* FAQ answers open smoothly */
.faq__answer { overflow: hidden; }

/* The dark bands stand on a 3D blueprint floor: WebGL where it can (blueprint3d.js), this CSS floor where it can't */
.band__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%); }
.band__floor::before { content: ""; position: absolute; left: -60%; right: -60%; top: -40%; bottom: -40%;
  background-image: linear-gradient(rgba(122, 162, 255, .28) 1px, transparent 1px), linear-gradient(90deg, rgba(122, 162, 255, .28) 1px, transparent 1px);
  background-size: 48px 48px; transform: perspective(420px) rotateX(64deg); transform-origin: 50% 100%; }
html.motion .band__floor::before { animation: floor 3.2s linear infinite; }
@keyframes floor { to { transform: perspective(420px) rotateX(64deg) translateY(48px); } }
.band__floor.is-webgl::before { display: none; }
.band__floor canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.band > .band__floor { position: absolute; }

/* /services: the five layers, taken apart in 3D (moved from the home page in D98, back in D102) */
.anatomy--services { margin-top: clamp(48px, 7vw, 96px); }

@media (prefers-reduced-motion: reduce) {
  .header.is-hidden { transform: none; }
}

/* GSAP drives these transforms frame by frame: a CSS transition on transform would make them lag behind */
html.motion [data-tilt], html.motion [data-magnet], html.motion .hero .btn { transition-property: border-color, box-shadow, background-color, color !important; }

/* ================================================================== the enquiry forms, smoothed (D103) */
/* What JavaScript reveals is laid out from the first paint when JavaScript is on (pre.js sets html.js), so nothing
   shifts when it appears (Lighthouse found 0.014 on /brief and 0.023 on /services from these). */
html.js .form__progress[data-js-only][hidden] { display: block !important; }
/* …and a stepped form shows only its first step from the first paint (tnm.js marks it .is-stepped once site.js has set the steps up) */
html.js form:not(.is-stepped) .form__screen ~ .form__screen { display: none !important; }
html.js .form__steps[data-js-only][hidden] { display: block !important; }
html.js [data-paytoggle][hidden] { display: inline-flex !important; }

/* A progress bar across the top of a stepped form */
.form__steps { height: 4px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin-bottom: -6px; }
.form__steps span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--violet)); border-radius: inherit;
  transform: scaleX(var(--step, .2)); transform-origin: 0 50%; transition: transform .5s var(--ease); }

/* Options with a line of description (the brief's looks) */
.option--sub { align-items: flex-start; }
.option--sub input { margin-top: 3px; }
.option--sub span { display: block; font-weight: 650; color: var(--ink); }
.option--sub small { display: block; margin-top: 2px; font-weight: 400; font-size: .86rem; line-height: 1.35; color: var(--muted); }

/* Sites they like and don't: an address, then its reason */
.pairs { gap: 12px; }
.pair { display: grid; gap: 10px; }
.pair + .pair { padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.pair__why { padding-left: 14px; border-left: 2px solid var(--accent-tint); }
html.motion .pair__why:not([hidden]), html.motion .pair[data-extra]:not([hidden]) { animation: pairIn .45s var(--ease) both; }
@keyframes pairIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pairs__add { justify-self: start; border: 0; background: none; padding: 6px 0; cursor: pointer; font: 700 .95rem/1.2 var(--font); color: var(--accent); }
.pairs__add:hover { text-decoration: underline; }

/* Check your brief */
.brief-review { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 0 16px; }
.brief-review summary { cursor: pointer; padding: 14px 0; font-weight: 700; color: var(--ink); }
.brief-review[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.brief-review__list { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 6px 14px; margin: 0 0 12px; font-size: .93rem; }
.brief-review__list dt { color: var(--muted); font-weight: 600; }
.brief-review__list dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.brief-review > p { padding-bottom: 14px; }
@media (max-width: 520px) { .brief-review__list { grid-template-columns: 1fr; } .brief-review__list dd { margin-bottom: 6px; } }

/* The thank-you page's next steps */
.next-steps { list-style: none; counter-reset: ns; margin: 28px 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.next-steps li { counter-increment: ns; background: var(--surface); padding: 18px 20px 18px 64px; position: relative; }
.next-steps li::before { content: "0" counter(ns); position: absolute; left: 20px; top: 18px; font: 700 .8rem/1.6 var(--font-mono); color: var(--accent); }
.next-steps b { display: block; color: var(--ink); }

/* /support before the platform is switched on (D103): the form's address is still the placeholder, so CSS shows the
   "not switched on yet" message from the first paint instead of drawing the form and swapping it (Lighthouse: 0.42 of
   layout shift). support.js still does the same thing; with the platform on, its address is real and this never applies. */
html.js [data-support-form][action^="[PLATFORM]"] { display: none !important; }
html.js .form__status[data-not-live][hidden]:has(~ [data-support-form][action^="[PLATFORM]"]) { display: block !important; }

/* D104 (12 Oct): /work's Auto Trader integration, as a feature band beside the modules (Spidersnet's approach: named in
   text; the official badge only under Auto Trader's own partner terms) */
.integration { margin-top: clamp(28px, 4vw, 40px); border: 2px solid var(--accent); background: linear-gradient(180deg, #F6F9FF, var(--surface)); }
.integration .label { color: var(--accent-dark); }
.integration p:last-child { margin: 0; }
.integration__list { margin: 0; }
.integration__list li { font-size: .97rem; }
@media (min-width: 860px) { .integration { grid-template-columns: 1.15fr 1fr; align-items: start; gap: 32px; } }

/* D104 (12 Oct): the mono labels at one size everywhere. ".sec-head p", ".page-head p" and the band's paragraph rule were
   outranking .label, so a section's label came out at 18px in some sections and 12px in others (home 01 vs 03). */
.sec-head .label, .page-head .label, .band .label { font-size: .75rem; }
.sec-head .label, .page-head .label { color: var(--muted); }