/* ==========================================================================
   SOUTH GELDARD LAWYERS — Website Stylesheet
   Static prototype. Mobile-first. Brand: navy #161D41 / indigo #273A97 / white.
   ========================================================================== */

/* 1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* One checkmark, used everywhere. An SVG mask rather than rotated borders:
     borders inherited backgrounds from sibling bullet rules and rendered as a
     filled diagonal block. A mask also stays crisp at any size. */
  --tick: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  /* Brand */
  --navy:        #161D41;   /* primary   — header, footer, dark bands       */
  --navy-deep:   #0F1430;   /* deeper cut for topbar / footer base          */
  --navy-soft:   #1F2755;   /* raised surfaces on navy (dropdowns, cards)   */
  --indigo:      #273A97;   /* secondary — buttons, links, rules, accents   */
  --indigo-dark: #1E2D78;   /* hover                                        */
  --indigo-lite: #9FB0F0;   /* accent text ON navy (AA contrast ≈ 6.4:1)    */
  --paper:       #FFFFFF;   /* tertiary                                     */

  /* Neutrals derived from the navy so greys never look muddy against it */
  --ink:         #1B2033;
  --ink-soft:    #565E7A;
  --wash:        #F4F5FA;   /* off-white section band                       */
  --wash-deep:   #E7E9F5;
  --line:        #DCDFEE;

  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  --container: 1200px;
  --narrow:    760px;
  --radius:    3px;
  --shadow-sm: 0 2px 10px rgba(22,29,65,.06);
  --shadow-md: 0 12px 34px rgba(22,29,65,.10);
  --t:         .25s ease;
}

/* 2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.65;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 400;
  line-height: 1.15; color: var(--navy); letter-spacing: -.01em;
}
/* Visible focus everywhere — WCAG 2.2 AA (2.4.11 focus not obscured). */
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 2px; }
.section--navy :focus-visible, .site-footer :focus-visible { outline-color: var(--indigo-lite); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--paper); color: var(--navy);
  padding: 12px 20px; font-weight: 700; transition: top var(--t);
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* 3. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: var(--narrow); }

.section        { padding: 64px 0; }
.section--tight { padding: 44px 0; }
.section--wash  { background: var(--wash); }
.section--navy  { background: var(--navy); color: #E3E6F5; }
.section--navy h2, .section--navy h3 { color: #fff; }

.eyebrow {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--indigo); margin-bottom: 14px;
}
.section--navy .eyebrow, .site-footer .eyebrow { color: var(--indigo-lite); }
.hero .eyebrow { color: #fff; }

.section-heading { max-width: 720px; margin-bottom: 40px; }
.section-heading h2 { font-size: clamp(28px, 5vw, 40px); }
@media (min-width: 700px) {
  .section-heading h2.heading--nowrap { white-space: nowrap; }
}
.section-heading p  { color: var(--ink-soft); margin-top: 16px; }
.section--navy .section-heading p { color: #B9C0DC; }

/* Hairline rule system — the recurring brand device in place of a warm accent */
.rule { width: 48px; height: 3px; background: var(--indigo); border: 0; margin-bottom: 22px; }
.section--navy .rule { background: var(--indigo-lite); }

/* 4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 16px 30px; border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: var(--t); text-align: center;
}
.btn--primary        { background: var(--indigo); color: #fff; }
.btn--primary:hover  { background: var(--indigo-dark); }
.btn--ghost          { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--ghost:hover    { background: #fff; color: var(--navy); border-color: #fff; }
.btn--outline        { background: transparent; color: var(--indigo); border-color: var(--indigo); }
.btn--outline:hover  { background: var(--indigo); color: #fff; }
.btn--block          { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--indigo);
}
.link-arrow svg { transition: transform var(--t); }
.link-arrow:hover { color: var(--indigo-dark); }
.link-arrow:hover svg { transform: translateX(4px); }

/* 5. HEADER / NAV
   -------------------------------------------------------------------------- */
.topbar { background: var(--navy-deep); color: #A6AECC; font-size: 12.5px; }
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 40px; flex-wrap: wrap; padding: 6px 0;
}
.topbar a:hover { color: #fff; }
.topbar__item { display: inline-flex; align-items: center; gap: 7px; }
.topbar__item svg { flex: none; opacity: .75; }

.site-header {
  background: var(--navy); position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; }

/* Base logo rules live in section 25 (brand logo artwork). */

.nav__menu { display: none; }
.nav__cta  { display: none; }

.nav__toggle {
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px;
}
.nav__toggle span { display: block; height: 2px; background: #fff; transition: var(--t); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  display: none; background: var(--navy-soft); border-top: 1px solid rgba(255,255,255,.08);
}
.mobile-nav.is-open { display: block; }
.mobile-nav a { display: block; color: #E3E6F5; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.07); }
.mobile-nav a:hover { background: rgba(255,255,255,.06); }
.mobile-nav .sub a { padding-left: 38px; font-size: 14.5px; color: #B9C0DC; }
.mobile-nav__cta { padding: 18px 20px; }

@media (min-width: 1024px) {
  .nav { height: 86px; }
  .nav__toggle, .mobile-nav { display: none !important; }
  .nav__menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
  .nav__menu > li { position: relative; }
  .nav__menu > li > a {
    display: block; padding: 12px 14px; color: #E3E6F5;
    font-size: 14px; font-weight: 600; border-radius: var(--radius); transition: var(--t);
  }
  .nav__menu > li > a:hover, .nav__menu > li.current > a { color: #fff; background: rgba(255,255,255,.08); }
  .nav__menu > li.current > a { box-shadow: inset 0 -2px 0 var(--indigo-lite); }
  .nav__sub {
    position: absolute; top: 100%; left: 0; min-width: 250px;
    background: var(--navy-soft); border: 1px solid rgba(255,255,255,.1);
    box-shadow: var(--shadow-md); padding: 8px 0;
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: var(--t);
  }
  .nav__sub a { display: block; padding: 10px 18px; font-size: 14px; color: #C7CDE6; }
  .nav__sub a:hover { background: rgba(255,255,255,.08); color: #fff; }
  .has-children:hover .nav__sub,
  .has-children:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__cta { display: inline-flex; margin-left: 14px; padding: 13px 22px; font-size: 12px; }
}

/* 6. HERO
   -------------------------------------------------------------------------- */
.hero { background: var(--navy); color: #E3E6F5; padding: 56px 0 0; position: relative; overflow: hidden; }
/* Subtle indigo wash — gives depth without introducing a fourth colour. */
.hero::before {
  content: ""; position: absolute; inset: auto -20% -40% 40%;
  height: 520px; background: radial-gradient(circle, rgba(39,58,151,.55), transparent 68%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: clamp(30px, 6vw, 48px); letter-spacing: -.02em; }
.hero h1 em { font-style: normal; color: var(--indigo-lite); }
.hero p { margin-top: 20px; font-size: clamp(16px, 2.2vw, 19px); color: #B9C0DC; max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__actions .btn { flex: 1 1 220px; }

/* Trust strip sits at the fold edge — proof before the visitor has to scroll far. */
.hero__proof {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  margin-top: 48px; background: rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero__proof div { background: var(--navy); padding: 12px 9px; }
.hero__proof dt { font-family: var(--font-display); font-size: 30px; color: #fff; line-height: 1; }
.hero__proof dd { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8E97BC; margin-top: 8px; }
.hero__proof div.hero__proof-highlight { background: #B6A477; }
.hero__proof-highlight dt { color: var(--navy); }
.hero__proof-highlight dd { color: rgba(22,29,65,.75); }
@media (min-width: 768px) {
  .hero { padding-top: 84px; }
  .hero__proof { grid-template-columns: repeat(4, 1fr); }
  .hero__actions .btn { flex: 0 0 auto; }
}

/* 7. INTENT SELECTOR — the primary wayfinding device
   -------------------------------------------------------------------------- */
/* PRACTICE AREA CARDS
   Every area is visible at once — no tabs, no "view more". A visitor whose
   matter is the eighth item should see it without a click.
   -------------------------------------------------------------------------- */
.pa-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .pa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .pa-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .pa-grid { grid-template-columns: repeat(4, 1fr); } }

.pa-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: 0 14px 0 0; overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.pa-card:hover, .pa-card:focus-within {
  transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--wash-deep);
}
/* Whole card is the click target; the heading link carries the accessible name. */
.pa-card__link::after { content: ""; position: absolute; inset: 0; }
.pa-card__body { position: relative; padding: 20px; display: flex; flex-direction: column; flex: 1; }

.pa-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.pa-card__media .img-ph { width: 100%; height: 100%; aspect-ratio: auto; border: 0; }
/* The indigo bar under the image is the brand's recurring rule, doing structural
   work here: it separates image from text and ties the grid together. */
.pa-card__media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 6px; background: var(--indigo); transition: height var(--t);
}
.pa-card:hover .pa-card__media::after { height: 10px; }

.pa-card h3 { font-size: 19px; line-height: 1.25; }
.pa-card h3 a { color: var(--indigo); display: inline; }
.pa-card h3 .tri {
  display: inline-block; margin-left: 7px; color: var(--indigo);
  transition: transform var(--t); vertical-align: baseline;
}
.pa-card:hover h3 .tri { transform: translateX(4px); }
.pa-card p { font-size: 14.5px; color: var(--ink-soft); margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .pa-card, .pa-card__media::after, .pa-card h3 .tri { transition: none; }
  .pa-card:hover { transform: none; }
}

/* 8. SPLIT / MEDIA
   -------------------------------------------------------------------------- */
.split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; } }
.split--flip .split__media { order: -1; }

/* Labelled placeholder blocks — swap for optimised WebP at build time. */
.img-ph {
  background: var(--wash-deep); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  aspect-ratio: 4 / 3; padding: 20px; border: 1px solid var(--line);
}
.img-ph--tall { aspect-ratio: 3 / 4; }
.img-ph--dark { background: var(--navy-soft); color: #8E97BC; border-color: rgba(255,255,255,.12); }

/* 9. HERITAGE RAIL
   -------------------------------------------------------------------------- */
.rail { display: grid; gap: 0; counter-reset: milestone; }
.rail__item {
  padding: 24px 0 24px 26px; border-left: 2px solid rgba(255,255,255,.18); position: relative;
}
.rail__item::before {
  content: ""; position: absolute; left: -6px; top: 32px;
  width: 10px; height: 10px; background: var(--indigo-lite); border-radius: 50%;
}
.rail__year {
  font-family: var(--font-display); font-size: 26px; color: #fff; display: block; line-height: 1;
}
.rail__item p { color: #B9C0DC; margin-top: 10px; font-size: 15px; }
@media (min-width: 860px) {
  .rail { grid-template-columns: repeat(4, 1fr); }
  .rail__item { border-left: 0; border-top: 2px solid rgba(255,255,255,.18); padding: 28px 20px 0 0; }
  .rail__item::before { left: 0; top: -6px; }
}

/* 10. CARDS / PEOPLE
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--3, .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.person { border: 1px solid var(--line); background: #fff; transition: var(--t); }
.person:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.person__body { padding: 20px; }
.person__body h3 { font-size: 19px; }
.person__role { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--indigo); margin: 8px 0 12px; }
.person__body p { font-size: 14.5px; color: var(--ink-soft); }

.quote-card {
  background: #fff; border: 1px solid var(--line);
  border-top: 3px solid var(--indigo); padding: 26px;
}
.quote-card blockquote { font-family: var(--font-display); font-size: 18px; color: var(--navy); line-height: 1.5; }
.quote-card figcaption { margin-top: 16px; font-size: 13.5px; color: var(--ink-soft); }
.stars { color: var(--indigo); letter-spacing: 2px; font-size: 14px; margin-bottom: 14px; }

/* 11. KEY FACTS / FAQ / PROSE
   -------------------------------------------------------------------------- */
.prose h2 { font-size: clamp(26px, 4.4vw, 34px); margin: 44px 0 16px; }
.prose h3 { font-size: 21px; margin: 32px 0 12px; }
.prose p, .prose li { color: #2E3450; }
.prose .lede { font-family: var(--font-display); font-size: 19px; line-height: 1.5; color: var(--ink-soft); }
.prose p { margin-bottom: 16px; }
.prose ul { margin: 0 0 20px; padding-left: 0; }
.prose ul li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 10px; height: 2px; background: var(--indigo);
}
.prose a { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }

.facts { background: var(--navy); color: #E3E6F5; padding: 28px; }
.facts h2 { color: #fff; font-size: 20px; margin: 0 0 18px; }
.facts dl { display: grid; gap: 14px; }
.facts dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--indigo-lite); }
.facts dd { font-size: 15.5px; color: #fff; }

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 18px; color: var(--navy);
  padding: 20px 44px 20px 0; position: relative;
}
.faq__q::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--indigo); font-family: var(--font-body); font-size: 22px; transition: var(--t);
}
.faq__q[aria-expanded="true"]::after { content: "–"; }
.faq__a { padding: 0 0 22px; color: var(--ink-soft); max-width: 68ch; }
.faq__a[hidden] { display: none; }

.legal-disclaimer {
  background: var(--wash); border-left: 3px solid var(--indigo);
  padding: 18px 20px; font-size: 13.5px; color: var(--ink-soft); margin-top: 44px;
}

/* 12. CTA BAND & FORM
   -------------------------------------------------------------------------- */
.cta-band { background: var(--navy); color: #E3E6F5; padding: 56px 0; text-align: center; }
.cta-band h2 { color: #fff; font-size: clamp(26px, 5vw, 38px); }
.cta-band p { color: #B9C0DC; margin: 16px auto 0; max-width: 56ch; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }

.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--indigo); }
.form-hint { font-size: 13px; color: var(--ink-soft); margin-top: 14px; }

/* Sticky mobile action bar — call/enquire always one thumb away. */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255,255,255,.2); box-shadow: 0 -4px 20px rgba(22,29,65,.18);
}
.mobile-cta a {
  background: var(--navy); color: #fff; text-align: center; padding: 15px 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.mobile-cta a + a { background: var(--indigo); }
@media (min-width: 1024px) { .mobile-cta { display: none; } }
body { padding-bottom: 54px; }
@media (min-width: 1024px) { body { padding-bottom: 0; } }

/* 13. PAGE HEADER & BREADCRUMBS
   -------------------------------------------------------------------------- */
.page-head { background: var(--navy); color: #E3E6F5; padding: 44px 0 52px; }
.page-head h1 { color: #fff; font-size: clamp(30px, 6vw, 48px); }
.page-head p { color: #B9C0DC; margin-top: 16px; max-width: 62ch; }
.crumbs { font-size: 13px; color: #8E97BC; margin-bottom: 20px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(255,255,255,.3); }

/* 14. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-deep); color: #A6AECC; padding: 56px 0 0; font-size: 14.5px; }
.site-footer h2 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 18px; font-family: var(--font-body); }
.footer__grid { display: grid; gap: 36px; }
@media (min-width: 700px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.site-footer li { margin-bottom: 10px; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__bar {
  margin-top: 48px; border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0 30px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13px;
}

/* 15. MOTION — reveal on scroll, disabled for reduced-motion users
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   16. PRACTICE-AREA PAGE COMPONENTS
   Long legal pages fail when they're an undifferentiated column of prose.
   These components break the scroll into scannable units and put an action
   within reach at every stage.
   ========================================================================== */

/* --- 16.1 Page hero with inline conversion widget ------------------------ */
.pa-hero { background: var(--navy); color: #E3E6F5; padding: 36px 0 44px; }
.pa-hero__grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 940px) { .pa-hero__grid { grid-template-columns: 1.25fr .85fr; gap: 48px; } }
.pa-hero h1 { color: #fff; font-size: clamp(30px, 5.6vw, 50px); }
.pa-hero__lede { color: #C3CAE4; font-size: clamp(16px, 2.1vw, 19px); margin-top: 18px; max-width: 56ch; }
.pa-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* The widget: a 3-question qualifier. Lower commitment than a contact form,
   so it converts visitors who aren't ready to "book" anything yet. */
.widget {
  background: #fff; color: var(--ink); border-radius: 0 18px 0 0;
  box-shadow: var(--shadow-md); overflow: hidden;
}
.widget__head { background: var(--indigo); color: #fff; padding: 20px 24px; }
.widget__head h2 { color: #fff; font-size: 21px; }
.widget__head p { font-size: 14px; color: #D6DCF7; margin-top: 6px; }
.widget__body { padding: 22px 24px 26px; }
.widget__step { display: none; }
.widget__step.is-active { display: block; }
.widget__q { font-family: var(--font-display); font-size: 18px; color: var(--navy); margin-bottom: 16px; }
.widget__opts { display: grid; gap: 10px; }
.widget__opt {
  font: inherit; font-size: 15px; text-align: left; cursor: pointer;
  background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 16px; color: var(--ink); transition: var(--t);
}
.widget__opt:hover { border-color: var(--indigo); background: #fff; color: var(--indigo); }
.widget__progress { display: flex; gap: 6px; margin-bottom: 18px; }
.widget__progress span { height: 4px; flex: 1; background: var(--line); border-radius: 2px; }
.widget__progress span.is-done { background: var(--indigo); }
.widget__result h3 { font-size: 20px; margin-bottom: 10px; }
.widget__result p { font-size: 15px; color: var(--ink-soft); margin-bottom: 18px; }
.widget__restart {
  background: none; border: 0; font: inherit; font-size: 13.5px;
  color: var(--indigo); text-decoration: underline; cursor: pointer; margin-top: 14px; padding: 0;
}

/* --- 16.2 Sticky on-this-page jump menu ---------------------------------
   A horizontal link strip stops working past about six sections. This is a
   trigger naming the section you're currently in, opening a menu anchored
   beneath it. Doubles as a position indicator, not just navigation. */
.onpage {
  position: sticky; top: 72px; z-index: 80;
  background: var(--wash); border-bottom: 1px solid var(--line);
}
@media (min-width: 1024px) { .onpage { top: 86px; } }
.onpage__inner { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 8px 0; }
.onpage__label {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); flex: none; display: none;
}
@media (min-width: 640px) { .onpage__label { display: block; } }

/* Anchor the menu to the trigger rather than the full container width. */
.onpage__jump { position: relative; flex: 1 1 auto; min-width: 0; }
@media (min-width: 900px) { .onpage__jump { flex: 0 1 380px; } }

.onpage__trigger {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: 15px; font-weight: 600; color: var(--navy);
  padding: 11px 14px; cursor: pointer; text-align: left; transition: var(--t);
}
.onpage__trigger:hover { border-color: var(--indigo); }
.onpage__trigger[aria-expanded="true"] { border-color: var(--indigo); border-radius: 3px 3px 0 0; }
/* Step counter: "3 / 13" tells you how far through the page you are. */
.onpage__count {
  flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--indigo); background: var(--wash); border-radius: 3px; padding: 4px 7px;
  font-variant-numeric: tabular-nums;
}
.onpage__current { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onpage__trigger::after {
  content: ""; flex: none; width: 8px; height: 8px;
  border-right: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo);
  transform: rotate(45deg) translate(-2px,-2px); transition: transform var(--t);
}
.onpage__trigger[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-3px,-3px); }

.onpage .btn { flex: none; margin-left: auto; padding: 12px 22px; font-size: 12px; }

/* Menu: anchored under the trigger, two columns, numbered so 13 items scan
   as an ordered contents list rather than a scattered grid. */
.onpage__panel {
  position: absolute; top: 100%; left: 0; z-index: 90;
  width: min(620px, calc(100vw - 40px));
  background: #fff; border: 1px solid var(--indigo); border-top: 0;
  border-radius: 0 0 8px 8px; box-shadow: var(--shadow-md);
  padding: 8px; display: grid; gap: 1px; grid-template-columns: 1fr;
  max-height: 58vh; overflow-y: auto; overscroll-behavior: contain;
}
@media (min-width: 620px) { .onpage__panel { grid-template-columns: 1fr 1fr; } }
.onpage__panel[hidden] { display: none; }
.onpage__panel a {
  display: flex; align-items: baseline; gap: 11px;
  padding: 9px 11px; border-radius: 3px;
  font-size: 14.5px; line-height: 1.35; color: var(--navy); transition: var(--t);
  counter-increment: jump;
}
.onpage__panel a::before {
  content: counter(jump, decimal-leading-zero);
  flex: none; font-family: var(--font-display); font-size: 11.5px;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.onpage__panel { counter-reset: jump; }
.onpage__panel a:hover { background: var(--wash); color: var(--indigo); }
.onpage__panel a:hover::before { color: var(--indigo); }
.onpage__panel a.is-current { background: var(--indigo); color: #fff; font-weight: 700; }
.onpage__panel a.is-current::before { color: rgba(255,255,255,.75); }

/* Reading progress — a hairline under the bar. Free position feedback. */
.onpage__progress {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  background: var(--indigo); width: 0; transition: width .15s linear;
}

/* Offset anchor targets so the sticky bars don't cover section headings. */
.prose h2[id], .prose h3[id], section[id] { scroll-margin-top: 150px; }

/* --- 16.3 Callout boxes -------------------------------------------------- */
.callout {
  background: var(--wash); border-left: 4px solid var(--indigo);
  border-radius: 0 8px 8px 0; padding: 24px 26px; margin: 32px 0;
}
.callout h3 { font-size: 19px; margin: 0 0 12px; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout--navy { background: var(--navy); border-left-color: var(--indigo-lite); color: #fff; }
.callout--navy h3 { color: #fff; }
.callout--navy p, .callout--navy li { color: #fff; }
.callout--navy li::before { background: var(--indigo-lite); }

/* Inline mid-article CTA — catches people who've read enough to be convinced. */
.inline-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  background: var(--navy); color: #fff; border-radius: 0 14px 0 0;
  padding: 24px 26px; margin: 36px 0;
}
.inline-cta__text { flex: 1 1 260px; }
.inline-cta strong { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 400; }
.inline-cta span { font-size: 14.5px; color: #B9C0DC; }

/* --- 16.4 Two-column check list ----------------------------------------- */
.checks { display: grid; gap: 12px 28px; margin: 22px 0 28px; }
@media (min-width: 700px) { .checks { grid-template-columns: 1fr 1fr; } }
.checks li { position: relative; padding-left: 30px; font-size: 15.5px; list-style: none; }


/* --- 16.5 Numbered process stepper (accordion) --------------------------- */
.steps { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 26px 0; }
.step + .step { border-top: 1px solid var(--line); }
.step__q {
  width: 100%; display: flex; align-items: center; gap: 16px; text-align: left;
  background: #fff; border: 0; cursor: pointer; padding: 18px 20px;
  font-family: var(--font-display); font-size: 17.5px; color: var(--navy); transition: var(--t);
}
.step__q:hover { background: var(--wash); }
.step__n {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--wash); color: var(--indigo); border: 1.5px solid var(--line);
  display: grid; place-items: center; font-family: var(--font-body);
  font-size: 14px; font-weight: 700; transition: var(--t);
}
.step__q[aria-expanded="true"] .step__n { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.step__q::after {
  content: "+"; margin-left: auto; color: var(--indigo);
  font-family: var(--font-body); font-size: 22px; line-height: 1;
}
.step__q[aria-expanded="true"]::after { content: "\2013"; }
.step__a { padding: 0 20px 22px 70px; color: var(--ink-soft); font-size: 15.5px; }
.step__a[hidden] { display: none; }

/* --- 16.6 Related links grid -------------------------------------------- */
/* Related links sit on the article's left edge and stay in a readable
   measure rather than stretching the full container width. */
.rel-grid { display: grid; gap: 0 44px; max-width: 900px; }
@media (min-width: 700px) { .rel-grid { grid-template-columns: 1fr 1fr; } }
.rel-grid a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  font-size: 15.5px; color: var(--navy); transition: var(--t);
}
.rel-grid a:hover { color: var(--indigo); padding-left: 8px; }
.rel-grid a::after { content: "\203A"; color: var(--indigo); font-size: 20px; }

/* ==========================================================================
   17. FAMILY LAW PAGE COMPONENTS
   ========================================================================== */

/* --- 17.1 Quick exit -----------------------------------------------------
   Standard safety practice on family violence content: a visible, always-
   available way to leave the page fast. Sits above all other fixed UI. */
.quick-exit {
  position: fixed; top: 0; right: 0; z-index: 200;
  background: #8E1F2F; color: #fff; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 0 0 0 8px;
  display: inline-flex; align-items: center; gap: 7px;
}
.quick-exit:hover { background: #741926; }
.safety-note {
  background: #FBF0F1; border-left: 4px solid #8E1F2F;
  padding: 16px 20px; font-size: 14px; color: #4A2027; margin: 0 0 8px;
  border-radius: 0 6px 6px 0;
}
.safety-note strong { color: #8E1F2F; }

/* --- 17.2 Alert box (deadlines, things that expire) ---------------------- */
.alert {
  display: flex; gap: 16px; align-items: flex-start;
  background: #EDF0FB; border: 1px solid #C4CDEE; border-left: 4px solid var(--indigo);
  border-radius: 0 8px 8px 0; padding: 20px 24px; margin: 32px 0;
}
.alert__icon {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--indigo); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 16px;
}
.alert h3 { font-size: 18px; margin: 0 0 8px; color: var(--navy); }
.alert p, .alert li { color: #2A3157; font-size: 15px; }
.alert p:last-child, .alert ul:last-child { margin-bottom: 0; }
.alert strong { color: var(--navy); }

/* --- 17.3 Comparison table ----------------------------------------------- */
.cmp { width: 100%; border-collapse: collapse; margin: 24px 0 32px; font-size: 15px; }
.cmp caption { text-align: left; font-size: 14px; color: var(--ink-soft); padding-bottom: 12px; }
.cmp th, .cmp td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { background: var(--navy); color: #fff; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.cmp tbody th { font-weight: 700; color: var(--navy); background: var(--wash); width: 34%; }
.cmp tbody tr:hover td { background: var(--wash); }
/* Tables scroll rather than squash on small screens. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .cmp { min-width: 520px; }

/* --- 17.4 Pathway cards -------------------------------------------------- */
.paths { display: grid; gap: 16px; margin: 26px 0 32px; }
@media (min-width: 760px) { .paths { grid-template-columns: repeat(2, 1fr); } }
.path {
  border: 1px solid var(--line); border-top: 4px solid var(--indigo);
  padding: 22px; background: #fff; display: flex; flex-direction: column;
}
.path__tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--indigo); margin-bottom: 10px;
}
.path h3 { font-size: 19px; margin-bottom: 10px; }
.path p { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 12px; }
.path__meta {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--navy);
}
.path__meta strong { color: var(--indigo); }
/* The fourth path (court) is visually de-emphasised — it's the last resort,
   and the design should say so. */
.path--last { border-top-color: var(--ink-soft); background: var(--wash); }
.path--last .path__tag { color: var(--ink-soft); }

/* ==========================================================================
   18. STICKY ARTICLE SIDEBAR
   The sidebar's job is to carry the action, not to repeat the article.
   ========================================================================== */

/* Article layouts need top alignment so the sidebar can stick. */
.split--article { align-items: start; }

.pa-sidebar { position: static; }
@media (min-width: 900px) {
  .pa-sidebar {
    position: sticky;
    /* header (86) + on-page bar (58) + breathing room */
    top: 160px;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .pa-sidebar::-webkit-scrollbar { width: 6px; }
  .pa-sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
}

/* --- 18.1 Primary action card ------------------------------------------- */
.sb-cta { background: var(--navy); color: #E3E6F5; padding: 0; border-radius: 0 14px 0 0; overflow: hidden; }
.sb-cta h2 { color: #fff; font-size: 20px; line-height: 1.25; }
.sb-cta__lawyer-photo { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.sb-cta__body { padding: 20px 24px 24px; }
.sb-cta__lawyer-name { margin-bottom: 18px; }
.sb-cta__lawyer-name strong { color: #fff; font-size: 15px; font-weight: 700; }
.sb-cta__lawyer-name span { font-size: 14px; color: #B9C0DC; }
.sb-cta__lawyer-name span::before { content: ", "; }
.sb-cta__sub { font-size: 14px; color: #B9C0DC; margin: 10px 0 18px; }
.sb-cta .btn { width: 100%; }
.sb-cta .btn + .btn { margin-top: 10px; }
.sb-cta__reassure {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: 13px; color: #B9C0DC;
}
.sb-cta__reassure span { display: flex; align-items: flex-start; gap: 8px; }
.sb-cta__reassure span::before {
  content: ""; flex: none; margin-top: 5px; width: 13px; height: 7px;
  border-left: 2px solid var(--indigo-lite); border-bottom: 2px solid var(--indigo-lite);
  transform: rotate(-45deg);
}

/* --- 18.2 Deadline mini-tool --------------------------------------------
   Answers the single highest-stakes question on the page, in the one place
   that stays on screen while you read. */
.sb-tool { border: 1px solid var(--line); border-top: 3px solid var(--indigo); padding: 20px; background: #fff; }
.sb-tool h2 { font-size: 16px; font-family: var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.sb-tool p.sb-tool__hint { font-size: 13.5px; color: var(--ink-soft); margin: 8px 0 14px; }
.sb-tool label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.sb-tool select, .sb-tool input {
  width: 100%; font: inherit; font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.sb-tool select:focus, .sb-tool input:focus { border-color: var(--indigo); }
.sb-tool__row + .sb-tool__row { margin-top: 12px; }
.sb-tool__out {
  margin-top: 16px; padding: 14px 16px; background: var(--wash);
  border-left: 3px solid var(--indigo); border-radius: 0 6px 6px 0; font-size: 14px;
}
.sb-tool__out strong { display: block; font-family: var(--font-display); font-size: 18px; color: var(--navy); margin-bottom: 4px; }
/* Urgent state: deeper indigo tint + heavier rule, rather than a new hue. */
.sb-tool__out.is-warn { background: #E3E8F9; border-left-width: 5px; border-left-color: var(--indigo); color: #2A3157; }
.sb-tool__out.is-warn strong { color: var(--navy); }
.sb-tool__out .btn { margin-top: 12px; width: 100%; }

/* --- 18.3 Compact collapsible blocks ------------------------------------ */
.sb-block { border: 1px solid var(--line); background: #fff; }
.sb-block + .sb-block { border-top: 0; }
.sb-block__q {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  background: #fff; border: 0; cursor: pointer; padding: 15px 18px;
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  letter-spacing: .04em; color: var(--navy); transition: var(--t);
}
.sb-block__q:hover { background: var(--wash); }
.sb-block__q::after { content: "+"; margin-left: auto; color: var(--indigo); font-size: 20px; line-height: 1; }
.sb-block__q[aria-expanded="true"]::after { content: "\2013"; }
.sb-block__a { padding: 0 18px 18px; font-size: 14px; }
.sb-block__a[hidden] { display: none; }
.sb-block__a dl { display: grid; gap: 12px; }
.sb-block__a dt { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.sb-block__a dd { color: var(--navy); font-weight: 600; }
.sb-block__a ul li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sb-block__a ul li:last-child { border-bottom: 0; }
.sb-block__a ul li span { color: var(--ink-soft); font-size: 13.5px; }
.sb-block__a ul li a { color: var(--indigo); font-weight: 700; white-space: nowrap; }

/* Support block reads as help, not as legal marketing. */
.sb-block--support .sb-block__q { color: #8E1F2F; }
.sb-block--support .sb-block__q::after { color: #8E1F2F; }

.sb-stack > * + * { margin-top: 16px; }

/* ==========================================================================
   19. LEAD MAGNET, SIDEBAR NAV, INLINE FORM, ARTICLES, FUNDING
   ========================================================================== */

/* --- 19.1 Guide download (lead magnet) ----------------------------------- */
.sb-guide { background: var(--indigo); color: #fff; padding: 0; overflow: hidden; border-radius: 0 14px 0 0; }
.sb-guide__cover {
  background: var(--navy); padding: 22px 20px; display: flex; align-items: center; gap: 16px;
}
.sb-guide__doc {
  flex: none; width: 54px; height: 68px; background: #fff; position: relative;
  box-shadow: var(--shadow-md); display: grid; place-items: center;
}
/* Folded corner — cheap way to read as "document" without an image. */
.sb-guide__doc::after {
  content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px;
  background: linear-gradient(225deg, var(--wash-deep) 50%, transparent 50%);
}
.sb-guide__doc span {
  font-family: var(--font-display); font-size: 10px; line-height: 1.15;
  color: var(--navy); text-align: center; padding: 0 6px;
}
.sb-guide__cover p { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--indigo-lite); }
.sb-guide__cover h2 { color: #fff; font-size: 19px; margin-top: 6px; line-height: 1.2; }
.sb-guide__body { padding: 18px 20px 20px; }
.sb-guide__body p { font-size: 14px; color: #D6DCF7; margin-bottom: 14px; }
.sb-guide__body .btn { width: 100%; background: #fff; color: var(--indigo); }
.sb-guide__body .btn:hover { background: var(--wash); }
.sb-guide__meta { font-size: 12px; color: #B6C1EE; margin-top: 10px; text-align: center; }

/* --- 19.2 Sidebar topic nav ---------------------------------------------- */
.sb-nav { border: 1px solid var(--line); background: #fff; }
.sb-nav h2 {
  font-family: var(--font-body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); padding: 16px 18px 12px; border-bottom: 1px solid var(--line);
}
.sb-nav a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 18px; font-size: 14.5px; color: var(--navy);
  border-bottom: 1px solid var(--line); transition: var(--t);
}
.sb-nav a:last-child { border-bottom: 0; }
.sb-nav a::after { content: "\203A"; color: var(--indigo); font-size: 18px; }
.sb-nav a:hover { background: var(--wash); color: var(--indigo); padding-left: 24px; }
/* Scrollspy highlight for the section currently in view. */
.sb-nav a.is-current { background: var(--wash); color: var(--indigo); font-weight: 700; box-shadow: inset 3px 0 0 var(--indigo); }

/* --- 19.3 Compact inline enquiry form ------------------------------------ */
.sb-form { border: 1px solid var(--line); border-top: 3px solid var(--indigo); background: #fff; padding: 20px; }
.sb-form h2 { font-size: 19px; margin-bottom: 6px; }
.sb-form > p { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 16px; }
.sb-form .form-field { margin-bottom: 12px; }
.sb-form .form-field label { font-size: 11.5px; }
.sb-form .form-field input, .sb-form .form-field textarea, .sb-form .form-field select { padding: 11px 12px; font-size: 15px; }
.sb-form .btn { width: 100%; }
.sb-form__privacy { font-size: 12px; color: var(--ink-soft); margin-top: 12px; text-align: center; }

/* --- 19.4 Related articles ----------------------------------------------- */
.sb-news { border: 1px solid var(--line); background: #fff; }
.sb-news h2 {
  font-family: var(--font-body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); padding: 16px 18px 12px; border-bottom: 1px solid var(--line);
}
.sb-news a { display: block; padding: 14px 18px; border-bottom: 1px solid var(--line); transition: var(--t); }
.sb-news a:last-child { border-bottom: 0; }
.sb-news a:hover { background: var(--wash); }
.sb-news h3 { font-size: 15.5px; line-height: 1.35; }
.sb-news a:hover h3 { color: var(--indigo); }
.sb-news span { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo); margin-top: 7px; }

/* --- 19.5 "Start online" band -------------------------------------------- */
.start-online {
  background: var(--wash); border: 1px solid var(--wash-deep); border-left: 4px solid var(--indigo);
  border-radius: 0 10px 10px 0; padding: 26px 28px; margin: 34px 0;
}
.start-online h3 { font-size: 22px; margin-bottom: 10px; }
.start-online p { color: var(--ink-soft); font-size: 15.5px; margin-bottom: 18px; max-width: 62ch; }
.start-online .btn svg { flex: none; }

/* --- 19.6 First consultation timeline ------------------------------------ */
.timeline { position: relative; margin: 28px 0 8px; padding-left: 34px; }
.timeline::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px;
  width: 2px; background: var(--line);
}
.tl-item { position: relative; padding-bottom: 28px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -29px; top: 5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--indigo); box-shadow: 0 0 0 4px #fff;
}
.tl-item h3 { font-size: 18px; }
.tl-item__when {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--indigo); margin-bottom: 6px;
}
.tl-item p { font-size: 15px; color: var(--ink-soft); margin: 8px 0 0; }
.tl-item ul { margin-top: 10px; }

/* --- 19.7 Legal funding block -------------------------------------------- */
.funding {
  display: grid; gap: 22px; align-items: center;
  background: var(--navy); color: #E3E6F5; padding: 28px; border-radius: 0 16px 0 0; margin: 36px 0;
}
@media (min-width: 700px) { .funding { grid-template-columns: auto 1fr; gap: 28px; } }
.funding__mark {
  width: 92px; height: 92px; border-radius: 50%; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); display: grid; place-items: center; text-align: center;
  font-family: var(--font-display); font-size: 13px; color: #fff; line-height: 1.2; padding: 10px;
}
.funding h3 { color: #fff; font-size: 21px; margin-bottom: 10px; }
.funding p { color: #B9C0DC; font-size: 15px; margin-bottom: 16px; }

/* ==========================================================================
   20. SPECIFICITY FIXES
   ========================================================================== */

/* `.prose a` sets an indigo underlined link style, which outranked the button
   classes (0,1,1 vs 0,1,0) and painted button labels indigo-on-indigo.
   Buttons inside prose must keep their own colours. */
.prose a.btn,
.callout a.btn,
.inline-cta a.btn,
.start-online a.btn,
.funding a.btn,
.alert a.btn,
.sb-tool a.btn,
.facts a.btn {
  text-decoration: none;
}
.prose a.btn--primary,
.callout a.btn--primary,
.inline-cta a.btn--primary,
.start-online a.btn--primary,
.funding a.btn--primary,
.alert a.btn--primary,
.sb-tool a.btn--primary,
.facts a.btn--primary { color: #fff; background: var(--indigo); }
.prose a.btn--primary:hover,
.callout a.btn--primary:hover,
.inline-cta a.btn--primary:hover,
.start-online a.btn--primary:hover,
.funding a.btn--primary:hover,
.alert a.btn--primary:hover,
.sb-tool a.btn--primary:hover,
.facts a.btn--primary:hover { background: var(--indigo-dark); color: #fff; }

.prose a.btn--outline,
.sb-tool a.btn--outline,
.alert a.btn--outline { color: var(--indigo); background: transparent; border-color: var(--indigo); }
.prose a.btn--outline:hover,
.sb-tool a.btn--outline:hover,
.alert a.btn--outline:hover { background: var(--indigo); color: #fff; }

.prose a.btn--ghost,
.facts a.btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
.prose a.btn--ghost:hover,
.facts a.btn--ghost:hover { background: #fff; color: var(--navy); }

/* The guide download button is white-on-indigo — protect it too. */
.sb-guide a.btn--primary { background: #fff; color: var(--indigo); text-decoration: none; }
.sb-guide a.btn--primary:hover { background: var(--wash); color: var(--indigo-dark); }

/* Link colour inside dark blocks must not fall back to prose indigo. */
.callout--navy a:not(.btn), .funding a:not(.btn), .inline-cta a:not(.btn) { color: var(--indigo-lite); }

/* --- Quick exit must not collide with the header's own CTA --------------- */
@media (min-width: 1024px) {
  body:has(.quick-exit) .nav__cta { margin-right: 132px; }
}
/* Fallback for browsers without :has — the button sits clear of the nav. */
@supports not selector(:has(*)) {
  .quick-exit { top: 0; right: 0; border-radius: 0 0 0 8px; }
  @media (min-width: 1024px) { .site-header .nav { padding-right: 132px; } }
}

/* ==========================================================================
   21. PRACTICE-AREA ARTICLE GRID — 2/3 + 1/3
   The 50/50 split gave the article a ~500px measure (too narrow for legal
   prose) and the sidebar more room than its components need. Two-thirds puts
   the body copy at a comfortable 65–75 characters per line.
   ========================================================================== */
@media (min-width: 900px) {
  .split--article {
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: 56px;
  }
}
@media (min-width: 1180px) {
  .split--article { gap: 72px; }
}

/* Long-form legal copy still shouldn't run past a comfortable measure, even
   with the extra width available. */
.split--article .prose { max-width: 76ch; }

/* The wider column lets the two-column patterns breathe at one breakpoint
   earlier than the page default. */
@media (min-width: 900px) {
  .split--article .checks { grid-template-columns: 1fr 1fr; gap: 12px 32px; }
  .split--article .paths  { grid-template-columns: repeat(2, 1fr); }
}

/* Tables gain enough room to stop scrolling on desktop. */
@media (min-width: 1024px) {
  .split--article .table-scroll { overflow-x: visible; }
  .split--article .table-scroll .cmp { min-width: 0; }
}

/* ==========================================================================
   22. PRACTICE-AREA HERO IMAGE
   Full-bleed photo behind the hero band. The navy overlay is not decorative:
   it guarantees text contrast regardless of what photo is dropped in, so the
   page can't be broken by a light image.
   ========================================================================== */
.pa-hero { position: relative; isolation: isolate; }

.pa-hero__bg {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
}
.pa-hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  /* Faces and focal points sit in the upper third of most editorial shots. */
  object-position: 50% 28%;
}

/* Two-layer overlay: a flat wash for baseline contrast, plus a left-weighted
   gradient so the headline side stays darkest while the right edge keeps some
   of the photograph visible behind the widget. */
.pa-hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    /* Left-weighted wash: opaque behind the headline, opening up on the right
       so the subject reads through. Stops are tuned to the ~70% subject mark. */
    linear-gradient(95deg,
      rgba(22,29,65,.97) 0%,
      rgba(22,29,65,.94) 30%,
      rgba(22,29,65,.80) 52%,
      rgba(22,29,65,.52) 68%,
      rgba(22,29,65,.42) 100%),
    /* Top scrim keeps the breadcrumb legible over sky or pale stone. */
    linear-gradient(to bottom, rgba(22,29,65,.60) 0%, rgba(22,29,65,0) 32%),
    /* Bottom anchor so the band meets the on-page nav cleanly. */
    linear-gradient(to top, rgba(22,29,65,.55) 0%, rgba(22,29,65,0) 26%);
}

/* Mobile: photo is mostly hidden behind the widget anyway, so darken further
   rather than shipping a busy background under small text. */
@media (max-width: 939px) {
  .pa-hero__bg::after {
    background: linear-gradient(180deg, rgba(22,29,65,.90) 0%, rgba(22,29,65,.97) 60%);
  }
}

/* With a photo behind it the band needs more vertical room to breathe. */
@media (min-width: 940px) {
  .pa-hero--image { padding: 48px 0 64px; min-height: 520px; }
}

/* Placeholder marker only — delete when real images are dropped in. */
.pa-hero__bg .img-ph {
  width: 100%; height: 100%; aspect-ratio: auto; border: 0;
  background: var(--navy-soft); color: #6B76A8;
}

/* ==========================================================================
   23. IMAGE HERO WITHOUT A WIDGET
   Pages whose hero carries a photograph but no interactive card. The text
   column is constrained so the right side of the frame stays open for the
   subject, rather than letting the lede run the full width.
   ========================================================================== */
@media (min-width: 940px) {
  .pa-hero--image:not(:has(.widget)) .pa-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Roughly 52% of the container — keeps copy clear of the subject at ~68%. */
  .pa-hero--image:not(:has(.widget)) .pa-hero__grid > div { max-width: 600px; }

  /* More vertical room so a standing figure reads as a portrait, not a crop. */
  .pa-hero--image:not(:has(.widget)) { min-height: 600px; padding: 44px 0 72px; }

  /* Centre the copy block vertically against the taller band. */
  .pa-hero--image:not(:has(.widget)) .pa-hero__grid {
    align-content: center; min-height: 440px;
  }
}

/* Fallback for browsers without :has() — same result via an explicit class. */
.pa-hero--solo .pa-hero__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) {
  .pa-hero--solo .pa-hero__grid > div { max-width: 600px; }
  .pa-hero--solo { min-height: 600px; padding: 44px 0 72px; }
  .pa-hero--solo .pa-hero__grid { align-content: center; min-height: 440px; }
}

/* With no card on the right, the gradient can open up further so the subject
   is properly visible rather than sitting under a heavy wash. */
/* Brand gradient: deep navy at the left edge, warming through to the secondary
   indigo across the text column, then falling away so the subject reads.
   White text holds 7.2:1 or better at every stop, even over sunlit stone. */
.pa-hero--solo .pa-hero__bg::after {
  background:
    linear-gradient(95deg,
      rgba(22,29,65,.97)   0%,
      rgba(28,40,105,.95) 18%,
      rgba(35,52,136,.92) 34%,
      rgba(39,58,151,.86) 50%,
      rgba(39,58,151,.52) 60%,
      rgba(39,58,151,.24) 70%,
      rgba(39,58,151,.12) 100%),
    linear-gradient(to bottom, rgba(22,29,65,.55) 0%, rgba(22,29,65,0) 30%),
    linear-gradient(to top,    rgba(22,29,65,.50) 0%, rgba(22,29,65,0) 24%);
}

/* All hero copy in white on image heroes — the tinted lede grey was designed
   for a flat navy panel and goes muddy over a photograph. */
.pa-hero--solo .pa-hero__lede { color: #fff; }
.pa-hero--solo .crumbs { color: rgba(255,255,255,.78); }
.pa-hero--solo .crumbs a:hover { color: #fff; }
.pa-hero--solo .crumbs li + li::before { color: rgba(255,255,255,.45); }

/* Ghost button needs a firmer edge against a photo than against flat navy. */
.pa-hero--solo .btn--ghost { border-color: rgba(255,255,255,.72); color: #fff; }
.pa-hero--solo .btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }

@media (max-width: 939px) {
  .pa-hero--solo .pa-hero__bg::after {
    background: linear-gradient(165deg, rgba(22,29,65,.94) 0%, rgba(35,52,136,.93) 45%, rgba(22,29,65,.96) 100%);
  }
}

/* ==========================================================================
   24. INLINE QUALIFIER WIDGET + HOMEPAGE IMAGE HERO
   ========================================================================== */

/* The contract checker and "where do you stand" qualifiers moved out of the
   hero into the article, so every hero is consistent. They keep their weight
   but now sit in the reading flow at the point they're most relevant. */
.widget--inline {
  max-width: 560px; margin: 36px 0; border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.widget--inline .widget__head { padding: 18px 22px; }
.widget--inline .widget__head h2 { font-size: 19px; }

/* Homepage hero carries the same photo + brand-gradient treatment. */
.hero--image { position: relative; isolation: isolate; }
/* The decorative radial glow was for the flat panel; it muddies a photograph. */
.hero--image::before { display: none; }
.hero--image .hero__lede, .hero--image p { color: #fff; }
@media (min-width: 940px) {
  .hero--image { padding-top: 76px; }
  .hero--image .hero__inner > p { max-width: 46ch; }
}
/* Stats strip needs a solid ground so figures stay legible over the image. */
.hero--image .hero__proof, .pa-hero--image .hero__proof { background: rgba(255,255,255,.16); backdrop-filter: blur(2px); }
.hero--image .hero__proof div, .pa-hero--image .hero__proof div { background: rgba(22,29,65,.82); }
.hero--image .hero__proof dd, .pa-hero--image .hero__proof dd { color: #C7CFEA; }
.hero--image .hero__proof div.hero__proof-highlight, .pa-hero--image .hero__proof div.hero__proof-highlight { background: #B6A477; }
.hero--image .hero__proof-highlight dt, .pa-hero--image .hero__proof-highlight dt { color: var(--navy); }
.hero--image .hero__proof-highlight dd, .pa-hero--image .hero__proof-highlight dd { color: rgba(22,29,65,.75); }
.pa-hero__grid + .hero__proof { margin-top: 75px; }
.pa-hero--solo .pa-hero__grid:has(+ .hero__proof) { align-content: start; min-height: 0; }

/* ==========================================================================
   25. BRAND LOGO
   Supplied artwork: white SG monogram + wordmark lockup, 3.43:1.
   ========================================================================== */
.logo { display: block; line-height: 0; }
.logo img { width: 172px; height: auto; display: block; }
@media (min-width: 1024px) { .logo img { width: 196px; } }
/* The lockup already reads as a wordmark, so the footer needs no strapline. */
.logo--footer { margin-bottom: 20px; }
.logo--footer img { width: 200px; }

/* Slight lift on hover — the mark is the primary home affordance. */
.logo img { transition: opacity var(--t); }
.logo:hover img { opacity: .82; }

/* ==========================================================================
   26. PRE-GRADED HERO IMAGES
   Some supplied images already carry the navy gradient baked into the file.
   Applying the full CSS overlay on top of those double-darkens the midtones
   and can band where the two gradients meet. This modifier drops the overlay
   to a light reinforcement only.
   ========================================================================== */
.pa-hero--pregraded .pa-hero__bg::after {
  background:
    /* Gentle top-up on the left in case the baked gradient stops short of the
       text column, then clear almost immediately. */
    linear-gradient(95deg,
      rgba(22,29,65,.58)  0%,
      rgba(22,29,65,.50) 26%,
      rgba(22,29,65,.44) 44%,
      rgba(22,29,65,.34) 54%,
      rgba(22,29,65,.10) 64%,
      rgba(22,29,65,0)   74%),
    linear-gradient(to bottom, rgba(22,29,65,.42) 0%, rgba(22,29,65,0) 26%),
    linear-gradient(to top,    rgba(22,29,65,.38) 0%, rgba(22,29,65,0) 20%);
}
@media (max-width: 939px) {
  /* Mobile stacks text over the image, so more cover is still needed. */
  .pa-hero--pregraded .pa-hero__bg::after {
    background: linear-gradient(165deg, rgba(22,29,65,.86) 0%, rgba(28,40,105,.88) 45%, rgba(22,29,65,.94) 100%);
  }
}

/* --- 26.1 Pre-graded, bright subject side -------------------------------
   Some pre-graded images still have bright sunlit content (sandstone, sky,
   pale paving) inside the text column. Those need a heavier reinforcement
   than the standard pre-graded ramp, while still clearing before the subject. */
.pa-hero--pregraded-bright .pa-hero__bg::after {
  background:
    linear-gradient(95deg,
      rgba(22,29,65,.62)  0%,
      rgba(22,29,65,.60) 22%,
      rgba(22,29,65,.66) 40%,
      rgba(22,29,65,.68) 54%,
      rgba(22,29,65,.30) 62%,
      rgba(22,29,65,.08) 70%,
      rgba(22,29,65,0)   78%),
    linear-gradient(to bottom, rgba(22,29,65,.42) 0%, rgba(22,29,65,0) 26%),
    linear-gradient(to top,    rgba(22,29,65,.38) 0%, rgba(22,29,65,0) 20%);
}
@media (max-width: 939px) {
  .pa-hero--pregraded-bright .pa-hero__bg::after {
    background: linear-gradient(165deg, rgba(22,29,65,.88) 0%, rgba(28,40,105,.90) 45%, rgba(22,29,65,.95) 100%);
  }
}

/* --- Article figure -------------------------------------------------------
   Full-width image inside the prose column, with an optional caption. */
.article-figure { margin: 34px 0; }
.article-figure img { width: 100%; height: auto; display: block; border-radius: 0 12px 0 0; }
.article-figure figcaption {
  margin-top: 12px; font-size: 13.5px; color: var(--ink-soft);
  padding-left: 14px; border-left: 3px solid var(--indigo);
}

/* --- 26.2 Bright ungraded hero, subject close to the text edge -----------
   Where the subject sits just past the text column (rather than out at 68%),
   the copy block is narrowed so the overlay can clear before reaching them.
   Without this the subject ends up veiled by the same wash protecting the text. */
@media (min-width: 940px) {
  .pa-hero--bright .pa-hero__grid > div { max-width: 520px; }
}
.pa-hero--bright .pa-hero__bg::after {
  background:
    linear-gradient(95deg,
      rgba(22,29,65,.88)  0%,
      rgba(22,29,65,.84) 20%,
      rgba(22,29,65,.80) 36%,
      rgba(22,29,65,.74) 44%,
      rgba(22,29,65,.40) 52%,
      rgba(22,29,65,.18) 60%,
      rgba(22,29,65,.10) 100%),
    linear-gradient(to bottom, rgba(22,29,65,.52) 0%, rgba(22,29,65,0) 30%),
    linear-gradient(to top,    rgba(22,29,65,.46) 0%, rgba(22,29,65,0) 22%);
}
@media (max-width: 939px) {
  .pa-hero--bright .pa-hero__bg::after {
    background: linear-gradient(165deg, rgba(22,29,65,.90) 0%, rgba(28,40,105,.92) 45%, rgba(22,29,65,.95) 100%);
  }
}

/* --- 26.3 High-key hero (bright sky in the text zone) --------------------
   Images with near-white sky or wall behind the headline need a genuinely
   heavy wash — around 0.80 — to hold white text at AA. Held flat across the
   whole text column, then released quickly so the subject is untouched. */
.pa-hero--highkey .pa-hero__bg::after {
  background:
    linear-gradient(95deg,
      rgba(22,29,65,.93)  0%,
      rgba(28,40,105,.88) 24%,
      rgba(35,52,136,.84) 42%,
      rgba(39,58,151,.80) 52%,
      rgba(39,58,151,.44) 60%,
      rgba(39,58,151,.16) 70%,
      rgba(39,58,151,.08) 100%),
    linear-gradient(to bottom, rgba(22,29,65,.50) 0%, rgba(22,29,65,0) 28%),
    linear-gradient(to top,    rgba(22,29,65,.46) 0%, rgba(22,29,65,0) 22%);
}
@media (max-width: 939px) {
  .pa-hero--highkey .pa-hero__bg::after {
    background: linear-gradient(165deg, rgba(22,29,65,.92) 0%, rgba(28,40,105,.93) 45%, rgba(22,29,65,.96) 100%);
  }
}

/* --- 26.4 Narrowed copy column ------------------------------------------
   For images where the subject sits closer to centre (around 60%) than the
   ideal 65–75%, the copy column is pulled in so the headline clears them.
   Combines with any gradient variant. */
@media (min-width: 940px) {
  .pa-hero--narrow .pa-hero__grid > div { max-width: 500px; }
}

/* ==========================================================================
   27. CHILD SERVICE LINKS
   Parent practice-area pages list the child services beneath them. This is
   the main internal-linking device: it passes authority down to the child
   pages and gives visitors the specific page they actually wanted.
   ========================================================================== */
.child-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 26px 0 8px; }
@media (min-width: 640px) { .child-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .child-grid { grid-template-columns: repeat(3, 1fr); } }
.child-card {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-left: 3px solid var(--indigo);
  background: #fff; padding: 18px 20px; transition: var(--t);
}
.child-card:hover { background: var(--wash); border-left-width: 6px; padding-left: 17px; }
.child-card h3 { font-size: 17.5px; line-height: 1.25; color: var(--navy); }
.child-card:hover h3 { color: var(--indigo); }
.child-card p { font-size: 14px; color: var(--ink-soft); margin: 0; }
.child-card__more {
  margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--indigo);
}

/* Sidebar version — compact list of sibling/child pages. */
.sb-children a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 18px; font-size: 14.5px; color: var(--navy);
  border-bottom: 1px solid var(--line); transition: var(--t);
}
.sb-children a:last-child { border-bottom: 0; }
.sb-children a::after { content: "\203A"; color: var(--indigo); font-size: 17px; }
.sb-children a:hover { background: var(--wash); color: var(--indigo); padding-left: 24px; }

/* Child pages get a visible link back to the parent area. */
.parent-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--indigo-lite); margin-bottom: 14px;
}
.parent-link::before { content: "\2039"; font-size: 18px; line-height: 1; }
.parent-link:hover { color: #fff; }

/* ==========================================================================
   28. CHILD SERVICE SECTION — directly under the hero
   This is the first thing after the hero because it is the most likely next
   click: a visitor who arrived on "Property" usually wants one specific
   service, not the 20-section guide.
   ========================================================================== */
.child-section { border-bottom: 1px solid var(--line); }
.child-lead { max-width: 640px; margin-bottom: 24px; }
.child-lead h2 { font-size: clamp(24px, 3.6vw, 30px); }
.child-lead p { color: var(--ink-soft); margin-top: 10px; font-size: 15.5px; }

/* Tighter cards than the old placement — this is navigation, not content. */
.child-section .child-grid { gap: 12px; }
@media (min-width: 640px)  { .child-section .child-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .child-section .child-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .child-section .child-grid { grid-template-columns: repeat(4, 1fr); } }
.child-section .child-card { padding: 16px 18px; gap: 6px; }
.child-section .child-card h3 { font-size: 16.5px; }
.child-section .child-card p { font-size: 13.5px; }
/* "Read more" is redundant when the whole card is a link and the set is scanned. */
.child-section .child-card__more { display: none; }
.child-section .child-card::after {
  content: ""; margin-top: 6px; width: 14px; height: 8px;
  border-right: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo);
  transform: rotate(-45deg); opacity: 0; transition: var(--t);
}
.child-section .child-card:hover::after { opacity: 1; transform: rotate(-45deg) translate(2px,2px); }

/* ==========================================================================
   29. INSIGHTS INDEX — search + practice-area filter
   Filtering is client-side over a small, fixed set. No network round trip,
   so results update as you type.
   ========================================================================== */
.filters { position: sticky; top: 72px; z-index: 70;
  background: var(--wash); border-bottom: 1px solid var(--line); padding: 18px 0; }
@media (min-width: 1024px) { .filters { top: 86px; } }

.filters__search { position: relative; margin-bottom: 14px; }
.filters__search input {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  padding: 14px 44px 14px 46px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff;
}
.filters__search input:focus { border-color: var(--indigo); }
.filters__search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); pointer-events: none; }
.filters__clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 8px 10px;
  font-size: 18px; line-height: 1; color: var(--ink-soft); border-radius: var(--radius);
}
.filters__clear:hover { color: var(--indigo); background: var(--wash); }
.filters__clear[hidden] { display: none; }

/* Chips scroll horizontally on small screens rather than wrapping to 3 rows. */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 100px;
  background: #fff; color: var(--ink-soft); cursor: pointer; white-space: nowrap;
  transition: var(--t);
}
.chip:hover { border-color: var(--indigo); color: var(--indigo); }
.chip[aria-pressed="true"] { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.chip__count { opacity: .7; margin-left: 6px; font-variant-numeric: tabular-nums; }

.results-count { font-size: 14px; color: var(--ink-soft); margin: 22px 0 18px; }
.results-count strong { color: var(--navy); }

/* --- article cards ------------------------------------------------------- */
.post-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

.post-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: 0 14px 0 0; overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post-card[hidden] { display: none; }
.post-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.post-card__area {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--indigo); background: var(--wash);
  padding: 5px 10px; border-radius: 3px; margin-bottom: 14px;
}
.post-card h3 { font-size: 19px; line-height: 1.3; }
.post-card h3 a { color: var(--navy); }
.post-card:hover h3 a { color: var(--indigo); }
.post-card p { font-size: 14.5px; color: var(--ink-soft); margin-top: 10px; }
.post-card__meta {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-soft); display: flex; gap: 12px;
}
/* Highlight for search term matches. */
.post-card mark { background: #E3E8F9; color: var(--navy); padding: 0 2px; border-radius: 2px; }

.no-results { text-align: center; padding: 60px 20px; }
.no-results[hidden] { display: none; }
.no-results h2 { font-size: 24px; }
.no-results p { color: var(--ink-soft); margin: 12px 0 22px; }

/* --- article page -------------------------------------------------------- */
.article-meta {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-size: 14px; color: #B9C0DC; margin-top: 16px;
}
.article-meta .post-card__area { margin: 0; background: rgba(255,255,255,.14); color: #fff; }

/* ==========================================================================
   30. TEAM PAGE + LAWYER PROFILES
   The team page is a finding tool, not a gallery: most visitors arrive
   wanting a person for a specific problem, so it filters by practice area.
   ========================================================================== */
.team-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }

.lawyer-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--line); border-radius: 0 14px 0 0; overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}
.lawyer-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lawyer-card[hidden] { display: none; }
.lawyer-card__photo { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.lawyer-card__photo .img-ph { width: 100%; height: 100%; aspect-ratio: auto; border: 0; }
.lawyer-card__photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 5px; background: var(--indigo); transition: height var(--t);
}
.lawyer-card:hover .lawyer-card__photo::after { height: 9px; }
.lawyer-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.lawyer-card h3 { font-size: 19px; }
.lawyer-card h3 a { color: var(--navy); }
.lawyer-card:hover h3 a { color: var(--indigo); }
.lawyer-card__role {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--indigo); margin: 7px 0 12px;
}
.lawyer-card__areas {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.lawyer-card__areas span {
  font-size: 11.5px; color: var(--ink-soft); background: var(--wash);
  padding: 4px 8px; border-radius: 3px;
}

/* --- profile page -------------------------------------------------------- */
.profile-hero { background: var(--navy); color: #E3E6F5; padding: 40px 0 48px; }
.profile-hero__grid { display: grid; gap: 30px; align-items: start; }
@media (min-width: 820px) { .profile-hero__grid { grid-template-columns: 280px 1fr; gap: 44px; } }
.profile-hero__photo { border-radius: 0 16px 0 0; overflow: hidden; }
.profile-hero__photo .img-ph { aspect-ratio: 1/1; }
.profile-hero h1 { color: #fff; font-size: clamp(30px, 5vw, 44px); }
.profile-hero__role {
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--indigo-lite); margin-top: 12px;
}
.profile-hero__lead { color: #fff; font-size: 18px; margin-top: 18px; max-width: 60ch; }
.profile-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* Areas as links, because the next question is usually about the area. */
.profile-areas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.profile-areas a {
  font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,.28); color: #fff; transition: var(--t);
}
.profile-areas a:hover { background: #fff; color: var(--navy); border-color: #fff; }

.does-list { display: grid; gap: 10px 28px; margin: 20px 0 4px; }
@media (min-width: 620px) { .does-list { grid-template-columns: 1fr 1fr; } }
.does-list li { position: relative; padding-left: 28px; list-style: none; font-size: 15.5px; }



/* ==========================================================================
   31. CHECKBOX LIST MARKERS
   Rendered as an actual checkbox — a bordered square with a tick inside —
   rather than a bare tick. Two pseudo-elements are needed: a mask on a single
   element would clip the border along with everything else.

   Selectors are written with the `.prose ul` prefix because `.prose ul li`
   (0,1,3) outranks `.checks li` (0,1,2), and the dash-bullet rule was
   otherwise winning and clipping the marker to a 10x2 box.
   ========================================================================== */
.checks li,
.prose ul.checks li,
.callout ul li,
.alert ul li,
.does-list li,
.prose ul.does-list li {
  position: relative; padding-left: 32px; list-style: none; margin-bottom: 11px;
}

/* The box */
.checks li::before,
.prose ul.checks li::before,
.prose .callout ul li::before,
.prose .alert ul li::before,
.does-list li::before,
.prose ul.does-list li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 19px; height: 19px; box-sizing: border-box;
  border: 1.5px solid var(--indigo); border-radius: 4px;
  background: #fff; transform: none;
}

/* The tick, drawn over the box */
.checks li::after,
.prose ul.checks li::after,
.prose .callout ul li::after,
.prose .alert ul li::after,
.does-list li::after,
.prose ul.does-list li::after {
  content: ""; position: absolute; left: 4px; top: 6px;
  width: 11px; height: 11px; background: var(--indigo);
  -webkit-mask: var(--tick) center / 11px 11px no-repeat;
          mask: var(--tick) center / 11px 11px no-repeat;
}

/* On the navy callout, invert: light box on dark ground. */
.prose .callout--navy ul li::before {
  border-color: var(--indigo-lite); background: transparent;
}
.prose .callout--navy ul li::after { background: var(--indigo-lite); }

/* Sidebar reassurance list uses the same marker at a smaller size. */
.sb-cta__reassure span { padding-left: 26px; }
.sb-cta__reassure span { position: relative; padding-left: 26px; display: block; }
.sb-cta__reassure span::before {
  content: ""; position: absolute; left: 0; top: 2px; margin: 0;
  width: 16px; height: 16px; box-sizing: border-box; border-radius: 3px;
  border: 1.5px solid rgba(255,255,255,.55); background: transparent;
  transform: none;                 /* clear the old rotated-tick transform */
}
.sb-cta__reassure span::after {
  content: ""; position: absolute; left: 3px; top: 5px;
  width: 10px; height: 10px; background: #fff;
  -webkit-mask: var(--tick) center / 10px 10px no-repeat;
          mask: var(--tick) center / 10px 10px no-repeat;
}

/* Numbered lists keep their numbers — sequence matters there. */
.prose ol li::before, .prose ol li::after { content: none; }

/* Fallback: no mask support gets a filled box rather than an empty one. */
@supports not ((-webkit-mask: none) or (mask: none)) {
  .checks li::before, .prose ul.checks li::before,
  .prose .callout ul li::before, .does-list li::before { background: var(--indigo); }
  .checks li::after, .prose ul.checks li::after,
  .prose .callout ul li::after, .does-list li::after { content: none; }
}

/* ==========================================================================
   32. TEXT ON DARK GROUNDS
   Any component sitting on navy gets white body text. Muted greys were being
   used for hierarchy, which works on white and fails on dark — several of
   these were landing near the AA floor.
   ========================================================================== */
.callout--navy,
.callout--navy p,
.callout--navy li,
.callout--navy ul li,
.prose .callout--navy p,
.prose .callout--navy li,
.inline-cta,
.inline-cta strong,
.section--navy p,
.funding, .funding p, .funding li {
  color: #fff;
}
/* Secondary lines stay legible rather than dropping to a grey. */
.inline-cta__text span,
.section--navy .section-heading p { color: #D7DCF0; }
.callout--navy h3, .funding h3 { color: #fff; }

/* ==========================================================================
   33. HOMEPAGE PERSUASION SECTIONS
   ========================================================================== */

/* --- Intent router: "what do you need?" before "who we are" -------------- */
.intent-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .intent-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .intent-grid { grid-template-columns: repeat(3, 1fr); } }
.intent-card {
  display: flex; flex-direction: column; gap: 8px; background: #fff;
  border: 1px solid var(--line); border-left: 3px solid var(--indigo);
  padding: 20px 22px; transition: var(--t);
}
.intent-card:hover { background: var(--wash); border-left-width: 7px; padding-left: 18px; }
.intent-card strong { font-size: 16.5px; color: var(--navy); line-height: 1.3; }
.intent-card:hover strong { color: var(--indigo); }
.intent-card span { font-size: 14px; color: var(--ink-soft); }

/* --- Reasons: contained cards -------------------------------------------
   Cards rather than bare text columns, so six claims read as six things.
   Equal height via grid stretch; a large ghost numeral gives rhythm without
   competing with the heading. */
.reasons { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 700px)  { .reasons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .reasons { grid-template-columns: repeat(3, 1fr); } }

.reason {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: 0 16px 0 0; overflow: hidden;
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.reason:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #D3D8EA; }

/* Indigo accent along the top edge, widening on hover. */
.reason::before {
  content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 4px;
  background: var(--indigo); transition: width var(--t);
}
.reason:hover::before { width: 100%; }

.reason__body { padding: 30px 28px 28px; flex: 1; }

/* Large ghost numeral, behind the text so long headings can run over it. */
.reason__n {
  position: absolute; top: 20px; right: 24px; z-index: 0;
  font-family: var(--font-display); font-size: 46px; line-height: 1;
  color: var(--navy); opacity: .07; letter-spacing: -.02em; pointer-events: none;
}
.reason h3 { position: relative; z-index: 1; font-size: 20px; line-height: 1.28; padding-right: 46px; }
.reason p  { position: relative; z-index: 1; color: var(--ink-soft); margin-top: 12px; font-size: 15.5px; }

/* --- Process: a numbered sequence with connectors ------------------------
   The number is ::before so it renders above the heading (as ::after it sat
   below the paragraph, which read as a footnote). The connector line is a
   separate absolutely positioned rule, hidden on the last step and on mobile
   where the layout stacks. */
.flow { display: grid; gap: 34px; grid-template-columns: 1fr; counter-reset: flow; }
@media (min-width: 900px) { .flow { grid-template-columns: repeat(4, 1fr); gap: 28px; } }

.flow__step { position: relative; counter-increment: flow; }

/* Numbered badge */
.flow__step::before {
  content: counter(flow, decimal-leading-zero);
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid var(--indigo); background: #fff;
  font-family: var(--font-display); font-size: 17px; color: var(--indigo);
  position: relative; z-index: 2; margin-bottom: 22px;
  transition: var(--t);
}
.flow__step:hover::before { background: var(--indigo); color: #fff; }

/* Connector between badges — desktop only, not after the last step. */
.flow__step::after {
  content: ""; position: absolute; top: 26px; left: 54px; right: -28px;
  height: 2px; background: var(--line); z-index: 1; display: none;
}
@media (min-width: 900px) {
  .flow__step::after { display: block; }
  .flow__step:last-child::after { display: none; }
}

.flow__step h3 { font-size: 19px; line-height: 1.3; }
.flow__step p { color: var(--ink-soft); font-size: 15px; margin-top: 10px; }

/* --- Locations ----------------------------------------------------------- */
.offices { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .offices { grid-template-columns: repeat(3, 1fr); } }
.office {
  border: 1px solid rgba(255,255,255,.18); padding: 24px 26px; border-radius: 0 14px 0 0;
}
.office h3 { color: #fff; font-size: 20px; }
.office p { color: #D7DCF0; font-size: 15px; margin-top: 10px; }
.office a { color: var(--indigo-lite); font-weight: 600; display: inline-block; margin-top: 12px; }
.office a:hover { color: #fff; }

/* --- Insights teaser ----------------------------------------------------- */
.teaser-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .teaser-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Testimonials -------------------------------------------------------- */
.quotes { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote {
  background: #fff; border: 1px solid var(--line); padding: 26px 24px;
  border-radius: 0 14px 0 0; display: flex; flex-direction: column;
}
.quote__stars { color: #E8A317; font-size: 15px; letter-spacing: 2px; margin-bottom: 12px; }
.quote blockquote { font-size: 16px; line-height: 1.55; color: var(--ink); }
.quote figcaption {
  margin-top: auto; padding-top: 16px; font-size: 13.5px; color: var(--ink-soft);
}

/* --- Intent router: the catch-all card ----------------------------------
   Inverted so it reads as the deliberate fallback rather than a tenth
   equivalent option — people who don't match any card need an obvious exit. */
.intent-card--alt {
  background: #1E2D78; border-color: #1E2D78; border-left-color: var(--indigo-lite);
}
.intent-card--alt strong { color: #fff; }
.intent-card--alt span { color: #C3CAE4; }
.intent-card--alt:hover { background: var(--indigo); border-color: var(--indigo); }
.intent-card--alt:hover strong { color: #fff; }
.intent-card--alt:hover span { color: #E3E6F5; }



/* ==========================================================================
   34. IMAGE-FREE HERO WITH ENQUIRY FORM
   The first version ran to ~1000px and pushed the whole page below the fold.
   Everything here is sized to keep the hero under ~560px on a laptop: compact
   fields, a two-up row for phone/email, and a left column that fills its
   height with the page's key facts rather than leaving dead space.
   ========================================================================== */
.pa-hero--nomedia {
  position: relative; overflow: hidden; padding: 34px 0 40px;
  background:
    radial-gradient(120% 140% at 12% 0%, #24306F 0%, rgba(36,48,111,0) 58%),
    radial-gradient(90% 120% at 88% 100%, #2B3C8F 0%, rgba(43,60,143,0) 55%),
    linear-gradient(135deg, #161D41 0%, #1B2450 45%, #161D41 100%);
  color: #fff;
}
.pa-hero--nomedia::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg,
    rgba(255,255,255,.035) 0 1px, transparent 1px 78px);
}
.pa-hero--nomedia .container { position: relative; z-index: 2; }
.pa-hero--nomedia h1 { color: #fff; font-size: clamp(30px, 4.4vw, 46px); }
.pa-hero--nomedia .pa-hero__lede { color: #DDE1F2; font-size: 17px; max-width: 46ch; }
.pa-hero--nomedia .parent-link { color: #C3CAE4; }
.pa-hero--nomedia .parent-link:hover { color: #fff; }
.pa-hero--nomedia .pa-hero__actions { margin-top: 22px; }

.nomedia__grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .nomedia__grid { grid-template-columns: 1fr 372px; gap: 48px; } }

/* Key facts fill the left column instead of dead space below the buttons. */
.nomedia__facts { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); }
.nomedia__facts dl {
  margin: 0; display: grid; gap: 12px 30px; grid-template-columns: 1fr;
}
@media (min-width: 620px) { .nomedia__facts dl { grid-template-columns: 1fr 1fr; } }
.nomedia__facts div { display: flex; flex-direction: column; gap: 2px; }
.nomedia__facts dt {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #99A2C8;
}
.nomedia__facts dd { margin: 0; font-size: 14.5px; font-weight: 600; color: #fff; }

/* --- The enquiry card — compact ----------------------------------------- */
.hero-form { background: #fff; border-radius: 0 16px 0 0; box-shadow: var(--shadow-md); overflow: hidden; }
.hero-form__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; background: var(--wash); border-bottom: 1px solid var(--line);
}
.hero-form__head img, .hero-form__initials {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(22,29,65,.16);
}
.hero-form__initials {
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; border: 0;
  font-family: var(--font-display); font-size: 17px;
}
.hero-form__who strong { display: block; font-size: 15px; color: var(--navy); line-height: 1.2; }
.hero-form__who span   { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.hero-form__who a      { font-size: 12px; color: var(--indigo); font-weight: 600; }

.hero-form__body { padding: 16px 20px 20px; }
.hero-form__body > p { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.4; }

.hero-form .field { margin-bottom: 10px; }
/* Email and phone share a row — two short fields don't each need full width. */
.hero-form .field-row { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 380px) { .hero-form .field-row { grid-template-columns: 1fr; } }
.hero-form label {
  display: block; font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom: 4px;
}
.hero-form input, .hero-form textarea {
  width: 100%; font: inherit; font-size: 14.5px; color: var(--ink);
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; transition: var(--t);
}
.hero-form textarea { resize: vertical; min-height: 62px; }
.hero-form input:focus, .hero-form textarea:focus {
  border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(39,58,151,.13); outline: none;
}
.hero-form .btn { width: 100%; margin-top: 6px; padding: 13px 20px; font-size: 12.5px; }
.hero-form__note {
  margin-top: 10px; font-size: 11.5px; color: var(--ink-soft); line-height: 1.4;
  display: flex; align-items: flex-start; gap: 6px;
}
.hero-form__note::before {
  content: ""; flex: none; width: 12px; height: 12px; margin-top: 2px; background: var(--indigo);
  -webkit-mask: var(--tick) center / 12px 12px no-repeat;
          mask: var(--tick) center / 12px 12px no-repeat;
}


/* ==========================================================================
   35. COMPACT HERO (full width, no image)
   Full-bleed navy band, but roughly a third the height of the image hero.
   The article starts on screen instead of below the fold.
   ========================================================================== */
.pa-hero--compact {
  position: relative; overflow: hidden;
  padding: 44px 0 48px;
  background:
    radial-gradient(100% 160% at 6% 0%, #253270 0%, rgba(37,50,112,0) 60%),
    linear-gradient(135deg, #161D41 0%, #1C2552 52%, #161D41 100%);
  color: #fff;
}
@media (max-width: 700px) { .pa-hero--compact { padding: 32px 0 36px; } }

.pa-hero--compact .container { position: relative; z-index: 1; }

.pa-hero--compact .crumbs { margin-bottom: 14px; }
.pa-hero--compact .crumbs a, .pa-hero--compact .crumbs li { color: #AEB7DA; }
.pa-hero--compact .crumbs a:hover { color: #fff; }
.pa-hero--compact .parent-link { color: #C3CAE4; margin-bottom: 10px; }
.pa-hero--compact .parent-link:hover { color: #fff; }

.pa-hero--compact h1 { color: #fff; font-size: clamp(30px, 4.2vw, 46px); max-width: 20ch; }
.pa-hero--compact .pa-hero__lede {
  color: #DDE1F2; font-size: 17.5px; max-width: 62ch; margin-top: 14px;
}
.pa-hero--compact .pa-hero__actions { margin-top: 26px; }

/* Office picker dialog (js/main.js) */
.office-picker {
  margin: auto; /* global reset zeroes the UA dialog centring */
  border: 0; border-radius: 0 14px 0 0; padding: 32px 28px 26px;
  width: min(460px, calc(100vw - 32px)); background: var(--navy); color: #E3E6F5;
}
.office-picker::backdrop { background: rgba(10, 14, 34, .6); }
.office-picker h2 { color: #fff; font-size: 24px; margin: 0 32px 8px 0; }
.office-picker__sub { font-size: 14.5px; color: #B9C0DC; margin-bottom: 20px; }
.office-picker__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.office-picker__list a {
  display: block; padding: 14px 16px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18); color: #fff; text-decoration: none; transition: var(--t);
}
.office-picker__list a:hover, .office-picker__list a:focus-visible { background: var(--indigo); border-color: var(--indigo); outline: none; }
.office-picker__list strong { display: block; font-size: 16px; }
.office-picker__list span { display: block; font-size: 13px; color: #C7CFEA; margin-top: 2px; }
.office-picker__call { margin-top: 18px; font-size: 14px; color: #B9C0DC; }
.office-picker__call a { color: #fff; }
.office-picker__close {
  position: absolute; top: 12px; right: 14px; background: none; border: 0;
  color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.office-picker__close:focus-visible { outline: 2px solid var(--indigo-lite); }

/* ==========================================================================
   Blog post layout (conversion-focused): contents list, mid-article prompt,
   lawyer card after the article, related cards. Sidebar on posts holds only
   the booking card, sticky and uncapped so it never clips.
   ========================================================================== */
.post-body { font-size: 17px; }
.post-body > p, .post-body > ul, .post-body > ol { max-width: 68ch; }
.post-body .article-figure { margin: 0 0 28px; }
.post-body .article-figure img { border-radius: 0 14px 0 0; background: var(--wash); }
.post-body h2 { scroll-margin-top: 120px; }

.post-toc { background: var(--wash); border-left: 3px solid var(--indigo); padding: 18px 22px; margin: 0 0 32px; }
.post-toc__title { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--indigo); margin: 0 0 10px; }
.post-toc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.post-toc li::before { content: none !important; }
.post-toc a { color: var(--ink); text-decoration: none; }
.post-toc a:hover { color: var(--indigo); text-decoration: underline; }

.post-inline-cta { margin: 36px 0; }

.post-lawyer { display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: center; background: var(--navy);
  color: #E3E6F5; border-radius: 0 14px 0 0; overflow: hidden; margin: 44px 0 28px; }
.post-lawyer img { width: 140px; height: 100%; min-height: 180px; object-fit: cover; display: block; }
.post-lawyer__body { padding: 22px 24px 22px 0; }
.post-lawyer__eyebrow { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--indigo-lite); margin: 0 0 6px; }
.post-lawyer__name { margin: 0 0 8px; font-family: var(--font-display); font-size: 22px; color: #fff; }
.post-lawyer__name a { color: #fff; text-decoration: none; }
.post-lawyer__name span { font-family: inherit; font-size: 14px; color: #B9C0DC; margin-left: 8px; }
.post-lawyer__text { font-size: 15px; color: #C9CEE6; margin: 0 0 16px; max-width: 52ch; }
.post-lawyer__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.post-lawyer .btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); }
@media (max-width: 600px) {
  .post-lawyer { grid-template-columns: 1fr; }
  .post-lawyer img { width: 100%; height: 220px; min-height: 0; }
  .post-lawyer__body { padding: 0 20px 22px; }
}

.post-filed { font-size: 14px; color: var(--ink-soft); }

@media (min-width: 900px) {
  .pa-sidebar.pa-sidebar--post { top: 110px; max-height: none; overflow: visible; }
  .pa-sidebar--post .sb-cta__lawyer-photo { aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
}
/* .prose p sets dark ink; the lawyer card sits on navy, so restate its text colours with matching specificity. */
.prose .post-lawyer p { margin-top: 0; }
.prose .post-lawyer .post-lawyer__eyebrow { color: var(--indigo-lite); }
.prose .post-lawyer .post-lawyer__text { color: #D5D9EE; }
.prose .post-lawyer .post-lawyer__name, .prose .post-lawyer .post-lawyer__name a { color: #fff; }
.prose .post-lawyer .post-lawyer__name span { color: #B9C0DC; }

/* Featured image on article cards (Insights index, categories, related reading). Decorative: the title link
   carries the accessible name, so the image link is hidden from assistive tech and the tab order. */
.post-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--wash); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.post-card:hover .post-card__media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .post-card:hover .post-card__media img { transform: none; } }

/* Legal Services mega menu: all 12 practice areas in three groups. Reuses .nav__sub show/hide behaviour. */
@media (min-width: 1024px) {
  .nav__sub.nav__mega { left: -160px; width: 720px; padding: 22px 24px 18px; display: grid;
    grid-template-columns: repeat(3, 1fr); column-gap: 18px; row-gap: 6px; }
  .nav__mega ul { list-style: none; margin: 0; padding: 0; }
  .nav__mega-title { margin: 0 0 8px; padding: 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--indigo-lite); }
  .nav__mega .nav__mega-col a { padding: 8px 10px; border-radius: var(--radius); }
  .nav__sub.nav__mega a.nav__mega-all { grid-column: 1 / -1; margin-top: 10px; padding: 12px 10px 2px;
    border-top: 1px solid rgba(255,255,255,.1); font-weight: 600; color: #fff; }
  .nav__sub.nav__mega a.nav__mega-all:hover { background: none; color: var(--indigo-lite); }
}

/* Directory cards: explicit "Read more" to the full bio, pinned to the card bottom; photo also links to the bio. */
.lawyer-card__more { margin-top: auto; padding-top: 14px; align-self: flex-start; }
.lawyer-card__photo-link { display: block; width: 100%; height: 100%; }

/* About page */
.about-jump { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); }
.about-jump .container { display: flex; gap: 6px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.about-jump a { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.about-jump a:hover { background: var(--wash); color: var(--navy); }
#who-we-are, #history, #how-we-help, #who-we-help, #people, #reviews, #community, #resources, #careers { scroll-margin-top: 140px; }
.who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.who-card { background: #fff; border: 1px solid var(--line); border-radius: 0 14px 0 0; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.who-card h3 { font-size: 20px; }
.who-card p { color: var(--ink-soft); font-size: 15px; flex: 1; }
.about-team { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.about-reviews { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.about-reviews__score { justify-self: center; text-align: center; background: #B6A477; color: var(--navy); padding: 30px 46px; border-radius: 0 14px 0 0; }
.about-reviews__score span:first-child { display: block; font-family: var(--font-display); font-size: 64px; line-height: 1; }
.about-reviews__stars { display: block; font-size: 22px; letter-spacing: 4px; margin: 6px 0; }
.about-reviews__score small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list li { background: var(--wash); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 13.5px; color: var(--ink); }
.chip-list li::before { content: none !important; }
.about-careers-cta { background: #fff; border: 1px solid var(--line); border-radius: 0 14px 0 0; padding: 28px; align-self: center; }
.about-careers-cta p { color: var(--ink-soft); margin-bottom: 16px; }
.about-final { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.about-final h2 { color: #fff; }
.about-final p { color: #B9C0DC; margin-top: 8px; }
.about-final__actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) { .about-reviews { grid-template-columns: 1fr; } }
/* The site header is sticky (72px mobile / 86px desktop): park the About jump bar directly beneath it. */
.about-jump { top: 72px; }
@media (min-width: 1024px) { .about-jump { top: 86px; } }

/* About: heritage section — intro with overlapping archive photos, then a spacious vertical timeline. */
.heritage__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 72px; }
.heritage__intro h2 { color: #fff; margin: 8px 0 18px; }
.heritage__intro p { color: #C9CEE6; max-width: 56ch; }
.heritage__intro p + p { margin-top: 14px; }
.heritage__intro .link-arrow { color: var(--indigo-lite); }
.heritage__photos { position: relative; min-height: 420px; }
.heritage__photo { position: absolute; margin: 0; width: 64%; border: 6px solid #B6A477; box-shadow: 0 18px 40px rgba(0,0,0,.35); background: #222; }
.heritage__photo img { display: block; width: 100%; height: auto; filter: sepia(.18) contrast(1.05); }
.heritage__photo--a { top: 0; left: 0; transform: rotate(-2deg); z-index: 1; }
.heritage__photo--b { bottom: 18px; right: 0; transform: rotate(2.5deg); z-index: 2; }
.heritage__caption { position: absolute; left: 0; bottom: -6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #B6A477 !important; }

.heritage-tl { list-style: none; margin: 0 auto; padding: 0; position: relative; max-width: 940px; }
.heritage-tl::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 2px; background: rgba(159,176,240,.35); transform: translateX(-1px); }
.heritage-tl__item { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; padding: 0 0 44px; }
.heritage-tl__item::before { content: none !important; }
.heritage-tl__item::after { content: ""; position: absolute; left: 50%; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: #B6A477;
  box-shadow: 0 0 0 5px var(--navy), 0 0 0 6px rgba(182,164,119,.5); transform: translateX(-7px); }
.heritage-tl__year { font-family: var(--font-display); font-size: 30px; line-height: 1.1; color: #fff; text-align: right; padding-top: 0; }
.heritage-tl__card { background: var(--navy-soft); border: 1px solid rgba(255,255,255,.1); border-radius: 0 14px 0 0; padding: 20px 24px; }
.heritage-tl__card h3 { color: #fff; font-size: 19px; margin: 0 0 6px; }
.heritage-tl__card p { color: #C9CEE6; font-size: 15.5px; margin: 0; }
.heritage-tl__item:nth-child(even) .heritage-tl__year { order: 2; text-align: left; }
.heritage-tl__item:nth-child(even) .heritage-tl__card { order: 1; }
.heritage-tl__item:last-child { padding-bottom: 0; }

@media (max-width: 860px) {
  .heritage__intro { grid-template-columns: 1fr; gap: 40px; margin-bottom: 52px; }
  .heritage__photos { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .heritage__photo { position: static; width: auto; transform: none; border-width: 4px; }
  .heritage__caption { position: static; grid-column: 1 / -1; }
  .heritage-tl::before { left: 7px; }
  .heritage-tl__item { grid-template-columns: 1fr; row-gap: 10px; padding: 0 0 32px 36px; }
  .heritage-tl__item::after { left: 7px; }
  .heritage-tl__year, .heritage-tl__item:nth-child(even) .heritage-tl__year { order: 0; text-align: left; font-size: 24px; }
  .heritage-tl__item:nth-child(even) .heritage-tl__card { order: 1; }
}

/* About intro: two balanced columns (lead left, body right) */
.about-intro { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.about-intro__lead h2 { margin: 8px 0 18px; }
.about-intro__statement { font-family: var(--font-display); font-size: 21px; line-height: 1.5; color: var(--navy); }
.about-intro__body { padding-top: 46px; }
.about-intro__body p + p { margin-top: 16px; }
.about-intro__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 860px) { .about-intro { grid-template-columns: 1fr; gap: 20px; } .about-intro__body { padding-top: 0; } }
/* About intro hierarchy: heading leads, statement supports. */
.about-intro__lead h2 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.12; letter-spacing: -.01em; margin: 10px 0 20px; }
.about-intro__statement { font-family: inherit; font-size: 18px; line-height: 1.65; color: var(--ink-soft); max-width: 40ch; }
.about-intro__body { padding-top: 64px; }
.about-intro__body > p:first-child { font-size: 17.5px; color: var(--ink); }
@media (max-width: 860px) { .about-intro__body { padding-top: 0; } }
/* About: one heading scale for every section title. */
#reviews h2, #community h2, #careers h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.15; margin: 10px 0 16px; }
#reviews h2 { color: #fff; }
/* Blog CTAs: same measure as the article text, compact and balanced. */
.post-body > .post-lawyer, .post-body > .inline-cta, .post-body > .post-toc, .post-body > .legal-disclaimer { max-width: 68ch; }
.post-lawyer { grid-template-columns: 120px 1fr; gap: 0; margin: 40px 0 24px; align-items: stretch; }
.post-lawyer img { width: 120px; min-height: 0; height: 100%; }
.post-lawyer__body { padding: 20px 24px; }
.prose .post-lawyer .post-lawyer__eyebrow { font-size: 11px; margin-bottom: 4px; }
.prose .post-lawyer .post-lawyer__name { font-size: 20px; margin-bottom: 6px; }
.prose .post-lawyer .post-lawyer__name span { font-size: 13px; }
.prose .post-lawyer .post-lawyer__text { font-size: 14.5px; line-height: 1.6; margin-bottom: 14px; }
.post-lawyer .btn { padding: 12px 18px; font-size: 12px; }
@media (max-width: 600px) {
  .post-lawyer { grid-template-columns: 1fr; }
  .post-lawyer img { width: 100%; height: 200px; object-position: top; }
  .post-lawyer__body { padding: 18px 20px 20px; }
}
/* One measure for every block in the article column so edges line up (ch varies with each element's font size). */
.post-body { --measure: 38rem; }
.post-body > p, .post-body > ul, .post-body > ol, .post-body > h2, .post-body > h3, .post-body > blockquote,
.post-body > .post-lawyer, .post-body > .inline-cta, .post-body > .post-toc, .post-body > .legal-disclaimer,
.post-body > .post-filed { max-width: var(--measure); }

/* Formspree spam trap: off-screen for people, visible to bots. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 12px; padding: 12px 14px; background: #FDECEC; border-left: 3px solid #B42318; color: #7A1A12; font-size: 14px; }

/* Homepage hero: extra blue wash behind the headline (left) fading out over the photo (right) for legibility. */
.hero--home .pa-hero__bg::after {
  background:
    linear-gradient(90deg,
      rgba(22,29,65,.93) 0%,
      rgba(22,29,65,.86) 32%,
      rgba(39,58,151,.55) 56%,
      rgba(39,58,151,.18) 74%,
      rgba(39,58,151,0) 88%),
    linear-gradient(0deg, rgba(22,29,65,.6) 0%, rgba(22,29,65,0) 38%);
}
@media (max-width: 900px) {
  .hero--home .pa-hero__bg::after { background: linear-gradient(180deg, rgba(22,29,65,.78) 0%, rgba(22,29,65,.9) 100%); }
}
/* The homepage hero stacks differently from practice heroes: keep the wash above the photo, text above the wash. */
.hero--home .pa-hero__bg::after { z-index: 1; }
.hero--home .hero__inner, .hero--home > .container { position: relative; z-index: 2; }
/* Homepage hero: lighter wash over the photo side (Ben). */
.hero--home .pa-hero__bg::after {
  background:
    linear-gradient(90deg,
      rgba(22,29,65,.93) 0%,
      rgba(22,29,65,.84) 30%,
      rgba(39,58,151,.40) 50%,
      rgba(39,58,151,.08) 64%,
      rgba(39,58,151,0) 74%),
    linear-gradient(0deg, rgba(22,29,65,.6) 0%, rgba(22,29,65,0) 32%);
}
@media (max-width: 900px) {
  .hero--home .pa-hero__bg::after { background: linear-gradient(180deg, rgba(22,29,65,.78) 0%, rgba(22,29,65,.9) 100%); }
}

/* Mobile image heroes: show the photograph as a clear band above the headline instead of
   burying it under a full-cover wash, so the people in it are visible on phones. */
@media (max-width: 939px) {
  .pa-hero--image, .hero--image { padding-top: 0; min-height: 0; }
  .pa-hero--image .pa-hero__bg, .hero--image .pa-hero__bg {
    position: relative; inset: auto; z-index: 0; height: clamp(220px, 62vw, 380px);
    margin: 0 0 28px;
  }
  .pa-hero--image .pa-hero__bg img, .hero--image .pa-hero__bg img { object-position: 72% 30%; }
  .pa-hero--image .pa-hero__bg::after, .hero--image .pa-hero__bg::after {
    z-index: 1;
    background: linear-gradient(to top, rgba(22,29,65,1) 0%, rgba(22,29,65,0) 34%) !important;
  }
  .pa-hero--image, .hero--image { background: var(--navy); }
}

/* Mobile menu shows parent links only; child pages are reached from each section's landing page. */
.mobile-nav .sub { display: none; }

/* Single-column grids must never grow past the viewport: an implicit auto column sizes to the
   widest child (a long word, table or wide widget), which pushed article text off-screen on phones. */
.split > *, .pa-hero__grid > * { min-width: 0; }
@media (max-width: 899px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* Legacy post embeds (YouTube etc.) carry fixed width/height attributes; scale them to the column. */
main iframe, main video, main embed, main object { max-width: 100%; }
main iframe[src*="youtube"], main iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Phones: comparison tables become stacked cards (row heading on top, each cell with its column label). */
@media (max-width: 699px) {
  .table-scroll { overflow-x: visible; }
  .table-scroll .cmp, .cmp { min-width: 0; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp caption { display: block; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp tbody tr { border: 1px solid var(--line); margin: 0 0 14px; background: #fff; }
  .cmp tbody th { width: auto; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .cmp td { padding: 10px 16px; border-bottom: 1px solid var(--line); }
  .cmp td:last-child { border-bottom: 0; }
  .cmp td[data-label]::before {
    content: attr(data-label); display: block; font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2px;
  }
  .cmp tbody tr:hover td { background: transparent; }
}
/* Legacy tables in migrated posts scroll inside the column instead of widening the page. */
main table:not(.cmp) { display: block; max-width: 100%; overflow-x: auto; }

/* Agency credit: final footer line. */
.footer__credit { padding-top: 14px; padding-bottom: 18px; font-size: 13px; color: rgba(255,255,255,.55); border-top: 1px solid rgba(255,255,255,.08); }
.footer__credit a { color: rgba(255,255,255,.75); text-decoration: underline; text-underline-offset: 2px; }
.footer__credit a:hover { color: #fff; }
@media (max-width: 899px) { .footer__credit { padding-bottom: 76px; } }

/* Blog mid-article CTA: tight, balanced card. Post body line-height (≈1.9) was leaking into the
   heading and subline, and the button stretched to fill half the card. */
.post-body .post-inline-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px;
  padding: 26px 30px; border-radius: 0 14px 0 0; border-left: 4px solid var(--indigo-lite, #8E9BE8);
}
.post-body .post-inline-cta .inline-cta__text { flex: 1 1 280px; min-width: 0; }
.post-body .post-inline-cta strong { font-size: 22px; line-height: 1.25; margin: 0 0 6px; text-wrap: balance; }
.post-body .post-inline-cta span { display: block; font-size: 15px; line-height: 1.5; }
.post-body .post-inline-cta .btn { flex: 0 0 auto; padding: 14px 24px; white-space: nowrap; }
@media (max-width: 560px) {
  .post-body .post-inline-cta { padding: 22px 20px; }
  .post-body .post-inline-cta .btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   Landing pages: /management-training/ and /proactive-legal-packages/
   ========================================================================== */
.lp-hero { padding: 40px 0 56px; }
.lp-hero .crumbs { margin-bottom: 18px; color: rgba(255,255,255,.75); }
.lp-hero .crumbs a { color: rgba(255,255,255,.85); }
.lp-hero h1 { max-width: 22ch; }
.lp-hero .pa-hero__lede { max-width: 62ch; }
.lp-hero .pa-hero__lede strong { color: #fff; font-weight: 600; }
.lp-hero .btn--ghost, .lp-final .btn--ghost { border-color: rgba(255,255,255,.7); color: #fff; }
.lp-hero .btn--ghost:hover, .lp-final .btn--ghost:hover { background: #fff; color: var(--navy); }
.section-heading p { max-width: 70ch; color: var(--ink-soft); }
.section--navy .section-heading p { color: #D7DCF0; }

@media (min-width: 900px) { .flow--5 { grid-template-columns: repeat(5, 1fr); gap: 24px; } }
.flow--5 .flow__step h3 { font-size: 19px; margin-bottom: 8px; }
.flow--5 .flow__step p { font-size: 15px; line-height: 1.55; }

.lp-flagship {
  display: grid; gap: 24px 48px; background: var(--navy); color: #E3E6F5;
  border-radius: 0 14px 0 0; padding: 32px; margin: 0 0 20px;
}
@media (min-width: 900px) { .lp-flagship { grid-template-columns: 1.1fr 1fr; padding: 40px 44px; } }
.lp-flagship h3, .lp-flagship h4 { color: #fff; }
.lp-flagship h3 { font-size: 28px; margin: 10px 0 4px; }
.lp-flagship h4 { font-size: 15px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; }
.lp-flagship .checks li { color: #E3E6F5; }
.lp-flagship .path__tag { background: #B6A477; color: var(--navy); }
.lp-flagship .lp-ws__meta { color: #B9C0DC; }
.lp-flagship .lp-ws__note { font-size: 14px; color: #B9C0DC; margin: 14px 0 20px; }
.lp-ws__meta { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo); margin: 4px 0 10px; }
.lp-ws-grid { margin: 0; }
@media (min-width: 1100px) { .lp-ws-grid { grid-template-columns: repeat(3, 1fr); } }
.lp-ws { display: flex; flex-direction: column; background: #fff; }
.lp-ws h3 { font-size: 20px; line-height: 1.25; }
.lp-ws .checks { margin: 8px 0 0; grid-template-columns: 1fr !important; gap: 8px; font-size: 15px; }
.lp-ws--custom { background: var(--wash); border-style: dashed; }
.lp-ws--custom .btn { margin-top: auto; align-self: flex-start; }

.lp-gallery { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .lp-gallery { grid-template-columns: repeat(4, 1fr); } }
.lp-gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.lp-stats { margin-top: 28px; }
.lp-stats div { padding: 24px 18px; }
.lp-stats dt { font-size: 40px; }
.lp-stats dd { color: #C7CFEA; line-height: 1.4; }

.lp-person { display: grid; gap: 28px 48px; align-items: start; }
@media (min-width: 860px) { .lp-person { grid-template-columns: 320px 1fr; } }
.lp-person img { width: 100%; max-width: 320px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0 14px 0 0; }
.lp-person h2 { margin: 4px 0 2px; }
.lp-person h2 a { color: inherit; }
.lp-person__role { font-weight: 600; color: var(--indigo); margin-bottom: 14px; }
.lp-person p { max-width: 68ch; }

.lp-compare { display: grid; gap: 18px; }
@media (min-width: 800px) { .lp-compare { grid-template-columns: 1fr 1fr; } }
.lp-compare__col { padding: 28px; border: 1px solid var(--line); }
.lp-compare__col--new { background: var(--navy); color: #E3E6F5; border-color: var(--navy); border-radius: 0 14px 0 0; }
.lp-compare__col--new h3 { color: #fff; }
.lp-compare__col--new .checks li { color: #E3E6F5; }
.lp-compare .checks { grid-template-columns: 1fr !important; }
.lp-x { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.lp-x li { position: relative; padding-left: 28px; color: var(--ink-soft); }
.lp-x li::before { content: "\2715"; position: absolute; left: 0; top: 0; color: #B04A4A; font-weight: 700; }

@media (min-width: 1120px) { .lp-reasons { grid-template-columns: repeat(2, 1fr); } }
.lp-included { margin: 8px 0 32px; }
@media (min-width: 800px) { .lp-included { grid-template-columns: 1fr 1fr; gap: 12px 40px; } }
.lp-training { max-width: 760px; }
.lp-pricing .btn { margin-top: 6px; }
.lp-small { font-size: 14px; color: var(--ink-soft); margin-top: 18px; }

.lp-final h2 { color: #fff; }
.lp-final p { color: #D7DCF0; max-width: 64ch; }
.lp-final .pa-hero__actions { margin: 22px 0 14px; }
.lp-final__email a { color: #fff; text-decoration: underline; }
.lp-person p + p, .lp-final p + p, .lp-ws p + p { margin-top: 12px; }
.lp-person .eyebrow { margin: 0; }