/* ============================================================
   thoracicsurgeryexpertwitness.co.uk — stylesheet

   Single palette: ivory (warm off-white, oxblood accent).
   Design tokens live in :root. Change them here to reskin the site.
   ============================================================ */

:root{
  color-scheme: light;

  /* IVORY — the site's default palette (warm off-white, oxblood accent) */
  --paper:       #F8F7F3;
  --paper-2:     #F1EDE2;
  --panel:       #E9E3D3;
  --ink:         #1B2432;
  --ink-soft:    #55616F;
  --claret:      #6E2B2F;
  --claret-deep: #521F22;
  --rule:        #D9D0BE;
  --flag:        #B3261E;
  --accent:      var(--claret);

  --btn-bg:       #1B2432;
  --btn-bg-hover: #2E3B4D;
  --btn-fg:       #F8F7F3;

  --cta-bg:       #FFFFFF;
  --cta-fg:       #1B2432;
  --cta-border:   #1B2432;
  --cta-bg-hover: #1B2432;
  --cta-fg-hover: #FFFFFF;

  --radius:              0px;
  --shadow-sheet:        0 2px 4px rgba(31,24,10,.06), 0 20px 46px -16px rgba(31,24,10,.20);
  --shadow-sheet-hover:  0 4px 10px rgba(31,24,10,.09), 0 32px 64px -18px rgba(31,24,10,.28);
  --card-hi:             inset 0 1px 0 rgba(255,255,255,.7);
  --band-inset:          inset 0 1px 0 rgba(255,255,255,.75), inset 0 -14px 32px -22px rgba(31,24,10,.28);
  --grain-blend:         multiply;

  --card-bg:        #F4F0E6;
  --card-bg-hover:  #FBF9F3;
  --card-border:    #E4DCC9;
  --shadow-header:  0 1px 0 var(--rule), 0 14px 34px -10px rgba(31,24,10,.18);

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --page:   1440px;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* BRIEF PALETTE — neutral charcoal-on-off-white base, #215DE7 accent only
   (per the three-site brand brief). Toggle with the swatch button injected
   by js/theme-switch.js, or set <html data-theme="brief"> by hand. */
:root[data-theme="brief"]{
  --paper:       #F7F8FA;
  --paper-2:     #EEF0F3;
  --panel:       #E4E7EC;
  --claret:      #3C5FA8;
  --claret-deep: #2A4A8A;
  --rule:        #D7DBE2;
  --accent:      #17347A;

  --btn-bg:       #17347A;
  --btn-bg-hover: #0F2456;
  --btn-fg:       #FFFFFF;

  --card-bg:        #FFFFFF;
  --card-bg-hover:  #FCFDFE;
  --card-border:    #DFE3E9;
}
.page-prose__inner a:not(.btn):not(.textlink):not(.cta-link),
.page-hero__stand a{ color:var(--claret); }
:root[data-theme="brief"] .page-prose__inner a:not(.btn):not(.textlink):not(.cta-link),
:root[data-theme="brief"] .page-hero__stand a{ color:#17347A; }
:root[data-theme="brief"] .page-prose__inner a:not(.btn):not(.textlink):not(.cta-link):hover,
:root[data-theme="brief"] .page-hero__stand a:hover{ color:#0F2456; }

/* ============================================================
   DEPTH — values come from tokens
   ============================================================ */

/* subtle paper / paper-dark grain */
body{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-blend-mode:var(--grain-blend);
}

/* light touch of rounding */
.fee-note,
.rs__panel,
.tm-card,
.area-card,
.about__photo{ border-radius:var(--radius); }
.fee-note,
.rs__panel,
.about__photo{ overflow:hidden; }
.btn,
.nav-toggle{ border-radius:0; }
.fee-note__foot,
.rs__checklist li:last-child{
  border-bottom-left-radius:var(--radius); border-bottom-right-radius:var(--radius);
}

/* full-bleed feature bands read as planes */
.section.merits,
.section.areas,
.section.about,
.section.final-cta{ box-shadow:var(--band-inset); }

/* objects that sit ON the page */
.fee-note,
.rs__panel,
.tm-card,
.fee-card{ box-shadow:var(--shadow-sheet); }

.area-card{
  box-shadow:var(--card-hi), var(--shadow-sheet);
  transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.area-card:hover{
  box-shadow:var(--card-hi), var(--shadow-sheet-hover);
  transform:translateY(-3px);
}
.site-header.is-scrolled{ box-shadow:var(--shadow-header); }

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1rem, 0.85rem + 0.75vw, 1.125rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{ max-width:100%; height:auto; }

a{ color:var(--claret); }
a:hover{ color:var(--claret-deep); }

:focus-visible{
  outline:2px solid var(--claret);
  outline-offset:2px;
}

.wrap{
  max-width:var(--page);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:.6rem 1rem;
  font-family:var(--sans); font-size:.85rem;
  z-index:20;
}
.skip-link:focus{ left:.5rem; top:.5rem; }

/* ============================================================
   HEADER  —  sticky, single hairline row; the credential line
   under the name folds away once the page is scrolled.
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .2s ease;
}
.site-header.is-scrolled{
  box-shadow:0 4px 16px rgba(20,15,10,.08);
}

.site-header__inner{
  max-width:var(--page);
  margin-inline:auto;
  display:flex; align-items:center; flex-wrap:nowrap; gap:2rem;
  padding:1rem var(--gutter);
}

.brand{
  text-decoration:none; color:inherit;
  flex-shrink:0;
  line-height:1.12;
}
.brand-name{
  display:block;
  font-size:1.15rem; letter-spacing:.005em;
}
.brand-role{
  display:block;
  font-family:var(--sans);
  font-size:.63rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.13em;
  white-space:nowrap;
  color:var(--ink-soft);
  margin-top:.32rem;
}

.site-nav{
  font-family:var(--sans);
  margin-left:auto;
}
.site-nav__head{ display:none; }
.site-nav ul{
  list-style:none; display:flex; align-items:center; gap:1.6rem;
  margin:0; padding:0;
  font-size:.9rem; font-weight:500;
  white-space:nowrap;
}
.site-nav a,
.site-nav .nav-toplevel{
  text-decoration:none; color:var(--ink-soft);
  padding-block:.4rem;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
  cursor:default;
}
.site-nav a:hover,
.has-dropdown:hover .nav-toplevel{ color:var(--ink); border-color:var(--ink); }
.site-nav a[aria-current="page"],
.nav-toplevel[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--claret); }

/* ---- Expertise dropdown: hover reveal on desktop (standard behaviour,
   the top-level label is plain text, not a link — only items inside
   the dropdown navigate); on mobile there is no hover, so the whole
   row is a button that toggles the dropdown via is-expanded (js/main.js). ---- */
.site-nav li.has-dropdown{ position:relative; }
.nav-caret{
  display:inline-block; width:.4rem; height:.4rem; margin-left:.4rem; margin-bottom:.1rem;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); transition:transform .15s ease;
}
.has-dropdown:hover .nav-caret,
.has-dropdown.is-expanded .nav-caret{ transform:rotate(225deg); margin-bottom:-.1rem; }
.nav-caret-btn{
  all:unset; position:absolute; top:0; left:0; right:0;
  height:2.1rem; pointer-events:none;
}
.site-nav ul.nav-dropdown{
  display:block; gap:0; white-space:normal;
  list-style:none; margin:0; padding:.5rem 0;
  position:absolute; top:100%; left:0;
  transform:translateY(-6px);
  width:16.5rem;
  background:var(--paper); border:1px solid var(--rule);
  box-shadow:var(--shadow-sheet);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:30;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.nav-dropdown a{
  display:block; padding:.6rem 1.2rem; font-size:.86rem; white-space:nowrap;
  border-bottom:0; color:var(--ink-soft);
}
.nav-dropdown a:hover{ background:var(--card-bg); color:var(--ink); }
.nav-dropdown a[aria-current="page"]{ color:var(--claret); }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--sans); font-weight:600;
  font-size:.9rem; letter-spacing:.01em;
  text-decoration:none; text-align:center;
  display:inline-block;
  padding:.85em 1.7em;
  border:1px solid var(--btn-bg);
  border-radius:0;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--btn-bg); color:var(--btn-fg); }
.btn-primary:hover{ background:var(--btn-bg-hover); border-color:var(--btn-bg-hover); color:var(--btn-fg); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg); }

/* header CTA — light button: white fill, dark hairline border + text; inverts on hover */
.site-header .btn{ flex-shrink:0; padding:.6em 1.15em; }
.site-header .btn-ghost{
  background:var(--cta-bg); color:var(--cta-fg); border-color:var(--cta-border);
}
.site-header .btn-ghost:hover{
  background:var(--cta-bg-hover); color:var(--cta-fg-hover); border-color:var(--cta-bg-hover);
}

/* icon-only hamburger — three lines faked with one bar's box-shadow,
   morphing into an X on open. No border/box, so it reads as a control
   rather than a button demanding its own visual weight next to the CTA. */
.nav-toggle{
  display:none;
  position:relative;
  width:2.5rem; height:2.5rem;
  padding:0; margin-left:auto;
  background:transparent; border:0;
  cursor:pointer;
}
.nav-toggle__label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.nav-toggle::before,
.nav-toggle::after{
  content:"";
  position:absolute; top:50%; left:50%;
  width:1.3rem; height:2px; background:var(--ink);
  transform:translate(-50%, -50%);
  transition:transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.nav-toggle::before{ box-shadow:0 -6px 0 var(--ink), 0 6px 0 var(--ink); }
.nav-toggle::after{ opacity:0; }
.nav-toggle[aria-expanded="true"]::before{
  box-shadow:0 0 0 transparent;
  transform:translate(-50%, -50%) rotate(45deg);
}
.nav-toggle[aria-expanded="true"]::after{
  opacity:1;
  transform:translate(-50%, -50%) rotate(-45deg);
}

/* ============================================================
   HERO
   Plain centred container: max-width + margin auto + padding,
   same as the header.
   ============================================================ */
.hero{
  max-width:var(--page);
  margin:0 auto;
  /* no right padding — the portrait panel runs to the right edge of the screen */
  padding:3.5rem 0 4rem var(--gutter);
  display:grid;
  grid-template-columns:minmax(0, 520px) 1fr;
  gap:3rem;
  align-items:stretch;
}
/* contact.html only — the whole photo+panel block scaled down together
   (both the panel's min-height and the image's max-width reduced by the
   same ~80% factor as the homepage's, so the panel-to-photo proportion
   stays identical), anchored to the bottom of the row instead of
   stretching to match the (shorter) text column. Scoped so the
   homepage hero itself is never touched. */
.hero--narrow{ grid-template-columns:1fr 1fr; }
.hero--narrow .hero-inner{ align-self:center; }
.hero--narrow .hero-media{ align-self:end; min-height:416px; }
.hero--narrow .hero-media img{ max-width:528px; }

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.15em;
  color:var(--claret);
  margin:0 0 1rem;
}

.hero h1{
  font-weight:100;
  font-size:2.5rem;
  line-height:1.14;
  letter-spacing:-0.003em;
  text-wrap:balance;
  max-width:15ch;
  margin:0 0 1.25rem;
}

.hero-stand{
  font-size:1.125rem;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:44ch;
  margin:0 0 2rem;
}
.hero-stand strong{ font-weight:400; color:var(--ink); }

.hero-actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1rem 1.75rem;
}
.textlink{
  font-family:var(--sans); font-weight:600; font-size:.9rem;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding-bottom:.15rem;
}
.textlink .arrow{
  display:inline-block; margin-left:.4em;
  transition:transform .15s ease;
}
.textlink:hover .arrow{ transform:translateX(.25em); }

/* ---- portrait: bottom-left on a tonal panel; the panel runs off the
   right edge of the screen (full-bleed), the photo stays put ---- */
.hero-media{
  background:var(--panel);
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  overflow:hidden;
  min-height:520px;
  margin-right:-50vw;
  padding-right:50vw;
}
.hero-media img{
  display:block;
  width:100%;
  max-width:660px;
  height:auto;
}

/* ============================================================
   CREDENTIALS BAND — full-bleed band, centred content
   ============================================================ */
.creds{
  border-block:1px solid var(--rule);
  background:var(--paper-2);
}
.creds ul{
  max-width:var(--page);
  margin:0 auto;
  padding:1.35rem var(--gutter);
  list-style:none;
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:center;
  gap:.55rem .85rem;
  font-family:var(--sans); font-size:.82rem; font-weight:500;
  letter-spacing:.005em;
  color:var(--ink-soft);
}
.creds li{ margin:0; }
/* separator is a pseudo-element glued to each item after the first,
   not its own flex item — so it can never end up stranded at the start
   of a wrapped line or thrown off by justify-content's distribution.
   It adds to the base `gap` above, rather than replacing it, so the
   mobile fallback (no separator) still keeps that base spacing. */
.creds li + li{ padding-left:.9rem; position:relative; }
.creds li + li::before{
  content:"\A7";
  position:absolute; left:0;
  font-family:var(--serif); font-weight:400;
  color:var(--ink-soft); opacity:.5;
}
@media (max-width:620px){
  .creds{ border-block:none; background:none; padding:1rem var(--gutter); }
  .creds ul{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:.7rem;
    padding:1.5rem 1.25rem;
    background:var(--paper-2);
    border:1px solid var(--rule);
    border-radius:0;
  }
  .creds li + li{ padding-left:0; }
  .creds li + li::before{ content:none; }
}

/* ============================================================
   RESPONSIVE — header / navigation
   ============================================================ */
@media (max-width:1100px){
  .site-header__inner{ flex-wrap:nowrap; gap:1rem; padding-block:.75rem; align-items:flex-start; }
  .brand{ min-width:0; flex-shrink:1; }
  .brand-role{ white-space:normal; overflow:visible; text-overflow:clip; }
  .site-nav{
    position:fixed; top:0; left:0; right:0; bottom:0;
    transform:translateX(100%);
    transition:transform .25s ease;
    background:var(--paper);
    overflow-y:auto;
    z-index:60;
    padding:1.25rem 1.5rem;
    margin:0; border-top:0;
    display:flex; flex-direction:column;
  }
  .site-nav > ul{ flex:1 0 auto; }
  .site-header .btn{ display:none; }
  .nav-toggle{ display:inline-block; flex-shrink:0; }

  .site-nav__head{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:1rem; padding-bottom:1rem;
    border-bottom:1px solid var(--rule);
  }
  .nav-close{
    all:unset; cursor:pointer; line-height:1;
    font-size:1.8rem; color:var(--ink); padding:.25rem .5rem;
  }

  body.nav-open .site-nav{ transform:none; }
  body.nav-open #palette-toggle{ display:none; }
  body.nav-open .site-nav ul{
    flex-direction:column; align-items:stretch; gap:0;
    white-space:normal;
  }
  body.nav-open .site-nav > ul > li > a,
  body.nav-open .site-nav > ul > li > .nav-toplevel{
    display:flex; align-items:center; justify-content:space-between;
    padding-block:1.1rem;
    border-bottom:1px solid var(--rule);
    font-size:1.15rem; font-weight:500;
  }
  body.nav-open .site-nav > ul > li:last-child > a{ border-bottom:0; }
  body.nav-open .site-nav .nav-caret{
    width:.55rem; height:.55rem; margin-left:0;
    border-right-width:2px; border-bottom-width:2px;
    transform:rotate(-45deg); margin-bottom:0;
  }
  body.nav-open .has-dropdown.is-expanded .nav-caret{ transform:rotate(45deg); }

  /* dropdown is collapsed by default inside the mobile flyout — there
     is no hover on touch, so the whole label row (caret button spans
     just that row's height, not the expanded dropdown below it)
     toggles the dropdown open/closed. */
  .nav-caret-btn{ display:block; height:calc(1.1rem * 2 + 1.15rem * 1.4); pointer-events:auto; cursor:pointer; }
  body.nav-open .nav-dropdown{
    position:static !important; left:auto !important;
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    transform:none !important; border:0; box-shadow:none; background:transparent;
    padding:0 1.25rem; min-width:0; width:auto !important; max-width:none !important;
    display:block !important;
    max-height:0; overflow:hidden;
    transition:max-height .3s cubic-bezier(.4,0,.2,1);
  }
  body.nav-open .has-dropdown.is-expanded .nav-dropdown{ max-height:40rem; padding-bottom:.3rem; }
  body.nav-open .nav-dropdown a{
    padding-block:.85rem; padding-left:.25rem; font-size:1.02rem; font-weight:500;
    color:var(--ink); border-bottom:1px solid var(--rule);
    white-space:normal;
  }
  body.nav-open .nav-dropdown li:last-child a{ border-bottom:1px solid var(--rule); }
}

@media (max-width:400px){
  .brand-name{ font-size:1.05rem; }
  .brand-role{ font-size:.58rem; letter-spacing:.09em; }
}

/* ============================================================
   RESPONSIVE — hero
   ============================================================ */
@media (max-width:900px){
  .hero{
    grid-template-columns:1fr;
    gap:2rem;
    padding:2.5rem 0 3rem;
  }
  .hero-inner{ padding:0 var(--gutter); }
  .hero h1{ font-size:2.1rem; }
  .hero-media{ min-height:0; margin-right:0; padding-right:0; }
}

/* ============================================================
   SECTION 1 — THE MERITS CALL
   The first change of ground after the hero: a full-bleed band
   in --panel (the portrait-panel tone) so the site's primary
   conversion reads as a call-out, not body copy.
   ============================================================ */
.section.merits{
  max-width:none;
  margin:0;
  padding:clamp(5rem, 9vw, 8rem) 0;
  border-top:0;
  border-bottom:1px solid var(--rule);
}
.merits__inner{
  max-width:var(--page);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:2rem 4rem;
  align-items:start;
}

.page-prose .section-eyebrow,
.section-eyebrow{
  font-family:var(--sans);
  font-size:.762rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.15em;
  color:var(--claret);
  margin:0 0 1rem;
}

.section.merits h2{
  margin:0;
  font-weight:400;
  font-size:clamp(1.75rem, 1.4rem + 1.75vw, 2.333rem);
  line-height:1.16;
  letter-spacing:-0.003em;
  text-wrap:balance;
  color:var(--ink);
}

.merits__body{ max-width:56ch; }
.merits__body > p{
  margin:0 0 1.35rem;
  color:var(--ink-soft);
}
.merits__body .merits__pivot{
  color:var(--ink);
  font-size:1.12rem;
  line-height:1.62;
  border-left:2px solid var(--claret);
  padding-left:1.4rem;
  margin-bottom:0;
}

.merits__cta{
  margin-top:2.25rem;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1rem 1.75rem;
}
.merits__meta{
  margin:0;
  font-family:var(--sans); font-size:.8rem; line-height:1.5;
  color:var(--ink-soft);
}
.merits__meta > span + span{ margin-left:.9em; }
.merits__meta > span > span{
  color:var(--ink-soft); opacity:.5;
  margin-right:.45em;
}

@media (max-width:820px){
  .merits__inner{ grid-template-columns:1fr; justify-content:stretch; gap:1.5rem; }
  .merits__body{ max-width:60ch; }
  .section.merits h2{ max-width:24ch; }
}

@media (max-width:560px){
  .merits__cta{ flex-direction:column; align-items:stretch; gap:1rem; }
  .merits__meta{
    display:flex; flex-direction:column; gap:.5rem;
    align-items:center; text-align:left;
    padding:1rem 1.25rem;
    background:var(--paper-2);
    border:1px solid var(--rule);
    border-radius:0;
  }
  .merits__meta > span + span{ margin-left:0; }
}

/* ============================================================
   SECTION 2 — THE REPORT STANDARD
   Explanation as prose (left); the review checklist pulled out
   as a bordered sheet (right). Ground: page (--paper), contained.
   ============================================================ */
.section.report-standard{
  max-width:none;
  margin:0;
  padding:clamp(4.5rem, 9vw, 7.5rem) 0;
  background:var(--panel);
  border-top:0;
  border-bottom:1px solid var(--rule);
}
.rs__inner{
  max-width:var(--page);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:2.5rem 4rem;
  align-items:center;
}
.rs__aside{ order:1; }   /* checklist sheet — left column */
.rs__lede{ order:2; }    /* prose — right column */

.section.report-standard h2{
  margin:0 0 48px;
  font-weight:400;
  font-size:clamp(1.75rem, 1.4rem + 1.75vw, 2.333rem);
  line-height:1.16;
  letter-spacing:-0.003em;
  text-wrap:balance;
  color:var(--ink);
}
.rs__lede{ max-width:42rem; }
.rs__lede p:not(.section-eyebrow){ margin:0 0 1rem; color:var(--ink-soft); font-size:.96rem; }
.rs__lede .rs__intro{ font-size:1rem; margin-bottom:1.75rem; }

.section.report-standard h3.rs__stage{
  display:inline-block;
  margin:2rem 0 .5rem 0;
  padding:0;
  background:none;
  font-family:var(--sans);
  font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  line-height:1.3;
  color:var(--claret);
}
.section.report-standard .rs__stage:first-of-type{ margin-top:1.75rem; }

/* the checklist sheet */
.rs__panel{
  border:1px solid var(--rule);
  background:var(--card-bg);
  box-shadow:var(--shadow-sheet);
}
.section.report-standard h3.rs__panel-title{
  margin:0;
  padding:1rem 1.5rem;
  border-bottom:1px solid var(--rule);
  font-family:var(--sans);
  font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--claret);
}
.rs__checklist{
  list-style:none; margin:0; padding:0 1.5rem;
}
.rs__checklist li{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  padding:.8rem 0;
  border-top:1px solid var(--rule);
  font-family:var(--sans); font-size:.9rem; line-height:1.5;
  color:var(--ink-soft);
}
.rs__checklist li:first-child{ border-top:0; }
.rs__checklist li::before{
  content:"";
  flex:none;
  width:.42rem; height:.42rem;
  margin-top:.42em;
  border-top:2px solid var(--claret);
  border-right:2px solid var(--claret);
  transform:rotate(45deg);
}
.rs__panel-foot{
  margin:0;
  padding:1rem 1.5rem;
  border-top:1px solid var(--rule);
  font-family:var(--sans); font-size:.8rem; line-height:1.5;
  color:var(--ink-soft);
}
.rs__cta{ margin:1.5rem 0 0; }

@media (max-width:840px){
  .rs__inner{ grid-template-columns:1fr; justify-content:stretch; gap:2rem; }
  .rs__lede{ order:1; }
  .rs__aside{ order:2; }
  .rs__lede p{ max-width:60ch; }
  .rs__panel{ max-width:32rem; }
}

/* ============================================================
   SECTION 3 — AREAS OF WORK
   Categorised by region of the chest. Full-bleed --panel band
   (one step lighter than the page ground); each category heads
   a pair of cards recessed in --paper.
   ============================================================ */
.section.areas{
  max-width:none;
  margin:0;
  padding:0;
  border-top:0;
  border-bottom:1px solid var(--rule);
}
.areas__inner{
  max-width:var(--page);
  margin-inline:auto;
  padding:clamp(4.5rem, 9vw, 7.5rem) var(--gutter);
}
.section.areas h2{
  margin:0 0 48px;
  font-weight:400; font-size:clamp(1.75rem, 1.4rem + 1.75vw, 2.333rem); line-height:1.16;
  letter-spacing:-0.003em; text-wrap:balance; color:var(--ink);
}
.areas__intro{
  margin:0 0 2.5rem; max-width:56ch; color:var(--ink-soft);
}

/* single unified grid — all eight cards as equals; category shown
   as a small tag on the card itself, not a grouping header */
.areas__cards{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.area-card{
  display:block; text-decoration:none; position:relative;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  padding:1.4rem 3rem 1.5rem 1.5rem;
  transition:background-color .15s ease, border-color .15s ease;
}
.area-card:hover{ background:var(--card-bg-hover); border-color:var(--claret-deep); }
.area-card__tag{
  display:inline-block;
  font-family:var(--serif); font-size:.85rem; font-weight:400;
  text-transform:none; letter-spacing:0; color:var(--ink);
  background:var(--panel);
  padding:2px 6px;
  margin-bottom:.7rem;
}
.area-card h4{
  margin:0 0 .4rem;
  font-family:var(--serif); font-weight:400; font-size:1.08rem; line-height:1.25;
  color:var(--claret);
}
.area-card__arr{
  position:absolute; top:50%; right:1.25rem; transform:translateY(-50%);
  color:var(--claret); font-family:var(--sans); font-size:1.8rem; line-height:1;
}
.area-card p{
  margin:0;
  font-family:var(--sans); font-size:.85rem; line-height:1.5; color:var(--ink-soft);
}
@media (max-width:760px){
  .areas__cards{ grid-template-columns:1fr; }
}

/* ============================================================
   SECTION 4 — HOW TO INSTRUCT
   A directions timetable: ruled columns, tabular figures, the
   turnaround as its own right-aligned column. Ground: --paper.
   ============================================================ */
.section.process{
  max-width:none;
  margin:0;
  padding:0;
  background:var(--panel);
  border-top:0;
  border-bottom:1px solid var(--rule);
}
.process__inner{
  max-width:var(--page);
  margin-inline:auto;
  padding:clamp(4.5rem, 9vw, 7.5rem) var(--gutter);
}
.section.process h2{
  margin:0 0 48px;
  font-weight:400; font-size:clamp(1.75rem, 1.4rem + 1.75vw, 2.333rem); line-height:1.16;
  letter-spacing:-0.003em; text-wrap:balance; color:var(--ink); max-width:20ch;
}
.process__body{ max-width:52rem; margin-inline:auto; }
.process__intro{ margin:0 0 2.75rem; max-width:48ch; color:var(--ink-soft); }
.process__intro strong{ color:var(--ink); font-weight:400; }

.sched{ width:100%; border-collapse:collapse; }
.sched thead th{
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.13em; color:var(--ink-soft);
  text-align:left; padding:0 1.5rem 1rem 0;
  border-bottom:1px solid var(--claret);
}
.sched thead th.sched__num{ padding-right:1rem; }
.sched thead th.sched__time{ text-align:right; padding-right:0; }
.sched tbody td{
  padding:1.6rem 1.5rem 1.6rem 0;
  border-bottom:1px solid var(--rule);
  vertical-align:baseline;
}
.sched tbody tr:last-child td{ border-bottom:0; }
.sched td.sched__num{
  padding-right:1rem;
  font-family:var(--serif); font-size:1.6rem; color:var(--claret);
  font-variant-numeric:tabular-nums;
}
.section.process .sched__step h3{
  margin:0 0 .3rem; font-weight:400; font-size:1.6rem; line-height:1.25;
  white-space:nowrap; color:var(--claret);
}
.sched__step p{
  margin:0; color:var(--ink-soft);
  font-family:var(--sans); font-size:.86rem; line-height:1.5;
}
.sched td.sched__when{
  text-align:right; padding-right:0; white-space:nowrap;
  font-family:var(--sans); font-size:.92rem; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.sched__when small{
  display:block; margin-top:.2rem;
  font-size:.76rem; color:var(--ink-soft); font-weight:400;
}
.process__note{
  margin:1.5rem 0 0;
  font-family:var(--sans); font-size:.82rem; color:var(--ink-soft); max-width:56ch;
}
.process__cta{ margin:1.75rem 0 0; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (max-width:720px){
  .sched, .sched thead, .sched tbody, .sched tr{ display:block; width:100%; }
  .sched thead{ display:none; }
  .sched tbody{ display:flex; flex-direction:column; gap:1rem; }
  .sched tbody tr{
    padding:1.5rem;
    background:var(--paper-2);
    border:1px solid var(--rule);
  }
  .sched tbody tr:last-child{ padding:1.5rem; border:1px solid var(--rule); }
  .sched tbody td{ display:block; padding:0; border:0; }

  .sched td.sched__num{
    display:inline-block; vertical-align:top;
    font-size:1.6rem; line-height:1.3; margin-right:.65rem;
  }
  .sched td.sched__step{ display:inline; }
  .section.process .sched__step h3{
    display:inline; white-space:normal;
    font-size:1.2rem; font-weight:500;
  }
  .sched__step p{ display:block; margin:.5rem 0 0 2.25rem; max-width:none; }

  .sched td.sched__when{
    display:block; text-align:left; margin:1rem 0 0 2.25rem;
    font-size:1rem; font-weight:600; color:var(--claret);
  }
  .sched__when small{
    display:inline; margin-left:.5em;
    font-size:.82rem; font-weight:400; color:var(--ink-soft);
  }
}

/* ============================================================
   SECTION 5 — FEES
   The fee note rendered as the object it describes: three line
   items, a claret rule before the total, the total set equal to
   the first line. Plain-language reading sits beside it.
   Ground: page (--paper), contained.
   ============================================================ */
.section.fees{
  max-width:none;
  margin:0;
  padding:0;
  border-top:0;
}
.fees__inner{
  max-width:var(--page);
  margin-inline:auto;
  padding:clamp(4.5rem, 9vw, 7.5rem) var(--gutter);
}
.section.fees h2{
  margin:0 0 48px;
  font-weight:400; font-size:clamp(1.75rem, 1.4rem + 1.75vw, 2.333rem); line-height:1.16;
  letter-spacing:-0.003em; text-wrap:balance; color:var(--ink); max-width:22ch;
}
.fees__intro{ margin:0 0 2.75rem; max-width:50ch; color:var(--ink-soft); }

.fees__grid{
  display:grid;
  grid-template-columns:minmax(0, 29rem) minmax(0, 1fr);
  gap:2.5rem clamp(2.5rem, 6vw, 5rem);
  align-items:start;
}

/* ---- the fee note ---- */
.fee-note{
  border:1px solid var(--rule);
  background:var(--panel);
  font-family:var(--sans);
}
.fee-note__head{
  padding:1rem 1.35rem .85rem;
  border-bottom:1px solid var(--rule);
}
.fee-note__title{
  display:block;
  font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  color:var(--claret);
}
.fee-note__meta{
  display:block; margin-top:.3rem;
  font-size:.74rem; color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.fee-note__rows{ padding:.4rem 1.35rem; }
.fee-note__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  padding:.7rem 0;
  border-top:1px solid var(--rule);
  font-size:.9rem; color:var(--ink-soft);
}
.fee-note__row:first-child{ border-top:0; }
.fee-note__amt{
  font-variant-numeric:tabular-nums;
  color:var(--ink); white-space:nowrap;
}
.fee-note__amt.is-nil{ color:var(--ink-soft); }
.fee-note__total{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  padding:1rem 1.35rem 1.1rem;
  border-top:2px solid var(--claret);
  font-family:var(--serif); font-size:1.15rem; color:var(--ink);
}
.fee-note__total .fee-note__amt{ color:var(--claret); }
.fee-note__foot{
  padding:.85rem 1.35rem;
  border-top:1px solid var(--rule);
  font-size:.76rem; line-height:1.5; color:var(--ink-soft);
}
.fee-note__cap{
  margin:.9rem 0 0;
  font-family:var(--serif); font-style:italic;
  font-size:.82rem; color:var(--ink-soft);
}

/* ---- the reading beside it ---- */
.fees__read{ padding-top:.25rem; }
.fees__read p{ margin:0 0 1.15rem; color:var(--ink-soft); }
.fees__strong{ color:var(--ink); }
.fees__divider{ margin:1.75rem 0; height:1px; background:var(--rule); }
.fees__fine{
  font-family:var(--sans); font-size:.86rem; line-height:1.5; color:var(--ink-soft);
}

@media (max-width:820px){
  .fees__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   SECTION 6 — ABOUT
   Portrait (a tight crop of the hero photo) beside the statement.
   Full-bleed --panel band — one step lighter than the page.
   ============================================================ */
.section.about{
  max-width:none;
  margin:0;
  padding:0;
  background:var(--panel);
  border-top:0;
  border-bottom:1px solid var(--rule);
}
.about__inner{
  max-width:var(--page);
  margin-inline:auto;
  padding:clamp(4.5rem, 9vw, 7.5rem) var(--gutter);
}
.about__block{ max-width:74rem; margin-inline:auto; }
.about__block .section-eyebrow{ margin-bottom:1.75rem; }

.about__grid{
  display:grid;
  grid-template-columns:minmax(0, 24rem) minmax(0, 1fr);
  gap:2.5rem clamp(2.5rem, 5vw, 4.5rem);
  align-items:start;
}
.about__photo{
  margin:0;
  background:var(--paper);
  border:1px solid var(--rule);
  aspect-ratio:4 / 5;
  overflow:hidden;
}
.about__photo img{
  display:block;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 12%;
}

.section.about h2{
  margin:0 0 .35rem;
  font-weight:400; font-size:1.75rem; line-height:1.14;
  letter-spacing:-0.003em; text-wrap:balance; color:var(--ink);
}
.about__postnom{
  margin:0 0 1.5rem;
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.13em; color:var(--ink-soft);
}
.about__body > p{ margin:0 0 1.1rem; color:var(--ink-soft); max-width:60ch; }
.about__body > p strong{ color:var(--ink); font-weight:400; }
.about__gmc{ font-family:var(--sans); font-size:.8rem; }
.about__body .about__cta{ margin:1.5rem 0 0; }

@media (max-width:900px){
  .about__grid{ grid-template-columns:1fr; gap:2rem; }
  .about__photo{ max-width:none; width:100%; aspect-ratio:4 / 5; }
}

/* ============================================================
   SECTION 7 — TESTIMONIALS
   Conventional testimonial cards: quotation, then an attribution
   with an initials monogram. Three across. Ground: page
   (--paper), cards recessed-lighter in --panel.
   ============================================================ */
.section.testimonials{
  max-width:none;
  margin:0;
  padding:0;
  border-top:0;
}
.testimonials__inner{
  max-width:var(--page);
  margin-inline:auto;
  padding:clamp(4.5rem, 9vw, 7.5rem) var(--gutter);
}
.section.testimonials h2{
  margin:0 0 48px;
  font-weight:400; font-size:clamp(1.75rem, 1.4rem + 1.75vw, 2.333rem); line-height:1.16;
  letter-spacing:-0.003em; text-wrap:balance; color:var(--ink); max-width:24ch;
}
.testimonials__intro{ margin:0 0 1.5rem; max-width:52ch; color:var(--ink-soft); }
.section.testimonials .flag{ display:block; margin:0 0 2rem; font-size:.84rem; max-width:60ch; }

.tm-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem;
}
.tm-card{
  margin:0;
  background:var(--panel);
  border:1px solid var(--rule);
  padding:1.75rem 1.75rem 1.6rem;
  display:flex; flex-direction:column;
}
.tm-card blockquote{
  margin:0 0 1.4rem; padding:0; border:0;
  flex:1;
  font-size:1.02rem; line-height:1.6; color:var(--ink);
}
.tm-attr{
  display:flex; align-items:center; gap:.8rem;
  padding-top:1.1rem; border-top:1px solid var(--rule);
}
.tm-mono{
  flex:none;
  width:2.4rem; height:2.4rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--claret);
  font-family:var(--serif); font-size:.85rem; color:var(--claret);
}
.tm-who{ font-family:var(--sans); font-size:.82rem; line-height:1.35; }
.tm-who b{ display:block; font-weight:600; color:var(--ink); }
.tm-who span{ color:var(--ink-soft); }
.testimonials__cta{ margin:2rem 0 0; }

@media (max-width:900px){
  .tm-grid{ grid-template-columns:1fr; max-width:none; }
}

/* ============================================================
   FINAL CTA — the close
   Full-bleed --panel band. Offer restated; phone and email are
   the primary action (set in the sans face), button after.
   ============================================================ */
.section.final-cta{
  max-width:none;
  margin:0;
  padding:0;
  background:linear-gradient(160deg, #2E3B4D, var(--ink));
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.final-cta__inner{
  max-width:var(--page);
  margin-inline:auto;
  padding:clamp(5rem, 11vw, 9rem) var(--gutter);
  text-align:center;
}
.final-cta__inner .section-eyebrow{ margin:0 0 1.1rem; color:#D68C81; }
.section.final-cta h2{
  margin:0 0 48px;
  font-weight:400;
  font-size:clamp(2.118rem, 1.377rem + 3vw, 3.177rem);
  line-height:1.12; letter-spacing:-0.006em;
  text-wrap:balance; color:#FBF7F2;
}
.final-cta__lead{
  margin:0 auto 2.75rem;
  max-width:46ch;
  font-size:1.12rem; line-height:1.6; color:#C7CDD8;
}
.final-cta__lead strong{ color:#FBF7F2; font-weight:400; }

.final-cta__contact{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.75rem 2.25rem;
  margin-bottom:2.5rem;
}
.final-cta__line{ display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.final-cta__label{
  font-family:var(--sans); font-size:.66rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.13em; color:#C7CDD8;
}
.final-cta__contact a{
  font-family:var(--sans); font-weight:600;
  font-size:1.2rem; letter-spacing:.005em;
  font-variant-numeric:tabular-nums;
  color:#FBF7F2; text-decoration:none;
  border-bottom:1px solid #FBF7F2; padding-bottom:.2rem;
  transition:opacity .15s ease;
}
.final-cta__contact a:hover{ opacity:.8; }
.final-cta__sep{ width:1px; align-self:stretch; background:rgba(251,247,242,.35); }

.section.final-cta .btn-primary{ background:#FBF7F2; border-color:#FBF7F2; color:var(--ink); }
.section.final-cta .btn-primary:hover{ background:#E4DFD5; border-color:#E4DFD5; }
.section.final-cta .btn-ghost{ border-color:#FBF7F2; color:#FBF7F2; }
.section.final-cta .btn-ghost:hover{ background:#FBF7F2; color:var(--ink); border-color:#FBF7F2; }
.final-cta__actions{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 1.25rem;
}

@media (max-width:560px){
  .final-cta__contact{ flex-direction:column; gap:1.25rem; }
  .final-cta__sep{ display:none; }
  .final-cta__contact a{ font-size:1.1rem; }
}

/* ============================================================
   QUOTE BAND — full-bleed dark break, mid-page. Same navy gradient
   as final-cta so the two dark moments on a page read as one family,
   but this one carries a single large verbatim line from the page's
   own copy (never new wording) instead of a call to action. Use once
   per page at most, as a rest between denser sections. */
.section.quote-band{
  max-width:none; margin:0; padding:0;
  background:linear-gradient(160deg, #2E3B4D, var(--ink));
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
main > .section.quote-band{ max-width:none; border-top:0; padding:0; }
.quote-band__inner{
  max-width:46rem; margin-inline:auto;
  padding:clamp(5rem, 10vw, 7.5rem) var(--gutter);
  text-align:center;
}
.quote-band__quote{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.7rem, 1.15rem + 2.3vw, 2.6rem);
  line-height:1.35; color:#FBF7F2; margin:0; text-wrap:balance;
}
.quote-band__cite{
  margin:1.6rem 0 0; font-family:var(--sans); font-size:.72rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:#C7CDD8;
}

/* ============================================================
   PAGE HERO — inner pages. Light ground (page's own theme tokens),
   single column, large serif headline. Eyebrow sits beside a
   short rule.
   ============================================================ */
.page-hero{
  background:
    linear-gradient(100deg, transparent 0%, transparent 62%, var(--panel) 62%, var(--panel) 78%, transparent 78%),
    linear-gradient(100deg, transparent 0%, transparent 74%, var(--paper-2) 74%, var(--paper-2) 100%),
    var(--paper);
  border-bottom:1px solid var(--rule);
}
.page-hero__inner{
  position:relative; z-index:1;
  max-width:var(--page);
  margin-inline:auto;
  padding:clamp(6rem, 14vw, 10rem) var(--gutter);
}
.page-hero__body{ max-width:none; }
.page-hero__inner:has(.page-hero__stand){
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:3rem 10rem;
  align-items:start;
}
.page-hero__inner:has(.page-hero__stand) .page-hero__stand{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  margin-top:0;
  position:relative;
  padding-left:2.25rem;
}
.page-hero__inner:has(.page-hero__stand) .page-hero__stand::before{
  content:"";
  position:absolute; top:.2em; left:0;
  width:2px; height:calc(100% - .4em);
  background:var(--claret);
  opacity:.5;
}
.page-hero .eyebrow{
  display:flex; align-items:center; gap:.85rem;
  color:var(--claret);
}
.page-hero .eyebrow::after{
  content:"";
  flex:1 1 3rem; max-width:3rem; height:1px;
  background:var(--claret);
  opacity:.6;
}
.page-hero h1{
  font-weight:100;
  font-size:clamp(1.9rem, 1.1rem + 4.2vw, 4.6rem);
  line-height:1.05;
  letter-spacing:-0.01em;
  text-wrap:balance;
  margin:0 0 1.75rem;
  color:var(--ink);
}
.page-hero__stand{
  font-size:clamp(1.15rem, 1rem + .75vw, 1.4rem);
  line-height:1.65;
  color:var(--ink-soft);
  max-width:70ch;
  margin:0;
}
.page-hero__actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1rem 1.75rem;
  margin-top:2rem;
}
@media (max-width:480px){
  .btn-detail{ display:none; }
  .page-hero__actions{ flex-direction:column; align-items:center; }
  .page-hero__actions .btn-primary{ display:block; width:100%; }
}

/* ---------- buttons — full width on mobile (outside the header/nav) ---------- */
@media (max-width:620px){
  .btn:not(.site-header .btn){ display:block; width:100%; }
}


/* ============================================================
   SPECIALTY MAP — "which expert do I need" table
   ============================================================ */
.section.specialty-map{
  max-width:none;
  margin:0;
  padding:0;
  background:linear-gradient(180deg, var(--paper), var(--paper-2));
  border-top:0;
  border-bottom:1px solid var(--rule);
}
.specialty-map__inner{
  max-width:var(--page);
  margin-inline:auto;
  padding:clamp(4.5rem, 9vw, 7.5rem) var(--gutter);
}
.section.specialty-map h2{
  margin:0 0 48px;
  font-weight:400; font-size:clamp(1.75rem, 1.4rem + 1.75vw, 2.333rem); line-height:1.16;
  letter-spacing:-0.003em; text-wrap:balance; color:var(--ink); max-width:26ch;
}
.specialty-map__intro{ margin:0 0 2rem; max-width:56ch; color:var(--ink-soft); }

/* ---- Q&A list: each issue paired with the specialty it needs;
   the "mine" row gets a flat tint fill, same rhythm/padding as
   every other row — no card, no shadow, no lift. ---- */
.specialty-list{
  display:grid;
  border-top:1px solid var(--rule);
  margin-bottom:2rem;
}
.specialty-row{
  display:grid;
  grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);
  gap:2rem;
  align-items:baseline;
  padding:1.15rem 1.25rem;
  border-bottom:1px solid var(--rule);
  font-family:var(--sans); font-size:.92rem;
}
.specialty-row__q{ color:var(--ink-soft); }
.specialty-row__a{ color:var(--ink); font-weight:600; text-align:right; }

.specialty-row.is-mine{ background:var(--panel); }
.specialty-row.is-mine .specialty-row__a{ color:var(--claret); }

.specialty-map__note{
  max-width:none; margin:0; padding:1.5rem 1.75rem;
  border-left:3px solid var(--claret); background:var(--panel);
  text-align:left;
}
.specialty-map__note p{ margin:0; color:var(--ink-soft); line-height:1.6; }

@media (max-width:640px){
  .specialty-row{ grid-template-columns:1fr; gap:.35rem; padding:1.1rem 0; }
  .specialty-row__a{ text-align:left; }
  .specialty-row.is-mine{ padding:1.2rem 1.3rem; }
}

/* ============================================================
   SUBPAGE — shared components (report-standard, instruct, onward)
   ============================================================ */

/* ---- instruct.html: sticky side nav + single-open accordion ---- */
.section.instruct{ max-width:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.instruct__inner{
  max-width:var(--page); margin-inline:auto;
  padding:clamp(4.5rem, 9vw, 7rem) var(--gutter) clamp(5.5rem, 10vw, 8rem);
  display:grid; grid-template-columns:220px minmax(0,1fr);
  gap:3.5rem; align-items:start;
}

.instruct__side{ position:sticky; top:1.5rem; }
.instruct__side-label{ font-family:var(--sans); font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin:0 0 1rem; }
.instruct__side nav ul{ list-style:none; margin:0; padding:0; border-left:2px solid var(--rule); }
.instruct__side nav li{
  box-sizing:border-box;
  display:flex; align-items:flex-start; gap:.65rem;
  width:100%; padding:.65rem .5rem .65rem 1rem; margin-left:-2px;
  border-left:2px solid transparent;
  font-family:var(--sans); font-size:.86rem; line-height:1.4; color:var(--ink-soft);
  transition:color .15s ease, border-color .15s ease, background-color .15s ease;
}
.instruct__side-num{ font-variant-numeric:tabular-nums; font-weight:700; font-size:.72rem; color:var(--claret); flex:none; width:1.1rem; padding-top:.1rem; }
.instruct__side nav li.is-active{ color:var(--ink); font-weight:600; border-left-color:var(--claret); background:var(--card-bg); }
.instruct__side nav li.is-active .instruct__side-num{ color:var(--claret); }
.instruct__side-cta{
  display:block; margin-top:1.5rem; padding-top:1.3rem; border-top:1px solid var(--rule);
  font-family:var(--sans); font-weight:600; font-size:.82rem; color:var(--claret);
  text-decoration:none;
}
.instruct__side-cta:hover{ color:var(--claret-deep); }
.instruct__side-cta .arrow{ display:inline-block; margin-left:.3em; transition:transform .15s ease; }
.instruct__side-cta:hover .arrow{ transform:translateX(.2em); }

.acc{ border:1px solid var(--rule); background:var(--paper); transition:background-color .15s ease, box-shadow .2s ease; overflow:hidden; }
.acc + .acc{ margin-top:.9rem; }
.acc:hover:not(.is-open){ background:var(--card-bg); }
.acc.is-open{ background:#fff; box-shadow:0 4px 18px -6px rgba(0,0,0,.1); }
.acc.acc h3{ margin:0; padding:0; font-weight:400; line-height:0; }
.acc__head{
  all:unset; box-sizing:border-box; cursor:pointer;
  display:flex; align-items:center; gap:1.1rem;
  width:100%; padding:1.3rem 1.9rem;
}
.acc__num{
  flex:none; width:2rem; height:2rem;
  background:var(--card-bg); color:var(--claret);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:700; font-size:1rem;
  font-variant-numeric:tabular-nums;
  transition:background-color .15s ease, color .15s ease;
}
.acc.is-open .acc__num{ background:var(--claret); color:#fff; }
.acc__body-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.2rem; }
.acc__title{ display:block; font-family:var(--serif); font-weight:500; font-size:clamp(1.1rem, 1rem + .45vw, 1.27rem); color:var(--claret); line-height:1.25; }
.acc__summary{ display:block; font-family:var(--sans); font-size:.889rem; line-height:1.4; color:var(--ink-soft); }
.acc.is-open .acc__summary{ display:none; }
.acc__chevron{
  flex:none;
  width:1rem; height:1rem;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft);
  transition:transform .25s ease, color .15s ease;
}
.acc__chevron svg{ display:block; width:100%; height:100%; }
.acc.is-open .acc__chevron{ transform:rotate(180deg); color:var(--claret); }

/* grid-row animation instead of guessing a max-height — animates the
   exact content height smoothly regardless of how long the panel is,
   rather than easing toward an arbitrary large number. */
.acc__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.acc.is-open .acc__panel{ grid-template-rows:1fr; }
.acc__panel-inner{
  min-height:0; overflow:hidden;
  padding:0 1.9rem 0 5rem; font-family:var(--sans); font-size:.92rem; color:var(--ink-soft);
  opacity:0; transform:translateY(-6px);
  transition:opacity .25s ease, transform .25s ease, padding-bottom .35s cubic-bezier(.4,0,.2,1);
}
.acc.is-open .acc__panel-inner{ opacity:1; transform:translateY(0); transition-delay:.08s; padding-bottom:1.6rem; }
.acc__panel-inner p{ margin:0 0 1.1rem; line-height:1.6; }
.acc__panel-inner p:last-child{ margin-bottom:0; }
.acc__panel-inner h4{ font-family:var(--serif); font-weight:500; font-size:1rem; color:var(--ink); margin:1.6rem 0 .8rem; }
.acc__panel-inner h4:first-child{ margin-top:0; }
.acc__panel-inner a{ color:var(--claret); }

@media (max-width:820px){
  .instruct__inner{ grid-template-columns:1fr; }
  .instruct__side{ position:static; margin-bottom:1.5rem; }
  .instruct__side nav ul{ display:flex; flex-wrap:wrap; gap:0; border-left:0; border-top:1px solid var(--rule); }
  .instruct__side nav li{ padding:.6rem .9rem; margin-left:0; border-left:0; border-right:1px solid var(--rule); border-bottom:2px solid transparent; }
  .instruct__side nav li.is-active{ border-left:0; border-bottom-color:var(--claret); }
  .acc__panel-inner{ padding-left:1.9rem; }
}

@media (max-width:520px){
  .instruct__side{ display:none; }
  .faq-acc .acc__summary{ display:none; }
}

@media (max-width:520px){
  .instruct__side nav ul{ flex-direction:column; border-top:0; }
  .instruct__side nav li{ border-right:0; border-bottom:1px solid var(--rule); width:100%; }
  .instruct__side nav li:last-child{ border-bottom:0; }
  .instruct__side nav button{ width:100%; padding:.75rem 1rem; border-left:2px solid transparent; border-bottom:0; }
  .instruct__side nav li.is-active button{ border-left-color:var(--claret); border-bottom:0; background:var(--card-bg); }
}

/* ---- the two stages: full-width band, two bordered panels ---- */
.section.stages{ max-width:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.stages__inner{
  max-width:var(--page); margin-inline:auto;
  padding:clamp(4.5rem, 9vw, 7rem) var(--gutter);
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:2rem 4rem;
  align-items:start;
}
.stages__head{ margin-bottom:0; }
.stages__head h2{
  margin:0 0 48px;
  font-weight:400; font-size:clamp(1.75rem, 1.4rem + 1.75vw, 2.333rem); line-height:1.16; letter-spacing:-0.003em;
  text-wrap:balance; color:var(--ink);
}
.stages__head p{ margin:0; color:var(--ink-soft); font-size:1rem; }

.stages__inner .accred-grid{ display:block; }
.stages__inner .accred-card p{ margin:0 0 1.35rem; max-width:none; color:var(--ink-soft); font-size:1rem; line-height:1.6; }
.stages__inner .accred-card p:last-child{ margin-bottom:0; }
.stages__inner .accred-card strong{ color:var(--ink); font-weight:600; }

@media (max-width:900px){
  .stages__inner{ grid-template-columns:1fr; gap:1.5rem; }
}

.stages__quote{
  max-width:52rem; margin:2.5rem auto 0; padding:1.75rem 2rem;
  background:var(--paper-2); border-left:2px solid var(--claret);
  font-family:var(--serif); font-weight:400;
  font-size:1.1rem; line-height:1.55; text-align:center;
  color:var(--ink);
}
.stages__quote--first{ margin-top:0; }

/* ---- triad-grid: a paragraph's several distinct points laid out as
   labelled blocks side by side, instead of running prose in a narrow
   column — used where the source text already separates cleanly into
   independent ideas (used on court-experience.html's joint statements
   section). ---- */
.triad-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:2.5rem;
  margin-top:1.5rem;
}
.triad-block h5{
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--claret); margin:0 0 1rem; padding-bottom:.8rem;
  border-bottom:2px solid var(--claret);
}
.triad-block p{ font-size:.98rem; line-height:1.65; color:var(--ink-soft); margin:0; }
@media (max-width:800px){
  .triad-grid{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .stages__inner .accred-grid{ grid-template-columns:1fr; }
}

/* ---- the checklist: full-width, its own band — the forwardable asset ---- */
.section.checklist-full{
  max-width:none; margin:0; padding:0;
  background:var(--panel);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.checklist-full__inner{
  max-width:var(--page); margin-inline:auto;
  padding:clamp(4.5rem, 9vw, 7.5rem) var(--gutter);
}
.checklist-full__head{ max-width:60ch; margin-bottom:2.5rem; }
.checklist-full__head h2{
  margin:0 0 48px;
  font-weight:400; font-size:clamp(1.75rem, 1.4rem + 1.75vw, 2.333rem); line-height:1.16; letter-spacing:-0.003em;
  text-wrap:balance; color:var(--ink);
}
.checklist-full__head p{ margin:0; color:var(--ink-soft); font-size:1rem; }

.checklist-full__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:1px;
  background:var(--card-border);
  border:1px solid var(--card-border);
}
.checklist-full__group{ background:var(--card-bg); padding:1.75rem 1.9rem; }
.checklist-full__group h3{
  font-family:var(--sans); font-weight:700; font-size:.8rem;
  color:var(--ink); margin:0 0 1rem;
  padding-bottom:.85rem; border-bottom:1px solid var(--card-border);
}
.checklist-full__group .rs__checklist{ padding:0; }
.checklist-full__group .rs__checklist li:first-child{ border-top:0; }

.checklist-full__foot{
  margin:1.75rem 0 0;
  font-family:var(--sans); font-size:.85rem; color:var(--ink-soft);
}

/* ---- narrow reading sections: "why this exists" etc ---- */
.section.page-prose{ max-width:none; margin:0; padding:0; border-top:1px solid var(--rule); }
/* alternating --panel band on medico-legal-cv.html only — a run of five
   page-prose sections otherwise stays flat --paper the whole way down. */
.section.page-prose.page-prose--panel{
  background:var(--panel); border-top:0; border-bottom:1px solid var(--rule);
}
.page-prose__inner{
  max-width:var(--page);
  margin-inline:auto;
  padding:clamp(4.5rem, 9vw, 7rem) var(--gutter);
}
.page-prose__inner > *{ max-width:56ch; }
.page-prose__inner > .stages__quote{ max-width:52rem; margin:2.5rem auto 0; }
.page-prose__inner > .triad-grid{ max-width:none; }
.page-prose__inner > .doc-groups,
.page-prose__inner > .value-rows,
.page-prose__inner > .rate-rows,
.page-prose__inner > .fee-card,
.page-prose__inner > .about__grid,
.page-prose__inner > .accred-grid,
.page-prose__inner > .clinical-split,
.page-prose__inner > .stat-row,
.page-prose__inner > .aca-grid,
.page-prose__inner > .indemnity-split,
.page-prose__inner > .contact-split,
.page-prose__inner > .chip-field,
.page-prose__inner > .qa-switch,
.page-prose__inner > .acc-list,
.page-prose__inner > .why-grid,
.page-prose__inner > .press-award,
.page-prose__inner > .press-grid,
.page-prose__inner > .press-profiles-label,
.page-prose__inner > .press-profiles{ max-width:none; }
.page-prose__inner:has(#mlp-h) > .section-eyebrow,
.page-prose__inner:has(#mlp-h) > h2,
.page-prose__inner:has(#numbers-h) > .section-eyebrow,
.page-prose__inner:has(#numbers-h) > h2,
.page-prose__inner:has(#training-h) > .section-eyebrow,
.page-prose__inner:has(#training-h) > h2,
.page-prose__inner:has(#training-h) > .fact-list,
.page-prose__inner > .mlp-dial-grid{ max-width:52rem; margin-inline:auto; }
.page-prose__inner:has(#training-h){ text-align:center; }
.page-prose__inner:has(#training-h) .fact-list{ text-align:left; }
.page-prose__inner > .need-split,
.page-prose__inner > .inquest-block{ max-width:44rem; margin-inline:auto; }
.page-prose__inner:has(#covers-h),
.page-prose__inner:has(#questions-h){ text-align:center; }
.page-prose__inner:has(#covers-h) > .section-eyebrow,
.page-prose__inner:has(#covers-h) > h2,
.page-prose__inner:has(#questions-h) > .section-eyebrow,
.page-prose__inner:has(#questions-h) > h2{ width:fit-content; margin-inline:auto; }
.page-prose__inner:has(#covers-h) .report-ledger,
.page-prose__inner:has(#questions-h) .report-ledger{ text-align:left; }
/* the text column stretches to fill whatever's left beside the photo —
   on a wide desktop that's much wider than the row content needs, so the
   row's bottom rule runs on far past the text. Cap it to a sane line
   length instead of letting it track the column's full width. */
.about__grid .value-rows{ max-width:42rem; }
/* marco-desk.webp is a landscape photo (2000x1334, ~3:2) — the shared
   .about__photo box is a 4:5 portrait crop meant for the homepage's hero
   still, which chops the sides off a landscape shot. Give this instance
   the frame the photo actually is, so nothing gets cropped. Sized up from
   the homepage's 24rem column so the photo carries real presence instead
   of leaving the row visibly shorter than the facts list beside it. */
.page-prose__inner > .about__grid{ grid-template-columns:minmax(0,32rem) minmax(0,1fr); }
.page-prose__inner > .about__grid > .about__photo{ aspect-ratio:3/2; }
/* photo + facts, used on the CV page, has less room to share than the
   full-bleed homepage version it borrows from — stack it at the same
   840px point the other 2-to-1-column sections in this file use, instead
   of squeezing photo and table side by side down to 640px */
@media (max-width:840px){
  .page-prose__inner > .about__grid{ grid-template-columns:1fr; gap:2rem; }
  .page-prose__inner > .about__grid > .about__photo{ max-width:28rem; width:100%; }
}
.page-prose h2{
  margin:0 0 48px;
  font-weight:400;
  font-size:clamp(1.75rem, 1.4rem + 1.75vw, 2.333rem);
  line-height:1.16;
  letter-spacing:-0.003em;
  text-wrap:balance;
  color:var(--ink);
}
.page-prose__inner:has(#advise-h),
.page-prose__inner:has(#arise-h),
.page-prose__inner:has(#cp-h),
.page-prose__inner:has(#injuries-h),
.page-prose__inner:has(#management-h){
  text-align:center;
}
.page-prose__inner:has(#advise-h) .section-eyebrow,
.page-prose__inner:has(#advise-h) h2,
.page-prose__inner:has(#arise-h) .section-eyebrow,
.page-prose__inner:has(#arise-h) h2,
.page-prose__inner:has(#cp-h) .section-eyebrow,
.page-prose__inner:has(#cp-h) h2,
.page-prose__inner:has(#injuries-h) .section-eyebrow,
.page-prose__inner:has(#injuries-h) h2,
.page-prose__inner:has(#management-h) .section-eyebrow,
.page-prose__inner:has(#management-h) h2{
  margin-inline:auto;
}
.page-prose__inner:has(#advise-h) .chip-field,
.page-prose__inner:has(#arise-h) .chip-field,
.page-prose__inner:has(#cp-h) .chip-field,
.page-prose__inner:has(#injuries-h) .chip-field,
.page-prose__inner:has(#management-h) .chip-field{
  justify-content:center;
}
.page-prose__inner:has(#advise-h) .chip,
.page-prose__inner:has(#arise-h) .chip,
.page-prose__inner:has(#cp-h) .chip,
.page-prose__inner:has(#injuries-h) .chip,
.page-prose__inner:has(#management-h) .chip{
  text-align:left;
}
.page-prose__inner:has(#criminal-h){
  text-align:center;
}
.page-prose__inner:has(#criminal-h) > .section-eyebrow,
.page-prose__inner:has(#criminal-h) > h2,
.page-prose__inner:has(#criminal-h) > p{
  margin-inline:auto;
  max-width:70ch;
}
.page-prose__inner:has(#criminal-h) .qa-switch{
  text-align:left;
  max-width:none;
}

.qa-switch{
  display:grid;
  grid-template-columns:14rem 1fr;
  gap:3rem;
  margin-top:2.5rem;
  align-items:start;
}
.qa-switch__side{ position:static; }
.qa-switch__panel{ display:none; }
.qa-switch__panel.is-open{
  display:block;
  background:var(--paper-2);
  border:1px solid var(--rule);
  padding:1.5rem 1.25rem;
}
.qa-switch__panel-title{ display:none; }
.qa-switch__panel .qa-list{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.qa-switch__panel .qa-list li{ position:relative; padding-left:1.4rem; }
.qa-switch__panel .qa-list li::before{
  content:"";
  position:absolute; left:0; top:.5em;
  width:.4rem; height:.4rem;
  border-top:2px solid var(--claret); border-right:2px solid var(--claret);
  transform:rotate(45deg);
}
@media (max-width:840px){
  .qa-switch{ grid-template-columns:1fr; }
}
.page-prose h3{
  margin:1.75rem 0 .5rem;
  font-family:var(--sans); font-weight:700; font-size:clamp(.92rem, .87rem + .25vw, 1.006rem);
  color:var(--ink);
}
.page-prose p{ margin:0 0 1.1rem; color:var(--ink-soft); }
.page-prose p:last-child{ margin-bottom:0; }

.page-prose__inner:has(#inquests-h){ text-align:center; }
.page-prose__inner:has(#inquests-h) > .section-eyebrow,
.page-prose__inner:has(#inquests-h) > h2{ width:fit-content; margin-inline:auto; }
.inquest-block{ max-width:44rem; margin:0 auto; text-align:left; }
.inquest-intro{
  margin:0 0 2rem; color:var(--ink);
  font-size:1.02rem; line-height:1.65;
}
.inquest-list{
  margin:0;
  border-top:1px solid var(--ink);
}
.inquest-list__row{ padding:1.1rem 0; border-bottom:1px solid var(--rule); }
.inquest-list__row p{ margin:0; font-size:.95rem; line-height:1.6; color:var(--ink); }

.report-ledger{
  max-width:50rem;
  margin:1.5rem auto 0;
}
.report-ledger__row{
  display:grid;
  grid-template-columns:2.5rem 1fr;
  gap:1rem;
  padding:1rem 0;
  border-bottom:1px solid var(--rule);
}
.report-ledger__row:first-child{ border-top:1px solid var(--ink); }
.report-ledger__num{
  font-family:var(--serif); font-weight:500; font-size:1.3rem;
  color:var(--claret); line-height:1.3; font-variant-numeric:tabular-nums;
}
.report-ledger__row p{ margin:0; font-size:.94rem; line-height:1.6; color:var(--ink); }

.records-cards .accred-card ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.records-cards .accred-card li,
.records-cards .accred-card > p{ font-family:var(--sans); font-size:.88rem; line-height:1.55; color:var(--ink-soft); margin:0; }

.tick-list{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:1rem; max-width:56ch; }
.tick-list li{ display:flex; align-items:flex-start; gap:.8rem; color:var(--ink-soft); line-height:1.55; }
.tick-list li strong{ display:block; color:var(--ink); font-family:var(--sans); font-weight:600; font-size:.92rem; margin-bottom:.15rem; }
.tick-list li::before{
  content:"";
  flex:none; margin-top:.62em;
  width:.42rem; height:.42rem;
  border-top:2px solid var(--claret);
  border-right:2px solid var(--claret);
  transform:translateY(-50%) rotate(45deg);
}
.page-prose__inner > .tick-list{ max-width:56ch; }
/* long, substantial list items (2+ sentences each, not short phrases) —
   still too much to read comfortably in one super-wide column, so this
   reflows into as many ~26rem columns as the section width supports,
   instead of sitting as one 56ch strip with the rest of the section
   empty. Used across the specialty-page template (Claims that arise,
   What I can advise on, etc). */
.page-prose__inner > .tick-list.tick-list--wide{
  display:block;
  max-width:none;
  column-width:26rem;
  column-gap:3rem;
}
/* CSS columns, not a grid — items keep whatever length they have without
   being paired into a shared row, so a short item doesn't inherit a tall
   neighbour's empty space beneath it. */
.tick-list.tick-list--wide li{ break-inside:avoid; margin-bottom:1rem; }
.tick-list.tick-list--wide li:last-child{ margin-bottom:0; }

/* ---- num-sequence: numbered rows for a set of points that are actually
   a timeline (retain, then destroy, unless returned early, with proof
   available) — the order is real, so a number makes it explicit rather
   than implicit in a bulleted list. */
.page-prose__inner > .num-sequence{ max-width:46rem; margin-top:.5rem; }
.num-sequence{ display:grid; }
.num-sequence__item{ display:grid; grid-template-columns:2.75rem 1fr; gap:1rem; padding:1.1rem 0; }
.num-sequence__item + .num-sequence__item{ border-top:1px solid var(--rule); }
.num-sequence__num{
  font-family:var(--serif); font-weight:500; font-size:1.5rem; color:var(--claret);
  font-variant-numeric:tabular-nums;
}
.num-sequence__item p{ margin:0; font-size:.96rem; line-height:1.6; color:var(--ink-soft); }
@media (max-width:600px){
  .num-sequence__item{ grid-template-columns:2rem 1fr; }
}
.page-prose__inner:has(#retention-h){ text-align:center; }
.page-prose__inner:has(#retention-h) > .section-eyebrow,
.page-prose__inner:has(#retention-h) > h2{ width:fit-content; margin-inline:auto; }
.page-prose__inner:has(#retention-h) .num-sequence{ text-align:left; margin-inline:auto; }
.page-prose__inner:has(#duty-h){ text-align:center; }
.page-prose__inner:has(#duty-h) > .section-eyebrow,
.page-prose__inner:has(#duty-h) > h2,
.page-prose__inner:has(#duty-h) > p{ text-align:left; margin-inline:auto; max-width:60ch; }
.page-prose__inner:has(#duty-h) .num-sequence{ text-align:left; margin-inline:auto; }

.page-prose__inner > .why-grid{ max-width:none; }
.why-pullquote{
  max-width:52rem; margin:2.5rem auto 0; padding:1.75rem 2rem;
  background:var(--paper-2); border-left:2px solid var(--claret);
  font-family:var(--serif); font-weight:400;
  font-size:1.1rem; line-height:1.55; text-align:center;
  color:var(--ink);
}
.why-pullquote p{ margin:0 0 .75rem; color:var(--ink); }
.why-pullquote cite{ font-style:normal; font-size:.85rem; color:var(--ink-soft); }

/* ---- plain-list: no marker at all — a hairline under each row instead
   of a bullet/chevron/chip, for pages where that glyph has already
   appeared more than once (accordion arrows, chips, nav dropdown). */
.plain-list{ list-style:none; margin:1.5rem 0 0; padding:0; max-width:56ch; }
.plain-list li{
  padding:.9rem 0; border-bottom:1px solid var(--rule);
  color:var(--ink-soft); line-height:1.55; font-size:.92rem;
}
.plain-list li:first-child{ padding-top:0; }
.page-prose__inner > .plain-list.plain-list--wide{
  max-width:none;
  display:block;
  column-width:26rem; column-gap:3rem;
}
.plain-list.plain-list--wide li{ break-inside:avoid; }

/* ---- fact-list: plain-list plus a short bold label per row — for a
   single short passage that reads as 2-3 distinct facts once split,
   rather than one dense paragraph or a lone thin card. */
.fact-list{ list-style:none; margin:1.5rem 0 0; padding:0; max-width:56rem; }
.fact-list li{
  padding:1.1rem 0; border-bottom:1px solid var(--rule);
  color:var(--ink-soft); line-height:1.6;
}
.fact-list li:first-child{ padding-top:0; }
.fact-list li:last-child{ border-bottom:0; }
.fact-list li b{
  display:block; font-family:var(--sans); font-weight:700; font-size:1rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--claret); margin-bottom:.4rem;
}

/* ---- terms of engagement: prose + conflicts panel split ---- */
.section.terms-split{
  max-width:none; margin:0; padding:clamp(4.5rem, 9vw, 7rem) 0;
  border-top:1px solid var(--rule);
}
.section.terms-split.terms-split--panel{ background:var(--panel); }
.terms-split__inner{
  max-width:var(--page);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:2.5rem 4rem;
  align-items:start;
}
.terms-split__lede{ max-width:42rem; }
.terms-split__lede h2{
  margin:0 0 48px;
  font-weight:400; font-size:clamp(1.75rem, 1.4rem + 1.75vw, 2.333rem); line-height:1.16;
  letter-spacing:-0.003em; text-wrap:balance; color:var(--ink);
}
.terms-split__lede p{ margin:0 0 1.1rem; color:var(--ink-soft); }
.terms-split__lede p:last-child{ margin-bottom:0; }

.terms-split__panel{
  border:1px solid var(--rule);
  background:var(--panel);
}
.terms-split__panel-title{
  margin:0;
  padding:1rem 1.5rem;
  border-bottom:1px solid var(--rule);
  font-family:var(--sans); font-weight:700; font-size:.95rem; color:var(--ink);
}
.terms-split__panel-body{ margin:0; padding:1.25rem 1.5rem; color:var(--ink-soft); }
.terms-split__panel-foot{
  margin:0;
  padding:1rem 1.5rem;
  border-top:1px solid var(--rule);
  font-family:var(--sans); font-size:.8rem; line-height:1.5;
  color:var(--ink-soft);
}

@media (max-width:840px){
  .terms-split__inner{ grid-template-columns:1fr; gap:2rem; }
  .terms-split__lede{ max-width:60ch; }
  .terms-split__panel{ max-width:32rem; }
}

/* ---- two-column grouped lists (e.g. "essential" / "helpful") ---- */
.doc-groups{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1px;
  background:var(--card-border);
  border:1px solid var(--card-border);
  margin:1.5rem 0 0;
}
.doc-group{ background:var(--card-bg); padding:1.75rem 1.9rem; }
.doc-group h5{
  font-family:var(--sans); font-weight:700; font-size:.8rem;
  color:var(--ink); margin:0 0 1rem;
  padding-bottom:.85rem; border-bottom:1px solid var(--card-border);
}
.doc-group .tick-list{ margin-top:0; max-width:none; }

/* ---- term/value rows, reused for the examination-venue table ----
   flex-wrap, not a fixed grid: the term/definition pair stacks whenever
   the row's own available width is too tight to hold both, regardless of
   viewport size — this matters wherever value-rows sits in a narrower
   column (e.g. beside the photo in .about__grid) rather than full width. */
.value-rows{ border-top:1px solid var(--rule); margin:1.5rem 0 0; }
.value-row{
  display:flex; flex-wrap:wrap;
  column-gap:2rem; row-gap:.35rem;
  padding:1.15rem 0;
  border-bottom:1px solid var(--rule);
  font-family:var(--sans); font-size:.92rem;
}
.value-row__term{ flex:0 1 10rem; min-width:0; font-weight:700; color:var(--ink); }
.value-row__def{ flex:1 1 14rem; min-width:0; color:var(--ink-soft); line-height:1.55; }
/* data-security's GDPR status rows are short term/value pairs, not
   running text — letting them stretch the full page width (like the
   longer value-rows on fees-and-terms/instruct/medico-legal-cv) leaves
   the definition column absurdly wide. Cap this instance only, and
   centre the section to match: a narrowed block left pinned to the
   page's left edge reads like a mistake, not a choice. */
.page-prose__inner:has(#status-h){ text-align:center; }
.page-prose__inner:has(#status-h) > .section-eyebrow,
.page-prose__inner:has(#status-h) > h2{ width:fit-content; margin-inline:auto; }

/* ---- legal-page: plain-prose statutory pages (privacy/terms/cookies/
   complaints) — one centred reading column throughout, no cards or
   grids to fill the width with, so the column itself is centred instead
   of being left-pinned across the full page width. ---- */
.legal-page .page-prose__inner{ max-width:70rem; margin-inline:auto; }
.legal-page .page-prose__inner > *{ margin-inline:0; text-align:left; max-width:none; }
.legal-page .page-hero__inner{ max-width:70rem; margin-inline:auto; }
.legal-page .page-hero__inner.page-hero__inner{ display:flex; flex-direction:column; gap:1.75rem; }
.legal-page .page-hero__body{ margin-inline:0; max-width:none; }
.legal-page .page-hero__stand{
  grid-column:auto; grid-row:auto; margin-inline:0; text-align:left; max-width:none;
  padding-left:0;
}
.legal-page .page-hero__stand::before{ display:none; }
.legal-page .page-prose__inner p,
.legal-page .page-prose__inner li{ font-size:1.25rem; line-height:1.75; }
.legal-page .page-prose__inner h3{ font-size:1.4rem; }
.legal-page .page-hero__stand{ font-size:1.25rem; line-height:1.75; }
.page-prose__inner:has(#status-h) > .value-rows{ max-width:38rem; margin-inline:auto; text-align:left; }
.page-prose__inner:has(#indemnity-h){ text-align:center; }
.page-prose__inner:has(#indemnity-h) > .section-eyebrow,
.page-prose__inner:has(#indemnity-h) > h2{ width:fit-content; margin-inline:auto; }
.page-prose__inner:has(#indemnity-h) > .value-rows{ max-width:30rem; margin-inline:auto; border:0; }
.page-prose__inner:has(#indemnity-h) .value-row{
  flex-direction:column; align-items:center; gap:.4rem;
  text-align:center; border:1px solid var(--card-border); background:var(--card-bg);
  box-shadow:var(--shadow-sheet); padding:1.6rem 1.7rem 1.5rem;
}
.page-prose__inner:has(#indemnity-h) .value-row__term{ flex:none; }
.page-prose__inner:has(#indemnity-h) .value-row__def{ flex:none; font-size:1.1rem; font-weight:600; color:var(--claret); }

/* ---- defendant-and-insurer-instructions.html: centred prose sections ---- */
.page-prose__inner:has(#openly-h),
.page-prose__inner:has(#get-h),
.page-prose__inner:has(#notdo-h),
.page-prose__inner:has(#fees-h){ text-align:center; }
.page-prose__inner:has(#openly-h) > .section-eyebrow,
.page-prose__inner:has(#openly-h) > h2,
.page-prose__inner:has(#get-h) > .section-eyebrow,
.page-prose__inner:has(#get-h) > h2,
.page-prose__inner:has(#notdo-h) > .section-eyebrow,
.page-prose__inner:has(#notdo-h) > h2,
.page-prose__inner:has(#fees-h) > .section-eyebrow,
.page-prose__inner:has(#fees-h) > h2{ width:fit-content; margin-inline:auto; }
.page-prose__inner > .openly-lede{ max-width:52rem; margin-inline:auto; text-align:left; }
.page-prose__inner:has(#get-h) > .num-sequence{ text-align:left; max-width:52rem; margin-inline:auto; }
.page-prose__inner:has(#notdo-h) > blockquote{ text-align:left; max-width:42rem; margin-inline:auto; }
.page-prose__inner:has(#fees-h) > .accred-grid{ max-width:44rem; margin-inline:auto; text-align:left; }

/* ---- credential band: full-bleed grid of postnominal cards (CV page) ---- */
.section.cred-band{
  max-width:none; margin:0; padding:0;
  background:linear-gradient(180deg, var(--panel), var(--paper-2));
  border-top:1px solid var(--rule);
}
.cred-band__inner{
  max-width:var(--page); margin-inline:auto;
  padding:clamp(4.5rem, 9vw, 7rem) var(--gutter);
}
.cred-band__inner h2{
  margin:0 0 48px; font-weight:400; font-size:1.7rem; line-height:1.2;
  letter-spacing:-0.003em; color:var(--ink);
}
.cred-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--card-border); border:1px solid var(--card-border);
}
.cred-card{
  background:var(--card-bg); padding:1.5rem 1.5rem 1.4rem;
  transition:background-color .15s ease;
}
.cred-card:hover{ background:var(--card-bg-hover); }
.cred-card__mark{
  font-family:var(--serif); font-weight:500; font-size:1.6rem; color:var(--ink); line-height:1;
}
.cred-card__mark small{
  font-size:.85rem; font-weight:400; color:var(--ink-soft); margin-left:.35em;
}
.cred-card__cap{
  display:block; margin-top:.6rem;
  font-family:var(--sans); font-size:.82rem; line-height:1.5; color:var(--ink-soft);
}
@media (max-width:720px){ .cred-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .cred-grid{ grid-template-columns:1fr; } }

/* ---- accreditation: one bordered-cell grid, same recipe as .cred-grid,
   read in one order (left to right, row by row) instead of two separate
   columns competing for attention. auto-fit/minmax fills the full section
   width regardless of item count. Each card carries its own category tag
   instead of a shared column header, so cards can reflow freely. */
.accred-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr));
  gap:1rem; margin-top:.5rem;
}
.accred-grid--three{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:900px){
  .accred-grid--three{ grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr)); }
}
/* individually bordered cards, not a shared background behind the whole
   grid — with auto-fit and a card count that doesn't divide evenly
   (e.g. 7), a shared grid background shows through the empty trailing
   track as a solid filled box. Bordering each card instead leaves a
   remainder genuinely blank. */
.accred-card{
  background:var(--card-bg); border:1px solid var(--card-border); padding:1.6rem 1.7rem 1.5rem;
  box-shadow:var(--shadow-sheet);
}
.accred-card .accred-card__tag{
  font-family:var(--sans); font-weight:700; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--claret); margin:0 0 .8rem;
}
.accred-card .accred-card__tag--num{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem, 1.5rem + 2vw, 2.541rem);
  text-transform:none; letter-spacing:0; font-variant-numeric:tabular-nums;
  margin:0 0 .6rem;
}
.accred-card__title{
  display:block; font-family:var(--serif); font-weight:500; font-size:1.3rem;
  color:var(--claret); margin-bottom:.45rem; line-height:1.3;
}
.accred-card__desc{ display:block; font-family:var(--sans); font-size:.85rem; color:var(--ink-soft); line-height:1.55; }
/* dash-marker variant, for a card description that's really a short list
   of items rather than a sentence */
ul.accred-card__desc{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
ul.accred-card__desc li{ position:relative; padding-left:1.4rem; display:block; }
ul.accred-card__desc li::before{
  content:"";
  position:absolute; left:0; top:.5em;
  width:.4rem; height:.4rem;
  border-top:2px solid var(--claret); border-right:2px solid var(--claret);
  transform:rotate(45deg);
}
/* one sentence per line, no marker — for a description that's a run of
   separate points rather than a single flowing thought */
div.accred-card__desc{ display:grid; gap:.5rem; }
div.accred-card__desc p{ margin:0; }
p.accred-card__desc--note{ margin-top:1.75rem; }

/* ---- press & recognition (CV page) ---- */
.press-award{
  display:flex; align-items:center; gap:1.5rem;
  margin:.5rem 0 2rem; padding:1.4rem 1.7rem;
  background:var(--card-bg); border:1px solid var(--card-border);
  box-shadow:var(--shadow-sheet);
}
.press-award__year{
  flex:none; font-family:var(--serif); font-weight:500; color:var(--claret);
  font-size:clamp(1.9rem, 1.5rem + 2vw, 2.541rem); font-variant-numeric:tabular-nums;
}
.press-award b{ display:block; font-family:var(--serif); font-weight:500; font-size:1.2rem; color:var(--claret); margin-bottom:.35rem; }
.press-award p{ margin:0; font-family:var(--sans); font-size:.88rem; line-height:1.55; color:var(--ink-soft); }
.press-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr));
  gap:1rem; margin-bottom:3rem;
}
.press-card{
  text-decoration:none;
  background:var(--card-bg); border:1px solid var(--card-border);
  padding:24px; display:flex; flex-direction:column; gap:20px;
  position:relative; overflow:hidden;
  box-shadow:0 2px 12px rgba(30,58,138,.07);
}
.press-card__logo-box{ height:48px; display:flex; align-items:center; }
.press-card__logo-box img{ height:48px; width:auto; max-width:180px; object-fit:contain; display:block; }
.press-card__head{ display:flex; align-items:center; gap:10px; }
.press-card__bar{ display:inline-block; width:4px; height:22px; flex-shrink:0; }
.press-card__bar--independent{ background:#e8002d; }
.press-card__bar--llm{ background:#b8963e; }
.press-card__bar--insider{ background:#1a3560; }
.press-card__bar--mail{ background:#003f8a; }
.press-card__source{
  font-size:1.05rem; font-weight:700; color:var(--ink);
  font-family:var(--sans); flex:1; line-height:1;
}
.press-card__ext{ flex-shrink:0; color:#94a3b8; }
.press-card__quote{
  font-size:.95rem; font-style:italic; color:var(--ink-soft);
  line-height:1.7; font-family:var(--sans); flex:1; margin:0;
}
.press-card__tag{
  display:inline-block; font-size:.72rem; font-weight:600; color:var(--claret);
  background:var(--panel); border:1px solid var(--card-border);
  padding:3px 12px; align-self:flex-start; margin-top:auto;
}
.press-profiles-label{
  margin:0; font-family:var(--sans); font-weight:700; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft);
}
.press-profiles{
  margin:.9rem 0 2.5rem;
  display:flex; flex-wrap:wrap; gap:.6rem;
}
.press-profiles a{
  display:flex; align-items:center; gap:.5rem; text-decoration:none;
  font-family:var(--sans); font-weight:600; font-size:.85rem; color:var(--ink);
  background:var(--card-bg); border:1px solid var(--card-border);
  padding:.55rem 1rem; box-shadow:var(--shadow-sheet); transition:border-color .15s;
}
.press-profiles a:hover{ border-color:var(--claret); }
.press-profiles svg{ flex:none; color:#94a3b8; }

/* ---- card-list: bordered accred-cards for items with no natural
   title/description split (e.g. full-sentence commitments) — CSS
   columns rather than accred-grid's row-based grid, so a short card
   doesn't inherit a taller row-mate's height and sit with dead space
   at the bottom of its own border. */
.page-prose__inner > .card-list{ max-width:none; column-width:22rem; column-gap:1.5rem; }
.card-list .accred-card{ display:block; break-inside:avoid; margin-bottom:1.5rem; }
.card-list .accred-card:last-child{ margin-bottom:0; }
.card-list .accred-card p{ margin:0; font-family:var(--sans); font-size:.92rem; color:var(--ink-soft); line-height:1.6; }

/* ---- card-list--num: same cards, laid out as a deliberate two-column
   grid instead of masonry columns, each numbered like the "three
   things" / "three routes" cards elsewhere — for a set that reads as a
   fixed list of safeguards rather than loose notes. */
.page-prose__inner > .card-list.card-list--num{
  display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; column-gap:1.25rem;
}
.card-list--num .accred-card{ margin-bottom:0; }
.card-list--num .accred-card:last-child{ grid-column:1/-1; }
/* .card-list .accred-card p (font-size/color/margin reset) is more
   specific than .accred-card__tag--num alone and would otherwise win —
   restate the numeral's own styling here at higher specificity. */
.card-list--num .accred-card p.accred-card__tag--num{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem, 1.3rem + 1.5vw, 2.118rem); color:var(--claret);
  text-transform:none; letter-spacing:0; font-variant-numeric:tabular-nums; margin:0 0 .5rem;
}
@media (max-width:620px){
  .page-prose__inner > .card-list.card-list--num{ grid-template-columns:1fr; }
  .card-list--num .accred-card:last-child{ grid-column:1; }
}

/* ---- clinical practice: asymmetric rail + chip field, full section
   width instead of one narrow reading column ---- */
.clinical-split{
  display:grid; grid-template-columns:20rem 1fr; gap:3rem; align-items:start;
  margin-top:.5rem;
}
.clinical-split__side{ border-left:2px solid var(--claret); padding-left:1.5rem; }
.clinical-split__label{
  font-family:var(--sans); font-weight:700; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-soft); margin:0 0 .8rem;
}
.clinical-split__label--tight{ margin-top:2rem; }
.clinical-split__side p{ font-size:.86rem; }
.clinical-split p.flag{ color:var(--flag); }
.clinical-split__side .clinical-split__quote{
  font-family:var(--serif); font-style:italic; font-size:1.05rem;
  color:var(--ink); margin:1.3rem 0 0; line-height:1.5;
}
.chip-field{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:.5rem; }
.chip-field .chip{
  border:1px solid var(--card-border); background:var(--card-bg);
  padding:.6rem 1rem; font-family:var(--sans); font-size:.85rem; color:var(--ink);
}
@media (max-width:760px){
  .clinical-split{ grid-template-columns:1fr; gap:2rem; }
  .clinical-split__side{ border-left:0; border-top:2px solid var(--claret); padding-left:0; padding-top:1.5rem; }
}

/* ---- medico-legal practice: one axis, read across the row. Each item
   carries its own border-top segment rather than one absolutely-positioned
   line — the segments line up into a single continuous axis when items
   share a row, and still look correct if narrower screens wrap them onto
   more than one row. The diamond tick reuses the rotated-square language
   already used for .tick-list bullets, not a generic circle. */
.stat-row{ display:flex; flex-wrap:wrap; row-gap:2.5rem; margin-top:2.5rem; }
.stat-row__item{
  flex:1 1 11rem; min-width:0;
  padding:1.85rem 1.75rem 0;
  border-top:1px solid var(--rule);
  position:relative;
}
.stat-row__item:first-child{ padding-left:0; }
.stat-row__item:first-child .stat-row__mark{ left:0; }
.stat-row__mark{
  position:absolute; top:-.32rem; left:0;
  width:.5rem; height:.5rem;
  background:var(--paper); border:1.5px solid var(--rule);
  transform:rotate(45deg);
}
.stat-row__item--hero{ border-top-color:var(--claret); border-top-width:2px; }
.stat-row__item--hero .stat-row__mark{
  width:.62rem; height:.62rem; top:-.37rem;
  background:var(--claret); border-color:var(--claret);
}
.stat-row__num{
  display:block; font-family:var(--serif); font-weight:500; font-size:clamp(1.4rem, 1.15rem + 1.25vw, 1.8rem);
  color:var(--ink); line-height:1.1; margin-bottom:.65rem;
}
.stat-row__item--hero .stat-row__num{ font-size:clamp(2.1rem, 1.6rem + 2.5vw, 2.753rem); color:var(--claret); }
.stat-row__tag{
  display:block; font-family:var(--sans); font-weight:700; font-size:.62rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--claret);
  margin-bottom:.75rem;
}
.stat-row__label{
  display:block; font-family:var(--sans); font-size:.76rem; color:var(--ink-soft); line-height:1.5;
}
.mlp-dial-grid{ display:grid; grid-template-columns:14rem 1fr; gap:3rem; align-items:center; margin-top:1.5rem; }
.mlp-dial{
  width:11rem; height:11rem; border-radius:50%;
  border:10px solid var(--rule); border-top-color:var(--claret); border-right-color:var(--claret);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform:rotate(-45deg);
}
.mlp-dial__inner{ transform:rotate(45deg); text-align:center; }
.mlp-dial__num{ font-family:var(--serif); font-size:clamp(2rem, 1.6rem + 2vw, 2.753rem); color:var(--claret); line-height:1; }
.mlp-dial__label{ font-size:.68rem; color:var(--ink-soft); margin-top:.3rem; }

.mlp-body{ max-width:60rem; }
.mlp-body p{ margin:0 0 1.1rem; color:var(--ink-soft); font-size:.95rem; line-height:1.65; }
.mlp-body p:last-child{ margin-bottom:0; }
.mlp-body strong{ color:var(--ink); font-weight:600; }
.mlp-types b{ color:var(--ink); font-weight:600; }

@media (max-width:700px){
  .mlp-dial-grid{ grid-template-columns:1fr; justify-items:center; text-align:center; }
}


/* ---- academic standing: four independent blocks, hairline top rules,
   no boxes — deliberately quieter than the bordered-card grids used for
   Qualifications/Accreditation/Types of instruction elsewhere on this
   page, so the page doesn't lean on one recipe for every list. */
.aca-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  gap:2.25rem 3rem; margin-top:.5rem;
}
.aca-block{ padding-top:1.1rem; border-top:1px solid var(--claret); }
.aca-block h3{ margin:0 0 .7rem; color:var(--claret); }
.aca-block p{ font-size:.85rem; }
.aca-block p:last-child{ margin-bottom:0; }

/* ---- indemnity & regulatory: only two short paragraphs, but two
   genuinely distinct topics — put them side by side rather than
   stacking one narrow column of text with empty width beside it. */
.indemnity-split{
  display:grid; grid-template-columns:1fr 1fr;
  margin-top:.5rem;
}
.indemnity-split > div:first-child{ padding-right:1.75rem; }
.indemnity-split > div + div{ border-left:1px solid var(--rule); padding-left:1.75rem; }
.indemnity-split h3{ margin-top:0; }

/* ---- dual-note: two unrelated short notices (breach notification,
   cyber security) that don't need a shared heading — each keeps its
   own eyebrow + heading, marked with the site's quiet claret rule
   instead of a bordered card, side by side rather than stacked. */
.page-prose__inner > .dual-note{ max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; margin-top:.5rem; }
.page-prose__inner > .dual-note.dual-note--single{
  grid-template-columns:minmax(0, 32rem); justify-content:center; text-align:center;
}
.dual-note--single .dual-note__col{ border-left:0; padding-left:0; }
.dual-note--single .section-eyebrow{ text-align:center; }
.dual-note__col{ border-left:2px solid var(--claret); padding-left:1.5rem; }
.dual-note__col h2{ margin:0 0 .75rem; font-size:1.6rem; }
.dual-note__col p:not(.section-eyebrow){ margin:0; font-size:.98rem; line-height:1.7; color:var(--ink-soft); }
@media (max-width:700px){
  .page-prose__inner > .dual-note{ grid-template-columns:1fr; gap:2rem; }
}

/* ---- need-split: a fixed label column (eyebrow + heading) beside its
   list, so a short "what I will need" heading doesn't sit on its own
   line above a list starting flush at the same left edge. */
.need-split{
  display:grid; grid-template-columns:13rem 1fr; gap:1rem 2.25rem; align-items:start;
  max-width:44rem; margin:.5rem auto 0;
}
.need-split__label{ grid-column:1; align-self:start; }
.need-split .section-eyebrow{ margin:0 0 .3rem; }
.need-split h2{ margin:0; font-size:1.75rem; }
.need-split .tick-list{ grid-column:2; margin-top:.3rem; align-self:start; }
@media (max-width:720px){
  .need-split{ grid-template-columns:1fr; }
  .need-split__label{ grid-column:1; }
  .need-split .tick-list{ grid-column:1; }
}
.page-prose .placeholder-note{ margin:0 0 2rem; color:var(--flag); }

/* ---- contact page: form + direct-contact sidebar side by side, so the
   section uses the full width instead of a form column with empty space
   beside it. The sidebar is real content (brief's "Direct contact"
   section), not filler. */
.contact-split{
  display:grid; grid-template-columns:1fr 22rem; gap:2rem 3.5rem;
  align-items:start; margin-top:.5rem;
}
.contact-split__head{ grid-column:1 / -1; }
.contact-card{
  background:var(--card-bg); border:1px solid var(--card-border);
  padding:1.75rem; position:sticky; top:6rem;
  box-shadow:var(--shadow-sheet);
}
.contact-card h3{
  margin:0 0 1.3rem; font-family:var(--serif); font-weight:500; font-size:1.15rem;
  color:var(--claret);
  padding-bottom:1rem; border-bottom:1px solid var(--rule);
}
.contact-card__rows{ margin:0; }
.contact-card__rows > div{ padding:1rem 0; border-bottom:1px solid var(--rule); }
.contact-card__rows > div:last-child{ padding-bottom:0; border-bottom:0; }
.contact-card__rows > div:first-child{ padding-top:0; }
.contact-card__rows dt{
  font-family:var(--sans); font-weight:700; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.07em; color:var(--ink-soft); margin-bottom:.4rem;
}
.contact-card__rows dd{ margin:0; font-family:var(--sans); font-size:.88rem; color:var(--ink); line-height:1.55; }
.contact-card__rows dd a{ color:var(--ink); }
.contact-card__note{ display:block; margin-top:.35rem; font-size:.8rem; color:var(--ink-soft); }
@media (max-width:860px){
  .contact-split{ grid-template-columns:1fr; }
  .contact-card{ position:static; }
}

/* ---- enquiry form: placeholder markup showing the intended field set —
   backend/service not yet decided. Sits in the left column of
   .contact-split, so its width is set by the grid column, not by max-width
   here. */
.enquiry-form__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0 2rem;
}
.field{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:1.6rem; }
.field label, .field__legend{
  font-family:var(--sans); font-weight:600; font-size:.82rem; color:var(--ink);
}
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="date"], .field select, .field textarea{
  font-family:var(--sans); font-size:.92rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule);
  padding:.65em .8em; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--claret); outline-offset:1px; border-color:var(--claret);
}
.field textarea{ resize:vertical; font-family:inherit; line-height:1.6; }
.radio-row{ display:flex; gap:1.75rem; }
.radio-row label{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--sans); font-weight:400; font-size:.9rem; color:var(--ink-soft);
}
.field--consent label{
  display:flex; align-items:flex-start; gap:.65rem;
  font-family:var(--sans); font-weight:400; font-size:.85rem; color:var(--ink-soft); line-height:1.5;
}
.field--consent input[type="checkbox"]{ margin-top:.2rem; flex:none; }
.field--consent a{ color:var(--claret); }
@media (max-width:560px){
  .enquiry-form__grid{ grid-template-columns:1fr; }
}

/* ---- statement-panel: a single full-width bordered box for a personal
   position statement. Two-tone halves so the perform / don't-perform
   contrast reads before the words do — a filled mark plus a faint tint
   on the "don't" side — with the closing line as a footer strip below
   both, not a third column. */
.page-prose__inner > .statement-panel{
  max-width:none; border:1px solid var(--card-border); margin-top:.5rem;
  background:var(--card-bg); box-shadow:var(--shadow-sheet);
}
.statement-panel .tone-grid{ display:grid; grid-template-columns:1fr 1fr; }
.statement-panel .stmt{ padding:2rem 2.35rem; }
.statement-panel .stmt--no{ background:rgba(110,43,47,.05); border-left:1px solid var(--rule); }
.statement-panel .stmt-mark{
  display:flex; align-items:center; justify-content:center;
  width:1.5rem; height:1.5rem; border-radius:50%; margin-bottom:1rem;
  font-family:var(--sans); font-size:.85rem; font-weight:700;
}
.statement-panel .stmt--yes .stmt-mark,
.statement-panel .stmt--no .stmt-mark{ background:transparent; border:2px solid var(--claret); color:var(--claret); }
.statement-panel p{ font-size:1rem; line-height:1.75; margin:0; }
.statement-panel .closing{
  margin:0; padding:1.5rem 2.35rem; background:var(--paper-2); border-top:1px solid var(--card-border);
  font-size:.92rem; line-height:1.65; color:var(--ink-soft);
}
@media (max-width:700px){
  .statement-panel .tone-grid{ grid-template-columns:1fr; }
  .statement-panel .stmt--no{ border-left:0; border-top:1px solid var(--rule); }
}

/* ---- lang-card: the two flags sit above the card as their own row,
   enlarged, rather than inline with the title text. */
.lang-flags{ display:flex; gap:1rem; margin:0 0 3rem; }
.lang-card{ background:var(--card-bg); border:1px solid var(--card-border); box-shadow:var(--shadow-sheet); padding:2rem 2.1rem 1.9rem; margin-top:0; }
.lang-card__title{
  font-family:var(--serif); font-weight:500; font-size:1.5rem; color:var(--claret); margin:0 0 1.25rem;
}
.lang-card__flag{
  display:inline-block; flex:none; width:5.4rem; height:2.7rem;
  overflow:hidden;
}
.lang-card__flag svg{ display:block; width:100%; height:100%; }
.lang-card p:last-child{ margin:0; font-family:var(--sans); font-size:1rem; color:var(--ink-soft); line-height:1.65; }
.page-prose__inner:has(#languages-h){ text-align:center; }
.page-prose__inner:has(#languages-h) > .section-eyebrow,
.page-prose__inner:has(#languages-h) > h2{ width:fit-content; margin-inline:auto; }
.page-prose__inner:has(#languages-h) > .lang-flags{ justify-content:center; margin-inline:auto; }
.page-prose__inner:has(#languages-h) > .lang-card{ margin-inline:auto; text-align:left; }
.page-prose__inner:has(#languages-h) .lang-card__title{ text-align:center; }
.page-prose__inner:has(#training-h){ text-align:center; }
.page-prose__inner:has(#training-h) > .section-eyebrow,
.page-prose__inner:has(#training-h) > h2{ width:fit-content; margin-inline:auto; }
.page-prose__inner:has(#training-h) > .fact-list{ margin-inline:auto; text-align:left; }
.indemnity-split p{ font-size:.92rem; line-height:1.7; }
@media (max-width:700px){
  .indemnity-split{ grid-template-columns:1fr; gap:2rem; }
  .indemnity-split > div:first-child{ padding-right:0; }
  .indemnity-split > div + div{ border-left:0; border-top:1px solid var(--rule); padding-left:0; padding-top:2rem; }
}

/* below the point a 6-across row would wrap into an untidy grid, switch
   the axis to run vertically instead — one line down the left, each item
   stacked beneath the last, rather than a ragged wrap of horizontal
   segments. 860px so real tablets in portrait (iPad ~768px) get the
   vertical layout too, not just phones — matches the other 2-to-1-column
   breakpoints already used in this file (820/840/900). */
@media (max-width:860px){
  .stat-row{ flex-direction:column; row-gap:0; }
  .stat-row__item{
    padding:0 0 1.75rem 1.75rem;
    border-top:0;
    border-left:1px solid var(--rule);
  }
  .stat-row__item:first-child{ padding-left:1.75rem; }
  .stat-row__item:last-child{ padding-bottom:0; border-left-color:transparent; }
  .stat-row__mark{ top:-.28rem; left:-.31rem; }
  .stat-row__item--hero{ border-left-color:var(--claret); border-left-width:2px; border-top:0; }
  .stat-row__item--hero .stat-row__mark{ left:-.36rem; }
}

/* ---- fee card: a published rate schedule, grouped by stage ---- */
.fee-card{ background:var(--card-bg); border:1px solid var(--card-border); margin:1.5rem 0 0; }
.fee-card__head{
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.5rem 1.5rem;
  padding:1.1rem 1.6rem; border-bottom:1px solid var(--card-border);
  font-family:var(--sans);
}
.fee-card__head b{ font-size:.8rem; letter-spacing:.02em; color:var(--claret); }
.fee-card__head span{ font-size:.68rem; color:var(--ink-soft); }

.fee-group{ border-top:1px solid var(--rule); }
.fee-group:first-of-type{ border-top:0; }
.fee-group__label{
  font-family:var(--sans); font-weight:700; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--claret);
  padding:1.1rem 1.6rem .3rem;
}
.fee-group:first-of-type .fee-group__label{ padding-top:.9rem; }

.fee-row{ display:grid; grid-template-columns:1fr auto; gap:.2rem 1.5rem; padding:1rem 1.6rem; align-items:baseline; }
.fee-row__name{ font-family:var(--serif); font-size:1.05rem; color:var(--claret); }
.fee-row__fee{ font-family:var(--sans); font-weight:700; font-size:1.05rem; font-variant-numeric:tabular-nums; color:var(--claret); text-align:right; white-space:nowrap; }
.fee-row__fee.is-free{ color:var(--ink); }
.fee-row__includes{ grid-column:1/-1; font-family:var(--sans); font-size:.84rem; color:var(--ink-soft); margin-top:.15rem; }

.fee-card__foot{ padding:1.1rem 1.6rem; background:var(--paper-2); border-top:1px solid var(--card-border); font-family:var(--sans); font-size:.82rem; color:var(--ink-soft); }

@media (max-width:600px){
  .fee-row{ grid-template-columns:1fr; }
  .fee-row__fee{ text-align:left; }
}

@media (max-width:900px){
  .page-hero h1{ max-width:none; }
  .page-hero__inner:has(.page-hero__stand){
    display:flex; flex-direction:column; align-items:stretch; gap:1.75rem;
  }
  .page-hero__body{ display:contents; }
  .page-hero__inner:has(.page-hero__stand) .page-hero__stand{ order:2; }
  .page-hero__inner:has(.page-hero__stand) .page-hero__actions{ order:3; }
}

/* ---- rate rows: same name/fee proportions as .fee-row, but plain
   ruled lines with no card box — for schedules that don't need the
   panel treatment ---- */
.rate-rows{ margin:1.5rem 0 0; }
.rate-row{
  display:grid; grid-template-columns:1fr auto; gap:.2rem 1.5rem;
  padding:1rem 0; border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.rate-row:first-child{ border-top:1px solid var(--rule); }
.rate-row__name{ font-family:var(--serif); font-size:1.05rem; color:var(--ink); }
.rate-row__fee{
  font-family:var(--sans); font-weight:700; font-size:1.05rem;
  font-variant-numeric:tabular-nums; color:var(--claret);
  text-align:right; white-space:nowrap;
}
@media (max-width:600px){
  .rate-row{ grid-template-columns:1fr; }
  .rate-row__fee{ text-align:left; }
}

/* ---- scope: full-bleed panel band, breaks up a column of plain
   page-prose sections the same way .merits does on the homepage ---- */
.section.scope{
  max-width:none; margin:0; padding:clamp(5rem, 9vw, 8rem) 0;
  background:var(--panel);
  border-top:0; border-bottom:1px solid var(--rule);
}
.scope__inner{ max-width:var(--page); margin-inline:auto; padding-inline:var(--gutter); }
.section.scope h2{
  margin:0 0 48px;
  font-weight:400; font-size:clamp(1.75rem, 1.4rem + 1.75vw, 2.333rem); line-height:1.16;
  letter-spacing:-0.003em; text-wrap:balance; color:var(--ink);
}
.scope__intro{ margin:0 0 2rem; max-width:56ch; color:var(--ink-soft); }
.scope .doc-groups{ background:var(--card-border); border:1px solid var(--card-border); }
.scope .doc-group{ background:var(--card-bg); }
.scope .doc-group h5{
  font-family:var(--serif); font-weight:500; font-size:1.5rem;
  text-transform:none; letter-spacing:0; color:var(--claret);
  margin:0 0 1.1rem; padding-bottom:.85rem; border-bottom:1px solid var(--claret);
}

/* ============================================================
   TEMP baseline — sections below the hero and the footer are not
   yet designed. This keeps them readable; each gets its own
   treatment in a later pass.
   ============================================================ */
main > .section{
  max-width:768px;
  margin-inline:auto;
  padding:2.75rem var(--gutter);
  border-top:1px solid var(--rule);
}
main > .section.specialty-map,
main > .section.areas,
main > .section.final-cta{
  max-width:none;
  border-top:0;
  padding:0;
}
.section h2{
  font-weight:400; text-wrap:balance;
  font-size:clamp(1.75rem, 1.4rem + 1.75vw, 2.333rem); line-height:1.16; letter-spacing:-0.003em;
  margin:0 0 48px;
}
.section h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.15rem, 1.05rem + .4vw, 1.3rem); margin:1.6rem 0 .35rem; }
h3.areas__cat-label{
  font-family:var(--serif); font-weight:400;
  font-size:1.15rem; color:var(--ink); margin:2rem 0 .75rem;
}
.cta-link{
  font-family:var(--sans); font-weight:600; font-size:.9rem;
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--claret); padding-bottom:.12rem;
}
.areas-grid,
.steps{ list-style:none; padding-left:0; }
.areas-grid{ display:grid; gap:1.25rem 2rem; }
@media (min-width:620px){ .areas-grid{ grid-template-columns:1fr 1fr; } }
.steps{ counter-reset:step; display:grid; gap:1.25rem; }
.steps > li{ counter-increment:step; }
.steps > li h3::before{ content:counter(step) ". "; color:var(--ink-soft); }
.flag,
.c{ color:var(--flag); font-style:italic; }
blockquote{ margin:1.5rem 0; padding-left:1.25rem; border-left:2px solid var(--rule); }
blockquote cite{ display:block; margin-top:.5rem; font-style:normal; font-size:.9rem; color:var(--ink-soft); }

.site-footer{
  border-top:1px solid var(--rule);
  background:var(--paper);
  padding:3rem var(--gutter) 2rem;
  font-family:var(--sans); font-size:.85rem;
  color:var(--ink-soft);
}
.footer-cols{
  display:grid; gap:2rem 3rem;
  max-width:var(--page); margin-inline:auto;
}
@media (min-width:900px){
  .footer-cols{ grid-template-columns:15rem repeat(3, 1fr); }
  .footer-sig{ padding-right:2rem; border-right:1px solid var(--rule); }
}
.footer-sig__photo{
  display:block; width:4.5rem; height:4.5rem;
  border-radius:50%; object-fit:cover; object-position:top center;
  margin-bottom:1rem;
}
.footer-sig__name{
  font-family:var(--serif); font-weight:500;
  font-size:1.15rem; color:var(--ink); margin:0 0 .6rem;
}
.footer-sig__bio{
  font-family:var(--sans); font-size:.82rem; line-height:1.6;
  color:var(--ink-soft); margin:0; max-width:26ch;
}
.site-footer h2{
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--ink); margin:0 0 .7rem;
}
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.35rem; }
.site-footer a{ color:var(--ink-soft); text-decoration:none; }
.site-footer a:hover{ color:var(--ink); }
.footer-legal{
  max-width:var(--page); margin:2rem auto 0;
  padding-top:1.25rem; border-top:1px solid var(--rule);
  font-size:.78rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:.75rem 1.5rem;
}
.footer-legal p{ margin:0; }
@media (max-width:600px){
  .footer-legal{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}

/* ---- mobile text alignment: sections centred on desktop go back to
   left-aligned on small screens — centred paragraphs read worse as
   line count grows, which is exactly what happens as the viewport
   narrows. Only text-align changes; layout (grid/flex centering of
   whole blocks) is untouched. ---- */
@media (max-width:640px){
  .page-prose__inner{ text-align:left !important; }
  .page-prose__inner .chip-field,
  .page-prose__inner .qa-switch,
  .page-prose__inner .num-sequence{ justify-content:flex-start !important; }
  .page-prose__inner > .section-eyebrow,
  .page-prose__inner > h2,
  .page-prose__inner > p,
  .page-prose__inner .lang-card__title{
    width:auto !important; margin-inline:0 !important;
  }
}