/* ==========================================================================
   Aurora Private Accounting — web styles (STAGING, v6 "Private Ledger")
   Register: private bank / respected law firm / quiet editorial.
   Two typographic roles:
     EB Garamond regular  → wordmark, display headings, pull quotes
     System sans          → everything else
   Color is meaningful: ink and paper carry the site; sage is the single
   interactive accent (hover, focus, checked); oxide appears once (hero
   button hover). The process timeline uses ink nodes on a hairline spine.
   Permitted lines: the datum rule, the footer top rule, form underlines,
   the About portrait keyline, pull-quote rules, the facts-strip dividers,
   the recognition-row dividers, the service-choice top rules, the
   term rules, the timeline spine, the boundary-panel divider, form controls,
   the FAQ category rule and question dividers, the ecosystem-graphic card
   rules and connectors. Nothing else draws a rule.
   Width system (2026-08-27 alignment pass): .inner.wide is the single outer
   container — header, hero, every band on every page, and the footer — so one
   left edge runs down the whole site. --shell (1280px) caps the structural
   grids inside it, and --content (66ch) is the reading measure. The heading
   rail (.rail) is the shared editorial layout: heading left, copy right.
   ========================================================================== */

/* Subset WOFF2 (2026-08-28): 506 KB TTF -> 60 KB. Covers Basic Latin,
   Latin-1 Supplement, Latin Extended-A, General Punctuation, and the minus,
   euro, trademark, copyright and registered signs — every character the site
   renders, with room for ordinary English and European copy. All 31 OpenType
   features are retained, including tnum, which the figure's stage numerals
   use. Browsers without WOFF2 fall back to the Georgia / Times stack in
   --serif; the full TTF stays in staging/ as the unpublished master. */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Regular-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --ink: #1a2a42;
  --paper: #f5f4f0;
  --paper-lift: #fdfcfa;
  --paper-on-ink: #eceae3;
  --graphite: #333333;
  --slate: #555555;
  --hairline: #c9cdd3;
  --control-border: #7e858e;
  --sage: #66705f;
  --sage-on-ink: #a9b3a0;
  --oxide: #8c3b2a;

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --inner: 1120px;
  /* Page grid (2026-08-27 alignment pass). Two measures, and only two:
       --inner / .inner.wide  the shared outer container. The header, hero,
                              every band on every page, and the footer now use
                              it, so one vertical line drawn down the wordmark
                              passes through every heading on the site.
       --shell                the cap for structural grids inside it, so a
                              very wide screen never stretches a two-column
                              layout past the point where the eye can pair its
                              halves. Every module uses the same cap, which is
                              what makes the trailing space read as a margin
                              rather than as a layout that stopped early. */
  --shell: 1280px;
  --rail-gap: clamp(2rem, 4.5vw, 5rem);
  /* Reading measure (2026-08-27 step 2): 66ch of the running sans, which
     lands near 620px at the 17px body size and holds prose at roughly
     70-75 characters a line. The former flat 680px ran to 80-85 characters,
     wider than editorial comfort. Every prose container derives from this
     token so the measure stays identical across pages. */
  --content: 66ch;

  /* Band rhythm (2026-08-27 step 4): with the alternating paper-lift stripes
     gone, space — not a background change — is what separates one section
     from the next, so the band padding carries more of the page. */
  --band-pad: 5.5rem;
  --band-pad-m: 3rem;
  --band-pad-quiet: 3.5rem;
  --band-pad-quiet-m: 2.6rem;
  --gap-heading: 1.15rem;
  --gap-para: 0.9rem;
  --gap-block: 2rem;
  /* Vertical rhythm inside a band: heading block to the content group it
     introduces, and content group to the call to action that closes it. */
  --gap-group: 2.6rem;
  --gap-cta: 2.6rem;
  --gutter: 2rem;
  --gutter-m: 1.25rem;
}

/* ---- Base ---------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* A quiet native glide for in-page links. The Home font is preloaded so its
   final metrics are present before an anchor scroll begins. */
html { background: var(--paper); scroll-behavior: smooth; }
#when-useful { scroll-margin-top: 1.25rem; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--graphite);
  /* 17px / 1.7 (2026-08-27 step 1): the standard editorial body setting.
     The former 16px / 1.65 sat a step below what a serif-led reading site
     wants, and left too little distance between body copy and h3. */
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.inner {
  max-width: var(--inner);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* Wide variant: header, hero, and major visual bands breathe on large
   screens (~88-92% of the viewport, sensibly capped). Below 1280px it
   behaves exactly like .inner, keeping 1024px and mobile layouts stable.
   Reading prose stays on --content; interactive modules stay narrower. */
@media (min-width: 1280px) {
  .inner.wide { max-width: min(92vw, 1760px); }
}

p { margin-bottom: var(--gap-para); }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline); text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
a:hover { color: var(--sage); text-decoration-color: var(--sage); }

/* Accessibility: skip link + a single visible focus language site-wide */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper-lift);
  padding: 0.7rem 1.2rem;
  font-size: 0.86rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; color: var(--paper-lift); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}

/* ---- Header -------------------------------------------------------------- */
.site-head { background: var(--paper); }
.head-row {
  display: flex;
  align-items: center;   /* v9: SVG wordmark block centers against the nav */
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}
.wordmark {
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.5rem 0;
}
.wordmark:hover { color: var(--sage); }

/* v9: approved SVG wordmark (logo system approved 2026-07-26). Scoped to
   a.wordmark so the historical text-span usage keeps its old styling.
   The logo is never recolored on hover; opacity only. Rendered 260px on
   desktop and 210px on mobile (2026-07-26 size increase) — both above the
   180px digital minimum. Sizing is CSS-only; the approved SVG artwork is
   untouched. */
a.wordmark { display: inline-block; padding: 0.5rem 0; }
a.wordmark img { display: block; width: 260px; max-width: 100%; height: auto; transition: opacity .2s ease; }
a.wordmark:hover img { opacity: 0.8; }

nav.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  font-size: 0.86rem;
  font-weight: 500;
}
nav.site-nav a {
  color: var(--slate);
  text-decoration: none;
  transition: color .2s ease;
  padding: 0.72rem 0.5rem;   /* 44px-friendly tap targets */
  display: inline-block;
}
nav.site-nav a:hover { color: var(--sage); }
nav.site-nav a[aria-current] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* ---- Secure Client Portal (2026-08-27) --------------------------------------
   A utility destination for existing clients, not a marketing page, so it is
   deliberately outside nav.site-nav: its own container, its own visual
   language, and never an entry in the five-item public navigation. An
   outlined box in hairline and slate reads as clearly available while
   staying quieter than any filled a.button, which keeps "Start a
   conversation" the loudest call on every page.

   Placement above 1024px: nav.site-nav takes an auto left margin so the
   navigation and the portal travel together against the right edge, with the
   header's 2rem column gap as the separation between them. The auto margin is
   scoped to that breakpoint on purpose — below it the navigation must keep
   the exact wrapping behaviour it had before the portal existed. Below
   1024px the portal drops to its own centered line rather than competing for
   the row (see the responsive section). */
.head-utility {
  display: flex;
  align-items: center;
}
@media (min-width: 1025px) {
  nav.site-nav { margin-left: auto; }
}
a.portal-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;   /* pinned: the box must not track the body leading */
  letter-spacing: 0.03em;
  color: var(--slate);
  background: transparent;
  border: 1px solid var(--hairline);
  padding: 0.82rem 1.05rem;   /* ≥44px tap target */
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
a.portal-link:hover,
a.portal-link:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--paper-lift);
}
/* In the footer the portal is one item in the existing meta line, not a box:
   it takes the same weight, size, and underline as the phone, email, and
   Privacy links beside it, so nothing about the folio's rhythm changes. */
.folio-meta a.portal-link {
  display: inline;
  border: 0;
  padding: 0;
  line-height: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: transparent;
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 3px;
}
.folio-meta a.portal-link:hover,
.folio-meta a.portal-link:focus-visible {
  color: var(--sage);
  text-decoration-color: var(--sage);
  background: transparent;
}

/* ---- Services subnavigation (v8): Overview / Statement / Quarterly -------- */
nav.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.4rem;
  margin-top: 1.9rem;
  font-size: 0.84rem;
  font-weight: 500;
}
nav.subnav a {
  color: var(--slate);
  text-decoration: none;
  padding: 0.65rem 0.1rem;   /* ≥44px tap target */
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
nav.subnav a:hover { color: var(--sage); }
nav.subnav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---- Service-choice panels (v8): two equal paths --------------------------- */
.svc-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  margin-top: 0;
  max-width: var(--shell);
}
.svc-panel {
  border-top: 2px solid var(--ink);
  border-radius: 0;
  padding: 1.4rem 0 0;
  display: flex;
  flex-direction: column;
}
.svc-panel.lift, .svc-panel.inkp { background: transparent; }
/* Panel headings stay a step below a full section h2 so the two service
   cards read as items inside a section, not as two sections. */
.svc-panel h2 {
  font-size: 1.65rem;
  margin-bottom: 0.6rem;
}
.svc-panel.inkp h2 { color: var(--ink); }
.svc-panel.inkp .eyebrow { color: var(--slate); }
/* A second heading inside one band needs the distance a band would give it. */
.gap-top { margin-top: 4.25rem; display: block; }
.svc-panel p { font-size: 0.97rem; }
.svc-panel.inkp p { color: var(--graphite); }
.svc-panel ul.tick { margin: 0.4rem 0 0; }
.svc-panel ul.tick li { font-size: 0.9rem; margin-bottom: 0.35rem; }
.svc-panel.inkp ul.tick li { color: var(--graphite); }
.svc-panel.inkp ul.tick li::before { color: var(--ink); }
.svc-panel .action { margin-top: auto; padding-top: 1.4rem; }
a.button.on-ink {
  background: transparent;
  border-color: var(--paper-on-ink);
  color: var(--paper-lift);
}
a.button.on-ink:hover { background: var(--sage); border-color: var(--sage); color: var(--paper-lift); }

/* Permitted line: the datum rule */
.datum-rule { border: 0; border-top: 1.5px solid var(--ink); margin: 0; }

/* ---- Photographic hero (2026-07-26, IMG_1753 frame): Michelle's aurora
   sky photograph (IMG_1753 / D7933AA5, selected by frame review) is the
   full-bleed hero background under a SINGLE FLAT ink-navy veil at 45%,
   with paper hero text. 45% is the lowest whole-percentage veil whose
   worst letter-stroke-scale (5x5 CSS px) patch contrast passes WCAG AA
   in every hero text and focus-indicator region on both crops of this
   brighter frame (governing region: the mobile secondary button over the
   green rays, 4.53:1); sub-stroke star pixels are excluded by the patch
   measure and disclosed in the README. No gradient, no text panel, no
   blur, no localized glow. The contour-line texture stays retired *here*:
   the hero carries the photograph and nothing else. As of 2026-08-28 the
   motif is in use again on Home, not as a background but as the join that
   gathers the records into the statement — see .aurora-flow-join in
   site-enhancements.css. */
.hero-typo {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 560px;
  padding: 3rem 0;
  /* A stable ink base avoids a light flash while the photographic hero
     decodes. It is also the hero's accessible, no-image fallback. */
  background: var(--ink);
}
.hero-photo { position: absolute; inset: 0; z-index: 0; }
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left bottom;   /* keeps the green aurora curtains in frame */
}
/* The hero photograph fades in only after motion.js confirms it is ready.
   The .js qualifier preserves the normal visible image for no-JavaScript
   visitors. */
html.js .hero-photo img {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js.hero-ready .hero-photo img { opacity: 1; }
.hero-typo::before {          /* the single flat veil; nothing else overlays */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(26, 42, 66, 0.45);
  pointer-events: none;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero-typo .inner { position: relative; z-index: 2; width: 100%; }

/* Dark-hero text and controls: paper type on the veiled photograph.
   Focus outlines switch to paper here because sage fails 3:1 on the dark
   composite. Labels, destinations, and dimensions are unchanged. */
.hero-typo .hero-title, .hero-typo .hero-sub { color: var(--paper); }
.hero-typo a.button {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.hero-typo a.button.ghost {
  background: transparent;
  border-color: var(--paper);
  color: var(--paper);
}
.hero-typo a.button.ghost:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.hero-typo a:focus-visible { outline-color: var(--paper); }

/* Facts strip: begins BELOW the hero, on the normal paper background */
.hero-facts { background: var(--paper); padding: 2.4rem 0 3rem; }
.hero-facts .facts { margin-top: 0; }
/* Section kicker (2026-07-26 typography cleanup): sentence/title case, no
   tracking, no uppercase transform. The approved SVG wordmark is the only
   letter-spaced element on the site. */
.eyebrow {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--slate);
  margin-bottom: 1.1rem;
}
/* Stable breakpoint sizing (no viewport-width font scaling); the max-width
   measure keeps the H1 wrap deliberate. */
.hero-title {
  font-family: var(--serif);
  /* Match the fallback's apparent size to EB Garamond while the preloaded
     font arrives, preventing the headline from growing or rewrapping. */
  font-size-adjust: from-font;
  font-weight: 400;
  font-size: 3.85rem;
  line-height: 1.08;
  color: var(--ink);
  max-width: 13em;
  margin-bottom: 1.3rem;
}
@media (max-width: 1100px) { .hero-title { font-size: 3.2rem; } }
/* The hero supporting sentence pins its own leading so the approved hero
   composition is unaffected by the 2026-08-27 body line-height change. */
.hero-sub {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
  max-width: 34rem;
  margin-bottom: 2rem;
}

/* ---- Facts strip: the eight-second read ----------------------------------- */
.facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 2.5rem;
  margin-top: 2.5rem;
  max-width: var(--shell);
}
.facts li {
  border-top: 1px solid var(--hairline);  /* permitted: facts-strip dividers */
  padding-top: 0.85rem;
  font-size: 0.9rem;
  color: var(--graphite);
  line-height: 1.5;
}
.facts .label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--sage);
  margin-bottom: 0.3rem;
}

/* ---- Bands ----------------------------------------------------------------
   One continuous paper field (2026-08-27 step 4). Alternating .lift stripes
   were previously carrying most of the page: the difference between --paper
   and --paper-lift is about 2% luminance, so the eye registered a change on
   nearly every scroll without learning anything from it. .lift is now
   punctuation — at most twice on a page, and never for an ordinary reading
   section. Separation comes from band padding instead. */
.band { padding: var(--band-pad) 0; }
.band.lift { background: var(--paper-lift); }
.band.quiet { padding: var(--band-pad-quiet) 0; }
.band.page-intro { padding-bottom: 0; }
.band.page-intro + .band { padding-top: var(--band-pad); }

.band.ink { background: var(--ink); color: var(--paper-on-ink); }
.band.ink h2 { color: var(--paper-lift); }
.band.ink p { color: var(--paper-on-ink); }
.band.ink .eyebrow { color: var(--sage-on-ink); }
.band.ink a { color: var(--paper-lift); text-decoration-color: var(--sage-on-ink); }
.band.ink a:hover { color: var(--sage-on-ink); }
.band.ink a:focus-visible { outline-color: var(--paper-lift); }

/* ---- Narrative sections ----------------------------------------------------
   .section was the old single prose column. Every page now sets its prose in
   the heading rail below, so the class is retained only as a safety net for a
   container that still needs the reading measure on its own. */
.section { max-width: var(--content); }
.section + .section { margin-top: 3.25rem; }

/* Asymmetric splits: intentional grids instead of one prose column */
.split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gap-block) 4rem;
  align-items: start;
  max-width: var(--shell);
}
.split.rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* ---- Heading rail ----------------------------------------------------------
   The site's shared editorial layout: the section heading sits in a left
   column and the copy it introduces sits in a wider right column. Because the
   columns are proportional rather than fixed, every h2 that uses the rail
   begins on the same vertical axis, so a reader scanning a page gets an index
   down the left edge while the prose keeps its own comfortable measure.
   Collapses to one column at 900px — mobile stays a plain single column. */
.rail {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  column-gap: var(--rail-gap);
  row-gap: var(--gap-block);
  align-items: start;
  max-width: var(--shell);
}
/* For a rail whose right column carries a module rather than prose — the
   engagement timeline, the relevance guide, the inquiry form. */
.rail.rail-module { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
.rail-head { min-width: 0; }
.rail-head > h2, .rail-head > h3 { margin-bottom: 0; }
.rail-body { min-width: 0; max-width: var(--content); }
.rail-body.full { max-width: none; }
.rail-body > :first-child { margin-top: 0; }
.rail-body > .section { max-width: none; }
.rail + .rail { margin-top: 3.25rem; }

/* A heading block that introduces a full-width module instead of a right
   column. Same left edge, same distance to what follows. */
.band-head { max-width: 46ch; }
.band-head > h2 { margin-bottom: 0; }
.band-head + * { margin-top: var(--gap-group); }

/* The short sentence under a section heading. Distinct from .subtitle, which
   belongs to the page title. */
.lede {
  margin: 0.85rem 0 0;
  color: var(--slate);
  max-width: 42ch;
}
.rail-head .lede { max-width: 34ch; }
.band.ink .lede { color: var(--paper-on-ink); }

/* ---- Closing invitation ------------------------------------------------------
   The one centred element a page is allowed. It marks the end of the reading
   and makes a single request, so centring reads as punctuation rather than as
   a second alignment system competing with the rail. */
.closing-cta {
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.closing-cta .action { margin-top: 1.8rem; }

/* ---- Headings -------------------------------------------------------------
   Type scale (2026-08-27 step 1). Each level is a clear jump from the one
   below it, so a reader skimming can find the skeleton of a page without
   reading it. The homepage hero (.hero-title / .hero-sub) is deliberately
   excluded and keeps its approved sizing. */
h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 4.4vw, 3.4rem);
  line-height: 1.12;
  color: var(--ink);
  max-width: 24ch;
  margin-bottom: 0.85rem;
}
.subtitle { font-size: 1.15rem; color: var(--slate); max-width: 54ch; }

/* v7 hierarchy: h2 joins the display serif at a clearly subordinate size,
   so section headings read unmistakably as headings, not bold body copy.
   Now fluid, so it holds its share of a wide band instead of staying flat. */
h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 2.6vw, 2.5rem);
  font-weight: 400;
  line-height: 1.22;
  color: var(--ink);
  margin-bottom: var(--gap-heading);
}
/* h3 was 1.05rem — only 5% above body copy, so weight alone carried the
   distinction and subheadings read as bolded paragraphs. */
h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
p + h3, ul + h3 { margin-top: 2.4rem; }

/* ---- Pull quote (max one per page) ----------------------------------------- */
.pull {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  line-height: 1.35;
  color: var(--ink);
  border-top: 1px solid var(--hairline);     /* permitted: pull-quote rules */
  border-bottom: 1px solid var(--hairline);
  padding: 1.4rem 0;
  margin: 1.8rem 0;
  max-width: 24em;
}
.band.ink .pull { color: var(--paper-lift); border-color: rgba(236, 234, 227, 0.35); }

/* ---- Three-column category row -----------------------------------------------
   Home #when-useful, and the client-portal section on Contact. */
.recognition {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem 3rem;
  margin-top: var(--gap-group);
  max-width: var(--shell);
}
/* Direct children only: the pattern is reused on Contact, where one column
   carries a nested ul.tick, and a descendant selector drew a divider rule
   above every bullet in it. */
.recognition > li {
  border-top: 1px solid var(--hairline);  /* permitted: recognition-row dividers */
  padding-top: 0.9rem;
}
.recognition h3 { margin-bottom: 0.45rem; }
.recognition p { font-size: 0.95rem; color: var(--graphite); }

/* Screen-reader-only utility (equation read as a sentence) */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Location line: concise, unframed, under the facts strip ---------------- */
.location-line {
  font-size: 0.88rem;
  color: var(--slate);
  max-width: 56rem;
  margin: 2.2rem 0 0;
}

/* ---- Two-path layout (Ways to Work Together): balanced, full measure -------- */
.duet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-block) 5rem;
  margin-top: var(--gap-group);
  max-width: var(--shell);
}
.duet > div { border-top: 1px solid var(--hairline); padding-top: 1.1rem; }

/* ---- Process timeline (v6): sequential, single accent ------------------------ */
ol.timeline {
  list-style: none;
  max-width: var(--content);
  margin-top: 0;   /* the heading rail's row gap carries the rhythm */
  border-left: 1px solid var(--hairline);   /* permitted: the timeline spine */
  padding-left: 2.2rem;
}
.tl-step { position: relative; padding-bottom: 2.8rem; }
.tl-step:last-child { padding-bottom: 0.2rem; }
.tl-step::before {
  content: attr(data-n);
  position: absolute;
  left: calc(-2.2rem - 0.95rem);
  top: -0.15rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.band.lift .tl-step::before { background: var(--paper-lift); }
.tl-step h3 { margin-bottom: 0.4rem; transition: color .2s ease; }
.tl-step p { font-size: 0.95rem; max-width: var(--content); }
.tl-step:hover::before, .tl-step:focus-within::before { border-color: var(--sage); color: var(--sage); }
.tl-step:hover h3, .tl-step:focus-within h3 { color: var(--sage); }

/* ---- Boundary panel: prepares / does not ------------------------------------ */
.boundary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-block) 0;
  max-width: 960px;
  margin-top: var(--gap-group);
}
.boundary > div { padding-right: 3rem; }
.boundary > div + div {
  border-left: 1px solid var(--hairline);   /* permitted: boundary divider */
  padding-left: 3rem;
  padding-right: 0;
}
.boundary h3 { margin-bottom: 0.9rem; }
.boundary ul { list-style: none; }
.boundary li { position: relative; padding-left: 1.3rem; margin-bottom: 0.55rem; font-size: 0.95rem; }
.boundary .does li::before { content: "–"; position: absolute; left: 0; color: var(--sage); }
.boundary .not li::before { content: "×"; position: absolute; left: 0; color: var(--slate); font-size: 0.85em; top: 0.12em; }

/* ---- Lists ---------------------------------------------------------------- */
ul.tick { list-style: none; margin: 0 0 var(--gap-para); }
ul.tick li { position: relative; padding-left: 1.3rem; margin-bottom: 0.5rem; }
ul.tick li::before { content: "–"; position: absolute; left: 0; color: var(--ink); }

.note { font-size: 0.95rem; color: var(--slate); max-width: var(--content); margin: 1.6rem 0; }

/* ---- Buttons (v7): solid primary, outline secondary -------------------------- */
a.button, button.submit {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.65;   /* pinned: button height must not track the body leading */
  letter-spacing: 0;
  color: var(--paper-lift);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.82rem 1.8rem;   /* ≥44px tap target */
  text-decoration: none;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
a.button:hover, button.submit:hover:not(:disabled) { background: var(--sage); border-color: var(--sage); color: var(--paper-lift); }
.hero-typo a.button:hover { background: var(--oxide); border-color: var(--oxide); color: var(--paper-lift); }
a.button.ghost { background: transparent; color: var(--ink); }
a.button.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
button.submit:disabled {
  background: var(--paper-lift);
  color: var(--slate);
  border-color: var(--hairline);
  cursor: default;
}
.action { margin-top: var(--gap-cta); }
.action.center { text-align: center; }

/* ---- Principal band portrait (v7): genuine seated photograph, no wash.
   Framed like a gallery print: paper mat + inner hairline keyline. ---------- */
.principal-photo {
  max-width: 440px;
  background: var(--paper-lift);
  padding: 0.7rem;
}
.principal-photo img {
  display: block;
  width: 100%;
  height: auto;              /* let aspect-ratio govern; the height attribute
                                would otherwise pin the frame to 1012px */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 58% 45%;
  border: 0.5px solid var(--hairline);
}

/* ---- Bio (About): asymmetric editorial --------------------------------------- */
.bio {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gap-block) 4rem;
  align-items: start;
  max-width: var(--shell);
}
.bio-media { padding-top: 0.4rem; }
/* Permitted line: the portrait keyline */
.bio img { width: 100%; height: auto; border: 0.5px solid var(--hairline); }

/* ---- Contact form ------------------------------------------------------------ */
form.inquiry { max-width: 920px; margin-top: 0.5rem; }
.form-key {
  margin: 0 0 1.4rem;
  color: var(--slate);
  font-size: 0.82rem;
}
.form-section {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
/* The three fieldsets read as three short steps rather than one long form. */
.form-section + .form-section { margin-top: 2.4rem; }
.form-section legend {
  width: 100%;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 1.05rem;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
}
.field.full { grid-column: 1 / -1; }
.field { margin-bottom: 1.35rem; }
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.field .opt { color: var(--slate); font-weight: 400; font-size: 0.76rem; }
/* v7: visible field containers instead of bare underlines */
.field input, .field select, .field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--graphite);
  background: #fff;
  border: 1px solid var(--control-border);
  border-radius: 0;
  padding: 0.62rem 0.8rem;
  min-height: 2.85rem;                        /* ≥44px tap target */
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .2s ease;
}
.req { color: var(--sage); font-weight: 600; font-size: 0.76rem; }
.contact-details { font-size: 0.95rem; }
.contact-details dt {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--sage);
  margin-top: 1.1rem;
}
.contact-details dt:first-child { margin-top: 0; }
.contact-details dd { margin: 0.1rem 0 0; color: var(--graphite); }
.contact-aside-head { margin-top: 2.2rem; }
.callout {
  border-left: 2px solid var(--sage);
  background: var(--paper-lift);
  border-radius: 0;
  padding: 0.85rem 1.1rem;
  font-size: 0.92rem;
  color: var(--graphite);
  max-width: var(--content);
  margin: 1.2rem 0 1.6rem;
}
.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23555555'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2rem;
  background-color: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}
.form-note { font-size: 0.84rem; color: var(--slate); margin-top: 1rem; }
.form-boundary {
  max-width: var(--content);
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--slate);
  margin-top: 0.2rem;
}

/* ---- Footer ------------------------------------------------------------------ */
footer.folio { border-top: 1px solid var(--hairline); padding: 1.6rem 0 3rem; }
.folio-line {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  font-size: 0.875rem;
  color: var(--slate);
  margin-bottom: 1.2rem;
}
.folio-line .fname { font-weight: 600; letter-spacing: 0; color: var(--ink); }
.folio-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.45rem; align-items: baseline; }
.folio-line a { color: inherit; }
.folio-line a:hover { color: var(--sage); }
.fine-print {
  font-size: 0.875rem;
  color: var(--slate);
  line-height: 1.65;
  max-width: 48rem;
}
.fine-print p { margin-bottom: 0.5rem; }

/* ---- Professional affiliations (Home) --------------------------------------
   Approved-source CPA and MTCPA artwork is presented unchanged near the
   footer. Captions carry the meaning so images may remain decorative to
   screen readers. */
.affiliation-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 0.65fr) minmax(0, 1.35fr);
  gap: 2rem 4rem;
  align-items: center;
  max-width: var(--shell);
}
.affiliation-intro h2 {
  font-size: 1.65rem;
  margin-bottom: 0.45rem;
}
.affiliation-intro p {
  max-width: 32rem;
  color: var(--slate);
  font-size: 0.92rem;
}
.affiliation-marks {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 3rem;
  align-items: start;
}
.affiliation-mark { min-width: 0; }
.affiliation-logo {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.affiliation-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 96px;
  object-fit: contain;
}
.affiliation-logo.cpa-logo img { max-height: 88px; }
.affiliation-mark sup { font-size: 0.58em; vertical-align: super; line-height: 0; }
.affiliation-mark p {
  max-width: 24rem;
  margin: 0.75rem auto 0;
  color: var(--slate);
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: center;
}

/* ---- Public website privacy notice -----------------------------------------
   The notice is set on the same heading rail as the rest of the site, so its
   section headings line up with every other heading on every other page. */
.privacy-lead {
  max-width: var(--content);
  margin: 0 0 3.5rem;
}

/* ---- Motion: quiet scroll reveal --------------------------------------------- */
/* The site's only reveal system, and it is a scroll effect only. There is no
   page-load reveal: .reveal is never present in the markup and is never
   applied to anything already on screen, so a page always paints its title,
   photograph, opening copy, and first section immediately.

   motion.js adds .reveal to the few ordered sequences that sit below the fold
   (the equation terms, the flow-diagram steps, the process steps) and then
   adds .in as the reader reaches them. The movement is deliberately small —
   a short lift and a fade, never a slide, a zoom, or anything travelling
   toward the reader. */
.reveal { opacity: 1; }
html.motion .reveal {
  opacity: 0;
  transform: translateY(0.375rem);
  transition:
    opacity 780ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 780ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
html.motion .reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* Short utility confirmation pages keep the footer anchored on tall screens. */
body.confirmation-page { min-height: 100vh; display: flex; flex-direction: column; }
body.confirmation-page main { flex: 1; }

/* ---- Responsive --------------------------------------------------------------- */
@media (max-width: 900px) {
  .facts { grid-template-columns: 1fr 1fr; gap: 1.4rem 2.5rem; }
  .split, .split.rev { grid-template-columns: 1fr; }
  /* Below a small laptop the heading column is too narrow to set a display
     serif in, so the rail becomes a plain single column: heading, then the
     copy it introduces, in reading order. Tablets and phones never see two
     columns, and this is the same breakpoint the other grids collapse at. */
  .rail, .rail.rail-module { grid-template-columns: minmax(0, 1fr); row-gap: 1.4rem; }
  .rail + .rail { margin-top: 2.8rem; }
  .band-head, .lede, .rail-head .lede { max-width: 54ch; }
  .recognition { grid-template-columns: 1fr; gap: 1.3rem; }
  .bio { grid-template-columns: 1fr; }
  .bio-media { max-width: 420px; order: -1; }
  .boundary { grid-template-columns: 1fr; }
  .boundary > div { padding-right: 0; }
  .boundary > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: var(--gap-block); }
  .affiliation-layout { grid-template-columns: 1fr; }
  .affiliation-intro { max-width: 44rem; }
}
/* The wordmark, the five navigation links, and the portal box together need
   roughly 840px of row. Rather than let them crowd or wrap unpredictably as
   the viewport narrows, the portal drops to its own centered line well before
   that point, with comfortable slack at the breakpoint itself. This is also
   the mobile arrangement: the portal is never squeezed into the row of five. */
@media (max-width: 1024px) {
  .head-utility { width: 100%; justify-content: center; margin-top: 0.35rem; }
}
@media (max-width: 700px) {
  .hero-typo { min-height: 0; padding: 2.5rem 0 2.75rem; }
  .hero-title { font-size: 2.4rem; }
  .hero-facts { padding: 2rem 0 2.5rem; }
  .duet { grid-template-columns: 1fr; }
  .svc-duo { grid-template-columns: 1fr; gap: 2.5rem; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
}
@media (max-width: 620px) {
  .inner { padding-left: var(--gutter-m); padding-right: var(--gutter-m); }
  :root { --gap-group: 2rem; --gap-cta: 2.1rem; }
  .head-row { padding-top: 1.1rem; padding-bottom: 0.9rem; }
  a.wordmark img { width: 210px; }
  /* Below the clamp floor the fluid h1/h2 would hold their desktop minimums,
     which wraps the longer headings to many short lines on a 375px screen.
     These keep the same relationships at a size a phone can carry, and match
     the homepage hero's own 2.4rem mobile step. */
  h1 { font-size: 2.35rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.15rem; }
  nav.site-nav { width: 100%; justify-content: space-between; gap: 0; font-size: 0.82rem; }
  nav.site-nav a { padding: 0.72rem 0.25rem; }
  .band { padding: var(--band-pad-m) 0; }
  .band.quiet { padding: var(--band-pad-quiet-m) 0; }
  .band.page-intro + .band { padding-top: var(--band-pad-m); }
  .facts { grid-template-columns: 1fr; gap: 1.1rem; margin-top: 2.4rem; }
  ol.timeline { padding-left: 1.7rem; }
  .tl-step::before { left: calc(-1.7rem - 0.95rem); }
  .fine-print { columns: 1; }
  .affiliation-marks { grid-template-columns: 1fr; }
  .affiliation-logo { height: 84px; }
  .affiliation-logo img { max-height: 84px; }
}

/* ---- Print --------------------------------------------------------------------- */
@media print {
  body { background: #fff; }
  html.motion .reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  nav.site-nav, .head-utility, button.submit, .action, .skip-link { display: none; }
}