/* =============================================================
   Dieker Copple Attorneys — Design System
   Monochrome: black · charcoal · grey · white. No accent hue.

   0. Fonts            8.  Hero (home)        16. Testimonials
   1. Tokens           9.  Page hero + crumb  17. CTA band
   2. Base             10. Value strip        18. Form
   3. Utilities        11. Prose              19. Related
   4. Layout           12. Cards              20. Legal
   5. Buttons          13. Icons              21. Not found
   6. Header + nav     14. Media slots        22. Print
   7. Footer           15. Team grid          23. Client photos

   v2 overhaul (sections 24-36 layer over the base above):
   24. Nav dropdown       29. Home hero v2      34. Practice pages
   25. Gold accents       30. Trust bar         35. Related cards
   26. Section heads v2   31. Tiles + steps     36. Component polish
   27. Motion             32. Framed photo
   28. Header on scroll   33. Page hero v2
   ============================================================= */


/* -------------------------------------------------------------
   0. FONTS — self-hosted latin subsets, variable weight axis.
   Lora (display/serif) + Public Sans (body/sans), from Google Fonts.
   ------------------------------------------------------------- */
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;          /* variable wght axis */
  font-display: swap;
  src: url("../fonts/lora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 300 800;          /* variable wght axis */
  font-display: swap;
  src: url("../fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks so the webfont swap causes no layout shift.
   size-adjust = webfont average lowercase advance / fallback average advance;
   ascent/descent = the webfont's hhea values divided by that size-adjust. */
@font-face {
  font-family: "Lora Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Times"), local("Liberation Serif");
  size-adjust: 104.6%;
  ascent-override: 96.2%;
  descent-override: 26.2%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Public Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 103.3%;
  ascent-override: 92.0%;
  descent-override: 21.8%;
  line-gap-override: 0%;
}


/* -------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------- */
:root {
  /* Monochrome ramp */
  --ink-950: #0B0B0C;   /* deepest black — footer base, hero wash */
  --ink-900: #161719;   /* charcoal — header, footer, hero, CTA band (logo ground) */
  --ink-800: #232527;
  --ink-700: #3A3D40;   /* strong body text / small print on white — 10.0:1 */
  --ink-500: #6B6F73;   /* secondary text on white — 5.1:1 */
  --ink-300: #C9CCCF;   /* rules and borders */
  --ink-100: #EDEEEF;   /* light grey panels, icon circles */
  --ink-050: #F6F6F7;   /* alternating section ground */
  --white:   #FFFFFF;

  /* Accent — muted gold. Used sparingly: eyebrows, icon circles, rules,
     ticks and quote marks. Never for body copy or button fills.
     Contrast checked: gold-700 on white 5.5:1, on --ink-050 5.1:1, on
     --ink-100 4.8:1 (AA text); gold-500 on white 3.4:1 (AA graphics);
     gold-300 on --ink-900 10.4:1 (AA text). */
  --gold-700: #826420;  /* small text on light grounds */
  --gold-500: #A8862F;  /* rules, ticks, marks on light grounds */
  --gold-300: #D8C48C;  /* text and rules on charcoal */
  --gold-050: #F8F3E7;  /* pale wash behind practice-area icons */
  --gold-hairline: rgba(216, 196, 140, .30);  /* 1px rules on charcoal */

  /* On-charcoal text tints (all >= 7:1 on --ink-900) */
  --on-dark:        rgba(255, 255, 255, 1);
  --on-dark-muted:  rgba(255, 255, 255, .78);
  --on-dark-faint:  rgba(255, 255, 255, .62);
  --rule-dark:      rgba(255, 255, 255, .16);

  /* Semantic */
  --bg: var(--white);
  --fg: var(--ink-700);
  --heading: var(--ink-900);
  --muted: var(--ink-500);
  --rule: var(--ink-300);
  --focus: var(--ink-900);
  --focus-dark: var(--white);

  /* Families */
  --font-display: "Lora", "Lora Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", "Public Sans Fallback", Arial, "Helvetica Neue", sans-serif;

  /* Fluid type scale */
  --t--1: clamp(0.8125rem, 0.795rem + 0.09vw, 0.875rem);
  --t-0:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-1:  clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
  --t-2:  clamp(1.1875rem, 1.09rem + 0.48vw, 1.4375rem);
  --t-3:  clamp(1.375rem, 1.19rem + 0.9vw, 1.875rem);
  --t-4:  clamp(1.75rem, 1.42rem + 1.55vw, 2.625rem);
  --t-5:  clamp(2.125rem, 1.6rem + 2.5vw, 3.5rem);

  /* Space */
  --s-1: .375rem;
  --s-2: .625rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4rem;
  --s-section: clamp(3.25rem, 1.9rem + 5.4vw, 6rem);

  /* Layout */
  --wrap: 74rem;          /* 1184px */
  --wrap-narrow: 44rem;   /* prose measure, ~68ch */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 4.5rem;

  /* Shape + depth */
  --radius: 2px;
  --radius-lg: 4px;
  --shadow-sm: 0 1px 2px rgba(11, 11, 12, .05), 0 2px 10px rgba(11, 11, 12, .05);
  --shadow-md: 0 2px 4px rgba(11, 11, 12, .07), 0 14px 34px rgba(11, 11, 12, .11);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: 200ms;
}

@media (min-width: 62rem) {
  :root { --header-h: 5.25rem; }
}


/* -------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-0);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 { font-size: var(--t-5); }
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-2); }
h4 { font-size: var(--t-1); }

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

a {
  color: var(--ink-900);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--ink-500); }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

button { font: inherit; color: inherit; }

hr {
  height: 0;
  margin: var(--s-5) 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 1px;
}

/* Focus rings on charcoal grounds flip to white. */
.site-header :where(a, button):focus-visible,
.site-footer :where(a, button):focus-visible,
.hero :where(a, button):focus-visible,
.cta-band :where(a, button):focus-visible,
.page-hero :where(a, button):focus-visible {
  outline-color: var(--focus-dark);
}

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

[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }


/* -------------------------------------------------------------
   3. UTILITIES
   ------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first focusable element in <body>. */
.skip-link {
  position: absolute;
  top: 0; left: 50%;
  z-index: 200;
  padding: var(--s-2) var(--s-4);
  background: var(--white);
  color: var(--ink-900);
  font-size: var(--t--1);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--ink-900);
  border-radius: 0 0 var(--radius) var(--radius);
  transform: translate(-50%, -110%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Small uppercase label above a heading. */
.eyebrow {
  margin: 0 0 var(--s-3);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow--on-dark { color: var(--on-dark-muted); }

/* One-paragraph standfirst under a heading. */
.lede {
  max-width: 60ch;
  color: var(--ink-700);
  font-size: var(--t-1);
  line-height: 1.6;
}
.lede--on-dark { color: var(--on-dark-muted); }

.text-center { text-align: center; }
.text-center .lede,
.text-center .section__deck { margin-inline: auto; }


/* -------------------------------------------------------------
   4. LAYOUT
   .container         full 1184px wrap
   .container--narrow prose measure (~68ch)
   .section           vertical rhythm band (white)
   .section--alt      light grey ground
   .section--dark     charcoal ground
   ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--wrap-narrow); }

.section {
  padding-block: var(--s-section);
  background: var(--white);
}
.section--alt { background: var(--ink-050); }
.section--panel { background: var(--ink-100); }
.section--dark {
  background: var(--ink-900);
  color: var(--on-dark-muted);
}
.section--dark :where(h1, h2, h3, h4) { color: var(--on-dark); }
.section--dark a { color: var(--white); }
.section--tight { padding-block: calc(var(--s-section) * .6); }

/* Heading block that opens a section. */
.section__head {
  max-width: var(--wrap-narrow);
  margin-bottom: var(--s-6);
}
.section__head--center {
  margin-inline: auto;
  text-align: center;
}
.section__title { font-size: var(--t-4); }
.section__deck {
  max-width: 60ch;
  margin-top: var(--s-3);
  color: var(--muted);
  font-size: var(--t-1);
}
.section--dark .section__deck { color: var(--on-dark-muted); }

/* Closing line under a section's main block (e.g. "See all practice areas"). */
.section__foot { margin-top: var(--s-6); }

/* Two-column split: text beside a media slot. Stacks under 56rem. */
.split {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
.split__body > * + * { margin-top: var(--s-4); }

@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
  .split--wide-text { grid-template-columns: 1.25fr 1fr; }
  .split--wide-media { grid-template-columns: 1fr 1.25fr; }
  /* Media painted first in the DOM but shown on the right. */
  .split--media-last .split__media { order: 2; }
}

/* Generic vertical stack for loose blocks. */
.stack > * + * { margin-top: var(--s-4); }
.stack--tight > * + * { margin-top: var(--s-2); }
.stack--loose > * + * { margin-top: var(--s-5); }

/* Horizontal group of buttons that wraps on small screens. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.btn-row--center { justify-content: center; }


/* -------------------------------------------------------------
   5. BUTTONS
   .btn--solid    white fill, charcoal text  (use on charcoal)
   .btn--dark     charcoal fill, white text  (use on white/grey)
   .btn--outline  transparent, 1px border    (inherits ground)
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3rem;              /* 48px tap target */
  padding: .75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--t-0);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--solid {
  background: var(--white);
  color: var(--ink-900);
  border-color: var(--white);
}
.btn--solid:hover {
  background: var(--ink-100);
  border-color: var(--ink-100);
  color: var(--ink-900);
}

.btn--dark {
  background: var(--ink-900);
  color: var(--white);
  border-color: var(--ink-900);
}
.btn--dark:hover {
  background: var(--ink-700);
  border-color: var(--ink-700);
  color: var(--white);
}

.btn--outline {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
.btn--outline:hover {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--white);
}
/* On charcoal the outline button inverts the other way. */
.hero .btn--outline,
.cta-band .btn--outline,
.section--dark .btn--outline,
.site-header .btn--outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, .5);
}
.hero .btn--outline:hover,
.cta-band .btn--outline:hover,
.section--dark .btn--outline:hover,
.site-header .btn--outline:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink-900);
}

.btn--sm { min-height: 2.75rem; padding: .5rem 1rem; font-size: var(--t--1); }
.btn--block { width: 100%; }

/* Text link with a trailing chevron. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  color: var(--ink-900);
  font-weight: 600;
  font-size: var(--t-0);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-300);
  padding-bottom: 2px;
}
.link-arrow:hover { color: var(--ink-900); border-bottom-color: var(--ink-900); }
.link-arrow::after {
  content: "";
  width: .5em; height: .5em;
  border-top: 1.75px solid currentColor;
  border-right: 1.75px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover::after { transform: rotate(45deg) translate(2px, -2px); }


/* -------------------------------------------------------------
   6. HEADER + NAV  (markup is verbatim across every page)
   .site-header · .brand · .nav · .nav__link · .nav-toggle · .nav-overlay
   Desktop nav appears at 62rem (992px); below that it is an overlay.
   ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink-900);
  border-bottom: 1px solid var(--rule-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--header-h);
  padding-block: .625rem;
}

/* Logo lockup */
.brand {
  position: relative;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  text-decoration: none;
}
/* max-height (not height) so a narrow header shrinks the lockup
   proportionally instead of squashing it. */
.brand__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 34px;
}
@media (min-width: 48rem) { .brand__img { max-height: 40px; } }
@media (min-width: 62rem) { .brand__img { max-height: 46px; } }

/* Hamburger */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.875rem;
  height: 2.875rem;
  margin-right: -.5rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  color: var(--white);
  cursor: pointer;
  position: relative;
  z-index: 120;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 1.75px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-open .nav-toggle__bars { background: transparent; }
.nav-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-open .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* Dim layer behind the overlay panel. */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(11, 11, 12, .55);
  border: 0;
}

/* ---- Mobile: full-screen charcoal overlay ---- */
@media (max-width: 61.999rem) {
  .nav {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    padding: calc(var(--header-h) + var(--s-5)) var(--gutter) var(--s-6);
    background: var(--ink-900);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 260ms var(--ease), visibility 260ms var(--ease);
  }
  .nav-open .nav { transform: translateY(0); visibility: visible; }
  .nav-open { overflow: hidden; }

  .nav__list { display: flex; flex-direction: column; gap: 2px; }
  .nav__link {
    display: block;
    padding: .75rem 0;
    font-size: var(--t-2);
    font-family: var(--font-display);
  }
  .nav__sublist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: var(--s-1) 0 var(--s-3);
    padding-left: var(--s-4);
    border-left: 1px solid var(--rule-dark);
  }
  .nav__sublink {
    display: block;
    padding: .5rem 0;
    color: var(--on-dark-muted);
    font-size: var(--t-0);
    text-decoration: none;
  }
  .nav__sublink:hover,
  .nav__sublink[aria-current="page"] { color: var(--white); }
  .nav__cta { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--rule-dark); }
  .nav__cta .btn { width: 100%; }
}

/* ---- Desktop ---- */
@media (min-width: 62rem) {
  .nav-toggle,
  .nav-overlay { display: none !important; }
  .nav {
    display: flex;
    align-items: center;
    gap: var(--s-5);
  }
  .nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.2vw, 2rem);
  }
  .nav__sublist { display: none; }
  .nav__link { font-size: var(--t--1); letter-spacing: .06em; text-transform: uppercase; }
  .nav__cta { margin: 0; }
}

.nav__link {
  position: relative;
  color: var(--on-dark-muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.nav__link:hover { color: var(--white); }
.nav__link[aria-current="page"] { color: var(--white); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.4em;
  height: 1.5px;
  background: var(--white);
}
@media (max-width: 61.999rem) {
  .nav__link[aria-current="page"]::after { right: auto; width: 2rem; bottom: .35rem; }
}


/* -------------------------------------------------------------
   7. FOOTER  (markup is verbatim across every page)
   .site-footer · .footer-grid · .footer__links · .footer__base
   ------------------------------------------------------------- */
.site-footer {
  background: var(--ink-900);
  color: var(--on-dark-muted);
  font-size: var(--t-0);
}
.site-footer h2, .site-footer h3 { color: var(--on-dark); }

.footer-grid {
  display: grid;
  gap: var(--s-6);
  padding-block: var(--s-7) var(--s-6);
}
@media (min-width: 40rem) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s-7); }
}

/* Footer grid children. min-width:0 stops a long link from widening its column. */
.footer__brand, .footer__nav, .footer__office { min-width: 0; }
.footer__brand .brand__img { max-height: 40px; margin-bottom: var(--s-4); }
.footer__blurb { max-width: 38ch; color: var(--on-dark-faint); font-size: var(--t--1); }

.footer__title {
  margin-bottom: var(--s-3);
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer__links { display: flex; flex-direction: column; gap: .375rem; }
.footer__links a,
.footer__contact a {
  display: inline-block;
  padding-block: .3rem;
  color: var(--on-dark-muted);
  text-decoration: none;
}
.footer__links a:hover,
.footer__contact a:hover { color: var(--white); text-decoration: underline; }

.footer__contact { font-style: normal; }
.footer__contact p { margin-bottom: var(--s-2); }
.footer__contact dt { color: var(--on-dark-faint); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s-4);
  border-top: 1px solid var(--rule-dark);
  color: var(--on-dark-faint);
  font-size: var(--t--1);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.footer__legal a { color: var(--on-dark-faint); text-decoration: none; }
.footer__legal a:hover { color: var(--white); text-decoration: underline; }


/* -------------------------------------------------------------
   8. HERO — home page only, charcoal ground.
   .hero · .hero__grid · .hero__title · .hero__deck · .hero__media
   ------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink-900);
  background-image: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
  color: var(--on-dark-muted);
  padding-block: clamp(3rem, 1.5rem + 6vw, 5.5rem);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: 1.08fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
}

.hero__body { min-width: 0; }

.hero__title {
  color: var(--white);
  font-size: var(--t-5);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.hero__deck {
  max-width: 52ch;
  margin-top: var(--s-4);
  color: var(--on-dark-muted);
  font-size: var(--t-1);
  line-height: 1.62;
}
.hero__actions { margin-top: var(--s-5); }
.hero__note {
  margin-top: var(--s-4);
  color: var(--on-dark-faint);
  font-size: var(--t--1);
}

/* Hero image slot: a framed 3:2 slot holding the attorneys photograph. */
.hero__media {
  position: relative;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
}


/* -------------------------------------------------------------
   9. PAGE HERO + BREADCRUMB — every inner page.
   .page-hero > .container > .breadcrumb + h1.page-hero__title + .page-hero__deck
   ------------------------------------------------------------- */
.page-hero {
  background: var(--ink-900);
  color: var(--on-dark-muted);
  padding-block: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
}
.page-hero__title {
  color: var(--white);
  font-size: var(--t-4);
  line-height: 1.12;
}
.page-hero__deck {
  max-width: 62ch;
  margin-top: var(--s-3);
  color: var(--on-dark-muted);
  font-size: var(--t-1);
}

.breadcrumb {
  margin-bottom: var(--s-4);
  font-size: var(--t--1);
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .55rem;
}
.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--on-dark-faint);
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  color: rgba(255, 255, 255, .38);
}
.breadcrumb a {
  color: var(--on-dark-muted);
  text-decoration: none;
  padding-block: .25rem;
}
.breadcrumb a:hover { color: var(--white); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--on-dark-faint); }


/* -------------------------------------------------------------
   10. VALUE STRIP — Se Habla Espanol · Contingency Fees · ...
   .value-strip > .container > ul.value-strip__list > li.value-strip__item
   ------------------------------------------------------------- */
.value-strip {
  background: var(--ink-800);
  border-block: 1px solid var(--rule-dark);
  color: var(--on-dark-muted);
}
.value-strip--light {
  background: var(--ink-100);
  border-color: var(--ink-300);
  color: var(--ink-700);
}

.value-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem clamp(1.25rem, 3.5vw, 3rem);
  padding-block: var(--s-4);
  text-align: center;
}
.value-strip__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Separator dot between items (not before the first in a row). */
.value-strip__item + .value-strip__item::before {
  content: "";
  width: 3px; height: 3px;
  margin-right: .6rem;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
@media (max-width: 39.999rem) {
  .value-strip__list { flex-direction: column; gap: .55rem; }
  .value-strip__item { justify-content: center; }
  .value-strip__item + .value-strip__item::before { display: none; }
}


/* -------------------------------------------------------------
   11. PROSE — long-form body copy. Wrap page content in
   <div class="prose"> inside .container--narrow. Bare h2/h3/p/ul/ol/
   blockquote/strong inside it are styled; no extra classes needed.
   ------------------------------------------------------------- */
.prose {
  max-width: 68ch;
  color: var(--ink-700);
  font-size: var(--t-0);
  line-height: 1.72;
}
.prose > * + * { margin-top: var(--s-4); }

.prose h2 {
  margin-top: var(--s-7);
  font-size: var(--t-3);
  line-height: 1.2;
}
.prose h3 {
  margin-top: var(--s-6);
  font-size: var(--t-2);
}
.prose h4 {
  margin-top: var(--s-5);
  font-size: var(--t-1);
  font-family: var(--font-body);
  font-weight: 700;
}
.prose > :first-child { margin-top: 0; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: var(--s-3); }

.prose p { margin-bottom: 0; }
.prose a { color: var(--ink-900); text-decoration: underline; }
.prose a:hover { color: var(--ink-500); }

.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { list-style: revert; margin-top: var(--s-2); padding-left: .3rem; }
.prose li::marker { color: var(--ink-500); }
.prose ul ul, .prose ol ol { margin-top: var(--s-2); }

.prose blockquote {
  margin: var(--s-5) 0;
  padding: var(--s-1) 0 var(--s-1) var(--s-4);
  border-left: 2px solid var(--ink-900);
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: var(--t-1);
  font-style: italic;
  line-height: 1.55;
}
.prose blockquote p + p { margin-top: var(--s-3); }

.prose strong { color: var(--ink-900); font-weight: 700; }

.prose .lede { margin-bottom: var(--s-5); }
.prose hr { margin-block: var(--s-6); }

/* A quiet inset panel inside prose — e.g. "What Arizona law says". */
.prose .aside,
.aside {
  padding: var(--s-4) var(--s-5);
  background: var(--ink-050);
  border-left: 2px solid var(--ink-300);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t--1);
  line-height: 1.65;
}
.aside > * + * { margin-top: var(--s-3); }
.aside__title {
  font-family: var(--font-body);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-900);
}

/* Standalone bullet list outside .prose (e.g. the home "what bad faith
   looks like" list). Use .bullets--check for the tick variant. */
.bullets { display: grid; gap: var(--s-3); }
.bullets li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink-700);
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 7px;
  background: var(--ink-900);
  border-radius: 50%;
}
.bullets--check li::before {
  top: .45em;
  width: 9px; height: 5px;
  background: transparent;
  border-left: 2px solid var(--ink-900);
  border-bottom: 2px solid var(--ink-900);
  border-radius: 0;
  transform: rotate(-45deg);
}
.section--dark .bullets li { color: var(--on-dark-muted); }
.section--dark .bullets li::before { background: var(--white); }
.section--dark .bullets--check li::before {
  background: transparent;
  border-color: var(--white);
}


/* -------------------------------------------------------------
   12. CARDS — practice-area cards and generic panels.
   .cards (grid) > .card > .card__icon + .card__title + .card__text + .card__link
   ------------------------------------------------------------- */
.cards {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 5 cards: three across, the last two centred on the row below. */
@media (min-width: 64rem) {
  .cards--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cards--5 > .card { grid-column: span 2; }
  .cards--5 > .card:nth-child(4) { grid-column: 2 / span 2; }
  .cards--5 > .card:nth-child(5) { grid-column: 4 / span 2; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--ink-700);
}
@media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } }

/* Charcoal SVG icon in a light circle. */
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 auto;
  background: var(--ink-100);
  border-radius: 50%;
  color: var(--ink-900);
}
.card__title {
  font-size: var(--t-2);
  line-height: 1.25;
}
.card__text {
  color: var(--ink-700);
  font-size: var(--t-0);
  line-height: 1.62;
}
.card__link {
  margin-top: auto;
  padding-top: var(--s-2);
  color: var(--ink-900);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.card__link::after { content: " \2192"; }
/* Stretch the link over the whole card so the card reads as one target. */
.card__link::before { content: ""; position: absolute; inset: 0; }
.card:hover .card__link { text-decoration: underline; }

/* Plain panel with no hover lift — for office details, notes. */
.info-card {
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-lg);
}
.info-card--alt { background: var(--ink-050); }
.info-card > * + * { margin-top: var(--s-4); }
.info-card__title {
  font-size: var(--t-2);
}

/* Label / value list used in the office card and footer. */
.info-list { display: grid; gap: var(--s-3); }
.info-list__label {
  display: block;
  margin-bottom: .1rem;
  color: var(--muted);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.info-list__value {
  color: var(--ink-900);
  font-size: var(--t-0);
  font-style: normal;
  line-height: 1.5;
}
.info-list__value a {
  color: var(--ink-900);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-300);
}
.info-list__value a:hover { border-bottom-color: var(--ink-900); }


/* -------------------------------------------------------------
   13. ICONS — inline SVG on a 24px grid, 1.75 stroke, currentColor.
   ------------------------------------------------------------- */
.icon {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 28px; height: 28px; }
.icon--xl { width: 36px; height: 36px; stroke-width: 1.5; }


/* -------------------------------------------------------------
   14. MEDIA SLOTS — every future photo lives in one of these.
   <div class="media-slot media--3x2">  (or --4x5 / --16x9)
     <img class="media" src="/img/photos/doug-and-chris.jpg" alt="..." width="960" height="640">
   </div>
   Real photos are <picture> (webp + jpg) inside the same slot; see section 23.
   ------------------------------------------------------------- */
.media-slot {
  position: relative;
  overflow: hidden;
  background: var(--ink-100);
  border-radius: var(--radius-lg);
}
.media-slot > .media,
.media-slot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media--3x2  { aspect-ratio: 3 / 2; }
.media--4x5  { aspect-ratio: 4 / 5; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--1x1  { aspect-ratio: 1 / 1; }
.media-slot--bordered { border: 1px solid var(--ink-300); }
.media-caption {
  margin-top: var(--s-2);
  color: var(--muted);
  font-size: var(--t--1);
}


/* -------------------------------------------------------------
   15. TEAM GRID — works with 1, 2 or 3 cards (a second attorney
   can be dropped in without any CSS change).
   .team-grid > .team-card > .team-card__media + .team-card__body
   ------------------------------------------------------------- */
.team-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  max-width: 62rem;
}
@media (min-width: 48rem) {
  .team-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
}

.team-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.team-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--ink-100);
  border-bottom: 1px solid var(--ink-300);
}
.team-card__media > img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.team-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
  padding: var(--s-5);
}
.team-card__name { font-size: var(--t-2); }
.team-card__role {
  color: var(--muted);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.team-card__bio {
  margin-top: var(--s-1);
  color: var(--ink-700);
  line-height: 1.65;
}
.team-card__bio p + p { margin-top: var(--s-3); }


/* -------------------------------------------------------------
   16. TESTIMONIALS — the two real client reviews (verbatim block).
   .testimonials > .testimonial > blockquote.testimonial__quote + .testimonial__cite
   ------------------------------------------------------------- */
.testimonials {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
}

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-lg);
}
.section--dark .testimonial {
  background: var(--ink-800);
  border-color: var(--rule-dark);
}
.testimonial__quote {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: var(--t-1);
  font-style: italic;
  line-height: 1.55;
  quotes: none;
}
.section--dark .testimonial__quote { color: var(--on-dark); }
.testimonial__quote p { margin: 0; }
.testimonial__cite {
  margin-top: auto;
  color: var(--muted);
  font-size: var(--t--1);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.section--dark .testimonial__cite { color: var(--on-dark-faint); }
.testimonial__mark {
  color: var(--ink-300);
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: .6;
}
.section--dark .testimonial__mark { color: rgba(255, 255, 255, .28); }


/* -------------------------------------------------------------
   17. CTA BAND — charcoal closing block (verbatim across pages).
   .cta-band > .container > .cta-band__inner
   ------------------------------------------------------------- */
.cta-band {
  background: var(--ink-900);
  color: var(--on-dark-muted);
  padding-block: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem);
}
.cta-band__inner {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}
@media (min-width: 56rem) {
  .cta-band__inner { grid-template-columns: 1.35fr auto; gap: var(--s-7); }
}
.cta-band__title {
  color: var(--white);
  font-size: var(--t-3);
  line-height: 1.18;
}
.cta-band__text {
  max-width: 56ch;
  margin-top: var(--s-3);
  color: var(--on-dark-muted);
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
@media (max-width: 29.999rem) {
  .cta-band__actions .btn { width: 100%; }
}


/* -------------------------------------------------------------
   18. FORM — Netlify contact form.
   .form > .field > .field__label + .field__input (+ .field__hint)
   Variants: .field__select, .field__textarea, .field--half, .form__note
   ------------------------------------------------------------- */
.form { display: grid; gap: var(--s-4); }

.form__grid {
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 34rem) {
  .form__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field { display: grid; gap: .4rem; }

.field__label {
  color: var(--ink-900);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .04em;
}
/* Required asterisk — colour is not the only cue; the label also
   carries a visually-hidden " (required)". */
.field__req { color: var(--ink-700); font-weight: 700; }

.field__input {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .875rem;
  background: var(--white);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: var(--t-0);
  line-height: 1.5;
  border: 1px solid var(--ink-500);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  appearance: none;
}
.field__input::placeholder { color: var(--ink-500); opacity: 1; }
.field__input:hover { border-color: var(--ink-700); }
.field__input:focus {
  outline: 3px solid var(--ink-900);
  outline-offset: 1px;
  border-color: var(--ink-900);
}
.field__input:required:invalid:not(:placeholder-shown) {
  border-color: var(--ink-900);
  box-shadow: inset 3px 0 0 var(--ink-900);
}

.field__select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23161719' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  background-size: 16px 16px;
  cursor: pointer;
}

.field__textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.6;
}

.field__hint {
  color: var(--muted);
  font-size: var(--t--1);
  line-height: 1.5;
}

/* Checkbox row. */
.field--check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--s-3);
}
.field__check {
  width: 1.25rem; height: 1.25rem;
  margin: .25rem 0 0;
  accent-color: var(--ink-900);
  flex: 0 0 auto;
}
.field__checklabel { font-size: var(--t--1); line-height: 1.55; color: var(--ink-700); }

/* The line under the form: "Submitting this form does not create ..." */
.form__note {
  color: var(--muted);
  font-size: var(--t--1);
  line-height: 1.55;
}
.form__note a { color: var(--ink-900); }

/* Contact page: form beside the office card; the card follows on scroll. */
.contact-aside { position: static; }
@media (min-width: 56rem) {
  .contact-aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
}

/* Contact page: form beside the office card. */
.contact-grid {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}
@media (min-width: 56rem) {
  .contact-grid { grid-template-columns: 1.25fr .85fr; gap: clamp(2.5rem, 5vw, 4rem); }
}


/* -------------------------------------------------------------
   19. RELATED — "Other practice areas" list at the foot of a
   practice page. .related > .related__title + ul.related__list > li > a.related__link
   ------------------------------------------------------------- */
.related {
  padding-block: var(--s-6);
  border-top: 1px solid var(--ink-300);
}
.related__title {
  margin-bottom: var(--s-4);
  font-family: var(--font-body);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.related__list {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .related__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.related__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 3.25rem;
  padding: var(--s-3);
  background: var(--white);
  color: var(--ink-900);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.related__link:hover {
  background: var(--ink-050);
  border-color: var(--ink-700);
  color: var(--ink-900);
}
.related__link .icon { color: var(--ink-500); }
.related__link:hover .icon { color: var(--ink-900); }


/* -------------------------------------------------------------
   20. LEGAL — compact prose for /disclaimer and /privacy.
   <div class="legal"> around bare h2/h3/p/ul. Narrower and smaller
   than .prose; carries an .legal__updated date line.
   ------------------------------------------------------------- */
.legal {
  max-width: 70ch;
  color: var(--ink-700);
  font-size: var(--t--1);
  line-height: 1.68;
}
.legal > * + * { margin-top: var(--s-3); }
.legal h2 {
  margin-top: var(--s-5);
  font-size: var(--t-2);
}
.legal h3 {
  margin-top: var(--s-4);
  font-family: var(--font-body);
  font-size: var(--t-0);
  font-weight: 700;
}
.legal > :first-child { margin-top: 0; }
.legal h2 + *, .legal h3 + * { margin-top: var(--s-2); }
.legal ul, .legal ol { padding-left: 1.3rem; }
.legal li { list-style: revert; margin-top: var(--s-1); }
.legal li::marker { color: var(--ink-500); }
.legal a { color: var(--ink-900); }
.legal strong { color: var(--ink-900); }
.legal__updated {
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}


/* -------------------------------------------------------------
   21. NOT FOUND — /404 and /thank-you centred message block.
   ------------------------------------------------------------- */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  max-width: 44rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem);
  text-align: center;
}
.not-found__code {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.not-found__title { font-size: var(--t-4); }
.not-found__text { max-width: 52ch; color: var(--ink-700); font-size: var(--t-1); }
.not-found__mark {
  width: 3.5rem; height: 3.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-100);
  border-radius: 50%;
  color: var(--ink-900);
}
.not-found .btn-row { margin-top: var(--s-2); justify-content: center; }
.not-found__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-3);
  font-size: var(--t--1);
}


/* -------------------------------------------------------------
   22. PRINT
   ------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta-band, .nav-toggle, .nav-overlay, .skip-link { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; background: none; }
  a { color: #000; text-decoration: underline; }
  .card, .info-card, .testimonial, .team-card { break-inside: avoid; border-color: #999; }
}


/* -------------------------------------------------------------
   23. CLIENT PHOTOS + "OUR TEAM" NAV (2026 photo set)
   Four small rules: a <picture> wrapper that fills its slot, the
   image inside it, a figure that carries a caption, spacing for
   the office photo on /contact, and the header phone button kept
   on one line now that the nav has a fifth link.
   No new colours: the photographs are the only colour on the site.
   ------------------------------------------------------------- */
.media-slot > picture,
.team-card__media > picture {
  width: 100%;
  height: 100%;
}
.media-slot > picture > img,
.team-card__media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Photo + caption. Used on /about, /team and /contact. */
.photo-figure { margin: 0; }

.contact-aside > .photo-figure { margin-bottom: var(--s-5); }

/* The header nav gained a fifth link ("Our Team"); keep the phone
   button on one line rather than breaking at the hyphen. */
.nav__cta .btn { white-space: nowrap; }


/* -------------------------------------------------------------
   24. DESKTOP NAV DROPDOWN — Practice Areas
   Markup: li.nav__item--menu > a.nav__link + button.nav__disclosure
           + ul.nav__sublist#nav-practice-areas
   Opens on hover and on keyboard focus with CSS alone, so it still
   works without JS; main.js mirrors the state onto aria-expanded and
   adds click/tap toggling. Below the 62rem nav breakpoint the overlay
   keeps showing the sublist statically, so the button is hidden.
   ------------------------------------------------------------- */
@media (max-width: 61.999rem) {
  .nav__disclosure { display: none; }
}

@media (min-width: 62rem) {
  .nav__item--menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: .25rem;
  }

  .nav__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--on-dark-muted);
    cursor: pointer;
    transition: color var(--dur) var(--ease);
  }
  .nav__item--menu:hover .nav__disclosure,
  .nav__disclosure:hover,
  .nav__item--menu:focus-within .nav__disclosure,
  .nav__disclosure[aria-expanded="true"] { color: var(--white); }

  .nav__chevron {
    width: .875rem;
    height: .875rem;
    transition: transform var(--dur) var(--ease);
  }
  .nav__disclosure[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

  /* Panel. `display:block` overrides the `display:none` set for the
     desktop nav in section 6; visibility keeps it out of the tab order
     while closed. */
  .nav__sublist {
    display: block;
    position: absolute;
    top: calc(100% + .9rem);
    left: -1.1rem;
    z-index: 110;
    min-width: 19.5rem;
    margin: 0;
    padding: .4rem 0;
    list-style: none;
    background: var(--ink-800);
    border: 1px solid var(--rule-dark);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.35rem);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility var(--dur);
  }
  /* Hover bridge across the gap between the link and the panel. */
  .nav__sublist::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -.9rem;
    height: .9rem;
  }
  /* With JS (html.nav-js) the script is the single source of truth, so
     `.is-open` and aria-expanded can never disagree and Escape always
     closes. Without JS the pure-CSS hover/focus rules still open it. */
  :root:not(.nav-js) .nav__item--menu:hover > .nav__sublist,
  :root:not(.nav-js) .nav__item--menu:focus-within > .nav__sublist,
  .nav__sublist.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__sublink {
    display: block;
    padding: .6rem 1.1rem;
    color: var(--on-dark-muted);
    font-size: var(--t--1);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .nav__sublink:hover,
  .nav__sublink:focus-visible,
  .nav__sublink[aria-current="page"] {
    background: var(--ink-700);
    color: var(--white);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__sublist,
  .nav__chevron { transition: none; }
}


/* -------------------------------------------------------------
   25. GOLD ACCENTS
   A single restrained pass of colour over the monochrome base. Each
   rule below overrides one property of a component defined earlier;
   nothing here changes layout. Values and their contrast ratios are
   documented with the tokens in section 1.
   ------------------------------------------------------------- */

/* Section eyebrows — the small uppercase label above a heading. */
.eyebrow { color: var(--gold-700); }
.eyebrow--on-dark { color: var(--gold-300); }

/* Practice-area icon circles: pale gold wash with a faint ring.
   The icon itself stays charcoal, so contrast is unchanged (16:1). */
.card__icon {
  background: var(--gold-050);
  box-shadow: inset 0 0 0 1px rgba(168, 134, 47, .22);
}

/* "Learn more" underlines. */
.link-arrow { border-bottom-color: var(--gold-500); }
.link-arrow:hover { border-bottom-color: var(--gold-700); }

/* Current page marker in the header. */
.nav__link[aria-current="page"]::after { background: var(--gold-300); }

/* Pull quotes. */
.testimonial__mark { color: var(--gold-500); }
.section--dark .testimonial__mark { color: rgba(216, 196, 140, .55); }

/* Tick bullets. */
.bullets--check li::before {
  border-left-color: var(--gold-700);
  border-bottom-color: var(--gold-700);
}
.section--dark .bullets--check li::before { border-color: var(--gold-300); }

/* Separator dots in the value strip. */
.value-strip__item + .value-strip__item::before {
  background: var(--gold-300);
  opacity: .8;
}
.value-strip--light .value-strip__item + .value-strip__item::before {
  background: var(--gold-500);
  opacity: 1;
}

/* Hairlines where a dark block meets the page. */
.cta-band { border-top: 1px solid var(--gold-hairline); }
.site-footer { border-top: 1px solid var(--gold-hairline); }


/* -------------------------------------------------------------
   26. SECTION HEADS v2 — every section head on every page is
   centred, carries a short gold rule under the title, and puts its
   eyebrow BELOW the title as a small gold label. Overrides §4.
   ------------------------------------------------------------- */
.section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-inline: auto;
  text-align: center;
}
.section__head .section__title { max-width: 22ch; }
@media (min-width: 40rem) { .section__head .section__title { max-width: 26ch; } }

/* The gold rule. Drawn on the title so it tracks the heading, not the
   block, and so a head with no deck still gets it. */
.section__head .section__title::after,
.section__head--rule .section__title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin: var(--s-4) auto 0;
  background: var(--gold-500);
}
.section--dark .section__head .section__title::after,
.page-hero .section__title::after { background: var(--gold-300); }

/* Eyebrow now sits under the title (markup order), quieter and smaller. */
.section__head .eyebrow {
  order: 2;
  margin: var(--s-3) 0 0;
  font-size: var(--t--1);
  letter-spacing: .16em;
}
.section__head .section__deck { order: 3; margin-top: var(--s-3); }
.section__head .section__title { order: 1; }

/* A head standing alone above a centred panel. */
.section__head--icon > .section-icon { order: 0; margin-bottom: var(--s-4); }

/* Centred round icon used above a section head or inside a panel. */
.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: var(--gold-050);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(168, 134, 47, .28);
  color: var(--ink-900);
}
.section--dark .section-icon {
  background: rgba(216, 196, 140, .12);
  box-shadow: inset 0 0 0 1px var(--gold-hairline);
  color: var(--gold-300);
}


/* -------------------------------------------------------------
   27. MOTION — scroll reveal, hover motion, hero entrance.
   Reveal is opt-in from JS (html.reveal-js): with no JS, and with
   prefers-reduced-motion, every [data-reveal] element is fully
   visible from the first paint.
   ------------------------------------------------------------- */
.reveal-js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.reveal-js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Stagger for siblings. JS writes data-reveal-i (0-5); no inline styles. */
.reveal-js [data-reveal-i="1"] { transition-delay: 70ms; }
.reveal-js [data-reveal-i="2"] { transition-delay: 140ms; }
.reveal-js [data-reveal-i="3"] { transition-delay: 210ms; }
.reveal-js [data-reveal-i="4"] { transition-delay: 280ms; }
.reveal-js [data-reveal-i="5"] { transition-delay: 350ms; }

/* Hero entrance: one-time fade-up, staggered, ends fully visible. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hero__body > * { animation: rise-in 620ms var(--ease) both; }
.hero__body > *:nth-child(1) { animation-delay: 60ms; }
.hero__body > *:nth-child(2) { animation-delay: 140ms; }
.hero__body > *:nth-child(3) { animation-delay: 220ms; }
.hero__body > *:nth-child(4) { animation-delay: 300ms; }
.hero__body > *:nth-child(5) { animation-delay: 380ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal-js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero__body > * { animation: none; }
}

/* ---- Hover motion ---- */

/* Cards lift with a gold rule sliding in across the top. */
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold-500);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 340ms var(--ease);
}
.card:hover::before,
.card:focus-within::before { transform: scaleX(1); }
.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  border-color: var(--ink-300);
  box-shadow: var(--shadow-md);
}
.card__icon .icon { transition: transform 340ms var(--ease); }
.card:hover .card__icon .icon,
.card:focus-within .card__icon .icon { transform: scale(1.08); }

/* Buttons lift 1px with a shadow. */
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* Nav links: a gold underline growing from the centre. */
@media (min-width: 62rem) {
  .nav__link::before {
    content: "";
    position: absolute;
    left: 50%; right: 50%; bottom: -.4em;
    height: 1.5px;
    background: var(--gold-300);
    transition: left 220ms var(--ease), right 220ms var(--ease);
  }
  .nav__link:hover::before { left: 0; right: 0; }
  .nav__link[aria-current="page"]::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card:hover, .card:focus-within,
  .btn:hover { transform: none; }
  .card::before,
  .card__icon .icon,
  .nav__link::before { transition: none; }
}


/* -------------------------------------------------------------
   28. HEADER SCROLL STATE — main.js adds .is-scrolled past 24px.
   Drawn with box-shadow, not a border, so nothing reflows.
   ------------------------------------------------------------- */
.site-header { transition: box-shadow var(--dur) var(--ease); }
.site-header.is-scrolled {
  box-shadow: inset 0 -2px 0 var(--gold-500), 0 10px 30px rgba(11, 11, 12, .3);
}


/* -------------------------------------------------------------
   29. HOME HERO v2 — full-bleed photograph behind a charcoal
   gradient. Desktop: photo right, text on solid dark at the left.
   Mobile: photo on top, text on charcoal below. Overrides §8.
   ------------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  padding-block: 0;
  background-image: none;
}

.hero__bg {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  background: var(--ink-950);
}
.hero__bg > picture { display: block; width: 100%; height: 100%; }
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}
/* Mobile: fade the photo into the charcoal that carries the text. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 11, 12, .06) 0%,
    rgba(22, 23, 25, .18) 46%,
    rgba(22, 23, 25, .90) 88%,
    var(--ink-900) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(2rem, 1rem + 5vw, 3rem) clamp(2.75rem, 1.5rem + 6vw, 4rem);
}
.hero__body { max-width: 38rem; }

@media (min-width: 56rem) {
  .hero {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 78vh;
  }
  .hero { background: var(--ink-900); }
  /* The photograph keeps its own 3:2 shape, anchored top-right at 62% of
     the band, and fades into the charcoal below and to its left. A box
     that filled the band's height was nearly square, and cover-fitting a
     3:2 frame into it zoomed until one of the two attorneys was lost. */
  .hero__bg {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
    width: 62%;
    height: auto;
    aspect-ratio: 3 / 2;
    z-index: 0;
  }
  .hero__bg img { object-position: 50% 30%; }
  /* Horizontal fade from the text ground, plus a vertical fade so the
     photo's bottom edge dissolves into the band instead of ending hard. */
  .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(22, 23, 25, 0) 55%, var(--ink-900) 100%),
      linear-gradient(90deg,
        rgba(22, 23, 25, .97) 0%,
        rgba(22, 23, 25, .78) 20%,
        rgba(22, 23, 25, .30) 44%,
        rgba(22, 23, 25, .12) 100%);
  }
  .hero__inner { padding-block: clamp(3rem, 1.5rem + 6vw, 5.5rem); }
}

/* Gold badge line, replacing the eyebrow that used to sit above the H1. */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: var(--s-4);
  padding: .4rem .9rem;
  background: rgba(216, 196, 140, .1);
  border: 1px solid var(--gold-hairline);
  border-radius: 999px;
  color: var(--gold-300);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero__badge .icon { color: var(--gold-300); }


/* -------------------------------------------------------------
   30. TRUST BAR — four icon + label items on a light band with gold
   hairlines. Replaces the plain value strip on / and /contact.
   ------------------------------------------------------------- */
.trust-bar {
  background: var(--ink-050);
  border-block: 1px solid rgba(168, 134, 47, .38);
}
.trust-bar__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4) var(--s-5);
  padding-block: var(--s-5);
}
@media (min-width: 40rem) { .trust-bar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .trust-bar__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.trust-bar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  text-align: left;
}
.trust-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  background: var(--white);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(168, 134, 47, .3);
  color: var(--gold-700);
}
/* Stacked and two-up, the marks line up on a common left edge rather
   than each item centring itself and leaving the icons ragged. */
@media (max-width: 61.999rem) {
  .trust-bar__item { justify-content: flex-start; }
}
@media (max-width: 39.999rem) {
  .trust-bar__list { width: fit-content; margin-inline: auto; }
}

.trust-bar__label {
  color: var(--ink-900);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
}


/* -------------------------------------------------------------
   31. ICON LIST · FEATURE TILES · NUMBERED STEPS
   The three new home-page structures. All three are icon-led and
   all three reveal on scroll.
   ------------------------------------------------------------- */

/* --- Icon list: charcoal circle, gold check, bold lead word. --- */
.icon-list { display: grid; gap: var(--s-4); }
.icon-list__title {
  margin-bottom: var(--s-4);
  font-size: var(--t-2);
}
.icon-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  color: var(--ink-700);
  line-height: 1.6;
}
.icon-list__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-top: .1rem;
  flex: 0 0 auto;
  background: var(--ink-900);
  border-radius: 50%;
  color: var(--gold-300);
}
.icon-list__mark .icon { width: 17px; height: 17px; }

/* --- Feature tiles: "Why clients choose this firm". --- */
.features {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4);
  text-align: center;
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-top: 2px solid var(--gold-500);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { .feature:hover { transform: none; } }
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  background: var(--gold-050);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(168, 134, 47, .28);
  color: var(--ink-900);
  transition: transform 340ms var(--ease);
}
.feature:hover .feature__icon { transform: scale(1.08); }
.feature__title { font-size: var(--t-2); line-height: 1.25; }
.feature__text { color: var(--ink-700); line-height: 1.62; }

/* --- Numbered steps with a gold connector line on desktop. --- */
.steps {
  position: relative;
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 52rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
  /* The rail runs between the centres of the first and last columns;
     the step marks are opaque and sit over it. */
  .steps::before {
    content: "";
    position: absolute;
    top: 2.125rem;
    left: 16.6%;
    right: 16.6%;
    height: 1px;
    background: var(--gold-500);
    opacity: .5;
  }
}
.step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  text-align: center;
}
.step__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  background: var(--ink-900);
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--white);
  color: var(--gold-300);
}
.section--alt .step__mark { box-shadow: 0 0 0 6px var(--ink-050); }
.step__num {
  color: var(--gold-700);
  font-family: var(--font-body);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .18em;
}
.step__title { font-size: var(--t-2); line-height: 1.25; }
.step__text { max-width: 34ch; color: var(--ink-700); line-height: 1.62; }


/* -------------------------------------------------------------
   32. FRAMED PHOTO — a 1px gold rule offset 12px down-right behind
   the image. Used on the home about-teaser and the group photos.
   ------------------------------------------------------------- */
.framed { position: relative; }
.framed > .media-slot,
.framed > picture { position: relative; z-index: 1; }
.framed::before {
  content: "";
  position: absolute;
  top: 12px; left: 12px; right: -12px; bottom: -12px;
  z-index: 0;
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-lg);
}
@media (max-width: 39.999rem) {
  .framed::before { top: 8px; left: 8px; right: -8px; bottom: -8px; }
}
/* The offset box needs room under the figure so it never clips. */
.framed { margin-bottom: 12px; }

/* Caption with a leading map-pin / mark. */
.media-caption {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: var(--s-4);
}
.media-caption .icon { color: var(--gold-700); margin-top: .1rem; }
.photo-figure--center .media-caption { justify-content: center; text-align: center; }


/* -------------------------------------------------------------
   33. PAGE HERO v2 — full-bleed photograph, charcoal gradient, a
   3px gold rule at the bottom edge, breadcrumb moved BELOW the
   deck. `--narrow` lines the content up with .container--narrow.
   Overrides §9.
   ------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 1.6rem + 4.6vw, 4.5rem);
  background: var(--ink-900);
}
.page-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  height: 3px;
  background: var(--gold-500);
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ink-950);
}
.page-hero__bg > picture { display: block; width: 100%; height: 100%; }
.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
/* 92% -> 70% left to right. At the 70% end, white on the brightest
   pixel the photographs contain is still 7:1, so the deck and the
   breadcrumb stay AA the whole way across. */
.page-hero--photo .page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(22, 23, 25, .92) 0%,
    rgba(22, 23, 25, .88) 40%,
    rgba(22, 23, 25, .70) 100%);
}
.page-hero__inner { position: relative; z-index: 2; }
/* Prose pages: the hero sits in the same reading column as the body. */
.page-hero--narrow .page-hero__inner {
  max-width: var(--wrap-narrow);
  margin-inline: auto;
}
/* Pages whose body is wide and centred: the hero is centred too. */
.page-hero--center .page-hero__inner { text-align: center; }
.page-hero--center .page-hero__title,
.page-hero--center .page-hero__deck { margin-inline: auto; }
.page-hero--center .breadcrumb__list { justify-content: center; }
.page-hero--center .breadcrumb {
  max-width: 34rem;
  margin-inline: auto;
}

.page-hero__title { max-width: 20ch; }
.page-hero__deck { max-width: 54ch; }

/* Breadcrumb now sits under the deck: smaller, quieter, no heading
   text above the H1. */
.page-hero .breadcrumb {
  margin: var(--s-5) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--gold-hairline);
  font-size: var(--t--1);
}
.page-hero .breadcrumb__item { color: rgba(255, 255, 255, .55); }
.page-hero .breadcrumb a { color: rgba(255, 255, 255, .7); }
.page-hero .breadcrumb a:hover { color: var(--white); }


/* -------------------------------------------------------------
   34. PRACTICE PAGES — "At a glance" row, the reading column with
   its side callout, and prose lists as gold check lists.
   ------------------------------------------------------------- */

/* --- At a glance: three icon tiles directly under the hero. --- */
.glance {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
.glance { max-width: 64rem; margin-inline: auto; }
/* The glance row and the reading column below it share one band of space. */
.section--flush { padding-bottom: 0; }
@media (min-width: 48rem) { .glance { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.glance__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-top: 2px solid var(--gold-500);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.glance__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { .glance__item:hover { transform: none; } }
.glance__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  background: var(--gold-050);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(168, 134, 47, .28);
  color: var(--ink-900);
}
.glance__text {
  color: var(--ink-900);
  font-size: var(--t-0);
  font-weight: 600;
  line-height: 1.4;
}

/* --- Reading column + aside. --- */
.prose-layout {
  display: grid;
  gap: var(--s-6);
  justify-content: center;
}
.prose-layout > .prose { max-width: 68ch; }
@media (min-width: 62rem) {
  .prose-layout {
    grid-template-columns: minmax(0, 42rem) 18rem;
    gap: clamp(2.5rem, 4vw, 4rem);
    align-items: start;
  }
  .side-callout { margin-top: var(--s-7); }
}

.side-callout {
  padding: var(--s-5);
  background: var(--ink-050);
  border-top: 3px solid var(--gold-500);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.side-callout > * + * { margin-top: var(--s-4); }
.side-callout__title {
  font-family: var(--font-body);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.side-callout__phone {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.75rem;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: var(--t-2);
  font-weight: 600;
  text-decoration: none;
}
.side-callout__phone .icon { color: var(--gold-700); }
.side-callout__phone:hover { color: var(--ink-900); text-decoration: underline; }
.side-callout__list { display: grid; gap: var(--s-3); }
.side-callout__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2);
  align-items: start;
  color: var(--ink-700);
  font-size: var(--t--1);
  line-height: 1.5;
}
.side-callout__list .icon { color: var(--gold-700); margin-top: .05rem; }

/* --- Prose lists as gold check lists. ---
   The tick is a data: URI in this stylesheet (img-src 'self' data:),
   not an external sprite, so one rule keeps every tick identical. */
.prose .checklist { padding-left: 0; }
.prose .checklist li {
  position: relative;
  list-style: none;
  margin-top: var(--s-3);
  padding-left: 2rem;
}
.prose .checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 1.25rem;
  height: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23826420' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m8.2 12.2 2.5 2.5 5.1-5.4'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (min-width: 48rem) {
  .prose .checklist--2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--s-5);
  }
}


/* -------------------------------------------------------------
   35. RELATED — the foot-of-page list becomes icon cards.
   ------------------------------------------------------------- */
.related {
  max-width: 64rem;
  margin-inline: auto;
  padding-block: var(--s-6) 0;
  border-top: 0;
}
.related__title {
  margin-bottom: var(--s-5);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
}
.related__title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin: var(--s-3) auto 0;
  background: var(--gold-500);
}
.related__list { gap: var(--s-4); }
@media (min-width: 52rem) { .related__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .related__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.related__link {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: 0;
  padding: var(--s-4);
  border-radius: var(--radius-lg);
  font-size: var(--t-0);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.related__link::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold-500);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 340ms var(--ease);
}
.related__link:hover {
  background: var(--white);
  border-color: var(--ink-300);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.related__link:hover::before { transform: scaleX(1); }
.related__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  background: var(--gold-050);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(168, 134, 47, .22);
  color: var(--ink-900);
  transition: transform 340ms var(--ease);
}
.related__link:hover .related__icon { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .related__link:hover { transform: none; }
  .related__link::before, .related__icon { transition: none; }
}


/* -------------------------------------------------------------
   36. COMPONENT POLISH — testimonials, team cards, the contact
   page, the CTA band and the 404 / thank-you blocks.
   ------------------------------------------------------------- */

/* --- Testimonials: big gold quote, gold rule above the name. --- */
.testimonial {
  padding: var(--s-6) var(--s-5) var(--s-5);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { .testimonial:hover { transform: none; } }
.testimonial__mark {
  font-size: 4.5rem;
  line-height: .55;
  color: var(--gold-500);
  opacity: .55;
}
.testimonial__cite::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-bottom: var(--s-3);
  background: var(--gold-500);
}

/* --- Team cards: gold rule under the photo, gold role line. --- */
.team-grid { margin-inline: auto; }
.team-card {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { .team-card:hover { transform: none; } }
.team-card__media { border-bottom: 2px solid var(--gold-500); }
.team-card__role { color: var(--gold-700); letter-spacing: .14em; }

/* --- Contact: the form sits in a card with a gold hairline top. --- */
.form-card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-top: 3px solid var(--gold-500);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.form-card .section__head { margin-bottom: var(--s-5); }

/* The office card matches the form card opposite it. */
.contact-aside .info-card {
  border-top: 3px solid var(--gold-500);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Icons in the office card's label / value list. */
.info-list__label {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--ink-700);
}
.info-list__label .icon { color: var(--gold-700); }

/* --- CTA band: photograph under an 88% charcoal wash, centred. --- */
.cta-band {
  position: relative;
  overflow: hidden;
  background-image: url("/img/photos/office-lounge-wide.jpg");
  background-size: cover;
  background-position: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(22, 23, 25, .88);
}
.cta-band > .container { position: relative; z-index: 1; }
.cta-band__inner { justify-items: center; text-align: center; }
.cta-band__title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin: var(--s-4) auto 0;
  background: var(--gold-300);
}
.cta-band__text { margin-inline: auto; }
.cta-band__actions { justify-content: center; }
@media (min-width: 56rem) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

/* --- 404 / thank-you: gold mark and rule. --- */
.not-found__mark {
  width: 4.5rem;
  height: 4.5rem;
  background: var(--gold-050);
  box-shadow: inset 0 0 0 1px rgba(168, 134, 47, .28);
}
/* The code line sits UNDER the title: nothing but the mark is above an H1. */
.not-found__code { order: 3; color: var(--gold-700); }
.not-found__title { order: 2; }
.not-found__mark { order: 1; }
.not-found__text { order: 4; }
.not-found .btn-row { order: 5; }
.not-found__links { order: 6; }
.not-found__title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin: var(--s-4) auto 0;
  background: var(--gold-500);
}


/* -------------------------------------------------------------
   37. ABOUT STORY GRID + CENTRED HERO BREADCRUMB
   ------------------------------------------------------------- */
/* About: the firm story runs in two full-width columns so the team
   section arrives sooner. */
.lede--center {
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: var(--s-6);
  text-align: center;
}
.story-grid {
  display: grid;
  gap: var(--s-6);
}
.story-grid .prose { max-width: none; }
.story-grid .prose > h2:first-child { margin-top: 0; }
@media (min-width: 56rem) {
  .story-grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}

/* Centred page heroes: the breadcrumb and its gold hairline sit under the
   title, centred. (`.page-hero .breadcrumb` later in §33 set margin:0 at
   equal specificity, which left them flush with the reading column.) */
.page-hero--center .page-hero__inner .breadcrumb {
  margin-inline: auto;
  text-align: center;
}
.page-hero--center .page-hero__inner .breadcrumb__list { justify-content: center; }


/* -------------------------------------------------------------
   38. HOME: TWO-PATH HERO + ATTORNEY BANDS
   One firm, two practices. The hero splits visitors between Doug
   (insurance) and Chris (medical malpractice); under the trust bar each
   attorney gets a band of his own with a direct call to action.
   ------------------------------------------------------------- */
.hero-paths {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
@media (min-width: 36rem) {
  .hero-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hero-path {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  height: 100%;
  padding: var(--s-4);
  background: rgba(22, 23, 25, .74);
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-lg);
  color: var(--on-dark-muted);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.hero-path:hover,
.hero-path:focus-visible {
  background: rgba(22, 23, 25, .92);
  border-color: var(--gold-300);
  color: var(--on-dark-muted);
  transform: translateY(-2px);
}

.hero-path__who {
  color: var(--gold-300);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-path__title {
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: var(--t-2);
  font-weight: 600;
  line-height: 1.2;
}
.hero-path__text {
  font-size: var(--t--1);
  line-height: 1.5;
}
.hero-path__go {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: auto;
  padding-top: var(--s-2);
  color: var(--on-dark);
  font-weight: 600;
}
.hero-path__go::after {
  content: "";
  width: .5em; height: .5em;
  border-top: 1.75px solid currentColor;
  border-right: 1.75px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.hero-path:hover .hero-path__go::after { transform: rotate(45deg) translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  .hero-path,
  .hero-path:hover,
  .hero-path:focus-visible { transform: none; }
}

/* Attorney bands: Doug (insurance, white, photo left) then Chris (medical
   malpractice, charcoal, photo right). Text comes first in the markup so
   it leads on phones; the portrait is held to a sensible width. */
.attorney-band .split__media {
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
}
.attorney-band .icon-list { margin-top: var(--s-4); }
@media (min-width: 56rem) {
  .attorney-band .split__media { max-width: 24rem; }
  .attorney-band--media-left .split { grid-template-columns: 1fr 1.25fr; }
  .attorney-band--media-left .split__media { order: -1; }
}
.section--dark.attorney-band { border-bottom: 1px solid var(--gold-hairline); }
/* `.section--dark a` would otherwise paint the white button's label white. */
.section--dark.attorney-band .btn--solid,
.section--dark.attorney-band .btn--solid:hover { color: var(--ink-900); }