/* ==========================================================================
   Option 1a — "Ledger"
   Classic chartered-practice feel: cream paper, brand indigo and gold, Lora
   serif headings, everything separated by ruled lines rather than boxes.
   ========================================================================== */

/* --- fonts ---------------------------------------------------------------

   Self-hosted rather than pulled from Google. Two reasons: it removes a
   render-blocking round trip to a third-party origin, and it stops every
   visitor's IP reaching Google, which for a UK practice serving UK
   homeowners is a data-protection question rather than a theoretical one.

   These are the variable files. Google serves one per family and subset and
   points every weight at it, so the six files here cover what eleven
   requested faces used to. IBM Plex Mono was loaded and never used by a
   single rule; it is gone.

   Licences: Lora and Public Sans are both SIL Open Font License 1.1. See
   assets/fonts/OFL.txt.
   ------------------------------------------------------------------------ */

/* Metric-matched fallbacks. font-display: swap paints a fallback first, and
   Public Sans is 11% wider than system-ui — so every first load reflowed as the
   real face arrived. size-adjust scales the fallback to the same advance width
   and the ascent/descent overrides match its line box, which makes the swap
   invisible rather than a jump. Measured from canvas TextMetrics, not guessed. */
@font-face {
  font-family: 'Lora fallback';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 102.64%;
  ascent-override: 98.41%;
  descent-override: 26.31%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Public Sans fallback';
  /* Arial first, not system-ui: Arial and Liberation Sans are metric-compatible
     and present on virtually every machine, so one set of numbers holds
     everywhere. system-ui resolves to a different face per platform, which
     makes any single size-adjust wrong somewhere. */
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue');
  size-adjust: 105.53%;
  ascent-override: 90.02%;
  descent-override: 21.80%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/lora-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/lora-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/lora-var-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/lora-var-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/public-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/public-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Both grounds are declared here unconditionally so either can be read back
     from the root whatever scheme is in force — the theme-color <meta> tags
     need the one that is *not* currently applied. --bg is the live one. */
  --day-bg: #f7f4ec;
  --night-bg: #14122b;

  --bg: var(--day-bg);
  --ink: #1b1830;
  --muted: #4e4a63;
  --faint: #625e78;
  /* Was #8b87a0 at 3.15:1 on the paper — below AA for the small text it
     carries (hero credentials, quote attribution, footer labels). */
  --fainter: #6b6782;
  /* Brand indigo and gold, taken from the live site: rgb(31,7,126) and
     rgb(181,158,104). --gold is the fill colour; --gold-ink is the darkened
     version used wherever gold has to carry small text on the cream paper. */
  --brand: #1f077e;
  --brand-dark: #0c076a;
  --gold: #b59e68;
  --gold-ink: #7a6329;
  --gold-bright: #b59e68;
  --gold-pale: #d3c095;
  --rule: #e2d7bd;
  --rule-dark: #d3c39b;
  --paper-2: #f3efe1;
  --paper-3: #fdfcf8;
  --accent: var(--gold-ink);
  --focus: var(--brand);

  --font-display: 'Lora', 'Lora fallback', Georgia, 'Times New Roman', serif;
  --font-body: 'Public Sans', 'Public Sans fallback', system-ui, -apple-system, sans-serif;

  --gutter: clamp(20px, 5vw, 96px);
  --max: 1240px;

  --tile-bg: transparent;
  --tile-border: #d9d2bf;
  --tile-border-hover: var(--gold);
  --tile-bg-on: var(--brand);
  --tile-ink-on: var(--bg);
  --tile-border-on: var(--brand);

  --verdict-bg: var(--paper-3);
  --verdict-border: var(--brand);
  --tag-yes-bg: var(--brand);
  --tag-yes-ink: var(--bg);
  --tag-no-ink: var(--brand);

  --field-bg: var(--bg);
  --field-border: none;
  --field-ink: var(--ink);
  --field-placeholder: var(--muted);

  /* Ink for text sitting on a gold fill. Gold is light, so this stays dark in
     both schemes — it is the one token that does not flip. */
  --on-gold: #241d07;

  /* The contact block. It used to borrow --brand for its background, which
     breaks in dark where brand is a pale lavender and the section would turn
     into a glaring slab. It gets its own tokens now. */
  --panel: var(--brand);
  --panel-ink: var(--bg);
  --panel-muted: #c9c3e6;
  --panel-faint: #a9a2cd;
  --panel-rule: rgba(247, 244, 236, .25);
  --panel-rule-soft: rgba(247, 244, 236, .2);

  --wa-shadow: rgba(31, 7, 126, .28);

  /* Tells the browser which way round this page is, so form controls, the
     scrollbar and the caret are drawn to match rather than staying light. */
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Night

   The Ledger is a paper metaphor, so this is not an inversion — it is the same
   ledger read by lamplight. The paper becomes the ink: the cream that was the
   page is now the text, on a ground tinted with the brand indigo rather than a
   neutral black. Gold finally gets to be gold; on cream it had to be darkened
   to --gold-ink to stay legible, and here it can lighten instead.

   Every pairing was measured, not eyeballed. The lowest in this scheme is the
   colophon at 5.61:1 against the panel; the light scheme's lowest is 4.91:1.

   The values live once, in --night-*. They are assigned twice below because
   plain CSS cannot share a declaration block between a media query and an
   attribute selector — but a colour only ever changes in one place.
   -------------------------------------------------------------------------- */

:root {
  --night-ink: #efeadd;
  --night-muted: #bdb7c9;
  --night-faint: #a8a2b8;
  --night-fainter: #948da6;
  --night-brand: #a99bff;
  --night-brand-dark: #c0b6ff;
  --night-gold: #c9b078;
  --night-gold-ink: #d7c08c;
  --night-gold-pale: #e0cda4;
  --night-rule: #2e2a4d;
  --night-rule-dark: #3a3560;
  --night-paper-2: #191735;
  --night-paper-3: #1c1940;
  --night-tile-border: #35315a;
  --night-panel: #1e1b42;
  --night-panel-muted: #b9b2d4;
  --night-panel-faint: #9a93b8;
  --night-panel-rule: rgba(239, 234, 221, .22);
  --night-panel-rule-soft: rgba(239, 234, 221, .16);
  /* Field and panel are both near-black at night, so the input box has to be
     drawn rather than implied. 3.74:1 against the panel clears the 3:1 that
     WCAG asks of a control boundary. */
  --night-field-bg: #181535;
  --night-field-border: 1px solid #7a749f;
  --night-wa-shadow: rgba(0, 0, 0, .5);
}


/* Follow the system, unless the reader has explicitly asked for light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;

  --bg: var(--night-bg);
  --ink: var(--night-ink);
  --muted: var(--night-muted);
  --faint: var(--night-faint);
  --fainter: var(--night-fainter);
  --brand: var(--night-brand);
  --brand-dark: var(--night-brand-dark);
  --gold: var(--night-gold);
  --gold-ink: var(--night-gold-ink);
  --gold-bright: var(--night-gold);
  --gold-pale: var(--night-gold-pale);
  --rule: var(--night-rule);
  --rule-dark: var(--night-rule-dark);
  --paper-2: var(--night-paper-2);
  --paper-3: var(--night-paper-3);
  --tile-border: var(--night-tile-border);
  --panel: var(--night-panel);
  --panel-ink: var(--night-ink);
  --panel-muted: var(--night-panel-muted);
  --panel-faint: var(--night-panel-faint);
  --panel-rule: var(--night-panel-rule);
  --panel-rule-soft: var(--night-panel-rule-soft);
  --field-bg: var(--night-field-bg);
  --field-border: var(--night-field-border);
  --wa-shadow: var(--night-wa-shadow);
  }
}

/* An explicit choice wins over the system in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--night-bg);
  --ink: var(--night-ink);
  --muted: var(--night-muted);
  --faint: var(--night-faint);
  --fainter: var(--night-fainter);
  --brand: var(--night-brand);
  --brand-dark: var(--night-brand-dark);
  --gold: var(--night-gold);
  --gold-ink: var(--night-gold-ink);
  --gold-bright: var(--night-gold);
  --gold-pale: var(--night-gold-pale);
  --rule: var(--night-rule);
  --rule-dark: var(--night-rule-dark);
  --paper-2: var(--night-paper-2);
  --paper-3: var(--night-paper-3);
  --tile-border: var(--night-tile-border);
  --panel: var(--night-panel);
  --panel-ink: var(--night-ink);
  --panel-muted: var(--night-panel-muted);
  --panel-faint: var(--night-panel-faint);
  --panel-rule: var(--night-panel-rule);
  --panel-rule-soft: var(--night-panel-rule-soft);
  --field-bg: var(--night-field-bg);
  --field-border: var(--night-field-border);
  --wa-shadow: var(--night-wa-shadow);
}

/* --- eyebrow / small caps label ----------------------------------------- */
.eyebrow {
  font-size: 0.7188rem;
  letter-spacing: .22em;
  color: var(--gold-ink);
  margin-bottom: 12px;
  text-transform: uppercase;
}

.h-sec { font-size: clamp(1.625rem, 1.4082rem + 0.925vw, 2.125rem); font-weight: 500; line-height: 1.2; }
.lead { font-size: 0.9062rem; line-height: 1.65; color: var(--muted); margin: 16px 0 0; }
/* The hedge under the checker. Was an inline style on the element. */
.lead-note { margin-top: 26px; font-size: 0.8438rem; }
/* The bridge to the calculator sits above the hedge and reads as a next step,
   not as a footnote — so it keeps body size where .lead-note drops. */
.lead-bridge { margin-top: 26px; }

/* --- utility bar --------------------------------------------------------- */
.util {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 10px var(--pad-x);
  border-bottom: 1px solid var(--rule);
  font-size: 0.7812rem;
  letter-spacing: .04em;
  color: var(--faint);
}
/* Coverage left, contact and the scheme switch together on the right. With
   three children, space-between alone left the contact pair adrift mid-bar. */
.util-contact { margin-inline-start: auto; }
.util a { color: var(--brand); font-weight: 600; text-decoration: none; }
.util a:hover { text-decoration: underline; }
.theme-switch label { color: var(--fainter); }
.theme-switch label:hover { color: var(--brand); }
/* The selected state is carried by a gold rule as well as by colour, so it does
   not depend on colour perception alone. */
.theme-switch input:checked + label {
  color: var(--brand);
  box-shadow: inset 0 -2px 0 var(--gold);
}

/* --- masthead ------------------------------------------------------------ */
.masthead { text-align: center; padding: 36px var(--pad-x) 0; }
.mast-logo { width: 64px; height: auto; margin: 0 auto 14px; }
.mast-name {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1582rem + 0.925vw, 1.875rem);
  font-weight: 500;
  letter-spacing: .14em;
}
.mast-sub { font-size: 0.75rem; letter-spacing: .28em; color: var(--gold-ink); margin-top: 8px; }

.nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 34px;
  margin-top: 26px;
  padding: 14px 0;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: .08em;
}
.nav a { text-decoration: none; }
.nav a:hover { color: var(--gold-ink); }
/* The contact link is picked out in gold. Full-strength --gold is 2.37:1 on
   the cream paper and fails AA at this size, so it uses the darkened ink. */
.nav-cta { color: var(--gold-ink); }

/* --- hero ---------------------------------------------------------------- */
.hero { text-align: center; padding: clamp(48px, 7vw, 78px) var(--pad-x) clamp(44px, 6vw, 70px); }
.hero h1 {
  font-size: clamp(2rem, 1.4581rem + 2.312vw, 3.25rem);
  font-weight: 500;
  line-height: 1.15;
  /* Lora is spaced for text, not for 52px display, where the default reads
     loose. In em so it stays proportional across the clamp. */
  letter-spacing: -0.015em;
}
.hero-lead {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 640px;
  margin: 24px auto 0;
}
.hero-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.cta-solid {
  padding: 14px 28px;
  background: var(--brand);
  color: var(--bg);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
}
.cta-solid:hover { background: var(--brand-dark); }
.cta-line {
  padding: 14px 28px;
  border: 1px solid var(--gold);
  color: var(--gold-ink);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
}
.cta-line:hover { background: var(--gold); color: var(--on-gold); }
.hero-creds { margin-top: 40px; font-size: 0.75rem; letter-spacing: .14em; color: var(--fainter); }

/* --- two-owner split ----------------------------------------------------- */
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.split-2 { padding-inline: var(--center-x); }
.split-rule { background: var(--rule); }
/* A flex column so the call to action can be pushed to the bottom. The grid
   already stretches both columns to the same height, so pushing both links
   down lands them on the same line whatever the copy above them does. */
.split-2 > .col {
  padding: clamp(36px, 5vw, 52px) var(--gutter);
  display: flex;
  flex-direction: column;
}
.split-2 h2 { font-size: 1.625rem; font-weight: 500; margin-bottom: 14px; }
.split-2 p { font-size: 0.9375rem; line-height: 1.7; color: var(--muted); margin: 0 0 18px; }
.inline-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand);
  /* An underline rather than a border. A border is drawn along the bottom of
     the box, so when this link wraps to two lines the rule runs the full width
     of the column under both. text-decoration follows the words. */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  /* Breathing room for the hover fill, pulled back out again so the text still
     starts flush with the paragraph above it. */
  padding-inline: .2em;
  margin-inline: -.2em;
}

/* Deliberately no transition on colour here. The hover fill resolves from
   var(--brand), and the scheme switch changes that variable on :root — Chrome
   does not reliably finish a transition whose endpoint comes from a custom
   property changed on an ancestor, and the link gets stuck on the previous
   scheme's colour. Measured: after switching to light it stayed lavender on
   cream, 1.86:1. An instant hover costs nothing; a stuck one costs the link. */

/* align-self, not align-items on the column: the headings and paragraphs still
   stretch, only the link shrinks to its own width. */
.split-2 .inline-link { margin-top: auto; align-self: flex-start; }

.inline-link:hover,
.inline-link:focus-visible {
  background: var(--brand);
  color: var(--bg);
  text-decoration-color: transparent;
}

@media (max-width: 1000px) {
  .split-2 { grid-template-columns: 1fr; }
  .split-rule { height: 1px; }
}

/* --- generic section ----------------------------------------------------- */
.sec { padding: clamp(44px, 6vw, 70px) var(--pad-x); }
.sec + .sec, .sec.ruled { border-top: 1px solid var(--rule); }
.sec-head { text-align: center; margin-bottom: 40px; }
.sec-head .eyebrow { margin-bottom: 12px; }
.sec-head p { font-size: 0.9375rem; color: var(--muted); margin: 12px 0 0; }

.aside-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); }

/* --- process ------------------------------------------------------------- */
.step {
  display: grid;
  grid-template-columns: 60px 220px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.step-n { font-family: var(--font-display); font-size: 1.375rem; color: var(--gold-ink); }
.step-t { font-size: 0.9375rem; font-weight: 600; }
.step-d { font-size: 0.875rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 760px) {
  .step { grid-template-columns: 44px minmax(0, 1fr); gap: 8px 16px; }
  .step-d { grid-column: 2; }
}

/* --- fees ---------------------------------------------------------------- */
.fees { background: var(--paper-2); }
.fee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--rule-dark);
  align-items: baseline;
}
.fee-name { font-size: 0.9688rem; font-weight: 600; }
.fee-note { font-size: 0.8125rem; color: var(--faint); margin-top: 4px; }
/* A ledger aligns its figures. Lora's default numerals are proportional — a
   10.3px spread between the widest and narrowest digit at 40px — so a
   right-aligned column of prices does not line up on the digits. */
.fee-price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--brand);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
.fee-foot {
  font-size: 0.8438rem;
  line-height: 1.6;
  color: var(--faint);
  margin: 18px 0 0;
  border-top: 1px solid var(--rule-dark);
  padding-top: 16px;
}

/* --- testimonial --------------------------------------------------------- */
.quote-sec { text-align: center; padding: clamp(48px, 7vw, 80px) var(--pad-x); border-top: 1px solid var(--rule); }
.quote-mark { font-family: var(--font-display); font-size: 3.75rem; line-height: 0; color: var(--gold); height: 26px; }
.quote-body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 0.9895rem + 0.578vw, 1.4375rem);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 900px;
}
.quote-cite { font-size: 0.7812rem; letter-spacing: .16em; color: var(--fainter); margin-top: 20px; font-style: normal; }

/* --- bio ----------------------------------------------------------------- */
.bio { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 4.5vw, 64px); align-items: start; }
/* object-position keeps the crop off the top of the head — the source photo
   has very little headroom. */
.bio-photo { width: 100%; max-width: 300px; object-fit: cover; object-position: center 22%; aspect-ratio: 5 / 6; }
.bio h2 { font-size: clamp(1.625rem, 1.4082rem + 0.925vw, 2.125rem); font-weight: 500; }
.bio h2 span { font-size: 1.125rem; color: var(--fainter); }
.bio p { font-size: 0.9375rem; line-height: 1.7; color: var(--muted); margin: 16px 0 0; max-width: 62ch; }
.creds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin-top: 24px; max-width: 620px; list-style: none; padding: 0; }
.creds li { font-size: 0.875rem; padding: 10px 0; border-top: 1px solid var(--rule); }
@media (max-width: 1000px) { .bio { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .creds { grid-template-columns: 1fr; } }

/* --- contact ------------------------------------------------------------- */
.contact { background: var(--panel); color: var(--panel-ink); padding: clamp(44px, 6vw, 70px) var(--pad-x); }
.contact h2 { font-size: clamp(1.625rem, 1.4082rem + 0.925vw, 2.125rem); font-weight: 500; }
/* Was running to ~89 characters a line; everything else on the page sits
   between 48 and 72. */
.contact-intro { font-size: 0.9062rem; line-height: 1.65; color: var(--panel-muted); margin: 12px 0 28px; max-width: 62ch; }
.contact-grid { display: grid; grid-template-columns: 1fr 380px; gap: clamp(32px, 5vw, 70px); }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-2 .span-2 { grid-column: 1 / -1; }
.contact .btn { margin-top: 18px; background: var(--gold-bright); color: var(--on-gold); }
.contact .form-note { color: var(--panel-muted); }
.contact .form-status { color: var(--gold-pale); font-weight: 600; }
.contact .form-note a { color: var(--panel-ink); }
.direct { border-left: 1px solid var(--panel-rule); padding-left: clamp(20px, 3vw, 44px); }
.direct .eyebrow { color: var(--gold-pale); margin-bottom: 18px; }
.direct dl { font-size: 0.9375rem; line-height: 2.1; margin: 0; }
.direct dt { display: inline; color: var(--panel-muted); }
.direct dd { display: inline; margin: 0; }
.direct dd::after { content: ''; display: block; }
.direct a { color: var(--panel-ink); text-decoration: none; }
.direct a:hover { text-decoration: underline; }
.direct address { margin-top: 14px; font-size: 0.8438rem; color: var(--panel-muted); line-height: 1.7; font-style: normal; }
.direct-area { margin-top: 26px; font-size: 0.75rem; letter-spacing: .14em; color: var(--panel-faint); }
@media (max-width: 1000px) {
  .contact-grid { grid-template-columns: 1fr; }
  .direct { border-left: none; border-top: 1px solid var(--panel-rule); padding-left: 0; padding-top: 28px; }
}

.colophon {
  border-top: 1px solid var(--panel-rule-soft);
  margin-top: 56px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.75rem;
  color: var(--panel-faint);
}

/* The credit reads a half-step brighter than the text around it, which is what
   makes it legible as a link without it shouting. */
.colophon a {
  color: var(--panel-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.colophon a:hover { color: var(--panel-ink); }

/* --- running head -------------------------------------------------------- */
/* A printed running head is separated by a rule, not a shadow, so the gold
   hairline is the only edge — the same rule that closes the masthead nav. */
.runhead {
  background: var(--bg);
  border-bottom: 1px solid var(--gold);
}
/* Italic for the section, the convention a book uses to separate the running
   head's title from its subject. */
.runhead-sec {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--fainter);
}
.runhead-call {
  background: var(--brand);
  color: var(--bg);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
}
.runhead-call:hover { background: var(--brand-dark); }

/* --- WhatsApp float ------------------------------------------------------ */
.wa {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--brand);
  color: var(--brand);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 0.8438rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px var(--wa-shadow);
}
@media (max-width: 600px) { .wa { bottom: 14px; right: 14px; } }

/* Clearance so the floating WhatsApp button never sits on the last line. */
@media (max-width: 600px) { .contact { padding-bottom: 92px; } }

/* --------------------------------------------------------------------------
   Phone layout

   The rules above already reflow the 1240px artboard into a single column.
   This is the separate, phone-specific job: touch targets that clear 44px,
   a masthead that does not spend the whole first screen on itself, and CTAs
   sized for a thumb rather than a cursor.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  /* The utility bar was 87px of grey 12.5px type above the fold, with two
     15px-tall links inside it. On a phone its only job is the contact pair;
     the coverage line repeats in the hero lead and again in the footer. */
  /* Contact on the left, the toggle hard right, one line. The coverage line
     repeats in the hero lead and the footer, so it goes. */
  .util { justify-content: space-between; gap: 0 10px; padding-block: 0; }
  .util-contact { margin-inline-start: 0; }
  .util > :first-child { display: none; }
  .util a { display: inline-block; padding: 13px 2px; }

  /* 288px of masthead before the hero begins is a third of a phone screen. */
  .masthead { padding-top: 24px; }
  .mast-logo { width: 52px; margin-bottom: 12px; }

  /* Six centred links wrap into three ragged rows of 21px-tall targets. Two
     rows of three cells spend the same height on tappable area instead. */
  .nav {
    display: grid;
    /* minmax(0,...) so the cells can shrink below the width of their labels.
       Without it the three tracks hold their min-content width and push the
       whole page sideways once the reader's font gets large enough. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 20px;
    padding: 0;
  }
  .nav a { padding: 13px 4px; text-align: center; }

  .sec-head { margin-bottom: 28px; }

  /* Mobile, email and WhatsApp are the highest-intent links on the page and
     were the smallest: 17px tall, set by the line-height around them. */
  .direct dl { line-height: 1.9; }
  .direct a { display: inline-block; padding: 9px 0; }

  /* A 300px portrait in a 335px column reads as a mistake. A restrained
     centred crop reads as a decision. */
  .bio-photo { max-width: 220px; margin-inline: auto; }

  .colophon { margin-top: 36px; }
}

@media (max-width: 600px) {
  /* Stacked and full width: both routes into the enquiry are equally
     reachable, and neither depends on hitting a 198px pill with a thumb. */
  .hero-cta { flex-direction: column; flex-wrap: nowrap; gap: 12px; }
  .cta-solid, .cta-line { display: block; padding: 16px 20px; }

  .fee { gap: 16px; }
}

@media (max-width: 400px) {
  /* At 320px the pair wraps mid-string and strands the separator; half a
     step down in size keeps the number and the address on one line. */
  .util { font-size: 0.7188rem; }
}

@media (max-width: 460px) {
  /* The number, the address and a three-option switch cannot share a line on a
     phone: the switch is 120px, the address about 260px, and the bar has 40px
     of gutters. Below ~432px they collide and the bar wraps to two rows. The
     number is the higher-intent tap on a phone and the address is still in the
     contact panel and under the form, so the address is what gives way. */
  /* Scoped to .util deliberately: `.util a` above is (0,1,1) and a bare
     `.util-email` is (0,1,0), so the unscoped version loses to it and the
     address stays visible. */
  .util .util-sep, .util .util-email { display: none; }
}