/* =====================================================================
   Deziel's Tax Service — Static rebuild stylesheet
   Built per design-reference.md (Slice 2). All values from
   Technical Stack Reference v2.4.0 + Fluid Design System reproduction.
   ===================================================================== */

/* ---- Tokens ---- */
:root {
  /* Palette */
  --navy: #003857;
  --teal-active: #2E8980;
  --teal-muted: #A1C0BD;
  --white-on-navy: #F7FBFF;
  --white-on-teal: #F7FFFE;
  --slate: #3D5A73;
  --stone: #6B7D7D;
  --warm-white: #F5F3F0;

  /* Type — Fluid clamp() reproductions of Heebo presets.
     Headings scaled down per Mark's 2026-06-08 feedback ("elements a bit
     smaller"). Body (Text-S / Text-Base) left at brand presets for legibility. */
  --type-s:    clamp(0.75rem, 0.6875rem + 0.3125vw, 0.875rem);
  --type-base: clamp(1rem, 0.875rem + 0.625vw, 1.125rem);
  --type-h-xs: clamp(1rem, 0.9375rem + 0.3125vw, 1.125rem);
  --type-h-s:  clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
  --type-h-m:  clamp(1.5rem, 1.2rem + 1.5vw, 2.125rem);
  --type-h-l:  clamp(2.125rem, 1.6rem + 2.6vw, 3rem);

  /* Spacing — M/L/XL pulled back per the 2026-06-23 meeting ("elements too
     big / too airy"). The earlier "more white space" bump overshot; these
     are the corrected, tighter steps. XS/S unchanged (inline rhythm stays
     tight); M/L/XL trimmed for less section air. */
  --space-xs: clamp(0.5rem, 0.4375rem + 0.3125vw, 0.75rem);
  --space-s:  clamp(1rem, 0.875rem + 0.625vw, 1.5rem);
  --space-m:  clamp(1.1rem, 0.95rem + 0.9vw, 1.75rem);
  --space-l:  clamp(2rem, 1.55rem + 2.2vw, 3rem);
  --space-xl: clamp(2.75rem, 2.05rem + 3.4vw, 4rem);

  --container-max: 1140px;
  --radius-card: 12px;
  --radius-pill: 999px;
  --border-thin: 1px solid rgba(0, 56, 87, 0.12);

  /* Heebo via @font-face fallback */
  --font-stack: "Heebo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- Reset + base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-stack);
  font-size: var(--type-base);
  line-height: 1.55;
  color: var(--navy);
  background: #fff;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-active); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
a:focus-visible { outline: 3px solid var(--teal-active); outline-offset: 2px; }
button { font: inherit; }

/* Skip link */
.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--navy); color: var(--white-on-navy);
  padding: var(--space-s); z-index: 999;
}
.skip-link:focus { top: 0; }

/* ---- Heebo @font-face (self-hosted; falls back gracefully if files absent) ---- */
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local("Heebo Thin"), local("Heebo-Thin");
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Heebo");
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Heebo Bold"), local("Heebo-Bold");
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local("Heebo Black"), local("Heebo-Black");
}

/* ---- Type hierarchy ---- */
h1, h2, h3, h4 { margin: 0 0 var(--space-s); line-height: 1.15; font-weight: 700; }
h1 { font-size: var(--type-h-l); font-weight: 900; letter-spacing: -0.01em; }
h2 { font-size: var(--type-h-m); }
h3 { font-size: var(--type-h-s); }
h4 { font-size: var(--type-h-xs); }
p  { margin: 0 0 var(--space-s); }
small, .text-s { font-size: var(--type-s); }

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-m);
}

/* ---- Header ---- */
.site-header {
  background: var(--navy);
  color: var(--white-on-navy);
  padding-block: var(--space-s);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 2px solid var(--teal-active);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}
.site-header__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  color: var(--white-on-navy);
  font-family: var(--font-stack);
  /* Wordmark trimmed per Mark's 2026-06-08 feedback ("elements a bit smaller"). */
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.site-header__brand:hover,
.site-header__brand:focus { text-decoration: none; color: var(--white-on-navy); }
.site-header__brand .brand__strong {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.site-header__brand .brand__light  { font-weight: 300; }

/* Real logo (white wordmark) replaces the text wordmark. Sized to the trimmed
   scale Mark asked for; max-width keeps the wide lockup from overflowing on
   narrow screens. */
.site-header__logo {
  display: block;
  height: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  width: auto;
  max-width: 70vw;
}

/* Inside-page header variant — wordmark on line 1, tagline stacked below.
   Home keeps the wordmark-only header because the tagline already lives in
   the hero as H1. Inside pages have no hero, so the tagline rides under
   the wordmark in the header. */
.site-header--inside .site-header__brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15em;
  line-height: 1.1;
  white-space: normal;
}
.site-header--inside .brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
}
.site-header--inside .brand-tagline {
  display: inline-block;
  font-size: clamp(0.75rem, 0.6rem + 0.5vw, 0.95rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--teal-muted);
}
@media (max-width: 540px) {
  .site-header--inside .brand-tagline { display: none; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.site-nav a {
  color: var(--white-on-navy);
  font-size: var(--type-h-xs);
  font-weight: 400;
}
.site-nav a:hover, .site-nav a:focus { color: var(--teal-muted); }
.site-nav .cta {
  background: var(--teal-active);
  color: var(--white-on-teal);
  padding: 0.6em 1.1em;
  border-radius: var(--radius-pill);
  font-weight: 700;
}
.site-nav .cta:hover, .site-nav .cta:focus {
  background: var(--white-on-teal);
  color: var(--navy);
  text-decoration: none;
}
/* Mobile nav toggle (hamburger) — hidden on desktop, shown ≤768px. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 26px;
  height: 3px;
  margin: 0 auto;
  background: var(--white-on-navy);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 3px solid var(--teal-active); outline-offset: 2px; }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy);
    border-bottom: 2px solid var(--teal-active);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    padding: var(--space-s) var(--space-m);
    gap: var(--space-s);
  }
  .site-nav.is-mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---- Top banner (date-driven) ---- */
.top-banner {
  background: var(--teal-active);
  color: var(--white-on-teal);
  text-align: center;
  padding: var(--space-s) var(--space-m);
  font-weight: 700;
}
.top-banner--urgent { background: #B0392E; }
.top-banner a {
  color: var(--white-on-teal);
  text-decoration: underline;
}

/* ---- Hero ---- */
.hero {
  background:
    radial-gradient(ellipse at top right, rgba(46, 137, 128, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, #002233 100%);
  color: var(--white-on-navy);
  /* Hero gets its own tighter padding (was --space-xl = up to 136px, too
     tall per the 2026-06-23 meeting). Trimmed so the deadline card and
     first section pull up into view sooner. */
  padding-block: clamp(2.75rem, 2rem + 3.25vw, 4.25rem);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--teal-active), var(--teal-muted));
  opacity: 0.6;
}
.hero h1 {
  color: var(--white-on-navy);
  margin-bottom: var(--space-m);
}
.hero__tagline {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}
.btn {
  display: inline-block;
  /* Smaller, and squared to the card radius so button and card share one
     shape (Joe, 2026-09-07: the pill next to the 12px card read as jarring).
     Floor at 16px so phone buttons never drop below the legibility floor. */
  padding: 0.56em 1em 0.44em;   /* top > bottom: Heebo's descender space is
                                    0.42em, so cap-height text sat visually
                                    high. This puts the cap center on the box
                                    center (Joe, 2026-09-07). */
  line-height: 1.25;
  border: 2px solid transparent;  /* every button the same box height, so
                                    filled and outlined buttons sit level */
  font-size: max(0.9em, 16px);
  border-radius: var(--radius-card);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.btn--primary {
  background: var(--teal-active);
  color: var(--white-on-teal);
}
.btn--primary:hover, .btn--primary:focus {
  background: var(--white-on-teal);
  color: var(--navy);
  text-decoration: none;
}
/* In-section buttons sit UNDER a subhead (Joe, 2026-09-07: the button must
   not be the biggest thing on the block). Same shape, tighter. */
.btn--small { padding: 0.4em 0.85em 0.28em; font-size: 16px; }
.btn--ghost {
  border-color: var(--teal-muted);
  color: var(--white-on-navy);
}
.btn--ghost:hover, .btn--ghost:focus {
  background: var(--teal-muted);
  color: var(--navy);
  text-decoration: none;
}

/* ---- Deadline countdown card ---- */
.deadline-card {
  background: var(--white-on-navy);
  border-radius: var(--radius-card);
  padding: var(--space-m);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-m);
  align-items: center;
  margin-block: var(--space-l) 0;
  border: var(--border-thin);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 2;
}
.deadline-card__days {
  font-size: var(--type-h-l);
  font-weight: 900;
  color: var(--teal-active);
  line-height: 1;
  letter-spacing: -0.02em;
}
.deadline-card__label {
  font-size: var(--type-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--stone);
  margin-bottom: 0.25em;
}
.deadline-card__event { font-size: var(--type-h-s); font-weight: 700; color: var(--navy); margin: 0; }
.deadline-card__date  { font-size: var(--type-base); color: var(--stone); margin: 0.25em 0 0; }
@media (max-width: 640px) {
  .deadline-card { grid-template-columns: 1fr; text-align: center; }
}

/* ---- Section wrapper ---- */
.section { padding-block: var(--space-l); }
.section--alt { background: var(--warm-white); }
.section__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
  flex-wrap: wrap;
}
.section__heading h2 { margin: 0; }

/* ---- Early-bird callout ---- */
.early-bird {
  background: var(--teal-active);
  color: var(--white-on-teal);
  padding: var(--space-m);
  border-radius: var(--radius-card);
  font-size: var(--type-h-s);
  font-weight: 700;
  text-align: center;
}
.early-bird small { display: block; font-size: var(--type-s); font-weight: 400; margin-top: var(--space-xs); }

/* ---- Homepage fee schedule — stacked tier tables (matches the live site) ---- */
.fee-schedule { display: grid; gap: var(--space-l); }
.fee-table h3 {
  color: var(--navy);
  font-size: var(--type-h-s);
  margin: 0 0 var(--space-xs);
}
.fee-table table { width: 100%; border-collapse: collapse; font-size: var(--type-base); }
.fee-table th {
  text-align: left;
  font-weight: 400;
  padding: var(--space-xs) var(--space-s);
}
.fee-table td {
  text-align: right;
  font-weight: 700;
  color: var(--teal-active);
  white-space: nowrap;
  padding: var(--space-xs) var(--space-s);
}
.fee-table tbody tr:nth-child(odd) { background: var(--warm-white); }
.fee-table__note { margin: 0 0 var(--space-s); color: var(--stone); }
/* Fees page reuses the homepage style but with the full (sometimes verbose) data,
   so let the price column wrap instead of forcing nowrap. */
.fee-schedule--detailed .fee-table td { white-space: normal; }

/* ---- Subsection heading (e.g. Deadlines / Filing reminders) ---- */
.subsection-title {
  font-size: var(--type-h-s);
  color: var(--navy);
  margin: 0 0 var(--space-s);
}
.subsection-title--spaced { margin-top: var(--space-l); }

/* ---- Deadlines + Filing reminders: two columns ---- */
.deadlines-reminders { display: grid; grid-template-columns: 1fr; gap: var(--space-l); }
@media (min-width: 820px) {
  .deadlines-reminders { grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
}
.deadlines-reminders .resources { grid-template-columns: 1fr; }  /* stack the two cards within the column */

/* ---- BENTO GRID — CSS Grid named areas (no span counts) ---- */

/* Common to both bento sections */
.bento {
  display: grid;
  gap: 0;                          /* tiles meet flush — no white space between boxes */
  border-radius: var(--radius-card);
  overflow: hidden;                /* round only the mosaic's outer corners */
}
.bento__cell {
  border-radius: 0;                /* square edges so tiles tile seamlessly */
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* content fills the tile: heading up, link down */
  gap: var(--space-s);
  min-height: 180px;
  position: relative;
  isolation: isolate;
}
.bento__cell h3 { margin: 0; font-size: var(--type-h-s); }
.bento__cell p  { margin: 0; font-size: var(--type-base); }
.bento__cell .continue {
  font-weight: 700;
  align-self: flex-start;
  margin-top: var(--space-xs);
  font-size: 0.875rem;   /* 14px — smaller, per Joe */
}

/* Cell color rotation per design-reference §4 */
.bento__cell--slate      { background: var(--slate);       color: var(--white-on-navy); }
.bento__cell--stone      { background: var(--stone);       color: var(--white-on-navy); }
.bento__cell--warm       { background: var(--warm-white);  color: var(--navy); }
.bento__cell--teal       { background: var(--teal-active); color: var(--white-on-teal); }
.bento__cell--navy       { background: var(--navy);        color: var(--white-on-navy); }

.bento__cell--slate .continue,
.bento__cell--stone .continue,
.bento__cell--teal  .continue,
.bento__cell--navy  .continue { color: var(--teal-muted); }
.bento__cell--warm  .continue { color: var(--teal-active); }

/* Bento — CURRENT — 10 cells. 4-col desktop with two wide cards. */
.bento--current {
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "a a b c"
    "d e f g"
    "h i j j";
}
.bento--current .bento__cell:nth-child(1)  { grid-area: a; }
.bento--current .bento__cell:nth-child(2)  { grid-area: b; }
.bento--current .bento__cell:nth-child(3)  { grid-area: c; }
.bento--current .bento__cell:nth-child(4)  { grid-area: d; }
.bento--current .bento__cell:nth-child(5)  { grid-area: e; }
.bento--current .bento__cell:nth-child(6)  { grid-area: f; }
.bento--current .bento__cell:nth-child(7)  { grid-area: g; }
.bento--current .bento__cell:nth-child(8)  { grid-area: h; }
.bento--current .bento__cell:nth-child(9)  { grid-area: i; }
.bento--current .bento__cell:nth-child(10) { grid-area: j; }

/* Bento — FUTURE — 3 cells. 4-col desktop with one wide card. */
.bento--future {
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "fa fa fb fc";
}
.bento--future .bento__cell:nth-child(1) { grid-area: fa; }
.bento--future .bento__cell:nth-child(2) { grid-area: fb; }
.bento--future .bento__cell:nth-child(3) { grid-area: fc; }

/* Tablet — 2 columns */
@media (max-width: 1024px) {
  .bento--current {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "a a"
      "b c"
      "d e"
      "f g"
      "h i"
      "j j";
  }
  .bento--future {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "fa fa"
      "fb fc";
  }
}

/* Mobile — 1 column */
@media (max-width: 640px) {
  .bento--current {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a" "b" "c" "d" "e" "f" "g" "h" "i" "j";
  }
  .bento--future {
    grid-template-columns: 1fr;
    grid-template-areas:
      "fa" "fb" "fc";
  }
  .bento__cell { min-height: auto; }
}

/* ---- FAQ ---- */
.faq details {
  border-bottom: var(--border-thin);
  padding: var(--space-s) 0;
}
.faq summary {
  font-size: var(--type-h-xs);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  color: var(--navy);
}
.faq summary::after {
  content: "+";
  font-size: var(--type-h-m);
  color: var(--teal-active);
  line-height: 1;
  transition: transform 0.15s;
}
.faq details[open] summary::after { content: "−"; }
.faq summary::-webkit-details-marker { display: none; }
.faq details > p { margin-top: var(--space-s); }

/* ---- Reviews / social proof ---- */
.reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}
.reviews__summary { display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap; justify-content: center; }
.reviews__meta { display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap; justify-content: center; }
.reviews__stars { color: #E0A100; font-size: var(--type-h-m); letter-spacing: 0.05em; line-height: 1; }
.reviews__rating { font-size: var(--type-h-s); font-weight: 700; color: var(--navy); }
.reviews__count  { font-size: var(--type-s); color: var(--stone); }
.reviews__sep    { color: var(--stone); }
.reviews__list {
  width: 100%;
  margin-bottom: var(--space-s);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
}
@media (min-width: 680px) {
  .reviews__list { grid-template-columns: repeat(3, 1fr); }
}
.reviews__item {
  margin: 0;
  background: #fff;
  border-radius: var(--radius-card);
  padding: var(--space-s);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.reviews__item-stars { color: #E0A100; font-size: var(--type-s); letter-spacing: 0.03em; }
.reviews__item blockquote {
  margin: 0;
  font-style: italic;
  color: var(--navy);
  line-height: 1.35;
  font-size: var(--type-s);
}
.reviews__item figcaption {
  margin-top: auto;
  font-size: var(--type-s);
  font-weight: 700;
  color: var(--stone);
}
.reviews__link { font-weight: 700; }

/* ---- Embedded map (Directions) ---- */
.map-embed {
  margin-top: var(--space-m);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: var(--border-thin);
  aspect-ratio: 16 / 9;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-cta { margin-top: 3px; }                                   /* nudge the button 3px off the map */
.btn--snug { padding-top: calc(0.8em - 3px); padding-bottom: calc(0.8em - 3px); }  /* 3px less above/below the text */

/* ---- About strip ---- */
.about-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}
@media (min-width: 768px) {
  .about-strip { grid-template-columns: 2fr 3fr; }
}
.about-strip img { border-radius: var(--radius-card); }

/* ---- In-content figure (e.g. John Weinard photo on About) ---- */
.content-figure { margin: var(--space-m) auto; max-width: 520px; }
.content-figure img { width: 100%; height: auto; border-radius: var(--radius-card); display: block; }
.content-figure figcaption {
  margin-top: var(--space-xs);
  font-size: var(--type-s);
  color: var(--stone);
  font-style: italic;
  text-align: center;
}

/* ---- Refunds row ---- */
.refunds {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--space-m);
}
.refunds__card {
  background: #fff;
  border: var(--border-thin);
  border-radius: var(--radius-card);
  padding: var(--space-m);
  text-align: center;
}
.refunds__card h3 { font-size: var(--type-h-s); margin-bottom: var(--space-xs); }
/* Three columns: Federal, Minnesota, explanatory text block */
@media (min-width: 720px) {
  .refunds--three { grid-template-columns: 1fr 1fr 1fr; }
}
.refunds__note { display: flex; align-items: center; }
.refunds__note p { margin: 0; }
.refunds__card a { display: inline-block; margin-top: var(--space-xs); }

/* ---- Resources teasers ---- */
.resources {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.resources__card {
  background: #fff;
  border: var(--border-thin);
  border-radius: var(--radius-card);
  padding: var(--space-m);
}
.resources__card h3,
.resources__card h4 { color: var(--navy); margin: 0 0 var(--space-xs); }

/* ---- Footer ---- */
.site-footer {
  background: var(--navy);
  color: var(--white-on-navy);
  padding-block: var(--space-l);
  margin-top: var(--space-xl);
}
.site-footer .container {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer .container { grid-template-columns: 2fr 1fr 1fr; }
}
.site-footer h4 { color: var(--teal-muted); font-size: var(--type-h-xs); margin-bottom: var(--space-xs); }
.site-footer a { color: var(--white-on-navy); }
.site-footer a:hover, .site-footer a:focus { color: var(--teal-muted); }
.site-footer__address { font-style: normal; line-height: 1.7; }
.site-footer__legal {
  border-top: 1px solid rgba(247,251,255,0.15);
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  font-size: var(--type-s);
  color: var(--teal-muted);
}

/* ---- Long-form page content (inside pages: /privacy/, /about/, etc.) ---- */
.page-content {
  max-width: 70ch;
}
.page-content h1 {
  font-size: var(--type-h-m);
  margin-bottom: var(--space-m);
}
.page-content h2 {
  font-size: var(--type-h-s);
  color: var(--navy);
  margin-top: var(--space-l);
  margin-bottom: var(--space-s);
}
.page-content p,
.page-content ul,
.page-content ol {
  margin-bottom: var(--space-s);
}
.page-content ul,
.page-content ol {
  padding-left: 1.25em;
}
.page-content li {
  margin-bottom: var(--space-xs);
}

/* ---- /fees/ page (Chunk 6.4) ----------------------------------- */

/* Tier grid — homepage-style 4 (+2) blocks */
.fees-tiers {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .fees-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fees-tier {
  background: #fff;
  border: var(--border-thin);
  border-radius: var(--radius-card);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
}
.fees-tier h3 {
  margin: 0 0 var(--space-s);
  color: var(--navy);
}
.fees-tier__note {
  margin: 0 0 var(--space-s);
  color: var(--stone);
}
.fees-tier--wide {
  grid-column: 1 / -1;
}

/* ---- Tax deadlines table ---- */
.deadlines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-base);
  margin-top: var(--space-m);
}
.deadlines-table thead th {
  text-align: left;
  padding: var(--space-xs) var(--space-s);
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: var(--type-s);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.deadlines-table tbody tr + tr td { border-top: 1px solid rgba(0, 56, 87, 0.08); }
.deadlines-table td {
  padding: var(--space-xs) var(--space-s);
  vertical-align: top;
}
.deadlines-table td:first-child {
  white-space: nowrap;
  font-weight: 600;
  color: var(--navy);
  width: 12rem;
}
.deadlines-table tr.dl-past td { opacity: 0.45; }
.deadlines-table tr.dl-next td:first-child { color: var(--teal-active); }
.deadlines-table tr.dl-next { background: rgba(46, 137, 128, 0.06); }

/* Small tier-internal table */
.fees-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-base);
}
.fees-table thead th {
  text-align: left;
  font-weight: 700;
  font-size: var(--type-s);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stone);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid rgba(0, 56, 87, 0.18);
}
.fees-table thead th:last-child { text-align: right; }
.fees-table tbody tr + tr td { border-top: 1px solid rgba(0, 56, 87, 0.08); }
.fees-table td {
  padding: 0.5em 0;
  vertical-align: top;
}
.fees-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--navy);
  font-weight: 700;
}

/* "10% off before March 9" footnote block */
.fees-discount-note {
  margin-top: var(--space-m);
  padding: var(--space-s) var(--space-m);
  border-left: 4px solid var(--teal-active);
  background: var(--warm-white);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.fees-discount-note p { margin: 0 0 var(--space-xs); }
.fees-discount-note p:last-child { margin: 0; }

/* "How so affordable?" essay */
.fees-essay h2 { margin-top: 0; }
.fees-essay h3 {
  font-size: var(--type-h-xs);
  margin-top: var(--space-m);
  color: var(--teal-active);
}

/* State accordion */
.fees-states {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-s);
}
.fees-state {
  border: var(--border-thin);
  border-radius: var(--radius-card);
  background: #fff;
  overflow: hidden;
}
.fees-state > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-s) var(--space-m);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  font-weight: 700;
  color: var(--navy);
  user-select: none;
}
.fees-state > summary::-webkit-details-marker { display: none; }
.fees-state > summary:hover,
.fees-state > summary:focus-visible {
  background: var(--warm-white);
  outline: none;
}
.fees-state[open] > summary {
  border-bottom: 1px solid rgba(0, 56, 87, 0.08);
  background: var(--warm-white);
}
.fees-state__title {
  font-size: var(--type-h-xs);
}
.fees-state__chevron {
  transition: transform 0.18s ease;
  color: var(--teal-active);
  font-size: 1.1em;
}
.fees-state[open] > summary .fees-state__chevron {
  transform: rotate(180deg);
}
.fees-state__body {
  padding: var(--space-m);
}
.fees-state__pending { color: var(--stone); margin: 0; }

/* Filter input (Federal demo) */
.fees-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
  margin-bottom: var(--space-s);
}
.fees-filter__input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 0.6em 0.9em;
  font: inherit;
  color: var(--navy);
  border: 1px solid rgba(0, 56, 87, 0.25);
  border-radius: var(--radius-pill);
  background: #fff;
}
.fees-filter__input:focus {
  outline: 3px solid var(--teal-active);
  outline-offset: 1px;
  border-color: var(--teal-active);
}
.fees-filter__count {
  font-size: var(--type-s);
  color: var(--stone);
  font-variant-numeric: tabular-nums;
}

/* Full-width detail table (Federal) */
.fees-detail-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.fees-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-base);
}
.fees-detail-table thead th {
  text-align: left;
  font-weight: 700;
  font-size: var(--type-s);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stone);
  padding: 0.6em 0.75em;
  border-bottom: 2px solid rgba(0, 56, 87, 0.18);
  background: var(--warm-white);
  position: sticky;
  top: 0;
  z-index: 1;
}
.fees-detail-table th.num,
.fees-detail-table td.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.fees-detail-table tbody td {
  padding: 0.55em 0.75em;
  border-bottom: 1px solid rgba(0, 56, 87, 0.06);
  vertical-align: top;
}
.fees-detail-table tbody tr:hover td { background: rgba(46, 137, 128, 0.06); }
.fees-detail-table tbody tr[hidden] { display: none; }
.fees-detail-empty {
  margin: var(--space-s) 0 0;
  padding: var(--space-s);
  color: var(--stone);
  font-style: italic;
  text-align: center;
}

/* ---- Mailing-address callout (filing-reminder pages) ---- */
.mail-address {
  margin: var(--space-s) 0 var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: var(--warm-white);
  border-left: 4px solid var(--teal-active);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  font-style: normal;
  line-height: 1.5;
}
.mail-address strong { display: block; color: var(--navy); }

/* ---- Utility ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =====================================================================
   2026-08-25 pre-meeting pass — address bar, who/what/where block,
   shrunk homepage news, real 404. Built for the 2026-08-26 review.
   ===================================================================== */

/* ---- Contact bar — address near the top, as copyable text ---- */
.contact-bar {
  background: var(--warm-white);
  border-bottom: var(--border-thin);
  font-size: var(--type-s);
}
/* Phone: address on its own line, then phone left / directions right.
   Desktop (621px+): one line, address left, phone + directions right. */
.contact-bar .container {
  display: block;
  padding-block: 0.55rem;
}
.contact-bar__addr {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.15rem 0;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.contact-bar__addr:focus-visible { outline: 3px solid var(--teal-active); outline-offset: 2px; }
.contact-bar__text { color: var(--navy); font-weight: 700; }
.contact-bar__hint { color: var(--stone); font-weight: 400; margin-left: 0.5em; white-space: nowrap; }
.contact-bar__addr.is-copied .contact-bar__hint { color: var(--teal-active); font-weight: 700; }
.contact-bar__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  margin-top: 0.15rem;
}
.contact-bar__row a { font-weight: 700; white-space: nowrap; }
.contact-bar__phone { color: var(--navy); }
@media (min-width: 621px) {
  .contact-bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
  .contact-bar__addr { width: auto; }
  .contact-bar__row { margin-top: 0; gap: var(--space-m); }
}

/* ---- Section note + "see all" link (used by the shrunk news sections) ---- */
.section__note { color: var(--stone); margin: 0 0 var(--space-s); max-width: 62ch; }
.section__more { margin: var(--space-s) 0 0; font-weight: 700; }

/* ---- Bento — HOME (shrunk). Even columns, any count from 1 to 4. ---- */
.bento--home {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .bento--home { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bento--home { grid-template-columns: 1fr; } }

/* ---- Who / what / where block ---- */
.visit { display: grid; gap: var(--space-l); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .visit { grid-template-columns: 1fr 1.4fr 1fr; gap: var(--space-l); align-items: start; }
}
.visit__col > :last-child { margin-bottom: 0; }
.visit__title { font-size: var(--type-h-m); color: var(--navy); margin: 0 0 var(--space-s); line-height: 1.15; }
.visit__photo { display: block; width: 100%; height: auto; border-radius: 12px; margin: 0 0 var(--space-s); }
.visit__note { color: var(--stone); margin-top: 0; }
.visit__list { margin: 0; padding-left: 1.15em; }
.visit__list li { margin-bottom: var(--space-xs); }
.visit__phone-line { margin: 0 0 var(--space-xs); }
.visit__phone {
  font-weight: 700;
  font-size: var(--type-h-xs);
  color: var(--navy);
}
.visit__address { font-style: normal; margin: 0 0 var(--space-s); }
.visit__addr {
  display: inline;
  margin: 0; padding: 0; border: 0; background: transparent;
  text-align: left; font: inherit; font-weight: 700; color: var(--navy);
  cursor: pointer;
}
.visit__addr:focus-visible { outline: 3px solid var(--teal-active); outline-offset: 2px; }
.visit__copy {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.05em 0.5em;
  font-size: var(--type-s);
  font-weight: 700;
  color: var(--teal-active);
  border: 1px solid var(--teal-active);
  border-radius: 6px;
  vertical-align: 0.1em;
}
.visit__addr.is-copied .visit__copy { background: var(--teal-active); color: var(--white-on-teal); }
.visit__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-s); }
/* btn--ghost is built for the navy hero (light text on dark). On this white
   section it would be invisible, so the copy button gets its own outline. */
.visit__actions .btn--outline {
  border: 2px solid var(--teal-active);
  background: transparent;
  color: var(--teal-active);
  cursor: pointer;
}
.visit__actions .btn--outline:hover,
.visit__actions .btn--outline:focus,
.visit__actions .btn--outline.is-copied {
  background: var(--teal-active);
  color: var(--white-on-teal);
  text-decoration: none;
}

/* Anchor targets clear the sticky header when linked to from the footer. */
[id] { scroll-margin-top: 5.5rem; }
.visit__phone { font-weight: 700; font-size: var(--type-h-xs); }
.visit__col--where .site-footer__address,
.visit__col--where p { margin-bottom: var(--space-xs); }

/* ---- 404 ---- */
.not-found__links { list-style: none; padding: 0; margin: var(--space-s) 0; line-height: 2; }
.not-found__links a { font-weight: 700; }

/* ---- Reviews, treatment B — one large featured quote (comparison page) ---- */
.reviews--featured { max-width: 46rem; margin-inline: auto; }
.reviews__featured {
  margin: 0 0 var(--space-m);
  padding: var(--space-m);
  background: #fff;
  border: var(--border-thin);
  border-left: 4px solid var(--teal-active);
  border-radius: var(--radius-card);
}
.reviews__featured-text {
  margin: 0 0 var(--space-xs);
  font-size: var(--type-h-s);
  line-height: 1.5;
  color: var(--navy);
}
.reviews__featured-author { font-style: normal; font-weight: 700; color: var(--stone); font-size: var(--type-s); }

/* ---- Draft note on an article that has not been through the owners yet ---- */
.draft-note {
  background: var(--teal-muted);
  color: var(--navy);
  border-radius: var(--radius-card);
  padding: var(--space-s) var(--space-m);
  font-size: var(--type-s);
  font-weight: 700;
  margin: 0 0 var(--space-m);
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- What to bring: toggle groups ---- */
.bring { border-top: 1px solid var(--border-thin-color, #d9d4c7); }
.bring:last-of-type { border-bottom: 1px solid var(--border-thin-color, #d9d4c7); margin-bottom: var(--space-s); }
.bring > summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--navy); padding: calc(var(--space-s) * 0.75) 0; display: flex; justify-content: space-between; align-items: center; }
.bring > summary::-webkit-details-marker { display: none; }
.bring > summary::after { content: "+"; font-size: 1.25em; color: var(--teal-active); }
.bring[open] > summary::after { content: "\2212"; }
.bring > .visit__list { padding-bottom: var(--space-s); }

/* =====================================================================
   2026-09-08 meeting — stripe hierarchy on the phone.
   Joe's diagnosis in the room: "the thing the site lacks is hierarchy —
   you don't have most important to least important visually." The three
   bands at the top (banner, site title + menu, contact bar) all sat at
   roughly the same height, so on a phone they read as stripes rather
   than as a header with two subordinate rows. Mark and Mike approved
   proceeding on the development version and left the balance to Joe.
   Three changes, exactly as he stated them: title stripe a little
   taller, extension banner shorter, directions line shorter.
   Phone only — nobody raised a problem with the desktop layout, and the
   621px breakpoint below matches the contact bar's existing one.
   ===================================================================== */
@media (max-width: 620px) {
  /* 1. The site-title stripe gets taller — it is the most important band
        and was the same height as the two it should dominate. */
  .site-header { padding-block: 1.35rem; }

  /* 2. The extension banner gets shorter. */
  .top-banner { padding-block: 0.55rem; }

  /* 3. The directions line gets shorter. */
  .contact-bar .container { padding-block: 0.4rem; }
  .contact-bar__addr { padding: 0.1rem 0; }
  .contact-bar__row { margin-top: 0.1rem; }
}

/* =====================================================================
   2026-09-25 header pass (Joe's 9/16 rule): the name is the biggest band;
   the message above it is smaller but reads as a message; the contact
   line is about half the name band's height, the whole address line is
   the copy button, and the "copy" label is stronger. Sizes are a first
   version to adjust with Joe on the page.
   ===================================================================== */
.contact-bar__addr { display: flex; align-items: center; gap: 0.4em; }
.contact-bar__text { min-width: 0; }
.contact-bar__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  flex: none;
  color: var(--teal-active);
  font-weight: 700;
}
.contact-bar__copy .contact-bar__hint {
  margin-left: 0;
  color: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85em;
}
.contact-bar__icon { display: block; }
@media (max-width: 620px) {
  /* Phone: address and its copy mark share one line; the word "copy"
     rides as the icon's label only where there is room for it. */
  .contact-bar .container { padding-block: 0.3rem; }
  .contact-bar__addr { padding: 0.05rem 0; justify-content: space-between; }
  .contact-bar__copy .contact-bar__hint {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .contact-bar__row { margin-top: 0; }
}
@media (max-width: 620px) {
  /* The copy mark as a filled teal tag so it reads as the thing to tap. */
  /* Keep the page's side margin (lines up with the logo); the address
     text gives up a hair of size instead so the tag fits on its line. */
  .contact-bar__text { font-size: 0.97em; letter-spacing: -0.005em; }
  .contact-bar__addr { gap: 0.35rem; }
  .contact-bar__copy {
    background: var(--teal-active);
    color: var(--white-on-teal);
    border-radius: 6px;
    padding: 0.2rem;
  }
  /* Copied: the tag swaps its icon for a check, same size, so the line
     never reflows. */
  .contact-bar__addr.is-copied .contact-bar__copy { background: var(--navy); }
  .contact-bar__addr.is-copied .contact-bar__icon { display: none; }
  .contact-bar__addr.is-copied .contact-bar__copy::after {
    content: "\2713"; display: block; width: 15px; height: 15px;
    line-height: 15px; text-align: center; font-size: 14px;
  }
  .contact-bar__icon { width: 15px; height: 15px; }
}

/* 2026-09-25, round 2 with Joe: name band taller and logo a little bigger;
   contact line tighter; the message banner's text given a little more
   room between lines. Menu (About, Fees) left as is. */
.top-banner { letter-spacing: 0.05em; }   /* expanded tracking; size and line spacing as before */
.site-header__logo { height: clamp(1.6rem, 1.15rem + 1.6vw, 2.35rem); max-width: 74vw; }
.site-header { padding-block: calc(var(--space-s) * 1.3); }
@media (max-width: 620px) {
  .site-header { padding-block: 1.75rem; }
  .contact-bar .container { padding-block: 0.2rem; }
  .contact-bar__addr, .contact-bar__row { line-height: 1.3; }
  .contact-bar__copy { padding: 0.1rem; }
}

/* 2026-09-25, round 3 with Joe: the contact line shorter, and its text
   centered on the cap height. The line has no descenders, so centering
   the line box leaves the capitals sitting high. With line-height 1,
   Heebo's capitals sit 0.104em from the top and 0.185em from the bottom
   of the box; top padding gets the 0.04em difference back. */
.contact-bar .container { padding-block: calc(0.45rem + 0.04em) calc(0.45rem - 0.04em); }
.contact-bar__addr { padding: 0; line-height: 1; }
.contact-bar__row, .contact-bar__row a { line-height: 1; }
@media (max-width: 620px) {
  .contact-bar .container { padding-block: calc(0.35rem + 0.04em) calc(0.35rem - 0.04em); }
  .contact-bar__row { margin-top: 0.3rem; }
  .contact-bar__copy { padding: 1px; }
}
@media (max-width: 620px) {
  /* The tag is taller than the capitals; let it overhang the line instead
     of making the line taller. */
  .contact-bar__copy { margin-block: -3px; }
}

/* 2026-09-25, round 4 with Joe: the message banner shaped as a wide
   folder tab sitting on the name band, with a little white at its edges;
   the line breaks balanced. Phone: the contact line is the address only
   (the phone number is in the banner and the hero). */
.top-banner {
  max-width: calc(var(--container-max) - 2 * var(--space-m));
  margin: 0.5rem auto 0;
  width: calc(100% - 2 * 0.75rem);
  border-radius: 14px 14px 0 0;
  text-wrap: pretty;
}
.top-banner a { white-space: nowrap; }   /* the phone number never splits */
@media (max-width: 620px) {
  .contact-bar__row { display: none; }
  .top-banner { padding-inline: 0.75rem; font-size: 0.94em; }
}
@media (max-width: 620px) {
  .top-banner__lead { display: block; }
}

/* 2026-09-25, round 5 with Joe: on phones the contact line is the address
   (shortened on screen, tapping it copies the full address) and a
   Directions link where the copy tag was. Desktop unchanged. */
.contact-bar__short, .contact-bar__maps { display: none; }
@media (max-width: 620px) {
  .contact-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
  .contact-bar__addr { width: auto; flex: 1 1 auto; min-width: 0; }
  .contact-bar__text, .contact-bar__copy { display: none; }
  .contact-bar__short { display: inline; color: var(--navy); font-weight: 700; }
  .contact-bar__addr.is-copied .contact-bar__short { color: var(--teal-active); }
  .contact-bar__maps { display: inline; flex: none; font-weight: 700; line-height: 1; white-space: nowrap; }
}

/* 2026-09-25, round 6 with Joe: the phone's name band kept in proportion
   to the logo (same ratio as desktop); the desktop tab shorter; a call
   button in the banner on phones; the address indented a touch so it
   lines up optically with the name and the headline. */
.top-banner__call { display: inline-flex; align-items: center; gap: 0.35em; }
.top-banner .call-icon { display: none; }
.contact-bar__addr { padding-left: 2px !important; }
@media (min-width: 621px) {
  .top-banner { padding-block: 0.5rem; }
}
@media (max-width: 620px) {
  .site-header { padding-block: 0.6rem; }
  .top-banner__num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .top-banner .call-icon {
    display: block; box-sizing: content-box;
    width: 15px; height: 15px; padding: 6px;
    border-radius: 50%;
    background: var(--white-on-teal); color: var(--teal-active);
  }
  .top-banner__call { vertical-align: middle; margin-left: 0.4em; text-decoration: none; }
}

/* 2026-09-25, round 7 with Joe: a call button in the name band, first
   before About and Fees (beside the menu button on phones, so it shows on
   every page in every season); the message tab sized to its text plus
   30px a side, never wider than the screen allows. */
.header-call {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  background: var(--teal-active); color: var(--white-on-teal);
}
.header-call:hover, .header-call:focus-visible { background: var(--white-on-navy); color: var(--navy); }
.header-call:focus-visible { outline: 3px solid var(--teal-active); outline-offset: 2px; }
.site-header .container { gap: var(--space-m); }
.site-header .site-nav { margin-left: 0; }
@media (max-width: 768px) {
  /* Phone: the 32px circle sits in a 44px tap area beside the menu button. */
  .header-call { width: 32px; height: 32px; margin: 6px 0 6px auto; }
  .site-header .container { gap: 0.5rem; }
}
.top-banner {
  width: fit-content;
  max-width: min(calc(100% - 1.5rem), calc(var(--container-max) - 2 * var(--space-m)));
  padding-inline: 30px;
}
@media (max-width: 620px) {
  .top-banner { padding-inline: 18px; }   /* still sized to its text; less side room on a phone */
}
@media (max-width: 768px) {
  /* Make room for the call button: the menu button keeps its 44px tap area
     but its bars line up with the page margin, and the logo takes the
     width that is left. */
  .nav-toggle { flex: none; margin-right: -9px; }
  .header-call { margin-left: auto; }
  .site-header__logo { width: min(calc(100vw - 2 * var(--space-m) - 35px - 32px - 18px), 313px); height: auto; max-width: none; }
}
@media (max-width: 620px) {
  /* Logo is smaller with the call button beside it; keep the band in the
     same proportion to it (about 2.6 times its height). */
  .site-header { padding-block: 0.3rem; }
}

/* 2026-09-25, round 8 with Joe: a stronger, bigger phone in the same
   32px circle; Directions pulled in 2px from the right edge to match the
   address's 2px indent; the hero's call button folded into the booking
   button as its icon; the hero title 10px smaller so it stops competing
   with the name. */
.header-call svg { width: 21px; height: 21px; }
.contact-bar__maps, .contact-bar__link { margin-right: 2px; }
.btn--call { display: inline-flex; align-items: center; gap: 0.5em; }
.btn--call .call-icon { width: 1.15em; height: 1.15em; flex: none; margin-top: -0.12em; }
.hero h1 { font-size: calc(var(--type-h-l) - 10px); }

/* 2026-09-25, round 9 with Joe: the booking button and the next-deadline
   card combined into one piece with two sections. Left: teal, white text,
   phone icon over the words, left-aligned, the whole panel dials. Right:
   the deadline in white, its numbers smaller. Side by side from tablet
   width up; stacked on phones. */
.hero-panel {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: var(--space-m);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 2;
}
@media (min-width: 600px) {
  .hero-panel:has(.deadline-card) { grid-template-columns: minmax(12rem, 1fr) 2fr; }
}
.hero-panel .btn--call {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--space-m);
  border: 0;
  border-radius: 0;
  font-size: var(--type-h-xs);
  line-height: 1.25;
  text-align: left;
}
.hero-panel .btn--call .call-icon { width: 28px; height: 28px; margin: 0; }
.hero-panel .deadline-card {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-m);
}
.hero-panel .deadline-card__days { font-size: var(--type-h-m); }
@media (max-width: 640px) {
  .hero-panel .btn--call { flex-direction: row; align-items: center; }
  .hero-panel .btn--call .call-icon { width: 22px; height: 22px; }
  .hero-panel .deadline-card { text-align: left; }
}

/* 2026-09-25, round 10 with Joe.
   Phone name band: tie its height to the logo's actual height so it keeps
   the desktop proportion (band = 2.64 x logo height, measured at 1440px)
   on every phone width, not just 375px. */
@media (max-width: 768px) {
  .site-header { padding-block: 0; }
  .site-header .container {
    --logo-w: min(calc(100vw - 2 * var(--space-m) - 35px - 32px - 18px), 313px);
    min-height: calc(var(--logo-w) / 12.03 * 2.64 - 2px);
  }
}
/* Phone: the deadline lines up under the words "Off-season…", not under
   the phone icon. */
@media (max-width: 640px) {
  .hero-panel .deadline-card { padding-left: calc(var(--space-m) + 22px + 0.6rem); }
}
/* The message tab sits at the right, lined up with the end of the menu
   (Joe, 2026-09-25: "go with right"). */
.top-banner { margin-left: auto; margin-right: max(var(--space-m), calc((100% - var(--container-max)) / 2 + var(--space-m))); }
@media (max-width: 640px) {
  .hero-panel .btn--call { justify-content: flex-start; }
}

/* 2026-09-25, round 11 with Joe: the refund boxes much smaller — the name
   and one button, side by side, in white. One white across the page: the
   hero's deadline section moves from the faint blue-white to the same
   white as these boxes. */
.refunds__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: 0.75rem var(--space-s);
  text-align: left;
}
.refunds__card h3 { font-size: var(--type-h-xs); margin: 0; }
.refunds__card a { margin-top: 0; white-space: nowrap; }
.refunds { align-items: center; }
.hero-panel .deadline-card { background: #fff; }
/* With the boxes this small the note reads better as one line beneath
   them than as a narrow third column that sets the section's height. */
@media (min-width: 720px) {
  .refunds--three { grid-template-columns: 1fr 1fr; }
  .refunds__note { grid-column: 1 / -1; }
}
.refunds__note p { max-width: none; }
/* The note starts where the words inside the boxes start (border + inner
   padding), so it doesn't read as sticking out past them. */
.refunds__note p { padding-left: calc(1px + var(--space-s)); }

/* 2026-09-25 seasons (Joe): the off-season tab in gray; the hours card in
   the hero's right-hand section during tax season; the countdown at the top
   of the deadlines section when the hours take its place. */
.top-banner--gray { background: var(--stone); }
.hours-card__list { list-style: none; margin: 0.35rem 0 0; padding: 0; color: var(--navy); font-weight: 700; }
.hours-card__list li { padding: 0.1rem 0; }
.section .deadline-card { margin: 0 0 var(--space-m); box-shadow: none; }

/* 2026-09-25 (Joe): 60px of room each side of the tab's words; smaller on
   phones, where the tab has to fit the screen. */
.top-banner { padding-inline: 60px; }
@media (max-width: 620px) { .top-banner { padding-inline: 18px; } }
/* The tab's words sat high: the rounded top corners take visual weight off
   the top, and Heebo's capitals sit above the middle of the line box. Move
   the words 2px down so the capitals read as centered (Joe, 2026-09-25). */
.top-banner { padding-top: calc(0.5rem + 2px); padding-bottom: calc(0.5rem - 2px); }
@media (max-width: 620px) { .top-banner { padding-top: calc(0.55rem + 2px); padding-bottom: calc(0.55rem - 2px); } }
/* 2026-09-25 (Joe): 90px of room each side of the tab's words on desktop,
   for every season's tab. */
@media (min-width: 621px) { .top-banner { padding-inline: 90px; } }