:root{
  --navy-950:#0A0F27;
  --navy-900:#151F49;
  --navy-800:#1E2B5E;
  --navy-700:#2C3B72;
  --gold-500:#B38A3C;
  --gold-400:#C9A24F;
  --gold-300:#DEBE7C;
  --paper:#F3EFE6;
  --paper-dim:#EAE4D4;
  --paper-line:#D8CFB6;
  --ink:#131521;
  --ink-soft:#3B3E4D;
  --white:#FFFFFF;

  --font-display:'Fraunces', serif;
  --font-cond:'Barlow Condensed', sans-serif;
  --font-body:'Inter', sans-serif;

  --container: 1240px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; max-width:100%; }
body{
  margin:0;
  max-width:100%;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:700; }
p{ margin:0; }
.wrap{ max-width:var(--container); margin:0 auto; padding:0 32px; }

::selection{ background:var(--gold-500); color:var(--white); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--gold-500);
  outline-offset:3px;
}

.eyebrow{
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:14px;
  font-weight:600;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 30px;
  font-family:var(--font-cond);
  font-size:18px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  border:2px solid transparent;
  border-radius:2px;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-gold{ background:var(--gold-500); color:var(--white); }
.btn-gold:hover{ background:var(--gold-400); }
.btn-outline-light{ background:transparent; color:var(--white); border-color:rgba(255,255,255,0.55); }
.btn-outline-light:hover{ border-color:var(--gold-400); color:var(--gold-400); }
.btn-navy{ background:var(--navy-900); color:var(--white); }
.btn-navy:hover{ background:var(--navy-800); }
.btn-outline-navy{ background:transparent; color:var(--navy-900); border-color:var(--navy-900); }
.btn-outline-navy:hover{ background:var(--navy-900); color:var(--white); }

/* ================= HEADER ================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--navy-950);
  border-bottom:3px solid var(--gold-500);
}
.header-inner{
  max-width:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px 32px;
}
.logo{
  font-family:var(--font-cond);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  display:flex;
  line-height:1;
}
.logo .p1{ color:var(--white); }
.logo .p2{ color:var(--gold-400); }
.logo img{ height:24px; width:auto; display:block; }
.site-header .logo img{ height:30px; }

.header-right{ display:flex; align-items:center; gap:22px; }

.lang-toggle{
  display:flex;
  align-items:center;
  background:var(--navy-800);
  border:1px solid var(--navy-700);
  border-radius:999px;
  padding:3px;
  font-family:var(--font-cond);
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.lang-toggle span, .lang-toggle a{
  padding:6px 12px;
  border-radius:999px;
  color:rgba(255,255,255,0.55);
  cursor:pointer;
  text-decoration:none;
  transition:background .22s cubic-bezier(.3,.8,.3,1), color .22s ease, font-weight .22s ease;
}
.lang-toggle span.active, .lang-toggle a.active{
  background:var(--gold-500);
  color:var(--navy-950);
  font-weight:700;
}
.lang-toggle span.liquify, .lang-toggle a.liquify{
  animation:langPop .32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes langPop{
  0%{ transform:scale(0.86); }
  55%{ transform:scale(1.07); }
  100%{ transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .lang-toggle span.liquify{ animation:none; }
}

.header-phone{
  display:flex; flex-direction:column; align-items:flex-end;
  color:var(--white);
}
.header-phone .label{ color:var(--gold-300); font-size:12px; }
.header-phone .num{ font-family:var(--font-cond); font-size:22px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; }

.nav-desktop{ display:flex; align-items:center; gap:28px; }
.nav-desktop a{
  font-family:var(--font-cond);
  font-size:16px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.nav-desktop a:hover{ border-color:var(--gold-500); color:var(--white); }
.nav-desktop a.current{ color:var(--gold-400); }
.nav-desktop a.active{ border-color:var(--gold-500); color:var(--white); }

.burger{
  display:none;
  background:none; border:none; padding:8px;
  width:44px; height:40px;
  flex-direction:column; justify-content:center; gap:6px;
}
.burger span{
  display:block; height:2px; background:var(--white); width:100%;
  transition:transform .25s ease, opacity .2s ease;
  /* Forces its own GPU compositing layer from the start instead of on
     first transform, which is what iOS Safari sometimes botches the
     paint of (stray fragments left flanking the X) right after page
     load, before the compositor has "warmed up" for this element. */
  transform:translateZ(0);
  backface-visibility:hidden;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg) translateZ(0); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) translateZ(0); }

.mobile-nav{
  position:fixed;
  top:var(--header-h, 61px); left:0; right:0; bottom:0;
  z-index:200;
  background:var(--navy-950);
  display:flex; flex-direction:column;
  padding:24px 28px 28px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px);
  transition:transform .28s ease, opacity .22s ease, visibility 0s linear .28s;
  overflow-y:auto;
}
.mobile-nav.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:transform .28s ease, opacity .22s ease, visibility 0s linear 0s;
}
.mobile-nav-lang-bar{ align-self:flex-start; }
.mobile-nav ul{ margin-top:28px; display:flex; flex-direction:column; gap:2px; }
.mobile-nav a{
  font-family:var(--font-cond);
  font-size:22px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--white);
  padding:11px 0;
  transition:color .18s ease;
}
.mobile-nav a:hover{ color:var(--gold-400); }
.mobile-nav a.current{ color:var(--gold-400); }
/* .mobile-nav a above (generic nav links) would otherwise override the
   small pill sizing of the EN/ES toggle link, since both rules match an
   <a> with equal specificity and this one comes later in the cascade. */
.mobile-nav .lang-toggle a{
  font-family:var(--font-cond);
  font-size:13px;
  font-weight:400;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:6px 12px;
  color:rgba(255,255,255,0.55);
}
.mobile-nav .lang-toggle a:hover{ color:rgba(255,255,255,0.55); }
.mobile-nav .lang-toggle a.active{ color:var(--navy-950); }
.mobile-nav-footer{ margin-top:32px; padding-top:24px; border-top:1px solid var(--navy-700); display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.mobile-nav-lang-label{
  font-family:var(--font-cond);
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gold-300);
}
.mobile-nav-footer .btn{ width:100%; padding:14px 20px; font-size:16px; }
.mobile-nav-phone-btn{ font-family:var(--font-cond); font-weight:700; letter-spacing:0.02em; }

/* ================= HERO ================= */
.hero{
  position:relative;
  background:var(--paper);
  overflow:hidden;
  border-bottom:1px solid var(--paper-line);
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items:stretch;
  min-height:640px;
}
.hero-copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:64px 56px 64px 32px;
  position:relative;
  z-index:2;
  min-width:0;
}
.hero-copy .eyebrow{ color:var(--navy-900); margin-bottom:18px; display:flex; align-items:center; gap:12px;}
.hero-copy .eyebrow::before{
  content:""; display:block; width:34px; height:2px; background:var(--gold-500);
}
.hero-copy h1{
  font-size:clamp(36px, 4.9vw, 68px);
  line-height:0.98;
  color:var(--navy-950);
  letter-spacing:-0.01em;
}
.hero-copy h1.hero-h1-big{
  font-size:clamp(28px, 4.4vw, 62px);
  line-height:0.86;
}
.hero-copy h1 em{
  font-style:italic;
  color:var(--gold-500);
}
.hero-copy .sub{
  font-size:19px;
  color:var(--ink-soft);
  max-width:480px;
  margin-top:24px;
  line-height:1.6;
}
.hero-ctas{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }

.hero-trust{
  display:flex; align-items:center; gap:24px;
  margin-top:44px;
  padding-top:28px;
  border-top:1px solid var(--paper-line);
  flex-wrap:wrap;
}
.stars{ color:var(--gold-500); font-size:20px; letter-spacing:2px; }
.hero-trust .trust-item{ display:flex; flex-direction:column; }
.hero-trust .trust-item strong{ font-family:var(--font-display); font-size:20px; color:var(--navy-950); }
.hero-trust .trust-item span{ font-size:13px; color:var(--ink-soft); font-family:var(--font-cond); letter-spacing:0.04em; text-transform:uppercase;}
.hero-trust-big .stars{ font-size:24px; }
.hero-trust-big .trust-item strong{ font-size:26px; }
.hero-trust-big .trust-item span{ font-size:15px; }
.hero-trust-big .trust-item:first-child span{
  font-family:var(--font-display);
  font-size:18px;
  color:var(--navy-950);
  text-transform:none;
  letter-spacing:0;
}

.hero-media{
  position:relative;
  background:var(--navy-950);
  display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden;
}
.hero-media::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(115deg, rgba(179,138,60,0.10) 0 2px, transparent 2px 42px);
  z-index:1;
}
.hero-media img{
  position:relative;
  z-index:2;
  max-height:100%;
  width:auto;
  max-width:112%;
  object-fit:contain;
  object-position:bottom;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,0.45));
}
.stamp{
  position:absolute;
  top:36px; right:36px;
  z-index:3;
  width:132px; height:132px;
  border:3px solid var(--gold-500);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  transform:rotate(-14deg);
  color:var(--gold-400);
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:700;
  font-size:15px;
  line-height:1.25;
  padding:10px;
}
.stamp::after{
  content:"";
  position:absolute; inset:8px;
  border:1px solid var(--gold-500);
  border-radius:50%;
  opacity:0.6;
}

.attorney-tag{
  position:absolute;
  left:36px; bottom:32px;
  z-index:3;
  background:var(--navy-900);
  border-left:4px solid var(--gold-500);
  padding:12px 18px;
  color:var(--white);
}
.attorney-tag .name{ font-family:var(--font-display); font-size:19px; font-weight:600; }
.attorney-tag .title{ font-family:var(--font-cond); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-300); }

/* ================= HERO SNAPSHOT FORM ================= */
.hero-media-form{
  align-items:center;
  justify-content:center;
  padding:40px 40px 56px;
}
.hero-media-form::before{
  background:
    repeating-linear-gradient(115deg, rgba(179,138,60,0.14) 0 2px, transparent 2px 46px);
}
.snapshot-glow{
  position:absolute;
  width:520px; height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(201,162,79,0.35) 0%, rgba(201,162,79,0) 70%);
  z-index:1;
  animation:glowPulse 7s ease-in-out infinite;
}
@keyframes glowPulse{
  0%, 100%{ transform:scale(1); opacity:0.7; }
  50%{ transform:scale(1.15); opacity:1; }
}
.snapshot-orbit{
  position:absolute;
  width:380px; height:380px;
  border:1px dashed rgba(201,162,79,0.35);
  border-radius:50%;
  z-index:1;
  animation:orbitSpin 26s linear infinite;
}
.snapshot-orbit::before, .snapshot-orbit::after{
  content:"";
  position:absolute;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--gold-400);
  box-shadow:0 0 12px 2px rgba(201,162,79,0.7);
}
.snapshot-orbit::before{ top:-4px; left:50%; margin-left:-4.5px; }
.snapshot-orbit::after{ bottom:8%; right:6%; width:6px; height:6px; }
@keyframes orbitSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .snapshot-glow, .snapshot-orbit{ animation:none; }
}

.snapshot-card, .video-card{
  position:relative;
  z-index:3;
  width:100%;
  max-width:420px;
  background:var(--white);
  border-radius:18px;
  padding:30px 28px 24px;
  box-shadow:0 30px 60px -15px rgba(0,0,0,0.55), 0 0 0 1px rgba(201,162,79,0.18);
  animation:cardRise .8s cubic-bezier(.2,.8,.2,1) both;
}
.video-card{
  max-width:480px;
  padding:10px;
  transform:translateY(-18px);
}
@keyframes cardRise{
  from{ opacity:0; transform:translateY(28px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .snapshot-card, .video-card{ animation:none; }
}

.video-card-head{ display:flex; align-items:center; gap:10px; }
.video-frame{
  position:relative;
  width:100%;
  aspect-ratio:3 / 4;
  max-height:640px;
  border-radius:12px;
  overflow:hidden;
  background:var(--navy-950);
  box-shadow:inset 0 0 0 1px rgba(201,162,79,0.25);
}
.video-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
}
.video-card .snap-footer{
  padding:12px 6px 4px;
}

.snap-head{ display:flex; align-items:center; gap:10px; }
.snap-icon{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--navy-900);
  color:var(--gold-400);
  flex:none;
}
.snap-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  color:var(--navy-950);
  letter-spacing:0.01em;
}

.snap-progress-row{ margin-top:18px; }
.snap-step-label{
  font-family:var(--font-cond);
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.snap-progress-track{
  margin-top:8px;
  height:6px;
  border-radius:999px;
  background:var(--paper-dim);
  overflow:hidden;
}
.snap-progress-fill{
  height:100%;
  width:20%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--navy-800), var(--gold-500));
  transition:width .45s cubic-bezier(.3,.8,.3,1);
}

.snap-body{ margin-top:22px; position:relative; min-height:280px; }
.snap-step{
  display:none;
  opacity:0;
  transform:translateX(14px);
}
.snap-step.active{
  display:block;
  animation:stepIn .4s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes stepIn{
  from{ opacity:0; transform:translateX(14px); }
  to{ opacity:1; transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce){
  .snap-step.active{ animation:none; opacity:1; transform:none; }
}

.snap-q{
  font-family:var(--font-display);
  font-size:22px;
  color:var(--navy-950);
  line-height:1.25;
}

.snap-options{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.snap-opt{
  display:flex; align-items:center; gap:10px;
  padding:14px 14px;
  border:1.5px solid var(--paper-line);
  border-radius:10px;
  background:var(--white);
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:500;
  color:var(--ink);
  text-align:left;
  transition:border-color .18s ease, background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.snap-opt-wide{ grid-column:1 / -1; }
.snap-opt .opt-icon{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--paper-dim);
  color:var(--navy-800);
  flex:none;
  transition:background .18s ease, color .18s ease;
}
.snap-opt:hover{
  border-color:var(--gold-500);
  background:#FDFBF6;
  transform:translateY(-1px);
  box-shadow:0 8px 18px -10px rgba(179,138,60,0.45);
}
.snap-opt:hover .opt-icon{ background:var(--gold-500); color:var(--navy-950); }
.snap-opt.selected{
  border-color:var(--gold-500);
  background:#FDF6E8;
}
.snap-opt.selected .opt-icon{ background:var(--gold-500); color:var(--navy-950); }

.snap-fields{ margin-top:18px; display:flex; flex-direction:column; gap:14px; }
.snap-fields label{
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-size:12.5px;
  color:var(--ink-soft);
  display:flex; flex-direction:column; gap:6px;
}
.snap-fields input{
  font-family:var(--font-body);
  font-size:15px;
  padding:12px 14px;
  border:1.5px solid var(--paper-line);
  border-radius:9px;
  color:var(--ink);
  transition:border-color .18s ease;
}
.snap-fields input:focus{ border-color:var(--gold-500); }

.snap-continue{
  margin-top:20px;
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--navy-950);
  color:var(--white);
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-size:16px;
  font-weight:600;
  padding:15px;
  border-radius:9px;
  border:none;
  transition:background .18s ease, transform .12s ease;
}
.snap-continue:hover{ background:var(--navy-800); transform:translateY(-1px); }
.snap-continue .arrow{ transition:transform .18s ease; }
.snap-continue:hover .arrow{ transform:translateX(3px); }
.snap-continue-row{ display:none; }

.snap-step-result{ text-align:center; padding-top:10px; }
.snap-result-icon{
  width:56px; height:56px;
  margin:0 auto;
  border-radius:50%;
  background:var(--paper-dim);
  color:var(--gold-500);
  display:flex; align-items:center; justify-content:center;
  animation:resultPop .5s cubic-bezier(.3,1.4,.5,1) both;
}
@keyframes resultPop{
  from{ transform:scale(0.4); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}
.snap-result-copy{
  margin-top:12px;
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.6;
}
.snap-restart{ background:var(--paper-dim); color:var(--navy-950); }
.snap-restart:hover{ background:var(--paper-line); }

.snap-footer{
  margin-top:20px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:13.5px;
  color:var(--ink-soft);
}
.snap-footer a{ color:var(--navy-900); font-weight:600; border-bottom:1px solid var(--gold-500); }
.snap-footer svg{ color:var(--gold-500); }

/* ================= TICKER ================= */
.ticker-bar{
  background:var(--navy-950);
  border-top:1px solid var(--navy-700);
  border-bottom:1px solid var(--navy-700);
  overflow:hidden;
  padding:14px 0;
}
.ticker-track{
  display:flex;
  width:max-content;
  animation:ticker 34s linear infinite;
}
.ticker-track span{
  font-family:var(--font-cond);
  font-size:18px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--white);
  padding:0 34px;
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.ticker-track span b{ color:var(--gold-400); }
.ticker-track span::before{
  content:"\2022";
  color:var(--gold-500);
}
@keyframes ticker{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (hover:hover){
  .ticker-bar:hover .ticker-track{ animation-play-state:paused; }
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
}

/* ================= SECTION shared ================= */
section{ padding:96px 0; }
#reviews, #settlements{ padding:64px 0; }
#reviews{ border-top:1px solid var(--paper-line); }
#reviews .section-head h2, #settlements .section-head h2{
  font-size:clamp(26px, 3.2vw, 36px);
  line-height:1.15;
}
#reviews .section-head p, #settlements .section-head p{ font-size:15.5px; }
.section-head{ max-width:680px; margin-bottom:56px; }
.section-head .eyebrow{ color:var(--gold-500); margin-bottom:14px; }
.section-head h2{ font-size:clamp(32px, 4vw, 52px); color:var(--navy-950); line-height:1.04; }
.section-head p{ margin-top:18px; font-size:17px; color:var(--ink-soft); line-height:1.65; }
.section-dark{ background:var(--navy-950); color:var(--white); }
.section-dark .section-head h2{ color:var(--white); }
.section-dark .section-head p{ color:rgba(255,255,255,0.72); }

/* ================= PRACTICE AREAS (docket) ================= */
.docket{
  background:var(--paper-dim);
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
}
.docket-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.docket-tile{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:26px 24px;
  border:1px solid var(--paper-line);
  position:relative;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.docket-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(243,239,230,0.90);
  transition:background .18s ease;
  z-index:0;
}
.docket-tile:hover::before{ background:rgba(243,239,230,0.78); }
.docket-tile > *{ position:relative; z-index:1; }
.docket-tile:hover{
  border-color:var(--gold-500);
  transform:translateY(-3px);
  box-shadow:0 16px 30px -18px rgba(10,15,39,0.35);
}
.docket-tile .row-num{
  font-family:var(--font-cond);
  color:var(--gold-500);
  font-size:13px;
  letter-spacing:0.08em;
  font-weight:700;
}
.docket-tile .row-title{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  color:var(--navy-950);
}
.docket-tile .row-desc{
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.5;
}
.docket-tile .row-arrow{
  margin-top:auto;
  padding-top:10px;
  color:var(--navy-900);
  font-size:18px;
  transition:transform .18s ease, color .18s ease;
}
.docket-tile:hover .row-arrow{ color:var(--gold-500); transform:translateX(4px); }

/* ---- Local-focus numbered list (city landing pages) ---- */
.local-focus-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:48px;
  border-top:1px solid var(--paper-line);
}
.local-focus-row{
  display:flex;
  align-items:center;
  gap:20px;
  padding:26px 4px;
  border-bottom:1px solid var(--paper-line);
  text-decoration:none;
  transition:background .18s ease, padding-left .18s ease;
}
.local-focus-row:hover{
  background:var(--paper);
  padding-left:14px;
}
.local-focus-num{
  flex:0 0 auto;
  font-family:var(--font-display);
  font-size:30px;
  font-weight:600;
  color:var(--paper-line);
  transition:color .18s ease;
  min-width:44px;
}
.local-focus-row:hover .local-focus-num{ color:var(--gold-500); }
.local-focus-body{
  flex:1;
  min-width:0;
}
.local-focus-body h3{
  font-family:var(--font-display);
  font-size:17.5px;
  color:var(--navy-950);
  line-height:1.3;
}
.local-focus-body p{
  margin-top:6px;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-soft);
}
.local-focus-arrow{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid var(--paper-line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--navy-900);
  font-size:16px;
  transition:transform .2s ease, color .2s ease, background .2s ease, border-color .2s ease;
}
.local-focus-row:hover .local-focus-arrow{
  color:var(--white);
  background:var(--gold-500);
  border-color:var(--gold-500);
  transform:translateX(3px);
}
@media (max-width: 780px){
  .local-focus-list{ grid-template-columns:1fr; column-gap:0; }
}
@media (max-width: 640px){
  .local-focus-row{ gap:14px; padding:20px 4px; }
  .local-focus-num{ font-size:24px; min-width:34px; }
  .local-focus-arrow{ width:30px; height:30px; font-size:14px; }
}

/* ================= ATTORNEY / ABOUT ================= */
#about{ border-top:1px solid var(--paper-line); }
.about-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:64px;
  align-items:center;
}
.about-photo{
  width:fit-content;
  position:relative;
  padding:14px;
}
.about-photo::before{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid var(--gold-500);
  border-radius:8px;
  z-index:0;
}
.about-photo img{
  position:relative;
  z-index:1;
  width:340px;
  max-width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
  border-radius:6px;
  box-shadow:0 30px 60px -24px rgba(10,15,39,0.4), 0 2px 6px rgba(10,15,39,0.1);
}
.about-copy h3{
  font-size:15px;
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--gold-500);
  font-weight:700;
}
.about-copy .name{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(26px,3vw,38px);
  line-height:1.35;
  color:var(--navy-950);
  margin-top:14px;
  position:relative;
  padding-left:18px;
  border-left:3px solid var(--gold-500);
}
.about-copy p{
  margin-top:20px;
  color:var(--ink-soft);
  font-size:16.5px;
  line-height:1.7;
}
.about-credentials{
  display:flex;
  gap:28px;
  margin-top:32px;
  flex-wrap:wrap;
}
.about-credentials li{
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-size:14px;
  color:var(--navy-900);
  border-top:2px solid var(--gold-500);
  padding-top:8px;
  min-width:130px;
}

/* ================= HOW IT WORKS (STEP CARDS) ================= */
.steps-section{
  background:var(--paper);
  color:var(--ink);
  border-top:1px solid var(--paper-line);
  position:relative;
  overflow:hidden;
  padding:56px 0;
}
.steps-connector{
  position:relative;
  height:32px;
  margin-top:44px;
}
.steps-connector-line{
  position:absolute;
  top:0; left:10%; right:10%;
  height:2px;
  background:var(--gold-500);
  opacity:0.5;
}
.steps-connector-branch{
  position:absolute;
  top:0;
  width:2px;
  height:32px;
  background:var(--gold-500);
  opacity:0.5;
  transform:translateX(-50%);
}
.steps-connector-branch::before{
  content:"";
  position:absolute;
  top:-3px; left:50%;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gold-500);
  transform:translateX(-50%);
}
.steps-connector-branch::after{
  content:"";
  position:absolute;
  bottom:-3px; left:50%;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold-500);
  transform:translateX(-50%);
}

.steps-grid{
  margin-top:0;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:20px;
}
.step-card{
  position:relative;
  padding:28px 20px 24px;
  background:var(--white);
  border:1px solid var(--paper-line);
  border-top:3px solid var(--gold-500);
  border-radius:4px;
  box-shadow:0 16px 30px -22px rgba(10,15,39,0.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.step-card:hover{ transform:translateY(-4px); box-shadow:0 20px 36px -20px rgba(10,15,39,0.3); }
.step-num{
  display:block;
  font-family:var(--font-display);
  font-size:32px;
  font-weight:700;
  color:var(--gold-500);
  line-height:1;
}
.step-card h3{
  margin-top:16px;
  font-family:var(--font-display);
  font-size:18px;
  color:var(--navy-950);
  line-height:1.25;
}
.step-card p{
  margin-top:10px;
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.55;
}

@media (max-width: 1000px){
  .steps-connector{ display:none; }
  .steps-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); margin-top:44px; }
}
@media (max-width: 620px){
  .steps-grid{ grid-template-columns:1fr; }
}

/* ================= TRUST BADGES SLIDER ================= */
.badge-slider-section{
  background:var(--paper-dim);
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
  padding:9px 0;
}
.badge-slider{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
/* Pure-CSS marquee (same pattern as .ticker-track) instead of a JS
   rAF loop driving scrollLeft: the JS version was unreliable on real
   mobile browsers (rAF can stall/throttle in ways that leave scrollLeft
   never advancing), where a CSS animation just keeps running. The HTML
   duplicates the badge set once (8 slides = 2x the real 4), so -50% is
   exactly one full loop. */
.badge-slider-track{
  display:flex;
  align-items:center;
  gap:72px;
  width:max-content;
  padding:0 32px;
  animation:badge-marquee 28s linear infinite;
}
.badge-slide{ flex:none; }
.badge-slide img{
  height:120px;
  width:auto;
  filter:grayscale(1) opacity(0.55);
  transition:filter .3s ease;
  pointer-events:none;
  user-select:none;
}
.badge-slide:hover img{ filter:grayscale(0) opacity(1); }

@keyframes badge-marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (hover:hover){
  .badge-slider:hover .badge-slider-track{ animation-play-state:paused; }
}
@media (prefers-reduced-motion: reduce){
  .badge-slider-track{ animation:none; }
}

@media (max-width: 680px){
  .badge-slider-section{ padding:15px 0; }
  .badge-slider-track{ gap:48px; padding:0 20px; }
  .badge-slide img{ height:91px; }
  .badge-slider{
    -webkit-mask-image:linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
  }
}

/* ================= REVIEWS ================= */
.reviews-carousel{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
}
.reviews-track{
  display:flex;
  gap:28px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:4px 4px 12px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.reviews-track::-webkit-scrollbar{ display:none; }
.reviews-arrow{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  border:1.5px solid var(--paper-line);
  background:var(--white);
  color:var(--navy-900);
  font-size:14px;
  transition:border-color .18s ease, color .18s ease, transform .12s ease;
}
.reviews-arrow:hover{ border-color:var(--gold-500); color:var(--gold-500); transform:translateY(-1px); }
.reviews-track{ cursor:grab; }
.reviews-track.dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.review-card{
  background:var(--white);
  border:1px solid var(--paper-line);
  padding:28px;
  display:flex;
  flex-direction:column;
  gap:14px;
  width:320px;
  flex:none;
  scroll-snap-align:start;
}
.review-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.review-card .stars{ font-size:15px; }
.review-source{
  display:flex;
  align-items:center;
  gap:5px;
  font-family:var(--font-cond);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:4px 10px 4px 6px;
  border-radius:999px;
  flex:none;
}
.review-source img{
  width:14px;
  height:14px;
  border-radius:50%;
  object-fit:cover;
}
.review-source-google{ background:#E8F0FE; color:#1A73E8; }
.review-source-yelp{ background:#FDE9EA; color:#D32323; }
.review-source-avvo{ background:#E9F3EE; color:#2E7D32; }
.review-card p.quote{
  font-family:var(--font-display);
  font-size:18px;
  line-height:1.5;
  color:var(--navy-950);
  font-weight:500;
}
.review-card .who{
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-size:13px;
  color:var(--ink-soft);
  border-top:1px solid var(--paper-line);
  padding-top:14px;
}

/* ================= LET'S CONNECT / INSTAGRAM ================= */
.connect-section{
  background:var(--paper-dim);
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
  padding:56px 0;
}
.connect-section-plain{
  background:var(--paper);
  border-top:none;
  border-bottom:none;
}
.insta-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:16px;
}
.insta-widget-wrap behold-widget{ display:block; }
.insta-tile{
  position:relative;
  aspect-ratio:1 / 1;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:12px;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.insta-tile:hover{ transform:translateY(-3px); box-shadow:0 16px 28px -16px rgba(10,15,39,0.4); }
.insta-tile-1{ background:linear-gradient(135deg, var(--navy-900), var(--navy-700)); }
.insta-tile-2{ background:linear-gradient(135deg, var(--navy-800), var(--gold-500)); }
.insta-tile-3{ background:linear-gradient(135deg, var(--gold-500), var(--navy-950)); }
.insta-tile-4{ background:linear-gradient(135deg, var(--navy-950), var(--gold-400)); }
.insta-tile-5{ background:linear-gradient(135deg, var(--gold-400), var(--navy-800)); }
.insta-tile-6{ background:linear-gradient(135deg, var(--navy-700), var(--navy-950)); }
.insta-icon{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  color:var(--white);
  backdrop-filter:blur(2px);
  transition:background .18s ease;
}
.insta-tile:hover .insta-icon{ background:rgba(255,255,255,0.3); }

/* ================= FAQ ================= */
.faq-item{
  border-bottom:1px solid var(--paper-line);
}
.faq-q{
  width:100%;
  background:none;
  border:none;
  text-align:left;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 0;
  font-family:var(--font-display);
  font-size:20px;
  color:var(--navy-950);
  gap:20px;
}
.faq-q .icon{
  font-family:var(--font-cond);
  font-size:26px;
  color:var(--gold-500);
  flex:none;
  transition:transform .25s ease;
}
.faq-item.open .faq-q .icon{ transform:rotate(45deg); }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.faq-a p{
  padding-bottom:24px;
  color:var(--ink-soft);
  font-size:15.5px;
  line-height:1.7;
  max-width:760px;
}

/* ================= FINAL CTA ================= */
.final-cta{
  background:var(--navy-950);
  color:var(--white);
  border-top:1px solid rgba(255,255,255,0.1);
  position:relative;
  overflow:hidden;
}
@media (max-width: 1080px){
  .final-cta{ overflow:hidden; }
}
@media (min-width: 1081px){
  .final-cta{ overflow:visible; }
}
.final-cta::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(179,138,60,0.08) 0 2px, transparent 2px 46px);
}
.final-cta-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
  flex-wrap:wrap;
}
.final-cta-copy{ position:relative; z-index:4; }
.final-cta-form{ position:relative; z-index:2; }
.final-cta-inner::after{
  content:"";
  position:absolute;
  right:196px;
  bottom:109px;
  width:650px;
  aspect-ratio:1536 / 1024;
  height:auto;
  background-image:url("../assets/Pingle_footer_hero.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:bottom right;
  pointer-events:none;
  z-index:3;
}
@media (max-width: 1180px){
  .final-cta-inner::after{ display:none; }
}
.final-cta-copy{ max-width:480px; }
.final-cta h2{
  font-size:clamp(30px,3.6vw,48px);
  max-width:600px;
  line-height:1.05;
}
.final-cta h2 em{ color:var(--gold-400); font-style:italic; }
.final-cta-copy p{
  margin-top:18px;
  color:rgba(255,255,255,0.75);
  font-size:16px;
  line-height:1.6;
}
.final-cta-points{
  margin-top:26px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.final-cta-points li{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-cond);
  font-size:15px;
  letter-spacing:0.02em;
  color:rgba(255,255,255,0.88);
}
.final-cta-points li::before{
  content:"";
  flex:none;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--gold-500);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'><path d='M5 13l4 4 10-10'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3'><path d='M5 13l4 4 10-10'/></svg>");
  -webkit-mask-size:12px;
  mask-size:12px;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
}
.final-cta .cta-buttons{ display:flex; gap:16px; flex-wrap:wrap; margin-top:30px; }
.final-cta .fine{
  margin-top:18px;
  font-size:13px;
  color:rgba(255,255,255,0.55);
}

.final-cta-form{
  position:relative;
  background:linear-gradient(180deg, #fff 0%, var(--paper) 100%);
  padding:40px 40px 32px;
  width:100%;
  max-width:500px;
  display:flex;
  flex-direction:column;
  gap:16px;
  border-radius:16px;
  border:1px solid rgba(179,138,60,0.25);
  box-shadow:0 40px 70px -24px rgba(0,0,0,0.5);
}
.final-cta-form h3{
  margin-top:6px;
  color:var(--navy-950);
  font-size:28px;
  font-family:var(--font-display);
}
.final-cta-form > p{
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.6;
}
.final-cta-form .btn{ width:100%; margin-top:6px; text-align:center; }
.final-cta-form-fine{
  font-size:12.5px;
  color:var(--ink-soft);
  text-align:center;
}

@media (max-width: 680px){
  .final-cta-form{ padding:36px 24px 28px; }
}

/* ================= FAQ PAGE ================= */
.breadcrumbs{
  background:var(--paper);
  padding:16px 0;
  border-bottom:1px solid var(--paper-line);
}
.breadcrumbs ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  font-family:var(--font-cond);
  font-size:13px;
  letter-spacing:0.02em;
  color:var(--ink-soft);
}
.breadcrumbs a{ color:var(--ink-soft); transition:color .18s ease; }
.breadcrumbs a:hover{ color:var(--gold-500); }
.breadcrumbs li[aria-current]{ color:var(--navy-950); font-weight:600; }
.breadcrumbs li:not(:last-child)::after{
  content:"/";
  margin-left:6px;
  color:var(--paper-line);
}

.faq-cat-nav{
  background:var(--paper);
  border-top:1px solid var(--paper-line);
  padding:28px 0 32px;
}
.faq-cat-nav-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.faq-cat-nav a,
.faq-cat-nav-inner button{
  padding:7px 15px;
  border-radius:999px;
  border:1.5px solid var(--paper-line);
  background:var(--white);
  font-family:var(--font-cond);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--navy-900);
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.faq-cat-nav a:hover,
.faq-cat-nav-inner button:hover{
  background:var(--gold-500);
  border-color:var(--gold-500);
  color:var(--white);
}
.faq-cat-nav-inner button.is-active{
  background:var(--navy-950);
  border-color:var(--navy-950);
  color:var(--white);
}
/* FAQ and Resources use <section class="faq-cat-nav"> directly, while
   Practice Areas nests a <div class="faq-cat-nav"> inside its own section,
   so this selector only reaches FAQ/Resources. Their category labels are
   shorter, so the pills need extra horizontal padding to read at the same
   visual width as Practice Areas' longer-labeled pills. */
section.faq-cat-nav .faq-cat-nav-inner a,
section.faq-cat-nav .faq-cat-nav-inner button{
  padding:9px 26px;
}

.faq-browse{
  background:var(--paper);
  padding:0 0 28px;
  text-align:center;
}
.faq-browse-inner{
  position:relative;
  display:inline-block;
}
.faq-browse summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 16px;
  border-radius:999px;
  border:1.5px solid transparent;
  background:transparent;
  font-family:var(--font-cond);
  font-size:14px;
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .18s ease;
}
.faq-browse summary::-webkit-details-marker{ display:none; }
.faq-browse summary::after{ content:"▾"; font-size:10px; text-decoration:none; }
.faq-browse[open] summary::after{ content:"▴"; }
.faq-browse summary:hover{ color:var(--gold-500); }
.faq-browse-list{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  width:680px;
  max-width:88vw;
  max-height:320px;
  overflow-y:auto;
  margin-top:0;
  padding:14px 18px;
  background:var(--white);
  border:1px solid var(--paper-line);
  border-radius:10px;
  box-shadow:0 24px 48px -16px rgba(0,0,0,0.22);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 20px;
  z-index:40;
  text-align:left;
}
.faq-browse-list a{
  display:block;
  padding:8px 0;
  border-bottom:1px solid var(--paper-line);
  color:var(--ink-soft);
  font-size:14.5px;
  line-height:1.4;
  transition:color .15s ease;
}
.faq-browse-list a:hover{ color:var(--gold-500); }
@media (max-width: 680px){
  .faq-browse-list{ grid-template-columns:1fr; width:88vw; padding:12px 16px; }
}

.faq-browse-list-industry{
  grid-template-columns:1fr;
  width:320px;
}
.faq-browse-list-industry button{
  display:block;
  width:100%;
  text-align:left;
  padding:8px 0;
  border-bottom:1px solid var(--paper-line);
  border-top:none;
  border-left:none;
  border-right:none;
  background:transparent;
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.4;
  cursor:pointer;
  transition:color .15s ease;
}
.faq-browse-list-industry button:last-child{ border-bottom:none; }
.faq-browse-list-industry button:hover{ color:var(--gold-500); }
.faq-browse-list-industry button.is-active{ color:var(--navy-950); font-weight:700; }

.faq-browse-industry,
.faq-browse-tight{
  padding:0 0 6px;
  margin-top:-14px;
}
.faq-browse-industry summary,
.faq-browse-tight summary{
  padding:2px 16px;
}

.faq-category{
  scroll-margin-top:90px;
  padding:24px 0;
  position:relative;
}
.faq-category:not(:first-of-type)::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:30%;
  border-top:1px solid var(--paper-line);
}
.faq-category:nth-child(even){ background:var(--paper); }
.faq-category-head{
  max-width:720px;
  margin:0 auto 18px;
  text-align:center;
}
.faq-category-head h2{
  font-size:clamp(26px, 3.2vw, 36px);
  color:var(--navy-950);
  line-height:1.15;
}
.faq-category-head p{
  margin-top:10px;
  color:var(--ink-soft);
  font-size:15.5px;
}
.faq-list{
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
}
.faq-card{
  padding:26px 24px;
  border-radius:10px;
  scroll-margin-top:100px;
  transition:background .6s ease, box-shadow .6s ease;
}
.faq-card:nth-child(odd){ background:var(--white); }
.faq-card:target{
  background:#FBF3E1 !important;
  box-shadow:0 0 0 2px var(--gold-500) inset;
}
.faq-card h3{
  font-family:var(--font-display);
  font-size:19px;
  color:var(--navy-950);
  line-height:1.3;
}
.faq-card p{
  margin-top:10px;
  color:var(--ink-soft);
  font-size:15.5px;
  line-height:1.7;
}
.faq-card p a{ color:var(--gold-500); text-decoration:underline; }
.faq-card p a:hover{ color:var(--gold-400); }

@media (max-width: 680px){
  .faq-card{ padding:20px 16px; }
}

/* ================= LEGAL PAGES (Privacy / Terms / Disclaimer / Sitemap) ================= */
.legal-hero{
  background:var(--paper);
  padding:64px 0 48px;
  text-align:center;
}
.legal-hero-inner{ max-width:640px; margin:0 auto; }
.legal-hero h1{
  margin-top:14px;
  font-size:clamp(30px, 4vw, 46px);
  color:var(--navy-950);
  line-height:1.1;
}
.legal-updated{
  margin-top:14px;
  font-size:14px;
  color:var(--ink-soft);
}
.legal-body{
  background:var(--white);
}
.legal-body-inner{
  max-width:740px;
  margin:0 auto;
  color:var(--ink-soft);
  font-size:16px;
  line-height:1.75;
}
/* Two-column variant with a .blog-sidebar alongside the article, matching
   the blog post layout. .legal-body-inner keeps all its own typography
   rules; it just stops centering itself as a standalone column. */
.legal-layout{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:48px;
  align-items:start;
}
.legal-layout .legal-body-inner{ max-width:none; margin:0; }
.legal-layout .legal-body-inner .article-cta-banner-outer{
  /* Extend across the sidebar's column + gap (340px + 48px) so the banner
     reads as full-width like the ones on faq.html, instead of being
     squeezed into just the narrower article column. Needs its own
     position:relative (not the removed 100vw breakout's static) so the
     pointing image, which is absolutely positioned, still anchors here
     instead of drifting up to the nearest positioned ancestor. */
  width:calc(100% + 388px);
  max-width:none;
  position:relative;
  left:auto;
  margin-right:-388px;
  transform:none;
  padding:0;
}
@media (max-width: 1080px){
  .legal-layout{ grid-template-columns:1fr; }
  .legal-layout .legal-body-inner .article-cta-banner-outer{ width:100%; margin-right:0; }
}
.legal-body-inner h2{
  margin-top:36px;
  margin-bottom:4px;
  font-family:var(--font-display);
  font-size:22px;
  color:var(--navy-950);
}
.legal-body-inner p{ margin-top:14px; }
.legal-body-inner a{ color:var(--gold-500); text-decoration:underline; }
.legal-body-inner a:hover{ color:var(--gold-400); }
.blog-main p a{ color:var(--gold-500); text-decoration:underline; }
.blog-main p a:hover{ color:var(--gold-400); }

.legal-cta{
  background:var(--navy-950);
  color:var(--white);
  border-top:1px solid rgba(255,255,255,0.1);
  position:relative;
  overflow:hidden;
}
.legal-cta::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(179,138,60,0.08) 0 2px, transparent 2px 46px);
}
.legal-cta-inner{
  position:relative;
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:22px;
  padding:52px 48px;
  background:var(--navy-900);
  border:1px solid rgba(201,162,79,0.3);
  border-radius:16px;
  box-shadow:0 40px 70px -30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.legal-cta h2{
  font-size:clamp(24px, 3vw, 34px);
  line-height:1.15;
}
.legal-cta p{
  margin-top:2px;
  color:rgba(255,255,255,0.72);
  font-size:16px;
  max-width:480px;
}
.legal-cta .cta-buttons{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

@media (max-width: 680px){
  .legal-cta-inner{ padding:40px 24px; }
}

.sitemap-body{
  max-width:960px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:44px 60px;
}
.sitemap-group h2{
  font-family:var(--font-display);
  font-size:20px;
  color:var(--navy-950);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--gold-500);
}
.sitemap-group ul{ display:flex; flex-direction:column; gap:10px; }
.sitemap-group a{
  color:var(--ink-soft);
  font-size:15.5px;
  transition:color .18s ease;
}
.sitemap-group a:hover{ color:var(--gold-500); }

@media (max-width: 680px){
  .legal-cta-inner{ flex-direction:column; align-items:flex-start; }
  .sitemap-body{ grid-template-columns:1fr; gap:32px; }
}

/* ================= FOOTER ================= */
footer{
  background:var(--navy-900);
  color:rgba(255,255,255,0.75);
  border-top:1px solid rgba(255,255,255,0.1);
  padding:44px 0 18px;
  font-size:14px;
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap:40px;
  padding-bottom:24px;
  border-bottom:1px solid var(--navy-700);
}
.footer-grid > div{ min-width:0; }
.footer-logo{
  font-family:var(--font-cond);
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  margin-bottom:14px;
}
.footer-logo .p2{ color:var(--gold-400); }
.footer-logo img{ height:26px; width:auto; display:block; }
.footer-firm-name{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  color:var(--white);
  margin-bottom:14px;
}
.footer-social{ display:flex; gap:14px; margin-top:22px; }
.footer-social a{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--navy-700);
  color:rgba(255,255,255,0.75);
  transition:border-color .18s ease, color .18s ease;
}
.footer-social a:hover{ border-color:var(--gold-500); color:var(--gold-400); }
.footer-newsletter{ margin-top:22px; max-width:320px; }
.footer-newsletter-label{
  display:block;
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-size:13px;
  color:var(--gold-300);
  margin-bottom:10px;
}
.footer-newsletter-row{
  display:flex;
  border:1px solid var(--navy-700);
  background:var(--navy-950);
}
.footer-newsletter-row input{
  flex:1;
  min-width:0;
  background:rgba(255,255,255,0.92);
  border:none;
  padding:12px 14px;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:14px;
}
.footer-newsletter-row input::placeholder{ color:var(--ink-soft); }
.footer-newsletter-row input:focus{ outline:none; background:var(--white); }
.footer-newsletter-row button{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width:46px;
  background:var(--gold-500);
  color:var(--navy-950);
  border:none;
  transition:background .18s ease;
}
.footer-newsletter-row button:hover{ background:var(--gold-400); }
footer h5{
  font-family:var(--font-cond);
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--gold-300);
  font-size:14px;
  margin-bottom:16px;
}
footer ul li{ margin-bottom:10px; }
footer a:hover{ color:var(--white); }
.footer-save-contact{ font-size:13px; color:rgba(255,255,255,0.55); }
.footer-save-contact:hover{ color:var(--gold-400); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:24px;
  gap:20px;
  flex-wrap:wrap;
  font-size:12.5px;
  color:rgba(255,255,255,0.5);
}
.footer-bottom .legal-links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-credit{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.08);
  text-align:center;
  font-size:11.5px;
  color:rgba(255,255,255,0.35);
}
.footer-credit a{ color:rgba(255,255,255,0.45); }
.footer-credit a:hover{ color:var(--gold-400); }

/* ================= MOBILE STICKY CTA ================= */
.mobile-sticky-cta{
  display:none;
  flex-direction:column;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:140;
  background:var(--navy-950);
  border-top:2px solid var(--gold-500);
}
.mobile-sticky-buttons{ display:flex; }
.mobile-sticky-btn{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  padding:20px 12px;
  font-family:var(--font-cond);
  font-size:18px;
  font-weight:700;
  letter-spacing:0.01em;
  text-transform:uppercase;
}
.mobile-sticky-call{ color:var(--white); background:var(--navy-900); }
.mobile-sticky-consult{ color:var(--white); background:var(--gold-500); }
.mobile-sticky-lang{
  padding:6px 0 8px;
  text-align:center;
  font-family:var(--font-cond);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gold-300);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1240px){
  .nav-desktop{ display:none; }
  .burger{ display:flex; }
  .header-phone{ display:none; }
  .header-lang-toggle-desktop{ display:none; }
}
@media (max-width: 1080px){
  /* Mirrors .hero-copy's padding-left at this breakpoint. */
  .header-inner.wrap{ padding-left:24px; padding-right:24px; }
  .hero-grid{ grid-template-columns:minmax(0, 1fr); min-height:auto; }
  .hero-copy{ padding:48px 24px 40px; order:2; }
  .hero-media{ min-height:420px; order:1; }
  .docket-grid{ grid-template-columns:1fr 1fr; }
  .insta-grid{ grid-template-columns:repeat(3, 1fr); }
  .about-grid{ grid-template-columns:1fr; gap:36px; }
  .footer-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 680px){
  body{ padding-bottom:99px; }
  .wrap{ padding:0 20px; }
  section{ padding:64px 0; }
  /* Padding mirrors .hero-copy's padding at this breakpoint so the header
     logo lines up with the hero heading below it; vertical padding is
     trimmed further for a shorter mobile header bar. */
  .header-inner.wrap{ padding:14px 20px; }
  .hero-copy{ padding:40px 20px 32px; }
  .hero-copy h1.hero-h1-big{ font-size:clamp(24px, 6.6vw, 32px); }
  .hero-ctas{ justify-content:center; }
  .hero-trust{ row-gap:20px; column-gap:16px; flex-wrap:wrap; justify-content:center; text-align:center; }
  .hero-trust .trust-item{ min-width:0; flex:1 1 40%; align-items:center; }
  .hero-trust-big .stars{ font-size:19px; letter-spacing:0; }
  .hero-trust-big .trust-item strong{ font-size:18px; }
  .hero-trust-big .trust-item span{ font-size:12px; }
  .hero-trust-big .trust-item:first-child span{ font-size:14px; white-space:nowrap; }
  .mobile-sticky-btn{ font-size:19px; padding:18px 6px; gap:6px; letter-spacing:-0.01em; }
  .review-card{ width:280px; }
  .docket-grid{ grid-template-columns:1fr; }
  .insta-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:28px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .final-cta-inner{ flex-direction:column; align-items:flex-start; }
  .stamp{ width:104px; height:104px; font-size:12px; top:20px; right:20px; }
  .attorney-tag{ left:20px; bottom:20px; padding:9px 14px; }
  .attorney-tag .name{ font-size:16px; }
  .hero-media-form{ padding:36px 16px; }
  .snapshot-card{ padding:24px 20px 20px; border-radius:14px; }
  .video-card{ padding:8px; border-radius:14px; max-width:340px; transform:none; }
  .video-frame{ max-height:520px; }
  .snapshot-glow{ width:340px; height:340px; }
  .snapshot-orbit{ width:260px; height:260px; }
  .snap-options{ grid-template-columns:1fr; }
  .snap-opt-wide{ grid-column:auto; }
  .mobile-sticky-cta{ display:flex; }
}

/* ================= ABOUT PAGE ================= */
.about-hero{
  background:var(--paper);
  padding:64px 0 56px;
  text-align:center;
}
.about-hero-compact{
  padding:40px 0 34px;
  position:relative;
  overflow:hidden;
}
.about-hero-compact::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(120deg, rgba(20,28,66,0.05) 0%, rgba(20,28,66,0) 40%, rgba(179,138,60,0.05) 100%);
  pointer-events:none;
}
.about-hero-compact .about-hero-inner{ position:relative; z-index:1; }
.about-hero-inner{
  max-width:680px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.about-hero-inner .about-hero-back{
  align-self:flex-start;
  margin-bottom:10px;
}
.about-hero h1{
  margin-top:14px;
  font-size:clamp(32px, 4.4vw, 52px);
  color:var(--navy-950);
  line-height:1.1;
}
/* .practice-article-hero: used on the redesigned two-column practice-area
   pages. The back link sits outside .about-hero-inner as a plain sibling
   (matching the .blog-hero pattern) so it isn't fighting .about-hero-inner's
   own centered flex column. But .about-hero itself sets text-align:center,
   which still centers the link's box since it's display:inline-flex — an
   inline-level box takes its position from the parent's text-align. Forcing
   it block-level here opts it out of that, so it hugs the true left edge. */
.practice-article-hero .blog-back-link{ display:flex; width:fit-content; margin-bottom:24px; }
/* Matches .blog-hero's tighter padding (the base .about-hero padding left
   too big a gap above the back link) and its H1 max-width (680px from
   .about-hero-inner was wrapping the heading more than necessary). */
.practice-article-hero{ padding:48px 0 32px; }
.practice-article-hero .about-hero-inner{ max-width:820px; }
.practice-article-hero h1{ font-size:clamp(28px, 3.8vw, 44px); }
.about-hero p{
  margin-top:16px;
  color:var(--ink-soft);
  font-size:17px;
  line-height:1.65;
  max-width:560px;
}
.about-hero-pill{
  margin-top:32px;
  display:flex;
  align-items:center;
  gap:14px;
}
.about-hero-pill a{
  display:inline-flex;
  align-items:center;
  padding:14px 30px;
  border-radius:2px;
  border:2px solid transparent;
  font-family:var(--font-cond);
  font-size:14px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.about-hero-pill a:hover{ transform:translateY(-2px); }
.about-hero-pill a.pill-gold{
  background:var(--gold-500);
  color:var(--white);
  box-shadow:0 14px 28px -14px rgba(179,138,60,0.6);
}
.about-hero-pill a.pill-gold:hover{ background:var(--gold-400); }
.about-hero-pill a.pill-ghost{
  background:var(--white);
  color:var(--navy-950);
  border-color:var(--navy-900);
}
.about-hero-pill a.pill-ghost:hover{ background:var(--navy-900); color:var(--white); }

.jump-tldr-link{
  display:inline-block;
  margin-top:20px;
  font-family:var(--font-cond);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .18s ease;
}
.jump-tldr-link:hover{ color:var(--gold-500); }
.legal-body-inner .article-meta + .jump-tldr-link{ margin-top:0; display:block; }

.meet-corey .about-photo img{
  width:100%;
  max-width:380px;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  border-radius:0;
  box-shadow:none;
}
.meet-corey .about-photo{ padding:0; width:auto; }
.meet-corey .about-photo::before{ content:none; }

.meet-corey{ padding:56px 0; }
.team-section{ background:var(--paper); border-top:1px solid var(--paper-line); padding:56px 0; }
.team-grid{
  margin-top:44px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:32px;
}
.team-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:344px;
  text-align:center;
}
.polaroid-flip{
  position:relative;
  width:100%;
  aspect-ratio:275 / 363;
  perspective:1400px;
  transition:transform .25s ease;
}
.team-card:hover .polaroid-flip{ transform:translateY(-4px); }
.polaroid-flip[data-flippable]{ cursor:pointer; }
.polaroid-flip[data-flippable]:focus-visible{ outline:3px solid var(--gold-500); outline-offset:4px; }
.polaroid-flip-inner{
  position:relative;
  width:100%;
  height:100%;
  transition:transform .6s cubic-bezier(.4,.1,.2,1);
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
}
.polaroid-flip.flipped .polaroid-flip-inner{ transform:rotateY(180deg); }
.polaroid-face{
  position:absolute;
  inset:0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.polaroid-face.polaroid-front img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.polaroid-face.polaroid-back{
  transform:rotateY(180deg);
  background:var(--paper-dim);
  border:1px solid var(--paper-line);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px;
}
.polaroid-face.polaroid-back p{
  font-family:var(--font-cond);
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink-soft);
}
.polaroid-close{
  position:absolute;
  top:10px; right:10px;
  width:26px; height:26px;
  border-radius:50%;
  border:none;
  background:var(--white);
  color:var(--navy-950);
  font-size:16px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
  transition:background .18s ease, color .18s ease;
}
.polaroid-close:hover{ background:var(--gold-500); color:var(--white); }
.team-card-title{
  margin-top:18px;
  font-family:var(--font-cond);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold-500);
}
.team-card-name{
  margin-top:4px;
  font-family:var(--font-display);
  font-size:20px;
  color:var(--navy-950);
}
.team-card-email{
  margin-top:10px;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1.5px solid var(--paper-line);
  color:var(--navy-900);
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.team-card-email:hover{
  background:var(--gold-500);
  border-color:var(--gold-500);
  color:var(--white);
}
.team-card-readmore{
  margin-top:14px;
  background:none;
  border:none;
  border-bottom:1px solid var(--gold-500);
  padding:0 0 2px;
  font-family:var(--font-cond);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--navy-900);
  cursor:pointer;
  transition:color .18s ease;
}
.team-card-readmore:hover{ color:var(--gold-500); }

@media (max-width: 1000px){
  .team-grid{ gap:24px; }
  .team-card{ width:313px; }
}
@media (max-width: 680px){
  .about-hero{ padding:48px 0 40px; }
  .about-hero-pill{ flex-direction:column; width:100%; max-width:280px; gap:12px; }
  .about-hero-pill a{ width:100%; justify-content:center; }
  .team-card{ width:100%; max-width:320px; }
}

/* ================= CONTACT PAGE ================= */
.contact-info-section{ background:var(--paper); scroll-margin-top:90px; padding:56px 0; }

.section-divider{ position:relative; }
.section-divider-full{ border-top:1px solid var(--paper-line); }
.section-divider::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:30%;
  border-top:1px solid var(--paper-line);
}
.section-divider-sm::before{ width:80px; }

.contact-split{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:40px;
  align-items:start;
}
.contact-form-card{
  max-width:760px;
  background:linear-gradient(160deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.15) 45%, rgba(255,255,255,0) 75%);
  border:1px solid var(--paper-line);
  box-shadow:0 30px 60px -30px rgba(10,15,39,0.25);
  border-radius:6px;
  padding:44px;
}
.contact-form-card h2{
  font-family:var(--font-display);
  font-size:clamp(22px, 2.4vw, 28px);
  color:var(--navy-950);
}
.contact-form-card > p{
  margin-top:8px;
  color:var(--ink-soft);
  font-size:15px;
}
.contact-form-card form{
  margin-top:24px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.form-row{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.form-row label{
  font-family:var(--font-cond);
  font-size:12.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.form-row input,
.form-row select,
.form-row textarea{
  padding:13px 14px;
  border:1.5px solid var(--paper-line);
  border-radius:9px;
  background:var(--white);
  font-family:var(--font-body);
  font-size:16px;
  color:var(--ink);
  appearance:none;
  transition:border-color .18s ease;
}
.form-row select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B3E4D' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline:none;
  border-color:var(--gold-500);
}
/* .calc-slider (range inputs) supplies its own flat-bar track styling;
   without this reset, a slider nested in a .form-row (as on the
   meal/rest break calculator) inherits the text-input's white
   background, border, radius, and padding on top of it, making the
   track look boxed instead of matching the borderless bar used on
   every other calculator's sliders. */
.form-row input[type="range"]{
  padding:0;
  border:none;
  border-radius:2px;
  background:var(--paper-line);
}
.form-row input:disabled,
.form-row select:disabled,
.form-row textarea:disabled{
  background-color:var(--paper);
  color:var(--ink-soft);
  opacity:0.6;
  cursor:not-allowed;
}
.form-row textarea{ resize:vertical; min-height:96px; }
.form-disclaimer{
  font-size:12.5px;
  line-height:1.6;
  color:var(--ink-soft);
}
.form-checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13.5px;
  color:var(--navy-900);
  cursor:pointer;
}
.form-checkbox input{
  margin-top:3px;
  flex:none;
  width:16px; height:16px;
  accent-color:var(--gold-500);
}

.contact-info-stack{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.contact-info-card{
  position:relative;
  padding:26px 26px 24px;
  background:linear-gradient(160deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.15) 45%, rgba(255,255,255,0) 75%);
  border:1px solid var(--paper-line);
  border-radius:6px;
}
.contact-info-card h3{
  font-family:var(--font-display);
  font-size:19px;
  color:var(--navy-950);
}
.contact-info-card p{
  margin-top:8px;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.6;
}
.contact-info-card a.info-link{
  display:inline-block;
  margin-top:10px;
  font-family:var(--font-cond);
  font-size:19px;
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--gold-500);
  transition:color .18s ease;
}
.contact-info-card a.info-link:hover{ color:var(--gold-400); }
.contact-save-link{
  display:flex;
  width:fit-content;
  align-items:center;
  gap:6px;
  margin-top:12px;
  padding:8px 14px;
  border:1.5px solid var(--paper-line);
  border-radius:8px;
  font-family:var(--font-cond);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--navy-950);
  transition:border-color .18s ease, color .18s ease;
}
.contact-save-link:hover{ border-color:var(--gold-500); color:var(--gold-500); }
.contact-info-card-note{ background:#FBF3E1; border-color:rgba(179,138,60,0.3); border-left:4px solid var(--gold-500); }
.contact-info-card-note p{ color:var(--navy-950); margin-top:10px; }
.contact-info-card-note p strong{ color:var(--navy-950); }

.service-area-section{ background:var(--paper); padding:56px 0; }
.service-area-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:center;
}
.service-area-copy{ padding-left:100px; }
.service-area-copy .eyebrow{ display:block; }
.service-area-copy h2{
  margin-top:10px;
  font-size:clamp(26px, 3.2vw, 38px);
  color:var(--navy-950);
  line-height:1.15;
}
.service-area-copy > p{
  margin-top:14px;
  color:var(--ink-soft);
  font-size:16px;
  line-height:1.7;
  max-width:480px;
}
.service-area-list{
  margin-top:26px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 24px;
}
.service-area-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--paper-line);
  font-family:var(--font-cond);
  font-size:18px;
  letter-spacing:0.02em;
  color:var(--navy-900);
}
.service-area-list li::before{ margin-top:7px; }
.service-area-address{
  display:block;
  margin-top:2px;
  font-family:var(--font-body, inherit);
  font-size:12px;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-soft);
}
.service-area-list li::before{
  content:"";
  flex:none;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gold-500);
  transition:transform .18s ease;
}
.service-area-list li a{
  color:inherit;
  text-decoration:none;
  transition:color .18s ease, transform .18s ease;
}
.service-area-list li a:hover,
.service-area-list li a:focus-visible{
  color:var(--gold-500);
  transform:translateX(4px);
}
.service-area-list li:has(a:hover)::before,
.service-area-list li:has(a:focus-visible)::before{
  transform:scale(1.5);
}
.service-area-map{
  position:relative;
  display:flex;
  justify-content:flex-start;
  margin-left:-55px;
}
.service-area-map::before{
  content:"";
  position:absolute;
  inset:-10%;
  background:radial-gradient(closest-side, rgba(179,138,60,0.2), rgba(179,138,60,0.06) 65%, transparent 82%);
  z-index:0;
}
.service-area-map-inner{
  position:relative;
  z-index:1;
  max-width:528px;
}
.service-area-map img{
  display:block;
  width:100%;
  height:auto;
  -webkit-mask-image:radial-gradient(ellipse 80% 84% at 50% 50%, black 88%, transparent 100%);
  mask-image:radial-gradient(ellipse 80% 84% at 50% 50%, black 88%, transparent 100%);
}

@media (max-width: 900px){
  .contact-split{ grid-template-columns:1fr; }
  .service-area-grid{ grid-template-columns:minmax(0, 1fr); gap:36px; }
  .service-area-copy{ padding-left:0; }
  .service-area-map{ order:-1; justify-content:center; margin-left:0; overflow:hidden; }
  .service-area-map-inner{ max-width:100%; }
}
@media (max-width: 680px){
  .service-area-list{ grid-template-columns:1fr; }
  .contact-form-card{ padding:28px 22px; }
}

/* ================= BACK TO TOP ================= */
.back-to-top{
  position:fixed;
  right:20px;
  bottom:38vh;
  z-index:60;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(243,239,230,0.7);
  color:var(--navy-900);
  border:1px solid var(--paper-line);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 16px -8px rgba(10,15,39,0.25);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, background .18s ease, color .18s ease;
}
.back-to-top.visible{ opacity:0.6; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ opacity:1; background:var(--white); color:var(--gold-500); }
@media (max-width: 680px){
  .back-to-top{ display:none; }
}

/* ================= PRACTICE AREAS PAGE ================= */
.practice-overview{ background:var(--paper); padding:0 0 32px; }

.practice-index{ background:var(--paper); padding:0; }
.practice-row{
  position:relative;
  padding:44px 0;
  border-top:1px solid var(--paper-line);
  overflow:hidden;
  scroll-margin-top:90px;
}
.practice-row:first-of-type{ border-top:none; }
.practice-row:nth-of-type(even){ background:var(--white); }
.practice-row .wrap{ position:relative; }
.practice-row-num{
  position:absolute;
  top:-14px;
  right:0;
  font-family:var(--font-display);
  font-size:clamp(50px, 5vw, 84px);
  font-weight:700;
  color:var(--paper-dim);
  line-height:1;
  z-index:0;
  user-select:none;
  pointer-events:none;
}
.practice-row:nth-of-type(even) .practice-row-num{ color:var(--paper); }
.practice-row-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:280px 1fr;
  gap:40px;
  align-items:start;
  padding-right:100px;
}
.practice-row-head h2{
  margin-top:8px;
  font-size:clamp(22px, 2.4vw, 30px);
  color:var(--navy-950);
  line-height:1.2;
}
.practice-row-head h2 a{
  color:inherit;
  transition:color .18s ease;
}
.practice-row-head h2 a:hover{ color:var(--gold-500); }
.practice-row-readmore{
  display:inline-block;
  margin-top:12px;
  font-family:var(--font-cond);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--gold-500);
  transition:color .18s ease;
}
.practice-row-readmore:hover{ color:var(--gold-400); }
.practice-sub-list{
  columns:2;
  column-gap:36px;
}
.practice-sub-list li{
  break-inside:avoid;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--paper-line);
  font-size:15.5px;
  line-height:1.4;
  color:var(--ink);
}
.practice-sub-list li::before{
  content:"";
  flex:none;
  margin-top:7px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold-500);
}
.practice-subcat-link{
  color:inherit;
  text-decoration:none;
  transition:color .18s ease;
}
.practice-subcat-link:hover{ color:var(--gold-500); text-decoration:underline; }

@media (max-width: 900px){
  .practice-row-grid{ grid-template-columns:1fr; gap:16px; padding-right:0; }
  .practice-sub-list{ columns:1; }
}
@media (max-width: 680px){
  .practice-row{ padding:32px 0; }
  .practice-row-num{ display:none; }
}

.city-select-wrap{
  position:relative;
  display:inline-block;
}
.city-select{
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  border:none;
  border-bottom:3px solid var(--gold-500);
  font-family:inherit;
  font-size:1em;
  font-weight:inherit;
  color:var(--gold-500);
  padding:0 34px 4px 2px;
  cursor:pointer;
}
.city-select:focus{ outline:none; }
.city-select-wrap::after{
  content:"";
  position:absolute;
  right:6px;
  bottom:14px;
  width:14px; height:14px;
  background:var(--gold-500);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  pointer-events:none;
}

/* ================= ARTICLE / LEGAL GUIDE PAGES ================= */
.legal-body-inner h3{
  margin-top:26px;
  margin-bottom:2px;
  font-family:var(--font-display);
  font-size:18px;
  color:var(--navy-950);
}
.legal-body-inner ul, .legal-body-inner ol{ margin-top:12px; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.legal-body-inner li{ line-height:1.6; }
.legal-body-inner li::marker{ color:var(--gold-500); }
.legal-body-inner .article-meta{
  font-family:var(--font-cond);
  font-size:13px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.key-points{
  margin:28px 0;
  padding:24px 26px;
  background:#FBF3E1;
  border:1px solid rgba(179,138,60,0.3);
  border-left:4px solid var(--gold-500);
  border-radius:6px;
}
.key-points h3{
  margin-top:0 !important;
  font-family:var(--font-cond) !important;
  font-size:13px !important;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--navy-900) !important;
}
.key-points ul{ margin-top:14px !important; list-style:disc !important; padding-left:22px !important; display:flex; flex-direction:column; gap:10px; }
.key-points li{ padding-left:4px; }
.source-list{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.source-list li{ font-size:14.5px; }
p.article-disclaimer{
  margin-top:32px;
  padding:14px 18px;
  background:var(--paper-dim);
  border-radius:6px;
  font-size:11.5px !important;
  line-height:1.55;
  color:var(--ink-soft);
}

/* ================= ARTICLE READABILITY + IMAGERY ================= */
.page-article .legal-body{ padding-top:36px; background:var(--paper); border-top:none; }
.page-article .legal-body-inner{
  font-size:17.5px;
  line-height:1.85;
  color:var(--ink);
}
.page-article .legal-body-inner p{ margin-top:20px; }
.page-article .legal-body-inner h2{
  margin-top:52px;
  font-size:25px;
  padding-top:20px;
  border-top:1px solid var(--paper-line);
}
.page-article .legal-body-inner h2::before{
  content:"";
  display:block;
  width:36px;
  height:3px;
  background:var(--gold-500);
  margin-bottom:14px;
}
.page-article .legal-body-inner h3{ font-size:19px; scroll-margin-top:100px; }

.article-hero-image{
  position:relative;
  height:380px;
  overflow:hidden;
}
.article-hero-image img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.article-hero-image::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,15,39,0.15) 0%, rgba(10,15,39,0.65) 100%);
}
.article-hero-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:1;
  padding:18px 0;
  color:rgba(255,255,255,0.85);
  font-family:var(--font-cond);
  font-size:13px;
  letter-spacing:0.03em;
}

.article-lede{
  margin:0 0 28px;
  padding:26px 30px;
  background:var(--paper);
  border-left:4px solid var(--gold-500);
  border-radius:0 8px 8px 0;
  font-family:var(--font-display);
  font-size:19px;
  font-style:italic;
  color:var(--navy-950);
  line-height:1.6;
}
.article-lede + p{ margin-top:0; }

.tldr{
  scroll-margin-top:100px;
  margin:24px 0 28px;
  padding:20px 24px;
  background:var(--navy-950);
  border-radius:8px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 14px;
}
.tldr-label{
  font-family:var(--font-cond);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.08em;
  color:var(--gold-400);
  flex:none;
}
.tldr p{
  margin:0 !important;
  color:rgba(255,255,255,0.88);
  font-size:15.5px;
  line-height:1.6;
  flex:1 1 260px;
}

.article-cta-banner{
  margin:44px 0;
  padding:32px 36px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  background:linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 100%);
  border-radius:12px;
  position:relative;
  overflow:hidden;
}
.legal-body-inner .article-cta-banner-outer{
  width:100vw;
  max-width:1240px;
  position:relative;
  left:50%;
  transform:translateX(-50%);
  padding:0 32px;
  box-sizing:border-box;
}
.legal-body-inner .article-cta-banner{ margin:24px 0; }
.article-cta-banner::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:0;
  width:4px;
  background:var(--gold-500);
}
.article-cta-banner-eyebrow{
  display:block;
  font-family:var(--font-cond);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold-400);
  margin-bottom:8px;
}
.article-cta-banner h3{
  margin:0 !important;
  font-size:22px !important;
  color:var(--white) !important;
}
.article-cta-banner p{
  margin:8px 0 0 !important;
  color:rgba(255,255,255,0.75);
  font-size:15px !important;
  line-height:1.5 !important;
}
.article-cta-banner .btn{ flex:none; text-decoration:none; }
.article-cta-banner .btn-gold{ color:var(--white) !important; }
@media (max-width: 680px){
  .article-cta-banner{ flex-direction:column; align-items:flex-start; padding:26px 24px; }
  .article-cta-banner .btn{ width:100%; }
}
.article-cta-banner-outer{
  position:relative;
}
.article-cta-banner-with-img{
  padding-right:36px;
}
.article-cta-banner-with-img.article-cta-banner-img-left{
  padding-right:36px;
  padding-left:36px;
}
.article-cta-banner-img{
  position:absolute;
  z-index:3;
  width:306px;
  height:auto;
  right:8px;
  bottom:auto;
  top:-166px;
  pointer-events:none;
}
.article-cta-banner-img-left .article-cta-banner-img{
  right:auto;
  left:8px;
  bottom:auto;
  top:-166px;
  width:306px;
}
@media (max-width: 1240px){
  .article-cta-banner-with-img{ padding-right:24px; }
  .article-cta-banner-with-img.article-cta-banner-img-left{ padding-left:24px; }
  .article-cta-banner-img{ display:none; }
}

.faq-block{
  margin-top:52px;
  padding:8px 32px 12px;
  background:var(--paper);
  border:1px solid var(--paper-line);
  border-radius:12px;
}
.faq-block h2{
  margin-top:24px !important;
  padding-top:0 !important;
  border-top:none !important;
}
.faq-block h2::before{ display:none !important; }
.faq-block-item{
  padding:22px 0;
  border-top:1px solid var(--paper-line);
}
.faq-block-item:first-of-type{ border-top:none; padding-top:8px; }
.faq-block-item:last-of-type{ padding-bottom:16px; }
.faq-block-item h3{
  margin-top:0 !important;
  color:var(--navy-950);
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.faq-block-item h3::before{
  content:"Q.";
  flex:none;
  color:var(--gold-500);
  font-family:var(--font-cond);
  font-weight:700;
}
.faq-block-item p{ margin-top:8px !important; }

.story-links{
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.story-link-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:18px 20px;
  background:var(--paper);
  border:1px solid var(--paper-line);
  border-radius:8px;
  text-decoration:none;
  transition:border-color .2s ease, transform .15s ease;
}
.story-link-card:hover{ border-color:var(--gold-500); transform:translateY(-2px); }
.story-link-platform{
  font-family:var(--font-cond);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:20px;
}
.story-link-youtube{ background:rgba(224,28,28,0.12); color:#C41818; }
.story-link-tiktok{ background:rgba(10,15,39,0.08); color:var(--navy-900); }
.story-link-reddit{ background:rgba(255,69,0,0.12); color:#CC3D00; }
.story-link-title{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  color:var(--navy-950);
  line-height:1.35;
}
.story-link-tag{
  font-family:var(--font-cond);
  font-size:12px;
  letter-spacing:0.02em;
  color:var(--ink-soft);
}
@media (max-width: 680px){
  .story-links{ grid-template-columns:1fr; }
}

.article-inline-image{
  margin:36px 0;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 24px 48px -24px rgba(10,15,39,0.35);
}
.article-inline-image img{ width:100%; height:auto; display:block; }
.article-inline-caption{
  padding:10px 16px;
  background:var(--navy-950);
  color:rgba(255,255,255,0.7);
  font-family:var(--font-cond);
  font-size:12.5px;
  letter-spacing:0.03em;
}

@media (max-width: 680px){
  .article-hero-image{ height:220px; }
  .page-article .legal-body-inner{ font-size:16.5px; }
  .article-lede{ padding:20px 20px; font-size:17px; }
}

/* ================= GLOSSARY POPUP ================= */
.glossary-term{
  background:none;
  border:none;
  padding:0;
  display:inline;
  font:inherit;
  color:var(--navy-950);
  border-bottom:1.5px dotted var(--gold-500);
  cursor:pointer;
}
.glossary-term:hover{ color:var(--gold-500); }
.glossary-popup{
  position:fixed;
  max-width:300px;
  background:var(--paper);
  border:1px solid var(--paper-line);
  color:var(--ink);
  padding:16px 18px;
  border-radius:10px;
  font-size:13.5px;
  line-height:1.55;
  box-shadow:0 24px 48px -16px rgba(0,0,0,0.3);
  z-index:500;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease;
}
.glossary-popup.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.glossary-popup-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.glossary-popup-photo{
  width:38px;
  height:38px;
  object-fit:cover;
  object-position:top center;
  border-radius:50%;
  background:var(--paper-dim);
  border:1px solid var(--paper-line);
  flex:none;
}
.glossary-popup-tag{
  font-family:var(--font-display);
  font-style:italic;
  font-size:14.5px;
  color:var(--gold-500);
}
.glossary-popup strong{
  display:block;
  margin-bottom:6px;
  font-family:var(--font-cond);
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:0.05em;
  color:var(--navy-900);
}
.glossary-close{
  position:absolute;
  top:8px; right:10px;
  background:none;
  border:none;
  color:var(--ink-soft);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:2px;
}
.glossary-close:hover{ color:var(--navy-950); }

/* ================= RESULTS PAGE: REVIEWS ================= */
.rr-rate-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:0 0 48px;
  padding:28px 0;
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
}
.rr-rate-stars{
  display:inline-flex;
  flex-direction:row-reverse;
  gap:6px;
  margin-top:22px;
}
.rr-rate-stars .rr-star{
  font-size:clamp(30px, 4vw, 42px);
  line-height:1;
  color:var(--paper-line);
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:inherit;
  transition:color .15s ease, transform .15s ease;
}
.rr-rate-stars .rr-star:hover,
.rr-rate-stars .rr-star:hover ~ .rr-star,
.rr-rate-stars:focus-within .rr-star:focus,
.rr-rate-stars:focus-within .rr-star:focus ~ .rr-star{
  color:var(--gold-500);
  transform:scale(1.08);
}
.rr-rate-label{
  font-family:var(--font-cond);
  font-size:14px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.rr-platform-row{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-bottom:36px;
}
.rr-platform-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  background:var(--white);
  border:1px solid var(--paper-line);
  border-radius:10px;
  cursor:pointer;
  padding:0;
  transition:transform .15s ease, box-shadow .15s ease;
}
.rr-platform-pill:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px -12px rgba(10,15,39,0.35);
}
.rr-platform-pill svg{ width:26px; height:26px; }
.rr-logo-img{
  border-radius:50%;
  object-fit:cover;
}
.rr-platform-pill .rr-logo-img{ width:26px; height:26px; }

.review-modal{
  position:fixed; inset:0; z-index:300;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.review-modal.open{ display:flex; }
.review-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(10,15,39,0.6);
}
.review-modal-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:440px;
  max-height:90vh;
  overflow-y:auto;
  background:var(--paper);
  border-radius:12px;
  padding:36px 32px 32px;
  text-align:center;
  box-shadow:0 40px 80px -24px rgba(10,15,39,0.5);
  animation:reviewModalIn .22s ease;
}
@keyframes reviewModalIn{
  from{ opacity:0; transform:translateY(12px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.review-modal-close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none;
  font-size:26px; line-height:1;
  color:var(--ink-soft);
  cursor:pointer;
  transition:color .15s ease;
}
.review-modal-close:hover{ color:var(--navy-950); }
.review-modal-card h3{
  margin-top:6px;
  font-family:var(--font-display);
  font-size:24px;
  color:var(--navy-950);
}
.review-modal-intro{ margin-top:8px; color:var(--ink-soft); font-size:15px; }
.review-modal-label{
  display:block;
  margin-top:24px;
  margin-bottom:8px;
  font-family:var(--font-cond);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-align:left;
}
.review-modal-select{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--paper-line);
  border-radius:6px;
  background:var(--white);
  font-family:var(--font-body);
  font-size:15px;
  color:var(--navy-950);
}
.review-modal-platforms{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:22px;
}
.review-modal-platform-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
}
.review-modal-platform-icon{ width:20px; height:20px; border-radius:50%; object-fit:cover; }
.review-modal-alt{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--paper-line);
  font-size:14px;
  color:var(--ink-soft);
}
.review-modal-alt a{ color:var(--navy-900); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.review-modal-alt a:hover{ color:var(--gold-500); }

.rr-grid-wrap{ position:relative; }
.rr-more-wrap{ text-align:center; margin-top:28px; }
.rr-more-wrap.hidden{ display:none; }
.rr-more-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 28px;
  background:transparent;
  border:2px solid var(--navy-900);
  border-radius:2px;
  color:var(--navy-950);
  font-family:var(--font-cond);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.rr-more-btn:hover{ background:var(--navy-900); color:var(--white); }

/* Pinterest-style masonry via CSS columns */
.rr-grid{
  columns:3 320px;
  column-gap:22px;
}
.rr-card{
  position:relative;
  break-inside:avoid;
  margin:0 0 22px;
  padding:26px 24px 20px;
  background:var(--white);
  border:1px solid var(--paper-line);
  border-radius:14px;
  box-shadow:0 10px 24px -18px rgba(10,15,39,0.3);
  display:block;
  transition:transform .2s ease, box-shadow .2s ease;
}
.rr-card.rr-hidden{ display:none; }
.rr-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 32px -18px rgba(10,15,39,0.35);
}
.rr-logo{
  position:absolute;
  top:18px;
  right:18px;
  width:22px;
  height:22px;
  flex:none;
}
.rr-quote{
  display:block;
  font-family:var(--font-display);
  font-size:46px;
  line-height:0.6;
  color:var(--gold-300);
  margin-bottom:6px;
}
.rr-card-top{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:10px;
}
.rr-stars{ color:var(--gold-500); font-size:14px; letter-spacing:1px; }
.rr-date{
  font-family:var(--font-cond);
  font-size:11.5px;
  color:var(--ink-soft);
}
.rr-text-wrap{ position:relative; }
.rr-text{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.rr-text-wrap.expanded .rr-text{
  -webkit-line-clamp:unset;
  overflow:visible;
}
.rr-readmore{
  display:none;
  margin-top:6px;
  background:none;
  border:none;
  padding:0;
  font-family:var(--font-cond);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--gold-500);
  cursor:pointer;
}
.rr-readmore.rr-show{ display:inline-block; }
.rr-card-foot{
  display:flex;
  flex-direction:column;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--paper-line);
}
.rr-name{
  font-family:var(--font-cond);
  font-weight:600;
  font-size:13.5px;
  color:var(--navy-950);
}
.rr-loc{
  font-size:11.5px;
  color:var(--ink-soft);
  margin-top:2px;
}
@media (max-width:680px){
  .rr-grid{ columns:1; }
  .rr-card{ padding:22px 20px 16px; }
}

/* ================= RESULTS PAGE: CLIENT STORIES (VIDEO CAROUSEL) ================= */
.cs-section{ background:var(--navy-950); padding:72px 0; }
.cs-carousel{ position:relative; }
.cs-track{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  cursor:grab;
  padding:4px 2px;
}
.cs-track::-webkit-scrollbar{ display:none; }
.cs-track.dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.cs-card{
  position:relative;
  flex:none;
  width:300px;
  aspect-ratio:4/3;
  border-radius:12px;
  overflow:hidden;
  scroll-snap-align:start;
  border:1px solid rgba(255,255,255,0.08);
}
.cs-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(0.6);
  pointer-events:none;
}
.cs-play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  border:2px solid rgba(255,255,255,0.7);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(2px);
}
.cs-play svg{ margin-left:3px; }
.cs-card-info{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  background:linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}
.cs-name{
  display:block;
  font-family:var(--font-cond);
  font-weight:700;
  font-size:14px;
  color:var(--gold-400);
}
.cs-type{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,0.8);
}
.cs-fade{
  position:absolute;
  top:0; bottom:0;
  width:70px;
  pointer-events:none;
  z-index:1;
  opacity:0;
  transition:opacity .2s ease;
}
.cs-fade-left{ left:0; background:linear-gradient(90deg, var(--navy-950) 0%, rgba(10,15,39,0) 100%); }
.cs-fade-right{ right:0; background:linear-gradient(270deg, var(--navy-950) 0%, rgba(10,15,39,0) 100%); }
.cs-fade.cs-visible{ opacity:1; }
.cs-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.3);
  color:var(--white);
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .2s ease;
}
.cs-arrow:hover{ background:var(--gold-500); border-color:var(--gold-500); }
.cs-arrow-prev{ left:-8px; }
.cs-arrow-next{ right:-8px; }
.cs-arrow[disabled]{ opacity:0; pointer-events:none; }
.cs-placeholder-note{
  margin-top:22px;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,0.4);
  font-style:italic;
}
@media (max-width:680px){
  .cs-card{ width:240px; }
  .cs-arrow{ display:none; }
}

/* ================= RESULTS PAGE: SETTLEMENTS ================= */
.settlement-tile.settlement-hidden{ display:none; }
.settlement-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  align-items:start;
  gap:24px;
}
.settlement-tile{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  perspective:1400px;
  cursor:pointer;
  border-radius:12px;
  transition:transform .25s ease;
  container-type:inline-size;
}
.settlement-tile:not(.flipped):hover{ transform:translateY(-6px); }
.settlement-tile:not(.flipped):hover .settlement-photo{ transform:scale(1.04); }
.settlement-tile:not(.flipped):hover .settlement-amount{ color:var(--gold-300); }
.settlement-tile:focus-visible{ outline:3px solid var(--gold-500); outline-offset:4px; }
.settlement-tile-inner{
  position:relative;
  width:100%;
  height:100%;
  transition:transform .6s cubic-bezier(.4,.1,.2,1);
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
}
.settlement-tile.flipped .settlement-tile-inner{ transform:rotateY(180deg); }
.settlement-face{
  position:absolute;
  inset:0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  border-radius:12px;
  overflow:hidden;
}
.settlement-face.settlement-front{
  position:absolute;
  background-image:url('../assets/settlement_bg.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.settlement-face.settlement-front::after{
  content:"";
  position:absolute;
  right:-12%;
  bottom:4%;
  width:80%;
  height:92%;
  background:radial-gradient(ellipse at center 55%, rgba(255,215,130,0.45) 0%, rgba(255,215,130,0.18) 42%, transparent 70%);
  filter:blur(18px);
  pointer-events:none;
}
.settlement-tile.settlement-tight-fit .settlement-face.settlement-front::after{
  width:67.5%;
  height:82%;
  bottom:8%;
}
.settlement-photo{
  position:absolute;
  right:-12%;
  bottom:0;
  width:80%;
  height:100%;
  background-size:contain;
  background-position:bottom center;
  background-repeat:no-repeat;
  z-index:1;
  transition:transform .5s ease, width .3s ease, height .3s ease;
}
.settlement-tile.settlement-tight-fit .settlement-photo{
  width:67.5%;
  height:90%;
}
.settlement-front-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  max-width:60%;
  padding:22px 20px;
  color:var(--white);
}
.settlement-eyebrow{
  font-family:var(--font-cond);
  font-size:clamp(10px, 3.2cqw, 12.5px);
  font-weight:700;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
}
.settlement-amount{
  margin-top:2px;
  font-family:var(--font-display);
  font-size:clamp(36px, 16cqw, 60px);
  font-weight:800;
  color:var(--gold-500);
  line-height:1;
  transition:color .3s ease;
}
.settlement-type{
  display:block;
  margin-top:10px;
  font-family:var(--font-cond);
  font-size:clamp(13px, 4.2cqw, 16px);
  font-weight:700;
  letter-spacing:0.01em;
  text-transform:uppercase;
  color:var(--white);
  line-height:1.28;
}
.settlement-occupation{
  display:block;
  margin-top:4px;
  font-family:var(--font-cond);
  font-size:clamp(11px, 3cqw, 13px);
  font-weight:500;
  letter-spacing:0.02em;
  color:rgba(255,255,255,0.7);
  line-height:1.25;
}
.settlement-tap-btn{
  position:absolute;
  left:20px;
  bottom:20px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  background:var(--white);
  border-radius:3px;
  color:var(--navy-950);
  font-family:var(--font-cond);
  font-size:clamp(10.5px, 1.5vw, 12.5px);
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
  width:fit-content;
  transition:background .2s ease, color .2s ease;
}
.settlement-tile:not(.flipped):hover .settlement-tap-btn{ background:var(--gold-500); color:var(--navy-950); }
.settlement-face.settlement-back{
  background:var(--navy-950);
  transform:rotateY(180deg);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:26px 26px 20px;
  color:var(--white);
}
.settlement-back h4{
  font-family:var(--font-display);
  font-size:19px;
  color:var(--gold-400);
  margin:0 0 4px;
}
.settlement-back-location{
  display:block;
  font-family:var(--font-cond);
  font-size:11.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--gold-300);
  margin:0 0 12px;
}
.settlement-back p{
  font-size:13.5px;
  line-height:1.55;
  color:rgba(255,255,255,0.8);
  margin:0 0 10px;
}
.settlement-back-fine{
  font-size:11px !important;
  line-height:1.5 !important;
  color:rgba(255,255,255,0.45) !important;
  margin-top:auto !important;
}
.settlement-tile-close{
  position:absolute;
  top:10px; right:10px;
  z-index:2;
  width:26px; height:26px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.12);
  color:var(--white);
  font-size:16px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.settlement-tile-close:hover{ background:var(--gold-500); color:var(--navy-950); }
.settlements-disclaimer{
  margin-top:30px;
  padding:16px 20px;
  background:var(--paper-dim);
  border-radius:6px;
  font-size:13px;
  line-height:1.6;
  color:var(--ink-soft);
  text-align:center;
}
@media (max-width:1080px){
  .settlement-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:680px){
  .settlement-grid{ grid-template-columns:1fr; }
}

/* ================= GLOSSARY PAGE ================= */
.glossary-az-grid{
  display:grid;
  grid-template-columns:repeat(13, max-content);
  justify-content:center;
  gap:10px 8px;
}
.glossary-az-grid a,
.glossary-az-grid .glossary-az-disabled{
  width:40px;
  height:40px;
  min-width:0;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
@media (max-width:900px){
  .glossary-az-grid{ grid-template-columns:repeat(7, max-content); }
}
@media (max-width:560px){
  .glossary-az-grid{ grid-template-columns:repeat(5, max-content); }
}
.faq-cat-nav-inner .glossary-az-disabled,
.glossary-az-disabled{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  padding:7px 10px;
  border-radius:999px;
  font-family:var(--font-cond);
  font-size:13px;
  font-weight:600;
  color:var(--paper-line);
}
.glossary-terms-list{
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
}
.glossary-entry{
  padding:12px 0;
  border-bottom:1px solid var(--paper-line);
  scroll-margin-top:100px;
}
.glossary-entry:last-child{ border-bottom:none; }
.glossary-entry h3{
  font-size:18px;
  color:var(--navy-950);
  margin:0 0 6px;
}
.glossary-entry p{
  font-size:15px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0;
}

/* ================= RESOURCES PAGE ================= */
.resources-section{ padding:56px 0; }
.resources-section-inner-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:32px;
  flex-wrap:wrap;
}
.resources-section-inner-head .eyebrow{ color:var(--gold-500); margin-bottom:10px; display:block; }
.resources-section-inner-head h2{ font-size:clamp(26px, 3vw, 34px); color:var(--navy-950); }
.btn-ghost-navy{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--navy-900);
  color:var(--navy-950);
  background:transparent;
  border-radius:8px;
  padding:11px 20px;
  font-family:var(--font-cond);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition:background .18s ease, color .18s ease;
}
.btn-ghost-navy:hover{ background:var(--navy-900); color:var(--white); }

.resource-article-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  max-width:1080px;
  margin:0 auto;
  border-top:1px solid var(--paper-line);
  border-left:1px solid var(--paper-line);
}
.resources-view-more{
  margin-top:32px;
  text-align:center;
}

.resources-pagination{
  margin-top:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}
.resources-pagination.hidden{ display:none; }
.pagination-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 20px;
  background:transparent;
  border:2px solid var(--navy-900);
  border-radius:2px;
  color:var(--navy-950);
  font-family:var(--font-cond);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, opacity .18s ease;
}
.pagination-btn:hover:not(:disabled){ background:var(--navy-900); color:var(--white); }
.pagination-btn:disabled{ opacity:0.35; cursor:default; }
.pagination-numbers{
  display:flex;
  align-items:center;
  gap:6px;
}
.pagination-num{
  min-width:36px;
  height:36px;
  padding:0 4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--paper-line);
  border-radius:50%;
  background:transparent;
  color:var(--ink-soft);
  font-family:var(--font-cond);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.pagination-num:hover{ border-color:var(--gold-500); color:var(--gold-500); }
.pagination-num.is-active{
  background:var(--navy-950);
  border-color:var(--navy-950);
  color:var(--white);
  cursor:default;
}
.pagination-ellipsis{
  width:20px;
  text-align:center;
  color:var(--ink-soft);
  font-size:14px;
  letter-spacing:0.05em;
}
@media (max-width:520px){
  .pagination-btn{ padding:9px 14px; font-size:12.5px; }
  .pagination-num{ min-width:32px; height:32px; font-size:13px; }
}

/* ---- Article tiles ---- */
.resource-article-card.resource-article-hidden{ display:none; }
.resource-article-card.resource-article-filtered-out{ display:none; }
.resource-article-card{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:var(--paper);
  border-right:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
  padding:14px 22px;
  text-decoration:none;
  opacity:1;
  transform:translateY(0) scale(1);
  transition:background .2s ease, opacity .3s ease, transform .3s ease;
}
.resource-article-card:hover{
  background:var(--paper-dim);
}
.resource-article-card.resource-article-entering{
  animation:resourceCardIn .4s ease both;
}
@keyframes resourceCardIn{
  from{ opacity:0; transform:translateY(10px) scale(0.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.resource-article-body{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
}
.resource-article-tag{
  display:inline-block;
  align-self:flex-start;
  font-family:var(--font-cond);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--gold-500);
}
.resource-article-card h3{
  margin-top:6px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:17.5px;
  line-height:1.28;
  color:var(--navy-950);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.resource-article-date{
  display:block;
  margin-top:6px;
  font-family:var(--font-cond);
  font-size:11px;
  letter-spacing:0.03em;
  color:var(--ink-soft);
}
.resource-article-readmore{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  font-family:var(--font-cond);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--navy-950);
  transition:gap .2s ease, color .2s ease;
}
.resource-article-card:hover .resource-article-readmore{
  gap:10px;
  color:var(--gold-500);
}
.resource-article-icon{
  flex:0 0 auto;
  width:100px;
  height:100px;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  transition:transform .25s ease;
}
.resource-article-card:hover .resource-article-icon{ transform:scale(1.06) rotate(-2deg); }

.resources-tools-section{ background:var(--paper); border-top:1px solid var(--paper-line); padding-bottom:80px; }

/* ===== Tool tile: same horizontal-card language as .resource-article-card
   (blog grid), but shorter, with the icon on the left instead of the
   right. Used on resources.html's teaser grid and the full
   all-tools-and-templates.html directory. ===== */
.tool-tile-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  max-width:1080px;
  margin:0 auto;
  border-top:1px solid var(--paper-line);
  border-left:1px solid var(--paper-line);
}
.tool-tile{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:16px;
  background:var(--paper);
  border-right:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
  padding:14px 22px;
  text-decoration:none;
  transition:background .2s ease;
}
.tool-tile:hover{ background:var(--paper-dim); }
.tool-tile-icon{
  flex:0 0 auto;
  width:68px;
  height:68px;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  transition:transform .25s ease;
}
.tool-tile:hover .tool-tile-icon{ transform:scale(1.06) rotate(-2deg); }
.tool-tile-text{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
}
.tool-tile-tag{
  display:inline-block;
  align-self:flex-start;
  font-family:var(--font-cond);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--gold-500);
}
.tool-tile-tag-template{ color:var(--navy-700); }
.tool-tile-text h3{
  margin-top:4px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:16px;
  line-height:1.28;
  color:var(--navy-950);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.tool-tile-text p{
  margin-top:3px;
  font-size:12.5px;
  line-height:1.4;
  color:var(--ink-soft);
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.tool-tile-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:4px;
  font-family:var(--font-cond);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--navy-950);
  transition:gap .2s ease, color .2s ease;
}
.tool-tile:hover .tool-tile-link{ gap:10px; color:var(--gold-500); }
.resources-tools-cta{ margin-top:36px; text-align:center; }

/* Teaser grid on resources.html only shows its top 8 tiles; the rest live
   on the full all-tools-and-templates.html directory. */
.tool-tile-grid-teaser .tool-tile:nth-child(n+9){ display:none; }

@media (max-width: 780px){
  .tool-tile-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .tool-tile-grid{ grid-template-columns:1fr; }
  .tool-tile{ padding:12px 16px; }
  .tool-tile-icon{ width:54px; height:54px; }
}
@media (max-width: 680px){
  .resource-article-grid{ grid-template-columns:1fr; }
  .resources-section-inner-head{ align-items:flex-start; }
}

/* ================= ABOUT FAQ ================= */
.about-faq-section{ background:var(--paper); padding:64px 0; }
.about-faq-list{
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.about-faq-item{
  background:var(--white);
  border:1px solid var(--paper-line);
  border-radius:10px;
  padding:18px 22px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.about-faq-item:hover{ border-color:rgba(179,138,60,0.4); }
.about-faq-item[open]{ box-shadow:0 16px 30px -24px rgba(10,15,39,0.25); }
.about-faq-item summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-family:var(--font-display);
  font-size:17px;
  color:var(--navy-950);
  line-height:1.4;
}
.about-faq-item summary::-webkit-details-marker{ display:none; }
.about-faq-item summary::after{
  content:"+";
  flex:none;
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid var(--paper-line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  font-size:16px;
  color:var(--navy-900);
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.about-faq-item[open] summary::after{
  content:"\2212";
  background:var(--gold-500);
  border-color:var(--gold-500);
  color:var(--white);
}
.about-faq-item p{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--paper-line);
  font-size:15px;
  line-height:1.7;
  color:var(--ink-soft);
}

/* ================= GLOSSARY SEARCH ================= */
.glossary-search-section{ background:var(--paper); padding:0 0 14px; }
.glossary-search{
  position:relative;
  max-width:520px;
  margin:0 auto;
  display:flex;
  gap:8px;
  background:var(--white);
  border:1px solid var(--paper-line);
  border-radius:10px;
  padding:6px;
  box-shadow:0 16px 32px -26px rgba(20,25,50,0.3);
}
.glossary-search input{
  flex:1;
  border:none;
  background:transparent;
  padding:10px 12px;
  font-family:var(--font-body);
  font-size:15px;
  color:var(--ink);
}
.glossary-search input:focus{ outline:none; }
.glossary-search input::placeholder{ color:var(--ink-soft); opacity:0.7; }
.glossary-search button{
  flex:none;
  border:none;
  cursor:pointer;
  border-radius:7px;
  width:40px;
  background:var(--gold-500);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .18s ease;
}
.glossary-search button:hover{ background:var(--gold-400); }
.glossary-search-results{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  background:var(--white);
  border:1px solid var(--paper-line);
  border-radius:10px;
  box-shadow:0 20px 40px -22px rgba(20,25,50,0.35);
  max-height:280px;
  overflow-y:auto;
  z-index:5;
}
.glossary-search-results a{
  display:block;
  padding:11px 16px;
  font-size:14.5px;
  color:var(--navy-950);
  border-bottom:1px solid var(--paper-line);
}
.glossary-search-results a:last-child{ border-bottom:none; }
.glossary-search-results a:hover{ background:var(--paper); color:var(--gold-500); }
.glossary-search-results .glossary-search-empty{
  padding:12px 16px;
  font-size:14px;
  color:var(--ink-soft);
}

/* ================= BLOG ARTICLE PAGE ================= */
.blog-hero{ background:var(--paper); padding:36px 0 32px; }
.blog-back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-cond);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.blog-back-link:hover{ color:var(--gold-500); }
/* Aligns with .calc-card-head-text below, which sits inset from the
   shared .wrap by the card's own centering offset (max-width:1040px)
   plus its left padding — the plain .wrap padding alone left this link
   sitting further left than the calculator content beneath it. */
.calc-hero-back-link{ margin-left:max(0px, calc((100% - 1040px) / 2 + 40px)); }
@media (max-width:860px){
  .calc-hero-back-link{ margin-left:22px; }
}
.blog-hero .resource-article-tag{
  display:block;
  margin-top:22px;
  background:none;
  color:var(--gold-500);
  padding:0;
  border-radius:0;
  box-shadow:none;
  font-size:11.5px;
  letter-spacing:0.08em;
}
.blog-meta{ margin-top:10px; font-size:14px; color:var(--ink-soft); }
.blog-hero h1{
  margin-top:10px;
  font-size:clamp(30px, 4vw, 44px);
  color:var(--navy-950);
  line-height:1.12;
  max-width:820px;
}
.blog-sub{
  margin-top:14px;
  font-size:17px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:720px;
}
.blog-hero-pill{ margin-top:20px; justify-content:center; }
@media (max-width:680px){
  .blog-hero-pill{ flex-direction:column; align-items:stretch; gap:10px; max-width:280px; }
  .blog-hero-pill a{ justify-content:center; }
}
.blog-hero-centered .resource-article-tag,
.blog-hero-centered h1,
.blog-hero-centered .blog-sub{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.blog-hero-centered .blog-meta{ text-align:center; }
.blog-hero-centered .blog-byline{ justify-content:center; }
.blog-hero-centered .blog-hero-pill{ margin-left:auto; margin-right:auto; }
.blog-byline{
  margin-top:24px;
  display:flex;
  align-items:center;
  gap:12px;
}
.blog-byline img{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
}
.blog-byline strong{ display:block; font-size:14.5px; color:var(--navy-950); }
.blog-byline span{ display:block; font-size:12.5px; color:var(--ink-soft); }

.blog-post-meta-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:22px;
}
.blog-post-meta-row .blog-byline{ margin-top:0; }
.blog-post-meta-row .blog-meta{
  margin-top:0;
  padding-left:14px;
  border-left:1px solid var(--paper-line);
  font-size:13.5px;
}
@media (max-width:480px){
  .blog-post-meta-row{ flex-direction:column; align-items:flex-start; gap:8px; }
  .blog-post-meta-row .blog-meta{ padding-left:0; border-left:none; }
}

.blog-body-section{ background:var(--paper); padding:44px 0 60px; }
.blog-layout{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:48px;
  align-items:start;
}
.blog-main{
  background:linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
  border:1px solid var(--paper-line);
  border-radius:14px;
  padding:36px 40px 40px;
  box-shadow:0 24px 44px -30px rgba(10,15,39,0.35);
}
.blog-main .article-inline-image{ margin:0 0 28px; }
.blog-main .article-inline-image img{ max-height:360px; width:100%; object-fit:cover; }
.blog-main p{ font-size:16px; line-height:1.75; color:var(--ink-soft); margin-top:16px; }
.blog-main h2{ margin-top:0; font-size:21px; color:var(--navy-950); }

.blog-toc{
  background:var(--paper);
  border-radius:10px;
  padding:22px 26px 24px;
  margin:8px 0 24px;
}
.blog-toc h2{ font-size:18px; margin-bottom:14px; }
.blog-toc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 24px;
}
.blog-toc-grid a{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size:14.5px;
  color:var(--navy-950);
  padding:4px 0;
}
.blog-toc-grid a span{
  font-family:var(--font-cond);
  font-weight:700;
  color:var(--gold-500);
  font-size:13px;
}
.blog-toc-grid a:hover{ color:var(--gold-500); }

.blog-share{
  display:flex;
  align-items:center;
  gap:10px;
  margin:24px 0 8px;
  padding:16px 0;
  border-top:1px solid var(--paper-line);
  border-bottom:1px solid var(--paper-line);
}
.blog-share span{
  font-family:var(--font-cond);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-right:4px;
}
.blog-share-btn{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--paper-line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--navy-900);
  transition:border-color .18s ease, color .18s ease;
}
.blog-share-btn:hover{ border-color:var(--gold-500); color:var(--gold-500); }

.blog-sign{
  display:flex;
  gap:18px;
  margin-top:32px;
}
.blog-sign-num{
  flex:none;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--gold-500);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-cond);
  font-weight:700;
  font-size:13px;
}
.blog-sign h2{ scroll-margin-top:100px; }
.blog-example{
  display:flex;
  gap:12px;
  margin-top:14px;
  background:var(--paper);
  border-radius:10px;
  padding:16px 18px;
}
.blog-example-icon{
  flex:none;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--white);
  border:1px solid var(--paper-line);
  color:var(--gold-500);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.blog-example-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}
.blog-example strong{
  display:block;
  font-family:var(--font-cond);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gold-500);
  margin-bottom:4px;
}

.paystub-illustration{
  margin:22px 0;
  max-width:640px;
}
.paystub-illustration svg{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
  box-shadow:0 20px 40px -24px rgba(10,15,39,0.3);
}
.paystub-lineitem{
  margin:14px 0;
  padding-left:16px;
  border-left:3px solid var(--gold-500);
}
.paystub-lineitem strong{
  display:block;
  font-family:var(--font-display);
  font-size:16px;
  color:var(--navy-950);
  margin-bottom:4px;
}
.paystub-lineitem p{
  margin:0;
  color:var(--ink-soft);
  font-size:14.5px;
  line-height:1.65;
}
.blog-example p{ margin-top:0 !important; font-size:14.5px !important; color:var(--ink) !important; }

.blog-cta-inline{
  margin-top:36px;
  padding:28px 30px;
  background:var(--navy-950);
  border-radius:12px;
  text-align:center;
}
.blog-cta-inline h3{ color:var(--white); font-size:19px; }
.blog-cta-inline p{ color:rgba(255,255,255,0.72) !important; margin-top:8px !important; font-size:14.5px !important; }
.blog-cta-inline .btn{ margin-top:16px; }

.blog-sidebar{
  display:flex;
  flex-direction:column;
  gap:20px;
  overflow:visible;
  align-self:start;
}
.blog-help-card{
  position:relative;
  background:linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
  border:1px solid var(--paper-line);
  border-radius:14px;
  padding:28px 24px 26px;
  text-align:center;
  box-shadow:0 24px 44px -30px rgba(10,15,39,0.35);
}
.blog-help-card-img{
  position:absolute;
  top:-144px;
  left:50%;
  transform:translateX(-50%);
  width:270px;
  height:auto;
  pointer-events:none;
}
.blog-help-card h3{ font-family:var(--font-display); font-size:20px; color:var(--navy-950); }
.blog-help-card-rule{ width:32px; height:2px; background:var(--gold-500); margin:10px auto 16px; }
.blog-help-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.65; margin-bottom:18px; }
.blog-help-card .btn-gold{ box-shadow:0 14px 26px -14px rgba(179,138,60,0.6); }

.blog-sidebar-card{
  background:linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
  border:1px solid var(--paper-line);
  border-radius:14px;
  padding:22px 22px 24px;
  box-shadow:0 24px 44px -30px rgba(10,15,39,0.35);
}
.blog-sidebar-card h3{ font-family:var(--font-display); font-size:18px; color:var(--navy-950); }
.blog-related-list{ margin-top:10px; display:flex; flex-direction:column; gap:4px; }
.blog-related-item + .blog-related-item{ padding-top:4px; border-top:1px solid var(--paper-line); }
.blog-related-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.blog-related-text{ flex:1; min-width:0; }
.blog-related-text .resource-article-tag{
  font-size:9.5px;
  background:none;
  color:var(--gold-500);
  padding:0;
  border-radius:0;
  box-shadow:none;
  margin-top:0;
}
.blog-related-text strong{
  display:block;
  margin-top:3px;
  font-family:var(--font-display);
  font-size:13px;
  line-height:1.3;
  color:var(--navy-950);
}
.blog-related-item:hover .blog-related-text strong{ color:var(--gold-500); }
.blog-related-meta{ display:block; margin-top:3px; font-size:11px; color:var(--ink-soft); }
.blog-related-thumb{ display:none; }

/* ---- Blog sidebar "free tools" ad: the vertical-banner1.gif artwork
   already carries its own headline, bullet points, and "Explore All
   Tools" button, so the tile itself is just a rounded, shadowed frame
   around the image with a hover lift. Different blog posts can swap
   this for .sidebar-ad-game (the 8-bit "Learn & Play" arcade promo
   below) instead of running both on one page, so which promo shows
   varies post to post rather than rotating within a single page. ---- */
.sidebar-ad-tools{
  display:block;
  overflow:hidden;
  border-radius:16px;
  line-height:0;
}
.sidebar-ad-tools img{ display:block; width:100%; height:auto; }

.sidebar-ad-game{
  background:#2b1608;
  border:3px solid #d9a441;
  overflow:hidden;
}
.sidebar-ad-game-screen{
  position:relative;
  height:120px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.2) 0 2px, transparent 2px 4px),
    linear-gradient(160deg, #6b4322 0%, #2b1a0d 100%);
  border-bottom:3px solid #d9a441;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
}
.sidebar-ad-game-body{ padding:16px 16px 18px; text-align:center; }
.sidebar-ad-game-tag{
  font-family:"Press Start 2P", var(--font-cond);
  font-size:8.5px;
  letter-spacing:0.05em;
  color:#e8c078;
}
.sidebar-ad-game-body h3{
  margin-top:10px;
  font-family:"Press Start 2P", var(--font-display);
  font-size:13px;
  line-height:1.6;
  color:#fff3e2;
}
.sidebar-ad-game-btn{
  display:inline-block;
  margin-top:14px;
  padding:9px 14px;
  background:#d9a441;
  color:#2b1608;
  font-family:"Press Start 2P", var(--font-cond);
  font-size:9px;
  letter-spacing:0.03em;
  animation:sidebarAdBlink 1.1s steps(1) infinite;
}
@keyframes sidebarAdBlink{ 50%{ opacity:0.4; } }
.sidebar-ad-game:hover .sidebar-ad-game-btn{ background:#f2c14e; }

@media (max-width: 1080px){
  .blog-layout{ grid-template-columns:1fr; }
  .blog-main{ padding:28px 24px 32px; }
  .blog-toc-grid{ grid-template-columns:1fr; }
}
@media (max-width: 680px){
  .blog-sign{ flex-direction:column; gap:10px; }
}

/* ---- blog page: legibility + polish overrides ---- */
.blog-main .tldr{
  background:var(--paper-dim);
  border:1px solid rgba(179,138,60,0.3);
  box-shadow:none;
}
.blog-main .tldr-label{ color:var(--gold-500) !important; }
.blog-main .tldr p{ color:var(--ink) !important; }

.blog-main .article-inline-image{
  border-radius:12px;
  box-shadow:none;
  border:1px solid var(--paper-line);
}
.blog-main .article-inline-caption{
  background:var(--paper);
  color:var(--ink-soft);
  font-size:13.5px;
}

.blog-calendly-card{ padding-bottom:14px; }
.blog-calendly-sub{ font-size:13.5px !important; color:var(--ink-soft) !important; margin-top:6px !important; margin-bottom:14px !important; }
.blog-calendly-card .calendly-inline-widget{ border-radius:10px; overflow:hidden; }

.blog-next-article{ margin-top:40px; }
.blog-next-article-label{
  display:block;
  font-family:var(--font-cond);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gold-500);
  margin-bottom:10px;
}
.blog-next-article-card{
  display:flex;
  gap:20px;
  align-items:center;
  background:var(--paper);
  border:1px solid var(--paper-line);
  border-radius:12px;
  padding:18px;
  transition:border-color .18s ease, transform .18s ease;
}
.blog-next-article-card:hover{ border-color:var(--gold-500); transform:translateY(-2px); }
.blog-next-article-thumb{
  flex:none;
  width:120px;
  height:100px;
  border-radius:8px;
  background-size:cover;
  background-position:center;
}
.blog-next-article-body{ flex:1; min-width:0; }
.blog-next-article-body .resource-article-tag{
  background:none;
  color:var(--gold-500);
  padding:0;
  border-radius:0;
  box-shadow:none;
  margin-top:0;
}
.blog-next-article-body h3{
  margin-top:6px;
  font-family:var(--font-display);
  font-size:17px;
  color:var(--navy-950);
  line-height:1.3;
}
.blog-next-article-body p{ margin-top:6px !important; font-size:14px !important; color:var(--ink-soft) !important; }
.blog-next-article-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  font-family:var(--font-cond);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--navy-950);
}
.blog-next-article-card:hover .blog-next-article-cta{ color:var(--gold-500); }

@media (max-width: 680px){
  .blog-next-article-card{ flex-direction:column; align-items:stretch; }
  .blog-next-article-thumb{ width:100%; height:140px; }
}

.blog-prev-next{
  margin-top:40px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.blog-prev-next-link{
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--paper);
  border:1px solid var(--paper-line);
  border-radius:14px;
  padding:22px 24px;
  min-width:0;
  transition:border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.blog-prev-next-link:hover{
  border-color:var(--gold-500);
  background:var(--paper-dim);
  transform:translateY(-3px);
  box-shadow:0 14px 28px -18px rgba(20,20,30,0.28);
}
.blog-prev-next-next{ justify-content:flex-end; text-align:right; }
.blog-prev-next-arrow{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--paper-line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--navy-900);
  font-size:17px;
  transition:transform .2s ease, color .2s ease, background .2s ease, border-color .2s ease;
}
.blog-prev-next-link:hover .blog-prev-next-arrow{
  color:var(--white);
  background:var(--gold-500);
  border-color:var(--gold-500);
}
.blog-prev-next-prev:hover .blog-prev-next-arrow{ transform:translateX(-3px); }
.blog-prev-next-next:hover .blog-prev-next-arrow{ transform:translateX(3px); }
.blog-prev-next-text{ min-width:0; display:flex; flex-direction:column; }
.blog-prev-next-next .blog-prev-next-text{ align-items:flex-end; }
.blog-prev-next-label{
  font-family:var(--font-cond);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold-500);
}
.blog-prev-next-title{
  margin-top:5px;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  line-height:1.32;
  color:var(--navy-950);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width: 680px){
  .blog-prev-next{ grid-template-columns:1fr; margin-top:32px; }
  .blog-prev-next-link{ padding:18px 20px; }
  .blog-prev-next-next{ justify-content:flex-end; text-align:right; }
}

/* ================= LEARN & PLAY (8-BIT WESTERN) ================= */
.learn-play-section{
  position:relative;
  overflow:visible;
  background:
    linear-gradient(180deg, rgba(20,12,5,0.55) 0%, rgba(20,12,5,0.35) 45%, rgba(20,12,5,0.75) 100%),
    url('../assets/Animations/background.png');
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
  padding:88px 0 44px;
  isolation:isolate;
}
.learn-play-stars{
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(135deg, rgba(217,164,65,0.07) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(45deg, rgba(217,164,65,0.05) 0 2px, transparent 2px 26px);
  z-index:0;
}
.learn-play-rider-track{
  position:absolute;
  top:-62px;
  left:0;
  width:100%;
  height:110px;
  overflow:visible;
  z-index:6;
  pointer-events:none;
}
.retro-rider{
  position:absolute;
  bottom:0;
  left:-150px;
  width:110px;
  height:147px;
  background-image:url('../assets/Animations/character_horse.png');
  background-repeat:no-repeat;
  background-size:440px 294px;
  background-position:0 0;
  image-rendering:pixelated;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,0.55));
  animation:learnPlayRiderFrames .6s steps(4) infinite, learnPlayRiderMove 9s linear infinite;
  pointer-events:none;
}
@keyframes learnPlayRiderFrames{
  from{ background-position-x:0; }
  to{ background-position-x:-440px; }
}
@keyframes learnPlayRiderMove{
  from{ left:-150px; }
  to{ left:100%; }
}

.learn-play-head{ text-align:center; max-width:640px; margin:0 auto 44px; position:relative; z-index:1; }
.learn-play-eyebrow{
  display:block;
  font-family:"Press Start 2P", var(--font-cond);
  font-size:11px;
  letter-spacing:0.08em;
  color:#e8c078;
  margin-bottom:16px;
}
.learn-play-title{
  font-family:"Press Start 2P", var(--font-display);
  font-size:clamp(22px, 3.4vw, 34px);
  line-height:1.5;
  color:#f2c14e;
  text-shadow:3px 3px 0 #6b3413;
}
.learn-play-sub{
  margin-top:18px;
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.6;
  color:rgba(255,239,214,0.75);
}

.learn-play-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
.learn-play-card{
  display:flex;
  flex-direction:column;
  background:#4a2f1a;
  border:3px solid #d9a441;
  box-shadow:6px 6px 0 rgba(0,0,0,0.4);
  transition:transform .15s ease, box-shadow .15s ease;
  text-decoration:none;
}
.learn-play-card:hover{
  transform:translate(-3px, -3px);
  box-shadow:9px 9px 0 rgba(0,0,0,0.4);
}
.learn-play-card-screen{
  position:relative;
  height:150px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.2) 0 2px, transparent 2px 4px),
    linear-gradient(160deg, #6b4322 0%, #2b1a0d 100%);
  border-bottom:3px solid #d9a441;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
}
.retro-walker{
  width:96px;
  height:112px;
  margin-bottom:6px;
  background-image:url('../assets/Animations/character_walking.png');
  background-repeat:no-repeat;
  background-size:672px 448px;
  background-position:0 0;
  image-rendering:pixelated;
  animation:learnPlayWalkFrames .8s steps(7) infinite;
}
.retro-walker-2{ animation-direction:reverse; transform:scaleX(-1); }
@keyframes learnPlayWalkFrames{
  from{ background-position-x:0; }
  to{ background-position-x:-672px; }
}
.learn-play-card-screen-mascot{ align-items:center; }
.learn-play-mascot{
  height:150px;
  width:auto;
  image-rendering:pixelated;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,0.5));
}
.learn-play-card-body{
  padding:22px 20px 24px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.learn-play-tag{
  font-family:"Press Start 2P", var(--font-cond);
  font-size:9.5px;
  letter-spacing:0.05em;
  color:#e8c078;
}
.learn-play-card-body h3{
  margin-top:12px;
  font-family:"Press Start 2P", var(--font-display);
  font-size:15px;
  line-height:1.5;
  color:#fff3e2;
}
.learn-play-card-body p{
  margin-top:12px;
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.6;
  color:rgba(255,239,214,0.65);
  flex:1;
}
.learn-play-play-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  padding:10px 16px;
  background:#d9a441;
  color:#2b1608;
  font-family:"Press Start 2P", var(--font-cond);
  font-size:10px;
  letter-spacing:0.03em;
  width:fit-content;
  transition:background .15s ease;
}
.learn-play-card:hover .learn-play-play-btn{ background:#f2c14e; }

.learn-play-grid-single{
  display:flex;
  justify-content:center;
}
.learn-play-card-single{
  width:100%;
  max-width:760px;
}
.learn-play-card-screen-single{
  height:340px;
}
.learn-play-card-body-single{
  align-items:center;
  padding:20px 20px 24px;
}
.learn-play-card-body-single .learn-play-play-btn{
  margin-top:0;
}
.retro-dancer{
  width:192px;
  height:128px;
  margin-bottom:4px;
  background-repeat:no-repeat;
  background-size:768px 512px;
  background-position:0 0;
  image-rendering:pixelated;
}

/* ---- Learn & Play 3D carousel ---- */
.lp-carousel{
  position:relative;
  z-index:1;
}
.lp-carousel-viewport{
  position:relative;
  height:560px;
  overflow:hidden;
}
.lp-carousel-track{
  position:relative;
  width:100%;
  height:100%;
}
.lp-carousel-slide{
  position:absolute;
  top:50%;
  left:50%;
  width:676px;
  max-width:88vw;
  transition:transform .4s cubic-bezier(.25,.8,.4,1), opacity .4s ease;
  will-change:transform, opacity;
}
.lp-carousel-slide .learn-play-card{ width:100%; }
.lp-carousel-slide .learn-play-card-screen-single{ height:auto; aspect-ratio:16 / 9; }
.lp-carousel-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(20,12,5,0.6);
  border:2px solid #d9a441;
  color:#f2c14e;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.lp-carousel-arrow:hover{ background:#d9a441; color:#2b1608; }
.lp-carousel-prev{ left:0; }
.lp-carousel-next{ right:0; }

@media (max-width: 680px){
  .lp-carousel-viewport{ height:340px; }
  .lp-carousel-arrow{ width:38px; height:38px; }
}

@media (max-width: 900px){
  .learn-play-grid{ grid-template-columns:1fr; }
}
@media (max-width: 680px){
  .learn-play-section{ padding-top:64px; }
  .learn-play-card-screen-single{ height:280px; }
}

/* ================= 404 PAGE ================= */
.error-404-section{
  background:var(--paper);
  padding:80px 0 96px;
  text-align:center;
}
.error-404-inner{
  max-width:560px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.error-404-inner h1{
  margin-top:14px;
  font-size:clamp(24px, 3.4vw, 36px);
  color:var(--navy-950);
  line-height:1.2;
}
.error-404-character{
  width:180px;
  height:180px;
  margin:28px 0;
  background-image:url('../assets/Animations/404_character.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  image-rendering:pixelated;
}
.error-404-inner p{
  color:var(--ink-soft);
  font-size:16.5px;
  line-height:1.65;
}
.error-404-actions{
  margin-top:32px;
  display:flex;
  align-items:center;
  gap:16px;
}
@media (max-width: 480px){
  .error-404-actions{ flex-direction:column; width:100%; max-width:280px; }
  .error-404-actions .btn{ width:100%; justify-content:center; }
}

/* ================= RSS PAGE ================= */
/* Single-column, full-width rows rather than a card grid: each tile runs
   the full container width ("longer") and the list is a tight, bordered
   stack with no card padding/shadow/gap, matching .resource-article-card's
   space-efficient pattern, so a long daily-growing archive doesn't turn
   into an endless scroll of oversized cards. */
.rss-grid{
  max-width:900px;
  margin:0 auto;
  border-top:1px solid var(--paper-line);
}
.rss-item-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 4px;
  border-bottom:1px solid var(--paper-line);
  text-decoration:none;
  transition:background .15s ease;
}
.rss-item-card:hover{ background:var(--paper-dim); }
.rss-item-main{ flex:1; min-width:0; }
.rss-item-source{
  display:block;
  margin-bottom:4px;
  font-family:var(--font-cond);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--gold-500);
}
.rss-item-card h3{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  color:var(--navy-950);
}
.rss-item-link{
  flex:none;
  font-family:var(--font-cond);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.rss-item-card:hover .rss-item-link{ color:var(--gold-500); }
@media (max-width: 680px){
  .rss-item-card{ padding:14px 2px; }
  .rss-item-link{ display:none; }
}

.rss-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  max-width:900px;
  margin:24px auto 0;
  font-family:var(--font-cond);
}
.rss-pagination-link{
  flex:none;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
}
.rss-pagination-link:hover{ color:var(--gold-500); }
.rss-pagination-nums{ display:flex; align-items:center; gap:6px; }
.rss-pagination-num{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:30px;
  border-radius:50%;
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.rss-pagination-num:hover{ background:var(--paper-dim); color:var(--navy-950); }
.rss-pagination-num.active{ background:var(--gold-500); color:var(--white); }
@media (max-width: 480px){
  .rss-pagination{ gap:12px; }
  .rss-pagination-nums{ flex-wrap:wrap; justify-content:center; }
}

/* ===== Severance pay calculator ===== */
.calc-hero{ padding-bottom:40px; }
.calc-section{
  background:var(--paper);
  padding:0;
}
.page-article .calc-article-body{ padding-top:30px; }
.page-article .calc-article-body .legal-body-inner > h2:first-child{
  margin-top:0;
  padding-top:0;
  border-top:none;
}
.calc-card{
  max-width:1040px;
  margin:0 auto;
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:14px;
  padding:44px 40px 40px;
}
.calc-card-head{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.calc-card-head-text{ max-width:600px; }
.calc-card-head h2{
  margin-top:6px;
  font-family:var(--font-display);
  font-size:clamp(32px, 4.2vw, 48px);
  line-height:1.1;
  color:var(--navy-950);
}
.calc-card-head-illustration{
  position:absolute;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.calc-card-head-illustration img{
  width:250px;
  height:250px;
  object-fit:contain;
  /* Blends the icon's light/white fill into the page background so it
     reads as line art rather than a white sticker, without needing to
     re-export the source asset. */
  mix-blend-mode:multiply;
  /* The source PNG has ~23% empty padding below the calculator graphic
     itself, so the box edge sits above the visible shape; shift down to
     align the calculator's visible bottom with the container bottom. */
  transform:translateY(22.7%);
}
.calc-card-head p{
  margin-top:10px;
  max-width:420px;
  color:var(--ink-soft);
  font-size:13.5px;
  line-height:1.6;
}
.calc-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:40px;
  align-items:stretch;
  margin-top:28px;
}

/* A transparent bordered panel with a soft light sheen in the corner,
   instead of a solid fill, so it reads as a distinct surface without
   covering the page's own background. */
.calc-inputs{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
  background:linear-gradient(160deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.15) 45%, rgba(255,255,255,0) 75%);
  border:1px solid var(--paper-line);
  border-radius:12px;
  padding:28px;
}
.calc-inputs-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:2px;
  color:var(--gold-500);
  font-family:var(--font-cond);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.calc-inputs-head-rule{
  flex:1;
  height:1px;
  background:var(--paper-line);
}
.calc-inputs label{
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--navy-950);
}
.calc-inputs input,
.calc-inputs select,
.calc-inputs textarea{
  font-size:16px;
  padding:11px 14px;
}
.calc-inputs .calc-dollar-input input{ padding-left:24px; }

.calc-row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  grid-auto-flow:column;
  gap:8px 16px;
}
/* Each field's label row and input are two DOM children of one
   .form-row, but that .form-row is a grid item of .calc-row-2 above,
   not the label/input themselves — so when one column's label wraps to
   a second line and the other doesn't, the two inputs land at
   different heights instead of forming a clean second row. Un-nesting
   .form-row with display:contents promotes the label-row and input to
   be direct grid items, so row 1 (labels) sizes to the tallest label
   across both columns and row 2 (inputs) starts at that same shared
   baseline for both fields. */
.calc-row-2 .form-row{ display:contents; }
.calc-row-2-keep{ grid-template-columns:1.4fr 1fr; }
/* Width utilities for fields whose typical entry is much shorter than
   a full column (a couple digits of hours, a percentage, a small
   count) so the input doesn't look oversized for what's typed into
   it. Left-aligned within its grid cell since max-width intentionally
   keeps it from stretching to fill the column. */
.calc-field-narrow > input,
.calc-field-narrow > select,
.calc-field-narrow > .calc-dollar-input,
.calc-field-narrow > .calc-affix-input{ max-width:120px; }
.calc-field-medium > input,
.calc-field-medium > select,
.calc-field-medium > .calc-dollar-input,
.calc-field-medium > .calc-affix-input{ max-width:190px; }
.calc-optional{
  text-transform:none;
  font-weight:500;
  letter-spacing:0;
  color:var(--ink-soft);
  opacity:0.75;
}
.calc-dollar-input{ position:relative; }
.calc-dollar-input::before{
  content:"$";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--ink-soft);
  font-size:15px;
  pointer-events:none;
}
.calc-dollar-input input{ padding-left:26px; }

.calc-affix-input{ position:relative; }
.calc-affix{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:var(--ink-soft);
  font-size:15px;
  pointer-events:none;
}
.calc-affix-left{ left:14px; }
.calc-affix-right{ right:14px; }
.calc-affix-input input{ padding-left:26px; padding-right:26px; }

/* ===== Tip pooling roster (dynamic add/remove rows) ===== */
.tip-roster-head{
  display:grid;
  grid-template-columns:1fr 90px 32px;
  gap:8px;
  padding:0 2px 6px;
  font-family:var(--font-cond);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.tip-roster-body{ display:flex; flex-direction:column; gap:8px; }
.tip-roster-row{
  display:grid;
  grid-template-columns:1fr 90px 32px;
  gap:8px;
  align-items:center;
}
.tip-roster-row input{
  padding:10px 12px;
  border:1.5px solid var(--paper-line);
  border-radius:9px;
  background:var(--white);
  font-family:var(--font-body);
  font-size:13.5px;
  color:var(--ink);
}
.tip-roster-row input:focus{ outline:none; border-color:var(--gold-500); }
.tip-roster-remove{
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:none;
  border:1.5px solid var(--paper-line);
  border-radius:9px;
  font-size:18px;
  line-height:1;
  color:var(--ink-soft);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.tip-roster-remove:hover{ border-color:#B33C3C; color:#B33C3C; }
.tip-roster-add{
  margin-top:4px;
  align-self:flex-start;
  padding:8px 14px;
  background:none;
  border:1.5px dashed var(--paper-line);
  border-radius:9px;
  font-family:var(--font-cond);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--gold-500);
  cursor:pointer;
  transition:border-color .15s ease;
}
.tip-roster-add:hover{ border-color:var(--gold-500); }
@media (max-width:560px){
  .tip-roster-head{ grid-template-columns:1fr 70px 28px; }
  .tip-roster-row{ grid-template-columns:1fr 70px 28px; }
}

/* ===== Tools & Templates grid: show 8 by default, "View All" reveals
   the rest ===== */
.tool-grid:not(.show-all) .tool-card:nth-child(n+9){ display:none; }

.calc-formula-options{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.calc-formula-opt{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:12px 14px;
  background:var(--white);
  border:1.5px solid var(--paper-line);
  border-radius:9px;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:600;
  color:var(--navy-950);
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.calc-formula-opt span{
  font-family:var(--font-cond);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.02em;
  color:var(--ink-soft);
  text-transform:none;
}
.calc-formula-opt:hover{ border-color:var(--gold-500); }
.calc-formula-opt.is-active{
  border-color:var(--gold-500);
  background:rgba(179,138,60,0.08);
}
.calc-formula-opt.is-active span{ color:var(--gold-500); }
.calc-submit-btn{
  margin-top:4px;
  width:100%;
  justify-content:center;
  background:var(--gold-500);
  color:var(--white);
}
.calc-submit-btn:hover{ background:var(--gold-400); }

.calc-result{
  display:flex;
  flex-direction:column;
  position:relative;
  min-width:0;
  background:transparent;
  color:var(--navy-950);
  border:1px solid var(--paper-line);
  border-radius:12px;
  padding:28px;
  box-shadow:0 8px 16px -6px rgba(10,15,39,0.35);
  scroll-margin-top:88px;
}
.calc-result-label{
  font-family:var(--font-cond);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gold-500);
}
.calc-result-amount{
  margin-top:8px;
  font-family:var(--font-display);
  font-size:clamp(27px, 3.4vw, 36px);
  font-weight:600;
  line-height:1.15;
  color:var(--navy-950);
}
.calc-result-estimate-note{
  margin:6px 0 0;
  font-size:12.5px;
  color:var(--ink-soft);
}
.calc-result-breakdown{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--paper-line);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.calc-result-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  font-size:14px;
  color:var(--ink-soft);
}
.calc-result-line span:last-child{ color:var(--navy-950); font-weight:600; }
.calc-result-line.calc-result-total span{ color:var(--navy-950); font-weight:700; font-size:15px; }

.calc-info-callout{
  display:flex;
  gap:12px;
  margin-top:18px;
  padding:14px 16px;
  background:var(--paper);
  border-radius:8px;
}
.calc-info-callout svg{ flex:none; color:var(--gold-500); margin-top:1px; }
.calc-info-callout p{ margin:0; font-size:13px; line-height:1.55; color:var(--ink-soft); }

.calc-consult-row{
  margin-top:20px;
  padding:18px 20px;
  background:var(--navy-950);
  border-radius:10px;
}
.calc-consult-row h4{
  font-family:var(--font-display);
  font-size:16px;
  color:var(--white);
  margin:0;
}
.calc-consult-row p{ margin:4px 0 10px; font-size:13px; color:rgba(255,255,255,0.7); line-height:1.5; }
.calc-consult-row a{
  font-family:var(--font-cond);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--gold-400);
  text-decoration:none;
}
.calc-consult-row a:hover{ color:var(--gold-300, var(--gold-400)); }

.calc-label-row{ display:flex; align-items:center; gap:6px; }
.calc-label-row label{ margin:0; }
.calc-tip.glossary-term{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:15px;
  height:15px;
  border:1px solid var(--paper-line);
  border-radius:50%;
  color:var(--ink-soft);
  padding:0;
  font-family:var(--font-cond);
  font-size:10px;
  font-weight:700;
  line-height:1;
}
.calc-tip.glossary-term:hover{ border-color:var(--gold-500); color:var(--gold-500); }
.calc-input-error{ border-color:#C0392B !important; }

.calc-result{ position:relative; overflow:hidden; }
.calc-result-inner{ display:flex; flex-direction:column; flex:1; }
.calc-result-inner.is-blurred{
  filter:blur(10px);
  pointer-events:none;
  user-select:none;
}
.calc-result-loading{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:rgba(243,239,230,0.55);
}
.calc-result-loading[hidden]{ display:none; }
.calc-result-loading img{ width:110px; height:auto; }
.calc-result-loading p{
  margin:0;
  font-family:var(--font-cond);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--gold-500);
}

@media (max-width: 860px){
  .calc-card{ padding:20px 22px 28px; }
  .calc-grid{ grid-template-columns:1fr; }
  /* grid-auto-flow:column (set on .calc-row-2 for its desktop 2x2
     layout) doesn't get undone just by collapsing to one column here —
     with only 1 explicit column but 2 explicit rows still in force,
     auto-placement keeps trying to fill column-first and spills every
     field past the first two into a phantom second column instead of
     stacking straight down. Resetting the flow to row is what actually
     makes it stack. */
  .calc-row-2, .calc-formula-options{ grid-template-columns:1fr; grid-auto-flow:row; }
  /* minmax(0, Nfr) instead of plain Nfr: an fr track's implicit minimum
     is auto (its content's width), not 0, so a <select> with a long
     option like "Semimonthly" was forcing this column wider than its
     1fr share and pushing the row past the card's edge at narrow
     widths. minmax(0, ...) lets the track shrink to the fr split and
     the select's own text truncate/wrap instead of blowing out the grid. */
  .calc-row-2-keep{ grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:8px; }
  .calc-card-head-illustration{ width:120px; height:120px; }
  .calc-card-head-illustration img{ width:82px; height:82px; }
}
@media (max-width: 560px){
  .calc-card-head-illustration{ display:none; }
}

/* ===== Compact "keep reading" backlink grid (replaces sidebar tiles) ===== */
.calc-links-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  margin:20px 0 8px;
}
.calc-links-grid a{
  display:block;
  padding:14px 16px;
  background:var(--paper);
  border:1px solid var(--paper-line);
  border-radius:9px;
  text-decoration:none;
  transition:border-color .15s ease, background .15s ease;
}
.calc-links-grid a:hover{ border-color:var(--gold-500); background:var(--white); }
.calc-links-grid .calc-links-tag{
  display:block;
  font-family:var(--font-cond);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--gold-500);
  margin-bottom:4px;
}
.calc-links-grid strong{
  display:block;
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:600;
  color:var(--navy-950);
  line-height:1.35;
}
@media (max-width:600px){
  .calc-links-grid{ grid-template-columns:1fr; }
}

/* ===== Shared "not legal advice" disclaimer callout, used on any tool/
   calculator/template page (severance calculator, resignation letter
   template, and future tools) ===== */
.tool-disclaimer{
  display:flex;
  gap:14px;
  margin-top:20px;
  padding:16px 20px;
  background:#FBF3E1;
  border:1px solid rgba(179,138,60,0.3);
  border-left:4px solid var(--gold-500);
  border-radius:8px;
}
.tool-disclaimer svg{ flex:none; color:var(--gold-500); margin-top:2px; }
.tool-disclaimer p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--navy-950); }

/* ===== Resignation letter template (and future letter/document
   generator tools) ===== */
.tpl-generator-grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:32px;
  align-items:start;
  margin-top:28px;
}
.tpl-side{ display:flex; flex-direction:column; gap:16px; position:sticky; top:100px; }
.tpl-tip-box{
  padding:20px;
  background:linear-gradient(160deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.15) 45%, rgba(255,255,255,0) 75%);
  border:1px solid var(--paper-line);
  border-radius:12px;
}
.tpl-tip-box-head{ display:flex; align-items:center; gap:10px; }
.tpl-tip-box-head svg{ flex:none; color:var(--gold-500); }
.tpl-tip-box h4{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  color:var(--navy-950);
}
.tpl-tip-box p{ margin-top:8px; font-size:13px; line-height:1.6; color:var(--ink-soft); }

.tpl-actions{ display:flex; flex-direction:column; gap:10px; }
.tpl-action-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border:1.5px solid var(--paper-line);
  border-radius:0;
  background:var(--white);
  font-family:var(--font-cond);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--navy-950);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.tpl-action-btn:hover{ border-color:var(--gold-500); }
.tpl-action-btn.tpl-action-primary{ background:var(--gold-500); border-color:var(--gold-500); color:var(--white); }
.tpl-action-btn.tpl-action-primary:hover{ background:var(--gold-400); border-color:var(--gold-400); }

.tpl-privacy-note{
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size:12px;
  line-height:1.55;
  color:var(--ink-soft);
}
.tpl-privacy-note svg{ flex:none; margin-top:2px; color:var(--gold-500); }

.tpl-paper-wrap{
  background:#FBFAF6;
  border:1px solid var(--paper-line);
  border-radius:6px;
  box-shadow:0 20px 40px -24px rgba(10,15,39,0.35);
  overflow:hidden;
  position:relative;
}
.tpl-paper-wrap::before{
  content:"";
  position:absolute;
  left:52px;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(179,60,60,0.35);
}
.tpl-paper-hole{
  position:absolute;
  left:24px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--paper-line);
  box-shadow:inset 0 2px 4px rgba(10,15,39,0.1);
}
.tpl-paper-hole:nth-child(1){ top:70px; }
.tpl-paper-hole:nth-child(2){ top:calc(50% + 60px); }
.tpl-paper{
  position:relative;
  padding:56px 48px 56px 84px;
  min-height:520px;
  font-family:'Courier New', Courier, monospace;
  font-size:14.5px;
  color:#2b2b28;
  background-image:repeating-linear-gradient(#FBFAF6 0, #FBFAF6 27px, rgba(216,207,182,0.4) 27px, rgba(216,207,182,0.4) 28px);
  background-position:0 8px;
}
.tpl-letter p{ line-height:28px; margin:0; }
.letter-field{
  display:inline-block;
  min-width:60px;
  padding:0 3px;
  border-bottom:1px dashed var(--gold-500);
  color:var(--ink-soft);
  font-style:italic;
  outline:none;
}
.letter-field.is-filled{ color:#2b2b28; font-style:normal; }
.letter-field:focus{ background:rgba(179,138,60,0.08); border-bottom-style:solid; }

/* ===== Disclaimer-gated action modal (Print/Copy/Download) ===== */
.tpl-modal{
  position:fixed; inset:0; z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.tpl-modal.open{ display:flex; }
.tpl-modal-backdrop{ position:absolute; inset:0; background:rgba(10,15,39,0.6); }
.tpl-modal-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:460px;
  max-height:90vh;
  overflow-y:auto;
  background:var(--paper);
  border-radius:12px;
  padding:32px;
  box-shadow:0 40px 80px -24px rgba(10,15,39,0.5);
  animation:reviewModalIn .22s ease;
}
.tpl-modal-card h3{
  font-family:var(--font-display);
  font-size:22px;
  color:var(--navy-950);
}
.tpl-modal-card p{ margin-top:12px; font-size:14px; line-height:1.65; color:var(--ink-soft); }
.tpl-modal-actions{ display:flex; gap:12px; margin-top:24px; }
.tpl-modal-cancel{
  flex:1;
  padding:12px 16px;
  background:transparent;
  border:1.5px solid var(--paper-line);
  border-radius:9px;
  font-family:var(--font-cond);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--ink-soft);
  cursor:pointer;
  transition:border-color .15s ease;
}
.tpl-modal-cancel:hover{ border-color:var(--navy-950); color:var(--navy-950); }
.tpl-modal-continue{ flex:1.4; }

@media (max-width:900px){
  .tpl-generator-grid{ grid-template-columns:1fr; }
  .tpl-side{ position:static; }
  .tpl-actions{ flex-direction:row; flex-wrap:wrap; }
  .tpl-action-btn{ flex:1; min-width:120px; }
}
@media (max-width:560px){
  .tpl-paper{ padding:44px 24px 44px 56px; }
  .tpl-paper-wrap::before{ left:32px; }
  .tpl-paper-hole{ left:16px; }
}

@media print{
  /* Zero out the browser's own page margin so it can't stack on top of
     the 1in we add via .tpl-paper's own padding below — otherwise the
     printed margins end up bigger than (and inconsistent with) the
     .doc download's 1in margins. */
  @page{ margin:0; }
  /* Collapse everything on a letter-template page down to just the
     letter itself. The old visibility:hidden approach left every
     hidden element's layout height in place, which pushed the actual
     letter onto page 1 while leaving several trailing blank pages
     behind it — display:none removes that height outright so the
     printed/exported letter is a single page. */
  .site-header, .mobile-nav, .mobile-sticky-cta, footer,
  main > section:not(#generator),
  #generator .calc-card-head,
  #generator .tpl-side,
  #generator .tool-disclaimer,
  #a11yTab, #a11yBackdrop, #a11yPanel,
  .glossary-popup{
    display:none !important;
  }
  #generator{ border:none !important; padding:0 !important; margin:0 !important; }
  #generator .wrap, #generator .calc-card, #generator .tpl-generator-grid{
    display:block !important; max-width:none !important; margin:0 !important; padding:0 !important;
  }
  .tpl-paper-wrap{ box-shadow:none !important; border:none !important; background:#fff !important; }
  .tpl-paper-wrap::before{ display:none !important; }
  .tpl-paper-hole{ display:none !important; }
  /* Match the .doc download's own inline styles exactly: Times New
     Roman, 12pt, 1.5 line-height, a full 1in margin on every side, and
     an extra 0.75in reserved at the top for letterhead, so print and
     download never look like two different documents. */
  .tpl-paper{
    background-image:none !important;
    background-color:#fff !important;
    padding:1.75in 1in 1in 1in !important;
    min-height:0 !important;
    font-size:12pt !important;
  }
  .tpl-paper, .tpl-letter, .letter-field{ font-family:'Times New Roman', Times, serif !important; color:#000 !important; }
  .tpl-letter p{ line-height:1.5 !important; margin:0 !important; }
  .letter-field{
    border-bottom:none !important;
    font-style:normal !important;
    min-width:0 !important;
    padding:0 !important;
  }
}

/* ===== Slider (shared ringed-thumb look used by every calculator with
   a range input) + preset pills ===== */
.calc-slider{
  -webkit-appearance:none;
  appearance:none;
  flex:1;
  height:3px;
  border-radius:2px;
  background:var(--paper-line);
  outline:none;
}
.calc-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--paper);
  border:3px solid var(--gold-500);
  box-shadow:inset 0 0 0 6px var(--navy-950);
  cursor:pointer;
}
.calc-slider::-moz-range-thumb{
  width:26px; height:26px;
  border-radius:50%;
  background:var(--paper);
  border:3px solid var(--gold-500);
  box-shadow:inset 0 0 0 6px var(--navy-950);
  cursor:pointer;
}
.calc-slider::-moz-range-track{ height:3px; border-radius:2px; background:var(--paper-line); }

.calc-result-schedule-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  font-size:13.5px;
  color:var(--ink-soft);
}
.calc-result-schedule-row span:last-child{ color:var(--navy-950); font-weight:600; white-space:nowrap; }
.calc-result-schedule-row + .calc-result-schedule-row{ margin-top:10px; }

/* ===== Overtime calculator: hourly rate + "all 7 days" toggle row,
   one slider per day of the week, and a 3-up regular/1.5x/2x stat
   row in the result panel ===== */
.calc-rate-toggle-row{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:28px;
}
/* Label sits above the switch, mirroring the Hourly Rate field's own
   label-above-control layout, instead of squeezing both onto one row
   next to the input — at in-between widths that row's own wrapping
   let the switch land underneath/overlapping the input's corner. */
.calc-toggle-block{ display:flex; flex-direction:column; gap:8px; }
.calc-toggle-block-label{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-cond); font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--ink-soft);
}
.calc-toggle-row{
  display:flex;
  align-items:center;
  height:41.5px;
  cursor:pointer;
}
.calc-toggle{ position:relative; flex:none; width:42px; height:24px; }
.calc-toggle input{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:pointer;
}
.calc-toggle-track{
  position:absolute; inset:0;
  background:var(--paper-line);
  border-radius:999px;
  transition:background .18s ease;
}
.calc-toggle-thumb{
  position:absolute; top:3px; left:3px;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--white);
  box-shadow:0 1px 3px rgba(10,15,39,0.3);
  transition:transform .18s ease;
}
.calc-toggle input:checked + .calc-toggle-track{ background:var(--gold-500); }
.calc-toggle input:checked + .calc-toggle-track .calc-toggle-thumb{ transform:translateX(18px); }
.calc-toggle-label{ font-size:14px; color:var(--navy-950); white-space:nowrap; }

.calc-day-sliders{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--paper-line);
}
/* A single-row variant (which normally opens with its own top divider
   under a "This Week" heading) — here it sits directly beneath the
   field's own label, so that divider is dropped. */
.calc-day-sliders-single{ margin-top:0; padding-top:0; border-top:none; }
.calc-day-row{
  display:grid;
  grid-template-columns:44px 1fr 52px;
  align-items:center;
  gap:16px;
}
.calc-day-slider{ width:100%; }
.calc-day-label{
  font-family:var(--font-cond);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.02em;
  color:var(--navy-950);
}
.calc-day-readout{
  text-align:right;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  color:var(--navy-950);
}
.calc-day-readout .unit{ font-family:var(--font-body); font-size:12px; font-weight:400; color:var(--ink-soft); margin-left:1px; }

.calc-week-total-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-top:20px;
  padding-top:16px;
  border-top:1px dashed var(--paper-line);
  font-family:var(--font-cond);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--navy-950);
}
.calc-week-total-row span:last-child{
  font-family:var(--font-display);
  text-transform:none;
  letter-spacing:0;
  font-size:20px;
  color:var(--navy-950);
}

.calc-ot-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin-top:18px;
}
.calc-ot-stat{
  background:var(--paper);
  border:1px solid var(--paper-line);
  border-radius:10px;
  padding:14px 12px;
  display:flex;
  flex-direction:column;
}
.calc-ot-stat .num{ font-family:var(--font-display); font-size:24px; font-weight:600; color:var(--navy-950); }
.calc-ot-stat .label{
  margin-top:4px;
  font-family:var(--font-cond);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--gold-500);
}
.calc-ot-stat .desc{ margin-top:2px; font-size:11px; line-height:1.35; color:var(--ink-soft); }
@media (max-width:480px){
  .calc-ot-stats{ grid-template-columns:1fr; }
  .calc-day-row{ grid-template-columns:36px 1fr 46px; gap:10px; }
}