/* Dhindsa Law — site stylesheet
   Reusable section/block system. Every rule is class-based so blocks can be
   lifted into other pages as-is. No inline styles anywhere in the markup. */

:root{
  --ink:#15120E;
  --ink-mid:#3D3A34;
  --ink-soft:#59564F;
  --ink-mute:#6E6B64;
  --paper:#fff;
  --paper-2:#FCFCFC;
  --cream:#FBF6EA;
  --cream-2:#FEFCF6;
  --gold:#ECC237;
  --gold-mid:#CC9933;
  --gold-deep:#8A6417;
  --gold-ink:#3F3415;
  --oat:#EFE6CF;
  --oat-2:#E7DABA;
  --oat-3:#D9C48C;
  --tint:#FBF3DE;
  --line:#EAE9E6;
  --line-2:#DEDDD9;
  --shade:#F1F1F2;
  --r-sm:7px;
  --r-md:18px;
  --r-lg:24px;
  --pad:max(clamp(16px,3vw,44px),calc((100% - 1440px) / 2));
  --gap:clamp(14px,1.6vw,22px);
  --t:.25s ease;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Offsets same-page anchor jumps (e.g. hero "Fill Out the Form") so the
   sticky header doesn't cover the top of the target section. */
[id]{scroll-margin-top:100px}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Figtree,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--gold-deep)}
button{font:inherit;color:inherit}

/* ---------- layout primitives ---------- */
.site{background:var(--paper);color:var(--ink)}
.section{padding:clamp(48px,6vw,96px) var(--pad)}
.section--flush-top{padding-top:clamp(26px,4vw,58px);padding-bottom:clamp(40px,5vw,80px)}
.section--cream{background:var(--cream)}
.section--stone{background:#F4F2EC}
.section--white{background:var(--paper)}
.section--divided{border-top:1px solid #EFE7D6}
.section--bleed{padding-left:0;padding-right:0;overflow:hidden}
.section--gold{background:linear-gradient(180deg,#F2DC9B,var(--gold));color:var(--ink)}
.section--center{text-align:center}
.inner{padding:0 var(--pad)}

/* ---------- section header block ---------- */
.sec-head{width:100%;margin-inline:auto;text-align:center}
.sec-head--left{text-align:left;margin-inline:0}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:transparent;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
}
.eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--gold)}
.sec-head .eyebrow::after{content:"";width:28px;height:2px;border-radius:2px;background:var(--gold)}
.eyebrow--paper{background:transparent}
.eyebrow--tint{background:#F6EDD5;border-color:transparent;color:#7A5A14}
.eyebrow--ink{border-color:rgba(21,18,14,.28);color:var(--gold-ink)}
.eyebrow--ink::before,.eyebrow--ink::after{background:var(--ink)}
.h1{margin:clamp(12px,1.4vw,18px) auto 0;max-width:15em;font-weight:700;font-size:clamp(36px,5.6vw,74px);line-height:1.04;letter-spacing:-.035em}
.h1__accent{background:linear-gradient(180deg,#B8862B,#7A5713);-webkit-background-clip:text;background-clip:text;color:transparent}
.sec-head > .h2:first-child,.panel__head > div > .h2:first-child,.section > .h2:first-child{margin-top:0}
.h2{margin:20px auto 0;max-width:22em;font-weight:700;font-size:clamp(28px,3.8vw,48px);line-height:1.1;letter-spacing:-.03em}
.h2--tight{max-width:18em}
.h2--flush{margin:0;max-width:14em}
.h2--hero{margin:22px auto 0;max-width:20em;font-size:clamp(30px,4.4vw,56px);line-height:1.06}
.h3{margin:0;font-weight:700;font-size:clamp(18px,1.7vw,22px);line-height:1.25;letter-spacing:-.02em}
.lede{margin:16px auto 0;font-size:15.5px;line-height:1.7;color:var(--ink-soft);text-wrap:pretty}
.lede--sm{font-size:15px;line-height:1.8}
.lede + .lede{margin-top:12px}
.body{margin:0;font-size:15px;line-height:1.8;color:var(--ink-soft);text-wrap:pretty}
.body + .body{margin-top:14px}
.body--sm{font-size:14.5px;line-height:1.75}
.note{margin:clamp(18px,2vw,24px) 0 0;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.kicker{margin:20px auto 0;font-size:14.5px;font-weight:700;color:var(--ink)}
@media (min-width:761px){.sec-head{width:80%}.sec-head--left{width:100%}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 26px;border:1px solid transparent;border-radius:var(--r-sm);
  font-size:14.5px;font-weight:600;cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
}
.btn--lg{padding:17px 28px;font-size:15px}
.btn--ink{background:var(--ink);color:var(--paper);font-weight:700}
.btn--ghost{background:var(--paper);color:var(--ink);border-color:var(--line-2)}
.btn--ghost-warm{background:var(--paper);color:var(--ink);border-color:#DED6C4}
.btn--outline-ink{background:transparent;color:var(--ink);border-color:rgba(21,18,14,.35)}
.btn:hover{background:var(--gold-deep);color:var(--paper);border-color:var(--gold-deep);transform:translateY(-2px)}
.btn--ink:hover{background:var(--gold-deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media (max-width:640px){
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%;padding:16px 22px;font-size:15px}
}
.btn-row--center{justify-content:center}
.btn-row--hero{margin:clamp(24px,3vw,36px) 0 clamp(26px,3.4vw,44px);justify-content:center}
.btn-row--divided{margin-top:clamp(24px,3vw,38px);padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--oat)}
.link-arrow{
  align-self:flex-start;padding-bottom:3px;font-size:13.5px;font-weight:600;color:var(--gold-deep);
  border-bottom:1px solid rgba(138,100,23,.35);transition:color .2s ease,border-color .2s ease;
}
.link-arrow:hover{color:var(--ink);border-color:var(--ink)}
.link-arrow--lg{font-size:14px}
.link-arrow--push{margin-top:auto}
.link-arrow--spaced{display:inline-block;margin-top:22px}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:60;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:14px 20px;padding:clamp(16px,2vw,26px) var(--pad);
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:padding .28s ease,background .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.hdr.is-stuck{
  padding-top:clamp(11px,1.4vw,18px);padding-bottom:clamp(11px,1.4vw,18px);
  border-bottom-color:var(--oat);box-shadow:0 10px 30px -24px rgba(21,18,14,.5);
}
.hdr.is-stuck .hdr__logo img{height:clamp(30px,2.4vw,35px)}
.hdr.is-stuck .hdr__cta{padding-top:11px;padding-bottom:11px}
.hdr__logo{display:flex;align-items:center}
.hdr__logo img{height:clamp(38px,3.4vw,50px);width:auto;display:block;transition:height .28s ease}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 10px;margin:0 auto;min-width:0;font-size:14px;font-weight:500}
.nav__link{padding:10px 12px;color:var(--ink-soft)}
.nav__link--active{color:var(--ink);font-weight:700}
.nav__group{position:relative;display:flex;align-items:center}
.nav__trigger{display:flex;align-items:center;gap:6px;padding:10px 12px;color:var(--ink-soft)}
.nav__chev{display:flex;transition:transform var(--t),color var(--t)}
.nav__panel{
  position:absolute;top:100%;left:0;padding-top:8px;z-index:40;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.nav__group:hover>.nav__panel,.nav__group:focus-within>.nav__panel{opacity:1;visibility:visible;transform:translateY(0)}
.nav__group:hover .nav__chev,.nav__group:focus-within .nav__chev{transform:rotate(180deg);color:var(--gold-deep)}
.nav__card{
  min-width:230px;padding:8px;border-radius:var(--r-sm);background:var(--paper);
  border:1px solid var(--oat);box-shadow:0 22px 44px -26px rgba(21,18,14,.45);
  display:flex;flex-direction:column;gap:2px;
}
.nav__sub{padding:10px 12px;border-radius:var(--r-sm);color:var(--ink-mid);font-size:13.5px;font-weight:500;white-space:nowrap;transition:background .18s ease,color .18s ease}
.nav__sub:hover{background:var(--tint);color:var(--gold-deep)}
.hdr__cta{padding:14px 22px;font-size:14px;transition:background var(--t),color var(--t),border-color var(--t),transform var(--t),padding .28s ease}

/* burger */
.burger{
  display:none;position:relative;width:48px;height:48px;padding:0;
  border:1px solid var(--oat);border-radius:var(--r-sm);background:var(--paper);cursor:pointer;
  transition:background var(--t),border-color var(--t);
}
.burger:hover{border-color:var(--oat-3);background:var(--tint)}
.burger__bar{position:absolute;left:50%;height:2px;border-radius:2px;background:var(--ink);transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .2s ease,width .32s ease}
.burger__bar:nth-child(1){top:16px;width:22px;transform:translateX(-50%)}
.burger__bar:nth-child(2){top:23px;width:14px;transform:translateX(-50%)}
.burger__bar:nth-child(3){top:30px;width:22px;transform:translateX(-50%)}
.burger.is-open .burger__bar:nth-child(1){top:23px;width:22px;transform:translateX(-50%) rotate(45deg)}
.burger.is-open .burger__bar:nth-child(2){opacity:0;width:0}
.burger.is-open .burger__bar:nth-child(3){top:23px;width:22px;transform:translateX(-50%) rotate(-45deg)}

/* ---------- mobile menu ---------- */
.mmenu{
  position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;
  background:var(--paper);transform:translateX(100%);visibility:hidden;
  transition:transform .42s cubic-bezier(.22,1,.36,1),visibility .42s;
  overflow-y:auto;
}
.mmenu.is-open{transform:translateX(0);visibility:visible}
.mmenu__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(16px,5vw,28px);border-bottom:1px solid var(--oat)}
.mmenu__top img{height:38px;width:auto;display:block}
.mmenu__list{display:flex;flex-direction:column;padding:0 clamp(16px,5vw,28px)}
.mmenu__row{border-bottom:1px solid var(--oat)}
.mmenu__row:last-child{border-bottom:0}
.mmenu__link,.mmenu__trigger{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:18px 0;background:transparent;border:0;text-align:left;cursor:pointer;
  font-size:17px;font-weight:600;color:var(--ink);transition:color .2s ease;
}
.mmenu__link:hover,.mmenu__trigger:hover{color:var(--gold-deep)}
.mmenu__trigger .acc__chev{display:flex;transition:transform .3s ease}
.mmenu__trigger[aria-expanded="true"] .acc__chev{transform:rotate(180deg);color:var(--gold-deep)}
.mmenu__sublist{display:flex;flex-direction:column;gap:2px;padding:0 0 16px 4px}
.mmenu__sub{padding:11px 0;font-size:15px;font-weight:500;color:var(--ink-soft)}
.mmenu__foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;padding:22px clamp(16px,5vw,28px) calc(28px + env(safe-area-inset-bottom));border-top:1px solid var(--oat)}
.mmenu__foot .btn{width:100%}
.is-locked{overflow:hidden}

@media (max-width:860px){
  .hdr{grid-template-columns:auto auto;justify-content:space-between}
  .nav,.hdr__cta{display:none}
  .burger{display:block}
}

/* ---------- accordion (shared: bio, FAQ, footer) ---------- */
.acc{display:flex;flex-direction:column}
.acc--ruled{border-top:1px solid var(--oat);margin-top:24px}
.acc--cards{gap:12px}
.acc__head{margin:0}
.acc__trigger{
  display:flex;align-items:center;gap:14px;width:100%;padding:18px 0;
  background:transparent;border:0;border-bottom:1px solid var(--oat);
  text-align:left;cursor:pointer;font-weight:700;letter-spacing:-.015em;color:var(--ink);
  font-size:clamp(16px,1.5vw,18px);line-height:1.35;transition:color .2s ease;
}
.acc__trigger:hover{color:var(--gold-deep)}
.acc__trigger--between{justify-content:space-between;padding:clamp(18px,1.8vw,24px);border-bottom:0;font-size:clamp(16px,1.5vw,18.5px);line-height:1.4;letter-spacing:-.01em}
.acc__icon{
  flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:var(--r-sm);background:#F3EBD6;color:var(--gold-deep);
  transition:background var(--t),color var(--t);
}
.acc__chev{display:block;line-height:1;transition:transform .3s ease}
.acc__panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .32s ease,opacity .22s ease}
.acc__clip{min-height:0;overflow:hidden}
.acc__body{padding:4px 0 18px clamp(0px,4vw,42px)}
.acc__body--inset{display:flex;flex-direction:column;gap:12px;padding:0 clamp(18px,1.8vw,24px) clamp(18px,1.8vw,24px)}
.acc__item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper-2);overflow:hidden}
.acc__trigger[aria-expanded="true"] .acc__icon{background:var(--ink);color:var(--gold)}
.acc__trigger[aria-expanded="true"] .acc__chev{transform:rotate(180deg)}
.acc__head:has(> .acc__trigger[aria-expanded="true"]) + .acc__panel{grid-template-rows:1fr;opacity:1}
.mmenu__row:has(> .mmenu__trigger[aria-expanded="true"]) > .acc__panel{grid-template-rows:1fr;opacity:1}
.bullets{display:flex;flex-direction:column;gap:6px;font-size:14.5px;line-height:1.7;color:var(--ink-soft)}

/* ---------- carousels / card rails ---------- */
.rail-hint{
  display:none;align-items:center;justify-content:flex-end;gap:8px;margin:12px 0 0;
  font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);
}
.rail-hint__arrow{display:flex;color:var(--gold-deep);animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(6px);opacity:1}}
@media (prefers-reduced-motion:reduce){.rail-hint__arrow{animation:none}}

.cards{
  display:flex;gap:var(--gap);margin-top:clamp(20px,2.4vw,32px);
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);
  padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none;
}
.cards::-webkit-scrollbar{width:0;height:0;display:none}
.cards > *{flex:0 0 82%;scroll-snap-align:start;min-width:0}
.cards--peek-lg > *{flex:0 0 min(86vw,392px)}

/* desktop: grids for <=4 cards, rail stays a rail for >4 */
@media (min-width:761px){
  .cards--grid{overflow:visible;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards--grid > *{flex:none}
}
@media (min-width:1000px){
  .cards--grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1080px){
  .cards--grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .rail-hint{display:flex}
}
.rail-hint--always{display:flex}

/* ---------- cards ---------- */
.card{
  position:relative;
  display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.2vw,28px);
  border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--oat);
  transition:border-color var(--t),transform var(--t),box-shadow var(--t);
}
.card:hover{border-color:#E3C96F;transform:translateY(-3px);box-shadow:0 14px 30px -20px rgba(21,18,14,.35)}
/* Stretches a card's one real link over the whole card so the entire surface
   is clickable, without wrapping everything in a second, redundant <a>
   (client request 2026-09-18). Covers every .card--media grid (service-cards,
   post-cards) and the plain .card shape (process-steps, scenario-cards) --
   ChargeCards' own "Read more" is a <span>, not an <a>, so it's unaffected;
   that card is already the link itself. */
.card__title a::after,
.card a.link-arrow--push::after{content:"";position:absolute;inset:0;z-index:1}
.card:has(> a.link-arrow--push){cursor:pointer}
.card__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card__num{font-weight:800;font-size:clamp(30px,3vw,40px);line-height:1;letter-spacing:-.04em;color:#F0E4C6}
.icon-tile{flex:none;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:var(--r-sm);background:var(--tint);color:var(--gold-deep)}

.card--reason{gap:16px;padding:clamp(22px,2.4vw,32px);border-radius:var(--r-lg);border:2px solid var(--oat-2)}
.card--reason:hover{border-color:var(--oat-3);box-shadow:0 16px 34px -22px rgba(21,18,14,.35)}

.card--media{gap:0;padding:0;overflow:hidden;border-radius:22px;border:1px solid var(--line);background:var(--paper-2);cursor:pointer}
.card--media:hover{border-color:var(--oat-3)}
.card__media{aspect-ratio:4/3;display:flex;align-items:flex-end;padding:14px;background:var(--shade);position:relative;overflow:hidden}
.card__caption{font-size:11.5px;line-height:1.45;color:var(--ink-mute)}
.card__body{padding:20px}
.card__title{margin:0 0 6px;font-weight:700;font-size:18px;line-height:1.3}
.card__meta{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-mute)}

.quote{margin:0;display:flex;flex-direction:column;background:var(--paper);border:1px solid #EFE7D6;border-radius:var(--r-sm);overflow:hidden}
.quote__head{display:flex;align-items:center;gap:14px;padding:18px clamp(18px,1.8vw,24px);background:linear-gradient(180deg,#F6E4B4,#EFD88F)}
.quote__initial{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-sm);background:var(--ink);color:var(--gold);font-size:17px;font-weight:800}
.quote__who{display:flex;flex-direction:column;gap:5px;min-width:0}
.quote__name{font-weight:700;font-size:15px;line-height:1.2;color:var(--ink)}
.quote__meta{font-size:12.5px;line-height:1.2;color:#5A4A1E}
.quote__stars{margin-left:auto;font-size:11.5px;letter-spacing:.08em;color:var(--ink)}
.quote__text{margin:0;padding:clamp(20px,2.2vw,28px);font-size:15px;line-height:1.85;color:#3C3830;text-wrap:pretty}

.grid{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr);margin-top:clamp(20px,2.4vw,32px)}
@media (min-width:640px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card--link{color:var(--ink)}
.card--link:hover{color:var(--ink)}
.card--link .link-arrow{pointer-events:none}
.prose{min-width:0}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* contact cards */
.contact-cards{display:grid;gap:clamp(12px,1.6vw,18px);margin-top:clamp(22px,2.6vw,32px);padding:0;list-style:none;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.contact-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.contact-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.contact-card{display:flex;flex-direction:column;gap:10px;padding:clamp(18px,2vw,24px);border:1px solid var(--oat);border-radius:var(--r-lg);background:var(--paper);transition:border-color var(--t),transform var(--t)}
.contact-card:hover{border-color:#E3C96F;transform:translateY(-2px)}
.contact-card__k{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.contact-card__v{font-size:clamp(17px,1.8vw,20px);font-weight:700;line-height:1.35;letter-spacing:-.015em;color:var(--ink)}
.contact-card__v a{color:var(--ink)}
.contact-card__v a:hover{color:var(--gold-deep)}
.contact-card__note{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}

/* map embed */
.map{margin-top:clamp(20px,2.4vw,30px);aspect-ratio:16/9;min-height:280px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--oat);background:var(--shade)}
.map iframe{display:block;width:100%;height:100%;border:0}
.facts{display:grid;gap:10px;margin:clamp(18px,2vw,26px) 0 0;padding:0;list-style:none}
@media (min-width:640px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.facts li{display:grid;gap:4px;padding:14px 16px;border:1px solid var(--oat);border-radius:var(--r-sm);background:var(--paper)}
.facts__k{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)}
.facts__v{font-size:14.5px;line-height:1.55;font-weight:600;color:var(--ink-mid)}
.badge-note{display:flex;align-items:center;gap:16px;margin-top:clamp(22px,2.6vw,32px);padding:clamp(16px,2vw,20px);border:1px solid var(--oat);border-radius:var(--r-sm);background:var(--paper)}
.badge-note__mark{flex:none;display:flex;align-items:flex-end;width:92px;height:62px;padding:8px;border-radius:var(--r-sm);background:var(--shade)}
.badge-note__mark span{font-size:10.5px;line-height:1.35;color:var(--ink-mute)}
.badge-note__mark img{width:100%;height:100%;object-fit:contain;display:block}
.badge-note p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-mid)}

/* notice / callout */
.notice{
  display:flex;gap:14px;margin-top:clamp(20px,2.4vw,30px);margin-inline:auto;text-align:left;padding:clamp(16px,2vw,22px);
  border:1px solid var(--oat-2);border-left:3px solid var(--gold);border-radius:var(--r-sm);
  background:var(--cream-2);font-size:14.5px;line-height:1.75;color:var(--ink-mid);
}
.notice p{margin:0}
.notice p + p{margin-top:10px}
.notice__icon{flex:none;color:var(--gold-deep)}

/* place / location cards */
.places{display:grid;gap:clamp(16px,2vw,26px);margin-top:clamp(24px,3vw,38px)}
@media (min-width:961px){.places{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
.place{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.4vw,30px);border-radius:var(--r-lg);background:var(--paper);border:2px solid var(--oat-2)}
.place--primary{border-color:var(--gold)}
.place__label{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.place__address{margin:0;font-weight:700;font-size:clamp(19px,2vw,24px);line-height:1.25;letter-spacing:-.02em}
.place__address span{display:block;font-weight:600;font-size:15px;color:var(--ink-soft);letter-spacing:0}
.place__note{margin:0;font-size:14.5px;line-height:1.7;color:var(--ink-soft)}
.place__group{display:flex;flex-direction:column;gap:10px;padding-top:clamp(14px,1.6vw,18px);border-top:1px solid var(--oat)}
.place__grouphead{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.place__ico{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--r-sm);background:var(--tint);color:var(--gold-deep)}
.rows{display:grid;gap:8px;margin:0}
.rows > div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.rows dt{font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.rows dd{margin:0;font-size:14px;line-height:1.5;font-weight:600;color:var(--ink-mid);text-align:right}
.rows dd a{color:var(--gold-deep);font-weight:700}
.rows--stack > div{display:grid;gap:3px;justify-content:normal}
.place__plain{margin:0;font-size:14px;line-height:1.6;color:var(--ink-mid)}
.place__plain a{color:var(--gold-deep);font-weight:700}
.rows--stack dd{text-align:left;font-weight:500;color:var(--ink-soft)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tags li{padding:7px 12px;border-radius:var(--r-sm);background:var(--tint);font-size:13px;font-weight:600;color:var(--gold-ink)}
.contacts{display:grid;gap:10px;margin:clamp(20px,2.4vw,30px) 0 0;padding:0;list-style:none}
@media (min-width:861px){.contacts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.contacts li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;padding:15px 16px;border:1px solid var(--oat);border-radius:var(--r-sm);background:var(--paper)}
.contacts__who{font-size:14px;font-weight:600;color:var(--ink-mid)}
.contacts__val{font-size:14.5px;font-weight:700;color:var(--gold-deep)}

/* link list block */
.linklist{display:grid;gap:10px;margin:clamp(20px,2.4vw,30px) 0 0;padding:0;list-style:none}
@media (min-width:861px){.linklist--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.linklist__link{
  display:flex;align-items:center;gap:14px;padding:clamp(16px,1.8vw,20px);
  border:1px solid var(--oat);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);
  transition:border-color var(--t),background var(--t),transform var(--t);
}
.linklist__link:hover{border-color:#E3C96F;background:var(--tint);transform:translateY(-2px);color:var(--ink)}
.linklist__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.linklist__title{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.linklist__meta{font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.linklist__arrow{margin-left:auto;flex:none;color:var(--gold-deep)}
.disclaimer{margin:clamp(24px,3vw,36px) 0 0;padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--oat);font-size:13px;line-height:1.75;color:var(--ink-mute)}

/* qa explorer: question list + media panel */
.explorer{display:grid;gap:clamp(18px,2.4vw,34px);margin-top:clamp(24px,3vw,40px)}
@media (min-width:961px){.explorer{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
.explorer__list{display:flex;flex-direction:column;gap:8px;min-width:0}
.explorer__tab{
  display:flex;align-items:center;gap:14px;width:100%;padding:clamp(14px,1.6vw,18px);
  border:1px solid var(--oat);border-radius:var(--r-sm);background:var(--paper);
  text-align:left;cursor:pointer;font-weight:600;font-size:15px;line-height:1.35;color:var(--ink-mid);
  transition:border-color var(--t),background var(--t),color var(--t),transform var(--t);
}
.explorer__tab:hover{border-color:var(--oat-3);transform:translateX(2px)}
.explorer__num{
  flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:var(--r-sm);background:#F3EBD6;color:var(--gold-deep);font-size:12.5px;font-weight:800;
  transition:background var(--t),color var(--t);
}
.explorer__tab[aria-selected="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper);font-weight:700}
.explorer__tab[aria-selected="true"] .explorer__num{background:var(--gold);color:var(--ink)}
.explorer__tab::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);opacity:.5}
.explorer__panels{min-width:0}
.explorer.is-stacked{grid-template-columns:minmax(0,1fr)}
.explorer.is-stacked .explorer__list{gap:10px}
.explorer.is-stacked .explorer__tab[aria-selected="true"]{border-bottom-left-radius:0;border-bottom-right-radius:0}
.explorer.is-stacked .explorer__panel{
  padding:clamp(16px,4vw,22px);margin-top:-10px;
  border:1px solid var(--ink);border-top:0;border-bottom-left-radius:var(--r-sm);border-bottom-right-radius:var(--r-sm);
  background:var(--paper);
}
.explorer__panel{display:grid;gap:clamp(16px,2vw,24px);animation:fadeUp .35s ease}
.explorer__panel[hidden]{display:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.explorer__panel{animation:none}}
.explorer__media{aspect-ratio:16/9;min-height:180px;border-radius:var(--r-md)}
.explorer__title{margin:0;font-weight:700;font-size:clamp(23px,2.6vw,34px);line-height:1.14;letter-spacing:-.025em}
.explorer__body{display:flex;flex-direction:column;gap:14px;font-size:15.5px;line-height:1.85;color:var(--ink-soft)}
.explorer__body p{margin:0;text-wrap:pretty}

/* prose statement block: rule + heading, body set in columns */
.statement{display:flex;flex-direction:column;gap:clamp(16px,2vw,26px)}
.statement__rule{width:64px;height:3px;border-radius:3px;background:var(--gold)}
.statement__title{margin:0;max-width:26em;font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.12;letter-spacing:-.03em}
.statement__body{font-size:15.5px;line-height:1.85;color:var(--ink-soft)}
.statement__body p{margin:0 0 16px;text-wrap:pretty;break-inside:avoid}
.statement__body p:last-child{margin-bottom:0}
@media (min-width:861px){
  .statement__body{columns:2;column-gap:clamp(30px,4vw,64px)}
  .statement__body--single{columns:1;max-width:72ch}
  .statement__body--wide{columns:1;max-width:none}
}
.statement .btn-row{margin-top:clamp(18px,2vw,26px)}
.faq > div:first-child{align-self:start}
/* Request Consultation only -- client asked for just the bare form, no
   intro/checklist column and no card background, centered and capped at 60%
   width on desktop (full width on mobile); every other page using
   enquiry-form (Contact, services, courthouses) keeps its own look. */
[data-page="request-consultation"] .form{background:transparent;border:none;padding:0;border-radius:0}
[data-page="request-consultation"] .faq{padding-top:clamp(20px,2.4vw,32px)}
[data-page="request-consultation"] .hero__cta{margin:clamp(14px,1.6vw,20px) 0 clamp(16px,2vw,24px)}
[data-page="request-consultation"] .hero__cta .btn{padding:13px 22px;font-size:14px}
@media (min-width:861px){
  [data-page="request-consultation"] .faq{display:block;max-width:60%;margin-inline:auto}
}
@media (min-width:861px){.prose-split__head{position:sticky;top:120px}}
.prose--rows{display:flex;flex-direction:column;counter-reset:prose}
.prose--rows .body{
  counter-increment:prose;position:relative;display:block;
  padding:clamp(18px,2vw,26px) 0 clamp(18px,2vw,26px) clamp(38px,4vw,54px);
  border-top:1px solid var(--oat);margin:0;
}
.prose--rows .body:first-child{border-top:0;padding-top:0}
.prose--rows .body::before{
  content:counter(prose,decimal-leading-zero);position:absolute;left:0;top:clamp(20px,2.1vw,28px);
  font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--gold-deep);
}
.prose--rows .body:first-child::before{top:3px}
.prose--rows .body + .body{margin-top:0}
.prose .body + .body{margin-top:14px}
.section .lede.sec-head{margin-top:clamp(22px,2.6vw,32px)}

/* ---------- stat strip ---------- */
.stats{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(24px,3vw,40px);list-style:none;padding:0}
@media (min-width:861px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{display:flex;flex-direction:column;gap:6px;padding:clamp(16px,1.8vw,22px);border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--oat);text-align:left}
.stat__value{font-weight:800;font-size:clamp(24px,2.6vw,34px);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.stat__label{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-soft)}

/* ---------- charge selector cards ---------- */
.card__label{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.card__cite{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-mute)}

/* ---------- penalty table ---------- */
.table-wrap{margin-top:clamp(22px,2.6vw,34px);overflow-x:auto;border:1px solid var(--oat);border-radius:var(--r-sm);background:var(--paper)}
.table{width:100%;border-collapse:collapse;min-width:520px}
.table th,.table td{padding:16px clamp(14px,1.6vw,22px);text-align:left;font-size:14.5px;line-height:1.5;border-bottom:1px solid var(--oat)}
.table thead th{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);background:var(--tint)}
.table tbody tr:last-child td{border-bottom:0}
.table td:first-child{font-weight:700}
.table__foot{margin:14px 0 0;font-size:13px;line-height:1.7;color:var(--ink-mute)}

/* ---------- enquiry form ---------- */
.section--gold .lede{color:var(--gold-ink)}
.form{margin-top:clamp(22px,2.6vw,32px);padding:clamp(20px,2.4vw,32px);border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--oat)}
.form__req{margin:0 0 18px;font-size:12.5px;color:var(--ink-mute)}
.form__steps{display:flex;align-items:center;gap:0;margin:0 0 18px;padding:0;list-style:none;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);counter-reset:fstep}
.form__steps li{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.form__steps li::before{
  counter-increment:fstep;content:counter(fstep);flex:none;
  display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  border:2px solid var(--oat-2);background:var(--paper);color:var(--ink-mute);
  font-size:13px;font-weight:800;letter-spacing:0;
  transition:background var(--t),border-color var(--t),color var(--t);
}
.form__steps li:not(:last-child)::after{
  content:"";flex:1;height:2px;margin:0 10px;border-radius:2px;background:var(--oat-2);
  transition:background var(--t);
}
.form__steps li[aria-current="step"]{color:var(--ink)}
.form__steps li[aria-current="step"]::before{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.form__steps li[data-done]{color:var(--gold-deep)}
.form__steps li[data-done]::before{border-color:var(--gold);background:var(--gold);color:var(--ink)}
.form__steps li[data-done]:not(:last-child)::after{background:var(--gold)}
.form__steps .form__steps-num{display:none}
.form__count{margin:0 0 18px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.form__legend{margin:0 0 14px;font-weight:700;font-size:clamp(17px,1.6vw,20px);letter-spacing:-.015em}
.form__grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.form__grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{display:flex;flex-direction:column;gap:7px}
.field__label{font-size:13.5px;font-weight:600;color:var(--ink-mid)}
.field__hint{font-size:12.5px;color:var(--ink-mute)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border:1px solid var(--oat-2);border-radius:10px;
  background:var(--cream-2);font:inherit;font-size:15px;color:var(--ink);
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--gold-deep);background:var(--paper);
  box-shadow:0 0 0 3px rgba(138,100,23,.14);
}
/* Custom chevron replaces the browser's native one, which sits flush against
   the edge with no control over its spacing -- this fixes that and matches
   the rest of the field styling instead of the OS's own select chrome. */
.field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6B64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px;
}
.field select:focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6417' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* Matter field: category pills, then a search-as-you-type combobox scoped to
   the chosen category (client request 2026-09-18) -- not in the approved
   templates, styled with the same field/card language as the rest of the form. */
.matter-cats{display:flex;flex-wrap:wrap;gap:8px}
.matter-cat{
  padding:9px 16px;border:1px solid var(--oat-2);border-radius:999px;background:var(--cream-2);
  font-size:13.5px;font-weight:600;color:var(--ink-mid);cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.matter-cat:hover{border-color:var(--gold-mid);color:var(--ink)}
.matter-cat.is-active{background:var(--ink);border-color:var(--ink);color:var(--gold)}
.combobox{position:relative;margin-top:2px}
.combobox[hidden]{display:none}
.combobox__control{position:relative;display:flex;align-items:center}
.combobox__input{padding-right:38px}
.combobox__clear{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:none;border-radius:7px;background:transparent;color:var(--ink-mute);cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.combobox__clear:hover{background:var(--shade);color:var(--ink)}
.combobox__listbox{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;max-height:240px;overflow-y:auto;
  margin:0;padding:6px;list-style:none;border:1px solid var(--oat);border-radius:12px;
  background:var(--paper);box-shadow:0 18px 40px -20px rgba(21,18,14,.4);
}
.combobox__listbox[hidden]{display:none}
.combobox__option{padding:9px 12px;border-radius:8px;font-size:14px;line-height:1.4;color:var(--ink-mid);cursor:pointer}
.combobox__option:hover,.combobox__option.is-active{background:var(--tint);color:var(--ink)}
.combobox__option[aria-selected="true"]{color:var(--gold-deep);font-weight:600}
.combobox__empty{padding:10px 12px;font-size:13.5px;color:var(--ink-mute)}

/* Date field: a custom calendar dropdown replaces the browser's native
   date input (client request 2026-09-18 -- didn't like the native picker's
   look), styled to match the combobox above rather than the OS's own UI. */
.datepicker{position:relative}
.datepicker__trigger{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:13px 14px;border:1px solid var(--oat-2);border-radius:10px;
  background:var(--cream-2);font:inherit;font-size:15px;color:var(--ink);text-align:left;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.datepicker__trigger:hover{border-color:var(--gold-mid)}
.datepicker__trigger[aria-expanded="true"]{
  outline:none;border-color:var(--gold-deep);background:var(--paper);box-shadow:0 0 0 3px rgba(138,100,23,.14);
}
.datepicker__placeholder{color:var(--ink-mute)}
.datepicker__icon{flex:none;display:inline-flex;color:var(--ink-mute)}
.datepicker__panel{
  position:absolute;left:0;top:calc(100% + 6px);z-index:30;width:296px;max-width:calc(100vw - 32px);padding:16px;
  border:1px solid var(--oat);border-radius:14px;background:var(--paper);
  box-shadow:0 18px 40px -20px rgba(21,18,14,.4);
}
.datepicker__panel[hidden]{display:none}
.datepicker__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.datepicker__title{font-size:14px;font-weight:700;color:var(--ink)}
.datepicker__nav{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:1px solid var(--oat-2);border-radius:8px;background:var(--paper);color:var(--ink-mid);cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.datepicker__nav:hover{background:var(--tint);border-color:var(--gold-mid)}
.datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px}
.datepicker__weekdays span{display:block;font-size:11px;font-weight:700;text-align:center;color:var(--ink-mute);text-transform:uppercase}
.datepicker__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.datepicker__cell{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:8px;background:transparent;font-size:13.5px;color:var(--ink-mid);cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.datepicker__cell--empty{cursor:default}
.datepicker__cell:not(.datepicker__cell--empty):not(:disabled):hover{background:var(--tint);color:var(--ink)}
.datepicker__cell.is-today{font-weight:700;color:var(--gold-deep)}
.datepicker__cell.is-selected{background:var(--ink);color:var(--gold);font-weight:700}
.datepicker__cell:disabled{color:var(--line-2);cursor:not-allowed}
.datepicker__foot{display:flex;justify-content:flex-end;margin-top:10px;padding-top:10px;border-top:1px solid var(--oat)}
.datepicker__clear{border:none;background:transparent;padding:6px 10px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--gold-deep);cursor:pointer;transition:background .15s ease}
.datepicker__clear:hover{background:var(--shade)}

.form__panel[hidden]{display:none}
.form__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.form__note{margin:14px 0 0;font-size:12.5px;color:var(--ink-mute)}
.form__summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:16px;border:1px dashed var(--oat-2);border-radius:var(--r-sm);font-size:13.5px;color:var(--ink-soft)}
.checklist{display:flex;flex-direction:column;gap:10px;margin:clamp(18px,2vw,24px) 0 0;padding:0;list-style:none}
.checklist li{display:flex;gap:10px;font-size:14.5px;line-height:1.6;color:var(--ink-mid)}
.checklist li::before{content:"";flex:none;width:7px;height:7px;margin-top:8px;border-radius:50%;background:var(--gold)}

/* ---------- sticky action bar (mobile) ---------- */
.actionbar{display:none}
@media (max-width:760px){
  .actionbar{
    display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-top:1px solid var(--oat);
  }
  .actionbar .btn{flex:1;padding:15px 12px;font-size:14.5px}
  .footer{padding-bottom:calc(28px + 76px)}
}

/* ---------- floating consultation button (site-wide) ---------- */
.fab-dock{
  position:fixed;z-index:80;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
}
@media (max-width:760px){
  body:has(.actionbar) .fab-dock{bottom:calc(86px + env(safe-area-inset-bottom))}
}
.fab{
  display:inline-flex;align-items:center;gap:10px;padding:15px 22px 15px 18px;border:none;border-radius:999px;
  background:var(--ink);color:var(--gold);font:inherit;font-size:14px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;box-shadow:0 14px 30px -14px rgba(21,18,14,.55),0 0 0 1px rgba(236,194,55,.22) inset;
  transition:background var(--t),color var(--t),box-shadow var(--t),transform var(--t);
}
.fab:hover{background:var(--gold-deep);color:var(--paper);transform:translateY(-2px)}
.fab:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.fab-dock.is-open .fab{opacity:0;visibility:hidden;pointer-events:none;transform:scale(.9)}
.fab__icon{display:inline-flex;width:19px;height:19px;flex:none}
.fab__icon svg{width:100%;height:100%}
@media (max-width:420px){.fab{padding:13px 18px 13px 15px;font-size:13px}.fab__icon{width:17px;height:17px}}

.fab-card{
  width:min(340px,calc(100vw - 36px));padding:24px 22px 22px;border-radius:var(--r-lg);background:var(--paper);
  border-top:4px solid var(--gold);box-shadow:0 30px 60px -24px rgba(21,18,14,.5);position:relative;
}
.fab-card[hidden]{display:none}
.fab-card__close{
  position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:none;border-radius:var(--r-sm);background:transparent;color:var(--ink-mute);cursor:pointer;
  transition:background var(--t),color var(--t);
}
.fab-card__close:hover{background:var(--shade);color:var(--ink)}
.fab-card__eyebrow{margin:0 0 8px;padding-right:26px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.fab-card__title{margin:0 0 10px;font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.fab-card__desc{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.fab-card__actions{display:flex;flex-direction:column;gap:9px}
.fab-card__actions .btn{width:100%;padding:13px 18px;font-size:13.5px}
.btn--whatsapp{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#25D366;color:#fff;border-color:#25D366}
.btn--whatsapp:hover{background:#1EBE5A;border-color:#1EBE5A;color:#fff}

/* ---------- media placeholders ---------- */
.media{display:flex;align-items:flex-end;padding:16px;border-radius:clamp(16px,1.8vw,22px);background:var(--shade)}
.media__caption{font-size:12px;line-height:1.5;color:var(--ink-mute)}
.media--hero{aspect-ratio:16/9;min-height:0;border-radius:clamp(16px,2vw,26px);padding:18px;background-image:radial-gradient(90% 120% at 50% 0%,rgba(204,153,51,.14),rgba(204,153,51,0) 65%)}
.media--hero .media__caption{font-size:12.5px;text-align:left}
.media--portrait{aspect-ratio:4/5;min-height:300px}

/* ---------- split (text + image) blocks ---------- */
.split{display:grid;gap:clamp(20px,2.4vw,34px);align-items:start;margin-top:clamp(28px,3.4vw,44px)}
.split--panel{padding:clamp(20px,2.6vw,36px);background:var(--paper);border:1px solid var(--line);border-radius:clamp(20px,2.2vw,28px)}
.split--middle{align-items:center}
.split__text{display:flex;flex-direction:column;min-width:0}
.split__lead{margin:0 0 18px;font-weight:700;font-size:clamp(19px,1.8vw,23px);line-height:1.35;letter-spacing:-.015em}
@media (min-width:861px){
  .split{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split--reverse .split__media{order:-1}
}
/* mobile order: eyebrow → heading → image → text → CTA */
@media (max-width:860px){
  .split__media{order:1}
  .split__text{order:2}
  .split__text .split__lead{order:1}
  .split__text .body,.split__text .acc{order:2}
  .split__text .btn-row{order:3}
}

/* ---------- charges filter block ---------- */
.panel{padding:clamp(24px,3.2vw,56px) clamp(20px,2.8vw,48px);border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--oat)}
.panel__head{display:grid;gap:clamp(18px,2.4vw,44px);align-items:end}
@media (min-width:861px){.panel__head{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,2.8vw,36px);padding-bottom:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--oat)}
.tab{
  display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:var(--r-sm);
  border:1px solid #E6DCC2;background:var(--paper);color:var(--ink-mid);
  font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.tab:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
.tab__count{font-size:11.5px;font-weight:700;color:var(--gold-deep)}
.tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tab[aria-selected="true"] .tab__count{color:rgba(255,255,255,.7)}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,236px),1fr));gap:10px;margin-top:clamp(20px,2.4vw,30px)}
.chip{
  display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:var(--r-sm);
  border:1px solid #EDE4CC;background:var(--cream-2);color:var(--ink);
  font-size:14.5px;font-weight:600;line-height:1.35;text-wrap:pretty;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.chip:hover{border-color:#E3C96F;background:var(--tint);transform:translateY(-2px)}
.chip__dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.chip[hidden]{display:none}
.tab[hidden]{display:none}

/* charges filter as stacked accordion (mobile) */
.tabs.is-stacked{flex-direction:column;align-items:stretch;gap:0;margin-top:clamp(20px,2.8vw,32px);padding-bottom:0;border-bottom:0;border-top:1px solid var(--oat)}
.tabs.is-stacked .tab{
  justify-content:flex-start;gap:10px;padding:17px 0;border:0;border-bottom:1px solid var(--oat);
  border-radius:0;background:transparent;font-size:15.5px;font-weight:700;color:var(--ink);
}
.tabs.is-stacked .tab[aria-selected="true"]{background:transparent;color:var(--ink)}
.tabs.is-stacked .tab .tab__count{color:var(--gold-deep)}
.tabs.is-stacked .tab::after{
  content:"";margin-left:auto;width:8px;height:8px;
  border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
  transform:rotate(45deg) translateY(-2px);transition:transform .28s ease;
}
.tabs.is-stacked .tab[aria-expanded="true"]{color:var(--gold-deep)}
.tabs.is-stacked .tab[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}
.tabs__panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .32s ease,opacity .22s ease;border-bottom:1px solid var(--oat)}
.tab[aria-expanded="true"] + .tabs__panel{grid-template-rows:1fr;opacity:1}
.tabs__clip{min-height:0;overflow:hidden}
.tabs__list{display:flex;flex-direction:column;gap:8px;padding:10px 0 18px}
.tabs.is-stacked ~ .chips,.tabs.is-stacked ~ .note{display:none}

/* ---------- process rule ---------- */
.steps{position:relative;margin-top:clamp(30px,3.6vw,52px)}
.steps__rule{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--ink),var(--gold) 55%,rgba(236,194,55,0))}

/* ---------- marquee ---------- */
.marquee{margin-top:clamp(26px,3vw,40px)}
.marquee__row{display:flex;width:max-content;gap:12px}
.marquee__row--a{animation:mqA 72s linear infinite}
.marquee__row--b{animation:mqB 78s linear infinite;margin-top:12px}
.marquee:hover .marquee__row{animation-play-state:paused}
.marquee__item{flex:none;padding:13px 20px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-2);font-size:14px;font-weight:500;white-space:nowrap}
@keyframes mqA{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqB{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.marquee__row{animation:none}}

/* ---------- hero ---------- */
.hero{display:flex;flex-direction:column}
.hero__media{margin-top:0}
.hero__media-note{display:none}
[data-page="home"] .hero__media{position:relative}
[data-page="home"] .hero__media-note{
  position:absolute;left:clamp(24px,4vw,64px);bottom:clamp(24px,4vw,54px);z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:16px 19px;
  color:#fff;text-align:left;background:rgba(17,17,15,.72);border:1px solid rgba(255,255,255,.2);
  border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.2);backdrop-filter:blur(8px);
}
[data-page="home"] .hero__media-note span{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#e2bd62}
[data-page="home"] .hero__media-note strong{font-size:clamp(15px,1.5vw,20px);line-height:1.2;letter-spacing:-.01em}
@media (max-width:860px){
  .hero__eyebrow{order:1}
  .hero__title{order:2}
  .hero__media{order:3;margin-top:clamp(20px,5vw,28px)}
  .hero__lede{order:4}
  .hero__cta{order:5;margin-bottom:0}
  .hero .stats{order:6}
  [data-page="home"] .hero__media-note{left:14px;bottom:14px;padding:11px 13px;gap:4px;border-radius:10px}
  [data-page="home"] .hero__media-note span{font-size:9px}
  [data-page="home"] .hero__media-note strong{font-size:13px}
}

/* ---------- rating pill ---------- */
.rating{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 12px;border:1px solid #E6E5E2;border-radius:var(--r-sm);font-size:13px;font-weight:600}
.rating__stars{color:var(--gold-mid);letter-spacing:.06em}
.rating__label{color:var(--ink-soft)}

/* ---------- faq layout ---------- */
.faq{display:grid;gap:clamp(24px,3vw,48px)}
@media (min-width:861px){.faq{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}

/* ---------- footer ---------- */
.footer{padding:clamp(34px,4vw,56px) var(--pad) 28px;background:var(--ink);color:var(--paper)}
.footer a{color:rgba(255,255,255,.72)}
.footer a:hover{color:var(--gold)}
.footer__grid{display:grid;gap:clamp(24px,3vw,44px);padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.14)}
@media (min-width:861px){.footer__grid{grid-template-columns:1.4fr repeat(3,1fr)}}
.footer__logo{height:32px;width:auto;display:block;margin-bottom:16px}
.footer__about{margin:0;max-width:34ch;font-size:14px;line-height:1.8;color:rgba(255,255,255,.72)}
.footer__social{display:flex;gap:10px;margin-top:18px}
.footer__social-link{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid rgba(255,255,255,.16);border-radius:999px;color:rgba(255,255,255,.72);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.footer a.footer__social-link:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.footer__title{margin:0 0 14px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.footer__links{display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.5}
.footer__links span{color:rgba(255,255,255,.72)}
.footer__phone{color:var(--paper);font-weight:600}
.footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding-top:22px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.55)}
.footer__credit{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.55);transition:color .15s ease}
.footer__credit:hover{color:var(--paper)}
.footer__credit img{width:22px;height:22px;border-radius:5px;flex:none;display:block}
.footer__credit strong{font-weight:700}
.footer__disclaimer{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;line-height:1.7;color:rgba(255,255,255,.42)}
.footer__disclaimer strong{color:rgba(255,255,255,.62)}
.footer__col-head{display:none}

@media (max-width:860px){
  .footer__col--about{padding-bottom:22px}
  .footer__col{border-bottom:1px solid rgba(255,255,255,.14)}
  .footer__col:last-child{border-bottom:0}
  .footer__title{display:none}
  .footer__col-head{display:block;margin:0}
  .footer__acc-trigger{
    display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
    padding:18px 0;background:transparent;border:0;text-align:left;cursor:pointer;
    font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);
  }
  .footer__acc-icon{
    flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;
    border-radius:var(--r-sm);background:rgba(236,194,55,.14);color:var(--gold);
    transition:background var(--t),color var(--t);
  }
  .footer__acc-trigger[aria-expanded="true"] .footer__acc-icon{background:var(--gold);color:var(--ink)}
  .footer__acc-trigger[aria-expanded="true"] .acc__chev{transform:rotate(180deg)}
  .footer__panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .32s ease,opacity .22s ease}
  .footer__col-head:has(> .footer__acc-trigger[aria-expanded="true"]) + .footer__panel{grid-template-rows:1fr;opacity:1}
  .footer__links{padding:2px 0 18px}
}

/* Skip link — not part of the approved templates (none of them have one). Added
   back as a baseline accessibility affordance rather than a design change: it is
   invisible except when focused, and uses only tokens already defined above. */
.skip-link{position:absolute;top:-40px;left:8px;z-index:200;padding:10px 16px;background:var(--ink);color:#fff;border-radius:var(--r-sm);font-weight:600;font-size:14px}
.skip-link:focus{top:8px}

/* Client-approved extension (2026-09-18): a 5th footer column for sections the
   approved template had no room for (Punjabi Lawyer, Courthouses, FAQs, Resources,
   Legal Aid, Service Areas) -- see SiteFooter.astro. Same breakpoint (861px) and
   about-column proportion as the original 4-column .footer__grid; one more 1fr
   track for the added column. The ≤860px accordion rules need no change: they
   already work per-.footer__col regardless of how many there are. */
@media (min-width:861px){.footer__grid--ext{grid-template-columns:1.4fr repeat(4,1fr)}}

/* Real photography (not in the approved templates, which ship only placeholder
   boxes -- see HANDOFF §6: "When real photography arrives, replace the placeholder
   with <img src="…" alt="…"> using that caption verbatim"). This site already has
   the real photos from the previous build, so this completes that instruction:
   the same .media / .card__media box, now filled by a real photo via object-fit,
   with the caption becoming the alt text rather than visible overlay text. */
.media:has(img){padding:0;overflow:hidden}
.media img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.media--hero .hero__image{object-position:center center}
.media--portrait img{object-position:center 18%}
@media (max-width:860px){
  .media--hero{aspect-ratio:16/9;min-height:0}
  .media--hero .hero__image--lawyer{object-position:70% center}
  .media--portrait{aspect-ratio:4/5;min-height:0}
}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* Article body content (blog posts) -- not in the approved templates, which have
   no long-form freeform-HTML archetype. Blog content is stored as clean semantic
   HTML (p/h2/h3/ul/ol/blockquote/a) with no classes of its own, and the base
   stylesheet intentionally styles nothing by bare tag (every heading is an
   explicit .h2/.h3 utility) -- so unstyled h2/h3/ul would render as bare browser
   defaults. This scopes sensible styling to exactly that content, reusing the
   same tokens and rhythm as the rest of the page rather than inventing new ones. */
.article-body{font-size:15.5px;line-height:1.85;color:var(--ink-soft)}
.article-body p{margin:0 0 20px}
.article-body p:last-child{margin-bottom:0}
.article-body p:empty{display:none}
.article-body h2{margin:40px 0 14px;font-weight:700;font-size:clamp(22px,2.4vw,28px);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.article-body h3{margin:28px 0 10px;font-weight:700;font-size:clamp(18px,1.8vw,21px);line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.article-body h2:first-child,.article-body h3:first-child{margin-top:0}
.article-body ul,.article-body ol{margin:0 0 20px;padding-left:22px}
.article-body li{margin:0 0 8px;padding-left:4px}
.article-body li:last-child{margin-bottom:0}
.article-body a{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.article-body a:hover{color:var(--gold-ink)}
.article-body blockquote{margin:24px 0;padding:16px 20px;border-left:3px solid var(--gold);background:var(--tint);border-radius:0 var(--r-sm) var(--r-sm) 0;font-style:italic;color:var(--ink-mid)}
.article-body figure{margin:28px 0}
.article-body figure figure{margin:0}
.article-body figure img{display:block;width:100%;height:auto;max-height:620px;object-fit:cover;border-radius:var(--r-md)}
.article-body figcaption{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--ink-mute);text-align:center}
.article-body strong{color:var(--ink);font-weight:700}
.article-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14.5px}
.article-body table th,.article-body table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--oat)}
.article-body table th{background:var(--tint);color:var(--gold-deep);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.08em}

/* Article column, share row, table of contents and author bio (blog posts)
   -- not in the approved templates, added for long-form article readability
   (client revision 2026-09-18: narrower reading column, subtler TOC and
   share icons instead of the earlier pill buttons). */
.article-col{max-width:700px;margin-inline:auto}

.article-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.article-meta .lede{margin:0}

.share-row{display:flex;flex-wrap:wrap;gap:8px}
.share-link{
  display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;
  border:1px solid var(--line-2);border-radius:999px;color:var(--ink-mute);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.share-link:hover{background:var(--ink);border-color:var(--ink);color:var(--gold)}

.article-toc{margin-top:28px;padding-left:18px;border-left:2px solid var(--oat-2)}
.article-toc__title{margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.article-toc ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.article-toc a{font-size:14px;line-height:1.5;color:var(--ink-soft);text-decoration:none;transition:color .15s ease}
.article-toc a:hover{color:var(--gold-deep)}

.author-bio{display:flex;gap:22px;align-items:flex-start}
.author-bio__photo{flex:none;width:88px;height:88px;border-radius:50%;object-fit:cover;display:block}
.author-bio__eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}
.author-bio__name{margin:4px 0 0;font-size:18px;font-weight:700;color:var(--ink)}
.author-bio__role{margin:2px 0 10px;font-size:13.5px;color:var(--ink-mute)}
.author-bio__text{margin:0 0 12px;font-size:14.5px;line-height:1.7;color:var(--ink-soft)}
@media (max-width:640px){.author-bio{flex-direction:column;align-items:center;text-align:center}}

/* FAQ search -- not in the approved templates (site.js ships no text-search
   behaviour, only the fixed-category tabs used elsewhere). Added on client
   request; styled with the same .field input treatment the forms already
   use, not a new visual language. */
.faq-search{max-width:680px;margin-inline:auto}
.faq-search input{
  padding:19px 24px;border:2px solid var(--gold-mid);border-radius:var(--r-md);
  background:var(--tint);font-size:17px;box-shadow:0 8px 24px rgba(204,153,51,.16);
}
.faq-search input:focus{border-color:var(--gold-deep);background:var(--paper);box-shadow:0 8px 28px rgba(204,153,51,.26)}
.faq-empty{display:none;margin-top:24px;padding:20px 24px;border:1px solid var(--oat);border-radius:var(--r-sm);background:var(--paper);font-size:14.5px;line-height:1.7;color:var(--ink-soft)}
.faq-empty.is-visible{display:block}
[data-faq-row][hidden]{display:none}
[data-faq-group][hidden]{display:none}
[data-post-row][hidden]{display:none}

/* ---------- site-wide animation (client request 2026-09-19) ---------- */
/* Scroll reveal: JS adds .reveal (base hidden state) only to elements it will
   actually observe, so content stays fully visible with JS disabled/failed
   -- this is progressive enhancement, not a hide-by-default trap. Hero
   content is excluded (it animates in immediately below, not on scroll). */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.16,.84,.32,1),transform .65s cubic-bezier(.16,.84,.32,1)}
.reveal.is-revealed{opacity:1;transform:translateY(0)}
.cards>.reveal:nth-child(2),.grid>.reveal:nth-child(2){transition-delay:.08s}
.cards>.reveal:nth-child(3),.grid>.reveal:nth-child(3){transition-delay:.16s}
.cards>.reveal:nth-child(4),.grid>.reveal:nth-child(4){transition-delay:.24s}
.cards>.reveal:nth-child(n+5),.grid>.reveal:nth-child(n+5){transition-delay:.3s}

/* Hero: always in view on load, so it animates in immediately rather than
   waiting on scroll. */
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.hero__eyebrow,.hero__title,.hero__lede,.hero__cta,.hero__media{animation:heroIn .7s cubic-bezier(.16,.84,.32,1) both}
.hero__title{animation-delay:.05s}
.hero__lede{animation-delay:.12s}
.hero__cta{animation-delay:.2s}
.hero__media{animation-delay:.28s}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__eyebrow,.hero__title,.hero__lede,.hero__cta,.hero__media{animation:none}
}