/* Keys Medical Thermography — site styles (Dawn, 31 Aug 2026).
   Shared by every page in this kit. Tokens come from ../../styles.css. */
/* accessibility ---------------------------------------------------------- */
/* [hidden] must beat any author `display`. Without this, every component that
   sets display (.alert is flex, .consent is flex) renders regardless of the
   attribute — which shipped a success message above an untouched form. One rule
   covers every present and future component rather than patching each one. */
[hidden]{display:none!important}
/* off-screen but focusable / submittable — for honeypot fields and visually
   hidden labels. NOT display:none: bots skip those, and screen readers ignore
   them, which defeats both purposes. Added 1 Sep at the build's request. */
.hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* skip link — first tab stop on every page */
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;background-color:var(--accent);color:var(--on-action);border-radius:0 0 var(--radius-input) 0;font-size:var(--text-xs);font-weight:600;text-decoration:none}
.skip:focus{left:0}
.skip:focus,.skip:hover{color:var(--on-action)}
/* one visible focus treatment for everything keyboard-reachable. --accent on
   --ground is 6.3:1; inside the dark band the on-sea white is used instead. */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}
.band :focus-visible,footer :focus-visible{outline-color:var(--on-sea-strong)}
.fields input:focus-visible,.fields textarea:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
/* the check rows are labels, so the whole row is a hit target, not just the box */
.check label{display:grid;grid-template-columns:26px 1fr;gap:0 13px;align-items:start;cursor:pointer;min-height:44px;padding:2px 0}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:1}
section{padding:var(--section-y) 0;position:relative}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);text-wrap:balance;margin:0}
h1{font-size:var(--text-h1);line-height:var(--text-h1-leading)}
h2{font-size:var(--text-h2);line-height:var(--text-h2-leading)}
h3{font-size:var(--text-h3);line-height:var(--text-h3-leading)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link)}a:hover{color:var(--text-link-hover)}
.eyebrow{font-size:var(--text-eyebrow);font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-label);margin:0 0 14px}
.lede{font-size:var(--text-lead);line-height:1.5;color:var(--text-muted);max-width:var(--measure-lead)}
.prose{max-width:var(--measure-prose)}
.prose+.prose{margin-top:1rem}
.rule{height:3px;border-radius:2px;background:var(--rule-gradient);width:88px}
.sect-head{margin-bottom:var(--section-head-mb);max-width:64ch}
.icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon *{fill:none;stroke:currentColor}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* tint fields — the pastel-geometry grounds. Flat, one per section, clipped. */
.f-sky{background:var(--field-sky);overflow:hidden}
.f-mist{background:var(--field-mist);overflow:hidden}
.f-lilac{background:var(--field-lilac);overflow:hidden}
.arc{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.arc-tr{width:340px;height:340px;top:-150px;right:-90px;background:var(--field-lilac)}
.arc-bl{width:280px;height:280px;bottom:-130px;left:-80px;background:var(--field-sky)}

/* nav ---------------------------------------------------------------------
   REVISED 1 Sep after build feedback. The old single row at --nav-h:66px with a
   34px lockup was illegible: her lockup stacks KEYS / MEDICAL / THERMOGRAPHY, so
   its SMALLEST line governs legibility, and "MEDICAL" rendered about 4px tall.
   54px was measured as the first height where all three lines read.

   Rather than grow the sticky bar to 88px, the header is split in two and only
   the slim row sticks: .brandbar scrolls away with the page and carries the
   lockup at 64px; .navbar pins at 56px. That is MORE lockup than 54 and a
   SHORTER sticky bar than the original 66 — better on both axes, no JS.

   RULE: any stacked lockup is governed by its smallest line. Never size one by
   its overall height. */
.brandbar{background:var(--ground);border-bottom:var(--border)}
.brandbar .inner{display:flex;align-items:center;gap:24px;padding:20px 0}
/* the lockup ALWAYS sits on its own near-white plate. Her artwork is transparent
   navy ink — 100% of its opaque pixels are dark — so on the dark theme's --ground
   (#101A20) it measures 1.07:1 and simply disappears. Same treatment as
   .foot-brand, which is why the footer lockup reads on the --sea band. This is the
   rule in DESIGN.md: near-white ground, or the badge. Never bare on a dark ground. */
.brandbar a.home{display:inline-flex;align-items:center;background-color:transparent;border-radius:var(--radius-input);padding:10px 14px}
/* One lockup at a time. The wordmark is navy -- 1.07:1 on the dark ground -- so the
   dark theme gets a version with the type in --ink rather than a white plate behind it.

   Every selector here is qualified with img AND its container. `.brandbar img` and
   `.foot-brand img` both set display:block at (0,1,1); a bare `.lockup-dark` is (0,1,0)
   and loses to them, which is exactly how both lockups ended up on screen at once.

   Written as explicit states rather than a variable inside `display`: all three must be
   covered, and the un-stamped default -- OS dark with no explicit choice -- is the one
   that gets forgotten. Hidden is stated first, so a rule that fails to match leaves one
   lockup rather than two. */
.brandbar img.lockup-dark,.navmark img.lockup-dark{display:none}
.brandbar img.lockup-light,.navmark img.lockup-light{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brandbar img.lockup-light,
  :root:not([data-theme="light"]) .navmark img.lockup-light{display:none}
  :root:not([data-theme="light"]) .brandbar img.lockup-dark,
  :root:not([data-theme="light"]) .navmark img.lockup-dark{display:block}
}
:root[data-theme="dark"] .brandbar img.lockup-light,
:root[data-theme="dark"] .navmark img.lockup-light{display:none}
:root[data-theme="dark"] .brandbar img.lockup-dark,
:root[data-theme="dark"] .navmark img.lockup-dark{display:block}
:root[data-theme="light"] .brandbar img.lockup-light,
:root[data-theme="light"] .navmark img.lockup-light{display:block}
:root[data-theme="light"] .brandbar img.lockup-dark,
:root[data-theme="light"] .navmark img.lockup-dark{display:none}
.brandbar img{height:64px;width:auto;display:block}
.brandbar-aside{margin-left:auto;display:flex;align-items:center;gap:24px}
.brandbar .serving{font-size:var(--text-2xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);font-weight:600;text-align:right}

/* theme selector -----------------------------------------------------------
   Three states, not two: Auto follows the operating system, which is the default
   and the only honest starting point — a two-way toggle silently overrides a
   preference the visitor already expressed. Light and Dark are explicit overrides
   written to localStorage under `kmt-theme`.

   The no-flash half lives in an inline <head> script on every page: it reads the
   stored value and sets data-theme BEFORE first paint. Without that, a visitor who
   chose Dark on a light-preference machine sees a white flash on every navigation.
   That script must stay inline and synchronous — deferring or bundling it
   reintroduces the flash. */
.themesel{display:inline-flex;gap:2px;padding:3px;border:var(--border);border-radius:var(--radius-pill);background-color:var(--surface)}
/* icon-only at every width. Three labelled pills took ~280px of the brand row for a
   set-once preference; icon-only is ~140px and still clears 44px. The label stays in
   the DOM as a .hp span, so the accessible name is unchanged. */
.themesel button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:0;border-radius:var(--radius-pill);background-color:transparent;color:var(--text-muted);font-family:var(--font-body);cursor:pointer;transition:background-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.themesel button:hover{color:var(--ink)}
.themesel button[aria-pressed="true"]{background-color:var(--action);color:var(--text-on-action)}
.themesel .icon{width:17px;height:17px;stroke-width:1.9}
/* DESIGN.md: "Below 900px the labels are visually hidden ... and each button becomes a
   44x44px square" -- which means above 900px they are meant to READ. They never did:
   .hp is unconditional, so at every width the selector was three unlabelled icons, and
   the client asked what the middle one was for. The visible label is short because
   "Match my device" three times over would crowd the bar; the descriptive name stays in
   .hp for screen readers, so the accessible name is unchanged. */
.themesel-t{display:none}
@media (min-width:900px){
  .themesel button{min-width:0;padding:0 13px;gap:7px}
  .themesel-t{display:inline;font:600 .78rem/1 var(--font-body);letter-spacing:.01em}
}
header.navbar{position:sticky;top:0;z-index:100;background:var(--ground);border-bottom:var(--border)}
.bar{min-height:60px;display:flex;align-items:center;gap:26px}
nav{display:flex;gap:22px;align-items:center;margin-right:auto}
/* 44px at EVERY viewport, not just under 900px — iPad landscape is 1024–1366px and
   is touch. A 44px floor scoped to a mobile breakpoint is not a 44px rule. */
nav a{display:flex;align-items:center;min-height:44px;font-size:var(--text-xs);font-weight:500;color:var(--ink);text-decoration:none}
nav a:hover{color:var(--accent)}
nav a[aria-current="page"]{color:var(--accent);font-weight:600}

/* buttons — background-COLOR longhand throughout: transitioning the `background`
   shorthand over a var() freezes the value, so it never re-resolves on a theme flip. */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);font-size:var(--text-xs);font-weight:600;padding:11px 20px;border-radius:var(--radius-pill);background-color:var(--action);color:var(--text-on-action);text-decoration:none;border:0;cursor:pointer;transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease)}
.btn:hover{background-color:var(--action-hover);color:var(--text-on-action)}
.btn-quiet{background-color:transparent;color:var(--ink);border:1.5px solid var(--action-quiet-border)}
.btn-quiet:hover{background-color:var(--surface);border-color:var(--action-quiet-hover-border);color:var(--ink)}
.btn-lg{font-size:var(--text-sm);padding:14px 26px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* page hero (subpages) */
.page-hero{padding:clamp(38px,5vw,64px) 0 clamp(30px,4vw,48px)}
.page-hero h1{margin-bottom:18px}
.crumb{font-size:var(--text-2xs);color:var(--text-muted);margin-bottom:16px}
.crumb a{text-decoration:none}

/* home hero */
.hero{padding:var(--hero-y-top) 0 var(--hero-y-bottom)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap-hero);align-items:center}
.hero h1{margin-bottom:20px}
.hero .lede{margin-bottom:28px}
.hero-photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3.2;border:var(--border)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.toggle{display:inline-flex;gap:4px;padding:4px;border:var(--border);border-radius:var(--radius-pill);background-color:var(--surface);margin-bottom:22px}
.toggle button{font-family:var(--font-body);font-size:var(--text-2xs);font-weight:600;padding:7px 15px;border:0;border-radius:var(--radius-pill);background-color:transparent;color:var(--text-muted);cursor:pointer}
.toggle button[aria-pressed="true"]{background-color:var(--action);color:var(--text-on-action)}
.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;padding:0;list-style:none}
.trust li{display:flex;align-items:center;gap:7px;font-size:var(--text-2xs);font-weight:600;padding:7px 14px;border-radius:var(--radius-pill);background-color:var(--emphasis-tag-bg);color:var(--emphasis-tag-text)}
.trust .icon{width:15px;height:15px;stroke-width:2}

/* zigzag split */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gap-split);align-items:center}
.split.flip{grid-template-columns:.85fr 1.15fr}
.split.flip .fig{order:-1}
.fig{border-radius:var(--radius);overflow:hidden;border:var(--border);background:var(--surface-plate)}
.fig img{width:100%;display:block}
.fig figcaption{font-size:var(--text-caption);letter-spacing:var(--tracking-caption);text-transform:uppercase;color:var(--on-plate-quiet);padding:11px 14px;text-align:center}
.fig.photo{background:var(--surface)}

/* cards */
.cards{display:grid;gap:var(--gap-cards)}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface-card);border:var(--border);border-radius:var(--radius);padding:var(--pad-card);display:flex;flex-direction:column;gap:10px}
.card .icon{color:var(--accent)}
.card h3{margin-top:2px}
.card p{font-size:var(--text-sm);color:var(--text-muted)}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--gap-steps);margin-top:8px;padding:0}
.steps li{counter-increment:s;list-style:none}
.steps li::before{content:counter(s);display:block;font-family:var(--font-display);font-size:2.1rem;font-weight:var(--weight-display);color:var(--accent);line-height:1;padding-top:12px;border-top:2px solid var(--accent-light);margin-bottom:12px}
.steps h3{font-size:1rem;margin-bottom:6px}
.steps p{font-size:var(--text-2xs);color:var(--text-muted)}
.steps-tall{grid-template-columns:1fr;gap:0}
.steps-tall li{display:grid;grid-template-columns:64px 1fr;gap:0 24px;padding:26px 0;border-top:var(--border)}
.steps-tall li:last-child{border-bottom:var(--border)}
.steps-tall li::before{grid-row:1/span 2;padding-top:0;border-top:0;margin:0;font-size:2.4rem}
.steps-tall h3{font-size:var(--text-h3)}
.steps-tall p{font-size:var(--text-sm);max-width:60ch}

/* studies */
.studies{display:flex;flex-direction:column;border:var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface-card)}
.study{display:grid;grid-template-columns:1fr auto;gap:6px 28px;align-items:baseline;padding:24px clamp(18px,3vw,30px)}
.study+.study{border-top:var(--border)}
.study h3{grid-column:1}
.study .price{grid-column:2;grid-row:1;font-family:var(--font-display);font-size:1.45rem;font-weight:var(--weight-display);color:var(--text-price);white-space:nowrap}
.study .dur{grid-column:2;grid-row:2;font-size:var(--text-2xs);color:var(--text-muted);text-align:right;white-space:nowrap}
.study .desc{grid-column:1;grid-row:2;font-size:var(--text-sm);color:var(--text-muted);max-width:52ch}
.incl{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 26px;margin:26px 0 0;padding:0;list-style:none}
.incl li{display:flex;gap:11px;font-size:var(--text-sm);line-height:1.45}
.incl .icon{width:18px;height:18px;stroke-width:2;color:var(--accent);margin-top:3px}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.chips li{font-size:var(--text-xs);font-weight:500;padding:9px 16px;border-radius:var(--radius-pill);background-color:var(--surface-card);border:var(--border);color:var(--ink)}
/* When a chip IS a link, the padding must move to the anchor. A hit target belongs
   to the interactive element, never to its wrapper — padding on the <li> makes a
   44px-looking pill whose clickable area is the 18px text line inside it. */
.chips li:has(a){padding:0}
.chips li a{display:flex;align-items:center;min-height:44px;padding:9px 16px;border-radius:inherit;color:inherit;text-decoration:none}
.chips li a:hover{color:var(--accent)}

/* her */
.her{display:grid;grid-template-columns:.72fr 1.28fr;gap:var(--gap-split);align-items:center}
.her .portrait{border-radius:var(--radius);overflow:hidden;border:var(--border);aspect-ratio:4/5}
.her .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
blockquote{margin:24px 0 0;font-family:var(--font-display);font-size:clamp(1.3rem,calc(.7rem + 1.1vw),1.7rem);line-height:1.3;font-weight:var(--weight-display);color:var(--ink)}
blockquote cite{display:block;margin-top:14px;font-family:var(--font-body);font-size:var(--text-2xs);font-style:normal;font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}

/* dark cta band */
.band{background:var(--surface-footer);color:var(--on-sea);border-radius:var(--radius);padding:var(--pad-panel);display:grid;grid-template-columns:1.3fr .7fr;gap:var(--gap-split);align-items:center}
.band h2{color:var(--on-sea-strong)}
.band p{color:var(--on-sea);margin-top:12px;max-width:48ch;font-size:var(--text-sm)}
.band .tel{font-family:var(--font-display);font-size:2rem;font-weight:var(--weight-display);color:var(--on-sea-strong);text-decoration:none;display:block;line-height:1.1}
.band .tel:hover{color:var(--on-sea-strong)}
.band .quiet{font-size:var(--text-2xs);color:var(--on-sea-quiet);margin-top:8px}
.band .quiet a{color:var(--on-sea)}
.band .btn{background-color:var(--on-sea-strong);color:var(--sea)}
.band .btn:hover{background-color:var(--on-sea);color:var(--sea)}

/* faq */
.faq{border-top:var(--border);margin-top:8px}
.faq details{border-bottom:var(--border)}
.faq summary{display:flex;align-items:flex-start;gap:14px;padding:20px 0;cursor:pointer;font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-display);line-height:1.3;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{color:var(--accent);margin-top:3px;transition:transform var(--dur-base) var(--ease)}
.faq details[open] summary .icon{transform:rotate(90deg)}
.faq .a{padding:0 0 22px 36px;max-width:70ch}
.faq .a p{font-size:var(--text-sm);color:var(--text-muted)}
.faq .a p+p{margin-top:.8rem}

/* checklists (prepare) */
.check{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.check li{display:grid;gap:0;align-items:start;padding:9px 0;border-bottom:var(--border)}
.check li:first-child{border-top:var(--border)}
.check input[type="checkbox"]{width:22px;height:22px;margin:11px 0 0;accent-color:var(--accent);cursor:pointer}
.check .t{font-size:var(--text-sm);line-height:1.45;padding-top:9px}
.check .t b{font-weight:600}
.check .t span{display:block;color:var(--text-muted);font-size:var(--text-2xs);margin-top:3px}
.window{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-2xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);padding:7px 15px;border-radius:var(--radius-pill);background-color:var(--emphasis-tag-bg);margin-bottom:16px}
.fields{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--field-gap);margin-top:20px}
.fields label{display:flex;flex-direction:column;gap:6px;font-size:var(--text-2xs);font-weight:600;color:var(--text-muted)}
.fields input,.fields textarea{font-family:var(--font-body);font-size:var(--text-sm);color:var(--ink);padding:11px 13px;border:var(--border-input);border-radius:var(--radius-input);background:var(--surface);width:100%}
.fields input:focus,.fields textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--focus-ring)}
.fields .wide{grid-column:1/-1}

/* flags — internal notes, never for the public build */
.flag-inline{display:inline-block;border:1.5px dashed var(--accent);border-radius:var(--radius);padding:13px 15px 15px;margin-bottom:24px;background:var(--surface)}
.flag-inline .tagline{font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.flag-inline .toggle{margin-bottom:0}
.flag{border:1.5px dashed var(--accent);border-radius:var(--radius);padding:20px 22px;background:var(--surface);margin-top:26px}
.flag h3{font-size:var(--text-h3);margin-bottom:8px}
.flag p{font-size:var(--text-sm);color:var(--text-muted)}
.flag p+p{margin-top:9px}
.flag .tagline{font-size:var(--text-2xs);font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--accent);margin-bottom:10px}

/* footer */
/* The mark inside the sticky bar (drafts). The live header keeps its mark in the row
   that scrolls away, which leaves no way back to the front page once you are down the
   page -- the thing the back-to-top button currently patches. Here it rides along. */
/* The sticky bar carries her head mark ALONE -- no wordmark. The full lockup stacks
   KEYS / MEDICAL / THERMOGRAPHY, and at a height a sticky bar can afford, the smallest
   of those three lines governs: it was set to 30px so the type stayed legible, which
   left the head itself rendering at about 27px. Dropping the type frees the whole slot
   for the mark, so the head is now 42px in the same 60px bar -- half as large again,
   and it is the part people recognise.

   One file, both themes: the mark region of the light and dark lockups is pixel for
   pixel identical (verified), so unlike .brandbar there is no light/dark pair to swap
   and none of the specificity trap documented above applies here. */
.navmark{display:inline-flex;align-items:center;flex:none;margin-right:20px}
.navmark img{height:42px;width:auto;display:block}
.navmark:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px;border-radius:6px}
@media (max-width:900px){.navmark{margin-right:12px}.navmark img{height:36px}}
@media (max-width:600px){.navmark img{height:32px}}

/* The bar's mark waits for the lockup to leave.

   Both are the same head. While the brandbar is still on screen the head is on the page
   twice, one row above the other -- which is the doubled-logo look that shipped twice
   before for different reasons, arrived at a third way. So the bar stays bare until the
   lockup has scrolled off, then takes up the mark: exactly one of her logos, always.

   Hidden under :root.js only. The class is set by the head script, before first paint,
   so the mark is never painted and then snatched away -- and with scripting off the rule
   does not apply at all and the mark simply stays, which is what it did before this
   existed. A logo that can only ever appear is the safe failure.

   Width is animated rather than the space being reserved: a 58px hole at the left of the
   bar for as long as you are at the top of the page reads as a mistake, where the mark
   growing in as the lockup leaves reads as the bar picking it up. */
:root.js .navmark{max-width:0;margin-right:0;opacity:0;overflow:hidden;
  transition:max-width var(--dur-base) var(--ease),margin-right var(--dur-base) var(--ease),
             opacity var(--dur-base) var(--ease)}
:root.js .navmark.is-on{max-width:52px;margin-right:20px;opacity:1}
@media (max-width:900px){:root.js .navmark.is-on{margin-right:12px}}
/* Keyboard focus must never land on something invisible and unreachable. */
:root.js .navmark:focus-visible{max-width:52px;margin-right:20px;opacity:1}
@media (prefers-reduced-motion:reduce){:root.js .navmark{transition:none}}

/* The second line of a two-part heading.

   Daniela's note 579: "Understanding Medical Thermal Imaging: ---- can 'What the skin
   can communicate' be either all below the first sentence, or it needs a space after
   the colon or different font style or size". Both, in the end -- the colon is gone,
   the phrase is on its own line, and it is set apart in weight and colour so it reads
   as a subtitle rather than as more heading. */
.h2-sub{font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-body);
  color:var(--text-muted);letter-spacing:var(--tracking-display);line-height:1.3;margin-top:8px}

/* Columns that top-align instead of centring.

   Her notes 580 and 581 both describe the same thing in different sections: a "spacing
   issue between the 3 items". The cause is align-items:center on a two-column grid whose
   columns are nowhere near the same height -- the shorter one floats, and the gap above
   and below it reads as broken spacing. Where the two columns start together, it does
   not happen. */
.split-top{align-items:start}

/* "Revealing the unseen".

   This was a .split with align-items:center -- a palm photograph on one side, and on
   the other the heading, the thermal figure AND fourteen disclosures. The right column
   ran to about nine hundred pixels, so the photograph floated in the middle of it with
   a void above and below. Daniela filed that as note 582 ("removing the palm trees
   picture may help") and asked in note 583 why the section existed twice at all.

   Both are answered by using the arrangement she had already called correct on the
   studies page: the heading across the full width, the thermal study centred beneath
   it, the conditions below that. The list is held to a readable measure rather than
   run to the full page width, because a disclosure whose summary is 1100px wide is
   tiring to scan. */
.areas-fig{max-width:420px;margin:0 auto}
.areas-list{max-width:82ch;margin:30px auto 0}

/* Section reveal. DESIGN.md specifies this and it had never been built: "Reveal is fade
   plus 16px translate-Y over 600ms; stagger lists 80ms. Only transform and opacity are
   animated." Scoped to the draft so no live page starts moving.

   The hidden state is applied by script, not by the stylesheet, so a visitor without
   JavaScript sees the page as it always was rather than a blank column. */
.oneup.reveal-on section{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.oneup.reveal-on section.shown{opacity:1;transform:none}
/* Cards and list items inside a revealed section follow it, 80ms apart, so a row of four
   arrives as a row rather than four separate events. */
.oneup.reveal-on section .card,
.oneup.reveal-on section .study,
.oneup.reveal-on section .steps li{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.oneup.reveal-on section.shown .card,
.oneup.reveal-on section.shown .study,
.oneup.reveal-on section.shown .steps li{opacity:1;transform:none}
.oneup.reveal-on section.shown .card:nth-child(2),
.oneup.reveal-on section.shown .study:nth-child(2),
.oneup.reveal-on section.shown .steps li:nth-child(2){transition-delay:.08s}
.oneup.reveal-on section.shown .card:nth-child(3),
.oneup.reveal-on section.shown .study:nth-child(3),
.oneup.reveal-on section.shown .steps li:nth-child(3){transition-delay:.16s}
.oneup.reveal-on section.shown .card:nth-child(4),
.oneup.reveal-on section.shown .study:nth-child(4){transition-delay:.24s}
.oneup.reveal-on section.shown .study:nth-child(5){transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .oneup.reveal-on section,
  .oneup.reveal-on section .card,
  .oneup.reveal-on section .study,
  .oneup.reveal-on section .steps li{opacity:1;transform:none;transition:none}
}

/* The Forms menu (draft). A native <details>, so it opens without script, closes on Esc
   and is reachable by keyboard -- the usual hover-only dropdown is neither. */
/* The menus.

   "Forms" used to be the only one of these, sitting at the end of a row of eight plain
   links as a quiet aside -- hence the smaller, muted type. The client's note 774 said
   the bar was cluttered and asked for the sections to be grouped, so there are three
   now (Thermography, Services, Forms) and they ARE the navigation. They take the same
   type as a plain nav link, and the same 44px touch target. */
.navdrop{position:relative;flex:none}
.navdrop > summary{list-style:none;cursor:pointer;white-space:nowrap;
  font-size:var(--text-xs);font-weight:500;font-family:var(--font-body);color:var(--ink);
  display:inline-flex;align-items:center;gap:6px;min-height:44px}
.navdrop > summary::-webkit-details-marker{display:none}
.navdrop > summary::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.navdrop[open] > summary{color:var(--action)}
/* The section you are reading lives inside a shut menu, so the summary carries the
   marker on its behalf -- see mark() in site.php. */
nav[data-spy] .navdrop > summary[aria-current="true"]{color:var(--action);font-weight:var(--weight-display)}
.navdrop > summary:hover{color:var(--accent)}
.navdrop > summary:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px;border-radius:4px}
.navdrop-menu{position:absolute;top:calc(100% + 10px);left:0;z-index:20;min-width:212px;
  display:flex;flex-direction:column;gap:2px;padding:7px;
  background:var(--surface-card);border:var(--border);border-radius:var(--radius-input);
  box-shadow:0 10px 30px -12px rgba(21,47,62,.45)}
.navdrop-menu a{padding:8px 10px;border-radius:7px;white-space:nowrap;
  font:var(--weight-body) var(--text-2xs)/1.3 var(--font-body);color:var(--ink)}
.navdrop-menu a:hover{background:var(--surface-2);color:var(--action)}
/* Her note 779 asked for the seven questionnaires to hang off a SECOND dropdown inside
   this one. A menu inside a menu is the worst thing on a touch screen and hard work for
   a keyboard, so they are grouped under a heading in the same panel instead: her
   structure, one level. */
.navdrop-wide{min-width:266px}
.navdrop-group{margin:9px 10px 3px;padding-top:9px;border-top:var(--border);
  font-size:var(--text-tag);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  font-weight:600;color:var(--text-muted)}
.navdrop-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.navdrop-note{margin:8px 10px 2px;font-size:var(--text-tag);color:var(--text-muted);font-style:italic}
/* No opacity here. It was .75 when this styled a single "awaiting her paperwork"
   placeholder; there are seven of these now and they are most of the panel, and .75 of
   --text-muted on --surface-card measures 3.40:1 in the light theme -- under AA. The
   muted token alone is 5.86:1, and it is already distinct from the --ink of a real link,
   which is what "not clickable yet" needs to say. */
.navdrop-soon{display:block;padding:7px 10px;font:var(--weight-body) var(--text-2xs)/1.3 var(--font-body);
  color:var(--text-muted);cursor:default}
.navdrop-soon small{display:block;font-size:var(--text-tag);letter-spacing:.04em;
  text-transform:uppercase;margin-top:2px}
/* The section you are reading, marked in the bar itself. */
nav[data-spy] a[aria-current="true"]{color:var(--action);font-weight:var(--weight-display)}
/* Anchors land below the sticky bar, not under it. Scoped: unscoped this would change
   where every anchor on every live page comes to rest. */
.oneup [id]{scroll-margin-top:82px}
/* The hero sits outside .oneup (it must not fade in -- it is the first thing you see),
   so it needs the offset separately. Scoped by :has to pages carrying the anchored menu,
   which is the draft alone: an unscoped #main rule would move the skip-link target on
   every live page. */
#main{scroll-margin-top:82px}
@media (max-width:900px){
  .navdrop-menu{left:auto;right:0}
  .oneup [id]{scroll-margin-top:68px}
  #main{scroll-margin-top:68px}
}
@media print{.navdrop{display:none}}


/* Back to top. Appears once the lockup row has scrolled out of view, which is also the
   moment there is no way left to reach the home page -- the sticky bar carries the nav
   but not the mark. 44px so it is a real target on a phone, and clear of the notes tab,
   which sits on the right edge at the vertical middle. */
.totop{position:fixed;right:16px;bottom:16px;z-index:300;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background-color:var(--surface);color:var(--accent);cursor:pointer;
  box-shadow:0 2px 14px rgba(21,47,62,.18);
  transition:background-color var(--dur-base) var(--ease),color var(--dur-base) var(--ease)}
.totop:hover{background-color:var(--accent);color:var(--text-on-action)}
.totop:focus-visible{outline:3px solid var(--accent-deep);outline-offset:2px}
.totop .icon{width:20px;height:20px;transform:rotate(-90deg)}
@media print{.totop{display:none!important}}

/* Affiliate marks, across the top of the footer.

   All four are knocked out to transparent, so the band's own ground shows through and
   there are no white boxes. The ground is light in both themes but NOT the same light:
   near-white reads as a glare strip against a dark page, so the dark theme gets a muted
   slate instead. It stays light because the marks themselves are dark artwork -- black
   rings, black type -- and recolouring somebody else's logo to suit our footer is not
   ours to do. The ground moves; the marks do not.

   --affil-bg carries its own on-colour for the same reason --sea and --plate do: a
   surface that does not follow the theme cannot borrow type colour from one that does. */
.affils{background:var(--affil-bg);color:var(--affil-ink);
  border-bottom:1px solid rgba(0,0,0,.06);
  margin:calc(-1 * var(--footer-y)) 0 var(--footer-y)}
.affils-lede{margin:0;padding:20px 0 0;text-align:center;
  font:500 var(--text-2xs)/1.5 var(--font-body);color:var(--affil-ink);
  letter-spacing:.01em;text-wrap:balance}
.affils ul{list-style:none;margin:0;padding:16px 0 24px;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:clamp(30px,5.5vw,66px)}
.affils li{display:flex;align-items:center}
.affils img{height:78px;width:auto;display:block;max-width:250px;object-fit:contain}
@media (max-width:600px){
  .affils ul{gap:26px;padding:14px 0 20px}
  .affils img{height:60px}
}
@media print{.affils{display:none}}
footer{background:var(--surface-footer);color:var(--on-sea);padding:var(--footer-y) 0 34px;margin-top:var(--section-y)}
.foot{display:grid;grid-template-columns:1.5fr .8fr .8fr;gap:var(--gap-split)}
.foot-brand{background:transparent;border-radius:var(--radius-input);padding:16px 20px;width:fit-content}
.foot-brand img{display:block;width:230px;height:auto}
.foot h4{font-size:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--on-sea-quiet);font-weight:600;margin-bottom:14px}
.foot ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.foot a{color:var(--on-sea);text-decoration:none;font-size:var(--text-xs)}
.foot a:hover{color:var(--on-sea-strong)}
.foot .tel{font-family:var(--font-display);font-size:1.6rem;color:var(--on-sea-strong);text-decoration:none;line-height:1.1;display:block;margin-bottom:10px}
.foot p{font-size:var(--text-xs);color:var(--on-sea);margin-top:14px;max-width:var(--measure-fine)}
.compliance{margin-top:34px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--on-sea) 18%,transparent);display:flex;flex-direction:column;gap:9px}
.compliance p{font-size:var(--text-2xs);color:var(--on-sea-quiet);max-width:96ch;margin:0}
.legal{margin-top:26px;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--on-sea) 18%,transparent);display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;align-items:baseline}
.legal p,.legal a{font-size:var(--text-2xs);color:var(--on-sea-quiet)}
.legal div{display:flex;gap:22px}

@media (max-width:900px){
  .hero-grid,.split,.split.flip,.her,.band,.foot,.fields{grid-template-columns:1fr}
  .split.flip .fig{order:0}
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps-tall{grid-template-columns:1fr}
  .incl{grid-template-columns:1fr}
  /* the nav wraps to its own row. It is never hidden — a site whose navigation
     disappears on a phone is not navigable. */
  .brandbar .inner{padding:16px 0;gap:16px}
  .brandbar a.home{padding:8px 11px}
  .brandbar img{height:46px}
  .brandbar .serving{display:none}
  .bar{min-height:0;flex-wrap:wrap;gap:10px 16px;padding:10px 0}
  /* The bar was nine items and had to scroll sideways to stay one row. Grouping them
     into three menus (her note 774) takes it to five, which wraps to two short rows --
     so the overflow box goes, and with it the problem that an absolutely positioned
     panel inside an overflow:auto parent is clipped by it. All three menus can open. */
  nav{order:3;width:100%;flex-wrap:wrap;gap:4px 18px;padding-top:2px;
      border-top:var(--border);margin-right:0}
  nav a,.navdrop > summary{padding:6px 0;min-height:40px}
  /* Panels align to whichever edge they are nearer, so none runs off the screen. */
  .navdrop-menu{left:0;right:auto;min-width:min(280px,calc(100vw - 2*var(--gutter)))}
  .navdrop:last-of-type .navdrop-menu{left:auto;right:0}
}

/* honour a reduced-motion preference: no transitions, no smooth scrolling */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ==========================================================================
   COMPONENTS added 2026-08-31 after the Claude Code coverage audit.
   The audit's sharpest finding: tokens for errors, required markers and the
   register wash existed and were used ZERO times. Tokens without components
   are a promise the system does not keep. This closes that.
   ========================================================================== */

/* --- buttons: the full set ------------------------------------------------ */
.btn-sm{font-size:var(--text-2xs);padding:8px 14px;gap:7px;min-height:44px}
.btn-sm .icon{width:15px;height:15px;stroke-width:2}
/* tertiary: the cancel or back affordance beside a primary. No fill, no border. */
.btn-text{background-color:transparent;color:var(--accent);padding:11px 8px;border:0}
.btn-text:hover{background-color:transparent;color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
/* icon-only: square, 44px, and it MUST carry an aria-label — the sprite is
   aria-hidden, so an icon-only button with no label has no accessible name. */
.btn-icon{width:44px;height:44px;padding:0;justify-content:center;gap:0}
.btn-icon .icon{width:20px;height:20px}
.btn-danger{background-color:var(--danger)}
.btn-danger:hover{background-color:var(--danger-deep)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{background-color:var(--ground-sunken);color:var(--ink-soft);cursor:not-allowed;pointer-events:none}
.btn-quiet[disabled],.btn-quiet[aria-disabled="true"]{background-color:transparent;border-color:var(--line);color:var(--ink-soft)}
/* busy: the spinner is decorative. The LABEL must change too ("Sending…"),
   because prefers-reduced-motion freezes the spinner to a static ring. */
.btn[aria-busy="true"]{pointer-events:none}
.btn[aria-busy="true"]::before{content:"";width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:spin .7s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- form fields --------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--field-gap)}
.field>label,.fieldset>legend{font-size:var(--text-2xs);font-weight:600;color:var(--text-muted)}
.req{color:var(--text-required);margin-left:2px;font-weight:700}
.field .hint{font-size:var(--text-2xs);color:var(--field-hint);order:3}
.field .err{font-size:var(--text-2xs);font-weight:600;color:var(--field-error-text);order:4;display:flex;align-items:flex-start;gap:6px}
.field .err .icon{width:14px;height:14px;stroke-width:2.2;margin-top:2px}
.field input,.field select,.field textarea,.fields input,.fields textarea{font-family:var(--font-body);font-size:var(--text-sm);color:var(--ink);padding:11px 13px;border:1.5px solid var(--field-border);border-radius:var(--radius-input);background-color:var(--field-bg);width:100%;min-height:44px}
.field textarea{min-height:96px;resize:vertical}
.field input::placeholder,.field textarea::placeholder,.fields input::placeholder,.fields textarea::placeholder{color:var(--field-placeholder);opacity:1}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;border-color:var(--field-border-focus);box-shadow:var(--focus-ring)}
.field [aria-invalid="true"]{border-color:var(--field-border-error)}
.field [aria-invalid="true"]:focus-visible{border-color:var(--field-border-error);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 22%,transparent)}
.field input:disabled,.field select:disabled,.field textarea:disabled{background-color:var(--field-bg-disabled);color:var(--field-text-disabled);cursor:not-allowed}
.field input[readonly]{background-color:var(--ground-sunken);border-style:dashed}
/* select: native control, own caret, no appearance reset that loses the arrow */
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
.field input[type="file"]{padding:8px 10px;min-height:44px}
.field input[type="file"]::file-selector-button{font-family:var(--font-body);font-size:var(--text-2xs);font-weight:600;padding:8px 14px;margin-right:12px;border:0;border-radius:var(--radius-pill);background-color:var(--accent);color:var(--on-action);cursor:pointer}
/* radio + checkbox groups: real fieldset, real legend, full-row labels */
.fieldset{border:0;padding:0;margin:0 0 var(--field-gap);display:flex;flex-direction:column;gap:6px}
.fieldset>legend{padding:0;margin-bottom:2px}
.opts{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
.opts li{border-bottom:var(--border)}
.opts li:first-child{border-top:var(--border)}
.opts label{display:grid;grid-template-columns:26px 1fr;gap:0 13px;align-items:start;cursor:pointer;min-height:44px;padding:11px 0;font-size:var(--text-sm)}
.opts input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.opts .sub{display:block;font-size:var(--text-2xs);color:var(--text-muted);margin-top:3px}
.opts-inline{flex-direction:row;flex-wrap:wrap;gap:8px 22px}
.opts-inline li{border:0}
.opts-inline label{padding:8px 0}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--field-gap)}
.form-grid .wide{grid-column:1/-1}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}

/* --- alerts: three semantics, one shape --------------------------------- */
.alert{display:flex;gap:13px;padding:15px 17px;border-radius:var(--radius-input);border:1px solid;font-size:var(--text-sm);line-height:1.45;margin-bottom:var(--field-gap)}
.alert .icon{width:19px;height:19px;stroke-width:2;margin-top:2px}
.alert h3{font-size:var(--text-sm);font-weight:600;font-family:var(--font-body);margin-bottom:3px}
.alert p{font-size:var(--text-sm)}
.alert ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.alert li{font-size:var(--text-sm);padding-left:0}
.alert li::before{display:none}
.alert a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.alert-error{background-color:var(--status-error-bg);border-color:var(--status-error-border);color:var(--status-error-text)}
.alert-success{background-color:var(--status-success-bg);border-color:var(--status-success-border);color:var(--status-success-text)}
.alert-info{background-color:var(--status-info-bg);border-color:var(--status-info-border);color:var(--status-info-text)}

/* --- empty state -------------------------------------------------------- */
.empty{text-align:center;padding:clamp(34px,6vw,64px) 26px;border:1.5px dashed var(--line);border-radius:var(--radius);background-color:var(--surface)}
.empty .icon{width:30px;height:30px;color:var(--accent);stroke-width:1.4;margin-bottom:14px}
.empty h3{margin-bottom:8px}
.empty p{font-size:var(--text-sm);color:var(--text-muted);max-width:44ch;margin:0 auto 20px}

/* --- toast + modal: the z-index contract, now real --------------------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:500;max-width:min(420px,calc(100vw - 32px));box-shadow:var(--shadow);margin:0}
.modal-backdrop{position:fixed;inset:0;z-index:200;background:color-mix(in srgb,var(--sea) 62%,transparent);display:grid;place-items:center;padding:24px}
.modal{z-index:300;background-color:var(--surface);border-radius:var(--radius);padding:var(--pad-panel);max-width:min(520px,100%);box-shadow:var(--shadow)}
.modal h2{font-size:var(--text-h2);margin-bottom:12px}
.modal p{font-size:var(--text-sm);color:var(--text-muted)}
.modal .form-actions{margin-top:24px}

/* --- table -------------------------------------------------------------- */
.table-wrap{overflow-x:auto;border:var(--border);border-radius:var(--radius);background-color:var(--surface)}
table.t{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
table.t caption{text-align:left;padding:16px 18px 0;font-size:var(--text-2xs);color:var(--text-muted)}
table.t th,table.t td{text-align:left;padding:14px 18px;border-bottom:var(--border);vertical-align:top}
table.t thead th{font-size:var(--text-2xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--accent);font-weight:600;white-space:nowrap}
table.t tbody tr:last-child td{border-bottom:0}
table.t .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.t .price{font-family:var(--font-display);font-size:1.1rem;color:var(--text-price)}
table.t th[scope="row"]{font-weight:600}

/* --- content elements --------------------------------------------------- */
figure{margin:0}
figure.plate-fig{border:var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface-plate)}
figure.photo-fig{border:var(--border);border-radius:var(--radius);overflow:hidden;background-color:var(--surface)}
figure.photo-fig figcaption{font-size:var(--text-2xs);color:var(--text-muted);padding:11px 14px}
/* inline links in running text: decided once, here */
.prose a,.faq .a a,.alert-info a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover,.faq .a a:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
.prose ul,.prose ol{margin:1rem 0;padding-left:1.35em;display:flex;flex-direction:column;gap:.5rem}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{font-size:inherit;padding-left:0;line-height:1.55}
.prose li::before{display:none}
.prose li::marker{color:var(--accent)}
.prose dl{margin:1rem 0;display:grid;grid-template-columns:auto 1fr;gap:10px 20px}
.prose dt{font-weight:600}
.prose dd{margin:0;color:var(--text-muted)}

@media (max-width:900px){
  .form-grid{grid-template-columns:1fr}
  .opts-inline{flex-direction:column;gap:0}
  .opts-inline li{border-bottom:var(--border)}
}
@media print{
  .toast,.modal-backdrop,.modal{display:none!important}
  .alert{border:.5pt solid #000;background:none;color:#000}
  table.t th,table.t td{border-bottom:.5pt solid #999;padding:5pt 8pt}
  .table-wrap{border:.5pt solid #000}
}

/* --- consent notice (US: a notice, not a gate) --------------------------- */
/* Answered 31 Aug: US visitors only, so this informs rather than blocks. It does
   NOT withhold GTM/GA pending a click, which a GDPR gate would have to. If the
   practice ever markets to the EU or UK this must become a real blocking gate. */
.consent{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:500;width:min(760px,calc(100vw - 28px));display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center;padding:16px 18px;background-color:var(--surface);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.consent p{font-size:var(--text-2xs);color:var(--text-muted);flex:1;min-width:260px;line-height:1.5}
.consent a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px}
.consent .acts{display:flex;gap:10px;align-items:center;margin-left:auto}

/* --- enquiry form page --------------------------------------------------- */
.form-panel{background-color:var(--surface);border:var(--border);border-radius:var(--radius);padding:var(--pad-formcard)}
.form-panel>h2{font-size:var(--text-h3);margin-bottom:4px}
.form-panel>.hint{font-size:var(--text-2xs);color:var(--text-muted);margin-bottom:20px;display:block}
.form-panel+.form-panel{margin-top:var(--gap-cards)}
.optional{font-weight:400;color:var(--text-muted);text-transform:none;letter-spacing:0}
.form-aside{display:flex;flex-direction:column;gap:var(--gap-cards)}
.form-aside .card p{font-size:var(--text-2xs)}
.form-layout{display:grid;grid-template-columns:1.4fr .6fr;gap:var(--gap-split);align-items:start}
@media (max-width:900px){.form-layout{grid-template-columns:1fr}}

/* print — the preparation sheet has to come out of a home printer cleanly */
@media print{
  header,.brandbar,.band,.no-print,.flag,.flag-inline,.skip,.consent{display:none!important}
  .foot,.legal{display:none!important}
  footer{background:none;color:#000;margin-top:14pt;padding:0}
  .compliance{border-top:.5pt solid #000;padding-top:8pt;margin-top:0;break-inside:avoid}
  .compliance p{color:#000;font-size:8pt;line-height:1.4;max-width:none}
  body{background:#fff;color:#000;font-size:10.5pt}
  section{padding:0 0 14pt;break-inside:avoid}
  .wrap{max-width:none;padding:0}
  .f-sky,.f-mist,.f-lilac{background:#fff}
  .arc{display:none}
  h1{font-size:20pt}h2{font-size:14pt}h3{font-size:11pt}
  .lede,.check .t,.check .t span,.card p{color:#000}
  .check li{padding:7pt 0;border-bottom:.5pt solid #999;break-inside:avoid}
  .check li:first-child{border-top:.5pt solid #999}
  /* the 44px touch geometry is screen-only — undo it so rows print at their real height */
  .check label{min-height:0;padding:0;grid-template-columns:20pt 1fr}
  .check .t{padding-top:0}
  .check input[type="checkbox"]{width:11pt;height:11pt;margin:1.5pt 0 0}
  .window{background:none;border:.5pt solid #000;color:#000;padding:3pt 8pt}
  .print-head{display:block!important}
  .print-foot{display:block!important;margin-top:16pt;padding-top:8pt;border-top:.5pt solid #000;break-inside:avoid}
  .print-foot p{font-size:8pt;line-height:1.4;color:#000;margin:0 0 3pt}
  .print-foot p:last-child{margin-bottom:0}
  .fields input,.fields textarea{border:.5pt solid #666}
  a{color:#000;text-decoration:none}
}
.print-head,.print-foot{display:none}