/* Self-hosted fonts (Phase 6). WOFF2 files live in /assets/fonts/ (operator-supplied). */
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/DMSans-Regular.woff2') format('woff2'); }
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/DMSans-Medium.woff2') format('woff2'); }
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/DMSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family:"DM Sans"; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/DMSans-Bold.woff2') format('woff2'); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/IBMPlexMono-Regular.woff2') format('woff2'); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/IBMPlexMono-Medium.woff2') format('woff2'); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2'); }

/* =========================================================
   mortgagebroker-essex.co.uk
   Palette: extracted from bradgatefs.co.uk Elementor kit,
            contrast-corrected to WCAG 2.2 AA.
   Type:    DM Sans (brand) + IBM Plex Mono (figures).
   Signature: "the figure rail" — every checkable number is
            set in mono with a green rule. On a regulated
            site the numbers are the claims.
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --forest:#1D3B0E;
  --forest-deep:#16300A;
  --footer-bg:#000000;    /* footer ground — black, replaces the forest-deep footer */
  --green:#488C25;        /* decorative / large text only (4.16:1) */
  --green-btn:#37701C;    /* 6.01:1 — text + buttons */
  --green-tint:#EDF4E9;
  --ink:#111112;
  --body:#3A3A3C;
  --muted:#6B6B70;
  --light:#F5F2F0;
  --sage:#BEC5BA;
  --rule:#E4E2DE;
  --white:#fff;
  --on-dark:#EDF2E8;
  --warn-bg:#FBF7E8;
  --warn-br:#C88F36;

  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --maxw:1180px;
  --prose:none;
  --gutter:clamp(20px,4vw,40px);
  --sec-y:clamp(56px,7vw,104px);

  --r:10px;
  --r-lg:18px;
  --sh:0 2px 10px rgba(17,17,18,.06);
  --sh-lg:0 18px 44px rgba(29,59,14,.13);
  --ease:cubic-bezier(.2,.6,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-size:17px;line-height:1.65;
  color:var(--body);background:var(--light);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--green-btn);text-underline-offset:3px}
a:hover{color:var(--forest)}
button{font:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ---------- type ---------- */
h1,h2,h3,h4{color:var(--ink);line-height:1.18;letter-spacing:-.022em;font-weight:700}
h1{font-size:clamp(2.1rem,1.4rem+3vw,3.5rem)}
h2{font-size:clamp(1.65rem,1.3rem+1.5vw,2.4rem)}
h3{font-size:1.28rem;letter-spacing:-.012em}
h4{font-size:1.05rem}
p{max-width:68ch}

.eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-btn);
  display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--green);flex:none}
.on-dark .eyebrow{color:#9CCB7C}
.on-dark .eyebrow::before{background:#9CCB7C}
.lead{font-size:1.15rem;color:var(--body)}

/* SIGNATURE — the figure rail */
.fig{
  font-family:var(--mono);font-weight:600;font-size:.95em;
  color:var(--forest);white-space:nowrap;
  padding-bottom:1px;
  box-shadow:inset 0 -2px 0 0 var(--green);
}
.on-dark .fig{color:#DCEBCF;box-shadow:inset 0 -2px 0 0 var(--green)}

/* VERIFY placeholders — visible until real data lands */
/* Markers must wrap. nowrap is fine for "[VERIFY: PHONE]" but the long body-copy
   markers are prose — one renders 1338px wide — and unbreakable they overflowed
   the viewport and gave the page a horizontal scrollbar. overflow-wrap:anywhere
   also handles long unspaced runs like URLs once real values land here. */
.v{
  font-family:var(--mono);font-size:.85em;
  background:var(--warn-bg);color:#7A5A16;
  border:1px dashed var(--warn-br);border-radius:4px;
  padding:0 5px;overflow-wrap:anywhere;
}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-y)}
.sec--tint{background:var(--white)}
/* About has short, sparse sections, so the global 104px rhythm (208px between
   any two sections) reads as dead space. Overriding the token on the page root
   retunes every .sec at once — no per-section classes, no effect elsewhere. */
.page-about,.page-braintree,.page-chelmsford,.page-home{--sec-y:clamp(40px,4vw,62px)}
/* .block carries no styling of its own, so the only separation between the
   compare table and the steps that follow it was h2.mt's 1.8em. Margin-top on
   .block would collapse with that heading's own margin and change nothing —
   hence padding, with the heading's margin zeroed so the gap is exactly this. */
.page-braintree .block + .block{padding-top:72px}
.page-braintree .block + .block > h2.mt{margin-top:0}
/* "Why this matters" now closes the section it belongs to, rather than floating
   in a section of its own that cost a further 208px of rhythm. */
.why{text-align:center;max-width:70ch;margin:44px auto 0}
.why p{max-width:none}
.why .tag{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-btn);background:var(--green-tint);border-radius:999px;
  padding:4px 10px;display:inline-block;margin-bottom:12px;
}
.sec--dark{background:var(--forest);color:var(--on-dark)}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p{color:#D5E2CB}
.sec-head{max-width:64ch;margin-bottom:clamp(28px,3.5vw,48px)}
.sec-head p{color:var(--muted)}

/* ---------- utility bar ---------- */
.util{background:var(--forest);color:#C9DBBB;font-size:.83rem}
.util .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;padding-block:9px;flex-wrap:wrap}
.util-l{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.util span{display:inline-flex;align-items:center;gap:7px}
.util a{color:#C9DBBB;text-decoration:none}
.util a:hover{color:#fff}
.util .dot{width:5px;height:5px;border-radius:50%;background:var(--green);flex:none}
@media(max-width:760px){.util{display:none}}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:40;background:rgba(245,242,240,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.hdr .wrap{display:flex;align-items:center;gap:20px;padding-block:14px}
.logo{display:flex;align-items:center;text-decoration:none}
/* Intrinsic 310x74; width/height attrs reserve the box, CSS drives display size. */
.logo img{height:38px;width:auto;display:block}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{padding:8px 13px;border-radius:7px;text-decoration:none;color:var(--body);font-size:.94rem;font-weight:500}
.nav a:hover{background:var(--green-tint);color:var(--forest)}
.nav a[aria-current="page"]{color:var(--forest);font-weight:700}

/* Locations disclosure. Open/closed state lives in aria-expanded — the a11y
   contract IS the styling hook, so the two can't drift apart. */
.nav .has-sub{position:relative}
.nav .sub-toggle{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:8px 13px;border:0;border-radius:7px;background:none;
  font:inherit;font-size:.94rem;font-weight:500;color:var(--body);
}
.nav .sub-toggle:hover{background:var(--green-tint);color:var(--forest)}
.nav .sub-toggle .chev{width:14px;height:14px;transition:transform .18s var(--ease)}
.nav .sub-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
/* When a page inside the group is the current page, light up the parent too —
   otherwise the location pages lose their "you are here" cue once collapsed. */
.nav .has-sub:has(a[aria-current="page"]) .sub-toggle{color:var(--forest);font-weight:700}
/* Scoped to .nav: a bare `.sub` also matches <p class="sub lead"> — the hero
   description on every page — and display:none silently hid all of them. */
.nav .sub{
  display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:190px;z-index:50;
  background:var(--white);border:1px solid var(--rule);border-radius:10px;
  padding:6px;box-shadow:var(--sh-lg);flex-direction:column;gap:2px;
}
.nav .sub-toggle[aria-expanded="true"] + .sub{display:flex}
.nav .sub a{white-space:nowrap}
/* Transparent bridge over the 6px gap between button and menu. Without it a real
   pointer travelling from the button to the menu leaves .has-sub in the gap,
   fires mouseleave, and the menu closes before it can be reached. Part of the
   group's subtree, so hovering it counts as staying inside. */
.nav .sub::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px}
.call-pill{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:var(--white);border:1px solid var(--rule);border-radius:999px;
  padding:7px 16px 7px 8px;box-shadow:var(--sh);
}
.call-pill .ic{width:32px;height:32px;border-radius:50%;background:var(--green-tint);display:grid;place-items:center;flex:none}
.call-pill .ic svg{width:15px;height:15px;fill:var(--green-btn)}
.call-pill .t{line-height:1.2}
.call-pill .t small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.call-pill .t b{color:var(--ink);font-size:.95rem}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--rule);border-radius:8px;padding:9px 11px;cursor:pointer}
.burger span{display:block;width:19px;height:2px;background:var(--ink);margin:4px 0}
@media(max-width:960px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);flex-direction:column;align-items:stretch;padding:12px;gap:2px;border-bottom:1px solid var(--rule);box-shadow:var(--sh)}
  .nav.open{display:flex}
  .nav a{padding:12px 14px}
  .burger{display:block}
  .hdr .call-pill{display:none}
  /* In the stacked mobile panel a floating dropdown would overlay the links
     below it. Render it inline and indented instead. */
  .nav .sub-toggle{width:100%;justify-content:space-between;padding:12px 14px}
  .nav .sub{position:static;border:0;box-shadow:none;padding:0 0 0 14px;min-width:0;background:none}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 24px;border-radius:999px;border:1px solid transparent;
  font-weight:600;font-size:.98rem;text-decoration:none;cursor:pointer;
  transition:transform .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease);
}
.btn svg{width:14px;height:14px;flex:none;transition:transform .2s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--pri{background:var(--green-btn);color:#fff;box-shadow:0 6px 18px rgba(55,112,28,.26)}
.btn--pri:hover{background:var(--forest);color:#fff;transform:translateY(-2px)}
.btn--sec{background:transparent;color:var(--forest);border-color:var(--sage)}
.btn--sec:hover{background:var(--white);border-color:var(--forest);color:var(--forest)}
.btn--light{background:#fff;color:var(--forest)}
.btn--light:hover{background:var(--green-tint);color:var(--forest);transform:translateY(-2px)}
.btn--ghost-d{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn--ghost-d:hover{background:rgba(255,255,255,.1);color:#fff}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
/* Contact page: the "In short" answer moved into the hero, under the buttons.
   .answer-lead keeps its own type scale and green rule; this only spaces it. */
.hero-answer{margin-top:30px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--light);padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,96px)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--sage) 1px,transparent 1px),
    linear-gradient(90deg,var(--sage) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 78% 40%,#000 0%,transparent 72%);
          mask-image:radial-gradient(ellipse 70% 60% at 78% 40%,#000 0%,transparent 72%);
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}
.hero h1{margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--green-btn)}
.hero .sub{font-size:1.16rem;max-width:52ch}
.hero-media{position:relative}
.hero-frame{
  aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(155deg,var(--forest),#2E5A18);
  box-shadow:var(--sh-lg);display:grid;place-items:center;text-align:center;
}
/* The photo is near-square (1200x1267) but the frame is 4/5 on desktop and 16/10
   on mobile, so it must crop. object-position keeps the adviser's face in the
   visible band at both ratios rather than centring on his chest. */
.hero-frame img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.float-card{
  position:absolute;left:-26px;bottom:34px;width:min(255px,72%);
  background:var(--white);border-radius:14px;padding:16px 18px;box-shadow:var(--sh-lg);
  border:1px solid var(--rule);
}
.float-card .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--green-btn);margin-bottom:5px}
.float-card p{font-size:.92rem;color:var(--body);margin-bottom:11px;max-width:none}
.float-card .btn{padding:9px 15px;font-size:.85rem;width:100%;justify-content:center}
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  /* copy stays first — the H1 must not be pushed below the fold */
  .hero-media{max-width:460px;margin-top:8px}
  .hero-frame{aspect-ratio:16/10}
  .float-card{left:auto;right:-8px;bottom:-18px;width:225px}
}
@media(max-width:520px){.float-card{position:static;width:100%;margin-top:16px}}

/* ---------- trust strip ---------- */
.trust{background:var(--white);border-block:1px solid var(--rule)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center;padding-block:20px}
.trust .item{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.79rem;letter-spacing:.05em;color:var(--forest);text-transform:uppercase}
.trust .item svg{width:15px;height:15px;fill:var(--green);flex:none}

/* ---------- answer-first ---------- */
.answer{background:var(--white)}
.answer .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4vw,64px);align-items:start}
.answer-lead{
  font-size:clamp(1.15rem,1rem+.6vw,1.42rem);line-height:1.55;color:var(--ink);font-weight:500;
  border-left:3px solid var(--green);padding-left:22px;max-width:60ch;
}
.takeaways{background:var(--green-tint);border-radius:var(--r-lg);padding:26px 28px;border:1px solid #DBE7D2}
.takeaways .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-btn);margin-bottom:14px}
.takeaways ul{list-style:none;padding:0;display:grid;gap:13px}
.takeaways li{position:relative;padding-left:26px;font-size:.97rem;line-height:1.55}
.takeaways li::before{
  content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;
  border-radius:2px;background:var(--green);transform:rotate(45deg);
}
.takeaways b{color:var(--ink)}
@media(max-width:880px){.answer .wrap{grid-template-columns:1fr}}

/* ---------- cards (who we help) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:18px}
.card{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:26px 24px;position:relative;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.card::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:#D2DCCB}
.card:hover::after{transform:scaleX(1)}
.card .n{font-family:var(--mono);font-size:.72rem;color:var(--sage);letter-spacing:.1em;margin-bottom:14px;display:block}
/* Icons replace the 01–05 counters. Sized here, coloured by currentColor so the
   dark feature card can flip it without touching the markup. --sage is too light
   for a line icon at this weight, hence --green-btn. */
.card .ic{display:block;width:26px;height:26px;margin-bottom:14px;color:var(--green-btn)}
.card .ic svg{width:100%;height:100%;display:block}
.card--feat .ic{color:#9CCB7C}
.card h3{margin-bottom:9px}
.card p{font-size:.96rem;max-width:none;color:var(--body)}
.card--feat{background:var(--forest);border-color:var(--forest)}
.card--feat h3{color:#fff}
.card--feat p{color:#CDDEC0}
.card--feat .n{color:#7FA867}
.card--feat::after{background:#9CCB7C}

/* ---------- callout ---------- */
.callout{
  background:var(--green-tint);border:1px solid #D4E3C9;border-left:4px solid var(--green);
  border-radius:var(--r);padding:22px 26px;margin-block:34px;
}
.callout .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-btn);margin-bottom:8px}
.callout p{max-width:75ch;color:var(--ink)}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--white)}
table{border-collapse:collapse;width:100%;min-width:580px;font-size:.97rem}
caption{caption-side:top;text-align:left;padding:20px 24px 0;font-weight:700;color:var(--ink);font-size:1.05rem}
th,td{padding:15px 24px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
thead th{background:var(--forest);color:#fff;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;border-bottom:none}
tbody th{font-weight:600;color:var(--ink);width:26%}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
tbody tr:nth-child(even){background:#FBFCFA}
td.pos{color:var(--forest)}

/* ---------- process ---------- */
.steps{list-style:none;padding:0;counter-reset:s;display:grid;gap:0}
.steps li{counter-increment:s;position:relative;padding:0 0 30px 66px}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-2px;
  width:44px;height:44px;border-radius:12px;background:var(--white);border:1px solid var(--rule);
  display:grid;place-items:center;font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--green-btn);
}
.steps li::after{content:"";position:absolute;left:22px;top:46px;bottom:2px;width:1px;background:var(--sage)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps b{display:block;color:var(--ink);font-size:1.08rem;margin-bottom:3px}
.steps p{font-size:.97rem;margin-bottom:5px}
.steps .t{font-family:var(--mono);font-size:.78rem;color:var(--green-btn);letter-spacing:.03em}

/* ---------- case study ---------- */
.case{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,40px);box-shadow:var(--sh);
}
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:24px;margin-top:22px}
.case-grid dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-btn);margin-bottom:7px;padding-bottom:7px;border-bottom:1px solid var(--rule)}
.case-grid dd{margin:0;font-size:.96rem}
.case .disc{margin-top:24px;font-size:.83rem;color:var(--muted);font-style:italic}

/* ---------- numbers band ---------- */
.numbers{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px}
.numbers .n{border-left:2px solid var(--green);padding-left:20px}
.numbers .n .v-big{font-family:var(--mono);font-size:clamp(1.9rem,1.4rem+1.6vw,2.7rem);font-weight:600;color:#fff;line-height:1.1;display:block}
.numbers .n .l{font-size:.88rem;color:#B9CFA8;margin-top:6px;display:block}

/* ---------- adviser ---------- */
.adviser{
  display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:center;
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:30px;
}
/* Now a real <img> rather than the dashed placeholder box. Square crop from a
   near-square source, biased up so the face sits in frame — same reasoning as
   the hero. The dashed-box properties below are inert on an <img>. */
/* height:auto is required, not optional: the img's height="1267" attribute is a
   presentational hint, so without it nothing is auto and aspect-ratio is ignored
   (the photo renders 150x1267). height:100% is equally wrong — it stretches to
   the text column. width + height:auto + aspect-ratio gives the square crop. */
.adviser img.ph{width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:center 28%;border:0;display:block}
.adviser .ph{
  aspect-ratio:1;border-radius:14px;background:var(--green-tint);border:1px dashed var(--sage);
  display:grid;place-items:center;text-align:center;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--green-btn);padding:10px;line-height:1.6;
}
.adviser h3{margin-bottom:6px}
.adviser .role{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-btn);margin-bottom:12px}
.adviser p{font-size:.97rem}
@media(max-width:640px){.adviser{grid-template-columns:1fr;text-align:center;justify-items:center}.adviser .ph{width:260px;max-width:100%}}

/* ---------- contact / form ---------- */
.contact .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,4vw,60px);align-items:start}
.contact-list{list-style:none;padding:0;display:grid;gap:20px;margin-top:26px}
.contact-list li{display:flex;gap:14px;align-items:flex-start}
.contact-list .ic{width:42px;height:42px;border-radius:11px;background:var(--white);border:1px solid var(--rule);display:grid;place-items:center;flex:none}
.contact-list .ic svg{width:16px;height:16px;fill:var(--green-btn)}
.contact-list .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:2px}
.contact-list a{color:var(--ink);text-decoration:none;font-weight:600}
.contact-list a:hover{color:var(--green-btn)}

.form-panel{background:var(--forest);border-radius:var(--r-lg);padding:clamp(26px,3vw,38px);box-shadow:var(--sh-lg)}
.form-panel h3{color:#fff;margin-bottom:6px}
.form-panel .fp-sub{color:#B9CFA8;font-size:.92rem;margin-bottom:22px;max-width:none}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fgrid .full{grid-column:1/-1}
.f label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:#B9CFA8;margin-bottom:6px}
.f input,.f select,.f textarea{
  width:100%;padding:12px 14px;border-radius:9px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);color:#fff;font-size:.96rem;font-family:inherit;
}
.f textarea{min-height:96px;resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:rgba(255,255,255,.4)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:#9CCB7C;background:rgba(255,255,255,.12)}
.f select option{color:#111}
.form-panel .btn{width:100%;justify-content:center;margin-top:18px}
.form-note{font-size:.78rem;color:#9DB78C;margin-top:14px;max-width:none}
.hp{position:absolute;left:-9999px}
@media(max-width:900px){.contact .wrap{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}}

/* ---------- guide cards ---------- */
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:20px}
.guide{
  background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.guide:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.guide .thumb{aspect-ratio:16/9;background:linear-gradient(150deg,var(--green-tint),#DCE8D3);display:grid;place-items:center;border-bottom:1px solid var(--rule)}
.guide .thumb span{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-btn)}
.guide .in{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.guide .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-btn);background:var(--green-tint);border-radius:999px;padding:4px 10px;align-self:flex-start;margin-bottom:12px}
.guide h3{font-size:1.1rem;margin-bottom:8px}
.guide h3 a{color:inherit;text-decoration:none}
.guide h3 a:hover{color:var(--green-btn)}
.guide p{font-size:.93rem;flex:1;max-width:none}
.guide .rd{margin-top:16px;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--green-btn);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.guide .rd:hover{gap:10px}

/* ---------- FAQ ---------- */
.faq{max-width:840px}
/* Contact page only: the FAQ sits under a full-width .sec-head, so the 840px
   measure read as a mis-alignment against its sibling sections. The other 20
   pages keep the narrower, more readable measure. */
.faq--wide{max-width:none}
.faq details{background:var(--white);border:1px solid var(--rule);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.faq details[open]{border-color:var(--sage);box-shadow:var(--sh)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 54px 18px 22px;position:relative;
  font-weight:600;color:var(--ink);font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--green-btn);border-bottom:2px solid var(--green-btn);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{background:var(--green-tint)}
.faq .a{padding:0 22px 20px;font-size:.98rem}
.faq .a p{max-width:70ch}

/* Smooth open/close. A <details> panel is display:none when shut, so nothing can
   transition it — ::details-content is the pseudo that wraps the panel and CAN.
   interpolate-size:allow-keywords is what makes block-size:auto animatable; it's
   inherited, so scoping it to .faq details keeps it off the rest of the site.
   allow-discrete keeps the panel rendered while it collapses instead of vanishing
   on frame one. Browsers without ::details-content simply ignore all of this and
   snap open exactly as before — no breakage, and the global
   prefers-reduced-motion rule (line ~69) already kills it for those who opt out. */
.faq details{interpolate-size:allow-keywords}
.faq details::details-content{
  block-size:0;opacity:0;overflow:hidden;
  transition:block-size .3s var(--ease),opacity .24s var(--ease),content-visibility .3s var(--ease) allow-discrete;
}
.faq details[open]::details-content{block-size:auto;opacity:1}

/* ---------- final CTA ---------- */
.final{background:var(--forest);position:relative;overflow:hidden}
.final::before{
  content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:linear-gradient(#9CCB7C 1px,transparent 1px),linear-gradient(90deg,#9CCB7C 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 85% 50%,#000,transparent 70%);
          mask-image:radial-gradient(ellipse 60% 70% at 85% 50%,#000,transparent 70%);
}
.final .wrap{position:relative;text-align:center;display:grid;justify-items:center}
.final h2{color:#fff;max-width:19ch;margin-bottom:14px}
.final p{color:#C5D8B7;max-width:56ch;margin-inline:auto}
.final .cta-row{justify-content:center}

/* ---------- mid CTA ---------- */
.midcta{
  background:var(--white);border:1px solid var(--rule);border-left:4px solid var(--green);
  border-radius:var(--r-lg);padding:28px 32px;margin-block:36px;
  display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.midcta h3{margin-bottom:4px}
.midcta p{font-size:.97rem;margin:0}
.midcta .btn{flex:none}

/* ---------- risk warning ---------- */
/* The sitewide repossession warning moved from its own cream strip into the
   footer legal block. MCOB 3A requires prominence, not just presence — so it must
   not inherit .legal p's muted small print. White on black at weight 600 reads at
   21:1, louder than the 7:1 strip it replaced. */
.legal .risk-note{color:#fff;font-weight:600;font-size:.88rem}

/* Separate from the above: 14 guide pages carry an in-article <p class="risk">
   inside .compliance. It was styled by the retired .risk band rule, so it needs
   its own rule or it silently degrades to muted grey body text. */
.compliance .risk{background:var(--warn-bg);border-top:2px solid var(--warn-br)}

/* ---------- footer ---------- */
.ftr{background:var(--footer-bg);color:#C9C9C9;padding-block:clamp(48px,6vw,76px) 0;font-size:.93rem}
.ftr .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px}
/* h3 is what ships: rekey-templates.mjs rewrites footer h4 -> h3 for heading order.
   h4 kept so the selector still matches the golden markup pre-transform. */
.ftr h3,.ftr h4{color:#fff;font-size:.82rem;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-bottom:18px}
.ftr ul{list-style:none;padding:0;display:grid;gap:10px}
.ftr a{color:#C9C9C9;text-decoration:none}
.ftr a:hover{color:#fff}
.ftr .about p{color:#A3A3A3;font-size:.93rem;margin-top:14px;max-width:34ch}
.ftr .logo img{height:44px}
.legal{border-top:1px solid rgba(255,255,255,.14);margin-top:44px;padding-block:26px 30px}
.legal p{font-size:.81rem;color:#949494;max-width:none;margin-bottom:9px;line-height:1.65}
.legal p:last-child{margin-bottom:0}
.legal .stamp{font-family:var(--mono);font-size:.75rem;color:#8A8A8A}
.legal a{color:#C9C9C9;text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:#fff}
@media(max-width:900px){.ftr .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr .cols{grid-template-columns:1fr}}

/* ---------- sticky mobile call ---------- */
.sticky-call{display:none}
@media(max-width:760px){
  .sticky-call{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:50;
    background:var(--white);border-top:1px solid var(--rule);padding:10px 14px;gap:10px;
    box-shadow:0 -4px 20px rgba(17,17,18,.09);
  }
  .sticky-call .btn{flex:1;justify-content:center;padding:12px 14px;font-size:.92rem}
  body{padding-bottom:70px}
}

/* ---------- breadcrumb ---------- */
.crumbs{padding-block:16px;font-size:.85rem;font-family:var(--mono);letter-spacing:.03em}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.crumbs li::after{content:"/";margin-left:8px;color:var(--sage)}
.crumbs li:last-child::after{display:none}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--green-btn)}
.crumbs [aria-current]{color:var(--ink)}

/* ---------- prose (guides) ---------- */
.prose{max-width:74ch}
.prose h2{margin-top:2.2em;margin-bottom:.6em}
.prose h3{margin-top:1.6em;margin-bottom:.4em}
.prose p{margin-bottom:1.05em}
.prose ul,.prose ol{margin:0 0 1.2em 1.3em}
.prose li{margin-bottom:.5em}
.skip{position:absolute;left:-9999px;background:var(--forest);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:12px;top:12px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* ---------- guide pages ---------- */
.guide-page{padding-block:0 clamp(40px,5vw,72px)}
.guide-head{max-width:820px;padding-top:20px;padding-bottom:8px}
.guide-head h1{font-size:clamp(1.9rem,1.3rem+2.2vw,2.9rem);margin-bottom:0}
.prose{max-width:760px;margin-inline:auto;padding-top:8px}
.prose h2{margin-top:2.1em;margin-bottom:.55em;font-size:clamp(1.4rem,1.2rem+.8vw,1.85rem)}
.prose h3{margin-top:1.7em;margin-bottom:.4em}
.prose p{margin-bottom:1.05em}
.prose ul,.prose ol{margin:0 0 1.3em 1.25em}
.prose li{margin-bottom:.55em}
.prose table{min-width:0}
.prose .tbl-wrap{margin:1.6em 0}
.prose .callout{margin:1.8em 0}
.prose .steps{margin:1.6em 0}

.byline{display:flex;gap:14px;align-items:center;background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:16px 18px;margin:22px 0 30px;font-size:.92rem}
.byline .av{width:52px;height:52px;border-radius:10px;background:var(--green-tint);border:1px dashed var(--sage);
  display:grid;place-items:center;font-family:var(--mono);font-size:.55rem;color:var(--green-btn);text-align:center;flex:none;line-height:1.4}
/* Real adviser photo in the byline avatar slot: the .av rule above styles an
   EMPTY placeholder (dashed border, tint, centred mono text). An <img> must
   drop that chrome and fill the box. Same pattern as .adviser img.ph. */
.byline img.av{width:52px;height:52px;border-radius:10px;object-fit:cover;
  object-position:center 28%;border:0;background:none;display:block;flex:none}
.byline b{color:var(--ink)}
.byline a{font-family:var(--mono);font-size:.8rem}

.contents{background:var(--white);border:1px solid var(--rule);border-left:4px solid var(--green);
  border-radius:var(--r);padding:20px 24px;margin:26px 0}
.contents ol{margin:0;padding-left:1.2em}
.contents li{margin-bottom:.45em;font-size:.96rem}
.contents a{text-decoration:none}
.contents a:hover{text-decoration:underline}

.answer-first{background:var(--green-tint);border-left:3px solid var(--green);border-radius:0 var(--r) var(--r) 0;
  padding:20px 24px;margin:24px 0}
.answer-first p{font-size:1.12rem;line-height:1.55;color:var(--ink);font-weight:500;margin:0;max-width:none}
.takeaways{margin:24px 0}
.pointers ul{list-style:none;padding-left:0}
.pointers li{position:relative;padding-left:26px;margin-bottom:.7em}
.pointers li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:2px;
  background:var(--green);transform:rotate(45deg)}
.pointers b{color:var(--ink)}

.softcta{background:var(--white);border:1px solid var(--rule);border-left:4px solid var(--green);
  border-radius:var(--r);padding:20px 24px;margin:30px 0}
.softcta p{margin:0 0 12px}
.softcta .btn{padding:11px 20px;font-size:.92rem}

.related{background:var(--green-tint);border:1px solid #DBE7D2;border-radius:var(--r-lg);padding:24px 26px;margin:34px 0}
.related h3{font-size:1.05rem;margin-bottom:12px}
.related ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.related a{text-decoration:none;font-weight:500}
.related a:hover{text-decoration:underline}

.bio{display:flex;gap:18px;align-items:flex-start;background:var(--white);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:24px;margin:34px 0}
/* Same for the bio block's 74px slot. */
.bio img.ph{width:74px;height:74px;border-radius:12px;object-fit:cover;
  object-position:center 28%;border:0;background:none;display:block;flex:none}
.bio .ph{width:74px;height:74px;border-radius:12px;background:var(--green-tint);border:1px dashed var(--sage);
  display:grid;place-items:center;font-family:var(--mono);font-size:.58rem;color:var(--green-btn);text-align:center;flex:none;line-height:1.5}
.guide-case{margin:30px 0}
.compliance{border-top:1px solid var(--rule);margin-top:38px;padding-top:22px;font-size:.86rem;color:var(--muted)}
.compliance p{max-width:none;margin-bottom:.6em}
.stamp{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.kicker{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-btn)}
h2.mt{margin-top:1.8em}
/* .block headings don't sit in a .sec-head, so they never inherited its bottom
   margin and the table / steps butted straight against them. Same value as
   .sec-head so the heading rhythm matches every other section on the site. */
.block > h2.mt{margin-bottom:clamp(28px,3.5vw,48px)}
.pill{display:none}
.legal-note{background:var(--warn-bg);border:1px solid var(--warn-br);border-left:4px solid var(--warn-br);
  border-radius:var(--r);padding:14px 18px;margin-bottom:26px;font-size:.9rem;color:#6A4E12}
.legal-note b{color:#543D0E}

/* Cookie-consent banner (Phase 6) */
.consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:100;background:#1a1a1a;color:#fff;padding:1rem 1.25rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:center;font-size:.9rem}
/* Author-origin display:flex above beats the UA stylesheet's [hidden]{display:none},
   so `hidden` needs an explicit author rule or the banner never dismisses. */
.consent-banner[hidden]{display:none}
.consent-banner a{color:#A9C795}
.consent-banner .btns{display:flex;gap:.5rem}
.consent-banner button{border:0;border-radius:8px;padding:.5rem 1rem;cursor:pointer;font:inherit}
.consent-banner button[data-consent="accept"]{background:#37701C;color:#fff}
.consent-banner button[data-consent="reject"]{background:transparent;color:#fff;border:1px solid #fff}