/* ==========================================================================
   Tillmore — Lovito Services LTD
   Warm cream ground, near-black type, one amber accent used as a fill.
   Centred hero, light-weight display type, flat bordered panels, 6px corners.
   Deliberately unlike Tinmarq (white / indigo / heavy type / angled cards):
   different ground, different weight class, different composition.
   No stock imagery of any kind. No decorative gradients.
   ========================================================================== */

:root {
  --cream:   oklch(97.5% 0.012 85);   /* #FAF6EE page ground */
  --cream-2: oklch(94.5% 0.016 85);   /* #F2ECE1 alternating band */
  --cream-3: oklch(90.5% 0.018 85);   /* #E5DFD3 wells */
  --line:    oklch(88.0% 0.016 85);   /* #DCD7CC hairline */
  --line-s:  oklch(62.0% 0.014 85);   /* #8A867D real boundaries, 3.3:1 */

  --ink:     oklch(20.0% 0.012 60);   /* #1A1511  15.6:1 on cream */
  --ink-2:   oklch(42.0% 0.012 60);   /* #524C47   7.2:1 */
  --ink-3:   oklch(53.0% 0.012 60);   /* #716A65   4.9:1 */

  --amber:   oklch(80.0% 0.155 80);   /* #F1B12B  fill only, ink on top = 8.9:1 */
  --amber-ink: oklch(47.0% 0.101 70); /* #7E4F02  amber-family TEXT on cream */
  --amber-t: oklch(95.5% 0.045 85);   /* #FEEFCF soft wash */

  --on-ink:   oklch(98.0% 0.010 85);
  --on-ink-2: oklch(78.0% 0.014 85);
  --on-ink-3: oklch(66.0% 0.014 85);

  --font: 'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Light-weight display, larger than Tinmarq's but far lighter */
  --fs-h1:   clamp(2.5rem, 1.5rem + 3.4vw, 4.25rem);
  --fs-h2:   clamp(1.75rem, 1.35rem + 1.5vw, 2.625rem);
  --fs-h3:   clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-sm:   0.9375rem;
  --fs-xs:   0.8125rem;
  --fs-lab:  0.75rem;

  --sp:     clamp(3.5rem, 6.5vw, 6.5rem);
  --gutter: clamp(1.15rem, 3.6vw, 3rem);
  --max:    1140px;
  --r: 6px;                            /* sharp, near-square */
  --hdr-h: 70px;                       /* header bar height; the mobile menu caps against it */
  --ease: cubic-bezier(0.25, 0.8, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; overflow-x: clip; }
body {
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.65;
  color: var(--ink-2); background: var(--cream);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* Light display weights are the signature — never go above 500 on headings */
h1, h2, h3, h4 { color: var(--ink); font-weight: 400; line-height: 1.14; letter-spacing: -0.028em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 300; line-height: 1.06; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); font-weight: 300; }
h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.018em; line-height: 1.35; }
h1 em, h2 em { font-style: normal; color: var(--amber-ink); }
p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--ink-2); max-width: 54ch; }
.prose { max-width: 68ch; }
.prose p + p { margin-top: 1.05em; }
.prose .subh { font-size: var(--fs-h3); font-weight: 500; color: var(--ink); margin: 1.7em 0 0.5em; }
.prose > .subh:first-child { margin-top: 0; }
.prose a { color: var(--amber-ink); font-weight: 500; }
.prose ul { margin: 1em 0; display: grid; gap: 0.5rem; }
.prose ul li { padding-left: 1.4rem; position: relative; }
.prose ul li::before { content: ''; position: absolute; left: 0; top: 0.66em; width: 8px; height: 2px; background: var(--amber-ink); }

/* amber chip — the accent is a fill with dark text, never light text */
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--fs-lab); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink);
  background: var(--amber); padding: 0.34rem 0.62rem; border-radius: 3px;
}
.lab { font-size: var(--fs-lab); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--sp); }
.band { background: var(--cream-2); }
.shead { max-width: 60ch; margin-bottom: clamp(1.85rem, 3.5vw, 2.75rem); }
.shead .chip, .shead .lab { margin-bottom: 0.9rem; }
.shead p { margin-top: 0.85rem; }
.shead--c { margin-inline: auto; text-align: center; }
.shead--c p { margin-inline: auto; }

.skip {
  position: absolute; left: var(--gutter); top: 0.5rem; z-index: 200;
  transform: translateY(-200%); background: var(--ink); color: var(--on-ink);
  padding: 0.65rem 1.05rem; font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none; border-radius: var(--r); transition: transform 0.2s var(--ease);
}
.skip:focus-visible { transform: translateY(0); }
:where(a, button, summary, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- buttons: near-black primary, Paddle-style ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.78rem 1.3rem; border: 0; border-radius: var(--r);
  background: var(--ink); color: var(--on-ink);
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  transition: background-color 0.18s var(--ease);
}
.btn:hover { background: oklch(30% 0.014 60); }
.btn__sq { display: grid; place-items: center; width: 18px; height: 18px; background: var(--amber); color: var(--ink); border-radius: 2px; flex: none; }
.btn--out { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-s); }
.btn--out:hover { background: var(--cream-2); }
.btn--amber { background: var(--amber); color: var(--ink); }
.btn--amber:hover { background: oklch(74% 0.15 80); }
.tlink { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--amber-ink); text-decoration: none; }
.tlink:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.tlink svg { transition: transform 0.25s var(--ease); }
.tlink:hover svg { transform: translateX(3px); }

/* ---------- header: statement bar — logo left, nav LEFT beside it, CTA far
   right. No dropdown anywhere; no drawer. Flat, hairline-ruled. ---------- */
.hdr { position: sticky; top: 0; z-index: 100; background: var(--cream); border-bottom: 1px solid var(--line-s); }
.hdr__in { display: flex; align-items: center; gap: 2rem; min-height: var(--hdr-h); }

/* lockup: the settlement-rail mark, then the wordmark — ONE colour, ONE weight,
   and a 1px amber hairline ruled under the letters. That hairline is a WORDMARK
   DEVICE, not this brand's mark: the mark is the three-chip rail drawn by MARK
   in _src/build.mjs, and that is what stands alone in a favicon or an avatar.
   The rule stays because hairlines are this site's whole visual language, but
   it no longer has to carry the brand by itself; there is still no colour split
   and no weight split in the letters.
   align-items:center centres the mark box on the wordmark's border box, so the
   rail sits across the cap-top-to-hairline band rather than hanging off the
   baseline.
   gap is 0.375rem, up from 0.25rem: the old artwork was inset 8/64 units and
   donated 3.5px of its own air, the rail is cropped to a 2-unit bleed and only
   donates 1.75px, so the flex gap makes up the difference — 6 + 1.75 = 7.75px
   optical, ~0.5x cap height, the same as before. */
.logo { display: inline-flex; align-items: center; gap: 0.375rem; text-decoration: none; }

/* The mark is a horizontal rail, 3.5:1 — WIDER THAN TALL — so it is sized by
   height and the width is that height x 3.5, matching MARK_VB exactly
   (3.0625rem / 0.875rem = 3.5). Set them together or the chips distort: the
   viewBox has no slack to absorb a wrong ratio.
   A 14px box paints 12.25px chips, ~0.8x Switzer's ~15.4px cap height at the
   22px wordmark size. A single solid square needed to run 1.3x cap height to
   read as equal to the type; three ringed chips strung across 49px are already
   a heavier cluster than one square, so matching cap height outright would
   swamp the letters. flex:none so it never squeezes at 375px — the lockup is
   ~129px wide there and the bar still holds logo + Menu inside 338px.
   The header (--cream) and the footer (--cream-2) are both light grounds here,
   so one colourway serves both: the --line-s chip ring is 3.37:1 on cream and
   3.09:1 on cream-2, and the settled --amber-ink chip 6.48:1 / 5.94:1. The
   amber fill itself is only 1.76:1, which is why the ring is not optional.
   Flat: no shadow. */
/* The rail is 3.5:1, so it will always sit shorter than a square tile — but it
   still needs enough height for the chips and the 1.5px rule to read. */
/* Wordmark only (T12): "Tillmore" in Young Serif, one colour, with the o
   replaced by a solid amber coin the size of the x-height (0.5em in this
   face), so it sits exactly where the letter would. The coin is the span in
   nameHtml (content.mjs); the favicon reuses it from build.mjs. */
.logo__w {
  font-family: 'Young Serif', Georgia, 'Times New Roman', serif;
  font-size: 1.3rem; font-weight: 400; letter-spacing: -0.02em;
  color: var(--ink); line-height: 1;
}
.logo__o {
  display: inline-block; width: 0.5em; height: 0.5em; margin: 0 0.02em;
  background: var(--amber); border-radius: 50%; vertical-align: -0.013em;
}

/* left-aligned, ruled underline states — deliberately not a centred pill nav.
   Marker strength, weakest to strongest:
     hover     text darkens + a thin text underline, NO rule below the box
     section   2px --line-s rule (3.39:1) — you are inside this section
     page      2px --amber-ink rule (6.50:1) + 600 weight — you are HERE
   The current page is never signalled by colour alone: weight, rule width and
   aria-current all carry it. */
.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.6rem); }
.nav__it { position: relative; }
.nav__a {
  display: inline-flex; align-items: center;
  padding: 0.45rem 0.1rem; font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.nav__a:hover {
  color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.nav__a[aria-current='location'] { color: var(--ink); border-bottom-color: var(--line-s); }
.nav__a[aria-current='page'] { color: var(--ink); font-weight: 600; border-bottom-color: var(--amber-ink); }
.nav__a[aria-current]:hover { text-decoration: none; }

.hdr__cta { display: none; }

/* menu control: a plain text button, "Menu" / "Close". No box, no border,
   no shadow, no bars — the open state is the word plus a 2px amber underline
   plus aria-expanded. */
.hdr__mbtn {
  margin-left: auto; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0.5rem 0.15rem;
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  box-shadow: none; font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  cursor: pointer; transition: border-color 0.18s var(--ease);
}
.hdr__mbtn[aria-expanded='true'] { border-bottom-color: var(--amber); }

/* mobile: a plain stacked list that grows the header and pushes the page
   down. No overlay, no fixed positioning, no transform animation. The header
   is sticky, so the open list is capped to the space left by half the
   viewport and scrolls inside itself; site.js also closes it on page scroll,
   so it can never ride down the page. */
.mnav { display: none; border-top: 1px solid var(--line); background: var(--cream); }
.mnav[data-open='true'] {
  display: block;
  max-height: max(9.5rem, calc(50vh - var(--hdr-h)));       /* fallback: no svh */
  max-height: max(9.5rem, calc(50svh - var(--hdr-h)));
  overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
}
.mnav__l { padding-block: 0.35rem 0; }
.mnav__l a {
  display: block; padding: 0.9rem 0 0.9rem 0.8rem;
  font-size: 1.0625rem; font-weight: 500; color: var(--ink-2); text-decoration: none;
  border-left: 3px solid transparent; border-bottom: 1px solid var(--line);
}
.mnav__l li:last-child a { border-bottom: 0; }
.mnav__l a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mnav__l a[aria-current='location'] { color: var(--ink); border-left-color: var(--line-s); }
.mnav__l a[aria-current='page'] { color: var(--ink); font-weight: 600; border-left-color: var(--amber-ink); }
.mnav__l a[aria-current]:hover { text-decoration: none; }
.mnav__cta { padding: 1.15rem 0 1.4rem; border-top: 1px solid var(--line); }
/* The four section pages, nested under Services. Flat and hairline-ruled like
   the rest of this site — indented by padding, not by a coloured rail. */
.mnav__sub { padding: 0; margin: 0; list-style: none; }
.mnav__sub a { padding-left: 1.5rem; font-size: var(--fs-sm); color: var(--ink-3); }
.mnav__sub a[aria-current='page'] { color: var(--ink); font-weight: 600; }

@media (min-width: 1040px) {
  .nav { display: block; }
  .hdr__cta { display: inline-flex; margin-left: auto; }
  .hdr__mbtn { display: none; }
  .mnav { display: none !important; }
}

/* ---------- contextual section bar (Solutions only) -------------------
   Cream fill, flat statement tabs, ONE full-bleed hairline along the bottom.
   No border-top: .hdr sits directly above and already draws that rule, and
   two adjacent 1px lines in the same colour render as a 2px band. */
.snav { background: var(--cream); border-bottom: 1px solid var(--line); }
.snav__in { display: flex; align-items: stretch; gap: clamp(0.9rem, 2.4vw, 1.75rem); }
.snav__lab {
  flex: none; align-self: stretch; display: flex; align-items: center;
  padding-right: clamp(0.9rem, 2.4vw, 1.75rem); border-right: 1px solid var(--line);
  font-size: var(--fs-lab); font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.snav__sc { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.snav__l { display: flex; align-items: stretch; gap: clamp(0.85rem, 2.2vw, 1.75rem); }
.snav__t {
  display: flex; align-items: center; white-space: nowrap;
  padding: 0.9rem 0.1rem; font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.snav__t:hover {
  color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
/* current tab = 600 weight + ink + a 2px --amber-ink rule (6.50:1 on cream) +
   aria-current. Hover carries no rule at all, so the marker is unambiguous. */
.snav__t[aria-current='page'] { color: var(--ink); font-weight: 600; border-bottom-color: var(--amber-ink); }
.snav__t[aria-current='page']:hover { text-decoration: none; }
@media (max-width: 719px) {
  .snav__in { display: block; }
  .snav__lab { display: block; padding: 0.7rem 0 0.1rem; border-right: 0; }
  .snav__t { padding-block: 0.5rem 0.7rem; }
}

/* ---------- hero: CENTRED (Tinmarq's is split) ------------------------ */
.hero { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3rem); text-align: center; }
.hero__in { max-width: 60rem; margin-inline: auto; }
.hero h1 { margin-top: 1.2rem; }
.hero .lead { margin: 1.15rem auto 0; }
.hero__acts { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.9rem; }

/* wordmark strip — bold text lockups, the way Paddle/Stripe list clients */

/* ---------- signature artefact: settlement timeline ------------------- */
.tl { border: 1px solid var(--line); border-radius: var(--r); background: var(--cream); overflow: hidden; }
.tl__t { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--line); background: var(--cream-2); }
.tl__t b { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.tl__t span { margin-left: auto; font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tl__body { padding: 1.4rem 1rem 1.15rem; }
.tl__rail { position: relative; height: 2px; background: var(--cream-3); margin: 0 clamp(1.2rem, 6%, 3rem); }
.tl__rail i { position: absolute; inset: 0 auto 0 0; width: var(--p, 75%); background: var(--amber); }
.tl__stops { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: -6px; }
.tl__stop { text-align: center; display: grid; gap: 0.55rem; justify-items: center; }
.tl__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 2px var(--line-s); }
.tl__stop.is-done .tl__dot { background: var(--amber); box-shadow: inset 0 0 0 2px var(--amber); }
.tl__stop.is-now .tl__dot { background: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.tl__k { font-size: var(--fs-xs); font-weight: 600; color: var(--ink); }
.tl__v { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tl__foot { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; padding: 0.8rem 1rem; border-top: 1px solid var(--line); background: var(--cream-2); }
.tl__foot span { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tl__foot b { color: var(--ink); font-weight: 600; }

/* ---------- document-style panels (flat, bordered, no shadow) --------- */
.doc { border: 1px solid var(--line); border-radius: var(--r); background: var(--cream); overflow: hidden; }
.doc__t { display: flex; align-items: center; gap: 0.55rem; padding: 0.78rem 1rem; border-bottom: 1px solid var(--line); background: var(--cream-2); }
.doc__t b { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.doc__t i { margin-left: auto; font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--ink); background: var(--amber); padding: 2px 7px; border-radius: 3px; }
.dtbl { font-family: var(--mono); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.dtbl th { text-align: left; padding: 0.55rem 1rem; border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.dtbl td { padding: 0.6rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.dtbl tr:last-child td { border-bottom: 0; }
.dtbl td b { color: var(--ink); font-weight: 600; }
.dtbl td.hi { color: var(--amber-ink); font-weight: 600; }
.dtbl td:last-child, .dtbl th:last-child { text-align: right; }

/* flat card artwork — front-on, not angled (Tinmarq's are angled) */
.pcard { border-radius: var(--r); padding: 1.1rem; background: var(--ink); color: var(--on-ink); max-width: 320px; }
.pcard--amber { background: var(--amber); color: var(--ink); }
.pcard__chip { width: 30px; height: 23px; border-radius: 4px; background: var(--amber); }
.pcard--amber .pcard__chip { background: var(--ink); }
.pcard__num { margin-top: 1.6rem; font-family: var(--mono); font-size: 0.9375rem; letter-spacing: 0.08em; }
.pcard__row { display: flex; justify-content: space-between; margin-top: 0.8rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; }

/* ---------- cards / grids --------------------------------------------- */
.grid2 { display: grid; gap: clamp(1rem, 2.2vw, 1.35rem); }
@media (min-width: 720px) { .grid2 { grid-template-columns: repeat(2, 1fr); } }
.grid3 { display: grid; gap: clamp(1rem, 2.2vw, 1.35rem); }
@media (min-width: 780px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }
.fc { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.2rem, 2.5vw, 1.6rem); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); }
a.fc:hover { border-color: var(--line-s); background: var(--cream-2); }
.fc__n { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; color: var(--amber-ink); }
.fc h3 { margin: 0.8rem 0 0.4rem; }
.fc p { font-size: var(--fs-sm); }
.fc__go { margin-top: auto; padding-top: 1.1rem; }

.split { display: grid; gap: clamp(1.85rem, 4vw, 3.25rem); align-items: center; }
@media (min-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--flip > :first-child { order: 2; }
  .split--start { align-items: start; }
}
.checks { display: grid; gap: 0.9rem; margin-top: 1.4rem; }
.checks li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.7rem; align-items: start; font-size: var(--fs-sm); }
.checks li b { display: block; color: var(--ink); font-weight: 600; font-size: var(--fs-body); margin-bottom: 0.12rem; }
.checks .tick { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; background: var(--amber); color: var(--ink); margin-top: 0.15em; }

.stats { display: grid; gap: clamp(1.35rem, 3vw, 2rem); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat__f { font-size: clamp(2rem, 1.4rem + 2vw, 2.875rem); font-weight: 300; color: var(--ink); letter-spacing: -0.035em; line-height: 1; }
.stat__l { margin-top: 0.5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.stat__d { margin-top: 0.2rem; font-size: var(--fs-xs); color: var(--ink-3); }

.rows { border-top: 1px solid var(--line); }
.row { display: grid; gap: 0.4rem 1.5rem; padding: clamp(1.1rem, 2.4vw, 1.5rem) 0; border-bottom: 1px solid var(--line); align-items: center; }
@media (min-width: 760px) { .row { grid-template-columns: minmax(0, 1fr) auto; } }
.row h3 { margin-bottom: 0.2rem; }
.row p { font-size: var(--fs-sm); }
.row--link { text-decoration: none; color: inherit; transition: background-color 0.2s var(--ease); }
.row--link:hover { background: var(--cream-2); }
.row__meta { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------- contact / form ------------------------------------------- */
.cbox { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.15rem, 2.4vw, 1.55rem); text-decoration: none; color: inherit; display: block; }
a.cbox:hover { border-color: var(--line-s); background: var(--cream-2); }
.cbox h3 { font-size: var(--fs-body); margin-bottom: 0.3rem; }
.cbox p { font-size: var(--fs-sm); word-break: break-word; }
.form { display: grid; gap: 0.9rem; background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.25rem, 2.8vw, 1.85rem); }
.fld { display: grid; gap: 0.32rem; }
.fld label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.fld label b { color: var(--amber-ink); }
.fld input, .fld textarea { width: 100%; padding: 0.72rem 0.85rem; background: var(--cream); border: 1px solid var(--line-s); border-radius: var(--r); font-size: var(--fs-body); color: var(--ink); transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); }
.fld textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-3); opacity: 1; }
.fld input:focus-visible, .fld textarea:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 3px var(--amber-t); }
.fld__e { display: none; align-items: center; gap: 0.35rem; font-size: var(--fs-xs); font-weight: 600; color: var(--amber-ink); }
.fld[data-bad='true'] .fld__e { display: flex; }
.fld[data-bad='true'] input, .fld[data-bad='true'] textarea { border-color: var(--amber-ink); }
.form__ok { display: none; gap: 0.6rem; padding: 0.85rem 1rem; background: var(--amber-t); border-radius: var(--r); font-size: var(--fs-sm); color: var(--ink); }
.form[data-sent='true'] .form__ok { display: flex; }
.form__n { font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------- page hero, CTA, footer ---------------------------------- */
.phero { background: var(--cream-2); border-bottom: 1px solid var(--line); padding-block: clamp(2rem, 4.5vw, 3.25rem); }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.9rem; }
.crumb a, .crumb span { font-size: var(--fs-xs); color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
.crumb i { color: var(--line-s); font-style: normal; }
.phero h1 { max-width: 28ch; }
.phero .lead { margin-top: 0.8rem; }

.cta { background: var(--ink); color: var(--on-ink-2); padding-block: clamp(2.5rem, 5vw, 4rem); }
.cta__in { display: grid; gap: 1.4rem clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 880px) { .cta__in { grid-template-columns: minmax(0, 1fr) auto; } }
.cta h2 { color: var(--on-ink); max-width: 32ch; }

.ftr { background: var(--cream-2); border-top: 1px solid var(--line); color: var(--ink-2); padding-block: clamp(2.5rem, 5vw, 3.5rem) 0; }
.ftr__top { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); padding-bottom: clamp(1.85rem, 4vw, 2.75rem); }
@media (min-width: 860px) { .ftr__top { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); } }
.ftr__blurb { font-size: var(--fs-sm); max-width: 38ch; margin-top: 0.85rem; line-height: 1.68; }
.ftr__legal { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: var(--fs-xs); line-height: 1.75; color: var(--ink-3); }
.ftr__legal b { display: block; color: var(--ink); font-size: var(--fs-lab); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.3rem; font-weight: 600; }
.ftr h2 { font-size: var(--fs-lab); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.9rem; }
.ftr__l { display: grid; gap: 0.12rem; }
.ftr__l a { padding: 0.3rem 0; font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; width: fit-content; }
.ftr__l a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ftr__bot { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; padding-block: 1.2rem; border-top: 1px solid var(--line); }
.ftr__cr { font-size: var(--fs-xs); color: var(--ink-3); }

/* ---------- reveal (opt-in, fail-safe) ------------------------------ */
.js [data-rv] { opacity: 0; transform: translateY(10px); }
.js [data-rv].in { opacity: 1; transform: none; transition: opacity 0.5s var(--ease), transform 0.55s var(--ease); transition-delay: calc(var(--d, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .js [data-rv] { opacity: 1 !important; transform: none !important; }
}
@media print { .hdr, .mnav, .snav, .cta { display: none !important; } body { background: #fff; color: #000; } }

/* Certification reads as small print at the foot of the settlement record. */
.tl__cert {
  margin: 0; padding: 0.7rem 1.05rem 0.95rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5;
}
.tl__cert abbr { font-weight: 700; text-decoration: none; border: 0; color: var(--ink-2); }

.rows__h { margin: 0 0 1.1rem; font-size: var(--fs-lab); font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-3); }

/* ---------- no-JS: .mnav is display:none until JS sets state, so a phone had no
   navigation at all. Render it in-flow and hide the text menu button. ----- */
html:not(.js) .hdr__mbtn { display: none; }
html:not(.js) .mnav { display: block; max-height: none; overflow: visible; }

/* contact form, live send (2026-10-09): sending and error states for the fetch
   handler in site.js, and the no-JS fallback targets contact.php redirects to. */
.form__static { display: none; padding: 0.85rem 1rem; margin-bottom: 1rem; border: 1px solid currentColor; border-radius: 6px; font-size: 0.9rem; }
.form__static:target { display: block; }
.form__err { display: none; gap: 0.6rem; align-items: flex-start; padding: 0.85rem 1rem; margin-bottom: 1rem; border: 1px solid currentColor; border-radius: 6px; font-size: 0.9rem; }
.form[data-sent='error'] .form__err { display: flex; }
.form[data-sent='sending'] button[type='submit'] { opacity: 0.65; cursor: progress; }