/* =================================================================
   PPC Landing Page Factory — styles.css
   Premium, conversion-focused, mobile-first. Lightweight (no frameworks).
   Rebrand by editing the :root variables.
   ================================================================= */

/* Self-hosted Lora (variable, latin) — removes render-blocking external
   request and eliminates font-swap layout shift. One file covers 400–700. */
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/lora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ----- BRAND (edit per client) ----- */
  --brand:        #16304f;   /* deep calm navy — authority/trust */
  --brand-2:      #1f4068;   /* lighter navy for gradients       */
  --brand-dark:   #0f2238;
  --accent:       #c2872f;   /* warm refined gold — accents/stars/icons/borders */
  --accent-dark:  #a06f22;
  --accent-btn:   #966519;   /* deeper gold for SOLID buttons — white text passes WCAG AA (5:1) */
  --accent-btn-dark: #7d5414;/* button hover/active */

  /* ----- Neutrals ----- */
  --ink:          #16202e;
  --ink-soft:     #51607a;
  --line:         #e4e9f0;
  --bg:           #ffffff;
  --tint:         #f5f8fc;   /* alternating section background    */
  --white:        #ffffff;

  /* ----- Type & layout ----- */
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 12px 34px rgba(16, 34, 56, 0.10);
  --shadow-sm: 0 4px 14px rgba(16, 34, 56, 0.08);
  --maxw: 1120px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

h1, h2, h3 { font-family: var(--serif); line-height: 1.18; color: var(--brand); font-weight: 600; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); }
h3 { font-size: 1.15rem; }

.section { padding: 60px 0; }
.section-tint { background: var(--tint); }
.section-title { text-align: center; margin-bottom: 10px; }
.section-title-left { text-align: left; }
.section-sub { text-align: center; color: var(--ink-soft); max-width: 640px; margin: 0 auto 34px; }

/* Inline SVG icons */
.ico { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }
.ico-sm { width: 16px; height: 16px; }

/* =================================================================
   Buttons
   ================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
  text-decoration: none; border: 2px solid transparent; border-radius: var(--radius-sm);
  padding: 13px 24px; cursor: pointer; transition: transform .06s, background .15s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 16px 30px; font-size: 1.06rem; }
.btn-block { width: 100%; }

.btn-primary { background: var(--accent-btn); color: #fff; box-shadow: 0 8px 20px rgba(150,101,25,.32); }
.btn-primary:hover { background: var(--accent-btn-dark); box-shadow: 0 10px 24px rgba(150,101,25,.4); }

.btn-ghost { background: #fff; color: var(--brand); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--brand); }

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost-light:hover { background: #fff; color: var(--brand); }

/* =================================================================
   Header
   ================================================================= */
.site-header { background: rgba(255,255,255,.92); backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }

/* Anchor-link targets must clear the sticky 70px header, or the section heading
   lands underneath it. Applies to #section links and the #lead form jump. */
[id] { scroll-margin-top: 86px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.header-inner { display: flex; align-items: center; flex-wrap: nowrap; height: 70px; }

/* The brand NEVER shrinks. Previously it was an ordinary flex item, so when the
   scroll-revealed CTA claimed its width the brand was squeezed and "Tagg Estate Law"
   wrapped onto a second line — blowing out the 70px header. It is a fixed-size block. */
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--brand);
  flex: 0 0 auto; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--accent); flex: 0 0 auto; }
.brand-mark svg { width: 22px; height: 22px; fill: var(--accent); }
.brand-text { display: flex; flex-direction: column; font-family: var(--serif); font-weight: 700; font-size: 1.15rem; line-height: 1.1;
  white-space: nowrap; }
.brand-sub { font-family: var(--sans); font-weight: 500; font-size: .72rem; color: var(--ink-soft); letter-spacing: .01em; }

/* Desktop same-page anchor nav — generated from this page's actual sections.
   Hidden below 1024px; mobile uses the sticky call bar + hero form instead.

   Pinned to the brand with a fixed left margin (NOT centred with `margin: 0 auto`).
   All slack lives to the RIGHT of the nav — see .header-actions { margin-left: auto }.
   That is what stops the nav sliding sideways every time the CTA reveals: the CTA
   eats the right-hand slack only, so the brand and the nav never move at all. */
.header-nav { display: none; align-items: center; gap: 16px; margin-left: 32px; flex: 0 0 auto; }
.header-nav a { font-size: .92rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  white-space: nowrap; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.header-nav a:hover, .header-nav a:focus-visible { color: var(--brand); border-bottom-color: var(--accent); }

/* margin-left:auto collects ALL the header's free space here, to the right of the nav.
   It also right-aligns the actions on mobile, where .header-nav is display:none. */
.header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }

/* Click-to-call: a solid navy pill so it reads as an ACTION, not plain text.
   White on --brand is ~11:1 contrast. Navy = call; gold = request-consultation. */
.header-phone { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--brand); color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: .01em;
  text-decoration: none; padding: 10px 16px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(22,48,79,.24); transition: background .15s, box-shadow .15s, transform .15s; }
.header-phone .ico { fill: var(--accent); }
.header-phone:hover { background: var(--brand-dark); box-shadow: 0 6px 16px rgba(22,48,79,.34); transform: translateY(-1px); }
.header-phone:active { transform: translateY(0); }

/* Desktop path back to the form — revealed by JS (.is-scrolled) only once the hero
   form leaves the viewport. At the top of the page it would scroll to an element
   that is already on screen, so it stays collapsed AND out of the tab order
   (visibility:hidden), keeping the width free for the anchor nav. */
.header-cta { display: inline-flex; align-items: center; white-space: nowrap; overflow: hidden;
  visibility: hidden; max-width: 0; opacity: 0; margin-left: 0; padding: 10px 0; border-radius: 999px;
  background: var(--accent-btn); color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none;
  box-shadow: 0 4px 12px rgba(150,101,25,.28);
  transition: max-width .3s ease, opacity .25s ease, margin-left .3s ease,
              padding .3s ease, visibility .3s, background .15s, box-shadow .15s; }
.header-cta:hover { background: var(--accent-btn-dark); box-shadow: 0 6px 16px rgba(150,101,25,.38); }

@media (min-width: 1024px) { .header-nav { display: flex; margin-right: 24px; } }
/* Header width budget at the 1120px container cap (1076px of content):
     brand 224 + nav-margin 32 + nav ~436 + min gap 24 + phone 169 + gap 10 + cta ~150
   = ~1045px, leaving ~31px of headroom at the tightest page. The nav labels are kept
   short ("Services", "Process") and the CTA reads "Free Consultation" specifically to
   stay inside that budget — per CLAUDE.md, shorten the NAV, never the phone.
   Below 1120px the CTA stays collapsed and out of the tab order. */
@media (min-width: 1120px) {
  .site-header.is-scrolled .header-cta {
    visibility: visible; max-width: 260px; opacity: 1; margin-left: 10px; padding: 10px 18px; }
}
@media (prefers-reduced-motion: reduce) { .header-cta { transition: none; } }

/* =================================================================
   Hero
   ================================================================= */
.hero { position: relative; overflow: hidden; padding: 54px 0 64px;
  background:
    radial-gradient(1100px 420px at 78% -8%, rgba(31,64,104,.10), transparent 60%),
    linear-gradient(180deg, var(--tint), var(--white)); }
.hero-deco { position: absolute; top: -80px; right: -110px; width: 560px; height: 560px;
  max-width: 56%; pointer-events: none; user-select: none; z-index: 0;
  object-fit: cover; border-radius: 50%; opacity: .42;
  /* fade the opaque JPEG into the hero gradient so copy/form stay readable */
  -webkit-mask-image: radial-gradient(circle at 60% 40%, #000 38%, transparent 72%);
          mask-image: radial-gradient(circle at 60% 40%, #000 38%, transparent 72%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: start; }
.eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 700; color: var(--accent-dark); margin-bottom: 12px; }
.hero-copy h1 { margin-bottom: 16px; }
.subhead { font-size: 1.14rem; color: var(--ink-soft); margin-bottom: 22px; max-width: 36ch; }
.hero-points { list-style: none; display: grid; gap: 11px; margin-bottom: 26px; }
.hero-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 1.02rem; }
.hero-points .ico { color: var(--accent); margin-top: 2px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero conversion path — ONE action per persistent surface.
   The hero carried two buttons ("Request a Consultation" + "Call"), but both are
   already covered by a persistent surface: desktop = header phone + scroll-revealed
   header CTA; mobile = sticky header Call + sticky bottom form CTA. On desktop the
   jump button also scrolled to a form already on screen. So the buttons are gone and
   the phone is stated as a readable line instead — subordinate to the buttons, but it
   shows a real local number (a trust signal) and stays dialable by hand on desktop,
   where tel: does nothing. Shown at every width. */
.hero-callout { display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: .98rem; color: var(--ink-soft); }
.hero-callout .ico { width: 22px; height: 22px; color: var(--brand-2); }
/* The NUMBER is the point of this line — it must be scannable at a glance, so it
   is set well above body size. A desktop visitor reads and dials it by hand. */
.hero-callout a { font-size: 1.45rem; font-weight: 800; line-height: 1.1; letter-spacing: .01em;
  color: var(--brand); text-decoration: none;
  border-bottom: 2px solid var(--accent); padding-bottom: 2px; white-space: nowrap; }
.hero-callout a:hover { color: var(--accent-dark); }

/* THE OFFER BADGE — the single most-missed fact on the page was that the
   consultation is FREE. It used to be a .94rem grey line at the very BOTTOM of the
   hero copy (below the rating), which visitors skipped entirely. It is now a solid
   gold pill sitting directly under the subhead, above the bullets, so it is read
   before anything else in the body of the hero — and it is the only solid gold block
   in the hero column, so nothing competes with it.
   Contrast: #16202e ink on #c2872f gold = 5.3:1 (passes AA). */
.hero-offer { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
  background: var(--accent); color: var(--ink); border-radius: 999px;
  padding: 11px 20px 11px 16px; font-size: 1.02rem; font-weight: 600; line-height: 1.25;
  box-shadow: 0 6px 18px rgba(22,48,79,.22); }
.hero-offer .ico { width: 21px; height: 21px; color: var(--brand); flex: 0 0 auto; }
.hero-offer strong { font-weight: 800; letter-spacing: .02em; }
/* No opacity here: dimming this to .82 dropped it to 4.08:1 on the gold and failed
   the Lighthouse contrast audit. Hierarchy comes from weight, not from fading. */
.hero-offer .hero-offer-sub { font-weight: 500; white-space: nowrap; }
.hero-rating { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px;
  background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 8px 16px; box-shadow: var(--shadow-sm); }
.hero-rating .stars { margin: 0; font-size: 1rem; }
.hero-rating-text { font-size: .9rem; color: var(--ink-soft); font-weight: 600; }

/* Form card */
.form-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 40px 28px 28px; }
.form-float { position: absolute; top: -18px; left: -18px; z-index: 2; display: flex; align-items: center; gap: 10px;
  background: var(--brand); color: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); }
.form-float-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  background: rgba(255,255,255,.12); }
.form-float-ico svg { width: 18px; height: 18px; fill: var(--accent); }
.form-float-txt { display: flex; flex-direction: column; font-size: .76rem; color: #c9d6e6; line-height: 1.25; }
.form-float-txt strong { color: #fff; font-size: .9rem; }
.form-title { font-size: 1.4rem; margin-bottom: 4px; }
.form-sub { color: var(--ink-soft); font-size: .96rem; margin-bottom: 20px; }
.field { margin-bottom: 15px; display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .92rem; }
.optional { font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; padding: 13px 14px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: #fff; color: var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(31,64,104,.16); }
/* Now carries the free-consultation promise as well as the no-obligation one, so it
   can run to two lines — top-align the tick rather than centring it against a block. */
.form-reassure { display: flex; align-items: flex-start; gap: 7px; margin-top: 14px; font-size: .88rem; font-weight: 600; color: var(--brand); }
.form-reassure .ico { color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.form-privacy { margin-top: 8px; font-size: .8rem; color: var(--ink-soft); line-height: 1.45; }
.form-privacy a { color: var(--brand-2); }
.hidden-field { position: absolute; left: -5000px; }

/* =================================================================
   Multi-step form
   ================================================================= */
.msf-progress { list-style: none; display: flex; gap: 8px; margin-bottom: 20px; }
.msf-dot { flex: 1; height: 6px; border-radius: 99px; background: var(--line); color: transparent;
  font-size: 0; line-height: 0; }
.msf-dot.is-current, .msf-dot.is-done { background: var(--accent); }
.msf-count { font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--ink-soft); margin: -10px 0 16px; }
.msf-step-hint { display: block; font-family: var(--sans); font-weight: 500; font-size: .78rem;
  color: var(--ink-soft); text-transform: none; letter-spacing: 0; margin-top: 2px; }
.choices { display: grid; gap: 10px; }
.choice { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.choice:hover { border-color: var(--brand-2); }
.choice input { accent-color: var(--accent); width: 18px; height: 18px; }
.choice:has(input:checked) { border-color: var(--accent); background: #fdf7ec; }
.msf-step { border: 0; padding: 0; margin: 0; min-width: 0; }
.msf-step-title { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--brand); margin-bottom: 14px; padding: 0; }
/* Step heading receives programmatic focus (for screen readers) — hide the visual outline box. */
.msf-step-title:focus { outline: none; }
.msf-nav { display: grid; gap: 10px; margin-top: 6px; }
/* Without JS: all steps visible (graceful fallback). With JS: show one at a time. */
.msf-on .msf-step { display: none; }
.msf-on .msf-step.is-active { display: block; }

/* =================================================================
   Trust bar
   ================================================================= */
.trustbar { background: var(--brand); color: #fff; }
.trustbar-inner { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 18px; padding: 22px; text-align: center; }
.tb-item { display: grid; gap: 2px; }
.tb-item strong { font-family: var(--serif); font-size: 1.2rem; color: #fff; }
.tb-item span { color: #c9d6e6; font-size: .9rem; }
.trustbar .verify-label { margin: 4px auto 0; }

/* =================================================================
   Cards / grids
   ================================================================= */
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: 20px; box-shadow: var(--shadow-sm); }
.card h3 { color: var(--ink); font-size: 1.02rem; margin-bottom: 6px; }
.card p { color: var(--ink-soft); font-size: .94rem; }

.benefit { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; text-align: center; box-shadow: var(--shadow-sm); }
.benefit-ico { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); margin-bottom: 14px; }
.benefit-ico svg { width: 26px; height: 26px; fill: var(--accent); }
.benefit h3 { margin-bottom: 6px; }
.benefit p { color: var(--ink-soft); font-size: .96rem; }

/* Rating summary module */
.rating-summary { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 auto 22px;
  width: fit-content; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 28px; box-shadow: var(--shadow-sm); }
.rating-score { font-family: var(--serif); font-weight: 700; font-size: 2.6rem; color: var(--brand); line-height: 1; }
.rating-meta { display: grid; gap: 4px; }
.stars-lg { font-size: 1.3rem; margin: 0; }
.rating-count { font-size: .86rem; color: var(--ink-soft); }

/* Reviews */
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.stars { color: var(--accent); letter-spacing: 2px; margin-bottom: 10px; font-size: 1.05rem; }
.review blockquote { font-style: italic; margin-bottom: 12px; }
.review figcaption { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink-soft); font-size: .92rem; }
.review-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: var(--accent); font-size: .85rem; }
/* Featured review — the single strongest verified quote, shown above the grid */
.review-solo { max-width: 700px; margin: 0 auto; text-align: center; }
.review-solo .stars { display: flex; justify-content: center; }
.review-solo blockquote { font-size: 1.15rem; }
.review-solo figcaption { justify-content: center; }

/* Grid of supporting verified Google reviews.
   NOTE: per-review star rows are intentionally omitted — only the aggregate
   rating (4.8 / 18) is verified; individual reviewers' star counts are not. */
.reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 980px; margin: 26px auto 0; }

/* Credentials / accreditation badges */
.credentials-label { text-align: center; color: var(--ink-soft); font-weight: 600; margin: 38px 0 16px; }
.badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.badge { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow-sm); }
.badge-ico { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.badge-ico svg { width: 22px; height: 22px; fill: var(--accent); }
.badge-ico-star { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.badge-ico-star svg { fill: #fff; }
.badge-text { display: flex; flex-direction: column; font-size: .82rem; color: var(--ink-soft); line-height: 1.25; }
.badge-text strong { color: var(--ink); font-size: .92rem; }

/* =================================================================
   About your lawyer (legal trust anchor)
   ================================================================= */
.lawyer-grid { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; max-width: 980px; }
.lawyer-photo { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lawyer-img { width: 100%; max-width: 280px; height: auto; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: var(--radius); border: 5px solid #fff; box-shadow: var(--shadow); }
.lawyer-bio .eyebrow { margin-bottom: 8px; }
.lawyer-bio .section-title { margin-bottom: 6px; }
.lawyer-cred { color: var(--accent-dark); font-weight: 700; font-size: .96rem; margin-bottom: 14px; }
.lawyer-text { color: var(--ink-soft); margin-bottom: 16px; }
.lawyer-points { list-style: none; display: grid; gap: 9px; margin-bottom: 22px; }
.lawyer-points li { display: flex; align-items: flex-start; gap: 9px; color: var(--ink); font-size: .98rem; }
.lawyer-points .ico { color: var(--accent); margin-top: 3px; }

/* =================================================================
   "Do you need probate?" — Do-I-need-this education
   ================================================================= */
.need-inner { max-width: 920px; }
.need-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.need-col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.need-yes { border-top: 4px solid var(--accent); }
.need-no { border-top: 4px solid var(--line); }
.need-col h3 { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 1.05rem; margin-bottom: 14px; }
.need-tag { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent); color: #fff; font-weight: 800; font-size: .95rem; }
.need-tag-muted { background: var(--ink-soft); }
.need-col ul { list-style: none; display: grid; gap: 10px; }
.need-col li { position: relative; padding-left: 18px; color: var(--ink-soft); font-size: .96rem; }
.need-col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.need-no li::before { background: var(--line); }
.path-lead { color: var(--ink-soft); font-size: .96rem; margin-bottom: 14px; }
.need-col .btn { margin-top: 18px; }
.need-note { text-align: center; color: var(--ink-soft); }
.need-link { color: var(--brand-2); font-weight: 700; }

/* =================================================================
   Offer / service details
   ================================================================= */
.offer-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 34px; align-items: start; }
.ticks { list-style: none; display: grid; gap: 12px; margin: 0 0 26px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; }
.offer-aside { background: linear-gradient(160deg, var(--brand), var(--brand-2)); color: #fff;
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.offer-aside-kicker { text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.offer-aside p { color: #e7eef7; }
.offer-aside strong { color: #fff; }
.offer-aside-note { font-size: .9rem; color: #bccbde; margin-top: 10px; }

/* =================================================================
   How it works
   ================================================================= */
.steps-3 { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: s; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.step-ico { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); margin-bottom: 14px; }
.step-ico svg { width: 26px; height: 26px; fill: var(--accent); }
.step-num { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--serif); font-weight: 700; font-size: .95rem; }
.step h3 { margin-bottom: 6px; }
.step p { color: var(--ink-soft); font-size: .96rem; }

/* =================================================================
   FAQ
   ================================================================= */
.faq-inner { max-width: 780px; }
.faq-inner details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px 20px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.faq-inner summary { cursor: pointer; font-weight: 700; color: var(--brand); padding: 16px 30px 16px 0; list-style: none; position: relative; }
.faq-inner summary::-webkit-details-marker { display: none; }
.faq-inner summary::after { content: "+"; position: absolute; right: 0; top: 13px; font-size: 1.5rem; color: var(--accent); }
.faq-inner details[open] summary::after { content: "−"; }
.faq-inner details p { color: var(--ink-soft); padding: 0 0 18px; }

/* =================================================================
   Final CTA band
   ================================================================= */
.cta-band { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; padding: 58px 0; text-align: center; }
.cta-deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cta-band-inner { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { color: #d6e0ee; margin-bottom: 24px; }
.cta-band-inner .hero-cta { justify-content: center; }
.cta-seal { display: inline-grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 16px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); }
.cta-seal svg { width: 30px; height: 30px; fill: var(--accent); }
.cta-trustrow { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 24px; }
.cta-trustrow li { display: inline-flex; align-items: center; gap: 7px; color: #d6e0ee; font-size: .9rem; font-weight: 600; }
.cta-trustrow .ico { color: var(--accent); }

/* =================================================================
   Footer
   ================================================================= */
.site-footer { background: var(--brand-dark); color: #aebcd0; padding: 42px 0 96px; font-size: .92rem; }
.footer-grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 18px; }
.footer-brand { font-family: var(--serif); font-weight: 700; color: #fff; font-size: 1.05rem; margin-bottom: 8px; }
.footer-contact a { color: #fff; text-decoration: underline; }
.footer-links { display: flex; gap: 22px; align-items: flex-start; }
.footer-links a { color: #cdd8e7; text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-legal { color: #8294ad; line-height: 1.55; max-width: 860px; }

/* =================================================================
   Verification labels (DRAFT only — remove before production)
   ================================================================= */
.verify-label { display: inline-block; background: #fff4d6; color: #8a5a00; border: 1px dashed #e0a800;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 6px; margin: 4px 0; font-style: normal; }
.verify-label-center { display: block; width: fit-content; margin: 0 auto 22px; }

/* =================================================================
   Sticky mobile call button
   ================================================================= */
/* Sticky mobile bar = the FORM path (gold = request-a-consultation everywhere).
   Call already has its own persistent surface in the sticky header, so making this
   a second Call button just split one action across two bars and left the form with
   none. One action per surface, colour-coded: navy = call, gold = form. */
.sticky-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  align-items: center; justify-content: center; gap: 9px;
  background: var(--accent-btn); color: #fff; text-decoration: none; font-weight: 800; font-size: 1.08rem;
  padding: 15px; box-shadow: 0 -4px 16px rgba(0,0,0,.2); }
.sticky-cta:active { background: var(--accent-btn-dark); }
.sticky-cta .ico { fill: #fff; }

/* =================================================================
   Legal pages (privacy / terms)
   ================================================================= */
.legal { max-width: 760px; }
.legal h1 { margin-bottom: 6px; }
.legal h2 { font-size: 1.25rem; margin: 28px 0 8px; }
.legal p { color: var(--ink-soft); margin-bottom: 12px; }
.legal-meta { font-size: .9rem; }
.legal-list { color: var(--ink-soft); margin: 0 0 12px; padding-left: 22px; }
.legal-list li { margin-bottom: 6px; }
.legal-note { font-size: .9rem; font-style: italic; }
.legal-back { margin-top: 28px; }
.legal-back a { color: var(--brand-2); font-weight: 600; text-decoration: none; }

/* =================================================================
   Thank-you page
   ================================================================= */
.thankyou { padding: 72px 0 96px; background: var(--tint); min-height: 60vh; }
.thankyou-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); max-width: 580px; margin: 0 auto; padding: 46px 32px; text-align: center; }
.check { width: 66px; height: 66px; margin: 0 auto 18px; background: var(--accent); color: #fff;
  border-radius: 50%; font-size: 2rem; line-height: 66px; font-weight: 800; }
.thankyou-lead { font-size: 1.1rem; margin: 10px 0; }
.thankyou-sub { color: var(--ink-soft); margin-bottom: 24px; }
.thankyou-back { margin-top: 22px; }
.thankyou-back a { color: var(--brand-2); }

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero-deco { top: -80px; right: -140px; width: 380px; height: 380px; opacity: .7; }
  .cards-4 { grid-template-columns: 1fr 1fr; }
  .cards-3 { grid-template-columns: 1fr; }
  .steps-3 { grid-template-columns: 1fr; }
  .offer-grid { grid-template-columns: 1fr; }
  .badges { grid-template-columns: 1fr 1fr; }
  .need-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; }
  .lawyer-grid { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .lawyer-bio .section-title, .lawyer-bio .eyebrow { text-align: center; }
  .lawyer-points { text-align: left; max-width: 360px; margin-left: auto; margin-right: auto; }
  .form-float { display: none; }
  .subhead { max-width: none; }
  .sticky-cta { display: flex; }
  .site-footer { padding-bottom: 96px; }
}
/* The offer pill is ~405px wide at full size — wider than a 390px phone's content
   column. Rather than shrink the type (the whole point is that it is READ), it drops
   its pill radius and wraps "No obligation" onto a second line, indented to sit under
   the headline text rather than under the shield icon. */
@media (max-width: 560px) {
  .hero-offer { flex-wrap: wrap; border-radius: 14px; padding: 11px 16px; }
  .hero-offer .hero-offer-sub { flex-basis: 100%; margin-left: 31px; }
  .hero-offer .hero-offer-sep { display: none; }
}
@media (max-width: 460px) {
  .cards-4 { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; }
  /* Narrow phones: collapse the pill to a circular icon-only call button. */
  .header-phone span { display: none; }
  .header-phone { padding: 11px; border-radius: 50%; }
  .header-phone .ico { width: 22px; height: 22px; }
}