/* ============================================================
   ICProfit — Accounting for Law Firms
   Palette: Charcoal #26272B · Sage #8CACAB · Muted Red #D34A54
            Coral #F27652 · Gold #E5C36C
   ============================================================ */

:root {
  --charcoal: #26272B;
  --charcoal-soft: #44454B;
  --sage: #8CACAB;
  --sage-dark: #5F817F;
  --red: #D34A54;
  --coral: #F27652;
  --gold: #E5C36C;

  --paper: #FAF7EF;          /* page background */
  --paper-deep: #F2EEE1;     /* alternate section background */
  --sheet: #FDFBF4;          /* ledger sheet paper */
  --line: #E3DDCB;           /* hairline borders */
  --rule: rgba(122, 158, 150, 0.34);        /* horizontal row rules */
  --rule-col: rgba(122, 158, 150, 0.55);    /* money-column dividers */
  --rule-cents: rgba(122, 158, 150, 0.26);  /* dollars | cents rule */
  --ledger-paper: #F4F7EE;                  /* pale green ledger sheet */
  --ledger-paper-deep: #E9F0E7;
  --pad-paper: #FEFCEC;                     /* yellow legal pad */
  --pad-paper-deep: #FCF9E0;
  --pad-rule: rgba(96, 134, 178, 0.16);     /* faint blue pad rule */
  --pad-margin: rgba(211, 74, 84, 0.30);

  /* pale tints for the pricing package panels */
  --tint-red: #FBF1F2;
  --tint-coral: #FDF3EE;
  --tint-gold: #FCF8EA;
  --tint-sage: #F0F5F4;
  --margin-red: rgba(211, 74, 84, 0.45);
  --ink: #2B2C30;

  /* Semantic tokens — the only things dark mode overrides. --charcoal and
     friends stay fixed so gold/coral chips keep their dark text in both modes. */
  --bg: #FAF7EF;              /* page background */
  --surface: #FFFFFF;         /* cards, panels */
  --header-bg: #FDFDFC;
  --text: #2B2C30;
  --heading: #26272B;
  --border: #E3DDCB;
  --sheet-border: #D9D2BC;
  --sheet-rule: #26272B;      /* heavy rules on a ledger sheet */
  --strip-bg: #26272B;        /* charcoal strips, CTA bands, footer */
  --strip-heading: #FAF7EF;
  --strip-text: #DDD9CC;
  --strip-text-soft: #BEBAAD;
  --strip-text-dim: #86837A;

  --font-head: "Playfair Display", Georgia, serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --font-hand: "Caveat", cursive;

  --shadow-card: 0 2px 6px rgba(38, 39, 43, 0.05), 0 10px 28px rgba(38, 39, 43, 0.07);
  --radius: 8px;

  --brand-h: 84px;   /* header logo height; also sets the header's height */
  --nav-pad: 1.1rem; /* .nav-wrap padding, top + bottom combined */
}

/* ---------- Dark mode ----------
   The ledger becomes a dark green sheet with pale rules. Accents are lifted
   a little: #D34A54 on a near-black page reads too dim for small uppercase
   text, so the palette brightens just enough to stay legible while keeping
   the brand hues recognisable. Applied on the system preference, and by
   data-theme when the visitor has made an explicit choice. */

:root { color-scheme: light; }

/* Chrome does not re-resolve a transitioned property when the custom property
   behind its value changes, so a themed element that transitions colour keeps
   the old paint after a theme flip (white-on-white pills, etc). Transitions are
   suppressed for one frame while the palette swaps; the JS toggle adds and
   removes this class. Hover transitions are unaffected. */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #15181A;
    --surface: #1E2226;
    --header-bg: #121417;
    --text: #E3E1D9;
    --heading: #F3F1E9;
    --charcoal-soft: #ABA9A1;
    --border: #2F3439;

    --sheet: #191E1B;
    --sheet-border: #2D342F;
    --sheet-rule: #7FA39A;

    --strip-bg: #0D0F10;
    --strip-heading: #F3F1E9;
    --strip-text: #CFCDC5;
    --strip-text-soft: #A8A69E;
    --strip-text-dim: #7C7A73;

    --ledger-paper: #171C18;
    --ledger-paper-deep: #131714;
    --pad-paper: #201D14;
    --pad-paper-deep: #1A1810;
    --pad-rule: rgba(150, 180, 215, 0.10);
    --pad-margin: rgba(226, 102, 111, 0.26);

    --tint-red: #241B1D;
    --tint-coral: #241E19;
    --tint-gold: #23211A;
    --tint-sage: #1B211F;
    --rule: rgba(140, 172, 171, 0.15);
    --rule-col: rgba(140, 172, 171, 0.24);
    --rule-cents: rgba(140, 172, 171, 0.11);
    --margin-red: rgba(226, 102, 111, 0.38);

    --sage-dark: #9CBFBB;
    --red: #E2666F;
    --coral: #F58A66;
    --gold: #EBCC80;

    --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 30px rgba(0, 0, 0, 0.32);
  }
}

/* Same palette, applied when the visitor has explicitly chosen dark. Plain CSS
   has no way to share a declaration block across a media query boundary, so
   these values are intentionally duplicated — edit both together. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #15181A;
  --surface: #1E2226;
  --header-bg: #121417;
  --text: #E3E1D9;
  --heading: #F3F1E9;
  --charcoal-soft: #ABA9A1;
  --border: #2F3439;

  --sheet: #191E1B;
  --sheet-border: #2D342F;
  --sheet-rule: #7FA39A;

  --strip-bg: #0D0F10;
  --strip-heading: #F3F1E9;
  --strip-text: #CFCDC5;
  --strip-text-soft: #A8A69E;
  --strip-text-dim: #7C7A73;

  --ledger-paper: #171C18;
  --ledger-paper-deep: #131714;
  --rule: rgba(140, 172, 171, 0.15);
  --rule-col: rgba(140, 172, 171, 0.24);
  --rule-cents: rgba(140, 172, 171, 0.11);
  --margin-red: rgba(226, 102, 111, 0.38);

  --sage-dark: #9CBFBB;
  --red: #E2666F;
  --coral: #F58A66;
  --gold: #EBCC80;

  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 30px rgba(0, 0, 0, 0.32);
}

/* The logo's mark and wordmark are charcoal, which disappears on a dark
   header. A filter would flatten the four accent bars to grey, so a recoloured
   variant is swapped in instead — only the charcoal becomes light. */
.brand-mark--dark { display: none; }

:root[data-theme="dark"] .brand-mark--light { display: none; }
:root[data-theme="dark"] .brand-mark--dark { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-mark--light { display: none; }
  :root:not([data-theme="light"]) .brand-mark--dark { display: block; }
}

/* ---------- Theme toggle ---------- */

.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.42rem 0.62rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover { border-color: var(--sage-dark); color: var(--sage-dark); }

/* The footer strip is dark in both themes, so the toggle takes strip colours
   rather than the page's text/border tokens. */
.site-footer .theme-toggle {
  border-color: rgba(140, 172, 171, 0.35);
  color: var(--strip-text);
  padding: 0.35rem 0.7rem;
}

.site-footer .theme-toggle:hover,
.site-footer .theme-toggle:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: inline; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

.container { width: min(1120px, 92%); margin: 0 auto; }

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--heading);
  line-height: 1.2;
}

h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); }
h3 { font-size: 1.25rem; }

.kicker {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-weight: 600;
  font-size: 0.76rem;
  color: var(--red);
  margin-bottom: 1rem;
}

.lede {
  font-size: 1.13rem;
  color: var(--charcoal-soft);
  max-width: 46rem;
}

a { color: var(--sage-dark); }

/* ---------- Stripe accent (from the ledger book cover) ---------- */

.stripe-rule {
  display: flex;
  gap: 6px;
  margin: 1.4rem 0 0;
}
.stripe-rule span { height: 5px; width: 40px; border-radius: 3px; }
.stripe-rule .s-red   { background: var(--red); }
.stripe-rule .s-coral { background: var(--coral); }
.stripe-rule .s-gold  { background: var(--gold); }
.stripe-rule .s-sage  { background: var(--sage); }
.stripe-rule.centered { justify-content: center; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  /* four-colour band separating the header from the page below */
  border-bottom: 6px solid;
  border-image: linear-gradient(90deg,
    var(--red) 0 25%, var(--coral) 25% 50%,
    var(--gold) 50% 75%, var(--sage) 75% 100%) 1;
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
}

.brand { display: flex; align-items: center; text-decoration: none; }
.brand-mark {
  height: var(--brand-h);
  width: auto;
  
}




.site-nav { display: flex; align-items: center; gap: 1.7rem; }

.site-nav a {
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  font-size: 0.94rem;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { color: var(--sage-dark); }
.site-nav a.active { border-bottom-color: var(--red); }

/* ---------- About Us dropdown ---------- */

/* The item hugs its link, so "top: 100%" is the link's own underside — the
   panel drops directly beneath the link rather than the whole header row. */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.sub-nav {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  padding: 0.4rem;
  background: var(--header-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 60;
}

/* keep hover contiguous across the gap between the link and the panel */
.nav-item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.9rem;
}

.nav-item:hover .sub-nav,
.nav-item:focus-within .sub-nav {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.sub-nav a {
  padding: 0.5rem 0.7rem;
  border-radius: 5px;
  border-bottom: none;
  white-space: nowrap;
}

.sub-nav a:hover,
.sub-nav a:focus-visible {
  background: var(--bg);
  color: var(--sage-dark);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  color: var(--text);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.8rem 1.7rem;
  border-radius: 6px;
  border: 1.5px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary { background: var(--coral); color: #fff; }
.btn-primary:hover { background: var(--red); color: #fff; }

.btn-outline { border-color: var(--heading); color: var(--heading); }
.btn-outline:hover { background: var(--heading); color: var(--bg); }

.btn-light { background: var(--gold); color: var(--charcoal); }
.btn-light:hover { background: #d9b455; }

/* nav CTA: beat .site-nav a's color/hover specificity */
.site-nav a.btn { padding: 0.55rem 1.2rem; border-bottom: none; color: #fff; }
.site-nav a.btn:hover { color: #fff; }

/* ---------- Ledger-paper section backgrounds ---------- */

/* Columnar accounting paper: pale green sheet, horizontal row rules, and a
   band of ruled money columns down the right — each split by a lighter cents
   rule, the way a real ledger sheet is printed. */
/* Columnar accounting paper: pale green sheet, horizontal row rules, and a
   band of ruled money columns down the right, each split by a lighter cents
   rule. Copy sits on white panels above it, so the ruling never runs behind
   text — see the .panel rules below. */
.ledger {
  --row-h: 32px;
  --col-w: 96px;
  --cols: 4;
  --cents: 30px;

  position: relative;
  /* stacking context so the ruled overlays can sit behind the content */
  isolation: isolate;
  background-color: var(--ledger-paper);
  background-image:
    repeating-linear-gradient(to right,
      var(--rule-col) 0, var(--rule-col) 1px,
      transparent 1px, transparent calc(var(--col-w) - var(--cents)),
      var(--rule-cents) calc(var(--col-w) - var(--cents)),
      var(--rule-cents) calc(var(--col-w) - var(--cents) + 1px),
      transparent calc(var(--col-w) - var(--cents) + 1px), transparent var(--col-w)),
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(var(--row-h) - 1px),
      var(--rule) calc(var(--row-h) - 1px), var(--rule) var(--row-h));
  background-size: calc(var(--col-w) * var(--cols)) 100%, 100% 100%;
  background-position: right top, left top;
  background-repeat: no-repeat, repeat;
}

/* heavier double rule opening the final (balance) column */
.ledger::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: calc(var(--col-w) * var(--cols));
  width: 4px;
  border-left: 1px solid var(--rule-col);
  border-right: 1px solid var(--rule-col);
  pointer-events: none;
  z-index: -1;
}

/* double red margin line, just outside the content column */
.ledger::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: max(12px, calc(50% - min(560px, 46%) - 22px));
  width: 6px;
  border-left: 1.5px solid var(--margin-red);
  border-right: 1.5px solid var(--margin-red);
  pointer-events: none;
  z-index: -1;
}

.ledger--deep { background-color: var(--ledger-paper-deep); }

/* ---------- Copy panels ----------
   Every block of running text on ledger paper sits on its own white panel, so
   the ruling is visible around the content but never behind it. Cards, the FAQ
   list and the note boxes already carry their own surface. */

.panel,
.page-hero > .container,
.hero .hero-grid > div:first-child,
.ledger .section-head,
.ledger .pull-quote,
.ledger .split > div:first-child,
.ledger > .container > p.center {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2.2rem;
}

/* the centred section head keeps its own width, just with a panel behind it */
.ledger .section-head.centered { padding: 2.2rem 2.4rem; }

.ledger > .container > p.center { padding: 1.2rem 2rem; }

@media (max-width: 640px) {
  .panel,
  .page-hero > .container,
  .hero .hero-grid > div:first-child,
  .ledger .section-head,
  .ledger .pull-quote,
  .ledger .split > div:first-child { padding: 1.5rem 1.3rem; }
}

/* On phones the sheet is only as wide as the content, so the column band and
   margin rule would sit behind the panels. Keep the row rules only. */
@media (max-width: 900px) {
  .ledger::before,
  .ledger::after { display: none; }
  .ledger {
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0, transparent calc(var(--row-h) - 1px),
      var(--rule) calc(var(--row-h) - 1px), var(--rule) var(--row-h));
    background-size: 100% 100%;
    background-position: left top;
    background-repeat: repeat;
  }
}

/* ---------- Ledger sheet (realistic ledger card) ---------- */

.ledger-sheet {
  background: var(--sheet);
  border: 1px solid var(--sheet-border);
  border-radius: 4px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text);
}

.ledger-sheet .sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 1rem 0.6rem;
  border-bottom: 2px solid var(--sheet-rule);
  font-family: var(--font-body);
}

.ledger-sheet .sheet-title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
}

.ledger-sheet .sheet-meta {
  font-size: 0.68rem;
  color: var(--charcoal-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Grid items default to min-width:auto, so a wide child (the nowrap ledger
   table) inflates its whole track past the container. Zeroing it lets the
   track shrink and hands overflow to .sheet-scroll instead of the page. */
.hero-grid > *,
.split > *,
.service-grid > *,
.card-grid > *,
.pricing-grid > *,
.practice-grid > *,
.team-grid > *,
.stat-row > *,
.footer-grid > * { min-width: 0; }

/* wide ledger tables scroll inside the sheet, never widening the page */
.sheet-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.ledger-sheet table { width: 100%; border-collapse: collapse; }

.ledger-sheet th {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--charcoal-soft);
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--sheet-rule);
}

.ledger-sheet td {
  padding: 0.42rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.ledger-sheet .desc { white-space: normal; }

.ledger-sheet th + th,
.ledger-sheet td + td { border-left: 1px solid var(--rule); }

.ledger-sheet .num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger-sheet .debit  { color: var(--red); }
.ledger-sheet .credit { color: var(--sage-dark); }

.ledger-sheet tr.total-row td {
  border-top: 1px solid var(--sheet-rule);
  border-bottom: 3px double var(--sheet-rule);
  font-weight: 600;
  background: rgba(140, 172, 171, 0.10);
}

.ledger-sheet .tickmark {
  font-family: var(--font-hand);
  font-size: 1.05rem;
  color: var(--red);
  line-height: 1;
}

.sheet-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
}

.sheet-foot .hand-note {
  font-family: var(--font-hand);
  font-size: 1.15rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sage-dark);
}

/* ---------- Sections ---------- */

.section { padding: 5.2rem 0; position: relative; }
.section--tight { padding: 3.6rem 0; }

.section-head { max-width: 47rem; margin-bottom: 2.8rem; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.centered .lede { margin: 0.9rem auto 0; }
.section-head h2 { margin-bottom: 0.4rem; }
.section-head .lede { margin-top: 0.9rem; }

/* ---------- Hero ---------- */

.hero { padding: 5.5rem 0 6rem; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}

.hero h1 { margin: 0.4rem 0 1.3rem; }
.hero .lede { margin-bottom: 2.1rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* The hero image fills its frame edge to edge — it carries its own light
   background, so panel padding would read as a double border. */
.hero-graphic {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  line-height: 0;
}

.hero-graphic img { width: 100%; height: auto; display: block; }

.hero-logo {
  height: 150px;
  width: auto;
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 4px 8px rgba(38, 39, 43, 0.25));
}

/* colored accent word inside headings */
.accent { color: var(--red); font-style: italic; }
.accent--sage { color: var(--sage-dark); }
.accent--coral { color: var(--coral); }

@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.9rem 1.7rem;
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--sage);
}

.card:nth-child(4n+1)::before { background: var(--red); }
.card:nth-child(4n+2)::before { background: var(--coral); }
.card:nth-child(4n+3)::before { background: var(--gold); }
.card:nth-child(4n+4)::before { background: var(--sage); }

.card h3 { margin-bottom: 0.6rem; }
.card p { color: var(--charcoal-soft); font-size: 0.95rem; }

.card-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 1rem;
  color: var(--heading);
}
.card-icon svg { width: 100%; height: 100%; }

.card a.card-link {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--red);
  text-decoration: none;
}
.card a.card-link:hover { text-decoration: underline; }

/* ---------- Service cards ----------
   Three boxes side by side rather than alternating full-width rows: the same
   panel treatment as the pricing packages, with the four-colour scheme
   carried on the top bar. */

.service-grid {
  display: grid;
  /* three across, explicitly — auto-fit would drop to two as cards are added */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  /* stretch, so every box in a row is the same height regardless of how much
     copy it carries */
  align-items: stretch;
}

.service-grid > * { min-width: 0; }

.service-card {
  --tier: var(--sage);
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2.1rem 1.7rem;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--tier);
}

.service-card--red   { --tier: var(--red); }
.service-card--coral { --tier: var(--coral); }
.service-card--gold  { --tier: var(--gold); }
.service-card--sage  { --tier: var(--sage); }

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

@media (max-width: 620px) {
  .service-grid { grid-template-columns: 1fr; }
}

.service-card h3 { font-size: 1.35rem; margin-bottom: 0.7rem; }
.service-card > p { color: var(--charcoal-soft); font-size: 0.95rem; }
.service-card .check-list { margin-top: 1.3rem; }
.service-card .check-list li { font-size: 0.92rem; }

/* ---------- Practice area cards ---------- */

.practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}

.practice-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--sage);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.7rem 1.6rem;
}

.practice-card:nth-child(4n+1) { border-left-color: var(--red); }
.practice-card:nth-child(4n+2) { border-left-color: var(--coral); }
.practice-card:nth-child(4n+3) { border-left-color: var(--gold); }
.practice-card:nth-child(4n+4) { border-left-color: var(--sage); }

.practice-card h3 { margin-bottom: 0.55rem; }
.practice-card p { color: var(--charcoal-soft); font-size: 0.95rem; }

.practice-card .focus {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text);
}

.practice-card .focus strong {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  color: var(--red);
  display: block;
  margin-bottom: 0.25rem;
}

/* ---------- FAQ ---------- */

.faq-list { max-width: 820px; margin: 0 auto; }

.faq-list details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--sage);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 0.9rem;
  overflow: hidden;
}

.faq-list details:nth-child(4n+1) { border-left-color: var(--red); }
.faq-list details:nth-child(4n+2) { border-left-color: var(--coral); }
.faq-list details:nth-child(4n+3) { border-left-color: var(--gold); }
.faq-list details:nth-child(4n+4) { border-left-color: var(--sage); }

.faq-list summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.03rem;
  padding: 1.15rem 1.5rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--heading);
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--red);
  flex-shrink: 0;
  line-height: 1;
  transition: transform 0.2s ease;
}

.faq-list details[open] summary::after { transform: rotate(45deg); }

.faq-list .faq-body {
  padding: 0 1.5rem 1.3rem;
  color: var(--charcoal-soft);
  font-size: 0.97rem;
}

.faq-list .faq-body p + p { margin-top: 0.7rem; }

/* ---------- Pricing ---------- */

.pricing-grid {
  display: grid;
  /* four packages now, so the track minimum has to allow 4-up on desktop */
  grid-template-columns: repeat(auto-fit, minmax(min(228px, 100%), 1fr));
  gap: 1.3rem;
  align-items: stretch;
}

.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2.3rem 2rem;
  display: flex;
  flex-direction: column;
  position: relative;
}

.price-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Package panels: a soft tint per tier, the tier's colour used for the rules
   that separate name / focus / ideal-for / price, and no highlighted tier. */
/* All four panels share one background; the four-colour scheme carries through
   as the top bar and the rules between rows. */
.price-card {
  --tier: var(--sage);
  background: var(--surface);
  text-align: center;
  padding: 2rem 1.5rem;
}

.price-card::before { display: block; height: 6px; background: var(--tier); }

.price-card--red   { --tier: var(--red); }
.price-card--coral { --tier: var(--coral); }
.price-card--gold  { --tier: var(--gold); }
.price-card--sage  { --tier: var(--sage); }

/* The name and focus rows are the only ones whose height varies with the
   copy, and any difference cascades to every row beneath. Reserve two lines
   for each so all four columns stay aligned. 3.4em == two lines at the
   inherited 1.7 line-height. */
.price-card .plan-name {
  font-size: 1.45rem;
  padding-bottom: 1rem;
  margin-bottom: 0;
  min-height: calc(3.4em + 1rem);
}

.plan-label {
  border-top: 1px solid var(--tier);
  padding-top: 0.85rem;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--charcoal-soft);
}

.plan-theme {
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--heading);
  margin: 0.15rem 0 0.9rem;
  min-height: 3.4em;   /* two lines, matching .plan-name */
}

.price-card .plan-sub {
  min-height: 0;
  margin: 0.15rem 0 0.9rem;
  font-size: 0.9rem;
}

.price-card .price { font-size: 1.5rem; margin: 0.3rem 0 0.2rem; }

.price-card .check-list { text-align: left; margin-top: 1.4rem; }
.price-card .check-list li { font-size: 0.9rem; }

.price-card.featured { border-color: var(--heading); box-shadow: 0 14px 40px rgba(38,39,43,0.14); }

.price-card .plan-name { font-family: var(--font-head); font-size: 1.45rem; margin-bottom: 0.3rem; }

.price-card .plan-sub { color: var(--charcoal-soft); font-size: 0.92rem; margin-bottom: 1.4rem; min-height: 2.6em; }

.price-card .price {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--heading);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.price-card .price small { font-size: 1rem; font-weight: 500; color: var(--charcoal-soft); }

.price-card .price-note {
  font-size: 0.83rem;
  color: var(--sage-dark);
  margin: 0.45rem 0 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.price-card .check-list { flex: 1; margin-bottom: 1.7rem; }
.price-card .check-list li { font-size: 0.93rem; margin-bottom: 0.55rem; }

.badge-popular {
  position: absolute;
  top: -0.95rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--strip-bg);
  color: var(--gold);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 0.38rem 1.1rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Split / strips ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.4rem;
  align-items: center;
}

@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.charcoal-strip {
  background: var(--strip-bg);
  color: var(--strip-text);
  padding: 4.6rem 0;
  border-top: 6px solid;
  border-image: linear-gradient(90deg,
    var(--red) 0 25%, var(--coral) 25% 50%,
    var(--gold) 50% 75%, var(--sage) 75% 100%) 1;
}

.charcoal-strip h2 { color: var(--strip-heading); }
.charcoal-strip .lede { color: var(--strip-text-soft); }
.charcoal-strip .kicker { color: var(--gold); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 2.2rem;
  margin-top: 2.6rem;
}

.stat .stat-num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
}

.stat:nth-child(1) .stat-num { color: var(--red); }
.stat:nth-child(2) .stat-num { color: var(--coral); }
.stat:nth-child(3) .stat-num { color: var(--gold); }
.stat:nth-child(4) .stat-num { color: var(--sage); }

.stat .stat-label { margin-top: 0.55rem; font-size: 0.92rem; color: var(--strip-text-soft); }

/* ---------- Quote ---------- */

.pull-quote { max-width: 780px; margin: 0 auto; text-align: center; }

.pull-quote blockquote {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.55rem;
  line-height: 1.5;
  color: var(--heading);
}

.pull-quote cite {
  display: block;
  margin-top: 1.3rem;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-dark);
}

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--strip-bg);
  padding: 4.2rem 0;
  text-align: center;
  border-top: 6px solid;
  border-image: linear-gradient(90deg,
    var(--red) 0 25%, var(--coral) 25% 50%,
    var(--gold) 50% 75%, var(--sage) 75% 100%) 1;
}

.cta-band h2 { color: var(--strip-heading); margin-bottom: 0.9rem; }
.cta-band p { color: var(--strip-text-soft); max-width: 42rem; margin: 0 auto 1.9rem; }

/* ---------- Team ---------- */

/* Founder, given the lead position above the rest of the team */
.team-lead {
  display: grid;
  grid-template-columns: 288px 1fr;
  gap: 2.4rem;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 5px solid var(--red);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2.2rem;
  margin-bottom: 1.7rem;
}

.team-lead > * { min-width: 0; }

.team-lead-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.team-lead h3 { font-size: 1.7rem; margin-bottom: 0.2rem; }

.team-lead .role {
  color: var(--red);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0.25rem 0 1rem;
}

.team-lead p { color: var(--charcoal-soft); font-size: 0.97rem; }

@media (max-width: 800px) {
  .team-lead {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.7rem 1.4rem;
    text-align: center;
  }
  .team-lead-photo { max-width: 230px; margin: 0 auto; }
  .team-lead p { text-align: left; }
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.7rem;
}

.team-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2.1rem 1.7rem;
  text-align: center;
}

.avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
}

.avatar--red { background: var(--red); }
.avatar--coral { background: var(--coral); }
.avatar--gold { background: var(--gold); color: var(--charcoal); }
.avatar--sage { background: var(--sage); }

.team-card .role {
  color: var(--red);
  font-weight: 600;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0.25rem 0 0.9rem;
}

.team-card p { font-size: 0.92rem; color: var(--charcoal-soft); }

/* ---------- Anchor targets ---------- */

/* The header is sticky, so an anchor target would otherwise land underneath
   it. Offset every linkable section by the header's height plus breathing
   room. Used by the About Us and Services dropdowns in the header. */
section[id],
.service-card[id] {
  scroll-margin-top: calc(var(--brand-h) + var(--nav-pad) + 2rem);
}

/* ---------- Consultation page ---------- */

.hero-points { margin-top: 1.6rem; }
.hero-points li { color: var(--charcoal-soft); }

.booking-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 2.2rem;
  align-items: start;
}

.booking-grid > * { min-width: 0; }

@media (max-width: 900px) {
  .booking-grid { grid-template-columns: 1fr; }
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 5px solid var(--coral);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 2.2rem;
}

.form-card h2 { font-size: 1.6rem; }

@media (max-width: 640px) {
  .form-card { padding: 1.6rem 1.35rem; }
}

.consult-form { margin-top: 1.8rem; }

/* Spam trap — never shown to people, and kept out of the tab order. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.field-row > * { min-width: 0; }

@media (max-width: 620px) {
  .field-row { grid-template-columns: 1fr; }
}

.field { margin-bottom: 1.1rem; border: 0; padding: 0; }

.field label,
.field legend {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal-soft);
  margin-bottom: 0.4rem;
  padding: 0;
}

.field .req { color: var(--red); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea { resize: vertical; min-height: 7rem; }

.field input::placeholder,
.field textarea::placeholder { color: var(--charcoal-soft); opacity: 0.7; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--sage-dark);
  box-shadow: 0 0 0 3px rgba(140, 172, 171, 0.28);
}

/* only flag invalid fields after a submit attempt, not while typing */
.consult-form.validated input:invalid,
.consult-form.validated textarea:invalid {
  border-color: var(--red);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 0.5rem 1rem;
}

.check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: 0;
  cursor: pointer;
}

.check input { width: auto; accent-color: var(--coral); }

.form-submit { margin-top: 0.4rem; }

.form-note {
  margin-top: 1.1rem;
  font-size: 0.92rem;
  color: var(--charcoal-soft);
}

.form-status {
  margin-top: 1.1rem;
  padding: 0.9rem 1.1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.form-status--ok { border-left: 4px solid var(--sage); }
.form-status--err { border-left: 4px solid var(--red); }

/* Confirmation shown in place of the form after a successful send. */
.form-success { text-align: center; padding: 1.5rem 0 0.5rem; }

.form-success-mark {
  width: 62px;
  height: 62px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  font-size: 2rem;
  line-height: 62px;
}

.form-success h3 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.form-success p { color: var(--charcoal-soft); }
.form-success p + p { margin-top: 0.9rem; }
.form-success .muted { font-size: 0.9rem; }

.booking-aside .note-box h3 { font-size: 1.1rem; margin-bottom: 0.8rem; }

.step-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--charcoal-soft);
  font-size: 0.94rem;
}

.step-list li { margin-bottom: 0.7rem; }
.step-list li:last-child { margin-bottom: 0; }
.step-list strong { color: var(--heading); }

.contact-list { list-style: none; font-size: 0.94rem; }

.contact-list li {
  display: flex;
  gap: 0.8rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--charcoal-soft);
}

.contact-list li:last-child { border-bottom: none; }

.contact-list span {
  flex: 0 0 4.6rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--red);
  padding-top: 0.18rem;
}

.scheduler-slot p { font-size: 0.94rem; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--strip-bg);
  color: var(--strip-text-soft);
  padding: 3.6rem 0 2rem;
  border-top: 5px solid var(--gold);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid rgba(140, 172, 171, 0.22);
}

.footer-grid h4 {
  font-family: var(--font-body);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  margin-bottom: 1rem;
}

.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 0.5rem; font-size: 0.93rem; }
.footer-grid p { font-size: 0.93rem; }

.footer-grid a { color: var(--strip-text-soft); text-decoration: none; }
.footer-grid a:hover { color: var(--gold); }

.footer-wordmark {
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.32em;
  color: var(--sage);
  margin-bottom: 0.9rem;
}

.footer-bottom {
  padding-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-size: 0.85rem;
  color: var(--strip-text-dim);
}

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Mobile nav ---------- */

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  :root { --brand-h: 62px; }
  .hero-logo { height: 104px; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 0.8rem 4% 1.2rem;
    gap: 0.2rem;
    /* a long menu must never become unreachable on a short screen */
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
  }

  .site-nav.open { display: flex; }

  /* comfortable tap targets */
  .site-nav a {
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
  }

  .site-nav a:last-child { border-bottom: none; }
  .site-nav a.active { border-bottom-color: var(--border); color: var(--red); }

  .site-nav a.btn {
    margin-top: 0.8rem;
    padding: 0.85rem 1.2rem;
    text-align: center;
  }

  /* In the drawer there is nothing to hover, so the sub-links sit inline
     under About Us as an indented group. */
  .nav-item { display: block; }
  .nav-item::after { display: none; }

  .sub-nav {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    transition: none;
  }

  .sub-nav a {
    padding: 0.6rem 0.25rem 0.6rem 1.1rem;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.94rem;
    color: var(--charcoal-soft);
  }

  .sub-nav a::before {
    content: "";
    display: inline-block;
    width: 0.55rem;
    height: 1px;
    background: var(--sage);
    vertical-align: middle;
    margin-right: 0.55rem;
  }
}

/* ---------- Small phones ---------- */

@media (max-width: 640px) {
  body { font-size: 16px; }

  .section { padding: 3.4rem 0; }
  .section--tight { padding: 2.6rem 0; }
  .page-hero { padding: 3rem 0 2.6rem; }
  .hero { padding: 3rem 0 3.6rem; }
  .charcoal-strip, .cta-band { padding: 3.4rem 0; }

  .section-head { margin-bottom: 2rem; }

  .footer-grid { grid-template-columns: 1fr; gap: 1.9rem; }

  .card { padding: 1.6rem 1.35rem; }
  .price-card { padding: 1.9rem 1.5rem; }
  .practice-card { padding: 1.5rem 1.35rem; }

  .stat-row { gap: 1.7rem; }
  .pull-quote blockquote { font-size: 1.3rem; }

  .faq-list summary { padding: 1rem 1.15rem; font-size: 1rem; }
  .faq-list .faq-body { padding: 0 1.15rem 1.15rem; }

  .sheet-head { flex-wrap: wrap; gap: 0.35rem; }
  .sheet-foot { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}

@media (max-width: 420px) {
  /* stacked, full-width CTAs are far easier to hit one-handed */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; text-align: center; }

  .price-card .plan-sub { min-height: 0; }
}

/* ---------- Page hero (interior pages) ---------- */

.page-hero { padding: 4.4rem 0 3.8rem; }
.page-hero h1 { margin: 0.4rem 0 1rem; }

/* ---------- Utility ---------- */

.mt-2 { margin-top: 1.4rem; }
.mt-3 { margin-top: 2.6rem; }
.center { text-align: center; }
.muted { color: var(--charcoal-soft); }

.note-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.4rem 1.7rem;
  font-size: 0.95rem;
  color: var(--charcoal-soft);
}

.note-box strong { color: var(--charcoal); }