/* ==========================================================================
   EcoVerify Ltd — site stylesheet. Midlands Code Lab.
   Palette sampled from the client's own logo file (EcoVerify Square Logo.jpg):
     #13271c  dark green ground of the logo tile   (Steve: "not black")
     #0cd8a3  the medal mark
     #ffffff  the wordmark
   Action colour on their live Squarespace site: hsl(163.09,49.55%,43.53%) = #38a687
   Typefaces are self-hosted and base64'd into css/fonts.css.
   ========================================================================== */

/* Design tokens (colours, type scale, header height, logo size, CTA shape)
   live in css/tokens.css, which every page links BEFORE this file. Do not
   redeclare them here — that is how the home page and these pages drifted
   apart in the first place. */

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip;max-width:100%}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

/* headings: size and tracking do the work, not weight */
h1,h2,h3,h4{
  font-family:var(--font-disp);
  font-weight:500;
  margin:0;
  text-wrap:balance;
}
h1{font-size:var(--t-h1);line-height:1.02;letter-spacing:-.032em}
h2{font-size:var(--t-h2);line-height:1.08;letter-spacing:-.026em}
h3{font-size:var(--t-h3);line-height:1.16;letter-spacing:-.018em}
h4{font-size:var(--t-body);line-height:1.3;letter-spacing:-.012em}

/* --- body-copy resets. Keep these ABOVE the heading-adjacency rules below. --- */
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.05em}

/* ⚠️ ORDER-SENSITIVE. Headings carry no margin-bottom by design; the gap is put on
   the element AFTER them. But `p{margin:0 0 1.05em}` and `ul,ol{margin:0 0 1.05em}`
   are shorthands that reset margin-top to 0, and every one of these selectors is
   specificity 0,0,1 - so whichever is written LAST wins. These three lived above
   the resets, which silently flattened the gap under every heading followed by a
   bare <p> (all pages) or a <ul> (privacy.html's "Topics:"). Headings rendered
   jammed against their first line. Spotted by Chris on review-call.html,
   14/09/2026. Same failure mode as the .panel-cta rule further down: equal weight,
   source order decides. If you add another body-copy reset, put it ABOVE this
   block, then re-measure a heading-then-paragraph and a heading-then-list. */
h2 + *{margin-top:24px}
h3 + *{margin-top:14px}
h4 + *{margin-top:8px}

a{color:var(--medal-ink);text-decoration:none;touch-action:manipulation}

/* underline-wipe — kept for links inside prose and for the contact links only.
   Navigation uses .navrule below. Concept A still uses the wipe everywhere, so
   the two can be compared side by side. */
.wipe{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 1px;
  transition:background-size .28s var(--ease);
  padding-bottom:2px;
}
.wipe:hover,.wipe:focus-visible{background-size:100% 1px}

/* ---------- navigation links ----------------------------------------------
   Pattern library §13, variant 7: the rule thickens in place. Chosen for this
   concept because the whole page is already built out of hairline rules —
   sections, the ladder, the fees list, the FAQ — so the nav borrows that
   vocabulary instead of introducing a travelling one.

   ⚠️ The kit version reserves the rule's space with padding-bottom. That is
   wrong for a retrofit into a vertically-centred header: adding padding to a
   flex item with align-items:center lifts the label off centre. Here the rule
   is hung BELOW the box with a negative offset instead, so the anchor's box
   never changes size and nothing re-centres. Zero layout shift either way.

   It needs no @media(hover:none) block: the resting rule and the current-page
   rule are both already visible without a pointer.
   -------------------------------------------------------------------------- */
.navrule{position:relative;display:inline-block}
.navrule::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(0px - var(--nr-gap,6px));
  height:1px;background:var(--nr-rest,rgba(169,188,177,.45));
  transition:height .18s var(--ease),background-color .18s var(--ease);
}
.navrule:hover::after,
.navrule:focus-visible::after,
.navrule[aria-current="page"]::after{height:3px;background:var(--medal)}
.navrule:hover,.navrule:focus-visible{color:var(--medal)}

/* in body copy, links are underlined at rest — this is a document, not an app */
.doc a:not(.btn):not(.rl){
  border-bottom:1px solid rgba(10,107,83,.4);
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.doc a:not(.btn):not(.rl):hover{border-bottom-color:var(--medal-ink);background:rgba(12,216,163,.16)}

/* on the dark panels the link colour has to switch, or it drops to 2.4:1 */
.limits a:not(.btn),.cta a:not(.btn),.fact a:not(.btn),.booked a:not(.btn){color:var(--medal)}
.doc .limits a:not(.btn),.doc .cta a:not(.btn),
.doc .fact a:not(.btn),.doc .booked a:not(.btn){border-bottom-color:rgba(12,216,163,.5)}
.doc .limits a:not(.btn):hover,.doc .cta a:not(.btn):hover,
.doc .fact a:not(.btn):hover,.doc .booked a:not(.btn):hover{
  border-bottom-color:var(--medal);background:rgba(12,216,163,.18)}

:focus-visible{outline:2px solid var(--medal-ink);outline-offset:3px;border-radius:2px}
.foot :focus-visible,.limits :focus-visible,
.cta :focus-visible,.fact :focus-visible,.booked :focus-visible{outline-color:var(--medal)}
/* Header focus ring: was --medal (0x08D8A0), which was 1.63:1 on the header's new
   green background (#38A687) — fails WCAG 2.4.11's 3:1 minimum for focus indicators.
   --ink is 5.61:1 on that green, so keyboard-tabbing through the header nav/menu/CTA
   is actually visible. Caught 14/09 during the quality-floor pass, after the header
   recolour from dark to green made the old override wrong. */
.hdr :focus-visible{outline-color:var(--ink)}
.hdr .mnav-panel :where(a,button):focus-visible{outline-color:var(--medal)} /* the open Menu panel is dark; ink would vanish there */

button,summary,input,select,textarea,label{font:inherit;touch-action:manipulation}
summary{cursor:pointer}
img{max-width:100%;height:auto;display:block}

/* ---------- concept ribbon ---------- */
.ribbon{
  /* margin:0 is load-bearing. The ribbon is a <p>, so without it the element picks
     up p{margin:0 0 1.05em} and drops a 14px strip of --paper between the amber bar
     and the green header — a white line across the top of all eight inner pages.
     The home page never showed it because its own reset is p{margin:0}. Spotted by
     Chris 14/09/2026. */
  margin:0;
  background:var(--amber);color:#1A1206;
  font-family:var(--font-disp);font-size:13px;line-height:1.4;font-weight:600;
  letter-spacing:.005em;text-align:center;padding:9px 16px;
}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:12px;top:-64px;z-index:90;
  background:var(--ink);color:var(--on-ink);
  padding:10px 16px;border-radius:4px;font-size:var(--t-sm);
  transition:top .18s var(--ease);
}
.skip:focus{top:12px}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:var(--action);color:var(--ink);
}
.hdr-in{
  max-width:var(--shell-max);margin:0 auto;padding:0 var(--shell-pad);
  min-height:var(--head-h);
  display:flex;align-items:center;gap:var(--hdr-gap);
}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;color:var(--ink)}
/* ⚠️ LOGO — the client's real mark, from their live Squarespace header
   (EcoVerify Square Logo.jpg, 592×599), re-encoded to webp. Square tile:
   dark green ground, teal medal, white wordmark.
   TO SWAP: replace assets/logo-ecoverify-512/-256.webp, keep the ratio.
   🚨 Since 14/09/2026 this mark is the ONLY brand element in the header —
   Steve asked for the "EcoVerify / EcoVadis consultancy" type beside it to be
   removed (font mismatch with the logo, duplicated in the nav, and he does not
   want "Leicester" shown at the top of the page). So the sizing here is not
   cosmetic: it must stay identical to .brand img in option-b-dark.html, or the
   two pages read as different sites. Size and radius come from css/tokens.css
   (--logo-w / --logo-w-sm / --logo-r), which the home page consumes too.
   ⚠️ The home page loads assets/logo-256.webp (253×256) and these pages load
   pages/assets/logo-ecoverify-256.webp (256×259). Near-identical artwork, very
   slightly different padding. Worth consolidating to one file at go-live. */
.brand img{width:var(--logo-w);height:auto;border-radius:var(--logo-r);flex:0 0 auto}
@media(max-width:640px){.brand img{width:var(--logo-w-sm)}}
.brand .bt{display:block}
.brand b{
  font-family:var(--font-disp);font-weight:500;font-size:19px;
  letter-spacing:-.02em;line-height:1.3;display:block;
}
.brand .bt span{display:block;font-family:var(--font-body);font-size:var(--t-xs);
  letter-spacing:.02em;color:var(--ink-2);margin-top:2px;line-height:1.35}

/* Nav sits BESIDE the logo, not hard right — see the matching note in
   option-b-dark.html. It used to be margin-left:auto, which stranded the logo
   alone on the left once the wordmark beside it was removed. The CTA below
   takes the remaining space so the two pages read identically. */
/* Nav CENTRED — see the matching note in option-b-dark.html for why. The auto
   margins on both sides do the centring; do not reintroduce margin-left:auto on
   the CTA at full width or the nav shunts left again. */
.hdr nav.main{display:flex;align-items:center;gap:var(--nav-gap);margin-left:auto;margin-right:auto}
.hdr .hdr-cta{flex:0 0 auto}

/* True optical centring. Auto margins alone put the nav 20-34px LEFT of centre,
   because they centre it in the space LEFT OVER after the logo and the button, and
   the button is wider than the logo. A 1fr/auto/1fr grid centres it in the BAR
   instead, so both sides are equal whatever the button says. Only applied at
   >=1180px, where exactly three things are visible - below that the nav is hidden
   and the hamburger appears, so the grid would mis-assign the columns. */
@media(min-width:1180px){
  .hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .hdr-in .brand{justify-self:start}
  .hdr-in nav.main{margin:0}
  .hdr-in .hdr-cta{justify-self:end}
}
.hdr nav.main a{color:var(--ink-2);font-size:var(--t-sm);letter-spacing:-.004em}
.hdr nav.main a[aria-current="page"]{color:var(--ink)}

/* ---- header nav interaction: the home page's wipe, not .navrule's thicken ----
   `.navrule` still supplies the resting hairline in the FOOTER, where a dark rule
   would be invisible. In the header these override it: ::before is the resting
   hairline that retracts right, ::after is the heavier rule that draws in left,
   handing over on a .22s delay. Colours come from tokens.css so this and
   option-b-dark.html cannot drift apart again — they did, and the client noticed
   the animation AND the colour were different between the two (14/09/2026).
   Specificity note: these are 0,3,2 and beat `.navrule::after` at 0,1,1 and
   `.navrule:hover::after` at 0,2,1 on weight, not source order. */
.hdr nav.main a.navrule{padding-bottom:8px;margin-bottom:-8px;
  transition:color .2s var(--ease)}
.hdr nav.main a.navrule::before,
.hdr nav.main a.navrule::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  transition:transform .26s var(--ease);
}
.hdr nav.main a.navrule::before{height:1px;background:var(--nav-rule-rest);
  transform-origin:100% 50%;transition-delay:.22s}
.hdr nav.main a.navrule::after{height:2px;background:var(--nav-rule-draw);
  transform:scaleX(0);transform-origin:0 50%;transition-delay:0s}
.hdr nav.main a.navrule:hover::before,
.hdr nav.main a.navrule:focus-visible::before{transform:scaleX(0);transition-delay:0s}
.hdr nav.main a.navrule:hover::after,
.hdr nav.main a.navrule:focus-visible::after{transform:scaleX(1);transition-delay:.22s}
.hdr nav.main a.navrule:hover,
.hdr nav.main a.navrule:focus-visible{color:var(--nav-hover-color)}
.hdr nav.main a.navrule[aria-current="page"]{color:var(--nav-hover-color)}
@media(hover:none){
  .hdr nav.main a.navrule[aria-current="page"]::before{transform:scaleX(0)}
  .hdr nav.main a.navrule[aria-current="page"]::after{transform:scaleX(1)}
}
/* ⚠️ `.hdr nav.main a` is 0,2,1 and out-specifies `.navrule:hover` at 0,2,0, so
   the hover colour silently never applied in the header. Restate it here. Same
   class of bug as `.on-dark a{}` beating `.btn`. */
.hdr nav.main a.navrule:hover,
.hdr nav.main a.navrule:focus-visible{color:var(--ink)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--medal);color:#0b2119;
  font-size:var(--t-sm);font-weight:var(--cta-weight);letter-spacing:var(--cta-ls);
  padding:var(--cta-pad);border-radius:var(--cta-radius);border:var(--cta-border);
  transition:transform .18s var(--ease),background-color .18s var(--ease);
  text-align:center;cursor:pointer;
}
.btn:hover{background:#26e9b6;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--paper-3)}
.btn.ghost:hover{background:var(--paper-2);border-color:var(--muted)}
.on-ink-btn.ghost{color:var(--on-ink);border-color:rgba(169,188,177,.45)}
.on-ink-btn.ghost:hover{background:rgba(169,188,177,.14)}
.btn.big{font-size:var(--t-body);padding:var(--cta-pad-big)}

/* header sits on --action green: default .btn (mint-on-ink) has poor contrast
   there, so scope a dark-ink-on-green variant to the header only — same fix
   already verified on option-b-dark.html. The .btn elsewhere is untouched. */
.hdr .btn{background:var(--ink);color:var(--on-ink)}
.hdr .btn:hover{background:var(--ink-deep)}

/* mobile menu — a real <details>, no dead buttons, works with JS off.
   16/09/2026: SAME compact dropdown as the home page (.mnav in index.html), chosen by
   Chris over the old full-width sheet so every page opens the same menu.
   If you restyle one, restyle both. */
.hdr .mnav{position:relative}
.hdr .mnav>summary{
  list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-size:var(--t-sm);color:var(--ink);
  border:1px solid rgba(16,32,24,.35);border-radius:4px;padding:9px 14px;
}
.hdr .mnav>summary::-webkit-details-marker{display:none}
.hdr .mnav>summary::after{content:"";width:9px;height:9px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s var(--ease)}
.hdr .mnav[open]>summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.hdr .mnav[open]>summary{border-color:var(--ink)}
.hdr .mnav-panel{
  position:absolute;right:0;top:calc(100% + 14px);z-index:50;
  background:var(--ink-2);border:1px solid rgba(220,230,224,.32);border-radius:10px;
  padding:8px;min-width:250px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.hdr .mnav-panel a{
  display:block;text-decoration:none;color:#DCE6E0;
  font-family:var(--font-disp);font-size:16px;line-height:1.4;
  padding:12px 14px;border-radius:7px;touch-action:manipulation;
}
.hdr .mnav-panel a.panel-cta{display:flex;width:100%;justify-content:center;margin-bottom:18px;
  padding:var(--cta-pad);line-height:var(--lh-body);background:var(--ink);color:var(--on-ink);border:1px solid var(--medal);
  border-radius:var(--cta-radius);font-family:var(--font-body);font-size:var(--t-sm);
  font-weight:var(--cta-weight)}
.hdr .mnav-panel a.panel-cta:hover{background:var(--ink-deep);color:var(--on-ink);transform:none}
.hdr .mnav-panel a[aria-current="page"]{color:var(--medal)}
.hdr .mnav-panel a:not(.panel-cta):hover{background:rgba(255,255,255,.06);color:#fff}


/* reading progress — decorative, sits on the header's bottom edge */
.prog{position:absolute;left:0;bottom:0;height:2px;background:var(--ink);
  width:var(--prog,0%);transition:width .12s linear}

/* ---------- page shell ---------- */
.shell{max-width:var(--shell-max);margin:0 auto;padding:0 var(--shell-pad)}
/* a page with no contents rail still keeps the text column and the margin
   column at the same widths — it just doesn't need 1300px to hold them */
.shell:not(.doc-shell){max-width:1060px}
.foot .shell{max-width:var(--shell-max)}

/* ---------- the contents rail (desktop signature) ---------- */
.rail{display:none}

/* ---------- the document ---------- */
.doc{padding:0 0 8px}
.sec{padding:56px 0;border-top:1px solid var(--paper-3)}
.sec.first{border-top:0;padding-top:44px}
.lead{font-family:var(--font-body);font-size:var(--t-lead);line-height:1.34;
  letter-spacing:-.012em;color:var(--text)}
.small{font-size:var(--t-sm);line-height:1.5;color:var(--muted)}
.meta{font-size:var(--t-xs);line-height:1.45;letter-spacing:.01em;color:var(--faint)}
.rule-list{list-style:none;padding:0;margin:22px 0 0}
.rule-list li{border-top:1px solid var(--paper-3);padding:14px 0}
.rule-list li:last-child{border-bottom:1px solid var(--paper-3)}
.rule-list b{font-weight:500}

/* margin notes — folded inline below 1180px */
.note{
  font-size:var(--t-sm);line-height:1.5;color:var(--muted);
  border-left:2px solid var(--medal);padding-left:16px;
  margin:22px 0 24px;max-width:52ch;
}
.note b{font-weight:500;color:var(--text)}

/* the display line — the sentence the page is built around */
.disp{
  font-family:var(--font-disp);font-weight:400;
  font-size:var(--t-disp);line-height:1.14;letter-spacing:-.026em;
  margin:36px 0;max-width:22ch;
}

/* one hard fact, pulled out */
.fact{
  background:var(--ink);color:var(--on-ink);
  padding:32px 26px;border-radius:6px;margin:30px 0;
}
.fact p{font-family:var(--font-body);font-size:var(--t-lead);line-height:1.3;
  letter-spacing:-.014em;margin:0}
.fact .meta{color:var(--on-ink-mut);margin-top:16px}

/* ---------- the medal ladder ---------- */
.ladder{margin:26px 0 0;padding:0;list-style:none}
.ladder li{
  display:grid;grid-template-columns:1fr auto;
  align-items:baseline;gap:6px 14px;
  padding:13px 0;border-top:1px solid var(--paper-3);
}
.ladder li:last-child{border-bottom:1px solid var(--paper-3)}
.ladder .m{font-family:var(--font-disp);font-size:var(--t-h3);letter-spacing:-.018em;line-height:1.3}
.ladder .track{display:block;height:12px;background:var(--paper-2);border-radius:2px;
  grid-column:1/-1;margin-top:4px}
.ladder .track i{display:block;height:100%;background:var(--medal);border-radius:2px;min-width:5px}
.ladder .pc{font-size:var(--t-sm);color:var(--muted);font-variant-numeric:tabular-nums}
@media(min-width:640px){
  .ladder li{grid-template-columns:150px 1fr 120px}
  .ladder .track{grid-column:2;margin-top:0}
  .ladder .pc{grid-column:3;text-align:right}
}

/* ---------- stage list (Assess / Complete / Review) ---------- */
.stages{list-style:none;margin:26px 0 0;padding:0}
.stages li{padding:24px 0;border-top:1px solid var(--paper-3)}
.stages li:last-child{border-bottom:1px solid var(--paper-3)}
.stages p{margin-top:12px}
/* A heading straight after a .stages list sat on its bottom rule with 0px gap
   (other-services.html, six places, 14/09/2026). */
.doc .stages + h2{margin-top:44px}
.doc .stages + h3,.doc .stages + h4{margin-top:36px}
/* A bulleted list INSIDE a step (Scope 1/2/3, Environmental/Social/Economic)
   inherited the step rules: hollow bullets, a rule under every bullet and a
   stray empty ruled row at the end. Plain disc list, no rules. */
.stages li ul{list-style:disc;margin:12px 0 0;padding-left:24px}
.stages li ul li{padding:5px 0;border:0}
.stages li ul li:last-child{border-bottom:0}

/* ---------- what we won't do ---------- */
.limits{background:var(--ink);color:var(--on-ink);border-radius:6px;padding:34px 24px}
.limits h2{color:var(--on-ink)}
.limits ul{list-style:none;margin:24px 0 0;padding:0}
.limits li{border-top:1px solid rgba(169,188,177,.24);padding:18px 0 18px 22px;position:relative}
.limits li:first-child{border-top:0;padding-top:0}
.limits li::before{content:"";position:absolute;left:0;top:26px;width:10px;height:2px;background:var(--medal)}
.limits li:first-child::before{top:13px}
.limits b{font-weight:500;color:var(--medal);display:block;margin-bottom:6px;
  font-family:var(--font-disp);font-size:var(--t-body);letter-spacing:-.012em}
.limits .small{color:var(--on-ink-mut)}
.limits a{color:var(--medal)}

/* ---------- fees ---------- */
.fees{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--paper-3)}
.fees li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;
  padding:16px 0;border-bottom:1px solid var(--paper-3)}
.fees .band{flex:1 1 190px}
.fees .amt{font-family:var(--font-disp);font-size:var(--t-h3);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.3}

/* "+ VAT" suffix on every fee. Steve confirmed by e-mail 14/09/2026: the higher
   set is correct AND the prices must state + VAT. Kept small and muted so the
   figure still reads first. */
.fees .amt .vat{display:block;font-family:var(--font-body);
  font-size:13px;font-weight:400;letter-spacing:0;opacity:.72;margin-top:2px}
.fees .amt.words{font-family:var(--font-body);font-size:var(--t-sm);letter-spacing:0;color:var(--muted)}
/* ---------- testimonials (no carousel, all four on the page) ---------- */
.quotes{display:grid;gap:20px;margin-top:24px;list-style:none;padding:0}
@media(min-width:820px){.quotes{grid-template-columns:1fr 1fr;gap:20px 28px}}
.quote{background:var(--paper-2);border-radius:6px;padding:24px;margin:0}
.quote blockquote{margin:0;font-family:var(--font-body);font-size:var(--t-lead);
  line-height:1.3;letter-spacing:-.014em}
.quote figcaption{margin-top:14px;font-size:var(--t-sm);color:var(--muted)}
.quote figcaption b{display:block;color:var(--text);font-weight:500}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px;
  margin-top:24px;list-style:none;padding:0}
/* FIVE people. The column counts are chosen so the last row is never a single
   orphan: 5 across on desktop, 3+2 in the middle band, 2+2+1 on phones. Four
   columns is deliberately skipped — it gives 4+1, which reads as a mistake.
   🚨 The home page (.team-grid) and the About page (.people) MUST use the same
   breakpoints, or the team block reflows differently between the two pages.
   If the team size changes, revisit both. */
@media(min-width:560px){.people{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1180px){.people{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* 108px rendered, so a 216px source is exactly right at DPR 2. The client's
   own originals are 220x298 and there is nothing bigger to be had yet. */
.people img{width:100%;max-width:108px;height:auto;border-radius:5px;background:var(--paper-2);
  transition:transform .2s var(--ease)}
.people li:hover img{transform:translateY(-3px)}

/* placeholder slot for a team member with no photo yet — never invent a face */
.people-tbc .ph{
  display:flex;align-items:center;justify-content:center;text-align:center;
  width:100%;max-width:108px;aspect-ratio:216/270;border-radius:5px;
  border:1.5px dashed var(--paper-3);background:var(--paper-2);
  font-size:var(--t-xs);color:var(--faint);padding:8px;
}
.people-tbc span:last-child{color:var(--faint);font-style:italic}
.people b{display:block;margin-top:12px;font-weight:500;font-size:var(--t-sm)}
.people span{display:block;font-size:var(--t-xs);color:var(--faint);margin-top:3px}

/* ---------- FAQ ---------- */
.faq{margin-top:24px;border-top:1px solid var(--paper-3)}
.faq details{border-bottom:1px solid var(--paper-3)}
.faq summary{
  list-style:none;padding:18px 36px 18px 0;position:relative;
  font-family:var(--font-disp);font-size:var(--t-h3);line-height:1.2;
  letter-spacing:-.018em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:7px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--medal-ink);border-bottom:1.5px solid var(--medal-ink);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 0 22px;max-width:66ch}

/* ---------- closing CTA ---------- */
.cta{background:var(--ink);color:var(--on-ink);border-radius:6px;padding:40px 26px;margin-top:8px}
.cta h2{color:var(--on-ink)}
/* The panel's heading sits 18px off its first line, tighter than the document's
   24px. This was `<p style="margin-top:18px">` pasted into six pages; now one
   rule. It is 0,1,1 so it beats both `p{margin:0 0 1.05em}` and `h2 + *` (0,0,1)
   on weight, not on position — the ORDER-SENSITIVE block near the top of this
   file is about the 0,0,1 rules only. */
.cta h2 + *{margin-top:18px}
.cta .small{color:var(--on-ink-mut)}
.cta .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- form ---------- */
.form{margin-top:26px;max-width:33rem}
.field{margin-bottom:18px}
.field label{display:block;font-size:var(--t-sm);color:var(--muted);margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;padding:12px 14px;border:1px solid var(--paper-3);border-radius:4px;
  background:#fff;color:var(--text);font-size:var(--t-sm);
}
.field textarea{min-height:118px;resize:vertical}
.field .hint{font-size:var(--t-xs);color:var(--faint);margin-top:6px}
.err{color:#8a1b10;font-size:var(--t-xs);margin-top:6px;display:none}
.field.bad input,.field.bad textarea,.field.bad select{border-color:#8a1b10}
.field.bad .err{display:block}
.booked{background:var(--ink);color:var(--on-ink);border-radius:6px;padding:26px;margin-top:24px}
.booked h3{color:var(--medal)}
.booked .small{color:var(--on-ink-mut)}
.booked[hidden]{display:none}

/* ---------- footer ---------- */
.foot{background:var(--ink-deep);color:var(--on-ink);margin-top:56px;padding:48px 0 40px}
.foot .cols{display:grid;gap:32px}
@media(min-width:760px){.foot .cols{grid-template-columns:1.4fr 1fr 1fr}}
.foot .hd5{margin:0 0 12px;font-family:var(--font-body);font-size:var(--t-xs);
  letter-spacing:.02em;color:var(--on-ink-mut);font-weight:500}
.foot a{color:var(--on-ink)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px;font-size:var(--t-sm)}
/* the footer rows sit closer together than the header, so the rule hangs less
   far — and six stacked hairlines read heavier than four on a wide bar, so the
   resting rule drops a step here.
   ⚠️ Set through a custom property, NOT as `.foot .navrule::after{background:…}`.
   That selector is 0,2,1 — exactly the same weight as `.navrule:hover::after` —
   and being later in the file it would have quietly won on hover too, leaving
   the footer links with a 3px rule in the resting colour. */
/* Footer links follow the home page's .ft a: nothing at rest, mint text and a
   mint underline on hover. These used to carry .navrule's permanent pale hairline,
   so the two footers read differently. The ::after is suppressed rather than the
   class removed from the markup, so the header's use of .navrule is unaffected. */
.foot .navrule::after{display:none}
.foot a{border-bottom:1px solid transparent;
  transition:color .18s var(--ease),border-color .18s var(--ease)}
.foot a:hover,.foot a:focus-visible{color:var(--medal);border-color:var(--medal)}
.foot .addr{font-size:var(--t-sm);line-height:1.6;color:var(--on-ink-mut)}
.foot .note-line{margin-top:34px;padding-top:22px;border-top:1px solid rgba(169,188,177,.22);
  font-size:var(--t-xs);line-height:1.65;color:var(--on-ink-mut);max-width:80ch}
.foot img.mark{width:var(--foot-logo-w);height:var(--foot-logo-h);border-radius:var(--logo-r);margin-bottom:14px}

/* ---------- scroll-reveal (scroll-margin-top only, never both) ---------- */
[id]{scroll-margin-top:88px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.on{opacity:1;transform:none}

/* ==========================================================================
   ≥1180px — the rail and the true margin column appear
   ========================================================================== */
@media(min-width:1180px){
  .doc-shell{display:grid;grid-template-columns:196px minmax(0,1fr);column-gap:52px}

  .rail{display:block;position:sticky;top:calc(var(--head-h) + 26px);align-self:start;
    max-height:calc(100svh - var(--head-h) - 52px);overflow:auto;padding:44px 0 40px}
  .rail .hd5{margin:0 0 14px;font-family:var(--font-body);font-style:italic;
    font-weight:400;font-size:var(--t-sm);color:var(--faint)}
  .rail ol,.rail ul{list-style:none;margin:0;padding:0}
  .rail li{margin:0}
  .rail .rl{
    display:block;position:relative;padding:7px 0 7px 15px;
    font-size:var(--t-sm);line-height:1.34;color:var(--muted);
    border-left:2px solid var(--paper-3);
    transition:color .2s var(--ease),border-color .2s var(--ease);
  }
  .rail .rl:hover{color:var(--text);border-left-color:var(--muted)}
  .rail .rl[aria-current="true"]{color:var(--text);border-left-color:var(--medal-ink)}
  .rail .grp{margin-top:26px;padding-top:20px;border-top:1px solid var(--paper-3)}

  /* the margin column: a note sits beside the paragraph it follows */
  .sec{display:grid;grid-template-columns:minmax(0,66ch) minmax(170px,250px);
    column-gap:44px;align-items:start}
  .sec>*{grid-column:1}
  .sec>.note{
    grid-column:2;align-self:start;margin:6px 0 0;
    font-size:var(--t-sm);max-width:none;
  }
  .sec>.full{grid-column:1/-1}
  .disp{max-width:20ch}
}

@media(min-width:1440px){
  .sec{column-gap:56px;grid-template-columns:minmax(0,66ch) minmax(200px,290px)}
}

/* ==========================================================================
   small screens
   ========================================================================== */
@media(max-width:1179px){
  .hdr nav.main{display:none}
  .hdr .hdr-cta{margin-left:auto}
  .hdr .mnav{display:block;margin-left:0}
}
@media(min-width:1180px){
  .hdr .mnav{display:none}
}
/* the header CTA is the first thing to go when the bar gets tight. It is
   repeated at the top of the disclosure panel and four times down the page. */
@media(max-width:899px){
  .hdr .hdr-cta{display:none}
  .hdr .mnav{margin-left:auto}
}
@media(max-width:759px){
  /* --head-h deliberately NOT reduced here: option-b-dark.html keeps a 77px
     header at phone widths too, and these must match. */
  [id]{scroll-margin-top:88px}
  .sec{padding:44px 0}
  .sec.first{padding-top:34px}
  .fact,.limits,.cta{padding-left:20px;padding-right:20px}
  .quote{padding:20px}
  .foot{padding:40px 0 34px}
}

/* ==========================================================================
   motion, globally opt-out-able
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    /* transition-delay matters as much as duration here — the header nav wipe
       hands over on a .22s delay, and without this line that delay survived
       reduced-motion on these pages while the home page cancelled it. */
    transition-duration:.001ms!important;transition-delay:0ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important}
  .prog{transition:none}
  .btn:hover{transform:none}
  .people li:hover img{transform:none}
}

/* very narrow phones: the strapline goes before anything else does */
@media(max-width:359px){
  .brand .bt span{display:none}
}

/* ---------- client logo grid (About; carried over from his live About page 16/09/2026) ----------
   Static on purpose: no motion, so no pause control needed. */
.logo-grid{list-style:none;margin:26px 0 0;padding:clamp(22px,3vw,34px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px 44px;background:#fff;border:1px solid var(--paper-3);border-radius:6px}
.logo-grid li{flex:0 0 auto}
.logo-grid img{display:block;max-width:100%;height:auto}
.logo-grid + .quotes{margin-top:36px}
@media(max-width:640px){.logo-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 18px;justify-items:center}
  .logo-grid img{max-width:min(100%,140px)!important;max-height:56px;width:auto!important;height:auto!important}}

/* ---------- Insights posts, Insights index, Partners (added 16/09/2026) ---------- */
.byline{margin-top:18px;font-size:var(--t-sm);color:var(--muted)}
.hero-img{margin-top:30px;width:100%;height:auto;border:1px solid var(--paper-3);border-radius:6px;background:#fff}
.prose{overflow-wrap:break-word}
.prose-body{max-width:66ch}
.prose h2{font-size:var(--t-h3);margin-top:1.9em}
.prose h3{font-size:calc(var(--t-body) * 1.2);margin-top:1.6em}
.prose .prose-body > :first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 1.05em;padding-left:1.35em}
.prose li{margin:0 0 .55em}
.prose li p{margin:0}
.prose figure{margin:26px 0}
.prose img{max-width:100%;height:auto;border:1px solid var(--paper-3);border-radius:4px;background:#fff;margin:22px 0}
.prose figure img{margin:0}
.prose figcaption{margin-top:8px;font-size:var(--t-sm);color:var(--muted)}
.more-list{list-style:none;margin:20px 0 0;padding:0}
.more-list li{padding:12px 0;border-top:1px solid var(--paper-3)}
.more-list li:last-child{border-bottom:1px solid var(--paper-3)}
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:40px 32px}
@media(min-width:760px){.post-list{grid-template-columns:1fr 1fr}}
.post-card a{display:block;color:inherit}
.post-card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--paper-3);border-radius:6px;background:#fff;transition:transform .3s var(--ease)}
.post-card a:hover img{transform:translateY(-3px)}
.post-card .meta{margin:16px 0 0}
.post-card h2{font-size:var(--t-h3);margin-top:8px}
.post-card h2 + p{margin-top:10px;color:var(--muted)}
.partner-logo{display:inline-block;max-width:320px}
.partner-logo img{width:100%;height:auto}
.partner figure{margin:26px 0 0}
.partner figure img,.partner-pair img{width:100%;height:auto;border-radius:6px}
.partner-pair{display:grid;gap:24px;margin-top:26px;align-items:start}
@media(min-width:760px){.partner-pair{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.post-card img{transition:none}.post-card a:hover img{transform:none}}
.doc .post-card a:not(.btn):not(.rl),.doc .partner a.partner-logo:not(.btn):not(.rl),.doc .partner-pair a:not(.btn):not(.rl){border-bottom:0;background:none;color:inherit}
.doc .post-card a:not(.btn):not(.rl):hover h2{color:var(--medal-ink)}
.partner-logo + .lead{margin-top:22px}

/* ---------- go-live additions (16/09/2026): form states, privacy table, cookie preferences ---------- */
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.send-fail{margin-top:16px;padding:12px 14px;border-left:3px solid #b3261e;background:#fbeaea;color:var(--text);font-size:var(--t-sm)}
.table-wrap{overflow-x:auto;margin:22px 0 26px}
.policy-table{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--t-sm);line-height:1.45}
.policy-table th,.policy-table td{text-align:left;vertical-align:top;padding:12px 14px;border-top:1px solid var(--paper-3)}
.policy-table thead th{border-top:0;border-bottom:2px solid var(--paper-3);font-weight:600}
.prefs{background:var(--paper-2);border-radius:6px;padding:26px 24px}
.prefs h2{margin-top:0}
.prefs .btn{margin-top:8px}