/* =========================================================================
   BKS Accounting Group: bkstax.com
   Shared stylesheet. Hand-authored, no build step. Mobile-first, responsive.

   v12: Apple-grade design pass.

   WHAT CHANGED AND WHY (short version; the long version is inline):

   1. LIGHT-FIRST. v6 painted the hero, every interior page-hero, one body
      section AND the footer navy. Four dark zones reads as generic dark-SaaS,
      not as a premium professional practice. Navy is still the brand: it is
      now the INK, plus one purposeful dark moment (the trucking band) and the
      footer, which is chrome. Content surfaces are light. Nothing in the
      palette changed, only where it is applied.
   2. TYPE CARRIES HIERARCHY, not boxes. The display scale is larger and
      tracked tighter; the gold-top-border-on-every-card device is gone.
   3. SPACE IS ON A GRID. Every margin, pad and gap comes from the 4/8pt scale
      below. v6 mixed 9px/13px/26px/34px values set by eye.
   4. RESTRAINT ON DEPTH. Shadows were 40-60px blurs on content cards. Cards
      now sit on a hairline; real elevation is reserved for things that
      genuinely float (dropdown, chat panel, sticky nav once scrolled).
   5. FOCUS IS VISIBLE EVERYWHERE. v6 had focus styles on the chat widget and
      nowhere else, so keyboard users lost the caret on every button, link,
      card and form control on the site.
   6. MOTION IS PURPOSEFUL AND OPTIONAL. One reveal, one nav state change,
      honest hover feedback, all of it off under prefers-reduced-motion.

   The contrast-tuned colour tokens from v6 are preserved verbatim, including
   their comments: those values were measured, not guessed, and a redesign is
   exactly when someone is tempted to "simplify" them back into failures.
   ========================================================================= */

:root {
  /* ---- Brand (unchanged) ---- */
  --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 navy surfaces 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;

  /* ---- Surfaces added in v12 ----
     A quieter neutral than --bg-soft for the large alternating bands, so two
     adjacent light sections read as different without either one shouting.
     The Apple equivalent pair is #ffffff / #f5f5f7; these are the same idea
     carried a few degrees toward the brand blue. */
  --bg-tint:     #f7f9fb;
  --ink-strong:  #0d1b2a;

  /* ---- Spacing: 4/8pt grid ----
     Section rhythm, card padding, stack gaps: all of it resolves to one of
     these. A value not on this list does not belong in the file. */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  24px;
  --s6:  32px;
  --s7:  40px;
  --s8:  48px;
  --s9:  64px;
  --s10: 80px;
  --s11: 96px;
  --s12: 128px;

  /* ---- Radii ---- */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   18px;   /* the Apple bento tile radius */
  --radius-pill: 999px;

  /* ---- Elevation ----
     Deliberately shallow. A content card that needs a 60px shadow to separate
     from the page needs a better background, not more blur. --shadow-lg is for
     genuinely floating chrome ONLY (dropdown, chat panel). */
  --shadow-xs:   0 1px 2px rgba(8, 27, 48, .05);
  --shadow-sm:   0 1px 2px rgba(8, 27, 48, .05), 0 6px 14px -10px rgba(8, 27, 48, .16);
  --shadow:      0 1px 3px rgba(8, 27, 48, .06), 0 12px 28px -16px rgba(8, 27, 48, .22);
  --shadow-lg:   0 6px 18px -8px rgba(8, 27, 48, .14), 0 28px 56px -28px rgba(8, 27, 48, .30);

  /* ---- Focus: one ring, used on every interactive element on the site ---- */
  --focus-color: var(--navy-700);

  /* ---- Motion ---- */
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --ease-emph:   cubic-bezier(.16, 1, .3, 1);
  --dur-fast:    140ms;
  --dur:         220ms;
  --dur-slow:    420ms;

  /* ---- Measure ----
     --maxw is the page container. --measure caps RUNNING TEXT independently,
     because a 1120px-wide paragraph is 150+ characters per line however good
     the container is. */
  --maxw:        1120px;
  --measure:     68ch;

  --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; }

/* Smooth scroll is a nicety for in-page anchors and a problem for anyone who
   gets motion sick. v6 applied it unconditionally. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Anchored sections must clear the sticky header or a #hash link lands with
   the heading hidden behind the nav. v6 had no scroll-margin at all, and the
   Resources menu links straight to #trucking-guides. */
[id] { scroll-margin-top: var(--s10); }

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

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

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

/* ---------- Focus: one visible ring, everywhere ----------
   :focus-visible only, so a mouse click never paints a ring but every keyboard
   tab does. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) { outline: none; }

/* On navy grounds a navy ring is invisible. Gold reads on both. */
:where(.section--navy, .cta-band--navy, .site-footer)
  :where(a, button, summary, [tabindex]):focus-visible {
  outline-color: var(--gold-on-dark);
}

/* Skip link. The site had none, so a keyboard user tabbed through 20+ nav
   links on every page before reaching the content. */
.skip-link {
  position: absolute; left: var(--s4); top: var(--s4);
  z-index: 100;
  transform: translateY(-250%);
  background: var(--navy); color: #fff;
  padding: var(--s3) var(--s5);
  border-radius: var(--radius-sm);
  font-weight: 600; font-size: .95rem;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

/* ---------- Typography ----------
   Display type is fluid between 390px and 1440px. Body type is NOT: at a wider
   viewport the measure changes, not the font size. */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  margin: 0 0 .5em;
  font-weight: 700;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.5rem, 1.55rem + 3.9vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
}
h2 {
  font-size: clamp(1.875rem, 1.35rem + 2.2vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
}
h3 {
  font-family: var(--font);
  font-size: 1.1875rem;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.011em;
  color: var(--ink-strong);
}
h4 {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 650;
  letter-spacing: -0.006em;
  color: var(--ink-strong);
}
p { margin: 0 0 var(--s4); color: var(--slate); }
p:last-child { margin-bottom: 0; }

/* Running text never exceeds a readable measure whatever container it sits in.
   Applied to the element, so it survives a page author dropping a <p> in. */
p, li { max-width: var(--measure); }
.text-center p, .section-head p, .cta-band p { margin-left: auto; margin-right: auto; }

strong, b { color: var(--ink-strong); font-weight: 650; }

.lead {
  font-size: clamp(1.125rem, 1.02rem + .42vw, 1.3125rem);
  line-height: 1.5;
  color: var(--slate);
  max-width: 60ch;
  letter-spacing: -0.006em;
}
.text-center { text-align: center; }
.center-narrow { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5); }

/* Section rhythm scales with the viewport instead of sitting at a flat 88px
   that is tight at 1440 and far too loose on a phone. */
.section        { padding: clamp(var(--s9), 7.5vw, var(--s11)) 0; }
.section--tight { padding: clamp(var(--s7), 4.5vw, var(--s9)) 0; }
.section--soft  { background: var(--bg-tint); }

/* The one purposeful dark section. The v6 dot-grid overlay is gone: it was a
   decorative texture that said "template hero" and carried no meaning. The
   colour change alone is enough separation. */
.section--navy {
  background: var(--navy);
  color: #cddced;
  position: relative;
}
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy p { color: #b9c9db; }
.section--navy strong, .section--navy b { color: #fff; }

/* Hairlines between adjacent light sections, so the page has structure without
   every band needing its own background colour. */
.section + .section:not(.section--soft):not(.section--navy) { border-top: 1px solid var(--line); }
.section--soft + .section--soft { border-top: 1px solid var(--line); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: .78rem;
  font-weight: 650;
  /* Positive tracking at small sizes: the inverse of the display scale. */
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: var(--s4);
}
/* The 22px gold rule that prefixed every eyebrow is gone. It appeared 42 times
   across the site and meant nothing; the tracking and colour already mark it. */
.section--navy .eyebrow { color: var(--gold-on-dark); }

.section-head {
  max-width: 720px;
  margin: 0 auto clamp(var(--s7), 5vw, var(--s9));
  text-align: center;
}
.section-head > :last-child { margin-bottom: 0; }

/* ---------- Top utility bar ----------
   Kept, but quieter: it is the least important row on the page and v6 gave it
   a near-black band and bullet dots. */
.topbar {
  background: var(--bg-tint);
  color: var(--muted);
  font-size: .8125rem;
  border-bottom: 1px solid var(--line);
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; height: 40px; gap: var(--s4); }
.topbar__points { display: flex; gap: var(--s5); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.topbar__points li { display: flex; align-items: center; gap: var(--s2); white-space: nowrap; max-width: none; }
.topbar__points li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold); flex: none;
}
.topbar a { color: var(--slate); font-weight: 600; }
.topbar a:hover { color: var(--navy); }
.topbar__actions { display: flex; align-items: center; gap: var(--s5); flex: none; }
.topbar__phone { display: inline-flex; align-items: center; gap: var(--s2); }
.topbar__phone svg { opacity: .7; }
@media (max-width: 860px) { .topbar__points li:nth-child(3) { display: none; } }
@media (max-width: 640px) { .topbar { display: none; } }

/* ---------- Buttons ----------
   Every variant is at least 44px tall, which is the one hard Apple layout
   constraint. v6 shipped 38px and 40px controls.

   The universal translateY(-1px) lift on :hover is gone. Buttons that jump
   under the cursor are a 2016 tell, and on a touch device the transform fires
   on tap and reads as a glitch. Feedback is now a colour shift plus a 0.5px
   press on :active, which is what a physical control does. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px;
  padding: var(--s3) var(--s6);
  border-radius: var(--radius-sm);
  font-weight: 650;
  font-size: .9375rem;
  line-height: 1.2;
  letter-spacing: -0.006em;
  font-family: var(--font);
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(.5px); }

.btn--primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--primary:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* Gold is the single accent and it points at exactly one thing: book a
   consultation. It is not a decoration colour anywhere else in v12. */
.btn--gold { background: var(--gold); color: #1a1408; border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-600); border-color: var(--gold-600); color: #1a1408; }

/* v6 defined this as a white-bordered button for dark grounds only, then used
   it on light page-heroes too, where it rendered as near-invisible white on
   near-white. It is now a light-ground secondary by default, with the
   dark-ground variant scoped to the surfaces that actually are dark. */
.btn--outline {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--navy);
}
.btn--outline:hover { border-color: var(--navy); background: rgba(15, 44, 77, .04); color: var(--navy); }
:where(.section--navy, .cta-band--navy) .btn--outline {
  background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff;
}
:where(.section--navy, .cta-band--navy) .btn--outline:hover {
  background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff;
}

.btn--ghost { background: #fff; color: var(--navy); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--navy); background: var(--bg-tint); color: var(--navy); }

.btn--block { display: flex; width: 100%; }
/* Still 44px tall. Only the horizontal padding and label size shrink. */
.btn--sm { padding: var(--s2) var(--s4); font-size: .875rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* ---------- Header / nav ----------
   Glass belongs on chrome, and this is the only glass on the site. The header
   is flat and borderless at the top of the page and gains its hairline and a
   whisper of elevation once the page scrolls, so the nav separates from
   content only when there is content behind it. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 12px -6px rgba(8, 27, 48, .24);
  background: rgba(255, 255, 255, .9);
}
/* Where the blur is unsupported the translucency would just look washed out. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: #fff; }
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5);
  height: 68px;
}
.brand {
  display: flex; align-items: center; gap: var(--s3);
  font-weight: 700; color: var(--navy); font-size: 1.0625rem;
  font-family: var(--font-head); letter-spacing: -0.014em;
  flex: none;
}
.brand__mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--navy);
  color: #fff; display: grid; place-items: center; font-weight: 700; letter-spacing: .02em;
  font-size: .8125rem; font-family: var(--font); flex: none;
}
.brand small {
  display: block; font-size: .6875rem; font-weight: 500; color: var(--muted);
  letter-spacing: .01em; line-height: 1.3; margin-top: 1px;
  font-family: var(--font); text-transform: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}
@media (max-width: 1180px) { .brand small { max-width: 150px; } }
/* Below ~480px, 150px still clips mid-word. 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: var(--s1); list-style: none; margin: 0; padding: 0; }
.nav__links > li { max-width: none; }
.nav__links > li > a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 var(--s3);
  border-radius: var(--radius-sm);
  color: var(--ink); font-weight: 550; font-size: .9375rem;
  letter-spacing: -0.006em;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__links > li > a:hover { background: rgba(15, 44, 77, .05); color: var(--navy); }
/* The current section is marked in the nav. v6 gave no indication at all of
   where in the site you were. */
.nav__links > li > a[aria-current="page"] { color: var(--navy); font-weight: 650; }
.nav__cta { margin-left: var(--s2); display: flex; align-items: center; gap: var(--s2); }

.nav__toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px;
  border-radius: var(--radius-sm);
  color: var(--navy);
}
.nav__toggle span {
  display: block; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease-emph), opacity var(--dur-fast) var(--ease);
}
.nav__toggle span + span { margin-top: 5px; }
/* The burger becomes a close glyph, so the control states what it will do. */
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Dropdown menus ---------- */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: 100%; left: 0;
  min-width: 280px;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s2);
  margin-top: var(--s1);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease-emph),
              visibility 0s linear var(--dur);
  list-style: none;
  display: grid; grid-template-columns: 1fr; gap: var(--s1) var(--s6);
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur) var(--ease-emph),
              visibility 0s;
}
/* Left-aligned to its trigger rather than centred on it, because a centred
   520px panel under the last-but-two nav item runs off the right edge of a
   1280px window. The right-hand menus are pinned to their right edge instead. */
.has-dropdown:nth-last-child(n + 2):nth-last-child(-n + 4) .dropdown { left: auto; right: 0; }

.dropdown--grouped { min-width: 460px; grid-template-columns: repeat(2, 1fr); padding: var(--s4); }
.dropdown-group { grid-column: span 1; max-width: none; }
.dropdown-group__label {
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: var(--s2) 0 var(--s1); padding: 0 var(--s3);
}
.dropdown a {
  display: flex; align-items: center;
  min-height: 40px;
  padding: var(--s2) var(--s3); font-size: .9063rem; border-radius: var(--radius-sm);
  color: var(--ink); font-weight: 550;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dropdown a:hover { background: rgba(15, 44, 77, .05); color: var(--navy); }
/* v6 tinted IRS Tax Resolution gold to "feature" it, which just made one menu
   row look like a different kind of thing. A menu is a list of peers. */
.dropdown a.is-featured { color: var(--ink); }

.dropdown--split { min-width: 540px; }
.dropdown--split .dropdown-group + .dropdown-group {
  border-left: 1px solid var(--line);
  padding-left: var(--s4);
}

/* 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: "\2197";
  font-size: .8em;
  margin-left: var(--s1);
  opacity: .55;
  vertical-align: baseline;
}

/* ---------- Hero ----------
   LIGHT-FIRST. This was a navy gradient carrying two radial glows and a
   dot-grid overlay: three decorative layers competing with the headline.
   It is now a near-white surface with one very soft warm wash bled in from
   the top right, which is there to keep the fold from reading as flat white
   and for no other reason. The headline does the work. */
.hero {
  background:
    radial-gradient(1200px 620px at 88% -20%, rgba(200, 148, 43, .10), transparent 62%),
    radial-gradient(900px 520px at 4% 0%, rgba(28, 74, 120, .06), transparent 60%),
    var(--bg);
  color: var(--ink);
  padding: clamp(var(--s9), 7vw, var(--s11)) 0 clamp(var(--s9), 7.5vw, var(--s11));
  position: relative;
  border-bottom: 1px solid var(--line);
}
.hero h1 { color: var(--navy); }
.hero p { color: var(--slate); }
.hero__grid {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(var(--s7), 5vw, var(--s10));
  align-items: center; position: relative; z-index: 1;
}
.hero .btn-row { margin-top: var(--s7); }
.hero__badges { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s7); }

/* Chips are metadata, not buttons. v6 styled them as raised pills that looked
   tappable and were not. */
.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: transparent;
  border: 1px solid var(--line-strong);
  padding: var(--s1) var(--s3);
  border-radius: var(--radius-pill);
  font-size: .8125rem; color: var(--slate); font-weight: 550;
  max-width: none;
}
.section--navy .chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); color: #dce7f3; }

/* ---------- Hero panel ----------
   Was a translucent glass card on the navy hero. On a light ground it is a
   plain solid card on a hairline, which is what the restraint pass asks for:
   if a solid card loses nothing, use the solid card. */
.hero__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s6), 3vw, var(--s7));
  box-shadow: var(--shadow-sm);
  max-width: none;
}
.hero__card h3 { margin-bottom: var(--s5); font-size: 1.0625rem; }
.hero__card ul { list-style: none; margin: 0; padding: 0; }
.hero__card li {
  padding: var(--s3) 0; border-bottom: 1px solid var(--line); color: var(--slate);
  display: flex; gap: var(--s3); max-width: none; font-size: .9375rem;
}
.hero__card li:last-child { border-bottom: 0; padding-bottom: 0; }
.hero__card li:first-child { padding-top: 0; }

/* ---------- Proof panel (homepage hero, right column) ----------
   Replaces the abstract four-node "connected" diagram. An SVG schematic of
   boxes labelled Tax / Payroll / Accounting / Compliance is precisely the
   placeholder abstraction the HIG calls a failure: it illustrated a metaphor
   rather than showing anything real. This panel shows the concrete facts a
   prospect actually weighs: what the firm does, for whom, and what happens
   when you get in touch. */
.proof-panel { display: grid; gap: var(--s5); }
.proof-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.proof-panel__head h3 { margin: 0; }
.proof-panel__head span { font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.proof-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.proof-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--s3);
  align-items: start;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: .9375rem;
  max-width: none;
}
.proof-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.proof-list li:first-child { padding-top: 0; }
.proof-list .ic { color: var(--navy-700); width: 22px; height: 22px; display: grid; place-items: center; }
.proof-list .ic svg { width: 18px; height: 18px; }
.proof-list b { display: block; color: var(--ink-strong); font-weight: 650; }
.proof-list span { display: block; color: var(--muted); font-size: .875rem; line-height: 1.45; }
.proof-panel__foot {
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
  font-size: .875rem;
  color: var(--muted);
}
.proof-panel__foot strong { color: var(--ink-strong); }

/* ---------- Audience picker ----------
   The gold 3px top border is gone. It was applied to every card on the site,
   which made it decoration rather than signal. What marks a card as
   interactive now is the hairline darkening and the arrow moving, on hover
   and on keyboard focus alike. */
.audience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.audience-card {
  display: flex; flex-direction: column; gap: var(--s3);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--s6) var(--s5);
  color: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.audience-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); color: inherit; }
.audience-card .ic {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--bg-navy-soft); display: grid; place-items: center; color: var(--navy-700);
}
.audience-card .ic svg { width: 21px; height: 21px; }
.audience-card h3 { margin: var(--s1) 0 0; font-size: 1.0625rem; }
.audience-card p { font-size: .9063rem; margin-bottom: 0; color: var(--slate); max-width: none; }
.audience-card .go {
  font-weight: 650; font-size: .875rem; margin-top: auto; padding-top: var(--s3);
  color: var(--navy-700);
  display: inline-flex; align-items: center; gap: var(--s2);
}
.audience-card .go::after {
  content: "\2192";
  transition: transform var(--dur) var(--ease-emph);
}
.audience-card:hover .go::after { transform: translateX(3px); }

/* ---------- Grid and cards ---------- */
.grid { display: grid; gap: var(--s4); }
.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-radius: var(--radius-lg);
  padding: clamp(var(--s5), 2.5vw, var(--s6));
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Only cards that DO something react to the cursor. A static content card that
   lifts on hover promises a click that never happens: v6 lifted all of them. */
a.card:hover, .card--link:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.card h3 { margin-top: 0; }
.card p { margin-bottom: 0; font-size: .9375rem; max-width: none; }
.card__icon {
  width: 44px; height: 44px; border-radius: 11px; margin-bottom: var(--s5);
  background: var(--bg-navy-soft); display: grid; place-items: center; color: var(--navy-700);
  border: 0;
}
.card__icon svg { width: 22px; height: 22px; }
.card a.card__link, .card .card__link {
  font-weight: 650; font-size: .9063rem; display: inline-flex; align-items: center; gap: var(--s2);
  margin-top: var(--s4);
}
.card--link { display: flex; flex-direction: column; color: inherit; }
.card--link:hover { color: inherit; }
.card--compact { padding: var(--s5); }

.feature-list { list-style: none; margin: 0; padding: 0; }
.feature-list li { position: relative; padding: var(--s2) 0 var(--s2) var(--s7); color: var(--slate); }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  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/13px 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/13px no-repeat;
}

/* ---------- Split / two column ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s7), 5vw, var(--s10)); align-items: center; }
.split--reverse .split__media { order: 2; }
.split h2 { margin-bottom: var(--s5); }
.media-card {
  background: var(--bg-tint);
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(var(--s5), 3vw, var(--s7));
}
.section--navy .media-card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }

/* ---------- Stats ----------
   Was a navy slab with white numerals dropped into the page on an inline
   style. Light-first: the figures are navy on a quiet panel, and the numerals
   get the display serif at a size that lets them carry the row. */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s6), 3vw, var(--s7)) var(--s5);
}
.stat { text-align: center; }
.stat b {
  display: block; font-family: var(--font-head); font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  color: var(--navy); line-height: 1; letter-spacing: -0.024em; font-weight: 700;
}
.stat span { color: var(--muted); font-size: .875rem; display: block; margin-top: var(--s2); }
.section--navy .stats { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }
.section--navy .stat b { color: #fff; }
.section--navy .stat span { color: #9fb4cc; }

/* ---------- Trust bar ---------- */
.trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.trust-item {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.trust-item .ic { flex: none; width: 36px; height: 36px; border-radius: 9px; background: var(--bg-navy-soft); display: grid; place-items: center; color: var(--navy-700); }
.trust-item b { display: block; color: var(--ink-strong); font-size: .9375rem; }
.trust-item span { font-size: .8125rem; color: var(--muted); }

/* ---------- Process steps ----------
   v6 hung a navy circle half outside the top-left corner of each card. The
   number is now typographic and inside the card, which removes the clipping
   risk and reads as a sequence rather than as four badges. */
.step-card { position: relative; padding-top: clamp(var(--s5), 2.5vw, var(--s6)); }
.step-card .step-num {
  position: static;
  display: block;
  width: auto; height: auto;
  background: none; box-shadow: none;
  font-family: var(--font-head); font-weight: 700; font-size: 1.125rem;
  color: var(--gold-text);
  letter-spacing: .02em;
  margin-bottom: var(--s3);
}
.step-card .step-num::before { content: "0"; }

/* ---------- Industries ---------- */
.industry-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.industry-chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  background: #fff; border: 1px solid var(--line-strong); color: var(--ink);
  padding: var(--s2) var(--s4); border-radius: var(--radius-pill); font-size: .875rem; font-weight: 550;
  max-width: none;
}
.industry-chip.is-specialty { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(var(--s6), 3vw, var(--s8)); }
.pillar { padding: 0; max-width: none; }
.pillar .num {
  font-family: var(--font-head); font-size: 1.125rem; color: var(--gold-text); font-weight: 700;
  margin-bottom: var(--s3); letter-spacing: .02em;
}
.pillar h3 { margin-bottom: var(--s3); }
.pillar p { max-width: none; }

/* ---------- CTA band ----------
   Was a gold gradient slab. A full-width gradient in the accent colour is the
   single most dated element on a 2020s marketing page, and it also forced the
   primary button inside it to be re-coloured with an inline style to stay
   visible. It is now a quiet panel where the type and the button carry the
   moment. */
.cta-band {
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s8), 6vw, var(--s10)) clamp(var(--s5), 4vw, var(--s9));
  text-align: center;
  color: var(--ink);
}
.cta-band h2 { color: var(--navy); margin-bottom: var(--s4); }
.cta-band p { color: var(--slate); max-width: 56ch; }
.cta-band .btn-row { justify-content: center; margin-top: var(--s7); }
.cta-band--navy { background: var(--navy); border-color: var(--navy); }
.cta-band--navy h2 { color: #fff; }
.cta-band--navy p { color: #c6d6e8; }

/* ---------- Notice / urgency banner ---------- */
.urgency-banner {
  display: flex; gap: var(--s4); align-items: flex-start;
  background: #fdf6ef; border: 1px solid #f0dcc4;
  border-left: 3px solid var(--danger);
  border-radius: var(--radius); padding: var(--s5); margin: 0;
}
.urgency-banner .ic { flex: none; width: 24px; height: 24px; color: var(--danger); }
.urgency-banner .ic svg { width: 24px; height: 24px; }
.urgency-banner strong { color: var(--ink-strong); }
.urgency-banner p { margin: var(--s1) 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: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--line); font-size: .9375rem; }
th {
  background: var(--bg-tint); color: var(--ink-strong); font-weight: 650;
  font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
}
td { color: var(--slate); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- FAQ ---------- */
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--s5);
  margin-bottom: var(--s2); background: #fff;
  transition: border-color var(--dur) var(--ease);
}
.faq details:hover { border-color: var(--line-strong); }
.faq details[open] { border-color: var(--line-strong); }
.faq summary {
  cursor: pointer; font-weight: 650; color: var(--ink-strong);
  padding: var(--s4) var(--s7) var(--s4) 0; list-style: none; position: relative;
  min-height: 44px; display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
/* A rotating chevron rather than a +/- glyph swap: one element, one state, and
   it animates rather than popping. */
.faq summary::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur) var(--ease-emph);
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq p { padding: 0 0 var(--s5); margin: 0; }

/* ---------- Page hero (interior) ----------
   LIGHT-FIRST, same reasoning as the homepage hero. Every interior page on the
   site opened with the same navy gradient box, so all 20 pages had an
   identical, and identically heavy, first impression. */
.page-hero {
  background: var(--bg-tint);
  color: var(--ink);
  padding: clamp(var(--s8), 5.5vw, var(--s10)) 0 clamp(var(--s8), 5vw, var(--s9));
  position: relative;
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { color: var(--navy); max-width: 20ch; }
.page-hero p { color: var(--slate); max-width: 58ch; }
.page-hero .lead { color: var(--slate); }
.page-hero .btn-row { margin-top: var(--s6); }

.breadcrumb { font-size: .8125rem; color: var(--muted); margin-bottom: var(--s5); }
.breadcrumb a { color: var(--slate); font-weight: 550; }
.breadcrumb a:hover { color: var(--navy); }

/* The trucking pages keep a distinct treatment within the same system: a
   warmer wash and the dashed lane-line motif, so the specialty reads as
   genuinely different from the general service pages. On the light ground the
   motif reads as a detail instead of as a decoration stuck to a dark box. */
.page-hero--trucking {
  background:
    radial-gradient(900px 460px at 92% -30%, rgba(200, 148, 43, .16), transparent 62%),
    var(--bg-tint);
}
.page-hero--trucking::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--gold) 0 34px, transparent 34px 68px);
  opacity: .5; pointer-events: none;
}
.specialty-tag {
  display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4);
  background: #fbf3e2; border: 1px solid #ecd9b0;
  color: var(--gold-text); font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: var(--s1) var(--s3); border-radius: var(--radius-pill);
}

/* ---------- Article ---------- */
.article { max-width: 720px; margin: 0 auto; }
.article__meta { color: var(--muted); font-size: .875rem; margin-bottom: var(--s7); }
.article h2 { margin-top: var(--s9); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); }
.article h3 { margin-top: var(--s7); margin-bottom: var(--s3); color: var(--ink-strong); font-family: var(--font); font-size: 1.125rem; }
.article p, .article li { color: #313f4d; }
.article p { margin-bottom: var(--s5); }
.article ul, .article ol { padding-left: var(--s5); margin-bottom: var(--s5); }
.article li { margin-bottom: var(--s2); }
.article blockquote {
  border-left: 2px solid var(--gold); background: transparent;
  padding: var(--s1) 0 var(--s1) var(--s5); margin: var(--s7) 0; border-radius: 0;
  color: var(--ink-strong); font-size: 1.0625rem;
}
.article blockquote p { margin: 0; color: var(--ink-strong); }
.callout {
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s5); margin: var(--s7) 0;
}
.callout strong { color: var(--ink-strong); }
.callout p:last-child { margin-bottom: 0; }

.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card .tag {
  align-self: flex-start; font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); background: transparent; border: 0;
  padding: 0; border-radius: 0; margin-bottom: var(--s3);
}
.post-card h3 { font-size: 1.0625rem; line-height: 1.35; }
.post-card p { color: var(--slate); }
.post-card .read {
  margin-top: auto; font-weight: 650; font-size: .875rem; padding-top: var(--s4);
  color: var(--navy-700); display: inline-flex; align-items: center; gap: var(--s2);
}
.post-card .read::after { content: "\2192"; transition: transform var(--dur) var(--ease-emph); }
.post-card:hover .read::after { transform: translateX(3px); }

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

/* ---------- Forms ----------
   Controls are 44px tall, labels sit tight to their field, and the focus state
   is the same ring the rest of the site uses rather than a bespoke glow. */
.form-field { display: flex; flex-direction: column; gap: var(--s2); max-width: none; }
.form-field label { font-weight: 650; font-size: .875rem; color: var(--ink-strong); }
.form-field small { color: var(--muted); font-size: .8125rem; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%; min-height: 44px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 1rem; font-family: var(--font); color: var(--ink); background: #fff;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-field textarea { min-height: 120px; padding-top: var(--s3); resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted); }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--muted); }
.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, .16);
}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible { outline: none; }
/* Error state, only AFTER the person has actually done something.
   The first version of this used `:invalid:not(:placeholder-shown)`, which is
   the common recipe -- and it is wrong whenever the input has no placeholder
   attribute, because `:not(:placeholder-shown)` is then always true. These
   fields have no placeholders, so every required field on the contact and
   intake forms rendered with a red border before the visitor had typed a
   single character: a form that looks like it has already failed.
   `:user-invalid` is the purpose-built selector -- it matches only once the
   field has been edited and blurred, or the form submitted. Where it is not
   supported the field simply keeps its normal border, which is the correct
   way for this to degrade. */
.form-field :user-invalid {
  border-color: var(--danger);
}
.form-field :user-invalid + small,
.form-field :user-invalid ~ small { color: var(--danger); }
.form-grid { display: grid; gap: var(--s5); }
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
.form-checks label {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 44px;
  font-size: .9375rem; color: var(--ink); font-weight: 500;
  max-width: none;
}
.form-checks input[type="checkbox"], .form-checks input[type="radio"] {
  width: 18px; height: 18px; flex: none; accent-color: var(--navy);
}
.form-note { font-size: .8125rem; color: var(--muted); margin-top: var(--s3); }
.intake-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(var(--s5), 3vw, var(--s7));
}

/* ---------- Tools / calculators ---------- */
.tool-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(var(--s5), 3vw, var(--s7));
}
.result-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: var(--s6) 0; }
.result-box {
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s5) var(--s4); text-align: center;
}
.result-box b {
  display: block; font-family: var(--font-head); font-size: 1.75rem; color: var(--navy);
  letter-spacing: -0.02em; line-height: 1.1;
}
.result-box span { font-size: .8125rem; color: var(--muted); display: block; margin-top: var(--s1); }
.disclaimer {
  font-size: .8125rem; color: var(--muted); background: var(--bg-tint);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s5);
  max-width: none;
}

/* ---------- Footer ----------
   Stays navy. A footer is chrome, not content, and the site needs one anchored
   base. What changed is the rhythm and the type scale, which were cramped. */
.site-footer { background: var(--navy-900); color: #9fb4cc; padding: clamp(var(--s9), 6vw, var(--s10)) 0 var(--s7); }
.site-footer h4 {
  color: #fff; font-size: .8125rem; margin-bottom: var(--s5);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 650;
}
.site-footer p { color: #9fb4cc; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.15fr; gap: var(--s7) var(--s6); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s3); max-width: none; font-size: .9063rem; line-height: 1.45; }
.site-footer a { color: #b6c8dc; font-size: .9063rem; }
.site-footer a:hover { color: #fff; }
.site-footer .brand { color: #fff; }
.site-footer .brand__mark { background: rgba(255, 255, 255, .1); color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1); margin-top: var(--s8); padding-top: var(--s5);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s3);
  font-size: .8125rem; color: #7f96b0;
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* ---------- Reveal on scroll ----------
   The ONE ambient motion on the site. Sections fade and rise 12px once, when
   first scrolled into view. No parallax, no pinning, no scroll-jacking: this
   is a professional practice, not a product launch page.

   .reveal is only ever added by JS, so a no-JS visitor sees everything at full
   opacity rather than a blank page. The reduced-motion branch below turns the
   whole thing into a no-op. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); }
  .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease-emph);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ==========================================================================
   Breakpoints are content-driven and there are now three of them (1080 / 900 /
   600) instead of v6's six overlapping ones at 1180/1100/1080/980/960/640,
   which fought each other in the 960-1100 band. */

@media (max-width: 1080px) {
  .grid--4, .audience-grid, .trust-bar { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .nav__links > li > a { padding: 0 var(--s2); font-size: .9063rem; }
  .dropdown--split { min-width: 460px; }
}

@media (max-width: 900px) {
  /* ---- Layout reflow ---- */
  .hero__grid, .split, .split--reverse .split__media { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s4); }
  .info-grid, .pillars, .result-row { grid-template-columns: 1fr; }
  .form-grid--2, .form-checks { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .page-hero h1, .hero h1 { max-width: none; }

  /* ---- Mobile navigation ----
     The panel is a real sheet: it slides from under the header, scrolls
     independently, and traps nothing (Escape and a click on the scrim both
     close it, handled in main.js). */
  .nav { height: 60px; }
  .nav__links {
    position: fixed;
    top: var(--header-h, 60px); left: 0; right: 0;
    max-height: calc(100dvh - var(--header-h, 60px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s3) var(--s4) calc(var(--s7) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .nav__links.open { display: flex; }
  .nav__links > li > a {
    min-height: 48px; padding: 0 var(--s3); font-size: 1rem; font-weight: 600;
    border-radius: var(--radius-sm);
  }
  .nav__links > li + li { border-top: 1px solid var(--line); }
  .nav__links > li.nav__cta { border-top: 0; }

  /* Submenus are plain indented lists on a phone: no hover, no popover. */
  .dropdown, .dropdown--grouped, .dropdown--split {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent;
    padding: 0 0 var(--s3) var(--s3); margin: 0; min-width: 0;
    display: block;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .dropdown a { min-height: 44px; font-size: .9375rem; color: var(--slate); }
  .dropdown-group__label { padding-left: var(--s3); margin-top: var(--s3); }
  .dropdown--split .dropdown-group + .dropdown-group {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--line); padding-top: var(--s3); margin-top: var(--s3);
  }
  .nav__toggle { display: block; }
  .nav__cta {
    flex-direction: column; align-items: stretch; width: 100%;
    gap: var(--s2); margin: var(--s4) 0 0; padding: 0;
  }
  .nav__cta .btn { width: 100%; min-height: 48px; font-size: .9375rem; }
}

@media (max-width: 600px) {
  .container { padding: 0 var(--s4); }
  .grid--4, .audience-grid, .trust-bar, .footer-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .cta-band { padding: var(--s8) var(--s5); }
  .btn-row > .btn { flex: 1 1 100%; }
  .footer-bottom { flex-direction: column; gap: var(--s2); }
  table { min-width: 420px; }
}

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

#bks-assistant { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 60; }

.bks-chat__launcher {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px;
  padding: var(--s3) var(--s5);
  border: 1px solid var(--navy);
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: #fff;
  font: inherit; font-weight: 650; font-size: .9375rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.bks-chat__launcher:hover { background: var(--navy-800); box-shadow: var(--shadow-lg); }
#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 - var(--s6)));
  height: min(560px, calc(100dvh - 120px));
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.bks-chat__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4);
  background: var(--navy);
  color: #fff;
}
.bks-chat__head strong { display: block; font-size: .9375rem; color: #fff; }
/* #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: .75rem; color: #b9cbe0; margin-top: 1px; }
.bks-chat__close {
  background: transparent; border: 0; color: #fff;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: var(--radius-sm); flex: none;
}
.bks-chat__close:hover { background: rgba(255, 255, 255, .14); }

.bks-chat__log {
  flex: 1; overflow-y: auto; padding: var(--s4);
  background: var(--bg-tint);
  display: flex; flex-direction: column; gap: var(--s3);
}
.bks-chat__msg { display: flex; }
.bks-chat__msg--user { justify-content: flex-end; }
.bks-chat__bubble {
  max-width: 86%;
  padding: var(--s3) var(--s4);
  border-radius: 16px;
  font-size: .9063rem;
  line-height: 1.5;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
}
.bks-chat__bubble p { margin: 0 0 var(--s2); max-width: none; }
.bks-chat__bubble p:last-child { margin-bottom: 0; }
.bks-chat__bubble a { color: var(--navy); font-weight: 650; text-decoration: underline; }
.bks-chat__msg--user .bks-chat__bubble {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.bks-chat__note { font-size: .8125rem; color: var(--muted); }

.bks-chat__chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.bks-chat__chip {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--navy);
  font: inherit; font-size: .8125rem; font-weight: 600;
  min-height: 36px;
  padding: var(--s2) var(--s3);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.bks-chat__chip:hover { border-color: var(--navy); background: var(--bg-navy-soft); }

.bks-chat__form { display: flex; gap: var(--s2); padding: var(--s3); border-top: 1px solid var(--line); background: #fff; }
.bks-chat__input {
  flex: 1; min-width: 0; min-height: 44px;
  padding: var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit; font-size: .9063rem;
  color: var(--ink);
}
.bks-chat__input:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(28, 74, 120, .16); }
.bks-chat__send {
  border: 1px solid var(--navy); background: var(--navy); color: #fff;
  font: inherit; font-weight: 650; font-size: .875rem;
  min-height: 44px; padding: 0 var(--s4); border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.bks-chat__send:hover { background: var(--navy-800); }

/* 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: 600px) {
  #bks-assistant { right: var(--s3); bottom: var(--s3); left: var(--s3); }
  .bks-chat__panel { width: 100%; height: min(70dvh, 520px); }
  .bks-chat__launcher { float: right; }
}

/* ==========================================================================
   Helpers introduced in v12 to retire inline styles
   ==========================================================================
   Each of these replaces a style="" attribute that was patching a gap in the
   stylesheet. Inline styles win over every token in :root, so they are how a
   design system quietly stops being one. */

/* The "looking for something specific?" line under a grid. */
.section-foot {
  margin: var(--s7) auto 0;
  font-size: .9375rem;
  color: var(--slate);
}

/* A button row centred under a centred block. */
.btn-row--center { justify-content: center; }

/* The sister-company note at the foot of the trucking media card. */
.media-card__note {
  font-size: .875rem;
  margin: var(--s5) 0 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  max-width: none;
}
.section--navy .media-card__note { border-top-color: rgba(255, 255, 255, .14); color: #a9bdd4; }
.section--navy .media-card__note a { color: var(--gold-on-dark); font-weight: 650; }
.section--navy .media-card__note a:hover { color: #e9c67e; }

/* Footer brand paragraph. */
.footer-blurb { margin-top: var(--s4); color: #9fb4cc; max-width: 34ch; }

/* The footer brand lockup needs the same white treatment the shell used to
   hand-paint with two inline colour declarations. */
.site-footer .brand span { color: #fff; }
.site-footer .brand small { color: #8fa6c0; }

/* ==========================================================================
   Dark-ground text: the rules that used to be inline styles
   ==========================================================================
   v6 hand-painted every element inside the navy band with a style attribute
   (color:#d7e3f0 on each of five list items, and so on). Removing those
   attributes without adding these rules would have left slate-grey body text
   on a navy ground at roughly 2:1, which is why they are here and not left to
   the generic .section--navy colour. */

:where(.section--navy, .cta-band--navy) li { color: #cddced; }
:where(.section--navy, .cta-band--navy) .feature-list li { color: #cddced; }

/* The check bullet is a graphic, so it needs 3:1 rather than 4.5:1, but the
   --success green is 2.3:1 on navy and fails even that. This is the same
   green lifted until it clears comfortably on the navy ground. */
:where(.section--navy, .cta-band--navy) .feature-list li::before { background: #58c395; }

:where(.section--navy, .cta-band--navy) .breadcrumb { color: #9fb4cc; }
:where(.section--navy, .cta-band--navy) .breadcrumb a { color: #cdddec; }
:where(.section--navy, .cta-band--navy) .breadcrumb a:hover { color: #fff; }
:where(.section--navy, .cta-band--navy) a:not(.btn) { color: var(--gold-on-dark); }
:where(.section--navy, .cta-band--navy) a:not(.btn):hover { color: #e9c67e; }

/* A secondary note under a page-hero lead: same voice, one step down. Used on
   the two pages that have to say out loud which company does the filing. */
.lead--note {
  font-size: 1rem;
  color: var(--muted);
  margin-top: var(--s4);
}
.lead--note strong { color: var(--ink-strong); }

/* Numeric marker on a process card. Replaces a second <h3> per card that
   existed only to render "1." in a gold that failed AA on white. */
.card__step {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .02em;
  color: var(--gold-text);
  margin-bottom: var(--s3);
}

/* Interior pages are navigation, not promotion. Letting them share the
   homepage display size meant a 55-character article title set four lines deep
   at 64px before the reader reached a word of the article. The homepage hero
   keeps the full scale; it is the one display moment on the site. */
.page-hero h1 { font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem); max-width: 26ch; }
.page-hero .lead { max-width: 62ch; }

/* ==========================================================================
   Touch targets
   ==========================================================================
   Audited in-browser at 375px: 23 controls were under the 44px minimum, and
   all but the inline sentence links were in the footer, where the column
   links sat at an 18px line box. Inline links inside running prose are the
   documented exception to the rule and are left alone; everything a thumb is
   meant to aim at is not.

   The hit area grows, the type does not: these rules add height around the
   label rather than making the footer look like a menu. */
.brand { min-height: 44px; }

@media (max-width: 900px) {
  .site-footer li { margin-bottom: 0; }
  .site-footer li > a {
    display: flex; align-items: center;
    min-height: 44px;
  }
  /* The plain-text rows (address, hours) are not links and keep their rhythm. */
  .site-footer li:not(:has(> a)) { padding: var(--s2) 0; }
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }

  /* The floating assistant launcher sits bottom-right over whatever is last
     on the page. Give the footer room so it never covers the final row. */
  .site-footer { padding-bottom: calc(var(--s10) + env(safe-area-inset-bottom)); }
}

/* ---------- Form field details ----------
   A checkbox is not a text input and must not inherit the 44px-tall bordered
   box the text inputs get. v6 patched this per-instance with an inline
   width:auto, which fixed the width and left the border and the height. */
.form-field input[type="checkbox"],
.form-field input[type="radio"] {
  width: 18px; height: 18px; min-height: 0;
  padding: 0; border-radius: 4px;
  accent-color: var(--navy);
  flex: none;
}
.form-field--check label,
.form-field label:has(> input[type="checkbox"]),
.form-field label:has(> input[type="radio"]) {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 44px;
  font-weight: 550; font-size: .9375rem; color: var(--ink);
}

/* Stacked fields inside a tool card: the rhythm was eleven hand-placed
   margin-top:18px attributes. */
.tool-card .form-field + .form-field,
.tool-card .form-field + .result-row,
.tool-card .result-row + .disclaimer { margin-top: var(--s5); }

.result-row--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .result-row--2 { grid-template-columns: 1fr; } }

/* A range slider is not a text box either: the generic input rule was drawing
   a white bordered field around the track. accent-color gives the native
   control in the brand colour, which is both the most restrained option and
   the one that keeps the platform behaviour intact. */
.form-field input[type="range"] {
  border: 0; background: transparent; padding: 0;
  min-height: 44px;
  accent-color: var(--navy);
  cursor: pointer;
}

/* ==========================================================================
   Overflow safety
   ==========================================================================
   A grid or flex item defaults to min-width:auto, which means it refuses to
   shrink below its content's min-content size. One wide descendant -- here the
   IFTA and office-hours tables, which carry a 520px min-width so they stay
   readable -- then widens the whole track and pushes the page sideways.
   Measured at 390px: /contact.html and /services/trucking-accounting.html
   were scrolling to 487px.

   min-width:0 lets the track shrink to the column it was given; the table
   then overflows its OWN box, where .table-wrap catches it and scrolls, which
   is what that wrapper was for in the first place. */
.split > *,
.grid > *,
.hero__grid > *,
.form-grid > *,
.audience-grid > *,
.footer-grid > *,
.stats > *,
.info-grid > *,
.pillars > *,
.result-row > *,
.trust-bar > * { min-width: 0; }

.table-wrap { max-width: 100%; }

/* Visually hidden but still announced. Used where a section needs a heading
   for the document outline that would be redundant on screen. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The hero panel heading is an h2 for the document outline (it sits directly
   under the h1 and an h3 there was a skipped level); it is sized as the panel
   title, not as a section heading. */
.proof-panel__head h2 {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.011em;
  color: var(--ink-strong);
}

/* Utility-bar and menu hit areas. Measured at 1280px: the top-bar phone link
   was a 21px line box and every dropdown row was 40px. The bar is only 40px
   tall so the phone link cannot reach 44, but 32 clears the 24px WCAG 2.5.8
   minimum with room; the dropdown rows have space and go to the full 44. */
.topbar a { display: inline-flex; align-items: center; min-height: 32px; }
.dropdown a { min-height: 44px; }

/* ---------- Print ----------
   Printed pages get no scrolling and no observer callbacks, so the reveal must
   not be able to hide anything on paper. This matters here more than on most
   sites: people print the deadline lists, the deduction guides and the
   calculator results. The chrome that is useless on paper goes with it. */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  /* Hide true chrome only. An earlier version of this also hid .cta-band and
     .btn-row -- which is where the phone number lives on most pages, so the
     printed copy lost the one thing a person holding a piece of paper needs. */
  .site-header, .topbar, .nav__toggle, #bks-assistant, .skip-link,
  .breadcrumb { display: none !important; }
  /* Buttons stop being buttons on paper and become plain, readable lines. */
  .btn {
    border: 0 !important; background: none !important; color: #000 !important;
    padding: 0 !important; min-height: 0 !important; font-weight: 700;
    display: inline !important;
  }
  .btn-row { display: block !important; margin: 6pt 0 0; }
  .btn-row > .btn::after { content: " · "; }
  .btn-row > .btn:last-child::after { content: ""; }
  body { font-size: 12pt; line-height: 1.45; color: #000; background: #fff; }
  .section, .section--tight, .page-hero, .hero { padding: 12pt 0; }
  .section--navy, .page-hero, .hero, .section--soft { background: #fff !important; color: #000 !important; }
  .section--navy h2, .section--navy h3, .section--navy p, .section--navy li { color: #000 !important; }
  .card, .tool-card, .intake-card, .hero__card, .result-box, .stats {
    border: 1px solid #999 !important; box-shadow: none !important; break-inside: avoid;
  }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  a[href^="/"]::after, a[href^="#"]::after, a[href^="tel"]::after, a[href^="mailto"]::after { content: ""; }
  h1, h2, h3 { break-after: avoid; }
}

/* Set on <html> by the reveal failsafe in main.js: show everything at once,
   with no transition. See the comment on showAll(). */
.reveal-off .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Brand tagline width. The 150px cap exists for the crowded 960-1180 band
   where the full nav and the tagline compete for the same row. Once the nav
   collapses to the burger that competition is gone and the cap only produces
   a truncated fragment ("Tax - Accounting - Payroll ..."), which looks like a
   rendering fault rather than a tagline. Below 480 it is dropped entirely:
   the brand name alone reads fine, and no truncation reads well. */
@media (max-width: 900px) { .brand small { max-width: none; } }
@media (max-width: 480px) { .brand small { display: none; } }

/* ---------- Scrollable table affordance ----------
   Tables keep a 520px min-width so the columns stay readable, which means on a
   phone they scroll inside .table-wrap. Nothing said so: the table simply
   looked cropped. This is the classic pure-CSS scroll shadow -- two white
   cover layers that scroll WITH the content (background-attachment: local) and
   two shadow layers pinned to the edges. The shadow is therefore visible only
   while there is more table in that direction, and vanishes by itself at
   either end. No JS, no scroll listener, nothing to animate.

   The cover layers are opaque, so the wrapper needs a known background; white
   is correct on every ground the tables actually sit on (white article body,
   white card, tinted section) and makes the table read as its own surface. */
.table-wrap {
  background-color: #fff;
  background-image:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left,  #fff 30%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0%   50%, rgba(8, 27, 48, .14), rgba(8, 27, 48, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(8, 27, 48, .14), rgba(8, 27, 48, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 36px 100%, 36px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}