/* ---------------------------------------------------------------------------
   Weldenbrook — brand layer.

   Register: sober, typographic, high-trust. This concept exists because the
   other four are visually rich, and a solicitor or an accountant looking at
   them concludes the studio is "too fancy for me". So the whole quality budget
   here is spent on TYPE and SPACE. No gradients, no rounded corners, no soft
   shadows, no colour blocks. Every division on the page is a ruled line, the
   way a set of accounts is divided.

   Layout DNA distinct from the other four:
     · numbered section headers sitting ON a 2px rule, document-style
     · hairline ROW LISTS instead of card grids, everywhere
     · underline-only form fields
     · a light footer (the other four all close on a dark slab)
     · engraved line-work illustration — ledger, guilloche, elevation — rather
       than the tonal/gradient art the other concepts use

   The restraint IS the demonstration. If this page still looks expensive with
   one colour used at hairline scale, the argument is made.
   --------------------------------------------------------------------------- */

:root {
  /* Near-monochrome. The only chromatic value in the palette is --seal, and it
     appears at hairline scale: section numerals, rule markers, focus, the tick
     inside the seal glyph. Anything larger and the page stops reading sober. */
  --bg:          #ffffff;
  --bg-alt:      #f4f4f1;
  --surface:     #ffffff;
  --ink:         #14181c;
  --ink-soft:    #454c53;
  --ink-mute:    #797f86;
  --line:        #d8d9d6;
  --accent:      #14181c;   /* the brand colour IS the ink */
  --accent-ink:  #ffffff;
  --accent-soft: #eeefec;
  --focus:       #7a2b34;

  --seal:        #7a2b34;   /* oxblood — the colour law reports are bound in */

  --font-display: "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  /* 400, not 600: a light-set transitional serif reads as a document, a heavy
     one reads as a magazine. Serifs also need more leading than the neutral
     default, or the ascenders start closing up the measure. */
  --display-weight: 400;
  --display-tracking: -0.012em;
  --display-leading: 1.14;

  /* Square, everywhere. A single rounded corner would undo the register. */
  --radius-s:    0;
  --radius:      0;
  --radius-l:    0;
  --radius-pill: 0;
  --btn-radius:   0;
  --card-radius:  0;
  --input-radius: 0;

  /* This page is drawn with rules, not with depth. */
  --shadow-1: none;
  --shadow-2: none;

  --header-h:  82px;
  --container: 1120px;          /* narrower than the others: more margin */
  --container-narrow: 720px;
  --measure:   62ch;
  --section-y: clamp(4.5rem, 8vw, 8rem);
}

/* Tabular figures throughout. An accountant's site that lets numbers wobble in
   proportional widths is failing its own brief. */
body { font-variant-numeric: lining-nums tabular-nums; }

h1, h2 { font-weight: 400; }
h3     { font-weight: 500; }

.lede { font-weight: 400; line-height: 1.55; }

.eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--ink-mute);
}

/* patterns.css reserves 62px at the foot of every phone-width page for the
   sticky call bar. This concept deliberately has none — an accountancy buyer
   is researching, not in an emergency — so the reservation is given back. */
@media (max-width: 720px) { body { padding-block-end: 0; } }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  --btn-py: 1.2em;
  --btn-px: 1.9em;
}

.btn:hover { transform: none; }   /* nothing on this page bounces */

.btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--primary:hover { background: var(--seal); border-color: var(--seal); }

.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

.btn--lg { font-size: 0.78rem; --btn-py: 1.3em; --btn-px: 2.2em; }

/* --- Header --------------------------------------------------------------- */

.site-header { --header-bg: #ffffff; --header-line: var(--ink); }

/* A stacked letterhead lockup rather than a wordmark on one line. It also
   solves a 390px problem: "Weldenbrook Chartered accountants" set inline is
   ~250px wide and collides with the menu button. Stacked, it is ~130px. */
.brandmark {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3em;
  font-size: var(--step-2);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1;
}

.brandmark small {
  font-size: 0.32em;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--ink-mute);
  opacity: 1;
}

.site-nav a {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.site-nav a:hover { border-block-end-color: var(--seal); }

.nav-toggle__label { border-color: var(--ink); }

/* --- Section headers ------------------------------------------------------ */
/* The page's spine. A 2px rule with the section number set left in oxblood and
   the section name set right in tracked caps — the header block of a printed
   report, not a marketing eyebrow. */

.rule-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2xs) var(--s-m);
  border-block-start: 2px solid var(--ink);
  padding-block-start: var(--s-xs);
}

.rule-head__num {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--seal);
}

.rule-head__label {
  margin-inline-start: auto;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  --hero-size: clamp(2.15rem, 6vw, 4.5rem);
  --hero-py: clamp(3.5rem, 7vw, 6.5rem);
  border-block-end: 1px solid var(--line);
}

.hero h1 { max-width: 19ch; }
.hero .lede { max-width: 54ch; }

/* The engraved plate runs full container width rather than sitting beside the
   headline. A tall portrait plate next to a five-line hero leaves a ragged
   column; a landscape band under it reads like the plate on an annual report
   cover, which is exactly the reference. */
.plate { border: 1px solid var(--ink); background: var(--bg-alt); }

/* --- Fact bar ------------------------------------------------------------- */

.factbar {
  display: grid;
  gap: var(--s-m) var(--s-l);
  /* 8rem, not 10: at 10 the four facts drop to a single column on a phone and
     the block grows to four screens' worth of nothing. At 8 they pair up. */
  grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
  padding-block-start: var(--s-m);
  border-block-start: 1px solid var(--ink);
}

.factbar > div { display: grid; gap: var(--s-3xs); }

.factbar dt {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.factbar dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
}

/* --- Statement band ------------------------------------------------------- */

.statement {
  display: grid;
  gap: var(--s-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  list-style: none;
  padding: 0;
}

.statement li { border-block-start: 2px solid var(--ink); padding-block-start: var(--s-s); }

.statement b {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--seal);
  margin-block-end: var(--s-xs);
}

.statement p {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.38;
  color: var(--ink);
}

/* --- Services: hairline rows, not cards ----------------------------------- */

.svc { border-block-start: 1px solid var(--ink); }

.svc__row {
  display: grid;
  gap: var(--s-xs) var(--s-xl);
  /* auto-fit gives two equal columns on a laptop and one on a phone with no
     media query; min() keeps the 20rem floor from forcing an overflow. */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  padding-block: var(--s-l);
  border-block-end: 1px solid var(--line);
}

.svc__ix {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-block-end: var(--s-2xs);
}

.svc__row h3 { font-size: var(--step-2); font-weight: 400; }

.svc__cad {
  margin-block-start: var(--s-xs);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--seal);
}

.svc__row p { color: var(--ink-soft); max-width: 54ch; }

/* --- Who we work with ----------------------------------------------------- */

.audience {
  display: grid;
  gap: var(--s-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.audience > article { border-block-start: 2px solid var(--ink); padding-block-start: var(--s-s); }

.audience h3 { font-size: var(--step-2); font-weight: 400; }

.audience p { color: var(--ink-soft); margin-block-start: var(--s-2xs); }

.audience ul { list-style: none; padding: 0; margin-block-start: var(--s-m); display: grid; }

.audience li {
  padding-block: var(--s-2xs);
  border-block-end: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* A marked-off aside for the things the practice will not do. Set against the
   oxblood rule so it reads as a deliberate statement, not a disclaimer. */
.note-rule {
  border-inline-start: 2px solid var(--seal);
  padding-inline-start: var(--s-m);
  max-width: 64ch;
}

.note-rule p + p { margin-block-start: var(--s-xs); }

/* --- Onboarding sequence -------------------------------------------------- */

.steps { border-block-start: 1px solid var(--ink); }

.step {
  display: grid;
  /* The numeral gutter shrinks on a phone. Fixed at 3.5rem it eats a fifth of
     a 390px screen and squeezes the copy into a four-word measure. */
  gap: var(--s-3xs) clamp(var(--s-s), 3vw, var(--s-l));
  grid-template-columns: clamp(2.2rem, 6vw, 3.5rem) 1fr;
  padding-block: var(--s-l);
  border-block-end: 1px solid var(--line);
}

/* The numeral occupies the whole left column; the three text blocks auto-place
   down the right one. No absolute positioning, so it cannot fall out of step. */
.step__n {
  grid-column: 1;
  grid-row: 1 / 4;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 0.86;
  color: var(--seal);
}

.step__when {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.step h3 { font-size: var(--step-2); font-weight: 400; }

.step p { color: var(--ink-soft); max-width: 58ch; }

/* --- Fees ----------------------------------------------------------------- */

.fee { border-block-start: 1px solid var(--ink); }

.fee__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-s) var(--s-l);
  padding-block: var(--s-l);
  border-block-end: 1px solid var(--line);
}

.fee__name { flex: 1 1 17rem; }

.fee__name h3 { font-size: var(--step-2); font-weight: 400; }

.fee__name p { font-size: var(--step--1); color: var(--ink-mute); margin-block-start: var(--s-3xs); }

.fee__amt {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  text-align: end;
}

.fee__amt small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-block-start: var(--s-2xs);
}

.incl {
  display: grid;
  gap: 0 var(--s-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  list-style: none;
  padding: 0;
}

.incl li {
  display: flex;
  gap: 0.85em;
  padding-block: var(--s-xs);
  border-block-end: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* A ruled dash rather than a tick glyph: same job, and it keeps the marker
   language of the page consistently "line", never "icon". */
.incl li::before {
  content: "";
  flex: none;
  width: 0.7em;
  height: 1px;
  margin-block-start: 0.8em;
  background: var(--seal);
}

.incl--out li::before { background: var(--ink-mute); }

.seal-note {
  display: flex;
  align-items: flex-start;
  gap: var(--s-m);
  border-block-start: 1px solid var(--ink);
  padding-block-start: var(--s-m);
}

.seal-note svg { flex: none; width: 56px; height: 56px; }

.seal-note p { color: var(--ink-soft); max-width: 58ch; }

/* --- People --------------------------------------------------------------- */

.person { display: grid; gap: var(--s-2xs); }

.person .media { border: 1px solid var(--ink); }

.person__role {
  margin-block-start: var(--s-xs);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--seal);
}

.person h3 { font-size: var(--step-1); font-weight: 500; }

.person p { font-size: var(--step--1); color: var(--ink-soft); }

.person a {
  font-size: var(--step--1);
  color: var(--ink-mute);
  overflow-wrap: anywhere;   /* long .example addresses must never push the grid */
}

/* --- Definition rows ------------------------------------------------------ */

.rows > li { border-block-end-color: var(--line); }
.rows__key { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.rows__val { color: var(--ink); }

/* --- Accordion ------------------------------------------------------------ */

.accordion { border-block-start: 2px solid var(--ink); }

.accordion summary {
  padding-block: var(--s-m);
  font-size: var(--step-1);
  font-weight: 400;
}

.accordion summary::after { color: var(--seal); font-weight: 200; }

.accordion details > *:not(summary) { padding-block-end: var(--s-l); }

/* --- Contact -------------------------------------------------------------- */

.contact {
  display: grid;
  gap: var(--s-2xl);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  align-items: start;
}

.field > label {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Underline-only fields. Boxed inputs would put ten more rectangles on a page
   whose entire argument is that it only draws lines. */
.field > input,
.field > select,
.field > textarea {
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--ink);
  padding-inline: 0;
  padding-block: 0.7em;
}

.field > textarea { min-height: 6.5em; }

/* patterns.css kills the native outline on :focus and substitutes a soft ring,
   which this palette has no room for. Put a real, visible ring back — it is
   the only focus affordance these borderless fields have. */
.field > input:focus,
.field > select:focus,
.field > textarea:focus { box-shadow: none; border-block-end-color: var(--seal); }

.field > input:focus-visible,
.field > select:focus-visible,
.field > textarea:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 3px;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.check input {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  margin-block-start: 0.32em;
  accent-color: var(--seal);
}

.next-steps { list-style: none; padding: 0; display: grid; }

.next-steps li {
  display: grid;
  gap: 0.15em;
  padding-block: var(--s-s);
  border-block-end: 1px solid var(--line);
}

.next-steps b { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; }

.next-steps span { font-size: var(--step--1); color: var(--ink-soft); }

/* --- Footer --------------------------------------------------------------- */
/* Light, on a heavy rule. The other four concepts all close on a dark slab;
   a letterhead foot is both the differentiator and the right register here. */

.site-footer {
  --footer-bg: #ffffff;
  --footer-ink: var(--ink);
  border-block-start: 2px solid var(--ink);
}

.site-footer a { opacity: 1; color: var(--ink-soft); }
.site-footer a:hover { color: var(--seal); }

.site-footer h3 { color: var(--ink-mute); opacity: 1; letter-spacing: 0.2em; }

.site-footer li { font-size: var(--step--1); color: var(--ink-soft); }

.site-footer__base { opacity: 1; color: var(--ink-mute); }