/* Trust Bail Bonds — white & gold build by imdgfx
   Base, tokens and shell are the client-approved white/gold kit
   (Trust_Bail_Bonds_White_Gold_Website_Claude_Code). Playfair Display for
   headings, DM Sans for everything else. Light, editorial, restrained gold. */

:root{
  --gold:#B88732;
  --gold-light:#E6BF72;
  --gold-deep:#8A6316;      /* gold dark enough for text on white */
  --black:#111316;
  --ink:#202124;
  --muted:#62656B;
  --line:#E8E5DF;
  --paper:#F8F7F4;
  --paper2:#FBFAF8;
  --white:#fff;
  --on-gold:#111316;        /* text ON gold - never white */
  --maxw:1220px;
  --radius:3px;
  --shadow-sm:0 1px 3px rgba(17,19,22,.07);
  --shadow:0 12px 28px rgba(17,19,22,.10);
  --shadow-lg:0 20px 48px rgba(17,19,22,.18);
  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-head:"DM Sans",system-ui,sans-serif;
  --font-body:"DM Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font-body);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:700;
  letter-spacing:-.02em;line-height:1.18;color:var(--black);text-transform:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:2px}
.container,.wrap{width:min(var(--maxw),calc(100% - 56px));margin:0 auto}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr-only,.skip-link{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.skip-link:focus{position:static;width:auto;height:auto;clip:auto;display:block;
  background:var(--black);color:var(--gold-light);padding:10px 16px;z-index:400}
.topline{height:3px;background:var(--gold)}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 20px;min-height:47px;border-radius:var(--radius);border:1px solid var(--black);
  font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.04em;
  transition:transform .18s var(--ease),background .18s,color .18s,border-color .18s}
.btn:hover{transform:translateY(-1px)}
.btn-dark,.btn-navy{background:var(--black);color:var(--gold-light);border-color:var(--black)}
.btn-dark:hover,.btn-navy:hover{background:#2C2F33}
.btn-light,.btn-white{background:#fff;color:var(--black);border-color:var(--black)}
.btn-light:hover,.btn-white:hover{background:var(--paper)}
/* .btn-red is the legacy primary hook used across the inner pages */
.btn-gold,.btn-red{background:linear-gradient(#EBC985,#C79946);border-color:#B88630;color:var(--on-gold)}
.btn-gold:hover,.btn-red:hover{background:linear-gradient(#F3D79C,#D6A855)}
.btn-outline-light{background:transparent;color:var(--black);border-color:#C9C4B8}
.btn-outline-light:hover{border-color:var(--black)}
.btn-outline-navy{background:transparent;color:var(--black);border-color:var(--black)}
.btn-outline-navy:hover{background:var(--paper)}
.btn .sub{display:block;font-weight:500;font-size:10px;letter-spacing:.03em;opacity:.85}
.btn-stack{flex-direction:column;gap:1px}
.link,.jail-view,.dmore{display:inline-block;font-family:var(--font-head);font-size:12px;
  font-weight:700;letter-spacing:.06em;color:var(--gold-deep)}
.link:hover,.jail-view:hover,.dmore:hover{color:var(--black)}

/* ===== Header ===== */
.site-header,.header{background:#fff;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:60}
.header-inner{display:flex;align-items:center;gap:26px;min-height:98px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand img{height:86px;width:auto}
.main-nav,.nav{display:flex;align-items:center;gap:25px;flex:1;justify-content:center}
.main-nav a,.nav a{font-family:var(--font-head);font-size:13px;font-weight:600;
  white-space:nowrap;color:var(--ink);padding:4px 0;border-bottom:2px solid transparent;
  transition:color .18s,border-color .18s}
.main-nav a:hover,.nav a:hover{color:var(--gold-deep)}
.main-nav a.active,.nav a.active{color:var(--gold-deep);border-bottom-color:var(--gold)}
.header-call{display:flex;align-items:center;gap:12px;flex:none}
.call-btn,.phone-header{display:flex;align-items:center;gap:10px;background:var(--black);
  color:#fff;padding:10px 17px;border-radius:var(--radius);white-space:nowrap;
  transition:background .18s}
.call-btn:hover,.phone-header:hover{background:#2C2F33}
.call-btn .ic{width:17px;height:17px;color:var(--gold-light)}
.call-btn .num,.phone-header b{font-weight:700;font-size:19px;color:var(--gold-light);line-height:1.15}
.call-btn .lbl,.phone-header small{display:block;font-size:10px;font-weight:500;
  color:var(--gold-light);letter-spacing:.1em;text-transform:uppercase}
.lang-toggle{display:inline-flex;align-items:center;gap:7px;background:#fff;
  border:1px solid var(--line);color:var(--ink);border-radius:var(--radius);padding:8px 12px;
  font-family:var(--font-head);font-weight:600;font-size:12px;letter-spacing:.03em;
  transition:border-color .18s,color .18s}
.lang-toggle:hover{border-color:var(--gold);color:var(--gold-deep)}
.lang-toggle .ic{width:14px;height:14px}
.hamburger,.mobile-menu{display:none;flex-direction:column;gap:5px;background:none;
  border:0;padding:8px;flex:none}
.hamburger span{width:24px;height:2px;background:var(--black);border-radius:2px;
  transition:transform .3s,opacity .3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-scrim{position:fixed;inset:0;background:rgba(17,19,22,.4);z-index:50}

/* ===== Value bar ===== */
.valuebar{border-bottom:1px solid var(--line);background:var(--paper2)}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.value-grid div{padding:17px 14px;text-align:center;font-family:var(--font-head);
  font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink);border-right:1px solid var(--line)}
.value-grid div:last-child{border-right:0}

/* ===== Sections ===== */
.sec,.section{padding:43px 0}
.eyebrow,.ph-eyebrow{display:block;font-family:var(--font-head);font-size:11px;
  text-transform:uppercase;letter-spacing:.28em;color:var(--gold-deep);font-weight:700}
.section h2,.sec-head h2{font-size:clamp(27px,3.4vw,40px);margin:8px 0}
.section-intro,.sec-sub{color:#57595D;margin:0 0 24px;max-width:62ch}
.sec-head{margin-bottom:24px}

/* ===== Page head (inner pages) ===== */
.page-hero,.pagehead{background:var(--paper);padding:48px 0;border-bottom:1px solid var(--line);
  position:relative}
.page-hero-inner{max-width:860px}
.page-hero h1,.pagehead h1{font-size:clamp(32px,4.4vw,45px);margin:6px 0 0;color:var(--black)}
.page-hero p,.pagehead p{color:#4B4D50;margin-top:12px;font-size:16px;max-width:70ch}
.article{max-width:850px}
.article h2{font-size:25px;margin:26px 0 8px}
.article p{color:#4B4D50;margin-bottom:12px}
.notice{background:#FAF6EB;border-left:3px solid var(--gold);padding:12px 16px}


/* ===== Homepage hero ===== */
.hero{background:
  linear-gradient(90deg,#fff 0%,#fff 36%,rgba(255,255,255,.94) 45%,rgba(255,255,255,.05) 70%),
  url(../img/hero-courthouse.jpg?v=2) center right/cover no-repeat;
  border-bottom:1px solid var(--line)}
.hero-inner{min-height:395px;display:flex;align-items:center}
.hero-copy{max-width:690px;padding:48px 0}
.hero h1{font-size:clamp(38px,5vw,66px);line-height:1.12;letter-spacing:-.035em;margin:13px 0}
.hero h1 span,.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{max-width:540px;font-size:16px;margin:0 0 24px;color:#3F4145}
.hero .lede{font-family:var(--font-display);font-weight:700;font-size:19px;
  color:var(--black);margin:0 0 10px;max-width:40ch}
.actions,.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* ===== Service cards (4 across) ===== */
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.service{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;
  transition:border-color .18s,box-shadow .18s,transform .18s var(--ease)}
.service:hover{border-color:var(--gold);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.service img{width:100%;height:153px;object-fit:cover}
.service-body{padding:15px;display:flex;flex-direction:column;flex:1}
.service h3{font-size:19px;margin:0 0 5px}
.service p{font-size:13px;color:#5B5C5E;margin:0 0 12px;flex:1}

/* ===== Process steps ===== */
.process{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:none}
.step{display:flex;align-items:flex-start;gap:12px;text-align:start;padding:0}
.step-num{width:33px;height:33px;flex:none;background:var(--gold);color:#fff;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:14px;
  margin:0;box-shadow:none}
.step h3{margin:0;font-size:18px}
.step p{margin:5px 0 0;font-size:13px;color:#555}
.step-ic{display:none}
.step:not(:last-child)::after{display:none}

/* ===== Two-column utility row (jail finder + callback) ===== */
.utility{display:grid;grid-template-columns:1.3fr .7fr;gap:26px;align-items:start}
.panel{border:1px solid var(--line);background:#FAF9F7;padding:26px}
.panel h2{margin-top:0;font-size:clamp(24px,3vw,32px)}
.county-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.county-buttons button{padding:9px 13px;background:#fff;border:1px solid #DDD;
  font-family:var(--font-head);font-size:12px;font-weight:600;border-radius:var(--radius);
  transition:background .18s,color .18s,border-color .18s}
.county-buttons button:hover{border-color:var(--black)}
.county-buttons button.selected{background:var(--black);color:#fff;border-color:var(--black)}
.search-row{display:flex;gap:10px}
.search-row input{flex:1;min-width:0;padding:12px;border:1px solid #CCC;border-radius:var(--radius);background:#fff}
.search-row input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,135,50,.15)}
.facility-results{margin-top:16px;display:grid;gap:10px}
.facility{background:#fff;border:1px solid #E3E3E3;padding:11px 14px;border-radius:var(--radius)}
.facility strong{display:block;font-weight:700}
.facility small{color:#666}
.form-panel{border-left:3px solid var(--gold)}
.form-panel label,.field label{display:block;font-family:var(--font-head);font-size:12px;
  font-weight:600;margin:10px 0 4px;color:var(--ink)}
.form-panel input,.form-panel select,.form-panel textarea,
.field input,.field select,.field textarea{width:100%;border:1px solid #D6D6D6;background:#fff;
  border-radius:2px;padding:10px;color:var(--ink)}
.form-panel input:focus,.form-panel select:focus,.form-panel textarea:focus,
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(184,135,50,.15)}
.field textarea{resize:vertical;min-height:110px}
.form-panel button{width:100%;margin-top:15px}
.form-note,.quote-note{font-size:11px;color:#666;margin-top:10px;line-height:1.5}
.form-status{font-size:13px;margin-top:10px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-card{border:1px solid var(--line);background:#FAF9F7;padding:26px;border-left:3px solid var(--gold)}
.form-card h2{margin-top:0;font-size:26px}
.form-card .fc-sub{color:var(--muted);font-size:14px;margin-bottom:8px}
.cform{display:flex;flex-direction:column;gap:2px}
.form-alert{padding:12px 16px;border-radius:2px;margin-bottom:12px;font-weight:600;font-size:14px}
.form-ok{background:#EFF7F0;color:#1D6B36;border:1px solid #CBE5D2}
.form-err{background:#FBF0EE;color:#8A3524;border:1px solid #EBD2CC}

/* ===== County cards ===== */
.counties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.county{display:block;border:1px solid var(--line);background:#fff;
  transition:border-color .18s,transform .18s var(--ease)}
.county:hover{border-color:var(--gold);transform:translateY(-2px)}
.county img{width:100%;height:150px;object-fit:cover}
.county h3{font-size:19px;margin:10px 14px 2px}
.county .link{margin:0 14px 14px}

/* ===== Footer ===== */
.site-footer,.footer{background:var(--black);color:#EEE;padding:18px 0 26px;font-size:13px}
.foot-grid,.footer-grid{display:grid;grid-template-columns:1.8fr 1.5fr 1.1fr 1.1fr;gap:30px}
.footer h3,.foot-col h4,.foot-brand h3{font-family:var(--font-head);font-size:14px;
  font-weight:700;color:var(--gold-light);letter-spacing:.06em;margin:0 0 12px;text-transform:uppercase}
.footer p,.footer a,.site-footer p,.site-footer a{font-size:13px;color:#D1D1D1}
.foot-col ul li{margin-bottom:7px}
.site-footer a:hover{color:#fff}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0}
.foot-brand .logo-plate{display:block;width:100%}
/* sized by WIDTH so it stays proportional to the column, and flush left with the
   paragraph and the social row rather than centred over them */
.foot-brand img{width:min(206px,100%);height:auto;display:block;margin:0 0 12px}
.foot-brand p{max-width:42ch}
.foot-brand .socials{justify-content:flex-start}
.foot-contact li{display:flex;gap:10px;margin-bottom:10px;align-items:flex-start}
.foot-contact .ic{width:15px;height:15px;color:var(--gold-light);margin-top:4px;flex:none}
.foot-pay-icons{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.foot-pay-icons img{height:26px;width:auto;background:#fff;border-radius:3px;padding:3px 5px}
.socials{display:flex;gap:10px;margin-top:10px}
.socials a{width:34px;height:34px;border-radius:3px;background:#1D1F23;display:grid;
  place-items:center;color:#D1D1D1;transition:background .18s,color .18s}
.socials a:hover{background:var(--gold);color:var(--on-gold)}
.socials svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.foot-bottom,.foot-bottom span{border-top:1px solid #333;font-size:11px;color:#AAA}
.foot-bottom{margin-top:25px;padding-top:15px;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:10px 14px}
.foot-bottom>span:first-child{justify-self:start}
.foot-bottom .foot-credit{justify-self:center;text-align:center}
.foot-bottom .foot-legal{justify-self:end}
@media(max-width:760px){.foot-bottom{grid-template-columns:1fr;text-align:center}
  .foot-bottom>span:first-child,.foot-bottom .foot-credit,.foot-bottom .foot-legal{justify-self:center}
  .foot-bottom .foot-legal{justify-content:center}}
.foot-bottom span{border:0}
.foot-legal{display:flex;gap:18px;flex-wrap:wrap}
.foot-bottom .lic{display:block;margin-top:4px;color:#BDBDBD}
.foot-credit{color:#8E8E8E}
.foot-credit a{color:#BDBDBD;text-decoration:underline;text-underline-offset:2px}
.foot-credit a:hover{color:var(--gold-light,#D9BC72)}

/* ===== Emergency CTA band ===== */
.emcta{background:var(--black);color:#fff;padding:26px 0 20px;border-top:3px solid var(--gold)}
.emcta-inner{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.emcta h2{color:#fff;font-size:clamp(24px,3vw,32px)}
.emcta p{color:#C9C9C9;font-size:14px;margin-top:6px}
.emcta-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.emcta .phone-big{display:flex;align-items:center;gap:12px;font-family:var(--font-display);
  font-weight:700;font-size:28px;color:var(--gold-light)}
.emcta .phone-big .ic{width:24px;height:24px}

/* ===== Sticky mobile call bar ===== */
.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;
  grid-template-columns:1fr 1fr;box-shadow:0 -4px 18px rgba(17,19,22,.18)}
.mobilebar a{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 10px;
  font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase}
.mobilebar .mcall{background:linear-gradient(#EBC985,#C79946);color:var(--on-gold)}
.mobilebar .mtext{background:var(--black);color:var(--gold-light)}
.mobilebar .ic{width:18px;height:18px}


/* =====================================================================
   Inner-page components, restyled from the dark build into white & gold.
   These class names are already in use across the existing pages.
   ===================================================================== */

/* --- generic icon medallion --- */
.q-ic{width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--line);
  color:var(--gold-deep);display:grid;place-items:center;flex:none}
.q-ic.red{background:linear-gradient(#EBC985,#C79946);border-color:#B88630;color:var(--on-gold)}
.q-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* --- services list (services page) --- */
.svc-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.svc-item{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);
  background:#fff;padding:16px}
.svc-item .ic{width:34px;height:34px;color:var(--gold-deep);flex:none;background:var(--paper);
  border-radius:50%;padding:8px;stroke-width:1.8}
.svc-item h3{font-family:var(--font-head);font-size:14px;font-weight:700;margin-bottom:4px;
  letter-spacing:0}
.svc-item p{font-size:13px;color:var(--muted);line-height:1.5}

/* --- quote / premium card --- */
.quote-card{border:1px solid var(--line);background:var(--paper);padding:26px;
  border-left:3px solid var(--gold);display:flex;flex-direction:column}
.quote-card h2{font-size:26px;margin-bottom:4px}
.quote-card .qc-sub{color:var(--muted);font-size:14px;margin-bottom:16px}
.quote-card label{display:block;font-family:var(--font-head);font-size:12px;font-weight:600;
  margin-bottom:6px;color:var(--ink)}
.quote-input{display:flex;align-items:center;background:#fff;border:1px solid #D6D6D6;
  border-radius:2px;overflow:hidden;margin-bottom:16px}
.quote-input:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,135,50,.15)}
.quote-input .cur{color:var(--black);font-family:var(--font-display);font-weight:700;
  font-size:19px;padding:0 4px 0 13px}
.quote-input input{border:0;outline:none;font-family:var(--font-display);font-weight:700;
  font-size:22px;color:var(--black);padding:11px 13px 11px 5px;width:100%;min-width:0;background:transparent}
.quote-result{margin-bottom:14px}
.quote-result .lbl{display:block;font-family:var(--font-head);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.quote-result .amt{font-family:var(--font-display);font-weight:700;font-size:32px;
  color:var(--gold-deep);line-height:1.2}
.quote-result .pct{color:var(--muted);font-size:13px}
.quote-feats{display:flex;gap:9px;margin:4px 0 16px;flex-wrap:wrap}
.quote-feats li{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink);
  background:#fff;border:1px solid var(--line);padding:7px 10px;border-radius:2px;flex:1;min-width:130px}
.quote-feats .ic{width:14px;height:14px;color:var(--gold-deep)}
.quote-card .btn{width:100%}

/* --- free tools: bail schedule + find an inmate --- */
.tool-sec{background:#fff;padding:40px 0 52px}
.tool-sec .container>*+*{margin-top:20px}
.parp-note{display:flex;gap:14px;background:#FAF6EB;border:1px solid var(--line);
  border-left:3px solid var(--gold);padding:18px 20px}
.parp-note .ic{width:22px;height:22px;color:var(--gold-deep);flex:none;margin-top:3px}
.parp-note h2{font-size:18px;margin-bottom:6px}
.parp-note p{color:#4B4D50;font-size:14px;line-height:1.6}
.tool-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tool-stats>div{background:#fff;border:1px solid var(--line);padding:18px;text-align:center}
.tool-stats .n{display:block;font-family:var(--font-display);font-weight:700;font-size:30px;
  color:var(--black);line-height:1}
.tool-stats .n.red{color:var(--gold-deep)}
.tool-stats .n.grn{color:#1D7A3D}
.tool-stats .l{display:block;margin-top:6px;font-size:13px;color:var(--muted)}
.tool-search{display:flex;gap:10px}
.tool-search input{flex:1;min-width:0;font-size:15px;padding:13px 15px;border:1px solid #CCC;
  border-radius:var(--radius);background:#fff;color:var(--ink)}
.tool-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,135,50,.15)}
.tool-search button{background:linear-gradient(#EBC985,#C79946);color:var(--on-gold);
  border:1px solid #B88630;border-radius:var(--radius);padding:0 24px;font-family:var(--font-head);
  font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.tool-search button:hover{background:linear-gradient(#F3D79C,#D6A855)}
.tool-filters{display:flex;gap:8px;flex-wrap:wrap}
.tool-filters .chip{background:#fff;border:1px solid #DDD;border-radius:var(--radius);
  padding:9px 16px;font-family:var(--font-head);font-weight:600;font-size:12px;color:var(--ink);
  transition:background .18s,color .18s,border-color .18s}
.tool-filters .chip:hover{border-color:var(--black)}
.tool-filters .chip.active{background:var(--black);border-color:var(--black);color:#fff}
.tool-count{color:var(--muted);font-size:13px}
.bail-results{display:flex;flex-direction:column;gap:8px}
.br-row{display:flex;justify-content:space-between;align-items:center;gap:18px;background:#fff;
  border:1px solid var(--line);padding:13px 16px}
.br-row.is-bail{border-left:3px solid var(--gold)}
.br-row.is-zero{border-left:3px solid #1D7A3D}
.br-row.is-none{border-left:3px solid #6B6E73;background:var(--paper)}
.br-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.br-left .code{font-family:var(--font-head);font-weight:700;color:var(--black);background:var(--paper);
  border:1px solid var(--line);border-radius:2px;padding:3px 8px;font-size:12px;white-space:nowrap}
.br-left .off{color:var(--ink);font-size:14px}
.sv-flag{background:linear-gradient(#EBC985,#C79946);color:var(--on-gold);border-radius:2px;
  padding:2px 7px;font-size:10px;font-weight:700;letter-spacing:.06em}
.br-bail,.br-zero,.br-none{text-align:right;flex:none}
.br-bail .amt{display:block;font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--gold-deep)}
.br-zero .amt{display:block;font-family:var(--font-display);font-weight:700;font-size:19px;color:#1D7A3D}
.br-none .amt{display:block;font-family:var(--font-display);font-weight:700;font-size:18px;color:#53565B}
.br-bail .prem,.br-zero .prem,.br-none .prem{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.tool-none{background:#fff;border:1px dashed #CFCABF;padding:20px;color:var(--muted);text-align:center}
.tool-disclaim{background:var(--paper);border:1px solid var(--line);padding:18px 22px}
.tool-disclaim p{color:var(--muted);font-size:13px;line-height:1.65}
.src-link{display:inline-block;margin-top:8px;color:var(--gold-deep);font-weight:700;
  font-size:13px;text-decoration:underline}
.tool-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--black);color:#fff;padding:28px 30px;border-top:3px solid var(--gold)}
.tool-cta h2{color:#fff;font-size:24px;margin-bottom:6px}
.tool-cta p{color:#C9C9C9;font-size:14px;max-width:62ch}
.tool-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.tool-cta .btn-outline-navy{color:var(--gold-light);border-color:#4A4D52;background:transparent}
.tool-cta .btn-outline-navy:hover{background:#1D1F23;border-color:var(--gold-light)}

/* --- find an inmate --- */
.fi-fast{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);padding:22px 26px}
.fi-fast h2{font-size:20px;margin-bottom:6px}
.fi-fast p{color:var(--muted);font-size:14px;max-width:60ch}
.fi-h2{font-size:22px;margin-top:30px}
.fi-lead{color:var(--muted);font-size:14px;margin-top:-8px}
.fi-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fi-link{display:block;background:#fff;border:1px solid var(--line);padding:18px;
  transition:border-color .18s,transform .18s var(--ease)}
.fi-link:hover{border-color:var(--gold);transform:translateY(-2px)}
.fi-link strong{display:block;font-family:var(--font-display);font-size:17px;color:var(--black);margin-bottom:6px}
.fi-link span{color:var(--muted);font-size:13px;line-height:1.55}
.ag-badge{display:inline-block;font-family:var(--font-head);font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border-radius:2px;padding:3px 8px;margin-bottom:8px}
.ag-lasd{background:#EDF1F7;color:#2B4A77}
.ag-lapd{background:#F1EFEA;color:#5E5137}
.ag-local{background:#EEF5F0;color:#1D6B36}
.ag-note{color:var(--muted);font-size:13px;margin:6px 0 10px;line-height:1.5}
.fi-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* --- jail cards --- */
.jails{background:#fff}
.jail-search{display:flex;max-width:640px;margin:0 auto 26px;border:1px solid #CCC;
  border-radius:var(--radius);overflow:hidden}
.jail-search input{flex:1;border:0;outline:none;padding:13px 16px;font-size:15px;min-width:0}
.jail-search button{border:0;background:linear-gradient(#EBC985,#C79946);color:var(--on-gold);
  font-family:var(--font-head);font-weight:700;font-size:13px;padding:0 24px;
  letter-spacing:.06em;text-transform:uppercase}
.jail-grid,.jail-grid-full{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.jail-card{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column;
  transition:border-color .18s,transform .18s var(--ease)}
.jail-card:hover{border-color:var(--gold);transform:translateY(-2px)}
/* 3:1 rather than 2:1 keeps the cards compact - on a 288px card that is a
   96px image instead of 144px. The source art is 2:1, so object-fit crops
   sky and foreground and leaves the building. .jail-noimg must track this
   exactly or cards with and without a photo end up different heights. */
/* height:auto is required, not cosmetic. These <img> carry width/height
   attributes (for CLS), and the height attribute is a presentational hint
   that sets the CSS height - so with width:100% BOTH dimensions are
   specified and aspect-ratio is ignored, leaving a 320px-tall image. */
.jail-card img{width:100%;height:auto;aspect-ratio:3/1;object-fit:cover}
.jail-noimg{aspect-ratio:3/1;background:var(--paper);display:grid;place-items:center;color:#B9B4A8}
.jail-noimg svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.4}
.jail-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.jail-body h3{font-family:var(--font-head);font-size:14px;font-weight:700;margin-bottom:4px;
  line-height:1.3;letter-spacing:0}
.jail-body .loc{font-size:13px;color:var(--muted);margin-bottom:4px}
.jail-body .tel{font-size:13px;color:var(--black);font-weight:600;margin-bottom:10px}
.jail-body .tel:hover{color:var(--gold-deep)}
.jail-view{margin-top:auto}
.jail-none{display:none;text-align:center;color:var(--muted);padding:22px 0}
.jails-cta{text-align:center;margin-top:24px}

/* --- FAQ --- */
.faq-sec{background:var(--paper)}
.faq-list{max-width:850px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq{background:#fff;border:1px solid var(--line);overflow:hidden}
.faq summary{cursor:pointer;padding:15px 18px;font-family:var(--font-head);font-weight:700;
  color:var(--black);list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:14px;font-size:15px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);font-size:22px;color:var(--gold);
  font-weight:700;line-height:1;transition:transform .2s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 18px 16px;color:#4B4D50;font-size:14px}

/* --- reviews --- */
.reviews{background:var(--paper)}
.reviews .sec-head h2{color:var(--black)}
.rating-line{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px;
  font-size:14px;color:var(--muted);flex-wrap:wrap}
.rating-line strong{font-family:var(--font-display);font-size:20px;color:var(--black)}
.stars{color:var(--gold);letter-spacing:2px;font-size:15px}
.rev-grid{display:grid;grid-template-columns:2fr 1fr;gap:22px;align-items:stretch}
.rev-cards,.rev-page-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rev-card{background:#fff;border:1px solid var(--line);padding:18px;display:flex;
  flex-direction:column;gap:9px}
.rev-src{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;
  font-size:13px;color:var(--black)}
.rev-src svg{width:16px;height:16px;fill:currentColor;stroke:none}
.src-google{color:#1A56C4}.src-yelp{color:#C21515}.src-fb{color:#14589E}
.src-client{color:var(--blue-mid)}
.src-client svg{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rev-card p{font-size:14px;color:#4B4D50;line-height:1.6;flex:1}
.rev-card .who{font-size:12px;color:var(--muted);font-weight:600}
.rev-side{display:flex;flex-direction:column;gap:16px}
.rev-side img{width:100%;object-fit:cover;flex:1;min-height:150px;border:1px solid var(--line)}
.avail-card{background:#fff;border:1px solid var(--gold);padding:20px;text-align:center}
.avail-card .t1{display:block;font-family:var(--font-head);font-weight:600;letter-spacing:.14em;
  color:var(--muted);font-size:11px;text-transform:uppercase}
.avail-card .t2{display:block;font-family:var(--font-display);font-weight:700;font-size:40px;
  color:var(--gold-deep);line-height:1.1}
.avail-card .t3{display:block;font-size:12px;color:var(--muted);margin:6px 0 14px}
.rev-more{text-align:center;margin-top:26px}
.reviews-page{background:#fff}

/* --- about / why / payments --- */
.about-sec{background:#fff}
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;align-items:center}
.about-grid h2{font-size:clamp(26px,3vw,34px);margin-bottom:14px}
.about-grid h2 .red{color:var(--gold)}
.about-grid p{color:#4B4D50;margin-bottom:12px}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
.stat{background:var(--paper);border:1px solid var(--line);padding:18px 14px;text-align:center}
.stat .n{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--gold-deep)}
.stat .l{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.about-media img{width:100%;border:1px solid var(--line)}
.why-sec{background:var(--paper)}
.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.why-card{background:#fff;border:1px solid var(--line);padding:22px;text-align:center}
.why-card .q-ic{margin:0 auto 12px}
.why-card h3{font-size:17px;margin-bottom:8px}
.why-card p{color:var(--muted);font-size:13px}
.pay-sec{background:#fff}
.pay-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:30px}
.plan{background:#fff;border:1px solid var(--line);padding:24px;text-align:center}
.plan .q-ic{margin:0 auto 12px}
.plan h3{font-size:18px;margin-bottom:8px}
.plan p{color:var(--muted);font-size:13px}
.pay-methods{background:var(--paper);border:1px solid var(--line);padding:28px;text-align:center}
.pay-methods h2{font-size:24px;margin-bottom:18px}
.pay-icons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.pay-icons img{height:42px;width:auto;border:1px solid var(--line);padding:5px 8px;background:#fff}
.pay-extra{color:var(--muted);font-size:14px;margin-top:16px}
.pay-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pay-chip{background:#fff;border:1px solid var(--line);padding:11px 18px;font-family:var(--font-head);
  font-weight:700;color:var(--black);font-size:13px;display:flex;align-items:center;gap:8px}
.pay-chip .ic{width:17px;height:17px;color:var(--gold-deep)}
.howd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.howd-grid>div{background:#fff;border:1px solid var(--line);padding:22px}
.howd-grid h2{font-size:19px;margin-bottom:10px}
.howd-grid p{color:var(--muted);font-size:14px}
.how-detail{background:var(--paper)}
.contact-sec{background:#fff}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:start}
.c-lines{display:flex;flex-direction:column;gap:16px}
.c-lines li{display:flex;gap:14px;align-items:flex-start}
.c-lines strong{display:block;font-family:var(--font-head);font-size:14px;color:var(--black);font-weight:700}
.c-lines span,.c-lines a{color:var(--muted);font-size:14px}
.c-lines a:hover{color:var(--gold-deep)}

/* --- reveal --- */
.js-reveal .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .header-inner{gap:12px}
  .main-nav,.nav{gap:13px}
  .main-nav a,.nav a{font-size:12px}
  .call-btn .num,.phone-header b{font-size:16px}
  .jail-grid,.jail-grid-full{grid-template-columns:repeat(3,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:850px){
  .container,.wrap{width:min(var(--maxw),calc(100% - 32px))}
  .hamburger,.mobile-menu{display:flex;margin-left:auto}
  .main-nav,.nav{position:absolute;left:0;right:0;top:100%;background:#fff;padding:18px;
    box-shadow:0 12px 20px rgba(17,19,22,.13);flex-direction:column;align-items:stretch;
    display:none;z-index:70}
  .main-nav.open,.nav.open{display:flex}
  .main-nav a,.nav a{font-size:15px;padding:11px 0;border-bottom:1px solid var(--line)}
  .main-nav a.active,.nav a.active{border-bottom-color:var(--gold)}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .utility{grid-template-columns:1fr}
  .foot-grid,.footer-grid{grid-template-columns:1fr 1fr}
  .svc-list{grid-template-columns:repeat(2,1fr)}
  .fi-links{grid-template-columns:1fr}
  .tool-stats{grid-template-columns:1fr}
  .rev-grid{grid-template-columns:1fr}
  .rev-cards,.rev-page-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .pay-plans,.howd-grid{grid-template-columns:1fr}
  .jail-grid,.jail-grid-full{grid-template-columns:repeat(2,1fr)}
  .br-row{flex-direction:column;align-items:flex-start;gap:9px}
  .br-bail,.br-zero,.br-none{text-align:left}
  .tool-cta,.fi-fast{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .header-inner{min-height:80px}
  .brand img{height:58px}
  .call-btn,.phone-header{display:none}
  .hero-copy{padding:34px 0}
  .hero h1{font-size:36px}
  .hero p{font-size:14px}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .value-grid div:nth-child(2n){border-right:0}
  .value-grid div:nth-child(n+3){border-top:1px solid var(--line)}
  .service-grid,.steps,.counties,.foot-grid,.footer-grid,.svc-list,
  .rev-cards,.rev-page-grid,.why-grid,.jail-grid,.jail-grid-full{grid-template-columns:1fr}
  .service img{height:190px}
  .search-row{flex-direction:column}
  .tool-search{flex-direction:column}
  .tool-search button{padding:14px}
  .sec,.section{padding:32px 0}
  .page-hero,.pagehead{padding:34px 0}
  .frow{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr 1fr 1fr;gap:8px}
  /* The 78px here was reserved for a floating chat widget that was removed in
     Sept 2026. It was still eating a quarter of a 320px screen and wrapping
     "Call Now". Put the class back on <body> if a chat bubble ever returns. */
  .mobilebar{display:grid}
  body.has-chat .mobilebar{padding-right:78px}
  .emcta-inner{flex-direction:column;align-items:flex-start}
  .tool-cta-btns .btn{width:100%}
}

/* ===== Nav dropdowns (the approved header shows carets on two items) ===== */
.has-sub{position:relative;display:flex;align-items:center;gap:3px}
.sub-toggle{background:none;border:0;padding:2px 4px;color:var(--muted);font-size:10px;line-height:1;
  transition:color .18s,transform .2s}
.has-sub:hover .sub-toggle,.has-sub:focus-within .sub-toggle{color:var(--gold-deep)}
.subnav{position:absolute;top:100%;left:-14px;min-width:210px;background:#fff;
  border:1px solid var(--line);box-shadow:0 14px 26px rgba(17,19,22,.13);padding:7px 0;
  display:none;flex-direction:column;z-index:80}
.has-sub:hover .subnav,.has-sub:focus-within .subnav,.has-sub.open .subnav{display:flex}
.subnav a{padding:9px 16px;font-size:13px;border:0;white-space:nowrap}
.subnav a:hover{background:var(--paper);color:var(--gold-deep)}
@media (max-width:850px){
  .has-sub{display:block;position:static}
  .has-sub > a{display:block;border-bottom:1px solid var(--line);padding:11px 0}
  .sub-toggle{position:absolute;right:0;margin-top:-38px;font-size:14px;padding:8px 10px}
  .subnav{position:static;display:flex;border:0;box-shadow:none;padding:0 0 6px 14px;min-width:0}
  .subnav a{padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
}

/* ---- mobile hero: a vertical white wash, since the copy goes full width ---- */
@media (max-width:850px){
  .hero{background:
    linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 46%,rgba(255,255,255,.72) 78%,rgba(255,255,255,.55) 100%),
    url(../img/hero-courthouse.jpg?v=2) center/cover no-repeat}
  .hero-inner{min-height:360px}
  .hero p,.hero .lede{max-width:none}
}

/* ==========================================================================
   BLUE OMBRE + GOLD TRIM, HERO CAROUSEL AND MOTION
   ========================================================================== */
:root{
  --blue-top:#2567AE;        /* every stop below is >= 5.7:1 with white text */
  --blue-mid:#14457F;
  --blue-deep:#0B2A55;
  --blue-ink:#071D3C;
  --gold-trim:#C8982F;
  --ombre:linear-gradient(180deg,var(--blue-top) 0%,var(--blue-mid) 55%,var(--blue-deep) 100%);
  --ombre-hi:linear-gradient(180deg,#2F79C6 0%,#1A5295 55%,#0E3568 100%);
  --trim:inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 0 1px rgba(230,191,114,.42);
}

/* ---------- primary buttons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-dark,.btn-navy,.btn-gold,.btn-red{
  background:var(--ombre);color:#fff;border-color:var(--gold-trim);
  box-shadow:var(--trim),0 6px 16px rgba(11,42,85,.22)}
.btn-dark .ic,.btn-navy .ic,.btn-gold .ic,.btn-red .ic{color:var(--gold-light)}
.btn-dark:hover,.btn-navy:hover,.btn-gold:hover,.btn-red:hover{
  background:var(--ombre-hi);border-color:var(--gold-light);
  box-shadow:var(--trim),0 10px 22px rgba(11,42,85,.3)}
.btn-light,.btn-white{border-color:var(--gold-trim);color:var(--blue-ink);
  box-shadow:inset 0 0 0 1px rgba(230,191,114,.3)}
.btn-light:hover,.btn-white:hover{background:#fff;border-color:var(--blue-mid);color:var(--blue-mid)}
.btn-outline-navy{border-color:var(--blue-mid);color:var(--blue-mid)}
.btn-outline-navy:hover{background:var(--ombre);color:#fff;border-color:var(--gold-trim)}

/* a single gold sheen that sweeps across on hover */
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,232,178,.45),transparent);
  transform:skewX(-18deg);transition:left .55s var(--ease)}
.btn:hover::after{left:125%}

/* ---------- header call button ---------- */
.call-btn,.phone-header{background:var(--ombre);border:1px solid var(--gold-trim);
  box-shadow:var(--trim),0 4px 12px rgba(11,42,85,.18)}
.call-btn:hover,.phone-header:hover{background:var(--ombre-hi);border-color:var(--gold-light)}
.call-btn .num,.phone-header b{color:#fff}
.call-btn .lbl,.phone-header small{color:#F7E8C4}
.mobilebar .mtext{background:var(--ombre);color:#fff;border-top:2px solid var(--gold-trim)}

/* ---------- hero carousel ---------- */
.hero{position:relative;overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}
.hero-media{position:absolute;inset:0;z-index:1}
.media-slide{position:absolute;inset:0;background:center right/cover no-repeat;
  opacity:0;transform:scale(1.04);transition:opacity 1.2s var(--ease)}
.media-slide.active{opacity:1;animation:tbbKen 9s linear forwards}
@keyframes tbbKen{from{transform:scale(1.04)}to{transform:scale(1.13)}}
.hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,#fff 0%,#fff 38%,rgba(255,255,255,.96) 50%,
    rgba(255,255,255,.72) 62%,rgba(255,255,255,.3) 72%,rgba(255,255,255,0) 82%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;
  background:linear-gradient(90deg,var(--blue-deep),var(--gold),var(--blue-deep));
  background-size:220% 100%;animation:tbbRule 9s linear infinite}
@keyframes tbbRule{to{background-position:220% 0}}
.hero-inner{position:relative;z-index:3;min-height:430px;display:flex;
  flex-direction:column;justify-content:center;align-items:stretch}
.hero-track{display:grid;justify-items:start}
.hero-slide{grid-area:1/1;max-width:690px;padding:46px 0 10px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s var(--ease)}
.hero-slide.active{opacity:1;visibility:visible;pointer-events:auto}
.hero-slide .lede{font-family:var(--font-display);font-weight:700;font-size:19px;
  color:var(--black);margin:0 0 10px;max-width:34ch}
.hero-slide p{max-width:478px;font-size:16px;margin:0 0 22px;color:#3F4145}
.hero-slide h1{font-size:clamp(36px,4.6vw,60px);line-height:1.12;
  letter-spacing:-.035em;margin:12px 0}

/* the words: each line lifts in on its own beat, the gold line catches a shine */
@keyframes tbbUp{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
.hero-slide.active > *{animation:tbbUp .72s var(--ease) both}
.hero-slide.active > *:nth-child(1){animation-delay:.04s}
.hero-slide.active > *:nth-child(2){animation-delay:.14s}
.hero-slide.active > *:nth-child(3){animation-delay:.26s}
.hero-slide.active > *:nth-child(4){animation-delay:.36s}
.hero-slide.active > *:nth-child(5){animation-delay:.46s}
.hero-slide h1 span{color:var(--gold-deep);background:linear-gradient(100deg,
  #6E4F10 0%,var(--gold-deep) 28%,#9A6F1A 46%,var(--gold-deep) 64%,#6E4F10 100%);
  background-size:260% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.hero-slide.active h1 span{animation:tbbShine 2.6s var(--ease) .5s 1 both}
@keyframes tbbShine{from{background-position:210% 0}to{background-position:0 0}}
.hero-slide .eyebrow{position:relative;padding-left:40px}
.hero-slide .eyebrow::before{content:"";position:absolute;left:0;top:50%;height:2px;width:0;
  background:linear-gradient(90deg,var(--blue-mid),var(--gold));transition:width .6s var(--ease) .3s}
.hero-slide.active .eyebrow::before{width:30px}

.hero-dots{position:relative;z-index:3;display:flex;gap:9px;padding:4px 0 30px}
.hero-dots button{width:30px;height:4px;border:0;padding:0;border-radius:2px;
  background:#D8D4CB;transition:background .25s,width .25s var(--ease)}
.hero-dots button:hover{background:var(--blue-top)}
.hero-dots button.active{width:52px;background:linear-gradient(90deg,var(--blue-mid),var(--gold))}

/* ---------- the rest of the page: small, restrained motion ---------- */
.site-header{transition:box-shadow .3s var(--ease),padding .3s var(--ease)}
.site-header.scrolled{box-shadow:0 2px 18px rgba(17,19,22,.10)}
.site-header.scrolled .header-inner{height:78px}
.site-header.scrolled .brand img{height:68px}
.brand img{transition:height .3s var(--ease)}

.service{overflow:hidden;position:relative}
.service img{transition:transform .7s var(--ease)}
.service:hover img{transform:scale(1.06)}
.service::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--blue-mid),var(--gold));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.service:hover::after{transform:scaleX(1)}
.service:hover{border-color:var(--blue-top)}

.county{overflow:hidden;position:relative}
.county img{transition:transform .7s var(--ease)}
.county:hover img{transform:scale(1.05)}
.county:hover{border-color:var(--blue-top)}

.step-num{background:var(--ombre);color:#fff;border:1px solid var(--gold-trim);
  box-shadow:var(--trim)}
.search-row input:focus,.field input:focus,.field select:focus,.field textarea:focus,
.tool-search input:focus{border-color:var(--blue-top);
  box-shadow:0 0 0 3px rgba(37,103,174,.15)}
.form-panel,.form-card,.quote-card,.parp-note,.br-row.is-bail{
  border-left-color:var(--blue-mid)}

.js-reveal .reveal{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.service-grid .reveal:nth-child(2),.county-grid .reveal:nth-child(2){transition-delay:.08s}
.service-grid .reveal:nth-child(3),.county-grid .reveal:nth-child(3){transition-delay:.16s}
.service-grid .reveal:nth-child(4){transition-delay:.24s}

@media (max-width:980px){
  .hero::before{background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.94) 44%,rgba(255,255,255,.74) 76%,rgba(255,255,255,.55) 100%)}
  .hero-inner{min-height:380px}
  .hero-slide{padding:34px 0 6px}
}
@media (prefers-reduced-motion:reduce){
  .media-slide.active,.hero-slide.active > *,.hero-slide.active h1 span,.hero::after{animation:none}
  .hero-slide h1 span{-webkit-text-fill-color:var(--gold-deep);color:var(--gold-deep)}
  .btn::after,.service img,.county img{transition:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ==========================================================================
   WORDMARK, BLENDED BANNER BADGE, TWO-SIDED WHITE FADE
   ========================================================================== */

/* ---------- header wordmark (the shield now lives in the banner) ---------- */
.brand{flex-direction:column;align-items:flex-start;gap:0;line-height:1;text-decoration:none}
.brand-1{font-family:var(--font-display);font-weight:700;font-size:31px;letter-spacing:.055em;
  color:var(--black);transition:font-size .3s var(--ease)}
.brand-2{display:block;margin-top:5px;padding-top:5px;font-family:var(--font-head);font-weight:700;
  font-size:10px;letter-spacing:.34em;color:var(--gold-deep);
  border-top:1px solid var(--gold);width:100%;transition:font-size .3s var(--ease)}
.brand:hover .brand-2{color:var(--blue-mid);border-top-color:var(--blue-mid)}
.site-header.scrolled .brand-1{font-size:26px}
.site-header.scrolled .brand-2{font-size:9px;letter-spacing:.3em}

/* ---------- the shield, sitting inside the banner ---------- */
/* the shield sits behind the headline on the left, under the copy (z-index 2 vs 3) */
/* Big crest filling the back of the banner. It sits at z-index 2, under the copy
   (z-index 3), and its own left edge is masked away so the headline never has the
   shield behind it - the gold headline line is only 3.21:1 on white and cannot
   take any wash at all. */
.hero-badge{position:absolute;z-index:2;top:50%;right:auto;
  /* centred on the copy column, not on the banner, so it backs the content */
  left:calc(50% - min(var(--maxw),100% - 56px)/2 + 290px);
  height:94%;width:auto;max-width:none;
  opacity:.2;pointer-events:none;user-select:none;
  filter:saturate(.88);
  transform:translate(-50%,-50%);
  /* Even strength right across the banner, copy included. .2 is the ceiling: the
     darkest part of the shield at .2 over white lands at L .653, which still gives
     the deep-gold headline line 3.62:1 and the body copy 6:1. */
  animation:tbbBadge 1.5s var(--ease) .3s both}
@keyframes tbbBadge{
  from{opacity:0;transform:translate(-50%,-50%) scale(.96)}
  to{opacity:.2;transform:translate(-50%,-50%) scale(1)}}

/* ---------- the photo now dissolves into white on BOTH sides ---------- */
.hero::before{content:none}
.hero-media{
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0%,transparent 25%,rgba(0,0,0,.18) 37%,rgba(0,0,0,.55) 49%,
    rgba(0,0,0,.88) 59%,#000 67%,#000 75%,rgba(0,0,0,.74) 83%,
    rgba(0,0,0,.36) 90%,rgba(0,0,0,.1) 96%,transparent 100%);
          mask-image:linear-gradient(90deg,
    transparent 0%,transparent 25%,rgba(0,0,0,.18) 37%,rgba(0,0,0,.55) 49%,
    rgba(0,0,0,.88) 59%,#000 67%,#000 75%,rgba(0,0,0,.74) 83%,
    rgba(0,0,0,.36) 90%,rgba(0,0,0,.1) 96%,transparent 100%)}

@media (max-width:980px){
  .hero-badge{display:none}
  .hero-media{
    -webkit-mask-image:linear-gradient(180deg,
      transparent 0%,rgba(0,0,0,.08) 34%,rgba(0,0,0,.34) 58%,
      rgba(0,0,0,.62) 78%,rgba(0,0,0,.78) 100%);
            mask-image:linear-gradient(180deg,
      transparent 0%,rgba(0,0,0,.08) 34%,rgba(0,0,0,.34) 58%,
      rgba(0,0,0,.62) 78%,rgba(0,0,0,.78) 100%)}
  .brand-1{font-size:25px}
  .brand-2{font-size:9px;letter-spacing:.28em}
}
@media (max-width:420px){
  .brand-1{font-size:21px}
  .brand-2{font-size:8px;letter-spacing:.24em}
}
@media (prefers-reduced-motion:reduce){
  .hero-badge{animation:none;opacity:.2}
}

/* ten banners means ten markers - keep them inside a phone */
@media (max-width:620px){
  .hero-dots{flex-wrap:wrap;gap:7px;max-width:100%}
  .hero-dots button{width:21px;height:3px}
  .hero-dots button.active{width:34px}
}

/* stacked footer: the brand block centres so the big shield fills the gap */
@media (max-width:860px){
  .foot-brand{align-items:center;text-align:center}
  .foot-brand img{width:min(250px,72%);margin:0 auto 12px}
  .foot-brand p{max-width:46ch;margin:0 auto}
  .foot-brand .socials{justify-content:center}
}

/* review-platform call to action */
.sec-tight{padding-top:0}
.rev-platforms{border-top:1px solid var(--line);padding-top:26px;text-align:center}
.rev-platforms p{max-width:60ch;margin:0 auto 18px;color:var(--muted)}
.rev-plat-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   RESPONSIVE HARDENING
   Fixes found by auditing all 11 pages at 320 / 375 / 414 / 768 / 1024.
   ========================================================================== */

/* 1. A grid item defaults to min-width:auto, so its longest word sets a floor
      the track cannot shrink below — the grid then pushes past the viewport and
      drags its siblings with it. That is what broke the About page at 360px
      (47px of horizontal scroll). Every grid gets an explicit floor of zero. */
.value-grid > *,.service-grid > *,.steps > *,.counties > *,.svc-list > *,
.tool-stats > *,.fi-links > *,.jail-grid > *,.jail-grid-full > *,
.rev-cards > *,.rev-page-grid > *,.about-stats > *,.why-grid > *,
.pay-plans > *,.howd-grid > *,.foot-grid > *,.footer-grid > *,
.frow > *,.utility > *,.rev-grid > *,.contact-grid > *,.about-grid > *{min-width:0}

/* 2. The three About stats now reflow instead of forcing three columns. */
.about-stats{grid-template-columns:repeat(auto-fit,minmax(102px,1fr))}

/* 3. Long unbroken strings (an email address, a URL) must never set the width. */
body{overflow-wrap:break-word}
.c-lines a,.foot-contact a,.foot-contact span{overflow-wrap:anywhere}

/* 4. Tap targets. WCAG 2.5.8 asks for 24x24 CSS pixels; the carousel markers
      were 21x3, which is close to unhittable with a thumb. The bar stays thin —
      the button around it is padded out to a real target. */
.hero-dots{gap:3px;align-items:center}
.hero-dots button{width:36px;height:26px;padding:11px 2px;flex:0 0 auto;background:none;border:0;
  border-radius:0;display:block;transition:flex-basis .25s var(--ease)}
.hero-dots button::before{content:"";display:block;height:4px;border-radius:2px;
  background:#D8D4CB;transition:background .25s var(--ease)}
.hero-dots button:hover::before{background:var(--blue-top)}
/* background:none is load-bearing. The original pre-touch-target rule further up
   still says .hero-dots button.active{background:linear-gradient(...)}, and two
   classes outrank the .hero-dots button{background:none} below it - so without
   this the active dot paints the gradient across its whole 24px padded box and
   reads as a block sitting outside the line of dashes. */
.hero-dots button.active{width:58px;background:none}
.hero-dots button.active::before{background:linear-gradient(90deg,var(--blue-mid),var(--gold))}

/* text links that act as navigation need a thumb-sized row, not a 17px line box */
.foot-col ul li{margin-bottom:0}
.foot-col ul a{display:inline-block;padding:6px 0;min-height:24px}
.foot-legal a,.foot-contact a{display:inline-block;padding:3px 0;min-height:24px}
.link,.jail-view,.dmore{padding:5px 0;min-height:24px}

/* 5. Very small phones: the brand, the burger and the language button have to
      share 288px of usable width without the header spilling over. */
@media (max-width:380px){
  .container,.wrap{width:min(var(--maxw),calc(100% - 24px))}
  .lang-toggle{padding:7px 9px;font-size:11px;gap:5px}
  .lang-toggle .ic{width:12px;height:12px}
  .header-call{gap:8px}
  .brand-1{font-size:19px}
  .brand-2{font-size:7.5px;letter-spacing:.2em}
  .hero-dots button{width:26px;height:24px;padding:10px 2px}
  .hero-dots button.active{width:40px}
}

/* 6. Tablets in portrait: four-across is too tight, two reads better. */
@media (min-width:521px) and (max-width:900px){
  .counties{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 7. Landscape phones are short, not narrow — stop the hero eating the screen. */
@media (max-height:480px) and (orientation:landscape){
  .hero-inner{min-height:300px}
  .hero-slide{padding:22px 0 4px}
  .mobilebar{display:none}
}

/* 8. Coarse pointers get no hover-only affordances and a comfortable row height. */
@media (pointer:coarse){
  .main-nav a,.nav a{min-height:44px;display:flex;align-items:center}
  .subnav a{min-height:40px;display:flex;align-items:center}
  .btn{min-height:46px}
  .service:hover img,.county:hover img{transform:none}
}

/* 9. iOS Safari zooms the whole page when a form field smaller than 16px takes
      focus. Every field on the contact form was 15px, so tapping "Your Name"
      jumped the layout. 16px on touch widths stops it; desktop is untouched. */
@media (max-width:860px){
  input,select,textarea,
  .field input,.field select,.field textarea,
  .search-row input,.tool-search input{font-size:16px}
}

/* 10. One inline credit link was still under the 24px target height. */
.foot-credit a{display:inline-block;padding:4px 2px}

/* 11. Keep the two emergency buttons on one line on the narrowest phones. */
@media (max-width:360px){
  .mobilebar a{font-size:12.5px;gap:6px;padding:13px 4px;letter-spacing:.02em}
  .mobilebar .ic{width:16px;height:16px}
}

/* facility page image + the illustrative-image disclosures */
.facility-fig{margin:0 0 18px}
.facility-fig img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;display:block;border:1px solid var(--line)}
.facility-fig figcaption{font-size:12px;color:var(--muted);margin-top:6px;font-style:italic}
.img-note{font-size:12px;color:var(--muted);margin-top:16px;text-align:center;font-style:italic}

/* The supplied family portrait is tall (900x1087). Left at its natural height
   beside the copy it towers over the text column and leaves a hole under it,
   so above the 850px breakpoint - where the grid is still two columns - cap it
   and bias the crop upward, which trims floor rather than faces. Below 850px
   the grid stacks and the full portrait is the right thing to show. */
@media (min-width:851px){
  /* anchored to the TOP: the back row stands at the very top of the frame,
     so any downward bias cuts their heads off. Only floor comes off. */
  .about-media img{max-height:560px;object-fit:cover;object-position:50% 0}
}

/* service areas: city link lists and per-facility groups */
.city-links{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:8px 18px;margin:14px 0 0;padding:0}
.city-links a{font-size:14px;color:var(--black);border-bottom:1px solid transparent}
.city-links a:hover{color:var(--gold-deep);border-bottom-color:var(--gold)}
.area-group{padding:20px 0;border-top:1px solid var(--line)}
.area-group h2{font-size:19px;margin-bottom:4px}

/* Quick Links reached 11 items once Service Areas was added, which left the
   footer column roughly twice the height of everything beside it. Flowing it
   into two columns halves that without dropping links - they are there for
   crawlability as much as for people. Below the 850px breakpoint the footer
   is already two columns wide, so a further split would be too narrow. */
.foot-links{columns:2;column-gap:20px}
.foot-links li{break-inside:avoid}
@media (max-width:850px){ .foot-links{columns:1} }

/* Hero carousel dots: the dot sizing runs through flex-basis, not width.
   These are flex items, and the earlier rules set `flex:0 0 auto` while trying
   to size them with `width` - which the flex layout ignores here, so the active
   dot stayed the same size as the rest and only its colour changed. Proven in
   the browser: an inline width:58px rendered 36px, flex-basis:58px rendered 58px.
   Sizes match the breakpoints already defined above. */
.hero-dots button{flex:0 0 36px}
.hero-dots button.active{flex-basis:58px}
@media (max-width:620px){
  .hero-dots button{flex:0 0 26px}
  .hero-dots button.active{flex-basis:40px}
}
@media (max-width:380px){
  .hero-dots button{flex:0 0 22px}
  .hero-dots button.active{flex-basis:34px}
}

/* Process steps.
   There are 5 steps in a 4-column grid, so the last one sat alone on a second
   row. And .step was display:flex with .step-num, h3 and p all as siblings, so
   the heading and the description were laid out side by side in one row - that
   is what squeezed headings like "Speak With an Agent" into three lines.
   Grid puts the number in its own column with the text stacked beside it. */
/* auto-fit, not a fixed count: this block has 5 steps on /how-it-works but only
   4 on the homepage, and repeat(5,...) left the homepage with an empty fifth
   column and a dead gap down the right-hand side. auto-fit collapses the unused
   track so whatever number of steps there are, they fill the row evenly. */
.steps{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.step{display:grid;grid-template-columns:33px 1fr;column-gap:12px;row-gap:2px;align-items:start}
.step-num{grid-column:1;grid-row:1}
.step h3{grid-column:2;grid-row:1;font-size:16px;line-height:1.25}
.step p{grid-column:2;grid-row:2;margin-top:4px}

/* Centre the intro above the steps. Scoped to .process, which is only the
   homepage block - /how-it-works carries its heading in the page hero, and
   every other section on the site is deliberately left-aligned. The steps
   themselves stay left-aligned so the number badges line up down the row. */
.process > .container > .eyebrow,
.process > .container > h2,
.process > .container > .section-intro{text-align:center}
.process > .container > .section-intro{margin-left:auto;margin-right:auto;max-width:620px}

/* Four county tiles now, not three. Same lesson as .steps: a fixed column
   count orphans the last tile the moment the number changes, so let the grid
   work it out and collapse any unused track. */
.counties{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}