/* =============================================================================
   Pearce Ducharme Family Law — concept preview by PXLNorth
   Hand build against templates/blueprints/law/malmanlaw.
   FAMILY AND DIVORCE VARIANT of the approved Moon Law build (runs/moonlaw.ca).
   Same skeleton and class names. Every difference is listed in
   runs/pearceducharme.com/redesign-assets/variant-notes.md.

   PALETTE. Their own site is three colours: a charcoal (#2e3133 on the mark,
   the bands and the Free Consultation bars), white, and a red on the three
   practice links. So the page is white and a warm off-white, the charcoal is
   warmed a little and kept for the footer and the ink, and their red is
   softened to a clay rose for the things you press and for the one accent
   word. The hero is a pale blush of that same red instead of a dark panel.
   Everything is warm: nothing cool sits on the off-white.

   TYPE. Lora at 600 for headings: a humane text serif with brushed curves and
   moderate stroke contrast, close in spirit to the serif their own site sets
   its name in but sturdier, so it stays readable in dark ink on the pale hero.
   Source Sans 3 for everything else, body at 500 so nothing looks thin. Only
   the weights used here are requested in the fonts link (Lora 600; Source
   Sans 3 400, 500, 600, 700).
   ========================================================================== */

:root {
  --green: #96463a;          /* their red, softened to clay: buttons, links, markers */
  --green-hover: #7a372d;
  --deep: #2f2c2b;           /* their charcoal, warmed: the footer */
  --deep-rgb: 47, 44, 43;    /* the same colour as numbers, for shadows and the badge */
  --deep-2: #3b3735;
  --sand: #f2cdbf;           /* the clay lifted to blush: icons and hovers on the dark footer */
  --tan: #d9ab9a;            /* a soft clay rose: rules and card bars */
  --tint: #f8f4ee;           /* the warm off-white ground under white cards */
  --tint-2: #efe7dd;
  --rule: #e5dcd1;
  --paper: #ffffff;
  --ink: #2b2827;
  --ink-soft: #534d4a;
  --ink-faint: #6a625e;
  --gold: #e2a41f;
  --field-edge: #c4b9ad;     /* form field borders */

  /* VARIANT: the hero is a light panel, so its colours are tokens of their own. */
  --hero-panel: #f5e9e1;     /* the pale blush the hero sits on */
  --hero-panel-rgb: 245, 233, 225;
  --hero-ink: var(--ink);
  --hero-ink-soft: var(--ink-soft);
  --hero-accent: var(--green);
  --hero-split: 47%;         /* how much of the desktop hero is the solid panel */
  --hero-fade: 15%;          /* how far the panel takes to melt into the photograph */
  --hero-photo-filter: saturate(0.92);

  --display: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --w-h1: 600;               /* heading weights */
  --w-head: 600;

  --t-h1: clamp(2.3rem, 1.5rem + 3.1vw, 3.6rem);
  --t-h2: clamp(1.65rem, 1.3rem + 1.5vw, 2.3rem);
  --t-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.45rem);
  --t-body: 1.125rem;
  --t-small: 1rem;
  --t-control: 1.0625rem;

  --wrap: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --r: 14px;
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem;
  --mod-pad: clamp(3.4rem, 7vw, 5.8rem);   /* the space above and below a section */
  --shadow: 0 1px 2px rgba(var(--deep-rgb), 0.05), 0 12px 30px -16px rgba(var(--deep-rgb), 0.22);
  --nav-h: 80px;             /* the sticky nav; main.js measures the real figure */
  --trust-half: 2.9rem;
  --hero-photo-h: clamp(230px, 60vw, 460px);   /* the photograph's height on a phone */
}

/* ---------- reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; text-wrap: balance; }
h2 { font-size: var(--t-h2); font-weight: var(--w-head); line-height: 1.18; letter-spacing: -0.008em; }
h3 { font-size: var(--t-h3); font-weight: var(--w-head); line-height: 1.25; letter-spacing: -0.003em; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--green); }
input, select, textarea, button { font: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--paper); color: var(--ink); padding: 0.7rem 1rem; border-radius: var(--r);
}
.skip-link:focus { top: 1rem; }
.icon-sprite { position: absolute; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: var(--gutter); }
/* Every anchor target clears the sticky nav. */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ---------- buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.7rem 1.25rem;
  border: 2px solid transparent; border-radius: var(--r);
  font-family: var(--sans); font-size: var(--t-control); font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-solid { background: var(--green); border-color: var(--green); color: #fff; }
.btn-solid:hover { background: var(--green-hover); border-color: var(--green-hover); }
.btn-outline { background: var(--paper); border-color: var(--rule); color: var(--ink); }
.btn-outline:hover { border-color: var(--green); color: var(--green); }
.btn-wide { width: 100%; }
.link-quiet {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.15rem;
  font-weight: 700; font-size: var(--t-control); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 2px;
  text-underline-offset: 5px; white-space: nowrap;
}
.link-quiet:hover { color: var(--green); text-decoration-color: var(--green); }
.g-mark { flex: 0 0 auto; display: block; }

/* ---------- nav ------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.nav-wrap {
  width: min(var(--wrap), 100%); margin-inline: auto; padding: 0.5rem var(--gutter);
  display: flex; align-items: center; gap: var(--s2);
}
.lockup {
  display: inline-flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; min-width: 0; min-height: 44px;
  color: var(--ink); text-decoration: none;
}
/* The mark is capped, never pinned: a fixed height inside a flex row squashes it. */
.lockup-logo { max-height: 50px; height: auto; width: auto; max-width: 100%; min-width: 0; object-fit: contain; flex: 0 0 auto; border-radius: 8px; }
/* VARIANT: the firm's name in the heading serif, upper and lower case, the way
   their own header sets it beside the mark. Moon Law sets spaced capitals. */
.lockup-name {
  font-family: var(--display); font-size: 1.3125rem; font-weight: var(--w-head); line-height: 1.2;
  letter-spacing: -0.005em; color: var(--ink); white-space: nowrap;
}
.nav-panel { margin-left: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 1.7rem); }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); font-weight: 600; font-size: 1.0625rem; text-decoration: none; white-space: nowrap;
}
.nav-links a:hover { color: var(--green); }
.nav-actions { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.nav-label { white-space: nowrap; }
.nav-label-short { display: none; }
.nav-call .ico { color: var(--green); }
.nav-toggle {
  display: none; flex: 0 0 auto;
  width: 46px; height: 46px; padding: 0;
  background: var(--paper); border: 2px solid var(--rule); border-radius: var(--r);
  cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
}
.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; }
@media (max-width: 1180px) {
  .nav-label-phone { display: none; }
  .nav-call { padding-inline: 0; width: 48px; }
}
@media (max-width: 960px) {
  :root { --nav-h: 66px; }
  .nav-wrap { flex-wrap: wrap; gap: 0.5rem; }
  .lockup { gap: 0.55rem; flex: 0 1 auto; }
  .lockup-logo { max-height: 44px; }
  .lockup-name { font-size: 1.1875rem; }
  .nav-actions { margin-left: auto; }
  .nav-toggle { display: inline-flex; }
  .nav-panel { order: 5; flex: 1 1 100%; margin: 0; display: none; }
  .nav[data-open="true"] .nav-panel { display: block; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; padding: 0.25rem 0 0.5rem; }
  .nav-links a { display: flex; min-height: 48px; border-top: 1px solid var(--rule); font-size: 1.125rem; }
  .nav-book { min-height: 46px; padding-inline: 0.85rem; font-size: 1rem; }
  .nav-call { min-height: 46px; width: 46px; }
}
@media (max-width: 560px) {
  .nav-label-long { display: none; }
  .nav-label-short { display: inline; }
  .nav-wrap { gap: 0.4rem; }
  .lockup { gap: 0.45rem; }
  .lockup-logo { max-height: 38px; }
  .lockup-name { font-size: 0.9375rem; }
  .nav-actions { gap: 0.4rem; }
  .nav-book { padding-inline: 0.7rem; }
  .nav-call, .nav-toggle { width: 44px; min-height: 44px; height: 44px; }
}
@media (max-width: 430px) { .nav-book .ico { display: none; } }

/* ---------- hero ----------------------------------------------------------- */
/* VARIANT: a light hero. The band is a pale blush and the words are dark ink.
   The photograph takes the right of the band, edge to edge and top to bottom
   as on Moon Law, but the panel melts into it over a long soft fade instead of
   meeting it on a hard dark line. Moon Law and the criminal variant use a dark
   panel with white words. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--hero-panel);
  padding-bottom: var(--trust-half);
}
.hero-photo {
  position: absolute; z-index: 0;
  top: 0; right: 0; bottom: 0; left: auto;
  width: calc(100% - var(--hero-split)); height: 100%; max-width: none;
  object-fit: cover; object-position: 42% 0%;
  filter: var(--hero-photo-filter);
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(90deg,
    rgba(var(--hero-panel-rgb), 1) 0%,
    rgba(var(--hero-panel-rgb), 1) var(--hero-split),
    rgba(var(--hero-panel-rgb), 0.7) calc(var(--hero-split) + 4%),
    rgba(var(--hero-panel-rgb), 0) calc(var(--hero-split) + var(--hero-fade)));
}
.hero-inner {
  position: relative; z-index: 2;
  width: min(var(--wrap), 100%); margin-inline: auto;
  padding: clamp(2.4rem, 4.2vw, 3.6rem) var(--gutter);
  min-height: clamp(540px, 62vh, 640px);
  display: grid; align-content: center; gap: clamp(1.3rem, 2.2vw, 1.8rem);
}
.hero-copy, .hero-book { max-width: min(480px, 41vw); min-width: 0; }
.eyebrow {
  margin: 0 0 0.8rem;
  font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hero-accent);
}
h1 {
  font-size: var(--t-h1); font-weight: var(--w-h1); line-height: 1.08; letter-spacing: -0.014em;
  color: var(--hero-ink); margin: 0 0 0.9rem;
}
.h1-accent { color: var(--hero-accent); }
.hero-sub { margin: 0; font-size: 1.25rem; line-height: 1.5; color: var(--hero-ink-soft); max-width: 32ch; }

/* The form card: white, compact, two short steps. */
.hero-next { text-decoration: none; }
.hero-cta { min-width: 6rem; }
.wizard {
  color-scheme: light;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: calc(var(--r) * 1.4);
  padding: clamp(1rem, 1.8vw, 1.35rem);
  box-shadow: 0 24px 50px -30px rgba(var(--deep-rgb), 0.45);
}
.wizard-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.wz-field { min-width: 0; }
.wz-field-wide, .wizard-panel > .btn { grid-column: 1 / -1; }
.wizard label, .intake label {
  display: block; margin-bottom: 0.3rem;
  font-size: 0.9375rem; font-weight: 700; color: var(--ink);
}
.fd-input, .fd-select, .fd-textarea {
  display: block; width: 100%; min-height: 46px;
  background-color: #fff; color: var(--ink);
  border: 1.5px solid var(--field-edge); border-radius: 10px;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.3; padding: 0.6rem 0.75rem;
  transition: border-color .18s ease;
}
.fd-textarea { resize: vertical; min-height: 5.4rem; }
.fd-input:hover, .fd-select:hover, .fd-textarea:hover,
.fd-input:focus, .fd-select:focus, .fd-textarea:focus { border-color: var(--green); }
.fd-input::placeholder, .fd-textarea::placeholder { color: var(--ink-faint); opacity: 1; font-weight: 400; }
.fd-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%232b2827' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center;
  padding-right: 2.2rem;
}
.fd-select option { background-color: #fff; color: var(--ink); }
.wizard-stepper {
  display: flex; align-items: center; justify-content: flex-start; gap: 0.7rem;
  margin: 0.6rem 0 0; padding: 0;
  font-size: var(--t-small); font-weight: 500; color: var(--hero-ink-soft);
}
.wz-back {
  display: inline-flex; align-items: center; gap: 0.25rem; min-height: 44px;
  background: none; border: 0; padding: 0 0.3rem 0 0;
  color: var(--hero-ink); font-size: var(--t-small); font-weight: 700; cursor: pointer;
}
.wz-back:hover { color: var(--hero-accent); }
.honest-panel {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: calc(var(--r) * 1.4);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  box-shadow: var(--shadow);
}
.honest-panel p:last-child { margin-bottom: 0; }
.honest-reach { font-weight: 700; }

@media (max-width: 960px) {
  /* Phone and tablet: the photograph runs edge to edge across the top, fades into
     the blush at its foot and the words begin straight under it. */
  .hero-photo {
    left: 0; right: 0; bottom: auto; width: 100%;
    height: var(--hero-photo-h);
    object-position: 46% 22%;
  }
  .hero-scrim {
    bottom: auto; height: var(--hero-photo-h);
    background-image: linear-gradient(180deg,
      rgba(var(--hero-panel-rgb), 0) 0%,
      rgba(var(--hero-panel-rgb), 0) 80%,
      rgba(var(--hero-panel-rgb), 1) 100%);
  }
  .hero-inner {
    min-height: 0; align-content: start;
    padding-top: calc(var(--hero-photo-h) + 1.1rem);
    padding-bottom: 1.5rem;
    gap: 1.1rem;
  }
  .hero-copy, .hero-book { max-width: 560px; }
  .eyebrow { display: none; }
  .hero-sub { font-size: 1.125rem; max-width: none; }
}

/* ---------- trust bar ------------------------------------------------------ */
.trust { position: relative; z-index: 3; padding: 0; margin-bottom: calc(-1 * var(--trust-half)); }
.trust-list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 1.05rem 0;
  transform: translateY(-50%);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: calc(var(--r) * 1.4);
  box-shadow: 0 22px 46px -26px rgba(var(--deep-rgb), 0.4), 0 2px 6px rgba(var(--deep-rgb), 0.06);
}
.trust-list li {
  display: grid; justify-items: center; align-content: center; row-gap: 0.15rem;
  text-align: center; padding: 0.15rem var(--s2);
  border-left: 1px solid var(--rule);
}
.trust-list li:first-child { border-left: 0; }
.trust-list strong { font-family: var(--display); font-size: 1.1875rem; font-weight: var(--w-head); line-height: 1.3; }
.trust-list span { font-size: 1rem; line-height: 1.35; color: var(--ink-soft); }
.trust-stars {
  display: block; width: 6.25rem; height: 1.54rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e2a41f' d='M12 1.5l3 7.2 7.8.6-5.9 5.1 1.8 7.6L12 17.9 5.3 22l1.8-7.6L1.2 9.3 9 8.7z'/%3E%3C/svg%3E");
  background-size: 1.25rem 1.25rem; background-repeat: repeat-x; background-position: left center;
}
@media (max-width: 900px) {
  :root { --trust-half: 4.8rem; }
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.9rem; }
  .trust-list li:nth-child(odd) { border-left: 0; }
  .trust-list li { padding-inline: 0.6rem; }
}
@media (max-width: 420px) {
  :root { --trust-half: 5.4rem; }
  .trust-list strong { font-size: 1rem; }
  .trust-list span { font-size: 0.9375rem; }
}

/* ---------- modules -------------------------------------------------------- */
.mod { padding-block: var(--mod-pad); }
.mod-head { margin-bottom: clamp(1.5rem, 2.8vw, 2.4rem); }
.mod-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem var(--s3); }
@media (min-width: 1000px) { .mod-head h2 { white-space: nowrap; } }
/* An optional line under a section heading, in the firm's own words. */
.mod-sub { margin: 0.7rem 0 0; max-width: 84ch; font-size: 1.125rem; color: var(--ink-soft); }
.mod-practice { background: var(--tint); padding-top: clamp(3rem, 5vw, 4rem); }
/* VARIANT: with no reviews band between them, two white sections meet. The second
   gives up its top padding so the gap between them is one section space, not two. */
.mod-about + .mod-visit { padding-top: 0; }
.mod-book { background: var(--tint); }

.card {
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: calc(var(--r) * 1.4);
  box-shadow: var(--shadow);
}
.card-lede { color: var(--ink); margin: 0; }
/* A filled button and a quiet link on one line, on a phone too. The row may wrap
   as a last resort, so a narrow card can never be pushed wider than its column. */
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.95rem; min-width: 0; }
.card-actions .btn { padding-inline: 1rem; }

/* Refined list markers: a small check drawn in CSS, never a default disc. */
.marks { display: grid; gap: 0.6rem; align-content: start; }
.marks li { position: relative; padding-left: 1.75rem; line-height: 1.45; font-weight: 500; }
.marks li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.3em;
  width: 0.42rem; height: 0.78rem;
  border: solid var(--green); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ---------- practice areas: three cards whose rows line up ----------------- */
.area-grid { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); }
.area-card {
  --pad: clamp(1.25rem, 2.1vw, 1.7rem);
  display: grid; grid-template-rows: auto auto 1fr auto; row-gap: 1.05rem; min-width: 0;
  overflow: hidden; padding-bottom: var(--pad);
}
.area-card > :not(.area-media) { padding-inline: var(--pad); }
.area-media { aspect-ratio: 16 / 9; background: var(--tint-2); border-bottom: 3px solid var(--tan); }
.area-media img { width: 100%; height: 100%; object-fit: cover; }
.area-card h3 { margin-top: 0.15rem; }
@media (min-width: 700px) and (max-width: 1039px) {
  /* Tablet: the photograph sits beside the list, so no card is left alone in a row. */
  .area-card {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr auto;
    column-gap: 0; padding-bottom: 0;
  }
  .area-media { grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; border-bottom: 0; border-right: 3px solid var(--tan); position: relative; min-height: 230px; }
  .area-media img { position: absolute; inset: 0; }
  .area-card > :not(.area-media) { grid-column: 2; }
  .area-card h3 { margin-top: var(--pad); }
  .area-card .card-actions { margin-bottom: var(--pad); }
}
@media (min-width: 1040px) {
  .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .area-card { grid-row: span 4; grid-template-rows: subgrid; }
}
/* Cards with no photograph (the same rules as the criminal variant's immigration
   lists): one row fewer, with the bar the photo cards carry under their picture
   moved to the top edge. No icon and no picture: the heading leads. */
.area-card-plain {
  grid-template-rows: auto 1fr auto; padding-top: var(--pad);
  border-top: 3px solid var(--tan);
}
.area-card-plain h3 { margin-top: 0; }
@media (min-width: 700px) and (max-width: 1039px) {
  .area-grid-plain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-card-plain { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--pad); }
  .area-card-plain > * { grid-column: 1; }
  .area-card-plain h3 { margin-top: 0; }
  .area-card-plain .card-actions { margin-bottom: 0; }
  .area-grid-plain > .area-card-plain:last-child { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .area-card-plain { grid-row: span 3; }
}

/* ---------- about ---------------------------------------------------------- */
.about-grid { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
.about-card { display: grid; align-content: start; gap: 1.5rem; padding: clamp(1.35rem, 2.8vw, 2.3rem); }
.about-card .card-lede { font-size: 1.1875rem; line-height: 1.55; max-width: 78ch; }
.about-lists { display: grid; gap: 1.5rem; }
.about-lists h3 { font-size: 1.1875rem; margin-bottom: 0.75rem; }
.about-media {
  border-radius: calc(var(--r) * 1.4); overflow: hidden; background: var(--tint-2);
  aspect-ratio: 4 / 3; box-shadow: var(--shadow);
}
.about-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media (min-width: 960px) {
  /* With a photograph, it takes its height from the card beside it, so the two
     columns start and end on the same lines. */
  .about-grid:has(.about-media) { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: stretch; }
  .about-media { aspect-ratio: auto; position: relative; min-height: 0; }
  .about-media img { position: absolute; inset: 0; }
}
/* The card stands alone here (they publish no photograph of the firm), so it
   spans the row and its two lists sit side by side. */
@media (min-width: 800px) {
  .about-lists { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); column-gap: var(--s5); align-items: start; }
}

/* ---------- reviews (unused in this build: their Google record holds no review text) */
.mod-reviews { background: var(--tint); }
.mod-reviews .mod-head { margin-bottom: 0.9rem; }
.rev-rating {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem;
  margin: 0 0 clamp(1.3rem, 2.4vw, 1.9rem);
  font-size: 1.125rem; color: var(--ink-soft);
}
.rev-rating-score { font-family: var(--display); font-size: 1.6rem; font-weight: var(--w-head); line-height: 1; color: var(--ink); }
.rev-rating-stars {
  display: block; width: 6.25rem; height: 1.3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e2a41f' d='M12 1.5l3 7.2 7.8.6-5.9 5.1 1.8 7.6L12 17.9 5.3 22l1.8-7.6L1.2 9.3 9 8.7z'/%3E%3C/svg%3E");
  background-size: 1.25rem 1.25rem; background-repeat: repeat-x; background-position: left center;
}
.rev-rating-src { font-weight: 600; }
.rev-g { display: inline-grid; place-items: center; justify-self: end; }
.rev-grid { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.rev-card {
  margin: 0; display: grid; grid-template-rows: 1fr auto; gap: 1rem;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: calc(var(--r) * 1.4);
  box-shadow: var(--shadow);
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
}
.rev-card p { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.55; color: var(--ink); }
.rev-card footer {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.3rem 0.8rem;
  padding-top: 0.9rem; border-top: 1px solid var(--rule);
}
.rev-stars { grid-column: 1; display: flex; gap: 0.1rem; }
.rev-stars .star {
  width: 1.2rem; height: 1.2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e2a41f' d='M12 1.5l3 7.2 7.8.6-5.9 5.1 1.8 7.6L12 17.9 5.3 22l1.8-7.6L1.2 9.3 9 8.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rev-card cite { font-style: normal; font-weight: 700; font-size: 1.0625rem; color: var(--ink); }
.rev-card time { font-size: 0.875rem; color: var(--ink-faint); white-space: nowrap; }
.rev-more { margin-top: var(--s3); }
.rev-more-btn { list-style: none; }
.rev-more-btn::-webkit-details-marker { display: none; }
.rev-more-hide, .rev-more[open] .rev-more-show { display: none; }
.rev-more[open] .rev-more-hide { display: inline; }
.rev-grid-rest { margin-top: var(--s3); }
@media (min-width: 900px) {
  .rev-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: repeat(2, auto); }
  .rev-grid > .rev-card:first-child { grid-row: 1 / span 2; }
  .rev-grid > .rev-card:first-child p { font-size: 1.4375rem; line-height: 1.5; align-self: center; }
  .rev-grid-rest { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .rev-grid-rest > .rev-card:first-child { grid-row: auto; }
  .rev-grid-rest > .rev-card:first-child p { font-size: 1.125rem; line-height: 1.55; }
}
@media (max-width: 560px) { .rev-more-btn { display: flex; width: 100%; } }

/* ---------- consultation --------------------------------------------------- */
/* A FADED PICTURE FROM THEIR OWN SITE BEHIND THE CONSULTATION SECTION. It sits
   at low strength under the tinted ground, so it reads as texture; the cards on
   top stay white and every word keeps its contrast. */
/* overflow is CLIP, not hidden: a hidden box is a scroll container, and an anchor
   target inside one loses its scroll-margin, so the heading lands under the nav. */
.mod-book { position: relative; isolation: isolate; overflow: clip; }
.mod-book::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../img/wallpaper.jpg") 50% 50% / cover no-repeat;
  opacity: 0.13; filter: grayscale(0.35) sepia(0.25);
}
.book-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
.book-sub { font-size: 1.1875rem; color: var(--ink); margin: 0.8rem 0 0; max-width: 34ch; }
.intake {
  display: grid; gap: 0.9rem var(--s2); grid-template-columns: 1fr;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: calc(var(--r) * 1.4);
  box-shadow: var(--shadow);
  padding: clamp(1.15rem, 2.4vw, 1.8rem);
}
.field { min-width: 0; }
.req { font-weight: 500; font-size: 0.875rem; color: var(--ink-faint); margin-left: 0.3rem; }
.intake .fd-textarea { min-height: 7rem; }
.book-card {
  display: grid; gap: 0;
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: calc(var(--r) * 1.4);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.contact-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.9rem;
  padding: 0.95rem clamp(1rem, 2vw, 1.4rem); min-height: 64px;
  color: var(--ink); text-decoration: none;
}
.contact-row + .contact-row { border-top: 1px solid var(--rule); }
a.contact-row:hover .contact-value { color: var(--green); }
.contact-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 50%; background: var(--tint); color: var(--green);
}
.contact-text { display: grid; min-width: 0; }
.label { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.contact-value { font-weight: 700; font-size: 1.125rem; overflow-wrap: anywhere; }
@media (min-width: 641px) {
  .intake { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intake .field-wide, .intake > .btn { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .book-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    grid-template-rows: auto 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
  }
  .book-side { grid-column: 1; grid-row: 1; }
  /* VARIANT: the contact card starts straight under the intro and stretches to
     the foot of the form, its rows sharing the height, so the left column has
     no empty stretch of wallpaper in it and both columns end on one line.
     Moon Law pins the card to the foot and leaves a gap above it. */
  .book-card { grid-column: 1; grid-row: 2; align-self: stretch; grid-auto-rows: 1fr; }
  .book-form-col { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; display: grid; }
  /* If the left column is the taller one, the form's message box takes up the slack. */
  .book-form-col .intake { grid-template-rows: auto auto 1fr auto; }
  .book-form-col .intake .field-wide { display: grid; grid-template-rows: auto 1fr; }
  .book-form-col .honest-panel { align-self: start; }
}

/* ---------- office and map ------------------------------------------------- */
.visit-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
.visit-card { overflow: hidden; display: grid; align-content: start; }
.visit-media { aspect-ratio: 1100 / 579; background: var(--tint-2); border-bottom: 3px solid var(--tan); }
.visit-media img { width: 100%; height: 100%; object-fit: cover; }
.visit-body { display: grid; gap: 1.3rem; padding: clamp(1.25rem, 2.5vw, 1.9rem); }
.visit-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.visit-row h3 { font-size: 1.1875rem; margin-bottom: 0.2rem; }
.visit-addr { margin: 0; font-size: 1.125rem; line-height: 1.45; }
.visit-map {
  border-radius: calc(var(--r) * 1.4); overflow: hidden;
  border: 1px solid var(--rule); background: var(--tint-2);
  min-height: 320px;
}
.visit-map iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
@media (min-width: 900px) {
  .visit-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: stretch; }
}
/* Office hours from their Google record (the same rules as the criminal variant).
   main.js marks today's row and says whether the office is open; the list reads
   correctly without it. */
.visit-card-plain { border-top: 3px solid var(--tan); align-content: stretch; }
.visit-card-plain .visit-body { align-content: space-between; height: 100%; }
.hours { display: grid; gap: 0.3rem; font-size: 1.125rem; }
.hours li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: baseline; }
.hours li.is-today { font-weight: 700; }
.hours-state { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.5rem; font-size: 0.875rem; font-weight: 700; font-style: normal; color: var(--green); white-space: nowrap; }
.hours-state::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.hours-state.is-closed { color: var(--ink-faint); }
.hours-src { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--ink-faint); }
.visit-row h3 .hours-state { font-family: var(--sans); letter-spacing: 0; vertical-align: middle; }
@media (max-width: 480px) {
  .hours { font-size: 1rem; }
  .hours li { column-gap: 0.5rem; }
  .hours li > span { white-space: nowrap; }
}

/* ---------- footer --------------------------------------------------------- */
.foot { background: var(--deep); color: rgba(255, 255, 255, .92); padding-block: clamp(2rem, 4vw, 2.8rem) 1.4rem; font-size: var(--t-small); }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { color: var(--sand); text-decoration: underline; }
.foot-top {
  display: grid; gap: var(--s3); grid-template-columns: 1fr; align-items: center;
  padding-bottom: 1.3rem; border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.foot-brand { display: inline-flex; align-items: center; gap: 0.8rem; justify-self: start; }
.foot-brand:hover { text-decoration: none; }
/* VARIANT: their mark is white line work made for a dark ground, so in the footer
   it needs no white plate. The wrapper is kept and left clear. */
.foot-plate {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  background: transparent; border-radius: var(--r); padding: 0;
}
.foot-logo { max-height: 58px; height: auto; width: auto; max-width: 100%; min-width: 0; object-fit: contain; }
.foot-name {
  max-width: 9.5em;
  font-family: var(--display); font-size: 1.1875rem; font-weight: var(--w-head); line-height: 1.25; color: #fff;
}
.foot-contact { display: grid; gap: 0.1rem; }
.foot-contact li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.6rem; min-height: 44px; }
.foot-contact a, .foot-contact li > span:last-child { font-weight: 600; font-size: 1.0625rem; color: #fff; overflow-wrap: anywhere; }
.foot-contact a { display: flex; align-items: center; min-height: 44px; justify-self: start; }
.foot-ico { display: inline-grid; place-items: center; color: var(--sand); }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0 1.6rem; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 1.0625rem; }
.foot-disclosure { margin: 1.1rem 0 0; font-size: 0.875rem; color: rgba(255, 255, 255, .8); }
@media (min-width: 860px) {
  .foot-top { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: clamp(2rem, 5vw, 4rem); }
}

/* ---------- preview badge -------------------------------------------------- */
.preview-badge {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 120;
  display: flex; align-items: stretch; gap: 1px;
  background: rgba(var(--deep-rgb), .96);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  font-family: var(--sans); font-size: 0.75rem;
  max-width: calc(100vw - 24px);
}
.preview-badge a { text-decoration: none; padding: 0.6rem 1rem; white-space: nowrap; }
.preview-badge-info { color: rgba(255, 255, 255, .92); }
.preview-badge-cta { background: #fff; color: var(--deep); font-weight: 700; }
.preview-badge-cta:hover { background: var(--tint); }
@media (max-width: 540px) {
  .preview-badge { font-size: 0.6875rem; }
  .preview-badge a { padding: 0.5rem 0.7rem; }
}

/* ---------- reveals --------------------------------------------------------
   Armed only once the script runs and only when motion is welcome. main.js
   reveals everything after 1.2s whatever happens, so no capture shoots a blank. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  html.js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}