/* ==========================================================================
   BRONCA BOOKKEEPING — GLOBAL STYLESHEET
   ==========================================================================
   This file is organized in sections, top to bottom:
   1. CSS Variables (the "design system" — colors, fonts, spacing)
   2. Reset / base element styles
   3. Layout helpers (container, sections)
   4. Typography
   5. Buttons
   6. Header & navigation (desktop + mobile)
   7. Footer
   8. Forms
   9. Cards
   10. Small utility classes
   11. Accessibility helpers

   If you (Charlie) ever want to change a color or font site-wide, you
   should only need to edit the variables in Section 1 below — everything
   else in this file references those variables instead of using colors
   or fonts directly.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CSS VARIABLES
   These are like labeled containers for values we reuse everywhere.
   Instead of typing "#0C1E33" in fifty different places, we type
   "var(--color-navy)" — and if the navy ever needs to change, we edit
   it once here and it updates across the whole site.
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors, straight from the blueprint */
  --color-navy: #0C1E33;
  --color-gold: #B29362;
  --color-charcoal: #30343B;
  --color-white: #FFFFFF;
  --color-off-white: #F8F7F4;

  /* Tints/shades derived from the colors above, used for borders,
     hover backgrounds, and subtle dividers so we're not inventing
     random new colors elsewhere in the file. */
  --color-navy-tint-10: rgba(12, 30, 51, 0.1);
  --color-navy-tint-05: rgba(12, 30, 51, 0.05);
  --color-gold-tint-15: rgba(178, 147, 98, 0.15);
  --color-gold-tint-30: rgba(178, 147, 98, 0.3);

  /* NOTE on gold contrast (accessibility):
     Gold text on a white/off-white background does not have enough
     contrast to be read comfortably (fails WCAG AA). So gold is used
     here for: backgrounds behind dark text (buttons), borders, icons,
     decorative lines, and text on NAVY backgrounds — never as small
     body text on a light background. */

  /* Typography — Playfair Display (serif, headings) + Inter (sans,
     body/UI). Finalized site-wide pairing (style-guide.html retains
     the other candidate options for reference only). */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font sizes use clamp() so they scale smoothly between mobile and
     desktop instead of jumping abruptly at breakpoints.
     clamp(minimum, preferred, maximum) */
  --font-size-body: 1.125rem;          /* 18px — sized up from 16px for a more comfortable, editorial reading size */
  --font-size-small: 0.9375rem;        /* 15px — sized up from 14px; used for captions, fine print, footer */
  --font-size-eyebrow: 0.875rem;       /* 14px — small-caps label style, sized up slightly from 13px */
  --font-size-h1: clamp(2.25rem, 4vw + 1rem, 3.4rem);
  --font-size-h2: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  --font-size-h3: clamp(1.375rem, 1.5vw + 1rem, 1.75rem);
  --font-size-h4: clamp(1.125rem, 1vw + 1rem, 1.375rem);

  /* Spacing scale — a consistent set of "gaps" used for margin,
     padding, and gaps between elements throughout the site. */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */
  --space-10: 8rem;     /* 128px */

  /* Section vertical padding — generous, so the site feels calm and
     unhurried rather than cramped. Scales down a bit on small screens. */
  --section-padding-y: clamp(4rem, 8vw, 7rem);

  /* Layout */
  --container-max-width: 1200px;
  --container-padding-x: clamp(1.5rem, 5vw, 3rem);

  /* The sticky header's real rendered height, in px. Set per
     breakpoint below (the mobile hamburger bar and the desktop
     nav/button aren't the same height), and js/main.js also measures
     the actual header on load/resize and keeps this updated for
     extra accuracy afterward. Anchor scroll offsets and anything else
     that needs to clear the sticky header should reference this
     variable instead of a hardcoded number, so nothing goes stale if
     the header's size changes again — this is the one place to
     update. 69px = mobile/tablet header (governed by the 44px
     hamburger button + space-3 padding + border). */
  --header-height: 69px;

  /* Borders & radius — kept small and subtle on purpose. Nothing
     "pill-shaped" or heavily rounded. */
  --radius-sm: 3px;
  --radius-md: 6px;
  --border-subtle: 1px solid var(--color-navy-tint-10);
  --border-subtle-on-dark: 1px solid rgba(255, 255, 255, 0.15);

  /* Motion — short and understated. Nothing bouncy or dramatic. */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

/* At 900px+ the mobile hamburger is gone and the desktop nav/button
   become the tallest thing in the header (79px = the 53.9375px
   "Schedule a Consultation" button + space-3 padding + border,
   rounded up slightly for a safety margin). */
@media (min-width: 900px) {
  :root {
    --header-height: 79px;
  }
}


/* --------------------------------------------------------------------------
   2. RESET / BASE ELEMENT STYLES
   A short reset so that browsers' default spacing and sizing don't
   fight with our design system.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* When a link jumps to a section (e.g. services.html#monthly), this
   keeps the sticky header from covering the top of that section.
   Built from --header-height (kept in sync with the header's actual
   rendered size by js/main.js) plus a bit of breathing room, so the
   landed heading sits just below the header rather than tight
   against it — and this stays correct automatically if the header's
   height ever changes again, instead of needing a new guessed
   number. */
main [id] {
  scroll-margin-top: calc(var(--header-height) + var(--space-5));
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: 1.65;
  color: var(--color-charcoal);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}


/* --------------------------------------------------------------------------
   3. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}

/* A narrower reading-width container — used for the Contact form and
   the Pricing FAQ, where a full 1200px-wide column would make lines
   of text or form fields uncomfortably long. */
.container--narrow {
  max-width: 760px;
}

/* A "section" is one horizontal band of the page (hero, services, etc).
   Use the color modifiers to set the background per the site's color
   rhythm — most sections are light, with occasional navy sections. */
.section {
  padding-block: var(--section-padding-y);
}

.section--white {
  background-color: var(--color-white);
}

.section--off-white {
  background-color: var(--color-off-white);
}

.section--navy {
  background-color: var(--color-navy);
  color: var(--color-white);
}

/* Inside a navy section, body copy should use a soft off-white rather
   than pure white, which reads more warmly and matches the blueprint's
   "warm white body text" note for the hero. */
.section--navy p {
  color: rgba(255, 255, 255, 0.85);
}


/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-navy);
}

.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 {
  color: var(--color-white);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); font-family: var(--font-sans); font-weight: 700; }

p {
  max-width: 65ch; /* keeps paragraphs from stretching too wide to read comfortably */
}

/* "Eyebrow" text — the small label above headlines, e.g.
   "BOOKKEEPING FOR SMALL BUSINESSES". Gold doesn't have enough
   contrast to use as text on a light background (it fails WCAG AA),
   so the default here is navy — gold is reserved for when an eyebrow
   sits on a navy section, where it has plenty of contrast. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--font-size-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-navy);
  margin-bottom: var(--space-3);
}

.section--navy .eyebrow {
  color: var(--color-gold);
}

a.text-link {
  color: var(--color-navy);
  font-weight: 600;
  border-bottom: 1px solid var(--color-gold);
  padding-bottom: 1px;
  transition: border-color var(--transition-fast), border-bottom-width var(--transition-fast);
}

/* Hover feedback comes from the underline getting bolder, not from
   the text changing color — gold text on a light background doesn't
   have enough contrast to stay readable (fails WCAG AA), so the text
   itself always stays navy here. */
a.text-link:hover {
  border-bottom-width: 2px;
}

.section--navy a.text-link {
  color: var(--color-white);
}

/* On a navy background gold text has strong contrast, so the
   on-hover color change is safe to keep here. */
.section--navy a.text-link:hover {
  color: var(--color-gold);
}


/* --------------------------------------------------------------------------
   5. BUTTONS
   Two visual styles (primary / secondary), each with a variant for use
   on navy backgrounds so contrast always stays strong. Kept refined —
   modest padding, small radius, no oversized "pill" shapes.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base);
  white-space: nowrap;
}

/* Primary button — used on white/off-white sections.
   Navy background, white text. */
.btn-primary {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: #16304f; /* slightly lighter navy */
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Primary button, on-dark variant — used inside navy sections (like
   the hero). Gold background with navy text gives strong contrast
   and lets the gold accent do its job without becoming a text-color
   accessibility problem. */
.btn-primary-on-dark {
  background-color: var(--color-gold);
  color: var(--color-navy);
}

.btn-primary-on-dark:hover {
  background-color: #c4a578; /* slightly lighter gold */
}

.btn-primary-on-dark:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
}

/* Secondary button — outlined, transparent background. Used for
   lower-emphasis actions like "Explore Services". */
.btn-secondary {
  background-color: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}

.btn-secondary:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.section--navy .btn-secondary {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.5);
}

.section--navy .btn-secondary:hover {
  background-color: var(--color-white);
  color: var(--color-navy);
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   6. HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-white);
  border-bottom: var(--border-subtle);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Compact on purpose — a short, refined bar that gives the hero
     below it more visual prominence. */
  padding-block: var(--space-3);
}

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Header logo — a horizontal lockup: the standalone B/book/checkmark
   mark on the left, "BRONCA" / "BOOKKEEPING" set as two stacked
   lines of type beside it (not the full tall stacked-logo artwork,
   which is too tall for a compact bar). Same navy/gold two-tone
   treatment as the real logo, just recomposed horizontally. */
.logo--header {
  gap: var(--space-3);
}

.logo__icon {
  display: block;
  height: 40px;
  width: auto;
}

.logo__wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo__wordmark-primary {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-navy);
  font-size: 1rem;
}

.logo__wordmark-secondary {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-size: 0.6875rem;
}

@media (min-width: 900px) {
  .logo__icon {
    height: 48px;
  }

  .logo__wordmark-primary {
    font-size: 1.1875rem;
  }

  .logo__wordmark-secondary {
    font-size: 0.75rem;
  }
}

/* Footer logo — unchanged: the full stacked artwork (icon above
   wordmark), sized by height with width auto so it keeps its
   original proportions. */
.logo__image {
  display: block;
  width: auto;
  height: 64px;
}

@media (min-width: 900px) {
  .logo__image {
    height: 84px;
  }
}

/* Desktop nav links */
.nav-desktop {
  display: none;
}

@media (min-width: 900px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: var(--space-7);
  }

  .nav-desktop__links {
    display: flex;
    gap: var(--space-6);
  }

  .nav-desktop__links a {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-charcoal);
    padding-block: var(--space-2);
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
  }

  .nav-desktop__links a:hover,
  .nav-desktop__links a[aria-current="page"] {
    color: var(--color-navy);
    border-bottom-color: var(--color-gold);
  }
}

/* Mobile menu toggle button (hamburger) */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
}

@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle__bar {
  width: 24px;
  height: 2px;
  background-color: var(--color-navy);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) 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(-7px) rotate(-45deg);
}

/* Mobile nav panel */
.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  /* Sits flush below the sticky header — references the same
     --header-height variable the anchor-offset system uses, so this
     stays correct automatically if the header's height ever changes
     instead of needing a second hardcoded value kept in sync by
     hand. */
  top: var(--header-height);
  background-color: var(--color-white);
  padding: var(--space-6) var(--container-padding-x);
  overflow-y: auto;
}

.nav-mobile.is-open {
  display: block;
}

@media (min-width: 900px) {
  .nav-mobile {
    display: none !important;
  }
}

.nav-mobile__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.nav-mobile__links a {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.375rem;
  color: var(--color-navy);
  padding-block: var(--space-3);
  border-bottom: var(--border-subtle);
}

/* Marks the current page in the mobile menu, echoing the desktop
   nav's gold-underline treatment (.nav-desktop__links a[aria-current]
   above) rather than inventing a separate style. Text stays navy —
   already this list's default color — since gold text on the menu's
   white background would fail WCAG AA contrast. */
.nav-mobile__links a[aria-current="page"] {
  border-bottom-color: var(--color-gold);
}

.nav-mobile .btn {
  width: 100%;
  justify-content: center;
}


/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-navy);
  color: var(--color-white);
  padding-block: var(--space-9) var(--space-6);
}

.site-footer a {
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--transition-fast);
}

.site-footer a:hover {
  color: var(--color-gold);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-7);
  margin-bottom: var(--space-8);
}

@media (min-width: 700px) {
  .site-footer__grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

.site-footer__tagline {
  margin-top: var(--space-4);
  color: rgba(255, 255, 255, 0.7);
  max-width: 32ch;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-6);
  border-top: var(--border-subtle-on-dark);
  font-size: var(--font-size-small);
  color: rgba(255, 255, 255, 0.6);
}

/* Buttons placed inside the footer need light-on-dark styling, same
   idea as the .section--navy overrides above. */
.site-footer .btn-secondary {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.5);
  align-self: flex-start;
}

.site-footer .btn-secondary:hover {
  background-color: var(--color-white);
  color: var(--color-navy);
}

@media (min-width: 700px) {
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Secondary/legal links (Privacy Policy, Terms of Use) in the footer's
   bottom bar, alongside the copyright line — deliberately kept out of
   the main .site-footer__links nav column so they read as legal
   housekeeping rather than competing with primary site navigation. */
.site-footer__legal {
  display: flex;
  gap: var(--space-5);
}


/* --------------------------------------------------------------------------
   8. FORMS
   -------------------------------------------------------------------------- */
.field {
  margin-bottom: var(--space-7);
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field input[type="tel"],
.field textarea,
.field select {
  width: 100%;
  padding: 0.85rem 1rem;
  background-color: var(--color-white);
  border: 1px solid rgba(12, 30, 51, 0.35);
  border-radius: var(--radius-md);
  font-size: 1rem;
  color: var(--color-charcoal);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.field textarea {
  min-height: 140px;
  resize: none;
}

.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-tint-15);
}

/* Radio / checkbox groups (used for the multiple-choice questions on
   the Contact page, e.g. "Which service are you interested in?").
   Each option is its own bordered row rather than a bare dot + label
   — easier to scan, and it's clear which one is selected at a glance
   without relying only on the small native radio dot. */
.field__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.field__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 400;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(12, 30, 51, 0.15);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.field__option:hover {
  border-color: var(--color-gold);
}

/* Highlights the selected option's row, not just the tiny radio dot.
   :has() is well supported in current browsers; if it's ever
   unsupported, the native radio dot alone still shows the selection,
   so nothing breaks. */
.field__option:has(input:checked) {
  border-color: var(--color-gold);
  background-color: var(--color-gold-tint-15);
}

.field__option:has(input:focus-visible) {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.field__option input[type="radio"],
.field__option input[type="checkbox"] {
  accent-color: var(--color-navy);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* The row itself already shows a focus outline (above) — suppress
   the input's own, so keyboard focus isn't marked twice. */
.field__option input:focus-visible {
  outline: none;
}

/* Groups related fields (e.g. "Your information" vs. "Your
   bookkeeping" on the Contact form). Browsers add a default border
   and odd padding to <fieldset> — reset that and style <legend> to
   read as a section heading instead. */
fieldset {
  border: none;
  padding: 0;
  min-width: 0;
  margin-bottom: var(--space-7);
}

fieldset:last-of-type {
  margin-bottom: var(--space-7);
}

legend {
  width: 100%;
  padding: 0 0 var(--space-4) 0;
  margin-bottom: var(--space-6);
  border-bottom: var(--border-subtle);
  font-family: var(--font-serif);
  font-size: var(--font-size-h3);
  color: var(--color-navy);
}

/* Puts two fields side by side on wider screens (e.g. Name / Business
   Name) — single column on mobile like the rest of the form. */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-5);
}

@media (min-width: 640px) {
  .form-row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Success/error messages shown after a form submission attempt.
   Restrained on purpose — a border and generous padding, no heavy
   color fields or icons. The left border color is a quick visual
   cue, but the message text itself (not color alone) is what
   actually communicates success vs. failure. */
.form-status {
  border: 1px solid var(--color-navy-tint-10);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.form-status--success {
  border-left-color: var(--color-gold);
}

.form-status--success h3 {
  margin-bottom: 0;
}

.form-status--error {
  /* A muted rust tone — enough to read as "something needs
     attention" without being an alarming, saturated red. */
  border-left-color: #b5651d;
}

.form-status--error p {
  margin: 0;
}


/* --------------------------------------------------------------------------
   9. CARDS
   Deliberately restrained: a background, a subtle 1px border, and
   generous padding. No drop shadows by default — the layout should
   still look intentional even with shadows stripped out entirely.
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--color-white);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color var(--transition-base);
}

.card:hover {
  border-color: var(--color-gold);
}

.section--off-white .card {
  background-color: var(--color-white);
}

.section--navy .card {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.15);
}

/* A variant used for pricing plans — same restrained approach, with
   a way to mark one plan as "Most Popular" using a border/label
   instead of a heavy shadow or scale transform. */
.card--featured {
  border-color: var(--color-gold);
  border-width: 2px;
}

.card__badge {
  display: inline-block;
  font-size: var(--font-size-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy);
  background-color: var(--color-gold-tint-30);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}


/* --------------------------------------------------------------------------
   10. UTILITY CLASSES
   Small, single-purpose helpers used across pages.
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.inline-block { display: inline-block; }
.mx-auto { margin-inline: auto; }

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* A simple grid for laying out multiple cards responsively:
   1 column on mobile, more columns as the screen widens. */
.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }

  /* Tablet-width step: 2 columns instead of jumping straight from 1
     to 3/4 columns at the 900px desktop breakpoint, so tablets don't
     get an awkwardly long single-column stack. */
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Placeholder box for Charlie's professional photo, used until the
   real headshot is supplied. Clearly labeled so it's never mistaken
   for a finished part of the design. */
.photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  background-color: var(--color-off-white);
  border: 1px dashed rgba(12, 30, 51, 0.3);
  border-radius: var(--radius-md);
  color: rgba(12, 30, 51, 0.5);
  font-size: var(--font-size-small);
  text-align: center;
  padding: var(--space-4);
}

/* A quiet, editorial substitute for photography — the standalone B
   mark, a thin gold rule, and four words that reinforce how Charlie
   works. No cards, no icons, no illustration — just the mark,
   whitespace, and type, in keeping with the rest of the brand. */
.brand-composition {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-9) var(--space-6);
}

.brand-composition__icon {
  display: block;
  height: 88px;
  width: auto;
}

.brand-composition__divider {
  width: 48px;
  height: 1px;
  background-color: var(--color-gold);
  margin-block: var(--space-6);
}

.brand-composition__words {
  margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   11. ACCESSIBILITY HELPERS
   -------------------------------------------------------------------------- */

/* Visually hides content while keeping it readable by screen readers —
   used for things like form instructions that don't need to be seen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Skip to content" link — hidden until a keyboard user tabs to it,
   then jumps straight to <main>, skipping repeated header/nav links.
   Hidden via transform (moved up by exactly its own height) rather
   than a fixed negative pixel value — a fixed value like "-48px" can
   leave a sliver of the link visible above the viewport if its
   actual rendered height ever exceeds that guess (e.g. from a font
   or padding change), which is exactly what was creating a stray
   navy bar at the top-left of every page. */
.skip-link {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  background-color: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transform: translateY(-150%);
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
}

/* A general focus style for anything not already covered above,
   so keyboard navigation is always visible. */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   12. REUSABLE PAGE COMPONENTS
   These aren't tied to one page — they're patterns the blueprint repeats
   across Home, About, Services, and Contact (a two-column "photo/visual
   next to text" layout, and a numbered list of steps/benefits). Building
   them once here means every page that needs one stays visually
   consistent automatically.
   -------------------------------------------------------------------------- */

/* Centered intro block used at the top of most sections: an eyebrow,
   a headline, and a short paragraph of supporting copy. */
.section-intro {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--space-8);
}

.section-intro p {
  margin-inline: auto;
}

/* A centered "supporting line + button" composition — e.g. "Not sure
   which service is right for you? Let's talk." followed by the
   Schedule a Consultation button, or a closing headline + paragraph
   + button + reassurance line. Constraining the whole group to one
   narrower column (rather than letting each line center itself
   independently inside a full-width section) keeps everything
   reading as one deliberate, aligned composition instead of several
   separately-centered elements that can look adrift from each other
   in a wide section. Spacing between pieces is handled here instead
   of ad-hoc margin-top utility classes, so it stays consistent
   everywhere this pattern is used. */
.cta-group {
  max-width: 520px;
  margin-inline: auto;
  text-align: center;
}

.cta-group > * {
  margin-top: var(--space-4);
}

.cta-group > *:first-child {
  margin-top: 0;
}

.cta-group > .btn {
  margin-top: var(--space-6);
}

/* Two-column layout: a visual (photo placeholder or decorative graphic)
   next to text content. Stacks to one column on small screens. Put
   whichever element should appear first on mobile first in the HTML —
   this component doesn't reorder them. */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

/* Use when the two columns are uneven in height (e.g. a short intro
   next to a long checklist) — top-aligns both columns instead of
   vertically centering them, which otherwise leaves the shorter
   column's heading floating oddly out of line with the other. */
.split--top {
  align-items: start;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
  }

  /* The hero pairs a longer primary column (headline, copy, CTAs)
     with a shorter supporting one, so it gets a bit more width than
     a straight 50/50 split. */
  .hero-split {
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-9);
  }

  /* The About page's intro column is a full editorial read (headline
     through Charlie's bio), paired with a short factual list — that
     column needs much more room than the list does. */
  .split--about {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-9);
  }
}

/* The supporting column in the hero — a single editorial "aside"
   paragraph, not a graphic. A thin gold rule stands in for the
   decorative element that used to be here, marking it as a distinct
   thought rather than a continuation of the primary paragraph.
   Vertically centered against the taller primary column on purpose —
   a shorter, deliberately-set pull quote reads as intentional next
   to a full block of copy, rather than as unfinished content. */
.hero-support {
  border-left: 1px solid rgba(178, 147, 98, 0.5);
  padding-left: var(--space-6);
}

/* A numbered item — used for "Why Bronca Bookkeeping" benefits, "How
   It Works" steps, the Cleanup & Catch-Up process, and the Contact
   "What Happens Next" steps. Just a number, a heading, and a short
   paragraph — no card border, keeping things light. */
.numbered-item__number {
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: var(--space-3);
}

.numbered-item h3 {
  margin-bottom: var(--space-2);
}

/* A short, quiet line of credibility text (e.g. the QuickBooks
   ProAdvisor mention in the hero) — a small gold mark plus text,
   deliberately understated rather than a badge or graphic. */
.trust-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-small);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.85);
}

.trust-line::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-gold);
  flex-shrink: 0;
}

/* A single emphasized statement, used to close out a block of copy
   (e.g. "Less time worrying about your books. More time running your
   business."). Serif italic sets it apart from regular body copy
   without needing a background box or border. */
.statement {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-h4);
  color: var(--color-navy);
  max-width: 36ch;
}

.section--navy .statement {
  color: var(--color-white);
}

/* A simple checklist — used for things like "Who I Work With" and,
   later, service "what's included" lists. A small gold dot replaces
   the default bullet so it stays consistent with the trust-line mark
   used elsewhere, rather than relying on the browser's default disc. */
.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.checklist li {
  position: relative;
  padding-left: var(--space-6);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-gold);
}

/* A "lead" line — a short subheading/tagline directly under an h2,
   e.g. "Keep your books organized and up to date." on the Services
   page. Larger and slightly heavier than body text, but sans-serif
   (not a full heading) so it reads as supporting text, not a title. */
.lead {
  font-family: var(--font-sans);
  font-size: var(--font-size-h4);
  font-weight: 500;
  color: var(--color-navy);
  margin-top: var(--space-3);
}

.section--navy .lead {
  color: var(--color-white);
}

/* A prominent price line, e.g. "Starting at $300/month". Kept as its
   own element (not sharing a <p> with its note) so the two always
   render as clearly separate lines, not just visually spaced text. */
.price-line {
  font-family: var(--font-serif);
  font-size: var(--font-size-h3);
  color: var(--color-navy);
  margin-top: var(--space-6);
}

.section--navy .price-line {
  color: var(--color-white);
}

.price-line + .price-note {
  margin-top: var(--space-2);
}

/* A price with a stronger scan hierarchy than .price-line — used on
   the pricing plan cards. The label ("Starting at") stays small and
   muted, the number is bold, and the "/month" unit is small and
   light — so the eye catches the number first without the number
   itself being blown up to SaaS-pricing-table sizes. */
.price-amount {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-top: var(--space-1);
}

.price-amount span {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  color: rgba(48, 52, 59, 0.55);
  margin-left: 2px;
}

.section--navy .price-amount {
  color: var(--color-white);
}

/* Playfair Display's "$" glyph has two vertical strokes rather than
   one, which reads oddly at the sizes prices are shown at. This swaps
   just the "$" character to the sans-serif (Inter has a normal
   single-stroke $) while leaving the digits in whatever font the
   surrounding price already uses. Every other property is forced to
   inherit from the actual parent price element (rather than picking
   up an unrelated sibling rule, e.g. the "/month" unit styling inside
   .price-amount), so the substitution stays invisible — same size,
   weight, style, and color as the rest of the price. */
.dollar-sign {
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  color: inherit;
  margin-left: 0;
}

/* .price-amount span (above) already targets any <span> inside a
   price — including the dollar sign — to style the "/month" unit.
   That rule is more specific than a bare .dollar-sign class, so
   without this it would win and the $ would end up small, light, and
   muted like the unit text instead of matching the big price number.
   This re-asserts the inherited values with enough specificity to
   actually beat it. */
.price-amount .dollar-sign {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  margin-left: 0;
}

.section--navy .price-amount span {
  color: rgba(255, 255, 255, 0.6);
}

/* Fine print — secondary text that should still be comfortably
   readable: pricing notes, disclaimers, "no pressure" reassurance
   lines. Kept visually secondary through muted color and regular
   weight rather than by shrinking the text too much. Opacity is
   tuned to clear WCAG AA contrast (4.5:1) against white/off-white,
   not just to look reasonably readable. */
.fine-print {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(48, 52, 59, 0.72);
}

.section--navy .fine-print {
  color: rgba(255, 255, 255, 0.65);
}

/* A single FAQ question/answer pair, stacked in a list with a thin
   divider between items — no accordion/JS needed since the answers
   are short enough to just read straight down the page. */
.faq-item {
  padding-block: var(--space-7);
  border-bottom: var(--border-subtle);
}

.faq-item h3 {
  margin-bottom: var(--space-2);
}

.faq-item:first-child {
  padding-top: 0;
}

.faq-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* The About page's combined hero + Meet Charlie intro — a single
   editorial reading column (no photo), somewhat wider than the
   standard .section-intro (640px) but still constrained rather than
   stretching across the page. Left-aligned rather than centered, so
   it continues to read as a block of running text. */
.about-intro {
  max-width: 720px;
}

/* A quiet gold rule marking the shift from "what Bronca Bookkeeping
   is" to "who Charlie is" within that same reading column, without
   splitting it into two separately-colored sections. */
.about-intro__divider {
  width: 48px;
  height: 1px;
  background-color: var(--color-gold);
  margin-block: var(--space-7) var(--space-8);
}

/* A thin divider used to separate the quarterly-pricing callout from
   the monthly plan cards above it, without living inside the
   anchor-linked element itself — anchor scroll offsets only work
   cleanly when nothing sits between the anchor target's own top edge
   and its heading, so this divider's spacing is kept separate from
   the #quarterly target next to it. */
.quarterly-divider {
  height: 1px;
  background-color: var(--color-navy-tint-10);
  margin-block: var(--space-9) var(--space-8);
}

/* Compact quarterly rate list — three plain lines, not three more
   pricing cards, so the monthly plans stay the dominant pricing
   presentation on the page. */
.quarterly-rates {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-8);
  text-align: center;
}

.quarterly-rates p {
  margin: 0;
  font-weight: 600;
  color: var(--color-navy);
}


/* --------------------------------------------------------------------------
   13. LEGAL PAGES
   A narrow, straightforward reading column for Privacy Policy / Terms
   of Use — plain headings and paragraphs using the same typography
   and link styling as the rest of the site, with just enough spacing
   structure to keep long-form policy text easy to scan. Deliberately
   avoids the card/checklist/icon patterns used on the marketing
   pages, since this content should read as a document, not a pitch.
   -------------------------------------------------------------------------- */
.legal-content {
  max-width: 680px;
  margin-inline: auto;
}

/* Each policy section (an untitled intro block, then one block per
   H2) is its own child element. Spacing between sections and between
   the elements within a section is handled here — the same
   "adjacent sibling" pattern .cta-group uses elsewhere — so the HTML
   doesn't need a margin-top utility class on every paragraph. */
.legal-content > div + div {
  margin-top: var(--space-8);
}

.legal-content > div > * + * {
  margin-top: var(--space-4);
}

/* Plain native bullets rather than the gold-dot .checklist treatment
   used on marketing pages — reads as a document list, not a feature
   highlight. */
.legal-content ul {
  list-style: disc;
  padding-left: var(--space-6);
}

.legal-content li + li {
  margin-top: var(--space-2);
}