/* =========================================================================
   BKS Accounting Group: bkstax.com
   Shared stylesheet. Hand-authored, no build step. Mobile-first, responsive.
   v6: enterprise/premium visual pass (typography, nav, cards, sections).
   ========================================================================= */

:root {
  --navy:        #0f2c4d;
  --navy-900:    #081b30;
  --navy-800:    #13385f;
  --navy-700:    #1c4a78;
  --gold:        #c8942b;
  --gold-600:    #b3811f;
  /* Text-only gold. --gold (2.72:1) and --gold-600 (3.46:1) both FAIL WCAG AA
     as text on any light ground, so neither may be used for type there.
     #8d6417 clears 4.5 on all four grounds in use (white 5.29, #fbf3e2 4.79,
     #f5f8fb 4.97, #eef3f9 4.74). Do NOT collapse this into --gold-600: that
     token is also a BACKGROUND (.btn--primary:hover), where darkening it would
     drop its ink from 5.30 to 3.46. Gold on navy is fine and unchanged. */
  --gold-text:   #8d6417;
  /* Gold for small text on DARK grounds. Plain --gold is 5.19 on --navy but
     only 4.39 on --navy-800, which is what the .hero and .page-hero gradients
     actually resolve to, so it misses AA for the 0.8rem eyebrow. This clears
     it with margin (5.18 on navy-800, higher on navy). */
  --gold-on-dark:#d4a33c;
  --ink:         #1b2733;
  --slate:       #4a5a6a;
  /* Darkened from #6b7a89, which measured 4.40:1 on white and only 3.95:1 on
     the #eef3f9 cards — below the 4.5:1 AA floor everywhere it was used for
     hint and disclaimer text. This clears 4.5 on all three grounds with room
     to spare (5.61 white / 5.26 tint / 5.03 card) so a future background
     tweak cannot silently push it back under. */
  --muted:       #5d6975;
  --line:        #e2e8ef;
  --line-strong: #cdd8e3;
  --bg:          #ffffff;
  --bg-soft:     #f5f8fb;
  --bg-navy-soft:#eef3f9;
  --white:       #ffffff;
  --success:     #1e7a4d;
  --danger:      #a5321f;
  --radius:      10px;
  --radius-lg:   16px;
  --radius-sm:   6px;
  --shadow:      0 16px 40px rgba(8, 27, 48, 0.10);
  --shadow-sm:   0 4px 16px rgba(8, 27, 48, 0.07);
  --shadow-lg:   0 24px 60px rgba(8, 27, 48, 0.16);
  --maxw:        1180px;
  --font:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Source Serif 4", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--navy-700); text-decoration: none; }
a:hover { color: var(--gold-text); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 4.4vw, 3.35rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); letter-spacing: -0.005em; }
h3 { font-family: var(--font); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.005em; }
h4 { font-family: var(--font); font-size: 1rem; font-weight: 700; }
p { margin: 0 0 1rem; color: var(--slate); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--soft { background: var(--bg-soft); }
.section--navy { background: var(--navy); color: #dfe8f2; position: relative; overflow: hidden; }
.section--navy::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(900px 500px at 85% 15%, rgba(0,0,0,.9), transparent 70%);
          mask-image: radial-gradient(900px 500px at 85% 15%, rgba(0,0,0,.9), transparent 70%);
}
.section--navy > .container { position: relative; z-index: 1; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: #b9c9db; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: .9rem;
}
.eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 2px; background: currentColor; opacity: .8;
}
/* On dark grounds the eyebrow must use the LIGHTER gold. --gold-text
   (#8d6417) is tuned for light backgrounds and measures only 2.26:1 on the
   navy hero, worse than what it replaced. --gold on navy is 5.19:1.
   .hero and .page-hero are both navy gradients, so all three selectors. */
.hero .eyebrow,
.page-hero .eyebrow,
.section--navy .eyebrow { color: var(--gold-on-dark); }

.lead { font-size: 1.18rem; color: var(--slate); max-width: 62ch; }
.text-center { text-align: center; }
.center-narrow { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- Top utility bar ---------- */
.topbar {
  background: var(--navy-900); color: #b9c9db; font-size: .82rem;
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; height: 38px; gap: 16px; }
.topbar__points { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.topbar__points li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.topbar__points li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-on-dark); flex: none; }
.topbar a { color: #d7e3f0; font-weight: 600; }
.topbar a:hover { color: #fff; }
.topbar__actions { display: flex; align-items: center; gap: 18px; flex: none; }
@media (max-width: 860px) { .topbar__points li:nth-child(3) { display: none; } }
@media (max-width: 640px) { .topbar { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 1rem;
  font-family: var(--font);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); border-color: var(--navy); }
.btn--primary:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.btn--gold { background: var(--gold); color: #1a1408; box-shadow: var(--shadow-sm); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-600); border-color: var(--gold-600); color: #1a1408; }
.btn--outline { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.btn--outline:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.btn--ghost { background: #fff; color: var(--navy); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn--block { display: flex; width: 100%; }
.btn--sm { padding: 10px 18px; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.5rem; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 78px;
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; color: var(--navy); font-size: 1.18rem; font-family: var(--font-head); }
.brand__mark {
  width: 42px; height: 42px; border-radius: 8px;
  background: linear-gradient(135deg, var(--navy), var(--navy-700));
  color: #fff; display: grid; place-items: center; font-weight: 800; letter-spacing: .5px;
  font-size: .95rem; font-family: var(--font); flex: none;
}
.brand small {
  display: block; font-size: .62rem; font-weight: 600; color: var(--muted); letter-spacing: .03em;
  font-family: var(--font); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px;
}
@media (max-width: 1180px) { .brand small { max-width: 150px; } }
/* Below ~480px, 150px still clips mid-word ("...PAYR..."). The brand name
   alone reads fine without the tagline, so drop it rather than truncate it
   into something that looks unfinished. */
@media (max-width: 480px) { .brand small { display: none; } }
.nav__links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__links > li > a {
  display: inline-block; padding: 10px 14px; border-radius: var(--radius-sm);
  color: var(--ink); font-weight: 600; font-size: .95rem;
}
.nav__links > li > a:hover { background: var(--bg-navy-soft); color: var(--navy); }
.nav__cta { margin-left: 10px; display: flex; align-items: center; gap: 10px; }
.nav__cta .btn { padding: 11px 22px; }
.nav__toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 8px;
}
.nav__toggle span { display: block; height: 2px; background: var(--navy); margin: 5px 0; border-radius: 2px; transition: .2s; }

.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 260px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 14px; margin-top: 10px;
  opacity: 0; visibility: hidden; transition: .16s;
  list-style: none;
  display: grid; grid-template-columns: 1fr; gap: 4px 22px;
}
/* Two-group menus (e.g. Resources: Guides / Tools) */
.dropdown--grouped { min-width: 460px; grid-template-columns: repeat(2, 1fr); padding: 22px; }
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown-group { grid-column: span 1; }
.dropdown-group__label {
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-text); margin: 4px 0 8px; padding: 0 12px;
}
.dropdown a { display: block; padding: 9px 12px; font-size: .92rem; border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; }
.dropdown a:hover { background: var(--bg-navy-soft); color: var(--navy); }
.dropdown a.is-featured { color: var(--gold-text); }

/* ---------- Hero ---------- */
/* Shared fine dot-grid texture for every navy surface (hero, page-hero,
   section--navy). Cheap, no image request (inline SVG data URI), and it's
   the difference between a flat gradient and something that reads as
   considered rather than a bare template background. */
.navy-texture {
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.hero {
  background:
    radial-gradient(1100px 560px at 82% -14%, rgba(200,148,43,.20), transparent 60%),
    radial-gradient(700px 400px at -6% 110%, rgba(28,74,120,.35), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-800) 55%, var(--navy-900) 100%);
  color: #e9f1fa; padding: 96px 0 108px; position: relative; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(160deg, rgba(0,0,0,.9), rgba(0,0,0,.15) 70%);
          mask-image: linear-gradient(160deg, rgba(0,0,0,.9), rgba(0,0,0,.15) 70%);
}
.hero h1 { color: #fff; }
.hero p { color: #c6d6e8; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.9rem; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  padding: 7px 14px; border-radius: var(--radius-sm); font-size: .85rem; color: #dce7f3; font-weight: 600;
}
.hero__card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg); padding: 30px; backdrop-filter: blur(4px);
}
.hero__card h3 { color: #fff; margin-bottom: 1.1rem; font-family: var(--font-head); font-size: 1.15rem; }
.hero__card ul { list-style: none; margin: 0; padding: 0; }
.hero__card li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); color: #d7e3f0; display: flex; gap: 10px; }
.hero__card li:last-child { border-bottom: 0; }

/* ---------- Connected diagram (homepage hero centerpiece) ---------- */
.connect-wrap { text-align: center; }
.connect-wrap h3 { text-align: center; }
.connect-wrap > p.connect-caption { color: #b9c9db; font-size: .88rem; margin: -4px 0 22px; }
.connect-diagram { position: relative; width: 260px; height: 260px; margin: 0 auto; }
.connect-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.connect-lines line { stroke: rgba(212,163,60,.6); stroke-width: 2; stroke-dasharray: 4 5; }
.connect-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 96px; height: 96px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-600));
  color: #1a1408; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: .88rem; line-height: 1.25;
  box-shadow: 0 10px 28px rgba(0,0,0,.35); text-align: center; padding: 4px;
}
.connect-node {
  position: absolute; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  transform: translate(-50%, -50%);
}
.connect-node .ic {
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22);
  display: grid; place-items: center; color: #fff; flex: none;
}
.connect-node .ic svg { width: 20px; height: 20px; }
.connect-node span:last-child { font-size: .76rem; font-weight: 700; color: #e9f1fa; }
.connect-node--top { top: 0; left: 50%; }
.connect-node--right { top: 50%; left: 100%; }
.connect-node--bottom { top: 100%; left: 50%; }
.connect-node--left { top: 50%; left: 0; }
@media (max-width: 400px) {
  .hero__card.connect-wrap { padding: 24px 12px; }
  .connect-diagram { width: 220px; height: 220px; }
  .connect-hub { width: 84px; height: 84px; font-size: .8rem; }
  .connect-node { width: 68px; }
}

/* ---------- Audience picker (homepage: who we help) ---------- */
.audience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.audience-card {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.audience-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-top-color: var(--navy); }
.audience-card .ic { width: 46px; height: 46px; border-radius: 10px; background: var(--bg-navy-soft); display: grid; place-items: center; color: var(--navy-700); }
.audience-card .ic svg { width: 24px; height: 24px; }
.audience-card h3 { margin: 4px 0 0; font-size: 1.05rem; }
.audience-card p { font-size: .92rem; margin-bottom: 4px; }
.audience-card .go { font-weight: 700; font-size: .86rem; margin-top: auto; color: var(--navy-700); }

/* ---------- Grid & cards ---------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid transparent; border-radius: var(--radius-lg);
  padding: 30px; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); border-top-color: var(--gold); }
.card h3 { margin-top: .25rem; }
.card p { margin-bottom: 0; font-size: .98rem; }
.card__icon {
  width: 52px; height: 52px; border-radius: 10px; margin-bottom: 18px;
  background: var(--bg-navy-soft); display: grid; place-items: center; color: var(--navy-700);
  border: 1px solid #dde8f3;
}
.card__icon svg { width: 26px; height: 26px; }
.card a.card__link { font-weight: 700; font-size: .92rem; display: inline-block; margin-top: 16px; }
.card--link { display: block; color: inherit; }
.card--compact { padding: 24px; }

.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li { position: relative; padding: 8px 0 8px 32px; color: var(--slate); }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--success);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/14px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/14px no-repeat;
}

/* ---------- Split / two column ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--reverse .split__media { order: 2; }
.media-card {
  background: linear-gradient(160deg, var(--bg-soft), #fff);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px;
}

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { text-align: center; }
.stat b { display: block; font-family: var(--font-head); font-size: 2.6rem; color: #fff; line-height: 1; }
.stat span { color: #9fb4cc; font-size: .9rem; }

/* ---------- Trust bar (logos / credentials strip) ---------- */
.trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.trust-item {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.trust-item .ic { flex: none; width: 40px; height: 40px; border-radius: 8px; background: var(--bg-navy-soft); display: grid; place-items: center; color: var(--navy-700); }
.trust-item b { display: block; color: var(--navy); font-size: .95rem; }
.trust-item span { font-size: .82rem; color: var(--muted); }

/* ---------- Getting started steps ---------- */
.step-card { position: relative; padding-top: 34px; }
.step-card .step-num {
  position: absolute; top: -16px; left: 26px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--navy); color: #fff; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1rem; box-shadow: var(--shadow-sm);
}

/* ---------- Industries (plain text, no fabricated specialization) ---------- */
.industry-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.industry-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-navy-soft); border: 1px solid #dde8f3; color: var(--navy-800);
  padding: 8px 16px; border-radius: 999px; font-size: .88rem; font-weight: 600;
}
.industry-chip.is-specialty { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- Pillars (about/why-us) ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pillar { padding: 4px 0; }
.pillar .num { font-family: var(--font-head); font-size: 1.6rem; color: var(--gold-text); font-weight: 700; margin-bottom: .3rem; }
.pillar h3 { margin-bottom: .4rem; }

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--gold), #dfae49);
  border-radius: var(--radius-lg); padding: 48px; text-align: center; color: #1a1408;
}
.cta-band h2 { color: #1a1408; }
.cta-band p { color: #4a3a12; }
.cta-band--navy { background: linear-gradient(135deg, var(--navy), var(--navy-800)); color: #fff; }
.cta-band--navy h2, .cta-band--navy p { color: #fff; }
.cta-band--navy p { color: #c6d6e8; }

/* ---------- Urgency / notice banners (IRS resolution) ---------- */
.urgency-banner {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fbf1e9; border: 1px solid #ecd2b6; border-left: 4px solid var(--danger);
  border-radius: var(--radius); padding: 20px 24px; margin: 0 0 8px;
}
.urgency-banner .ic { flex: none; width: 30px; height: 30px; color: var(--danger); }
.urgency-banner strong { color: var(--navy); }
.urgency-banner p { margin: 4px 0 0; }

/* ---------- Table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; min-width: 520px; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); font-size: .95rem; }
th { background: var(--bg-navy-soft); color: var(--navy); font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 20px; margin-bottom: 12px; background: #fff;
}
.faq summary { cursor: pointer; font-weight: 700; color: var(--navy); padding: 16px 0; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--gold-text); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq p { padding: 14px 0 6px; margin: 0; }

/* ---------- Page hero (interior) ---------- */
.page-hero {
  background:
    radial-gradient(900px 420px at 90% -20%, rgba(200,148,43,.14), transparent 60%),
    linear-gradient(160deg, var(--navy), var(--navy-800));
  color: #e9f1fa; padding: 68px 0 72px; position: relative; overflow: hidden;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(160deg, rgba(0,0,0,.85), rgba(0,0,0,.1) 65%);
          mask-image: linear-gradient(160deg, rgba(0,0,0,.85), rgba(0,0,0,.1) 65%);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; max-width: 22ch; }
.page-hero p { color: #c6d6e8; max-width: 62ch; }
.breadcrumb { font-size: .85rem; color: #9fb4cc; margin-bottom: 1.1rem; }
.breadcrumb a { color: #cdddec; }
.breadcrumb a:hover { color: #fff; }

/* Trucking pages get a distinct treatment within the same brand system: a
   warmer glow and a dashed "lane line" motif, so the specialty reads as
   genuinely different from the general service pages, not just a relabeled
   navy box. */
.page-hero--trucking {
  background:
    radial-gradient(900px 460px at 92% -18%, rgba(200,148,43,.24), transparent 60%),
    radial-gradient(700px 380px at 4% 118%, rgba(28,74,120,.4), transparent 60%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy) 55%, var(--navy-800) 100%);
}
.page-hero--trucking::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 26px; height: 3px;
  background-image: repeating-linear-gradient(90deg, var(--gold-on-dark) 0 36px, transparent 36px 68px);
  opacity: .6; pointer-events: none;
}
.specialty-tag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 1rem;
  background: rgba(212,163,60,.14); border: 1px solid rgba(212,163,60,.4);
  color: var(--gold-on-dark); font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
}

/* ---------- Article ---------- */
.article { max-width: 760px; margin: 0 auto; }
.article__meta { color: var(--muted); font-size: .9rem; margin-bottom: 1.5rem; }
.article h2 { margin-top: 2.2rem; }
.article h3 { margin-top: 1.6rem; color: var(--navy-800); font-family: var(--font); }
.article p, .article li { color: #33414f; }
.article ul, .article ol { padding-left: 1.3rem; margin-bottom: 1.2rem; }
.article li { margin-bottom: .5rem; }
.article blockquote {
  border-left: 4px solid var(--gold); background: var(--bg-soft);
  padding: 16px 22px; margin: 1.5rem 0; border-radius: 0 var(--radius) var(--radius) 0; color: var(--navy-800);
}
.article blockquote p { margin: 0; }
.callout {
  background: var(--bg-navy-soft); border: 1px solid #d5e2f0; border-radius: var(--radius);
  padding: 20px 24px; margin: 1.6rem 0;
}
.callout strong { color: var(--navy); }

.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card .tag {
  align-self: flex-start; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--gold-text); background: #fbf3e2; padding: 4px 10px; border-radius: 999px; margin-bottom: 12px;
}
.post-card h3 { font-size: 1.15rem; }
.post-card .read { margin-top: auto; font-weight: 700; font-size: .9rem; padding-top: 12px; }

/* ---------- Contact / info blocks ---------- */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.info-item { display: flex; gap: 14px; align-items: flex-start; }
.info-item .ic { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--bg-navy-soft); display: grid; place-items: center; color: var(--navy-700); }
.info-item b { color: var(--navy); display: block; }

/* ---------- Forms ---------- */
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-weight: 700; font-size: .9rem; color: var(--navy); }
.form-field small { color: var(--muted); font-size: .82rem; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 1rem; font-family: var(--font); color: var(--ink); background: #fff;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(28,74,120,.15); }
.form-grid { display: grid; gap: 18px; }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.form-checks label { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--ink); font-weight: 500; }
.form-note { font-size: .82rem; color: var(--muted); margin-top: 10px; }
.intake-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); }

/* ---------- Tools / calculators ---------- */
.tool-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 30px; }
.result-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0; }
.result-box { background: var(--bg-navy-soft); border: 1px solid #dde8f3; border-radius: var(--radius); padding: 18px; text-align: center; }
.result-box b { display: block; font-family: var(--font-head); font-size: 1.6rem; color: var(--navy); }
.result-box span { font-size: .82rem; color: var(--muted); }
.disclaimer { font-size: .85rem; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #a9bdd4; padding: 64px 0 30px; }
.site-footer h4 { color: #fff; font-size: .95rem; margin-bottom: 1.1rem; letter-spacing: .02em; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; gap: 32px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: #a9bdd4; font-size: .93rem; }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1); margin-top: 44px; padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .85rem; color: #7f96b0;
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 960px) {
  .hero__grid, .split, .split--reverse .split__media { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .grid--4, .audience-grid, .trust-bar { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .result-row { grid-template-columns: 1fr; }
  .form-grid--2, .form-checks { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .nav__links > li > a { padding: 10px 10px; font-size: .9rem; }
  .nav__cta .btn--sm { padding: 9px 14px; font-size: .82rem; }
}
@media (max-width: 960px) {
  .nav { height: 68px; }
  .nav__links {
    position: absolute; top: 68px; left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: stretch; gap: 0; padding: 10px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    display: none; max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .nav__links.open { display: flex; }
  .nav__links > li > a { padding: 12px 14px; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0;
    padding: 0 0 0 12px; margin: 0; min-width: 0; display: block; background: transparent;
  }
  .dropdown-group__label { padding-left: 0; }
  .nav__toggle { display: block; }
  .nav__cta { margin: 8px 0 0; }
  .grid--2, .grid--3, .grid--4, .audience-grid, .trust-bar { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 32px 22px; }
}

/* ==========================================================================
   Header refinements
   ========================================================================== */

/* The top bar now carries the phone number and nothing else on the right.
   Client Login moved into the nav, where it sits beside the booking CTA as
   one of exactly two account actions. */
.topbar__phone { display: inline-flex; align-items: center; gap: 7px; }
.topbar__phone svg { opacity: .85; }

/* External destinations -- today only Permits.Agency. Marked so a visitor can
   see they are leaving BKS before they click, which matters here because the
   whole point of the split is that the two companies are not the same. */
.dropdown a.is-external::after,
.site-footer a.is-external::after {
  content: "↗";
  font-size: .78em;
  margin-left: 5px;
  opacity: .6;
  vertical-align: baseline;
}

/* The Trucking menu is deliberately two labelled halves: BKS on the left,
   Permits.Agency on the right, with a rule between them. A visitor asking
   "who actually files my 2290" should be able to answer it from the menu. */
.dropdown--split { min-width: 520px; }
.dropdown--split .dropdown-group + .dropdown-group {
  border-left: 1px solid var(--line);
  padding-left: 20px;
}

/* Keep the two nav CTAs from wrapping apart at the awkward middle widths
   where the links have not yet collapsed into the burger. */
@media (max-width: 1100px) and (min-width: 981px) {
  .nav__links > li > a { padding: 10px 8px; font-size: .88rem; }
  .nav__cta { gap: 7px; margin-left: 6px; }
  .nav__cta .btn--sm { padding: 9px 12px; font-size: .8rem; }
}

@media (max-width: 980px) {
  /* Stacked menu: the CTAs become full-width targets rather than two small
     buttons squeezed onto one row on a phone. */
  .nav__cta { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; padding: 4px 14px 14px; }
  .nav__cta .btn { width: 100%; padding: 13px 18px; font-size: .95rem; }
  .dropdown--split { min-width: 0; }
  .dropdown--split .dropdown-group + .dropdown-group {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 10px;
    margin-top: 6px;
  }
}

/* ==========================================================================
   Site assistant
   ========================================================================== */

#bks-assistant { position: fixed; right: 20px; bottom: 20px; z-index: 60; }

.bks-chat__launcher {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px;
  border: 1px solid var(--navy-800);
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font: inherit; font-weight: 700; font-size: .95rem;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(8, 27, 48, .28);
  transition: background .18s, transform .18s;
}
.bks-chat__launcher:hover { background: var(--navy-800); transform: translateY(-1px); }
.bks-chat__launcher:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
#bks-assistant.is-open .bks-chat__launcher { display: none; }

/* `[hidden]` sets display:none at attribute specificity, which this rule's
   display:flex would otherwise beat -- the panel then renders open on load. */
.bks-chat__panel[hidden] { display: none; }

.bks-chat__panel {
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 110px));
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(8, 27, 48, .30);
  overflow: hidden;
}

.bks-chat__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px;
  background: var(--navy);
  color: #fff;
}
.bks-chat__head strong { display: block; font-size: .98rem; }
/* #b9cbe0 measures 8.52:1 on --navy (verified, tools/verify-contrast.mjs
   pattern); the plain --muted grey would fail on this ground. */
.bks-chat__head span { display: block; font-size: .76rem; color: #b9cbe0; margin-top: 2px; }
.bks-chat__close {
  background: transparent; border: 0; color: #fff;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  padding: 2px 6px; border-radius: var(--radius-sm);
}
.bks-chat__close:hover { background: rgba(255,255,255,.14); }
.bks-chat__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.bks-chat__log {
  flex: 1; overflow-y: auto; padding: 16px;
  background: var(--bg-soft);
  display: flex; flex-direction: column; gap: 12px;
}
.bks-chat__msg { display: flex; }
.bks-chat__msg--user { justify-content: flex-end; }
.bks-chat__bubble {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: .92rem;
  line-height: 1.55;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
}
.bks-chat__bubble p { margin: 0 0 8px; }
.bks-chat__bubble p:last-child { margin-bottom: 0; }
.bks-chat__bubble a { color: var(--navy); font-weight: 700; text-decoration: underline; }
.bks-chat__msg--user .bks-chat__bubble {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.bks-chat__note { font-size: .82rem; color: var(--muted); }

.bks-chat__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bks-chat__chip {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--navy);
  font: inherit; font-size: .82rem; font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.bks-chat__chip:hover { border-color: var(--navy); background: var(--bg-navy-soft); }
.bks-chat__chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }

.bks-chat__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: #fff; }
.bks-chat__input {
  flex: 1; min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit; font-size: .92rem;
  color: var(--ink);
}
.bks-chat__input:focus { outline: 2px solid var(--navy); outline-offset: 0; border-color: var(--navy); }
.bks-chat__send {
  border: 1px solid var(--navy); background: var(--navy); color: #fff;
  font: inherit; font-weight: 700; font-size: .9rem;
  padding: 11px 16px; border-radius: var(--radius-sm); cursor: pointer;
}
.bks-chat__send:hover { background: var(--navy-800); }
.bks-chat__send:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Visually hidden, still announced. */
.bks-chat__live {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 480px) {
  #bks-assistant { right: 12px; bottom: 12px; left: 12px; }
  .bks-chat__panel { width: 100%; height: min(70vh, 520px); }
  .bks-chat__launcher { float: right; }
}

@media (prefers-reduced-motion: reduce) {
  .bks-chat__launcher { transition: none; }
  .bks-chat__launcher:hover { transform: none; }
}