/* =============================================================================
   Erica Immigration — concept preview by PXLNorth
   Hand build against templates/blueprints/law/malmanlaw.
   IMMIGRATION VARIANT of the approved Moon Law build (runs/moonlaw.ca). Same
   skeleton and class names. Every difference is listed in
   runs/ericaimmigration.com/redesign-assets/variant-notes.md.
   Erica Immigration is an immigration CONSULTANT (RCIC), not a law firm, and
   nothing on the page says otherwise.

   PALETTE. Their mark is black letters with a red leaf, their signs and their
   buttons are one clear red (#cd2122 on their site) and their office is white.
   So the page is white and a very light warm white, ink for words and their
   red for the things you press, the accent word, the bar on a card and the
   list markers. The hero is a bright panel in the palest tint of that red.
   Nothing on the page is dark except the footer.

   TYPE. Manrope at 700 for headings: an open, round, very legible sans whose
   plain round letters sit close to their own wordmark. Noto Sans for
   everything else, because it covers more languages and scripts than any
   other face and names from many languages appear here. Body at 400 with wide
   line spacing; nothing is thin. Only the weights used are requested in the
   fonts link (Manrope 700; Noto Sans 400, 500, 600, 700).
   ========================================================================== */

:root {
  --green: #c61d1e;          /* their red, a shade deeper so white words pass on it */
  --green-hover: #a31516;
  --deep: #1f1f1f;           /* the black of their wordmark: footer and badge */
  --deep-rgb: 31, 31, 31;    /* the same colour as numbers, for shadows and the badge */
  --deep-2: #2c2c2c;
  --sand: #ffb4ae;           /* the red lifted for a dark ground: footer icons */
  --tan: #c61d1e;            /* the same red: the bars on cards */
  --tint: #faf6f4;           /* the light warm white under white cards */
  --tint-2: #f3e9e6;
  --rule: #eaddd9;
  --paper: #ffffff;
  --ink: #1f1f1f;
  --ink-soft: #454040;
  --ink-faint: #625b5a;
  --gold: #e2a41f;
  --field-edge: #c7bab6;     /* form field borders */

  /* The hero colour set (the family variant's tokens). A LIGHT panel: the palest
     tint of their red, with ink words and one red accent word. */
  --hero-panel: #fff1ee;
  --hero-panel-rgb: 255, 241, 238;
  --hero-ink: var(--ink);
  --hero-ink-soft: var(--ink-soft);
  --hero-accent: var(--green);
  --hero-split: 48%;         /* how much of the desktop hero is the solid panel */
  --hero-fade: 8%;           /* how far the panel takes to melt into the photograph */
  --hero-photo-filter: none;

  --display: "Manrope", "Segoe UI", Arial, sans-serif;
  --sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --w-h1: 700;               /* heading weights */
  --w-head: 700;

  --t-h1: clamp(2.3rem, 1.4rem + 3vw, 3.5rem);
  --t-h2: clamp(1.6rem, 1.25rem + 1.4vw, 2.2rem);
  --t-h3: clamp(1.2rem, 1.12rem + 0.35vw, 1.375rem);
  --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.6rem, 7.5vw, 6rem);   /* the space above and below a section */
  --shadow: 0 1px 2px rgba(var(--deep-rgb), 0.04), 0 14px 30px -20px 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(240px, 64vw, 470px);   /* 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: 400;
  line-height: 1.65;
  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.2; letter-spacing: -0.015em; }
h3 { font-size: var(--t-h3); font-weight: var(--w-head); line-height: 1.3; letter-spacing: -0.008em; }
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: 50px; padding: 0.7rem 1.35rem;
  border: 1.5px 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: 2px;
  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: 50px; height: auto; width: auto; max-width: 100%; min-width: 0; object-fit: contain; flex: 0 0 auto; }
/* Their logo file says only "erica", so the word beside it is kept (Moon Law's
   .lockup-name), set the way their own storefront sign sets it: capitals. */
.lockup-name {
  font-family: var(--display); font-size: 0.9375rem; font-weight: 700; line-height: 1.25;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
  align-self: flex-end; padding-bottom: 0.5rem;
}
.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: 38px; }
  /* On a phone the row holds the logo, two buttons and the menu; the logo alone names them. */
  .lockup-name { display: none; }
  .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 panel in the palest tint of their red carries ink words, and
   their own white reception with the wall sign fills 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. */
.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: 72% 50%;
  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: 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.1; letter-spacing: -0.022em;
  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.6; color: var(--hero-ink-soft); max-width: 29rem; }
/* WhatsApp is the second action, because they publish it and many readers are
   abroad: one outlined button and a quiet email link under the form (the
   criminal variant's .hero-actions, placed after the form as on the injury and
   corporate variants). */
.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 their own
   published statement that visa decisions rest with the Canadian Government. */
.wizard-note { grid-column: 1 / -1; margin: 0; font-size: 0.9375rem; font-weight: 400; line-height: 1.5; 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 20px 44px -28px rgba(var(--deep-rgb), 0.38);
}
.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: 1.5px solid var(--field-edge); border-radius: 10px;
  font-size: 1.0625rem; font-weight: 400; line-height: 1.3; padding: 0.6rem 0.8rem;
  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='%231f1f1f' 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: 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: 60% 40%;
  }
  .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 (unused on this page). 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's lists sit side by side from a tablet up. */
@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; }
}
/* VARIANT: this card has no photograph beside it, so it is the full row wide and
   its three lists take a third each (built from existing names, no new class). */
@media (min-width: 900px) {
  .about-grid:not(:has(.about-media)) .about-lists { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-grid:not(:has(.about-media)) .about-lists > div:last-child:nth-child(odd) { grid-column: auto; }
}

/* ---------- 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: their own reception seen through the
   front window, 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") 0% 45% / max(128%, 1500px) auto no-repeat;
  opacity: 0.14; filter: grayscale(1) contrast(1.3);
}
.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: 0.9375rem; }
  .hours li { column-gap: 0.4rem; }
  .visit-row:has(.hours) { gap: 0.7rem; }
  .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 own header file is white letters with a red leaf, made for a dark ground.
   The footer shows that file untouched, 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 { max-height: 50px; height: auto; width: auto; max-width: 100%; min-width: 0; object-fit: contain; }
.foot-name {
  font-family: var(--display); align-self: flex-end; padding-bottom: 0.5rem;
  font-size: 0.875rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.14em; 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; }
}