/* ==========================================================================
   Sarran AI Solutions LLC
   Dark, enterprise-futurist. The ground is a blue-black rather than a neutral
   near-black, so every surface carries the hue. Red stays reserved exclusively
   for booking CTAs, per the brand rule.

   Palette is defined once, here. Every colour below is a token reference —
   swapping the hue is an edit to this block alone.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* Ground: blue-black, deepening through raised surfaces */
  --void:      #05101F;
  --surface:   #0A1A2E;
  --panel:     #12294A;   /* cards on dark */
  --line:      #1B3557;
  --line-input:#366AAE;   /* control borders: 3.19:1 on --surface (WCAG 1.4.11) */
  --line-soft: #102240;

  /* Accent: bright azure, for accents on dark surfaces */
  --accent:      #3B9EFF;
  --accent-lift: #7CC4FF;
  --accent-dim:  rgba(59, 158, 255, .14);

  /* Ink */
  --ink:       #EDF3FA;
  --muted:     #93A9C4;
  --faint:     #6C84A9;   /* AA on both grounds: 4.59 surface, 5.01 void */

  /* Action — brand rule: red is the single deliberate action color */
  --red:       #D62828;
  /* Hover/active state for red buttons. Darker than --red, not lighter: white
     button text on the old lighter hover measured 4.27:1 (needs 4.5). Darker
     moves the wrong direction for a "lift" but the right direction for
     contrast — name kept for the smaller diff. 5.46:1 white text on this;
     3.20:1 as the invalid-field border on --surface (WCAG 1.4.11). */
  --red-lift:  #CB2626;
  /* Error copy only — .field__err and .bform__status[data-state="error"] —
     both painted on --void. --red-lift there measured 4.47:1 (needs 4.5);
     this is tuned to 4.59:1. Do not reuse for a background: too light for
     white text to sit on. */
  --red-text:  #E33F3F;

  --display: "Archivo", "Segoe UI", sans-serif;
  --body:    "Public Sans", Calibri, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --shell: 1200px;
  --pad:   1.5rem;
  --r:     4px;
  --r-lg:  10px;

  --bar:   86px;
}

/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: -.015em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
/* must outrank any component `display` rule (e.g. .drawer) */
[hidden] { display: none !important; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent-lift);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--void);
  padding: .75rem 1rem; font-weight: 600;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* --- Shared type devices ------------------------------------------------- */
.tag {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
}

.lede { max-width: 42rem; margin-bottom: 3.5rem; }
.lede__title { font-size: clamp(1.85rem, 4vw, 3rem); }
.lede__sub { color: var(--muted); margin-top: 1rem; font-size: 1.05rem; }

/* --- Buttons ------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 100%;
  font-size: .9rem;
  letter-spacing: .01em;
  padding: .7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  min-height: 44px;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.button--lg { padding: .95rem 1.6rem; font-size: 1rem; }

/* Red — booking only */
.button--book { background: var(--red); color: #fff; }
.button--book:hover { background: var(--red-lift); }
.button--book:active { background: #B91F1F; transform: translateY(1px); }

.button--quiet { border-color: var(--line-input); color: var(--ink); }
.button--quiet:hover { border-color: var(--accent); color: var(--accent); }
.button--quiet:active { background: var(--accent-dim); transform: translateY(1px); }
.button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  filter: saturate(.55);
  transform: none;
}
.button--book:disabled,
.button--book[aria-disabled="true"] { background: #8F3038; color: #fff; }
.button--quiet:disabled,
.button--quiet[aria-disabled="true"] { border-color: var(--line-input); color: var(--muted); }

/* --- Masthead ------------------------------------------------------------ */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(5, 16, 31, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: transform .3s ease;
}
.masthead[data-tucked="true"] { transform: translateY(-100%); }

.masthead__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: var(--bar);
}

/* Horizontal robot logo. The transparent artwork includes the complete
   wordmark, so it remains a single, scalable brand asset at every breakpoint. */
.brandmark { display: inline-flex; align-items: center; flex: 0 0 auto; }

.brandmark__logo {
  width: clamp(12.5rem, 18.5vw, 14.5rem);
  height: auto;
  flex: 0 0 auto;
}

.brandmark--lg .brandmark__logo { width: min(100%, 17.5rem); }

.masthead__nav {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
  font-size: .92rem;
  color: var(--muted);
}
.masthead__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  transition: color .18s ease;
}
.masthead__nav a:hover { color: var(--accent); }
.masthead__nav a:active { color: var(--accent-lift); }

.masthead__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  padding: .65rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.masthead__toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); }

.drawer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem var(--pad) 1.75rem;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.drawer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.drawer a:active { color: var(--accent-lift); }
.drawer .button { color: #fff; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  padding-top: calc(var(--bar) + 5rem);
  padding-bottom: 5.5rem;
  position: relative;
  overflow: hidden;
}
/* single ambient bloom, no cursor tracking */
.hero::before {
  content: "";
  position: absolute;
  top: -22%; right: -12%;
  width: 46rem; height: 46rem;
  background: radial-gradient(circle, rgba(59, 158, 255, .13), transparent 62%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero__title { font-size: clamp(2.4rem, 5.4vw, 4.1rem); }

.hero__lede {
  color: var(--muted);
  font-size: 1.12rem;
  margin-top: 1.5rem;
  max-width: 32rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

.hero__note {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--faint);
  margin-top: 1.5rem;
}

.assessment-card {
  margin: 0;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: linear-gradient(160deg, var(--panel), var(--surface));
  border: 1px solid var(--line-input);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(59, 158, 255, .08);
}
.assessment-card__eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent-lift);
  margin-bottom: .75rem;
}
.assessment-card h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); }
.assessment-card > p:not(.assessment-card__eyebrow, .assessment-card__price, .assessment-card__fine) { color: var(--muted); }
.assessment-card__price { margin: 1.25rem 0 .85rem; color: var(--muted); }
.assessment-card__price span { color: var(--ink); font-family: var(--display); font-size: 2.8rem; font-weight: 800; margin-right: .45rem; }
.assessment-card ul { display: grid; gap: .65rem; margin: 1.5rem 0; }
.assessment-card li { position: relative; padding-left: 1.35rem; color: var(--ink); }
.assessment-card li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-lift); font-weight: 700; }
.assessment-card .button { width: 100%; }
.assessment-card__fine { margin-top: .8rem; color: var(--faint); font-size: .78rem; text-align: center; }

/* --- Signature: the call sheet ------------------------------------------- */
.callsheet {
  margin: 0;
  background: linear-gradient(180deg, var(--surface), #071528);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(59, 158, 255, .06);
  overflow: hidden;
}

.callsheet__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.callsheet__pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(59, 158, 255, .55);
  animation: pip 2.4s ease-out infinite;
}
@keyframes pip {
  0%   { box-shadow: 0 0 0 0 rgba(59, 158, 255, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(59, 158, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 158, 255, 0); }
}
.callsheet__clock { margin-left: auto; color: var(--accent); }

.callsheet__log { padding: 1.1rem 1.1rem .5rem; display: grid; gap: .9rem; }

.line {
  display: grid;
  grid-template-columns: 3.2rem 4.2rem 1fr;
  gap: .75rem;
  align-items: baseline;
  font-size: .9rem;
}
/* JS adds .is-typed progressively; without JS every line is visible. */
.line[data-armed] { opacity: 0; transform: translateY(6px); }
.line.is-typed { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease; }

.line__t { font-family: var(--mono); font-size: .72rem; color: var(--faint); }
.line__who {
  justify-self: start;   /* keeps the BOOKED chip tight to its label */
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.line__who--agent { color: var(--accent); }
/* The chip's own padding would indent its label 5.6px past the AGENT/CALLER
   labels above it. Pull the box left by exactly that padding so the text
   optically aligns down the column. */
.line__who--sys {
  color: var(--void);
  background: var(--accent);
  padding: .1rem .35rem;
  margin-left: -.35rem;
  border-radius: 2px;
}
.line__say { color: var(--muted); }

.line--done { padding-top: .9rem; border-top: 1px dashed var(--line); }
.line--done .line__say { color: var(--ink); font-weight: 600; }

.callsheet__foot {
  padding: .5rem 1.1rem 1.1rem;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--faint);
}

/* --- Pedigree strip ------------------------------------------------------ */
.pedigree {
  border-block: 1px solid var(--line-soft);
  background: var(--surface);
  padding-block: 2.25rem;
}
.pedigree__label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1rem;
}
.pedigree__list {
  display: flex;
  flex-wrap: wrap;
  /* Twelve names now, so the column gap has to give way on narrow screens
     or the strip runs to six rows. Wide stays at the original 2.75rem. */
  gap: .85rem clamp(1.5rem, 3.2vw, 2.75rem);
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: var(--ink);
  opacity: .82;
}
.pedigree__fine { margin-top: 1rem; font-size: .8rem; color: var(--faint); }

/* --- Case studies (results) ---------------------------------------------- */
/* The page's proof, between the pedigree strip and the assessment sample.
   Every value is derived from the tokens above; no new colour is introduced.

   Scannability: the three body paragraphs each carry a run-in label drawn with
   generated content ("The problem" / "What we built" / "Result") plus a left
   rule, so the three roles read at a glance without the prose. The labels are
   block-level and sit at the head of the paragraph they name, so where a
   screen reader announces generated content it lands as a short phrase ahead
   of that sentence — the same word, in the same order, a sighted reader sees.

   Result is the payload of every card: accent rule, tinted panel, display
   face. It outranks the title visually even though it sits below it.        */

.results {
  padding-block: 7rem;
  border-bottom: 1px solid var(--line-soft);
}

/* .shell already handles width and inline padding. This only carries the card
   padding token, so one value drives the card at every breakpoint. */
.results__inner { --case-pad: 2.25rem; }

/* .lede already sets the measure and a 3.5rem gap; only the gap changes here,
   because the grid below is dense and wants to start a little sooner. */
.results__lede { margin-bottom: 3rem; }

.results__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.case {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: var(--case-pad, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow-wrap: break-word;
  transition: border-color .25s ease;   /* neutralised by the reduced-motion block */
}
.case:hover { border-color: var(--line-input); }

/* Row alignment across a pair. Each card spans six parent rows and borrows
   them, so sector / title / problem / built / result land on the same
   baselines in both cards of a row — the result lines above all. Rows are
   assigned explicitly rather than auto-flowed, so the one card with a quote
   and the one with a note drop that element into row 6 and the other two
   simply leave row 6 empty: cards stay equal height and nothing looks
   lopsided. Where subgrid is unsupported this is skipped and the flex column
   above stands, losing only the cross-card alignment. */
@supports (grid-template-rows: subgrid) {
  .case {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: .85rem;   /* a subgrid inherits the parent gap unless it says otherwise */
  }
  .case__sector  { grid-row: 1; }
  .case__title   { grid-row: 2; }
  .case__problem { grid-row: 3; }
  .case__built   { grid-row: 4; }
  .case__result  { grid-row: 5; }
  .case__quote,
  .case__note    { grid-row: 6; }
  /* Only the result panel stretches to fill its shared track — matching panel
     heights are part of the payload reading as one line across the pair. The
     rules above it hug their own text instead of trailing past it. */
  .case__sector,
  .case__title,
  .case__problem,
  .case__built { align-self: start; }
}

/* Sector stays faint, not accent: inside a card the accent is spent on the
   result line alone. */
.case__sector {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}

.case__title { font-size: 1.25rem; }

/* the three scannable roles */
.case__problem,
.case__built,
.case__result {
  border-left: 2px solid var(--line);
  padding-left: 1.15rem;
  color: var(--muted);
  font-size: .95rem;
}
.case__problem { margin-top: .45rem; }

.case__problem::before,
.case__built::before,
.case__result::before {
  display: block;
  margin-bottom: .3rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.case__problem::before { content: "The problem"; }
.case__built::before   { content: "What we built"; }
.case__result::before  { content: "Result"; }

/* the payload */
.case__result {
  margin-top: .3rem;
  padding: 1rem 1.15rem;
  border-left-color: var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--accent-dim);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 108%;
  font-size: 1.08rem;
  line-height: 1.4;
}
.case__result::before { margin-bottom: .45rem; color: var(--accent); }

/* Card 1 only. Sits below a hairline as a postscript to the result, so its
   absence from the other three reads as nothing missing. */
.case__quote {
  margin: .5rem 0 0;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.case__quote blockquote {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
}
.case__quote blockquote::before { content: "\201C"; }
.case__quote blockquote::after  { content: "\201D"; }
.case__quote figcaption {
  margin-top: .6rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Card 2 only — same hairline, quieter voice. */
.case__note {
  margin-top: .5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: .85rem;
  line-height: 1.55;
}

@media (max-width: 860px) {
  .results__grid { grid-template-columns: minmax(0, 1fr); }
  /* One card per row: subgrid has nothing left to align, and dropping it stops
     the empty sixth row from adding a gap under the two shorter cards. */
  .case { grid-row: auto; grid-template-rows: none; }
}

@media (max-width: 680px) {
  .results { padding-block: 4.5rem; }
  .results__inner { --case-pad: 1.6rem; }
  .case__result { padding: .9rem 1rem; }
}

/* --- Assessment sample ------------------------------------------------- */
.sample {
  padding-block: 7rem;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(135deg, rgba(59, 158, 255, .08), transparent 46%);
}
.sample__grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 4.5rem;
  align-items: center;
}
.sample__lede { margin-bottom: 0; }
.sample__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 1.5rem;
  color: var(--accent-lift);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .25em;
}
.sample__link:hover { color: var(--ink); }
.sample__link:active { color: var(--accent); }

.sample-plan {
  border: 1px solid var(--line-input);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
}
.sample-plan__topline,
.sample-plan__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding: .8rem 1.5rem;
  background: var(--line-soft);
  color: var(--faint);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sample-plan__heading {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: start;
  padding: 1.75rem 1.5rem 1.5rem;
}
.sample-plan__rank {
  margin-bottom: .45rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sample-plan__heading h3 { font-size: clamp(1.35rem, 3vw, 1.85rem); }
.sample-plan__status {
  flex: 0 0 auto;
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: .35rem .65rem;
  color: var(--accent-lift);
  font-family: var(--mono);
  font-size: .68rem;
  text-transform: uppercase;
}
.sample-plan__facts { margin: 0; padding-inline: 1.5rem; }
.sample-plan__facts > div {
  display: grid;
  grid-template-columns: minmax(8.5rem, .38fr) minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1rem;
  border-top: 1px solid var(--line);
}
.sample-plan__facts dt {
  color: var(--ink);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sample-plan__facts dd { margin: 0; color: var(--muted); font-size: .92rem; }
.sample-plan__footer { justify-content: start; }
.sample-plan__footer strong { color: var(--ink); font-weight: 600; }
.sample-plan__note { padding: 1rem 1.5rem; color: var(--faint); font-size: .78rem; }

/* --- Who we help -------------------------------------------------------- */
.who { padding-block: 7rem; border-bottom: 1px solid var(--line-soft); }
.who__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.who-card { padding: 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.who-card__number { font-family: var(--mono); font-size: .72rem; color: var(--accent); margin-bottom: 1.25rem; }
.who-card h3 { font-size: 1.35rem; margin-bottom: .75rem; }
.who-card > p:last-child { color: var(--muted); }

/* --- Services ------------------------------------------------------------ */
.services { padding-block: 7rem; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.offer {
  background: var(--void);
  padding: 2.5rem;
  transition: background-color .25s ease;
}
.offer:hover { background: var(--surface); }

.offer__kind {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.offer__name { font-size: 1.5rem; margin-bottom: .9rem; }
.offer__body { color: var(--muted); }

.offer__points { margin-top: 1.5rem; display: grid; gap: .55rem; }
.offer__points li {
  position: relative;
  padding-left: 1.4rem;
  font-size: .92rem;
  color: var(--ink);
}
.offer__points li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 6px; height: 1.5px;
  background: var(--accent);
}

.offer__details {
  margin-top: 1.75rem;
  border-top: 1px solid var(--line-input);
}
.offer__details summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--accent-lift);
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.offer__details summary::-webkit-details-marker { display: none; }
.offer__details summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.25rem;
  line-height: 1;
}
.offer__details[open] summary::after { content: "−"; }
.offer__details summary:hover { color: var(--ink); }
.offer__details summary:active { color: var(--accent); }
.offer__more { padding: .25rem 0 .5rem; }
.offer__more p { color: var(--muted); }
.offer__more p + p { margin-top: 1rem; }

/* --- Process ------------------------------------------------------------- */
.how {
  padding-block: 7rem;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}

.how__track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

/* the connecting line encodes that this really is a sequence */
.phase { position: relative; padding-top: 2rem; border-top: 1px solid var(--line); }
.phase::before {
  content: "";
  position: absolute; top: -4px; left: 0;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
}
.phase__n {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .6rem;
}
.phase__name { font-size: 1.25rem; }
.phase__when { font-family: var(--mono); font-size: .72rem; color: var(--faint); margin: .35rem 0 .8rem; }
.phase__body { color: var(--muted); font-size: .95rem; }

/* --- Trust --------------------------------------------------------------- */
.trust { padding-block: 7rem; }

.trust__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 4.5rem;
  align-items: start;
}
.trust__intro .lede__title { margin-bottom: 1.25rem; }
.trust__body { color: var(--muted); margin-bottom: 2rem; }

.trust__list { display: grid; gap: 1px; background: var(--line-soft); }
.rule { background: var(--void); padding: 1.75rem 0 1.75rem 1.5rem; border-left: 2px solid var(--line); }
.rule:hover { border-left-color: var(--accent); }
.rule__name { font-size: 1.1rem; margin-bottom: .5rem; }
.rule__body { color: var(--muted); font-size: .95rem; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { padding-block: 7rem; border-top: 1px solid var(--line-soft); background: var(--surface); }
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5rem; align-items: start; }
.faq__lede { position: sticky; top: calc(var(--bar) + 2rem); margin-bottom: 0; }
.faq__list { border-top: 1px solid var(--line-input); }
.faq__item { border-bottom: 1px solid var(--line-input); }
.faq__item h3 {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0 .5rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 700;
}
.faq__item p { color: var(--muted); max-width: 66ch; padding: 0 0 1.4rem; }

/* --- About --------------------------------------------------------------- */
.about { padding-block: 7rem; }
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: start; }
.about__copy .lede__title { margin-bottom: 1.5rem; }
.about__copy p { color: var(--muted); }
.about__copy p + p { margin-top: 1rem; }
.about__copy strong { color: var(--ink); font-weight: 600; }

/* Track record. Every key is a short figure, so the term column stays narrow. */
.record { margin: 0; display: grid; gap: 0; }
.record__row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1.5rem;
  padding: 1.2rem 0;
  border-top: 1px solid var(--line-soft);
  align-items: baseline;
}
.record__row:last-child { border-bottom: 1px solid var(--line-soft); }
.record__k {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: 1.35rem;
  color: var(--accent);
  white-space: nowrap;   /* keep "46% → 84%" on one line */
}
.record__v { margin: 0; color: var(--muted); font-size: .92rem; }

/* --- Free guide --------------------------------------------------------- */
.guide { padding-block: 4.5rem; background: var(--surface); border-block: 1px solid var(--line-soft); }
.guide__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .6fr); gap: 4rem; align-items: center; }
.guide .tag { margin-bottom: .8rem; }
.guide__body { color: var(--muted); max-width: 44rem; margin-top: 1rem; }
.guide__action { padding: 1.5rem; border-left: 2px solid var(--accent); }
.guide__action .button { width: 100%; }
.guide__action p { color: var(--faint); font-size: .78rem; text-align: center; margin-top: .75rem; }

.guide-page { padding-top: var(--bar); }
.guide-hero { padding-block: clamp(4.5rem, 9vw, 7.5rem); background: radial-gradient(circle at 82% 20%, rgba(59, 158, 255, .14), transparent 30rem); border-bottom: 1px solid var(--line-soft); }
.guide-hero__inner { max-width: 52rem; }
.guide-hero h1 { font-size: clamp(2.35rem, 6vw, 4.3rem); }
.guide-hero p:last-child { color: var(--muted); font-size: 1.12rem; margin-top: 1.5rem; max-width: 44rem; }
.guide-list-section { padding-block: 6rem; }
.guide-list { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
.guide-list article { display: grid; grid-template-columns: 4rem 1fr; gap: 1.5rem; padding: 2rem; background: var(--surface); }
.guide-list article > span { font-family: var(--mono); color: var(--accent); }
.guide-list h2 { font-size: 1.35rem; margin-bottom: .8rem; }
.guide-list p { color: var(--muted); }
.guide-list p + p { margin-top: .55rem; }
.guide-list strong { color: var(--ink); font-weight: 600; }
.guide-next { padding-block: 6rem; text-align: center; background: var(--surface); border-top: 1px solid var(--line-soft); }
.guide-next__inner { max-width: 45rem; }
.guide-next h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.guide-next p:not(.tag) { color: var(--muted); margin: 1.25rem auto 2rem; }

/* --- Booking ------------------------------------------------------------- */
.book {
  padding-block: 7rem;
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(60rem 26rem at 50% 0%, rgba(59, 158, 255, .11), transparent 70%),
    var(--surface);
}
.book__inner { max-width: 44rem; text-align: center; }
.book .tag { margin-inline: auto; }
.book__title { font-size: clamp(2rem, 4.4vw, 3.2rem); }
/* Typewriter. The real text stays in flow to hold the block's height at every
   width — no reflow jump as characters land — and is only faded out once JS
   arms it, so with JS off the headline simply renders. opacity (not
   visibility/clip) keeps it in the accessibility tree to be read normally. */
.tw { position: relative; display: block; }
.tw[data-armed] .tw__real { opacity: 0; }
.tw__type { position: absolute; inset: 0; }
.tw:not([data-armed]) .tw__type { display: none; }

.tw__caret {
  display: inline-block;
  width: .055em;
  height: .82em;
  margin-left: .07em;
  background: var(--accent);
  vertical-align: -.05em;
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.tw.is-done .tw__caret { animation: none; opacity: 0; }

.book__sub { color: var(--muted); margin-top: 1.25rem; font-size: 1.08rem; }
.book__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2.25rem; }
.book__fine { font-family: var(--mono); font-size: .75rem; color: var(--faint); margin-top: 1.5rem; }

/* --- Booking form --------------------------------------------------------- */
.book__panel { margin-top: 2.5rem; text-align: left; }
.book__panel[hidden] { display: none; }

/* collapse/expand animation, only once JS has armed the panel */
.book__panel.is-collapsible {
  overflow: hidden;
  animation: panelIn .32s cubic-bezier(.22, .8, .3, 1);
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.bform {
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem;
}
.bform__title { font-size: 1.25rem; margin-bottom: .35rem; }
.bform__intro { color: var(--muted); font-size: .95rem; margin-bottom: 1.75rem; }

.bform__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem 1.25rem;
}
.field--wide { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; }
.field label {
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: .4rem;
}
.field__req {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: .35rem;
}
.field__hint {
  font-size: .84rem;
  color: var(--muted);
  margin-bottom: .5rem;
}

.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: .95rem;
  color: var(--ink);
  background: var(--surface);
  /* --line-input, not --line: control borders need 3:1 (WCAG 1.4.11).
     #366AAE measures 3.19:1 on --surface; --line is only 1.41:1. */
  border: 1px solid var(--line-input);
  border-radius: var(--r);
  padding: .7rem .8rem;
  width: 100%;
  transition: border-color .16s ease;
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input::placeholder,
.chat-form input::placeholder { color: var(--faint); }

/* Select. Inherits everything above (font, colour, border, radius, padding,
   width) from the shared control rule, so it stacks flush with a text input;
   this block only drops the native chrome and supplies our own affordance.
   Must stay AFTER that rule — its `background:` shorthand would otherwise
   reset the arrow. */
.field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  /* the shared padding, plus room on the right so a long option label
     ("Prefer not to say") can never run under the arrow */
  padding-right: 2.5rem;
  /* chevron. Stroke is --muted (#93A9C4) hard-coded because custom properties
     cannot be interpolated into a data URI — same palette, no new colour. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2393A9C4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 12px 8px;
}
.field select:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%233B9EFF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* The option list is an OS popup and will not match the card; set both colours
   explicitly so it is at least legible rather than inheriting a dark-on-dark
   or white-on-white combination. */
.field select option {
  background-color: var(--surface);
  color: var(--ink);
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--accent); }

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--red-lift); }

.field__err {
  font-size: .82rem;
  color: var(--red-text);
  margin-top: .35rem;
}
.field__err[hidden] { display: none; }

.bform__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}
.bform__note { font-size: .8rem; color: var(--faint); margin: 0; }
.bform__note a { color: var(--accent-lift); text-decoration: underline; text-underline-offset: .18em; }

.bform__status {
  margin-top: 1rem;
  font-size: .9rem;
  color: var(--muted);
}
.bform__status:empty { display: none; }
.bform__status[data-state="error"] { color: var(--red-text); }
.bform__status[data-state="ok"] { color: var(--accent); }

/* --- Booking form: 3-step mode ------------------------------------------- */
/* Progressive enhancement contract: NOTHING here hides a step, a nav button
   or the progress list on its own. Steps are only hidden under
   `.bform--stepped`, which main.js adds at runtime; the Back / Continue
   buttons and the step counter carry the `hidden` attribute in the HTML and
   are handled by the global `[hidden]` rule. With JS off the form renders
   exactly as it always has: every step stacked, one submit, one pass. */

/* Progress indicator — numbered markers joined by a rule, label underneath. */
.bform__progress {
  display: flex;
  align-items: flex-start;
  margin-bottom: .9rem;
}
/* the intro normally supplies the gap; hold it open if the intro is absent */
.bform__title + .bform__progress { margin-top: 1.5rem; }
.bform__progress-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--faint);
  overflow-wrap: break-word;
}
/* the marker */
.bform__progress-item::before {
  content: attr(data-progress);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-input);
  border-radius: 50%;
  background: var(--void);
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--faint);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
/* the connecting rule: drawn leftwards from each marker to the one before it,
   so it never escapes the list at either end. The markers are opaque and sit
   above it, so it reads as a single track. */
.bform__progress-item + .bform__progress-item::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 1rem;                       /* marker centre: half of the 2rem marker */
  left: -50%;
  right: 50%;
  height: 1px;
  background: var(--line);
  transition: background-color .18s ease;
}

/* state: upcoming is the default above. current is emphasised. */
.bform__progress-item.is-current {
  color: var(--ink);
  font-weight: 600;
}
.bform__progress-item.is-current::before {
  border-color: var(--accent);
  color: var(--accent-lift);
  background: var(--accent-dim);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
/* state: completed — same check mark device as .assessment-card li */
.bform__progress-item.is-done { color: var(--muted); }
.bform__progress-item.is-done::before {
  content: "\2713";
  border-color: var(--accent);
  color: var(--accent-lift);
  background: var(--accent-dim);
}
.bform__progress-item.is-done + .bform__progress-item::after { background: var(--accent); }

.bform__stepcount {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.4rem;
}

/* Step wrapper. Fieldset defaults (border, margin, padding, and the
   min-width: min-content that stops it shrinking inside a grid) all go. */
.bform__step {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
/* Legend as a plain block subhead — display: block takes it out of the
   fieldset's notch rendering, so nothing clips it. */
.bform__step-title {
  display: block;      /* out of the fieldset notch, so nothing clips it */
  float: none;
  /* fit-content, NOT 100%: main.js focuses this legend on every step change,
     and a full-column focus ring reads as an empty text input sitting above
     the real fields. Hugging the text makes it read as a focused heading.
     max-width keeps long titles wrapping inside the card at 360px. */
  width: fit-content;
  max-width: 100%;
  padding: 0;
  margin: 0 0 1.15rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  /* the 1.65 body leading makes the ring tall and box-like; headings on this
     site are tight, and this also stops the ring dwarfing the glyphs */
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
  /* main.js moves focus here on step change */
  scroll-margin-top: calc(var(--bar) + 1rem);
}
/* Same ring as everywhere else on the site (:focus-visible, 2px --accent-lift),
   just one more pixel of offset so it clears the descenders of a tight heading.
   The ring is load-bearing — it announces the new step — so it is never
   removed: :focus-visible alone is not enough, because Chrome suppresses it
   on a script-driven focus() that follows a pointer event, which is exactly
   how Continue/Back move focus. main.js adds .is-step-focus alongside the
   focus() call and drops it on blur, so the ring shows regardless of how the
   step was reached. */
.bform__step-title:focus-visible,
.bform__step-title.is-step-focus {
  outline: 2px solid var(--accent-lift);
  outline-offset: 4px;
  border-radius: 2px;
}
/* No-JS / all-steps-visible mode: keep the stacked steps apart. */
.bform:not(.bform--stepped) .bform__step + .bform__step { margin-top: 2.25rem; }

/* THE step-visibility rule. Guarded by .bform--stepped, which only exists
   once main.js has run. */
.bform--stepped .bform__step:not(.is-active) { display: none; }

/* .button--quiet has only ever been used on <a>, which is transparent by
   default. The Back control is a real <button>, so the UA's `buttonface`
   background shows through as a light box. Restore the intended ghost look.
   Element-scoped, so the existing <a class="button button--quiet"> is
   completely unaffected. */
button.button--quiet { background: transparent; }
button.button--quiet:active { background: var(--accent-dim); }

/* Foot: Back on the left, Continue / Submit on the right. Scoped to the
   stepped form so the single-submit no-JS layout is untouched. */
.bform--stepped .bform__foot { justify-content: flex-start; }
.bform--stepped .bform__foot [data-step-back] { order: 1; }
.bform--stepped .bform__foot .bform__note { order: 2; flex: 1 1 12rem; }
.bform--stepped .bform__foot [data-step-next],
.bform--stepped .bform__foot [type="submit"] { order: 3; margin-left: auto; }

/* Entry transition for the incoming step. */
@media (prefers-reduced-motion: no-preference) {
  .bform--stepped .bform__step.is-active {
    animation: bformStepIn .28s cubic-bezier(.22, .8, .3, 1) both;
  }
}
@keyframes bformStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bform--stepped .bform__step.is-active {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Narrow screens: drop the progress labels to numbers only so the track can
   never overflow. The step's own legend and "Step n of 3" still name it. */
@media (max-width: 520px) {
  .bform__progress-item > span {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .bform__progress-item { gap: 0; }
  .bform__progress { margin-bottom: 1.1rem; }
  /* stack the foot: buttons are already full width at this size */
  .bform--stepped .bform__foot .bform__note { order: 4; flex: 1 1 100%; }
}

/* --- Footer -------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line-soft); padding-block: 4rem 2rem; }

.foot__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem;
}
.foot__brand .brandmark { margin-bottom: 1.25rem; }
.foot__brand p { color: var(--faint); font-size: .9rem; max-width: 26ch; }

.foot__col { display: flex; flex-direction: column; gap: .7rem; }
.foot__col h3 {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 500;
  font-stretch: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: .35rem;
}
.foot__col a, .foot__col span { color: var(--muted); font-size: .9rem; }
.foot__col a { display: inline-flex; align-items: center; min-height: 44px; transition: color .18s ease; }
.foot__col a:hover { color: var(--accent); }
.foot__col a:active { color: var(--accent-lift); }

/* --- Legal pages --------------------------------------------------------- */
.legal { min-height: 100vh; padding: calc(var(--bar) + 4rem) 0 6rem; }
.legal__inner { max-width: 48rem; }
.legal__back { display: inline-flex; min-height: 44px; align-items: center; color: var(--accent-lift); margin-bottom: 2rem; }
.legal__back:active { color: var(--ink); }
.legal h1 { font-size: clamp(2.3rem, 5vw, 4rem); margin-bottom: 1rem; }
.legal h2 { font-size: 1.35rem; margin: 2.5rem 0 .75rem; }
.legal p, .legal li { color: var(--muted); }
.legal p + p { margin-top: 1rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.legal li + li { margin-top: .5rem; }
.legal a { color: var(--accent-lift); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; }
.legal__return { display: inline-flex; min-height: 44px; align-items: center; }
.legal__date { font-family: var(--mono); font-size: .78rem; color: var(--faint); }

/* --- Service landing pages ---------------------------------------------- */
.service-page { padding-top: var(--bar); }

.service-hero {
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
  background:
    radial-gradient(circle at 82% 20%, rgba(59, 158, 255, .14), transparent 30rem),
    var(--void);
  border-bottom: 1px solid var(--line-soft);
}
.service-hero__inner { max-width: 54rem; }
.service-hero h1 { font-size: clamp(2.45rem, 6vw, 4.5rem); max-width: 15ch; }
.service-hero__lede { color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 42rem; margin-top: 1.5rem; }
.service-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.service-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.service-fact { background: var(--surface); padding: 1.5rem var(--pad); }
.service-fact strong { display: block; color: var(--ink); font-family: var(--display); font-size: 1.05rem; }
.service-fact span { display: block; color: var(--faint); font-size: .85rem; margin-top: .25rem; }

.service-body { padding-block: 6rem; }
.service-body__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(16rem, .75fr); gap: 5rem; align-items: start; }
.service-copy { display: grid; gap: 3.5rem; }
.service-copy section { display: grid; gap: 1rem; }
.service-copy h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); }
.service-copy p { color: var(--muted); }
.service-list { display: grid; gap: .75rem; margin-top: .25rem; }
.service-list li { position: relative; padding-left: 1.35rem; color: var(--muted); }
.service-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }

.deliverable-example { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; background: var(--surface); }
.deliverable-example__label { color: var(--accent); font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.deliverable-example h3 { margin-top: .65rem; font-size: 1.25rem; }
.deliverable-example dl { margin: 1.25rem 0 0; }
.deliverable-example dl > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding-block: .8rem; border-top: 1px solid var(--line); }
.deliverable-example dt { color: var(--ink); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; }
.deliverable-example dd { margin: 0; color: var(--muted); }
.deliverable-example .deliverable-example__note { margin-top: 1rem; color: var(--faint); font-size: .78rem; }

.service-aside { position: sticky; top: calc(var(--bar) + 2rem); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.75rem; background: var(--surface); }
.service-aside h2 { font-size: 1.25rem; }
.service-aside p { color: var(--muted); font-size: .92rem; margin-top: .75rem; }
.service-aside .button { width: 100%; margin-top: 1.25rem; }

.service-faq { display: grid; gap: 1px; border: 1px solid var(--line-soft); background: var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
.service-faq details { background: var(--surface); padding: 1.2rem 1.35rem; }
.service-faq summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.service-faq p { margin-top: .75rem; }

.service-related { padding-block: 4rem; border-top: 1px solid var(--line-soft); }
.service-related__links { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1rem; }
.service-related a { color: var(--accent-lift); text-decoration: underline; text-underline-offset: .2em; }

.offer__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin-top: 1rem;
  color: var(--accent-lift);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.offer__link:hover { color: var(--accent); }
.offer__link:active { color: var(--ink); }

.foot__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--faint);
}
.foot__loc { color: var(--faint); }
.foot__base-links { display: flex; gap: 1.25rem; }
.foot__base-links a { color: var(--faint); transition: color .18s ease; }
.foot__base-links a:hover { color: var(--accent); }

/* --- Chat launcher ------------------------------------------------------ */
.chat-widget { position: fixed; right: 1.25rem; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 200; }
.chat-launcher { display: inline-flex; align-items: center; gap: .58rem; min-height: 50px; padding: .3rem .85rem .3rem .3rem; border: 1px solid var(--accent); border-radius: 999px; background: var(--panel); color: var(--ink); box-shadow: 0 12px 34px rgba(0,0,0,.3); cursor: pointer; font: 700 .72rem var(--display); }
.chat-launcher img { width: 40px; height: 40px; border-radius: 50%; }
.chat-launcher:hover { background: var(--surface); }
.chat-panel { display: flex; flex-direction: column; width: min(22rem, calc(100vw - 2rem)); height: min(39rem, calc(100vh - 6rem)); margin-bottom: .75rem; overflow: hidden; border: 1px solid var(--line-input); border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 18px 50px rgba(0,0,0,.42); }
.chat-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.chat-panel__identity { display: flex; align-items: center; gap: .65rem; }
.chat-panel__identity img { width: 44px; height: 44px; border-radius: 50%; }
.chat-panel h2 { font-size: 1rem; }
.chat-panel__identity p { color: var(--muted); font-size: .75rem; }
.chat-panel__close { border: 0; background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.chat-panel__messages { display: grid; align-content: start; flex: 1; gap: .6rem; min-height: 7.5rem; overflow: auto; padding: 1rem; }
.chat-message { max-width: 92%; margin: 0; padding: .65rem .75rem; border-radius: var(--r); font-size: .86rem; line-height: 1.45; }
.chat-message--agent { background: var(--panel); color: var(--ink); }
.chat-message--user { margin-left: auto; background: var(--accent-dim); color: var(--accent-lift); }
.chat-panel__suggestions { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .75rem; }
.chat-panel__suggestions button { border: 1px solid var(--line-input); border-radius: 999px; padding: .4rem .55rem; background: transparent; color: var(--accent-lift); cursor: pointer; font: .72rem var(--body); }
.chat-panel__suggestions button:hover { border-color: var(--accent); }
.chat-panel__actions { display: grid; gap: .45rem; padding: 0 1rem .75rem; }
.chat-action { display: block; border: 1px solid var(--line-input); border-radius: var(--r); padding: .55rem .65rem; color: var(--accent-lift); text-align: center; font: 700 .76rem var(--display); }
.chat-action:hover { border-color: var(--accent); background: var(--accent-dim); }
.chat-action--primary { border-color: var(--red); background: var(--red); color: #fff; }
.chat-action--primary:hover { border-color: var(--red-lift); background: var(--red-lift); }
.chat-form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--line); }
.chat-form input { min-width: 0; flex: 1; border: 1px solid var(--line-input); border-radius: var(--r); padding: .65rem; background: var(--void); color: var(--ink); font: .85rem var(--body); }
.chat-form__send { border: 0; border-radius: var(--r); padding: 0 .7rem; background: var(--red); color: #fff; cursor: pointer; font: 700 .8rem var(--display); }
.chat-form__send:hover { background: var(--red-lift); }
.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; }
@media (max-width: 680px) { .chat-widget { right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); } .chat-panel { width: min(22rem, calc(100vw - 1.5rem)); height: min(80vh, 39rem); } }

/* --- Scroll reveal ------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .8, .3, 1);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1040px) {
  .hero__grid,
  .sample__grid,
  .trust__grid,
  .faq__grid,
  .about__grid,
  .guide__inner { grid-template-columns: 1fr; gap: 3rem; }
  .who__grid { grid-template-columns: 1fr; }
  .faq__lede { position: static; }
  .how__track { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

/* The header CTA carries a second, shorter label for phone widths. Hidden by
   default so the specific wording ("Discuss your front desk") is what shows
   everywhere it fits. */
.masthead__cta-short { display: none; }

/* Unconditional, not just under the 860px query below: a flex child shrinks
   by default, and at exactly the shell's own max-width the full-label CTA
   ("Request My Assessment") was tight enough to lose that contest and wrap
   to three lines on every desktop width from ~900px up to 1920px+ - the
   button never grows past ~212px regardless of how much room the row
   actually has above 1200px. flex-shrink:0 gives it its natural width first;
   the nav is what should give ground if the row is ever genuinely tight. */
.masthead__cta { white-space: nowrap; flex-shrink: 0; }

/* index.html's nav carries 7 links (every other page has 2) and its masthead
   CTA is shortened to "Book an assessment" specifically because of that -
   even so, the full row (logo + nav + cta) needs ~1183px of unconstrained
   width, measured directly with nav.style.whiteSpace/flexShrink forced so
   the number reflects true content size, not a shrunk-and-wrapped one. Below
   that the row does not fit and nav's own children (each flex-shrink:1 by
   default) start shrinking individual multi-word labels until they wrap at a
   word boundary - a two-line "Who we help" costs nothing in box height
   (padding already accommodates it) so it is invisible to a height check and
   was caught only by counting actual rendered text lines. Threshold set with
   margin on both sides of the shell's own 1200px cap, where available width
   freezes regardless of viewport. */
@media (max-width: 1200px) {
  .masthead__inner:has(.masthead__toggle) .masthead__nav { display: none; }
  .masthead__inner:has(.masthead__toggle) .masthead__toggle { display: flex; }
}

@media (max-width: 860px) {
  .masthead__nav { display: none; }
  .masthead__toggle { display: flex; }
  /* white-space/flex-shrink for .masthead__cta now live on the unconditional
     rule above - they apply here too, this query just adds the toggle. */
  /* Only index.html ships a drawer, and that drawer already repeats the
     booking button - so there the header CTA is a duplicate and can go. Every
     other page has no drawer, which made the old blanket rule hide the only
     booking route on the pages most likely to be found from search. */
  .masthead__inner:has(.masthead__toggle) .masthead__cta { display: none; }
}

/* Measured: the longest label, "Discuss your front desk", needs 480px to sit
   beside the 204px wordmark. Swap to the short label below 520 and step the
   logo down, so the button still fits at 320px with room to tap. */
@media (max-width: 520px) {
  .masthead__cta-full { display: none; }
  .masthead__cta-short { display: inline; }
  .service-body__grid { grid-template-columns: 1fr; gap: 3rem; }
  .service-aside { position: static; }
}

@media (max-width: 680px) {
  .brandmark__logo { width: 12.75rem; }
  .service-facts { grid-template-columns: 1fr; }
  .service-body { padding-block: 4.5rem; }
  .hero { padding-top: calc(var(--bar) + 3rem); padding-bottom: 4rem; }
  .sample, .who, .services, .how, .trust, .faq, .about, .book { padding-block: 4.5rem; }
  .services__grid { grid-template-columns: 1fr; }
  .offer { padding: 2rem 1.5rem; }
  .how__track { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .record__row { grid-template-columns: 1fr; gap: .35rem; }
  .sample-plan__heading { flex-direction: column; }
  .sample-plan__facts > div { grid-template-columns: 1fr; gap: .35rem; }
  .deliverable-example dl > div { grid-template-columns: 1fr; gap: .35rem; }
  .bform { padding: 1.5rem 1.25rem; }
  .bform__grid { grid-template-columns: 1fr; }
  .bform__foot .button { width: 100%; }
  .line { grid-template-columns: 2.9rem 1fr; }
  .line__say { grid-column: 1 / -1; }
  .hero__actions .button, .book__actions .button { width: 100%; }
  .guide-list article { grid-template-columns: 1fr; gap: .5rem; padding: 1.5rem; }
}

/* Declared after the 680px block because that one also sets this property and
   would otherwise win on source order. Below 520 the header shows the short
   CTA label, and the wordmark steps down so the two fit at 320px. */
@media (max-width: 520px) {
  .brandmark__logo { width: 9.375rem; }
}

/* --- Business-card connect experience ----------------------------------- */
.connect-page {
  background:
    linear-gradient(180deg, rgba(59, 158, 255, .035), transparent 28rem),
    var(--void);
}

.connect-boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #020812;
  animation: connectBootOut 2.6s ease forwards;
}
.connect-boot__grid {
  position: absolute;
  inset: -20%;
  opacity: .28;
  background-image:
    linear-gradient(rgba(59, 158, 255, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 158, 255, .13) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(600px) rotateX(64deg) translateY(18%);
  transform-origin: center bottom;
}
.connect-boot__grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(59, 158, 255, .8) 50%, transparent 51%);
  background-size: 100% 220%;
  animation: connectScan 1.45s linear 1;
}
.connect-boot__content { position: relative; display: grid; justify-items: center; text-align: center; padding: 2rem; }
.connect-boot__content img { width: 5.75rem; border-radius: 50%; margin-bottom: 1.5rem; filter: drop-shadow(0 0 26px rgba(59, 158, 255, .36)); }
.connect-boot__content p { color: var(--accent-lift); font: .68rem var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.connect-boot__content p span,
.connect-signal__status span,
.connect-progress__top p span,
.connect-demo__head > div span {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .4rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 15px rgba(59, 158, 255, .7);
}
.connect-boot__content strong { margin-top: .85rem; color: var(--ink); font: 800 clamp(2rem, 7vw, 4.25rem)/1 var(--display); letter-spacing: -.035em; }
.connect-boot__content small { margin-top: .85rem; color: var(--faint); font: .72rem var(--mono); letter-spacing: .08em; }
.connect-boot > button {
  position: absolute;
  right: max(1.25rem, env(safe-area-inset-right));
  top: max(1.25rem, env(safe-area-inset-top));
  min-width: 44px;
  min-height: 44px;
  padding: .5rem .75rem;
  border: 1px solid var(--line-input);
  border-radius: var(--r);
  color: var(--muted);
  background: rgba(5, 16, 31, .85);
  cursor: pointer;
  font: .75rem var(--body);
}
.connect-boot > button:hover { color: var(--ink); border-color: var(--accent); }
.connect-boot__browser {
  width: min(19rem, 76vw);
  margin-bottom: 1.75rem;
  overflow: hidden;
  border: 1px solid rgba(59, 158, 255, .38);
  border-radius: var(--r);
  background: rgba(5, 16, 31, .85);
  box-shadow: 0 24px 56px -26px rgba(59, 158, 255, .5), 0 0 0 1px rgba(59, 158, 255, .06);
  animation: connectBrowserIn .5s ease both;
}
.connect-boot__browser-bar { display: flex; align-items: center; gap: .32rem; padding: .55rem .7rem; border-bottom: 1px solid var(--line-input); background: rgba(18, 41, 74, .55); }
.connect-boot__browser-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-input); }
.connect-boot__browser-body { display: grid; justify-items: start; gap: .42rem; padding: .9rem; }
.connect-boot__block {
  display: block;
  width: 100%;
  height: .5rem;
  border-radius: 3px;
  background: var(--line-input);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  animation: connectBuildBlock .48s cubic-bezier(.16, .8, .3, 1) forwards;
}
.connect-boot__block--nav { height: .62rem; animation-delay: .18s; }
.connect-boot__block--hero { width: 86%; height: 1.45rem; margin-top: .2rem; background: var(--accent); box-shadow: 0 0 14px rgba(59, 158, 255, .45); animation-delay: .42s; }
.connect-boot__block--line { width: 93%; animation-delay: .66s; }
.connect-boot__block--short { width: 56%; animation-delay: .84s; }
.connect-boot__block--cta { width: 42%; height: .72rem; margin-top: .28rem; background: var(--accent-lift); box-shadow: 0 0 12px rgba(124, 196, 255, .55); animation-delay: 1.08s; }
@keyframes connectBuildBlock { to { opacity: 1; transform: scaleX(1); } }
@keyframes connectBrowserIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes connectScan { from { background-position: 0 -100%; } to { background-position: 0 100%; } }
@keyframes connectBootOut {
  0%, 76% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

.connect-header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(5, 16, 31, .9);
  backdrop-filter: blur(14px);
}
.connect-header__inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.connect-header .brandmark__logo { width: clamp(10.5rem, 22vw, 13rem); }
.connect-header__site {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--accent-lift);
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
}
.connect-header__site:hover { color: var(--ink); }

.connect-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 7rem);
  border-bottom: 1px solid var(--line-soft);
}
.connect-hero::before {
  content: "";
  position: absolute;
  width: min(54rem, 96vw);
  aspect-ratio: 1;
  top: -55%;
  right: -24%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 158, 255, .16), rgba(59, 158, 255, .03) 40%, transparent 68%);
  pointer-events: none;
}
.connect-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(19rem, .8fr);
  gap: clamp(3rem, 7vw, 6.5rem);
  align-items: center;
}
.connect-hero__copy { max-width: 45rem; }
.connect-hero h1 { font-size: clamp(2.6rem, 6.2vw, 5.25rem); max-width: 12ch; }
.connect-hero__lede {
  max-width: 39rem;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.7vw, 1.18rem);
}
.connect-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.connect-offerline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 43rem;
  margin-top: 2.25rem;
  border-block: 1px solid var(--line);
}
.connect-offerline li {
  min-width: 0;
  padding: 1rem clamp(.65rem, 2vw, 1.2rem);
  color: var(--faint);
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.connect-offerline li + li { border-left: 1px solid var(--line); }
.connect-offerline strong { display: block; color: var(--ink); font-family: var(--body); font-size: .9rem; letter-spacing: 0; text-transform: none; }

.connect-signal {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--line-input);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, rgba(18, 41, 74, .94), rgba(5, 16, 31, .94));
  box-shadow: 0 30px 70px -35px rgba(0, 0, 0, .9);
}
.connect-signal__status { display: flex; align-items: center; margin-bottom: 1.5rem; color: var(--accent-lift); font: .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.connect-signal__mark {
  position: relative;
  width: 6.25rem;
  height: 6.25rem;
  display: grid;
  place-items: center;
  margin-bottom: 1.5rem;
}
.connect-signal__mark img { position: relative; width: 4.7rem; height: 4.7rem; border-radius: 50%; }
.connect-signal__ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(59, 158, 255, .05), 0 0 42px rgba(59, 158, 255, .18);
  animation: connectPulse 3.2s ease-in-out infinite;
}
@keyframes connectPulse { 50% { transform: scale(1.06); opacity: .62; } }
.connect-signal__label { color: var(--ink); font-family: var(--display); font-size: 1.2rem; font-weight: 800; }
.connect-signal__trace { display: grid; grid-template-columns: auto 1fr; gap: .65rem 1rem; align-items: center; margin-top: 1.5rem; color: var(--faint); font: .62rem var(--mono); letter-spacing: .06em; }
.connect-signal__trace i { height: 1px; overflow: hidden; background: var(--line-input); }
.connect-signal__trace i::after { content: ""; display: block; width: 38%; height: 1px; background: var(--accent); box-shadow: 0 0 8px rgba(59, 158, 255, .6); animation: connectTrace 1.8s ease-in-out infinite; }
.connect-signal__foot { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }
@keyframes connectTrace { 0%, 100% { transform: translateX(-110%); } 55% { transform: translateX(260%); } }
.connect-signal__list { margin: 1.4rem 0 0; }
.connect-signal__list > div { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding-block: .85rem; border-top: 1px solid var(--line); }
.connect-signal__list dt { color: var(--accent-lift); font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.connect-signal__list dd { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }

.connect-challenge { padding-block: clamp(4.5rem, 9vw, 7rem); background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.connect-challenge__inner { max-width: 62rem; }
.connect-section-head { max-width: 42rem; }
.connect-section-head h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.connect-section-head > p:last-child { margin-top: 1rem; color: var(--muted); font-size: 1.02rem; }

.connect-experience {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(42rem 30rem at 100% 24%, rgba(59, 158, 255, .09), transparent 72%),
    var(--surface);
  border-bottom: 1px solid var(--line-soft);
}
.connect-experience__inner { max-width: 68rem; }
.connect-section-head--experience { margin-top: clamp(3.5rem, 7vw, 6rem); }
.connect-progress {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-inline: calc(var(--pad) * -1);
  padding: .9rem var(--pad) .8rem;
  background: rgba(10, 26, 46, .94);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .26);
}
.connect-progress__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--faint); font: .66rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.connect-progress__top p { display: flex; align-items: center; }
.connect-progress__top output { color: var(--accent-lift); }
.connect-progress__track { height: 2px; margin-block: .75rem .65rem; overflow: hidden; background: var(--line); }
.connect-progress__track i { display: block; width: 100%; height: 100%; background: var(--accent); box-shadow: 0 0 14px rgba(59, 158, 255, .7); transform: scaleX(.25); transform-origin: left; transition: transform .4s ease; }
.connect-progress ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.connect-progress li { position: relative; color: var(--faint); font: .7rem var(--body); }
.connect-progress li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .4rem; border: 1px solid var(--line-input); border-radius: 50%; }
.connect-progress li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.connect-progress li[aria-current="step"]::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 9px rgba(59, 158, 255, .65); }
.connect-progress li.is-complete::before { background: var(--accent-lift); border-color: var(--accent-lift); }

.connect-noscript { margin-top: 1rem; padding: 1rem; border-left: 2px solid var(--accent); color: var(--muted); background: var(--void); }
.connect-noscript a { color: var(--accent-lift); text-decoration: underline; text-underline-offset: .18em; }

.connect-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 2.5rem; }
.connect-choice {
  width: 100%;
  min-height: 116px;
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1.25rem;
  color: var(--ink);
  text-align: left;
  background: var(--void);
  border: 1px solid var(--line-input);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .14s ease;
}
.connect-choice:hover { border-color: var(--accent); background: #0B1D34; }
.connect-choice:active { transform: translateY(1px); }
.connect-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); }
.connect-choice__number { color: var(--accent); font: .72rem var(--mono); }
.connect-choice strong { display: block; font: 700 1rem/1.35 var(--display); }
.connect-choice small { display: block; margin-top: .45rem; color: var(--muted); font: .84rem/1.45 var(--body); }
.connect-choice__arrow { color: var(--accent); font-size: 1.15rem; line-height: 1; transition: transform .18s ease; }
.connect-choice:hover .connect-choice__arrow,
.connect-choice[aria-pressed="true"] .connect-choice__arrow { transform: translateX(3px); }

.connect-choice:disabled { opacity: .62; cursor: not-allowed; }

.connect-demo {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  border: 1px solid var(--line-input);
  border-radius: var(--r-lg);
  background: #061323;
  box-shadow: 0 30px 80px -42px rgba(0, 0, 0, .95), 0 0 0 1px rgba(59, 158, 255, .05);
}
.connect-demo__head {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(18, 41, 74, .62);
  color: var(--faint);
  font: .65rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.connect-demo__head > div:first-child { display: flex; align-items: center; color: var(--accent-lift); }
.connect-demo__head > p { text-align: center; }
.connect-demo__controls { display: flex; gap: .35rem; }
.connect-demo__controls button {
  min-height: 44px;
  padding: .45rem .65rem;
  color: var(--accent-lift);
  background: transparent;
  border: 1px solid var(--line-input);
  border-radius: var(--r);
  cursor: pointer;
  font: .68rem var(--body);
  text-transform: none;
  letter-spacing: 0;
}
.connect-demo__controls button:hover { border-color: var(--accent); color: var(--ink); }
.connect-demo__body { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(2rem, 5vw, 4.5rem); padding: clamp(1.5rem, 5vw, 3.5rem); }
.connect-demo__intro { align-self: center; }
.connect-demo__intro h3 { font-size: clamp(1.75rem, 4vw, 3rem); }
.connect-demo__intro > p:last-child { margin-top: 1rem; color: var(--muted); }

.connect-workflow { position: relative; display: grid; gap: .75rem; }
.connect-workflow::before { content: ""; position: absolute; left: 1.68rem; top: 2.3rem; bottom: 2.3rem; width: 1px; background: var(--line); }
.connect-workflow li {
  position: relative;
  z-index: 1;
  min-height: 78px;
  display: grid;
  grid-template-columns: 2.25rem 1fr 1rem;
  gap: 1rem;
  align-items: center;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--void);
  opacity: .46;
  transition: opacity .35s ease, border-color .35s ease, background-color .35s ease, box-shadow .35s ease, transform .35s ease;
}
.connect-workflow li > span { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line-input); border-radius: 50%; background: var(--void); color: var(--faint); font: .66rem var(--mono); }
.connect-workflow strong { display: block; color: var(--ink); font: 700 .95rem/1.35 var(--display); }
.connect-workflow small { display: block; margin-top: .25rem; color: var(--muted); font: .8rem/1.4 var(--body); }
.connect-workflow li > i { width: .6rem; height: .6rem; border: 1px solid var(--line-input); border-radius: 50%; }
.connect-workflow li.is-active { opacity: 1; border-color: var(--accent); background: rgba(59, 158, 255, .1); box-shadow: 0 0 28px rgba(59, 158, 255, .1); transform: translateX(4px); }
.connect-workflow li.is-active > span { border-color: var(--accent); color: var(--accent-lift); box-shadow: 0 0 18px rgba(59, 158, 255, .18); }
.connect-workflow li.is-active > i { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 12px rgba(59, 158, 255, .7); animation: connectDotPulse 1s ease-in-out infinite; }
.connect-workflow li.is-complete { opacity: .8; border-color: var(--line-input); }
.connect-workflow li.is-complete > span { border-color: var(--accent); color: var(--accent-lift); }
.connect-workflow li.is-complete > i { border-color: var(--accent-lift); background: var(--accent-lift); }
@keyframes connectDotPulse { 50% { transform: scale(1.4); } }

.connect-build {
  margin-top: 2rem;
  overflow: hidden;
  border: 1px solid var(--line-input);
  border-radius: var(--r);
  background: rgba(5, 16, 31, .72);
  transition: border-color .4s ease, box-shadow .4s ease;
}
.connect-build.is-live { border-color: var(--accent); box-shadow: 0 0 32px -8px rgba(59, 158, 255, .35); }
.connect-build__bar { display: flex; align-items: center; gap: .32rem; padding: .5rem .65rem; border-bottom: 1px solid var(--line); background: rgba(18, 41, 74, .5); color: var(--faint); font: .6rem var(--mono); letter-spacing: .04em; }
.connect-build__bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-input); transition: background-color .3s ease, box-shadow .3s ease; }
.connect-build.is-live .connect-build__bar i:nth-child(3) { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, .65); }
.connect-build__bar span { margin-left: .45rem; }
.connect-build__body { display: grid; justify-items: start; gap: .42rem; padding: .9rem; }
.connect-build__block {
  display: block;
  width: 100%;
  height: .5rem;
  border-radius: 3px;
  background: var(--line-input);
  opacity: .28;
  transform: scaleX(.05);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.16, .8, .3, 1), opacity .4s ease, background-color .35s ease, box-shadow .35s ease;
}
.connect-build__block--nav { height: .6rem; }
.connect-build__block--hero { width: 88%; height: 1.5rem; margin-top: .2rem; }
.connect-build__block--row { width: 94%; }
.connect-build__block--short { width: 58%; }
.connect-build__block--cta { width: 42%; height: .7rem; margin-top: .28rem; }
.connect-build__block.is-built { opacity: 1; transform: scaleX(1); }
.connect-build__block--hero.is-built { background: var(--accent); box-shadow: 0 0 14px rgba(59, 158, 255, .4); }
.connect-build__block--cta.is-built { background: var(--accent-lift); box-shadow: 0 0 12px rgba(124, 196, 255, .5); }

.connect-savings {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, .9fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  margin-top: clamp(2.5rem, 6vw, 5rem);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--void), rgba(18, 41, 74, .76));
}
.connect-savings h3 { font-size: clamp(1.75rem, 4vw, 3rem); }
.connect-savings__copy > p:not(.tag, .connect-savings__assumption) { margin-top: 1rem; color: var(--muted); }
.connect-savings__copy label { display: block; margin-top: 2rem; color: var(--ink); font-size: .9rem; font-weight: 600; }
.connect-slider { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; margin-top: .65rem; }
.connect-slider input {
  --range-fill: 25%;
  width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
  background: transparent;
}
.connect-slider input::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--range-fill), var(--line-input) var(--range-fill)); }
.connect-slider input::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8.5px; border: 3px solid var(--void); border-radius: 50%; background: var(--accent-lift); box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(59, 158, 255, .45); -webkit-appearance: none; }
.connect-slider input::-moz-range-track { height: 5px; border-radius: 999px; background: var(--line-input); }
.connect-slider input::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--accent); }
.connect-slider input::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid var(--void); border-radius: 50%; background: var(--accent-lift); box-shadow: 0 0 0 1px var(--accent); }
.connect-slider input:disabled { cursor: not-allowed; opacity: .55; }
.connect-slider output { min-width: 5.5rem; color: var(--muted); text-align: right; font: .78rem var(--mono); }
.connect-slider output strong { display: block; color: var(--ink); font: 800 1.8rem/1 var(--display); }
.connect-savings__assumption { margin-top: 1rem; color: var(--faint); font-size: .76rem; }
.connect-savings__result { position: relative; overflow: hidden; padding: 2rem; border: 1px solid var(--accent); border-radius: var(--r-lg); background: rgba(59, 158, 255, .09); }
.connect-savings__result.is-counting > strong { animation: connectNumber .32s ease-out; }
@keyframes connectNumber { from { opacity: .42; transform: translateY(6px); } }
.connect-savings__result::before { content: ""; position: absolute; width: 13rem; height: 13rem; right: -6rem; top: -7rem; border: 1px solid rgba(124, 196, 255, .24); border-radius: 50%; box-shadow: 0 0 0 1.5rem rgba(59, 158, 255, .025), 0 0 0 3rem rgba(59, 158, 255, .018); }
.connect-savings__result > p { position: relative; color: var(--accent-lift); font: .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.connect-savings__result > strong { position: relative; display: block; margin-top: 1rem; color: var(--ink); font: 800 clamp(3.8rem, 9vw, 6.8rem)/.82 var(--display); letter-spacing: -.055em; }
.connect-savings__result > span { position: relative; display: block; margin-top: .65rem; color: var(--muted); }
.connect-savings__result > div { position: relative; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line-input); color: var(--muted); font-size: .85rem; }
.connect-savings__result b { color: var(--accent-lift); font-family: var(--mono); font-weight: 500; }

.connect-recommendation {
  margin-top: 1rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(59, 158, 255, .15), rgba(5, 16, 31, .92) 58%);
  box-shadow: 0 24px 60px -34px rgba(59, 158, 255, .65);
}
.connect-recommendation.is-updated { animation: connectResult .34s ease-out; }
.connect-recommendation.is-ready { box-shadow: 0 28px 80px -36px rgba(59, 158, 255, .82); }
@keyframes connectResult { from { opacity: .55; transform: translateY(5px); } }
.connect-recommendation__top { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-bottom: 1rem; }
.connect-recommendation__label,
.connect-recommendation__top > span { color: var(--accent-lift); font: .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.connect-recommendation__top > span { color: var(--faint); text-align: right; }
.connect-recommendation h3 { font-size: clamp(1.55rem, 3vw, 2.2rem); }
.connect-recommendation > p { max-width: 48rem; margin-top: .8rem; color: var(--muted); }
.connect-recommendation__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.5rem; }
.connect-text-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--accent-lift); font-weight: 600; text-decoration: underline; text-underline-offset: .22em; }
.connect-text-link:hover { color: var(--ink); }

.connect-deliverables { padding-block: clamp(4.5rem, 9vw, 7rem); border-bottom: 1px solid var(--line-soft); }
.connect-deliverables__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(3rem, 8vw, 7rem); align-items: start; }
.connect-deliverables__list { border-top: 1px solid var(--line-input); }
.connect-deliverables__list li { display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem; padding-block: 1.35rem; border-bottom: 1px solid var(--line-input); }
.connect-deliverables__list li > span { color: var(--accent); font: .72rem var(--mono); }
.connect-deliverables__list strong { display: block; color: var(--ink); font-family: var(--display); font-size: 1.08rem; }
.connect-deliverables__list p { margin-top: .35rem; color: var(--muted); font-size: .92rem; }

.connect-proof { padding-block: clamp(4rem, 8vw, 6rem); background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.connect-proof__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(3rem, 8vw, 7rem); align-items: start; }
.connect-proof h2 { max-width: 12ch; font-size: clamp(2rem, 4vw, 3.15rem); }
.connect-proof__copy > p { max-width: 43rem; color: var(--muted); font-size: 1.03rem; }
.connect-proof__copy .connect-text-link { margin-top: 1.25rem; }

.connect-book { border-top: 0; }
.connect-book .book__title { max-width: 13ch; margin-inline: auto; }
.connect-direct { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.4rem; margin-top: 2.25rem; }
.connect-direct a { display: inline-flex; min-height: 44px; align-items: center; color: var(--accent-lift); font-size: .88rem; text-decoration: underline; text-underline-offset: .2em; }
.connect-direct a:hover { color: var(--ink); }

.connect-footer { border-top: 1px solid var(--line-soft); padding-block: 1.5rem; }
.connect-footer__inner { display: flex; justify-content: space-between; gap: 1rem; color: var(--faint); font: .72rem var(--mono); }
.connect-footer nav { display: flex; gap: 1.25rem; }
.connect-footer a { min-height: 44px; display: inline-flex; align-items: center; }
.connect-footer a:hover { color: var(--accent-lift); }

@media (max-width: 860px) {
  .connect-hero__grid,
  .connect-deliverables__grid,
  .connect-proof__inner,
  .connect-demo__body,
  .connect-savings { grid-template-columns: 1fr; }
  .connect-signal { max-width: 35rem; }
}

@media (max-width: 680px) {
  .connect-header__inner { min-height: 68px; }
  .connect-header .brandmark__logo { width: 9.5rem; }
  .connect-header__site { font-size: .8rem; }
  .connect-hero { padding-block: 3rem 4.25rem; }
  .connect-hero h1 { font-size: clamp(2.35rem, 12vw, 3.2rem); }
  .connect-hero__actions .button { width: 100%; }
  .connect-offerline { margin-top: 1.75rem; }
  .connect-offerline li { padding-inline: .55rem; }
  .connect-offerline strong { font-size: .8rem; }
  .connect-signal { padding: 1.5rem; }
  .connect-progress { margin-inline: -.75rem; padding-inline: .75rem; border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .connect-progress__top > p { font-size: .58rem; }
  .connect-progress ol { gap: .2rem; }
  .connect-progress li { font-size: .62rem; }
  .connect-progress li::before { display: block; margin: 0 0 .25rem; }
  .connect-choices { grid-template-columns: 1fr; }
  .connect-choice { min-height: 104px; }
  .connect-demo__head { grid-template-columns: 1fr auto; gap: .35rem 1rem; }
  .connect-demo__head > p { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .connect-demo__controls { grid-column: 2; grid-row: 1; }
  .connect-demo__body { padding: 1.5rem 1rem; }
  .connect-workflow li { grid-template-columns: 2.25rem 1fr .65rem; gap: .75rem; padding-inline: .75rem; }
  .connect-savings { padding: 1.5rem 1rem; }
  .connect-slider { grid-template-columns: 1fr; }
  .connect-slider output { text-align: left; }
  .connect-recommendation__actions .button { width: 100%; }
  .connect-footer__inner { flex-direction: column; }
}

@media (max-width: 380px) {
  .connect-header .brandmark__logo { width: 8.6rem; }
  .connect-header__site span { display: none; }
  .connect-offerline { grid-template-columns: 1fr; }
  .connect-offerline li { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; }
  .connect-offerline li + li { border-left: 0; border-top: 1px solid var(--line); }
  .connect-choice { grid-template-columns: 1.85rem 1fr auto; gap: .7rem; padding: 1rem; }
  .connect-recommendation__top { align-items: start; }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .connect-boot { display: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal], .line[data-armed] { opacity: 1 !important; transform: none !important; }
}

/* honeypot — off-screen for sighted users, ignored by AT, filled only by bots */
.bform__honey {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}