/* ==========================================================================
   Marius Works site styles (multi-page, 1 Oct 2026). Layered on web/styles.css
   (tokens, base, buttons, cards, steps, footer, forms). B2 colours and Hanken
   come from brand/tokens.css v1.1.
   ========================================================================== */

:root { --mw-font-headline: var(--mw-font-display); }   /* S1 Hanken, final; one variable */
h1, h2, h3, h4 { font-family: var(--mw-font-headline); }

/* Placeholders the founder still owes: visible in PREVIEW builds only (the live scan blocks them). */
.ph {
  background: var(--mw-color-tbd-bg, #fff4d6); color: var(--mw-color-tbd-text, #5c4400);
  padding: 0 0.3em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  outline: 1px dashed var(--mw-color-warm); outline-offset: 1px;
}
/* Review flag (founder, 8 Oct): text he wants to revisit, shown in RED. Wrap it in <span class="review-flag">…</span>
   (or add the class to a block). The package scan blocks "review-flag", so it can't ship in a clean live build. */
.review-flag { color: #B42318; }
/* Review word highlight (9 Oct): yellow marker on words the founder is reviewing. Preview builds only. */
mark.review-word { background: #FFE58A; color: #1A1A1A; padding: 0 0.12em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.review-word--orange { background: #FFB877; }   /* review-only (9 Oct): "routine(s)"; dark text on orange in both themes */
/* Review text in ORANGE (founder, 13 Oct): a candidate paragraph he is weighing (text colour, not a highlight).
   Add data-review to the block: build.py drops any data-review paragraph from the live build, so these never ship. */
.review-text--orange { color: #B45309; }
.review-text--purple { color: #6D28D9; }
.review-text--teal { color: #0F766E; }   /* fourth review colour (13 Oct): Option A */
.review-label.review-label--first { margin-top: 0; padding-top: 0; border-top: 0; color: var(--mw-color-text-muted); }   /* third review colour (13 Oct): Option C */
.review-label { max-width: 38rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px dashed currentColor; font-family: var(--mw-font-label, inherit);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }   /* "Option B" divider, review only */
@media (prefers-color-scheme: dark) { .review-flag { color: #FF9B91; } .review-text--orange { color: #FDBA74; } .review-text--purple { color: #C4B5FD; } .review-text--teal { color: #5EEAD4; } }

/* --------------------------------------------------------------------------
   Header: a slim full-width ribbon at the very top (founder, 1 Oct: "like apple.com's global nav"),
   in the page colour (white, or Prussian-900 in dark mode), no hamburger.
   ≥ 64rem: one row: logo · links spread evenly across the middle · compact Schedule a Call
   < 64rem: row 1 logo + Schedule a Call; row 2 a single-row tab bar of all links,
            scrollable sideways when it doesn't fit, with a fade hinting at more.
   Under the ribbon: the launch line, plain text (the only "Schedule a Call" at the top is the button).
   -------------------------------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--mw-color-bg); border-bottom: 1px solid var(--mw-color-border); }
.topbar__inner {
  display: grid; align-items: center; column-gap: 2rem;
  grid-template-columns: auto 1fr auto; grid-template-areas: "logo nav cta";
  min-height: 3.25rem;
}
.topbar .wordmark { grid-area: logo; }
.topbar .wordmark__img { height: 1.375rem; }
.topbar__cta { grid-area: cta; white-space: nowrap; padding: 0.45rem 0.95rem; font-size: 0.8125rem; }
.topnav { grid-area: nav; min-width: 0; }
.topnav__list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 34rem;
  display: flex; justify-content: space-evenly; gap: 0.25rem 1.5rem;
}
.topnav__list a {
  display: inline-block; padding: 0.95rem 0.1rem 0.85rem; white-space: nowrap; text-decoration: none;
  color: var(--mw-color-text); font-size: 0.875rem; letter-spacing: 0.01em; border-bottom: 2px solid transparent;
}
.topnav__list a:hover { color: var(--mw-color-accent-text); }
.topnav__list a[aria-current="page"] { color: var(--mw-color-accent-text); border-bottom-color: var(--mw-color-accent); font-weight: 600; }

.launch-banner { background: var(--mw-color-surface-alt); color: var(--mw-color-text-muted); font-size: 0.8125rem; border-bottom: 1px solid var(--mw-color-border); }
.launch-banner p { padding-block: 0.4rem; }

@media (max-width: 63.99rem) {
  .topbar__inner { grid-template-columns: auto auto; grid-template-areas: "logo cta" "nav nav"; justify-content: space-between; min-height: 0; padding-top: 0.55rem; }
  .topnav { position: relative; margin-inline: calc(-1 * var(--mw-gutter)); }
  .topnav__list {
    max-width: none; justify-content: flex-start; gap: 0 1.5rem; overflow-x: auto; scroll-snap-type: x proximity;
    padding: 0.15rem var(--mw-gutter) 0; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .topnav__list::-webkit-scrollbar { display: none; }
  .topnav__list li { scroll-snap-align: start; }
  .topnav__list a { padding: 0.6rem 0.1rem 0.65rem; }
  /* fade on the right edge = "there's more"; JS removes it when everything fits or the end is reached */
  .topnav::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2.5rem; pointer-events: none;
    background: linear-gradient(to right, transparent, var(--mw-color-bg) 85%);
  }
  .topnav.is-end::after, .topnav.fits::after { display: none; }
}
@media (max-width: 26rem) {
  .topbar .wordmark__img { height: 1.25rem; }
}
@media (max-width: 20.99rem) { .topnav__list { gap: 0 1.25rem; } }   /* 320px phones: all four tabs on one row (8 Oct) */
/* anchors clear the taller two-row header */
@media (max-width: 63.99rem) { [id] { scroll-margin-top: 8rem; } }

/* City photo band on inner pages (founder pick, 2 Oct: Prussian duotone, page title on the band; none on Home).
   Brand bakes in the duotone + bottom gradient, and checks white title contrast (4.53–5.09:1) at bottom-left.
   Fixed heights, so nothing shifts while the image loads. Same in dark mode (it fades into Prussian 900). */
.page-band { position: relative; height: clamp(15rem, 25vw, 22.5rem); background: #0F2131; overflow: hidden; }
.page-band picture, .page-band__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-band__img { object-fit: cover; object-position: center bottom; max-width: none; }
.page-band__inner { position: relative; height: 100%; display: flex; align-items: flex-end; }
.page-band__title { margin: 0 0 2.75rem; color: #FFFFFF; font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: 1.1; max-width: none; white-space: nowrap; }
@media (max-width: 40rem) {
  .page-band { height: 13.125rem; }   /* 210px = the 750×420 phone crop at 1× */
  .page-band__title { font-size: 2rem; margin-bottom: 1.125rem; white-space: normal; }
}
.page-hero--banded { padding-top: clamp(2rem, 5vw, 3.5rem); }

/* --------------------------------------------------------------------------
   Page intros (inner pages) and Home hero
   -------------------------------------------------------------------------- */
.page-hero { padding-block: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 4vw, 2.5rem); }
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); max-width: 22ch; }
.page-hero .lede { max-width: 42rem; }
.page-hero + .section { border-top: 0; padding-top: clamp(1.5rem, 4vw, 2.5rem); }

.hero { padding-block: 4rem; }
.hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 56rem) { .hero__grid { grid-template-columns: 7fr 5fr; gap: 4rem; } }
.hero h1 { max-width: 20ch; font-size: clamp(2.25rem, 4.6vw, 3.75rem); }
.hero__diagram { justify-self: end; width: 100%; max-width: 30rem; }
@media (max-width: 55.99rem) { .hero__diagram { justify-self: start; max-width: 20rem; } }
@media (max-width: 47.99rem) { .hero__diagram { display: none; } }
.diagram { margin: 0; }
.diagram svg { display: block; width: 100%; height: auto; }
.t-lab { font: 600 15px var(--mw-font-body); fill: var(--mw-color-accent-text); }
.t-chip { font: 500 14px var(--mw-font-body); fill: var(--mw-color-text); }
.t-base { font: 600 15px var(--mw-font-body); fill: var(--mw-color-on-accent); letter-spacing: .02em; }
/* diagram shapes: tokens, so it reads in light and dark */
.d-chip { fill: var(--mw-color-surface); stroke: var(--mw-color-accent); stroke-width: 1.5; }
.d-lane { fill: var(--mw-color-surface); stroke: var(--mw-color-border); }
.d-arrow { stroke: var(--mw-color-mark); stroke-width: 2.5; fill: none; }
.d-warm-fill { fill: var(--mw-color-mark); }
.d-dot, .d-base { fill: var(--mw-color-accent); }
/* photo placeholder */
.ph-bg { fill: var(--mw-color-border); }
.ph-fg { fill: var(--mw-color-text-muted); opacity: 0.35; }

/* Problem trio (Home) */
.trio { margin: 2rem 0 0; display: grid; gap: 1rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.trio div { padding-top: 0.9rem; border-top: 2px solid var(--mw-color-accent); }
.trio dt { font-weight: 600; color: var(--mw-color-accent-text); }
.trio dd { margin: 0.25rem 0 0; font-size: 0.9375rem; color: var(--mw-color-text-muted); }
.prose-body { max-width: 46rem; }
.prose-body > :last-child { margin-bottom: 0; }

/* Sprint cards (Home summary + Services in full) */
.packages { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin-top: 1.5rem; }
.package { padding: clamp(1.5rem, 3vw, 2rem); background: var(--mw-color-surface); border: 1px solid var(--mw-color-border); border-top: 3px solid var(--mw-color-accent); border-radius: 2px; }
.package h3 { margin-bottom: 0.25rem; }
.package__length { margin: 0 0 1rem; font-family: var(--mw-font-label); font-size: 0.8125rem; font-weight: var(--mw-font-label-weight); letter-spacing: var(--mw-font-label-tracking); text-transform: var(--mw-font-label-transform); color: var(--mw-color-accent-text); }
.package > p:last-child { margin-bottom: 0; }
.package p { color: var(--mw-color-text-muted); }
.package ul { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--mw-color-text); }
.package li + li { margin-top: 0.35rem; }
.package__label { margin: 1.25rem 0 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mw-color-text-muted); }
.note { margin: 1.5rem 0 0; color: var(--mw-color-text-muted); }
.more { margin: 1.5rem 0 0; font-weight: 600; }
.more a { text-decoration: none; }
.more a::after { content: " →"; }

/* Signs list (Services) */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 1.6rem; margin-top: 0.7rem; break-inside: avoid; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--mw-color-warm, #BA5A30); }
@media (min-width: 48rem) { .ticks--2col { columns: 2; column-gap: 2.5rem; } }
.signs { margin-top: 2rem; padding: 1.75rem; background: var(--mw-color-surface); border: 1px solid var(--mw-color-border); border-top: 3px solid var(--mw-color-accent); max-width: 52rem; }
.signs h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }

/* After the sprint (Services) */
.after { display: grid; gap: 1rem 2.5rem; }
@media (min-width: 48rem) { .after { grid-template-columns: 1fr 1fr; } }
.after p { margin: 0; }

/* What makes a sprint different (Services) */
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.points li { padding: 1.5rem; background: var(--mw-color-surface); border: 1px solid var(--mw-color-border); border-top: 3px solid var(--mw-color-accent); border-radius: 2px; }
.point__num { display: block; font-family: var(--mw-font-mono); font-size: 0.8125rem; color: var(--mw-color-warm-text, #9A4523); margin-bottom: 0.75rem; }
.points h3 { font-size: 1.125rem; margin-bottom: 0.4rem; }
.points p { margin: 0; color: var(--mw-color-text-muted); }
.why-close { margin: 1.75rem 0 0; font-family: var(--mw-font-headline); font-weight: var(--mw-font-display-weight); font-size: clamp(1.25rem, 2.4vw, 1.5rem); }

/* What I need from your team (How it works) */
.need { max-width: 46rem; }
.need .ticks li { margin-top: 0.9rem; }

/* Founder teaser (Home) and About */
.photo { margin: 0; width: 100%; }
.photo__frame { position: relative; }
.photo__frame svg { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 2px; }
.photo__tag { position: absolute; left: 0.75rem; top: 0.75rem; background: var(--mw-color-bg); color: var(--mw-color-text-muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 0.25rem 0.5rem; }
.photo__bar { position: absolute; left: 0; bottom: -10px; width: 72px; height: 6px; background: var(--mw-color-mark, #BA5A30); }
.photo figcaption { margin-top: 1.4rem; font-size: 0.875rem; color: var(--mw-color-text-muted); }
.about__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 56rem) { .about__grid { grid-template-columns: 4fr 8fr; gap: 4rem; } }
.about__grid .photo { max-width: 18rem; }
@media (min-width: 56rem) { .about__grid .photo { position: sticky; top: 5.5rem; align-self: start; } }   /* About (13 Oct): the passage outgrew the photo, so the photo stays in view while you read */
.story__inner { max-width: 38rem; }
/* Home "Why I started": the Gaius Marius note (founder, 12 Oct; no image). From 80rem (1280px) a quiet margin note
   beside the story, top-aligned with the section heading (founder, 12 Oct), with a hairline on its left; the story keeps
   its reading width. Below 80rem, an inline aside after the story with a hairline above. */
.idea-coda { max-width: 38rem; margin-top: clamp(2rem, 5vw, 2.75rem); padding-top: clamp(1.25rem, 3vw, 1.5rem); border-top: 1px solid var(--mw-color-border); }
.idea-coda h3 { margin: 0 0 0.4rem; font-family: var(--mw-font-display); font-size: clamp(1.125rem, 1.8vw, 1.25rem); line-height: 1.25; }
.idea-coda p { margin: 0; color: var(--mw-color-text-muted); font-size: 1rem; line-height: 1.65; }
@media (min-width: 80rem) {
  .idea .prose-body { max-width: none; display: grid; grid-template-columns: minmax(0, 38rem) minmax(0, 1fr); column-gap: 3rem; align-items: start; }
  .idea .prose-body > * { grid-column: 1; }
  .idea .prose-body > .idea-coda { grid-column: 2; grid-row: 1 / span 4; max-width: 20rem; margin: 0; padding: 0.15rem 0 0.25rem 1.5rem; border-top: 0; border-left: 1px solid var(--mw-color-border); }
}
.story__inner > p { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.75; }
/* About's closing-band byline (founder, 8 Oct; was the body's fixer line): a signature beside Schedule a Call,
   wrapping underneath it on narrow screens. Upright serif (12 Oct: only roman 600 is loaded, so italic was faked), warm rule. */
.cta-band .cta-band__byline { margin: 0; padding-left: 0.9rem; border-left: 2px solid var(--mw-color-warm, #BA5A30); max-width: 24rem;
  font-family: var(--mw-font-headline); font-size: 1.0625rem; line-height: 1.35; color: var(--mw-color-text); }
.results { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.result { padding: 1.5rem; border: 1px solid var(--mw-color-border); border-top: 2px solid var(--mw-color-text); background: var(--mw-color-surface); }
.result h3 { font-size: 1.125rem; margin-bottom: 1rem; }
.result dl { margin: 0 0 1rem; display: grid; gap: 0.6rem; font-size: 0.9rem; }
.result dt { font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mw-color-text-muted); font-weight: 600; }
.result dd { margin: 0.1rem 0 0; }
.result .card__result { margin: 0; font-size: 1.25rem; font-weight: 600; }
.card__award { display: block; font-size: 0.875rem; font-weight: 500; color: var(--mw-color-text-muted); margin-top: 0.25rem; }
.small-print { margin: 1.5rem 0 0; font-size: 0.875rem; color: var(--mw-color-text-muted); }

/* FAQ (native details/summary) */
.faq { max-width: 48rem; }
.faq details { border-top: 1px solid var(--mw-color-border); }
.faq details:last-child { border-bottom: 1px solid var(--mw-color-border); }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; position: relative; font-family: var(--mw-font-headline); font-weight: var(--mw-font-display-weight); font-size: 1.0625rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; line-height: 1; color: var(--mw-color-accent-text); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 1.25rem; color: var(--mw-color-text-muted); }
.faq details > div p { margin: 0; }

/* Contact page */
.contact-block { max-width: 44rem; }
.schedule-line { margin: 0.75rem 0 0; color: var(--mw-color-text-muted); max-width: 40rem; }
.contact-direct { margin: 2rem 0 0; font-size: 1.0625rem; }
.contact-direct a { font-weight: 600; word-break: break-word; }
.contact-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 1.25rem; }
.contact-meta { margin-top: 1.75rem; color: var(--mw-color-text-muted); }
.contact-form { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 2rem; border-top: 1px solid var(--mw-color-border); max-width: 44rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Closing CTA band (every page except Contact and Privacy) */
.cta-band { background: var(--mw-color-surface-alt); border-top: 1px solid var(--mw-color-border); padding-block: clamp(3rem, 7vw, 4.5rem); }
.cta-band h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); margin-bottom: 0.5rem; }
.cta-band p { color: var(--mw-color-text-muted); margin: 0; }
.cta-band .actions { margin-top: 1.5rem; align-items: center; }
.cta-band .text-link { font-weight: 600; text-decoration: none; }
.cta-band .text-link::after { content: " →"; }

/* LinkedIn "in" logo: official glyph, LinkedIn blue only (their guidelines) */
.btn--icon { display: inline-flex; align-items: center; gap: 0.55rem; }
.btn--icon svg, .site-footer .icon-link svg { width: 1.1rem; height: 1.1rem; flex: none; }
.site-footer .icon-link { display: inline-flex; align-items: center; gap: 0.45rem; }
.btn--icon:hover .li-logo { fill: #FFFFFF; }

/* Footer nav row */
.site-footer__grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

/* ---- v0.6: Services as a sales pitch --------------------------------------- */
/* Before / after (SERVICES.OPENING A) */
.ba { width: 100%; max-width: 56rem; margin-top: 1.75rem; border-collapse: separate; border-spacing: 0; }
.ba th { text-align: left; font-size: 0.8125rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; padding: 0 1.25rem 0.75rem; }
.ba th:first-child { color: var(--mw-color-text-muted); }
.ba th:last-child { color: var(--mw-color-accent-text); }
.ba td { padding: 0.9rem 1.25rem; vertical-align: top; border-top: 1px solid var(--mw-color-border); }
.ba td:first-child { color: var(--mw-color-text-muted); width: 46%; }
.ba td:last-child { font-weight: 600; background: var(--mw-color-surface-alt); border-left: 3px solid var(--mw-color-accent); }
.ba__line { margin-top: 1.5rem; max-width: 44rem; }
@media (max-width: 40rem) {
  .ba, .ba tbody, .ba tr, .ba td { display: block; width: 100%; }
  .ba thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ba tr { border-top: 1px solid var(--mw-color-border); padding: 0.75rem 0; }
  .ba td { border-top: 0; padding: 0.35rem 0.9rem; width: 100% !important; }
  .ba td::before { content: attr(data-label); display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mw-color-text-muted); margin-bottom: 0.15rem; }
}
/* Signs, as short quotes */
.quotes { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.75rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.quotes li { padding: 1rem 1.25rem; background: var(--mw-color-surface); border: 1px solid var(--mw-color-border); border-left: 3px solid var(--mw-color-warm, #BA5A30); font-family: var(--mw-font-headline); font-weight: var(--mw-font-display-weight); font-size: 1.0625rem; }
.quotes q { quotes: "“" "”"; }
.who-line { margin: 1.75rem 0 0; max-width: 46rem; color: var(--mw-color-text-muted); }
/* Sprint outcome line */
.package .outcome { font-weight: 600; color: var(--mw-color-text); font-size: 1.0625rem; }
/* Assurances: three points, no numbers */
.points--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
/* Proof line */
.proof { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.proof__line { margin: 0; max-width: 46rem; font-family: var(--mw-font-headline); font-weight: var(--mw-font-display-weight); font-size: clamp(1.2rem, 2.2vw, 1.4rem); line-height: 1.35; }
/* Services close (replaces the band) */
.close-line { margin: 1rem 0 0 !important; max-width: 40rem; }
.contact-form__title { font-size: 1.375rem; margin-bottom: 1.25rem; }
.contact-form .notice { margin-bottom: 1.5rem; }
/* v0.6.2: outcome as the card heading, sprint name + length as a small label under it */
.package h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.3; margin-bottom: 0.6rem; }
.package__length--under { margin-bottom: 1rem; }

/* Dark theme (follows the OS). Colour tokens come from brand/tokens.css; these cover the rest. */
@media (prefers-color-scheme: dark) {
  :root { --mw-color-tbd-bg: #3a2f10; --mw-color-tbd-text: #ffe29a; }
  .wordmark picture, .maintenance picture { display: block; }
}

/* Contact form: send result (live build) */
.form__status { margin: 1rem 0 0; padding: 0.75rem 1rem; border-left: 3px solid var(--mw-color-accent); background: var(--mw-color-surface-alt); color: var(--mw-color-text); }
.form__status.is-error { border-left-color: var(--mw-color-warm); }
.form__status:focus { outline: none; }
.cf-turnstile { min-height: 65px; margin-block: 0.5rem 1rem; }

/* Placeholder city band (same size as the photo bands), for any page whose photo hasn't landed */
.page-band--placeholder { background: #0F2131; }

/* Promises page (was Values): a short PHRASE per promise, numbered "1 · Phrase" in the headline face, with a short
   explainer. Founder, 8 Oct: the phrase headings looked off in a left column built for single words, so each heading
   now sits ABOVE its explainer in one reading column, at every width. Robust to 2-5-word headings: they stay on one
   line on desktop and wrap evenly (text-wrap: balance) on phones. Any count (3-5), generous spacing. */
.promises { list-style: none; margin: 0; padding: 0; max-width: 46rem; counter-reset: promise; }
.promise {
  counter-increment: promise;
  padding-block: clamp(1.75rem, 4vw, 2.5rem); border-top: 1px solid var(--mw-color-border);
}
.promise:last-child { border-bottom: 1px solid var(--mw-color-border); }
.promise__name {
  margin: 0 0 0.6rem; font-family: var(--mw-font-display); font-weight: var(--mw-font-display-weight);
  letter-spacing: var(--mw-font-display-tracking); line-height: 1.2; font-size: clamp(1.5rem, 2.6vw, 1.875rem); color: var(--mw-color-text);
  text-wrap: balance;
}
.promise__name::before {
  content: counter(promise) " · "; color: var(--mw-color-warm-text, var(--mw-color-accent-text)); font-variant-numeric: lining-nums;
}
/* What I believe (9 Oct): the same component, unnumbered, so the page has one numbered list (My promises) */
.promises--plain .promise__name::before { content: none; }
.promises--plain { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
/* What I believe (founder, 16 Oct: AI moved to Services): three beliefs, three columns from 64rem; stacked below */
.believe .promises--plain .promise:last-child { border-bottom: 0; }
@media (min-width: 64rem) {
  .believe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 2.5rem); }
  .believe .promises { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; max-width: none; }
  .believe .promise__name { font-size: clamp(1.375rem, 2.1vw, 1.625rem); }
  /* founder, 18 Oct: "Accountability starts at the top." wraps to 2 lines (already balanced); share one heading row across the
     three columns and sit 1-line headings at its foot, so all three explainers start on the same line */
  .believe .promises { grid-template-rows: auto auto; }
  .believe .promise { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .believe .promise__name { align-self: end; }
}

/* LinkedIn (founder, 2 Oct): LinkedIn's [in] logo, unaltered shape, in an approved colour only:
   black on light, white on dark (LinkedIn allows blue, black or white). "LinkedIn" text label beside it. */
.li-logo, .btn--icon:hover .li-logo { fill: #000000; }
@media (prefers-color-scheme: dark) { .li-logo, .btn--icon:hover .li-logo { fill: #FFFFFF; } }
.li-link { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--mw-color-accent-text); text-decoration: none; font-weight: 600; }
.li-link .li-logo { width: 1.25rem; height: 1.25rem; flex: none; }   /* 20px */
.li-link:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer .li-link { color: var(--mw-color-accent-text); font-weight: 500; }
/* Contact lede */
.contact-lede { margin: 0 0 1.5rem; max-width: 40rem; }

/* Services: "Working together" (labelled two-column list; stacks on phones) */
/* Services "Working with me" (founder, 7 Oct): six tiles on the Career highlights grid (3 x 2 / 2 x 3 / 1). */

/* Services: How I work — three principles as calm serif statements (not steps, so no numbers) */
.principles { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 48rem; }
.principles li { padding-block: 1rem; border-top: 1px solid var(--mw-color-border);
  font-family: var(--mw-font-display); font-weight: var(--mw-font-display-weight); letter-spacing: var(--mw-font-display-tracking);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.3; color: var(--mw-color-text); }
.principles li:last-child { border-bottom: 1px solid var(--mw-color-border); }

/* Home hero, text only (founder, 2 Oct: diagram moved to Services): one wide column, generous whitespace */
.hero--text { padding-block: clamp(5rem, 12vw, 9rem) clamp(4rem, 9vw, 7rem); }
.hero--text h1 { max-width: 26ch; font-size: clamp(2.5rem, 5.4vw, 5rem); line-height: 1.04; }
.hero--text .lede { max-width: 46rem; margin-top: clamp(1.25rem, 2.5vw, 2rem); font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.55; }
/* Services: the three-layers diagram, between the intro line and "What changes for you" (hidden on phones, as on Home before) */
.services-diagram { max-width: 32rem; margin: 0 0 clamp(2rem, 4vw, 3rem); }
@media (max-width: 47.99rem) { .services-diagram { display: none; } }
.hero--text h1 { text-wrap: balance; }
@media (min-width: 48rem) { .hero--text .hero__line { display: block; } }   /* one sentence per line on tablet and up */

/* Hero option (b): a full-sentence H1 (founder, 4 Oct), sized to hold 2 lines at 1440 */
.hero--long h1 { max-width: 30ch; font-size: clamp(2.125rem, 4.2vw, 3.75rem); line-height: 1.08; }
/* Hero option (c), review comparison only: the whole line as one statement */
.hero--statement h1 { max-width: 34ch; font-size: clamp(1.875rem, 3.4vw, 3rem); line-height: 1.15; }

/* Review-only comparison strip (draft build only) */
.review-strip { background: var(--mw-color-tbd-bg, #fff4d6); color: var(--mw-color-tbd-text, #5c4400); font-size: 0.8125rem; border-bottom: 1px dashed currentColor; }
.review-strip p { margin: 0; padding-block: 0.4rem; }
.review-strip a { color: inherit; }
.review-strip a[aria-current] { font-weight: 700; text-decoration: none; }
.photo__frame .photo__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }

/* ---- Section navigation (founder, 5 Oct; 7 Oct fix). Dropdowns: ≥ 64rem on any device (click/keyboard on touch),
   and from 48rem on hover-capable screens (laptop windows, the review pane), where the menu is the two-row layout.
   Brand look: white panel (Prussian 800 in dark), hairline, soft shadow, ~150 ms fade, Hanken 500 labels,
   Prussian underline on hover. No icons, no mega-menu. Phones keep the swipe row; a tap opens the page. */
.topnav__item { position: relative; display: flex; align-items: center; gap: 0.15rem; }
.topnav__toggle { display: none; }
.topnav__panel { display: none; }
@media (min-width: 64rem), (min-width: 48rem) and (hover: hover) {
  .topnav__toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0;
    border: 0; border-radius: var(--mw-radius); background: none; color: var(--mw-color-text-muted); cursor: pointer;
  }
  .topnav__toggle svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .15s ease; }
  .topnav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .topnav__toggle:hover { color: var(--mw-color-text); }
  .topnav__panel {
    display: block; position: absolute; top: calc(100% + 0.35rem); left: 50%; transform: translate(-50%, -4px);
    min-width: 15rem; max-width: 22rem; padding: 0.5rem; z-index: 60;
    background: var(--mw-color-surface); border: 1px solid var(--mw-color-border); border-radius: 4px;
    box-shadow: 0 10px 30px -12px rgba(15, 33, 49, 0.28);
    opacity: 0; transition: opacity .15s ease, transform .15s ease;
  }
  .topnav__panel[hidden] { display: none; }
  .topnav__item.is-open .topnav__panel { opacity: 1; transform: translate(-50%, 0); }
  .topnav__panel ul { list-style: none; margin: 0; padding: 0; }
  .topnav__panel a {
    display: block; padding: 0.55rem 0.75rem; border: 0; border-radius: 3px; white-space: normal; text-decoration: none;
    color: var(--mw-color-text); font-weight: 500; font-size: 0.9375rem; line-height: 1.35;
  }
  .topnav__panel a:hover .topnav__label { text-decoration: underline; text-decoration-color: var(--mw-color-accent); text-underline-offset: 0.25em; }
  .topnav__panel a:focus-visible { outline-offset: 0; }
  .topnav__desc { display: block; margin-top: 0.15rem; font-weight: 400; font-size: 0.8125rem; color: var(--mw-color-text-muted); }
}
/* Two-row menu with dropdowns (48–64rem, hover-capable): the tab row must not scroll (a scrolling row clips the panels);
   all five tabs fit from 48rem. Panels open left-aligned under their tab; the last one right-aligned so it stays on screen. */
@media (min-width: 48rem) and (max-width: 63.99rem) and (hover: hover) {
  .topnav__list { overflow: visible; scroll-snap-type: none; }
  .topnav::after { display: none; }
  .topnav__panel { left: 0; transform: translate(0, -4px); }
  .topnav__item.is-open .topnav__panel { transform: translate(0, 0); }
  .topnav__item:last-child .topnav__panel { left: auto; right: 0; }
}
@media (prefers-reduced-motion: reduce) { .topnav__panel, .topnav__toggle svg { transition: none; } }

/* Sticky in-page sub-nav (long pages): sits under the sticky header; highlights the section in view. */
.subnav { position: sticky; top: var(--topbar-h, 3.4rem); z-index: 40; background: var(--mw-color-bg); border-bottom: 1px solid var(--mw-color-border); }
.subnav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0 1.5rem; overflow-x: auto; scrollbar-width: none; }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav__list a {
  display: inline-block; padding: 0.7rem 0.1rem 0.6rem; white-space: nowrap; text-decoration: none; font-size: 0.875rem;
  color: var(--mw-color-text-muted); border-bottom: 2px solid transparent;
}
.subnav__list a:hover { color: var(--mw-color-text); }
.subnav__list a[aria-current] { color: var(--mw-color-accent-text); border-bottom-color: var(--mw-color-accent); font-weight: 600; }
/* anchors clear the header + sub-nav */
.subnav ~ * [id], .subnav ~ [id] { scroll-margin-top: calc(var(--topbar-h, 3.4rem) + 3.25rem); }

/* Services (6 Oct): intro paragraph, 5 offering cards, "What to expect" */
.offerings-intro { margin: 0.75rem 0 0; max-width: 40rem; }
.offerings { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.offering { padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--mw-color-surface); border: 1px solid var(--mw-color-border); border-top: 3px solid var(--mw-color-accent); }
.offering h3 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 0.5rem; }
.offering p { margin: 0; color: var(--mw-color-text-muted); }
.expect { margin-top: clamp(2rem, 4vw, 3rem); max-width: 46rem; }
.expect h3 { margin-bottom: 0.5rem; }
.expect p { margin: 0 0 0.5rem; }

/* Services (6 Oct, three sections): sub-heading, buying steps, count-on inside Working together */
.sub-h { margin: 1.5rem 0 0; font-size: 1.25rem; }
.steps { list-style: none; counter-reset: step; margin: 1rem 0 1.25rem; padding: 0; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.steps li { counter-increment: step; padding-top: 0.75rem; border-top: 2px solid var(--mw-color-accent); }
.steps h4 { margin: 0 0 0.25rem; font-size: 1rem; font-family: var(--mw-font-body); font-weight: 600; }
.steps h4::before { content: counter(step) ". "; color: var(--mw-color-warm-text, var(--mw-color-accent-text)); }
.steps p { margin: 0; color: var(--mw-color-text-muted); }
.expect__entry { margin: 0; max-width: 46rem; }
.how-diagram, #how-i-work .services-diagram { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
/* Contact groups (anchored for the menu) */
.contact-group + .contact-group { margin-top: clamp(2rem, 4vw, 3rem); }
.offering .offering__more { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--mw-color-border); font-size: 0.9375rem; }

/* Landed-section highlight after an instant jump (founder, 6 Oct) */
.is-landed { animation: mw-landed 1.4s ease-out; border-radius: 3px; }
@keyframes mw-landed { 0%, 25% { background: var(--mw-color-surface-alt); box-shadow: 0 0 0 0.35rem var(--mw-color-surface-alt); }
                       100% { background: transparent; box-shadow: 0 0 0 0.35rem transparent; } }
@media (prefers-reduced-motion: reduce) { .is-landed { animation: none; text-decoration: underline; text-decoration-color: var(--mw-color-accent); text-underline-offset: 0.25em; } }

/* How I work as tiles (3–5): short title + 1–2 lines, calm style matching the offering cards */
.tile { padding: clamp(1.25rem, 2.5vw, 1.6rem); background: var(--mw-color-surface); border: 1px solid var(--mw-color-border); border-top: 3px solid var(--mw-color-accent); }
.tile h3 { margin: 0; font-size: 1.1875rem; line-height: 1.3; }
.tile p { margin: 0.5rem 0 0; color: var(--mw-color-text-muted); }
.section--surface .ba td:last-child { background: var(--mw-color-surface); }   /* keep the "What changes" column distinct on a grey band (Home) */

/* Skeleton (6 Oct): Home's "What to expect" steps; Promises opens with the How I work tiles */
#what-to-expect .steps { margin-top: 1.5rem; }
.section--promises .promises__intro { margin-top: 0; }

/* Home "How I help": three outcome beats */
.beats { list-style: none; counter-reset: beat; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); max-width: 64rem; }
.beats li { counter-increment: beat; padding-top: 0.85rem; border-top: 2px solid var(--mw-color-accent); color: var(--mw-color-text-muted); }
.beats li::before { content: counter(beat) "  "; font-family: var(--mw-font-display); font-weight: var(--mw-font-display-weight); color: var(--mw-color-warm-text, var(--mw-color-accent-text)); }
.beats strong { color: var(--mw-color-text); font-weight: 600; }

/* Even rows, never 2 + 1 (founder, 6 Oct) ------------------------------------------------------------
   3-item blocks: three across from 40rem (desktop + tablet), stacked on phones. */
.beats, .results { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .beats, .results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* About results: the cards carry more text, so three across only from 56rem; stacked below (still never 2 + 1) */
@media (min-width: 40rem) and (max-width: 55.99rem) { .results { grid-template-columns: 1fr; } }

@media (max-width: 22.5rem) { .hero--long h1 { font-size: 1.875rem; } }   /* smallest phones: fewer lines for the longer H1 (6 Oct) */

/* Services "What I do": the offerings table (founder, 6 Oct). Same calm look as "Working with me". */
.offerings-table { width: 100%; max-width: 60rem; margin-top: 1.5rem; border-collapse: collapse; }
.offerings-table thead th { text-align: left; font-size: 0.8125rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--mw-color-text-muted); padding: 0 0 0.6rem; }
.offerings-table thead th + th { padding-left: 2.5rem; }
.offerings-table tbody th, .offerings-table tbody td { vertical-align: baseline; padding: 1.1rem 0; border-top: 1px solid var(--mw-color-border); text-align: left; }
.offerings-table tbody tr:last-child > * { border-bottom: 1px solid var(--mw-color-border); }
.offerings-table tbody th { width: 17rem; font-family: var(--mw-font-display); font-weight: var(--mw-font-display-weight); font-size: 1.1875rem; line-height: 1.3; color: var(--mw-color-text); }
.offerings-table tbody td { padding-left: 2.5rem; color: var(--mw-color-text-muted); }
@media (max-width: 40rem) {   /* phones: name above its line */
  .offerings-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .offerings-table tbody tr { display: block; padding: 1rem 0; border-top: 1px solid var(--mw-color-border); }
  .offerings-table tbody th, .offerings-table tbody td { display: block; width: auto; padding: 0; border: 0; }
  .offerings-table tbody tr:last-child > * { border-bottom: 0; }   /* 16 Oct: the desktop per-cell rule drew a line between the last name and its text */
  .offerings-table tbody td { margin-top: 0.35rem; }
  .offerings-table tbody tr:last-child { border-bottom: 1px solid var(--mw-color-border); }
}

/* Home: "The idea" + the Meet Jason strip (company → person handoff) */
.meet { padding-block: clamp(2rem, 4vw, 3rem); }
.meet__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.meet__photo { width: 4.5rem; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; border-bottom: 3px solid var(--mw-color-mark); }
.meet__text { margin: 0; font-size: 1.125rem; color: var(--mw-color-text); flex: 1 1 16rem; }
/* About: beliefs + career stories */
.beliefs { margin: 1rem 0 0; padding-left: 1.25rem; max-width: 46rem; }
.beliefs li { margin: 0 0 0.85rem; padding-left: 0.25rem; color: var(--mw-color-text-muted); }
.beliefs li::marker { color: var(--mw-color-warm-text, var(--mw-color-accent-text)); font-weight: 600; }
.beliefs strong { color: var(--mw-color-text); }
/* About "Career highlights" (founder, 7 Oct): 6 tiles in the How I work tile style, with an employer · place label.
   3 x 2 from 64rem, 2 x 3 from 40rem, one column on phones: six always divides evenly. */
.career-tiles { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .career-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Founder, 16 Oct: tile order A–F keeps same-sector tiles apart at 3 across and 1 across. At 2 across, swap tiles 3 and 4
   (A B / D C / E F) so no two Consumer tech or Food and beverage tiles touch. */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .career-tile:nth-child(1) { order: 1; } .career-tile:nth-child(2) { order: 2; } .career-tile:nth-child(3) { order: 4; }
  .career-tile:nth-child(4) { order: 3; } .career-tile:nth-child(5) { order: 5; } .career-tile:nth-child(6) { order: 6; }
}
@media (min-width: 64rem) { .career-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.career-tile .career-tile__org { margin: 0 0 0.35rem; font-family: var(--mw-font-label); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--mw-color-text-muted); }
.career-tile__org span { white-space: nowrap; }   /* founder + Brand, 14 Oct: one quiet row, sector only (muted, ~13px), so the title reads first */
.career-tile h3 { margin: 0; }
.career-tile .career-tile__org + h3 + p { margin-top: 0.5rem; }

/* About: two-line caption under the headshot; How I work lede (6 Oct About rethink) */
.photo .photo__caption { margin-top: 1.4rem; font-size: 0.9375rem; line-height: 1.45; color: var(--mw-color-text-muted); }
.photo .photo__caption strong { color: var(--mw-color-text); font-weight: 600; }

/* How I work as a flow (founder, 7 Oct; was 5 tiles). < 75rem: vertical timeline (node column + text, accent line down
   the left). >= 75rem: horizontal stepper, 5 across, nodes joined by an accent line with an arrowhead. 3 sub-points per stage. */
#flow-title { margin-bottom: clamp(1.5rem, 3vw, 2rem); }   /* the heading leads straight into the stages (no path line, 8 Oct) */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.flow__step { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 1rem; }
.flow__node {
  position: relative; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--mw-color-surface, var(--mw-color-bg)); border: 2px solid var(--mw-color-accent);
  font-family: var(--mw-font-display); font-weight: 600; font-size: 1.125rem; color: var(--mw-color-accent-text);
}
.flow__step:not(:last-child)::after {
  content: ""; position: absolute; left: calc(1.25rem - 1px); top: 2.5rem; bottom: -1.5rem; width: 2px; background: var(--mw-color-accent);
}
/* timeline arrowhead: points down into the next node */
.flow__step:not(:last-child)::before {
  content: ""; position: absolute; left: calc(1.25rem - 6px); bottom: -1.5rem; width: 0; height: 0; z-index: 1;
  border-top: 10px solid var(--mw-color-accent); border-left: 6px solid transparent; border-right: 6px solid transparent;
}
.flow__body h3 { margin: 0.35rem 0 0; font-family: var(--mw-font-display); font-size: 1.1875rem; line-height: 1.3; }
.flow__points { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.flow__points li { position: relative; margin: 0.3rem 0 0; padding-left: 0.9rem; color: var(--mw-color-text-muted); line-height: 1.4; }
.flow__points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--mw-color-accent); }
@media (min-width: 75rem) {   /* 5 columns from 1200px: each ~170px+ beside the side panel, so no sub-point passes 2 lines (8 Oct) */
  .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
  .flow__step { display: block; }
  .flow__body h3 { margin-top: 1rem; font-size: 1.125rem; }
  .flow__points li { font-size: 0.9375rem; padding-left: 0.75rem; }   /* 15px, tighter bullet: every sub-point stays within 2 lines at 1152+ (founder, 8 Oct) */
  .flow__step:not(:last-child)::after { left: 3rem; right: -0.75rem; top: calc(1.25rem - 1px); bottom: auto; width: auto; height: 2px; }
  .flow__step:not(:last-child)::before {
    content: ""; position: absolute; left: auto; bottom: auto; right: -0.85rem; top: calc(1.25rem - 6px); width: 0; height: 0;
    border-right: 0; border-top: 6px solid transparent; border-left: 10px solid var(--mw-color-accent); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  }
}

/* Side section menu (founder, 7 Oct; adaptive). Right edge, vertically centred, translucent.
   >= 56rem (896px):  a panel with dots + short labels (wrapping to 2 lines when needed), 9.25rem wide. Where the page
                      margin is short, the content gets just enough right padding to clear it (60px narrower at 1280,
                      17px at 1366, none from 1440), so it never covers text.
   48-56rem:          a slim dots-only rail; labels slide out on hover (whole rail) or keyboard focus (each link).
   < 48rem (phones):  a floating "ON THIS PAGE · <current section>" button at bottom-right (founder, 7 Oct, "for now");
                      a tap opens the list (44px rows). It steps aside while the closing band is on screen.
   The sticky "On this page" bar (.subnav) is hidden at every width while the side menu is in use; its markup and
   script stay, so it can come back with one line. */
.subnav { display: none; }
.sidenav { position: fixed; z-index: 45; }
.sidenav__panel, .sidenav__toggle {
  background: color-mix(in srgb, var(--mw-color-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--mw-color-border) 85%, transparent);
  box-shadow: 0 6px 24px rgba(10, 30, 50, .14);
}
.sidenav__list { list-style: none; margin: 0; padding: 0; position: relative; }
.sidenav__list a { position: relative; display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--mw-color-text); font-weight: 500; }
.sidenav__dot { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--mw-color-bg);
  border: 2px solid var(--mw-color-text-muted); transition: transform .2s ease, background .2s ease; }
.sidenav__list a[aria-current] { color: var(--mw-color-accent-text); font-weight: 600; }
.sidenav__list a[aria-current] .sidenav__dot { background: var(--mw-color-accent); border-color: var(--mw-color-accent); transform: scale(1.35); }
.sidenav__page { margin: 0 0 0.4rem 0.4rem; font-family: var(--mw-font-label); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mw-color-text-muted); }

/* ---------- phones: the floating button ---------- */
@media (max-width: 47.99rem) {
  .sidenav { right: 1rem; bottom: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;
    max-width: calc(100vw - 2rem); transition: opacity .2s ease, transform .2s ease; }
  .sidenav.is-away { opacity: 0; transform: translateY(0.5rem); pointer-events: none; }
  .sidenav__toggle {
    order: 2; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.45rem 0.9rem 0.45rem 1rem;
    border-radius: 999px; font: inherit; font-size: 0.875rem; color: var(--mw-color-text); cursor: pointer; max-width: 100%;
  }
  .sidenav__kicker { font-family: var(--mw-font-label); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mw-color-text-muted); white-space: nowrap; }
  .sidenav__current { font-weight: 600; color: var(--mw-color-accent-text); text-align: left; line-height: 1.25; }   /* wraps; never cut off */
  .sidenav__current:empty { display: none; }
  .sidenav__toggle svg { flex: none; width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .15s ease; }
  .sidenav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .sidenav__panel { order: 1; display: none; min-width: 13rem; padding: 0.5rem; border-radius: 1rem; }
  .sidenav.is-open .sidenav__panel { display: block; }
  .sidenav__list a { min-height: 2.75rem; padding: 0 0.75rem; border-radius: 0.6rem; font-size: 1rem; }   /* 44px tap targets */
  body:has(.sidenav) .site-footer { padding-bottom: 4.5rem; }   /* the button never hides the last line */
}

/* ---------- 768px and up: the rail ---------- */
@media (min-width: 48rem) {
  .sidenav { top: 50%; right: 0.75rem; transform: translateY(-50%); }
  .sidenav__toggle { display: none; }
  .sidenav__panel { padding: 0.6rem 0.4rem; border-radius: 1rem; }
  .sidenav__list::before { content: ""; position: absolute; left: calc(0.75rem + 0.3rem - 0.5px); top: 1.1rem; bottom: 1.1rem; width: 1px; background: var(--mw-color-border); }
  .sidenav__list a { padding: 0.55rem 0.55rem 0.55rem 0.75rem; border-radius: 0.6rem; font-size: 0.9375rem; white-space: nowrap; }
  .sidenav__list a:hover { background: color-mix(in srgb, var(--mw-color-accent) 10%, transparent); }
}
/* mid widths: dots only; labels slide out towards the page on hover or keyboard focus */
@media (min-width: 48rem) and (max-width: 55.99rem) {
  .sidenav__page { display: none; }
  .sidenav__list a { gap: 0; padding: 0.55rem 0.75rem; }
  .sidenav__label { position: absolute; right: calc(100% + 0.5rem); top: 50%; transform: translate(0.25rem, -50%);
    padding: 0.35rem 0.7rem; border-radius: 0.5rem; background: var(--mw-color-surface, var(--mw-color-bg)); border: 1px solid var(--mw-color-border);
    box-shadow: 0 4px 14px rgba(10, 30, 50, .14); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
  .sidenav:hover .sidenav__label, .sidenav__list a:focus-visible .sidenav__label { opacity: 1; transform: translate(0, -50%); }
  /* keep the rail off the text: content gets room for it on the rail's side */
  body:has(.sidenav) main .container, body:has(.sidenav) .site-footer .container { padding-right: max(var(--mw-gutter), 3.75rem); }
}
/* wide: full panel with labels, in the page margin */
@media (min-width: 56rem) {
  .sidenav__panel { padding: 0.75rem 0.5rem 0.75rem 0.4rem; width: 9.25rem; }
  .sidenav__list a { font-size: 0.875rem; white-space: normal; line-height: 1.25; align-items: flex-start; }
  .sidenav__list a .sidenav__dot { margin-top: 0.3rem; }
  .sidenav__list::before { top: 1.25rem; bottom: 1.25rem; }
  /* clear the panel: it needs 10rem (9.25rem + 0.75rem offset) beside the content; the page margin supplies
     (100vw - 72rem) / 2 of it, padding the rest. At 1440+ the margin alone is enough. */
  body:has(.sidenav) main .container, body:has(.sidenav) .site-footer .container {
    padding-right: max(var(--mw-gutter), calc(10.25rem - max(0px, (100vw - var(--mw-max-width)) / 2))); }
}
@media (prefers-reduced-motion: reduce) { .sidenav, .sidenav__dot, .sidenav__label, .sidenav__toggle svg { transition: none; } }

/* ---------- 16 Oct polish (founder-approved review list) ---------- */
.hero__actions { margin-top: clamp(1.5rem, 3vw, 2rem); }                         /* Schedule a Call under the hero sub-line */
.form__note { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--mw-color-text-muted); }   /* replaces the required reply box */
.form__nojs { display: none; }                                                     /* no-JavaScript confirmations: shown only */
.form__nojs:target { display: block; margin-bottom: 1.5rem; }                       /* when the worker redirects to #sent-ok / #sent-error */
@media (max-width: 47.99rem) {                                                     /* phone "On this page" pill: solid, so text never shows through */
  .sidenav__toggle, .sidenav__panel { background: var(--mw-color-bg); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 8px 28px rgba(10, 30, 50, .22); }
}

/* Services "How I use AI" (founder, 16 Oct): its own section between What I do and What I've done. It follows the
   page-hero section, which normally drops the divider, so keep one here so the two white sections don't merge. */
.page-hero + .section--ai { border-top: 1px solid var(--mw-color-border); }
.section--ai .section-body { margin: 0; max-width: 42rem; }


/* Footer on one row (founder, 16 Oct; Brand review item 11): logo · menu · LinkedIn, Privacy Notice, © on a single row on
   desktop. Same content. Wraps cleanly when space runs out; phones keep the stacked layout. */
@media (min-width: 64rem) {
  .site-footer { padding-block: 2rem; font-size: 0.875rem; }
  .site-footer > .container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
  .site-footer__main { display: flex; align-items: center; gap: 1.75rem; }
  .site-footer .wordmark { margin-bottom: 0; }
  .site-footer__nav, .site-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
  .site-footer li + li { margin-top: 0; }
  .site-footer__legal { margin: 0 0 0 auto; padding: 0; border-top: 0; }
}


/* 18 Oct (founder, pre-launch review): the Contact email line under Send, and Home's quiet "See what I've done" link */
.form__email { margin: 0.4rem 0 0; font-size: 0.875rem; color: var(--mw-color-text-muted); }
.more-link { margin: 1.25rem 0 0; }
.more-link a { font-weight: 600; text-decoration: none; color: var(--mw-color-accent-text); }
.more-link a::after { content: " →"; }
.more-link a:hover { text-decoration: underline; }