/* ============================================================
   MASTER: law-malmanlaw-light-static - concept preview by PXLNorth
   Parameterized from the operator-reviewed corislaw.com v2
   recreation of the malmanlaw blueprint - the LIGHT editorial
   interpretation (the source prospect's live site is light, so
   surfaces stay light and the logo colors are ACCENTS ONLY).

   TYPE PAIRING: the font custom properties + the Google Fonts
   link are content-driven (content.json `fonts`); the shipped
   default is the source build's pairing (Source Serif 4 display
   + Inter UI/body - dignified and document-like without the
   dated Times-clone feel). The tailor pass picks a pairing for
   each prospect's identity and documents the choice in the run.

   COLOUR: every slot below reads the fill-static `pro` palette.
   theme.json should pin the full scale via its `pro` object
   (see template.json note); the prospect's real LIGHT site
   scheme drives surfaces - white canvas, a warm off-white band,
   a deeper warm tint band, ONE dark warm band (hero backing /
   side card / conversion band) - and the logo colors take only
   the accent roles. Master-specific slots (brandDeep /
   accentDeep / darkSoft / accentOnDark / accentOnDarkDim /
   accentOnDarkRule / scrimBase / ink3) fall back to derived
   standard keys (or a sibling slot) when unpinned so no var
   ever renders empty. All alpha tints derive from the vars via
   color-mix, so the whole page re-themes from the palette alone.
   ============================================================ */

:root {
  --brand: #23395f;          /* deep brand, AA on white: rules, eyebrows, links, one button */
  --brand-deep: #182741;  /* hover state of --brand */
  --accent: #ab1b48;        /* conversion accent - primary CTAs */
  --accent-deep: #85142f;  /* hover state of --accent */

  --canvas: #ffffff;
  --canvas-warm: #f7f8fa;        /* warm off-white band */
  --canvas-tint: #eef1f5;       /* deeper warm tint band */
  --dark: #1c2536;               /* the one dark warm band (hero backing, side card, conversion) */
  --dark-soft: #273349;  /* map plate, a step lighter than --dark */
  --dark-deep: #141b29;           /* footer + the deepest chrome (badge, modal overlay) */

  --ink: #1a1d24;
  --ink-2: #454b57;
  /* ink-3 is the small-text grey. Pin it so it clears AA on the deepest light
     band (--canvas-tint); unpinned it falls back to --ink-2. */
  --ink-3: #67707e;
  --line: color-mix(in srgb, var(--brand) 16%, transparent);
  --line-soft: color-mix(in srgb, var(--brand) 9%, transparent);

  /* On-dark accent tints (labels, links and rules ON the dark warm surfaces).
     Unpinned they cascade: dim + rule fall back to the soft tint, the soft
     tint falls back to the derived border neutral - coherent, never empty. */
  --accent-soft: #ecc65e;  /* on-dark links + labels */
  --accent-mute: #dcb654;  /* on-dark eyebrow text */
  --rule-on-dark: #b98a2c;  /* on-dark eyebrow rules + big-phone underline */
  /* Photo scrim/overlay base: the near-black warm the hero scrim and tile
     gradients mix from. Unpinned it falls back to the footer deep. */
  --scrim-base: #0f1420;

  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--dark) 6%, transparent), 0 2px 8px color-mix(in srgb, var(--dark) 4%, transparent);
  --shadow-md: 0 12px 32px color-mix(in srgb, var(--dark) 12%, transparent);
  --shadow-lg: 0 24px 60px color-mix(in srgb, var(--dark) 20%, transparent);

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gut: clamp(18px, 5vw, 44px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.12;
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }
figure { margin: 0; }
a { color: var(--brand); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--dark); color: #fff; padding: 12px 18px;
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- eyebrow / section furniture ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px; flex: none;
  background: var(--accent);
}
.eyebrow.on-dark { color: var(--accent-mute); }
.eyebrow.on-dark::before { background: var(--rule-on-dark); }

.section { padding: clamp(56px, 9vw, 108px) 0; }
.section-head { max-width: 58ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head h2 { font-size: clamp(1.7rem, 4.6vw, 2.7rem); }
.section-head p { color: var(--ink-3); font-size: clamp(1rem, 2.4vw, 1.08rem); margin: 0; }

.band-warm { background: var(--canvas-warm); }
.band-tint { background: var(--canvas-tint); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans);
  font-weight: 650;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 15px 26px;
  border-radius: 3px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  min-height: 50px;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-on-photo { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.45); backdrop-filter: blur(4px); }
.btn-on-photo:hover { background: rgba(255,255,255,0.22); }
.btn-block { width: 100%; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: saturate(140%) blur(8px);
}
.nav-inner {
  display: flex; align-items: center; gap: 18px;
  min-height: 74px;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
/* Height caps rather than pins: .nav-logo is a flex row, so a fixed height +
   auto width lets flex-shrink squeeze the width while the height stays put,
   distorting wide lockups (corislaw measured 2.72 rendered vs 3.58 natural at
   390px, gate v3 logo-aspect 24% dev). Capping lets the logo scale down whole.
   Identical rendering whenever the logo already fits. */
.nav-logo img { max-height: 38px; height: auto; width: auto; max-width: 100%; min-width: 0; object-fit: contain; }
.nav-wordmark { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--ink); letter-spacing: .01em; white-space: nowrap; }
.nav-links { display: none; }
.nav-tools { display: flex; align-items: center; gap: 10px; }
.nav-phone {
  display: none;
  font-weight: 650; font-size: 15px; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.nav-phone:hover { color: var(--accent); }
.nav-cta { padding: 12px 18px; min-height: 44px; font-size: 14px; white-space: nowrap; }

.nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 1px solid var(--line); border-radius: 3px; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav-links {
    display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
    margin-right: 20px;
  }
  .nav-links a {
    font-size: 15px; font-weight: 550; color: var(--ink-2); text-decoration: none;
    padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
  }
  .nav-links a:hover, .nav-links a.active { color: var(--brand); border-bottom-color: var(--accent); }
  .nav-phone { display: inline-flex; align-items: center; gap: 7px; }
}

@media (max-width: 899px) {
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; inset: 74px 0 auto 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: 8px var(--gut) 20px;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }
  .nav-links.open a {
    padding: 15px 0; font-size: 17px; font-weight: 600; color: var(--ink);
    text-decoration: none; border-bottom: 1px solid var(--line-soft);
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: var(--dark);
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 38%; }
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--scrim-base) 50%, transparent) 0%, color-mix(in srgb, var(--scrim-base) 26%, transparent) 24%, color-mix(in srgb, var(--scrim-base) 56%, transparent) 60%, color-mix(in srgb, var(--scrim-base) 90%, transparent) 100%);
}
.hero-inner {
  display: grid;
  gap: clamp(26px, 4vw, 44px);
  padding-top: clamp(40px, 7vw, 86px);
  padding-bottom: clamp(36px, 6vw, 86px);
  min-height: 560px;
  align-content: end;
}
.hero-copy { max-width: 34rem; }
.hero h1 {
  color: #fff;
  font-size: clamp(2.05rem, 5.6vw, 3.35rem);
  line-height: 1.07;
  margin-bottom: 18px;
  text-wrap: balance;
}
.hero-sub {
  color: rgba(255,255,255,0.86);
  font-size: clamp(1rem, 2.6vw, 1.1rem);
  margin-bottom: 22px;
  max-width: 32rem;
}
.hero .eyebrow { color: var(--accent-soft); }
.hero .eyebrow::before { background: var(--rule-on-dark); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* hero lead-capture card */
.lead-card {
  background: #fff;
  color: var(--ink-2);
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  padding: clamp(22px, 4vw, 34px);
  border-top: 4px solid var(--accent);
  max-width: 480px;
  width: 100%;
}
.lead-card h2 { font-size: clamp(1.3rem, 3.4vw, 1.6rem); margin-bottom: 6px; }
.lead-card > p { font-size: 14.5px; color: var(--ink-3); margin-bottom: 18px; }

@media (min-width: 960px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
    align-items: center;
    align-content: center;
    min-height: 640px;
  }
  .hero-media img { object-position: 60% 38%; }
  .hero-scrim {
    background:
      linear-gradient(96deg, color-mix(in srgb, var(--scrim-base) 90%, transparent) 0%, color-mix(in srgb, var(--scrim-base) 74%, transparent) 42%, color-mix(in srgb, var(--scrim-base) 34%, transparent) 72%, color-mix(in srgb, var(--scrim-base) 28%, transparent) 100%);
  }
  .lead-card { justify-self: end; }
}

/* ---------- forms ---------- */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 12.5px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 3px;
  padding: 13px 14px;
  min-height: 50px;
}
.field textarea { min-height: 108px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); outline-offset: 0;
}
.field-row { display: grid; gap: 14px; }
@media (min-width: 480px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: 12.5px; color: var(--ink-3); margin: 12px 0 0; line-height: 1.5; }
.form-note a { color: var(--brand); }

/* ---------- trust metrics ---------- */
.metrics { border-block: 1px solid var(--line); background: var(--canvas); }
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
}
/* auto-fit (not a fixed repeat(4)) so the band shrinks honestly to however
   many REAL metrics the prospect has - 2, 3 or 4 equal columns, never an
   empty ghost cell. */
@media (min-width: 860px) { .metrics-grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.metric {
  background: var(--canvas);
  padding: clamp(22px, 3.4vw, 34px) clamp(14px, 2.4vw, 26px);
}
.metric b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 5.4vw, 2.7rem);
  line-height: 1;
  color: var(--brand);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.metric span { display: block; font-size: 14px; color: var(--ink-3); line-height: 1.45; }

/* ---------- practice photo tiles ---------- */
.tiles {
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: var(--dark);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  min-height: 260px;
}
.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: -2;
  transition: transform .5s ease;
}
.tile::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--scrim-base) 14%, transparent) 0%, color-mix(in srgb, var(--scrim-base) 52%, transparent) 52%, color-mix(in srgb, var(--scrim-base) 90%, transparent) 100%);
  transition: background .3s ease;
}
/* no-media composure: a service without a staged photo reads as a solid dark
   panel with the same bottom-anchored label composition (the ::after gradient
   still deepens it) - never a hole behind the overlay. */
.tile.no-media { background: var(--dark); }
.tile:hover img { transform: scale(1.05); }
.tile:hover::after { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 28%, transparent) 0%, color-mix(in srgb, var(--scrim-base) 62%, transparent) 52%, color-mix(in srgb, var(--scrim-base) 94%, transparent) 100%); }
.tile-body {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 260px;
  padding: clamp(20px, 3vw, 26px);
}
.tile-num {
  font-family: var(--serif);
  font-size: 13px; font-weight: 600; letter-spacing: .18em;
  color: rgba(255,255,255,0.62);
  margin-bottom: auto;
}
.tile h3 { color: #fff; font-size: clamp(1.15rem, 2.6vw, 1.35rem); margin: 0 0 6px; }
.tile p { color: rgba(255,255,255,0.82); font-size: 14.5px; margin: 0; line-height: 1.5; }
.tile-meta {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.22);
  font-size: 13px; color: rgba(255,255,255,0.75);
}

/* ---------- editorial trust ---------- */
.editorial {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
@media (min-width: 980px) {
  .editorial { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.9fr); }
  /* the long editorial column is much taller than the CTA card: keep the ask
     in view instead of stranding it at the top of a tall empty column. */
  .editorial .side-card { position: sticky; top: 96px; }
}
/* no-rail composure: without a side card the editorial column reads full
   width instead of leaving a half-empty rail track. */
.editorial.no-rail { grid-template-columns: minmax(0, 1fr); max-width: 62rem; }
.editorial-body p { font-size: clamp(1rem, 2.3vw, 1.09rem); color: var(--ink-2); }
.editorial-body p.lead { font-size: clamp(1.1rem, 2.8vw, 1.3rem); color: var(--ink); font-family: var(--serif); line-height: 1.45; }
.editorial-photo { margin: clamp(22px, 3vw, 32px) 0; border-radius: 4px; overflow: hidden; }
.editorial-photo img { width: 100%; height: auto; }
.editorial-photo figcaption { font-size: 12.5px; color: var(--ink-3); padding-top: 8px; }

.signature {
  display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--line); padding-top: 18px; margin-top: 6px;
}
.signature .monogram {
  width: 52px; height: 52px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: .04em;
}
.signature b { display: block; font-family: var(--serif); font-size: 17px; color: var(--ink); }
.signature span { font-size: 14px; color: var(--ink-3); }

.side-card {
  background: var(--dark);
  color: rgba(255,255,255,0.82);
  border-radius: 4px;
  padding: clamp(24px, 3.4vw, 34px);
  position: relative;
  overflow: hidden;
}
.side-card h3 { color: #fff; font-size: clamp(1.25rem, 3vw, 1.5rem); }
.side-card p { font-size: 15px; }
.side-card .btn { margin-top: 6px; }
.side-card .side-line {
  display: block; margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 14px; color: rgba(255,255,255,0.72);
}
.side-card a { color: var(--accent-soft); }

/* ---------- process ---------- */
.process {
  display: grid; gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 900px) { .process { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* no-media composure: without a process photo the steps read as one bounded
   column instead of leaving an empty grid track. */
.process.no-media { grid-template-columns: minmax(0, 1fr); max-width: 56rem; }
.process-photo { border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-md); }
.process-photo img { width: 100%; height: auto; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
}
.steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps li::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  color: var(--accent);
  padding-top: 2px;
}
.steps h3 { font-size: 1.12rem; margin-bottom: 4px; }
.steps p { margin: 0; font-size: 15.5px; color: var(--ink-3); }

/* ---------- reviews ---------- */
.rating-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin-bottom: clamp(24px, 3.4vw, 40px);
  font-size: 15px; color: var(--ink-3);
}
.rating-line b { font-family: var(--serif); font-size: 2rem; color: var(--ink); line-height: 1; }
.stars { color: #c9871f; letter-spacing: 2px; font-size: 15px; }

.reviews { display: grid; gap: clamp(14px, 2vw, 20px); grid-template-columns: 1fr; }
@media (min-width: 760px) { .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: 4px;
  padding: clamp(20px, 3vw, 28px);
  display: flex; flex-direction: column;
}
.review blockquote {
  margin: 12px 0 18px;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
}
.review footer { margin-top: auto; font-size: 14px; color: var(--ink-3); }
.review footer b { display: block; color: var(--ink); font-size: 15px; font-family: var(--sans); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: clamp(6px, 2vw, 34px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.faq-item { padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.faq-item h3 { font-size: clamp(1.05rem, 2.4vw, 1.18rem); margin-bottom: 8px; }
.faq-item p { margin: 0; font-size: 15.5px; color: var(--ink-3); }
.faq-note {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-3); max-width: 78ch; line-height: 1.65;
}

/* ---------- conversion band + footer ---------- */
.convert {
  background: var(--dark);
  color: rgba(255,255,255,0.82);
  padding: clamp(52px, 8vw, 96px) 0;
}
.convert-grid { display: grid; gap: clamp(30px, 5vw, 56px); }
@media (min-width: 980px) { .convert-grid { grid-template-columns: minmax(0, 1fr) minmax(400px, 0.9fr); align-items: start; } }
.convert h2 { color: #fff; font-size: clamp(1.8rem, 5vw, 2.7rem); }
.convert p { font-size: clamp(1rem, 2.4vw, 1.08rem); }
/* the repeated lead card sits inside the dark band but is a white card:
   pull its type back to the light-surface colours. */
.convert .lead-card h2 { color: var(--ink); font-size: clamp(1.3rem, 3.4vw, 1.6rem); }
.convert .lead-card > p { color: var(--ink-3); font-size: 14.5px; }
.convert .lead-card .form-note { color: var(--ink-3); font-size: 12.5px; }
.convert .lead-card label { color: var(--ink-3); }
.big-phone {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 5.4vw, 2.5rem);
  font-weight: 600;
  color: #fff; text-decoration: none;
  margin: 8px 0 22px;
  border-bottom: 2px solid color-mix(in srgb, var(--rule-on-dark) 60%, transparent);
  padding-bottom: 4px;
  word-break: break-word;
}
.big-phone:hover { border-bottom-color: var(--rule-on-dark); }

.office-grid { display: grid; gap: 22px; margin-top: 30px; }
@media (min-width: 560px) { .office-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.office-grid h4 {
  color: var(--accent-soft); font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px;
}
.office-grid p, .office-grid ul { font-size: 15px; margin: 0; color: rgba(255,255,255,0.8); }
.office-grid ul { list-style: none; padding: 0; }
.office-grid li { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; }
.office-grid a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.map {
  position: relative;
  margin-top: 30px;
  border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
  line-height: 0;
  min-height: 260px;
  background: var(--dark-soft);
}
/* Sits behind the embed. If Google's iframe is blocked or slow, the panel is
   still a usable directions block instead of an empty rectangle. */
.map-fallback {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 24px;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  font-size: 15px;
}
.map-fallback b { color: #fff; font-family: var(--serif); font-size: 1.15rem; }
.map-fallback a { color: var(--accent-soft); }
.map iframe {
  position: relative; z-index: 1;
  width: 100%; height: 260px; border: 0; display: block;
  filter: grayscale(0.25);
}

.site-footer { background: var(--dark-deep); color: rgba(255,255,255,0.62); padding: 44px 0 34px; font-size: 14px; }
.footer-top { display: grid; gap: 26px; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,0.12); }
@media (min-width: 820px) { .footer-top { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }
/* Real logos routinely carry opaque dark elements, so on the near-black footer
   they disappear. Give the mark a light plate rather than recolouring it. */
.logo-plate {
  display: inline-block;
  background: #fff;
  padding: 8px 14px;
  border-radius: 3px;
  margin-bottom: 16px;
  line-height: 0;
}
.site-footer img { height: 38px; width: auto; }
.footer-wordmark { display: block; font-family: var(--serif); font-weight: 600; font-size: 20px; color: #fff; margin-bottom: 16px; }
.site-footer h4 { color: #fff; font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 4px 0; }
.site-footer a { color: rgba(255,255,255,0.72); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.footer-bottom { padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 13px; }

/* ---------- modal (mailto confirmation) ---------- */
.modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 120;
  background: color-mix(in srgb, var(--dark-deep) 60%, transparent);
  padding: 24px;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: 4px; padding: 30px;
  max-width: 460px; width: 100%; box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--accent);
}
.modal h3 { font-size: 1.3rem; }
.modal p { font-size: 15px; color: var(--ink-3); }

/* ---------- back to top ---------- */
.back-to-top {
  position: fixed; right: 18px; bottom: 78px; z-index: 55;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand); color: #fff; border: 0; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
  font-size: 18px; line-height: 1;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }

/* ---------- scroll reveal ---------- */
.js-anim .fade-up { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js-anim .fade-up.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .fade-up { opacity: 1; transform: none; transition: none; }
}

/* ---------- preview badge (PXLNorth disclosure) ---------- */
/* ONE PILL, NEVER TWO ROWS — see the sibling law-malmanlaw-static master for the
   measurement. Two wrapping pills made this 81px tall at 390px against the clinical
   master's 34px, and those 47px are what put the badge on the client's hero CTA.
   Adopts the clinical master's existing treatment; CSS only, so the HTML the oracle
   compares is unchanged. */
.preview-badge {
  position: fixed; left: 12px; bottom: 12px; z-index: 130;
  display: inline-flex; align-items: stretch; gap: 1px;
  border-radius: 999px; overflow: hidden;
  box-shadow: var(--shadow-sm);
  max-width: calc(100vw - 24px);
}
.preview-badge a {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  text-decoration: none; padding: 8px 14px; white-space: nowrap;
}
@media (max-width: 620px) {
  .preview-badge a { font-size: 11px; padding: 7px 11px; }
}
.preview-badge-info { background: color-mix(in srgb, var(--dark-deep) 88%, transparent); color: #fff; }
.preview-badge-cta { background: var(--accent); color: #fff; }