/* =============================================================================
   Deutschmann de Koning Law — concept preview by PXLNorth
   Hand build against templates/blueprints/law/malmanlaw.
   PERSONAL INJURY VARIANT of the approved Moon Law build (runs/moonlaw.ca).
   Same skeleton and class names. Every difference is listed in
   runs/ddinjurylaw.com/redesign-assets/variant-notes.md.

   PALETTE. Their mark is two colours: a strong blue (#003a70, the colour their
   own site paints its bands and buttons) and a bright cyan (#67d0e3, the line
   "Committed to Your Future" under the name). The blue carries the hero panel
   and the footer at full strength, one step brighter for the things you press
   on white, and the cyan is the one accent: the accent word, the bars on the
   cards, the icons on blue and the call button in the hero. The grounds are
   white and a clean pale blue. Their own mural supplies every other colour,
   and only inside the hero photograph.

   TYPE. Plus Jakarta Sans at 700 and 800 for headings: a heavy geometric sans
   with open round letters, close to the lettering of their own wordmark, set
   large and tight. Source Sans 3 for everything else, body at 500. Only the
   weights used here are requested in the fonts link (Plus Jakarta Sans 700,
   800; Source Sans 3 400, 500, 600, 700).
   ========================================================================== */

:root {
  --green: #0a56a8;          /* their blue, one step brighter: buttons, links, markers */
  --green-hover: #003a70;
  --deep: #003a70;           /* their blue at full strength: hero panel and footer */
  --deep-rgb: 0, 58, 112;    /* the same colour as numbers, for shadows and the badge */
  --deep-2: #0a4a86;
  --sand: #67d0e3;           /* their cyan: accent word, icons on blue, hero call button */
  --sand-hover: #8fe0ee;
  --tan: #67d0e3;            /* the same cyan: rules and card bars */
  --tint: #eef6fb;           /* the pale blue ground under white cards */
  --tint-2: #dcecf5;
  --rule: #cfdfea;
  --paper: #ffffff;
  --ink: #0d2238;
  --ink-soft: #33485e;
  --ink-faint: #52657a;
  --gold: #e2a41f;
  --field-edge: #a9bccb;     /* form field borders */

  /* The hero colour set (the family variant introduced these tokens). A dark
     panel here, as on Moon Law and the criminal variant, but in a bright blue. */
  --hero-panel: var(--deep);
  --hero-panel-rgb: var(--deep-rgb);
  --hero-ink: #fff;
  --hero-ink-soft: rgba(255, 255, 255, .95);
  --hero-accent: var(--sand);
  --hero-split: 52%;         /* how much of the desktop hero is the solid panel */
  --hero-fade: 9%;           /* how far the panel takes to melt into the photograph */
  --hero-photo-filter: none;

  --display: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --w-h1: 800;               /* heading weights */
  --w-head: 800;

  --t-h1: clamp(2.4rem, 1.2rem + 3.4vw, 3.6rem);
  --t-h2: clamp(1.7rem, 1.25rem + 1.8vw, 2.5rem);
  --t-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem);
  --t-body: 1.125rem;
  --t-small: 1rem;
  --t-control: 1.0625rem;

  --wrap: 1200px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --r: 8px;
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem;
  --mod-pad: clamp(3.2rem, 6.5vw, 5.4rem);   /* the space above and below a section */
  --shadow: 0 1px 2px rgba(var(--deep-rgb), 0.07), 0 12px 28px -14px rgba(var(--deep-rgb), 0.28);
  --nav-h: 80px;             /* the sticky nav; main.js measures the real figure */
  --trust-half: 2.9rem;
  --hero-photo-h: clamp(280px, 76vw, 500px);   /* 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.55;
  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.1; letter-spacing: -0.03em; }
h3 { font-size: var(--t-h3); font-weight: var(--w-head); line-height: 1.22; letter-spacing: -0.018em; }
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%; }
/* The call button on the blue hero panel, in the one accent colour (the criminal
   variant's class, same rule). Here it is the second action, under the form. */
.btn-accent { background: var(--sand); border-color: var(--sand); color: var(--deep); }
.btn-accent:hover { background: var(--sand-hover); border-color: var(--sand-hover); }
.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: 56px; 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: 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: 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: 46px; }
  .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: 40px; }
  .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 bright blue panel carries the words, and the three lawyers stand in
   front of their own mural on the right, edge to edge and top to bottom as on
   Moon Law. The panel meets the photograph on a short fade and leaves the
   picture at full colour: no veil and no filter. */
.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% 100%;
  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(540px, 45vw); min-width: 0; }
.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem; font-weight: 700; 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.02; letter-spacing: -0.035em;
  color: var(--hero-ink); margin: 0 0 0.85rem;
}
.h1-accent { color: var(--hero-accent); }
.hero-sub { margin: 0; font-size: 1.25rem; line-height: 1.45; color: var(--hero-ink-soft); max-width: 30rem; }
/* The call is the strong second action: one accent button under the form
   (the criminal variant's .hero-actions, placed after the form here). */
.hero-actions { margin-top: 0.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
/* VARIANT: the cost answer, in the firm's own words, directly under the form button. */
.wizard-note { grid-column: 1 / -1; margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.35; color: var(--ink-soft); text-align: center; }

/* 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-radius: calc(var(--r) * 1.4);
  padding: clamp(1rem, 1.8vw, 1.35rem);
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.55);
}
.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: 6px;
  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='%230d2238' 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 sits on top with the three faces clear, the
     blue rises over the jackets at its foot and the words begin there (the Moon
     Law arrangement). */
  .hero-photo {
    left: 0; right: 0; bottom: auto; width: 100%;
    height: var(--hero-photo-h);
    object-position: 50% 100%;
  }
  .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) 66%,
      rgba(var(--hero-panel-rgb), 0.78) 87%,
      rgba(var(--hero-panel-rgb), 1) 99%);
  }
  .hero-inner {
    min-height: 0; align-content: start;
    padding-top: calc(var(--hero-photo-h) - 2.2rem);
    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; }
  .hero-actions .btn { width: 100%; }
}

/* ---------- 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 -22px rgba(var(--deep-rgb), 0.5), 0 2px 6px rgba(var(--deep-rgb), 0.08);
  border-bottom: 4px solid var(--tan);
}
.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.02em; }
.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; }
/* 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: 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; }
  /* 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: 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 (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(16rem, 1fr)); column-gap: var(--s5); align-items: start; }
}

/* ---------- 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) {
  .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; }
  /* VARIANT: the feature review starts at the top of its card (Moon Law centres it,
     which leaves an empty stretch above the words when the card is tall). */
  .rev-grid > .rev-card:first-child p { font-size: 1.875rem; line-height: 1.45; 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 OF THEIR OWN RECEPTION 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") 20% 40% / cover no-repeat;
  opacity: 0.13; filter: grayscale(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 heading is longer here ("Book a Free Consultation") and the heavy
     sans sets wide, so in this narrow column it is sized to stay on one line. */
  .book-side h2 { font-size: clamp(1.55rem, 0.5rem + 1.65vw, 2rem); white-space: nowrap; }
  /* 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; }
/* Their logo is blue lettering made for a white ground, so on the blue footer it
   sits on a white plate (the Moon Law rule). */
.foot-plate {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  background: #fff; border-radius: var(--r); padding: 0.55rem 0.8rem;
}
.foot-logo { max-height: 48px; 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; }
/* VARIANT: the firm's own legal lines (its practising name and its site's
   disclaimer), kept in its words above the preview line. */
.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; }
}