/* Hinson Law Offices PLLC - site stylesheet
   Built from _src/house.css by _src/palette.py. Never edit assets/css/site.css by hand.
   The law-firm house system: Playfair Display headlines, square corners, hairline rules,
   a static ink hero with no motion, and practice areas as a typographic index. */
/* ==========================================================================
   Hinson Law Offices — site stylesheet.
   The token block below is GENERATED by _src/palette.py from the brand ink
   read off the firm's own logo file. Do not hand-edit between the markers.
   ========================================================================== */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
svg:not([class]){width:1.12em;height:1.12em;flex:none}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
img,picture,video,canvas,svg{display:block;max-width:100%}
img{height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{overflow-wrap:break-word;hyphens:manual} /* v5.7: never hyphens:auto on a heading */
a{color:inherit}
:target{scroll-margin-top:120px}

/* ---------- fonts (self-hosted: a double-clicked file has no internet) ---------- */
@font-face{font-family:"Playfair Display";src:url("../fonts/PlayfairDisplay.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Sora";src:url("../fonts/Sora.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/PlusJakartaSans.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

:root{
/* == GENERATED PALETTE - DO NOT EDIT BY HAND == */
  /* seeds: door navy #0D1B35 + emblem navy #142950 + house gold #C6A058 */
  --ink: #0D1B35;
  --ink-2: #102140;
  --ink-3: #13264B;
  --accent: #0F4FC7;
  --accent-dark: #0C3E9B;
  --accent-soft: #F2F3F5;
  --azure: #668FDB;
  --azure-soft: #ABC1EB;
  --gold: #C6A058;
  --gold-mark: #846B3B;
  --gold-ink: #C6A058;
  --paper: #FFFFFF;
  --mist: #F4F5F7;
  --mist-2: #E9EBEE;
  --line: #E0E3E8;
  --line-2: #C2C7D2;
  --muted: #6A6E76;
  --ink-muted: #9298A4;
  --ink-line: rgba(255, 255, 255, .14);
/* == END GENERATED PALETTE == */
}

:root{
  --text:var(--ink);
  --r-card:2px;
  --r-btn:2px;
  --r-pill:2px;
  --shadow:0 1px 0 0 var(--line);
  --container:1180px;
  --gutter:20px;
  --hdr:76px;
}

/* ---------- type ---------- */
body{
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.65;color:var(--text);background-color:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.font-display{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  line-height:1.12;letter-spacing:-.012em;font-weight:600;color:var(--text);
}
h1{font-size:clamp(34px,5.2vw,60px);font-weight:600;line-height:1.06}
h2{font-size:clamp(27px,3.5vw,42px)}
h3{font-size:clamp(20px,2.1vw,26px)}
h4{font-size:clamp(17px,1.6vw,20px)}
p{margin:0 0 1.05em}
h1+p,h2+p,h3+p,h4+p,h1+.lead,h2+.lead,h3+.lead,h2+.ticklist,h3+.ticklist{margin-top:16px}
.sec-head h2+p,.sec-head h2+.lead{margin-top:14px}
p:last-child{margin-bottom:0}
strong{font-weight:700}

.eyebrow{
  font-family:"Sora",sans-serif;font-size:12px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent);margin:0 0 14px;display:block;
}
.section--ink .eyebrow,.hero .eyebrow,.pagehead .eyebrow,.ctaband .eyebrow,.ftr .eyebrow,.mnav .eyebrow,.ribbon .eyebrow{color:var(--azure)}
.lead{font-size:clamp(17px,1.9vw,20px);color:var(--muted);line-height:1.62}
.section--ink .lead,.pagehead .lead,.ctaband .lead,.hero .lead{color:var(--ink-muted)}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.container--narrow{max-width:840px;margin-inline:auto}
.section{padding-top:clamp(52px,7vw,92px);padding-bottom:clamp(52px,7vw,92px)}
.section--tight{padding-top:clamp(38px,5vw,64px);padding-bottom:clamp(38px,5vw,64px)}
.section--mist{background-color:var(--mist)}
.section--ink{background-color:var(--ink);color:#fff}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.section--ink p{color:var(--ink-muted)}
.sec-head{max-width:760px;margin-bottom:clamp(28px,3.4vw,44px);padding-top:22px;border-top:1px solid var(--line)}
.section--ink .sec-head{border-top-color:rgba(255,255,255,.2)}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.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}

.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,58px);align-items:start}
.split--article{grid-template-columns:1.3fr .7fr;align-items:start}
@media (max-width:900px){.split,.split--article{grid-template-columns:minmax(0,1fr)}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:13px 26px;border-radius:var(--r-btn);
  font-family:"Sora",sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;border:1px solid transparent;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;text-align:center;
}
.btn svg{width:18px;height:18px;flex:none}
.btn--primary{background-color:var(--accent);color:#fff}
.btn--primary:hover{background-color:var(--accent-dark)}
.btn--ghost{background-color:transparent;color:var(--accent);border-color:var(--text)}
.btn--ghost:hover{background-color:var(--accent-soft);border-color:var(--accent)}
.section--ink .btn--ghost,.hero .btn--ghost,.mnav .btn--ghost,.pagehead .btn--ghost,.ctaband .btn--ghost,.stickybar .btn--ghost,.ribbon .btn--ghost{
  color:#fff;border-color:rgba(255,255,255,.44);background-color:rgba(255,255,255,.07)
}
.section--ink .btn--ghost:hover,.hero .btn--ghost:hover,.mnav .btn--ghost:hover,.pagehead .btn--ghost:hover,.ctaband .btn--ghost:hover,.stickybar .btn--ghost:hover{
  background-color:rgba(255,255,255,.17);border-color:#fff
}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:620px){.btn-row{flex-direction:column}.btn-row .btn{width:100%}}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--azure);outline-offset:2px;border-radius:4px
}

/* ---------- top utility bar ---------- */
.topbar{background-color:var(--ink);color:#fff;font-size:13.5px}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px}
.topbar__list{display:flex;align-items:center;gap:20px;flex-wrap:wrap;color:var(--ink-muted)}
.topbar__list li{display:flex;align-items:center;gap:7px}
.topbar__list svg{color:var(--azure)}
.topbar__tel{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.topbar__tel:hover{color:var(--azure-soft)}
@media (max-width:1200px){
  .topbar .container{justify-content:center;padding-top:8px;padding-bottom:8px}
  .topbar__list{display:none}
}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:70;
  background-color:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);transition:box-shadow .2s ease;
}
.hdr.is-stuck{box-shadow:0 10px 30px -22px rgba(8,13,31,.6)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:var(--hdr);padding-top:10px;padding-bottom:10px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand__img{height:46px;width:auto;max-width:min(100%,calc(100vw - 150px));object-fit:contain;object-position:left center;background:none}
.brand__txt{display:flex;flex-direction:column;line-height:1;gap:4px}
.brand__name{font-family:"Playfair Display",Georgia,serif;font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--text);white-space:nowrap}
.brand__sub{font-family:"Sora",sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.nav{display:flex;align-items:center;gap:1px;flex-wrap:nowrap;min-width:0}
.nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 9px;border-radius:2px;
  font-size:14px;font-weight:600;text-decoration:none;color:var(--text);white-space:nowrap;
}
.nav a:hover{background-color:var(--mist);color:var(--accent)}
.nav a[aria-current="page"]{color:var(--accent)}
.hdr__cta{display:flex;align-items:center;gap:10px;flex:none}
.hdr__cta .btn{min-height:46px;padding:10px 16px;font-size:13.5px;white-space:nowrap}
.burger{
  display:none;align-items:center;justify-content:center;gap:8px;
  min-width:52px;min-height:46px;padding:0 14px;border:1px solid var(--text);border-radius:2px;
  background-color:#fff;color:var(--text);font-family:"Sora",sans-serif;font-weight:700;font-size:14px;
}
.burger svg{width:20px;height:20px}
@media (max-width:1200px){
  .nav,.hdr__cta{display:none}
  .burger{display:inline-flex}
}
@media (max-width:430px){
  .brand__img{height:34px;max-width:calc(100vw - 128px)}
  .brand__name{font-size:19px}
  .brand__sub{font-size:8.5px;letter-spacing:.16em}
}

/* ---------- mobile nav panel ---------- */
.mnav{
  position:fixed;top:0;left:0;right:0;height:100dvh;z-index:90;
  background-color:var(--ink);
  background-image:linear-gradient(168deg,var(--ink-2) 0%,var(--ink) 62%);
  color:#fff;display:flex;flex-direction:column;
  transform:translateY(-100%);visibility:hidden;
  transition:transform .34s cubic-bezier(.4,0,.2,1),visibility .34s;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.mnav.is-open{transform:translateY(0);visibility:visible}
.mnav__top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;border-bottom:1px solid var(--ink-line)}
.mnav__mark{display:inline-flex;flex-direction:column;gap:4px;min-height:46px;justify-content:center;text-decoration:none;color:#fff}
.mnav__mark b{font-family:"Playfair Display",Georgia,serif;font-size:21px;font-weight:600;letter-spacing:-.01em}
.mnav__mark span{font-family:"Sora",sans-serif;font-size:9.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--azure)}
.mnav__close{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex:none;
  border-radius:2px;border:1px solid rgba(255,255,255,.32);background-color:rgba(255,255,255,.08);color:#fff
}
.mnav__close svg{width:20px;height:20px}
.mnav__links{padding:8px 20px 4px}
.mnav__links a{
  display:flex;align-items:center;min-height:54px;padding:8px 4px;
  font-family:"Sora",sans-serif;font-weight:600;font-size:18px;color:#fff;text-decoration:none;
  border-bottom:1px solid var(--ink-line);
}
.mnav__links a:hover{color:var(--azure)}
.mnav__foot{padding:18px 20px calc(26px + env(safe-area-inset-bottom));display:grid;gap:11px;margin-top:auto}
.mnav__foot .btn{width:100%}
.mnav__note{font-size:14px;color:var(--ink-muted);text-align:center;margin-top:2px}

/* ---------- hero (typographic — this firm owns no photography) ---------- */
.hero{
  position:relative;padding:0;overflow:hidden;isolation:isolate;
  background-color:var(--ink);color:#fff;
}
.hero__field{
  position:absolute;inset:0;z-index:-1;
  background-color:var(--ink);
  background-image:
    linear-gradient(118deg,rgba(37,57,141,.52) 0%,rgba(8,13,31,0) 58%),
    linear-gradient(0deg,rgba(8,13,31,.9) 0%,rgba(8,13,31,0) 42%);
}
.hero__grid{
  position:absolute;inset:0;z-index:-1;opacity:.13;
  background-color:transparent;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.5) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(120% 90% at 84% 8%,#000 0%,transparent 68%);
  mask-image:radial-gradient(120% 90% at 84% 8%,#000 0%,transparent 68%);
}
.hero__in{padding-top:clamp(46px,6vw,82px);padding-bottom:clamp(52px,7vw,96px);position:relative}
.hero__cols{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,3.4vw,52px);align-items:start}
@media (max-width:980px){.hero__cols{grid-template-columns:minmax(0,1fr)}}
.hero h1{color:#fff;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--azure)}
.hero__sub{font-size:clamp(16.5px,1.9vw,19.5px);color:var(--ink-muted);max-width:54ch;margin-bottom:26px}
.chip{
  display:inline-flex;align-items:center;gap:10px;padding:7px 0;
  background-color:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.26);
  font-family:"Sora",sans-serif;font-size:12px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:#fff;margin-bottom:22px;
}
.chip .dot{width:8px;height:8px;border-radius:50%;background-color:var(--azure);animation:pulse 2.4s ease-in-out infinite;flex:none}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.42;transform:scale(.78)}}
.hero__proof{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.hero__proof div{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink-muted)}
.hero__proof svg{color:var(--azure);width:17px;height:17px}
.hero__proof .stars svg{color:var(--gold)}

/* lead card — an explicitly LIGHT surface that lands inside dark sections */
.leadcard{
  background-color:var(--paper);border-radius:var(--r-card);border:1px solid var(--line);
  padding:clamp(22px,2.2vw,28px);
}
.hero .leadcard,.section--ink .leadcard,.ctaband .leadcard,.pagehead .leadcard{color:var(--text)}
.hero .leadcard h1,.hero .leadcard h2,.hero .leadcard h3,.hero .leadcard h4,
.section--ink .leadcard h2,.section--ink .leadcard h3,.section--ink .leadcard h4{color:var(--text)}
.hero .leadcard p,.section--ink .leadcard p,.hero .leadcard label,.section--ink .leadcard label{color:var(--muted)}
.hero .leadcard .field label,.section--ink .leadcard .field label{color:var(--text)}
.hero .leadcard a,.section--ink .leadcard a{color:var(--accent)}
.leadcard h2{font-size:21px;margin-bottom:6px;letter-spacing:-.005em}
.leadcard__note{font-size:13.5px;color:var(--muted);margin-bottom:16px;line-height:1.5}
.field{margin-bottom:11px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--text)}
.field input,.field select,.field textarea{
  width:100%;font-size:16px;padding:11px 13px;border:1px solid var(--line-2);border-radius:2px;
  background-color:#fff;color:var(--text);min-height:46px;
}
.field textarea{min-height:82px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(37,57,141,.22)}
.form-note{font-size:12px;color:var(--muted);margin-top:11px;line-height:1.5}
.form-note--err{color:#8C1D1D;font-weight:700}
.hp-field{display:none}

/* ---------- page head (interior) ---------- */
.pagehead{position:relative;padding:0;overflow:hidden;isolation:isolate;background-color:var(--ink);color:#fff}
.pagehead__field{
  position:absolute;inset:0;z-index:-1;background-color:var(--ink);
  background-image:linear-gradient(112deg,rgba(37,57,141,.44) 0%,rgba(8,13,31,0) 62%);
}
.pagehead__in{padding-top:clamp(38px,5.2vw,70px);padding-bottom:clamp(38px,5.2vw,70px);position:relative}
.pagehead h1{color:#fff;max-width:20ch}
.pagehead p{color:var(--ink-muted);max-width:64ch;margin-top:16px;font-size:clamp(16px,1.8vw,19px)}
.pagehead .btn-row{margin-top:26px}

/* breadcrumbs */
.crumbs{font-size:13.5px;margin-bottom:16px;color:rgba(255,255,255,.74)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;align-items:center;list-style:none;margin:0;padding:0}
.crumbs a{color:rgba(255,255,255,.88);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}

/* ---------- cards ---------- */
.card{
  background-color:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s ease;
}
.card:hover{border-color:var(--text)}
.section--ink .card:not(.card--light),.ctaband .card:not(.card--light){background-color:var(--ink-2);border-color:var(--ink-line)}
.section--ink .card:not(.card--light) p{color:var(--ink-muted)}
.section--ink .card:not(.card--light) h3{color:#fff}
.card__body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card__body h3{font-size:21px}
.card__body p{font-size:15.5px;color:var(--muted);flex:1}
.card__link{
  display:inline-flex;align-items:center;gap:7px;font-family:"Sora",sans-serif;font-weight:700;font-size:14.5px;
  color:var(--accent);text-decoration:none;min-height:46px;align-self:flex-start;
}
.section--ink .card__link{color:var(--azure)}
.card__link:hover{gap:11px}
.card--flat{padding:26px}
.card--flat h3{font-size:19px;margin-bottom:8px}
.card--flat p{font-size:15.5px;color:var(--muted)}
.section--ink .card--flat p{color:var(--ink-muted)}

.icobox{
  width:46px;height:46px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;
  background-color:var(--accent-soft);color:var(--accent);margin-bottom:14px;flex:none;
}
.icobox svg{width:22px;height:22px}
.section--ink .icobox{background-color:rgba(115,135,222,.18);color:var(--azure)}

/* ---------- practice index (typographic, no pictures) ---------- */
.pindex{border-top:1px solid var(--line)}
.section--ink .pindex{border-top-color:rgba(255,255,255,.2)}
.pindex__row{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,11fr) auto;
  gap:8px 32px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:background-color .18s ease;
}
.section--ink .pindex__row{border-bottom-color:rgba(255,255,255,.2)}
.pindex__row:hover{background-color:var(--mist)}
.section--ink .pindex__row:hover{background-color:rgba(255,255,255,.05)}
.pindex__row:hover .pindex__name{color:var(--accent)}
.section--ink .pindex__row:hover .pindex__name{color:var(--azure)}
.pindex__row:hover .pindex__go{opacity:1;transform:translateX(3px)}
.pindex__name{
  font-family:"Playfair Display",Georgia,serif;font-size:clamp(23px,2.5vw,32px);font-weight:600;
  line-height:1.12;letter-spacing:-.015em;color:var(--text);transition:color .18s ease;
}
.section--ink .pindex__name{color:#fff}
.pindex__desc{font-size:16px;line-height:1.6;color:var(--muted);margin:0}
.section--ink .pindex__desc{color:var(--ink-muted)}
.pindex__go{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  color:var(--accent);opacity:.6;transition:opacity .18s ease,transform .18s ease;
}
.section--ink .pindex__go{color:var(--azure)}
.pindex__go svg{width:22px;height:22px}
@media (max-width:820px){
  .pindex__row{grid-template-columns:minmax(0,1fr) 44px;gap:6px 14px;padding:20px 0}
  .pindex__name{grid-column:1;grid-row:1}
  .pindex__desc{grid-column:1;grid-row:2}
  .pindex__go{grid-column:2;grid-row:1/3;align-self:center;justify-self:end}
}

/* ---------- credential ribbon ---------- */
.ribbon{background-color:var(--ink-2);color:#fff;border-top:1px solid rgba(255,255,255,.16)}
.ribbon__in{padding-top:clamp(36px,4.2vw,58px);padding-bottom:clamp(32px,3.6vw,48px)}
.ribbon__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:stretch}
.ribbon__item{padding:2px 40px;border-left:1px solid rgba(255,255,255,.16)}
.ribbon__item:first-child{padding-left:0;border-left:0}
.ribbon__item:last-child{padding-right:0}
.ribbon__label{
  display:block;font-family:"Sora",sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--azure);margin-bottom:12px;
}
.ribbon__val{
  font-family:"Playfair Display",Georgia,serif;font-size:clamp(17px,1.6vw,21px);font-weight:500;
  line-height:1.34;letter-spacing:-.005em;color:#fff;margin:0;
}
.ribbon__val em{font-style:normal;font-weight:600;color:#fff}
.ribbon__note{
  margin:26px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);
  font-size:12.5px;line-height:1.6;color:var(--ink-muted);
}
@media (max-width:900px){
  .ribbon__row{grid-template-columns:minmax(0,1fr)}
  .ribbon__item{padding:18px 0;border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .ribbon__item:first-child{padding-top:0;border-top:0}
  .ribbon__in{padding-top:30px;padding-bottom:26px}
  .ribbon__note{margin-top:20px}
}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:860px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{position:relative;background-color:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 24px 24px}
.section--ink .step{background-color:var(--ink-2);border-color:var(--ink-line)}
.section--ink .step h3{color:#fff}
.section--ink .step p{color:var(--ink-muted)}
.step__n{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:2px;
  background-color:var(--ink);color:#fff;font-family:"Sora",sans-serif;font-weight:800;font-size:17px;margin-bottom:15px;
}
.section--ink .step__n{background-color:var(--accent)}
.step h3{font-size:20px;margin-bottom:8px}
.step p{font-size:15.5px;color:var(--muted)}

/* ---------- reviews ---------- */
.rating-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:8px}
.stars{display:inline-flex;gap:2px;color:var(--gold-mark)}
.section--ink .stars,.hero .stars,.pagehead .stars,.ctaband .stars,.ftr .stars,.ribbon .stars{color:var(--gold)}
.stars svg{width:17px;height:17px}
.rating-num{font-family:"Sora",sans-serif;font-weight:800;font-size:19px}
.rating-src{font-size:14px;color:var(--muted)}
.section--ink .rating-src,.hero .rating-src{color:var(--ink-muted)}

.quote{
  background-color:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px;
  display:flex;flex-direction:column;gap:14px;height:100%;
}
.section--ink .quote{background-color:var(--ink-2);border-color:var(--ink-line)}
.quote .stars{color:var(--gold-mark)}
.section--ink .quote .stars{color:var(--gold)}
.quote blockquote{
  margin:0;font-family:"Playfair Display",Georgia,serif;font-size:17px;font-weight:400;
  line-height:1.62;color:var(--text);letter-spacing:-.004em;
}
.section--ink .quote blockquote{color:#E9EDF8}
.quote__by{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:6px}
.quote__av{
  width:42px;height:42px;border-radius:2px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background-color:var(--accent);color:#fff;font-family:"Sora",sans-serif;font-weight:800;font-size:15px;
}
.quote__name{font-weight:700;font-size:15px}
.section--ink .quote__name{color:#fff}
.quote__meta{font-size:13px;color:var(--muted)}
.section--ink .quote__meta{color:var(--ink-muted)}

/* pull quote — the client's own words */
.pull{
  border-left:3px solid var(--accent);padding:6px 0 6px 22px;margin:0 0 26px;
}
.section--ink .pull,.hero .pull{border-left-color:var(--azure)}
.pull p{
  font-family:"Playfair Display",Georgia,serif;font-size:clamp(19px,2.1vw,24px);
  line-height:1.42;letter-spacing:-.01em;color:var(--text);margin-bottom:8px;
}
.section--ink .pull p{color:#fff}
.pull cite{font-style:normal;font-family:"Sora",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.section--ink .pull cite{color:var(--azure)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px}
.faq details{background-color:var(--paper);border:1px solid var(--line);border-radius:2px;overflow:hidden}
.section--ink .faq details{background-color:var(--ink-2);border-color:var(--ink-line)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 20px;min-height:56px;font-family:"Sora",sans-serif;font-weight:700;font-size:16.5px;color:var(--text);
}
.section--ink .faq summary{color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:400;color:var(--accent);line-height:1;flex:none}
.section--ink .faq summary::after{color:var(--azure)}
.faq details[open] summary::after{content:"\2212"}
.faq__a{padding:0 20px 19px;font-size:15.5px;color:var(--muted);line-height:1.65}
.section--ink .faq__a{color:var(--ink-muted)}

/* ---------- prose ---------- */
.prose{max-width:74ch}
.prose h2{margin:1.6em 0 .5em}
.prose h3{margin:1.4em 0 .45em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p,.prose li{font-size:16.5px;line-height:1.72;color:#26314A}
.section--ink .prose p,.section--ink .prose li{color:var(--ink-muted)}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:1.25em}
.prose li{margin-bottom:.5em}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--accent-dark)}
.ticklist{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.ticklist li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.6}
.ticklist svg{width:21px;height:21px;color:var(--accent);flex:none;margin-top:3px}
.section--ink .ticklist svg{color:var(--azure)}

/* ---------- matter list (practice sub-topics) ---------- */
.mgroup{border-top:1px solid var(--line);padding-top:22px;margin-top:34px}
.mgroup:first-child{margin-top:0}
.section--ink .mgroup{border-top-color:rgba(255,255,255,.2)}
.mgroup h3{font-size:20px;margin-bottom:16px}
.mlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 26px}
@media (max-width:900px){.mlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.mlist{grid-template-columns:minmax(0,1fr)}}
.mlist li{
  display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:#26314A;
  padding-bottom:8px;border-bottom:1px solid var(--line);overflow-wrap:anywhere;
}
.section--ink .mlist li{color:var(--ink-muted);border-bottom-color:rgba(255,255,255,.14)}
.mlist li::before{content:"";flex:none;width:6px;height:6px;margin-top:9px;background-color:var(--accent)}
.section--ink .mlist li::before{background-color:var(--azure)}

/* A vertical list of links that survives a narrow column - the three-column .mlist turns
   into one character per line inside a 330px aside. */
.linklist{list-style:none;margin:0;padding:0;display:grid}
.linklist li{border-bottom:1px solid var(--line)}
.linklist li:last-child{border-bottom:0}
.linklist a{display:block;padding:10px 0;font-size:15px;line-height:1.45;color:var(--text);text-decoration:none;min-height:44px}
.linklist a:hover{color:var(--accent)}
.panel .linklist li{border-bottom-color:rgba(255,255,255,.16)}
.panel .linklist a{color:#fff}
.panel .linklist a:hover{color:var(--azure)}


/* Body copy and tap targets, to the SOP floor: 16px body, 44px on anything a thumb has to
   hit. The 15.5px card and list sizes came from a desktop-first sheet. */
.card__body p,.factrow li,.mlist li{font-size:16px}
.linklist a{font-size:16px}
.leadcard .form-note{font-size:13.5px}
.leadcard .form-note a,.panel__name a,.credgroup p a{display:inline-flex;align-items:center;
  min-height:44px;font-weight:600}
.brand{min-height:44px}
.card__body h3 a,.cardname a{display:inline-flex;align-items:center;min-height:44px}
.ftr .ftr__grid p{font-size:15.5px}

/* ---------- tables ---------- */
.tablewrap{width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background-color:var(--paper)}
.credgroup .tablewrap{border:0;border-radius:0;background-color:transparent}
table.tbl{width:100%;border-collapse:collapse;font-size:15.5px;background-color:transparent}
table.tbl th,table.tbl td{
  padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;
  white-space:normal;overflow-wrap:anywhere;color:var(--text);
}
.credgroup table.tbl th,.credgroup table.tbl td{padding-left:0;padding-right:0}
table.tbl th{font-family:"Sora",sans-serif;font-weight:700;font-size:14px;background-color:var(--mist)}
.credgroup table.tbl th{background-color:transparent}
table.tbl tr:last-child td{border-bottom:0}
table.tbl td.val{font-weight:700;color:var(--text);text-align:right;white-space:normal;overflow-wrap:anywhere}
.section--ink table.tbl th,.section--ink table.tbl td{color:#fff;border-bottom-color:rgba(255,255,255,.16)}
.section--ink table.tbl th{background-color:rgba(255,255,255,.06)}
@media (max-width:640px){
  table.tbl thead{display:none}
  table.tbl,table.tbl tbody,table.tbl tr,table.tbl td{display:block;width:100%}
  table.tbl tr{border-bottom:1px solid var(--line-2);padding:6px 0}
  table.tbl tr:last-child{border-bottom:0}
  table.tbl td{border-bottom:0;padding:7px 16px}
  .credgroup table.tbl td{padding-left:0;padding-right:0}
  table.tbl td.val{text-align:left}
  table.tbl td::before{
    content:attr(data-l);display:block;font-family:"Sora",sans-serif;font-size:12px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;
  }
}
.credgroup{margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.credgroup:first-child{margin-top:0}
.credgroup h3{font-size:19px;margin-bottom:8px}

/* ---------- brand panels (used where no honest photograph exists) ---------- */
.panel{
  position:relative;overflow:hidden;background-color:var(--ink);color:#fff;
  border-radius:var(--r-card);padding:clamp(26px,3vw,40px);
  display:flex;flex-direction:column;justify-content:space-between;min-height:230px;
}
.panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-color:transparent;
  background-image:radial-gradient(120% 90% at 88% 108%,rgba(115,135,222,.20) 0%,rgba(115,135,222,0) 62%);
}
.panel__label{font-family:"Sora",sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--azure);position:relative}
.panel__name{font-family:"Playfair Display",Georgia,serif;font-size:clamp(24px,3vw,34px);font-weight:600;line-height:1.14;color:#fff;margin-top:14px;position:relative}
.panel p{color:var(--ink-muted);margin-top:12px;font-size:15.5px;position:relative}
.panel--mark{align-items:flex-start;justify-content:center}
/* A .panel is an INK surface. Every light-surface component dropped inside one takes the ink
   values - the inverse of the light-card-in-a-dark-band rule, and just as invisible. */
.panel .factrow li,.panel .ticklist li{color:var(--ink-muted)}
.panel .factrow svg,.panel .ticklist svg{color:var(--azure)}
.panel .mlist a{color:#fff;border-bottom-color:rgba(255,255,255,.18)}
.panel .mlist a:hover{color:var(--azure);background-color:rgba(255,255,255,.06)}
.panel .credgroup p{color:var(--ink-muted)}
.panel a{color:var(--azure)}

.panel__mark{width:96px;height:auto;position:relative}

/* Portraits. A square frame at one aspect for everybody, so a row of partners reads
   as one system and no photograph is stretched into a slot it cannot fill. */
.portrait{
  width:100%;max-width:320px;aspect-ratio:29/40;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-card);background-color:var(--mist-2);
}
.section--ink .portrait,.pagehead .portrait{border-color:rgba(255,255,255,.24);background-color:var(--ink-2)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;background-color:var(--mist-2);color:transparent;font-size:0}

.pfp{
  width:64px;height:64px;flex:none;border-radius:var(--r-card);overflow:hidden;
  background-color:var(--mist-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.pfp img{width:100%;height:100%;object-fit:cover;object-position:center 12%;background-color:var(--mist-2);color:transparent;font-size:0}
.pfp span{font-family:"Playfair Display",Georgia,serif;font-size:23px;font-weight:600;color:var(--accent);line-height:1}
.section--ink .pfp,.pagehead .pfp,.hero .pfp{border-color:rgba(255,255,255,.28);background-color:var(--ink-2)}
.section--ink .pfp span,.pagehead .pfp span{color:#fff}
.namerow{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.namerow .eyebrow{margin-bottom:0}
/* Two attorneys, two role labels of different lengths. Reserve the same two lines
   for both so the portraits, the names and the body copy sit on one line across
   the row at every width — otherwise the longer role wraps at the middle
   breakpoints and drags one card's photograph and name 14px below the other's. */
.card .namerow{align-items:flex-start}
.card .namerow .eyebrow{min-height:40px;display:flex;align-items:center}
.card .namerow .cardname{margin-top:2px}
/* Below this width the longer name wraps to two lines and the shorter one does
   not, which would offset the body copy by exactly one line. Reserve two lines
   for both only where it can actually happen, so no dead space is added above. */
@media (max-width:1000px){
  .card .namerow .cardname{min-height:48px}
}
.cardname{
  display:block;font-family:"Playfair Display",Georgia,serif;font-size:21px;font-weight:600;
  line-height:1.15;letter-spacing:-.012em;color:var(--text);margin-top:4px;
}
.section--ink .cardname{color:#fff}
@media (max-width:520px){
  .pfp{width:56px;height:56px}
  .pfp span{font-size:20px}
  .namerow{gap:13px}
  .portrait{max-width:100%}
}

.badge-row{display:flex;flex-wrap:wrap;gap:10px}
.badge{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:2px;
  background-color:var(--mist);border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--text);
}
.badge svg{width:15px;height:15px;color:var(--accent)}
.section--ink .badge{background-color:rgba(255,255,255,.08);border-color:var(--ink-line);color:#fff}
.section--ink .badge svg{color:var(--azure)}

/* ---------- CTA band ---------- */
.ctaband{
  background-color:var(--ink);
  background-image:linear-gradient(112deg,var(--ink-2) 0%,var(--ink) 58%,var(--ink-2) 100%);
  color:#fff;border-radius:var(--r-card);padding:clamp(28px,4vw,48px);
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(22px,3vw,40px);align-items:center;
}
@media (max-width:860px){.ctaband{grid-template-columns:minmax(0,1fr)}}
.ctaband h2{color:#fff;margin-bottom:12px}
.ctaband p{color:var(--ink-muted);margin-bottom:0}
.ctaband .btn-row{margin-top:4px}

/* ---------- footer ---------- */
.ftr{background-color:var(--ink);color:#fff;padding-top:clamp(44px,5vw,66px)}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,40px)}
@media (max-width:980px){.ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ftr__grid{grid-template-columns:minmax(0,1fr)}}
.ftr__mark{display:inline-flex;flex-direction:column;gap:6px;text-decoration:none;color:#fff;margin-bottom:16px;min-height:44px;justify-content:center}
.ftr__mark b{font-family:"Playfair Display",Georgia,serif;font-size:26px;font-weight:600;letter-spacing:-.01em;color:#fff}
.ftr__mark span{font-family:"Sora",sans-serif;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--azure)}
.ftr p,.ftr address{color:var(--ink-muted);font-style:normal;font-size:15px;line-height:1.7}
.ftr address strong{color:#fff;font-weight:700}
.ftr h3,.ftr h4{font-family:"Sora",sans-serif;font-size:14px;letter-spacing:.15em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.ftr__links{display:grid;gap:2px}
.ftr__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-muted);text-decoration:none;font-size:15px}
.ftr__links a:hover{color:var(--azure)}
.ftr__row{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:26px}
.ftr__tel{display:inline-flex;align-items:center;gap:9px;color:#fff;font-family:"Sora",sans-serif;font-weight:700;font-size:19px;text-decoration:none;margin-bottom:8px;min-height:44px}
.ftr__tel:hover{color:var(--azure)}
.ftr__mail{display:inline-flex;align-items:center;gap:9px;color:var(--ink-muted);text-decoration:none;font-size:15px;min-height:44px}
.ftr__mail:hover{color:var(--azure)}
.ftr__bar{
  margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--ink-line);
  padding-top:20px;padding-bottom:24px;display:flex;flex-wrap:wrap;gap:10px 22px;
  align-items:center;justify-content:space-between;font-size:13.5px;color:var(--ink-muted);
}
.ftr__disc{font-size:12.5px;color:var(--ink-muted);line-height:1.65;margin-top:18px;max-width:88ch}

/* ---------- sticky mobile bar ---------- */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background-color:rgba(8,13,31,.97);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--ink-line);
}
.stickybar .btn{flex:1;min-height:52px;font-size:13px;letter-spacing:.04em;padding:12px 8px}
@media (max-width:820px){.stickybar{display:flex}}

/* ---------- reveal ---------- */
html.js .reveal{opacity:0;transform:translateY(16px)}
html.js .reveal.is-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none}
  .chip .dot{animation:none}
  *{transition-duration:.01ms !important}
}

/* ---------- helpers ---------- */
.mt-0{margin-top:0}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}
.mb-0{margin-bottom:0}.mb-24{margin-bottom:24px}
.center{text-align:center}
.maxw-720{max-width:720px}
.sitemap-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:820px){.sitemap-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sitemap-cols{grid-template-columns:minmax(0,1fr)}}
.sitemap-cols h4{margin-bottom:10px}
.sitemap-cols a{display:inline-flex;align-items:center;min-height:44px;color:var(--text);text-decoration:none;font-size:15px}
.sitemap-cols a:hover{color:var(--accent)}
.section--ink .sitemap-cols a{color:var(--ink-muted)}
.section--ink .sitemap-cols a:hover{color:var(--azure)}
.postmeta{font-family:"Sora",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.section--ink .postmeta,.pagehead .postmeta{color:var(--azure)}
.aside{border-top:1px solid var(--line);padding-top:22px}
.aside h4{margin-bottom:12px}
.aside .ticklist li{font-size:15.5px}


/* ================= Hinson Law Offices additions ================= */

/* the wordmark: no logo file exists, so the name is SET in the display face beside the
   navy square emblem read off the firm's own office door. */
.brand__emblem{width:38px;height:38px;flex:none}
.brand__name{font-family:"Playfair Display",Georgia,serif;letter-spacing:.02em}
.mnav__mark .emblemrow{display:flex;align-items:center;gap:11px}

/* attorney portraits: square, centered on the face, hairline frame */
.pcard__media{margin:0;line-height:0;background-color:var(--mist-2);border-bottom:1px solid var(--line)}
.pcard__media img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 42%}
.pcard__media--mono{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background-color:var(--ink);
  background-image:linear-gradient(150deg,var(--ink-3),var(--ink) 72%)}
.pcard__media--mono span{font-family:"Playfair Display",Georgia,serif;font-size:clamp(46px,5.4vw,64px);
  font-weight:600;letter-spacing:.09em;color:#fff;line-height:1}

/* the biography page portrait column */
.bioportrait{margin:0;line-height:0;border:1px solid var(--line)}
.bioportrait img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 40%}
.biocol{display:grid;gap:20px;align-content:start}
.biocol .aside{border:1px solid var(--line);border-top:1px solid var(--line);padding:22px}
.biocol .aside .btn{width:100%}

/* recognition and published results, as hairline lists rather than cards */
.recog{list-style:none;margin:0;padding:0;display:grid}
.recog li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
.recog li:last-child{border-bottom:0}
.recog svg{width:19px;height:19px;color:var(--accent);margin-top:3px}
.recog b{display:block;font-family:"Sora",sans-serif;font-size:12px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.recog span span{font-size:16px;line-height:1.55}
.section--ink .recog li{border-bottom-color:var(--ink-line)}
.section--ink .recog svg{color:var(--azure)}
.section--ink .recog b{color:var(--azure)}

.results{list-style:none;margin:0;padding:0;columns:2;column-gap:44px}
.results li{break-inside:avoid;display:grid;grid-template-columns:3.4em minmax(0,1fr);gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.6}
.res__y{font-family:"Sora",sans-serif;font-weight:800;font-size:14px;color:var(--accent);padding-top:2px}
@media (max-width:820px){.results{columns:1}}
.opinions{list-style:none;margin:0;padding:0}
.opinions li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.6}
.opinions li:last-child{border-bottom:0}
.opinions i{font-style:italic}

/* a hairline figure for the few photographs the site carries */
.figframe{margin:0;line-height:0;border:1px solid var(--line);background-color:var(--mist)}
.figframe img{width:100%;height:100%;object-fit:cover;display:block}
.split--even{align-items:stretch}
.split--even>.figframe{height:100%}
.split--even>.figframe img{min-height:320px}
@media (max-width:900px){.split--even>.figframe img{min-height:240px}}

/* the closing contact band pairs copy with the lead card */
.bandcols{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,54px);align-items:start}
@media (max-width:980px){.bandcols{grid-template-columns:minmax(0,1fr)}}

/* the practice index carries an icon column on the hub page */
.pindex__row{align-items:center}
.factrow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 26px}
.factrow li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:#26314A}
.factrow svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:4px}
.section--ink .factrow li{color:var(--ink-muted)}
.section--ink .factrow svg{color:var(--azure)}
@media (max-width:560px){.factrow{grid-template-columns:minmax(0,1fr)}}

/* firm news, as a dated list */
.newslist{list-style:none;margin:0;padding:0}
.newslist li{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.newslist .when{font-family:"Sora",sans-serif;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding-top:4px}
.newslist b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:19px;font-weight:600;margin-bottom:4px}
.newslist p{font-size:15.5px;color:var(--muted);margin:0}
@media (max-width:620px){.newslist li{grid-template-columns:minmax(0,1fr);gap:6px}}

/* the utility spacings this build uses */
.mt-24{margin-top:24px}
.mb-24{margin-bottom:24px}
.steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.steps--4{grid-template-columns:minmax(0,1fr)}}
/* a link list on a light surface, same shape as the footer's */
.ftr__links--light a{color:var(--accent);border-bottom-color:var(--line)}
.ftr__links--light a:hover{color:var(--accent-dark)}
.skip{position:absolute;left:-9999px;top:0;z-index:200}
.skip:focus{left:0;padding:12px 18px;background:#fff;color:var(--accent);display:inline-block}

/* tap targets: every element a visitor is expected to press is 44px, including the
   utility-bar phone number and the breadcrumb links (v4.4). */
.topbar__tel{min-height:44px}
.crumbs a,.crumbs span[aria-current]{display:inline-flex;align-items:center;min-height:44px;margin:-11px 0}
/* the outer container owns the frame: a bordered figure inside a bordered card is two cards */
.card>.figframe{border:0;border-bottom:1px solid var(--line)}
.card>.figframe img{aspect-ratio:16/9}
/* the mobile panel's wordmark: emblem, then the name on its own line */
.mnav__mark{flex-direction:row;align-items:center;gap:11px}
.mnav__mark .emblemrow{display:flex;align-items:center;gap:11px;min-width:0}
.mnav__mark .emblemrow>span{display:flex;flex-direction:column;min-width:0}
.mnav__mark b{font-size:19px;white-space:nowrap;letter-spacing:.02em}
.mnav__mark span span{white-space:nowrap}
@media (max-width:380px){.mnav__mark b{font-size:17px}}

/* the attorney card: a small square portrait beside the name, the house pattern.
   A partner whose photograph has not been taken yet shows initials at the same size,
   which reads as a detail rather than as a hole in the row. */
.pfp{width:64px;height:64px;border-radius:2px;overflow:hidden;background-color:var(--mist-2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none}
.pfp img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.pfp>span{font-family:"Playfair Display",Georgia,serif;font-size:20px;font-weight:600;color:var(--accent);line-height:1;letter-spacing:.04em}
.namerow{display:flex;align-items:center;gap:16px;margin-bottom:4px}
.namerow .eyebrow{margin-bottom:2px;display:block}
.cardname{display:block;font-family:"Playfair Display",Georgia,serif;font-size:21px;font-weight:600;line-height:1.15;letter-spacing:-.012em;color:var(--text)}


/* ---- partner cards: the two founders, one photograph apiece --------------
   A square portrait beside the name, both cropped on the eyes at the same
   scale, so the pair reads as one picture rather than two snapshots. The
   third partner has no usable photograph, so she is an index row below
   instead of a card with a hole in it. */
.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.pcard{display:grid;grid-template-columns:164px minmax(0,1fr);gap:24px;align-items:start;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);padding:22px}
.pcard__shot{margin:0;line-height:0;border:1px solid var(--line);overflow:hidden;
  background-color:var(--mist-2)}
.pcard__shot img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 36%;
  color:transparent;font-size:0}
.pcard__body{display:flex;flex-direction:column;min-width:0;height:100%}
.pcard__body .cardname{margin:2px 0 0;font-size:23px}
.pcard__focus{font-family:"Sora",system-ui,sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.085em;text-transform:uppercase;color:var(--muted);margin:10px 0 12px}
.pcard__body p{margin:0 0 14px}
.pcard .card__link{margin-top:auto;padding-top:4px}
.section--ink .pcard{background:var(--ink-2);border-color:var(--ink-line)}
.section--ink .pcard__focus{color:var(--ink-muted)}
@media (max-width:1040px){.pcard{grid-template-columns:140px minmax(0,1fr);gap:20px}}
@media (max-width:900px){.pcards{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){
  .pcard{grid-template-columns:minmax(0,1fr);gap:18px}
  .pcard__shot{max-width:172px}
}

/* the role sits under the name in an index row */
.pindex__role{display:block;font-family:"Sora",system-ui,sans-serif;font-size:11.5px;
  font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.section--ink .pindex__role{color:var(--ink-muted)}
.mt-40{margin-top:40px}

/* the people index is a quieter version of the practice index: these are names,
   not headings, and they must not out-shout the two founder cards above */
.pindex--people .pindex__name{font-size:clamp(19px,2vw,22px);letter-spacing:-.008em}
.pindex--people .pindex__row{padding-block:22px}

/* ===== V4 design pass ===== */

@font-face{font-family:Oswald;src:url(../fonts/oswald-latin-300-normal.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Oswald;src:url(../fonts/oswald-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Oswald;src:url(../fonts/oswald-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:SourceSans;src:url(../fonts/source-sans-3-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:SourceSans;src:url(../fonts/source-sans-3-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:SourceSans;src:url(../fonts/source-sans-3-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --navy:#132648; --navy-2:#0D1B36; --navy-3:#1B3260;
  --red:#BB2C2E; --red-h:#9E2325; --red-lt:#E06A6C;
  --gold:#C9A96A; --gold-d:#9A7B36;
  --ink:#1B2740; --body:#414D65; --mute:#6B7589;
  --paper:#fff; --soft:#F5F4F2; --line:rgba(19,38,72,.13);
  --wrap:1340px; --gut:clamp(20px,3.2vw,40px);
  --hd:86px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);
  font:400 17.5px/1.68 SourceSans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,.dsp{font-family:Oswald,"Arial Narrow",sans-serif;font-weight:300;color:var(--ink);
  text-transform:uppercase;margin:0;line-height:1.08;letter-spacing:.012em}
p{margin:0 0 1.15em}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.eyebrow{font-family:Oswald,sans-serif;font-weight:400;font-size:13px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--red);margin:0 0 16px;display:block;line-height:1.5}
.kicker{font-family:Oswald,sans-serif;font-weight:400;font-size:clamp(13px,1.3vw,15px);
  letter-spacing:.13em;text-transform:uppercase;color:#55617A;line-height:1.62;margin:18px 0 30px;
  padding-left:18px;border-left:3px solid var(--red)}
.btn{display:inline-flex;align-items:center;gap:12px;font-family:Oswald,sans-serif;font-weight:500;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:15px 28px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,transform .18s}
.btn svg{width:16px;height:10px;flex:none;transition:transform .22s}
.btn:hover svg{transform:translateX(4px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-h)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.09)}
.btn-ink{border-color:var(--line);color:var(--ink)}
.btn-ink:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.sec{padding:clamp(64px,8vw,108px) 0}
.rule{height:1px;background:var(--line);border:0;margin:34px 0}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:60;height:var(--hd);display:flex;align-items:center;
  background:var(--navy-2);border-bottom:2px solid var(--gold);transition:box-shadow .28s,height .28s}
.hdr.solid{box-shadow:0 12px 34px rgba(0,0,0,.3)}
.hdr .wrap{display:flex;align-items:center;gap:clamp(16px,2.4vw,38px);width:100%}

.brand{flex:none;display:flex;align-items:center;gap:14px;text-decoration:none}
.brand .mark{width:auto;height:54px;flex:none;display:block}
.lock1{font-family:Oswald,sans-serif;font-weight:500;font-size:clamp(17px,1.6vw,21px);letter-spacing:.075em;
  text-transform:uppercase;color:#fff;line-height:1;display:block;white-space:nowrap}
.lock2{font-family:Oswald,sans-serif;font-weight:400;font-size:clamp(8.5px,.78vw,10px);letter-spacing:.36em;
  text-transform:uppercase;color:var(--gold);line-height:1;display:block;margin-top:7px;white-space:nowrap}

.nav{margin-inline:auto;display:flex;align-items:center;gap:clamp(12px,1.9vw,30px)}
.nav a.lnk{font-family:Oswald,sans-serif;font-weight:400;font-size:12.5px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.82);text-decoration:none;padding:10px 0;position:relative;white-space:nowrap}
.nav a.lnk::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--gold);transition:right .25s}
.nav a.lnk:hover{color:#fff}
.nav a.lnk:hover::after{right:0}

.hdr-end{flex:none;display:flex;align-items:center;gap:clamp(12px,1.6vw,22px)}
.tel{font-family:Oswald,sans-serif;font-weight:500;font-size:clamp(15px,1.5vw,19px);letter-spacing:.02em;
  color:#fff;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:9px}
.tel svg{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.6;flex:none}
.tel:hover{color:var(--gold)}

.burger{display:none;background:none;border:0;padding:10px;margin-left:auto;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:.25s}
.mob{position:fixed;inset:0;z-index:70;background:var(--navy-2);display:none;flex-direction:column;
  padding:26px var(--gut);overflow:auto}
.mob.open{display:flex}
.mob a{font-family:Oswald,sans-serif;font-weight:300;font-size:26px;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;text-decoration:none;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.mob .x{align-self:flex-end;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;padding:0 0 14px}

/* ---------- hero ---------- */
.hero{position:relative;background:linear-gradient(180deg,#16294e 0%,#0f2043 52%,#0b172d 100%);overflow:hidden;isolation:isolate;
  padding-top:calc(var(--hd) + clamp(44px,5vw,72px));padding-bottom:clamp(48px,5.4vw,78px)}
.hero::after{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(105% 80% at 14% 30%,rgba(38,68,124,.30),rgba(13,27,54,0) 66%)}
.hero .wrap{position:relative;z-index:2}
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(250px,36vw,500px));
  justify-content:start;column-gap:clamp(24px,3vw,48px);row-gap:0;align-items:start}


.chip{display:inline-block;font-family:Oswald,sans-serif;font-weight:400;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);line-height:1;
  padding-bottom:14px;border-bottom:1px solid rgba(201,169,106,.5);margin-bottom:26px}
.hero h1{color:#fff;font-size:clamp(34px,4.6vw,58px);line-height:1.04;max-width:20ch;
  letter-spacing:.002em;margin:0}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .sub{font-family:Oswald,sans-serif;font-weight:300;font-size:clamp(13px,1.35vw,15.5px);
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.74);margin:22px 0 0;max-width:58ch}
.hlede{font-size:18px;line-height:1.7;color:rgba(255,255,255,.82);margin:20px 0 0;max-width:66ch}
.hacts{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.stars{display:inline-flex;gap:3px;margin-right:4px}
.hproof .stars svg{width:15px;height:15px;fill:var(--gold);stroke:none;stroke-width:0}
.hacts .btn-ghost{color:#fff}
.hproof{display:flex;flex-wrap:wrap;gap:14px clamp(22px,3vw,44px);margin-top:clamp(22px,2.6vw,32px);
  padding-top:clamp(18px,2.2vw,26px);border-top:1px solid rgba(255,255,255,.16)}
.hproof div{display:flex;align-items:center;gap:10px;font-size:15.5px;color:rgba(255,255,255,.8)}
.hproof svg{width:18px;height:18px;flex:none;stroke:var(--gold);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

.hport{margin:0;position:relative;align-self:center}
.hport img{display:block;width:100%;height:auto;border:1px solid rgba(255,255,255,.16)}
.hport figcaption{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(11,23,45,0),rgba(11,23,45,.92) 64%);
  color:#fff;font-family:Oswald,sans-serif;font-weight:500;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;padding:46px 14px 15px;text-align:center}
/* ---------- intro ---------- */
/* wide two-column: prose fills the page, rail is tall enough not to orphan */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(34px,3.6vw,64px);align-items:start}
.rail{position:sticky;top:calc(var(--hd) + 26px)}
.railcard{background:var(--navy-2);color:#fff;border-radius:6px;border-top:3px solid var(--gold);
  padding:clamp(28px,2.6vw,38px);text-align:center;position:relative;overflow:hidden}
.railcard .rmark{width:auto;height:108px;margin:2px auto 20px;display:block}
.railcard .rn1{font-family:Oswald,sans-serif;font-weight:500;font-size:22px;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;line-height:1;display:block}
.railcard .rn2{font-family:Oswald,sans-serif;font-weight:400;font-size:10px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);line-height:1;display:block;margin-top:9px}
.railcard .grule{width:70px;height:1px;background:var(--gold);margin:24px auto}
.railcard p{color:rgba(255,255,255,.76);font-size:15.5px;line-height:1.6;margin:0 0 18px}
.railcard .tel{justify-content:center;font-size:27px;margin-bottom:22px}
.railcard .btn{width:100%;justify-content:center}
.railcard .cap{font-family:Oswald,sans-serif;font-weight:400;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.5);display:block;margin-bottom:10px}
.railseal{display:block;width:104px;margin:26px auto 0}
.railcard.lt{background:var(--soft);color:var(--body);border:1px solid var(--line);border-top:3px solid var(--gold);text-align:left}
.railcard.lt h3{font-size:24px;letter-spacing:.04em;line-height:1.16;margin-bottom:12px}
.railcard.lt p{color:var(--mute)}
.railcard.lt .rmark{height:78px;margin:0 0 20px}
.intro h2{font-size:clamp(30px,3.6vw,46px);line-height:1.06}
.intro .body{max-width:94ch;font-size:18px;line-height:1.8}
.intro .body p{margin-bottom:1.25em}

/* split promo band — both halves stretch, so the row ends level */
.promo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:stretch;
  border-radius:6px;overflow:hidden;box-shadow:0 20px 46px rgba(19,38,72,.13)}
.promo img{width:100%;height:100%;min-height:260px;object-fit:cover}
.promo .in{background:var(--navy-3);color:#fff;padding:clamp(32px,3.6vw,52px);
  display:flex;flex-direction:column;justify-content:center}
.promo h2{color:#fff;font-size:clamp(24px,2.8vw,34px);letter-spacing:.03em;line-height:1.14}
.promo p{color:rgba(255,255,255,.82);font-size:17px;line-height:1.65;margin:16px 0 28px;max-width:46ch}
.promo .btn{align-self:flex-start}

/* pathways strip — full width, no orphan column */
.pathway{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 40px;
  margin-top:clamp(36px,4vw,56px);padding:clamp(26px,3vw,38px) clamp(24px,3vw,40px);
  background:var(--soft);border:1px solid var(--line);border-top:3px solid var(--red);border-radius:4px}
.pathway h3{font-size:clamp(21px,2.2vw,26px);letter-spacing:.04em;line-height:1.16}
.pathway p{margin:10px 0 0;color:var(--mute);font-size:16.5px}
.pathway .btn{flex:none}
.callout{border-left:3px solid var(--red);padding:16px 0 16px 22px;margin:34px 0 0;background:linear-gradient(90deg,rgba(19,38,72,.035),rgba(19,38,72,0) 70%);
  font-weight:600;color:var(--ink);font-size:18px;line-height:1.6}
.callout a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(187,44,46,.35)}
.callout a:hover{border-color:var(--red)}
.sign{display:flex;flex-wrap:wrap;align-items:center;gap:22px 36px;margin-top:38px}
.sign .callout{flex:1 1 340px;margin:0}
.badge{flex:none;width:106px;height:auto}

/* ---------- differentiators ---------- */
.band{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.center{text-align:center}
.center .eyebrow{display:inline-flex;align-items:center;gap:16px}
.center .eyebrow::before,.center .eyebrow::after{content:"";width:clamp(28px,6vw,64px);height:1px;background:var(--gold)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:8px}
.card2{background:#fff;border:1px solid var(--line);border-radius:6px;padding:34px 28px 32px;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.card2:hover{border-color:rgba(19,38,72,.3);box-shadow:0 14px 34px rgba(19,38,72,.09);transform:translateY(-3px)}
.card2 svg{width:36px;height:36px;stroke:var(--red);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card2 h3{font-size:17px;letter-spacing:.1em;font-weight:400;margin:22px 0 12px;line-height:1.35}
.card2 p{font-size:15.5px;line-height:1.62;color:var(--mute);margin:0}

/* ---------- practice ---------- */
.prac{position:relative;background:var(--navy-2)}
.prac-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prac-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,23,45,.74) 0%,rgba(11,23,45,.82) 55%,rgba(11,23,45,.90) 100%)}
.prac-wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(280px,34vw,520px);
  opacity:.055;pointer-events:none;z-index:1}
.prac .wrap{position:relative;z-index:2;padding-block:clamp(56px,7vw,92px)}
.prac-head{background:var(--red);border-radius:6px;padding:clamp(30px,3.6vw,46px) clamp(26px,3.4vw,52px);
  display:flex;flex-wrap:wrap;align-items:center;gap:26px 40px;justify-content:space-between;
  margin-bottom:clamp(34px,4vw,54px);box-shadow:0 22px 50px rgba(0,0,0,.3)}
.prac-head h2{color:#fff;font-size:clamp(28px,3.4vw,42px);letter-spacing:.03em}
.prac-head .sub{font-family:Oswald,sans-serif;font-weight:300;font-size:clamp(13px,1.4vw,15.5px);
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.86);margin-top:14px;max-width:52ch;line-height:1.55}
.prac-head .btn{background:#fff;color:var(--ink);flex:none}
.prac-head .btn:hover{background:var(--navy-2);color:#fff}
.grid9{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.15);border-radius:6px;overflow:hidden}
.tile{background:rgba(11,23,45,.62);padding:30px 26px;display:flex;align-items:center;gap:18px;
  text-decoration:none;color:#fff;transition:background .2s}
.tile:hover{background:var(--red)}
.tile svg{width:26px;height:26px;flex:none;stroke:currentColor;stroke-width:1.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.tile span{font-family:Oswald,sans-serif;font-weight:300;font-size:16px;letter-spacing:.11em;text-transform:uppercase;line-height:1.3}

/* ---------- article ---------- */
.art h2{font-size:clamp(28px,3.4vw,42px);line-height:1.08}
.art h3{font-size:clamp(21px,2.3vw,27px);letter-spacing:.03em;margin:46px 0 18px;line-height:1.2}
.art .body{max-width:94ch;font-size:18px;line-height:1.8}
.art .body p{margin-bottom:1.3em}
.deflist{list-style:none;margin:22px 0 30px;padding:0}
.deflist li{position:relative;padding-left:26px;padding-bottom:16px;margin-bottom:16px;font-size:17.5px;line-height:1.75;border-bottom:1px solid rgba(19,38,72,.07)}
.deflist li:last-child{border-bottom:0}
.deflist li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--red);border-radius:1px}
.deflist b{color:var(--ink);font-weight:700}

/* ---------- contact ---------- */
.cta{position:relative;background:var(--navy-2)}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,21,42,.84) 0%,rgba(10,21,42,.90) 60%,rgba(10,21,42,.94) 100%)}
.cta-mark{width:auto;height:82px;margin:0 auto 26px;display:block}
.cta .wrap{position:relative;z-index:2;padding-block:clamp(60px,7.5vw,100px)}
.cta h2{color:#fff;font-size:clamp(30px,3.8vw,48px)}
.cta .sub{font-family:Oswald,sans-serif;font-weight:400;font-size:clamp(12.5px,1.3vw,14.5px);
  letter-spacing:.17em;text-transform:uppercase;color:var(--red-lt);margin:16px 0 0;line-height:1.6}
.cta .note{color:rgba(255,255,255,.76);margin:18px auto 0;max-width:58ch;font-size:17px}
.form{background:#fff;border-radius:6px;padding:clamp(28px,3.4vw,44px);max-width:840px;
  margin:clamp(34px,4vw,52px) auto 0;box-shadow:0 26px 60px rgba(0,0,0,.28)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld label,.leg{font-family:Oswald,sans-serif;font-weight:400;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink)}
.fld select{font:400 16.5px/1.5 SourceSans,sans-serif;color:var(--ink);border:1px solid var(--line);border-radius:3px;padding:13px 14px;background:#fff;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 19px) 52%,calc(100% - 13px) 52%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.fld select:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(19,38,72,.1)}
.fld input,.fld textarea{font:400 16.5px/1.5 SourceSans,sans-serif;color:var(--ink);
  border:1px solid var(--line);border-radius:3px;padding:13px 14px;background:#fff;transition:border-color .18s,box-shadow .18s}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 3px rgba(19,38,72,.1)}
.fld textarea{min-height:128px;resize:vertical}
.full{grid-column:1/-1}
.radios{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.radios label{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;
  padding:10px 17px;font:400 15px/1 SourceSans,sans-serif;letter-spacing:0;text-transform:none;color:var(--body);
  cursor:pointer;transition:border-color .18s,background .18s}
.radios label:hover{border-color:rgba(19,38,72,.35)}
.radios input{accent-color:var(--red);margin:0}
.chk{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font-size:15.5px;color:var(--body);cursor:pointer}
.chk input{accent-color:var(--red);width:17px;height:17px;margin:0}
.fine{font-size:13px;line-height:1.6;color:var(--mute);margin:16px 0 0}
.fine a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.form .btn{margin-top:24px;width:100%;justify-content:center;padding:17px 28px;font-size:13.5px}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 0}
.fgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:36px}
.fgrid .fbrand{display:flex;align-items:center;gap:13px}
.fgrid .fbrand .mark{width:auto;height:62px;flex:none;display:block}
.fgrid img{width:186px}
.fh{font-family:Oswald,sans-serif;font-weight:500;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);margin:0 0 14px}
.fgrid .tel{color:var(--ink);font-size:24px}
.fgrid .tel:hover{color:var(--red)}
.fgrid address{font-style:normal;font-size:16.5px;line-height:1.7;color:var(--body)}
.fgrid address a{color:var(--mute);text-decoration:none;border-bottom:1px solid var(--line)}
.flinks{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;list-style:none;margin:0;padding:0}
.flinks a{font-size:16px;color:var(--body);text-decoration:none}
.flinks a:hover{color:var(--red)}
.legal{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line);padding:26px 0 30px;background:var(--soft)}
.legal .wrap{display:flex;flex-wrap:wrap;gap:14px 40px;justify-content:space-between;align-items:flex-start}
.legal p{font-size:13px;line-height:1.65;color:var(--mute);margin:0;max-width:72ch}
.legal .mini{display:flex;gap:22px;font-size:13px}
.legal .mini a{color:var(--mute);text-decoration:none;border-bottom:1px solid var(--line)}

/* ---------- sticky bits ---------- */
.top{position:fixed;right:0;bottom:96px;z-index:55;background:var(--red);color:#fff;text-decoration:none;
  font-family:Oswald,sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:13px 16px;border-radius:4px 0 0 4px;opacity:0;pointer-events:none;transition:opacity .25s}
.top.on{opacity:1;pointer-events:auto}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:58;display:none;grid-template-columns:1fr 1fr;
  background:var(--navy-2);border-top:1px solid rgba(255,255,255,.12)}
.bar a{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 8px;color:#fff;
  text-decoration:none;font-family:Oswald,sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.bar a+a{border-left:1px solid rgba(255,255,255,.12)}
.bar svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}

@media(max-width:980px){
  .hgrid{grid-template-columns:1fr;align-items:start}
  .hport{max-width:300px;margin:10px auto 0}
}
@media(max-width:1100px){
  .split{grid-template-columns:1fr}
  .rail{position:static;max-width:460px;margin-inline:auto}
}
@media(max-width:1040px){
  .qgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qgrid .span2{grid-column:span 2}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promo{grid-template-columns:1fr}
  .promo img{min-height:230px}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .hdr-end{display:none}
  .bar{display:grid}
  .legal{padding-bottom:96px}
  .top{bottom:86px}
  .nav{display:none}
  .burger{display:block}
  .grid9{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prac-head{flex-direction:column;align-items:flex-start}
}
@media(max-width:620px){
  body{font-size:16.5px}
  .qgrid{grid-template-columns:1fr}
  .qgrid .span2{grid-column:span 1}
  .brand .mark{height:44px}
  .lock1{font-size:17px}
  .grid9{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .f2{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .hero-img{object-position:24% 50%}
  .hero-scrim{background:linear-gradient(180deg,rgba(9,20,40,.88) 0%,rgba(9,20,40,.70) 38%,rgba(9,20,40,.92) 100%)}
  .legal .wrap{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}




/* ==================================================================
   V4 HOUSE OVERRIDE — Oswald / Source Sans, navy + red, gold identity
   Applied on top of the v2 sheet so all 71 pages inherit it.
   ================================================================== */
@font-face{font-family:Oswald;src:url(../fonts/oswald-latin-300-normal.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Oswald;src:url(../fonts/oswald-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Oswald;src:url(../fonts/oswald-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:SourceSans;src:url(../fonts/source-sans-3-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:SourceSans;src:url(../fonts/source-sans-3-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:SourceSans;src:url(../fonts/source-sans-3-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --ink:#0D1B36; --ink-2:#132648; --ink-3:#1B3260;
  --accent:#BB2C2E; --accent-dark:#9E2325; --primary:#BB2C2E;
  --gold:#C9A96A; --gold-ink:#C9A96A; --gold-mark:#9A7B36;
  --paper:#fff; --mist:#F5F4F2; --mist-2:#EDEBE7;
  --line:rgba(19,38,72,.13); --line-2:rgba(19,38,72,.22);
  --muted:#6B7589; --ink-muted:rgba(255,255,255,.62);
  --text:#1B2740;
  --r-card:6px; --r-btn:999px; --r-pill:999px;
  --container:1340px; --gutter:clamp(20px,3.2vw,40px); --hdr:86px;
}

body{font-family:SourceSans,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17.5px;line-height:1.68;color:#414D65}
h1,h2,h3,h4,h5{font-family:Oswald,"Arial Narrow",sans-serif;font-weight:300;
  text-transform:uppercase;letter-spacing:.012em;line-height:1.08;color:var(--text)}
h1{font-size:clamp(32px,4.2vw,54px)}
h2{font-size:clamp(26px,3.1vw,40px)}
h3{font-size:clamp(20px,2.1vw,26px);font-weight:400;letter-spacing:.03em}
h4{font-size:17px;font-weight:400;letter-spacing:.1em}

/* ---- buttons: pills, Oswald caps ---- */
.btn{font-family:Oswald,sans-serif;font-weight:500;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;border-radius:999px;padding:15px 28px;border:1.5px solid transparent}
.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn--ghost{border-color:rgba(255,255,255,.45);color:#fff;background:none}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.09)}
.section:not(.section--ink):not(.ctaband) .btn--ghost{border-color:var(--line);color:var(--text)}
.section:not(.section--ink):not(.ctaband) .btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---- header ---- */
.hdr{position:sticky;top:0;inset:auto;background:var(--ink);border-bottom:2px solid var(--gold);height:auto;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr.is-stuck{box-shadow:0 12px 34px rgba(0,0,0,.3)}
.brand__emblem{width:auto;height:46px;flex:none}
.brand__name{font-family:Oswald,sans-serif;font-weight:500;font-size:clamp(17px,1.6vw,21px);
  letter-spacing:.075em;text-transform:uppercase;color:#fff}
.brand__sub{font-family:Oswald,sans-serif;font-weight:400;font-size:9.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold)}
.nav a,.mnav__links a{font-family:Oswald,sans-serif;font-weight:400;font-size:12.5px;
  letter-spacing:.15em;text-transform:uppercase}
.topbar{background:#0A1529}
.topbar,.topbar a{font-family:SourceSans,sans-serif;font-size:14px}
.topbar__tel{font-family:Oswald,sans-serif;font-weight:500;letter-spacing:.02em;font-size:18px}

/* ---- chips / eyebrows ---- */
.chip{display:inline-block;font-family:Oswald,sans-serif;font-weight:400;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);background:none;border:0;
  border-bottom:1px solid rgba(201,169,106,.5);border-radius:0;padding:0 0 14px;margin-bottom:26px}
.eyebrow{font-family:Oswald,sans-serif;font-weight:400;font-size:12.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent)}
.section--ink .eyebrow,.ctaband .eyebrow,.pagehead .eyebrow{color:var(--gold)}

/* ---- page head band ---- */
.pagehead{background:linear-gradient(180deg,#16294e 0%,#0f2043 55%,#0b172d 100%);
  padding-top:calc(var(--hdr) + clamp(40px,4.6vw,64px));padding-bottom:clamp(40px,4.6vw,64px)}
.pagehead h1{color:#fff;font-size:clamp(32px,4.2vw,54px)}
.pagehead p{color:rgba(255,255,255,.8);font-size:18px;line-height:1.7;max-width:70ch}
.crumbs,.crumbs a{font-family:SourceSans,sans-serif;font-size:14px;color:rgba(255,255,255,.6)}
.crumbs a:hover{color:var(--gold)}

/* ---- prose ---- */
.prose{font-size:18px;line-height:1.8;color:#414D65}
.prose h2{margin-top:1.5em}
.prose h3{margin-top:1.4em}
.prose a{color:var(--accent)}
.prose ul li::marker,.prose ol li::marker{color:var(--accent)}

/* ---- cards, panels, index ---- */
.card,.panel,.leadcard,.figframe{border-radius:var(--r-card)}
.card{border:1px solid var(--line)}
.card:hover{border-color:rgba(19,38,72,.3);box-shadow:0 14px 34px rgba(19,38,72,.09)}
.pindex__name{font-family:Oswald,sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.05em}
.pindex__go{color:var(--accent)}
.sec-head h2{letter-spacing:.02em}
.ctaband{background:linear-gradient(180deg,#16294e,#0b172d)}
.leadcard{border-top:4px solid var(--gold)}
.field label{font-family:Oswald,sans-serif;font-weight:400;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text)}
.field input,.field select,.field textarea{font-family:SourceSans,sans-serif;font-size:16.5px;border-radius:3px}

/* ---- footer ---- */
.ftr__tel{font-family:Oswald,sans-serif;font-weight:500;letter-spacing:.02em}
.ftr .panel__label{font-family:Oswald,sans-serif;letter-spacing:.18em;color:var(--gold)}
.ftr h3,.ftr h4{font-family:Oswald,sans-serif;font-weight:500;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:#fff}
.ftr__mark .brand__emblem{height:44px}

/* ---- fixups: this shell has a STICKY (not fixed) header ---- */
:root{--hd:0px}
.hero{padding-top:clamp(46px,5vw,76px)!important;padding-bottom:clamp(46px,5vw,76px)!important}
.pagehead{padding-top:0;padding-bottom:0}
.pagehead__in{padding-top:clamp(44px,5vw,72px);padding-bottom:clamp(44px,5vw,72px)}
.nav a{color:rgba(255,255,255,.82);border-radius:0}
.nav a:hover{background:none;color:var(--gold)}
.nav a[aria-current="page"]{color:var(--gold)}
.burger span,.hdr .burger span{background:#fff}
.hdr__cta .btn{font-size:12.5px}
.hproof{border-top-color:rgba(255,255,255,.16)}
.prose,.prose p,.prose li,.prose td{color:#3C4658}
.prose strong,.prose b{color:var(--text)}
.burger{color:#fff;border-color:rgba(255,255,255,.34);background:transparent}
.burger svg{stroke:#fff}
.mnav,.mnav__links a{color:#fff}
.btn.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff;background:none}
.btn.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.09)}
.btn.btn-ink{border-color:var(--line);color:var(--text)}
.btn.btn-red{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---- footer / mobile-nav lockup: the column flex was squashing the shield ---- */
.ftr__mark,.mnav__mark{flex-direction:row!important;align-items:center;gap:13px;min-height:0}
.ftr__mark img.brand__emblem,.mnav__mark img.brand__emblem{width:auto!important;height:46px;flex:none;align-self:center;max-width:none}
.ftr__mark .brand__txt,.mnav__mark .brand__txt{display:flex;flex-direction:column;gap:7px}
.ftr__mark .brand__name,.mnav__mark .brand__name{font-family:Oswald,sans-serif;font-weight:500;font-size:19px;
  letter-spacing:.075em;text-transform:uppercase;color:#fff}
.ftr__mark .brand__sub,.mnav__mark .brand__sub{font-family:Oswald,sans-serif;font-weight:400;font-size:9px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}

/* ---- measured blocks: centre them so the page is not left-weighted ---- */
.maxw-720{max-width:940px;margin-inline:auto}
/* ...except the home intro, where the block holds only the button row: centring
   it detached the buttons from the heading and paragraph above. Stays as it was. */
body.home .prose.maxw-720{max-width:720px;margin-inline:0}
.container--narrow{margin-inline:auto}

/* ---- leftover V2 typefaces: components the class-level rules did not reach ---- */
.cardname,.card__title,h2.cardname,h3.cardname,.pindex__name,.postcard h3,.post h2,.post h3{
  font-family:Oswald,"Arial Narrow",sans-serif;font-weight:400;letter-spacing:.03em}
.panel__label,.pindex__role,.card__link,.postmeta,.tag,.meta{
  font-family:Oswald,sans-serif;font-weight:400;letter-spacing:.16em;text-transform:uppercase}
.panel__label,.pindex__role{font-size:11.5px;color:var(--gold)}
.card__link{font-size:12px}
.panel__name,.panel p,.panel li,.panel dd,.postmeta{font-family:SourceSans,sans-serif;letter-spacing:0;text-transform:none}
.postmeta{font-family:Oswald,sans-serif;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---- links on ink surfaces: V2's azure is unreadable on the V4 navy ---- */
.panel a,.ctaband a:not(.btn){color:var(--gold)}
.ftr a:not(.btn):not(.ftr__mark){color:rgba(255,255,255,.72);text-decoration:none}
.ftr a:not(.btn):not(.ftr__mark):hover{color:var(--gold)}
.ftr__tel,.ftr a[href^="tel:"]{color:#fff!important;font-family:Oswald,sans-serif;font-weight:500;
  font-size:22px;letter-spacing:.02em;text-decoration:none;border-bottom:0}
.panel a{text-decoration:none;border-bottom:1px solid rgba(201,169,106,.4);padding-bottom:1px}
.panel a:hover{border-bottom-color:var(--gold)}
.panel .ftr__tel,.panel a[href^="tel:"]{font-family:Oswald,sans-serif;font-weight:500;
  font-size:26px;letter-spacing:.02em;border-bottom:0}

/* ---- card and post titles: a heading is not an underlined body link ---- */
.card h2 a,.card h3 a,.postcard h2 a,.postcard h3 a,.cardname a,
h2.cardname a,h3.cardname a,.pindex__item a .pindex__name{
  text-decoration:none;color:var(--ink)}
.card h2 a:hover,.card h3 a:hover,.postcard h2 a:hover,.postcard h3 a:hover,.cardname a:hover{
  color:var(--accent)}

/* ================= the brand rail ================= */
/* Clifton's V4 identity card, back on every page where a tall copy column
   would otherwise sit beside dead page. Sticky, so it travels a long article
   instead of orphaning halfway down. */
.railgrid{display:grid;grid-template-columns:minmax(0,1fr) 400px;
  gap:clamp(30px,3.4vw,58px);align-items:start}
.railgrid__main{min-width:0}
.railgrid__main>.prose,.railgrid__main>.prose.maxw-720,
body.home .railgrid__main>.prose.maxw-720{max-width:none;margin-inline:0}
.brandrail{position:sticky;top:106px}
.split>aside.aside{align-self:stretch}
.aside .brandcard{position:sticky;top:106px;margin-top:26px}

.brandcard{background:#0F2444;border-top:2px solid var(--gold);
  padding:36px 32px 30px;text-align:center;display:flex;flex-direction:column;align-items:center}
.brandcard__shield{width:auto;height:112px;max-width:none;flex:none;margin-bottom:20px}
.brandcard__name{font-family:Oswald,sans-serif;font-weight:500;font-size:29px;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;line-height:1}
.brandcard__sub{font-family:Oswald,sans-serif;font-weight:400;font-size:11px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);margin-top:9px}
.brandcard__rule{display:block;width:76px;height:1px;background:var(--gold);opacity:.62;margin:22px 0}
.brandcard__cap{font-family:Oswald,sans-serif;font-weight:400;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}
.brandcard__tel{display:inline-flex;align-items:center;gap:10px;margin-top:9px;
  font-family:Oswald,sans-serif;font-weight:500;font-size:28px;letter-spacing:.01em;
  color:#fff!important;text-decoration:none;border-bottom:0}
.brandcard__tel svg{width:19px;height:19px;color:var(--gold);flex:none}
.brandcard__cta{margin-top:22px;width:100%;justify-content:center}
.brandcard__cta svg{width:20px;height:11px;flex:none}
.brandcard__seal{width:98px;height:auto;max-width:none;flex:none;margin-top:26px;opacity:.96}

@media(max-width:1040px){
  .railgrid{grid-template-columns:1fr}
  .brandrail{position:static;margin-top:36px}
  .brandcard{max-width:420px;margin-inline:auto;width:100%}
  .aside .brandcard{position:static}
}
/* The card exists to fill a rail. On a phone there is no rail, the shield is
   already in the header and footer, and the sticky call bar carries the CTA -
   so it would only add half a screen of scroll to every page. */
@media(max-width:860px){.brandrail,.aside .brandcard{display:none}}

/* ================= page-head second column ================= */
/* The band ran copy down the left third and left the right half of a 1260
   container empty on 117 pages. The facts are the approved hero's own. */
.headgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;
  gap:clamp(30px,4vw,70px);align-items:center}
.headgrid__main{min-width:0}
.headfacts{position:relative;padding:30px 30px 28px;border:1px solid rgba(201,169,106,.34);
  border-top:2px solid var(--gold);background:rgba(255,255,255,.035);
  display:flex;flex-direction:column;align-items:flex-start}
.headfacts__shield{position:absolute;right:-14px;bottom:-10px;width:auto;height:150px;max-width:none;
  opacity:.09;pointer-events:none}
.headfacts__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px;width:100%}
.headfacts__list li{display:flex;align-items:center;gap:12px;margin:0;padding:0;
  font-family:SourceSans,sans-serif;font-size:15.5px;color:rgba(255,255,255,.88)}
.headfacts__list li::marker{content:''}
.headfacts__list svg{width:19px;height:19px;color:var(--gold);flex:none}
.headfacts__rating{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:18px;
  width:100%;border-top:1px solid rgba(255,255,255,.16);
  font-family:SourceSans,sans-serif;font-size:15px;color:rgba(255,255,255,.88)}
.headfacts__stars{display:inline-flex;gap:2px}
.headfacts__stars svg{width:15px;height:15px;fill:var(--gold);stroke:none}
.headfacts__tel{margin-top:16px;font-family:Oswald,sans-serif;font-weight:500;font-size:26px;
  letter-spacing:.01em;color:#fff!important;text-decoration:none;border-bottom:0}
@media(max-width:980px){
  .headgrid{grid-template-columns:1fr;gap:30px}
  .headfacts{max-width:420px}
}
@media(max-width:700px){.headfacts{display:none}}

/* the home intro is short, so it gets the lockup without the seal */
.railgrid--intro{align-items:center}
.brandcard--compact{padding:30px 30px 28px}
.brandcard--compact .brandcard__shield{height:88px;margin-bottom:16px}
.brandcard--compact .brandcard__name{font-size:26px}
.brandcard--compact .brandcard__rule{margin:18px 0}

/* ---- section heads: the box was capped at 760 so its top hairline stopped
        two-thirds across and left a visible gap. Full-width box, capped text. */
.sec-head{max-width:none}
.sec-head>*{max-width:760px}
.sec-head--center>*{margin-inline:auto}

/* ---- a one-card grid was leaving 680px beside it on the blog archives ---- */
/* a lone card on the last row left 680px of empty beside it on the archives */
.grid>.card:only-child{max-width:none}
.grid:has(>.card:only-child),.grid.grid-2:has(>.card:only-child),
.grid.grid-3:has(>.card:only-child),.grid.grid-4:has(>.card:only-child){grid-template-columns:1fr}
.grid.grid-2>.card:last-child:nth-child(odd){grid-column:1/-1}

/* ---- the practice index as a rail component (home, second block) ---- */
.ppanel{background:#0F2444;border-top:2px solid var(--gold);padding:30px 30px 26px}
.ppanel__label{display:block;font-family:Oswald,sans-serif;font-weight:400;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.ppanel .linklist{list-style:none;margin:0;padding:0}
.ppanel .linklist li{margin:0;padding:0}
.ppanel .linklist li+li{border-top:1px solid rgba(255,255,255,.12)}
.ppanel .linklist a{display:block;padding:12px 0;font-family:SourceSans,sans-serif;font-size:15.5px;
  color:rgba(255,255,255,.86)!important;text-decoration:none;border-bottom:0}
.ppanel .linklist a:hover{color:var(--gold)!important}

/* ---- CTA band: V2 styles .ctaband as a 2-column grid (1.25fr .75fr) but the
        markup gives it a single .container child, so the whole band rendered
        in the first column with the second column empty - the copy sat hard
        left with ~440px of dead band beside it on all 71 pages. ---- */
.ctaband{display:block}
.ctaband>.container{max-width:none;margin-inline:auto;padding-inline:0}
.ctaband .sec-head{max-width:820px;margin-inline:auto;border-top:0;padding-top:0}
.ctaband .sec-head>*{max-width:none}

/* ---- panel labels sat flush on the first list row (0px gap at 414, 5px at
        1440) - the tracked caps need to read as a label, not as a list item ---- */
.panel__label{display:block;margin-bottom:14px}
.panel .factrow,.panel .ticklist,.panel .linklist,.panel__label+ul,.panel__label+.factrow{margin-top:0}
.panel .credgroup{margin-top:22px}
.panel .credgroup .panel__label{margin-bottom:8px}

/* ---- a heading stacked straight onto the next one, and the site-map column
        headings sitting on their lists, both rendered with a 0px gap ---- */
.prose h2+h3,.prose h3+h4,main h2+h3{margin-top:12px}
.cardname+ul,.cardname+.linklist,h2+ul,h3+ul{margin-top:12px}

/* ---- the agency credit is a link, like it is on tracygalloway.com ---- */
.f-credit{color:rgba(255,255,255,.72)!important;text-decoration:none;border-bottom:1px solid rgba(201,169,106,.4)}
.f-credit:hover{color:var(--gold)!important;border-bottom-color:var(--gold)}

/* ---- the lead form travels the article instead of a stack of filler under it ---- */
.split>aside.aside .leadcard{position:sticky;top:106px}
@media(max-width:1040px){.split>aside.aside .leadcard{position:static}}

/* ---- practice list as a full-width band, out of the rail ---- */
.section--links{padding-top:0}
.linkband ul,.linkband .linklist{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.4vw,38px)}
.linkband li{margin:0;padding:0;border-top:1px solid var(--line)}
.linkband a{display:block;padding:13px 0;font-family:SourceSans,sans-serif;font-size:15.5px;
  color:var(--ink)!important;text-decoration:none;border-bottom:0}
.linkband a:hover{color:var(--accent)!important}
@media(max-width:900px){.linkband ul,.linkband .linklist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.linkband ul,.linkband .linklist{grid-template-columns:1fr}}

/* ---- the attorney row on /about/ -------------------------------------------
   Two defects: the name and the role ran together ("Herbert HinsonAttorney and
   owner") because the markup is a bare <b> plus a bare <span> and nothing in the
   sheet stacked them; and the portrait was a 64px avatar. The small-avatar rule
   exists to hide the mismatch across a ROW of partner photographs — there is one
   attorney here, on his own page, from a 450px source, so it runs at real size. */
.namerow{align-items:center;gap:clamp(18px,2vw,26px);margin-bottom:18px}
.namerow>span:not(.pfp){display:flex;flex-direction:column;gap:6px;min-width:0}
.namerow>span:not(.pfp)>b{font-family:Oswald,sans-serif;font-weight:500;
  font-size:clamp(21px,2.1vw,26px);line-height:1.12;letter-spacing:.045em;
  text-transform:uppercase;color:var(--ink)}
.namerow>span:not(.pfp)>span{font-family:Oswald,sans-serif;font-weight:400;font-size:11.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.namerow .pfp{width:clamp(112px,11vw,150px);height:clamp(112px,11vw,150px);
  flex:none;border:1px solid rgba(13,27,54,.16);border-radius:2px}
.namerow .pfp img{object-position:50% 22%}
@media(max-width:560px){
  .namerow{align-items:flex-start}
  .namerow .pfp{width:104px;height:104px}
}

/* ---- contrast: gold is an INK-SURFACE colour -------------------------------
   #C9A96A measures 7.63:1 on the navy and 2.04:1 on the mist, so the tracked
   caps that sit on light surfaces cannot be gold. They take the red the
   eyebrows already use on light (5.44:1 on mist, 5.98:1 on white). */
.pindex__role,.namerow>span:not(.pfp)>span{color:var(--accent)}
.section--ink .pindex__role,.panel .pindex__role,.ftr .pindex__role,
.ppanel .pindex__role,.brandcard .pindex__role{color:var(--gold)}
/* body text in the practice index measured 4.22:1 on the tinted band */
.pindex__desc{color:#636B80}
.section--ink .pindex__desc,.panel .pindex__desc{color:var(--ink-muted)}
/* a 17px link inside the consent note is under the 32px tap target on a phone */
@media(max-width:600px){.note a,.form-note a{display:inline-block;padding:9px 0}}

/* ---- footer bottom bar ----------------------------------------------------
   Both lines were capped at 656px and left-aligned in a 1260px bar, leaving
   ~600px of empty footer beside them. The disclaimer is long legal text, so it
   goes in two columns rather than running a 170-character measure; the line
   below it splits legal left / agency credit right. */
/* Two columns was worse: at two lines per column the sentence breaks across the
   gap ("...attorney-client | relationship...") and the eye reads across, not
   down, so it looks like one broken line. One centred measure instead, with the
   full-width legal bar under it doing the work of filling the bar. */
.ftr__bar .ftr__disc:not(.ftr__legal){max-width:980px;margin-inline:auto;text-align:center}
/* eight centred ragged lines on a phone reads worse than left-aligned */
@media(max-width:700px){.ftr__bar .ftr__disc:not(.ftr__legal){text-align:left}}

/* legal left, agency credit right */
.ftr__bar .ftr__legal{max-width:none;display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:8px clamp(24px,3vw,48px);width:100%}
.ftr__bar .ftr__rights,.ftr__bar .ftr__built{display:inline-block}
@media(max-width:760px){
  .ftr__bar .ftr__legal{display:block}
  .ftr__bar .ftr__built{display:block;margin-top:10px}
}

/* ---- language toggle: in the utility bar, not the header ---- */
.topbar .container{display:flex;align-items:center;gap:16px}
.topbar .container .topbar__list{margin-right:auto}
.langtog{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:26px;
  padding:0 10px;border:1px solid rgba(201,169,106,.5);border-radius:2px;
  font-family:Oswald,sans-serif;font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)!important;text-decoration:none;background:none;flex:none}
.langtog:hover{background:rgba(201,169,106,.16);color:#fff!important}
.langtog--bar{margin-left:0}
.mnav__foot .langtog{width:100%;margin:0 0 12px;height:44px;font-size:12.5px}

/* ---- header nav fit -------------------------------------------------------
   Measured: the EN nav needs a 1194px container and the ES nav 1376px, against
   a 1260px container at 1440 — so the last nav item ran under the Contact pill
   on Spanish at every desktop width, and on BOTH languages between 980 and
   1100 (a defect that predates the mirror). Tighten the nav below 1500, and
   hand over to the burger at 1180 instead of 900. */
@media(max-width:1500px){
  .nav{gap:clamp(10px,1.4vw,20px)}
  .nav a{font-size:11.5px;letter-spacing:.085em;padding-inline:4px}
}
@media(max-width:1180px){
  .nav{display:none}
  .burger{display:block}
  .hdr-end{display:none}
}

/* ---------- home hero photograph (option 03, empty courtroom) ----------
   The scrim is NOT a uniform wash. The copy column ends at 48% of the hero
   and the lead form starts at 59% (both measured), so the ramp stays dark
   only where the words are and falls away under the form - a flat ~.9 wash
   makes the photograph invisible and you have paid the bytes for nothing.
   The photo is already navy-toned, which is why it needs so little. */
body.home .hero__ph,body.home .hero__sc{position:absolute;inset:0}
body.home .hero__ph{z-index:0;background:url(../img/hero-bg.webp) 50% 46%/cover no-repeat}
body.home .hero__sc{z-index:1;background:linear-gradient(96deg,
  rgba(9,20,40,.92) 0%,rgba(9,20,40,.83) 38%,rgba(9,20,40,.44) 64%,rgba(9,20,40,.20) 100%)}
body.home .hero::after{z-index:2;opacity:.34}
body.home .hero .wrap{z-index:3}
/* phone: the form stacks UNDER the copy, so the ramp has to run vertically */
@media(max-width:860px){
  body.home .hero__sc{background:linear-gradient(180deg,
    rgba(9,20,40,.90) 0%,rgba(9,20,40,.84) 44%,rgba(9,20,40,.93) 100%)}
}

/* THE HERO PILLS ARE A DESKTOP-ONLY COMPONENT.
   Side by side (>980px) the copy column is 642px against a 515px form, so the
   row costs 91px of space that would be empty anyway, and it gives the home
   page eight internal links to the practice pages.
   Stacked (<=980px) that space is not free - the row sits between the two CTAs
   and the form and pushes the send button down a phone screen. The page still
   links to those pages 10 more times in a visible band below plus 17 in the
   footer, so nothing is lost. display:none keeps the links in the HTML.
   980px IS THE SAME BREAKPOINT AS .hgrid's stack - keep them in step. */
@media(max-width:980px){
  .hero .pillrow{display:none}
}

/* ---------- client reviews ----------
   NO BOXES. Two box treatments were rejected — white cards with a gold slab read
   as a template widget, navy panels read as a blue block. The house already
   answers this for practice areas ("a typographic index... never icon cards"),
   and the same principle is what makes a review section look like a law firm
   rather than a plugin: type, whitespace and hairlines, nothing else.
   It also ends the box-height argument permanently — there is no box edge to
   compare, so quotes of different length read as ordinary ragged text, while
   the NAMES still align because the byline is pushed down in an equal-height
   grid cell. Alignment without a visible container. */

/* gold is 2.24:1 on white — below the 3:1 a non-text mark needs — so the star
   row takes a deeper gold on light surfaces. Gold proper stays for ink. */
:root{--gold-lt:#A67F33}

.ratebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;
  margin:0 auto 54px;font-family:SourceSans,system-ui,sans-serif;font-size:15.5px;color:#636B80}
.ratebar .stars{display:inline-flex;gap:4px}
.ratebar .stars svg{width:18px;height:18px;fill:var(--gold-lt);stroke:none}
.ratebar b{font-family:Oswald,sans-serif;font-weight:500;font-size:21px;letter-spacing:.04em;
  color:var(--ink)}

/* one row of three, no scroller - he preferred this to the swipe version */
.revgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 clamp(30px,3.6vw,56px);align-items:stretch}
.rev{margin:0;height:100%;display:flex;flex-direction:column;background:none;border:0;padding:0}
/* one hairline between COLUMNS, not a frame around each.
   MUST exclude the list: the /reviews/ page markup is `class="revgrid revgrid--all"`,
   so this rule also matched every entry there and gave five of the six a 53px
   left indent plus a stray vertical rule — leaving the FIRST review sticking out
   on its own, which is exactly what he spotted. A modifier that changes the
   layout mode has to be excluded from the base layout's own rules. */
.revgrid:not(.revgrid--all)>.rev + .rev{border-left:1px solid var(--line);
  padding-left:clamp(30px,3.6vw,56px)}
.rev__stars{display:inline-flex;gap:4px;margin-bottom:20px}
.rev__stars svg{width:15px;height:15px;fill:var(--gold-lt);stroke:none}
.rev__q{margin:0 0 26px;font-size:17px;line-height:1.72;color:var(--body)}
.rev__q::before{content:"\201C"}
.rev__q::after{content:"\201D"}
/* margin-top:auto lines the names up across the row; with no box edge the space
   above them is simply page, not a hole in a card */
.rev__by{margin-top:auto;display:flex;flex-direction:column;gap:5px}
.rev__by b{font-family:Oswald,sans-serif;font-weight:500;font-size:13.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);line-height:1.2}
.rev__by span{font-size:13px;color:#6B7386;line-height:1.2}

/* the full list reads like a document: one measure, a rule between entries */
.revgrid--all{display:block;max-width:760px;margin-inline:auto}
/* EVERY entry gets its rule, including the first. Dropping it on :first-child is
   the usual pattern, but here it left the opening review with no top edge while
   the other five had one, so it read as a featured block floating above the list
   rather than the first row of it. A list needs a top edge to be a list. */
.revgrid--all .rev{height:auto;display:block;padding:34px 0;border-top:1px solid var(--line)}
.revgrid--all .rev:last-child{padding-bottom:0}
.revgrid--all .rev__q{margin-bottom:20px}
.revgrid--all .rev__by{margin-top:0}

.revnote{max-width:760px;margin:40px auto 0;text-align:center;font-size:14.5px;line-height:1.65;
  color:#6B7386}
.revnote a{color:var(--red);text-decoration:none;border-bottom:1px solid rgba(187,44,46,.35);
  padding-block:7px}
.revcta{display:flex;justify-content:center;margin-top:44px}
.ratelink{color:inherit;text-decoration:none;border-bottom:1px solid rgba(201,169,106,.45);
  display:inline-flex;align-items:center;min-height:32px}
.ratelink:hover{border-bottom-color:var(--gold)}
.hero .ratelink,.pagehead .ratelink{color:rgba(255,255,255,.8)}

@media(max-width:1000px){
  .revgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .revgrid:not(.revgrid--all)>.rev:last-child:nth-child(odd){grid-column:1/-1;
    border-left:0;padding-left:0;border-top:1px solid var(--line);
    padding-top:34px;margin-top:34px}
}
@media(max-width:680px){
  .revgrid:not(.revgrid--all){grid-template-columns:1fr}
  .revgrid:not(.revgrid--all)>.rev + .rev{border-left:0;padding-left:0;
    border-top:1px solid var(--line);padding-top:32px;margin-top:32px}
  .revgrid:not(.revgrid--all)>.rev:last-child:nth-child(odd){margin-top:32px}
  .revnote{text-align:left}
}
/* the rating link is a real tap target, not just underlined text (bugs.js: 27px at 414) */
.ratelink{display:inline-flex;align-items:center;min-height:32px}

/* --soft and --mist are the SAME colour (#F5F4F2), so .band's top hairline between
   two tinted sections separates nothing and reads as a stray rule. */
.section--mist + .band{border-top:0}

/* ===== the Sept 14 2026 call with Herb ===== */

/* His asterisk. "We're not going to say mandatory... a lot of people are savvy
   to that red star." So there is NO legend anywhere on the page - the mark has
   to carry the meaning on its own, which is why it takes the accent red rather
   than a muted grey, and why the accessible name lives in title/aria instead of
   visible text. <abbr> underlines itself by default in several browsers; kill
   that or it reads as a typo. */
.req{color:var(--accent);text-decoration:none;border:0;font-weight:600;
  margin-left:2px;font-size:1.05em;line-height:1}
.fld label .req,.field label .req{letter-spacing:0}

/* "Schedule a free consultation, right below that title, and LARGER than the
   tell-us text." .leadcard__note is 13.5px, so this sits at 16px - a step up,
   not a shout - and takes body ink while the note below stays muted, which is
   what actually makes it read first. */
.leadcard__alt{font-size:16px;line-height:1.55;color:var(--body);
  margin:0 0 10px;font-weight:500}
.leadcard__alt a{color:var(--navy);font-weight:600;
  text-decoration:underline;text-underline-offset:2px}
.leadcard__alt a:hover{color:var(--accent)}
/* a phone number inside a 16px line is a 22px tap target on a phone, under the
   32px minimum - and this is the one link on the page whose whole purpose is
   being tapped. Same fix the rating link needed. */
.leadcard__alt a{display:inline-flex;align-items:center;min-height:32px}

/* The ninth hero pill. It is a different KIND of thing from the eight beside it
   - a way out of the list rather than another item in it - so it is outlined in
   gold instead of filled, and it must not wrap away from them. */
.hero .pillrow a.pill--all{border-color:var(--gold);color:var(--gold);
  background:transparent;font-weight:500;white-space:nowrap}
.hero .pillrow a.pill--all:hover{background:var(--gold);color:var(--ink,#0D1B36)}

/* The contact page's free-text box is now the main event of that form, not an
   afterthought under six other fields. */
#c-msg{min-height:150px;resize:vertical;line-height:1.6}

/* The SAME consent paragraph now appears on the hero and on the contact page.
   On the hero it renders at 11.5px because the rule is scoped to that form; in
   the leadcard it fell through to prose body size and came out at 17.5px, which
   made the legal fine print the loudest thing in the card - louder than the
   field labels and the send button. One paragraph, one treatment. */
.leadcard form .note{font-size:11.5px;line-height:1.5;color:var(--muted);
  margin:14px 0 0}
.leadcard form .note a{color:var(--navy);text-decoration:underline;
  text-underline-offset:2px;display:inline-flex;align-items:center;min-height:32px}

/* ===== hero right-column variants ===== */
.hform{background:#fff;border-radius:6px;border-top:4px solid var(--gold);
  padding:clamp(22px,2.2vw,30px);box-shadow:0 26px 56px rgba(0,0,0,.34);margin:0}
.hform .f2{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.hform .f2 .full{grid-column:1/-1}
.hform .fld{min-width:0}
.hform .fld input,.hform .fld select,.hform .fld textarea{width:100%;min-width:0}
.hpanel li a{min-width:0}
@media(max-width:980px){
  .hform,.hpanel{max-width:480px;margin:clamp(30px,7vw,44px) auto 0;width:100%}
  .pillrow{margin-top:24px}
  .hproof{margin-top:22px}
}
@media(max-width:560px){
  .hform .f2{grid-template-columns:1fr}
}
.hform .fld textarea{min-height:76px}
.hform .chk{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;color:var(--body);cursor:pointer}
.hform .chk input{accent-color:var(--red);width:16px;height:16px;margin:0}
.hform h2{font-size:clamp(18px,1.9vw,22px);letter-spacing:.035em;line-height:1.15;margin-bottom:6px}
.hform .cap{font-family:Oswald,sans-serif;font-weight:400;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);display:block;margin-bottom:18px}
.hform .btn{width:100%;justify-content:center;margin-top:4px}
.hform .note{font-size:11.5px;line-height:1.5;color:var(--mute);margin:14px 0 0}

.hpanel{margin:0;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.16);
  border-top:3px solid var(--gold);border-radius:6px;padding:clamp(22px,2.2vw,28px)}
.hpanel h2{color:#fff;font-size:clamp(16px,1.6vw,19px);letter-spacing:.16em;font-weight:400;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.16);margin-bottom:6px}
.hpanel ul{list-style:none;margin:0;padding:0}
.hpanel li a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.09);text-decoration:none;
  font-family:Oswald,sans-serif;font-weight:300;font-size:15px;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.86);transition:color .18s}
.hpanel li:last-child a{border-bottom:0}
.hpanel li a:hover{color:var(--gold)}
.hpanel li a span{color:var(--gold);opacity:.7}

/* pill row - gives the copy column weight without more prose */
.pillrow{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px;max-width:640px}
.pillrow a{font-family:Oswald,sans-serif;font-weight:300;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.8);text-decoration:none;
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:9px 16px;transition:.18s}
.pillrow a:hover{border-color:var(--gold);color:var(--gold)}
.hero .wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.hero{background:linear-gradient(180deg,#16294e 0%,#0f2043 52%,#0b172d 100%)}