:root {
  --ink: #111820;
  --navy: #152536;
  --navy-2: #20384e;
  --gold: #a66f18;
  --gold-soft: #f5ead5;
  --paper: #ffffff;
  --wash: #f3f5f6;
  --line: #d8dee3;
  --muted: #52606c;
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.65;
}
a { color: #765014; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
img { max-width: 100%; height: auto; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: #fff; padding: .7rem 1rem; }
.site-header { background: var(--navy); color: #fff; border-bottom: 4px solid var(--gold); }
.nav {
  width: min(calc(100% - 2rem), var(--max));
  margin: 0 auto;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.brand { color: #fff; text-decoration: none; font-weight: 900; letter-spacing: .02em; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .9rem 1.1rem; }
.nav-links a { color: #fff; font-size: .88rem; font-weight: 700; text-decoration: none; }
.nav-links a:hover, .nav-links a:focus { text-decoration: underline; }
.crumbs { width: min(calc(100% - 2rem), var(--max)); margin: 1rem auto 0; color: var(--muted); font-size: .84rem; }
.hero { padding: clamp(3.25rem, 7vw, 6rem) 0; background: linear-gradient(120deg, var(--navy), var(--navy-2)); color: #fff; }
.hero-inner, .wrap { width: min(calc(100% - 2rem), var(--max)); margin: 0 auto; }
.eyebrow { color: #f4c978; font-size: .82rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.025em; }
h1 { max-width: 900px; margin: .5rem 0 1rem; font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { margin-top: 0; font-size: clamp(1.8rem, 3.6vw, 3rem); }
h3 { font-size: 1.25rem; }
.hero p { max-width: 780px; color: #e3e9ee; font-size: clamp(1.05rem, 2vw, 1.3rem); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.button { display: inline-block; padding: .85rem 1.1rem; border-radius: 5px; font-weight: 850; text-decoration: none; }
.button-primary { background: #d69c3c; color: #111; }
.button-secondary { border: 2px solid #fff; color: #fff; }
.section { padding: clamp(3.25rem, 7vw, 5.5rem) 0; }
.section-alt { background: var(--wash); }
.lede { max-width: 850px; font-size: 1.16rem; }
.direct-answer { border-left: 6px solid var(--gold); background: var(--gold-soft); padding: 1.15rem 1.3rem; max-width: 900px; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 1.35rem; }
.card h3 { margin-top: 0; }
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 1rem; }
.steps li { position: relative; padding: 1.15rem 1.15rem 1.15rem 4.2rem; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 1rem; top: 1rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 900; }
.proof { background: var(--navy); color: #fff; padding: 1.5rem; border-radius: 8px; }
.proof p { color: #e7edf2; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.faq summary { cursor: pointer; font-weight: 850; }
.callout { border: 2px solid var(--gold); padding: 1.35rem; border-radius: 8px; }
.small { font-size: .86rem; color: var(--muted); }
.site-footer { background: #0d1721; color: #d8e0e7; padding: 2.5rem 0; }
.site-footer a { color: #f0c36f; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; }
.license-line { font-weight: 800; }
.source-list li { margin-bottom: .55rem; }

@media (max-width: 820px) {
  body { font-size: 17px; }
  .nav { align-items: flex-start; flex-direction: column; padding: 1rem 0; }
  .nav-links { justify-content: flex-start; }
  .grid, .grid-2, .footer-grid { grid-template-columns: 1fr; }
  .hero { padding: 3.5rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   BACKSIDER — site shell + cinematic homepage.
   Appended to the evidence-page stylesheet above so the whole site shares one set of
   tokens. Brand colours are SAMPLED FROM THE LOGO ARTWORK, not invented:
   navy #16202e is the wordmark plate, gold #dcaf23 is the arc and the sun.

   Motion follows the same grammar as the Magic City Boxing build: a slow Ken Burns push
   under layered gradient veils, and .rise elements that fade up as they enter the
   viewport. Every animation is disabled under prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#0B1119; --ink2:#111a26; --bnavy:#16202e; --bnavy-2:#1e2b3d;
  --bgold:#dcaf23; --bgold-l:#f0c948; --bgold-d:#b8901a;
  --bone:#eef2f7; --dim:#93a3b6; --hair:rgba(255,255,255,.10);
  /* THE BINDING CONSTRAINT: Fla. Stat. 489.147 requires the disclosure to be at least 12pt
     AND at least half the largest font in the communication. This value IS the largest font
     on the page, and .fl-disclosure derives its size from it. Raising it to 62px forced a
     31px disclosure that swamped the footer. 48px keeps the hero big and the notice at 24px.
     Raise this and you are choosing a bigger legal notice — that is the trade, every time. */
  --largest-font:clamp(32px,4.2vw,48px);
  --shadow:0 18px 50px rgba(6,12,20,.16);
}

/* ── top bar ──────────────────────────────────────────────────────────────── */
.topbar{background:#070c13;color:#9fb0c4;font-size:13px;letter-spacing:.02em}
.topbar-in{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:9px 24px;flex-wrap:wrap}
.topbar .topcall{color:var(--bgold);font-weight:800;text-decoration:none}

/* ── header: transparent over the hero, solid once you scroll ─────────────── */
.site-header{position:sticky;top:0;z-index:50;background:rgba(11,17,25,.86);
  backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--hair);transition:padding .25s ease,background .25s ease}
.site-header .nav{display:flex;align-items:center;gap:16px;padding:14px 22px;
  transition:padding .25s ease}
.site-header.compact .nav{padding:8px 24px}
.site-header .brand{display:block;line-height:0;flex:0 0 auto}
.site-header .brand img{width:206px;height:auto;transition:width .25s ease}
.site-header.compact .brand img{width:158px}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:17px;flex-wrap:nowrap}
.nav-links a{color:#dbe4ef;text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap;
  position:relative;padding-bottom:3px}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--bgold);transition:right .28s ease}
.nav-links a:hover::after,.nav-links a.on::after{right:0}
.nav-links a:hover,.nav-links a.on{color:#fff}
.nav-links .navcta{background:var(--bgold);color:#10182a;padding:10px 17px;border-radius:9px;
  font-weight:800}
.nav-links .navcta::after{display:none}
.nav-links .navcta:hover{background:#fff;color:var(--bnavy)}
.navtog,.navbtn{display:none}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-block;text-decoration:none;font-weight:800;border-radius:11px;
  padding:16px 28px;font-size:17px;border:2px solid transparent;cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--bgold);color:#10182a;box-shadow:0 10px 26px rgba(220,175,35,.28)}
.btn-gold:hover{background:var(--bgold-l);box-shadow:0 14px 34px rgba(220,175,35,.38)}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--bnavy)}
.btn-ghost-dark{border-color:var(--bnavy);color:var(--bnavy)}
.btn-ghost-dark:hover{background:var(--bnavy);color:#fff}
.btn-sm{padding:11px 18px;font-size:15px;background:var(--bnavy);color:#fff}

/* ── CINEMATIC HERO ───────────────────────────────────────────────────────────
   A stack of real job photos, each pushed slowly and cross-faded. The veils are
   three stacked gradients: one kills the top so the nav reads, one weights the
   left so the type reads, one warms the right with the brand gold.
   Swapping in a real video later means adding <video> inside .hero-bg and
   deleting the .kb layers — nothing else changes. */
/* The evidence pages use .hero WITHOUT a .hero-bg inside it, so this gradient is what
   they get. On the homepage the photo stack sits on top of it and covers it entirely.
   One rule, both cases — the interior pages were flat black before this. */
.hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  padding:clamp(58px,8vw,104px) 0 clamp(52px,7vw,84px);
  background:
    radial-gradient(820px 460px at 86% 18%,rgba(220,175,35,.16),transparent 68%),
    linear-gradient(158deg,#0d1520 0%,#16202e 46%,#1e2b3d 100%)}
.hero-bg{position:absolute;inset:0;z-index:0}
/* Duration and per-layer delay are set INLINE from Python, derived from how many shots
   are in HERO_SHOTS. Hardcoding them for three layers while only two existed left a dead
   window where the hero faded to bare navy and stayed there. */
.hero-bg .kb{position:absolute;inset:0;background-size:cover;background-position:center 58%;
  opacity:0;animation-name:kbfade;animation-iteration-count:infinite;
  animation-timing-function:linear;will-change:transform,opacity}
@keyframes kbfade{
  /* With two layers offset by half the cycle, each must stay up for MORE than half so the
     next one is fully in before this one is out. Holding to 50% and clearing at 58% makes
     the crossfade overlap instead of dipping to bare navy between shots. */
  0%   {opacity:0;  transform:scale(1.13)}
  5%   {opacity:.78}
  50%  {opacity:.78}
  58%  {opacity:0;  transform:scale(1.0)}
  100% {opacity:0;  transform:scale(1.13)}
}
/* Three stacked veils, each with one job: kill the top so the nav reads, weight the left
   so the headline reads at contrast, warm the right with brand gold. Tuned so the photo is
   still legible as a photograph — the first pass was heavy enough to reduce it to texture. */
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(7,12,19,.86) 0%,rgba(7,12,19,.26) 22%,rgba(7,12,19,.14) 50%,rgba(7,12,19,.68) 86%,var(--ink) 100%),
  linear-gradient(96deg,rgba(7,12,19,.90) 0%,rgba(7,12,19,.58) 34%,rgba(7,12,19,.08) 68%,rgba(7,12,19,0) 100%),
  radial-gradient(900px 540px at 84% 30%,rgba(220,175,35,.22),transparent 68%)}
.hero-in{position:relative;z-index:2;max-width:960px}
.hero h1{font-size:var(--largest-font);line-height:1.06;margin:.18em 0 .4em;color:#fff;
  letter-spacing:-.022em;text-shadow:0 2px 26px rgba(0,0,0,.42)}
.hero .lede{font-size:clamp(17px,2vw,20px);color:#d3dded;max-width:640px}
.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:800;
  color:var(--bgold);margin:0}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 26px}
.ticks{list-style:none;padding:0;margin:0;display:flex;gap:10px 26px;flex-wrap:wrap;
  font-size:15px;color:#c8d4e3}
.ticks li::before{content:"\2713";color:var(--bgold);font-weight:900;margin-right:8px}

/* ── hero entrance ────────────────────────────────────────────────────────────
   The hero must NOT use .rise. .rise starts at opacity:0 and is only cleared by
   JavaScript, so a slow, blocked or broken script leaves the headline invisible —
   which is exactly what happened on mobile during this build. A CSS animation
   cannot fail that way: it runs on load, and if animations are unsupported the
   element simply sits at its final state. */
.hin{animation:heroIn .72s cubic-bezier(.22,.8,.28,1) both}
.hero .eyebrow.hin{animation-delay:.04s}
.hero h1.hin{animation-delay:.12s}
.hero .lede.hin{animation-delay:.22s}
.hero .cta-row.hin{animation-delay:.32s}
.hero .ticks.hin{animation-delay:.42s}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .hin{animation:none} }

/* ── TICKER ───────────────────────────────────────────────────────────────────
   Duplicated content and a -50% translate so the loop is seamless. aria-hidden on
   the second copy so a screen reader hears the list once, not twice. */
.ticker{background:var(--bgold);color:#0f1722;overflow:hidden;position:relative;
  border-top:1px solid rgba(0,0,0,.10);border-bottom:1px solid rgba(0,0,0,.10)}
.ticker-track{display:flex;width:max-content;animation:tick 44s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-set{display:flex;flex:0 0 auto}
.ticker span{display:inline-flex;align-items:center;padding:13px 0;font-weight:800;
  font-size:13.5px;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.ticker span::after{content:"\25C6";margin:0 26px;color:rgba(15,23,34,.42);font-size:9px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── stat band ────────────────────────────────────────────────────────────── */
.stats{background:var(--bnavy);color:#fff;padding:44px 0}
.stats .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;
  text-align:center}
.stat .k{font-size:clamp(32px,4.4vw,48px);font-weight:900;color:var(--bgold);line-height:1;
  letter-spacing:-.02em}
.stat .l{display:block;margin-top:9px;font-size:13.5px;color:#b7c5d6;line-height:1.4}

/* ── sections ─────────────────────────────────────────────────────────────── */
.section{padding:clamp(52px,7vw,84px) 0}
.section-alt{background:var(--wash)}
.section-navy{background:var(--bnavy);color:#fff;position:relative;overflow:hidden}
.section-navy::before{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 420px at 88% 10%,rgba(220,175,35,.14),transparent 70%)}
.section-navy > .wrap{position:relative;z-index:1}
.section-navy h2,.section-navy h3{color:#fff}
.section h2{font-size:clamp(25px,3.3vw,36px);line-height:1.18;margin:.24em 0 .3em;
  letter-spacing:-.018em}
.section .sub{color:var(--muted);max-width:730px;font-size:17.5px}
.section-navy .sub{color:#c4d0de}
.wrap.narrow{max-width:830px}
.center{text-align:center}
.bigicon{font-size:48px;color:var(--bgold);margin:0}

/* The header is sticky, so any anchor target lands underneath it without this. The
   nav CTA points at #request, which is the highest-intent link on the page. */
html{scroll-padding-top:96px}
[id]{scroll-margin-top:96px}
@media (max-width:820px){ html{scroll-padding-top:76px} [id]{scroll-margin-top:76px} }

/* ── scroll reveal ────────────────────────────────────────────────────────── */
.rise{opacity:0;transform:translateY(22px);
  transition:opacity .62s cubic-bezier(.22,.8,.28,1),transform .62s cubic-bezier(.22,.8,.28,1)}
.rise.on{opacity:1;transform:none}

/* ── cards ────────────────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px;
  margin-top:36px}
.card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--bgold);
  border-radius:13px;padding:26px;transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card h3{margin:0 0 9px;font-size:19px}
.card p{margin:0 0 10px;color:var(--muted);font-size:16.5px}

/* ── steps (homepage) — named .hsteps because the evidence-page sheet above
      already styles .steps with a CSS counter, which double-numbered them ──── */
.hsteps{list-style:none;padding:0;margin:36px 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:26px}
.hsteps li{display:flex;gap:15px}
.hsteps .n{flex:0 0 42px;height:42px;border-radius:50%;
  background:linear-gradient(145deg,var(--bgold),var(--bgold-d));color:#10182a;
  font-weight:900;display:flex;align-items:center;justify-content:center;font-size:17px}
.hsteps h3{margin:8px 0 6px;font-size:18px}
.hsteps p{margin:0;color:var(--muted);font-size:16px}

/* ── reviews ──────────────────────────────────────────────────────────────── */
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;
  margin:34px 0 28px}
.rev{margin:0;background:#fff;border:1px solid var(--line);border-radius:13px;padding:26px;
  transition:transform .22s ease,box-shadow .22s ease}
.rev:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.rev p{margin:0 0 12px;font-size:16.5px}
.rev .stars{color:var(--bgold);letter-spacing:2px;font-size:17px;margin-bottom:8px}
.rev cite{font-style:normal;font-weight:800;color:var(--muted);font-size:15px}

/* ── gallery ──────────────────────────────────────────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(278px,1fr));gap:16px;
  margin-top:36px}
.gallery figure{margin:0;border-radius:13px;overflow:hidden;background:#000;position:relative}
.gallery img{display:block;width:100%;height:242px;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.8,.28,1)}
.gallery figure:hover img{transform:scale(1.07)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 12px;
  color:#fff;font-size:14px;font-weight:600;
  background:linear-gradient(to top,rgba(6,12,20,.88),transparent)}

/* ── request block ────────────────────────────────────────────────────────── */
.request-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.prefer{margin-top:24px;color:#c4d0de}
.bigphone{font-size:28px;font-weight:900;color:var(--bgold);text-decoration:none}
.reqform{background:#fff;color:var(--ink);border-radius:15px;padding:30px;
  box-shadow:0 26px 60px rgba(4,10,18,.34)}
.reqform h3{margin:0 0 16px;font-size:21px}
.reqform label{display:block;margin-bottom:14px;font-weight:700;font-size:15px}
.reqform input,.reqform textarea{display:block;width:100%;margin-top:6px;padding:13px;
  border:1px solid var(--line);border-radius:9px;font:inherit;font-weight:400;
  transition:border-color .18s ease,box-shadow .18s ease}
.reqform input:focus,.reqform textarea:focus{outline:none;border-color:var(--bgold);
  box-shadow:0 0 0 3px rgba(220,175,35,.22)}
.reqform .btn{width:100%;border:0}
.reqform .hp{position:absolute;left:-9999px;width:1px;height:1px}
.consent{font-size:12.5px;color:var(--muted);margin:14px 0 0;line-height:1.5}
.section-navy a:not(.btn){color:#dbe4ef}
.section-navy a:not(.btn):hover{color:var(--bgold)}
.prefer a{text-decoration:none}

/* ── faq ──────────────────────────────────────────────────────────────────── */
.faq{margin-top:28px;border-top:0}
.faq details{border:1px solid var(--line);border-radius:11px;margin-bottom:11px;background:#fff;
  padding:0;transition:box-shadow .2s ease}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{cursor:pointer;padding:18px 20px;font-weight:750;font-size:17px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--bgold);font-weight:900;font-size:21px;
  line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 20px 19px;color:var(--muted)}
.faq .a p{margin:0}

/* ── 489.147 disclosure ───────────────────────────────────────────────────────
   Size is DERIVED: never below 16px (12pt), never below half the largest font on
   the page. --largest-font is a clamp(), so this tracks the real rendered size at
   every viewport. Do NOT replace this with a fixed px value. */
.fl-disclosure{font-size:max(16px,calc(var(--largest-font)/2));line-height:1.45;
  color:#16202e;background:#fff8e6;border:2px solid #c9a227;border-radius:11px;
  padding:19px 21px;margin:26px 0;font-weight:600}
.fl-disclosure p{margin:0 0 12px}
.fl-disclosure p:last-child{margin-bottom:0}
.fl-disclosure-t{text-transform:uppercase;letter-spacing:.04em;font-weight:800}

/* ── footer ───────────────────────────────────────────────────────────────── */
.site-footer{background:var(--ink);color:#b6c4d5;padding:58px 0 92px}
.site-footer h3{color:#fff;font-size:14.5px;text-transform:uppercase;letter-spacing:.1em;
  margin:0 0 13px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:38px}
.footlogo{width:260px;height:auto;margin-bottom:13px}
.footlinks{display:flex;flex-direction:column;gap:9px}
.site-footer a{color:#d3dde9;text-decoration:none}
.site-footer a:hover{color:var(--bgold)}
.lic-line{font-size:14px;color:#8496ab}
.social{display:flex;gap:17px}
.copyright{border-top:1px solid #22303f;padding-top:19px;margin-top:8px;font-size:14px;
  color:#7f90a4}

.stickybar{display:none}

@media (max-width:900px){
  .request-grid{grid-template-columns:1fr;gap:30px}
  .foot-grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:820px){
  /* The evidence-page sheet's own 820px block sets .nav{flex-direction:column}, which
     stacked the logo above the menu button. Restore the row explicitly — overriding
     align-items alone is not enough. Breakpoint matches theirs so there is no band
     with a column nav and no hamburger. */
  .site-header .nav{flex-direction:row;flex-wrap:wrap;justify-content:space-between;
    align-items:center;row-gap:0;padding:12px 20px}
  .site-header.compact .nav{padding:8px 20px}
  .navbtn{display:block;color:#fff;font-size:28px;cursor:pointer;line-height:1;
    padding:6px 8px;align-self:center}
  .nav-links{display:none;flex-basis:100%;order:3;flex-direction:column;align-items:flex-start;
    gap:15px;padding:16px 2px 8px;margin-left:0}
  .navtog:checked ~ .nav-links{display:flex}
  .site-header .brand img{width:184px}
  .site-header.compact .brand img{width:150px}
  .hero{padding:56px 0 50px}
  .topbar .lic{font-size:11.5px}
  .stickybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    box-shadow:0 -3px 20px rgba(0,0,0,.26)}
  .stickybar a{flex:1;text-align:center;padding:15px 8px;font-weight:800;font-size:15px;
    text-decoration:none}
  .stickybar .s-call{background:var(--bnavy);color:var(--bgold)}
  .stickybar .s-book{background:var(--bgold);color:#10182a}
}

/* Motion is decoration here, never information. Everything still reads with it off. */
@media (prefers-reduced-motion:reduce){
  .hero-bg .kb{animation:none;opacity:.5}
  .hero-bg .kb:nth-child(n+2){display:none}
  .ticker-track{animation:none}
  .rise{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover,.rev:hover{transform:none}
  .gallery figure:hover img{transform:none}
}

/* community walkthrough form: two-up rows and checkbox grids */
.cwform h3{margin:26px 0 12px;font-size:16px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--bnavy);border-bottom:2px solid var(--bgold);padding-bottom:7px}
.cwform h3:first-of-type{margin-top:4px}
.cwform .req{color:#b3261e}
.cwform select{display:block;width:100%;margin-top:6px;padding:13px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-weight:400;background:#fff}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.ckgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;margin-bottom:8px}
.ck{display:flex;align-items:flex-start;gap:9px;font-weight:400;font-size:15.5px;
  line-height:1.35;margin:0;cursor:pointer}
.ck input{width:auto;margin:2px 0 0;flex:0 0 auto}
@media (max-width:620px){ .row2,.ckgrid{grid-template-columns:1fr} }

/* team hub tool cards */
.toolgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:16px}
.toolcard{display:block;background:#fff;border:1px solid var(--line);border-left:4px solid var(--bgold);
  border-radius:12px;padding:20px 22px;text-decoration:none;color:var(--ink);
  transition:transform .2s ease,box-shadow .2s ease}
.toolcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--ink)}
.toolcard .ti{font-size:24px;display:block;line-height:1}
.toolcard .tt{display:block;font-weight:800;font-size:17.5px;margin:9px 0 5px}
.toolcard .td{display:block;color:var(--muted);font-size:15px;line-height:1.45}

/* team job picker */
.jobfilter{display:block;width:100%;margin:18px 0 14px;padding:13px 15px;border:1px solid var(--line);
  border-radius:10px;font:inherit;background:var(--card);color:var(--ink)}
.jobfilter:focus{outline:none;border-color:var(--bgold);box-shadow:0 0 0 3px rgba(220,175,35,.22)}
.joblist{display:grid;gap:8px}
.jobrow{display:grid;gap:2px;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--bgold);border-radius:9px;padding:13px 16px;text-decoration:none;
  color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.jobrow:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:var(--ink)}
.jobrow .jn{font-weight:600;font-size:16.5px}
.jobrow .js{font-size:13.5px;color:var(--slate);font-family:"IBM Plex Mono",monospace}

.jobrow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.jobrow .jinfo{display:grid;gap:2px;min-width:0;flex:1 1 240px}
.jacts{display:flex;gap:8px;flex:0 0 auto}
.jb{font-family:"IBM Plex Sans",sans-serif;font-size:14px;font-weight:700;text-decoration:none;
  padding:8px 14px;border-radius:8px;background:var(--bnavy);color:#fff;white-space:nowrap}
.jb:hover{background:var(--bnavy-2);color:#fff}
.jb2{background:var(--bgold);color:#10182a}
.jb2:hover{background:var(--bgold-l);color:#10182a}

/* send-a-document preview */
.mailprev{background:var(--card);border:1px solid var(--line);border-radius:11px;margin:20px 0 16px;
  overflow:hidden}
.mrow{display:flex;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:15px}
.mrow span{color:var(--slate);font-family:"IBM Plex Mono",monospace;font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;flex:0 0 62px;padding-top:2px}
.mrow b{font-weight:600;word-break:break-word}
.mbody{padding:16px;white-space:pre-wrap;font-size:16px;line-height:1.6;border-bottom:1px solid var(--line)}
.mnote{padding:12px 16px;font-size:13.5px;color:var(--slate);background:var(--band);line-height:1.5}
.sendform{margin:0 0 8px}
.sendform .btn{width:100%;border:0}