/* ==========================================================================
   Junie Lamour Law, PLLC
   Palette + type derived from the firm's own wordmark (navy) and seal (bronze).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Colour */
  --ink:        #1A1930;
  --navy:       #2D2C4F;
  --navy-soft:  #3E3D66;
  --navy-line:  rgba(255,255,255,.12);

  --cream:      #F5F1E9;
  --cream-2:    #EDE7DB;
  --white:      #FFFFFF;

  --bronze:     #A87C4F;   /* display-size accents only */
  --bronze-deep:#855F35;   /* small caps and labels: AA on cream and white */
  --gold:       #C0954E;
  --gold-soft:  #DCC7A2;
  --gold-tint:  #F1E6D2;

  --body:       #5A5872;
  --body-dim:   #605E77;
  --body-light: #B6B4C8;

  /* Type */
  --display: "Playfair Display", "Times New Roman", serif;
  --sans:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Space */
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(72px, 9vw, 128px);
  --maxw: 1200px;

  /* Motion */
  --ease: cubic-bezier(.22,.68,.28,1);
  --dur: .72s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 500; color: var(--navy); letter-spacing: -.015em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
figure, figcaption, dl, dd, blockquote { margin: 0; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--ink);
  padding: 12px 20px; font-weight: 700; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.section--navy  { background: var(--navy); }
.section--ink   { background: var(--ink); }

/* ---------- Type utilities ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .688rem; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--bronze-deep); line-height: 1;
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--gold); flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--light { color: var(--gold-soft); }

.h-display {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 1.06;
  font-weight: 400;
}
.h-section {
  font-size: clamp(1.95rem, 4.2vw, 3.15rem);
  line-height: 1.14;
  font-weight: 400;
}
.h-sub {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.25;
  font-weight: 500;
}
.accent { font-style: italic; color: var(--bronze); font-weight: 400; }
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.on-dark .accent { color: var(--gold-soft); }
.lede { font-size: 1.0625rem; line-height: 1.8; color: var(--body); max-width: 58ch; }
.on-dark .lede { color: var(--body-light); }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

.section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.section-head .eyebrow { margin-bottom: 20px; }
.section-head .lede { margin-top: 20px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 30px; border-radius: 999px;
  font-size: .875rem; font-weight: 500; letter-spacing: .03em;
  transition: transform .4s var(--ease), background-color .4s var(--ease),
              color .4s var(--ease), box-shadow .4s var(--ease);
  will-change: transform;
}
.btn svg { flex: none; transition: transform .4s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #CFA35B; box-shadow: 0 12px 28px -12px rgba(192,149,78,.85); }

.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--ink); box-shadow: 0 12px 28px -14px rgba(45,44,79,.9); }

.btn--ghost { border: 1px solid var(--navy-line); color: var(--white); }
.btn--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }

.btn--outline { border: 1px solid rgba(45,44,79,.22); color: var(--navy); }
.btn--outline:hover { border-color: var(--navy); background: var(--navy); color: var(--white); }

/* Circular icon button (template's "+" affordance) */
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  transition: transform .5s var(--ease), background-color .4s var(--ease);
}
.icon-btn--gold { background: var(--gold); color: var(--ink); }
.icon-btn--navy { background: var(--navy); color: var(--white); }
.icon-btn--outline { border: 1px solid rgba(255,255,255,.25); color: var(--white); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 18px;
  transition: background-color .5s var(--ease), padding .5s var(--ease),
              box-shadow .5s var(--ease);
}
.site-header.is-stuck {
  background: rgba(26,25,48,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: 11px;
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; flex: none; }
.brand img {
  height: 52px; width: auto;
  filter: brightness(0) invert(1);
  transition: height .5s var(--ease);
}
.is-stuck .brand img { height: 42px; }

.nav { display: flex; align-items: center; gap: 34px; }
.nav a {
  position: relative;
  font-size: .875rem; font-weight: 400; letter-spacing: .02em;
  color: rgba(255,255,255,.82);
  padding-block: 6px;
  transition: color .35s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: #fff; }

.header-cta { display: flex; align-items: center; gap: 16px; flex: none; }
.header-phone {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .875rem; color: rgba(255,255,255,.82);
  transition: color .35s var(--ease);
}
.header-phone:hover { color: var(--gold-soft); }
.header-cta .btn { padding: 12px 24px; }

/* Mobile toggle */
.nav-toggle { display: none; width: 44px; height: 44px; place-items: center; color: #fff; }
.nav-toggle span {
  display: block; width: 22px; height: 1.5px; background: currentColor;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span + span { margin-top: 6px; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: min(92vh, 880px);
  display: flex; align-items: center;
  padding-block: 150px 90px;
  background: var(--ink);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background: url("../img/courthouse-modern.jpg") center 42%/cover no-repeat;
  opacity: .5;
  transform: scale(1.06);
  animation: heroDrift 18s var(--ease) forwards;
}
.hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(26,25,48,.96) 0%, rgba(26,25,48,.86) 36%, rgba(26,25,48,.56) 72%, rgba(26,25,48,.5) 100%),
    linear-gradient(to top, rgba(26,25,48,.9) 0%, rgba(26,25,48,0) 46%);
}
@keyframes heroDrift { to { transform: scale(1); } }

.hero-grid {
  /* No stacking context here: the portrait lives inside .hero-copy but is
     absolutely positioned, and it must resolve against .hero (not this grid).
     The background/veil use negative z-index so the copy still paints above. */
  display: grid; grid-template-columns: minmax(0,1fr);
  align-items: center;
}
.hero-copy { max-width: 620px; }
.hero-copy .eyebrow { margin-bottom: 26px; }
.hero h1 { margin-bottom: 26px; }
.hero .lede { margin-bottom: 36px; max-width: 50ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Credential strip (replaces the template's avatar cluster) */
.creds {
  display: flex; align-items: center; gap: 16px;
  margin-top: 48px; padding-top: 28px;
  border-top: 1px solid var(--navy-line);
  max-width: 520px;
}
.creds img { width: 44px; height: 44px; flex: none; border-radius: 50%; }
.creds__award { border-radius: 0 !important; object-fit: contain; }
.creds p { font-size: .8125rem; line-height: 1.6; color: var(--body-light); }
.creds strong { color: var(--gold-soft); font-weight: 500; }

/* --- Hero portrait: Junie stands at the hero baseline, right-aligned to the
       content edge and sized so her head reaches the eyebrow line. --- */
.hero-portrait {
  position: absolute; z-index: 2; bottom: 0;
  /* Shift right by her ~130px transparent side-margin so her body (not the
     image box) hugs the content edge. Floored at 0 so she is never clipped. */
  right: max(0px, calc((100% - var(--maxw)) / 2 - 110px));
  height: min(80vh, 720px); width: auto;
}
.hero-portrait > img {
  position: relative; z-index: 2;
  width: auto; height: 100%; display: block;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 34px 46px rgba(0,0,0,.5));
}
/* Warm glow separates the cut-out from the courthouse behind it. */
.hero-portrait::before {
  content: ""; position: absolute; z-index: 1;
  left: 50%; top: 40%; transform: translate(-50%, -50%);
  width: 96%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(192,149,78,.28) 0%, rgba(192,149,78,.11) 40%, rgba(45,44,79,0) 66%);
}

/* Language differentiator, kept as a compact overlapping-flag pill */
.hero-langs {
  position: absolute; z-index: 3; left: 4px; bottom: 58px;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--cream); border-radius: 999px;
  padding: 8px 20px 8px 12px;
  box-shadow: 0 26px 46px -22px rgba(0,0,0,.72);
}
.hero-langs__flags { display: inline-flex; }
.hero-langs__flags img {
  width: 27px; height: 27px; border-radius: 50%; flex: none;
  object-fit: cover; border: 2px solid var(--cream); margin-left: -9px;
}
.hero-langs__flags img:first-child { margin-left: 0; }
.hero-langs__text { font-size: .75rem; line-height: 1.25; color: var(--body); }
.hero-langs__text b { display: block; font-weight: 700; color: var(--navy); }

/* ==========================================================================
   What we handle (two practice cards + reach highlight)
   ========================================================================== */
.handle-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
}
.handle-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(45,44,79,.1);
  border-radius: 20px;
  padding: clamp(28px, 3vw, 40px);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease),
              border-color .5s var(--ease);
}
.handle-card:hover {
  transform: translateY(-6px);
  border-color: rgba(192,149,78,.55);
  box-shadow: 0 30px 60px -38px rgba(45,44,79,.6);
}
.handle-card__glyph {
  width: 58px; height: 58px; margin-bottom: 24px;
  display: grid; place-items: center; border-radius: 15px;
  background: var(--gold-tint); color: var(--bronze-deep);
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
.handle-card:hover .handle-card__glyph { background: var(--navy); color: var(--gold-soft); }
.handle-card h3 { font-size: clamp(1.5rem, 2.4vw, 1.85rem); line-height: 1.2; margin-bottom: 14px; }
.handle-card p { font-size: .9375rem; line-height: 1.75; color: var(--body-dim); }
.handle-card__tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 22px 0 28px;
}
.handle-card__tags li {
  font-size: .75rem; letter-spacing: .01em; color: var(--navy);
  background: var(--cream); border: 1px solid rgba(45,44,79,.1);
  border-radius: 999px; padding: 7px 14px;
}
.handle-card__cta { margin-top: auto; align-self: flex-start; }

/* Reach + languages highlight */
.reach {
  margin-bottom: 24px;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 24px 40px;
  background: var(--navy); border-radius: 20px;
  padding: clamp(24px, 3vw, 34px) clamp(26px, 3.4vw, 44px);
}
.reach__lead { display: flex; align-items: center; gap: 18px; }
.reach__glyph {
  width: 50px; height: 50px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2); color: var(--gold-soft);
}
.reach__eyebrow {
  font-size: .6875rem; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 6px;
}
.reach__title {
  font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.25; color: var(--white);
}
.reach__langs { display: flex; flex-wrap: wrap; gap: 10px; }
.reach__langs li {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .875rem; color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 8px 16px 8px 8px;
}
.reach__langs img { width: 24px; height: 24px; border-radius: 50%; flex: none; object-fit: cover; }

/* ==========================================================================
   Practice cards (legacy 4-up grid, used elsewhere)
   ========================================================================== */
.card-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.p-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid rgba(45,44,79,.09);
  border-radius: 18px;
  padding: 30px 26px 28px;
  transition: transform .55s var(--ease), background-color .55s var(--ease),
              box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.p-card__glyph {
  width: 46px; height: 46px; margin-bottom: 22px;
  display: grid; place-items: center; border-radius: 12px;
  background: var(--gold-tint); color: var(--bronze-deep);
  transition: background-color .55s var(--ease), color .55s var(--ease);
}
.p-card h3 { font-size: 1.1875rem; line-height: 1.3; margin-bottom: 12px; transition: color .55s var(--ease); }
.p-card p { font-size: .875rem; line-height: 1.72; color: var(--body-dim); transition: color .55s var(--ease); }
.p-card__link {
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid rgba(45,44,79,.1);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bronze-deep);
  transition: color .55s var(--ease), border-color .55s var(--ease), gap .4s var(--ease);
}
.p-card:hover { transform: translateY(-8px); }

/* Featured state: mirrors the template's single dark card */
.p-card.is-featured,
.p-card:hover {
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 30px 60px -34px rgba(45,44,79,.75);
}
.p-card.is-featured h3, .p-card:hover h3 { color: var(--white); }
.p-card.is-featured p,  .p-card:hover p  { color: rgba(255,255,255,.66); }
.p-card.is-featured .p-card__glyph,
.p-card:hover .p-card__glyph { background: rgba(255,255,255,.1); color: var(--gold-soft); }
.p-card.is-featured .p-card__link,
.p-card:hover .p-card__link { color: var(--gold-soft); border-color: rgba(255,255,255,.16); gap: 14px; }

.p-card__badge {
  position: absolute; top: 24px; right: 24px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: var(--ink);
  opacity: 0; transform: scale(.6) rotate(-40deg);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.p-card.is-featured .p-card__badge,
.p-card:hover .p-card__badge { opacity: 1; transform: scale(1) rotate(0); }

/* ==========================================================================
   Consultation band
   ========================================================================== */
.consult { background: var(--navy-soft); }
.consult-grid {
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(36px, 5vw, 72px); align-items: stretch;
}
.consult-media {
  position: relative; border-radius: 22px; overflow: hidden;
  min-height: 440px;
}
.consult-media img { width: 100%; height: 100%; object-fit: cover; }
/* Unify the daylight photo with the navy band it sits in. */
.consult-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(26,25,48,.78), rgba(26,25,48,.14) 62%),
    linear-gradient(rgba(45,44,79,.44), rgba(45,44,79,.44));
}
/* Portrait variant: keep her face bright, only ground the lower edge for the caption. */
.consult-media--portrait img { object-position: center 22%; }
.consult-media--portrait::after {
  background: linear-gradient(to top, rgba(26,25,48,.72) 0%, rgba(26,25,48,.05) 42%, transparent 62%);
}
.consult-media figcaption {
  position: absolute; z-index: 2; left: 24px; bottom: 22px;
}
.consult-media figcaption b {
  display: block; font-family: var(--display); font-weight: 500;
  font-size: 1.25rem; color: var(--white); line-height: 1.2;
}
.consult-media figcaption span {
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-soft);
}
.consult-body .eyebrow { margin-bottom: 20px; }
.consult-body h2 { margin-bottom: 20px; }

.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 44px; padding-top: 36px;
  border-top: 1px solid var(--navy-line);
}
.step { text-align: center; padding-inline: 6px; }
.step__glyph {
  width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2); color: var(--gold-soft);
  transition: border-color .5s var(--ease), background-color .5s var(--ease);
}
.step:hover .step__glyph { background: rgba(255,255,255,.08); border-color: var(--gold-soft); }
.step h3 { font-size: 1rem; color: var(--white); margin-bottom: 6px; }
.step p { font-size: .8125rem; line-height: 1.6; color: rgba(255,255,255,.72); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-grid {
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: clamp(36px, 5vw, 72px); align-items: start;
}
.faq-list { border-top: 1px solid rgba(45,44,79,.12); }
.faq-item { border-bottom: 1px solid rgba(45,44,79,.12); }
.faq-q {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 22px 4px 22px 20px; text-align: left;
  position: relative;
  transition: padding-left .45s var(--ease);
}
.faq-q::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 2px; background: var(--gold);
  transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease);
}
.faq-item.is-open .faq-q::before { transform: scaleY(1); }
.faq-q__num {
  font-family: var(--display); font-size: .9375rem; color: var(--bronze-deep);
  flex: none; min-width: 20px;
}
.faq-q__text {
  flex: 1; font-family: var(--display); font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.4; color: var(--navy); font-weight: 500;
}
.faq-q__chev {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(45,44,79,.16); color: var(--navy);
  transition: transform .45s var(--ease), background-color .45s var(--ease),
              color .45s var(--ease), border-color .45s var(--ease);
}
.faq-item.is-open .faq-q__chev {
  transform: rotate(180deg);
  background: var(--navy); border-color: var(--navy); color: var(--white);
}
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p {
  padding: 0 60px 24px 56px;
  font-size: .9375rem; line-height: 1.8; color: var(--body-dim);
}
/* Sticky so the portrait stays with a long accordion or timeline beside it. */
.faq-media {
  border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 4.9;
  position: sticky; top: 100px;
}
.faq-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
/* Full-length route photo: show the whole image at its own proportions (no crop). */
.faq-media--route { aspect-ratio: 1100 / 1654; }
.faq-media--route img { object-position: center; }
.faq-media figcaption {
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  background: rgba(26,25,48,.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 14px; padding: 16px 18px; color: #fff;
}
.faq-media figcaption b { display: block; font-family: var(--display); font-size: 1.0625rem; font-weight: 500; }
.faq-media figcaption span { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-soft); }

/* ==========================================================================
   News
   ========================================================================== */
.news-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: clamp(36px, 4vw, 56px);
}
.news-head .eyebrow { margin-bottom: 18px; }
.news-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 26px; }

.post-feature {
  display: block; position: relative; border-radius: 20px; overflow: hidden;
  min-height: 460px;
  transition: transform .6s var(--ease);
}
.post-feature img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
/* Opaque enough behind the whole caption block that white text stays legible
   even where the photo underneath is pale stone. */
.post-feature::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(26,25,48,.96) 0%, rgba(26,25,48,.88) 32%,
    rgba(26,25,48,.34) 64%, transparent 88%);
}
.post-feature:hover img { transform: scale(1.06); }
.post-feature__body {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 32px 30px;
}
.post-feature h3 { color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.65rem); line-height: 1.28; margin-block: 12px 14px; }
.post-feature p { font-size: .875rem; color: rgba(255,255,255,.72); line-height: 1.7; max-width: 42ch; }

.post-stack { display: grid; gap: 18px; align-content: start; }
.post-row {
  display: grid; grid-template-columns: 128px minmax(0,1fr); gap: 20px;
  background: var(--white); border: 1px solid rgba(45,44,79,.09);
  border-radius: 16px; padding: 16px; align-items: center;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.post-row:hover {
  transform: translateX(6px);
  border-color: rgba(45,44,79,.18);
  box-shadow: 0 22px 44px -30px rgba(45,44,79,.6);
}
.post-row__media { border-radius: 11px; overflow: hidden; aspect-ratio: 1 / .82; }
.post-row__media img { width: 100%; height: 100%; object-fit: cover; }
.post-row h3 { font-size: 1.0625rem; line-height: 1.34; margin-block: 8px 12px; }
.post-date { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--body-dim); }
.post-feature .post-date { color: rgba(255,255,255,.6); }
.tag {
  display: inline-block; padding: 5px 13px; border-radius: 999px;
  background: var(--gold-tint); color: var(--bronze-deep);
  font-size: .6875rem; letter-spacing: .08em; font-weight: 500;
}
.post-feature .tag { background: var(--gold); color: var(--ink); }

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */
.page-hero {
  position: relative; background: var(--ink);
  padding-block: clamp(150px, 17vw, 210px) clamp(64px, 8vw, 104px);
  overflow: hidden;
}
.page-hero__bg {
  position: absolute; inset: 0;
  background: url("../img/courthouse-modern.jpg") center 42%/cover no-repeat;
  opacity: .5;
}
.page-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(26,25,48,.96) 0%, rgba(26,25,48,.86) 36%, rgba(26,25,48,.56) 72%, rgba(26,25,48,.5) 100%),
    linear-gradient(to top, rgba(26,25,48,.9) 0%, rgba(26,25,48,0) 46%);
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .eyebrow { margin-bottom: 22px; }
.page-hero h1 { font-size: clamp(2.25rem, 5vw, 3.9rem); line-height: 1.08; margin-bottom: 22px; }
.crumbs { display: flex; gap: 10px; font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: 30px; }
.crumbs a:hover { color: var(--gold-soft); }

/* ==========================================================================
   About page
   ========================================================================== */
.bio-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(32px, 4.5vw, 60px); align-items: stretch;
}
.bio-portrait { position: relative; }
/* Portrait fills its column so the two sides are matched, symmetric rectangles.
   object-fit: cover crops (never stretches) — it only trims side background here. */
.bio-portrait > img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%;
  border-radius: 22px;
  box-shadow: 0 40px 80px -44px rgba(26,25,48,.6);
}
.bio-body > * + * { margin-top: 20px; }
.bio-body .h-section { margin-bottom: 8px; }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px;
  background: rgba(45,44,79,.12); border: 1px solid rgba(45,44,79,.12);
  border-radius: 16px; overflow: hidden; margin-top: 34px; }
.fact { background: var(--cream); padding: 22px 24px; }
.fact dt { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-deep); margin-bottom: 8px; }
.fact dd { margin: 0; font-family: var(--display); font-size: 1.0625rem; line-height: 1.45; color: var(--navy); }

.timeline { border-left: 1px solid rgba(45,44,79,.16); padding-left: 34px; display: grid; gap: 38px; }
.tl-item { position: relative; }
.tl-item::before {
  content: ""; position: absolute; left: -40px; top: 7px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--gold);
}
.tl-item dt { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-deep); margin-bottom: 9px; }
.tl-item dd { margin: 0; }
.tl-item h3 { font-size: 1.1875rem; line-height: 1.35; margin-bottom: 8px; }
.tl-item p { font-size: .9375rem; line-height: 1.75; color: var(--body-dim); }

/* Our team */
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; align-items: start; }
.team-card {
  background: var(--white); border: 1px solid rgba(45,44,79,.09);
  border-radius: 18px; overflow: hidden;
  transition: box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.team-card:hover {
  box-shadow: 0 30px 60px -38px rgba(45,44,79,.55);
  border-color: rgba(45,44,79,.16);
}
.team-card__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-2); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform .8s var(--ease); }
.team-card:hover .team-card__photo img { transform: scale(1.045); }
.team-card__body { padding: 22px 22px 24px; }
.team-card h3 { font-size: 1.125rem; line-height: 1.25; margin-bottom: 5px; }
.team-card__role { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-deep); margin-bottom: 12px; }
/* Reserve room for the longest intro (4 lines) so every collapsed card is the
   same height; cards still expand independently (grid uses align-items:start).
   The reserved space is released on expand so paragraphs sit together. */
.team-card__bio {
  font-size: .8125rem; line-height: 1.7; color: var(--body-dim);
  min-height: 6.8em; transition: min-height .5s var(--ease);
}
.team-card.is-open .team-card__bio { min-height: 0; }
/* Collapsible full bio (smooth grid-rows reveal). */
.team-card__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.team-card.is-open .team-card__more { grid-template-rows: 1fr; }
.team-card__more > div { overflow: hidden; }
.team-card__more p { font-size: .8125rem; line-height: 1.7; color: var(--body-dim); margin-top: 12px; }
.team-card__toggle {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--bronze-deep);
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.team-card__toggle:hover { color: var(--navy); gap: 10px; }
.team-card__toggle svg { transition: transform .4s var(--ease); }
.team-card.is-open .team-card__toggle svg { transform: rotate(180deg); }

@media (max-width: 1080px) { .team-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px)  { .team-grid { grid-template-columns: 1fr; } }

/* Testimonials */
.quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.quote {
  background: var(--white); border: 1px solid rgba(45,44,79,.09);
  border-radius: 18px; padding: 30px 26px;
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.quote:hover { transform: translateY(-6px); box-shadow: 0 26px 52px -34px rgba(45,44,79,.6); }
.quote__mark { font-family: var(--display); font-size: 3rem; line-height: .6; color: var(--gold-soft); }
.quote__stars { color: var(--gold); font-size: 1.05rem; letter-spacing: 4px; line-height: 1; }
.reviews-note {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: clamp(34px, 4vw, 48px);
  font-size: .8125rem; letter-spacing: .04em; color: var(--body-dim);
}
.reviews-note span { color: var(--gold); letter-spacing: 3px; font-size: .9375rem; }
.reviews-note a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--bronze-deep);
  border-bottom: 1px solid rgba(133,95,53,.4); padding-bottom: 1px;
  transition: color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.reviews-note a:hover { color: var(--navy); border-color: var(--navy); gap: 9px; }
.reviews-note a svg { transition: transform .3s var(--ease); }
.reviews-note a:hover svg { transform: translate(2px, -2px); }
.faq-list--solo { max-width: 820px; margin-inline: auto; }

/* ---------- Blog listing ---------- */
.blog-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px;
}
.blog-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid rgba(45,44,79,.09);
  border-radius: 18px; overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(45,44,79,.18);
  box-shadow: 0 30px 60px -38px rgba(45,44,79,.6);
}
.blog-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.blog-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.blog-card h3 { font-size: 1.1875rem; line-height: 1.32; margin-bottom: 12px; }
.blog-card h3 a { transition: color .3s var(--ease); }
.blog-card h3 a:hover { color: var(--bronze-deep); }
.blog-card p { font-size: .875rem; line-height: 1.72; color: var(--body-dim); flex: 1; }
.blog-card__link {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(45,44,79,.1);
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-deep);
  transition: gap .35s var(--ease), color .35s var(--ease);
}
.blog-card__link:hover { gap: 13px; color: var(--navy); }
.blog-note {
  text-align: center; margin-top: clamp(40px, 5vw, 60px);
  font-size: .9375rem; color: var(--body-dim);
}

/* ---------- Article (single blog post) ---------- */
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 22px; font-size: .8125rem; letter-spacing: .04em;
  color: rgba(255,255,255,.7);
}
.article-meta span:not(.sep) { color: var(--gold-soft); }
.article-hero h1 { max-width: 20ch; }

.article-figure {
  aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden;
  margin-bottom: clamp(36px, 5vw, 56px);
  box-shadow: 0 40px 80px -50px rgba(26,25,48,.6);
}
.article-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

.article-body { max-width: 72ch; margin-inline: auto; }
.article-body > p { font-size: 1.0625rem; line-height: 1.85; color: var(--body); margin-bottom: 1.15em; }
.article-lead { font-size: 1.2rem !important; line-height: 1.7 !important; color: var(--navy) !important; margin-bottom: 1.4em; }
.article-body h2 {
  font-family: var(--display); font-weight: 500; color: var(--navy);
  font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.25;
  margin: 1.9em 0 .55em;
}
.article-body ul, .article-body ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.article-body li { font-size: 1.0625rem; line-height: 1.75; color: var(--body); margin-bottom: .55em; padding-left: .2em; }
.article-body ul li::marker { color: var(--gold); }
.article-body ol li::marker { color: var(--bronze-deep); font-family: var(--display); font-weight: 500; }
.article-body strong { color: var(--navy); font-weight: 700; }
.article-body em { color: var(--bronze-deep); font-style: italic; }
.article-body h3 { font-family: var(--sans); font-weight: 700; color: var(--navy); font-size: 1.0625rem; letter-spacing: .01em; margin: 1.6em 0 .4em; }
.callout {
  background: var(--gold-tint); border-left: 3px solid var(--gold);
  border-radius: 0 14px 14px 0; padding: 18px 24px; margin: 1.9em 0;
}
.callout p { margin: 0 !important; font-size: 1rem !important; line-height: 1.75 !important; color: var(--navy) !important; }

/* Service-page FAQ + related services */
.service-faq { max-width: 72ch; margin: 2.6em auto 0; }
.service-faq > h2 { font-family: var(--display); font-weight: 500; color: var(--navy); font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin-bottom: 6px; }
.related-services { margin-top: clamp(48px, 6vw, 72px); }
.related-services h2 { font-family: var(--display); font-weight: 500; color: var(--navy); font-size: clamp(1.35rem, 2.2vw, 1.65rem); text-align: center; margin-bottom: 28px; }
a.svc { text-decoration: none; }

.article-disclaimer {
  margin-top: 2.4em; padding-top: 22px; border-top: 1px solid rgba(45,44,79,.14);
  font-size: .8125rem; line-height: 1.7; color: var(--body-dim);
}
.article-back {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 28px;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze-deep);
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.article-back:hover { gap: 12px; color: var(--navy); }

@media (max-width: 620px) { .article-figure { aspect-ratio: 3 / 2; } }
.blog-note a { color: var(--bronze-deep); border-bottom: 1px solid rgba(133,95,53,.4); transition: color .3s var(--ease), border-color .3s var(--ease); }
.blog-note a:hover { color: var(--navy); border-color: var(--navy); }

@media (max-width: 1080px) { .blog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .blog-grid { grid-template-columns: 1fr; } }

/* ---------- Reviews marquee ---------- */
.section--reviews { background: #E7DECB; }

.reviews-marquees {
  display: flex; flex-direction: column; gap: 22px;
  /* Fade the cards in/out at the left and right edges. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee { overflow: hidden; }
.marquee__track {
  display: flex; width: max-content;
  animation: marquee-left var(--marquee-dur, 95s) linear infinite;
  will-change: transform;
}
.marquee--reverse .marquee__track { animation-name: marquee-right; }
/* Pause the whole band on hover so a reader can stop and read. */
.reviews-marquees:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-left  { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); }  to { transform: translateX(0); } }

.rev-card {
  width: 350px; flex: none; margin-right: 22px;
  background: var(--white); border: 1px solid rgba(45,44,79,.1);
  border-radius: 18px; padding: 26px 26px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.rev-card__stars { color: var(--gold); font-size: .95rem; letter-spacing: 3px; line-height: 1; }
.rev-card p {
  font-size: .9rem; line-height: 1.7; color: var(--body); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6;
  -webkit-box-orient: vertical; overflow: hidden;
}
.rev-card footer {
  margin-top: auto; display: flex; align-items: center; gap: 12px;
  padding-top: 16px; border-top: 1px solid rgba(45,44,79,.1);
}
.rev-card__initials {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--navy); color: var(--gold-soft);
  font-family: var(--display); font-size: .8125rem;
}
.rev-card cite { font-style: normal; font-family: var(--display); font-size: .9375rem; color: var(--navy); display: block; line-height: 1.3; }
.rev-card small { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--body-dim); }

@media (max-width: 620px) { .rev-card { width: 284px; } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; transform: none; }
  .marquee { overflow-x: auto; }
}
.quote p { font-size: .9375rem; line-height: 1.8; color: var(--body); flex: 1; }
.quote footer { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(45,44,79,.1); }
.quote__initials {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--navy); color: var(--gold-soft);
  font-family: var(--display); font-size: .875rem;
}
.quote cite { font-style: normal; font-family: var(--display); font-size: 1rem; color: var(--navy); display: block; line-height: 1.3; }
.quote small { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--body-dim); }

/* ==========================================================================
   Practice areas page
   ========================================================================== */
.pa-block + .pa-block { margin-top: clamp(56px, 7vw, 90px); }
.pa-head {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(28px, 4vw, 60px); align-items: end;
  padding-bottom: 30px; margin-bottom: 38px;
  border-bottom: 1px solid rgba(45,44,79,.14);
}
.pa-head .eyebrow { margin-bottom: 18px; }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.svc-grid--four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.svc {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--white); border: 1px solid rgba(45,44,79,.09);
  border-radius: 14px; padding: 20px 22px;
  transition: transform .45s var(--ease), border-color .45s var(--ease),
              background-color .45s var(--ease), box-shadow .45s var(--ease);
}
.svc:hover {
  transform: translateY(-4px); border-color: rgba(192,149,78,.5);
  box-shadow: 0 20px 40px -30px rgba(45,44,79,.55);
}
.svc__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  flex: none; margin-top: 10px;
  transition: transform .45s var(--ease);
}
.svc:hover .svc__dot { transform: scale(1.6); }
.svc h3 { font-size: 1rem; line-height: 1.4; font-weight: 500; margin-bottom: 4px; }
.svc p { font-size: .8125rem; line-height: 1.65; color: var(--body-dim); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(36px, 5vw, 68px); align-items: start;
}
.form-card {
  background: var(--white); border: 1px solid rgba(45,44,79,.1);
  border-radius: 22px; padding: clamp(26px, 3.4vw, 42px);
  box-shadow: 0 30px 70px -50px rgba(45,44,79,.6);
}
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bronze-deep); margin-bottom: 9px;
}
.field .req { color: var(--gold); }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px;
  background: var(--cream); border: 1px solid rgba(45,44,79,.14);
  border-radius: 10px; font-size: .9375rem; color: var(--navy);
  transition: border-color .35s var(--ease), background-color .35s var(--ease),
              box-shadow .35s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232D2C4F' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; background: var(--white);
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(192,149,78,.16);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #B4553F; }
.form-note { font-size: .75rem; line-height: 1.65; color: var(--body-dim); margin-top: 16px; }
.form-status {
  display: none; margin-top: 18px; padding: 16px 18px; border-radius: 12px;
  background: var(--gold-tint); color: var(--bronze-deep); font-size: .875rem; line-height: 1.6;
}
.form-status.is-shown { display: block; animation: popIn .5s var(--ease) both; }
@keyframes popIn { from { opacity: 0; transform: translateY(8px); } }

.info-panel { display: grid; gap: 1px; background: rgba(45,44,79,.12);
  border: 1px solid rgba(45,44,79,.12); border-radius: 20px; overflow: hidden; }
.info-row { background: var(--cream); padding: 26px 28px; display: flex; gap: 18px; align-items: flex-start; }
.info-row__glyph {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  display: grid; place-items: center; background: var(--gold-tint); color: var(--bronze-deep);
}
.info-row dt { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-deep); margin-bottom: 7px; }
.info-row dd { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--navy); }
.info-row dd a:hover { color: var(--bronze); }

.map-frame { border-radius: 20px; overflow: hidden; border: 1px solid rgba(45,44,79,.12); line-height: 0; }
.map-frame iframe { width: 100%; height: 340px; border: 0; filter: grayscale(1) contrast(.92); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band { position: relative; background: var(--navy); overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
}
.cta-band::after {
  content: ""; position: absolute; right: 20px; top: 20px;
  width: 260px; height: 260px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
}
.cta-inner { position: relative; z-index: 2; text-align: center; }
.cta-inner h2 { margin-block: 20px; }
.cta-inner .lede { margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: var(--body-light); padding-top: clamp(64px, 8vw, 96px); }
.footer-grid {
  display: grid; grid-template-columns: 1.9fr 1fr 1fr;
  gap: clamp(30px, 5vw, 72px);
  padding-bottom: 56px;
}
.footer-brand img { height: 58px; width: auto; filter: brightness(0) invert(1); margin-bottom: 24px; }
.footer-brand p { font-size: .875rem; line-height: 1.8; color: rgba(255,255,255,.66); max-width: 34ch; }
.footer-col h4 {
  font-family: var(--sans); font-size: .6875rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-soft); margin-bottom: 20px; font-weight: 500;
}
.footer-col li + li { margin-top: 11px; }
.footer-col a { font-size: .875rem; color: rgba(255,255,255,.6); transition: color .35s var(--ease), padding-left .35s var(--ease); }
.footer-col a:hover { color: #fff; padding-left: 5px; }

.subscribe p { font-size: .875rem; line-height: 1.7; color: rgba(255,255,255,.66); margin-bottom: 18px; }
.subscribe form { display: flex; gap: 8px; padding: 6px; background: rgba(255,255,255,.06);
  border: 1px solid var(--navy-line); border-radius: 999px; transition: border-color .4s var(--ease); }
.subscribe form:focus-within { border-color: rgba(220,199,162,.5); }
.subscribe input {
  flex: 1; min-width: 0; background: none; border: 0; padding: 10px 14px;
  color: #fff; font-size: .875rem;
}
.subscribe input::placeholder { color: rgba(255,255,255,.35); }
.subscribe input:focus { outline: none; }
.subscribe button { width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--gold); color: var(--ink);
  transition: transform .4s var(--ease), background-color .4s var(--ease); }
.subscribe button:hover { transform: translateX(2px); background: #CFA35B; }
.subscribe .form-status { background: rgba(220,199,162,.14); color: var(--gold-soft); }

.footer-bar {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
  padding-block: 26px; border-top: 1px solid var(--navy-line);
}
.footer-bar p, .footer-bar a { font-size: .75rem; color: rgba(255,255,255,.6); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-legal a:hover { color: rgba(255,255,255,.8); }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--navy-line); color: rgba(255,255,255,.6);
  transition: transform .45s var(--ease), background-color .45s var(--ease),
              color .45s var(--ease), border-color .45s var(--ease);
}
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-3px); }

.disclaimer { font-size: .6875rem; line-height: 1.75; color: rgba(255,255,255,.58);
  padding-bottom: 34px; max-width: 92ch; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
/* Everything below is gated on the `js` class that site.js sets on <html>.
   If scripting is blocked or errors, nothing is ever hidden. */
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--d, 0ms);
}

/* Hero load sequence */
.js .hero-anim { opacity: 0; transform: translateY(24px); }
.js .hero-anim--card { transform: translateY(30px) scale(.97); }
.js .loaded .hero-anim {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .loaded .hero-anim--card { transform: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 780px) {
  .handle-grid { grid-template-columns: 1fr; }
  .reach { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 1080px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 960px) {
  .nav-toggle { display: grid; }
  .nav {
    position: fixed; inset: 0; z-index: 90;
    flex-direction: column; justify-content: center; gap: 8px;
    background: rgba(26,25,48,.98);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
  }
  .nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  /* A stuck header uses backdrop-filter, which makes it the containing block for
     the fixed .nav overlay and traps the open menu inside the header strip once
     the page is scrolled. Drop the filter while the menu is open so the overlay
     fills the viewport again. */
  .nav-open .site-header.is-stuck { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav a { font-family: var(--display); font-size: 1.75rem; color: #fff; padding-block: 12px; }
  .nav a::after { display: none; }
  .header-phone { display: none; }
  .site-header { padding-block: 14px; }
  .header-cta .btn { display: none; }
  .nav-toggle { position: relative; z-index: 95; }

  /* Stack copy over portrait instead of the desktop flex row. */
  .hero { flex-direction: column; align-items: stretch; padding-block: 128px 60px; min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .hero-copy { max-width: none; }
  /* On mobile the photo sits between the intro and the button, so give the
     button clear space from the photo above it. */
  .hero-actions { margin-top: 30px; }
  /* Relative keeps it in flow AND anchors the language pill. */
  .hero-portrait {
    position: relative; right: auto; bottom: auto; height: auto;
    width: 100%; max-width: 340px; margin: 12px auto 0;
  }
  .hero-portrait > img { width: 100%; height: auto; }
  /* Center the language pill on the photo's bottom edge so it caps off where
     the portrait ends. One line makes a longer, cleaner badge with the flags
     and text better balanced. */
  .hero-langs { left: 50%; right: auto; bottom: 0; transform: translateX(-50%); gap: 15px; padding: 9px 28px 9px 14px; white-space: nowrap; }
  .hero-langs__text b { display: inline; }

  .consult-grid, .faq-grid, .bio-grid, .contact-grid, .news-grid, .pa-head {
    grid-template-columns: 1fr;
  }
  .consult-media { aspect-ratio: 16 / 9; min-height: 0; }
  /* Her portrait is near-square; the generic 16/9 box above lops off her head.
     Use the photo's own proportions so it shows in full and stands taller. */
  .consult-media--portrait { aspect-ratio: 1212 / 1189; }
  .faq-media { aspect-ratio: 16 / 10; max-width: 560px; position: static; }
  .faq-media img { object-position: center 20%; }
  /* The founder portrait is a tall, full-length shot. The generic 16/10 box
     above would force it into a wide frame and crop Junie's head. Keep its own
     proportions and anchor to the top so her head is always in view. */
  .faq-media--route { aspect-ratio: 1100 / 1654; max-width: 360px; margin-inline: auto; }
  .faq-media--route img { object-position: center top; }
  .bio-portrait { max-width: 400px; margin-inline: auto; }
  .bio-portrait > img { height: auto; object-position: center; }
  .quote-grid { grid-template-columns: 1fr; }
  .post-feature { min-height: 380px; }
  .pa-head { gap: 20px; align-items: start; }
}

@media (max-width: 620px) {
  :root { --section-y: clamp(56px, 12vw, 80px); }
  .card-grid, .svc-grid, .field-row, .facts { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .step {
    text-align: left; display: grid; grid-template-columns: 54px 1fr;
    column-gap: 16px; row-gap: 4px; align-items: start;
  }
  .step__glyph { margin: 0; grid-row: span 2; }
  .step h3, .step p { grid-column: 2; }
  .step h3 { margin-bottom: 0; align-self: center; }
  .news-head { flex-direction: column; align-items: flex-start; }
  .post-row { grid-template-columns: 92px minmax(0,1fr); gap: 14px; }
  .post-row h3 { font-size: .9375rem; }
  .faq-a p { padding: 0 8px 22px 20px; }
  .faq-q { padding-left: 16px; gap: 12px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-bar { justify-content: flex-start; }
  .creds { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal, .js .hero-anim { opacity: 1 !important; transform: none !important; }
  .hero-bg { animation: none; transform: none; }
}