/* The Cespedes Law Firm - the design pages' shared stylesheet.

   Every page in design/ links this file. It began as the homepage's own
   <style> block, matched to Ryan's comp (design/assets/CLF home s 01.jpg,
   a 1440 design exported at 1.125x: sizes are comp px / 1.125, on a 1280
   column), and the inner-page parts - the inner hero and each inner
   layout - are matched the same way to the three inner comps beside it.

   One file, so a fix to the header or footer lands on every page at once;
   the 17 copies it replaces had drifted. Page-specific rules sit under
   their own heading below, named for the page that uses them. */

:root{
  /* MarkUp round 1, pin 6: enlarge the logo. One height for every desktop -
     the short-screen profile below used to drop it to 4.2vw, which is the
     54px Ryan reviewed at 1280x800. 5.6vw gives 71.7px there. The cap and
     the vw rate are set by what fits beside the nav: at 1200 the header
     column is 1116px and logo + nav + Free Case Review come to 1102. */
  --logo-h:clamp(46px,4.2vw,64px);
}
body{margin:0}
a{color:#D2A643;text-decoration:none}
a:hover{color:#ECCC5F}
.navlink{color:#0B1257;font-size:clamp(14px,1.18vw,17px);font-weight:600;text-decoration:none;white-space:nowrap}
.navlink:hover{color:#D2A643}
.footlink{color:#B9C0D6;font-size:13px;text-decoration:none;line-height:2}
.footlink:hover{color:#ECCC5F}
.btn-gold{background:#ECCC5F;color:#FFFFFF;font-weight:700;font-size:14px;padding:14px 26px;border-radius:6px;display:inline-block}
.btn-gold:hover{background:#B8902F;color:#FFFFFF;transform:translateY(-2px);box-shadow:0 8px 18px rgba(210,166,67,0.4)}
.btn-outline{border:2px solid #FFFFFF;color:#FFFFFF;font-weight:700;font-size:14px;padding:12px 24px;border-radius:6px;display:inline-block}
.btn-outline:hover{background:#FFFFFF;color:#0B1257;transform:translateY(-2px);box-shadow:0 8px 18px rgba(255,255,255,0.25)}
.mega{position:relative}
.mega-panel{position:absolute;top:100%;left:0;background:#FFFFFF;box-shadow:0 24px 60px rgba(11,18,87,0.25);border-radius:0 0 10px 10px;padding:36px 40px 24px;display:none;z-index:60;width:640px}
.mega:hover .mega-panel{display:block}
.mega-link{display:flex;align-items:center;gap:10px;color:#0B1257;font-size:14px;font-weight:700;text-decoration:none;padding:12px 8px;border-radius:6px}
.mega-link:hover{background:#F5EFF8}
.mega-link span{color:#D2A643;font-size:11px;font-weight:900;letter-spacing:.05em}
.mega-foot{border-top:1px solid #ECE7F5;margin-top:8px;padding-top:16px}
.mega-link-all{color:#D2A643;font-size:13px;font-weight:700;text-decoration:none}
.mega-link-all:hover{color:#ECCC5F}
.mega{position:relative}
.mega-panel{position:absolute;top:100%;left:0;background:#FFFFFF;box-shadow:0 24px 60px rgba(11,18,87,0.25);border-radius:0 0 10px 10px;padding:36px 40px 24px;display:none;z-index:60;width:640px}
.mega:hover .mega-panel{display:block}
.mega-link{display:flex;align-items:center;gap:10px;color:#0B1257;font-size:14px;font-weight:700;text-decoration:none;padding:12px 8px;border-radius:6px}
.mega-link:hover{background:#F5EFF8}
.mega-link span{color:#D2A643;font-size:11px;font-weight:900;letter-spacing:.05em}
.mega-foot{border-top:1px solid #ECE7F5;margin-top:8px;padding-top:16px}
.mega-link-all{color:#D2A643;font-size:13px;font-weight:700;text-decoration:none}
.mega-link-all:hover{color:#ECCC5F}
.mega:focus-within .mega-panel{display:block}   /* the keyboard opens the menus too */
.mega-small .mega-panel{width:220px;padding:8px}
.mega-small .mega-link{padding:9px 14px;font-weight:600}

/* ---------- Tablet and phone: the header bar and the menu drawer --------
   At 1180 and below the main nav folds into a drawer from the right:
   logo, Home, About Us and its pages, Practice Areas as a drop-down of
   every charge, the rest of the menu, then Free Case Review and the
   firm's contact details, held at the bottom while the links scroll.
   On a tablet the header bar carries the number and Free Case Review; on
   a phone the number is an icon beside the menu button. Either way the
   number leaves the top bar there.
   The drawer is the #navtoggle checkbox and CSS; site.js adds Escape,
   the keyboard for the menu button, focus handling, and closes it when a
   link inside it points further down the same page (#contact). */
#navtoggle{display:none}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;padding:8px;margin:-8px -8px -8px 0}
.hamburger span{display:block;width:24px;height:2px;background:#FFFFFF}  /* header sits on the dark hero photo here */
.head-call,.mobile-nav,.drawer-scrim{display:none}

@media (max-width:1180px){
  :root{--tb-h:40px;--logo-h:clamp(42px,4.4vw,54px);--head-py:22px;--head-gap:16px}
  .sitehead-nav{display:none !important}
  .hamburger{display:flex}
  .head-call{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-left:auto;box-sizing:border-box;height:44px;padding:0 18px;
    border:1.5px solid rgba(255,255,255,.85);border-radius:999px;color:#FFFFFF;font-size:15.5px;font-weight:700;line-height:1;white-space:nowrap;text-decoration:none}
  .head-call:hover{background:#FFFFFF;color:#0B1257}
  .head-call svg{flex:none}
  .sitehead .sitehead-cta a.head-cta{height:44px;padding:0 20px;font-size:15.5px;line-height:1;white-space:nowrap}

  .drawer-scrim{display:block;position:fixed;inset:0;z-index:999;background:rgba(5,8,40,.6);opacity:0;pointer-events:none;transition:opacity .3s}
  .mobile-nav{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:1000;width:min(400px,88vw);box-sizing:border-box;
    background:#0B1257;box-shadow:-24px 0 60px rgba(5,8,40,.35);transform:translateX(100%);visibility:hidden;
    transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear .32s}
  #navtoggle:checked ~ .drawer-scrim{opacity:1;pointer-events:auto}
  #navtoggle:checked ~ .mobile-nav{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
  html:has(#navtoggle:checked){overflow:hidden}   /* the page stays put behind the drawer */
}
.drawer-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 16px 18px 24px;border-bottom:1px solid rgba(210,166,67,.45)}
.drawer-logo img{display:block;height:40px;width:auto}
.drawer-close{position:relative;flex:none;width:44px;height:44px;border-radius:50%;cursor:pointer}
.drawer-close span{position:absolute;left:12px;top:21px;width:20px;height:2px;background:#FFFFFF;transform:rotate(45deg)}
.drawer-close span+span{transform:rotate(-45deg)}
.drawer-close:hover{background:rgba(255,255,255,.08)}
.drawer-links{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 24px 20px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent)}  /* fades into the foot: there is more to scroll */
.mobile-navlink{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;box-sizing:border-box;padding:10px 0;
  color:#FFFFFF;font-size:16.5px;font-weight:600;line-height:1.2;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.09)}
.drawer-links > :last-child{border-bottom:0}
.mobile-navlink::after{content:"\203A";color:#D2A643;font-size:22px;line-height:1}
.mobile-navlink:hover,.mobile-navlink[aria-current="page"]{color:#ECCC5F}
/* About Us: a heading over its three pages, always open */
.drawer-group{border-bottom:1px solid rgba(255,255,255,.09);padding-bottom:6px}
.drawer-label{border-bottom:0;min-height:0;padding:14px 0 4px}
.drawer-label::after{content:none}
/* Practice Areas: the drop-down. Its caret points down, and up when open. */
.drawer-dd{border-bottom:1px solid rgba(255,255,255,.09)}
.drawer-dd > summary{list-style:none;cursor:pointer;border-bottom:0}
.drawer-dd > summary::-webkit-details-marker{display:none}
.drawer-dd > summary::after{content:"";width:7px;height:7px;margin-right:4px;border:solid #D2A643;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.drawer-dd[open] > summary{color:#ECCC5F}
.drawer-dd[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.drawer-sect{padding-bottom:8px}
.drawer-sect + .drawer-sect{border-top:1px solid rgba(255,255,255,.06);padding-top:4px}
/* second level: About Us' pages, and the DUI / Criminal Defense headings */
.mobile-navlink.is-sub{min-height:40px;padding:8px 0 8px 16px;border-bottom:0;color:#DDE1F0;font-size:15.5px}
.mobile-navlink.is-sub::after{content:none}
.mobile-navlink.is-head{font-weight:700;color:#FFFFFF}
.mobile-navlink.is-head::after{content:"\203A";font-size:20px}
/* third level: each charge */
.mobile-navlink.is-charge{min-height:38px;padding:7px 0 7px 30px;border-bottom:0;color:#B9C0D6;font-size:14.5px;font-weight:400}
.mobile-navlink.is-charge::after{content:none}
.mobile-navlink.is-sub:hover,.mobile-navlink.is-charge:hover,.mobile-navlink.is-sub[aria-current="page"],.mobile-navlink.is-charge[aria-current="page"]{color:#ECCC5F}
.drawer-dd > summary:focus-visible{outline:2px solid #ECCC5F;outline-offset:3px}
.drawer-foot{flex:none;padding:18px 24px 22px;background:rgba(3,6,40,.35);border-top:1px solid rgba(255,255,255,.08)}
.drawer-ctas{display:grid;gap:10px}
.mobile-nav .drawer-btn{display:flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;height:48px;padding:0 20px;font-size:16px;font-weight:700;line-height:1;border-radius:999px}
.mobile-nav .btn-outline.drawer-btn{border:1.5px solid rgba(255,255,255,.85)}
.mobile-nav .drawer-btn:hover{transform:none;box-shadow:none}
.drawer-contact{display:grid;gap:12px;margin-top:18px}
.drawer-ci{display:flex;align-items:flex-start;gap:12px;color:#FFFFFF;font-size:14.5px;line-height:1.35;text-decoration:none}
.drawer-ci img{flex:none;width:20px;height:20px}
.drawer-ci small{display:block;margin-top:2px;color:#9AA3C9;font-size:12.5px}
.drawer-ci:hover{color:#ECCC5F}
.hamburger:focus-visible,.drawer-close:focus-visible,.head-call:focus-visible,.mobile-navlink:focus-visible,.drawer-ci:focus-visible,.mobile-nav .drawer-btn:focus-visible{outline:2px solid #ECCC5F;outline-offset:3px}
/* Most phones in a browser leave 550-750px of height: a tighter foot, without
   its two small lines, so the menu keeps room to show seven or eight links. */
@media (max-width:1180px) and (max-height:760px){
  .drawer-head{padding-top:14px;padding-bottom:14px}
  .drawer-foot{padding:14px 24px 16px}
  .drawer-ctas{gap:8px}
  .mobile-nav .drawer-btn{height:44px}
  .drawer-contact{gap:9px;margin-top:14px}
  .drawer-ci small{display:none}
}
/* A phone on its side has no room to hold the foot down - the whole drawer scrolls instead. */
@media (max-width:1180px) and (max-height:500px){
  .mobile-nav{overflow-y:auto;overscroll-behavior:contain}
  .drawer-links{flex:none;overflow:visible}
}
/* Phones: logo, the phone as an icon, the menu button. Free Case Review
   is in the hero beneath, in the drawer, and the number floats (below). */
@media (max-width:760px){
  :root{--head-py:14px}
  .sitehead-cta{display:none !important}
  .head-call{width:44px;height:44px;padding:0;margin-right:-6px;border:0;border-radius:50%}
  .head-call:hover{background:rgba(255,255,255,.1);color:#FFFFFF}
  .head-call svg{width:22px;height:22px}
  .head-call span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* still read out */
}

/* ---------- Floating Call Now -----------------------------------------
   Every screen size, lower left, only in the middle of a page: site.js
   shows it between 10% and 90% of the way down. White on gold, like every
   gold button on the site. */
.call-float{display:inline-flex;align-items:center;gap:7px;position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:900;
  box-sizing:border-box;height:39px;padding:0 17px 0 13px;border-radius:999px;background:#D2A643;color:#FFFFFF;
  font-size:12px;font-weight:700;line-height:1;white-space:nowrap;text-decoration:none;box-shadow:0 8px 22px rgba(5,8,40,.35);
  opacity:0;transform:translateY(14px);visibility:hidden;pointer-events:none;
  transition:opacity .25s,transform .25s,visibility 0s linear .25s}
.call-float svg{width:15px;height:15px;flex:none}
.call-float:hover{background:#D2A643;color:#FFFFFF;box-shadow:0 10px 26px rgba(5,8,40,.45)}
.call-float:focus-visible{outline:2px solid #0B1257;outline-offset:3px}
.call-float-on .call-float{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .25s,transform .25s}

@media (prefers-reduced-motion:reduce){
  .mobile-nav,.drawer-scrim,.call-float{transition:none !important}
}

/* ---------- Practice Areas - matched to Ryan's comp -------------------
   design/assets/CLF home s 01.jpg is a 1440 design exported at 1.125x;
   sizes are its measurements /1.125, easing down below 1440. ----------- */
/* Myriad Pro - the face Ryan's comps are set in and the live site self-hosts.
   Page-wide: the root wrapper puts it first, Work Sans is the fallback. */
@font-face{font-family:"Myriad Pro";src:url("/assets/fonts/myriadpro-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Myriad Pro";src:url("/assets/fonts/myriadpro-semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Myriad Pro";src:url("/assets/fonts/myriadpro-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
#practice-areas{background:#F4F3F9}
.pa-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 32px;flex-wrap:wrap;margin-bottom:42px}
/* One eyebrow style site-wide: Semibold 18.5px, .12em - all three comp
   eyebrows solve to it. Each section sets only its own spacing below. */
.eyebrow{color:#D2A643;font-size:clamp(14px,1.285vw,18.5px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;margin:0}
.pa-head .eyebrow{margin-bottom:6.1px}
.sec-title{color:#162395;font-size:clamp(34px,4.07vw,58.6px);font-weight:700;letter-spacing:-.02em;line-height:1;margin:0}
.pa-tabs{display:flex;gap:29px;margin-bottom:calc(clamp(40px,4vw,58px) * .22)}  /* bars sit on the h2 baseline, not its descender box */
.pa-tab{display:inline-flex;flex-direction:column;gap:12px;color:#0B1257;font-size:20px;font-weight:600;line-height:1;text-align:center}
.pa-tab > span:first-child{padding:0 14px}
.pa-tab-bar{display:block;height:8px;margin:1px 0;border-radius:999px;background:#DBDEE3}
.pa-tab.is-active .pa-tab-bar{height:10px;margin:0;background:#ECCC5F}
a.pa-tab:hover{color:#162395}
a.pa-tab:hover .pa-tab-bar{background:#ECCC5F}
.pa-grid{display:grid;gap:21px}
.pa-grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:21px}
.pa-grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pa-card{display:flex;flex-direction:column;background:#FFFFFF;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(20,24,60,.12),0 2px 8px rgba(20,24,60,.06)}
.pa-card.is-featured{background:#0B1257}
.pa-body{flex:1;display:flex;flex-direction:column;padding:34px 28px 41px}
.pa-card h3{color:#0B1257;font-size:clamp(24px,2.2vw,32px);font-weight:700;line-height:1.1;margin:0 0 10px}
.pa-card p{color:#1F273A;font-size:clamp(16px,1.25vw,18px);line-height:1.383;margin:0 0 27.5px}
.pa-card.is-featured h3{color:#ECCC5F}
.pa-card.is-featured p{color:#F3F3FB}
.pa-card .pill{margin-top:auto;align-self:flex-start}
.pill{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:51px;padding:0 36px;border:1px solid #D2A643;border-radius:999px;font-size:16.5px;font-weight:700;line-height:1;white-space:nowrap;text-decoration:none;transition:transform .15s,box-shadow .15s,background-color .15s,color .15s}
.pill:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(210,166,67,.35)}
.pill.is-gold,.pill.is-gold:hover{background:#D2A643;color:#FFFFFF}
.pill.is-outline{background:#FFFFFF;color:#D2A643}
.pill.is-outline:hover{background:#D2A643;color:#FFFFFF}
.pa-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:60px}
.pa-actions .pill{height:60px;padding:0 32px}

/* ---------- About teaser - matched to the comp ----------------------
   A 933px navy card centred over a photo band that starts 156px below
   the card's top and ends 153px above its bottom. ------------------- */
.ab{position:relative;background:#F4F3F9}
.ab-band{position:absolute;left:0;right:0;overflow:hidden;
  top:calc(6px + clamp(48px,10.8vw,156px));bottom:clamp(48px,10.6vw,153px)}
/* The comp frames one photo two ways: Lady Justice just left of the card,
   the courthouse columns at the right edge. No single crop does both, so
   each half paints its own framing; they meet behind the card. Scale 0.88
   and offsets are solved from the statue's blindfold in comp vs source. */
.ab-band::before,.ab-band::after{content:"";position:absolute;top:0;bottom:0;width:50%;
  background:#0B1257 url("/assets/img/photo/video-background-image.webp") no-repeat;background-size:1690px auto}
.ab-band::before{left:0;background-position:right -650.5px top -217px}
.ab-band::after{right:0;background-position:right 0 top -217px}
.ab-card{position:relative;max-width:933px;margin:0 auto;box-sizing:border-box;background:#0B1257;border-radius:24px;text-align:center;
  padding:clamp(48px,7.08vw,102px) clamp(20px,5.5vw,80px) clamp(48px,6.9vw,100px)}
.ab-card .eyebrow{margin-bottom:8.5px}
.ab-title{color:#F4F3F9;font-size:clamp(34px,4.1vw,59px);font-weight:600;line-height:1.1;margin:0 0 var(--ab-title-mb,40px)}
.ab-video{position:relative;max-width:699px;border-radius:12px;box-shadow:0 14px 28px rgba(0,0,0,.45);margin:0 auto 46.6px}
.ab-play{position:absolute;left:50%;top:50%;width:clamp(60px,6.5vw,93px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:rgba(210,166,67,.85);display:flex;align-items:center;justify-content:center;pointer-events:none}
.ab-play span{width:0;height:0;border-style:solid;border-width:.2em 0 .2em .34em;border-color:transparent transparent transparent #0B1257;font-size:clamp(60px,6.5vw,93px);margin-left:.07em}
.ab-body{color:#F4F3F9;font-size:clamp(16px,1.25vw,18px);font-weight:600;letter-spacing:.046em;line-height:1.522;max-width:703px;margin:0 auto 53.2px}

/* ---------- Reviews - matched to the comp --------------------------- */
#reviews{background:#F4F3F9}
#reviews .eyebrow{margin-bottom:8.1px}
.rv-tabs{display:flex;justify-content:center;gap:25px;margin:33.8px 0 46px}
.rv-tab{display:inline-flex;flex-direction:column;align-items:center;gap:9.3px;color:#0B1257;font-size:19px;font-weight:400;line-height:1}
.rv-tab > span{display:inline-flex;align-items:center;gap:10px}
.rv-tab img{width:16px;height:auto;display:block}
.rv-tab > i{display:block;width:69px;height:10px;border-radius:999px;background:#DBDEE3}
.rv-tab.is-active > i{background:#ECCC5F}
a.rv-tab:hover{color:#162395}
a.rv-tab:hover > i{background:#ECCC5F}
.rv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:21px;text-align:left}
.rv-card{display:flex;flex-direction:column;background:#FFFFFF;border-radius:12px;box-shadow:0 1px 2px rgba(20,24,60,.12),0 2px 8px rgba(20,24,60,.06);
  padding:44px 35px 36px 30px;color:#1F273A}
.rv-card.is-featured{background:#0B1257;color:#F4F3F9}
.rv-stars{display:block;width:108.4px;height:17.8px;margin:0 0 25.4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='xMinYMid meet'%3E%3Cpath fill='%23D2A643' d='M12 1.6l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.7l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3C/svg%3E") 0 0/22.65px 17.8px repeat-x}
.rv-text{font-size:clamp(16px,1.25vw,18px);line-height:24.9px;margin:0}
.rv-more{display:block;align-self:flex-start;font-size:clamp(16px,1.25vw,18px);line-height:24.9px;color:inherit;text-decoration:underline;text-underline-offset:3px}
.rv-more:hover{color:#D2A643}
.rv-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:30px}
.rv-foot span{color:#85868A;font-size:16px;font-weight:600}
.rv-card.is-featured .rv-foot span{color:#C9CFE6}
.rv-foot img{width:28px;height:auto;display:block}
.rv-dots{display:flex;justify-content:center;align-items:center;gap:12px;margin:35px 0 38px}
.rv-dots i{display:block;width:10px;height:10px;border-radius:50%;background:#C1CAD1}
.rv-dots i.is-active{width:15px;height:15px;background:#05072D}
.rv-all{height:60px !important;padding:0 42.5px !important}
.rv-awards-title{color:#162395;font-size:clamp(20px,1.67vw,24px);font-weight:600;line-height:1.2;margin:78px 0 43.5px}
.rv-awards{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;max-width:1103px;margin:0 auto}
.rv-awards img{display:block;width:auto;mix-blend-mode:multiply}
.rv-b-round,.rv-b-square{height:101px;width:auto}
.rv-b-2025{height:91.5px;width:auto}
.rv-b-yelp{height:90px;width:auto}

/* ---------- Results - matched to the comp --------------------------- */
.rs{background:#FFFFFF}
.rs-grid{max-width:var(--wrap);margin:0 auto;display:grid;align-items:center;
  /* inset : photo : gap : text = 32 : 563.6 : 106.7 : 577.7 of the comp's 1280 column */
  grid-template-columns:minmax(0,32fr) minmax(0,563.6fr) minmax(0,106.7fr) minmax(0,577.7fr)}
.rs-photo{grid-column:2}
.rs-text{grid-column:4;padding-top:9.8px}   /* line boxes run 9.8px taller than the comp's ink; keeps the centring true */
.rs-photo{aspect-ratio:634/886;border-radius:20px;box-shadow:0 20px 22px -12px rgba(0,0,0,.55);
  /* Framing solved by matching the comp against the source (r = 0.997): the
     source at 1:1 comp px, left edge, from 140px down - image-slot can only
     centre-crop, which shows the whole scene smaller. */
  background:#1a1a1a url("/assets/img/photo/results-left-image.webp") 0 73.7%/124.3% auto no-repeat}
.rs .eyebrow{letter-spacing:.17em;margin-bottom:9.5px}
.rs .sec-title{line-height:1.031;margin:0 0 43.1px}
.rs-feats{display:grid;grid-template-columns:minmax(0,267.7px) minmax(0,1fr);row-gap:39.4px}
.rs-feat img{display:block;width:70px;height:70px;margin:0 0 14.6px}
.rs-feat h3{color:#0B1257;font-size:clamp(20px,1.72vw,24.8px);font-weight:700;line-height:1.29;margin:0 0 2.1px}
.rs-feat p{color:#4F4F4F;font-size:clamp(16px,1.375vw,19.8px);font-weight:600;line-height:1.303;margin:0}
@media (max-width:900px){
  .rs-grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .rs-photo,.rs-text{grid-column:1}
  .rs-photo{max-width:480px}
  .rs-feats{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
}
@media (max-width:480px){
  .rs-feats{grid-template-columns:minmax(0,1fr)}    /* the 268px desktop column left no room at 320 */
}

/* ---------- FAQ - matched to the comp ------------------------------- */
#faq{background:#F4F3F9}
.faq-head{text-align:center;margin:0 0 62.6px}
#faq .eyebrow{letter-spacing:.17em;margin-bottom:6.1px}
.faq-grid{display:grid;grid-template-columns:minmax(0,20.4fr) minmax(0,575fr) minmax(0,64.8fr) minmax(0,575fr) minmax(0,44.8fr)}
.faq-col-l{grid-column:2}
.faq-col-r{grid-column:4}
.faq-item{display:flex;box-sizing:border-box;padding:var(--pt,25px) 0 0 13.6px}
.faq-q{flex:0 0 58.4px;color:#D2A643;font-size:21.7px;font-weight:600;line-height:28.4px}
.faq-item h3{margin:0;color:#414270;font-size:21.7px;font-weight:600;line-height:28.4px}
.faq-item.is-open{margin:0 -31.2px 0 -8px;padding:var(--pt,25px) 40.6px 22.3px;background:#0B1257;border-radius:14px;min-height:173.3px}
.faq-item.is-open .faq-q,.faq-item.is-open h3{color:#ECCC5F}
.faq-item.is-open p{margin:12.6px 0 0;color:#F3F3FB;font-size:18px;line-height:24.9px}
.faq-q2,.faq-q4,.faq-q5{border-bottom:1px solid #A0A3AA}
.faq-q2{min-height:85.3px} .faq-q4{min-height:135.1px} .faq-q5{min-height:123.6px}
.faq-q3,.faq-q6{min-height:166.2px}
/* label cap-top per row, as the comp spaces them: 32.9 / 32.9 / 36.4 / 32.9 / 39.1 / 37.3 */
.faq-item.is-open{--pt:28.9px} .faq-q2{--pt:28.9px} .faq-q3{--pt:32.3px}
.faq-q4{--pt:28.9px} .faq-q5{--pt:35px} .faq-q6{--pt:33.2px}
.faq-actions{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.faq-actions .pill{height:60px;padding:0 36px;min-width:210px}
@media (max-width:900px){
  .faq-grid{grid-template-columns:minmax(0,1fr)}
  .faq-col-l,.faq-col-r{grid-column:1}
  .faq-item,.faq-item.is-open{height:auto;padding-bottom:22px;margin:0}
  .faq-q3{border-bottom:1px solid #A0A3AA}
  .faq-actions{margin-top:40px}
}

/* ---------- Contact card + footer - matched to the comp ------------- */
#contact{position:relative;z-index:2;background:#F4F3F9}
.ct-card{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;box-sizing:border-box;background:#FFFFFF;border-radius:20px;
  padding:66.6px 57.8px 58.5px 59.6px;display:grid;align-items:start;
  grid-template-columns:minmax(0,476fr) minmax(0,66.2fr) minmax(0,620.4fr)}
.ct-left{grid-column:1;padding-top:36.3px}
.ct-form{grid-column:3;display:flex;flex-direction:column;align-items:stretch;margin:0}
.ct-left .eyebrow{margin-bottom:8px}
.ct-title{letter-spacing:-.041em;line-height:.981;margin:0 0 21.8px}
.ct-body{color:#6D6D6D;font-size:clamp(16px,1.38vw,19.9px);font-weight:600;line-height:1.25;margin:0}
.ct-head{color:#6D6D6D;font-size:clamp(15px,1.36vw,19.6px);font-weight:600;line-height:1.087;text-transform:uppercase;text-align:center;margin:0 0 22.1px}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:18.7px;margin-bottom:18.7px}
.ct-form input,.ct-form select,.ct-form textarea{box-sizing:border-box;width:100%;height:52.4px;padding:0 17.8px;
  background:#FAFAFA;border:1px solid #D2D2D2;border-radius:8px;font:400 17.1px/1.2 "Myriad Pro","Work Sans",sans-serif;color:#1F273A}
.ct-form ::placeholder{color:#6D6D6D;opacity:1}
.ct-form select{appearance:none;-webkit-appearance:none;color:#6D6D6D;cursor:pointer;
  background:#FAFAFA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 7'%3E%3Cpath d='M.6 1l3.4 4.4L7.4 1' fill='none' stroke='%23D2A643' stroke-width='1.3'/%3E%3C/svg%3E") right 22px center/8px 7px no-repeat;padding-right:44px}
.ct-form select:valid{color:#1F273A}
.ct-form textarea{height:100.4px;padding-top:15px;resize:vertical}
.ct-form :focus{outline:2px solid #D2A643;outline-offset:1px}
.ct-send{align-self:center;height:60.4px !important;min-width:232.9px;padding:0 32px !important;margin-top:29.3px;
  text-transform:uppercase;border:none;cursor:pointer;font-family:inherit}
.ct-legal{color:#6D6D6D;font-size:14.2px;font-weight:600;line-height:19.6px;text-align:center;margin:27.2px 0 0}
.ft{position:relative;z-index:1;margin-top:0;padding:104px var(--gut) 0;   /* was pulled 297.7 up under the card; now it starts below it, after the contact section's own bottom padding */
  color:#F4F3F9;
  background:#0B1257 url("/assets/img/photo/footer-background-photo.webp") center/cover no-repeat}
.ft a{color:#F4F3F9}
.ft a:hover{color:#ECCC5F}
.ft-grid{max-width:var(--wrap);margin:0 auto;display:grid;align-items:start;
  grid-template-columns:minmax(0,27.6fr) minmax(0,361.8fr) minmax(0,111fr) minmax(0,193.8fr) minmax(0,256fr) minmax(0,329.8fr)}
.ft-brand{grid-column:2;text-align:center}
.ft-brand img{display:block;width:100%;max-width:361.8px;height:auto;margin:0 auto}
.ft-brand p{font-size:clamp(15px,1.24vw,17.9px);line-height:24.9px;margin:50.3px 0 0}
.ft-links{grid-column:4} .ft-areas{grid-column:5} .ft-contact{grid-column:6}
.ft-col{display:flex;flex-direction:column;align-items:flex-start;margin-top:-3.8px}
.ft-head{color:#ECCB62;font-size:19.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;margin:0 0 31px}
.ft-col a:not(.ft-map),.ft-ci{font-size:17.5px;line-height:33.8px}
.ft-ci{display:flex;align-items:flex-start;gap:12.4px;line-height:24.9px !important;margin-bottom:25px}
.ft-contact .ft-head + .ft-ci{margin-top:4.4px}   /* 24.9px lines vs the links' 33.8px: keep caps level */
.ft-ci img{width:26.7px;height:26.7px;flex:none;margin-top:-1px}
.ft-map{position:relative;display:block;width:100%;max-width:328.9px;aspect-ratio:328.9/176.9;border-radius:10px;overflow:hidden;
  background:#E8ECF1 linear-gradient(135deg,transparent 47%,#FFFFFF 47% 53%,transparent 53%) center/60px 60px;margin-top:6.9px}
.ft-map-chip{position:absolute;left:8px;top:8px;background:#FFFFFF;color:#1A73E8;font-size:13px;font-weight:600;padding:5px 9px;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.ft-map-pin{position:absolute;left:50%;top:44%;width:18px;height:18px;margin:-18px 0 0 -9px;background:#E53935;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.ft-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ft-bottom{max-width:var(--wrap);margin:114.7px auto 0;border-top:1px solid rgba(210,166,67,.55);
  padding:59.1px 0 56.1px;text-align:center;font-size:17.5px;line-height:1.2}
.ft-bottom a{margin:0 2px}
.ft-bottom i{font-style:normal;color:#ECCB62;margin:0 6px}
@media (max-width:900px){
  .ct-card{grid-template-columns:minmax(0,1fr);padding:40px 22px}
  .ct-left,.ct-form{grid-column:1} .ct-left{padding-top:0;margin-bottom:32px}
  .ct-body br,.ct-head br{display:none}
  .ft-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px 24px}
  .ft-brand{grid-column:1 / -1} .ft-links,.ft-areas{grid-column:auto} .ft-contact{grid-column:1 / -1}
}

/* ---------- Hero - matched to the comp ------------------------------ */
.sitehead .sitehead-cta .head-cta{height:48.9px;box-sizing:border-box;padding:0 24.4px;display:inline-flex;align-items:center;font-size:16.5px;font-weight:700}
.hero-copy{max-width:830px}
.hero-check{display:flex;align-items:center;gap:11.5px;color:#FFFFFF;font-size:var(--hero-chk,clamp(16px,1.54vw,22.2px));font-weight:600;line-height:1.2}
.hero-btns{display:flex;gap:24.9px;flex-wrap:wrap}
.hero-btns .hero-btn{box-sizing:border-box;width:var(--hero-btn-w,254.2px);height:var(--hero-btn-h,72px);padding:0;display:inline-flex;flex-direction:column;
  align-items:center;justify-content:center;border-radius:999px;text-align:center;line-height:1.05}
.hero-btns .btn-outline{font-size:var(--hero-btn-fs,24.5px);font-weight:600;border:2px solid #FFFFFF;color:#FFFFFF}
.hero-btn.is-call span:first-child{font-size:15px;font-weight:600}
.hero-btn.is-call span:last-child{font-size:var(--hero-num,26.7px);font-weight:700}
/* The settlement counters are gone (Ryan, pins 25 and 27, 1 Oct 2026); this
   is now only the hero's bottom spacer. It used to hold ~271px of padding
   around the counters, and letting that collapse would end the hero photo
   abruptly under the buttons - so the space is kept, and cut to what the
   hero needs rather than what four stat columns needed. That also answers
   pin 28, which was pinned on this block for taking too much room on a
   phone. */
.hero-stats{position:relative;margin:0 calc(-1 * var(--gut));padding:0 0 clamp(44px,5.6vw,80px)}

/* ---------- Layout scale ----------------------------------------------
   Tuned so a 1366x768 laptop gets the full desktop layout and the same
   page fills a 1920 display, with every row on one centred column. ------ */
:root{
  /* Ryan's comp is a 1440 design on a 1280 column - 80px gutters. The
     column follows that: 1200 up to ~1360, the comp's 1280 at 1440,
     capped at 1320 from ~1480 so a 1920 display still breathes. */
  --wrap:clamp(1200px,calc(100vw - 160px),1320px);
  --gut:clamp(20px,3.5vw,64px);    /* gutter on full-bleed sections  */
}
/* Short desktop screens - a 1366x768 or 1440x900 laptop leaves ~650-790px
   of viewport. Two-line headline and tighter spacing keep the hero's
   buttons above the fold; tall screens keep Ryan's sizes. */
/* Phones: the 304px-wide logo pushed the hamburger off a 390px screen.
   10vw keeps logo + phone icon + hamburger inside the row down to 320px. */
@media (max-width:760px){
  :root{--logo-h:clamp(30px,10vw,44px);--head-gap:14px}
}
/* Phones: the hero's two buttons side by side and smaller, with the space
   above them tightened, so they sit above the fold on an iPhone SE
   (375x667, about 550px of it showing in Safari) - and fit a 320 screen. */
@media (max-width:760px){
  :root{
    --hero-pt:28px; --hero-p:16px; --hero-p-mb:14px; --hero-list-gap:5px; --hero-list-mb:22px;
    --hero-btn-w:auto; --hero-btn-h:50px; --hero-btn-fs:clamp(14px,4.2vw,17px); --hero-num:clamp(14px,4.2vw,17px);
  }
  .hero-btns{flex-wrap:nowrap;gap:10px}
  .hero-btns .hero-btn{flex:1 1 50%;min-width:0;max-width:260px}   /* 50%, not 0: the outlined one's border would make it wider */
  .hero-btn.is-call span:first-child{font-size:11.5px;margin-bottom:1px}
}
@media (min-width:1181px) and (max-height:820px){
  :root{
    --tb-h:40px; --head-py:16px;
    --hero-pt:36px; --hero-h1:clamp(40px,4.6vw,66px); --hero-h1-mb:14px;
    --hero-p:19px; --hero-p-mb:16px; --hero-chk:18.5px; --hero-list-gap:3px; --hero-list-mb:22px;
    --hero-btn-w:224px; --hero-btn-h:60px; --hero-btn-fs:20px; --hero-num:22px;
    --stats-pt:90px;
    --ih-pt:56px; --ih-pb:72px;   /* inner hero: title and buttons well above the fold */
  }
}

/* ---------- Inner-page hero - matched to the inner comps ----------------
   design/assets/CLF inner services.jpg, ... service single.jpg and ...
   service area.jpg draw the same hero: the homepage's top bar and header
   over a darkened photo, then the title, breadcrumb and the homepage's two
   hero buttons, centred. Measured (CSS px at 1440): header rule 212.4,
   title cap-top 335.1, breadcrumb cap-top 400.9, buttons 439.1-511.1,
   hero ends 632.9. The title solves to Myriad Bold 71.9px at -.0526em from
   the ink widths of "Practice Areas" (394.7) and "Misdemeanor DUI Defense
   Attorney" (1030.2); the breadcrumb to Semibold 18px. */
.ih{position:relative;background:#0B1257;padding:0 var(--gut);overflow:hidden;display:flex;flex-direction:column}
.ih-bg{position:absolute;inset:0}
.ih-bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);pointer-events:none}
.ih-body{position:relative;width:100%;max-width:var(--wrap);margin:0 auto;box-sizing:border-box;text-align:center;
  padding:var(--ih-pt,clamp(48px,8.174vw,117.7px)) 0 var(--ih-pb,clamp(56px,8.458vw,121.8px))}
.ih-title{color:#FFFFFF;font-size:var(--ih-h1,clamp(34px,5vw,72px));font-weight:700;letter-spacing:-.0526em;line-height:1;margin:0;text-wrap:balance}
.ih-crumb{color:#FFFFFF;font-size:clamp(15px,1.25vw,18px);font-weight:600;line-height:1.2;margin:var(--ih-crumb-mt,-3.5px) 0 var(--ih-crumb-mb,18.9px)}
.ih-crumb a{color:#FFFFFF}
.ih-crumb a:hover{color:#ECCC5F}
.ih-crumb [aria-current]{color:#ECCC5F}
.ih-btns{justify-content:center}
/* Inner heroes: the homepage's two buttons at a smaller size, so they sit
   under the page title instead of competing with it - every inner page. */
.ih-btns{gap:14px;--hero-btn-w:200px;--hero-btn-h:52px;--hero-btn-fs:17px;--hero-num:18.5px}
.ih-btns .hero-btn.is-call span:first-child{font-size:11.5px;margin-bottom:1px}
@media (max-width:760px){
  .ih-btns{gap:10px;--hero-btn-w:auto;--hero-btn-h:48px;--hero-btn-fs:clamp(14px,4.2vw,16px);--hero-num:clamp(14px,4.2vw,16px)}
}
/* a page's opening line - it sat in the old hero, which the comps keep bare */
.page-intro{color:#1F273A;font-size:clamp(17px,1.4vw,20px);font-weight:600;line-height:1.45;text-align:center;max-width:860px;margin:0 auto clamp(32px,3.5vw,48px)}
/* the footer on a page with no contact card above it to tuck under */
.ft.is-plain{margin-top:0;padding-top:clamp(64px,7vw,100px)}

/* ---------- Practice-area pages - matched to CLF inner services.jpg ------
   DUI Defense and Criminal Defense. The comp draws them from the homepage's
   parts: the card grid under a centred tab pair, the About card holding a
   review, then the homepage's reviews, results and FAQ as they are.
   Measured (CSS px at 1440): tab label cap-top 712.9, bars 739.6-749.3,
   cards from 803.6, buttons 1966-2028, review card 2108.4-2792.9 over a
   band from 159.2 below its top to 158.2 above its bottom. */
.pa-inner{background:#F4F3F9;padding:clamp(48px,5.46vw,78.6px) var(--gut) clamp(48px,5.14vw,74px)}
.pa-tabs.is-center{justify-content:center;gap:31.1px;margin:0 0 clamp(36px,3.77vw,54.3px)}
.pa-tabs.is-center .pa-tab{gap:8.1px}
.pa-tabs.is-center .pa-tab > span:first-child{padding:0 12.3px}   /* bars: DUI 56.9, Criminal Defense 177.7 */
.pa-tabs.is-center .pa-tab-bar,.pa-tabs.is-center .pa-tab.is-active .pa-tab-bar{height:9.7px;margin:0}
.pa-inner .pa-actions{margin-top:clamp(48px,5.43vw,78.2px)}
/* Every charge type, grouped - not in the comp, but the pages' only way
   into most charge pages. Group titles are the site eyebrow; the buttons
   are the service-area comp's county buttons. */
.pa-all{margin-top:clamp(56px,5.43vw,78.2px);text-align:center}
.pa-all-title{color:#162395;font-size:clamp(28px,2.6vw,37.5px);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0 0 clamp(24px,2.5vw,36px)}
.pa-all-group{margin:0 0 30px}
.pa-all-group .eyebrow{margin:0 0 14px}
.pa-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.pa-chip{display:inline-flex;align-items:center;justify-content:center;min-height:56px;box-sizing:border-box;padding:10px 26px;background:#FFFFFF;border-radius:12px;
  box-shadow:0 1px 2px rgba(20,24,60,.12),0 2px 8px rgba(20,24,60,.06);color:#0B1257;font-size:clamp(15px,1.18vw,17px);font-weight:600;line-height:1.2;
  text-decoration:none;transition:background-color .15s,color .15s}
.pa-chip:hover{background:#0B1257;color:#FFFFFF}
/* The DUI and Criminal Defense hubs' "Browse All" lists: each charge as a photo
   tile - a 3:2 thumbnail of its own page's photo (/assets/photo/thumbs, ~11 KB,
   loaded as the list scrolls into view), its name beneath - rather than a text
   pill. Same white card and shadow as the pills, the cards' navy hover. Groups
   stay centred, four to a row on a desktop, two on a phone */
.pa-tiles{gap:16px}
.pa-tile{display:flex;flex-direction:column;width:260px;box-sizing:border-box;background:#FFFFFF;border-radius:12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,24,60,.12),0 2px 8px rgba(20,24,60,.06);color:#0B1257;font-size:clamp(15px,1.18vw,17px);font-weight:600;line-height:1.25;
  text-decoration:none;transition:background-color .2s,color .2s,transform .2s,box-shadow .2s}
.pa-tile img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;background:#E8ECF1}
.pa-tile span{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:58px;box-sizing:border-box;padding:12px 16px}
.pa-tile:focus-visible{outline:3px solid #D2A643;outline-offset:3px}
@media (hover:hover){ .pa-tile:hover{background:#0B1257;color:#FFFFFF;transform:translateY(-3px);box-shadow:0 10px 30px rgba(11,18,87,.22)} }
@media (hover:hover) and (prefers-reduced-motion:reduce){ .pa-tile:hover{transform:none} }
@media (max-width:600px){ .pa-tiles{gap:12px} .pa-tile{width:calc(50% - 6px)} .pa-tile span{min-height:52px;padding:10px 10px;font-size:15px} }
/* The review card is the homepage's About card; the band sits a little
   deeper into it (159.2 / 158.2 against the About band's 156 / 153). */
.ab.is-quote .ab-band{top:calc(6px + clamp(48px,11.06vw,159.2px));bottom:clamp(48px,10.99vw,158.2px)}
.tm-card{padding:clamp(48px,5.6vw,80.6px) clamp(20px,6.3vw,90px) clamp(48px,5.92vw,85.3px)}
.tm-stars{display:block;width:151.2px;height:31.6px;margin:0 auto 25.7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='xMinYMid meet'%3E%3Cpath fill='%23ECCC5F' d='M12 1.6l3.1 6.6 7.2.9-5.3 5 1.4 7.1L12 17.7l-6.4 3.5 1.4-7.1-5.3-5 7.2-.9z'/%3E%3C/svg%3E") 0 0/29.9px 31.6px repeat-x}
.tm-title{color:#ECCC5F;font-size:clamp(26px,2.3vw,33.1px);font-weight:600;line-height:1.2;margin:0 0 21.6px}
.tm-card blockquote{max-width:745px;margin:0 auto}   /* the comp's widest line is 744.9: "made. I had" must not fit */
.tm-quote{color:#F4F3F9;font-size:clamp(18px,1.73vw,24.9px);font-weight:600;line-height:1.357;margin:0}
.tm-quote + .tm-quote{margin-top:1.357em}
.tm-credit{display:flex;justify-content:center;align-items:center;gap:12px;margin:42.2px 0 0;color:#ECCC5F;font-size:clamp(17px,1.39vw,20px);font-weight:600;line-height:1.2}
.tm-credit i{display:block;width:1px;height:1.1em;background:currentColor;opacity:.8}
/* stand-in for the platform's white wordmark, which is not in design/assets */
.tm-source{margin:37.7px 0 0;color:#FFFFFF;font-size:34px;font-weight:700;font-style:italic;letter-spacing:-.02em;line-height:.76}

/* ---------- Charge pages - matched to CLF inner service single.jpg --------
   One template behind all 45 charges. Three columns wider than the site
   column: 320.9 | 629.3 | 320.9 on 42px gaps, 1355.4 across at 1440 with
   42.3px margins. Measured (CSS px at 1440): cards from 712.9, the photo
   629.3 x 418.7, the article H2 Bold 41px/-.047em on 40.4px lines, body
   Regular 18px on 24.9, card titles Semibold 23.4, list items Semibold
   17.7 on 33.8, Service Areas entries Semibold 19.8 on 42.7. */
.ch{background:#F4F3F9;padding:clamp(48px,5.56vw,80px) clamp(20px,2.94vw,42.3px) clamp(56px,6.9vw,99.4px)}
.ch-grid{max-width:1356px;margin:0 auto;display:grid;align-items:start;column-gap:clamp(24px,2.93vw,42.2px);
  grid-template-columns:minmax(0,320.9fr) minmax(0,629.3fr) minmax(0,320.9fr)}
.ch-side{display:flex;flex-direction:column;gap:45.3px}
.ch-side-l{position:sticky;top:24px}
.ch-card{background:#FFFFFF;border-radius:12.4px;box-shadow:0 1px 2px rgba(20,24,60,.12),0 2px 8px rgba(20,24,60,.06);
  padding:36.5px 32px 38.6px 38.3px}
.ch-card-title{color:#0B1257;font-size:clamp(20px,1.63vw,23.4px);font-weight:600;line-height:1.2;margin:0 0 12.3px}
.ch-list{list-style:none;margin:0;padding:0}
.ch-list li{position:relative;padding-left:15.2px;font-size:clamp(16px,1.23vw,17.7px);font-weight:600;line-height:1.35;padding-top:4.9px;padding-bottom:4.9px}   /* 33.8px a row, as the comp; long labels wrap tight */
.ch-list li::before{content:"";position:absolute;left:0;top:calc(4.9px + .675em - 3.1px);width:6.2px;height:6.2px;border-radius:50%;background:#DCDDE3}
.ch-list li.is-current::before{background:#ECCC5F}
.ch-list a{color:#0B1257}
.ch-list li.is-current a,.ch-list a:hover{color:#D2A643}
.ch-main > :is(image-slot,img.slot){display:block;margin:0 0 40.7px}
.ch-main h2{color:#0B1257;font-size:clamp(30px,2.85vw,41px);font-weight:700;letter-spacing:-.047em;line-height:.985;margin:34.8px 0 18.6px;text-wrap:balance}
.ch-main > :is(image-slot,img.slot) + h2{margin-top:0}
.ch-main p{color:#1F273A;font-size:clamp(16px,1.25vw,18px);line-height:1.383;margin:0 0 24.9px}
.ch-bullets{list-style:none;margin:0 0 24.9px;padding:0}
.ch-bullets li{position:relative;padding-left:29.4px;color:#1F273A;font-size:clamp(16px,1.25vw,18px);line-height:1.383;margin:0 0 5.3px}
.ch-bullets li::before{content:"";position:absolute;left:11.1px;top:.62em;width:6.2px;height:6.2px;border-radius:50%;background:#A0A3AA}
.ch-main .ch-note{color:#6D6D6D;font-size:14.2px;line-height:19.6px;margin-top:36px}
/* the written pages (Chino Hills copy): section heads a step below the page's
   own h2, cited statutes as underlined links, FAQs as cards */
.ch-main h2.ch-sub{font-size:clamp(24px,2.1vw,30px);line-height:1.12;letter-spacing:-.03em;margin:38px 0 16px}
.ch-main p a:not(.pill),.ch-bullets a,.pillar-main p a{color:#0B1257;text-decoration:underline;text-decoration-color:#D2A643;text-decoration-thickness:2px;text-underline-offset:3px}
.ch-main p a:not(.pill):hover,.ch-bullets a:hover,.pillar-main p a:hover{color:#B08A2E}
.ch-main strong,.pillar-main strong{color:#0B1257;font-weight:700}
.ch-faqs{display:grid;gap:14px;margin:0 0 24.9px}
.ch-faq{background:#FFFFFF;border:1px solid #E4E3EC;border-left:4px solid #D2A643;border-radius:10px;padding:20px 24px}
.ch-faq h3,.ch-faq h4,.pillar-main .ch-faq h3{color:#0B1257;font-size:clamp(17px,1.35vw,19.5px);font-weight:700;line-height:1.3;letter-spacing:-.01em;margin:0 0 8px;text-wrap:wrap}
.ch-main .ch-faq p,.pillar-main .ch-faq p{margin:0}
/* the Chino Hills hub: an intro above the two practice-area cards, and the
   office card on its own, centred */
.hub-intro{max-width:880px;margin:0 0 clamp(32px,3.5vw,48px)}
.hub-intro .ip-h2{margin:6px 0 18px}
.hub-intro .ip-text{margin:0 0 14px}
.hub-intro .ip-text a,.page-intro a{color:#0B1257;text-decoration:underline;text-decoration-color:#D2A643;text-decoration-thickness:2px;text-underline-offset:3px}
.ct-offices.is-one{grid-template-columns:minmax(0,560px);justify-content:center;margin-bottom:0}
.ch-main .post-tag{color:#B08A2E;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 6px}
.ch-main .post-meta{display:flex;flex-wrap:wrap;gap:4px 10px;color:#5B6572;font-size:15px;margin:0 0 18px}
.ch-main .post-meta a{color:#0B1257;font-weight:600}
.pillar{background:#F4F3F9;padding:clamp(48px,5.56vw,80px) var(--gut) clamp(56px,6.9vw,99.4px)}
.pillar-main{max-width:880px;margin:0 auto}
.pillar-main .sec-title{text-align:left;margin:0 0 28px}
.pillar-main h3{color:#0B1257;font-size:clamp(24px,2.1vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.12;margin:38px 0 16px;text-wrap:balance}
.ch-map{padding:32.9px 32.9px 35px}
.ch-map .ft-map{max-width:none;aspect-ratio:256/190;margin:0}   /* the footer's map card, at the comp's 256x190 */
.ch-addr{display:flex;align-items:flex-start;gap:17.3px;margin-top:28.5px;color:#0B1257;font-size:clamp(16px,1.23vw,17.7px);font-weight:600;line-height:24.9px}
.ch-addr img{width:40px;height:40px;flex:none}
.ch-areas{background:#FFFFFF;text-align:center;padding:clamp(48px,5.56vw,80px) var(--gut) clamp(48px,5.09vw,73.3px)}
.ch-areas .sec-title{margin:0 0 36.8px}
.ch-area-list{list-style:none;margin:0 auto;padding:0;max-width:1054px;display:grid;grid-template-columns:repeat(4,max-content);justify-content:space-between;text-align:left}
.ch-area-list li{display:flex;align-items:center;gap:8.9px;color:#0B1257;font-size:clamp(16px,1.375vw,19.8px);font-weight:600;line-height:42.7px}
.ch-area-list li::before{content:"";flex:none;width:21.3px;height:21.3px;border-radius:50%;
  background:#C7C8CD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h11m-4.5-4.5L17 12l-4.5 4.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.ch-other{padding-top:clamp(56px,6.07vw,87.4px)}
.ch-other .sec-title{text-align:center;margin:0 0 48.4px}
@media (max-width:1180px){
  .ch-grid{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
  .ch-side-l{display:none}             /* the article's own headings carry the page below 1180 */
}
@media (max-width:900px){
  .ch-grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .ch-area-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
}
@media (max-width:480px){
  .ch-area-list{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Service Areas - matched to CLF inner service area.jpg --------
   Four columns of county buttons on the 1280 column (298.7 wide, 127.1
   tall, 28.4 / 29.3 gaps, from 712.9), labels Bold 19px; then a
   full-width map 725.4 tall that the contact card overlaps by 352.5, so
   the card starts 1991.1 and the footer 2282.7, as measured. */
.sa-sec{background:#F4F3F9;padding:clamp(48px,5.56vw,80px) var(--gut) clamp(56px,6.35vw,91.5px)}
.sa-grid{list-style:none;max-width:var(--wrap);margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:29.3px 28.4px}
.sa-area{display:flex;align-items:center;justify-content:center;min-height:clamp(84px,8.83vw,127.1px);box-sizing:border-box;padding:12px 16px;
  background:#FFFFFF;border-radius:12.4px;box-shadow:0 1px 2px rgba(20,24,60,.12),0 2px 8px rgba(20,24,60,.06);
  color:#0B1257;font-size:clamp(16px,1.32vw,19px);font-weight:700;line-height:1.2;text-align:center}
.sa-area.is-active{background:#0B1257;color:#FFFFFF}
/* The comp drew one tile navy - its hover state - and that had shipped as a
   fixed is-active on Los Angeles County, so one county looked stuck and the
   rest did nothing under the pointer. Every tile now starts white and takes
   the practice cards' hover (navy, a lift, the shadow); pointers only, so a
   tap on a phone cannot latch a tile navy */
@media (hover:hover){
  .sa-area{transition:background-color .2s,color .2s,transform .2s,box-shadow .2s}
  .sa-area:hover{background:#0B1257;color:#FFFFFF;transform:translateY(-3px);box-shadow:0 10px 30px rgba(11,18,87,.22)}
}
@media (hover:hover) and (prefers-reduced-motion:reduce){ .sa-area:hover{transform:none} }
/* the firm's three offices above the counties (the page's description named
   them; the page did not, and "Diamond Bar" sat among the counties): each
   tile links to its office page and carries the street address */
.sa-label{text-align:center;margin:0 0 18px}
.sa-grid + .sa-label{margin-top:clamp(36px,4vw,56px)}
.sa-grid.sa-offices{grid-template-columns:repeat(3,minmax(0,1fr))}
.sa-offices > li{display:flex}
.sa-office{flex:1;flex-direction:column;gap:6px;text-decoration:none}
.sa-office small{font-size:clamp(13px,1vw,15px);font-weight:400;line-height:1.35;opacity:.8}
@media (max-width:600px){ .sa-grid.sa-offices{grid-template-columns:minmax(0,1fr)} }
.sa-map{position:relative;height:clamp(360px,50.4vw,725.4px);background:#E8ECF1}
.sa-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* the shared contact section rides up over the map; its footer tuck is unchanged */
.sa-map + #contact{margin-top:calc(-1 * clamp(160px,24.48vw,352.5px));background:linear-gradient(to bottom,transparent clamp(160px,24.48vw,352.5px),#F4F3F9 0)}
@media (max-width:900px){
  .sa-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}

/* ---------- Pages without a comp - the comps' standard, by role ----------
   About Us, Accused, Case Studies, Contact, Court Houses, FAQs, Inmate
   Search, Locations, Resources, Reviews, Site Map. tools/
   _restyle_plain_pages.py tags each heading, label and paragraph with its
   role; the sizes are the ones the comps settled:
     .ip-h2   the charge comp's article H2 (Bold 41 / -.047em / .985)
     .ip-h3   the charge comp's card title (Semibold 23.4)
     .ip-text body copy as on every card (Regular 18 on 24.9)
     .ip-stat the homepage hero's stat figure and label */
.ip-sec{padding:clamp(48px,5.56vw,80px) var(--gut)}
.page-intro{grid-column:1 / -1}          /* where it opens a grid, it spans it */
.ip-h2{color:#0B1257;font-size:clamp(28px,2.85vw,41px);font-weight:700;letter-spacing:-.047em;line-height:.985;text-wrap:balance}
.ip-h3{color:#0B1257;font-size:clamp(18px,1.63vw,23.4px);font-weight:600;line-height:1.2}
.ip-text{color:#1F273A;font-size:clamp(16px,1.25vw,18px);line-height:1.383}
.ip-meta{color:#6D6D6D;font-size:15px;font-weight:600;line-height:1.3}
.ip-stat{color:#FFFFFF;font-size:clamp(28px,2.6vw,37.5px);font-weight:700;line-height:1.1;letter-spacing:-.01em}
.ip-stat-lab{color:#ECCC5F;font-size:clamp(14px,1.28vw,18.5px);font-weight:600;line-height:1.2}
.eyebrow + .ip-h2{margin-top:6.1px}
/* the cards those pages set in their own <style>, now one family: white on
   the lavender, the practice cards' corners and shadow */
.stepcard,.ccard,.rescard,.rcard,.icard,.faq,.courtcard{background:#FFFFFF;border-radius:12.4px;border:0;
  box-shadow:0 1px 2px rgba(20,24,60,.12),0 2px 8px rgba(20,24,60,.06)}
.stepcard,.ccard,.rescard,.rcard,.icard{padding:clamp(22px,2.2vw,32px)}
/* a card button whose label is longer than the card is wide ("Search San Bernardino
   County" on Inmate Search, four cards to a row from about 1300px) wraps to a
   second line inside the card instead of running out past its edge */
.icard .pill{max-width:100%;white-space:normal;height:auto;min-height:51px;padding:12px 26px;text-align:center;line-height:1.2;text-wrap:balance}
/* ...and each card's button sits at its foot, so the buttons in a row line up
   however long the text above them runs. The page's grid asks 340px a card
   (three to a row on a desktop), wide enough for every label on one line;
   the wrapping above only comes into play on the narrowest phones */
.icard{display:flex;flex-direction:column}
.icard .pill{margin-top:auto;align-self:flex-start}
@media (max-width:400px){ .icard .pill{padding:12px 18px} }
/* the same on a card's own button (Chino Hills: "Criminal Defense in Chino
   Hills" ran 5px past its card at 390 and 35px at 360): slimmer sides on a
   small phone keep it on one line, and it may wrap rather than overflow on
   the narrowest */
/* a short FAQ (the office pages' three questions) as one centred column: split
   two and one, the open first answer left a gap beside the lone third */
.faq-grid.is-single{grid-template-columns:minmax(0,1fr) minmax(0,760px) minmax(0,1fr)}
.faq-grid.is-single .faq-col-l{grid-column:2}
@media (max-width:420px){
  .pa-body .pill,.pa-actions .pill{max-width:100%;padding-left:18px;padding-right:18px;white-space:normal;height:auto;min-height:51px;text-align:center;line-height:1.2;text-wrap:balance}
}
.courtcard{overflow:hidden}
.faq{padding:clamp(20px,2vw,28px) clamp(20px,2.2vw,32px);margin-bottom:16px}
.faqq{color:#0B1257;font-size:clamp(18px,1.51vw,21.7px);font-weight:600;line-height:1.31;margin-bottom:10px}
.faqa{color:#1F273A;font-size:clamp(16px,1.25vw,18px);line-height:1.383}
.filterbtn{background:#FFFFFF;border:1px solid #D2A643;border-radius:999px;height:44px;padding:0 22px;font:600 16px/1 "Myriad Pro","Work Sans",sans-serif;color:#0B1257;cursor:pointer}
.filterbtn.active{background:#0B1257;border-color:#0B1257;color:#FFFFFF}
/* the one filter style for the site (Court Houses' counties, the Blog's
   categories - the Blog had its own smaller grey version until 6 Oct 2026):
   a hint under the pointer and a visible keyboard focus */
.filterbtn{transition:background-color .15s,border-color .15s,color .15s}
@media (hover:hover){ .filterbtn:not(.active):hover{border-color:#0B1257;background:#F4F3F9} }
.filterbtn:focus-visible{outline:3px solid #D2A643;outline-offset:2px}
/* Court Houses: each card's photo, name, address, then its two links held at the foot */
.courtcard{display:flex;flex-direction:column}
/* the filter buttons on Court Houses and the Blog hide the cards outside the
   chosen group with the hidden attribute (/assets/js/site.js); a card sets its own
   display (flex, above), which beat hidden, so every card stayed on screen */
[data-filter-grid] > [hidden]{display:none!important}
.court-body{flex:1;display:flex;flex-direction:column;padding:18px 20px 20px}
.court-name{margin-bottom:6px}
.court-addr{margin-bottom:14px}
.court-links{margin-top:auto;display:flex;gap:20px;flex-wrap:wrap;font-size:15px;font-weight:700}
.court-links a{color:#0B1257}
.court-links a:hover{color:#D2A643}
.court-links a + a{color:#8A6921}
.smlink{display:block;color:#0B1257;font-size:clamp(16px,1.23vw,17.7px);font-weight:600;line-height:33.8px}
.smlink:hover{color:#D2A643}
/* Reviews page: the homepage's review cards, three across */
.rv-grid.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rv-src{color:#85868A;font-size:16px;font-weight:700}
.rv-card.is-featured .rv-src{color:#C9CFE6}
@media (max-width:900px){ .rv-grid.is-3{grid-template-columns:minmax(0,1fr)} }
/* a fixed two-column split (About Us: photo | Armando) stacks on phones */
@media (max-width:900px){ .ip-split{grid-template-columns:minmax(0,1fr) !important;gap:32px !important} }
/* Contact page: the footer's map card, full width of its column */
.ct-map{max-width:none;margin:0 0 18px}

/* ---------- Offices, live maps, the FAQ accordion (18 Sep 2026) ----------
   Three offices - Chino Hills (head), Diamond Bar, Bakersfield - each a card
   with its Google listing embedded, on Contact and Locations. Maps embed the
   listing by place id; the footer's shows the head office unless the page
   names another (<!-- office:KEY --> - see tools/sync_design_frame.py). */
.ft-embed{background:#E8ECF1}
.ft-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ct-offices-h{text-align:center;margin:0 0 clamp(24px,2.5vw,36px)}
.ct-offices{max-width:var(--wrap);margin:0 auto clamp(40px,4.44vw,64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:21px;align-items:stretch}
.ct-office{padding:0;overflow:hidden;display:flex;flex-direction:column}
.ct-office-map{position:relative;aspect-ratio:16/10;background:#E8ECF1}
.ct-office-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ct-office-body{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(22px,2.2vw,32px)}
.ct-office-body .eyebrow{margin:0 0 6px}
.ct-office-body .ip-h3{margin:0 0 10px;font-size:clamp(22px,2.2vw,32px);font-weight:700}
.ct-office-body .ip-text{margin:0 0 10px}
.ct-office-tel{margin:0 0 4px}
.ct-office-tel a{color:#D2A643;font-size:clamp(17px,1.39vw,20px);font-weight:700}
.ct-office-body .pill{margin-top:auto}
.ct-office-body .ct-office-mail{margin-bottom:0}
.ct-office-body > :nth-last-child(2){margin-bottom:24px}
@media (max-width:900px){ .ct-offices{grid-template-columns:minmax(0,1fr)} }
/* Contact: the column beside the form - hours, a call card, and a photo that
   takes whatever height the form leaves, so the two columns end level */
.ct-aside{display:flex;flex-direction:column;gap:21px}
.ct-call{background:#0B1257;border-radius:12.4px;padding:clamp(24px,2.4vw,34px)}
.ct-call .eyebrow{margin:0 0 6px}
.ct-call-num{display:block;color:#ECCC5F;font-size:clamp(30px,2.6vw,37.5px);font-weight:700;letter-spacing:-.01em;line-height:1.1;margin:0 0 18px}
.ct-call-num:hover{color:#FFFFFF}
.ct-call-list{display:flex;flex-direction:column;gap:6px}
.ct-call .hero-check{font-size:clamp(16px,1.25vw,18px)}
.ct-photo{position:relative;flex:1;min-height:180px;border-radius:12.4px;overflow:hidden}
.ct-photo :is(image-slot,img.slot){position:absolute;inset:0}
@media (max-width:900px){ .ct-photo{display:none} }   /* phones: keep the form close */
/* FAQs page: each question a disclosure; the first one opens on load */
details.faq > summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;margin:0}
details.faq > summary::-webkit-details-marker{display:none}
details.faq > summary::after{content:"+";flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  border:1px solid #D2A643;color:#D2A643;font-size:22px;font-weight:400;line-height:1}
details.faq[open] > summary::after{content:"\2212";background:#0B1257;border-color:#0B1257;color:#ECCC5F}
details.faq[open] > summary{margin-bottom:12px}
details.faq > summary:hover{color:#162395}
details.faq > summary:focus-visible{outline:2px solid #D2A643;outline-offset:4px;border-radius:4px}

/* ---------- Ryan's editor overrides, site-wide -------------------------
   Claude Design writes these into each page's __om-edit-overrides block;
   only the homepage had them. They are what make every button a pill. */
.btn-gold,.btn-outline{border-radius:999px}
.btn-gold{background:#D2A643 !important;color:#FFFFFF !important}
.sitehead .btn-gold{padding:12px 26px}
.btn-outline{padding:15px 30px;border-width:2px}
.statnum{letter-spacing:-.01em}

/* ---------- Header: fixed, and thin once the page moves ------------------
   site.js measures the header where it sits over the hero, then fixes it
   there (html.head-fixed) and holds its old place with --head-h, so nothing
   below it moves. As soon as the page scrolls (html.head-solid) it glides
   up to the top edge, turns navy and shrinks - logo 50px, buttons 42px,
   about 77px in all (pin 5: the old 57px read as too thin) - every change a transition. The navy is a full-width
   ::before, so the logo and menu stay on the page's column. */
html{scroll-padding-top:100px}  /* anchors land below the thin header */
.head-fixed .sitehead{position:fixed !important;top:var(--tb-real,0px);left:0;right:0;z-index:800 !important;
  width:min(var(--wrap), calc(100% - 2 * var(--gut))) !important;margin:0 auto !important;
  transition:top .4s cubic-bezier(.2,.7,.2,1),padding .4s cubic-bezier(.2,.7,.2,1),border-color .4s ease}
.head-fixed .sitehead + *{margin-top:var(--head-h,0px) !important}
.sitehead::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:#0B1257;box-shadow:0 8px 24px rgba(5,8,40,.28);opacity:0;transition:opacity .4s ease;pointer-events:none}
.sitehead > a:first-child img,.sitehead .head-cta,.head-call{transition:height .4s cubic-bezier(.2,.7,.2,1),width .4s cubic-bezier(.2,.7,.2,1)}
.head-solid .sitehead{top:0;padding-top:13px !important;padding-bottom:13px !important;border-bottom-color:transparent !important}
.head-solid .sitehead::before{opacity:1}
.head-solid .sitehead > a:first-child img{height:44px !important}
.head-solid .sitehead .sitehead-cta a.head-cta{height:42px}
.head-solid .head-call{height:42px}
@media (max-width:760px){
  .head-solid .sitehead > a:first-child img{height:34px !important}
  .head-solid .head-call{width:44px}
}
/* no animation while site.js measures, or when the reader asks for less motion */
.head-still .sitehead,.head-still .sitehead *,.head-still .sitehead::before{transition:none !important}
@media (prefers-reduced-motion:reduce){ .sitehead,.sitehead *,.sitehead::before{transition:none !important} }

/* ---------- Announcement bar: the promise centred, the flags right -------
   User, 23 Sep 2026: the promise centred, the flags at the far right. The
   flags went left first and came back the same day - the label below says
   "flags left" nowhere else, so this comment is the only record.

   IT IS CENTRED ON THE BAR, not on the space the flags leave over. As a
   third flex item the text would sit ~100px right of centre - close enough
   to centre to read as a mistake rather than a choice - so it is taken out
   of the flow and pinned to the bar's own midpoint. That leaves the flags
   the only item in the row, so margin-left:auto carries them to the right
   edge and the centred text cannot be pushed off by their width.

   The phone number is NOT here: it sits above Free Case Review, where
   Ryan's pin 7 asked for it (see the pin 7 note above). It was moved here
   briefly and moved back the same day at the user's request.

   Below 1181px the text rejoins the flow and both zones centre together,
   wrapping as they always did - a phone is too narrow to hold a centred
   middle clear of anything beside it. */
.topbar{position:relative}
.topbar > *{flex:0 0 auto}
.tb-lang,.tb-mid{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media (min-width:1181px){
  .tb-mid{position:absolute;left:50%;transform:translateX(-50%)}
  .tb-lang{margin-left:auto}
}
@media (max-width:1180px){
  .topbar{justify-content:center !important;text-align:center}
  .topbar > div{justify-content:center}
}

/* ---------- Forms: SMS consent (GoHighLevel's A2P 10DLC opt-in) ----------
   Two boxes, never pre-checked and never required - carriers reject either -
   then the button, then the Privacy Policy and Terms links. */
.sms-consent{display:flex;flex-direction:column;gap:10px;text-align:left}
.sms-check{display:flex;align-items:flex-start;gap:10px;color:#6D6D6D;font-size:12.5px;font-weight:400;line-height:1.45;cursor:pointer}
.sms-check input,.ct-form .sms-check input{appearance:auto;-webkit-appearance:checkbox;flex:none;box-sizing:border-box;width:18px;height:18px;
  margin:1px 0 0;padding:0;border:0;accent-color:#D2A643;cursor:pointer}
.sms-links{color:#6D6D6D;font-size:13px;font-weight:600;line-height:1.4;text-align:center;margin:0}
.sms-links a{color:#0B1257;text-decoration:underline;text-underline-offset:2px}
.sms-links a:hover{color:#D2A643}
/* the contact card: consent under the message box, the button below it */
.ct-form > .sms-consent{margin-top:18.7px}
.ct-form > .ct-send{margin-top:22px}
.ct-form > .ct-legal.sms-links{margin-top:16px;font-size:13px}

/* ---------- Contact page form -------------------------------------------
   One even gap between every field, Email and Phone on one row, and the
   button clear of the fields above it. */
.ct-lower .ct-form{grid-column:auto}   /* .ct-form's column 3 is the contact card's grid, not this one */
.lead-form{display:flex;flex-direction:column;gap:14px;margin:0}
.lead-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.lead-form .lead-send{width:100%;border:none;cursor:pointer;text-transform:uppercase;font-family:inherit;margin-top:8px}
.lead-form .sms-consent{margin-top:4px}
/* which fields a form needs (contact.php: a name, and an email or a phone) */
.form-req{color:#6D6D6D;font-size:13px;line-height:1.4;text-align:left;margin:-6px 0 18.7px}
.lead-form .form-req{margin:-4px 0 0}
@media (max-width:360px){ .lead-row{grid-template-columns:minmax(0,1fr)} }

/* ---------- Legal pages (drafted 29 Sep 2026, for Armando to check) ------ */
.legal{max-width:820px;margin:0 auto;color:#3B4157;font-size:17px;line-height:1.6}
.legal h2{color:#0B1257;font-size:clamp(24px,2.2vw,30px);font-weight:700;letter-spacing:-.03em;line-height:1.1;margin:36px 0 12px}
.legal p,.legal ul{margin:0 0 14px}
.legal ul{padding-left:22px}
.legal .legal-updated{color:#6B7280;font-size:15px;margin:0 0 22px}
.legal li{margin:4px 0}
.legal a{color:#0B1257;text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:#D2A643}
.legal-note{background:#FFFFFF;border-left:4px solid #D2A643;border-radius:8px;padding:18px 22px;box-shadow:0 6px 20px rgba(11,18,87,.06)}
.legal-note strong{color:#0B1257}
/* a filter row on a phone (Court Houses' eleven counties, the Blog's categories): one row that scrolls sideways */
@media (max-width:760px){
  .filter-row{flex-wrap:nowrap !important;justify-content:flex-start !important;overflow-x:auto;scrollbar-width:none;
    margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:0 var(--gut) 4px}
  .filter-row::-webkit-scrollbar{display:none}
  .filter-row .filterbtn{flex:none;white-space:nowrap}
}
/* the Reviews page's three: a little tighter on a phone so they fit without
   swiping, and centred while they fit (auto margins give way once they do not) */
.rv-filter{max-width:var(--wrap);margin:0 auto 40px}
@media (max-width:760px){
  .rv-filter{gap:8px !important}
  .rv-filter .filterbtn{padding:0 12px;font-size:15px}
  .rv-filter .filterbtn:first-child{margin-left:auto}
  .rv-filter .filterbtn:last-child{margin-right:auto}
}

/* Pin 21: every FAQ row had a HEIGHT taken from the comp, so an answer longer
   than the one Ryan drew was simply clipped by the navy card. Heights matched
   to a picture are lids; these are min-heights now, and the open row carries
   its bottom padding so the text never touches the edge. */

/* ---------- MarkUp board #39, round 1 (Ryan, 22 Sep 2026) ---------------
   Pin 5 and pin 6 are up with the header rules and the :root scale; the
   rest are here. Pin 3 (the branding zip), pin 9 (nav tabs - the comp did
   not survive the export) and pin 12 (the About video) are still open.  */

/* Pin 7: the phone number above Free Case Review - moved there, not copied:
   it used to sit at the right of the top bar, directly above where it is now,
   and leaving both would have stacked the same number twice in one corner.
   Only on desktop - below
   1181px .head-call already carries the number, and under 760px the whole
   .sitehead-cta is hidden, so nesting the number inside it would lose it. */
.head-phone{display:none}
@media (min-width:1181px){
  .sitehead .head-phone{display:inline-flex;align-items:center;justify-content:center;gap:7px;
    color:#ECCC5F;font-size:16.5px;font-weight:700;line-height:1;white-space:nowrap;text-decoration:none;transition:color .15s}
  .sitehead .head-phone:hover{color:#FFFFFF}
  .sitehead .head-phone svg{flex:none}
  .head-solid .sitehead .head-phone{font-size:15.5px}
}

/* Pin 8: the hero's Free Case Review had white text on a white hover fill -
   .hero-btns .btn-outline (line 394) outranks .btn-outline:hover (line 23),
   so the :hover colour never landed and the label vanished. Pin 11 names the
   Learn More pill's hover as the one to copy: gold fill, white label, lift. */
.hero-btns .hero-btn{transition:background-color .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s}
.hero-btns .btn-outline:hover{background:#D2A643;border-color:#D2A643;color:#FFFFFF;
  transform:translateY(-2px);box-shadow:0 8px 18px rgba(210,166,67,.35)}

/* Pin 10: the featured practice card was navy at rest. White like the rest
   of the grid, and it takes the navy on hover instead. */
.pa-card{transition:background-color .2s ease,box-shadow .2s ease}
.pa-card h3,.pa-card p{transition:color .2s ease}
.pa-card.is-featured{background:#FFFFFF}
.pa-card.is-featured h3{color:#0B1257}
.pa-card.is-featured p{color:#1F273A}
.pa-card.is-featured:hover{background:#0B1257;box-shadow:0 10px 30px rgba(11,18,87,.22)}
.pa-card.is-featured:hover h3{color:#ECCC5F}
.pa-card.is-featured:hover p{color:#F3F3FB}

/* Pin 14: Contact Us under the review awards. */
.rv-actions{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:clamp(40px,4.4vw,63px)}
.rv-actions .pill{height:60px;padding:0 42.5px}

/* Pin 17: the footer's practice areas in two columns, DUI and criminal
   defense. The column is widened out of the brand column, which pin 16
   shortened, and the links step down a size so the longest one fits. */
.ft-grid{grid-template-columns:minmax(0,27.6fr) minmax(0,330fr) minmax(0,70fr) minmax(0,170fr) minmax(0,390fr) minmax(0,300fr)}
.ft-areas-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 22px;width:100%}
.ft-areas-col{display:flex;flex-direction:column;align-items:flex-start}
.ft-subhead{color:#ECCB62;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;margin:0 0 12px}
.ft-areas .ft-areas-col a{font-size:15.5px;line-height:29px}
@media (max-width:900px){
  .ft-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ft-areas{grid-column:1 / -1}
  .ft-areas-cols{gap:0 18px}
}
@media (max-width:460px){
  .ft-areas-cols{grid-template-columns:minmax(0,1fr);gap:24px 0}
}

/* ---------- Review cards: the reviewer, and the full text ----------------
   Every card now carries a real name and date (docs/reviews-avvo-pin-13.md).
   A card shows the first 230 characters; the rest is in .rv-full, hidden but
   present, so it is there without JavaScript and for a search engine. */
.rv-title{color:#0B1257;font-size:clamp(17px,1.3vw,19px);font-weight:700;line-height:1.25;margin:0 0 10px}
.rv-card.is-featured .rv-title{color:#ECCC5F}
.rv-card .rv-text{margin:0}
/* 44px tall, so a thumb finds it (post-launch audit, 29 Sep 2026: it was 25px);
   the margin shrinks by the same amount, so the text sits where it did */
button.rv-more{margin-top:2px;min-height:44px;display:inline-flex;align-items:center;padding:0;background:none;border:0;font-family:inherit;font-weight:600;cursor:pointer}
.rv-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.rv-who small{color:#9A9BA0;font-size:13.5px;font-weight:500;letter-spacing:.01em}
.rv-card.is-featured .rv-who small{color:#9AA3C9}
/* The x-dc runtime rebuilds the DOM from the CDATA and DROPS the `hidden`
   attribute on the way, so the full text has to be hidden by class - which
   survives - not by the attribute. The attribute stays for anything that
   reads the HTML without running the runtime. */
.rv-full{display:none}
.rv-card.is-open .rv-full{display:block;margin-top:10px;font-size:clamp(16px,1.25vw,18px);line-height:24.9px}

/* The popup. <dialog> brings Escape, the backdrop and focus trapping. */
.rv-dialog{width:min(640px,calc(100vw - 32px));box-sizing:border-box;border:0;border-radius:14px;padding:clamp(24px,3vw,38px);
  background:#FFFFFF;color:#1F273A;box-shadow:0 24px 70px rgba(5,8,40,.35);
  font-family:"Myriad Pro",system-ui,sans-serif}  /* it hangs off <body>, outside the page wrapper that sets the font */
.rv-dialog::backdrop{background:rgba(5,8,40,.62)}
.rv-dialog .rv-stars{margin-bottom:18px}
.rv-dialog-title{color:#0B1257;font-size:clamp(20px,2vw,26px);font-weight:700;line-height:1.2;letter-spacing:-.01em;margin:0 0 14px}
.rv-dialog-body{font-size:clamp(16px,1.25vw,17.5px);line-height:1.62;white-space:pre-line;max-height:56vh;overflow:auto}
.rv-dialog-who{display:flex;align-items:center;justify-content:space-between;gap:14px;color:#85868A;font-size:15px;font-weight:600;line-height:1.4;margin:22px 0 0;padding-top:18px;border-top:1px solid #E7E9F2}
.rv-dialog-who img{flex:none;width:28px;height:auto;display:block}
.rv-dialog-src{flex:none;display:flex}
.rv-dialog .rv-src{color:#85868A}
.rv-dialog-close{position:absolute;top:10px;right:14px;width:40px;height:40px;background:none;border:0;
  color:#85868A;font-size:30px;line-height:1;cursor:pointer;border-radius:50%}
.rv-dialog-close:hover{background:#F4F3F9;color:#0B1257}
.rv-dialog-close:focus-visible,button.rv-more:focus-visible{outline:2px solid #D2A643;outline-offset:3px}
@media (max-width:560px){ .rv-dialog{padding:26px 20px} .rv-dialog-body{max-height:62vh} }

/* The Reviews page: the cards in a row share one height, the name and site
   along the bottom (user, 7 Oct 2026: "align ... same height"). */
.rv-grid.is-3{align-items:stretch}

/* The review figure as text, not a badge. Avvo's own badge graphic bakes the
   count in ("out of 31 reviews") and Avvo certifies that number, so it is not
   ours to redraw with 83 - the stale graphic came out and this went in, with
   a link to the profile so anyone can check it. Ask Armando for a current
   Avvo badge and the 2026 Client's Choice graphic if we want them back. */
.rv-score{display:flex;flex-direction:column;align-items:center;gap:6px;
  color:#1F273A;font-size:clamp(16px,1.3vw,18.5px);line-height:1.4;text-align:center;margin:34px 0 0}
.rv-score strong{color:#0B1257;font-weight:700}
.rv-score a{color:#0B1257;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.rv-score a:hover{color:#D2A643}
.rv-score small{color:#85868A;font-size:14.5px;font-weight:500}

/* ---------- MarkUp board #39, round 2 ------------------------------------
   Pin 23 (CES-MK-1565): the Misdemeanor DUI card's hover on every service
   card, not just the featured one - white at rest, navy on hover. */
.pa-card:hover{background:#0B1257;box-shadow:0 10px 30px rgba(11,18,87,.22)}
.pa-card:hover h3{color:#ECCC5F}
.pa-card:hover p{color:#F3F3FB}

/* Pin 24 (CES-MK-1566): a button that STARTS gold hovers to white, site-wide,
   and the label has to stay readable when it does. #D2A643 on white is
   2.26:1 and fails AA, so the white state uses #8A6921 - the AA-safe gold
   from Ryan's own brand guide, 4.6:1 on white. The gold resting state keeps
   its white label. The same swap fixes .pill.is-outline, whose resting label
   had exactly the same problem. */
.btn-gold{transition:background-color .15s,color .15s,transform .15s,box-shadow .15s}
.btn-gold:hover{background:#FFFFFF !important;color:#8A6921 !important;
  transform:translateY(-2px);box-shadow:0 8px 18px rgba(210,166,67,.4)}
.pill.is-gold:hover{background:#FFFFFF;color:#8A6921;border-color:#D2A643}
.pill.is-outline{color:#8A6921}
.call-float:hover{background:#FFFFFF;color:#8A6921;box-shadow:0 10px 26px rgba(5,8,40,.45)}
.call-float:hover svg{stroke:#8A6921}
/* the hero's Call Now is a .btn-gold: its two lines follow the same label */
.hero-btn.is-call:hover span{color:inherit}

/* A caret on every dropdown, drawn rather than typed (user, 23 Sep 2026).
   Keying it off .mega means anything with a panel has one - About Us and
   Service Areas had dropdowns and no caret - and it flips when the menu
   opens, so it says whether you are looking at an open panel. */
/* Smaller and quieter (user, 26 Sep 2026: "a smaller subtle caret"): a
   5px chevron on a 1.5px line at 70% strength, where it was 6.5px on 2px. */
.mega > .navlink::after{content:"";display:inline-block;width:.28em;height:.28em;
  margin:0 0 .16em .42em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  opacity:.7;transform:rotate(45deg);transition:transform .18s ease;vertical-align:middle}
.mega:hover > .navlink::after,.mega:focus-within > .navlink::after{
  transform:rotate(-135deg);margin-bottom:-.02em}

/* ---------- Service menus as image grids --------------------------------
   The two service dropdowns show each charge as a photo tile rather than a
   line of text (user, 23 Sep 2026), built by tools/_nav_menu.py from
   NAV_DUI and NAV_CRIMINAL so the menu cannot drift from the URL plan. */
/* A 720px panel hung off a trigger near the right of the nav ran off the
   screen. These two span the header's own column instead: .mega-svc goes
   static so the panel positions against .sitehead, which is the column. */
.mega-svc{position:static}
/* 30% smaller tiles (user: too large on a 13"). Spanning the whole column
   gave 275px tiles; 870px of panel gives 818px of content, so four tiles of
   192px - exactly 0.70x. box-sizing matters here: .mega-panel is content-box,
   so without this the 52px of padding sat OUTSIDE the width and the tiles
   only came down 26%. */
.mega-svc .mega-panel.is-svc{left:50%;right:auto;transform:translateX(-50%);
  box-sizing:border-box;width:min(870px, 100%);padding:24px 26px 18px;
  border-radius:0 0 12px 12px}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 16px}
.svc-card{display:flex;flex-direction:column;gap:9px;text-decoration:none;border-radius:10px;
  padding:6px;margin:-6px;transition:background-color .15s}
.svc-card:hover{background:#F4F3F9}
.svc-shot{display:block;position:relative;width:100%;aspect-ratio:3/2;border-radius:8px;
  overflow:hidden;background:#0B1257}
.svc-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.svc-card:hover .svc-shot img{transform:scale(1.04)}
/* a charge whose photograph has not been delivered: a composed navy tile
   with the brand mark, so the row reads as designed rather than broken */
.svc-shot.is-empty{background:
  radial-gradient(circle at 50% 45%, rgba(210,166,67,.28), transparent 60%), #0B1257}
.svc-shot.is-empty::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;
  margin:-13px 0 0 -13px;border:2px solid rgba(236,204,95,.55);border-radius:50%}
.svc-name{color:#0B1257;font-size:13.5px;font-weight:700;line-height:1.3}
.svc-card:hover .svc-name{color:#162395}
/* Service Areas keeps a text list, two columns */
.svc-counties{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
@media (max-width:1320px){
  .svc-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 12px}
  .svc-name{font-size:12.5px}
}

/* ---------- Dropdowns you can actually reach ----------------------------
   The panel opens on .mega:hover, but .mega was only as tall as its link,
   leaving 43px of header padding between the two that belonged to neither.
   Move the pointer toward the panel and the menu closed before you got
   there, so the items could not be clicked at all.

   Two parts. The nav row and each .mega stretch to the header's full content
   height, so the hover box ends where the header's padding begins. Then the
   panel carries a transparent bridge up across that padding - and because
   the bridge is inside .mega, hovering it keeps .mega:hover true. The bridge
   is never taller than the padding, so it cannot sit over the nav and eat
   clicks on the other items. */
/* !important because the nav carries align-items:center as an INLINE style
   from Ryan's export, which a plain rule cannot beat - and without the
   stretch the hover box stays 19px tall and the bridge has 43px to span
   instead of the header's padding alone. */
.sitehead-nav{align-self:stretch !important;align-items:stretch !important}
/* EVERY direct child, not just .mega: Contact Us is a bare anchor, and
   stretching it without centring left its text pinned to the top of a 72px
   box, so it read as a second row above the menu. */
.sitehead-nav > *{display:flex;align-items:center}
/* EVERY PANEL HANGS FROM THE HEADER'S BOTTOM EDGE, and the bridge spans
   exactly the gap between the menu item and that edge (user, 26 Sep 2026:
   "when I hover from one menu to the other, the dropdown doesn't expand or
   retract"). Two faults, both measured with real pointer moves:
   - About Us, Service Areas and Resources hung their panel from the item
     itself, 42px up inside the header, so their 42px bridge sat over the
     next item's label. Hovering DUI Services still hovered About Us.
   - The sticky header shrinks its padding to 13px, but the bridge stayed
     42px, so an open service panel's 870px bridge covered the whole row.
   --menu-drop is the header's bottom padding plus its 1px border, in both
   states; the service panels already hang from .sitehead at top:100%. */
.sitehead{--menu-drop:calc(var(--head-py,41.7px) + 1px)}
.head-solid .sitehead{--menu-drop:14px}
.mega:not(.mega-svc) > .mega-panel{top:calc(100% + var(--menu-drop))}
.mega-panel::before{content:"";position:absolute;left:0;right:0;bottom:100%;
  height:var(--menu-drop)}
/* Service Areas' 560px list ran 25px off a 1440px screen; it and Resources,
   the last two dropdowns, open leftward from their item's right edge. */
.sitehead-nav > .mega:nth-last-child(-n+3):not(.mega-svc) > .mega-panel{left:auto;right:0}

/* THE ROW HAS NO DEAD COLUMNS EITHER. Sliding along the nav closed the open
   menu five times on the way across, which is what "hovering issues over
   other menu items" was: .sitehead-nav spaced its children with `gap`, and
   a gap belongs to no child, so a 15px column between every pair hovered
   nothing at all. Measured on staging with real pointer moves - every item's
   centre opened its own menu, and every one of the five boundaries reported
   no menu open.

   The spacing is padding INSIDE each item now, so neighbouring hover boxes
   touch and the pointer is always over one menu or the next. The negative
   margins give back the half-gap that would otherwise appear outside the
   first and last item, so the row measures exactly what it did before: it
   was tuned to fit a 13" 1330px screen and must not grow.

   --nav-gap is declared on the nav, not :root, and matches the inline gap it
   replaces. Keeping it off :root is deliberate - a late :root once overrode
   --logo-h's media queries here.

   !important because the gap is an inline style from Ryan's export. */
.sitehead-nav{--nav-gap:clamp(12px,1.08vw,15.6px);gap:0 !important}
.sitehead-nav > *{padding-inline:calc(var(--nav-gap) / 2)}
.sitehead-nav > *:first-child{margin-left:calc(var(--nav-gap) / -2)}
.sitehead-nav > *:last-child{margin-right:calc(var(--nav-gap) / -2)}

/* ---------- Language switcher: a flag beside each language --------------
   Drawn inline rather than fetched: there are no flag assets in the project
   and these are two small marks, not artwork worth a request.

   The Mexican flag carries a suggestion of the coat of arms. It is
   unreadable at 20px so it is not a reproduction - but a bare green-white-
   red tricolour at this size is the Italian flag, so something has to sit in
   the centre band for the flag to read as Mexico at all. */
.lang{display:inline-flex;align-items:center;gap:6px;font-size:.912em;text-decoration:none;
  color:#9AA3C9;line-height:1}
.lang:hover{color:#FFFFFF}
.lang.is-on{color:#ECCC5F}
.lang-flag{width:19px;height:13.3px;display:block;flex:none;border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.28)}
@media (max-width:420px){ .lang span{display:none} }   /* flags alone on a small phone */

/* ---------- Calls to action between sections ------------------------------
   Modelled on Dr. Carpet Clean's service pages: on a long page three designs
   take turns, so several never read as one repeated banner.
   A  a photo card beside the headline, the number on a gold bar under both
   B  a slim band over a darkened photo, the number set large
   C  a band over a darkened photo, with a button to the free case review
   Photos: A is Armando's portrait; B the real office (cta-b.webp) and C one
   generated from his photos (cta-c.webp), each set as --bg. White on gold. */
.inlinecta{display:block;margin:40px 0;border-radius:12px;overflow:hidden;color:#FFFFFF;box-shadow:0 10px 30px rgba(11,18,87,.18)}
.inlinecta .ic-h{margin:0;color:#FFFFFF;font-size:clamp(21px,1.8vw,26px);font-weight:700;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.inlinecta .ic-sub{margin:8px 0 0;color:#D6DBF2;font-size:16px;line-height:1.45}
.ic-a{background:#0B1257}
.ic-a .ic-top{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:stretch;gap:24px;padding:0 26px 0 0}
.ic-a .ic-top :is(image-slot,img.slot){display:block;min-height:160px}
.ic-a .ic-say{padding:26px 0;align-self:center}
.ic-a .ic-tel{display:flex;align-items:center;justify-content:center;gap:12px;background:#D2A643;color:#FFFFFF;padding:13px 20px;text-decoration:none}
.ic-a .ic-tel span{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.16em}
.ic-a .ic-tel b{font-size:26px;font-weight:700}
.ic-a .ic-tel:hover{background:#C29535;color:#FFFFFF}
.ic-b,.ic-c{background-size:cover;background-position:center;text-align:center}
.ic-b{background-image:linear-gradient(rgba(11,18,87,.86),rgba(11,18,87,.86)),var(--bg);padding:30px 24px}
.ic-b .ic-big{display:inline-flex;align-items:center;gap:10px;margin-top:10px;color:#FFFFFF;font-size:34px;font-weight:700;text-decoration:underline;text-underline-offset:5px}
.ic-b .ic-big:hover{color:#ECCC5F}
.ic-c{background-image:linear-gradient(rgba(8,12,48,.78),rgba(8,12,48,.78)),var(--bg);padding:34px 24px}
.ic-c .ic-h{font-size:clamp(23px,2vw,28px)}
.ic-c .ic-sub{max-width:52ch;margin:10px auto 0}
.ic-c .pill{margin-top:18px}
.cta-row{padding:clamp(24px,3vw,40px) var(--gut) clamp(32px,4vw,56px)}
.cta-row .inlinecta{max-width:900px;margin:0 auto}
@media (max-width:700px){
  .inlinecta{margin:28px 0}
  .ic-a .ic-top{grid-template-columns:minmax(0,1fr);gap:0;padding:0}
  .ic-a .ic-top :is(image-slot,img.slot){min-height:0;height:190px}
  .ic-a .ic-say{padding:20px 20px 22px}
  .ic-a .ic-tel{flex-direction:column;gap:2px;padding:12px 16px}
  .ic-a .ic-tel b,.ic-b .ic-big{font-size:26px}
  .ic-b,.ic-c{padding:26px 18px}
}

/* ---------- Visuals plan (docs/visuals-plan.md) ---------------------------
   Built in code from docs/copy/visuals.csv via tools/_visuals.py: each sits
   at the end of its section. The placeholders (.vis-slot) and the legal-check
   markers (.vis-meta) show only with ?visuals=1 (html.show-visuals). */
.ch-main .vis{margin:30px 0 34px}
.ch-main .vis p{margin:0}
.vis-k{color:#B08A2E;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ch-main .vis .vis-t{color:#0B1257;font-size:clamp(18px,1.45vw,21px);font-weight:700;line-height:1.25;margin:6px 0 8px}
.ch-main .vis .vis-b{color:#1F273A;font-size:16.5px;line-height:1.45}
.vis-meta{display:none}
.show-visuals .vis-meta:not(:empty){display:inline-block;margin-top:12px !important;padding:3px 10px;border-radius:99px;
  background:#FFF1CC;color:#7A5A12;font-size:12.5px;font-weight:700;letter-spacing:.02em}
/* the law: a white card with a gold rule */
.vis-law{background:#FFFFFF;border:1px solid #E4E3EC;border-left:5px solid #D2A643;border-radius:10px;padding:20px 24px}
/* one big figure, on navy */
.vis-stat{background:#0B1257;border-radius:12px;padding:24px 28px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:6px 24px;align-items:center}
.ch-main .vis-stat .vis-big{color:#ECCC5F;font-size:clamp(32px,3.2vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}   /* long figures ("Three-year designation") wrap instead of squeezing the line beside them */
.ch-main .vis-stat .vis-b{color:#DDE1F2}
.vis-stat .vis-meta{grid-column:1 / -1;justify-self:start}
@media (max-width:560px){ .vis-stat{grid-template-columns:minmax(0,1fr)} }
/* a pull quote from the section's own text */
.ch-main .vis-quote{border-left:4px solid #D2A643;padding:4px 0 4px 26px}
.ch-main .vis-quote p{color:#0B1257;font-size:clamp(20px,1.75vw,25px);font-weight:600;line-height:1.35;letter-spacing:-.01em}
.vis-quote p::before{content:"\201C"}
.vis-quote p::after{content:"\201D"}
/* side by side */
.vis-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vis-compare.is-3 .vis-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
.vis-col{background:#FFFFFF;border:1px solid #E4E3EC;border-radius:12px;overflow:hidden}
.ch-main .vis-col .vis-col-h{background:#0B1257;color:#FFFFFF;font-size:15.5px;font-weight:700;line-height:1.3;padding:13px 18px}
.vis-col ul{list-style:none;margin:0;padding:12px 18px 16px}
.vis-col li{position:relative;padding:7px 0 7px 18px;color:#1F273A;font-size:15.5px;line-height:1.4;border-bottom:1px solid #EFEEF4}
.vis-col li:last-child{border-bottom:0}
.vis-col li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;background:#D2A643}
@media (max-width:700px){ .vis-cols,.vis-compare.is-3 .vis-cols{grid-template-columns:minmax(0,1fr)} }
/* numbered steps */
.ch-main .vis-timeline{list-style:none;padding:0;counter-reset:none}
.vis-timeline li{position:relative;display:flex;gap:16px;align-items:flex-start;padding:0 0 18px}
.vis-timeline li:not(:last-child)::before{content:"";position:absolute;left:17px;top:36px;bottom:0;width:2px;background:#E4D3A6}
.vis-n{flex:none;width:36px;height:36px;border-radius:50%;background:#D2A643;color:#FFFFFF;font-weight:700;display:grid;place-items:center}
.vis-st{color:#1F273A;font-size:16.5px;line-height:1.45;padding-top:6px}
/* the local courthouse */
.vis-court{display:flex;gap:18px;background:#FFFFFF;border:1px solid #E4E3EC;border-radius:12px;padding:22px 24px}
.vis-court-ic{flex:none;width:52px;height:52px;border-radius:50%;background:#0B1257;color:#ECCC5F;display:grid;place-items:center}
.ch-main .vis-court .vis-b + .vis-b{margin-top:8px}
.ch-main .vis-court .vis-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px}
.vis-links a{color:#0B1257;font-weight:700;font-size:15px;text-decoration:underline;text-decoration-color:#D2A643;text-decoration-thickness:2px;text-underline-offset:3px}
/* a bullet list the plan marks as a checklist */
.ch-main .ch-bullets.is-check,.show-visuals .ch-main .ch-bullets.is-check-draft{background:#FFFFFF;border:1px solid #E4E3EC;border-radius:12px;padding:10px 22px}
.ch-bullets.is-check li,.show-visuals .ch-bullets.is-check-draft li{padding:11px 0 11px 36px;margin:0;border-bottom:1px solid #EFEEF4}
.ch-bullets.is-check li:last-child,.show-visuals .ch-bullets.is-check-draft li:last-child{border-bottom:0}
.ch-bullets.is-check li::before,.show-visuals .ch-bullets.is-check-draft li::before{left:0;top:12px;width:22px;height:22px;background:#D2A643 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat}
/* the designed graphics, built in code (user, 29 Sep 2026): the words come
   from docs/copy/visuals.csv for Armando to approve, so they can't drift
   from the law the way the AI-drawn versions did */
.ch-main .vis .vis-note{color:#1F273A;font-size:15.5px;line-height:1.45;margin-top:16px;padding-top:14px;border-top:1px solid #E4E3EC}
/* two-track: the arrest, then two lanes side by side */
.vis-track{background:#FFFFFF;border:1px solid #E4E3EC;border-radius:12px;padding:22px 24px}
.ch-main .vis-track .trk-start{display:table;margin:0 auto 16px;padding:7px 18px;border-radius:99px;background:#0B1257;color:#FFFFFF;font-weight:700;font-size:15px}
.trk-lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;position:relative}
.trk-lane{border-radius:10px;background:#F4F3F9;padding:16px 16px 4px;border-top:4px solid #0B1257}
.trk-lane.is-2{border-top-color:#D2A643}
.ch-main .vis-track .trk-h{color:#0B1257;font-size:16px;font-weight:700;margin-bottom:12px}
.ch-main .trk-steps{list-style:none;padding:0;margin:0}
.trk-steps li{position:relative;display:flex;gap:12px;align-items:flex-start;padding:0 0 14px}
.trk-steps li:not(:last-child)::before{content:"";position:absolute;left:14px;top:30px;bottom:0;width:2px;background:#D9D7E6}
.trk-steps .vis-n{width:30px;height:30px;font-size:14px;background:#0B1257}
.trk-lane.is-2 .vis-n{background:#D2A643}
.trk-steps .vis-st{font-size:15.5px;padding-top:4px}
.trk-steps li.is-key .vis-st{background:#FFF1CC;color:#0B1257;font-weight:700;border-radius:8px;padding:5px 10px;margin-top:-1px}
@media (max-width:640px){ .trk-lanes{grid-template-columns:minmax(0,1fr)} }
/* roadmap: stages left to right, the last one branching */
.vis-road{background:#FFFFFF;border:1px solid #E4E3EC;border-radius:12px;padding:22px 24px}
.ch-main .vis-road .road{list-style:none;padding:0;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px}
.road > li{position:relative;background:#F4F3F9;border-radius:10px;padding:16px}
.road > li:not(:last-child)::after{content:"";position:absolute;right:-12px;top:22px;width:10px;height:10px;border-top:2.5px solid #D2A643;border-right:2.5px solid #D2A643;transform:rotate(45deg)}
.road .vis-n{width:30px;height:30px;font-size:14px}
.ch-main .vis-road .road-h{color:#0B1257;font-size:16px;font-weight:700;margin:10px 0 4px}
.ch-main .vis-road .road-t{color:#1F273A;font-size:15px;line-height:1.45}
.ch-main .road-opts{list-style:none;padding:0;margin:10px 0 0}
.road-opts li{position:relative;padding:6px 0 6px 16px;font-size:15px;line-height:1.35;color:#0B1257;font-weight:600;border-top:1px solid #E4E3EC}
.road-opts li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;border-radius:50%;background:#D2A643}
@media (max-width:640px){
  .ch-main .vis-road .road{grid-auto-flow:row}
  .road > li:not(:last-child)::after{right:auto;left:27px;top:auto;bottom:-12px;transform:rotate(135deg)}
}
/* BAC scale: the levels on a ruler, then what each one means; no band is
   labeled safe */
.vis-bac{background:#FFFFFF;border:1px solid #E4E3EC;border-radius:12px;padding:22px 24px}
.bac-rule{margin:40px 8px 8px}
.bac-bar{position:relative;height:14px;border-radius:99px;background:#F4F3F9;border:1px solid #E4E3EC}
.bac-band{position:absolute;top:0;bottom:0;right:0;background:rgba(11,18,87,.16);border-radius:0 99px 99px 0}
.bac-mark{position:absolute;top:-8px;bottom:-8px;width:3px;margin-left:-1.5px;background:#D2A643;border-radius:2px}
.bac-mark b{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);white-space:nowrap;color:#0B1257;font-size:15px;font-weight:700}
.bac-ticks{position:relative;height:22px;margin-top:10px}
.bac-ticks .bac-tk{position:absolute;transform:translateX(-50%);color:#6B7280;font-size:12.5px;white-space:nowrap}
.bac-ticks .bac-tk:first-child{transform:none}
.bac-ticks .bac-tk:last-child{transform:translateX(-100%)}
.ch-main .bac-list{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vis-bac.is-3 .bac-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.bac-list li{background:#F4F3F9;border-radius:10px;padding:14px 16px;border-top:4px solid #D2A643}
.ch-main .bac-list .bac-lv{color:#0B1257;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.ch-main .bac-list .bac-t{color:#0B1257;font-size:15.5px;font-weight:700;margin-top:4px}
.ch-main .bac-list .bac-code{color:#7A5A12;font-size:13px;font-weight:700;letter-spacing:.04em;margin-top:2px}
.ch-main .bac-list .bac-d{color:#1F273A;font-size:15px;line-height:1.45;margin-top:6px}
@media (max-width:640px){ .ch-main .bac-list,.vis-bac.is-3 .bac-list{grid-template-columns:minmax(0,1fr)} }
/* a planned photo or designed graphic: shown only with ?visuals=1 */
.vis-slot{display:none}
.show-visuals .vis-slot{display:block;margin:30px 0 34px;padding:22px 24px;border:2px dashed #D2A643;border-radius:12px;background:#FFF8E6}
.ch-main .vis-slot p{margin:0}
.ch-main .vis-slot .vis-slot-k{color:#7A5A12;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.ch-main .vis-slot .vis-slot-i{color:#1F273A;font-size:16.5px;line-height:1.45;margin:8px 0}
.ch-main .vis-slot .vis-slot-m{color:#7A5A12;font-size:13px;font-weight:600}
/* a drafted visual, awaiting Wil's approval in the plan: only with
   ?visuals=1, and marked so it cannot be mistaken for an approved one */
html:not(.show-visuals) .vis-draft{display:none !important}
.show-visuals .ch-main .vis-draft,.show-visuals .ch-main .ch-bullets.is-check-draft{outline:2px dashed #D2A643;outline-offset:6px}
/* the live site's pictures (tools/build_live.py): each <image-slot> the
   runtime draws is written out as a plain <img class="slot">, cover-fitted
   the way the slot fits it, so every rule above that styles a slot styles
   its picture too */
img.slot{display:block;object-fit:cover;object-position:50% 50%;max-width:100%}
/* the forms' honeypot (contact.php): a field no person sees or tabs to, so
   anything typed in it came from a script. Off-screen rather than
   display:none, which some bots check for */
.hp{position:absolute !important;left:-10000px !important;top:auto;width:1px;height:1px;overflow:hidden;opacity:0}
/* ?visuals=2, the clean view (user, 29 Sep 2026): the drafts and photos
   show, but none of the working marks - file names, legal tags, dashed
   outlines, empty placeholders, the switch - so the firm sees the pages as
   they will look */
.clean-visuals .vis-meta,.clean-visuals .ch-main .vis-ref,.clean-visuals .vis-slot,
.clean-visuals .vis-dock,.clean-visuals .vt-panel{display:none !important}
.clean-visuals .ch-main .vis-draft,.clean-visuals .ch-main .ch-bullets.is-check-draft{outline:none}
/* the Visuals switch, bottom right (Call Now is bottom left): navy with a
   gold state when on; staging only - the built site never loads design JS */
.vis-dock{position:fixed;right:16px;bottom:16px;z-index:900;display:flex;gap:8px;align-items:center}
.vis-toggle,.vis-tasks{display:inline-flex;align-items:center;gap:8px;
  padding:9px 12px 9px 14px;border:1px solid rgba(255,255,255,.18);border-radius:99px;background:#0B1257;color:#FFFFFF;
  font:600 14px/1 "Myriad Pro",system-ui,sans-serif;cursor:pointer;box-shadow:0 8px 24px rgba(11,18,87,.3)}
.vis-toggle:hover,.vis-tasks:hover{background:#162395}
.vis-toggle:focus-visible,.vis-tasks:focus-visible{outline:2px solid #ECCC5F;outline-offset:3px}
.vis-toggle-state{min-width:30px;padding:4px 8px;border-radius:99px;background:rgba(255,255,255,.14);color:#DDE1F2;font-size:12px;text-align:center}
.vis-toggle[aria-pressed="true"] .vis-toggle-state{background:#D2A643;color:#FFFFFF}
@media print{ .vis-dock,.vt-panel{display:none} }
/* the section codes (DUI03-S2) and the featured photo's (DUI03-F) */
.vis-ref{display:none}
.show-visuals .ch-main .vis-ref{display:inline-flex;align-items:center;gap:8px;margin:34px 0 -22px;padding:3px 4px 3px 10px;border-radius:6px;
  background:#0B1257;color:#ECCC5F;font:700 12.5px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.04em}
.vis-file-note{color:#B9C0D6;font-weight:400;letter-spacing:0}
/* the copy button beside a file name; a check mark once copied */
.vis-copy{display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:5px;
  background:rgba(255,255,255,.12);color:#FFFFFF;cursor:pointer}
.vis-copy:hover{background:#D2A643}
.vis-copy:focus-visible{outline:2px solid #ECCC5F;outline-offset:2px}
.vis-copy.is-copied{background:#2E8B57}
.vis-copy.is-copied svg{display:none}
.vis-copy.is-copied::after{content:"\2713";font:700 14px/1 system-ui,sans-serif}
/* inside a placeholder: the file name on its own line, navy on the cream */
.ch-main .vis-slot .vis-slot-f{display:inline-flex;align-items:center;gap:8px;margin:8px 0 2px;padding:3px 4px 3px 10px;border-radius:6px;
  background:#0B1257;color:#ECCC5F;font:700 13px/1.4 ui-monospace,Consolas,monospace}
.show-visuals .ch-main .vis-ref.is-feature{margin:0 0 10px}
.show-visuals .ch-main .vis-ref + h2{margin-top:12px}
@media (max-width:560px){ .vis-dock{right:12px;bottom:12px;gap:6px} .vis-toggle,.vis-tasks{padding:7px 9px 7px 11px;font-size:13px;gap:6px} }
/* the Tasks button: its count in gold */
.vis-tasks b{min-width:22px;padding:4px 7px;border-radius:99px;background:#D2A643;color:#FFFFFF;font-size:12px;text-align:center}
.vis-tasks b:empty{display:none}
.vis-tasks[aria-expanded="true"]{background:#162395}
/* the Tasks panel: the whole plan, page by page */
.vt-panel{position:fixed;right:16px;bottom:72px;z-index:901;width:min(440px,calc(100vw - 24px));max-height:min(74vh,760px);
  display:none;flex-direction:column;background:#FFFFFF;border-radius:14px;box-shadow:0 24px 60px rgba(11,18,87,.35);
  overflow:hidden;font-family:"Myriad Pro",system-ui,sans-serif;color:#1F273A}
.vt-panel.is-open{display:flex}
.vt-head{display:flex;align-items:center;gap:10px;padding:14px 14px 12px 18px;background:#0B1257;color:#FFFFFF}
.vt-head strong{font-size:17px}
.vt-sum{color:#B9C0D6;font-size:13.5px;margin-right:auto}
.vt-close{width:30px;height:30px;border:0;border-radius:8px;background:rgba(255,255,255,.12);color:#FFFFFF;font-size:20px;line-height:1;cursor:pointer}
.vt-close:hover{background:#D2A643}
.vt-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px 4px}
.vt-tabs button{border:1px solid #D9DAE6;border-radius:99px;background:#FFFFFF;color:#0B1257;padding:6px 10px;font-family:inherit;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer}
.vt-tabs button:hover{border-color:#0B1257}
.vt-tabs button b{color:#7A5A12}
.vt-tabs button[aria-pressed="true"]{background:#0B1257;border-color:#0B1257;color:#FFFFFF}
.vt-tabs button[aria-pressed="true"] b{color:#ECCC5F}
.vt-search{margin:8px 14px 10px;padding:9px 12px;border:1px solid #D9DAE6;border-radius:8px;font-family:inherit;font-size:15px;line-height:1.3}
.vt-search:focus{outline:2px solid #D2A643;outline-offset:0;border-color:#D2A643}
.vt-list{overflow:auto;padding:0 14px 14px;overscroll-behavior:contain}
.vt-empty{color:#6D6D6D;font-size:14.5px;padding:18px 4px}
.vt-page{border:1px solid #E4E3EC;border-radius:10px;margin:0 0 10px;overflow:hidden}
.vt-page.is-here{border-color:#D2A643;box-shadow:0 0 0 1px #D2A643}
.vt-page-h{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#F4F3F9;color:#0B1257;font-weight:700;font-size:14.5px;text-decoration:none}
.vt-page-h:hover{background:#ECEBF4}
.vt-page-h em{font-style:normal;font-size:11.5px;font-weight:700;color:#7A5A12;background:#FFF1CC;border-radius:99px;padding:2px 8px}
.vt-page-h b{margin-left:auto;color:#6D6D6D;font-size:13px}
.vt-code{font:700 12px/1 ui-monospace,Consolas,monospace;color:#ECCC5F;background:#0B1257;border-radius:5px;padding:4px 6px}
.vt-page ul{list-style:none;margin:0;padding:0}
.vt-item{padding:10px 12px;border-top:1px solid #EFEEF4;font-size:14px;line-height:1.4}
.vt-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.vt-line strong{color:#0B1257;margin-right:2px}
.vt-badge{font-size:11.5px;font-weight:700;border-radius:99px;padding:2px 8px;background:#ECEBF4;color:#3A4160}
.vt-badge.is-draft{background:#FFF1CC;color:#7A5A12}
.vt-badge.is-missing{background:#FDE2E0;color:#9B2C22}
.vt-badge.is-stand-in{background:#FFF1CC;color:#7A5A12}
.vt-badge.is-built,.vt-badge.is-approved{background:#DDF3E4;color:#1E6B3A}
.vt-badge.is-legal{background:#E6E8FA;color:#1F2A8A}
.vt-where{color:#5B6572;font-size:13px;margin-top:3px}
.vt-where a{color:#0B1257;text-decoration:underline;text-decoration-color:#D2A643;text-underline-offset:2px}
.vt-file{display:inline-flex;align-items:center;gap:8px;margin-top:7px;padding:3px 4px 3px 9px;border-radius:6px;background:#0B1257}
.vt-file code{color:#ECCC5F;font:700 12.5px/1.4 ui-monospace,Consolas,monospace}
.vt-idea,.vt-content{margin:7px 0 0;color:#1F273A;font-size:13.5px}
.vt-content{padding:8px 10px;border-left:3px solid #D2A643;background:#FAFAFC;color:#3A4160}
@media (max-width:560px){ .vt-panel{right:12px;bottom:64px;max-height:70vh} }
/* a delivered photo or designed graphic, where its placeholder was */
.ch-main .vis-photo{margin:30px 0 34px}
.ch-main .vis-photo img{display:block;width:100%;height:auto;border-radius:12px}
.ch-main .vis-photo.is-photo img{aspect-ratio:3/2;object-fit:cover}

/* Photo Studio's phone preview (/assets/js/site.js): the picked candidate laid over its
   slot, and the Visuals dock out of the way in the 390px phone */
.studio-preview{position:absolute;z-index:20;overflow:hidden;pointer-events:none;background:#F4F3F9;box-shadow:0 0 0 3px #D2A643}
.studio-preview img{display:block;width:100%;height:100%;object-fit:cover}
.studio-badge{position:absolute;left:8px;bottom:8px;background:#0B1257;color:#FFFFFF;font-size:12px;line-height:1.5;padding:2px 9px;border-radius:999px}
.vis-slot.studio-previewing{aspect-ratio:3/2;padding:0 !important;overflow:hidden}
.vis-slot.studio-previewing > *{visibility:hidden}
html.in-studio .vis-dock,html.in-studio .vt-panel{display:none !important}
html.in-phone-frame,html.in-studio{scrollbar-width:none}
html.in-phone-frame::-webkit-scrollbar,html.in-studio::-webkit-scrollbar{display:none}

/* ---------- Pin 35: the right rail sticks too ---------------------------
   .ch-side-l has been sticky since the layout was built and .ch-side-r was
   left static, so on a service page the left rail followed you down and the
   right one scrolled away (Norman, 1 Oct 2026). Same top offset, so the two
   rails line up while they travel. Below 1180px .ch-side-l is hidden and the
   article's own headings carry the page; .ch-side-r is still shown there, and
   sticky on a narrow screen would park a card over the copy, so it only
   sticks at the width where there are two columns to stick in. */
@media (min-width:1181px){
  .ch-side-r{position:sticky;top:24px}
}

/* ---------- Pin 34: the review cards answer to the pointer ---------------
   .pa-card has had a hover state all along - navy fill, gold heading, a lift
   - and .rv-card had none at all, which is what "add hover effect on other
   just like this" means (Norman, 1 Oct 2026). He reported it twice: his other
   pin calls it "hover effect not also working".

   EVERY COLOUR THE FEATURED CARD RESTATES IS RESTATED HERE. The card's
   resting text is #1F273A on white, its footer #85868A, its author's small
   line grey: drop a navy fill under those and the card goes unreadable. The
   featured card already solves this - it is navy at rest - so these rules
   are its rules, applied on hover instead of on a class.

   The featured card is navy already, so it only lifts; inverting it to white
   would make the one card we chose to emphasise flinch when touched.

   Behind (hover:hover) on purpose. Norman pinned this on an iPad Air, where
   hover never fires and a sticky :hover can latch after a tap and leave a
   card stuck navy. It is a pointer affordance, so it is for pointers. */
@media (hover:hover){
  .rv-card{transition:background-color .2s ease,box-shadow .2s ease,color .2s ease}
  .rv-card .rv-title,.rv-card .rv-foot span,.rv-card .rv-src,
  .rv-card .rv-who small{transition:color .2s ease}
  .rv-card:not(.is-featured):hover{background:#0B1257;color:#F4F3F9;
    box-shadow:0 10px 30px rgba(11,18,87,.22)}
  .rv-card:not(.is-featured):hover .rv-title{color:#ECCC5F}
  .rv-card:not(.is-featured):hover .rv-foot span{color:#C9CFE6}
  .rv-card:not(.is-featured):hover .rv-src{color:#C9CFE6}
  .rv-card:not(.is-featured):hover .rv-who small{color:#9AA3C9}
  .rv-card.is-featured:hover{box-shadow:0 10px 30px rgba(11,18,87,.22)}
}

/* ---------- Pin 27: the hero's eyebrow line ------------------------------
   "Trusted Legal Counsel, Built On Relationships" was the H1. Ryan moved it
   above the headline so the H1 could carry the keywords - criminal defense,
   DUI, lawyer, California - and his dev note is explicit that this line must
   NOT be a heading. It is a <p>, so the page keeps exactly one H1 and the
   brand line stays where people already look for it.

   Sized against the subheadline rather than the H1: it is a kicker, and at
   anything larger it competes with the headline it introduces. Gold would
   fight the gold half of the H1 directly beneath, so it takes the hero's
   lighter text colour with a little letter-spacing to read as a label.

   THE CAPITALS ARE A CHOICE, NOT A BRIEF. Pin 27 asks only for "small text
   above the H1"; small sentence-case text there reads as a stray sentence,
   and the capitals and tracking are what make it read as a kicker. Easy to
   drop - remove text-transform and letter-spacing - if Ryan wants it plain. */
.hero-eyebrow{margin:0 0 var(--hero-eyebrow-mb,10px);color:#F3F3FB;
  font-size:var(--hero-eyebrow,clamp(13px,1.04vw,15px));font-weight:700;
  line-height:1.2;letter-spacing:.11em;text-transform:uppercase}
@media (max-width:760px){ .hero-eyebrow{--hero-eyebrow-mb:8px} }

/* ---------- MarkUp board 69, round 1 (Wil, 1 Oct 2026) --------------------
   Sixteen pins on the live homepage and a service page. */
/* pins 3, 4: the two sticky rails stop below the thin header (about 77px),
   not under it */
.ch-side-l{top:101px}
@media (min-width:1181px){ .ch-side-r{top:101px} }
/* pins 5, 6: the rail's address on two lines. The 40px pin icon took the
   room, so it is gone, and each line stays whole */
.ch-addr{font-size:clamp(15px,1.2vw,17px)}
.ch-addr span{white-space:nowrap}
/* pin 13: the contact card's heading a step smaller, at every width */
.ct-title{font-size:clamp(34px,3.5vw,50px)}
/* the contact card stacked (tablet and phone): its eyebrow, heading and
   intro were still left-aligned from the two-column desktop card, under a
   centred form heading - the top now centres to match */
@media (max-width:900px){
  .ct-left{text-align:center}
  /* ...and the heading's desktop line breaks (four short lines beside the
     form) let go, so it runs the card's width in balanced lines; the
     breaks carry a space after them so the words do not join */
  .ct-title br{display:none}
  .ct-title{max-width:640px;margin-left:auto;margin-right:auto;text-wrap:balance}
  .ct-body{max-width:620px;margin-left:auto;margin-right:auto;text-wrap:balance}
}
/* pin 2: a practice card's photo eases in a little under the pointer. The
   text block gets the card's own background, so the photo grows behind it
   instead of over it */
.pa-card > :is(image-slot,img.slot){transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pa-card .pa-body{position:relative;background:inherit}
@media (hover:hover){ .pa-card:hover > :is(image-slot,img.slot){transform:scale(1.05)} }
@media (prefers-reduced-motion:reduce){ .pa-card > :is(image-slot,img.slot){transition:none} }
/* pin 8: on a tablet the three small practice cards sit two to a row, and
   the third, alone on its row, is centered at the same width as the others.
   The two-column range is fixed here rather than left to auto-fit, so the
   centering can never meet a three-column or a one-column grid */
@media (min-width:560px) and (max-width:850px){
  .pa-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pa-grid-3 > :last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 10.5px)}
}
/* pin 14: the footer's Links list in two columns on a tablet, where it ran
   twelve links tall beside the practice areas */
@media (min-width:561px) and (max-width:900px){
  .ft-links{display:block;column-count:2;column-gap:24px}
  .ft-links .ft-head{column-span:all}
  .ft-links a{display:block;break-inside:avoid}
}
/* between the tablet layout and a full desktop (901-1240px) the comp's six
   columns ran out of room: at 1024 "Chino Hills Office" ran into the DUI
   list beside it, and at 1180 "Criminal Defense" met the contact icons. There
   the firm's logo and blurb take their own row, and Links, Practice Areas and
   Contact share the row below */
@media (min-width:901px) and (max-width:1240px){
  .ft-grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.45fr) minmax(0,1.1fr);gap:44px 40px}
  .ft-brand{grid-column:1 / -1;max-width:640px;margin:0 auto}
  .ft-links{grid-column:1}
  .ft-areas{grid-column:2}
  .ft-contact{grid-column:3}
}
/* pin 15: the contact card's form - Full name across, Email and Phone side
   by side, About your case across, then the message */
.ct-row.is-one{grid-template-columns:minmax(0,1fr)}
/* pins 1, 7: the FAQ opens and closes. Every question is a button; one
   answer shows at a time (/assets/js/site.js), in the navy box the first one always
   had. The block is frame:faq, so every page that carries it gets this.
   The closed rows share one height and rule now: the per-question heights
   were measured for a layout where only Q1 could be open */
#faq .faq-item{min-height:0;padding:24px 0 24px 13.6px;border-bottom:1px solid #A0A3AA}
#faq .faq-col > .faq-item:last-child{border-bottom:0}
#faq .faq-item > div{flex:1;min-width:0}
#faq .faq-item.is-open{margin:0 -31.2px 0 -8px;padding:28.9px 40.6px 26px;border-bottom:0;background:#0B1257;border-radius:14px}
/* by class, not the hidden attribute: the page runtime on staging drops a
   bare hidden, so an answer hides when its row is not .is-open */
#faq .faq-item:not(.is-open) p{display:none}
.faq-btn{all:unset;display:block;box-sizing:border-box;width:100%;position:relative;padding-right:34px;cursor:pointer}
.faq-btn::after{content:"";position:absolute;right:6px;top:.3em;width:9px;height:9px;border-right:2.5px solid currentColor;
  border-bottom:2.5px solid currentColor;transform:rotate(45deg);transition:transform .25s ease}
.faq-item.is-open .faq-btn::after{transform:rotate(-135deg);top:.62em}
.faq-btn:focus-visible{outline:2px solid #D2A643;outline-offset:4px;border-radius:4px}
@media (max-width:900px){
  #faq .faq-item.is-open{margin:0;padding:24px 20px}
}
/* pins 9-12: the homepage reviews. Two carousels, switched by the Avvo and
   Google tabs; each drifts slowly, pauses under the pointer or a finger, and
   can be dragged or swiped (/assets/js/site.js). The scrollbar is hidden because the
   track is moved by hand or by the drift, never by a bar */
button.rv-tab{background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
button.rv-tab:focus-visible{outline:2px solid #D2A643;outline-offset:6px;border-radius:6px}
.rv-carousel{text-align:left}
.rv-carousel:not(.is-on){display:none}   /* by class: the staging runtime drops a bare hidden */
.rv-track{display:flex;gap:21px;overflow-x:auto;padding:6px 4px 16px;margin:0 -4px;scrollbar-width:none;cursor:grab;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.rv-track::-webkit-scrollbar{display:none}
.rv-track.is-dragging{cursor:grabbing;user-select:none}
.rv-track > .rv-card{flex:0 0 clamp(270px,31.5%,384px);box-sizing:border-box}
@media (max-width:560px){ .rv-track > .rv-card{flex-basis:86%} }

/* SEO audit, 3 Oct 2026: the Attorney Advertising notice under the footer's
   bottom row (L3), and the one-line Service Areas block on service pages that
   replaced the unlinked city list. */
.ft-notice{max-width:min(var(--wrap),880px);margin:-28px auto 0;padding:0 0 44px;
  text-align:center;font-size:14px;line-height:1.5;color:#C9CFE6}
.ch-area-line{max-width:860px;margin:0 auto;color:#0B1257;font-size:clamp(16px,1.375vw,19.8px);line-height:1.6}
.ch-area-line a{color:#162395;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Words for screen readers and search engines only: names a "Learn More" or
   "Court details" link after what it opens (Lighthouse link-text, 4 Oct 2026). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Bakersfield / Diamond Bar: the office card closing the page (audit, 6 Oct 2026) */
.office-card{margin-top:clamp(24px,2.5vw,36px)}
.office-card-btns{display:flex;flex-wrap:wrap;gap:12px}

/* Maps load on request (AIM Squad audit INF-15, 6 Oct 2026). A Google Maps
   embed pulls in Google's own scripts and fonts (fonts.googleapis.com, Roboto)
   on every page, footer included. Each map spot is now a button that looks
   like a quiet street grid; site.js puts the real map in its place as the
   visitor scrolls to it, or at once on a press. */
.map-load{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;padding:16px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font:inherit;color:#0B1257;text-align:center;
  background-color:#E8ECF1;
  background-image:linear-gradient(#DCE1EA 2px,transparent 2px),linear-gradient(90deg,#DCE1EA 2px,transparent 2px),
    linear-gradient(35deg,transparent 46%,#D3D9E4 46%,#D3D9E4 50%,transparent 50%);
  background-size:44px 44px,44px 44px,100% 100%}
.map-load-pin{width:22px;height:22px;background:#D2A643;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  box-shadow:0 3px 8px rgba(11,18,87,.25);margin-bottom:4px}
.map-load-place{font-size:15px;font-weight:700;line-height:1.25}
.map-load-btn{display:inline-block;padding:7px 16px;border:1.5px solid #0B1257;border-radius:999px;background:#FFFFFF;
  font-size:14px;font-weight:600;line-height:1.2;transition:background-color .15s,color .15s}
.map-load:hover .map-load-btn,.map-load:focus-visible .map-load-btn{background:#0B1257;color:#FFFFFF}
.map-load:focus-visible{outline:3px solid #D2A643;outline-offset:-3px}
/* Service Areas: the contact card overlaps the map's lower part, so its label sits in the part left showing */
.sa-map .map-load{justify-content:flex-start;padding-top:clamp(60px,9vw,140px)}

/* the FAQs page: the shared FAQ in groups, each under its own label */
.qa-page .page-intro{text-align:center;max-width:760px;margin:0 auto clamp(28px,3vw,44px)}
.qa-page .faq-cat{display:block;text-align:center;margin:clamp(40px,4.5vw,64px) 0 8px}
.qa-page .page-intro + .faq-cat{margin-top:0}
.qa-page .faq-actions{margin-top:clamp(40px,4.5vw,60px)}

/* The quote card on DUI Defense and Criminal Defense turns through real
   reviews (tools/_reviews_pages.py, site.js). The slides share one grid cell,
   so the card is as tall as its longest review and never jumps as they change;
   only the current one shows. */
.tm-slides{display:grid}
/* out, then in: the leaving review is gone before the next one appears, so the two never overlap */
.tm-slide{grid-area:1 / 1;align-self:center;margin:0;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
.tm-slide.is-on{opacity:1;visibility:visible;transition:opacity .3s ease .22s,visibility 0s linear .22s}
.tm-slide .tm-title{margin:0 0 21.6px}
.tm-dots{display:flex;justify-content:center;gap:10px;margin:30px 0 0}
.tm-dots button{all:unset;cursor:pointer;width:10px;height:10px;border-radius:50%;background:rgba(244,243,249,.35);transition:background-color .2s,transform .2s}
.tm-dots button[aria-current="true"]{background:#ECCC5F;transform:scale(1.25)}
.tm-dots button:not([aria-current="true"]):hover{background:rgba(244,243,249,.7)}
.tm-dots button:focus-visible{outline:2px solid #ECCC5F;outline-offset:3px}
@media (prefers-reduced-motion:reduce){ .tm-slide,.tm-slide.is-on{transition:none} }

/* Site Credits: the AIM Squad logo under "Design and development" */
.legal .credit-logo{display:inline-block;margin:6px 0 0;text-decoration:none}
.legal .credit-logo img{display:block;width:216px;max-width:100%;height:auto}
.legal .credit-logo:focus-visible{outline:2px solid #D2A643;outline-offset:4px;border-radius:4px}

/* the Reviews filter carries each site's mark; the navy Avvo "A" turns white on the navy selected button */
.rv-filter .filterbtn{display:inline-flex;align-items:center;gap:8px}
.rv-filter .filterbtn img{flex:none;width:18px;height:18px;object-fit:contain;display:block}
.rv-filter .filterbtn.active img[src*="avvo"]{filter:brightness(0) invert(1)}
.rv-tab img[src*="google"]{width:17px}
/* a card turns navy under the pointer: the Avvo "A" turns white with it */
.rv-card:not(.is-featured):hover .rv-foot img[alt="Avvo"]{filter:brightness(0) invert(1)}

/* the FAQs page: the questions on the left, a short "Have a question?" form on
   the right that stays in view while they scroll; stacked under them on a phone */
.qa-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(32px,4vw,64px);align-items:start}
.qa-page .faq-grid.is-single{grid-template-columns:minmax(0,1fr)}
.qa-page .faq-grid.is-single .faq-col-l{grid-column:1}
.qa-page .faq-cat{text-align:left}
.qa-page .faq-actions{justify-content:flex-start}
.ask-card{position:sticky;top:110px;background:#0B1257;color:#F4F3F9;border-radius:14px;padding:32px 30px 28px;box-shadow:0 18px 50px rgba(11,18,87,.22)}
.ask-card-title{color:#ECCC5F;font-size:clamp(24px,2vw,30px);font-weight:700;line-height:1.15;margin:0 0 8px}
.ask-card-lead{color:#D9DCEC;font-size:16px;line-height:1.45;margin:0 0 14px}
.ask-card-form{display:flex;flex-direction:column;margin:0}
.ask-card-form label{font-size:15px;font-weight:600;margin:12px 0 6px}
.ask-card-form input,.ask-card-form textarea{box-sizing:border-box;width:100%;font:inherit;font-size:16px;color:#1F273A;background:#FFFFFF;border:0;border-radius:8px;padding:12px 14px}
.ask-card-form textarea{min-height:130px;resize:vertical}
.ask-card-form input:focus,.ask-card-form textarea:focus{outline:3px solid #D2A643;outline-offset:1px}
.ask-card-send{margin-top:20px;width:100%;border:0;cursor:pointer;font-family:inherit}
.ask-card-note{color:#B9BED8;font-size:13px;line-height:1.45;margin:14px 0 0}
@media (max-width:1000px){
  .qa-layout{grid-template-columns:minmax(0,1fr)}
  .ask-card{position:static}
  .qa-page .faq-cat{text-align:center}
  .qa-page .faq-actions{justify-content:center}
}

/* The office pages: the intro on the left, the office map on the right, its
   address, number and directions under it (it replaces the separate office
   card further down). Stacked on a tablet or phone. */
.hub-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(28px,4vw,64px);align-items:start;margin:0 0 clamp(32px,3.5vw,48px)}
.hub-top .hub-intro{margin:0;max-width:none}
.hub-map{background:#FFFFFF;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(20,24,60,.10),0 8px 26px rgba(11,18,87,.08)}
.hub-map .ct-office-map{aspect-ratio:16 / 9}
.hub-map-info{padding:18px 22px 20px}
.hub-map-info .eyebrow{margin:0 0 6px}
.hub-map-addr{color:#1F273A;font-size:16px;line-height:1.45;margin:0 0 10px}
.hub-map-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;font-size:16px;font-weight:700}
.hub-map-links a{color:#0B1257;text-decoration:none}
.hub-map-links a:first-child{color:#D2A643}
.hub-map-links a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){ .hub-top{grid-template-columns:minmax(0,1fr)} }

/* Every page's sections alternate the two brand grounds, white and the light
   grey, so no two neighbours share a colour (user, 7 Oct 2026: "i want the
   sections to have a different background color each section ... the stripe
   each section"). Counted from the bottom: the contact form's section, the
   last one, is always grey (its form sits on a white card), the one above it
   white, then grey, and so on up. Left as they are: the first section (the
   navy hero), the Service Areas map, and the contact section that overlaps
   that map. !important because many sections carry an inline background. */
section:not(section section):not(:first-of-type):not(.sa-map):not(.sa-map + #contact):nth-last-of-type(odd){background-color:#F4F3F9 !important}
section:not(section section):not(:first-of-type):not(.sa-map):not(.sa-map + #contact):nth-last-of-type(even){background-color:#FFFFFF !important}

/* Bakersfield / Diamond Bar: one article, its topics spaced inside it */
/* the map in a right-hand column beside the whole article, in view while it
   scrolls, so the topics start right under the short intro (no empty gap) */
.office-article article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);column-gap:clamp(28px,4vw,64px);align-items:start}
.office-article .hub-top{display:contents}
.office-article .hub-intro{grid-column:1;margin:0}
.office-article .hub-map{grid-column:2;grid-row:1 / span 20;position:sticky;top:110px}
.office-article .office-part{grid-column:1}
@media (max-width:900px){
  .office-article article{display:block}
  .office-article .hub-map{position:static;margin:24px 0 0}
}
.office-part{margin-top:clamp(24px,2.4vw,34px)}
.office-part .ip-h2{margin:0 0 10px}
.office-part .ip-text{margin:0 0 10px}
.office-part > :last-child,.office-part > div > :last-child{margin-bottom:0}

/* the firm's social profiles under the footer's description (user, 7 Oct 2026),
   the same ones the business markup lists (publish_design.py SOCIAL_PROFILES) */
.ft-social{list-style:none;display:flex;justify-content:center;gap:16px;margin:30px 0 0;padding:0}
.ft-social a{display:flex;align-items:center;justify-content:center;width:48px;height:48px;box-sizing:border-box;border-radius:50%;border:1.5px solid #D2A643;color:#ECCC5F;text-decoration:none;transition:background-color .15s,color .15s}
.ft-social a:hover{background:#D2A643;color:#0B1257}
.ft-social a:focus-visible{outline:2px solid #ECCC5F;outline-offset:3px}
.ft-social svg{width:24px;height:24px;display:block}
/* the FAQs page's question list carries id="faq" (the FAQ styles and script key on it), not
   the whole section, so the "Have a question?" form beside it sits outside the FAQ itself */
.qa-page #faq{background:none}
/* numbered citations, [1], and the Sources list that closes the page (tools/build_live.py cite_sources) */
sup.cite{font-size:.68em;line-height:0;vertical-align:super;margin-left:2px}
sup.cite a{color:#0B1257;font-weight:700;text-decoration:none}
sup.cite a:hover{text-decoration:underline}
.sources{background:#fff;padding:clamp(32px,3.5vw,48px) max(var(--gut), calc((100% - var(--wrap)) / 2))}
.sources h2{font-size:20px;line-height:1.3;color:#0B1257;margin:0 0 12px}
.sources ol{margin:0;padding-left:24px;color:#5B6572;font-size:15px;line-height:1.6}
.sources li{scroll-margin-top:110px;overflow-wrap:anywhere}
.sources li:target{background:#FFF6DC}
.sources a{color:#0B1257;font-weight:600}
.src-host{color:#5B6572;font-size:14px}
/* a call line in long text, so no 500 words pass without one (tools/build_live.py cta_lines) */
.cta-line,.ch-main p.cta-line,.legal p.cta-line{margin:28px 0;padding:16px 20px;border-radius:10px;background:#0B1257;color:#FFFFFF;font-weight:600;line-height:1.5}
.cta-line a,.ch-main p.cta-line a,.legal p.cta-line a{color:#ECCC5F;font-weight:700;white-space:nowrap}
.cta-line a:hover,.ch-main p.cta-line a:hover{color:#FFFFFF}
.courtcard.ask-card{background:#0B1257;border-radius:12px;justify-content:center}
.courtcard.ask-card .court-body{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;padding:24px}
.ask-card-h{margin:0;color:#FFFFFF;font-size:20px;font-weight:700;line-height:1.25}
.ask-card-t{margin:0 0 6px;color:#D6DBF2;font-size:15px;line-height:1.5}
/* every gold button darkens on hover (AIM Squad audit DES-01); the base rule above is !important */
.btn-gold:hover,.btn-gold:focus-visible{background:#B8902F !important;color:#FFFFFF !important}
/* a keyboard focus ring on every link and button (DES-02); the specific rings above still apply */
a:focus-visible,button:focus-visible,summary:focus-visible,input[type="submit"]:focus-visible,[role="button"]:focus-visible{outline:2px solid #D2A643;outline-offset:3px}

/* Page not found (design/Page Not Found.dc.html, published as /404.html) */
.nf-sec .sec-title{margin:0 0 14px}
.nf-lede,.nf-more{max-width:760px;color:#1F273A;font-size:clamp(17px,1.3vw,19px);line-height:1.5}
.nf-lede{margin:0 0 clamp(28px,2.8vw,40px)}
.nf-more{margin:clamp(28px,2.8vw,40px) 0 0}
.nf-lede a,.nf-more a{color:#8A6921;font-weight:700}
.nf-sec .pa-grid-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* Form problems, shown under the field (site.js, "The contact forms check themselves") */
.ct-form .is-invalid,.lead-form .is-invalid,.ask-card-form .is-invalid{border-color:#B42318 !important;box-shadow:0 0 0 1px #B42318 inset}
.field-err{color:#B42318;font-size:14px;line-height:1.4;font-weight:600;text-align:left;margin:-10px 0 16px}
.lead-form .field-err,.ask-card-form .field-err{margin:-4px 0 10px}