/*
 * style.css — Attorney Boyd Law Office, Ltd.
 * Site-wide stylesheet. All pages link to this file.
 * Page-specific styles (hero variants, unique sections) live here too,
 * scoped by class so they only apply where used.
 *
 * Fonts loaded via Google Fonts in each page <head>:
 *   Cormorant Garamond (300, 400, 500, 600 + italic variants)
 *   Jost (300, 400, 500)
 */

/* Hide reCAPTCHA v3 badge (badge-free use permitted per Google ToS
   when disclosure text is present near the form submit button) */
.grecaptcha-badge { visibility: hidden !important; }

/* ═══════════════════════════════════════════════════════════
   RESET & ROOT
═══════════════════════════════════════════════════════════ */

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

:root {
  --ink:     #1a1714;
  --stone:   #2e2a26;
  --gold:    #b8966a;
  --gold-lt: #d4b48a;
  --cream:   #f5f1eb;
  --warm:    #ede8e0;
  --muted:   #5c5650;
  --rule:    rgba(184,150,106,0.28);
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: 'Jost', sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

/* Grain texture overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 9999; opacity: .5;
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════════════ */

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4vw; height: 72px;
  background: rgba(26,23,20,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.nav-logo { text-decoration: none; }
.nav-logo img { height: 36px; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: 2.2rem; list-style: none; }
.nav-links a {
  color: rgba(245,241,235,0.72); text-decoration: none;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  transition: color .2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--gold-lt); }

.nav-cta {
  background: transparent; border: 1px solid var(--gold);
  color: var(--gold) !important; padding: 0.45rem 1.1rem;
  border-radius: 2px; font-size: 0.7rem !important;
  letter-spacing: 0.14em; text-decoration: none;
  transition: background .2s, color .2s;
}
.nav-cta:hover { background: var(--gold) !important; color: var(--ink) !important; }

/* Begin Intake CTA — filled gold button in desktop nav */
.nav-intake-cta {
  background: var(--gold); color: var(--ink) !important;
  padding: 0.45rem 1.1rem; border-radius: 2px;
  font-size: 0.7rem !important; letter-spacing: 0.14em;
  text-decoration: none; font-weight: 500;
  transition: background .2s;
}
.nav-intake-cta:hover { background: #c9a96e !important; color: var(--ink) !important; }

/* Hamburger */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 36px; height: 36px;
  cursor: pointer; background: none; border: none; padding: 4px;
}
.nav-hamburger span {
  display: block; width: 100%; height: 1.5px; background: var(--gold);
  transition: transform .25s, opacity .2s; transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile dropdown */
.nav-dropdown {
  display: none; position: fixed;
  top: 72px; left: 0; right: 0;
  max-height: calc(100dvh - 72px); overflow-y: auto;
  background: rgba(20,17,14,0.98); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule); z-index: 99;
  padding: 1.5rem 6vw 2rem; flex-direction: column;
}
.nav-dropdown.open { display: flex; }
.nav-dropdown a {
  color: rgba(245,241,235,0.7); text-decoration: none;
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 1rem 0; border-bottom: 1px solid rgba(184,150,106,0.1);
  transition: color .2s;
}
.nav-dropdown a:last-child { border-bottom: none; }
.nav-dropdown a:hover { color: var(--gold-lt); }
.nav-dropdown .nav-intake-cta-mobile {
  margin-top: 1.2rem; display: inline-block;
  background: var(--gold); color: var(--ink) !important;
  padding: 0.7rem 1.2rem; font-weight: 500; border-bottom: none !important;
}
.nav-dropdown .nav-cta-mobile {
  margin-top: 0.6rem; display: inline-block;
  color: var(--gold) !important; padding: 1rem 0;
}

/* ── Desktop dropdown menus ─────────────────────────────────────────── */
.nav-has-submenu { position: relative; }

.nav-trigger {
  background: none; border: none; padding: 0; cursor: pointer;
  color: rgba(245,241,235,0.72); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-family: inherit;
  display: flex; align-items: center; gap: 0.35rem;
  transition: color .2s;
}
.nav-trigger:hover,
.nav-trigger.active { color: var(--gold-lt); }
.nav-trigger svg { transition: transform .2s; flex-shrink: 0; }
.nav-has-submenu:hover .nav-trigger svg,
.nav-has-submenu.is-open .nav-trigger svg { transform: rotate(180deg); }

.nav-submenu {
  position: absolute;
  top: 100%;                      /* flush to bottom of <li> — no gap to cross */
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 190px;
  background: rgba(20,17,14,0.98);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(184,150,106,0.2);
  padding: 0.4rem 0;
  padding-top: 14px;              /* visual gap is now inside the element, stays hoverable */
  margin-top: 0;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
  z-index: 200;
}
.nav-has-submenu:hover .nav-submenu,
.nav-has-submenu.is-open .nav-submenu {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-submenu a {
  color: rgba(245,241,235,0.72); text-decoration: none;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.65rem 1.4rem;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-submenu a:hover,
.nav-submenu a.active { color: var(--gold-lt); background: rgba(197,165,114,0.07); }

/* Begin Intake inside a dropdown — gold accent with separator */
.nav-submenu a.nav-submenu-intake {
  color: var(--gold);
  border-top: 1px solid var(--rule);
  margin-top: 0.3rem;
  padding-top: 0.95rem;
}
.nav-submenu a.nav-submenu-intake:hover {
  color: var(--gold-lt);
  background: rgba(184,150,106,0.1);
}

/* ── Mobile grouped nav labels ──────────────────────────────────────── */
.nav-mobile-group { display: flex; flex-direction: column; }
.nav-mobile-group-label {
  font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); opacity: 0.7;
  padding: 1.1rem 0 0.5rem;
  border-bottom: 1px solid rgba(184,150,106,0.12);
}
.nav-mobile-group a { padding-left: 0.8rem !important; }

/* ═══════════════════════════════════════════════════════════
   SHARED LAYOUT
═══════════════════════════════════════════════════════════ */

.section-inner { max-width: 1180px; margin: 0 auto; padding: 0 6vw; }

.section-tag {
  font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); display: flex; align-items: center; gap: 0.9rem;
  margin-bottom: 0.8rem;
}
.section-tag::before {
  content: ''; display: block; width: 28px; height: 1px; background: var(--gold);
}

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 300;
  line-height: 1.15; color: var(--ink);
}
.section-title em { font-style: italic; }
.section-title-lt { color: var(--cream); }

/* ═══════════════════════════════════════════════════════════
   PAGE HERO (interior pages)
═══════════════════════════════════════════════════════════ */

.page-hero {
  background: var(--ink);
  padding: 9rem 6vw 5rem;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to right, transparent 0,
    transparent calc(100% / 12 - 1px),
    rgba(184,150,106,0.04) calc(100% / 12 - 1px),
    rgba(184,150,106,0.04) calc(100% / 12)
  );
}
.page-hero-inner {
  max-width: 1180px; margin: 0 auto; position: relative; z-index: 1;
}

.page-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.6rem; opacity: 0; animation: fadeUp .7s .1s forwards;
}
.page-eyebrow::before {
  content: ''; display: block; width: 40px; height: 1px; background: var(--gold);
}

.page-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 5vw, 5rem); font-weight: 300;
  line-height: 1.08; color: var(--cream); margin-bottom: 1.6rem;
  opacity: 0; animation: fadeUp .8s .25s forwards;
}
.page-title em { font-style: italic; color: var(--gold-lt); }

.page-intro {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem); line-height: 1.8;
  color: rgba(245,241,235,0.78); max-width: 620px;
  opacity: 0; animation: fadeUp .8s .4s forwards;
}
.page-intro-plain {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem); line-height: 1.8;
  color: rgba(245,241,235,0.72); max-width: 600px; margin-top: 1rem;
  opacity: 0; animation: fadeUp .8s .5s forwards;
}

/* Back link (category pages) */
.hero-back {
  font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,241,235,0.35); text-decoration: none;
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1.6rem; opacity: 0; animation: fadeUp .7s .05s forwards;
  transition: color .2s;
}
.hero-back:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */

.btn-primary {
  background: var(--gold); color: var(--ink); border: none;
  padding: 0.9rem 2.2rem; font-family: 'Jost', sans-serif;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none;
  border-radius: 2px; cursor: pointer; display: inline-block;
  transition: background .2s, transform .15s;
}
.btn-primary:hover { background: var(--gold-lt); transform: translateY(-1px); }

.btn-ghost {
  background: transparent; color: rgba(245,241,235,0.75);
  border: 1px solid rgba(245,241,235,0.25);
  padding: 0.9rem 2.2rem; font-family: 'Jost', sans-serif;
  font-size: 0.72rem; font-weight: 400; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none;
  border-radius: 2px; cursor: pointer; display: inline-block;
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-lt); }

.inline-btn {
  background: none; border: none; color: var(--gold);
  cursor: pointer; font-family: inherit; font-size: inherit;
  padding: 0; text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════
   CONTACT FORM
═══════════════════════════════════════════════════════════ */

/* .contact-cta is defined near the foot of this file — it carries a background
   photograph and must win the cascade, so the rule lives there, not here. */
.contact-cta::before {
  content: ''; position: absolute;
  top: -200px; right: -200px; width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,150,106,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.contact-grid {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 6rem; align-items: start; position: relative; z-index: 1;
}
.contact-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300;
  line-height: 1.15; color: var(--cream); margin-bottom: 1.5rem;
}
.contact-headline em { font-style: italic; color: var(--gold-lt); }
.contact-note {
  font-size: 0.85rem; line-height: 1.8;
  color: rgba(245,241,235,0.68); margin-bottom: 2.5rem;
}
.contact-details { display: flex; flex-direction: column; gap: 1.4rem; }
.contact-item { display: flex; gap: 1.2rem; align-items: flex-start; }
.contact-item-label {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); padding-top: 2px; min-width: 60px;
}
.contact-item-val { font-size: 0.9rem; color: rgba(245,241,235,0.7); line-height: 1.5; }
.contact-item-val a { color: inherit; text-decoration: none; transition: color .2s; }
.contact-item-val a:hover { color: var(--gold-lt); }

.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label {
  font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(245,241,235,0.4);
}
.field input, .field select, .field textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(184,150,106,0.2); color: var(--cream);
  padding: 0.8rem 1rem; font-family: 'Jost', sans-serif;
  font-size: 0.85rem; font-weight: 400;
  border-radius: 2px; outline: none; transition: border-color .2s;
  -webkit-appearance: none;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(245,241,235,0.2); }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--gold); }
.field select option { background: var(--stone); }
.field textarea { resize: vertical; min-height: 110px; }
/* Raised from 0.25 to 0.55 opacity on 2026-09-10. At 0.25 this measured 2.16:1 against
   the section ground — well under the 4.5:1 readability threshold — and this is the text
   saying no attorney-client relationship is formed. It was already at 2.16:1 before the
   contact block gained its background photograph; the photo did not cause it. 0.55
   measures 5.10:1 and still reads as fine print. */
.form-disclaimer {
  font-size: 0.67rem; line-height: 1.6; color: rgba(245,241,235,0.55);
}

/* ═══════════════════════════════════════════════════════════
   CTA BAND (used on resources + category pages)
═══════════════════════════════════════════════════════════ */

.cta-band { padding: 6rem 0; background: var(--stone); border-top: 1px solid var(--rule); }
.cta-band-inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: 3rem; flex-wrap: wrap;
}
.cta-band-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 300;
  line-height: 1.15; color: var(--cream); margin-bottom: 0.6rem;
}
.cta-band-text h2 em { font-style: italic; color: var(--gold-lt); }
.cta-band-text p {
  font-size: 0.88rem; line-height: 1.75;
  color: rgba(245,241,235,0.68); max-width: 460px;
}
.cta-band-actions { display: flex; gap: 1rem; flex-wrap: wrap; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   IMAGE SLOTS (placeholder state before real photos)
═══════════════════════════════════════════════════════════ */

.img-slot {
  position: relative; overflow: hidden;
  background: var(--warm);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.6rem;
}
.img-slot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.img-slot-label {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); z-index: 1; pointer-events: none; text-align: center; padding: 0 1rem;
}
.img-slot-icon { width: 32px; height: 32px; color: var(--gold); opacity: 0.4; z-index: 1; }

/* Office band */
/* A fixed-height band crops harder the wider the screen gets: at 1920px a
   440px strip showed barely half the photograph's height. Deriving the
   height from the width instead means the same slice of the picture — the
   full window lettering above, torsos below — appears at every size. The
   max-width stops it becoming enormous on a wide monitor; the band's own
   dark ground fills the margin either side. */
.office-band {
  width: 100%; background: #1e1b18; overflow: hidden;
  display: flex; justify-content: center;
}
.office-band img {
  width: 100%; max-width: 1400px; height: auto; display: block;
  aspect-ratio: 11 / 6;
  object-fit: cover; object-position: center 46%;
}
.office-band .img-slot-label { color: rgba(245,241,235,0.25); }
.office-band .img-slot-icon  { color: var(--gold); opacity: 0.2; }

/* Attorney photo slots */
.attorney-photo {
  width: 100%; aspect-ratio: 3/2; margin-bottom: 1.6rem;
  background: rgba(255,255,255,0.04); border-bottom: 1px solid var(--rule);
}
.attorney-photo .img-slot-label { color: rgba(245,241,235,0.25); }
.attorney-photo .img-slot-icon  { color: var(--gold); opacity: 0.2; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */

/* ── Ticker strip ── */
.footer-ticker {
  background: var(--ink);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  min-height: 48px;
}

/* ── Main footer ── */
footer { background: #111009; padding: 3.5rem 6vw 0; }

.footer-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 3rem;
  align-items: start;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--rule);
}

/* Brand column */
.footer-brand { display: flex; flex-direction: column; gap: 0.8rem; }
.footer-logo {
  font-family: 'Cormorant Garamond', serif; font-size: 1rem;
  color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none;
}
.footer-logo:hover { color: var(--gold-lt); }
.footer-tagline {
  font-size: 0.72rem; font-weight: 300; line-height: 1.65;
  color: rgba(245,241,235,0.3); letter-spacing: 0.04em;
}
.footer-badge { margin-top: 0.4rem; }

/* Links column */
.footer-links {
  display: flex; flex-direction: column; gap: 0.55rem; list-style: none;
  justify-self: center;
}
.footer-links a {
  font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,241,235,0.3); text-decoration: none; transition: color .2s;
}
.footer-links a:hover { color: var(--gold); }

/* Contact / CTA column */
.footer-contact {
  display: flex; flex-direction: column; gap: 0.7rem;
  align-items: flex-end;
}
.footer-phone {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem; font-weight: 400;
  color: var(--cream); text-decoration: none; letter-spacing: 0.03em;
  transition: color .2s;
}
.footer-phone:hover { color: var(--gold-lt); }
.footer-hours {
  font-size: 0.65rem; font-weight: 300; letter-spacing: 0.1em;
  color: rgba(245,241,235,0.25); text-transform: uppercase;
}
.footer-address {
  font-size: 0.65rem; font-weight: 300; letter-spacing: 0.08em;
  color: rgba(245,241,235,0.25); text-transform: uppercase;
  text-decoration: none; transition: color .2s;
}
.footer-address:hover { color: var(--gold-lt); }
.footer-intake-btn {
  margin-top: 0.4rem;
  font-size: 0.68rem !important;
  padding: 0.7rem 1.6rem !important;
  width: 100%; text-align: center;
}
.footer-consult-btn {
  font-size: 0.68rem !important;
  padding: 0.7rem 1.6rem !important;
  width: 100%; text-align: center;
}

/* Bottom bar */
.footer-bottom {
  max-width: 1180px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.5rem;
  padding: 1.2rem 0 1.6rem;
}
.footer-copy { font-size: 0.62rem; color: rgba(245,241,235,0.2); letter-spacing: 0.06em; }
.footer-disclaimer {
  font-size: 0.6rem; color: rgba(245,241,235,0.12);
  letter-spacing: 0.04em; max-width: 560px; line-height: 1.5; text-align: right;
}

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATION
═══════════════════════════════════════════════════════════ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — HERO
═══════════════════════════════════════════════════════════ */

.hero {
  min-height: 100vh; background: var(--ink);
  display: grid; grid-template-rows: 1fr auto;
  position: relative; overflow: hidden;

  /* ── Opening sequence ──────────────────────────────────────────────
     The photograph opens bright and slightly oversized, holds, then
     settles: it scales back down, loses brightness and gains contrast
     while the scrim above it deepens. The text fades up over the top
     as that happens.

     Three knobs, all here:
       --hero-hold  how long the bright opening sits still
       --hero-fall  how long the settling takes after the hold
       --hero-cue   when the first line of text starts to appear

     --hero-cue is the one with a cost. The headline is this page's
     Largest Contentful Paint element, so delaying it delays what
     Google times. At 1.3s the headline paints ~1.55s after the
     stylesheet applies, well under the 2.5s "good" threshold. Past
     about 1.8s a slow mobile connection starts scoring poorly.
     --hero-hold and --hero-fall are free — nothing waits on them. */
  --hero-hold: 1.5s;
  --hero-fall: 3.2s;
  --hero-cue:  1.3s;
}

/* The photograph gets its own layer so transform and filter apply to it
   alone — on .hero-bg they would drag the scrim and the gold grid with
   them, and brightening a black scrim turns it grey. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: url('images/office/web/building-sign.jpg') center 42% / cover no-repeat;
  /* How far the photograph starts "in front" before it settles back.
     One value drives the recede in both motion modes. */
  --hero-drift: 1.07;
  transform: scale(var(--hero-drift));
  filter: brightness(1.12) contrast(0.93);
  will-change: transform, filter;
  animation: heroPhoto var(--hero-fall) cubic-bezier(.4, 0, .22, 1) var(--hero-hold) forwards;
}
@keyframes heroPhoto {
  to { transform: scale(1); filter: brightness(0.82) contrast(1.18); }
}

.hero-bg {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 60% 70% at 75% 50%, rgba(184,150,106,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 20% 80%, rgba(184,150,106,0.04) 0%, transparent 60%);
}
/* The scrim is its own layer because a gradient's colour stops cannot be
   animated — only a whole layer's opacity can. It runs on the same clock
   as the photograph above. */
.hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(26,23,20,0.95) 0%,
    rgba(26,23,20,0.84) 45%,
    rgba(26,23,20,0.97) 100%);
  opacity: 0.52;
  animation: heroScrim var(--hero-fall) cubic-bezier(.4, 0, .22, 1) var(--hero-hold) forwards;
}
@keyframes heroScrim {
  to { opacity: 1; }
}
.hero-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background-image: repeating-linear-gradient(
    to right, transparent 0,
    transparent calc(100% / 12 - 1px),
    rgba(184,150,106,0.05) calc(100% / 12 - 1px),
    rgba(184,150,106,0.05) calc(100% / 12)
  );
}
.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: 10rem 8vw 5rem; max-width: 1000px; margin: 0 auto;
}
.hero-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 2rem;
  display: flex; align-items: center; gap: 1rem;
  opacity: 0; animation: fadeUp .7s var(--hero-cue) forwards;
}
.hero-eyebrow::before, .hero-eyebrow::after {
  content: ''; display: block; width: 40px; height: 1px; background: var(--gold);
}
.hero-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 6.5vw, 6rem); font-weight: 300;
  line-height: 1.07; color: var(--cream); margin-bottom: 2.4rem;
  opacity: 0; animation: fadeUp .8s calc(var(--hero-cue) + .22s) forwards;
}
.hero-headline em { font-style: italic; color: var(--gold-lt); }
.hero-sub {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem); line-height: 1.75;
  color: rgba(245,241,235,0.78); max-width: 560px; margin-bottom: 3rem;
  text-align: center;
  opacity: 0; animation: fadeUp .8s calc(var(--hero-cue) + .40s) forwards;
}
.hero-actions {
  display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center;
  opacity: 0; animation: fadeUp .8s calc(var(--hero-cue) + .55s) forwards;
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — SERVICE CARDS
═══════════════════════════════════════════════════════════ */

.services { padding: 8rem 0; background: var(--ink); }
.services .section-title { color: var(--cream); }
.services-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin-top: 4rem;
  border: 1px solid var(--rule);
}
.service-card {
  padding: 2.8rem 2rem; background: rgba(255,255,255,0.02);
  border-right: 1px solid var(--rule);
  position: relative; overflow: hidden;
  transition: background .3s; cursor: pointer;
  text-decoration: none; display: block; color: inherit;
}
.service-card:last-child { border-right: none; }
.service-card::before {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.service-card:hover { background: rgba(184,150,106,0.06); }
.service-card:hover::before { transform: scaleX(1); }
.service-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem; font-weight: 400; color: var(--cream);
  line-height: 1.3; margin-bottom: 1rem;
}
.service-desc { font-size: 0.82rem; line-height: 1.75; color: rgba(245,241,235,0.65); }
.service-arrow {
  margin-top: 1.8rem; font-size: 0.65rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); opacity: 0; transition: opacity .25s;
}
.service-card:hover .service-arrow { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — PHILOSOPHY
═══════════════════════════════════════════════════════════ */

.philosophy { padding: 5rem 0; background: var(--warm); }
.philosophy-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: start; margin-top: 2rem;
}
.philosophy-quote {
  border-left: 2px solid var(--gold); padding-left: 2.2rem;
}
.quote-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 300;
  font-style: italic; line-height: 1.5; color: var(--stone); margin-bottom: 1.5rem;
}
.quote-attr { font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.philosophy-text p { font-size: 1rem; line-height: 1.85; color: var(--stone); margin-bottom: 1.4rem; }
.philosophy-text p:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — DISTINCTION (Three Commitments)
═══════════════════════════════════════════════════════════ */

.distinction { padding: 8rem 0; background: var(--cream); }
.distinction-layout {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: 5rem; margin-top: 4rem;
}
.distinction-sidebar { position: sticky; top: 100px; align-self: start; }
.distinction-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 4rem; font-weight: 300; color: var(--gold);
  opacity: 0.18; line-height: 1; margin-bottom: 2rem;
}
.distinction-sidebar p { font-size: 0.9rem; line-height: 1.8; color: var(--muted); }
.distinction-pillars { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; }
.pillar { padding: 2.5rem 2rem; background: var(--warm); transition: background .25s; }
.pillar:hover { background: #e8e2d8; }
.pillar-icon { width: 36px; height: 36px; margin-bottom: 1.2rem; color: var(--gold); }
.pillar-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem; font-weight: 500; color: var(--ink); margin-bottom: 0.8rem;
}
.pillar-text { font-size: 0.83rem; line-height: 1.8; color: var(--muted); }

/* ── 4-step process grid: 4-col desktop → 2×2 on mobile ── */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
@media (max-width: 640px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — ATTORNEYS PREVIEW
═══════════════════════════════════════════════════════════ */

.attorneys { padding: 8rem 0; background: var(--stone); }
.attorneys .section-title { color: var(--cream); }
.attorneys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 4rem; }
.attorney-card {
  background: rgba(255,255,255,0.03);
  padding: 3rem 2.4rem; border-top: 1px solid var(--rule);
  position: relative; transition: background .25s;
}
.attorney-card:hover { background: rgba(184,150,106,0.07); }
.attorney-initial {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.5rem; font-weight: 300; color: var(--gold);
  opacity: 0.25; line-height: 1; margin-bottom: 1.4rem;
}
.attorney-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem; font-weight: 400; color: var(--cream); margin-bottom: 0.35rem;
}
.attorney-role {
  font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.4rem;
}
.attorney-bio { font-size: 0.83rem; line-height: 1.8; color: rgba(245,241,235,0.65); }

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — PILLAR MICRO-QUOTE
═══════════════════════════════════════════════════════════ */

.pillar-micro-quote {
  margin-top: 1.4rem; padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.85rem; font-style: italic; font-weight: 300;
  color: rgba(26,23,20,0.72); line-height: 1.55;
}


/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — DISTINCTION VOICES (merged from proof-section)
═══════════════════════════════════════════════════════════ */

.distinction-voices {
  margin-top: 3.5rem; padding-top: 2.5rem;
  border-top: 1px solid var(--rule);
  text-align: center;
}
.distinction-voices-intro {
  font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold); line-height: 1.75;
  margin-bottom: 2rem;
}
.distinction-feature-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.15rem, 2.1vw, 1.6rem); font-style: italic; font-weight: 300;
  color: var(--stone); line-height: 1.65;
  max-width: 680px; margin: 0 auto 1rem;
}
.distinction-feature-cite {
  display: block; font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); font-style: normal;
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — PROOF TRANSITION SECTION
═══════════════════════════════════════════════════════════ */

.proof-section { padding: 6rem 0; background: var(--stone); text-align: center; }
.proof-intro {
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.proof-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 300;
  color: var(--cream); line-height: 1.2; margin-bottom: 0.8rem;
}
.proof-headline em { font-style: italic; color: var(--gold-lt, #d4aa7a); }
.proof-subtext { font-size: 0.84rem; color: rgba(245,241,235,0.42); margin-bottom: 3rem; }
.proof-feature-quote {
  max-width: 680px; margin: 0 auto;
  border-left: 2px solid var(--gold); padding: 1.6rem 2.4rem; text-align: left;
}
.proof-feature-quote blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.18rem; font-style: italic; font-weight: 300;
  color: var(--cream); line-height: 1.72; margin: 0 0 1.2rem;
}
.proof-feature-quote cite {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); font-style: normal;
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — TESTIMONIALS (auto-scroll carousel)
═══════════════════════════════════════════════════════════ */

.testimonial { padding: 8rem 0; background: var(--cream); overflow: hidden; }

/* Carousel viewport */
.testimonial-viewport { overflow: hidden; margin-top: 3rem; }
.testimonial-slides {
  display: flex;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial-card {
  flex: 0 0 50%; box-sizing: border-box;
  background: var(--warm); padding: 3rem 2.8rem;
  border-top: 2px solid var(--gold);
}
@media (max-width: 700px) {
  .testimonial-card { flex: 0 0 100%; }
}
.testimonial-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.4rem; flex-wrap: wrap; gap: 0.5rem;
}
.testimonial-theme-label {
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.testimonial-stars { color: var(--gold); font-size: 0.85rem; letter-spacing: 0.12em; }
.testimonial-body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem; font-style: italic; font-weight: 400;
  line-height: 1.75; color: var(--ink); margin-bottom: 1.6rem;
}
.testimonial-name { font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); }

/* Dots navigation */
.testimonial-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem; margin-top: 2.2rem;
}
.testimonial-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(26,23,20,0.18); border: none; cursor: pointer;
  padding: 0; transition: background .25s, transform .25s;
}
.testimonial-dot.active { background: var(--gold); transform: scale(1.4); }
.testimonial-nav-btn {
  background: none; border: 1px solid rgba(184,150,106,0.35);
  color: var(--gold); width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s;
}
.testimonial-nav-btn:hover { background: rgba(184,150,106,0.1); border-color: var(--gold); }
.testimonial-disclaimer {
  margin-top: 2.5rem; font-size: 0.72rem; color: var(--muted);
  opacity: 0.65; max-width: 580px;
}

/* ═══════════════════════════════════════════════════════════
   REVIEWS PAGE — CURATED CAROUSEL
═══════════════════════════════════════════════════════════ */

.review-curated-section { padding: 5rem 0; background: var(--cream); }
.review-curated-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; margin-top: 3rem;
}
.review-curated-card { background: var(--warm); padding: 2.4rem 2rem; border-top: 2px solid var(--gold); }
.review-theme-label {
  font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.review-curated-body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem; font-style: italic; font-weight: 300;
  line-height: 1.72; color: var(--stone); margin-bottom: 1.2rem;
}
.review-curated-name { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.review-widget-intro {
  padding: 2.5rem 0 0.5rem; text-align: center;
  font-size: 0.78rem; color: var(--muted); letter-spacing: 0.03em;
}
@media (max-width: 900px) { .review-curated-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .review-curated-grid { grid-template-columns: 1fr; } }

/* ── Live Google Reviews (Reviews on My Website embed) ── */
.reviews-romw-section { padding: 4rem 0 5rem; background: var(--cream); }
.reviews-romw-inner   { max-width: 1180px; margin: 0 auto; padding: 0 6vw; }

/* ═══════════════════════════════════════════════════════════
   APPROACH PAGE — INLINE PROOF QUOTES
═══════════════════════════════════════════════════════════ */

.approach-inline-quote {
  margin-top: 2.2rem; padding: 1.4rem 1.8rem;
  border-left: 2px solid var(--gold);
  background: rgba(184,150,106,0.07);
}
.approach-inline-quote blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem; font-style: italic; font-weight: 300;
  color: var(--stone); line-height: 1.65; margin: 0 0 0.8rem;
}
.approach-inline-quote cite {
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); font-style: normal;
}

/* ═══════════════════════════════════════════════════════════
   APPROACH PAGE — CLOSING PROOF SECTION
═══════════════════════════════════════════════════════════ */

.approach-proof-section { padding: 5.5rem 0; background: var(--stone); }
.approach-proof-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.approach-proof-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 300;
  color: var(--cream); line-height: 1.2; margin-bottom: 2rem;
}
.approach-proof-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.12rem; font-style: italic; font-weight: 300;
  color: rgba(245,241,235,0.82); line-height: 1.72; margin-bottom: 1rem;
}
.approach-proof-cite {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); font-style: normal; display: block; margin-bottom: 2.2rem;
}
.approach-proof-sub {
  font-size: 0.85rem; color: rgba(245,241,235,0.38);
  line-height: 1.78; max-width: 500px; margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — EBOOK
═══════════════════════════════════════════════════════════ */

.ebook { padding: 7rem 0; background: var(--ink); position: relative; overflow: hidden; }
.ebook::before {
  content: ''; position: absolute; bottom: -150px; left: -150px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184,150,106,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.ebook-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 5rem; align-items: center; position: relative; z-index: 1; }
.ebook-cover { position: relative; display: flex; justify-content: center; }
.ebook-cover-inner {
  width: 220px; aspect-ratio: 2/3;
  background: linear-gradient(145deg, #2a2520 0%, #1a1714 100%);
  border: 1px solid rgba(184,150,106,0.3);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.4), 12px 12px 0 rgba(0,0,0,0.2), -2px 0 8px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 2rem 1.6rem; position: relative;
  transform: perspective(800px) rotateY(-8deg); transition: transform .4s;
}
.ebook-cover:hover .ebook-cover-inner { transform: perspective(800px) rotateY(-4deg) translateY(-4px); }
.ebook-cover-spine {
  position: absolute; left: -10px; top: 0; bottom: 0; width: 10px;
  background: linear-gradient(to right, #0e0c0a, #2a2520);
  border-left: 1px solid rgba(184,150,106,0.15);
}
.ebook-cover-rule { width: 100%; height: 1px; background: var(--gold); opacity: 0.4; }
.ebook-cover-tag { font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); opacity: 0.7; }
.ebook-cover-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem; font-weight: 400; line-height: 1.4;
  color: var(--cream); text-align: center; padding: 0.5rem 0;
}
.ebook-cover-title em { display: block; font-style: italic; color: var(--gold-lt); font-size: 1.2rem; }
.ebook-cover-author { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,241,235,0.35); text-align: center; }
.ebook-cover-badge {
  position: absolute; top: -12px; right: -12px;
  width: 52px; height: 52px; background: var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.5rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); text-align: center;
  line-height: 1.3; box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.ebook-content .section-tag { margin-bottom: 0.8rem; }
.ebook-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 300;
  line-height: 1.15; color: var(--cream); margin-bottom: 1.2rem;
}
.ebook-title em { font-style: italic; color: var(--gold-lt); }
.ebook-desc { font-size: 0.92rem; line-height: 1.8; color: rgba(245,241,235,0.55); margin-bottom: 2rem; max-width: 480px; }
.ebook-toc {
  list-style: none; margin-bottom: 2.4rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 2rem;
}
.ebook-toc li {
  font-size: 0.75rem; color: rgba(245,241,235,0.4);
  letter-spacing: 0.04em; padding-left: 1rem; position: relative; line-height: 1.5;
}
.ebook-toc li::before { content: '–'; position: absolute; left: 0; color: var(--gold); opacity: 0.6; }
.ebook-form { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.ebook-form input[type="email"] {
  flex: 1; min-width: 200px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(184,150,106,0.25);
  color: var(--cream); padding: 0.85rem 1.1rem;
  font-family: 'Jost', sans-serif; font-size: 0.85rem; font-weight: 300;
  border-radius: 2px; outline: none; transition: border-color .2s;
}
.ebook-form input::placeholder { color: rgba(245,241,235,0.2); }
.ebook-form input:focus { border-color: var(--gold); }
.ebook-disclaimer { font-size: 0.65rem; color: rgba(245,241,235,0.2); line-height: 1.6; margin-top: 0.8rem; width: 100%; }

/* ═══════════════════════════════════════════════════════════
   ARTICLE / RESOURCE PAGES
   (shared with articles.css — keep in sync)
═══════════════════════════════════════════════════════════ */

/* Search box */
.search-wrap {
  width: 100%; max-width: 520px; margin-top: 2.5rem; margin-bottom: 1rem; position: relative;
}
.search-input {
  width: 100%; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(184,150,106,0.35); color: var(--cream);
  padding: 0.95rem 3rem 0.95rem 1.2rem; font-family: 'Jost', sans-serif;
  font-size: 0.88rem; font-weight: 300; border-radius: 2px; outline: none;
  transition: border-color .2s, background .2s; letter-spacing: 0.03em;
}
.search-input::placeholder { color: rgba(245,241,235,0.25); }
.search-input:focus { border-color: var(--gold); background: rgba(255,255,255,0.09); }
.search-icon {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: rgba(184,150,106,0.5); pointer-events: none;
}
.search-clear {
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(184,150,106,0.5); font-size: 1.1rem;
  cursor: pointer; padding: 0; display: none; line-height: 1; transition: color .15s;
}
.search-clear:hover { color: var(--gold-lt); }
.search-clear.visible { display: block; }
.search-clear.visible + .search-icon { display: none; }
.search-status { font-size: 0.7rem; letter-spacing: 0.1em; color: rgba(245,241,235,0.3); margin-top: 0.6rem; min-height: 1.2em; }

/* Featured carousel */
.featured { padding: 5rem 0 0; background: var(--ink); }
.featured-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.4rem; }
.featured-arrows { display: flex; gap: 0.5rem; }
.carousel-arrow {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04); border: 1px solid var(--rule);
  color: var(--gold); font-size: 1.2rem; cursor: pointer; border-radius: 2px;
  transition: background .2s, color .2s; flex-shrink: 0;
}
.carousel-arrow:hover { background: rgba(184,150,106,0.1); color: var(--gold-lt); }
.carousel-arrow:disabled { color: rgba(184,150,106,0.2); cursor: default; }
.carousel-track-wrap { overflow: hidden; }
.carousel-track { display: flex; gap: 2px; transition: transform .4s cubic-bezier(.4,0,.2,1); }
.featured-card {
  flex: 0 0 100%; background: rgba(255,255,255,0.03);
  border-top: 2px solid var(--gold); display: grid; grid-template-columns: 380px 1fr;
  min-height: 340px; transition: background .25s;
  text-decoration: none; color: inherit; overflow: hidden;
}
.featured-card:hover { background: rgba(184,150,106,0.07); }
.featured-card-img {
  position: relative; background: rgba(255,255,255,0.03); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.6rem; border-right: 1px solid var(--rule); min-height: 280px;
}
.featured-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.featured-card:hover .featured-card-img img { transform: scale(1.03); }
.feat-img-icon { width: 36px; height: 36px; color: var(--gold); opacity: 0.2; z-index: 1; }
.feat-img-label { font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,241,235,0.2); z-index: 1; text-align: center; padding: 0 1rem; }
.featured-card-content { padding: 2.8rem 2.4rem 3rem; display: flex; flex-direction: column; }
.featured-card-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.card-category { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); padding: 0.25rem 0.7rem; border: 1px solid rgba(184,150,106,0.3); border-radius: 2px; }
.card-read-time { font-size: 0.62rem; color: rgba(245,241,235,0.25); }
.featured-card-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 400; line-height: 1.2; color: var(--cream); margin-bottom: 1.2rem; flex: 1; }
.featured-card-excerpt { font-size: 0.88rem; line-height: 1.82; color: rgba(245,241,235,0.4); margin-bottom: 1.8rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-read-link { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 0.5rem; transition: gap .2s; }
.featured-card:hover .card-read-link { gap: 0.8rem; }
.carousel-dots { display: flex; justify-content: center; gap: 6px; padding: 2rem 0 3rem; }
.carousel-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(184,150,106,0.25); border: none; cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.carousel-dot.active { background: var(--gold); transform: scale(1.3); }

/* Category nav */
.cat-nav { background: var(--stone); border-bottom: 1px solid var(--rule); position: sticky; top: 72px; z-index: 90; }
.cat-nav-inner { max-width: 1180px; margin: 0 auto; padding: 0; display: flex; align-items: stretch; }
.cat-nav-arrow { display: none; }
.cat-nav-label { display: none; }
.cat-nav-dots  { display: none; }
.cat-nav-track { display: flex; flex: 1; overflow-x: auto; scrollbar-width: none; padding: 0 6vw; }
.cat-nav-track::-webkit-scrollbar { display: none; }
.cat-btn { padding: 1rem 1.4rem; font-family: 'Jost', sans-serif; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,241,235,0.4); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: color .2s, border-color .2s; }
.cat-btn:hover { color: var(--gold-lt); }
.cat-btn.active { color: var(--gold-lt); border-bottom-color: var(--gold); }
.cat-nav-top { display: flex; align-items: center; gap: 0.4rem; padding: 0 1.2rem; margin-left: auto; flex-shrink: 0; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,241,235,0.3); text-decoration: none; border-left: 1px solid var(--rule); transition: color .2s; white-space: nowrap; }
.cat-nav-top:hover { color: var(--gold); }

/* Article grid */
.articles-section { padding: 6rem 0; background: var(--cream); }
.practice-group { margin-bottom: 5rem; }
.practice-group:last-child { margin-bottom: 0; }
.practice-group-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.practice-group-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 400; color: var(--ink); }
.practice-group-title em { font-style: italic; }
.view-all-link { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); text-decoration: none; display: flex; align-items: center; gap: 0.4rem; transition: gap .2s; }
.view-all-link:hover { gap: 0.7rem; }
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.article-card { background: var(--warm); border-top: 1px solid var(--rule); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: background .25s; position: relative; overflow: hidden; }
.article-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.article-card:hover { background: #e8e2d8; }
.article-card:hover::after { transform: scaleX(1); }
.article-card-img { width: 100%; aspect-ratio: 16/9; background: #e4ddd4; border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.4rem; flex-shrink: 0; }
.article-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.article-card:hover .article-card-img img { transform: scale(1.04); }
.art-img-icon { width: 28px; height: 28px; color: var(--gold); opacity: 0.25; z-index: 1; }
.art-img-label { font-size: 0.54rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); z-index: 1; opacity: 0.6; text-align: center; }
.article-card-body { padding: 1.8rem 1.8rem 2.2rem; display: flex; flex-direction: column; flex: 1; }
.article-card-meta { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.9rem; }
.article-category { font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.article-read-time { font-size: 0.6rem; color: var(--muted); }
.article-card-title { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 400; line-height: 1.3; color: var(--ink); margin-bottom: 0.8rem; flex: 1; }
.article-card-excerpt { font-size: 0.8rem; line-height: 1.78; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 1.2rem; }
.article-read-link { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 0.4rem; transition: gap .2s; }
.article-card:hover .article-read-link { gap: 0.7rem; }
.article-card.hidden, .practice-group.hidden { display: none; }

/* No results */
.no-results { display: none; padding: 4rem 0; text-align: center; }
.no-results.visible { display: block; }
.no-results-title { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 300; color: var(--ink); margin-bottom: 0.8rem; }
.no-results p { font-size: 0.88rem; color: var(--muted); line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════
   MOBILE BREAKPOINTS
═══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }

  /* Homepage */
  .services-grid { grid-template-columns: 1fr 1fr; }
  .service-card { border-right: none; border-bottom: 1px solid var(--rule); }
  .philosophy-grid { grid-template-columns: 1fr; gap: 3rem; }
  .distinction-layout { grid-template-columns: 1fr; gap: 3rem; }
  .distinction-pillars { grid-template-columns: 1fr !important; }
  .attorneys-grid { grid-template-columns: 1fr; }
  .ebook-grid { grid-template-columns: 1fr; gap: 3rem; }
  .ebook-toc { grid-template-columns: 1fr; }

  /* Shared */
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .form-row { grid-template-columns: 1fr; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
  .footer-contact { align-items: center; }
  .footer-links { align-items: center; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-disclaimer { text-align: center; }

  /* Articles */
  .featured-card { grid-template-columns: 1fr; }
  .featured-card-img { aspect-ratio: 16/9; min-height: unset; border-right: none; border-bottom: 1px solid var(--rule); }
  .articles-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr; }

  /* Category nav carousel */
  .cat-nav-inner { padding: 0; }
  .cat-nav-track { display: none; }
  .cat-nav-arrow { display: flex; align-items: center; justify-content: center; width: 44px; flex-shrink: 0; background: none; border: none; color: var(--gold); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: color .15s; }
  .cat-nav-arrow:disabled { color: rgba(184,150,106,0.2); cursor: default; }
  .cat-nav-label { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0.8rem 0.25rem; cursor: pointer; min-height: 52px; }
  .cat-nav-label-text { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-lt); text-align: center; white-space: nowrap; font-family: 'Jost', sans-serif; }
  .cat-nav-dots { display: flex; gap: 5px; align-items: center; }
  .cat-nav-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(184,150,106,0.3); transition: background .2s; }
  .cat-nav-dot.active { background: var(--gold); }

  .articles-grid { grid-template-columns: 1fr; }
  .cta-band-actions { flex-direction: column; width: 100%; }
  .btn-primary, .btn-ghost { text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — ADDITIONAL COMPONENTS
   Hero footer stats · Service card number · Ornament divider
═══════════════════════════════════════════════════════════ */

.hero-footer {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(184,150,106,0.15);
  padding: 1.6rem 8vw;
  display: flex; gap: 3rem; flex-wrap: wrap;
  opacity: 0; animation: fadeUp .8s .8s forwards;
}
.hero-stat { display: flex; flex-direction: column; gap: .25rem; }
.stat-n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem; font-weight: 400; color: var(--gold); line-height: 1;
}
.stat-label {
  font-size: 0.65rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(245,241,235,0.4);
}

.service-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.8rem; font-weight: 300; color: var(--rule); line-height: 1; margin-bottom: 1.4rem;
}

.ornament {
  text-align: center; color: var(--gold); opacity: 0.3;
  font-size: 1rem; letter-spacing: 0.5em; padding: 0.5rem 0;
}

/* ═══════════════════════════════════════════════════════════
   APPROACH PAGE
═══════════════════════════════════════════════════════════ */

.opening { padding: 7rem 0; background: var(--warm); }
.opening-grid { display: grid; grid-template-columns: 1fr 1.8fr; gap: 6rem; align-items: start; }
.opening-aside { position: sticky; top: 100px; }
.opening-pull {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 300; font-style: italic;
  line-height: 1.5; color: var(--stone); border-left: 2px solid var(--gold); padding-left: 1.8rem;
}
.opening-body p { font-size: 1rem; line-height: 1.9; color: var(--stone); margin-bottom: 1.5rem; }
.opening-body p:last-child { margin-bottom: 0; }

.different { padding: 7rem 0; background: var(--ink); }
.different-intro { max-width: 680px; margin-bottom: 4rem; }
.different-intro p { font-size: 1rem; line-height: 1.9; color: rgba(245,241,235,0.55); }
.different-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.different-card {
  padding: 3rem 2.4rem; background: rgba(255,255,255,0.02);
  border-top: 1px solid var(--rule); transition: background .25s;
}
.different-card:hover { background: rgba(184,150,106,0.06); }
.different-card-label {
  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.different-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-weight: 400; color: var(--cream); line-height: 1.2; margin-bottom: 1.1rem;
}
.different-card p { font-size: 0.88rem; line-height: 1.82; color: rgba(245,241,235,0.72); }

.pullquote-band {
  padding: 6rem 0; background: var(--stone);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center;
}
.pullquote-band blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 300; font-style: italic;
  line-height: 1.45; color: var(--cream); max-width: 820px; margin: 0 auto 1.6rem;
}
.pullquote-band blockquote em { color: var(--gold-lt); font-style: normal; }
.pullquote-band cite {
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); font-style: normal;
}

.pillars { padding: 7rem 0; background: var(--cream); }
.pillars-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: end; margin-bottom: 4rem; }
.pillars-intro p { font-size: 1rem; line-height: 1.9; color: var(--stone); }
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }

/* Approach-page pillar overrides (scoped to avoid conflict with homepage .pillar) */
.pillars-grid .pillar { padding: 3rem 2.4rem; border-top: 2px solid var(--gold); }
.pillars-grid .pillar-name { font-size: 1.6rem; font-weight: 400; }
.pillar-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem; font-weight: 300; color: var(--gold); opacity: 0.2; line-height: 1; margin-bottom: 1rem;
}
.pillar-body { font-size: 0.88rem; line-height: 1.85; color: var(--muted); }
.pillar-body p { margin-bottom: 0.9rem; }
.pillar-body p:last-child { margin-bottom: 0; }

.human { padding: 7rem 0; background: var(--warm); }
.human-grid { display: grid; grid-template-columns: 1.8fr 1fr; gap: 6rem; align-items: start; }
.human-body p { font-size: 1rem; line-height: 1.9; color: var(--stone); margin-bottom: 1.5rem; }
.human-body p:last-child { margin-bottom: 0; }
.human-aside { position: sticky; top: 100px; }
.human-stat {
  padding: 2.2rem 2rem; background: var(--ink);
  border-left: 2px solid var(--gold); margin-bottom: 2px;
}
.human-stat-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem; font-style: italic; font-weight: 300;
  line-height: 1.5; color: rgba(245,241,235,0.65);
}

.expect { padding: 7rem 0; background: var(--ink); }
.expect-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 3rem; }
.expect-step { padding: 2.8rem 2rem; border-top: 1px solid var(--rule); position: relative; }
.expect-step-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.8rem; font-weight: 300; color: var(--gold); opacity: 0.18; line-height: 1; margin-bottom: 1.2rem;
}
.expect-step-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem; font-weight: 400; color: var(--cream); margin-bottom: 0.9rem;
}
.expect-step p { font-size: 0.83rem; line-height: 1.8; color: rgba(245,241,235,0.4); }

.legacy { padding: 7rem 0; background: var(--ink); position: relative; overflow: hidden; }
.legacy::before {
  content: ''; position: absolute; top: -180px; right: -180px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184,150,106,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.legacy-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6rem;
  align-items: center; position: relative; z-index: 1;
}
.legacy-left .section-tag { margin-bottom: 0.8rem; }
.legacy-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 300;
  line-height: 1.15; color: var(--cream); margin-bottom: 2rem;
}
.legacy-headline em { font-style: italic; color: var(--gold-lt); }
.legacy-body p { font-size: 1rem; line-height: 1.9; color: rgba(245,241,235,0.55); margin-bottom: 1.4rem; }
.legacy-body p:last-child { margin-bottom: 0; }
.legacy-right { display: flex; flex-direction: column; gap: 2px; }
.legacy-card {
  padding: 2.2rem 2rem; border-left: 2px solid rgba(184,150,106,0.25); transition: border-color .25s;
}
.legacy-card:hover { border-color: var(--gold); }
.legacy-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; font-weight: 400; color: var(--cream); margin-bottom: 0.6rem;
}
.legacy-card p { font-size: 0.84rem; line-height: 1.8; color: rgba(245,241,235,0.4); }

@media (max-width: 900px) {
  .opening-grid, .human-grid, .pillars-intro, .legacy-grid { grid-template-columns: 1fr; gap: 3rem; }
  .opening-aside, .human-aside { position: static; }
  .different-grid { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: 1fr; }
  .expect-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .expect-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   ATTORNEYS PAGE
═══════════════════════════════════════════════════════════ */

.photo-slot {
  width: 100%; aspect-ratio: 4 / 5; background: var(--stone);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.8rem; border-bottom: 1px solid var(--rule);
  position: relative; overflow: hidden;
}
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slot-icon { width: 40px; height: 40px; color: var(--gold); opacity: 0.2; }
.photo-slot-label {
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,241,235,0.2); text-align: center;
}
.photo-slot-dark { background: rgba(255,255,255,0.03); }

/* Per-attorney framing. The headshots are native 3:2 landscape, so a portrait
   slot crops the sides — these nudge the crop onto the face. Adjust if a
   photograph is ever re-shot or replaced. */
.photo-slot img[src*="headshot-boyd"]     { object-position: 48% 30%; }
.photo-slot img[src*="headshot-baker"]    { object-position: 47% 28%; }
.photo-slot img[src*="headshot-walthour"] { object-position: 52% 28%; }

.attorneys-section { padding: 7rem 0; background: var(--stone); }
.attorneys-section .attorneys-grid { margin-top: 3.5rem; }

/* Override shared .attorney-card padding — attorneys page wraps content in .attorney-card-body */
.attorneys-section .attorney-card { padding: 0; border-top: none; background: rgba(255,255,255,0.02); }
.attorney-card-body { padding: 2.4rem 2rem 2.8rem; }
.attorneys-section .attorney-initial { font-size: 2.8rem; opacity: 0.18; margin-bottom: 1rem; }
.attorneys-section .attorney-name { margin-bottom: 0.3rem; line-height: 1.2; }
.attorneys-section .attorney-role { font-size: 0.62rem; letter-spacing: 0.18em; margin-bottom: 1.6rem; }
.attorneys-section .attorney-bio { font-size: 0.86rem; line-height: 1.85; margin-bottom: 1.8rem; }

.attorney-details {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding-top: 1.4rem; border-top: 1px solid var(--rule);
}
.attorney-detail { display: flex; gap: 0.8rem; align-items: baseline; }
.attorney-detail-label {
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); opacity: 0.7; min-width: 56px; padding-top: 1px;
}
.attorney-detail-val { font-size: 0.78rem; color: rgba(245,241,235,0.35); line-height: 1.5; }

.philosophy-band {
  padding: 6rem 0; background: var(--warm);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.philosophy-band-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 6rem; align-items: center; }
.philosophy-band-pull {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 300; font-style: italic;
  line-height: 1.5; color: var(--stone); border-left: 2px solid var(--gold); padding-left: 1.8rem;
}
.philosophy-band-body p { font-size: 0.95rem; line-height: 1.9; color: var(--stone); margin-bottom: 1.2rem; }
.philosophy-band-body p:last-child { margin-bottom: 0; }

.team-section { padding: 7rem 0; background: var(--cream); }
.team-intro { max-width: 680px; margin-bottom: 4rem; }
.team-intro p { font-size: 1rem; line-height: 1.9; color: var(--stone); margin-bottom: 1.2rem; }
.team-intro p:last-child { margin-bottom: 0; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.team-card {
  padding: 2.6rem 2rem; background: var(--warm);
  border-top: 1px solid var(--rule); transition: background .25s;
}
.team-card:hover { background: #e8e2d8; }
.team-photo-slot {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--warm); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.4rem; overflow: hidden;
}
.team-photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.team-photo-icon { width: 28px; height: 28px; color: var(--gold); opacity: 0.3; }
.team-member-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem; font-weight: 400; color: var(--ink); margin-bottom: 0.25rem;
}
.team-member-role {
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.2rem;
}
.team-member-bio { font-size: 0.83rem; line-height: 1.8; color: var(--muted); }

.values-section { padding: 6rem 0; background: var(--ink); }
.values-intro { max-width: 600px; margin-bottom: 3.5rem; }
.values-intro p { font-size: 0.95rem; line-height: 1.9; color: rgba(245,241,235,0.5); }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.value-card { padding: 2.4rem 1.8rem; border-top: 1px solid var(--rule); }
.value-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; font-weight: 400; color: var(--cream); margin-bottom: 0.8rem;
}
.value-card p { font-size: 0.8rem; line-height: 1.8; color: rgba(245,241,235,0.35); }

@media (max-width: 900px) {
  .attorneys-section .attorneys-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .philosophy-band-grid { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 580px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   SERVICES PAGE
═══════════════════════════════════════════════════════════ */

.jump-nav {
  background: var(--stone); border-bottom: 1px solid var(--rule);
  position: sticky; top: 72px; z-index: 90;
}
.jump-nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 6vw; display: flex; align-items: stretch;
}
.jump-nav-arrow { display: none; }
.jump-nav-label { display: none; }
.jnav-dots { display: none; }
.jump-nav-track { display: flex; flex: 1; overflow-x: auto; scrollbar-width: none; }
.jump-nav-track::-webkit-scrollbar { display: none; }
.jump-nav a {
  display: block; padding: 1.1rem 1.6rem;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,241,235,0.45); text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.jump-nav a:hover { color: var(--gold-lt); border-bottom-color: var(--gold); }

.practices-page { padding: 7rem 0; background: var(--cream); }
.practices-layout { display: grid; grid-template-columns: 280px 1fr; gap: 6rem; align-items: start; }
.practices-sidebar { position: sticky; top: 130px; align-self: start; }
.sidebar-practice { padding: 1.6rem 0; border-top: 1px solid var(--rule); cursor: pointer; }
.sidebar-practice:last-of-type { border-bottom: 1px solid var(--rule); }
.sidebar-practice-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem; font-weight: 400; color: var(--muted);
  line-height: 1.2; transition: color .2s; text-decoration: none; display: block;
}
.sidebar-practice-title:hover, .sidebar-practice-title.active { color: var(--ink); }
.sidebar-practice-title.active { color: var(--gold); }
.sidebar-cta-box {
  margin-top: 2.4rem; padding: 1.6rem; background: var(--ink); border-left: 2px solid var(--gold);
}
.sidebar-cta-box p { font-size: 0.8rem; line-height: 1.7; color: rgba(245,241,235,0.5); margin-bottom: 1.1rem; }

.practices-body { display: flex; flex-direction: column; gap: 0; }
.practice-entry { padding: 4rem 0; border-top: 1px solid var(--rule); }
.practice-entry:first-child { padding-top: 0; border-top: none; }
.practice-entry-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 300;
  line-height: 1.15; color: var(--ink); margin-bottom: 1.8rem;
}
.practice-entry-title em { font-style: italic; }
.practice-entry p { font-size: 1rem; line-height: 1.88; color: var(--stone); margin-bottom: 1.4rem; }
.practice-entry p:last-of-type { margin-bottom: 0; }
.practice-topics { margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--rule); }
.practice-topics-label {
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem;
}
.practice-topics-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem;
}
.topic-tag {
  font-size: 0.75rem; color: var(--stone); padding: 0.5rem 0.9rem;
  background: rgba(184,150,106,0.08); border: 1px solid var(--rule);
  border-radius: 2px; letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .practices-layout { grid-template-columns: 1fr; gap: 3rem; }
  .practices-sidebar { position: static; }
}
@media (max-width: 600px) {
  .jump-nav-inner { padding: 0; }
  .jump-nav-track { display: none; }
  .jump-nav-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 52px; flex-shrink: 0; background: none; border: none;
    color: var(--gold); font-size: 1.6rem; line-height: 1; cursor: pointer; transition: color .15s;
  }
  .jump-nav-arrow:disabled { color: rgba(184,150,106,0.2); cursor: default; }
  .jump-nav-label {
    display: flex; flex: 1; flex-direction: column; align-items: center;
    justify-content: center; gap: 6px; padding: 0.8rem 0.25rem;
  }
  .jump-nav-label-text {
    font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold-lt); text-align: center; white-space: nowrap;
  }
  .jnav-dots { display: flex; gap: 5px; align-items: center; }
  .jnav-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: rgba(184,150,106,0.3); transition: background .2s;
  }
  .jnav-dot.active { background: var(--gold); }
  .practice-topics-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   GUIDE PAGE
   (body.guide-page scopes the narrower max-width)
═══════════════════════════════════════════════════════════ */

body.guide-page .section-inner { max-width: 1080px; }

.guide-hero {
  background: var(--ink); padding: 10rem 6vw 7rem; position: relative; overflow: hidden;
}
.guide-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to right, transparent 0, transparent calc(100% / 12 - 1px),
    rgba(184,150,106,0.04) calc(100% / 12 - 1px), rgba(184,150,106,0.04) calc(100% / 12)
  );
}
.guide-hero::after {
  content: ''; position: absolute; bottom: -200px; right: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184,150,106,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.guide-hero-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 380px; gap: 6rem; align-items: center;
  position: relative; z-index: 1;
}
.guide-hero-left { opacity: 0; animation: fadeUp .8s .2s forwards; }
.guide-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); display: flex; align-items: center; gap: 1rem; margin-bottom: 1.8rem;
}
.guide-eyebrow::before { content: ''; display: block; width: 40px; height: 1px; background: var(--gold); }
.guide-hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 300;
  line-height: 1.08; color: var(--cream); margin-bottom: 1.8rem;
}
.guide-hero-title em { font-style: italic; color: var(--gold-lt); }
.guide-hero-sub {
  font-size: 1rem; line-height: 1.85; color: rgba(245,241,235,0.55);
  margin-bottom: 2.4rem; max-width: 520px;
}
.guide-hero-bullets { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.guide-hero-bullets li {
  font-size: 0.85rem; color: rgba(245,241,235,0.5); display: flex; align-items: baseline; gap: 0.75rem;
}
.guide-hero-bullets li::before { content: '—'; color: var(--gold); flex-shrink: 0; font-size: 0.75rem; }

.guide-cover-wrap { opacity: 0; animation: fadeUp .9s .4s forwards; display: flex; justify-content: center; }
.guide-cover {
  width: 220px; aspect-ratio: 2/3;
  background: linear-gradient(150deg, #2a2520 0%, #1a1714 100%);
  border: 1px solid rgba(184,150,106,0.3);
  box-shadow: 8px 8px 0 rgba(0,0,0,0.45), 16px 16px 0 rgba(0,0,0,0.2);
  display: flex; flex-direction: column; justify-content: space-between; padding: 2rem 1.6rem;
  position: relative; transform: perspective(800px) rotateY(-6deg); transition: transform .4s;
}
.guide-cover-wrap:hover .guide-cover { transform: perspective(800px) rotateY(-2deg) translateY(-4px); }
.guide-cover-spine {
  position: absolute; left: -10px; top: 0; bottom: 0; width: 10px;
  background: linear-gradient(to right, #0e0c0a, #2a2520);
  border-left: 1px solid rgba(184,150,106,0.12);
}
.guide-cover-badge {
  position: absolute; top: -14px; right: -14px; width: 58px; height: 58px; border-radius: 50%;
  background: var(--gold); display: flex; align-items: center; justify-content: center;
  font-size: 0.48rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); text-align: center; line-height: 1.4;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
.guide-cover-rule { width: 100%; height: 1px; background: var(--gold); opacity: 0.4; }
.guide-cover-tag { font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); opacity: 0.7; }
.guide-cover-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem; font-weight: 400; line-height: 1.4; color: var(--cream); text-align: center; padding: 0.4rem 0;
}
.guide-cover-title em { display: block; font-style: italic; color: var(--gold-lt); font-size: 1.2rem; }
.guide-cover-author {
  font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,241,235,0.3); text-align: center;
}

.guide-chapters { padding: 7rem 0; background: var(--warm); }
.guide-chapters-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; margin-top: 3rem; }
.guide-chapters-intro p { font-size: 1rem; line-height: 1.9; color: var(--stone); margin-bottom: 1.4rem; }
.guide-chapters-intro p:last-child { margin-bottom: 0; }
.chapter-list { display: flex; flex-direction: column; gap: 2px; }
.chapter-item {
  padding: 1.4rem 1.6rem; background: var(--cream);
  border-left: 2px solid transparent; transition: border-color .2s, background .2s;
}
.chapter-item:hover { border-left-color: var(--gold); background: #f0ebe2; }
.chapter-part {
  font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.3rem;
}
.chapter-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem; font-weight: 400; color: var(--ink); line-height: 1.3;
}
.chapter-desc { font-size: 0.78rem; line-height: 1.7; color: var(--muted); margin-top: 0.4rem; }

.guide-form-section { padding: 7rem 0; background: var(--ink); position: relative; overflow: hidden; }
.guide-form-section::before {
  content: ''; position: absolute; top: -180px; left: -180px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184,150,106,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.guide-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; position: relative; z-index: 1; }
.guide-form-left .section-tag { margin-bottom: 1rem; }
.guide-form-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 300;
  line-height: 1.15; color: var(--cream); margin-bottom: 1.4rem;
}
.guide-form-headline em { font-style: italic; color: var(--gold-lt); }
.guide-form-note { font-size: 0.88rem; line-height: 1.85; color: rgba(245,241,235,0.45); margin-bottom: 2.4rem; }
.guide-assurances { display: flex; flex-direction: column; gap: 1rem; }
.guide-assurance { display: flex; gap: 1rem; align-items: flex-start; }
.guide-assurance-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold); margin-top: 1px; }
.guide-assurance p { font-size: 0.8rem; line-height: 1.7; color: rgba(245,241,235,0.4); }

.guide-form { background: rgba(255,255,255,0.03); border: 1px solid var(--rule); padding: 2.8rem 2.4rem; }
.guide-form-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem; font-weight: 400; color: var(--cream); margin-bottom: 0.4rem;
}
.guide-form-subtitle { font-size: 0.75rem; color: rgba(245,241,235,0.35); margin-bottom: 2rem; line-height: 1.5; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.form-field label {
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,241,235,0.4);
}
.form-field input {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(184,150,106,0.2); color: var(--cream);
  padding: 0.85rem 1rem; font-family: 'Jost', sans-serif; font-size: 0.88rem; font-weight: 300;
  border-radius: 2px; outline: none; transition: border-color .2s; width: 100%;
}
.form-field input::placeholder { color: rgba(245,241,235,0.18); }
.form-field input:focus { border-color: var(--gold); }
.guide-submit {
  width: 100%; margin-top: 0.5rem;
  background: var(--gold); color: var(--ink); border: none;
  padding: 1rem 2rem; font-family: 'Jost', sans-serif;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; border-radius: 2px; cursor: pointer;
  transition: background .2s, transform .15s;
}
.guide-submit:hover { background: var(--gold-lt); transform: translateY(-1px); }
.guide-submit:disabled { background: #5a7a5a; cursor: default; transform: none; }
.guide-form-disclaimer { font-size: 0.63rem; line-height: 1.6; color: rgba(245,241,235,0.2); margin-top: 1rem; }
.guide-success { display: none; text-align: center; padding: 2rem 1rem; }
.guide-success-icon { width: 48px; height: 48px; color: var(--gold); margin: 0 auto 1.2rem; }
.guide-success h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-weight: 400; color: var(--cream); margin-bottom: 0.8rem;
}
.guide-success p { font-size: 0.82rem; line-height: 1.75; color: rgba(245,241,235,0.4); }

.for-whom { padding: 6rem 0; background: var(--cream); }
.for-whom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 3rem; }
.for-whom-card {
  padding: 2.4rem 1.8rem; background: var(--warm);
  border-top: 1px solid var(--rule); transition: background .25s;
}
.for-whom-card:hover { background: #e8e2d8; }
.for-whom-area {
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem;
}
.for-whom-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; font-weight: 400; color: var(--ink); margin-bottom: 0.7rem;
}
.for-whom-card p { font-size: 0.8rem; line-height: 1.8; color: var(--muted); }

@media (max-width: 900px) {
  .guide-hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .guide-cover-wrap { order: -1; }
  .guide-cover { width: 160px; margin: 0 auto; }
  .guide-chapters-grid, .guide-form-grid { grid-template-columns: 1fr; gap: 3rem; }
  .for-whom-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .for-whom-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ARTICLE PAGES  (articles/*.html)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Article hero ──────────────────────────────────────────────────── */
.article-hero {
  padding: 9rem 0 5rem;
  background: var(--ink);
  border-bottom: 1px solid rgba(197,165,114,0.15);
}
.article-hero-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 2rem;
}
.article-category-tag {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.article-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.2;
  color: var(--cream);
  margin-bottom: 1.2rem;
}
.article-hero h1 em {
  font-style: italic;
  color: var(--gold);
}
.article-meta {
  font-size: 0.75rem;
  color: rgba(245,241,235,0.45);
  letter-spacing: 0.06em;
}
.article-meta span + span::before {
  content: ' · ';
}

/* ── Article lead image ────────────────────────────────────────────── */
.article-lead-image {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .article-lead-image { height: 240px; }
}

/* ── Service card image (homepage tiles) ───────────────────────────── */
/* Negative margins bleed the image to the card edges, overriding the
   card's 2.8rem top / 2rem side padding so it fills edge-to-edge.     */
.service-card-img {
  display: block;
  width: calc(100% + 4rem);
  margin: -2.8rem -2rem 1.8rem;
  height: 180px;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity .35s;
}
.service-card:hover .service-card-img { opacity: 1; }

/* ── Practice entry image (individual practice area pages) ─────────── */
.practice-entry-img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .practice-entry-img { height: 190px; }
}

/* ── Practice page lead image (individual landing pages) ───────────── */
.practice-page-lead-image {
  display: block;
  width: 100%;
  height: 380px;
  object-fit: cover;
}
@media (max-width: 768px) {
  .practice-page-lead-image { height: 220px; }
}

/* ── Article body ──────────────────────────────────────────────────── */
.article-body-wrap {
  background: var(--cream);
  padding: 5rem 0 6rem;
}
.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 2rem;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.85;
}
.article-body h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--ink);
  margin: 2.8rem 0 0.8rem;
  border-top: 1px solid var(--rule);
  padding-top: 2rem;
}
.article-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ink);
  margin: 1.8rem 0 0.5rem;
}
.article-body p {
  margin-bottom: 1.3rem;
}
.article-body ul,
.article-body ol {
  margin: 0 0 1.3rem 1.4rem;
  padding: 0;
}
.article-body li {
  margin-bottom: 0.5rem;
  line-height: 1.75;
}
.article-body strong {
  font-weight: 500;
  color: var(--ink);
}
.article-body a {
  color: var(--gold-dark, #a8832a);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.article-body a:hover {
  color: var(--ink);
}

/* ── Disclaimer ────────────────────────────────────────────────────── */
.article-disclaimer {
  margin-top: 3.5rem;
  padding: 1.4rem 1.6rem;
  background: rgba(197,165,114,0.08);
  border-left: 3px solid var(--gold);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ── Back link ─────────────────────────────────────────────────────── */
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  margin-bottom: 2rem;
}
.article-back:hover { color: var(--ink); }
.article-back svg { flex-shrink: 0; }

/* ── Related articles strip ────────────────────────────────────────── */
.article-related {
  background: var(--ink);
  padding: 4rem 0 5rem;
  border-top: 1px solid rgba(197,165,114,0.15);
}
.article-related-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem;
}
.article-related-label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2rem;
}
.article-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
}
.article-related-card {
  background: rgba(255,255,255,0.03);
  padding: 1.8rem 1.6rem;
  text-decoration: none;
  border-top: 1px solid rgba(197,165,114,0.2);
  transition: background .2s;
}
.article-related-card:hover { background: rgba(255,255,255,0.06); }
.article-related-card-cat {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.article-related-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--cream);
  line-height: 1.35;
  margin: 0 0 0.5rem;
}
.article-related-card p {
  font-size: 0.75rem;
  line-height: 1.7;
  color: rgba(245,241,235,0.45);
  margin: 0;
}

@media (max-width: 900px) {
  .article-related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 580px) {
  .article-hero { padding: 7rem 0 3.5rem; }
  .article-body-wrap { padding: 3.5rem 0 4rem; }
  .article-related-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════
   REVIEWS PAGE  (reviews.html)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Rating summary bar ─────────────────────────────────────────────── */
.reviews-summary {
  background: var(--ink);
  border-bottom: 1px solid rgba(197,165,114,0.18);
  padding: 2.8rem 0;
}
.reviews-summary-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 6vw;
  display: flex; align-items: center;
  justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   OFFICE & PAYMENTS PAGE  (office.html)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Location section ───────────────────────────────────────────────── */
.office-location {
  background: var(--ink);
  padding: 0;
}
/* Two columns since 2026-09-10: the storefront photo became the page hero and the
   map moved to the foot of the page, leaving facts on the left and visiting on the
   right. .office-storefront is no longer used on this page — the rule is kept further
   down in case the photo is ever wanted inline again. */
.office-location-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 520px;
}
.office-location-inner > .office-info:first-child { border-right: 1px solid var(--rule); }
@media (max-width: 860px) {
  .office-location-inner { grid-template-columns: 1fr; }
  .office-location-inner > .office-info:first-child {
    border-right: none; border-bottom: 1px solid var(--rule);
  }
  .office-info { padding: 3rem 2rem; }
}
.office-map-wrap {
  position: relative; overflow: hidden;
  min-height: 420px;
  border-right: 1px solid var(--rule);
}
.office-map-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none; filter: grayscale(0.3) contrast(0.95);
}

/* ── Info column ────────────────────────────────────────────────────── */
.office-info {
  padding: 4rem 4rem 4rem 4rem;
  display: flex; flex-direction: column;
}
.office-info-block {
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
}
.office-info-block:last-child { border-bottom: none; }
.office-info-label {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.6rem;
}
.office-info-value {
  font-size: 0.95rem; line-height: 1.75;
  color: rgba(245,241,235,0.8);
}
.office-info-value a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(184,150,106,0.3);
  transition: border-color .2s, color .2s;
}
.office-info-value a:hover { color: var(--gold-lt); border-color: var(--gold); }
.office-info-note {
  font-size: 0.75rem; color: rgba(245,241,235,0.3);
  margin-top: 0.35rem; line-height: 1.6;
}
.office-directions-link {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 0.9rem;
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  transition: color .2s;
}
.office-directions-link:hover { color: var(--gold-lt); }

/* ── Hours grid ─────────────────────────────────────────────────────── */
.office-hours-grid {
  display: grid; grid-template-columns: auto 1fr;
  gap: 0.3rem 1.4rem; margin-top: 0.4rem;
}
.office-hours-day  { font-size: 0.82rem; color: rgba(245,241,235,0.5); }
.office-hours-time { font-size: 0.82rem; color: rgba(245,241,235,0.8); }

/* ── Payment section ────────────────────────────────────────────────── */
.office-payment {
  background: var(--cream);
  padding: 6rem 0 4rem;
}
.office-payment-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 6vw;
}
.office-payment-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; margin-top: 3rem;
}

/* ── Payment methods ────────────────────────────────────────────────── */
.payment-methods-list {
  margin-top: 2rem;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule);
}
.payment-method-item {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.88rem; color: var(--ink);
}
.payment-method-item svg { color: var(--gold); flex-shrink: 0; }

/* ── Fee structure ──────────────────────────────────────────────────── */
.payment-fees { padding-top: 0; }
.payment-fee-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.payment-fee-item:first-child { border-top: 1px solid var(--rule); margin-top: 2rem; }
.payment-fee-label {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.5rem;
}
.payment-fee-desc {
  font-size: 0.85rem; line-height: 1.8; color: var(--muted);
}

/* ── LawPay CTA ─────────────────────────────────────────────────────── */
.lawpay-cta {
  margin-top: 4rem; padding: 2.4rem 2.8rem;
  background: var(--stone);
  border-top: 2px solid var(--gold);
  display: flex; align-items: center;
  justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.lawpay-cta-text h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem; font-weight: 300;
  color: var(--cream); margin-bottom: 0.3rem;
}
.lawpay-cta-text p {
  font-size: 0.82rem; color: rgba(245,241,235,0.4);
  line-height: 1.7; margin: 0;
}
.btn-lawpay {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 2rem;
  background: var(--gold); color: var(--ink);
  font-family: 'Jost', sans-serif;
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500; text-decoration: none; border-radius: 2px;
  transition: background .2s, transform .15s;
  flex-shrink: 0;
}
.btn-lawpay:hover { background: var(--gold-lt); transform: translateY(-1px); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .office-location-inner  { grid-template-columns: 1fr; }
  .office-storefront      { height: 300px; border-right: none; border-bottom: 1px solid var(--rule); }
  .office-map-wrap        { min-height: 300px; border-right: none; border-bottom: 1px solid var(--rule); }
  .office-info            { padding: 3rem 6vw; }
  .office-payment-grid    { grid-template-columns: 1fr; gap: 2rem; }
  .lawpay-cta             { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 580px) {
  .office-info  { padding: 2.5rem 5vw; }
  .lawpay-cta   { padding: 2rem; }
  .btn-lawpay   { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   OFFICE PHOTOGRAPHY — added Sept 2026
   Files live in images/office/web/ (resized for the web).
   Camera originals stay in images/office/ and are not uploaded.
═══════════════════════════════════════════════════════════ */

/* ── Homepage: portrait above the philosophy pull-quote ── */
.philosophy-portrait {
  width: 100%; aspect-ratio: 4 / 5;
  margin-bottom: 1.8rem; overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.philosophy-portrait img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 26%;
  filter: grayscale(0.35);
}

/* ── Homepage: consultation photo in "What happens when you call" ── */
.process-photo {
  margin: 3.5rem 0 0; position: relative;
  border-top: 1px solid var(--rule);
}
.process-photo img {
  width: 100%; max-width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9; object-fit: cover; object-position: center 42%;
}
.process-photo figcaption {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); padding-top: 0.9rem;
}
@media (max-width: 640px) {
  .process-photo img { aspect-ratio: 4 / 3; }
}

/* ── Attorneys page: full team band ── */
.staff-band {
  margin: 0; background: var(--ink);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.staff-band img {
  width: 100%; max-width: 100%; height: auto; display: block;
  aspect-ratio: 12 / 5; object-fit: cover; object-position: center 42%;
}
.staff-band figcaption {
  max-width: 1180px; margin: 0 auto;
  padding: 1.2rem 6vw 1.6rem;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
}
@media (max-width: 700px) {
  .staff-band img { aspect-ratio: 4 / 3; }
}

/* ── Office page: storefront paired with the map ── */
.office-storefront {
  position: relative; overflow: hidden;
  border-right: 1px solid var(--rule);
  /* The photograph is natively 2:3, so this shows it whole. align-self keeps it
     from stretching to match the much taller info column beside it. */
  align-self: start; aspect-ratio: 2 / 3;
}
.office-storefront img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
}
.office-storefront figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.8rem 1.4rem;
  background: linear-gradient(to top, rgba(20,18,16,0.92), transparent);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream);
}

/* ── Office page: waiting room ── */
.office-room {
  margin: 1.4rem 0 0; overflow: hidden;
  border: 1px solid var(--rule);
}
.office-room img {
  width: 100%; max-width: 100%; height: auto; display: block;
  aspect-ratio: 3 / 2; object-fit: cover;
}
.office-room figcaption {
  font-size: 0.72rem; line-height: 1.7; color: var(--muted);
  padding: 0.9rem 1.1rem 1rem; background: rgba(255,255,255,0.02);
}

/* ── Office page: the front-desk signage band ──
   REWRITTEN 2026-09-10. It was `height: 220px` with `cover`, which is the fixed-height
   trap: the taller the viewport gets the SHORTER the visible slice of the photo becomes
   in proportion. At 1440px it showed y 44.7%-67.6% of the frame, at 1920px y 48%-65%.
   The logo sits at roughly y 12%-35%, so it was cropped out at every single width and
   the band displayed a planter rim and a pen cup instead.

   aspect-ratio ties the crop to the image, not the viewport, so the framing is now
   identical everywhere. 10/3 against the photo's native 3/2 shows 45% of its height;
   object-position 9% puts that window at y 5%-50% — the logo with headroom above and
   the planter beside it. Verified by simulating the exact cover crop at 4 ratios.
   max-width is the image's native 1600px so it is never upscaled; the dark ground
   fills the margin on wider screens.
   height:auto is REQUIRED or the width/height attributes on the <img> beat aspect-ratio. */
.detail-band {
  margin: 0; width: 100%; background: #1e1b18;
  display: flex; justify-content: center;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.detail-band img {
  width: 100%; max-width: 1600px; height: auto; display: block;
  aspect-ratio: 10 / 3;
  object-fit: cover; object-position: center 9%;
}
/* On a phone the band would be only ~120px tall at 10/3 and the signage would read as a
   smudge. 3/2 is the photograph's own ratio, so the whole frame shows, uncropped. */
@media (max-width: 700px) {
  .detail-band img { aspect-ratio: 3 / 2; object-position: center; }
}

/* ── Approach page: portrait beside the pull-quote ── */
.approach-portrait-band {
  background: var(--stone);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.approach-portrait-grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  align-items: center; gap: 0;
}
.approach-portrait-grid figure { margin: 0; align-self: stretch; }
.approach-portrait-grid img {
  width: 100%; height: 100%; max-width: 100%; display: block;
  aspect-ratio: 2 / 3; object-fit: cover; object-position: center 45%;
}
.approach-portrait-text {
  padding: 4rem 6vw;
}
.approach-portrait-text blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem); font-weight: 300; font-style: italic;
  line-height: 1.45; color: var(--cream); margin: 0 0 1.6rem;
}
.approach-portrait-text blockquote em { color: var(--gold-lt); font-style: normal; }
.approach-portrait-text cite {
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); font-style: normal;
}
@media (max-width: 820px) {
  .approach-portrait-grid { grid-template-columns: 1fr; }
  /* This band moved to index.html on 2026-09-10 and now carries the firm's lead
     photograph, so the mobile crop matters more than it did. The source is 1067x1600
     portrait; 4/3 cut the attorneys off at the knees and left dead brick above.
     4/5 at 45% keeps all three figures whole, their feet, the hanging B sign and the
     receding sidewalk. Compared against 4/3@55% and 1/1@42% before choosing. */
  .approach-portrait-grid img { aspect-ratio: 4 / 5; object-position: center 45%; }
  .approach-portrait-text { padding: 3rem 6vw 3.5rem; }
}

/* Reduced motion is about MOVEMENT, not about change. The part of this
   sequence that can actually cause discomfort is the 7% zoom on the
   photograph and the 20px rise on the text — not the tonal settle, which
   is only a slow crossfade. So rather than switch the whole opening off,
   drop the movement, shorten the timings, and keep the fade. Everything
   below derives from the three variables on .hero, so redefining them
   here retimes the entire sequence in one place. */
@media (prefers-reduced-motion: reduce) {
  .hero {
    --hero-hold: 0.8s;
    --hero-fall: 2.2s;
    --hero-cue:  0.8s;
  }
  /* Keep the recede, just make it a drift rather than a zoom. 3% over
     2.2s reads as depth without being the kind of movement this media
     query exists to suppress. Set --hero-drift to 1 for none at all,
     or to 1.07 to match the full-motion version exactly. */
  .hero::before { --hero-drift: 1.03; }
  .hero-eyebrow, .hero-headline, .hero-sub, .hero-actions, .hero-inner > p {
    animation-name: heroTextStill !important;   /* fade only, no rise */
  }
}
@keyframes heroTextStill {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — SECONDARY HERO  (added Sept 2026)
   Replaces the old .office-band. The photograph runs clean with NO text
   overlay: the window behind the attorneys already carries the firm name,
   all three attorney names and the phone number in gold lettering, and an
   overlaid headline competes with type that is already in the frame.
   The words live in the band beneath, on the same dark ground.

   FRAMING: the file is 1600x1067 (3:2). aspect-ratio 16/10 shows ~94% of
   its height — about 3% trimmed top and bottom, which is empty brick above
   and sidewalk below. Do NOT go wider: at 21/9 the gold lettering is cut.
   height:auto is required, or the width/height attributes on the <img>
   override aspect-ratio. See project_photos memory.
═══════════════════════════════════════════════════════════ */

.secondary-hero { width: 100%; background: var(--ink); }
.secondary-hero > img {
  width: 100%; max-width: 1400px; height: auto; display: block;
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  object-fit: cover; object-position: center 50%;
}
.secondary-hero-band {
  background: var(--ink);
  padding: 3.5rem 6vw 4rem;
  border-top: 1px solid rgba(184,150,106,0.18);
}
.secondary-hero-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.secondary-hero-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.4rem;
}
.secondary-hero-kicker {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 400; font-style: italic;
  color: var(--cream); line-height: 1.35; margin-bottom: 1.6rem;
  text-wrap: balance;
}
.secondary-hero-quote {
  font-size: 0.95rem; line-height: 1.9; color: rgba(245,241,235,0.72);
  margin: 0 0 1.2rem; font-style: normal;
}
.secondary-hero-cite {
  font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,241,235,0.45); font-style: normal;
}
@media (max-width: 640px) {
  .secondary-hero > img { aspect-ratio: 4 / 3; }
  .secondary-hero-band { padding: 2.6rem 1.4rem 3rem; }
}

/* ── Commitments sidebar: now holds the Boyd portrait + pull-quote ──
   Moved here from the deleted PHILOSOPHY section. The sidebar was
   position:sticky, which is wrong once it carries a tall portrait — it
   would outrun the viewport. */
.distinction-sidebar { position: static; }
.distinction-sidebar .philosophy-portrait { margin-bottom: 1.6rem; }
.distinction-sidebar .philosophy-quote { border-left: 2px solid var(--gold); padding-left: 1.6rem; }
.distinction-sidebar .quote-text { font-size: clamp(1.15rem, 1.7vw, 1.45rem); margin-bottom: 1rem; }

/* Replaces the removed .distinction-voices block */
.distinction-links {
  margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
}
.distinction-links a {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color .2s;
}
.distinction-links a:hover { color: var(--gold); }

/* ── Conference room as the ground for the contact block (Sept 2026) ──
   Was a discrete portrait figure in the left column. As a background it solves two
   problems at once: the delivered frame is ~3 stops underexposed and noisy, which does
   not matter at texture opacity, and the portrait crop no longer has to preserve a
   composition. Asset is images/office/web/contact-bg.jpg — a 1800x861 slice of the
   CAMERA ORIGINAL (brick wall + seated figures + tabletop), median-filtered, gamma
   lifted out of the underexposure, desaturated and slightly blurred. Lifting it in the
   file rather than in CSS means the scrim below controls the final darkness.
   Applies to BOTH index.html and approach.html — the contact block is duplicated markup
   but shares this class. */
.contact-cta {
  padding: 8rem 0;
  background:
    linear-gradient(rgba(26,23,20,0.90), rgba(26,23,20,0.95)),
    url('images/office/web/contact-bg.jpg') center 42% / cover no-repeat,
    var(--ink);
  position: relative; overflow: hidden;
}

/* ── Approach page: the foundation list (Sept 2026) ──
   Paragraph three of the opening statement was the most concrete writing on the page
   but was buried in prose. As a list it survives a skimmer without losing the idea. */
.opening-list {
  list-style: none; padding: 0; margin: 1.6rem 0;
  border-left: 2px solid var(--gold);
}
.opening-list li {
  font-size: 0.95rem; line-height: 1.75; color: var(--stone);
  padding: 0.55rem 0 0.55rem 1.6rem;
}
.opening-list li + li { border-top: 1px solid var(--rule); }

/* Pointer from the shortened "human dimension" section to the guide, which now
   carries the long-form version of that material. */
.human-guide-link {
  margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
  font-size: 0.88rem; color: var(--muted);
}
.human-guide-link a {
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid rgba(184,150,106,0.4); font-style: italic;
  transition: border-color .2s;
}
.human-guide-link a:hover { border-bottom-color: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   OFFICE PAGE — SPLIT HERO + FOOT-OF-PAGE MAP  (Sept 2026)
═══════════════════════════════════════════════════════════ */

/* building-front.jpg is 800x1200 portrait. It gets its own full-height column rather
   than a full-bleed band, which at 2.4:1 would show 28% of the frame and lose the
   receding sidewalk. The ink panel keeps the page-hero gold grid (.page-hero::before). */
/* Keeps the base .page-hero's 6vw side gutters and drops only its vertical padding.
   Setting `padding: 0` here left the headline flush against the viewport edge at every
   width below ~1310px, including phones. Verified at 1440 / 1200 / 900 / 400. */
.page-hero--photo { padding: 0 6vw; }
.page-hero--photo .page-hero-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.08fr 0.92fr;
  align-items: stretch; gap: 0;
}
.page-hero-copy {
  padding: 6rem 3.5rem 6rem 0;
  display: flex; flex-direction: column; justify-content: center;
}
.page-hero-figure {
  margin: 0; position: relative; align-self: stretch;
  min-height: min(74vh, 660px);
  border-left: 1px solid var(--rule);
}
.page-hero-figure img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center 38%;
  opacity: 0; animation: officeHeroIn 1s .2s forwards;
}
/* Opacity only — no transform — so this reads the same in both motion modes and needs
   no reduced-motion override. See the note about John's machine in project memory. */
@keyframes officeHeroIn { from { opacity: 0; } to { opacity: 1; } }
.page-hero-figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,241,235,0.72);
  padding: 2.5rem 1.4rem 1.1rem;
  background: linear-gradient(to top, rgba(26,23,20,0.85), transparent);
}

/* Address / phone pair inside the hero panel */
.page-hero-facts {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  margin: 2.6rem 0 0;
  padding-top: 2rem; border-top: 1px solid var(--rule);
  opacity: 0; animation: fadeUp .8s .5s forwards;
}
.page-hero-fact { display: flex; flex-direction: column; gap: 0.5rem; }
.page-hero-fact-label {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
}
.page-hero-fact-value {
  font-size: 0.92rem; line-height: 1.7; color: rgba(245,241,235,0.8);
}
.page-hero-fact-value a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid rgba(184,150,106,0.3);
  transition: border-color .2s, color .2s;
}
.page-hero-fact-value a:hover { color: var(--gold-lt); border-color: var(--gold); }
.page-hero--photo .office-directions-link { margin-top: 1.6rem; align-self: flex-start; }

@media (max-width: 860px) {
  .page-hero--photo .page-hero-inner { grid-template-columns: 1fr; }
  .page-hero-copy { padding: 7rem 0 3rem; }
  .page-hero-figure {
    min-height: 0; aspect-ratio: 4 / 5;
    border-left: none; border-top: 1px solid var(--rule);
  }
}

/* ── Map, now a full-width band at the foot of the page ──
   Out of the location grid it no longer inherits min-height or a border, so both are
   declared here or the iframe collapses to nothing. */
.office-map-band {
  position: relative; width: 100%; height: 420px;
  border-top: 1px solid var(--rule);
  background: var(--ink);
}
.office-map-band iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none; filter: grayscale(0.3) contrast(0.95);
}
@media (max-width: 700px) { .office-map-band { height: 320px; } }

/* Access column: the facts column beside it carries three bordered blocks, so this one
   ends short and the grid stretches both to equal height. Rather than crop the reception
   photo to fill (it is a 3:2 interior and a taller crop ruins it), let the block grow and
   anchor the photo to the foot of the column. */
.office-info--access .office-info-block { flex: 1; display: flex; flex-direction: column; }
.office-info--access .office-room { margin-top: auto; }
@media (max-width: 860px) {
  .office-info--access .office-info-block { flex: 0 1 auto; }
  .office-info--access .office-room { margin-top: 1.4rem; }
}

/* ═══════════════════════════════════════════════════════════
   INTAKE CLOSED NOTICE  (shown while INTAKE_ENABLED is false)
   Delete nothing here when intake reopens — the block is simply
   never revealed, because intake.html leaves it [hidden].
═══════════════════════════════════════════════════════════ */
.intake-closed {
  min-height: 70vh; display: flex; align-items: center; justify-content: center;
  background: var(--ink); padding: 8rem 6vw 6rem; position: relative; overflow: hidden;
}
.intake-closed::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    to right, transparent 0,
    transparent calc(100% / 12 - 1px),
    rgba(184,150,106,0.04) calc(100% / 12 - 1px),
    rgba(184,150,106,0.04) calc(100% / 12));
}
.intake-closed-inner { max-width: 640px; position: relative; z-index: 1; text-align: center; }
.intake-closed-eyebrow {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.4rem;
}
.intake-closed-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 300; line-height: 1.15;
  color: var(--cream); margin: 0 0 1.6rem; text-wrap: balance;
}
.intake-closed-title em { font-style: italic; color: var(--gold-lt); }
.intake-closed-body {
  font-size: 1rem; line-height: 1.85; color: rgba(245,241,235,0.72);
  margin: 0 auto 2.4rem; max-width: 52ch;
}
.intake-closed-actions {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
}
.intake-closed-hours {
  margin: 2.4rem 0 0; padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem; color: rgba(245,241,235,0.45);
}
@media (max-width: 640px) {
  .intake-closed { padding: 6rem 1.4rem 4rem; min-height: 0; }
  .intake-closed-actions .btn-primary,
  .intake-closed-actions .btn-ghost { width: 100%; text-align: center; }
}

/* The HTML `hidden` attribute only sets display:none via the UA stylesheet, so ANY
   author rule that sets display beats it. `.intake-page` is display:flex, so marking
   it hidden did nothing until this rule existed — the closed notice rendered above a
   fully working intake form. Global guard so the attribute behaves everywhere. */
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   CHUNK 1 — FORMS & PRIVACY (2026-09-11)
═══════════════════════════════════════════════════════════ */

/* Google's required notice. The badge is hidden (.grecaptcha-badge, top of file),
   which Google permits ONLY if this text appears with each form. Do not remove it
   while the badge stays hidden. Every form on the site sits on a dark ground. */
.recaptcha-note {
  width: 100%;
  font-size: 0.6rem; line-height: 1.6; letter-spacing: 0.02em;
  color: rgba(245,241,235,0.55);
  margin-top: 0.4rem;
}
.recaptcha-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.recaptcha-note a:hover { color: var(--gold-lt); }

/* Shown when guide.php rejects a request (the download stays hidden). */
.form-error-msg {
  width: 100%;
  font-size: 0.78rem; line-height: 1.5;
  color: #e8b4a8;
  margin-top: 0.6rem;
}

/* Fine print legibility. These were 0.12–0.25 opacity (about 1.4:1–2.2:1 contrast), and
   they carry the past-results and no-attorney-client-relationship disclaimers. */
.ebook-disclaimer,
.guide-form-disclaimer { color: rgba(245,241,235,0.55); }
.footer-copy       { color: rgba(245,241,235,0.45); }
.footer-disclaimer { color: rgba(245,241,235,0.45); }
.footer-copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-copy a:hover { color: var(--gold-lt); }

/* Footer additions: attorney links (brand column) and fax (contact column). */
.footer-attorneys {
  display: flex; flex-direction: column; gap: 0.35rem;
  margin-top: 0.2rem;
}
.footer-attorneys a {
  font-size: 0.72rem; font-weight: 300; letter-spacing: 0.04em;
  color: rgba(245,241,235,0.5); text-decoration: none; transition: color .2s;
}
.footer-attorneys a:hover { color: var(--gold); }
.footer-fax {
  font-size: 0.65rem; font-weight: 300; letter-spacing: 0.1em;
  color: rgba(245,241,235,0.45); text-transform: uppercase;
}
@media (max-width: 900px) {
  .footer-attorneys { align-items: center; }
}

/* The fixed nav is 72px tall. Keep attorney anchors (#boyd etc.) from sliding under it. */
.attorney-card[id] { scroll-margin-top: 96px; }

/* Privacy policy page */
.legal-prose { padding: 5rem 6vw 6rem; background: var(--cream); }
.legal-prose-inner { max-width: 760px; margin: 0 auto; }
.legal-prose .legal-effective {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2.5rem;
}
.legal-prose h2 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: 1.7rem; line-height: 1.2; color: var(--ink);
  margin: 2.8rem 0 0.9rem;
}
.legal-prose p, .legal-prose li {
  font-size: 0.95rem; line-height: 1.8; color: var(--stone);
}
.legal-prose p + p { margin-top: 1rem; }
.legal-prose ul { margin: 0.8rem 0 0 1.2rem; }
.legal-prose li + li { margin-top: 0.5rem; }
.legal-prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal-prose a:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   CHUNK 2 — PEOPLE, SCOPE & OFFICE FACTS (2026-09-11)
═══════════════════════════════════════════════════════════ */

/* Proof strip under the homepage hero: "calm because experienced." Every item is
   factual and checkable against the attorneys' resumes. See the comment in index.html. */
.proof-strip {
  background: var(--stone);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem 6vw;
}
.proof-strip-list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1180px;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
}
.proof-strip-list li {
  font-size: 0.72rem; font-weight: 300; letter-spacing: 0.06em; line-height: 1.55;
  color: rgba(245,241,235,0.7); text-align: center;
  padding: 0.2rem 1.4rem;
}
.proof-strip-list li + li { border-left: 1px solid var(--rule); }
.proof-strip-list strong { font-weight: 500; color: var(--gold-lt); }
@media (max-width: 900px) {
  .proof-strip { padding: 1.4rem 6vw; }
  .proof-strip-list { grid-template-columns: 1fr 1fr; gap: 1rem 0; }
  .proof-strip-list li:nth-child(3) { border-left: 0; }
}
@media (max-width: 480px) {
  .proof-strip-list { grid-template-columns: 1fr; gap: 0.7rem; }
  .proof-strip-list li { padding: 0; }
  .proof-strip-list li + li { border-left: 0; }
}

/* Contact blocks: "Parking & directions" link replaces the grey "Located in downtown
   Mansfield" line (index, approach, attorneys). */
.contact-item-val .contact-parking-link {
  display: inline-block; margin-top: 0.35rem;
  font-size: 0.78rem; color: var(--gold-lt); text-decoration: none;
  border-bottom: 1px solid rgba(212,180,138,0.35); padding-bottom: 1px;
  transition: border-color .2s, color .2s;
}
.contact-item-val .contact-parking-link:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* Office payment methods: small qualifier after a method (e.g. cash, exact change). */
.payment-method-note {
  font-size: 0.72rem; color: var(--muted); font-style: italic;
}

/* Attorney detail rows gained an "Experience" row; widen the label column so every
   value lines up (was 56px, which only fit "Courts"/"Focus"), and lift the values from
   0.35 to 0.6 opacity so they are legible. */
.attorney-detail-label { min-width: 84px; flex-shrink: 0; }
.attorney-detail-val { color: rgba(245,241,235,0.6); }

/* ═══════════════════════════════════════════════════════════
   CHUNK 6 — DESIGN & ACCESSIBILITY (2026-09-16)
═══════════════════════════════════════════════════════════ */

/* Visible only to screen readers (form labels that the design shows as placeholders). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Tap-to-call in the fixed header. Desktop already shows the number in .nav-links;
   below 900px those links collapse into the hamburger, so the number gets its own
   control rather than hiding one tap deep. */
.nav-call-mobile {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-left: auto; margin-right: 0.4rem;
  color: var(--gold); border: 1px solid var(--rule); border-radius: 50%;
  text-decoration: none; transition: background .2s, color .2s;
}
.nav-call-mobile:hover, .nav-call-mobile:focus-visible { background: var(--gold); color: var(--ink); }
@media (max-width: 900px) {
  .nav-call-mobile { display: flex; }
}

/* Carousel pause control (WCAG 2.2.2). */
.testimonial-toggle .icon-play  { display: none; }
.testimonial-toggle.is-paused .icon-pause { display: none; }
.testimonial-toggle.is-paused .icon-play  { display: inline-block; }

/* Homepage rhythm: two sections now lead with the heading instead of the eyebrow. */
.section-title--lead { margin-top: 0; }
.section-lede {
  max-width: 560px; margin-top: 0.9rem;
  font-size: 0.92rem; line-height: 1.7; color: rgba(245,241,235,0.6);
}

/* Practice-page lead images: aspect-ratio instead of a fixed height, so the same
   part of the photograph shows at every width (the office band lesson). */
.practice-page-lead-image {
  height: auto;
  aspect-ratio: 21 / 7;
}
@media (max-width: 768px) {
  /* Phones: 2:1 (was 16:9) so the Family Law banner shows the whole row of shoes. */
  .practice-page-lead-image { height: auto; aspect-ratio: 2 / 1; }
}

/* Footer link column was 0.3 opacity — about 2.3:1 on the footer's near-black. */
.footer-links a { color: rgba(245,241,235,0.55); }

/* Visible keyboard focus, sitewide. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-lt);
  outline-offset: 2px;
}