/* ==========================================================================
   Law Office of Lee W. Gale
   "Ridgeline" - a cool, civic, signage-derived system.

   Type      Archivo (display) + Public Sans (text), both self-hostable.
   Colour    Warm paper and ink with a brass accent. Light is the default for
             every visitor; dark ships only when the reader asks for it.
   Principle The page is staged, not decorated. No eyebrow above every heading,
             no 01/02/03 counters, no hairline grids drawn for their own sake.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  color-scheme: light;

  /* Warm paper and ink, restored at the client's request. The v1 brass
     (#A87C3C) measured 3.53:1 on paper, which fails AA for body text and fails
     again as a fill behind a paper-coloured label. It is kept ONLY for large
     display type, where 3:1 is the bar. Everything small uses the deeper brass. */
  --bg:        #FBF8F2;   /* paper.                              */
  --surface:   #F3EDE1;   /* warm band and card ground.          */
  --text:      #15120E;   /* ink. 17.61:1 on paper               */
  --text-2:    #5C5449;   /* 7.03:1 on paper, 6.39:1 on surface  */
  --border:    #E3DACA;   /* passive dividers only               */
  --accent:    #7C5A28;   /* deep brass. 5.91:1 paper, 5.38 band */
  --accent-display: #A87C3C;  /* v1 brass. LARGE TEXT AND STROKES ONLY, 3.53:1 */
  --accent-ink:#FBF8F2;   /* paper on a deep-brass fill, 5.91:1  */
  --accent-hi: #6A4B20;   /* hover darkens, so contrast rises to 7.50:1 */

  /* Interactive strokes must clear WCAG 1.4.11 (3:1), so controls outline in
     --text-2 rather than --border. --border is for passive dividers only. */
  --stroke:    var(--text-2);

  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Headline caps at 2 lines, so the top of the ramp stays modest. */
  --t-display: clamp(2.35rem, 1.35rem + 3.9vw, 4.4rem);
  --t-h1:      clamp(2.1rem, 1.3rem + 3.1vw, 3.7rem);
  --t-h2:      clamp(1.7rem, 1.25rem + 1.8vw, 2.6rem);
  --t-h3:      clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
  --t-h4:      clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  --t-lead:    clamp(1.1rem, 1.04rem + 0.32vw, 1.3rem);
  --t-body:    1.0625rem;          /* 17px: this audience skews older */
  --t-small:   0.9375rem;
  --t-micro:   0.8125rem;          /* never below this; see the footer note */

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wrap: 1240px;
  --wrap-mid: 1020px;
  --wrap-narrow: 720px;
  --section-y: clamp(4rem, 8vw, 8rem);

  --radius: 3px;
  --header-h: 72px;                /* skill caps desktop nav at 80px */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light is the default for every visitor, regardless of the operating system
   setting. Dark is opt-in: it applies only once the reader has used the toggle,
   which stores the choice and sets this attribute before first paint. */
:root[data-theme="dark"] {
  color-scheme: dark;
    --bg:        #14110D;
    --surface:   #1F1B15;
    --text:      #F5F0E6;
    --text-2:    #B3A894;
    --border:    #332D24;
    --accent:    #D9A860;
    --accent-display: #D9A860;
    --accent-ink:#14110D;
    --accent-hi: #EFC183;
}



/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;  /* phone and case numbers align */
}

img, svg, video, picture { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, p, figure, blockquote { margin: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 0; }

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

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

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  background: var(--text); color: var(--bg); padding: 0.8rem 1.5rem;
  z-index: 90; font-size: var(--t-small); font-weight: 600;
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- 3. Typography ------------------------------------------------ */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.06;
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.016em; line-height: 1.22; }
h4 {
  font-family: var(--font-display); font-size: var(--t-h4);
  font-weight: 600; letter-spacing: -0.008em; line-height: 1.34;
}
.display { font-size: var(--t-display); line-height: 1.04; letter-spacing: -0.03em; }

/* Emphasis inside a headline stays in the same family, per the skill's rule
   against mixed-family emphasis. Extra leading reserves descender clearance. */
.display em, h1 em, h2 em {
  font-style: italic; color: var(--accent-display); font-weight: 700;
  line-height: 1.12; padding-bottom: 0.04em;
}

.lead {
  font-size: var(--t-lead); line-height: 1.55; color: var(--text-2);
  text-wrap: pretty; max-width: 58ch;
}

/* Retained for the few places a section genuinely needs a category label.
   Budgeted at one per three sections; the decorative rule that used to sit
   before it is gone. */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 1rem; line-height: 1.4;
}

/* Section headings stack: heading, then body beneath at a readable measure.
   This replaces the banned left-label / right-content split. */
.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head h2 + p { margin-top: 1.1rem; }
.section-head .lead { max-width: 62ch; }

.prose p { margin-bottom: 1.15em; max-width: 68ch; text-wrap: pretty; color: var(--text-2); }
.prose p:last-child { margin-bottom: 0; }
.prose > h2 { margin: 2.2em 0 0.65em; color: var(--text); }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { margin: 2em 0 0.6em; color: var(--text); }
.prose h4 { margin: 1.8em 0 0.45em; color: var(--text); }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.25rem; max-width: 68ch; color: var(--text-2); }
.prose li { margin-bottom: 0.5em; padding-left: 0.3rem; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--text); font-weight: 700; }
.prose a:not(.btn), .link {
  color: var(--accent); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease);
}
.prose a:not(.btn):hover, .link:hover { color: var(--accent-hi); }

.muted { color: var(--text-2); }
.tabnum { font-variant-numeric: tabular-nums; }

/* ---------- 4. Layout ---------------------------------------------------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap--mid { width: min(100% - (var(--gutter) * 2), var(--wrap-mid)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.75rem, 5vw, 5rem); }
.section--rule { border-top: 1px solid var(--border); }

/* Alternating bands use the surface token. There are no dark panels inside a
   light page: the theme is locked, and the whole page moves together. */
.band-surface { background: var(--surface); }

.grid { display: grid; gap: clamp(1.4rem, 2.6vw, 2.4rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }

.grid-aside { grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.grid-bio   { grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.grid-form  { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(2.25rem, 4vw, 4rem); align-items: start; }
@media (max-width: 900px) { .grid-aside, .grid-bio, .grid-form { grid-template-columns: minmax(0, 1fr); } }

.max-60 { max-width: 60ch; } .max-52 { max-width: 52ch; } .max-44 { max-width: 44ch; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.4rem}.mt-5{margin-top:3.2rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.6rem}.mb-4{margin-bottom:2.4rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- 5. Header ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--border); background: color-mix(in srgb, var(--bg) 97%, transparent); }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.75rem; height: var(--header-h); }

.brand { display: flex; align-items: center; gap: 0.65rem; flex: none; }
.brand__mark {
  width: 32px; height: 32px; flex: none; border: 1.5px solid var(--text);
  display: grid; place-items: center; font-family: var(--font-display);
  font-size: 0.95rem; font-weight: 700; line-height: 1;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.brand:hover .brand__mark { background: var(--text); color: var(--bg); }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.02em; }
.brand__sub { font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
@media (max-width: 400px) { .brand__sub { display: none; } }

.nav__links { display: flex; align-items: center; gap: clamp(0.4rem, 1.4vw, 1.4rem); list-style: none; }
@media (max-width: 1060px) { .nav__links { display: none; } }

.nav__link {
  font-size: 0.94rem; font-weight: 500; padding: 0.5rem 0.15rem;
  position: relative; color: var(--text-2); transition: color 0.2s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s var(--ease-out);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--text); font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__item--has-menu { position: relative; }
.nav__toggle { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav__toggle svg { transition: transform 0.25s var(--ease); opacity: 0.6; }
.nav__item--has-menu:hover .nav__toggle svg,
.nav__item--has-menu:focus-within .nav__toggle svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 0.35rem); left: -1rem; min-width: 290px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 18px 44px -22px color-mix(in srgb, var(--text) 40%, transparent);
  padding: 0.45rem; list-style: none; border-radius: var(--radius);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav__item--has-menu:hover .nav__menu,
.nav__item--has-menu:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__menu a { display: block; padding: 0.65rem 0.8rem; font-size: 0.92rem; border-radius: var(--radius); transition: background 0.18s var(--ease); }
.nav__menu a:hover { background: var(--bg); }
.nav__menu .m-title { font-weight: 600; display: block; }
.nav__menu .m-desc { font-size: 0.8rem; color: var(--text-2); display: block; margin-top: 0.1rem; }

.nav__actions { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.nav__phone {
  /* On a phone the number is hidden and only the glyph remains, which left the
     single most important call-to-action on the site as a 17px target. */
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-width: 44px; min-height: 44px;
  font-size: 0.94rem; font-weight: 600; color: var(--text);
  transition: color 0.2s var(--ease);
}
.nav__phone:hover { color: var(--accent); }
.nav__phone svg { opacity: 0.7; }
@media (max-width: 1060px) { .nav__phone span { display: none; } }
@media (max-width: 720px) { .nav__actions .btn--primary { display: none; } }

.theme-toggle {
  width: 44px; height: 44px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-2);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--stroke); background: var(--surface); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }


.burger { display: none; width: 44px; height: 44px; place-items: center; border: 1px solid var(--stroke); border-radius: var(--radius); flex: none; }
@media (max-width: 1060px) { .burger { display: grid; } }
.burger__bars { width: 17px; height: 11px; position: relative; }
.burger__bars i { position: absolute; left: 0; right: 0; height: 2px; background: var(--text); transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease); }
.burger__bars i:nth-child(1) { top: 0; }
.burger__bars i:nth-child(2) { top: 50%; margin-top: -1px; }
.burger__bars i:nth-child(3) { bottom: 0; }
.burger[aria-expanded="true"] .burger__bars i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars i:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--header-h) 0 0; z-index: 49;
  background: var(--bg); padding: 1.75rem var(--gutter) 3rem;
  overflow-y: auto; display: none; flex-direction: column;
}
.drawer.is-open { display: flex; }
.drawer ul { list-style: none; }
.drawer__link {
  display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  padding: 0.7rem 0; border-bottom: 1px solid var(--border); letter-spacing: -0.024em;
}
.drawer__sub { padding-left: 1rem; }
.drawer__sub a { display: block; padding: 0.45rem 0; font-size: 0.98rem; color: var(--text-2); border-bottom: 1px solid var(--border); }
.drawer__foot { margin-top: auto; padding-top: 2.25rem; }
body.nav-open { overflow: hidden; }

/* ---------- 6. Buttons --------------------------------------------------- */
/* v1 shipped a primary CTA that dropped to 3.53:1 on hover. Hover now moves
   AWAY from the background (darker on light, lighter on dark) so contrast can
   only improve, never degrade. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.9rem 1.5rem; font-family: var(--font-display);
  font-size: 0.95rem; font-weight: 600; white-space: nowrap;
  border: 1.5px solid transparent; border-radius: var(--radius);
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), transform 0.1s var(--ease);
}
.btn svg { flex: none; transition: transform 0.28s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--accent-ink); }

.btn--ghost { border-color: var(--stroke); color: var(--text); background: transparent; }
.btn--ghost:hover { background: var(--text); color: var(--bg); border-color: var(--text); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-display); font-size: 0.94rem; font-weight: 600;
  color: var(--accent); padding-bottom: 0.15rem;
  border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.link-arrow:hover { color: var(--accent-hi); border-bottom-color: var(--accent-hi); }
.link-arrow svg { transition: transform 0.28s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- 7. Hero: the ridgeline plate --------------------------------- */
/* All type sits on flat --bg above the image, so text contrast is never a
   gamble against photography. The plate's top scanline is graded to equal --bg
   exactly, which is why the range appears to rise out of the page. */
.hero { position: relative; padding-top: clamp(2.5rem, 5vw, 5rem); overflow: hidden; }
.hero__inner { position: relative; z-index: 2; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero h1 { max-width: 22ch; }
.hero__lead { margin-top: 1.35rem; max-width: 46ch; }
.hero__cta { margin-top: clamp(1.75rem, 3vw, 2.4rem); }

.hero__plate {
  position: relative; z-index: 1; width: 100%;
  height: clamp(190px, 26vw, 380px); overflow: hidden;
  /* The image drifts down on scroll, so whatever it uncovers at the top must be
     the page colour. It is the same value the image's top row is graded to. */
  background: var(--bg);
}
.hero__plate img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  /* Anchored to the top so scaling never lifts the graded seam off the edge. */
  transform-origin: center top;
  will-change: transform;
}
/* The plate is graded to meet the page background exactly, so each theme needs
   its own file. A picture element keyed on prefers-color-scheme cannot see the
   data-theme override, so the swap is done in CSS instead. Together the two
   AVIFs are ~8 KB, which is cheaper than the JS gymnastics the alternative needs. */
.plate--dark { display: none; }
:root[data-theme="dark"] .plate--light { display: none; }
:root[data-theme="dark"] .plate--dark  { display: block; }

@media (max-width: 767px) { .hero__plate { height: 30svh; min-height: 170px; } }

/* Interior pages: same grammar, shallower plate, no glow, no rules. */
.page-hero { position: relative; padding-top: clamp(1.5rem, 3vw, 3rem); overflow: hidden; }
.page-hero__inner { padding-bottom: clamp(2rem, 4vw, 3.25rem); }
.page-hero h1 { max-width: 17ch; }
.page-hero .lead { margin-top: 1.2rem; }
.page-hero__rule { height: 1px; background: var(--border); transform-origin: left; }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  font-size: var(--t-micro); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: clamp(1.25rem, 2.5vw, 1.9rem);
  list-style: none; font-weight: 600;
}
.crumbs a:hover { color: var(--accent); }
.crumbs li::after { content: "/"; margin-left: 0.45rem; opacity: 0.5; }
.crumbs li:last-child::after { display: none; }
.crumbs [aria-current] { color: var(--text); }

/* ---------- 8. Content modules ------------------------------------------- */
.card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.4vw, 2rem); background: var(--surface);
  display: flex; flex-direction: column;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out);
}
.card--link:hover, a.card:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--text) 45%, transparent);
}
.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--text-2); font-size: var(--t-small); line-height: 1.58; margin-bottom: 1.1rem; text-wrap: pretty; }
.card__foot { margin-top: auto; }
.card__label { font-family: var(--font-display); font-size: var(--t-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 0.85rem; }
.card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.1rem; }
.tag { font-size: var(--t-micro); padding: 0.25rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-2); }

/* Structured list. The 01/02/03 counters are gone: the heading is the label. */
.clauses { list-style: none; }
.clauses > li { padding: clamp(1.3rem, 2.4vw, 1.9rem) 0; border-bottom: 1px solid var(--border); }
.clauses > li:first-child { border-top: 1px solid var(--border); }
.clauses h3 { margin-bottom: 0.5rem; }
.clauses h3 a:hover { color: var(--accent); }
.clauses p { color: var(--text-2); max-width: 64ch; text-wrap: pretty; }

.pullquote { padding-left: clamp(1.1rem, 2.5vw, 2rem); border-left: 3px solid var(--accent-display); }
.pullquote blockquote { font-family: var(--font-display); font-size: clamp(1.3rem, 1.05rem + 1.2vw, 2rem); font-weight: 600; line-height: 1.28; letter-spacing: -0.022em; text-wrap: balance; }
.pullquote figcaption { margin-top: 1.2rem; font-size: var(--t-small); color: var(--text-2); }
.pullquote figcaption strong { color: var(--text); font-weight: 700; }

.quote-card { border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.5rem, 2.6vw, 2.2rem); background: var(--surface); }
.quote-card__stars { display: flex; gap: 0.15rem; color: var(--accent-display); margin-bottom: 1rem; }
.quote-card blockquote { font-family: var(--font-display); font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.014em; margin-bottom: 1.2rem; text-wrap: pretty; }
.quote-card cite { font-style: normal; font-size: var(--t-small); color: var(--text-2); display: block; }
.quote-card cite strong { display: block; color: var(--text); font-weight: 700; margin-bottom: 0.1rem; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { border-top: 2px solid var(--accent-display); padding-top: 1rem; }
.stat__n { font-family: var(--font-display); font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); font-weight: 700; line-height: 1; display: block; margin-bottom: 0.5rem; letter-spacing: -0.03em; }
.stat__l { font-size: var(--t-small); color: var(--text-2); line-height: 1.45; }

.portrait { position: relative; aspect-ratio: 4/5; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait__ph { display: grid; place-items: center; gap: 0.8rem; text-align: center; padding: 2rem; width: 100%; height: 100%; }
.portrait__ph .mono { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; color: var(--border); letter-spacing: -0.04em; }
.portrait__ph .cap { font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); max-width: 24ch; line-height: 1.5; }

.timeline { list-style: none; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; top: 0.7rem; bottom: 0.7rem; width: 2px; background: var(--border); }
.timeline li { position: relative; padding: 0 0 2rem 1.85rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -3px; top: 0.55rem; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 4px var(--bg); }
.timeline__y { font-family: var(--font-display); font-size: var(--t-micro); letter-spacing: 0.08em; color: var(--accent); font-weight: 700; display: block; margin-bottom: 0.35rem; }
.timeline h4 { margin-bottom: 0.25rem; }
.timeline p { font-size: var(--t-small); color: var(--text-2); max-width: 58ch; }

.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.25rem; padding: clamp(1.05rem, 2vw, 1.5rem) 0; text-align: left;
  font-family: var(--font-display); font-size: clamp(1.04rem, 1rem + 0.35vw, 1.24rem);
  font-weight: 600; line-height: 1.32; letter-spacing: -0.016em;
  transition: color 0.2s var(--ease);
}
.faq__q:hover { color: var(--accent); }
.faq__icon { flex: none; width: 15px; height: 15px; position: relative; margin-top: 0.4rem; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--accent); transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease); }
.faq__icon::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.faq__icon::after { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(90deg); opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.36s var(--ease-out); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 1.4rem; padding-right: clamp(0rem, 5vw, 3.5rem); color: var(--text-2); max-width: 72ch; }
.faq__a p + p { margin-top: -0.5rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; }
.chip { font-size: var(--t-small); padding: 0.36rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-2); display: inline-block; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
a.chip:hover { border-color: var(--accent); color: var(--accent); }

.courts { list-style: none; }
.courts li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.courts .c-name { font-weight: 600; font-size: var(--t-body); }
.courts .c-meta { font-size: var(--t-small); color: var(--text-2); text-align: right; }
@media (max-width: 560px) { .courts li { grid-template-columns: 1fr; gap: 0.2rem; } .courts .c-meta { text-align: left; } }

.notice {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--surface); font-size: var(--t-small); color: var(--text-2); line-height: 1.6;
}
.notice strong { color: var(--text); font-weight: 700; }

.fees { width: 100%; border-collapse: collapse; text-align: left; }
.fees caption { text-align: left; font-size: var(--t-small); color: var(--text-2); padding-bottom: 0.9rem; }
.fees th, .fees td { padding: 0.95rem 0.7rem 0.95rem 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.fees thead th { font-family: var(--font-display); font-size: var(--t-micro); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-2); font-weight: 700; border-bottom-color: var(--text); }
.fees tbody th { font-weight: 600; }
.fees td { color: var(--text-2); font-size: var(--t-small); }
.fees .price { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; white-space: nowrap; color: var(--text); }

.rail { display: grid; gap: 1.4rem; }
.rail__item { display: grid; gap: 0.3rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--border); }
.rail__item:last-child { border-bottom: 0; padding-bottom: 0; }
.rail__label { font-family: var(--font-display); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); font-weight: 700; }
.rail__value { font-family: var(--font-display); font-size: 1.16rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.014em; }
.rail__value a:hover { color: var(--accent); }
.rail__meta { font-size: var(--t-small); color: var(--text-2); }

/* ---------- 9. Forms ----------------------------------------------------- */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.45rem; }
.field label { font-family: var(--font-display); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--text-2); }
.field label .req { color: var(--accent); }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.85rem 0.95rem;
  background: var(--surface);
  border: 1.5px solid var(--text-2); border-radius: var(--radius);
  font-size: var(--t-body); color: var(--text);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-2); opacity: 1; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}
.field textarea { min-height: 145px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235C5449' stroke-width='1.7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.95rem center; padding-right: 2.4rem; }
.field__hint { font-size: var(--t-small); color: var(--text-2); }
.check { display: flex; gap: 0.65rem; align-items: flex-start; font-size: var(--t-small); color: var(--text-2); line-height: 1.5; }
.check input { width: 18px; height: 18px; margin-top: 0.15rem; flex: none; accent-color: var(--accent); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
/* Status never relies on colour alone: it carries a word and a rule. */
.form__status { font-size: var(--t-small); padding: 0.85rem 1rem; border-left: 3px solid var(--accent); background: var(--surface); color: var(--text); display: none; }
.form__status.is-visible { display: block; }

/* ---------- 10. Footer --------------------------------------------------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--border); padding-top: clamp(3rem, 6vw, 5rem); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.25rem); padding-bottom: clamp(2.5rem, 4vw, 4rem); }
@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__blurb { margin-top: 1.2rem; font-size: var(--t-small); line-height: 1.6; max-width: 40ch; color: var(--text-2); }
.footer__h { font-family: var(--font-display); font-size: var(--t-micro); letter-spacing: 0.11em; text-transform: uppercase; color: var(--text); font-weight: 700; margin-bottom: 1rem; }
.footer__list { list-style: none; display: grid; gap: 0.6rem; }
.footer__list a { font-size: var(--t-small); color: var(--text-2); transition: color 0.2s var(--ease); }
.footer__list a:hover { color: var(--accent); }
.footer__nap { font-style: normal; font-size: var(--t-small); line-height: 1.75; color: var(--text-2); }
.footer__nap a:hover { color: var(--accent); }
.footer__nap strong { color: var(--text); font-weight: 700; display: block; margin-bottom: 0.25rem; }
.footer__bar { border-top: 1px solid var(--border); padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.85rem 2rem; justify-content: space-between; align-items: center; font-size: var(--t-small); color: var(--text-2); }
.footer__bar a:hover { color: var(--accent); }

/* v1 set this at 12.5px / 3.68:1. It is the most legally consequential text on
   the site, so it now runs at the body-adjacent size and full AA contrast. */
.footer__legal {
  border-top: 1px solid var(--border); padding-block: 1.5rem 2.25rem;
  font-size: var(--t-small); line-height: 1.65; color: var(--text-2); max-width: 96ch;
}
.footer__legal strong { color: var(--text); font-weight: 700; }

.socials { display: flex; gap: 0.45rem; }
.socials a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--stroke); border-radius: var(--radius); color: var(--text-2); transition: all 0.22s var(--ease); }
.socials a:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- 10b. Touch targets -------------------------------------------
   WCAG 2.5.8 asks for 24px minimum; 44px is the comfortable figure and the one
   used here. Gated on pointer: coarse so a mouse still gets the tighter,
   denser layout that reads better on a large screen. */
@media (pointer: coarse) {
  .chip {
    min-height: 44px; display: inline-flex; align-items: center;
    padding-inline: 0.85rem;
  }
  /* A pseudo-element would extend the hit area invisibly, but it cannot be
     measured by an audit or by a browser's own accessibility tree, so the
     element is given real height instead. */
  .link-arrow { min-height: 44px; align-items: center; }
  /* The consent box itself must be tappable, not only its label. */
  .check input { width: 24px; height: 24px; margin-top: 0; }
  .check { align-items: center; }
  .socials a { width: 44px; height: 44px; }
  .faq__q { min-height: 44px; }
  .crumbs a, .footer__list a, .nav__menu a { display: inline-block; padding-block: 0.35rem; }
  .drawer__sub a { padding-block: 0.7rem; }
}

/* ---------- 11. Motion --------------------------------------------------- */
/* Elements start hidden ONLY when JS is present to reveal them, so a failed
   script or a blocked bundle can never leave the page blank. */
/* Nothing is pre-hidden by CSS. GSAP sets the start state at runtime via
   gsap.from(), so a blocked, slow or broken script leaves the page fully
   readable rather than blank. Visibility is never a bet on JavaScript. */
/* The hero is deliberately NOT gated on JS. It carries the LCP element and the
   phone number, so it must be painted and readable even if the script never
   arrives. Its entrance is a transform-only nudge applied from JS instead. */
html.motion-settled [data-anim],
html.motion-settled [data-anim-group] > * { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .js [data-anim], .js [data-anim-group] > * { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

@media print {
  .site-header, .drawer, .hero__plate, .footer__grid, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}