/* ==========================================================================
   True Path Injury Law — homepage
   Design direction: "Editorial Advocacy"
     · Navy is the canvas. Gold is the accent, used like foil-stamping.
       Red is reserved for action only — never decoration.
     · Newsreader (editorial serif) for voice, Instrument Sans for interface.
     · One 4px-based spacing scale. No eyeballed numbers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Brand — taken from the firm's logo */
  --navy-900:#00152A;
  --navy-800:#001C38;
  --navy:#002549;
  --navy-700:#00335F;
  --navy-600:#0B4478;

  --red:#D00E19;
  --red-400:#E8323C;
  --red-600:#B00C15;
  --red-700:#8E0A11;

  --gold:#DDA92E;
  --gold-300:#F2D089;
  --gold-400:#EBBE57;
  --gold-600:#BE8C1D;

  /* Neutrals — warm, so the navy reads richer than on a cold grey */
  --cream:#FAF7F2;
  --cream-200:#F1ECE3;
  --paper:#FFFFFF;
  --ink:#0F1A27;
  --body:#4E5866;
  --muted:#7A8494;
  --hairline:rgba(0,37,73,.10);
  --hairline-light:rgba(255,255,255,.14);

  /* Gradients — depth, never decoration for its own sake */
  --grad-navy:linear-gradient(158deg,#00335F 0%,#002549 42%,#00152A 100%);
  --grad-navy-soft:linear-gradient(180deg,#002549 0%,#001C38 100%);
  --grad-red:linear-gradient(135deg,#E8323C 0%,#D00E19 46%,#A80B14 100%);
  --grad-gold:linear-gradient(135deg,#F2D089 0%,#DDA92E 48%,#BE8C1D 100%);
  --grad-cream:linear-gradient(180deg,#FFFFFF 0%,#FAF7F2 55%,#F1ECE3 100%);
  --rule-gold:linear-gradient(90deg,var(--gold),rgba(221,169,46,0));

  /* Type */
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display:clamp(2.6rem,1.55rem + 4.1vw,4.6rem);
  --fs-h2:clamp(2rem,1.45rem + 2.2vw,3.1rem);
  --fs-h3:clamp(1.3rem,1.18rem + .5vw,1.6rem);
  --fs-h4:1.15rem;
  --fs-lead:clamp(1.05rem,1rem + .3vw,1.25rem);
  --fs-body:1.0625rem;   /* 17px — the original 15px was too tight to read */
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;

  /* Spacing — 4px base, used everywhere */
  --s1:.25rem;  --s2:.5rem;   --s3:.75rem;  --s4:1rem;
  --s5:1.5rem;  --s6:2rem;    --s7:2.5rem;  --s8:3rem;
  --s9:4rem;    --s10:5rem;   --s11:6.5rem; --s12:8rem;

  --section-y:clamp(4.5rem,3rem + 6vw,8rem);
  --container:1300px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --radius:14px;
  --radius-lg:22px;
  --radius-pill:100px;

  --shadow-sm:0 2px 8px rgba(0,21,42,.06);
  --shadow-md:0 12px 32px -12px rgba(0,21,42,.18);
  --shadow-lg:0 32px 70px -28px rgba(0,21,42,.42);
  --shadow-glow:0 18px 44px -20px rgba(208,14,25,.55);

  --ease:cubic-bezier(.22,.68,.36,1);
  --header-h:76px;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

/* An author `display` (e.g. the modal's grid) beats the UA stylesheet's
   [hidden]{display:none}, which leaves invisible overlays eating clicks. */
[hidden]{display:none !important}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--cream);
  color:var(--body);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
dl,dd{margin:0}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
}
h1 em,h2 em,h3 em{font-style:italic;font-weight:500}

p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}

::selection{background:var(--gold);color:var(--navy-900)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}

.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--navy);color:#fff;padding:var(--s3) var(--s5)}
.skip-link:focus{left:0}

/* --------------------------------------------------------------------------
   3. SHARED PIECES
   -------------------------------------------------------------------------- */

/* Eyebrow — the small-caps label that opens every section */
.eyebrow{
  font-family:var(--sans);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 var(--s4);
  display:flex;align-items:center;gap:var(--s3);
}
.eyebrow::after{content:"";flex:0 0 44px;height:1px;background:var(--rule-gold)}
.section-head--center .eyebrow,
.cta .eyebrow{justify-content:center}
.section-head--center .eyebrow::before,
.cta .eyebrow::before{content:"";flex:0 0 44px;height:1px;background:linear-gradient(270deg,var(--gold),rgba(221,169,46,0))}
.eyebrow--gold{color:var(--gold)}
.eyebrow--red{color:var(--red)}
.eyebrow--navy{color:var(--navy)}
.eyebrow--navy::after,.eyebrow--navy::before{background-image:linear-gradient(90deg,var(--navy),rgba(0,37,73,0))}

.section-head{max-width:56ch;margin-bottom:var(--s9)}
.section-head--center{margin-inline:auto;text-align:center}
.section-title{font-size:var(--fs-h2);margin-bottom:var(--s4)}
.section-lead{font-size:var(--fs-lead);color:var(--muted);margin:0}
.lead{font-size:var(--fs-lead)}

/* Buttons — flat brand fills. Depth comes from a restrained shadow and the
   hover shift, not from a gradient inside the pill. */
.btn{
  --btn-bg:var(--red);
  --btn-bg-hover:var(--red-600);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--sans);
  font-size:1rem;
  font-weight:600;
  line-height:1;
  padding:var(--s4) var(--s6);
  border:0;border-radius:var(--radius-pill);
  background:var(--btn-bg);
  color:#fff;
  cursor:pointer;
  transition:transform .24s var(--ease), background-color .24s var(--ease),
             box-shadow .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease);
}
.btn:hover{background:var(--btn-bg-hover);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn__arrow{transition:transform .24s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn__ic{width:17px;height:17px;flex:0 0 17px}

.btn--red{box-shadow:0 6px 18px -8px rgba(208,14,25,.5)}
.btn--red:hover{box-shadow:0 10px 24px -10px rgba(208,14,25,.55)}
.btn--gold{
  --btn-bg:var(--gold);--btn-bg-hover:var(--gold-600);
  color:var(--navy-900);
  box-shadow:0 6px 18px -8px rgba(221,169,46,.55);
}
.btn--gold:hover{color:var(--navy-900)}
.btn--ghost{
  --btn-bg:transparent;--btn-bg-hover:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.45);
  color:#fff;
}
.btn--ghost:hover{border-color:rgba(255,255,255,.75)}
.btn--ghost-dark{
  --btn-bg:transparent;--btn-bg-hover:var(--navy);
  border:1px solid var(--hairline);
  color:var(--navy);
}
.btn--ghost-dark:hover{color:#fff;border-color:var(--navy)}
.btn--sm{padding:var(--s3) var(--s5);font-size:var(--fs-sm)}
.btn--block{display:flex;width:100%}

/* Reveal on scroll.
   Gated behind .js-reveal (set by JS) so content is never invisible
   if the script fails, is blocked, or the browser lacks IntersectionObserver. */
.js-reveal .reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s);
}
.js-reveal .reveal.is-in{opacity:1;transform:none}

/* Video embeds */
.video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--navy-900)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:900;
  /* Frosted glass in the logo's own navy (#002549) rather than a near-black —
     it sits warmer against the footage. Deepens once past the hero. */
  background:rgba(0,37,73,.55);
  backdrop-filter:blur(18px) saturate(100%);
  -webkit-backdrop-filter:blur(18px) saturate(100%);
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
@supports not (backdrop-filter:blur(1px)){
  .site-header{background:rgba(0,37,73,.9)}
}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(221,169,46,0),rgba(221,169,46,.55),rgba(221,169,46,0));
  opacity:0;transition:opacity .4s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(0,37,73,.92);
  backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 10px 36px -16px rgba(0,21,42,.6);
}
.site-header.is-scrolled::after{opacity:1}

.header-inner{
  max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  min-height:var(--header-h);
  display:flex;align-items:center;gap:var(--s7);
}
/* The tinted bar does most of the work; a hairline shadow covers the
   brightest frames of the video behind it. */
.site-header:not(.is-scrolled) .nav__link,
.site-header:not(.is-scrolled) .lang__opt,
.site-header:not(.is-scrolled) .brand__name,
.site-header:not(.is-scrolled) .brand__sub{
  text-shadow:0 1px 3px rgba(0,21,42,.45);
}

.brand{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto}
.brand__mark{width:40px;height:auto}
.brand__mark--dark{display:none}           /* kept for a light-header variant */
.brand__word{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:#fff;letter-spacing:-.01em}
.brand__sub{font-size:.625rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:3px}

/* Desktop nav */
.nav{flex:1 1 auto}
.nav__list{display:flex;align-items:center;gap:var(--s6)}
/* the dropdown cards anchor to their own item, not the whole header */
.nav__item{position:relative}
.nav__link{
  position:relative;
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--sans);font-size:var(--fs-sm);font-weight:500;
  color:rgba(255,255,255,.9);
  background:none;border:0;padding:var(--s6) 0;cursor:pointer;
  transition:color .25s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(var(--s6) - 10px);height:2px;
  background:var(--gold);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease);
}
.nav__link:hover,.nav__item.is-open .nav__link{color:#fff}
.nav__link:hover::after,.nav__item.is-open .nav__link::after{transform:scaleX(1)}

.nav__caret{
  width:0;height:0;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4.5px solid currentColor;
  opacity:.65;transition:transform .28s var(--ease);
}
.nav__item.is-open .nav__caret{transform:rotate(180deg)}

/* Mega panels — floating cards anchored under their nav item, centred on it
   so they stay clear of both viewport edges at any nav position. */
.mega{
  position:absolute;top:calc(100% + 10px);left:0;
  max-width:calc(100vw - 32px);
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:0 28px 64px -22px rgba(0,21,42,.42),0 2px 8px rgba(0,21,42,.07);
  animation:megaIn .28s var(--ease) both;
}
/* keeps the hover chain alive across the gap between item and card */
.mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}

/* `left` is set in JS — centred on the nav item, then clamped to the viewport.
   Only translateY is animated so it can't fight that positioning. */
@keyframes megaIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}

/* Width is set in JS — all three share the header's logo→CTA shelf. */
.mega__inner{padding:var(--s5);display:grid;gap:var(--s3)}
.mega__inner--team{grid-template-columns:repeat(2,1fr);gap:var(--s5)}
.mega__inner--practice{grid-template-columns:repeat(3,1fr);gap:var(--s2) var(--s4)}
.mega__inner--blog{grid-template-columns:repeat(2,1fr);gap:var(--s4)}

/* Team cards in the mega menu */
.team-card{
  display:flex;gap:var(--s4);align-items:stretch;
  background:var(--cream);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:var(--s3);
  transition:box-shadow .3s var(--ease);
}
.team-card:hover{box-shadow:var(--shadow-md)}
.team-card__photo{
  flex:0 0 180px;min-height:222px;border-radius:10px;
  background:var(--cream-200) center/cover no-repeat;
}
.team-card__photo--giselle{background-image:url('../img/team/giselle.png')}
.team-card__photo--robert{background-image:url('../img/team/robert.webp')}
.team-card__body{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:var(--s2) var(--s3) var(--s2) 0}
.team-card__body .eyebrow{margin-bottom:var(--s2);font-size:.6875rem}
.team-card__body .eyebrow::after{flex-basis:26px}
.team-card__name{font-size:1.4rem;margin-bottom:var(--s3)}
.team-card__text{font-size:var(--fs-sm);color:var(--body);margin-bottom:var(--s4)}

/* Practice mini rows */
.pa-mini{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s3);border-radius:var(--radius);transition:background .25s var(--ease)}
.pa-mini:hover{background:var(--cream)}
.pa-mini__icon{
  flex:0 0 78px;height:78px;border-radius:18px;
  background:var(--cream);border:1px solid var(--hairline);
  display:grid;place-items:center;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.pa-mini:hover .pa-mini__icon{background:var(--paper);border-color:rgba(221,169,46,.5)}
.pa-mini__icon img{width:64px;height:64px;object-fit:contain}
.pa-mini__title{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--ink);margin-bottom:3px}
.pa-mini__text{display:block;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}

.blog-link{display:flex;flex-direction:column;gap:2px;padding:var(--s4);border-radius:var(--radius);transition:background .25s var(--ease)}
.blog-link:hover{background:var(--cream)}
.blog-link__title{font-family:var(--serif);font-size:1.0625rem;font-weight:600;color:var(--ink)}
.blog-link__meta{font-size:var(--fs-xs);color:var(--muted)}

/* Header right */
.header-actions{flex:0 0 auto;display:flex;align-items:center;gap:var(--s4)}
.lang{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em}
.lang__opt{color:rgba(255,255,255,.6);transition:color .25s var(--ease)}
.lang__opt:hover{color:#fff}
.lang__opt.is-active{color:var(--gold)}
.lang__sep{width:1px;height:12px;background:rgba(255,255,255,.28)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:var(--s2);cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --------------------------------------------------------------------------
   5. MOBILE DRAWER
   -------------------------------------------------------------------------- */
.drawer{position:fixed;inset:0;z-index:1000}
.drawer::before{content:"";position:absolute;inset:0;background:rgba(0,21,42,.6);backdrop-filter:blur(3px);animation:fadeIn .3s var(--ease) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.drawer__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(90vw,400px);
  background:var(--grad-navy);
  display:flex;flex-direction:column;
  overflow-y:auto;padding:var(--s5) var(--s6) var(--s8);
  animation:slideIn .36s var(--ease) both;
}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}

.drawer__top{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--s5);border-bottom:1px solid var(--hairline-light)}
.drawer__logo{width:38px}
.drawer__close{background:none;border:0;color:#fff;cursor:pointer;padding:var(--s2);display:grid;place-items:center}
.drawer__close svg{width:24px;height:24px}

.drawer__nav{display:flex;flex-direction:column;padding-block:var(--s3)}
.drawer__link,.acc__head{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:none;border:0;border-bottom:1px solid var(--hairline-light);
  padding:var(--s4) 0;cursor:pointer;
  font-family:var(--serif);font-size:1.2rem;font-weight:500;color:#fff;text-align:left;
}
.acc__ic{position:relative;width:12px;height:12px;flex:0 0 12px}
.acc__ic::before,.acc__ic::after{
  content:"";position:absolute;top:50%;left:0;width:12px;height:1.5px;
  background:var(--gold);border-radius:2px;transform:translateY(-50%);
  transition:transform .3s var(--ease);
}
.acc__ic::after{transform:translateY(-50%) rotate(90deg)}
.acc.is-open .acc__ic::after{transform:translateY(-50%) rotate(0)}
.acc__body{display:none;padding:var(--s2) 0 var(--s4)}
.acc.is-open .acc__body{display:block}
.acc__body a{display:block;padding:var(--s3) 0;font-size:var(--fs-sm);color:rgba(255,255,255,.72)}
.acc__body a:hover{color:var(--gold)}

.drawer__foot{margin-top:auto;padding-top:var(--s6);display:flex;flex-direction:column;gap:var(--s3)}
.drawer__note{font-size:var(--fs-xs);color:rgba(255,255,255,.55);text-align:center;margin:var(--s2) 0 0}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:90vh;
  display:flex;align-items:center;
  padding-block:calc(var(--header-h) + var(--s10)) var(--s11);
  background:var(--navy-900);
  overflow:hidden;
}
/* Scaled up slightly to crop the "Veo" AI watermark baked into the
   bottom-right of the source video. Replace the .mp4 and this can go. */
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
  transform:scale(1.08);transform-origin:center top;
}
/* No overlay at all — the footage runs clean. All hero legibility is carried
   by the text-shadow on the copy itself (see below). */
/* Full-width container so the hero's left edge lines up with the header logo. */
.hero__content{position:relative;z-index:3;text-align:left}

/* Frosted panel holding the hero copy. Deliberately narrow so it clears the
   subject's face on the right of the footage. */
.hero__card{
  max-width:600px;
  padding:var(--s7);
  border-radius:var(--radius-lg);
  /* Tinted with the logo navy (#002549), not a near-black — it sits warmer
     against the footage. Opacity has to stay fairly high: thinner than this and
     the blue mixing with the yellow grass behind it reads teal, not navy. */
  background:rgba(0,37,73,.66);
  backdrop-filter:blur(24px) saturate(100%);
  -webkit-backdrop-filter:blur(24px) saturate(100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 40px 90px -44px rgba(0,21,42,.85);
}
/* Fallback where backdrop-filter isn't supported */
@supports not (backdrop-filter:blur(1px)){
  .hero__card{background:rgba(0,37,73,.86)}
}
/* Stepped down from --fs-display so the headline sits comfortably in the
   narrower card instead of forcing it wide across the subject. */
.hero__title{
  font-size:clamp(2.05rem,1.35rem + 2.4vw,3.15rem);
  color:#fff;margin-bottom:var(--s4);letter-spacing:-.022em;
}
.hero__title em{color:var(--gold-300)}
.hero__sub{font-size:var(--fs-sm);color:rgba(255,255,255,.88);margin-bottom:var(--s6)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s6)}
.hero__card .btn{font-size:var(--fs-sm);padding:var(--s4) var(--s5)}

.hero__trust{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-bottom:var(--s6)}
.hero__trust li{
  position:relative;padding-left:var(--s5);
  font-weight:600;letter-spacing:.04em;
  color:rgba(255,255,255,.82);text-transform:uppercase;font-size:.6875rem;
}
.hero__trust li::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 3px rgba(221,169,46,.22);
}

/* Spanish — pill in the hero that opens a dialog */
.es-trigger{
  display:inline-flex;align-items:center;gap:var(--s3);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(221,169,46,.5);
  color:#fff;
  font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;
  padding:var(--s3) var(--s5);border-radius:var(--radius-pill);cursor:pointer;
  transition:background .28s var(--ease),border-color .28s var(--ease);
}
.es-trigger:hover{background:rgba(221,169,46,.24);border-color:var(--gold)}
.es-trigger__flag{width:20px;height:14px;border-radius:2px;overflow:hidden;flex:0 0 20px}
.es-trigger__flag svg{width:100%;height:100%;display:block}
.es-trigger__arrow{color:var(--gold);transition:transform .28s var(--ease)}
.es-trigger:hover .es-trigger__arrow{transform:translateX(4px)}

.es-modal{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:var(--s5)}
.es-modal__backdrop{
  position:absolute;inset:0;
  background:rgba(0,21,42,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fadeIn .28s var(--ease) both;
}
.es-modal__panel{
  position:relative;
  width:min(660px,100%);max-height:88vh;overflow-y:auto;
  background:var(--paper);
  border-radius:var(--radius-lg);
  padding:var(--s8);
  box-shadow:0 50px 100px -30px rgba(0,21,42,.6);
  animation:esIn .34s var(--ease) both;
}
@keyframes esIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

.es-modal__close{
  position:absolute;top:var(--s5);right:var(--s5);
  display:grid;place-items:center;width:38px;height:38px;
  background:var(--cream);border:1px solid var(--hairline);border-radius:50%;
  color:var(--navy);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.es-modal__close:hover{background:var(--navy);color:#fff}
.es-modal__close svg{width:18px;height:18px}

.es-modal__title{font-size:1.6rem;color:var(--red);margin-bottom:var(--s5);padding-right:var(--s8)}
.es-modal__panel p{font-size:var(--fs-sm);color:var(--body)}
.es-modal__call{margin-top:var(--s3)}

/* the "site is available in Spanish" hand-off, directly under the phone number */
.es-modal__translate{
  margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--hairline);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);
  justify-content:space-between;
}
.es-modal__translate-note{
  margin:0;font-size:var(--fs-sm);font-weight:500;color:var(--navy);
}

/* --------------------------------------------------------------------------
   7. ABOUT
   -------------------------------------------------------------------------- */
.about{background:var(--grad-navy);color:rgba(255,255,255,.82);overflow:hidden}
.about::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 460px at 12% 8%,rgba(11,68,120,.55),transparent 70%),
    radial-gradient(620px 420px at 88% 92%,rgba(208,14,25,.18),transparent 72%);
}
.about__grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s10);align-items:center}
.about__title{font-size:var(--fs-h2);color:#fff;margin-bottom:var(--s6)}
.about__title em{color:var(--gold-300)}
.about__body .lead{color:rgba(255,255,255,.9);margin-bottom:var(--s7)}
.about__body strong{color:#fff;font-weight:600}

.about__points{display:grid;gap:var(--s5);margin-bottom:var(--s7)}
.about__point{padding-left:var(--s5);border-left:2px solid rgba(221,169,46,.5)}
.about__point dt{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--gold);margin-bottom:var(--s2)}
.about__point dd{font-size:var(--fs-sm);color:rgba(255,255,255,.76)}

.about__media{position:relative}
.about__media img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.about__badge{
  position:absolute;left:calc(var(--s6) * -1);bottom:var(--s7);
  background:var(--grad-gold);color:var(--navy-900);
  padding:var(--s4) var(--s5);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);max-width:230px;
}
.about__badge-k{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:2px}
.about__badge-v{display:block;font-size:var(--fs-xs);line-height:1.45;opacity:.82}

/* --------------------------------------------------------------------------
   8. PRACTICE AREAS
   -------------------------------------------------------------------------- */
.practice{background:var(--grad-cream)}
.pa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.pa-card{
  position:relative;
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:var(--s7);
  overflow:hidden;
  transition:transform .34s var(--ease),box-shadow .34s var(--ease),border-color .34s var(--ease);
}
.pa-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad-red);
  transform:scaleX(0);transform-origin:left;
  transition:transform .38s var(--ease);
}
.pa-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.pa-card:hover::before{transform:scaleX(1)}
/* Sized so the folk-art detail in the icons actually reads */
.pa-card__icon{
  width:116px;height:116px;border-radius:26px;margin-bottom:var(--s5);
  background:var(--cream);border:1px solid var(--hairline);
  display:grid;place-items:center;
  transition:transform .34s var(--ease);
}
.pa-card:hover .pa-card__icon{transform:scale(1.05) rotate(-3deg)}
.pa-card__icon img{width:94px;height:94px;object-fit:contain}
.pa-card h3{font-size:var(--fs-h3);margin-bottom:var(--s3)}
.pa-card p{font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--s5)}
.pa-card__cta{
  margin-top:auto;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--red);
  display:inline-flex;align-items:center;gap:var(--s2);
}
.pa-card__cta span{transition:transform .28s var(--ease)}
.pa-card:hover .pa-card__cta span{transform:translateX(5px)}

/* --------------------------------------------------------------------------
   9. TESTIMONIALS
   -------------------------------------------------------------------------- */
.testi{background:var(--grad-gold);overflow:hidden}
.testi::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 80% 0%,rgba(255,255,255,.42),transparent 68%);
}
.testi .section-title{color:var(--navy-900)}
.testi__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}
.testi__quotes{display:grid;gap:var(--s5)}

.quote{
  position:relative;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--radius-lg);
  padding:var(--s7) var(--s7) var(--s6);
}
.quote::before{
  content:"\201C";
  position:absolute;top:var(--s3);left:var(--s5);
  font-family:var(--serif);font-size:4.5rem;line-height:1;
  color:rgba(0,37,73,.16);
}
.quote blockquote{margin:0 0 var(--s4);position:relative;font-size:var(--fs-sm);line-height:1.7;color:var(--navy)}
.quote figcaption{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-700);
  display:flex;align-items:center;gap:var(--s3);
}
.quote figcaption::before{content:"";width:22px;height:1px;background:var(--navy-700);opacity:.5}

.testi__card{background:var(--paper);border-radius:var(--radius-lg);padding:var(--s3);box-shadow:var(--shadow-lg)}
.testi__caption{padding:var(--s4) var(--s4) var(--s3);font-size:var(--fs-sm);color:var(--body);text-align:center}
.testi__caption span{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--muted);margin-top:var(--s1)}

/* --------------------------------------------------------------------------
   10. HOW IT WORKS
   -------------------------------------------------------------------------- */
.how{background:var(--grad-navy);overflow:hidden}
.how::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(720px 420px at 50% -10%,rgba(208,14,25,.34),transparent 70%),
    radial-gradient(620px 400px at 10% 100%,rgba(11,68,120,.5),transparent 72%);
}
.how .section-title{color:#fff}
.how .section-title em{color:var(--gold-300)}
.how .section-lead{color:rgba(255,255,255,.66)}

.how__grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7);counter-reset:step}
.step{position:relative;text-align:center}
/* connector line between steps */
.step:not(:last-child)::after{
  content:"";position:absolute;top:96px;right:calc(var(--s7) / -2);
  width:var(--s7);height:1px;
  background:linear-gradient(90deg,rgba(221,169,46,.5),rgba(221,169,46,.1));
}
.step__num{
  display:block;
  font-family:var(--serif);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.24em;color:var(--gold);margin-bottom:var(--s4);
}
/* Cream disc holding the transparent folk-art icon — same treatment as the
   practice-card plates, so the two sets read as one system. */
.step__media{
  display:grid;place-items:center;
  width:196px;height:196px;margin:0 auto var(--s5);
  padding:var(--s6);
  border-radius:50%;
  background:var(--cream);
  border:1px solid rgba(221,169,46,.5);
  box-shadow:0 24px 56px -26px rgba(0,0,0,.8);
  transition:transform .4s var(--ease),border-color .4s var(--ease);
}
.step:hover .step__media{transform:translateY(-6px);border-color:var(--gold)}
.step__media img{width:100%;height:100%;object-fit:contain}
.step h3{font-size:var(--fs-h3);color:#fff;margin-bottom:var(--s3)}
.step p{font-size:var(--fs-sm);color:rgba(255,255,255,.72)}
.how__cta{text-align:center;margin-top:var(--s9)}

/* --------------------------------------------------------------------------
   11. VIDEO GUIDES
   -------------------------------------------------------------------------- */
.guides{background:var(--cream)}
.guides__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s6)}
.guide{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--s3);transition:box-shadow .3s var(--ease)}
.guide:hover{box-shadow:var(--shadow-md)}
.guide figcaption{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) var(--s4) var(--s3);
  font-family:var(--serif);font-size:1.0625rem;font-weight:600;color:var(--ink);
}
.guide__tag{
  font-family:var(--sans);font-size:.6875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red);background:rgba(208,14,25,.09);
  padding:4px var(--s3);border-radius:var(--radius-pill);
}

/* --------------------------------------------------------------------------
   12. OFFICE LOCATIONS
   -------------------------------------------------------------------------- */
.offices{background:var(--grad-cream)}
.offices__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.office-card{
  background:var(--grad-navy);color:rgba(255,255,255,.76);
  border-radius:var(--radius-lg);padding:var(--s7);
  box-shadow:var(--shadow-md);
  transition:transform .34s var(--ease),box-shadow .34s var(--ease);
}
.office-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.office-card__ic{
  display:grid;place-items:center;width:48px;height:48px;margin-bottom:var(--s5);
  border-radius:12px;background:rgba(221,169,46,.14);color:var(--gold);
}
.office-card__ic svg{width:24px;height:24px}
.office-card h3{font-size:1.3rem;color:#fff;margin-bottom:var(--s2)}
.office-card p{font-size:var(--fs-sm);margin:0}

/* --------------------------------------------------------------------------
   13. CTA
   -------------------------------------------------------------------------- */
.cta{position:relative;padding-block:var(--section-y);overflow:hidden;background:var(--navy-900)}
.cta__media{
  position:absolute;inset:0;
  background:url('../img/cta-bg.png') center/cover no-repeat;
  opacity:.34;
}
.cta::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(760px 460px at 50% 50%,rgba(0,21,42,.55),rgba(0,21,42,.9) 75%),
    linear-gradient(180deg,rgba(0,21,42,.7),rgba(0,21,42,.94));
}
.cta__inner{position:relative;z-index:2;text-align:center;max-width:660px}
.cta__title{font-size:var(--fs-h2);color:#fff;margin-bottom:var(--s4)}
.cta__lead{font-size:var(--fs-lead);color:rgba(255,255,255,.78);margin-bottom:var(--s7)}
.cta__actions{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:center}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.site-footer{background:var(--navy-900);color:rgba(255,255,255,.66);position:relative}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(221,169,46,0),rgba(221,169,46,.6),rgba(221,169,46,0));
}
.footer-grid{
  display:grid;grid-template-columns:1.1fr 1.5fr .8fr;gap:var(--s9);
  padding-block:var(--s10) var(--s9);
}
.footer-brand__logo{width:56px;margin-bottom:var(--s5)}
.footer-brand__tag{font-family:var(--serif);font-size:1.15rem;line-height:1.45;color:#fff;margin-bottom:var(--s5);max-width:26ch}
.footer-contact{display:grid;gap:var(--s2);margin-bottom:var(--s6);font-size:var(--fs-sm)}
.footer-contact a{color:var(--gold);transition:color .25s var(--ease)}
.footer-contact a:hover{color:var(--gold-300)}

.footer-h{
  font-family:var(--sans);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  margin-bottom:var(--s5);
}
.footer-links{display:grid;gap:var(--s3);font-size:var(--fs-sm)}
/* columns rather than a 2-col grid: a wrapping item shouldn't push a
   gap into the neighbouring column's row */
.footer-col--wide .footer-links{display:block;columns:2;column-gap:var(--s6)}
.footer-col--wide .footer-links li{break-inside:avoid;margin-bottom:var(--s3)}
.footer-links a{color:rgba(255,255,255,.66);transition:color .25s var(--ease),padding-left .25s var(--ease)}
.footer-links a:hover{color:#fff;padding-left:4px}

.footer-legal{border-top:1px solid var(--hairline-light);padding-block:var(--s5)}
.footer-legal p{font-size:var(--fs-xs);line-height:1.6;color:rgba(255,255,255,.42);margin:0;max-width:96ch}

.footer-copy{border-top:1px solid var(--hairline-light);padding-block:var(--s5)}
.footer-copy__inner{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between}
.footer-copy p{font-size:var(--fs-xs);color:rgba(255,255,255,.5);margin:0}
.footer-copy a{color:var(--gold)}
.footer-copy a:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .nav,.header-actions .lang,.header-actions .header-cta{display:none}
  .burger{display:flex}
  .header-inner{justify-content:space-between;gap:var(--s4)}

  .about__grid{grid-template-columns:1fr;gap:var(--s8)}
  .about__badge{left:auto;right:var(--s5);bottom:calc(var(--s6) * -1)}

  .pa-grid{grid-template-columns:repeat(2,1fr)}
  .testi__grid{grid-template-columns:1fr;gap:var(--s7)}
  .how__grid{grid-template-columns:1fr;gap:var(--s9);max-width:520px;margin-inline:auto}
  .step:not(:last-child)::after{display:none}
  .offices__grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s8)}
}

@media (max-width:720px){
  .hero{min-height:90vh;padding-block:calc(var(--header-h) + var(--s6)) var(--s8)}
  .hero__card{padding:var(--s6) var(--s5);max-width:none}
  .hero__actions .btn{width:100%}
  .hero__trust{gap:var(--s2) var(--s5)}
  .es-trigger{width:100%;justify-content:flex-start}
  .es-modal{padding:var(--s4)}
  .es-modal__panel{padding:var(--s6) var(--s5)}
  .es-modal__title{font-size:1.3rem;padding-right:var(--s7)}
  .es-modal__translate{flex-direction:column;align-items:stretch}
  .es-modal__translate .btn{width:100%}

  /* the hairline reads as a stray dash once the label wraps */
  .eyebrow{flex-wrap:wrap;gap:var(--s2)}
  .eyebrow::after,.eyebrow::before{display:none}

  .section-head{margin-bottom:var(--s7)}
  .pa-grid,.guides__grid{grid-template-columns:1fr}
  .pa-card{padding:var(--s6)}
  .quote{padding:var(--s6)}
  .about__badge{position:static;max-width:none;margin-top:var(--s4)}
  .footer-grid{grid-template-columns:1fr;gap:var(--s7);padding-block:var(--s8) var(--s7)}
  .footer-col--wide .footer-links{grid-template-columns:1fr}
  .footer-copy__inner{justify-content:flex-start}
}

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

/* ==========================================================================
   16. PRACTICE-AREA PAGES
   Same design system as the homepage; these are the pieces only the inner
   pages use. Appended so the homepage block above stays readable.
   ========================================================================== */

.page-practice{background:var(--cream)}

/* --- hero --- */
.pa-hero{
  position:relative;
  padding-block:calc(var(--header-h) + var(--s9)) var(--s9);
  background:var(--grad-navy);
  color:rgba(255,255,255,.82);
  overflow:hidden;
}
.pa-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 460px at 15% 0%,rgba(11,68,120,.6),transparent 70%),
    radial-gradient(620px 420px at 90% 100%,rgba(208,14,25,.16),transparent 72%);
}
.pa-hero .container{position:relative}

.crumbs{margin-bottom:var(--s6)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--fs-xs)}
.crumbs li{display:flex;align-items:center;gap:var(--s2);color:rgba(255,255,255,.55)}
.crumbs li+li::before{content:"/";color:rgba(255,255,255,.3)}
.crumbs a{color:rgba(255,255,255,.75);transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--gold)}
.crumbs [aria-current]{color:var(--gold)}

.pa-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s8);align-items:center}
.pa-hero__title{font-size:var(--fs-h2);color:#fff;margin-bottom:var(--s5)}
.pa-hero__lede{font-size:var(--fs-lead);color:rgba(255,255,255,.84);max-width:62ch;margin-bottom:var(--s7)}
.pa-hero__actions{display:flex;flex-wrap:wrap;gap:var(--s4)}
.pa-hero__icon{
  flex:0 0 auto;width:190px;height:190px;border-radius:32px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(221,169,46,.5);
  display:grid;place-items:center;padding:var(--s6);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75);
}
.pa-hero__icon img{width:100%;height:100%;object-fit:contain}

/* --- article + sidebar --- */
.pa-body{padding-block:var(--section-y)}
.pa-body__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s9);align-items:start}

.prose__block{margin-bottom:var(--s8)}
.prose__block:last-child{margin-bottom:0}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1vw,1.95rem);color:var(--ink);margin-bottom:var(--s4)}
.prose p{font-size:var(--fs-body);color:var(--body);margin-bottom:var(--s4);max-width:72ch}
.prose__list{display:grid;gap:var(--s3);margin:var(--s5) 0 0;max-width:72ch}
.prose__list li{
  position:relative;padding-left:var(--s6);
  font-size:var(--fs-sm);color:var(--body);line-height:1.6;
}
.prose__list li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 3px rgba(221,169,46,.2);
}

/* --- FAQs --- */
.faqs{display:grid;gap:var(--s3);max-width:72ch}
.faq{
  background:var(--paper);border:1px solid var(--hairline);
  border-radius:var(--radius);overflow:hidden;
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.faq[open]{box-shadow:var(--shadow-md);border-color:rgba(221,169,46,.4)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5);cursor:pointer;list-style:none;
  font-family:var(--serif);font-size:1.1rem;font-weight:600;color:var(--ink);
}
.faq__q::-webkit-details-marker{display:none}
.faq__ic{position:relative;width:13px;height:13px;flex:0 0 13px}
.faq__ic::before,.faq__ic::after{
  content:"";position:absolute;top:50%;left:0;width:13px;height:2px;
  background:var(--gold-600);border-radius:2px;transform:translateY(-50%);
  transition:transform .28s var(--ease);
}
.faq__ic::after{transform:translateY(-50%) rotate(90deg)}
.faq[open] .faq__ic::after{transform:translateY(-50%) rotate(0)}
.faq__a{padding:0 var(--s5) var(--s5)}
.faq__a p{font-size:var(--fs-sm);margin:0}

/* --- sticky sidebar --- */
.pa-side{position:sticky;top:calc(var(--header-h) + var(--s5))}
.side-card{
  background:var(--grad-navy);color:rgba(255,255,255,.8);
  border-radius:var(--radius-lg);padding:var(--s7);
  box-shadow:var(--shadow-lg);
}
.side-card__title{font-size:1.5rem;color:#fff;margin-bottom:var(--s3)}
.side-card__text{font-size:var(--fs-sm);margin-bottom:var(--s5)}
.side-card .btn{margin-bottom:var(--s3)}
.side-card .btn--ghost-dark{border-color:rgba(255,255,255,.35);color:#fff}
.side-card .btn--ghost-dark:hover{background:#fff;color:var(--navy);border-color:#fff}
.side-card__points{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--hairline-light);display:grid;gap:var(--s2)}
.side-card__points li{
  position:relative;padding-left:var(--s5);
  font-size:var(--fs-xs);color:rgba(255,255,255,.72);
}
.side-card__points li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}

/* --- related --- */
.pa-related{background:var(--grad-cream);padding-block:var(--section-y)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.rel-card{
  display:flex;align-items:center;gap:var(--s4);
  background:var(--paper);border:1px solid var(--hairline);
  border-radius:var(--radius-lg);padding:var(--s5);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.rel-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.rel-card__icon{
  flex:0 0 68px;height:68px;border-radius:18px;
  background:var(--cream);border:1px solid var(--hairline);
  display:grid;place-items:center;
}
.rel-card__icon img{width:54px;height:54px;object-fit:contain}
.rel-card__title{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--ink);margin-bottom:var(--s1)}
.rel-card__cta{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red);
}
.rel-card__cta span{transition:transform .25s var(--ease)}
.rel-card:hover .rel-card__cta span{transform:translateX(4px)}

@media (max-width:1080px){
  .pa-hero__grid{grid-template-columns:1fr}
  .pa-hero__icon{display:none}
  .pa-body__grid{grid-template-columns:1fr;gap:var(--s8)}
  .pa-side{position:static}
  .rel-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .pa-hero{padding-block:calc(var(--header-h) + var(--s6)) var(--s8)}
  .faq__q{font-size:1rem;padding:var(--s4)}
  .faq__a{padding:0 var(--s4) var(--s4)}
  .side-card{padding:var(--s6)}
}

/* inline links inside article copy */
.prose a,.faq__a a{
  color:var(--red);font-weight:500;
  text-decoration:underline;text-decoration-color:rgba(208,14,25,.35);
  text-underline-offset:3px;
  transition:text-decoration-color .2s var(--ease);
}
.prose a:hover,.faq__a a:hover{text-decoration-color:var(--red)}
.prose em{font-style:italic}

/* ==========================================================================
   17. BIOS, FAQ, CONTACT, BLOG
   ========================================================================== */

/* --- attorney bio --- */
.bio-hero{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s8);align-items:center}
.bio-hero__photo{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(221,169,46,.35)}
.bio-hero__photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.bio-facts{display:grid;gap:var(--s4);margin-bottom:var(--s6)}
.bio-facts__row dt{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin-bottom:var(--s1);
}
.bio-facts__row dd{margin:0;font-size:var(--fs-sm);color:rgba(255,255,255,.8);line-height:1.55}

.prose--single{max-width:76ch;margin-inline:auto}
.prose code{font-size:.9em;background:var(--cream-200);padding:2px 6px;border-radius:4px}

/* --- FAQ page --- */
.faqs--wide{max-width:90ch;margin-inline:auto}
.guides__grid--three{grid-template-columns:repeat(3,1fr)}
.guide__text{padding:0 var(--s4) var(--s4);font-size:var(--fs-sm);color:var(--muted);margin:0}

/* --- contact --- */
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s9);align-items:start}
.contact__h{font-size:clamp(1.5rem,1.2rem + 1vw,1.95rem);margin-bottom:var(--s6)}
.contact__form-wrap{
  background:var(--paper);border:1px solid var(--hairline);
  border-radius:var(--radius-lg);padding:var(--s8);box-shadow:var(--shadow-md);
}
.cform{display:grid;gap:var(--s5)}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.cform__field{display:grid;gap:var(--s2)}
.cform label,.cform legend{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.cform input[type="text"],.cform input[type="tel"],.cform input[type="email"],
.cform input[type="date"],.cform select,.cform textarea{
  font-family:var(--sans);font-size:var(--fs-body);color:var(--ink);
  background:var(--cream);border:1px solid var(--hairline);
  border-radius:var(--radius);padding:var(--s4);width:100%;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  background:var(--paper);border-color:var(--gold);outline:none;
  box-shadow:0 0 0 3px rgba(221,169,46,.2);
}
.cform textarea{resize:vertical;min-height:150px;line-height:1.6}
.cform__hint{font-size:var(--fs-xs);color:var(--muted)}
.cform__radios{border:0;padding:0;margin:0}
.cform__radios legend{margin-bottom:var(--s2)}
.cform__radios label{display:inline-flex;align-items:center;gap:var(--s2);font-weight:400;margin-right:var(--s5)}
.cform__consent{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--fs-xs);color:var(--muted);font-weight:400;line-height:1.55}
.cform__consent input{margin-top:3px;flex:0 0 auto}
.cform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform__status{margin:0;font-size:var(--fs-sm);min-height:1.2em}
.cform__status.is-error{color:var(--red);font-weight:500}
.cform__status.is-ok{color:#1c7c4a;font-weight:500}
/* Only flag invalid fields after a submit attempt — these inputs have no
   placeholder, so :not(:placeholder-shown) would match every empty required
   field on load and greet visitors with a wall of red. */
.cform.is-submitted :invalid{border-color:rgba(208,14,25,.55)}

.contact__side{display:grid;gap:var(--s5)}
.contact__info{
  background:var(--paper);border:1px solid var(--hairline);
  border-radius:var(--radius-lg);padding:var(--s6);
}
.contact__info h3{
  font-family:var(--sans);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);margin-bottom:var(--s2);
}
.contact__info h3+*{margin-bottom:var(--s5)}
.contact__info address{font-style:normal;font-size:var(--fs-sm);color:var(--body);line-height:1.7}
.contact__info p{font-size:var(--fs-sm);color:var(--body);margin:0}

/* --- blog listings --- */
.blog-switch{display:inline-flex;gap:var(--s2);background:rgba(255,255,255,.08);border:1px solid var(--hairline-light);border-radius:var(--radius-pill);padding:4px}
.blog-switch__btn{
  padding:var(--s2) var(--s5);border-radius:var(--radius-pill);
  font-size:var(--fs-sm);font-weight:600;color:rgba(255,255,255,.7);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.blog-switch__btn:hover{color:#fff}
.blog-switch__btn.is-active{background:var(--gold);color:var(--navy-900)}

.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--s6)}
.post-card{
  background:var(--paper);border:1px solid var(--hairline);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.post-card .video-embed{border-radius:0}
.post-card__body{padding:var(--s6)}
.post-card__body time{font-size:var(--fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-600)}
.post-card__body h2{font-size:1.3rem;margin:var(--s3) 0}
.post-card__body p{font-size:var(--fs-sm);color:var(--muted);margin:0}
.post-empty{
  text-align:center;max-width:52ch;margin-inline:auto;
  font-size:var(--fs-lead);color:var(--muted);
  padding:var(--s10) var(--s5);
  background:var(--paper);border:1px dashed var(--hairline);border-radius:var(--radius-lg);
}

@media (max-width:1080px){
  .bio-hero{grid-template-columns:1fr;gap:var(--s6)}
  .bio-hero__photo{max-width:280px}
  .contact__grid{grid-template-columns:1fr;gap:var(--s8)}
  .guides__grid--three{grid-template-columns:1fr}
}
@media (max-width:720px){
  .contact__form-wrap{padding:var(--s6) var(--s5)}
  .cform__row{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr}
}

/* --- About page stats + policy pages --- */
.pa-hero--tall{padding-block:calc(var(--header-h) + var(--s10)) var(--s10);min-height:70vh;display:flex;align-items:center}
.pa-hero__note{margin-top:var(--s6);font-size:var(--fs-sm);color:rgba(255,255,255,.6);max-width:60ch}
.pa-hero__note a{color:var(--gold)}
.stat-row{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);
  margin-top:var(--s9);padding-top:var(--s7);border-top:1px solid var(--hairline-light);
}
.stat__k{display:block;font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--gold);line-height:1.1}
.stat__v{display:block;font-size:var(--fs-xs);color:rgba(255,255,255,.7);margin-top:var(--s2);line-height:1.5}
.prose__updated{font-size:var(--fs-sm);color:var(--muted);padding-top:var(--s5);border-top:1px solid var(--hairline)}
.rel-grid--two{grid-template-columns:repeat(2,1fr)}
.rel-grid--two .team-card{background:var(--paper)}
.rel-grid--two .team-card .rel-card__cta{margin-top:var(--s2)}

@media (max-width:1080px){ .stat-row{grid-template-columns:repeat(2,1fr)} .rel-grid--two{grid-template-columns:1fr} }
@media (max-width:600px){ .stat-row{grid-template-columns:1fr;gap:var(--s4)} }

/* ── 18. Site map page ──────────────────────────────────────────────────
   A human index of every public page. Reuses .rel-grid for the columns so
   it inherits the same breakpoints as the rest of the site. */
.sitemap-col{margin-bottom:var(--s8)}
.sitemap-col__h{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:var(--ink);
  padding-bottom:var(--s2);margin-bottom:var(--s3);border-bottom:2px solid var(--gold)}
.sitemap-links{list-style:none;display:grid;gap:var(--s2);margin:0;padding:0}
.sitemap-links a{color:var(--body);font-size:var(--fs-sm);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.sitemap-links a:hover{color:var(--red);border-bottom-color:var(--red)}
.sitemap-links li small{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}
@media (max-width:900px){.sitemap-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.sitemap-grid{grid-template-columns:1fr}}