/* =============================================================================
   Brooks Business Law — concept preview by PXLNorth
   Hand build against templates/blueprints/law/malmanlaw.
   CORPORATE AND BUSINESS LAW VARIANT of the approved Moon Law build
   (runs/moonlaw.ca). Same skeleton and class names. Every difference is listed
   in runs/gblaw.ca/redesign-assets/variant-notes.md.

   PALETTE. Their mark is black with one burgundy (the wall sign in their own
   reception and the buttons on their site, #891642). Their site is white with
   a black footer. So the page is ink, a cool grey and white, and the burgundy
   is the ONE accent: the things you press, the accent word, the thin rule on
   top of a card and the list markers. Nothing else is coloured. The hero is a
   flat pale grey panel, not a dark one.

   TYPE. Hanken Grotesk at 600 for headings: a plain modern grotesk with even
   strokes, close in build to the lettering of their own wordmark, set at a
   smaller and calmer scale than the other variants. Source Sans 3 for
   everything else, body at 500 with generous line spacing. Only the weights
   used here are requested in the fonts link (Hanken Grotesk 600; Source Sans 3
   400, 500, 600, 700).
   ========================================================================== */

:root {
  --green: #891642;          /* their burgundy: buttons, links, markers */
  --green-hover: #6a1133;
  --deep: #16181d;           /* ink: footer and badge */
  --deep-rgb: 22, 24, 29;    /* the same colour as numbers, for shadows and the badge */
  --deep-2: #22252c;
  --sand: #e6b7c7;           /* the burgundy lifted for a dark ground: footer icons */
  --tan: #891642;            /* the same burgundy: the thin rules on cards */
  --tint: #f4f5f7;           /* the cool grey ground under white cards */
  --tint-2: #e8eaee;
  --rule: #dfe2e7;
  --paper: #ffffff;
  --ink: #16181d;
  --ink-soft: #40454f;
  --ink-faint: #5d636e;
  --gold: #e2a41f;
  --field-edge: #b6bcc6;     /* form field borders */

  /* The hero colour set (the family variant's tokens). A LIGHT panel, as on the
     family variant, but a flat cool grey with ink words. */
  --hero-panel: #eceef2;
  --hero-panel-rgb: 236, 238, 242;
  --hero-ink: var(--ink);
  --hero-ink-soft: var(--ink-soft);
  --hero-accent: var(--green);
  --hero-split: 50%;         /* how much of the desktop hero is the solid panel */
  --hero-fade: 10%;          /* how far the panel takes to melt into the photograph */
  --hero-photo-filter: saturate(0.94);

  --display: "Hanken Grotesk", "Segoe UI", Arial, sans-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.1rem, 1.35rem + 2.4vw, 3.05rem);
  --t-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --t-h3: clamp(1.15rem, 1.08rem + 0.3vw, 1.3rem);
  --t-body: 1.125rem;
  --t-small: 1rem;
  --t-control: 1.0625rem;

  --wrap: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --r: 4px;
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem;
  --mod-pad: clamp(3.6rem, 7.5vw, 6.2rem);   /* the space above and below a section */
  --shadow: 0 1px 2px rgba(var(--deep-rgb), 0.04), 0 10px 24px -18px rgba(var(--deep-rgb), 0.2);
  --nav-h: 80px;             /* the sticky nav; main.js measures the real figure */
  --trust-half: 2.9rem;
  --hero-photo-h: clamp(250px, 68vw, 480px);   /* 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.62;
  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.02em; }
h3 { font-size: var(--t-h3); font-weight: var(--w-head); line-height: 1.28; letter-spacing: -0.012em; }
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: 1px solid transparent; border-radius: var(--r);
  font-family: var(--sans); font-size: var(--t-control); font-weight: 600; 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(--field-edge); 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: 600; font-size: var(--t-control); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--tan); text-decoration-thickness: 1px;
  text-underline-offset: 6px; 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: 48px; height: auto; width: auto; max-width: 100%; min-width: 0; object-fit: contain; flex: 0 0 auto; }
/* Unused here: their logo image already carries the firm's name (as on the
   criminal variant), so the lockup has no separate name beside it. */
.lockup-name {
  font-family: var(--sans); font-size: 1rem; font-weight: 700; line-height: 1.25;
  letter-spacing: 0.15em; text-transform: uppercase; 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: 1px solid var(--field-edge); 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: 1280px) {
  .nav-label-phone { display: none; }
  .nav-call { padding-inline: 0; width: 48px; }
}
@media (max-width: 1100px) and (min-width: 961px) {
  .nav-label-long { display: none; }
  .nav-label-short { display: inline; }
}
@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: 42px; }
  .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: 36px; }
  .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 flat pale grey panel carries ink words, and Garnet Brooks stands in
   his own office on the right, edge to edge and top to bottom as on Moon Law.
   The panel meets the photograph on a short fade. Nothing is dark and nothing
   is dramatic. */
.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: 50% 9%;
  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.4rem) var(--gutter);
  min-height: clamp(540px, 62vh, 640px);
  display: grid; align-content: center; gap: clamp(1.2rem, 2vw, 1.6rem);
}
.hero-copy, .hero-book { max-width: min(500px, 42vw); min-width: 0; }
.eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hero-accent);
}
h1 {
  font-size: var(--t-h1); font-weight: var(--w-h1); line-height: 1.1; letter-spacing: -0.024em;
  color: var(--hero-ink); margin: 0 0 0.9rem;
}
.h1-accent { color: var(--hero-accent); }
.hero-sub { margin: 0; font-size: 1.1875rem; line-height: 1.55; color: var(--hero-ink-soft); max-width: 29rem; }
/* Email is the natural second action for a business client: one outlined button
   and a quiet phone link under the form (the criminal variant's .hero-actions,
   placed after the form as on the injury variant). */
.hero-actions { margin-top: 0.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; }
/* The injury variant's note line under a form button. Here it carries the firm's
   own caution about confidential information, in its words. */
.wizard-note { grid-column: 1 / -1; margin: 0; font-size: 0.9375rem; font-weight: 500; line-height: 1.45; color: var(--ink-faint); text-align: left; }

/* 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 18px 40px -30px rgba(var(--deep-rgb), 0.4);
}
.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: 600; color: var(--ink);
}
.fd-input, .fd-select, .fd-textarea {
  display: block; width: 100%; min-height: 46px;
  background-color: #fff; color: var(--ink);
  border: 1px solid var(--field-edge); border-radius: var(--r);
  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='%2316181d' stroke-width='1.4'/%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: 600; }
.honest-reach a { white-space: nowrap; }

@media (max-width: 960px) {
  /* Phone and tablet: the photograph sits on top, its last fifth fades into the
     pale panel and the words begin UNDER it (the family variant's arrangement
     for a light panel). */
  .hero-photo {
    left: 0; right: 0; bottom: auto; width: 100%;
    height: var(--hero-photo-h);
    object-position: 50% 14%;
  }
  .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) 82%,
      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 18px 40px -28px rgba(var(--deep-rgb), 0.35), 0 1px 3px rgba(var(--deep-rgb), 0.05);
}
.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.125rem; font-weight: var(--w-head); line-height: 1.3; letter-spacing: -0.012em; }
.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; }
/* VARIANT: with six cards, each card ends in a quiet link only and ONE filled
   button follows the grid (the lesson from the injury build, where six filled
   buttons in a row read as heavy). No new class: the same .card-actions row. */
.area-grid + .card-actions { margin-top: clamp(1.5rem, 2.6vw, 2.1rem); }

/* Refined list markers: a small check drawn in CSS, never a default disc. */
.marks { display: grid; gap: 0.55rem; align-content: start; }
.marks li { position: relative; padding-left: 1.7rem; line-height: 1.5; font-weight: 500; }
.marks li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.36em;
  width: 0.38rem; height: 0.72rem;
  border: solid var(--green); border-width: 0 2px 2px 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: 2px solid var(--tan); }
.area-media img { width: 100%; height: 100%; object-fit: cover; }
/* VARIANT: a card whose picture is a person's portrait (the three lawyers). The
   frame is taller and the crop keeps the head: a 16 by 9 frame would cut it. */
.area-media-portrait { aspect-ratio: 4 / 3; }
.area-media-portrait img { object-position: 50% 0%; }
.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: 2px 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: 2px 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; }
  /* Only an odd card out spans the row (three cards on the other variants, six here). */
  .area-grid-plain > .area-card-plain:last-child:nth-child(odd) { 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: 93% 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 (the lawyers' portraits have their own section), so
   it spans the row and its lists sit side by side. */
@media (min-width: 800px) {
  .about-lists { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); column-gap: var(--s4); align-items: start; }
  /* An odd list out spans the row, so no half of the card is left blank. */
  .about-lists > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- reviews -------------------------------------------------------- */
.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) {
  /* VARIANT: the feature review takes the NARROWER column here (Moon Law gives it
     the wider one). At this calmer type size the words then fill the card down to
     its footer, with no empty stretch above or below them. The size and the
     column share are fitted to this review's length. */
  .rev-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); 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.6875rem; line-height: 1.5; align-self: start; }
  .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 PHOTO BEHIND THE CONTACT SECTION: the aerial of Halifax from their own
   home page, in grey 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% 60% / cover no-repeat;
  opacity: 0.12; filter: grayscale(1);
}
.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.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.contact-value { font-weight: 600; 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: 2px 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: 2px 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; }
/* Their mark is solid black on a clear ground. On the ink footer the same file
   is shown in white (one filter, shape untouched), as their own black footer
   shows it, so the plate is kept but clear (the family variant's rule). */
.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 { filter: brightness(0) invert(1); max-height: 46px; height: auto; width: auto; max-width: 100%; min-width: 0; object-fit: contain; }
/* Unused here: the logo image carries the name. */
.foot-name {
  width: min-content;
  font-size: 0.9375rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.15em; text-transform: uppercase; 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, .86); }
/* The credit Google requires wherever one of its place photographs is shown
   (the criminal variant's rule). */
.foot-credits { margin: 0.2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.4rem; font-size: 0.875rem; color: rgba(255, 255, 255, .86); }
.foot-credits a { text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; }
/* The injury variant's line for the firm's own footer wording. Here it holds
   the land acknowledgement their site prints in its footer, word for word. */
.foot-legal { margin: 1.1rem 0 0; max-width: 96ch; font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.foot-legal + .foot-disclosure { margin-top: 0.5rem; }
@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; }
}