/* ============================================================
   LAWYER HELP — SHARED SITE STYLESHEET
   Static prototype. Adapted from the design pattern already
   proven in Squarespace Designs/*-mockup.html (same tokens,
   same components) so this prototype and the mockups stay in
   the same visual language.
   ============================================================ */

:root{
  --black:#000;
  --yellow:#FFC700;
  --white:#fff;
  --grey-bg:#F4F4F4;
  --rule:#E0E0E0;
  --text:#1A1A1A;
  --muted:#5A5A5A;
  --max:1200px;
  --gap:clamp(48px,7vw,96px);
  --radius:2px;        /* buttons, tags, ticks — the interactive signature */
  --radius-lg:6px;     /* boxes: cards, reviews, chips, overlay panels */
  --header-h:126px;    /* 14px padding + 98px logo + 14px padding */
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.65;
  color:var(--text);
  background:var(--white);
}
h1,h2,h3{font-family:'Plus Jakarta Sans',system-ui,sans-serif;line-height:1.15;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(30px,4.4vw,52px);font-weight:800}
h2{font-size:clamp(24px,3vw,38px);font-weight:700}
h3{font-size:19px;font-weight:700}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.2em}
li{margin-bottom:.5em}
a{color:inherit;transition:color .15s ease-out,text-decoration-color .15s ease-out,opacity .15s ease-out}
/* prose links: underline answers in yellow on hover */
a:hover{text-decoration-color:var(--yellow);text-decoration-thickness:2px}
/* big un-underlined tel/mailto displays (contact card, footer number) dim instead */
a[href^="tel:"]:not(.btn):hover,a[href^="mailto:"]:not(.btn):hover{opacity:.75}
strong{font-weight:700}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:var(--gap) 0}
.grey{background:var(--grey-bg)}
.lede{font-size:18px}
.small{font-size:13px;color:var(--muted);line-height:1.5}

/* --- buttons ------------------------------------------------ */
.btn{
  display:inline-block;
  background:var(--yellow);
  color:var(--black);           /* black on yellow only — white fails contrast */
  font-weight:700;
  text-decoration:none;
  padding:16px 34px;
  border-radius:var(--radius);
  font-size:16px;
  border:2px solid var(--yellow);
  transition:background-color .15s ease-out,color .15s ease-out,
             border-color .15s ease-out,transform .15s ease-out,
             box-shadow .15s ease-out;
}
.btn-outline{background:transparent;border:2px solid var(--black);color:var(--black)}
.hero .btn-outline{border-color:var(--white);color:var(--white)}

/* Hover: every button lands on the brand's black + yellow. The solid yellow
   button inverts (its yellow border keeps definition on any background); the
   light-context outline fills black; outlines on dark bands fill yellow so
   they pop instead of vanishing. :focus-visible mirrors hover for keyboards. */
.btn:hover,.btn:focus-visible{
  background:var(--black);color:var(--yellow);
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(0,0,0,.18);
}
.btn-outline:hover,.btn-outline:focus-visible{
  background:var(--black);color:var(--yellow);border-color:var(--black);
}
.hero .btn-outline:hover,.hero .btn-outline:focus-visible,
.close-cta.dark .btn-outline:hover,.close-cta.dark .btn-outline:focus-visible{
  background:var(--yellow);color:var(--black);border-color:var(--yellow);
}
.btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.btn:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

.textlink{display:inline-block;color:inherit;text-decoration:underline;text-underline-offset:4px;font-size:15px}
.textlink:hover{text-decoration-color:var(--yellow);text-decoration-thickness:3px}

/* --- hero ----------------------------------------------------- */
/* Solid black, no photography. The hero backgrounds came out sitewide on
   2026-08-21: the client's standing complaint was that the photo + scrim
   treatment read as "similar to any other lawyer website page". Black plus
   the yellow accent is the brand doing the work instead of stock imagery. */
.hero{
  position:relative;
  color:var(--white);
  text-align:left;
  padding:calc(var(--header-h) + clamp(32px,4vw,44px)) 0 clamp(48px,6vw,72px);
  background:var(--black);
}
.hero .wrap{position:relative}
.hero p{font-size:18px;margin-bottom:0}
.hero .lede{color:rgba(255,255,255,.8);line-height:1.6;max-width:34em;text-wrap:pretty}
.hero .voiceline{font-size:15px;opacity:.9;margin-top:1.2em}
/* 34px floor, not the global 30: on a phone the 17px body copy left the
   headline at barely 1.7x body, against 3x on desktop. 7vw ramps it from
   34px at 390 wide to the 52px cap at about 745. */
.hero h1{font-size:clamp(34px,7vw,52px);letter-spacing:-.02em;line-height:1.06}
.hero .actions{justify-content:flex-start}
/* freephone inside the H1 — yellow, undecorated, still a tel: link so
   js/site.js fires freephone_click on it */
.h1-tel{color:var(--yellow);text-decoration:none}
.h1-tel:hover{color:var(--white)}
.h1-sub{display:block;color:var(--yellow);margin-top:14px}

/* two-column hero: copy left, the page's own device right (freephone
   lockup, statement, review rotator). Collapses to one column on tablet. */
/* 420px side column, not the mockup's 460: at the site's 1200px wrap that is
   the difference between the traffic and licence H1s running to three lines
   or four (measured 2026-08-22), and the side content is capped at 400px. */
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:start}
.hero-copy{display:flex;flex-direction:column;gap:22px}
/* inside the flex column the gap already spaces the buttons, so .actions'
   own margins would double up (46px to the text link against 26px in every
   other section). These land on the same 28-above / 26-below as elsewhere. */
.hero-copy .actions{margin:6px 0 0}
.hero-copy .textlink{margin-top:4px}
/* single-column heroes (home, fees, contact, s94, s106, p-endorsement, 404)
   get the same 22px rhythm as .hero-copy, so the intro, button and text link
   don't stack flush against each other. Intro copy capped like .lede. */
.hero .wrap:not(.hero-grid){display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.hero .wrap:not(.hero-grid)>p:not(.voiceline){max-width:40em;text-wrap:pretty}
.hero .wrap:not(.hero-grid)>.actions{margin:6px 0 0}
.hero .wrap:not(.hero-grid)>.textlink{margin-top:4px}
.hero .wrap:not(.hero-grid)>.voiceline{margin-top:6px}
/* end-aligned, not centred: the 400px content then shares its right edge
   with the header's call button instead of sitting 10px inside it */
.hero-side{justify-self:end;max-width:400px;width:100%}
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-side{justify-self:start;max-width:none}
}

/* About hero: portrait left, bio copy right. Reuses .hero-grid for the copy
   column's rhythm; 320px fits the 280px portrait with air. The
   .hero-grid.about-grid selector outranks the plain .hero-grid collapse
   above, hence its own 960px rule. */
.hero-grid.about-grid{grid-template-columns:320px 1fr}
.about-portrait{text-align:center}
@media(max-width:960px){
  .hero-grid.about-grid{grid-template-columns:1fr}
}

/* Yellow-ruled callout — the $230 appointment block and the standing
   statement beside it. Same 4px yellow rule as .aside and .card>h3. */
.hero .hero-callout{
  align-self:flex-start;
  border-left:4px solid var(--yellow);padding-left:22px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:24px;line-height:1.35;color:var(--white);
  font-variant-numeric:tabular-nums;
}
.hero .hero-callout .until{font-weight:700;font-size:20px;color:var(--yellow)}
/* Home page's one-line phone-voice callout: 20px so the sentence holds a
   single line in the 1fr column beside the 420px review rotator (at 24px
   "mind." wrapped on its own). Balanced so a phone wrap splits evenly. */
.hero .hero-callout.hero-callout-sm{font-size:20px;line-height:1.3;text-wrap:balance}
@media(max-width:600px){
  .hero .hero-callout{font-size:18px;padding-left:16px}
  .hero .hero-callout .until{font-size:16px}
}
.hero .hero-statement{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:34px;line-height:1.2;letter-spacing:-.02em;color:var(--white);
  border-left:4px solid var(--yellow);padding-left:26px;
}
/* Statement sitting under the review rotator (drink-drive): smaller, a bit of air above */
.reviews .hero-statement{font-size:24px;line-height:1.25;padding-left:18px;margin-top:6px}

/* Freephone lockup. Anton is display-only — numerals and the payoff line. */
.freephone{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;white-space:nowrap}
/* The yellow disc is baked into horse-laughing.png (brand/graphics/
   horse-in-circle.png is the master) so the ears and muzzle break the
   circle exactly as drawn. Don't add a CSS disc behind it. */
.freephone .horse{width:100%;max-width:330px}
.freephone picture{display:block;width:100%}
.freephone img{width:100%;height:auto;display:block}
.freephone .kicker{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:20px;letter-spacing:.06em;color:var(--white);margin-top:6px;
}
.freephone .word{
  font-family:'Anton',Impact,sans-serif;font-size:clamp(44px,4.4vw,62px);
  line-height:.98;letter-spacing:.005em;color:var(--yellow);
  font-variant-numeric:tabular-nums;text-decoration:none;
}
a.word:hover{color:var(--white)}
.freephone .payoff{
  font-family:'Anton',Impact,sans-serif;font-size:clamp(36px,3.7vw,52px);
  line-height:1.02;letter-spacing:.005em;color:var(--white);
}
.freephone .digits{
  font-size:15px;font-weight:700;color:var(--white);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;margin-top:8px;
  text-decoration:none;
}

/* "Your Goal:" list. The three goals are the page's promise, so they sit
   between the H1 and the $230 callout in full white, marked with the site's
   boxed yellow tick (same recipe as .includes li::before) rather than a
   glyph bullet. The label is the review widget's eyebrow, so the hero has
   one label voice. */
.goal-list{display:flex;flex-direction:column;gap:10px;font-size:17px;line-height:1.5;color:var(--white)}
.goal-list ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.goal-list li{display:flex;gap:14px;align-items:flex-start;margin:0}
.goal-list li::before{
  content:'\2714';flex:none;margin-top:3px;
  width:20px;height:20px;line-height:20px;text-align:center;font-size:12px;
  color:var(--black);background:var(--yellow);border-radius:var(--radius);
}

/* Review rotator — three verbatim Google reviews (quote-integrity rule; see
   research/lawyer-help-reviews.md). The slides stack in one grid cell so the
   box takes the height of the longest review and nothing clips. js/site.js
   crossfades them every 7s and wires the arrows; with no JS the first review
   shows and the arrows do nothing. visibility rides along with opacity so the
   hidden slides leave the accessibility tree and can't be text-selected. */
.reviews{display:flex;flex-direction:column;gap:14px}
/* Shared label above the goals list and the review widget. Scoped to .hero
   so it outranks `.hero p`, which otherwise wins on specificity and sets 18px. */
.hero .eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin:0;line-height:1.4}
.reviews h2{font-size:22px;font-weight:800;line-height:1.25;color:var(--white);margin:0}
.rev-box{display:grid;border:1px solid rgba(255,255,255,.18);padding:26px 28px}
.rev-slide{
  grid-area:1/1;display:flex;flex-direction:column;gap:12px;
  opacity:0;visibility:hidden;
  transition:opacity .45s ease-out,visibility 0s linear .45s;
}
.rev-slide.is-on{opacity:1;visibility:visible;transition:opacity .45s ease-out,visibility 0s}
.rev-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.rev-stars{display:flex;gap:3px;color:var(--yellow);font-size:17px}
.rev-src{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.rev-slide p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.9)}
.rev-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rev-arrows{display:flex;gap:8px}
.rev-arrows button{
  width:44px;height:44px;display:grid;place-items:center;padding:0;cursor:pointer;
  background:transparent;color:var(--white);
  border:2px solid var(--white);border-radius:var(--radius);
  transition:background-color .15s ease-out,color .15s ease-out,border-color .15s ease-out;
}
.rev-arrows button:hover,.rev-arrows button:focus-visible{
  background:var(--yellow);border-color:var(--yellow);color:var(--black);
}
.rev-arrows button:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.rev-arrows svg{width:18px;height:18px;display:block}
.rev-nav .textlink{font-size:14px}
@media(prefers-reduced-motion:reduce){
  .rev-slide,.rev-slide.is-on{transition:none}
}

/* hero promise strip (contact) */
.promise{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  border-top:1px solid rgba(255,255,255,.25);
  margin-top:40px;padding-top:32px;text-align:center;
}
.promise .fig{
  display:block;margin-bottom:8px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;color:var(--yellow);
  font-size:clamp(18px,1.9vw,23px);line-height:1.2;white-space:nowrap;
}
.hero .promise p{font-size:14px;color:#ccc;margin:0}
@media(max-width:820px){.promise{grid-template-columns:1fr 1fr;gap:28px 20px}}
@media(max-width:430px){.promise{grid-template-columns:1fr;gap:24px}}

/* --- trust bar ------------------------------------------------ */
.trustbar{background:var(--black);color:var(--white);padding:20px 0;border-top:1px solid rgba(255,255,255,.25)}
.trustbar ul{
  display:flex;flex-wrap:wrap;justify-content:flex-start;
  gap:12px 48px;list-style:none;margin:0;padding:0;
  font-size:15px;
}
.trustbar li{margin:0}
.trustbar .tick{color:var(--yellow);font-weight:700;margin-right:8px}

/* --- generic multi-column ------------------------------------ */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.cols-3-7{grid-template-columns:3fr 7fr}
.cols-4-6{grid-template-columns:4fr 6fr}
.cols-6-4{grid-template-columns:6fr 4fr}

/* --- what's included card -------------------------------------- */
.card{background:var(--white);border:1px solid var(--rule);padding:clamp(24px,3vw,40px);border-radius:var(--radius-lg)}
.card>h3{padding-left:16px;border-left:4px solid var(--yellow)}
.svc-card>h3{padding-left:0;border-left:0}   /* service cards carry yellow via chip + CTA */
.includes{list-style:none;padding:0;margin:0}
.includes li{
  padding:12px 0 12px 32px;position:relative;
  border-bottom:1px solid var(--rule);margin:0;
}
.includes li:last-child{border-bottom:0}
.includes li::before{
  content:'\2714';position:absolute;left:0;top:12px;
  color:var(--black);background:var(--yellow);
  width:20px;height:20px;line-height:20px;text-align:center;
  font-size:12px;border-radius:var(--radius);
}
.aside{
  border-left:4px solid var(--yellow);
  padding:2px 0 2px 22px;margin:2em 0 0;
}
.aside h3{font-size:17px;margin-bottom:.4em}
.aside p{font-size:15px}

/* --- fee card --------------------------------------------------- */
.feecard h3{padding-left:16px;border-left:4px solid var(--yellow);margin-bottom:.7em}
.feecard ul{list-style:none;padding:0}
.feecard li{border-bottom:1px solid var(--rule);padding:10px 0;display:flex;justify-content:space-between;gap:16px}
.feecard li span:last-child{font-weight:700;white-space:nowrap}
.feecard .note{margin-top:20px}

/* --- service / router cards ------------------------------------ */
.router{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.router .card,.grid4 .card{display:flex;flex-direction:column}
.router h3,.grid4 h3{font-size:18px}
.router p,.grid4 p{font-size:15px;color:var(--muted);flex:1}
.router .price,.grid4 .price{font-weight:700;color:var(--text);margin:0 0 .4em;font-size:15px}
.router .textlink{font-weight:600}
.svc-icon{width:44px;height:44px;margin:0 auto 14px;display:block}

/* --- homepage service router (richer cards) --------------------- */
/* Icon + service name sit in a black header band, so the four services read as
   a row of labelled tiles. The band also separates "which service is this"
   from "is this me?" (the hook), which ran together as one grey block before. */
.svc-grid{gap:24px}
.grid4 .svc-card{text-align:left}
.svc-card{
  position:relative;
  padding:0;overflow:hidden;
  transition:border-color .15s ease-out,box-shadow .15s ease-out,transform .15s ease-out;
}
.svc-card:hover,.svc-card:focus-within{
  border-color:var(--black);
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  transform:translateY(-2px);
}
.svc-head{
  display:flex;align-items:center;gap:14px;
  background:var(--black);color:var(--white);
  padding:18px 22px;
  min-height:80px;   /* levels the bands when a name wraps to two lines */
  box-sizing:border-box;
}
.svc-body-wrap{display:flex;flex-direction:column;flex:1;padding:22px}
.svc-card .svc-icon{
  width:38px;height:38px;margin:0;flex:0 0 auto;
  background:transparent;border-radius:0;padding:0;
}
.svc-card .svc-head h3{font-size:18px;margin:0;color:var(--white);line-height:1.25}
.svc-card p{flex:none}
.svc-card .svc-hook{
  font-weight:600;color:var(--text);font-size:15px;line-height:1.45;
  margin-bottom:.6em;
}
.svc-card .svc-body{flex:1;font-size:14.5px;line-height:1.55}
.svc-card .price{
  border-top:1px solid var(--rule);
  padding-top:14px;margin:16px 0 .6em;
  font-size:16px;
}
.svc-card .price .sub{
  display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:2px;
}
.svc-card .textlink{
  display:block;
  border-top:1px solid var(--rule);
  padding-top:14px;margin-top:16px;
  font-weight:700;font-size:15px;
  text-decoration-color:var(--yellow);
  text-decoration-thickness:3px;
  text-underline-offset:5px;
}
/* whole card is the click target */
.svc-card .textlink::after{content:'';position:absolute;inset:0}
.svc-pricing{text-align:center;margin:32px auto 0;max-width:640px;font-size:16px}
.svc-more{text-align:center;margin:24px 0 0;font-size:15px;color:var(--muted)}
.svc-more a{color:var(--text);text-underline-offset:4px}

/* --- urgency / callout band -------------------------------------- */
.urgency{background:var(--black);color:var(--white);text-align:center}
.urgency .wrap{max-width:780px}

/* --- image-overlay section (process/timeline) --------------------- */
.overlay-section{
  background:#222 center/cover no-repeat;
  padding:clamp(56px,7vw,96px) 0;
}

/* --- parallax backgrounds ------------------------------------- */
/* site.js moves a section's background-image onto .plx-bg and nudges it
   with a transform on scroll. isolation makes the section a stacking
   context so the z-index:-1 layers sit above its background colour but
   below its content and the .hero::before gradient. The layer is 120px
   taller than the section top and bottom; the script clamps movement to
   ±110px so an edge can never show. No JS = inline backgrounds as before. */
.plx{position:relative;overflow:hidden;isolation:isolate}
.plx-bg{
  position:absolute;left:0;right:0;top:-120px;bottom:-120px;z-index:-1;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  will-change:transform;
}
.plx-shade{position:absolute;inset:0;z-index:-1}
.overlay-card{background:rgba(255,255,255,.94);padding:clamp(28px,4vw,56px);border-radius:var(--radius-lg)}
.who-tag{
  display:inline-block;font-family:'Inter',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:2px 8px;border-radius:var(--radius);margin-right:10px;vertical-align:2px;
}
.who-us{background:var(--black);color:var(--yellow)}
.who-you{background:var(--yellow);color:var(--black)}
/* Neither ours nor the client's: the police and court stages, which nobody
   in this transaction controls. Deliberately drab so it reads as "waiting". */
.who-them{background:#DCDCDC;color:#3A3A3A}

/* --- authority / bio --------------------------------------------- */
.portrait{width:100%;aspect-ratio:4/5;object-fit:cover;background:#d8d8d8;display:block}
blockquote.pull{
  margin:1.5em 0 0;padding:4px 0 4px 22px;
  border-left:4px solid var(--yellow);
  font-family:'Plus Jakarta Sans',sans-serif;font-size:19px;font-weight:600;line-height:1.45;
}

/* --- section voice closer (centred pull-line under a section) ------- */
.voice-close{
  text-align:center;max-width:640px;margin:36px auto 0;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:19px;font-weight:600;
  line-height:1.45;color:var(--text);
}

/* --- numbered process steps (details inside .steps) ---------------- */
/* Flex so a summary that wraps keeps its second line aligned with the first
   instead of falling back under the number chip and WE DO / YOU tag. */
.steps{counter-reset:step}
.steps details{counter-increment:step}
.steps summary{display:flex;align-items:flex-start;gap:10px}
.steps summary::before{
  content:counter(step);
  flex:0 0 auto;width:22px;height:22px;line-height:20px;text-align:center;
  background:transparent;color:var(--muted);border:1px solid var(--rule);border-radius:var(--radius);
  font-family:'Inter',sans-serif;font-size:12px;font-weight:700;
  margin-top:2px;
}
.steps summary .who-tag{flex:0 0 auto;margin-right:0;margin-top:3px;vertical-align:baseline}

/* --- accordions (native <details>) -------------------------------- */
details{border-bottom:1px solid var(--rule)}
details:first-of-type{border-top:1px solid var(--rule)}
summary{
  cursor:pointer;list-style:none;
  padding:18px 40px 18px 0;position:relative;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:17px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:'⌄';position:absolute;right:8px;top:14px;font-size:20px;color:var(--muted);transition:color .15s ease-out}
summary:hover::after{color:var(--yellow)}
details[open] summary::after{content:'⌃';top:20px}
details .body{padding:0 0 20px;max-width:70ch}
details .body p:last-child{margin-bottom:0}

/* --- twin / narrow columns ------------------------------------------ */
.narrow{max-width:760px;margin:0 auto;text-align:center}
.twin blockquote{margin:1.2em 0;font-size:15px;font-style:italic;color:var(--muted)}

/* --- results + reviews ------------------------------------------------ */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.placeholder{border:2px dashed #bbb;background:#fafafa;padding:28px;color:var(--muted);font-size:14px;border-radius:var(--radius-lg)}
.review{background:var(--white);border:1px solid var(--rule);padding:24px;font-size:15px;border-radius:var(--radius-lg)}
.review .who{display:block;margin-top:12px;font-weight:700;color:var(--text)}
.stars{color:var(--yellow);letter-spacing:2px}

/* --- closing CTA --------------------------------------------------- */
.close-cta{text-align:center}
.actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:28px 0 24px}
.close-cta.dark{background:var(--black);color:var(--white)}
.close-cta.dark .btn-outline{border-color:var(--white);color:var(--white)}
.close-cta.dark .small{color:#bbb}
.close-cta.dark .small a{color:var(--yellow)}
.close-cta.dark .small a:hover{color:var(--white);text-decoration-color:var(--yellow)}

/* --- header / footer ------------------------------------------------ */
/* Header floats over the hero image rather than sitting in its own black bar.
   Every page opens with a dark image hero, so white nav text is always legible.
   --header-h must stay in sync with padding + .logo-img height: the hero adds it
   back as top padding so nothing sits under the nav. */
header.site{
  position:absolute;top:0;left:0;right:0;z-index:20;
  background:transparent;color:var(--white);padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px}
.nav-group{display:flex;align-items:center;gap:36px}
.logo{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:22px;text-decoration:none;color:var(--white)}
.logo em{background:var(--yellow);color:var(--black);font-style:normal;padding:2px 8px}
.logo-img{height:98px;display:block;transition:opacity .15s ease-out}
a:hover>.logo-img{opacity:.82}
.footer-logo{height:78px;margin:0 auto 20px}
header.site .btn{padding:12px 28px;white-space:nowrap}
.cols-3{grid-template-columns:1fr 1fr 1fr}
.footer-col-center{text-align:center}
/* left column flush left, centre centred, About column flush right */
footer.site .cols-3>div:last-child{justify-self:end}
nav.site ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-size:14px;flex-wrap:wrap}
nav.site a{text-decoration:none;padding-bottom:4px;border-bottom:2px solid transparent;transition:border-color .15s ease-out}
nav.site a:hover,nav.site a[aria-current]{border-bottom-color:var(--yellow)}
.nav-toggle{display:none}
footer.site{background:var(--black);color:var(--white);padding:56px 0 40px;font-size:14px}
footer.site a{color:var(--yellow)}
footer.site a:hover{color:var(--white);text-decoration-color:var(--yellow)}
footer.site h3{color:#fff;font-size:16px}
footer.site ul{list-style:none;padding:0}
footer.site .disclosures{margin-top:36px;padding-top:24px;border-top:1px solid #333;color:#999;font-size:12px;line-height:1.6}

/* --- quick-access application-form buttons ---------------------------- */
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.form-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.form-grid a,.form-grid-3 a{
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:22px 20px;color:#fff;font-weight:700;text-decoration:none;border-radius:var(--radius);
  font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;line-height:1.3;
  transition:filter .15s ease-out,transform .15s ease-out;
}
.form-grid a:hover,.form-grid-3 a:hover{filter:brightness(1.12);transform:translateY(-1px)}

/* --- responsive -------------------------------------------------------- */
/* Header switches to the hamburger at 1150px — well above the content
   breakpoint — because the full 7-item nav + logo + button need ~1125px to
   hold one line. Content layout doesn't collapse until 900px. */
@media (max-width:1150px){
  nav.site{display:none}
  /* hamburger + dropdown: reuses the per-page nav, so aria-current still works */
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:44px;height:44px;flex:0 0 auto;
    background:transparent;border:0;cursor:pointer;padding:0;
  }
  .nav-toggle span{display:block;width:24px;height:2px;background:var(--white);transition:transform .2s ease-out,opacity .2s ease-out}
  header.site.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.site.nav-open .nav-toggle span:nth-child(2){opacity:0}
  header.site.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  header.site.nav-open nav.site{
    display:block;position:absolute;top:100%;left:0;right:0;
    background:var(--black);padding:6px 24px 14px;border-top:1px solid #222;
  }
  header.site.nav-open nav.site ul{flex-direction:column;gap:0;font-size:16px}
  header.site.nav-open nav.site a{display:block;padding:13px 0;border-bottom:1px solid #1c1c1c}
  header.site.nav-open nav.site a[aria-current]{border-bottom:2px solid var(--yellow)}
}
@media (max-width:650px){
  /* number-only header button: "Call" adds nothing a yellow tel button doesn't say */
  header.site .btn .btn-verb{display:none}
}
@media (max-width:900px){
  .cols,.cols-3-7,.cols-4-6,.cols-6-4,.cols-3{grid-template-columns:1fr}
  /* footer: phone block first and full-width, then the two link lists side by side */
  footer.site .cols-3{grid-template-columns:1fr 1fr;gap:40px 24px}
  footer.site .footer-col-center{grid-column:1/-1;grid-row:1}
  footer.site .cols-3>div:last-child{justify-self:start}
  .router,.grid3{grid-template-columns:1fr}
  .grid4,.form-grid,.form-grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .grid4{grid-template-columns:1fr}
  /* header: the button drops the word "Call" (number only), which buys the
     logo its size and the hamburger its air. The 34vw-63px slope is the exact
     width budget: logo (aspect 2.89) + number button + 44px hamburger + gaps
     + 14px edge padding never overflow, down to 360px. 71px cap from ~394px. */
  header.site .wrap{gap:6px;padding:0 14px}
  .nav-group{gap:6px}
  .logo-img{height:clamp(52px,34vw - 63px,71px)}
  header.site .btn{height:44px;display:inline-flex;align-items:center;padding:0 10px;font-size:13px;white-space:nowrap}
  .nav-toggle{width:44px;margin-left:2px}
  .nav-toggle span{width:22px}
  :root{--header-h:99px}
}

/* ---- Trigger strip ("Which one is you?") — limited-licence -----------------
   Four client-supplied trigger moments. Grey band, tighter than a full section:
   it's a router, not a read. Each item is a whole clickable card so it works
   as a thumb target on a phone outside a courthouse. ------------------------ */
.triggers{background:var(--grey-bg);padding:clamp(36px,4.5vw,60px) 0}
.triggers h2{text-align:center;margin-bottom:.8em}
.trigger-list{
  list-style:none;margin:0 0 24px;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
}
.trigger-list li{margin:0}
.trigger-list a{
  display:block;height:100%;
  background:var(--white);border:1px solid var(--rule);border-left:4px solid var(--yellow);
  border-radius:var(--radius-lg);padding:18px 20px;
  font-weight:600;text-decoration:none;
  transition:background .15s ease-out,border-color .15s ease-out,transform .15s ease-out,box-shadow .15s ease-out;
}
.trigger-list a:hover,.trigger-list a:focus-visible{
  background:var(--black);color:var(--white);border-color:var(--black);border-left-color:var(--yellow);
  transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.16);
}
.trigger-foot{text-align:center;margin:0;color:var(--muted);font-size:15px}
@media(max-width:760px){
  .trigger-list{grid-template-columns:1fr;gap:12px}
  .trigger-list a{padding:16px 18px}
}

/* ---- Reviews page (/reviews/ and /reviews/<service>/) ----------------------
   Cards reuse .review/.stars/.who from the service pages' "What our customers
   say" grids, with a top line (stars + date), service tags, and a clamp on
   long reviews that js/site.js turns into a "Read the full review" toggle.
   Without JS every review shows in full. ---------------------------------- */
/* one column width for everything in the hero, so the paragraphs wrap to the
   same measure (the base .hero .lede is 34em, which wrapped narrower than the
   note beneath it). .hero p wins on specificity over .small, so the note sets
   its own size. */
/* tighter than the service heroes: eyebrow, h1, one-line lede and a note
   read as one block, so 14px gaps, no extra margins, and the h1 runs the
   full wrap width rather than wrapping at 640px */
.reviews-hero .wrap{gap:14px}
.reviews-hero .lede,.reviews-hero .hero-note{max-width:640px}
.reviews-hero .lede{margin-top:6px}
.reviews-hero .hero-note{font-size:15px;line-height:1.55;color:rgba(255,255,255,.7);margin-top:4px}
.reviews-hero .hero-note a{color:var(--white)}

/* filter chips: a black band under the hero, like .trustbar */
.filters{background:var(--black);color:var(--white);padding:18px 0 22px;border-top:1px solid rgba(255,255,255,.25)}
.filters ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.filters li{margin:0}
.filters a{
  display:inline-block;padding:9px 16px;
  border:2px solid rgba(255,255,255,.35);border-radius:var(--radius);
  color:var(--white);text-decoration:none;font-size:14px;font-weight:600;line-height:1.3;
  transition:border-color .15s ease-out,color .15s ease-out,background-color .15s ease-out;
}
.filters a:hover,.filters a:focus-visible{border-color:var(--yellow);color:var(--yellow)}
.filters a:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.filters a[aria-current]{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.filters .count{font-weight:400;opacity:.7;margin-left:4px;font-variant-numeric:tabular-nums}
.filters a[aria-current] .count{opacity:.75}

/* rows stretch so every card in a row is the same height; the footer is
   pushed to the bottom and the text clamps at 6 lines (JS adds the toggle
   only where the text really overflows) */
.review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px;align-items:stretch}
.review-grid .review,.shorts .review{display:flex;flex-direction:column}
.review .rev-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;margin-bottom:12px}
.review .rev-meta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.review .rev-text p{margin:0 0 .8em}
.review .rev-text p:last-child{margin-bottom:0}
.review.is-clamped .rev-text{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rev-more{
  align-self:flex-start;margin-top:10px;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;color:var(--text);
  text-decoration:underline;text-underline-offset:4px;
}
.rev-more:hover,.rev-more:focus-visible{text-decoration-color:var(--yellow);text-decoration-thickness:3px}
.rev-more:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.review .rev-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:14px}
.review .rev-foot .who{margin-top:0}
.rev-tags{display:flex;flex-wrap:wrap;gap:6px}
.rev-tags a{
  font-size:12px;font-weight:600;line-height:1.3;text-decoration:none;
  padding:3px 9px;border:1px solid var(--rule);border-radius:var(--radius);color:var(--muted);
  transition:border-color .15s ease-out,color .15s ease-out;
}
.rev-tags a:hover,.rev-tags a:focus-visible{border-color:var(--black);color:var(--text)}

.shorts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px;align-items:start}
.shorts .review{padding:18px 20px;font-size:14px}
.shorts .rev-top{margin-bottom:8px}
.shorts .rev-foot{margin-top:10px}

@media(max-width:1000px){.review-grid,.shorts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.review-grid{grid-template-columns:1fr}.shorts{grid-template-columns:1fr}}