/* ==========================================================================
   Bradgate Financial Solutions — shared stylesheet
   One file, no build step, no external requests.
   Retune the whole site from the token block below.
   ========================================================================== */

/* --- 1. Fonts (self-hosted, latin subset) --------------------------------- */

@font-face {
  font-family: 'Gabarito';
  src: url(/assets/fonts/gabarito-latin.woff2) format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url(/assets/fonts/hanken-latin.woff2) format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* --- 2. Tokens ------------------------------------------------------------ */

:root {
  /* Surfaces. Forest is the drenched brand surface; cream and sage are the
     alternating light bands; white is the default ground.                    */
  --forest:        #00473c;
  --forest-deep:   #003029;
  --forest-ink:    #04231a;
  --cream:         #f5f1ec;
  --sage:          #bec5ba;
  --stone:         #efeee7;
  --white:         #ffffff;
  --line:          #e2e0d6;
  --line-dark:     rgb(255 255 255 / 15%);

  /* Ink. --body is darkened from the live #887e7a so it clears 4.5:1.        */
  --ink:           #00473c;
  --body:          #5b544f;
  --body-quiet:    #6f6862;
  --ink-on-dark:   #ffffff;
  --body-on-dark:  rgb(255 255 255 / 78%);

  /* Accent. Full-strength green is for fills and dark-ground text is the
     lighter step, which clears 6.8:1 on forest.                              */
  --accent:        #00b30f;
  --accent-lift:   #00c711;
  --accent-light:  #6be87a;
  --accent-wash:   rgb(0 179 15 / 10%);
  --brass:         #b5822e;

  /* Type */
  --display: 'Gabarito', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --body-font: 'Hanken Grotesk', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-h1:      clamp(2.55rem, 1.55rem + 3.4vw, 4rem);
  --fs-h1-sub:  clamp(2.05rem, 1.5rem + 2.2vw, 3.1rem);
  --fs-h2:      clamp(1.8rem, 1.35rem + 1.55vw, 2.55rem);
  --fs-h3:      clamp(1.35rem, 1.18rem + 0.68vw, 1.75rem);
  --fs-h4:      clamp(1.15rem, 1.08rem + 0.3vw, 1.32rem);
  --fs-h5:      1.06rem;
  --fs-body:    1rem;
  --fs-lede:    clamp(1.06rem, 1rem + 0.28vw, 1.2rem);
  --fs-small:   0.875rem;
  --fs-micro:   0.78rem;

  --lh-tight:   1.08;
  --lh-heading: 1.18;
  --lh-body:    1.75;
  --ls-display: -0.03em;
  --ls-eyebrow: 0.14em;

  /* Layout */
  --container:  1240px;
  --measure:    850px;
  --gutter:     clamp(1rem, 3.2vw, 2rem);
  --section:    clamp(3.25rem, 6.4vw, 6.25rem);
  --gap:        clamp(1.25rem, 2.4vw, 1.875rem);
  --nav-h:      66px;
  --nav-top:    14px;

  --radius:     8px;
  --radius-md:  16px;
  --radius-lg:  28px;
  --radius-xl:  34px;
  --pill:       999px;

  --shadow-sm:  0 2px 8px rgb(0 40 32 / 6%);
  --shadow:     0 40px 60px 0 rgb(0 0 0 / 5%);
  --shadow-lift: 0 24px 48px -18px rgb(0 40 32 / 28%);

  /* Motion */
  --ease:       0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-img:   0.7s cubic-bezier(0.2, 1, 0.22, 1);

  /* Semantic z-index scale */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
}

/* --- 3. Reset and base ---------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--nav-top) + 20px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--body-font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
svg { fill: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  color: var(--ink);
  margin: 0 0 0.55em;
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: 1rem; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

strong, b { font-weight: 700; color: var(--ink); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: 0.4em; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--accent); color: var(--forest-ink); }

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: var(--z-modal);
  background: var(--white);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 700;
  transition: top var(--ease);
}
.skip:focus { top: 12px; }

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

/* --- 4. Layout primitives ------------------------------------------------- */

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

.measure { max-width: var(--measure); }
.measure-center { max-width: var(--measure); margin-inline: auto; }

/* A band is a full-width horizontal stripe. Earned, not automatic:
   a section under ~60 words joins a grid with its siblings instead. */
.band { padding-block: var(--section); position: relative; }
.band--cream { background: var(--cream); }
.band--sage  { background: var(--sage); color: #3d3733; --body: #3d3733; --line: #a9b1a5; }
.band--stone { background: var(--stone); }
.band--tight { padding-block: calc(var(--section) * 0.62); }

.band--forest {
  background: var(--forest);
  color: var(--body-on-dark);
  --ink: var(--ink-on-dark);
  --body: var(--body-on-dark);
  --line: var(--line-dark);
}
.band--forest h1, .band--forest h2, .band--forest h3,
.band--forest h4, .band--forest h5, .band--forest h6 { color: var(--ink-on-dark); }
.band--forest strong { color: var(--ink-on-dark); }

.stack > * + * { margin-top: var(--gap); }
.flow > * + * { margin-top: 1.1em; }

/* --- 5. Eyebrow — the signature heading device ----------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--body-font);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.4;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  flex: none;
  background: var(--accent);
}
.band--forest .eyebrow,
.panel .eyebrow { color: var(--accent-light); }

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 3.6vw, 3.25rem); }
.section-head p { color: var(--body); }
.section-head .lede { font-size: var(--fs-lede); }

.lede { font-size: var(--fs-lede); line-height: 1.68; }

/* --- 6. Buttons ----------------------------------------------------------- */

.btn {
  --btn-bg: var(--forest);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 10px 0 25px;
  border: 0;
  border-radius: var(--pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--body-font);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Circular arrow badge — the reference's signature button detail */
.btn__badge {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: rgb(255 255 255 / 18%);
  display: grid;
  place-items: center;
  transition: background var(--ease), transform var(--ease);
}
.btn__badge svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.2; }
.btn:hover .btn__badge { transform: translateX(3px); background: rgb(255 255 255 / 30%); }

.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--forest-ink); }
.btn--primary:hover { --btn-bg: var(--accent-lift); box-shadow: 0 10px 24px -8px rgb(0 179 15 / 55%); }
.btn--primary .btn__badge { background: rgb(4 35 26 / 14%); }
.btn:hover .btn__badge { background: rgb(4 35 26 / 22%); }
.btn--dark:hover .btn__badge,
.btn--forest:hover .btn__badge { background: rgb(255 255 255 / 30%); }

.btn--dark   { --btn-bg: #1a1a1a; --btn-fg: #fff; }
.btn--forest { --btn-bg: var(--forest); --btn-fg: #fff; }
.btn--light  { --btn-bg: #fff; --btn-fg: var(--forest); }
.btn--light .btn__badge { background: rgb(0 71 60 / 12%); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  padding: 0 25px;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.btn--ghost:hover { --btn-bg: rgb(255 255 255 / 10%); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--forest);
  padding: 0 25px;
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--outline:hover { --btn-bg: var(--forest); --btn-fg: #fff; box-shadow: inset 0 0 0 1.5px var(--forest); }

.btn--block { width: 100%; justify-content: space-between; }
.btn--sm { min-height: 42px; font-size: 0.875rem; padding-left: 20px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Text link with an arrow */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 2px;
  transition: gap var(--ease), color var(--ease);
}
.arrow-link:hover { gap: 13px; color: var(--accent); }
.arrow-link svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.2; }

/* --- 7. Navigation — floating dark pill ----------------------------------- */

.nav-shell {
  position: fixed;
  inset: var(--nav-top) 0 auto;
  z-index: var(--z-sticky);
  padding-inline: var(--gutter);
  pointer-events: none;
}

.nav {
  pointer-events: auto;
  max-width: var(--container);
  margin-inline: auto;
  min-height: var(--nav-h);
  background: var(--forest);
  border-radius: var(--pill);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 8px 8px 24px;
  box-shadow: 0 14px 34px -14px rgb(0 30 24 / 55%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  flex: none;
}
.brand:hover { color: #fff; }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.brand__sub {
  display: block;
  font-family: var(--body-font);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-top: 2px;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.nav__list > li { margin: 0; position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 13px;
  border-radius: var(--pill);
  color: rgb(255 255 255 / 88%);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--ease), background var(--ease);
}
.nav__link:hover,
.nav__link[aria-expanded="true"] { color: #fff; background: rgb(255 255 255 / 10%); }
.nav__link[aria-current="page"] { color: var(--accent-light); }
.nav__link svg { width: 9px; height: 9px; stroke: currentColor; stroke-width: 2.6; transition: transform var(--ease); }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: var(--z-dropdown);
  width: 280px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}
.nav__menu li { margin: 0; }
.nav__menu a {
  display: block;
  padding: 8px 14px;
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.89rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
}
.nav__menu a:hover { background: var(--cream); color: var(--accent); }

.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu,
.nav__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__cta { flex: none; margin-left: auto; }

.nav__toggle {
  display: none;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--forest-ink);
  font-family: var(--body-font);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}
.nav__toggle span { display: block; width: 16px; height: 1.8px; background: currentColor; position: relative; }
.nav__toggle span::before,
.nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1.8px; background: currentColor;
  transition: transform var(--ease);
}
.nav__toggle span::before { top: -5px; }
.nav__toggle span::after { top: 5px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav { flex-wrap: wrap; border-radius: var(--radius-lg); padding-right: 14px; }
  .nav__toggle { display: inline-flex; }
  .nav__cta { display: none; }
  .nav__panel {
    flex-basis: 100%;
    display: none;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 6px 4px 14px;
    border-top: 1px solid var(--line-dark);
    margin-top: 8px;
  }
  .nav__panel.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
  .nav__link { display: flex; justify-content: space-between; padding: 13px 12px; font-size: 1rem; border-radius: var(--radius); }
  .nav__link svg { width: 11px; height: 11px; }
  .nav__menu {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 8px 12px;
    display: none;
  }
  .nav__menu.is-open { display: block; }
  .nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { display: none; }
  .nav__item:hover .nav__menu.is-open, .nav__item:focus-within .nav__menu.is-open { display: block; }
  .nav__menu a { color: rgb(255 255 255 / 82%); padding: 9px 12px; }
  .nav__menu a:hover { background: rgb(255 255 255 / 8%); color: #fff; }
  .nav__panel .btn { margin: 12px 12px 0; }
}

@media (min-width: 1081px) {
  .nav__panel { display: contents; }
  .nav__panel .btn--mobile { display: none; }
}

@media (min-width: 1081px) and (max-width: 1240px) {
  .nav__link { padding: 10px 9px; font-size: 0.83rem; }
  .brand__name { font-size: 0.95rem; }
}

/* --- 8. Hero -------------------------------------------------------------- */

/* The dark slab: inset, rounded, floating on the light page. */
.panel {
  position: relative;
  background: var(--forest);
  color: var(--body-on-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  --ink: var(--ink-on-dark);
  --body: var(--body-on-dark);
  --line: var(--line-dark);
}
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 { color: var(--ink-on-dark); }
.panel strong { color: var(--ink-on-dark); }

/* Soft light bloom, top-left, so the slab is not a flat rectangle */
.panel::before {
  content: "";
  position: absolute;
  inset: -30% 40% 30% -20%;
  background: radial-gradient(closest-side, rgb(0 179 15 / 13%), transparent);
  pointer-events: none;
}
.panel > * { position: relative; z-index: var(--z-base); }
.panel--flat::before { display: none; }

.hero-shell { padding: calc(var(--nav-h) + var(--nav-top) + 14px) var(--gutter) 0; }
.hero-shell .panel { max-width: var(--container); margin-inline: auto; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
}
@media (max-width: 940px) { .hero { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: 0.5em; }
.hero__intro { font-size: var(--fs-lede); line-height: 1.62; color: rgb(255 255 255 / 85%); max-width: 54ch; }
.hero__note { font-size: 0.96rem; color: rgb(255 255 255 / 70%); max-width: 52ch; }

.ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 26px 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}
.ticks li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}
.ticks svg { width: 17px; height: 17px; flex: none; stroke: var(--accent-light); stroke-width: 2.4; }

/* --- 9. Form card --------------------------------------------------------- */

.form-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  box-shadow: var(--shadow);
  color: #5b544f;
  --ink: #00473c;
  --body: #5b544f;
  --body-quiet: #6f6862;
  --line: #e2e0d6;
}
.form-card h2, .form-card h3 { color: var(--ink); font-size: var(--fs-h3); margin-bottom: 6px; }
.form-card__note { font-size: 0.9rem; color: var(--body-quiet); margin-bottom: 20px; }

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.field .hint { font-weight: 400; color: var(--body-quiet); }

input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 0.95rem;
  line-height: 1.5;
  transition: border-color var(--ease), box-shadow var(--ease);
}
textarea { min-height: 108px; resize: vertical; }
::placeholder { color: #7a736d; opacity: 1; }

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
input:user-invalid, textarea:user-invalid { border-color: #b3261e; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 18px 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--body);
}
.consent input {
  width: 19px; height: 19px;
  min-height: 0;
  margin-top: 2px;
  flex: none;
  accent-color: var(--accent);
}
.consent a { color: var(--ink); font-weight: 700; }

/* --- 10. Image placeholders ----------------------------------------------- */
/* Every slot must hold up empty — 59 of 134 pages resolve no photograph.     */

.ph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--stone);
  border: 1px solid var(--line);
  overflow: hidden;
  color: var(--forest);
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 13px,
    rgb(0 71 60 / 5%) 13px 14px
  );
}
.ph::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px dashed rgb(0 71 60 / 18%);
  border-radius: calc(var(--radius-lg) - 12px);
}
.ph__label {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  text-align: center;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgb(0 71 60 / 62%);
  line-height: 1.5;
}
.ph__label svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 1.5; opacity: 0.85; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ph--tall  { aspect-ratio: 3 / 4; }
.ph--wide  { aspect-ratio: 16 / 9; }
.ph--square { aspect-ratio: 1 / 1; }
.ph--flat  { aspect-ratio: 21 / 9; }
.ph--band  { aspect-ratio: 3 / 1; max-height: 360px; }
.ph--dark {
  background: rgb(255 255 255 / 6%);
  border-color: var(--line-dark);
  color: #fff;
}
.ph--dark::before { background: repeating-linear-gradient(135deg, transparent 0 13px, rgb(255 255 255 / 6%) 13px 14px); }
.ph--dark::after { border-color: rgb(255 255 255 / 20%); }
.ph--dark .ph__label { color: rgb(255 255 255 / 72%); }

/* --- 11. Image + text split ----------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.75rem);
  align-items: center;
}
.split--top { align-items: start; }
.split--text-first .split__media { order: 2; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--text-first .split__media { order: 0; }
}

.split__media { position: relative; }

/* Overlay data card, half-off the image — the reference's stat block */
.statcard {
  position: absolute;
  left: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--forest);
  border-radius: var(--radius-md);
  padding: 18px 6px;
  box-shadow: var(--shadow-lift);
}
.statcard > div { padding: 0 clamp(0.6rem, 1.4vw, 1.1rem); }
.statcard > div + div { border-left: 1px solid var(--line-dark); }
.statcard dt {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
}
@media (max-width: 560px) {
  .statcard {
    position: static;
    margin-top: 12px;
    border-radius: var(--radius);
    box-shadow: none;
  }
  /* The statcard has just rejoined the normal flow, so the image no longer
     has the media column to itself. .ph--fill sets height:100%, which was
     written for a column containing nothing but the picture — with the card
     back in flow beneath it the two together exceed the column, and the card
     overflowed onto the section below it. Measured on a 390px viewport: the
     card sat 105px past the bottom of its own column, straight across the
     "Whole of Market Mortgage Advice in Leicester" heading.

     Only the homepage's credibility block puts a statcard inside a media
     column, so the fix is scoped to that column by class rather than by
     :has(), which keeps it working regardless of selector support. The
     min-height floor on .ph--fill still applies, so the picture keeps a
     sensible size. */
  .split__media--stat .ph--fill { height: auto; }
}
.statcard dd {
  margin: 4px 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: rgb(255 255 255 / 72%);
  text-transform: uppercase;
}

/* --- 12. Numbered service rows -------------------------------------------- */
/* Six products, listed. The numerals are a real enumeration, not scaffolding. */

.numlist { margin: 0; padding: 0; list-style: none; }
.numlist li { margin: 0; }

.numrow {
  display: grid;
  grid-template-columns: auto minmax(11rem, 0.9fr) minmax(0, 1.6fr) auto;
  align-items: center;
  gap: clamp(0.9rem, 2.4vw, 2.25rem);
  padding: clamp(1.15rem, 2.2vw, 1.6rem) clamp(0.5rem, 1.6vw, 1.25rem);
  border-top: 1px solid var(--line-dark);
  color: inherit;
  text-decoration: none;
  transition: background var(--ease);
}
.numlist li:first-child .numrow { border-top: 0; }
.numrow:hover { background: rgb(255 255 255 / 6%); color: inherit; }

.numrow__n {
  font-family: var(--display);
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--accent-light);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.numrow__title {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.numrow__body { font-size: 0.9rem; line-height: 1.62; color: rgb(255 255 255 / 72%); margin: 0; }
.numrow__go {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  transition: background var(--ease), transform var(--ease), border-color var(--ease);
}
.numrow__go svg { width: 15px; height: 15px; stroke: #fff; stroke-width: 2; }
.numrow:hover .numrow__go { background: var(--accent); border-color: var(--accent); transform: translateX(4px); }
.numrow:hover .numrow__go svg { stroke: var(--forest-ink); }

@media (max-width: 880px) {
  .numrow { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
  .numrow__body { grid-column: 2 / 4; }
}
@media (max-width: 520px) {
  .numrow__go { display: none; }
  .numrow { grid-template-columns: auto minmax(0, 1fr); }
  .numrow__body { grid-column: 2 / 3; }
}

/* --- 13. Icon boxes ------------------------------------------------------- */

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.iconbox {
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.iconbox__icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--accent-wash);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.iconbox__icon svg { width: 22px; height: 22px; stroke: var(--forest); stroke-width: 1.8; }
.iconbox h3, .iconbox h4, .iconbox h5 { margin-bottom: 8px; font-size: 1.08rem; }
.iconbox p { font-size: 0.925rem; line-height: 1.68; margin: 0; }
.iconbox .arrow-link { margin-top: 16px; }

a.iconbox { display: block; text-decoration: none; color: var(--body); }
a.iconbox:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: transparent; color: var(--body); }
a.iconbox:hover h3, a.iconbox:hover h4, a.iconbox:hover h5 { color: var(--accent); }

.band--cream .iconbox, .band--stone .iconbox { background: var(--white); }
.band--sage .iconbox { background: rgb(255 255 255 / 55%); border-color: rgb(255 255 255 / 60%); }

/* Compact audience chips — the 4-up "can you apply" grid */
.chip {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.4;
}
.chip svg { width: 19px; height: 19px; flex: none; stroke: var(--accent); stroke-width: 2.2; }

/* --- 14. Stylish list ----------------------------------------------------- */

.tick-list { list-style: none; margin: 0; padding: 0; }
.tick-list li {
  position: relative;
  padding-left: 38px;
  margin-bottom: 18px;
  line-height: 1.7;
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent-wash);
}
.tick-list li::after {
  content: "";
  position: absolute;
  left: 8px; top: 10px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
/* Inside a centred section the tick is still pinned to the left edge of its
   own row, so centring the text would strand the tick away from the words it
   marks. Shrink the list to its content and centre THAT instead, which keeps
   every row left-aligned against its own tick. */
.text-center .tick-list {
  display: table;
  margin-inline: auto;
  text-align: left;
}
.tick-list strong { display: inline; }
.band--forest .tick-list li::before { background: rgb(107 232 122 / 16%); }
.band--forest .tick-list li::after { border-color: var(--accent-light); }

/* --- 15. Accordion -------------------------------------------------------- */
/* Ships open in the HTML; JS collapses on load. No-JS readers see everything. */

.accordion { border-top: 1px solid var(--line); }
.accordion details {
  border-bottom: 1px solid var(--line);
}
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.3vw, 1.14rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  transition: color var(--ease);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--accent); }
.accordion summary::after {
  content: "";
  width: 11px; height: 11px;
  flex: none;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--ease);
}
.accordion details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.accordion .accordion__body { padding: 0 4px 22px; max-width: 72ch; }
.accordion .accordion__body p { font-size: 0.96rem; }
.accordion .accordion__body p:last-child { margin-bottom: 0; }
.accordion a.accordion__link { font-weight: 700; color: var(--ink); }
.accordion a.accordion__link:hover { color: var(--accent); }

/* --- 16. Breadcrumb hero -------------------------------------------------- */

.page-hero {
  padding: calc(var(--nav-h) + var(--nav-top) + 14px) var(--gutter) 0;
}
.page-hero .panel {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4.25rem) clamp(1.5rem, 4vw, 4rem);
}
.page-hero h1 { font-size: var(--fs-h1-sub); max-width: 20ch; }
.page-hero .standfirst {
  font-size: var(--fs-lede);
  color: rgb(255 255 255 / 80%);
  max-width: 58ch;
  line-height: 1.62;
  margin: 0;
}
.page-hero--wide h1 { max-width: 26ch; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: rgb(255 255 255 / 65%);
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: rgb(255 255 255 / 38%); }
.crumbs a { color: rgb(255 255 255 / 78%); text-decoration: none; }
.crumbs a:hover { color: var(--accent-light); }
.crumbs [aria-current="page"] { color: #fff; font-weight: 600; }

/* --- 17. Closing CTA band ------------------------------------------------- */

.cta-shell { padding: 0 var(--gutter) var(--section); }
.cta {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
@media (max-width: 780px) { .cta { grid-template-columns: 1fr; } }
.cta h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.35rem); margin-bottom: 10px; max-width: 20ch; }
.cta p { color: rgb(255 255 255 / 78%); max-width: 48ch; margin: 0; }

/* --- 18. Reviews empty state ---------------------------------------------- */

.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--gap); }
.review-slot {
  position: relative;
  padding: 24px 26px;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.review-slot__quote {
  font-family: var(--display);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--sage);
}
.review-slot__msg {
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 6px 0 0;
  font-weight: 500;
}
.review-slot__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--body-quiet);
}
.review-slot__meta svg { width: 15px; height: 15px; stroke: var(--body-quiet); stroke-width: 1.8; flex: none; }

.stars { display: flex; gap: 3px; }
.stars svg { width: 17px; height: 17px; fill: var(--brass); stroke: none; }

/* --- 19. Footer ----------------------------------------------------------- */

.footer {
  background: var(--forest-deep);
  color: rgb(255 255 255 / 74%);
  padding-top: clamp(3rem, 5.5vw, 5rem);
  font-size: 0.94rem;
}
.footer h2, .footer h3 { color: #fff; }
.footer a { color: rgb(255 255 255 / 78%); text-decoration: none; }
.footer a:hover { color: var(--accent-light); }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.45fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  padding-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr; } }

.footer .footer__title {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);
  color: var(--accent-light);
  margin-bottom: 18px;
  letter-spacing: -0.03em;
}
.footer__plate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 14px;
  background: #fff;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  color: var(--forest);
  text-decoration: none;
}
.footer .footer__plate,
.footer .footer__plate:hover { color: var(--forest); }
.footer__plate .brand__mark { width: 32px; height: 32px; }
.footer__plate .brand__name { font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.05; }
.footer__plate .brand__sub { color: #4f7a55; }

.footer__desc { max-width: 44ch; margin-bottom: 26px; line-height: 1.7; }

.contact-rows { display: grid; gap: 10px; max-width: 30rem; }
.contact-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 18px;
  border: 1px solid var(--line-dark);
  border-radius: var(--pill);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.94rem;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.contact-row:hover { background: rgb(255 255 255 / 7%); border-color: rgb(255 255 255 / 30%); color: #fff; transform: translateX(3px); }
.contact-row svg { width: 18px; height: 18px; flex: none; stroke: var(--accent-light); stroke-width: 1.9; }
.contact-row span { flex: 1; }
.contact-row .contact-row__go { width: 9px; height: 9px; stroke: rgb(255 255 255 / 55%); stroke-width: 2.4; }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.footer__cols h3 {
  font-family: var(--body-font);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgb(255 255 255 / 55%);
  margin-bottom: 16px;
}
.footer__cols ul { list-style: none; margin: 0; padding: 0; }
.footer__cols li { margin-bottom: 10px; }

.footer__address { font-style: normal; line-height: 1.75; }
.footer__fca {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 15px;
  border-radius: var(--pill);
  background: rgb(107 232 122 / 14%);
  color: var(--accent-light);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}
.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  display: grid;
  place-items: center;
  transition: background var(--ease), border-color var(--ease);
}
.socials a:hover { background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 30%); }
.socials svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.8; }

/* Regulatory — legible by design, never shrunk into boilerplate */
.legal {
  border-top: 1px solid var(--line-dark);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}
.legal p { font-size: 0.875rem; line-height: 1.72; max-width: 92ch; color: rgb(255 255 255 / 68%); }
.legal .warning {
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  font-size: 0.875rem;
  padding: 14px 18px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: var(--radius);
  max-width: 92ch;
}
.legal .copyright {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-dark);
  font-size: 0.85rem;
  color: rgb(255 255 255 / 55%);
}

/* --- 20. Compliance block, byline, related -------------------------------- */

.compliance {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: var(--white);
}
.compliance h2, .compliance h3 {
  font-family: var(--body-font);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--body-quiet);
  margin-bottom: 12px;
}
.compliance p { font-size: 0.9rem; line-height: 1.7; }
.compliance .warning {
  margin-top: 14px;
  padding: 13px 16px;
  border-radius: var(--radius);
  background: var(--forest);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.55;
}

.byline {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.byline__avatar {
  width: 56px; height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--stone);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  color: var(--forest);
  font-size: 1.05rem;
}
.byline__name { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.byline__role { font-size: 0.875rem; color: var(--body-quiet); margin: 2px 0 8px; }
.byline address { font-style: normal; font-size: 0.875rem; line-height: 1.6; }

.related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.related-list li { margin: 0; }
.related-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  transition: padding-left var(--ease), color var(--ease);
}
.related-list a:hover { padding-left: 12px; color: var(--accent); }
.related-list svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; flex: none; }

/* --- 21. Article ---------------------------------------------------------- */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: rgb(255 255 255 / 72%);
}
.post-meta li { margin: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.post-meta svg { width: 15px; height: 15px; flex: none; }
.post-meta li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: rgb(255 255 255 / 40%); }

.pill {
  display: inline-block;
  padding: 6px 15px;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--forest-ink);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
}
.pill--quiet { background: var(--accent-wash); color: var(--forest); }

.prose { max-width: var(--measure); margin-inline: auto; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem); }
.prose h3 { margin-top: 1.8em; }
.prose p { font-size: 1.03rem; line-height: 1.78; }
.prose .standfirst {
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.32rem);
  line-height: 1.62;
  color: var(--ink);
  font-weight: 500;
}
.prose figure { margin: 2.4em 0; }
.prose figcaption {
  margin-top: 12px;
  font-size: var(--fs-small);
  color: var(--body-quiet);
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.prose blockquote {
  margin: 2em 0;
  padding: 0 0 0 26px;
  border-left: 2px solid var(--accent);
  font-family: var(--display);
  font-size: 1.22rem;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
}
.prose a { color: var(--ink); font-weight: 600; text-decoration-color: var(--accent); }
.prose .btn { color: var(--btn-fg); font-weight: 700; text-decoration: none; }
.prose a:hover { color: var(--accent); }
.prose ul li::marker { color: var(--accent); }

/* Inline images may break out past the measure */
.bleed { width: min(100% + 12vw, var(--container)); margin-inline: calc(50% - min(50% + 6vw, var(--container) / 2)); }

.inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 2.4em 0;
  padding: 26px 28px;
  background: var(--cream);
  border-radius: var(--radius-lg);
}
.inline-cta p { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--ink); letter-spacing: -0.02em; }

/* Post cards for the blog index */
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--ease), box-shadow var(--ease);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.post-card .ph { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.post-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.post-card h3 { margin: 0; font-size: 1.15rem; }
.post-card h3 a { text-decoration: none; }
.post-card h3 a:hover { color: var(--accent); }
.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 0.8rem;
  color: var(--body-quiet);
}
.post-card__meta li { margin: 0; }

/* --- 22. Document / legal ------------------------------------------------- */

.doc {
  max-width: 1060px;
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .doc { grid-template-columns: 1fr; } }

.toc {
  position: sticky;
  top: calc(var(--nav-h) + var(--nav-top) + 24px);
}
@media (max-width: 900px) {
  .toc { position: static; padding: 20px 22px; background: var(--cream); border-radius: var(--radius-lg); }
}
.toc h2 {
  font-family: var(--body-font);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--body-quiet);
  margin-bottom: 14px;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin: 0; counter-increment: toc; }
.toc a {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--body);
  text-decoration: none;
  border-left: 1px solid var(--line);
  padding-left: 16px;
  margin-left: 1px;
  transition: color var(--ease), border-color var(--ease);
}
.toc a::before { content: counter(toc, decimal-leading-zero); color: var(--body-quiet); font-variant-numeric: tabular-nums; font-size: 0.78rem; padding-top: 2px; }
.toc a:hover { color: var(--ink); }
.toc a.is-current { color: var(--ink); font-weight: 700; border-color: var(--accent); }
.toc a.is-current::before { color: var(--accent); }

.doc-body { max-width: 68ch; }
.doc-body h2 { font-size: var(--fs-h3); margin: 0 0 0.6em; }
.doc-body h3 {
  font-size: 1.1rem;
  margin: 2.6em 0 0.6em;
  scroll-margin-top: calc(var(--nav-h) + var(--nav-top) + 24px);
}
.doc-body h3:first-of-type { margin-top: 1.8em; }
.doc-body p, .doc-body li { font-size: 0.99rem; line-height: 1.8; }
.doc-body ul { padding-left: 1.15em; }
.doc-body ul li::marker { color: var(--accent); }
.doc-updated {
  font-size: var(--fs-small);
  color: var(--body-quiet);
  padding-bottom: 1.6em;
  border-bottom: 1px solid var(--line);
}

/* --- 23. Motion ----------------------------------------------------------- */
/* Content is visible by default. JS opts in, and a failsafe reveals
   everything if the observer never fires. */

.js [data-reveal] {
  transition: opacity 0.62s var(--ease-out), transform 0.62s var(--ease-out);
}
.js [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(16px);
}
.js .numlist li[data-reveal]:nth-child(2) { transition-delay: 60ms; }
.js .numlist li[data-reveal]:nth-child(3) { transition-delay: 120ms; }
.js .numlist li[data-reveal]:nth-child(4) { transition-delay: 180ms; }
.js .numlist li[data-reveal]:nth-child(5) { transition-delay: 240ms; }
.js .numlist li[data-reveal]:nth-child(6) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
}

/* --- 24. Utilities -------------------------------------------------------- */

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-gap { margin-top: var(--gap); }
.mt-lg { margin-top: clamp(2rem, 3.5vw, 3rem); }
.text-center { text-align: center; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

@media print {
  .nav-shell, .cta-shell, .footer .contact-rows, .skip { display: none; }
  body { color: #000; background: #fff; }
  .panel { background: none; color: #000; }
}

/* --- 25. Heading size, decoupled from heading level ------------------------ */
/* The live site's visual hierarchy runs h2 → h3 → h5 → h6 down a service page.
   Reproducing that with real heading elements skips levels, which is the WCAG
   failure the brief flags. Every top-level section is an h2; these classes
   carry the size instead. */

.h-md { font-size: var(--fs-h3); }
.h-sm { font-size: var(--fs-h4); }
.h-xs { font-size: var(--fs-h5); }

/* --- 26. Paired-column band ----------------------------------------------- */
/* Two sections sharing one band, so short siblings don't each claim a stripe. */

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

/* A 2-up run of cards rather than two sections of prose: the cards are boxes
   with visible edges, so a short one next to a tall one leaves a ragged row.
   `align-items: start` is right for prose columns and wrong for these, and
   the gap tightens to the card gap because these are one device, not two. */
.two-col--cards {
  align-items: stretch;
  gap: var(--gap);
}
.two-col--cards > .iconbox { display: flex; flex-direction: column; }
.two-col--cards > .iconbox .arrow-link { margin-top: auto; padding-top: 16px; }

.plain-list { list-style: none; padding: 0; margin: 0; }

.eyebrow--dark { color: var(--ink); }

/* --- 27. Enquiry panel ----------------------------------------------------- */
/* The enquiry form and the closing call to action share one dark slab rather
   than stacking two near-identical green stripes at the foot of the page. */

.form-panel {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
}
@media (max-width: 900px) { .form-panel { grid-template-columns: 1fr; } }
.form-panel h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.35rem); max-width: 18ch; }
.form-panel > div:first-child p { color: rgb(255 255 255 / 78%); max-width: 44ch; }

/* --- 28. Article hero pill spacing ---------------------------------------- */

.page-hero .pill + h1 { margin-top: 18px; }
.page-hero .post-meta { margin-top: 18px; }
.review-grid--stack { grid-template-columns: 1fr; }

/* --- 29. Site additions ----------------------------------------------------
   Components this build needs that the design pack did not cover. Written in
   the pack's own token vocabulary so they retune with everything else.
   -------------------------------------------------------------------------- */

/* The enquiry honeypot. public/submit.php silently discards any submission
   that fills this field, so it MUST stay unreachable for real users — visible
   here means real enquiries are thrown away with no error shown. Offscreen
   rather than display:none, because some bots skip hidden fields. */
.field-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Validation failures come back from /submit.php as a redirect carrying
   ?error=...; app.js unhides this and writes a plain sentence into it. */
.form-banner {
  background: #fdf1ef;
  border: 1px solid #e2a29c;
  color: #7a2318;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: var(--fs-small);
  line-height: 1.6;
}
.form-banner[hidden] { display: none; }

/* A .ph frame holding a real photograph rather than the empty-state label.
   Positioning is deliberately NOT restated here: section 10 already declares
   `.ph img { position: absolute; inset: 0; object-fit: cover }`, which lifts
   the image above the frame's decorative ::before hatch and ::after dashed
   rule. An override that omits the absolute positioning drops the image
   behind both overlays and the frame reads as empty. This class is a hook
   only — the frame keeps its aspect ratio either way, so swapping the
   placeholder for a real photo never shifts the layout. */
.ph--filled .ph__label { display: none; }

/* Team cards on /about-us/: an icon box whose glyph slot holds a portrait. */
.iconbox--person { display: flex; flex-direction: column; gap: 0.35rem; }
.iconbox--person .ph { margin-bottom: 1rem; }
.iconbox--person .byline__role { margin: 0 0 0.5rem; }

/* --- 30. Client type scale -------------------------------------------------
   Requested sizes, applied sitewide: section headings 21px, subheadings 19px,
   body copy 18px. These override the design pack's fluid clamp() scale from
   section 2, so they are declared last and use the same tokens the rest of
   the sheet reads from — retune here, not in section 2.

   The page title (h1) is deliberately NOT flattened to 21px: it is the one
   element that has to establish which page you are on, and at 21px it would
   be indistinguishable from the section headings beneath it. It is instead
   scaled down proportionally so the hierarchy still reads.
   -------------------------------------------------------------------------- */

:root {
  --fs-body:   18px;
  --fs-lede:   19px;
  --fs-h2:     26px;
  --fs-h3:     19px;
  --fs-h4:     19px;
  --fs-h5:     19px;
  --fs-h1:     clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  --fs-h1-sub: clamp(1.6rem, 1.3rem + 1vw, 2rem);
  --fs-small:  16px;
  --fs-micro:  14px;
}

body { font-size: var(--fs-body); }

h2, .h-md, .h-sm, .h-xs { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4, h5, h6 { font-size: var(--fs-h4); }

/* Body-copy elements that carried their own size in the pack's scale. */
p, li, dd, address, figcaption, .prose p, .prose li, .doc-body p, .doc-body li,
.numrow__body, .iconbox p, .post-card p, .footer__desc, .compliance p, .legal p {
  font-size: var(--fs-body);
}

.lede, .standfirst, .hero__intro, .hero__intro p { font-size: var(--fs-lede); }

/* Labels and meta stay smaller than body copy, or the hierarchy inverts. */
.eyebrow { font-size: var(--fs-micro); }
.post-card__meta, .post-meta, .byline__role, .crumbs, .form-card__note,
.hint, .footer__fca, .copyright, .doc-updated { font-size: var(--fs-small); }

/* The header and footer now carry the firm's own logo rather than the
   design pack's placeholder lockup. */
.brand__logo {
  display: block;
  height: 30px;
  width: auto;
}
.footer__plate .brand__logo {
  height: 52px;
  background: var(--white);
  padding: 10px 14px;
  border-radius: var(--radius);
}

/* The firm's logo is dark green artwork drawn for a white header. The nav is a
   dark forest pill, so the mark sits on a white plate there — the same
   treatment the footer already uses — rather than being recoloured, which
   would alter the brand artwork. */
.nav .brand {
  background: var(--white);
  padding: 8px 14px;
  border-radius: var(--pill);
  display: inline-flex;
  align-items: center;
}
.nav .brand__logo { height: 26px; }

/* --- 31. Full-bleed hero and the inverting nav -----------------------------
   The hero now runs the full width of the viewport and starts at the very top
   of the page, with the floating nav sitting over it. Only the bottom corners
   are rounded, at 30px, so the slab reads as the top of the document rather
   than as a card floating on it.

   Because the nav now sits on a dark hero at rest, it inverts: white pill with
   dark text at the top of the page, returning to the dark pill once the page
   is scrolled. assets/js/app.js adds .is-stuck past a small threshold.
   -------------------------------------------------------------------------- */

.hero-shell,
.page-hero {
  padding: 0;
}

.hero-shell .panel,
.page-hero .panel {
  max-width: none;
  margin-inline: 0;
  border-radius: 0 0 30px 30px;
}

/* Inner content keeps the container measure and clears the floating nav. */
.hero,
.page-hero .panel {
  padding-top: calc(var(--nav-h) + var(--nav-top) + clamp(1.5rem, 4vw, 3rem));
}
.hero {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.page-hero .panel > * {
  max-width: var(--container);
  margin-inline: auto;
  width: 100%;
}
.page-hero .panel {
  padding-inline: var(--gutter);
  padding-bottom: clamp(2.5rem, 5vw, 4.25rem);
}

/* The bloom is anchored to the slab's top-left corner, which is now the corner
   of the viewport — keep it inside the visible area. */
.hero-shell .panel::before,
.page-hero .panel::before { inset: -20% 55% 40% -8%; }

/* --- Nav at rest: white pill, dark text ----------------------------------- */

.nav {
  background: var(--white);
  box-shadow: 0 10px 30px -16px rgb(0 30 24 / 35%);
  transition: background var(--ease), box-shadow var(--ease);
}
.nav .brand { background: transparent; padding: 0; }
.nav .brand__logo { height: 30px; }
.nav__link { color: var(--forest); }
.nav__link:hover,
.nav__link[aria-expanded="true"] { color: var(--forest); background: rgb(0 71 60 / 8%); }
.nav__link[aria-current="page"] { color: var(--accent); }
.nav__toggle { color: var(--forest); }
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after { background: var(--forest); }

/* --- Nav once stuck: back to the dark pill exactly as before --------------- */

.is-stuck .nav {
  background: var(--forest);
  box-shadow: 0 14px 34px -14px rgb(0 30 24 / 55%);
}
.is-stuck .nav .brand {
  background: var(--white);
  padding: 8px 14px;
  border-radius: var(--pill);
}
.is-stuck .nav .brand__logo { height: 26px; }
.is-stuck .nav__link { color: rgb(255 255 255 / 88%); }
.is-stuck .nav__link:hover,
.is-stuck .nav__link[aria-expanded="true"] { color: #fff; background: rgb(255 255 255 / 10%); }
.is-stuck .nav__link[aria-current="page"] { color: var(--accent-light); }
.is-stuck .nav__toggle { color: #fff; }
.is-stuck .nav__toggle span,
.is-stuck .nav__toggle span::before,
.is-stuck .nav__toggle span::after { background: #fff; }

/* --- 32. Accordion motion --------------------------------------------------
   A native <details> has no state between closed and open, so the height is
   animated in assets/js/app.js. These rules cover the parts CSS can own.
   -------------------------------------------------------------------------- */

/* During a close the row stays [open] so its content keeps painting while it
   collapses. Turn the marker back at the start of the gesture instead. */
.accordion details.is-closing summary::after {
  transform: rotate(45deg) translate(-2px, -2px);
}

/* The body fades and lifts slightly as the row opens, so the reveal reads as
   content arriving rather than as a box changing size. Skipped on a closing
   row, which would otherwise fade twice. */
@media (prefers-reduced-motion: no-preference) {
  .js .accordion details[open]:not(.is-closing) > .accordion__body {
    animation: accordion-body 320ms var(--ease-out) both;
  }
}

@keyframes accordion-body {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* --- 33. Accordion type ----------------------------------------------------
   Questions 22px, answers 18px, sitewide. The design pack sized both with
   clamp() well below body copy, which left an answer smaller than the prose
   around it.

   Applied to every .accordion, not only the FAQ block: the same component
   renders the cross-sell product lists on service pages and the tabbed intro
   on /about-us/, and sizing one instance differently from the others would
   read as an inconsistency rather than a distinction.
   -------------------------------------------------------------------------- */

.accordion summary {
  font-size: 22px;
}

.accordion .accordion__body,
.accordion .accordion__body p,
.accordion .accordion__body li {
  font-size: var(--fs-body);
}

/* --- 34. Footer: address pill and larger mark ------------------------------
   The separate "Office" column is gone; the full postal address now sits in
   the contact pill beside the phone and email rows. It is an <address>, not a
   link, so it takes the pill's appearance without the affordances of one —
   no hover shift, no chevron, and no italics from the browser default.
   -------------------------------------------------------------------------- */

.contact-row--static {
  font-style: normal;
  cursor: default;
  align-items: flex-start;
}
.contact-row--static:hover {
  background: none;
  border-color: var(--line-dark);
  transform: none;
}
.contact-row--static svg { margin-top: 2px; }

/* The FCA reference moved out of the removed column and now closes the brand
   block. It is a regulatory identifier, so it stays visible rather than being
   folded into the small print. */
.footer .footer__fca {
  margin: 18px 0 0;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}

/* --- 35. Statcard fit ------------------------------------------------------
   "Advising in Leicester" is the longest of the three captions and was
   wrapping to two lines while the others sat on one, which made the card look
   unbalanced. It was only ~3px short.

   The card is widened by pulling its insets in, and the captions are set to
   never wrap, so the fit holds as the viewport changes rather than being
   tuned to one width. Below 560px the card drops out of the overlay into
   normal flow (see section 11), where wrapping is fine and nowrap would
   overflow — so the rule is bounded to the overlay case.
   -------------------------------------------------------------------------- */

@media (min-width: 561px) {
  .statcard {
    left: clamp(0.4rem, 1vw, 0.7rem);
    right: clamp(0.4rem, 1vw, 0.7rem);
    padding: 18px 2px;
  }
  .statcard > div { padding: 0 clamp(0.45rem, 1vw, 0.85rem); }
  .statcard dd { white-space: nowrap; }
}

/* The copyright and the build credit sit on one centred line. It runs the
   full width of the footer rather than the narrower measure the regulatory
   paragraphs above it use, so the centring reads against the whole footer. */
.footer .copyright {
  text-align: center;
  max-width: none;
  margin-top: 22px;
}

/* The closing CTA slab had no top padding, so the green pill butted straight
   against the band above it. Give it the same vertical rhythm as every other
   section so it reads as a separate block. */
.cta-shell { padding-top: var(--section); }

/* --- 36. Mobile panel, inverted with the pill ------------------------------
   The mobile menu is drawn inside the nav pill itself, so it inherits the
   pill's ground. Section 31 made that ground white at the top of the page,
   which left the submenu links — styled rgb(255 255 255 / 82%) for the
   original dark pill — invisible against it, and the panel's top border the
   same.

   Both states are declared here rather than only patching the light one, so
   the panel always matches whichever ground it is sitting on.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  /* At rest: light pill, so the panel's contents are dark. */
  .nav__panel { border-top-color: var(--line); }
  .nav__menu a { color: var(--forest); }
  .nav__menu a:hover { background: rgb(0 71 60 / 8%); color: var(--forest); }
  .nav__link[aria-current="page"] { color: var(--accent); }

  /* Scrolled: the pill goes dark again, so the panel follows it back. */
  .is-stuck .nav__panel { border-top-color: var(--line-dark); }
  .is-stuck .nav__menu a { color: rgb(255 255 255 / 82%); }
  .is-stuck .nav__menu a:hover { background: rgb(255 255 255 / 8%); color: #fff; }
  .is-stuck .nav__link[aria-current="page"] { color: var(--accent-light); }
}

/* A prose section rendered as the dark slab (page.mjs's `panelSections`).
   .cta and .form-panel are grids for their own two-part layouts; this one is a
   single centred column, so it needs the slab's padding without them. */
.panel--prose {
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  /* Line the slab up with the page content rather than with the band. The
     container is 1240px INCLUDING .wrap's gutter, so the text inside a normal
     band actually occupies 1240 minus two gutters — subtract them here and
     the panel's edges sit directly under the cards above it. */
  max-width: calc(var(--container) - (var(--gutter) * 2));
  margin-inline: auto;
}

/* A panel section sitting mid-page, between two bands that already carry
   their own vertical padding. Without this it adds a third helping and the
   slab drifts away from the content above it — and the imbalance is visible
   rather than symmetric, because the band below paints a colour at its edge
   while the band above just continues in white.

   Zero here leaves exactly one band's padding on each side. The closing CTA
   at the foot of a page keeps its own padding: the band above THAT one is
   coloured, so the slab would otherwise touch the colour boundary. */
.cta-shell--inline {
  /* The band above ends with its own bottom padding, so the slab needs none
     of its own on top — adding it stacked two helpings and pushed the slab
     away from the content it follows.
     It DOES need padding below: the next band paints its background from its
     own edge, so with nothing here the colour butts straight against the
     slab. One helping each side, and the white space reads even. */
  padding-top: 0;
  padding-bottom: var(--section);
}

/* ...but only where that band above really is white. A COLOURED band paints
   its background out to its own edge, so its padding is inside the colour and
   the slab ends up touching the colour boundary with no white space at all —
   the same fault the closing CTA keeps its padding to avoid. Give the slab
   one helping back whenever the band it follows is painted. */
.band--cream + .cta-shell--inline,
.band--sage + .cta-shell--inline,
.band--stone + .cta-shell--inline,
.band--forest + .cta-shell--inline {
  padding-top: var(--section);
}

/* Every photograph beside a text column runs the full height of its section
   — from the top of the heading to the last line of prose — rather than
   holding an aspect ratio and leaving the column half empty. Declared after
   section 11 so it overrides .split--top's start alignment.

   The floor matters: below 860px the split collapses to one column and the
   row no longer has a facing column to take its height from, so the frame
   falls back to min-height. */
.split--stretch { align-items: stretch; }
.ph--fill {
  aspect-ratio: auto;
  height: 100%;
  min-height: 320px;
}


/* --- 37. Ledger list -------------------------------------------------------
   A section whose list carries the substance: each item becomes its own row,
   ruled off from the next, with the label set as the row's own heading. Used
   where a tick list of six two-line items would read as a wall of ticks.

   The rule sits BETWEEN rows only — a line above the first would fight the
   heading opposite it, and one below the last would close a list that has no
   footer. --line is redefined by .band--sage and .band--forest, so the rules
   take the right contrast on every band without a per-band override. */

.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li + li {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.ledger__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--forest);
  margin: 0 0 0.4rem;
}
.ledger__desc { margin: 0; }
.band--forest .ledger__label { color: var(--ink-on-dark); }

/* --- 39. HTML sitemap ------------------------------------------------------
   The human-readable index at /sitemap/. Columns rather than one long list,
   because the site has 134 pages and a single column runs to several screens
   on a phone. Uses the same auto-fit pattern as the rest of the sheet so it
   collapses to one column on a narrow viewport without its own breakpoint. */

.sitemap-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 2rem;
}
.sitemap-group h2 { margin-bottom: 0.75rem; }
.sitemap-group ul { display: grid; gap: 0.4rem; }
.sitemap-group li { margin: 0; }
.sitemap-group a { text-decoration: none; }
.sitemap-group a:hover { text-decoration: underline; }