/* Kimble Accounting — draft site
   Palette sampled directly from the client's own logo + cover art:
   #1A1E21 charcoal, #8B2331 crimson, #82C5D4 sky, #FFFFFF.

   HARD RULE: crimson is never text on charcoal (~1.9:1, unreadable). Crimson is a
   FILL with white type on top. --sky carries every accent text/link. */

:root {
  --ink:       #1A1E21;
  --ink-2:     #212629;  /* raised panels */
  --ink-3:     #2C3237;  /* hairlines */
  --ink-4:     #171A1D;  /* recessed / deepest ground */
  --crimson:   #8B2331;
  --crimson-hi:#A62B3C;
  --sky:       #82C5D4;
  --sky-dim:   #5E9AA8;
  --paper:     #FFFFFF;
  --text:      #E4E8EA;
  --muted:     #9BA5AB;

  --serif: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Jost", ui-sans-serif, "Segoe UI", system-ui, -apple-system, sans-serif;

  --maxw: 1120px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 8rem);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --stripe-angle: 12deg;

  --shadow-card: 0 18px 40px -20px rgba(0,0,0,.85);
  --shadow-lift: 0 30px 60px -24px rgba(0,0,0,.95);
}

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

/* Native smooth scroll is the no-JS path for anchor links. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Lenis ────────────────────────────────────────────────────────────────
   Lenis ships a required stylesheet alongside its JS. Without it, native
   smooth-scroll and Lenis both animate the same scroll position and fight,
   which desyncs the painted frame from the real scroll offset — sections
   render blank while the DOM insists they are on screen. When Lenis is
   active it takes over and native smooth scroll must be OFF. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* `clip`, NOT `hidden`. overflow-x:hidden turns body into a scroll container,
     which silently breaks every position:sticky on the page. `clip` hides the
     same overflow without creating one. Same reason the sections below use it. */
  overflow-x: clip;
}

/* ── The v1 bug that stretched the headshot and the footer logo ───────────
   Without height:auto the HTML height="800" attribute applies as a
   presentational height, so a width-constrained image renders at
   container-width x 800px. Every img needs this, not just .brand img. */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--sky); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--paper); }

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

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--paper); color: var(--ink); padding: .7rem 1.1rem; font-weight: 500; }
.skip:focus { left: 1rem; top: 1rem; }

/* ── Eyebrow ─────────────────────────────────────────────────────────────── */
.eyebrow {
  font-size: .7rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--sky); font-weight: 500; margin: 0 0 1.1rem;
}
.eyebrow--muted { color: var(--muted); }

/* ── Placeholder slot ─────────────────────────────────────────────────────
   Bracketed values Christian still has to confirm. Styled so the page reads
   as finished while never asserting a credential we haven't verified. */
.slot {
  color: var(--sky);
  border-bottom: 1px dashed var(--sky-dim);
  padding-bottom: 1px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── The stripe system ────────────────────────────────────────────────────
   Two parallel bars lifted from the cover art, at a constant 12deg so they
   read as ONE system threading the page rather than per-section decoration.
   Sections alternate which side they enter from. */
/* .stripes is a CLIPPING FRAME that lives in the margin beside the content
   column. The bars rotate and drift INSIDE it, so no combination of angle,
   scroll-scrub and section height can ever paint one over the copy — the frame
   simply cuts it off at the column edge. An inset alone could not guarantee
   this: a 12deg bar spanning 160% of a tall section swings up to ~140px
   horizontally, and the scrub adds another ~130px on top. Text over a sky bar
   is unreadable, so this is structural, not cosmetic. */
.stripes {
  position: absolute;
  top: 0; bottom: 0;
  overflow: clip;
  display: flex;
  gap: clamp(.5rem, 1vw, 1rem);
  pointer-events: none;
  z-index: 0;
}
.stripes--right { left:  calc(50% + (var(--maxw) / 2)); right: 0; }
.stripes--left  { right: calc(50% + (var(--maxw) / 2)); left: 0; }
/* The hero's text column is 44rem, narrower than --maxw, so its frame can start
   closer in and the bars read at full strength. */
.hero .stripes--right { left: calc(50% + 22rem); }
.hero .stripes--left  { right: calc(50% + 22rem); }

/* Each bar rotates about its own centre, which keeps the pair parallel while
   letting the frame above do the clipping. */
.stripes span {
  display: block;
  width: var(--stripe-w, clamp(1.35rem, 3.2vw, 3.1rem));
  height: 160%;
  margin-top: -30%;
  flex: none;
  transform: rotate(var(--stripe-angle)) translate3d(var(--stripe-x, 0), 0, 0);
  will-change: transform;
}
.stripes span:first-child { background: var(--sky); }
.stripes span:last-child  { background: var(--crimson); }

/* Depth: the rear bar sits back a plane — softer and dimmer than the front. */
.stripes span:first-child { opacity: .55; filter: blur(1.5px); }
.stripes span:last-child  { opacity: .8; }

/* Over the hero photograph that treatment goes muddy — translucency plus blur
   reads as a smear against a busy image rather than as two planes. On the photo
   the bars stay crisp and near-solid so they read as the brand device. */
.hero .stripes span:first-child { opacity: .92; filter: none; }
.hero .stripes span:last-child  { opacity: 1; }
.hero .stripes { --stripe-w: clamp(1.6rem, 3.6vw, 3.4rem); }

/* Weight varies by role — heavy where the page should feel loud. */
.stripes--heavy { --stripe-w: clamp(2rem, 5vw, 4.6rem); }
.stripes--thin  { --stripe-w: clamp(.7rem, 1.6vw, 1.5rem); opacity: .5; }

/* On a phone the text column spans the full width, so bars run straight through
   the copy — white type over a sky bar is unreadable. Push them mostly
   off-canvas and drop them back. Hard rule, not a preference. */
/* Between ~900px and the point where the column leaves room, there is simply no
   space beside the content. Rather than drop the motif entirely, the bars hug the
   viewport edge at low opacity — a tint the copy can safely cross. Measured: sky
   at this strength composites to ~rgb(42,55,61), which keeps white body text
   above 12:1 and muted text above 4.5:1. */
@media (max-width: 1179px) {
  .stripes { opacity: .28; }
  .stripes--right, .hero .stripes--right { left: auto; right: 0; width: clamp(4rem, 16vw, 9rem); }
  .stripes--left,  .hero .stripes--left  { right: auto; left:  0; width: clamp(4rem, 16vw, 9rem); }
}

/* `clip` keeps the rotated stripes from spilling without becoming a scroll
   container — sticky children (the pinned hero photo, the portrait rail) need
   every ancestor to stay non-scrolling. */
.section, .hero, .site-footer, .cta-band { position: relative; overflow: clip; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(26, 30, 33, .82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
}
.site-header.is-stuck { border-bottom-color: var(--ink-3); background: rgba(26,30,33,.95); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .85rem;
}
.brand img { width: clamp(140px, 26vw, 205px); }
.header__right { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.nav { display: none; gap: 1.6rem; align-items: center; }
.nav a { color: var(--text); text-decoration: none; font-size: .875rem; letter-spacing: .04em; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--sky); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--crimson);
  text-decoration-thickness: 2px; text-underline-offset: 8px; }
@media (min-width: 1100px) { .nav { display: flex; } }

/* The CTA never collapses with the nav links — a phone visitor loses the menu,
   they must not also lose the one button. */
.header__cta { white-space: nowrap; }
.header__cta-long { display: none; }
.header__cta-short { display: inline; }
@media (min-width: 560px) {
  .header__cta-long { display: inline; }
  .header__cta-short { display: none; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem 1.85rem;
  font-family: var(--sans); font-size: .875rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  position: relative;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.btn--primary {
  background: var(--crimson); color: var(--paper);
  box-shadow: 0 12px 30px -14px rgba(139,35,49,.9);
}
.btn--primary:hover {
  background: var(--crimson-hi); color: var(--paper);
  transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(166,43,60,1);
}
.btn--ghost { border-color: #4A5257; color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--sky); color: var(--sky); transform: translateY(-2px); }
.btn--onlight { background: var(--paper); color: var(--crimson); }
.btn--onlight:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn--sm { padding: .7rem 1.2rem; font-size: .8rem; }
button[disabled] { opacity: .55; cursor: progress; }

/* ── The stage: a pinned photograph the page rides over ───────────────────
   The aerial is sticky for the whole first act, so it holds still while the
   hero copy, the trust bar and the services grid scroll up over it. That
   difference in rate — foreground moving, background not — is what reads as
   depth. The solid-ground sections then cover it like cards sliding over.

   Height maths: .stage__content is pulled up by exactly the media's height,
   so the stage measures the content and the photo pins from the top of the
   hero until the bottom of the last section inside it. */
.stage { position: relative; }
.stage__media {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
}
.stage__content { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; }

/* Sections riding over the pinned photo need their own ground, or the image
   shows through raw and text contrast becomes whatever the photograph happens
   to be doing. Near-opaque at the top so the aerial is just sensed behind the
   leading edge, fully solid by the bottom. */
.stage .section {
  background: linear-gradient(to bottom, rgba(26,30,33,.86) 0%, rgba(26,30,33,.98) 42%, var(--ink) 100%);
}

/* Layer stack, back to front: photo → duotone/darken filter → left-weighted
   scrim → vertical scrim that ends fully opaque so the photo dissolves into
   the page with no seam → stripes → content. */
.hero {
  min-height: 92svh;
  display: grid; align-content: center;
  padding-block: clamp(4rem, 10vw, 7rem) clamp(4rem, 9vw, 6rem);
  isolation: isolate;
}

.stage__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%;
  /* Knock the sunset orange back toward his palette and darken for type. */
  filter: saturate(.5) contrast(1.06) brightness(.6);
  /* Sticky already supplies the rate difference, so no translate here — only a
     slow scale, or the image would drift away from its pinned frame. */
  transform: scale(var(--kb, 1.06));
  transform-origin: 60% 40%;
  will-change: transform;
}
/* Left-weighted: darkest where the headline sits, opening up to the right. */
.stage__media::before,
.stage__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.stage__media::before {
  background: linear-gradient(100deg,
    rgba(26,30,33,.96) 0%, rgba(26,30,33,.90) 32%,
    rgba(26,30,33,.60) 62%, rgba(26,30,33,.42) 100%);
}
.stage__media::after {
  background: linear-gradient(to bottom,
    rgba(26,30,33,.80) 0%, rgba(26,30,33,.42) 26%,
    rgba(26,30,33,.55) 62%, rgba(26,30,33,.94) 88%, var(--ink) 100%);
}

.hero .wrap { position: relative; z-index: 2; }
.hero__inner { max-width: 44rem; }
/* Over the photograph the brand sky lands at 5.5:1 — fine for AA, short of AAA
   for text this small. A lighter tint of the same hue clears 7:1 without
   changing the colour's identity. Measured on composited pixels, not tokens. */
.hero .eyebrow { color: #A9DAE5; }
.hero h1 { font-size: clamp(2.5rem, 1.5rem + 4.7vw, 4.5rem); }
.hero__sub {
  font-size: clamp(1.075rem, 1rem + 0.4vw, 1.3rem);
  color: #C9D1D5; margin-top: 1.5rem; max-width: 36rem; line-height: 1.6;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.5rem; }
.hero__risk {
  margin-top: 1.5rem; font-size: .85rem; color: var(--muted);
  display: flex; align-items: center; gap: .55rem;
}
.hero__risk::before {
  content: ""; width: 7px; height: 7px; flex: none;
  background: var(--sky); transform: rotate(45deg);
}

/* ── Trust bar ────────────────────────────────────────────────────────────
   Sits directly under the hero. A brand-new firm's hardest problem is
   "who is this person" — so credentials come before services. */
.trust { background: var(--ink-4); border-block: 1px solid var(--ink-3); position: relative; z-index: 3; }
.trust ul {
  list-style: none; margin: 0; padding: 1.6rem 0;
  display: grid; gap: 1.1rem clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
/* Four items: two by two on tablets, one row on desktop, never three plus an orphan. */
@media (min-width: 640px) { .trust ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .trust ul { grid-template-columns: repeat(4, 1fr); } }
.trust li { display: flex; align-items: flex-start; gap: .75rem; font-size: .9rem; line-height: 1.4; }
.trust li::before {
  content: ""; width: 9px; height: 9px; flex: none; margin-top: .35rem;
  border: 2px solid var(--sky); transform: rotate(45deg);
}
.trust b { display: block; color: var(--paper); font-weight: 500; letter-spacing: .01em; }
.trust span { color: var(--muted); font-size: .82rem; }

/* ── Generic section ─────────────────────────────────────────────────────── */
.section { padding-block: var(--section-y); }
.section--alt { background: var(--ink-2); border-block: 1px solid var(--ink-3); }
.section--deep { background: var(--ink-4); border-block: 1px solid var(--ink-3); }
/* Vignette gives each ground a centre of gravity instead of flat colour. */
.section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(130,197,212,.055), transparent 62%);
}
.section .wrap { position: relative; z-index: 1; }

.section__head { max-width: 40rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section__head h2 { font-size: clamp(1.9rem, 1.35rem + 2.5vw, 3rem); }
.section__head p { color: var(--muted); margin-top: 1.1rem; }

.rule { width: 3.25rem; height: 3px; background: var(--crimson); border: 0; margin: 0 0 1.6rem; }
.rule--sky { background: var(--sky); }

.section__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ── Services ────────────────────────────────────────────────────────────── */
.cards { display: grid; gap: 1px; background: var(--ink-3); border: 1px solid var(--ink-3);
  box-shadow: var(--shadow-card); }
@media (min-width: 640px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--ink); padding: clamp(1.9rem, 3vw, 2.5rem);
  position: relative; overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transform-style: preserve-3d;
  transition: transform .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.section--alt .card { background: var(--ink-2); }
.card:hover { background: #252B2F; box-shadow: var(--shadow-lift); z-index: 2; }
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--sky); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.card:hover::before { transform: scaleX(1); }

/* Oversized ghost numeral for depth behind the copy. */
.card__ghost {
  position: absolute; right: -.4rem; bottom: -2.2rem;
  font-family: var(--serif); font-size: 7.5rem; line-height: 1;
  color: var(--paper); opacity: .04; pointer-events: none; user-select: none;
}
.card__num {
  font-family: var(--serif); font-size: .85rem; color: var(--sky);
  letter-spacing: .1em; display: block; margin-bottom: 1.1rem; position: relative;
}
.card h3 { font-size: 1.32rem; margin-bottom: .8rem; position: relative; }
.card p { color: var(--muted); font-size: .95rem; margin: 0; position: relative; }

/* ── Steps ───────────────────────────────────────────────────────────────── */
.steps { display: grid; gap: clamp(2rem, 4vw, 3rem); counter-reset: step; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-top: 2.5rem; border-top: 1px solid var(--ink-3); }
.step::before {
  counter-increment: step; content: "0" counter(step);
  position: absolute; top: 1.15rem; left: 0;
  font-family: var(--serif); font-size: .95rem; color: var(--sky); letter-spacing: .08em;
}
.step h3 { font-size: 1.28rem; margin-bottom: .7rem; }
.step p { color: var(--muted); font-size: .95rem; }

/* ── Who I work with ─────────────────────────────────────────────────────── */
.fits { display: grid; gap: 1px; background: var(--ink-3); border: 1px solid var(--ink-3); }
@media (min-width: 700px) { .fits { grid-template-columns: repeat(2, 1fr); } }
.fit { background: var(--ink-4); padding: clamp(1.5rem, 3vw, 2.1rem); }
.fit h3 { font-size: 1.1rem; margin-bottom: .55rem; }
.fit p { color: var(--muted); font-size: .93rem; margin: 0; }
.fits__note { margin-top: 1.75rem; color: var(--muted); font-size: .93rem; }

/* ── The journey: a pinned portrait beside the whole back half ────────────
   Christian's face stays put from the About copy all the way down to the
   contact form, while the promises, the FAQ and the form scroll past it. One
   continuous act instead of four separate blocks — and a face beside the form
   at the moment of decision. */
.journey__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 900px) {
  .journey__grid { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); align-items: start; }
  /* align-self:start is required — a stretched grid item has no room to stick. */
  .journey__rail { position: sticky; top: 6.5rem; align-self: start; }
}
.journey__flow > * + * { margin-top: clamp(3.5rem, 8vw, 6rem); }

.journey__rail .about__portrait img { transform: scale(var(--kb, 1)); transform-origin: 50% 35%; }
.rail__id { margin-top: 1.75rem; }
.rail__id h3 { font-size: 1.3rem; margin-bottom: .3rem; }
.rail__id .rail__role {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sky);
  margin: 0 0 1.1rem;
}
.rail__facts { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.rail__facts li {
  font-size: .84rem; color: var(--muted); padding: .45rem 0;
  border-bottom: 1px solid var(--ink-3); display: flex; gap: .6rem; align-items: baseline;
}
.rail__facts li::before {
  content: ""; width: 6px; height: 6px; flex: none;
  background: var(--sky); transform: rotate(45deg);
}

/* ── Promises ────────────────────────────────────────────────────────────
   Every line here traces to Christian's own post — no commitments invented
   on his behalf beyond what he already said in public. */
.promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--ink-3); border: 1px solid var(--ink-3); }
.promise { background: var(--ink); padding: clamp(1.4rem, 3vw, 1.9rem); }
.section--alt .promise { background: var(--ink-2); }
.promise h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.promise p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ── About ───────────────────────────────────────────────────────────────── */
.about { display: grid; gap: clamp(2.25rem, 5vw, 4rem); align-items: start; }
@media (min-width: 860px) { .about { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } }
.about__portrait { position: relative; }
.about__portrait img {
  width: 100%;
  aspect-ratio: 571 / 800;   /* the file's true ratio — belt and braces */
  object-fit: cover;
  filter: grayscale(.2) contrast(1.05) brightness(.96);
  box-shadow: var(--shadow-card);
}
.about__portrait::after {
  content: ""; position: absolute; left: -12px; bottom: -12px;
  width: 76px; height: 76px;
  border-left: 3px solid var(--crimson); border-bottom: 3px solid var(--crimson);
}
.about h2 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem); margin-bottom: 1.4rem; }
.about__body p { color: var(--muted); }
.about__body p.lead { color: var(--text); font-size: 1.12rem; }
.about__sig { font-family: var(--serif); font-style: italic; color: var(--sky);
  font-size: 1.05rem; margin-top: 1.6rem; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--ink-3); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.4rem 2.5rem 1.4rem 0; position: relative;
  font-family: var(--serif); font-size: 1.15rem; color: var(--paper);
  transition: color .25s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--sky); border-bottom: 2px solid var(--sky);
  transform: rotate(45deg); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq summary:hover { color: var(--sky); }
.faq__a { padding: 0 1.5rem 1.5rem 0; color: var(--muted); font-size: .97rem; }

/* ── CTA band ────────────────────────────────────────────────────────────── */
.cta-band { background: var(--crimson); padding-block: clamp(3.5rem, 8vw, 5.5rem); }
.cta-band .wrap { position: relative; z-index: 1; text-align: center; }
.cta-band h2 { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.75rem); color: var(--paper); }
.cta-band p { color: rgba(255,255,255,.86); max-width: 34rem; margin: 1.1rem auto 0; }
.cta-band .btn { margin-top: 2.2rem; }
/* Sky bars only — crimson on crimson would vanish. */
.cta-band .stripes span:last-child { background: rgba(255,255,255,.22); }
.cta-band .stripes span:first-child { background: rgba(130,197,212,.5); }

/* ── Contact ─────────────────────────────────────────────────────────────── */
.contact { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.contact__aside p { color: var(--muted); }
.contact__aside h2 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem); margin-bottom: 1.2rem; }
.contact__direct { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--ink-3); }
.contact__direct dt {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .35rem;
}
.contact__direct dd { margin: 0 0 1.35rem; font-size: 1.02rem; }
.contact__direct dd:last-child { margin-bottom: 0; }

.form-card {
  background: var(--ink-2); border: 1px solid var(--ink-3);
  padding: clamp(1.5rem, 3.5vw, 2.5rem); box-shadow: var(--shadow-card);
}
form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .45rem; }
.field--row { display: grid; gap: 1.15rem; }
@media (min-width: 560px) { .field--row { grid-template-columns: 1fr 1fr; } }
label { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
label .opt { text-transform: none; letter-spacing: 0; font-size: .8rem; opacity: .75; }
input, select, textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--text);
  background: var(--ink); border: 1px solid var(--ink-3);
  padding: .9rem .95rem; width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:hover, select:hover, textarea:hover { border-color: #414A50; }
input:focus, select:focus, textarea:focus {
  border-color: var(--sky); outline: none; box-shadow: 0 0 0 3px rgba(130,197,212,.12);
}
input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--crimson-hi); }
.field__err { font-size: .78rem; color: #E38A96; text-transform: none; letter-spacing: 0; min-height: 0; }
textarea { resize: vertical; min-height: 7.5rem; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--sky) 50%),
                    linear-gradient(135deg, var(--sky) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 2.75rem;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-next {
  margin: 0; font-size: .84rem; color: var(--muted);
  padding-left: 1.1rem; border-left: 2px solid var(--ink-3);
}
.form-note { font-size: .82rem; color: var(--muted); margin: 0; }

.form-status { display: none; padding: 1rem 1.15rem; font-size: .95rem; border-left: 3px solid; }
.form-status.is-on { display: block; }
.form-status--ok  { border-color: var(--sky); background: rgba(130,197,212,.09); color: var(--text); }
.form-status--err { border-color: var(--crimson-hi); background: rgba(166,43,60,.14); color: var(--text); }
.form-status a { color: var(--sky); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--ink-3); padding-block: clamp(3rem, 6vw, 4.5rem);
  background: var(--ink-4); }
.site-footer .wrap { position: relative; z-index: 1; }
.footer__grid { display: grid; gap: 2.2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer__list a { color: var(--muted); text-decoration: none; font-size: .9rem; }
.footer__list a:hover { color: var(--sky); }
.footer__legal p + p { margin-top: .35rem; }
.site-footer img { width: 185px; margin-bottom: 1.25rem; }
.site-footer p { color: var(--muted); font-size: .88rem; margin: 0 0 .4rem; }
.footer__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-3); }
.footer__legal p { font-size: .78rem; color: #6E777C; }

/* ── Sticky mobile CTA ────────────────────────────────────────────────────
   Thumb-zone action bar. Desktop keeps the header CTA instead. */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; gap: 1px; background: var(--ink-3);
  transform: translateY(110%); transition: transform .4s var(--ease);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-cta.is-on { transform: translateY(0); }
.mobile-cta a, .mobile-cta button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1.05rem .75rem; text-decoration: none;
  font-size: .8rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
}
.mobile-cta .m-call { background: var(--ink-2); color: var(--text); }
.mobile-cta .m-consult { background: var(--crimson); color: var(--paper); }
@media (min-width: 900px) { .mobile-cta { display: none; } }
/* Keep the bar from covering the end of the page. */
@media (max-width: 899px) { .site-footer { padding-bottom: 5.5rem; } }

/* ── Draft banner (removed before this ever goes near production) ────────── */
.draft-flag {
  background: var(--crimson); color: var(--paper);
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  text-align: center; padding: .5rem 1rem; margin: 0;
}

/* ── Motion ──────────────────────────────────────────────────────────────
   Everything above renders fully WITHOUT JavaScript. motion.js opts the page
   into animation by adding .js-motion to <html>; only then does .reveal start
   hidden. If the script never runs, fails, is blocked, or the vendored
   libraries 404, the page is simply a complete static site — it can never
   blank out. This is the single most important rule in the file. */
.js-motion .reveal {
  opacity: 0;
  transform: translateY(var(--rise, 18px));
  transition: opacity var(--rise-t, .8s) var(--ease), transform var(--rise-t, .8s) var(--ease);
}
.js-motion .reveal.is-in { opacity: 1; transform: none; }

/* Not everything should arrive at the same speed. Heavy things travel further
   and settle slower, light things barely move — so the scroll has a cadence
   instead of one uniform fade repeated twenty times. */
.js-motion [data-weight="heavy"] { --rise: 40px; --rise-t: 1.15s; }
.js-motion [data-weight="light"] { --rise: 9px;  --rise-t: .55s; }

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal { opacity: 1; transform: none; transition: none; }
  .stage__media img { transform: none !important; }
  .stripes span { transform: rotate(var(--stripe-angle)) !important; }
  .card { transform: none !important; }
}

/* ══ Multi-page additions (September build) ═══════════════════════════════
   Everything below extends the August system for the full site. Same tokens,
   same rules: crimson is a fill, sky carries accent text, and nothing is hidden
   unless a .js-* class says JavaScript is present to show it again. */

/* ── Mobile menu ─────────────────────────────────────────────────────────
   <details>, so it opens with no JavaScript at all. */
.menu { position: relative; }
@media (min-width: 1100px) { .menu { display: none; } }
.menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .55rem;
  padding: .55rem .7rem; border: 1px solid #4A5257; color: var(--text);
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
}
.menu summary::-webkit-details-marker { display: none; }
.menu__bars { display: grid; gap: 4px; width: 16px; }
.menu__bars i { display: block; height: 2px; background: var(--sky); transition: transform .3s var(--ease); }
.menu[open] .menu__bars i:first-child { transform: translateY(3px) rotate(45deg); }
.menu[open] .menu__bars i:last-child { transform: translateY(-3px) rotate(-45deg); }
@media (max-width: 420px) { .menu__label { display: none; } }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + .85rem); z-index: 70;
  width: min(20rem, calc(100vw - 2rem));
  display: grid; background: var(--ink-2); border: 1px solid var(--ink-3);
  box-shadow: var(--shadow-lift); padding: .5rem;
}
.menu__panel a { color: var(--text); text-decoration: none; padding: .8rem .9rem; font-size: .95rem; border-bottom: 1px solid var(--ink-3); }
.menu__panel a:hover, .menu__panel a[aria-current="page"] { color: var(--sky); }
.menu__panel .menu__cta { margin-top: .5rem; border: 0; background: var(--crimson); color: var(--paper); text-align: center;
  font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 500; }
.menu__panel .menu__cta:hover { background: var(--crimson-hi); color: var(--paper); }

/* ── Page hero (interior pages) ─────────────────────────────────────────── */
.page-hero {
  position: relative; overflow: clip; isolation: isolate;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(130,197,212,.09), transparent 60%),
    linear-gradient(to bottom, var(--ink-4), var(--ink));
  border-bottom: 1px solid var(--ink-3);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .stripes--right { left: calc(50% + 24rem); }
@media (max-width: 1179px) { .page-hero .stripes--right { left: auto; } }
.page-hero__inner { max-width: 46rem; }
.page-hero h1 { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 3.7rem); }
.page-hero__lead { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: #C9D1D5; margin-top: 1.4rem; max-width: 38rem; }
.page-hero .hero__actions { margin-top: 2.2rem; }
.page-hero--404 { min-height: 60svh; display: grid; align-content: center; }

.crumbs ol { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .6rem;
  font-size: .78rem; letter-spacing: .06em; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: .6rem; color: #4A5257; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--sky); }
.crumbs [aria-current] { color: var(--text); }

/* ── Type helpers ────────────────────────────────────────────────────────── */
.h1-page { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.3rem); }
.h2-md { font-size: clamp(1.8rem, 1.35rem + 2vw, 2.55rem); margin-bottom: 1.4rem; }
.h2-sm { font-size: clamp(1.55rem, 1.25rem + 1.4vw, 2.1rem); margin-bottom: 1.4rem; }
.split .h2-md, .section__head .h2-md { margin-bottom: 0; }
.muted-lead { color: var(--muted); margin-top: 1rem; max-width: 34rem; }
.note { color: var(--muted); font-size: .92rem; margin-top: 1.75rem; }
.section--thin .note { margin: 0; }
.text-link { display: inline-flex; align-items: center; gap: .55rem; font-size: .8rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.text-link::after, .card__more::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--ease); }
.text-link:hover::after { transform: translateX(3px) rotate(45deg); }

.prose p { color: var(--muted); }
.prose p.lead { color: var(--text); font-size: 1.12rem; }
.prose h2:not(:first-child) { margin-top: 2.6rem; }
.narrow { max-width: 46rem; }

.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.section--thin { padding-block: 2.25rem; }
.section__head--follow { margin-top: clamp(3.5rem, 7vw, 5rem); margin-bottom: 2rem; }

.callout { border-left: 3px solid var(--crimson); background: var(--ink-2); padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 50rem; box-shadow: var(--shadow-card); }
.callout p { color: var(--muted); }
.callout .h2-sm { margin-bottom: 1rem; }

/* ── Cards as links ──────────────────────────────────────────────────────── */
.card--link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.card--link p { flex: 1; }
.card__more { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.5rem; position: relative;
  color: var(--sky); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.card--link:hover .card__more::after { transform: translateX(3px) rotate(45deg); }
.card--link:hover h3 { color: var(--sky); }

/* ── Promises grid ───────────────────────────────────────────────────────── */
.promises--grid { grid-template-columns: 1fr; }
@media (min-width: 700px) { .promises--grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .promises--three { grid-template-columns: repeat(3, 1fr); } }
.section--alt .promises .promise, .section--deep .promises .promise { background: var(--ink); }

/* ── Steps variants ──────────────────────────────────────────────────────── */
.steps--stack { grid-template-columns: 1fr !important; gap: 1.6rem; margin: 1.6rem 0; }
@media (min-width: 800px) { .steps--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps--four { grid-template-columns: repeat(4, 1fr); } }

/* ── Timeline (how it works) ─────────────────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; counter-reset: tl; max-width: 48rem; }
.timeline li { position: relative; padding: 0 0 2.4rem 4rem; }
.timeline li::before {
  counter-increment: tl; content: counter(tl);
  position: absolute; left: 0; top: -.2rem; width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  font-family: var(--serif); color: var(--paper); background: var(--crimson); font-size: 1.05rem;
}
.timeline li::after { content: ""; position: absolute; left: 1.3rem; top: 2.8rem; bottom: .3rem; width: 1px; background: var(--ink-3); }
.timeline li:last-child::after { display: none; }
.timeline h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.timeline p { color: var(--muted); margin: 0; }

/* ── Fit / not fit ───────────────────────────────────────────────────────── */
.fitlists { display: grid; gap: 1px; background: var(--ink-3); border: 1px solid var(--ink-3); margin-top: 1.4rem; }
@media (min-width: 700px) { .fitlists { grid-template-columns: 1fr 1fr; } }
.journey .fitlists { grid-template-columns: 1fr; }
@media (min-width: 1100px) { .journey .fitlists { grid-template-columns: 1fr 1fr; } }
.fitlist { background: var(--ink-4); padding: clamp(1.4rem, 3vw, 2rem); }
.fitlist h3 { font-size: 1.12rem; margin-bottom: 1rem; }
.fitlist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.fitlist li { position: relative; padding-left: 1.6rem; color: var(--muted); font-size: .94rem; line-height: 1.5; }
.fitlist li::before { content: ""; position: absolute; left: 0; top: .45rem; }
.fitlist--yes li::before { width: 10px; height: 6px; border-left: 2px solid var(--sky); border-bottom: 2px solid var(--sky); transform: rotate(-45deg); }
.fitlist--no li::before { width: 10px; height: 2px; top: .7rem; background: #C96A78; }

/* ── Facts list (about) ──────────────────────────────────────────────────── */
.facts { list-style: none; margin: 1.4rem 0 0; padding: 0; border-top: 1px solid var(--ink-3); }
.facts li { display: grid; gap: .2rem; padding: 1rem 0; border-bottom: 1px solid var(--ink-3); }
@media (min-width: 640px) { .facts li { grid-template-columns: 14rem 1fr; gap: 1.5rem; } }
.facts b { color: var(--paper); font-weight: 500; }
.facts span { color: var(--muted); }

/* ── Town links ──────────────────────────────────────────────────────────── */
.town-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--ink-3); border: 1px solid var(--ink-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.town-links a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  background: var(--ink); padding: 1.3rem 1.4rem; text-decoration: none; color: var(--paper);
  font-family: var(--serif); font-size: 1.2rem; transition: background-color .25s var(--ease), color .25s var(--ease); }
.town-links small { font-family: var(--sans); font-size: .72rem; letter-spacing: .18em; color: var(--sky); }
.town-links a:hover { background: var(--ink-2); color: var(--sky); }

/* ── Start page ──────────────────────────────────────────────────────────── */
.section--start { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-y);
  background: radial-gradient(90% 80% at 10% 0%, rgba(130,197,212,.07), transparent 60%), var(--ink); }
/* Phones: heading, then the form, then the details. Desktop: heading and details
   on the left, the form beside them. Nobody scrolls past contact info to find the form. */
.start { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem) clamp(2rem, 5vw, 4rem); align-items: start;
  grid-template-areas: "intro" "form" "details"; }
.start__intro { grid-area: intro; }
.start__form { grid-area: form; }
.start__details { grid-area: details; }
.start__details .mini-steps { margin-top: 0; }
@media (min-width: 980px) { .start { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr; grid-template-areas: "intro form" "details form"; } }
.mini-steps { list-style: none; counter-reset: ms; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.mini-steps li { counter-increment: ms; position: relative; padding-left: 2.6rem; color: var(--muted); font-size: .95rem; }
.mini-steps li::before { content: counter(ms); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center; border: 1px solid var(--sky-dim); color: var(--sky); font-family: var(--serif); font-size: .85rem; }
.mini-steps b { color: var(--text); font-weight: 500; display: block; }

/* ── Fit check ───────────────────────────────────────────────────────────── */
.fit-block__form { margin-top: 2rem; }
.fitcheck { gap: 1.4rem; }
/* Without JS a progress bar would lie, so it only shows when steps are live. */
.fc-progress { display: none; list-style: none; margin: 0 0 .4rem; padding: 0; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.js-fc .fc-progress { display: grid; }
.fc-progress li { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border-top: 2px solid var(--ink-3); padding-top: .6rem; display: flex; gap: .45rem; align-items: baseline; line-height: 1.3; }
.fc-progress li span { font-family: var(--serif); color: var(--sky-dim); letter-spacing: 0; font-size: .85rem; }
.fc-progress li.is-current { border-top-color: var(--crimson); color: var(--text); }
.fc-progress li.is-done { border-top-color: var(--sky-dim); }
@media (max-width: 480px) { .fc-progress li { font-size: 0; gap: 0; } .fc-progress li span { font-size: .85rem; } }

.fc-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1.15rem; }
.fc-step + .fc-step { border-top: 1px solid var(--ink-3); padding-top: 1.6rem; }
.js-fc .fc-step { display: none; border-top: 0; padding-top: 0; }
.js-fc .fc-step.is-current { display: grid; animation: fcIn .45s var(--ease); }
@keyframes fcIn { from { opacity: .01; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js-fc .fc-step.is-current { animation: none; } }
.fc-legend { font-family: var(--serif); font-size: 1.35rem; color: var(--paper); padding: 0; margin-bottom: .2rem; }

.fc-q { display: grid; gap: .6rem; }
.fc-qlabel { margin: 0; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choices--grid { display: grid; grid-template-columns: 1fr; gap: .55rem; }
@media (min-width: 520px) { .choices--grid { grid-template-columns: 1fr 1fr; } }
.choice { position: relative; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--text); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__box { display: grid; gap: .15rem; padding: .7rem 1rem; border: 1px solid var(--ink-3); background: var(--ink);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; height: 100%; }
.choices--grid .choice__box { padding: .9rem 1rem; }
.choice__label { font-size: .95rem; color: var(--text); }
.choice__hint { font-size: .8rem; color: var(--muted); }
.choice:hover .choice__box { border-color: #414A50; }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--sky); outline-offset: 2px; }
.choice input:checked + .choice__box { border-color: var(--sky); background: rgba(130,197,212,.1); box-shadow: inset 3px 0 0 var(--sky); }
.choice input:checked + .choice__box .choice__label { color: var(--paper); }
.fc-step .field__err:empty { display: none; }

/* Next/Back need JS. The submit button must exist without it, so the last
   step's nav always shows and only its Back button waits for JS. */
.fc-nav { display: none; gap: .75rem; justify-content: flex-end; flex-wrap: wrap; margin-top: .4rem; }
.fc-nav [data-back] { margin-right: auto; }
.js-fc .fc-nav, .fc-step[data-step="3"] .fc-nav { display: flex; }
.fc-step[data-step="3"] .fc-nav [data-back] { display: none; }
.js-fc .fc-step[data-step="3"] .fc-nav [data-back] { display: inline-flex; }

.fc-note { margin: 0; padding: .85rem 1rem; border-left: 3px solid var(--sky); background: rgba(130,197,212,.08); font-size: .9rem; color: var(--text); }
.fc-warn { font-size: .8rem; color: var(--muted); margin: .2rem 0 0; }
.fc-result { padding: clamp(1.25rem, 3vw, 1.75rem); border-left: 3px solid var(--sky); background: rgba(130,197,212,.08); }
.fc-result:focus { outline: none; }
.fc-result h3 { font-size: 1.35rem; margin-bottom: .7rem; }
.fc-result p { color: var(--text); }
.fc-result .btn { margin-top: 1rem; }
.fc-result--review { border-left-color: var(--sky-dim); }
.fc-result--refer { border-left-color: var(--crimson-hi); background: rgba(166,43,60,.1); }
.js-fc .fc-progress[hidden], .fc-prep[hidden] { display: none; }
/* Step 4: his Microsoft Bookings page. It renders light, so it sits on paper. */
.fc-cal { margin-top: 1.1rem; background: #fff; border: 1px solid var(--ink-3); }
.fc-cal iframe { display: block; width: 100%; height: 820px; border: 0; }
@media (max-width: 520px) { .fc-cal iframe { height: 900px; } }
.fc-cal--placeholder { background: rgba(130,197,212,.06); border-style: dashed; padding: clamp(1.25rem, 3vw, 2rem); min-height: 220px; display: grid; align-items: center; }
.fc-cal--placeholder p { margin: 0; font-size: .95rem; }
.fc-cal__alt { margin: .8rem 0 0; font-size: .82rem; color: var(--muted); }

/* ── FAQ spacing inside sections ─────────────────────────────────────────── */
.faq-wrap .h2-sm { margin-bottom: .5rem; }

/* ── Question assistant ──────────────────────────────────────────────────
   Runs in the browser only. Sends nothing anywhere. */
.ka-chat-btn {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 65;
  display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.15rem;
  background: var(--ink-2); color: var(--paper); border: 1px solid var(--sky-dim); cursor: pointer;
  font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: var(--shadow-lift); transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.ka-chat-btn:hover { transform: translateY(-2px); border-color: var(--sky); }
.ka-chat-btn::before { content: ""; width: 9px; height: 9px; background: var(--sky); transform: rotate(45deg); }
.ka-chat-btn[aria-expanded="true"] { display: none; }
/* Phones: nothing floats over content. The launcher lives in the thumb bar instead
   (chat.js adds .m-chat there), so the floating one is desktop only. */
@media (max-width: 899px) { .ka-chat-btn { display: none; } }
.mobile-cta .m-chat { background: var(--ink-2); color: var(--text); border: 0; font-family: var(--sans); cursor: pointer; }
.mobile-cta .m-consult { flex: 1.5; }
.fitcheck [hidden] { display: none !important; }

.ka-chat {
  position: fixed; right: clamp(.75rem, 3vw, 1.75rem); bottom: clamp(.75rem, 3vw, 1.75rem); z-index: 80;
  width: min(24rem, calc(100vw - 1.5rem)); max-height: min(36rem, calc(100svh - 1.5rem));
  display: flex; flex-direction: column; background: var(--ink-2); border: 1px solid var(--ink-3);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,1);
}
.ka-chat[hidden] { display: none; }
.ka-chat__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1rem; border-bottom: 1px solid var(--ink-3); background: var(--ink-4); }
.ka-chat__head b { font-family: var(--serif); font-weight: 600; color: var(--paper); font-size: 1.02rem; }
.ka-chat__head small { display: block; color: var(--muted); font-size: .72rem; }
.ka-chat__close { background: none; border: 1px solid var(--ink-3); color: var(--text); width: 2rem; height: 2rem; cursor: pointer; font-size: 1rem; line-height: 1; }
.ka-chat__close:hover { border-color: var(--sky); color: var(--sky); }
.ka-chat__log { flex: 1; overflow-y: auto; padding: 1rem; display: grid; gap: .7rem; align-content: start; overscroll-behavior: contain; }
.ka-msg { max-width: 88%; padding: .7rem .9rem; font-size: .9rem; line-height: 1.5; }
.ka-msg--bot { background: var(--ink); border: 1px solid var(--ink-3); color: var(--text); justify-self: start; }
.ka-msg--me { background: rgba(130,197,212,.14); color: var(--paper); justify-self: end; }
.ka-msg a { color: var(--sky); }
.ka-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ka-chip { background: transparent; border: 1px solid #4A5257; color: var(--text); padding: .45rem .7rem; font-family: var(--sans);
  font-size: .8rem; cursor: pointer; text-align: left; }
.ka-chip:hover { border-color: var(--sky); color: var(--sky); }
.ka-chat__form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--ink-3); }
.ka-chat__form input { padding: .7rem .8rem; font-size: .92rem; }
.ka-chat__form button { flex: none; }
.ka-chat__fine { margin: 0; padding: 0 .9rem .7rem; font-size: .7rem; color: var(--muted); }

/* ── Copy revision (9/21 evening): readiness, preparation guide, demo notice ─ */
/* Anchor targets land below the sticky header when arrived at from another page. */
[id] { scroll-margin-top: 8.5rem; }

.h3-lg { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); margin-bottom: 1rem; }
.ready { display: grid; gap: 1px; background: var(--ink-3); border: 1px solid var(--ink-3); margin-top: 1.4rem; }
@media (min-width: 1100px) { .ready { grid-template-columns: 3fr 2fr; } }
.ready__main, .ready__side { background: var(--ink-4); padding: clamp(1.4rem, 3vw, 2rem); }
.ready__main p, .ready__side p { color: var(--muted); font-size: .95rem; }
.ready__side { background: var(--ink-2); border-left: 3px solid var(--sky); }
.ready__side .eyebrow { margin-bottom: .8rem; }

.checklist { list-style: none; counter-reset: ck; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--ink-3); border: 1px solid var(--ink-3); max-width: 52rem; }
.checklist li { counter-increment: ck; position: relative; background: var(--ink); padding: 1.1rem 1.25rem 1.1rem 3.6rem;
  color: var(--muted); font-size: .96rem; }
.checklist li::before { content: counter(ck); position: absolute; left: 1.2rem; top: 1.05rem; width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center; border: 1px solid var(--sky-dim); color: var(--sky); font-family: var(--serif); font-size: .85rem; }
.checklist b { color: var(--text); font-weight: 500; }
.paths { display: grid; gap: 1px; background: var(--ink-3); border: 1px solid var(--ink-3); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { .paths { grid-template-columns: repeat(3, 1fr); } }
.path { background: var(--ink-4); padding: clamp(1.4rem, 3vw, 1.9rem); }
.path h3 { font-size: 1.12rem; margin-bottom: .7rem; }
.path p, .path li { color: var(--muted); font-size: .92rem; }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.plain b { color: var(--text); font-weight: 500; }
.prepare__back { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.prepare__back p { margin: 0; color: var(--text); max-width: 36rem; }

.fc-demo { margin: 0; padding: .75rem 1rem; border: 1px dashed var(--sky-dim); color: var(--sky); font-size: .84rem; }
.fc-help { margin: -.4rem 0 0; font-size: .88rem; color: var(--muted); }
.fc-prep { margin: .2rem 0 0; font-size: .85rem; color: var(--muted); }
.fc-result .btn--ghost { margin-top: .6rem; }
.fc-note a, .form-status a { color: var(--sky); }
.steps--three { margin-bottom: 1rem; }
@media (min-width: 800px) { .steps--three { grid-template-columns: repeat(3, 1fr); } }