/* ============================================================
   Clarity Law (Saskatoon, SK) - concept preview by PXLNorth
   Hand-built from the malmanlaw blueprint (structure + density),
   scaled honestly to a focused two-person estates and real estate
   practice. Nothing here is a template fill.

   TYPE PAIRING (documented per the blueprint checklist):
   - Display / headings: "Spectral". A screen-native text serif with
     sturdy, slightly narrow bones and genuine italics. Clarity Law's
     work is document drafting (wills, directives, court applications)
     and long-form plain-language explanation, so the page needs a
     serif that stays comfortable at 16px in a 200-word FAQ answer,
     not a fashion display face. Spectral does both, and it carries
     the warmth that "professional, practical and compassionate"
     asks for. It is deliberately NOT a Times clone, which is the
     dated register the current site's headings fall into.
   - UI / body: "Jost". A geometric sans in the Futura line, which is
     the exact family the CLARITY LAW wordmark is drawn from (thin
     geometric caps, wide tracking). Using it for the nav, eyebrows,
     buttons, form labels and body copy makes the whole interface
     layer echo their real mark instead of fighting it. Its open,
     circular forms are also the most literal possible expression of
     the firm's name.

   COLOUR: the prospect's live site is a LIGHT site (sampled surfaces
   #fcfcfc / #f9fafa / #fbfcfc with one dark slate footer #313d51), so
   this page is light with a single deep slate band. Their logo blues
   (#20597b deep, plus the lighter steel in the drop gradient) are
   used as ACCENTS ONLY: buttons, rules, links, eyebrows. No brand
   colour is ever a page canvas. The warm sand they use as a secondary
   (#d9d2cb) is lightened into the one warm band, which also matches
   the warm natural light in Krista's real photography.
   ============================================================ */

:root {
  --brand: #1d5375;          /* logo deep blue, deepened for AA on white */
  --brand-deep: #143b55;
  --accent: #2f7fae;         /* the lighter blue inside the logo drop - CTAs, rules */
  --accent-soft: #7ea6c4;
  --dark: #2b3849;           /* their real footer slate, one point deeper */
  --dark-deep: #1f2a37;

  --canvas: #ffffff;
  --canvas-soft: #f7f8fa;
  --canvas-sand: #f4f1ec;    /* their warm sand secondary, lightened to a band */

  --ink: #1a2331;
  --ink-2: #3f4c5d;
  /* ink-3 is the small-text grey. It is pinned at #5c6879 because the lightest
     surface it lands on is the warm sand band (#f4f1ec): 5.09:1, clear of AA.
     The prospect's current site fails AA on 36% of its text; this must not. */
  --ink-3: #5c6879;
  --line: rgba(29, 83, 117, 0.17);
  --line-soft: rgba(29, 83, 117, 0.09);

  --shadow-sm: 0 1px 2px rgba(26, 35, 49, 0.06), 0 2px 8px rgba(26, 35, 49, 0.05);
  --shadow-md: 0 14px 34px rgba(26, 35, 49, 0.13);
  --shadow-lg: 0 26px 64px rgba(26, 35, 49, 0.22);

  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1240px;
  --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;
  font-weight: 400;
  line-height: 1.72;
  color: var(--ink-2);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

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; }

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

.section { padding: clamp(56px, 9vw, 110px) 0; }
.section-head { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 50px); }
.section-head h2 { font-size: clamp(1.75rem, 4.6vw, 2.75rem); }
.section-head p { color: var(--ink-3); font-size: clamp(1rem, 2.4vw, 1.08rem); margin: 0; }

.band-soft { background: var(--canvas-soft); }
.band-sand { background: var(--canvas-sand); }

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

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.97);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: saturate(150%) blur(8px);
}
.nav-inner { display: flex; align-items: center; gap: 18px; min-height: 76px; }
/* flex:none is load bearing: without it the real logo is the first thing the
   flex row crushes when the link list gets long, and it vanished entirely at
   1024px. The mark never shrinks; the link list wraps to the drawer instead. */
.nav-logo { display: flex; align-items: center; text-decoration: none; margin-right: auto; flex: 0 0 auto; }
/* The wordmark is 7.3:1. Its height is stepped by viewport so that
   logo + CTA + hamburger always fit a 360px bar without the row overflowing. */
.nav-logo img { height: 26px; width: auto; }
@media (min-width: 600px) { .nav-logo img { height: 30px; } }
.cta-short { display: none; }
@media (max-width: 599px) {
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .nav-inner { gap: 10px; }
  .nav-cta { padding: 11px 14px; font-size: 11.5px; letter-spacing: .05em; }
}
@media (max-width: 419px) {
  .nav-logo img { height: 22px; }
  .nav-cta { padding: 10px 12px; font-size: 11px; }
}
@media (max-width: 349px) {
  .nav-logo img { height: 19px; }
  .nav-inner { gap: 8px; }
  .nav-toggle { width: 40px; }
}
.nav-links { display: none; }
.nav-tools { display: flex; align-items: center; gap: 10px; }
.nav-phone {
  display: none;
  font-weight: 500; font-size: 15px; color: var(--ink); text-decoration: none;
  white-space: nowrap; letter-spacing: 0.01em;
}
.nav-phone:hover { color: var(--brand); }
.nav-cta { padding: 12px 18px; min-height: 44px; font-size: 12.5px; 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: 2px; cursor: pointer;
}
.nav-toggle span { display: block; height: 1.5px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* 1180 is measured, not guessed: the real wordmark is 7.3:1, so at 30px tall it
   needs 220px, and the full link list + phone + CTA only clear that above 1180. */
@media (min-width: 1180px) {
  .nav-toggle { display: none; }
  .nav-links { display: flex; align-items: center; gap: clamp(13px, 1.7vw, 26px); margin-right: 20px; }
  .nav-links a {
    font-size: 13px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--ink-2); text-decoration: none;
    padding: 6px 0; border-bottom: 1px 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 (min-width: 1360px) { .nav-logo img { height: 34px; } }

@media (max-width: 1179px) {
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; inset: 76px 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 - 76px);
    overflow-y: auto;
  }
  .nav-links.open a {
    padding: 15px 0; font-size: 16px; font-weight: 500; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink);
    text-decoration: none; border-bottom: 1px solid var(--line-soft);
  }
}

/* ---------- hero ---------- */
.hero {
  background: var(--dark);
  color: rgba(255,255,255,0.85);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(110% 120% at 12% 0%, rgba(47,127,174,0.30) 0%, rgba(43,56,73,0) 62%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  display: grid;
  gap: clamp(24px, 3.6vw, 40px);
  padding-top: clamp(30px, 5vw, 66px);
  padding-bottom: clamp(38px, 6vw, 78px);
}
.hero-photo {
  border-radius: 3px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #cfc6bb;
  box-shadow: var(--shadow-md);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 34%; }

.hero-copy { align-self: center; }
.hero h1 {
  color: #fff;
  font-size: clamp(2.05rem, 5.6vw, 3rem);
  line-height: 1.1;
  margin-bottom: 16px;
  text-wrap: balance;
}
.hero-sub {
  color: rgba(255,255,255,0.82);
  font-size: clamp(1rem, 2.5vw, 1.08rem);
  margin-bottom: 24px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note {
  display: block;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 14px; color: rgba(255,255,255,0.72);
}
.hero-note b { color: #fff; font-weight: 500; }

/* hero lead-capture card (blueprint: the form is IN the hero) */
.lead-card {
  background: #fff;
  color: var(--ink-2);
  border-radius: 3px;
  box-shadow: var(--shadow-lg);
  padding: clamp(22px, 3.4vw, 32px);
  border-top: 3px solid var(--accent);
  width: 100%;
}
.lead-card h2 { font-size: clamp(1.25rem, 3.2vw, 1.5rem); margin-bottom: 6px; }
.lead-card > p { font-size: 14.5px; color: var(--ink-3); margin-bottom: 18px; line-height: 1.6; }

@media (min-width: 760px) and (max-width: 1159px) {
  .hero-inner { grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.15fr); align-items: center; }
  .hero-photo { aspect-ratio: 3 / 4; }
  .lead-card { grid-column: 1 / -1; max-width: 580px; }
}
@media (min-width: 1160px) {
  .hero-inner {
    /* the photo track has a hard 320px floor: the blueprint ship-gate requires a
       real, loaded photo of at least 300x200 painted in the first viewport. */
    grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1fr) minmax(330px, 0.9fr);
    align-items: center;
    gap: clamp(26px, 2.8vw, 38px);
    min-height: 620px;
  }
  .hero-photo { aspect-ratio: 3 / 4.4; }
}

/* ---------- forms ---------- */
.field { margin-bottom: 13px; }
.field label {
  display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .12em;
  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 rgba(26,35,49,0.24);
  border-radius: 2px;
  padding: 12px 13px;
  min-height: 48px;
}
.field textarea { min-height: 104px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--brand); outline: 2px solid rgba(47,127,174,0.28); outline-offset: 0;
}
.field-row { display: grid; gap: 13px; }
@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.55; }
.form-note a { color: var(--brand); }

/* ---------- trust metrics ---------- */
.metrics { border-bottom: 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);
}
@media (min-width: 880px) { .metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.metric { background: var(--canvas); padding: clamp(24px, 3.4vw, 38px) clamp(14px, 2.2vw, 26px); }
.metric b {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.9rem, 5.2vw, 2.6rem);
  line-height: 1;
  color: var(--brand);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.metric span { display: block; font-size: 14px; color: var(--ink-3); line-height: 1.5; }

/* ---------- 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: 1060px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tile {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: var(--dark);
  color: #fff;
  isolation: isolate;
  min-height: 330px;
}
.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;
  /* Deliberately heavy: the tile photos run from a dark file box to a bright
     white interior, and the label has to read the same on all four. */
  background: linear-gradient(178deg, rgba(31,42,55,0.30) 0%, rgba(31,42,55,0.74) 46%, rgba(31,42,55,0.95) 100%);
  transition: background .3s ease;
}
.tile:hover img { transform: scale(1.05); }
.tile:hover::after { background: linear-gradient(178deg, rgba(29,83,117,0.40) 0%, rgba(31,42,55,0.80) 46%, rgba(31,42,55,0.96) 100%); }
.tile-body {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 330px;
  padding: clamp(20px, 2.6vw, 26px);
}
.tile-num {
  font-family: var(--sans);
  font-size: 12px; font-weight: 500; letter-spacing: .22em;
  color: rgba(255,255,255,0.66);
  margin: 0 0 auto;
}
.tile h3 { color: #fff; font-size: clamp(1.12rem, 2.4vw, 1.28rem); margin: 0 0 8px; }
.tile p { color: rgba(255,255,255,0.84); font-size: 14.5px; margin: 0; line-height: 1.55; }

/* ---------- editorial trust ---------- */
.editorial { display: grid; gap: clamp(28px, 4vw, 52px); align-items: start; }
@media (min-width: 1000px) {
  .editorial { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.9fr); }
}
.editorial-body p { font-size: clamp(1rem, 2.3vw, 1.07rem); color: var(--ink-2); }
.editorial-body p.lead {
  font-size: clamp(1.15rem, 3vw, 1.42rem);
  color: var(--ink); font-family: var(--serif); font-style: italic; line-height: 1.48;
  margin-bottom: 1.1em;
}
/* The aside photo sits under the dark CTA card so the narrow column is not a
   half-empty rail next to a long editorial column. */
.editorial-photo { margin: 22px 0 0; border-radius: 3px; overflow: hidden; }
.editorial-photo img { width: 100%; height: auto; }
.editorial-photo figcaption { font-size: 12.5px; color: var(--ink-3); padding-top: 10px; letter-spacing: .01em; }

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

.side-card {
  background: var(--dark);
  color: rgba(255,255,255,0.82);
  border-radius: 3px;
  padding: clamp(24px, 3.2vw, 34px);
}
.side-card h3 { color: #fff; font-size: clamp(1.22rem, 2.9vw, 1.45rem); }
.side-card p { font-size: 15px; }
.side-card .btn { margin-top: 6px; }
.side-card .side-line {
  display: block; margin-top: 18px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 14px; color: rgba(255,255,255,0.74); line-height: 1.75;
}
.side-card a { color: var(--accent-soft); }
.editorial-rail { align-self: start; }

/* ---------- meet Krista ---------- */
.person { display: grid; gap: clamp(28px, 4vw, 54px); align-items: start; }
@media (min-width: 900px) { .person { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); } }
.person-photo { border-radius: 3px; overflow: hidden; box-shadow: var(--shadow-md); background: #ece7e1; }
.person-photo img { width: 100%; height: auto; }
.person-body h2 { font-size: clamp(1.7rem, 4.2vw, 2.4rem); }
.person-role {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brand);
  margin: 0 0 18px;
}
.creds { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
.creds li {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px;
  padding: 13px 0; border-top: 1px solid var(--line-soft);
  font-size: 15px; color: var(--ink-2); line-height: 1.5;
}
.creds li:last-child { border-bottom: 1px solid var(--line-soft); }
.creds li b {
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); padding-top: 3px;
}

/* ---------- process ---------- */
.process { display: grid; gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (min-width: 900px) { .process { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); } }
.process-photo { border-radius: 3px; 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: 22px 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(--sans); font-size: 14px; font-weight: 500; letter-spacing: .12em;
  color: var(--accent);
  padding-top: 6px;
}
.steps h3 { font-size: 1.14rem; margin-bottom: 5px; }
.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: 2.1rem; color: var(--ink); line-height: 1; }
.stars { color: #c4923d; letter-spacing: 2px; font-size: 15px; }

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

/* ---------- local band ---------- */
.local { position: relative; isolation: isolate; overflow: hidden; }
.local img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.local::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(96deg, rgba(31,42,55,0.93) 0%, rgba(31,42,55,0.80) 48%, rgba(31,42,55,0.42) 100%);
}
.local-inner { padding: clamp(52px, 8vw, 92px) 0; max-width: 46rem; color: rgba(255,255,255,0.86); }
.local h2 { color: #fff; font-size: clamp(1.6rem, 4.2vw, 2.35rem); }
.local p { font-size: clamp(1rem, 2.4vw, 1.08rem); }
.local .btn { margin-top: 8px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: clamp(4px, 2vw, 40px); grid-template-columns: 1fr; }
@media (min-width: 940px) { .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.3vw, 1.16rem); 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, 98px) 0; }
.convert-grid { display: grid; gap: clamp(30px, 5vw, 56px); }
@media (min-width: 1000px) { .convert-grid { grid-template-columns: minmax(0, 1fr) minmax(390px, 0.88fr); align-items: start; } }
.convert h2 { color: #fff; font-size: clamp(1.8rem, 5vw, 2.7rem); }
.convert p { font-size: clamp(1rem, 2.4vw, 1.07rem); }
.convert .lead-card h2 { color: var(--ink); font-size: clamp(1.25rem, 3.2vw, 1.5rem); }
.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.2vw, 2.4rem);
  font-weight: 600;
  color: #fff; text-decoration: none;
  margin: 8px 0 24px;
  border-bottom: 1px solid rgba(126,166,196,0.6);
  padding-bottom: 5px;
  word-break: break-word;
}
.big-phone:hover { border-bottom-color: var(--accent-soft); }

.office-grid { display: grid; gap: 24px; 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: 11.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px;
}
.office-grid p, .office-grid ul { font-size: 15px; margin: 0; color: rgba(255,255,255,0.8); line-height: 1.7; }
.office-grid ul { list-style: none; padding: 0; }
.office-grid li { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; }
.office-grid li span:last-child { text-align: right; }
.office-grid a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.map {
  position: relative;
  margin-top: 30px;
  border-radius: 3px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
  line-height: 0;
  min-height: 250px;
  background: var(--dark-deep);
}
.map-fallback {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  padding: 24px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  font-size: 15px;
}
.map-fallback b { color: #fff; font-family: var(--serif); font-size: 1.12rem; }
.map-fallback a { color: var(--accent-soft); }
.map iframe {
  position: relative; z-index: 1;
  width: 100%; height: 250px; border: 0; display: block;
  filter: grayscale(0.3);
}

.site-footer { background: var(--dark-deep); color: rgba(255,255,255,0.62); padding: 46px 0 34px; font-size: 14px; }
.footer-top { display: grid; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.12); }
@media (min-width: 840px) { .footer-top { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); } }
.site-footer .footer-logo img { height: 30px; width: auto; margin-bottom: 18px; }
.site-footer h4 { color: #fff; font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 4px 0; line-height: 1.6; }
.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: rgba(26,35,49,0.62);
  padding: 24px;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border-radius: 3px; padding: 30px;
  max-width: 470px; width: 100%; box-shadow: var(--shadow-lg);
  border-top: 3px 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) ---------- */
.preview-badge {
  position: fixed; left: 12px; bottom: 12px; z-index: 130;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-width: calc(100vw - 24px);
}
.preview-badge a {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  text-decoration: none; border-radius: 999px; padding: 8px 14px;
  box-shadow: var(--shadow-sm);
}
.preview-badge-info { background: rgba(31,42,55,0.9); color: #fff; }
.preview-badge-cta { background: var(--accent); color: #fff; }