/* ==========================================================================
   Copper & Vine Accounting — shared stylesheet
   Loaded by every page. Page-specific styles stay inline on their page.

   Color tokens below were chosen against a WCAG 2.2 AA contrast audit.
   Read the comments before changing a color — several values are the way
   they are specifically to clear 4.5:1 for body text or 3:1 for UI.
   ========================================================================== */

/* ── Self-hosted fonts (latin subset) ──────────────
   Self-hosted rather than Google's CDN: removes two render-blocking
   third-party requests and keeps visitor IPs off a third party. */
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-400.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jost-500.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/jost-600.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-500.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/cormorant-500i.woff2') format('woff2');}

:root{
  --cream:      #f7f1e3;
  --cream-soft: #fbf7ee;
  --white:      #ffffff;
  --navy:       #232f4b;
  --navy-deep:  #1c2740;
  --ink:        #1e2637;

  /* Copper has THREE tokens because one value cannot clear every use:
     --copper      #b87333  3.4:1 on cream — borders, large text (>=24px) only
     --copper-dk   #9c5b26  4.7:1 on cream — small text and links
     --copper-btn  #a4672d  white label hits 4.6:1 — button fills ONLY
     Using --copper as a button fill gives a 3.79:1 label. That fails AA. */
  --copper:     #b87333;
  --copper-dk:  #9c5b26;
  --copper-btn: #a4672d;
  --copper-hov: #8c561f;   /* button hover — white label 6.1:1 */
  --copper-lt:  #d29868;   /* decorative / large text on dark green */
  --copper-on-dark: #d8a273; /* small copper text on dark green — 4.65:1 */

  /* Section-background palette — the page was too much cream end to end.
     --sand was #f6ecdc and read as too strong a band (2026-07-27); lightened
     ~55% toward --cream-soft. It must stay a touch DARKER than --cream-soft
     (#fbf7ee) or the bands it separates stop reading as separate sections.
     Contrast headroom went UP, not down: --copper-dk links measure 4.79:1 here
     against 4.56:1 on the old value, so this direction is always the safe one —
     going warmer again is what would drop links below AA.

     --bark is the full dark band (credential strip, the Enrolled Agent row,
     the service-page prose, the FAQ). Was #463227, which read muddy — the fix
     was as much saturation as darkness: near-espresso H23° S44% L14% against
     the old H21° S28% L21%. Low-saturation mid-brown is what reads as muddy.
     Every light token gained contrast on the way (cream 10.68 → 13.74, answer
     text 7.74 → 9.96, copper links 5.35 → 6.88), so this direction is always
     safe; lightening back toward the old value is what needs re-measuring. */
  --sand:       #f9f2e6;
  --bark:       #332014;

  --slate:      #5b6d99;
  --line:       rgba(184,115,51,.45);
  --moss:       #5a6844;   /* moss accent on light backgrounds — 5.3:1 on cream */

  /* dark-section theme (brand shell green, per BRAND.md) */
  --sec-dark:   #2d4531;
  --sec-deep:   #24392b;
  --sec-txt:    #e5eae4;
  --sec-muted:  #c0cec3;
  --foot-txt:   #a8bfad;
  --foot-dim:   #8ea290;   /* was #7d947f — 3.78:1 failed AA on --sec-deep */
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Jost',sans-serif;
  font-weight:400;
  background:var(--cream);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
.wrap{max-width:1264px;margin:0 auto;padding:0 32px;}

h1,h2,h3,.serif{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;color:var(--navy);}
.accent{color:var(--copper);font-style:italic;} /* only ever inside large headings */
.eyebrow{font-size:14px;letter-spacing:.28em;text-transform:uppercase;color:var(--moss);font-weight:500;}

/* Keeps a phrase from breaking across lines — e.g. "within one business day",
   which otherwise stranded "business day." on a line of its own. */
.nowrap{white-space:nowrap;}

/* Visually hidden but available to screen readers */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Skip link (ADA R2 — first focusable element) ── */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--sec-deep);color:#fff;padding:14px 22px;
  font-size:15px;letter-spacing:.06em;font-weight:500;border-radius:0 0 4px 0;
}
.skip-link:focus{left:0;}

/* ── Focus visibility (ADA R7) ────────────────────
   A single global rule so no interactive element can be missed. */
:focus-visible{outline:3px solid var(--copper-dk);outline-offset:2px;}
.on-dark :focus-visible,
.topbar :focus-visible,
footer :focus-visible{outline-color:#f0d0b0;}

/* ── Reduced motion (ADA R24) ─────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* ── Buttons ──────────────────────────────────────── */
/* ONE spec for every button on the site — same height, font-size, radius and
   padding. Variants may change colour and nothing else. Two details do the
   real work of keeping them equal:
   - every variant carries a 1px border (transparent on the filled one), so a
     bordered button is never 2px taller than an unbordered one;
   - min-height pins the box, so a button with an arrow glyph in it measures
     exactly the same as one without.
   Anything that needs to differ needs a reason — see .rail-form .btn, which
   goes full-width in a narrow form column but keeps every other value. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:600;letter-spacing:.08em;line-height:1.2;
  padding:15px 30px;min-height:52px;text-align:center;
  border:1px solid transparent;border-radius:4px;
  transition:all .25s ease;cursor:pointer;
}
.btn-gold{background:var(--copper-btn);color:#fff;}
.btn-gold:hover{background:var(--copper-hov);}
.btn-outline{border-color:var(--line);color:var(--copper-dk);background:transparent;}
.btn-outline:hover{background:rgba(184,115,51,.08);}
.btn-light{border-color:rgba(255,255,255,.5);color:#fff;background:transparent;}
.btn-light:hover{background:rgba(255,255,255,.1);}
.mobile-only{display:none;}
/* The footer's links, duplicated into the menu panel for phones. Desktop has a
   real footer, so it must never see this — the ≤960px block turns it back on. */
.menu-more{display:none;}

/* ── Intro splash ─────────────────────────────────
   Cream field, logo centred, once per browser session, then both fade away.

   Three deliberate choices, all about not breaking the page:
   - Nothing renders unless the inline script in partials/head.html put
     .cv-intro on <html>. The default state is "no splash".
   - The page content is NEVER hidden — no opacity:0, no display:none on it.
     It is painted, at full strength, behind a fixed sheet. So if any part of
     this fails the content is simply uncovered, and a crawler reading the DOM
     sees an ordinary page rather than hidden text.
   - It is one CSS animation, so it needs no JavaScript beyond the class that
     starts it. It finishes on its own even if js/site.js never loads.

   Timing lives in two places and they have to agree: the delay+duration below,
   and the cleanup timer in partials/head.html, which must outlast them. */
.cv-sheet,.cv-mark{display:none;}
.cv-intro .cv-sheet{
  display:block;position:fixed;inset:0;background:var(--cream);z-index:100;
  pointer-events:none;animation:cv-fade 1s ease 2s both;
}
.cv-intro .cv-mark{
  display:flex;position:fixed;inset:0;align-items:center;justify-content:center;
  z-index:101;pointer-events:none;animation:cv-fade 1s ease 2s both;
}
/* Sized by WIDTH, not height: the logo is 5.6:1, so a height that suits a
   desktop screen would run wider than a phone. */
.cv-intro .cv-mark img{width:min(70vw,420px);height:auto;}
/* `both` fill matters twice over: it holds full opacity through the 2s delay,
   and it keeps the finished state after, so nothing flashes back. */
@keyframes cv-fade{from{opacity:1;}to{opacity:0;visibility:hidden;}}

/* ── Masthead (top bar + header, sticky together) ── */
.masthead{position:sticky;top:0;z-index:40;}

/* ── Top utility bar ──────────────────────────────── */
.topbar{background:var(--sec-dark);color:var(--sec-txt);font-size:16.5px;letter-spacing:.04em;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:10px;padding-bottom:10px;gap:16px;}
/* --copper-lt is only 4.2:1 on --sec-dark; --copper-on-dark clears 4.5 */
.topbar .diamond{color:var(--copper-on-dark);margin-right:8px;}
.topbar-right{display:flex;gap:14px;align-items:center;} /* tightened from 28px to buy room */
/* --foot-dim is tuned for --sec-deep (footer); the topbar sits on the lighter
   --sec-dark, where it drops to 3.85:1 — use --sec-muted here instead */
.topbar-right .sep{color:var(--sec-muted);user-select:none;}
.topbar a:hover{color:var(--copper-lt);}

/* ── Header / nav ─────────────────────────────────── */
header{
  background:var(--cream-soft);border-bottom:1px solid rgba(184,115,51,.35);
  box-shadow:0 6px 16px rgba(28,39,64,.06);position:relative; /* anchors the mobile panel */
}
.nav{display:flex;align-items:center;justify-content:space-between;padding-top:22px;padding-bottom:22px;}
.logo{display:flex;align-items:center;}
.logo img{height:60px;width:auto;}
nav.menu{display:flex;align-items:center;gap:34px;}
nav.menu a:not(.btn){
  font-size:14.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;
  color:var(--navy);padding:5px 0;border-bottom:2px solid transparent;
}
nav.menu a:not(.btn):hover{color:var(--copper-dk);}
nav.menu a.active{color:var(--copper-dk);border-bottom-color:var(--copper);}
nav.menu .btn{margin-left:8px;align-self:center;}

/* Hamburger — a real <button>, hidden on desktop */
.nav-toggle{
  display:none;width:46px;height:46px;background:transparent;border:1px solid var(--line);
  border-radius:4px;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--navy);transition:transform .25s ease,opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ── Hero ─────────────────────────────────────────── */
.hero{padding:48px 0 26px;}
/* The right column occupies exactly the h1's vertical run. Three parts:
   stretch (not start) so the column fills the grid row the h1 defines;
   padding-top equal to what sits above the h1 in the left column — the
   eyebrow's 23.8px line box plus the h1's own 18px margin; and margin-top:auto
   on the CTA so it settles against the bottom edge of that same row. */
.hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:stretch;}
.hero h1{font-size:clamp(40px,4.3vw,56px);line-height:1.06;margin-top:18px;}
.hero-right{padding-top:42px;display:flex;flex-direction:column;}
.hero-right p{font-size:18px;max-width:44ch;}
.hero-ctas{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:auto;}
.hero-ctas .alt{font-size:15.5px;color:var(--copper-dk);border-bottom:1px solid var(--line);padding-bottom:2px;font-weight:500;}
.hero-ctas .alt:hover{color:var(--copper-hov);}

.hero-img{position:relative;margin-top:44px;}
.hero-img img{width:100%;height:520px;object-fit:cover;object-position:center 38%;}
.hero-img::after{content:"";position:absolute;inset:14px;border:1px solid rgba(210,152,104,.75);pointer-events:none;}
/* Hero ticker — "We love working for" + a rotating industry.
   The rotator is decorative emphasis (the full list lives in the industries
   section), so it is aria-hidden and the label carries an sr-only completion. */
/* The box hugs its contents (no min-width): the rotator stacks every industry
   in one grid cell, so the cell is as wide as the LONGEST industry and the box
   never resizes as the words cycle. */
.hero-ticker{
  position:absolute;left:34px;bottom:34px;background:var(--cream);
  padding:32px 40px;box-shadow:0 10px 30px rgba(28,39,64,.18);z-index:2;
  text-align:center;
}
/* inner copper rule, matching the service cards and photo frames */
.hero-ticker::before{
  content:"";position:absolute;inset:11px;border:1px solid rgba(184,115,51,.45);pointer-events:none;
}
.hero-ticker>*{position:relative;}
.ht-label{font-size:13.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--moss);font-weight:500;line-height:1.1;}
/* heart replaces the word "love" — sits a touch taller than the caps,
   in a rose red rather than a pure red so it sits with the copper */
/* Negative margins, not zero: the label around it is letter-spaced at .24em,
   so the space characters either side of the heart each carry ~3px of
   tracking on top of the word space. Backing that out is what actually
   closes the gap — one shared rule, so the hero ticker and the How It
   Works line stay identical. */
.ht-heart{width:30px;height:30px;color:#d9536b;display:inline-block;vertical-align:-10px;margin:0 0 0 -3px;}
.ht-rotator{display:grid;justify-items:center;margin-top:6px;}
/* Pure cross-fade — the words never move. An earlier version slid them
   vertically, which read as a bounce, because the outgoing word travelled
   DOWN while the incoming one came UP. Opacity still needs two curves, not
   one: the exit gets its own class so it can fade fast and immediately,
   while the entrance waits for it to clear. Sharing a single transition
   would fade both words at half strength on top of each other. */
.ht-item{
  grid-area:1/1;white-space:nowrap;
  font-family:'Cormorant Garamond',serif;font-weight:500;font-style:italic;
  font-size:40px;line-height:1.28;color:var(--copper-dk);
  opacity:0;
  transition:opacity .42s ease-out .26s;
}
.ht-item.is-on{opacity:1;}
.ht-item.is-out{opacity:0;transition:opacity .28s ease-in;}
/* set by site.js for the one instant swap to a random opening industry */
.ht-rotator.ht-noanim .ht-item{transition:none;}

.ticker{padding:26px 0 60px;text-align:center;}
.ticker span{font-size:17px;letter-spacing:.24em;text-transform:uppercase;color:var(--moss);font-weight:500;}
.ticker .d{margin:0 18px;color:var(--copper-dk);}

/* ── Credential strip ─────────────────────────────── */
.creds{background:var(--bark);color:var(--cream);}
.creds ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.creds li{
  padding:34px 26px 32px;text-align:center;position:relative;
  border-left:1px solid rgba(255,255,255,.13);
}
.creds li:first-child{border-left:none;}
.creds li::before{ /* small copper tick above each credential */
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:34px;height:2px;background:var(--copper);
}
.creds .k{display:block;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:29px;color:#fff;line-height:1.15;}
/* All four descriptors are written to run to two lines, so the columns
   balance. Keep them roughly 32-52 characters if you edit them. */
.creds .v{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-on-dark);font-weight:500;margin-top:9px;line-height:1.5;}

/* ── Section heads ────────────────────────────────── */
.section-head{text-align:center;max-width:640px;margin:0 auto 56px;}
.section-head h1,
.section-head h2{font-size:clamp(32px,3.6vw,44px);line-height:1.2;margin-top:14px;}
.section-head p{margin-top:18px;font-size:17.5px;text-wrap:balance;}

/* ── Values (replaces the old flat .card-row) ─────── */
.values{background:var(--sand);padding:96px 0;}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.val{
  background:var(--cream-soft);border:1px solid rgba(184,115,51,.28);
  padding:38px 34px;transition:transform .25s ease,box-shadow .25s ease;
}
.val:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(28,39,64,.10);}
/* bare icon, matching the service cards — no tinted bounding box */
.val .icon{margin-bottom:18px;}
.val .icon svg{width:42px;height:42px;color:var(--moss);}
.val h3{font-size:24px;}
.val .rule{width:38px;height:2px;background:var(--copper);margin:13px 0 15px;}
.val p{font-size:16.5px;}

/* ── Services (4-up, wraps 2x2) ───────────────────── */
.services{padding:96px 0;background:var(--white);}
/* max-width:none so the h2 has room to sit on one line at desktop (it needs
   ~712px and the shared .section-head cap is 640px). The paragraph keeps its
   own measure — only the heading wanted the extra width. */
/* Left-aligned ONLY where this block is the page header — services.html folds
   its breadcrumb + h1 in here, and every other page header on the site is left
   aligned, so it belongs to that family. The homepage's copy of .services is a
   section head among four others in a scroll rhythm, and keeps the centred
   base treatment; one left-aligned head with an empty half beside it read as
   unfinished rather than deliberate. */
.services .section-head.is-page-head{text-align:left;margin:0 0 48px;max-width:none;}
/* The hub folds its page header into this block, so the h1 keeps .page-head's
   scale rather than dropping to section-heading size. */
.services .section-head.is-page-head h1{font-size:clamp(36px,4.2vw,52px);line-height:1.1;margin-top:14px;}
.services .section-head.is-page-head .crumbs{margin-bottom:6px;}
.services .section-head.is-page-head p{max-width:64ch;}
/* Same-line when it fits, whole phrase down to the next line when it does not.
   Without this the accent splits as "all year / round", which is the one
   outcome nobody wants. */
.services .section-head h2 .accent,
.industries .section-head h2 .accent{white-space:nowrap;}
/* The hero h1 forces its own line breaks above 960px. Below that the .lb
   breaks drop out and the heading wraps freely, which could split the accent
   across lines — so the phrase is held together. Measured: it needs 205px at
   the 320px h1 size and has 256px, so it never overflows. */
.hero h1 .accent{white-space:nowrap;}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
/* Individuals are a real part of the practice but none of the four cards says
   so, and hanging "for individuals" off the section heading implied personal
   payroll. It gets its own line under the grid instead — same treatment as
   .ind-note under the industries tiles. */
.svc-note{margin-top:34px;font-size:20px;color:var(--ink);text-align:center;}
.svc-note a{color:var(--copper-dk);border-bottom:1px solid var(--line);}
.svc-note a:hover{color:var(--copper-hov);border-bottom-color:var(--copper-hov);}
/* Note-card treatment: an inset copper rule 12px inside the edge, echoing
   the framed photos (.hero-img::after / .meet-img::after). */
.svc-card{
  background:var(--cream-soft);border:1px solid rgba(184,115,51,.3);
  padding:52px 46px;display:flex;flex-direction:column;position:relative;
  transition:transform .25s ease,box-shadow .25s ease;
}
.svc-card::before{
  content:"";position:absolute;inset:12px;border:1px solid rgba(184,115,51,.3);pointer-events:none;
}
.svc-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(28,39,64,.10);}
.svc-card>*{position:relative;}
.svc-card .icon{width:42px;height:42px;color:var(--moss);margin-bottom:18px;}
.svc-card h3{font-size:26px;margin-bottom:12px;}
.svc-card>p{font-size:16.5px;}
/* columns, not grid: grid rows align to the tallest cell, so a two-line item
   like "Business returns (1120, 1120-S, 1065)" left a gap beside its short
   neighbour. Column flow packs them continuously. */
.svc-list{list-style:none;margin-top:22px;columns:2;column-gap:26px;}
/* 16.5px matches .svc-card>p and .prose ul li, so the card carries two type
   sizes instead of three. The ::before line-height is retuned to 2.4 because
   the diamond is positioned off its own 10px size, not the item's. */
.svc-list li{font-size:16.5px;padding-left:19px;position:relative;margin-bottom:10px;break-inside:avoid;}
.svc-list li::before{content:"✦";position:absolute;left:0;top:0;color:var(--copper);font-size:10px;line-height:2.4;}
.svc-link{
  display:inline-block;margin-top:26px;font-size:15px;letter-spacing:.06em;font-weight:500;
  color:var(--copper-dk);border-bottom:1px solid var(--line);padding-bottom:2px;align-self:flex-start;
}
.svc-link:hover{color:var(--copper-hov);}
.svc-card .svc-link{margin-top:auto;padding-top:30px;} /* pin to baseline, never crowd the list */

/* ── Enrolled Agent ───────────────────────────────── */
.ea{background:var(--sand);padding:96px 0;}
.ea-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
.ea h2{font-size:clamp(30px,3.4vw,42px);line-height:1.22;margin-top:14px;}
.ea p{margin-top:20px;font-size:17px;max-width:54ch;}
/* Two band variants for the Enrolled Agent section. Only one is applied at a
   time (services.html); swapping is a one-word change in genpages.py.

   Copper: --copper-btn (#a4672d), NOT --copper (#b87333) — white body text on
   #b87333 measures 3.79:1 and fails AA. #a4672d is 4.61:1 and reads as the
   same colour at a glance.
   Bark: the same brown as the homepage credential strip, so it is a colour the
   site already uses rather than a new one. Cream text on it is 10.68:1.
   Either way the white .ea-card is left alone; it is what makes the band work. */
.ea-bark{background:var(--bark);}
.ea-bark .eyebrow{color:var(--copper-on-dark);}
.ea-bark h2{color:var(--cream);}
.ea-bark h2 .accent{color:var(--copper-lt);}
.ea-bark p{color:var(--cream);}
.ea-bark .ea-list li{color:var(--cream);}
.ea-bark .ea-list li::before{border-left-color:var(--copper-lt);border-bottom-color:var(--copper-lt);}
/* Light variant — used on the hub, where the brown now sits on the .ask row
   below instead. Two dark bands back to back would be too much. */
.ea-cream{background:var(--cream-soft);}
.ea-copper{background:var(--copper-btn);}
.ea-copper .eyebrow{color:var(--white);}
.ea-copper h2{color:var(--white);}
.ea-copper h2 .accent{color:#ffe3c9;} /* large text only — 3.9:1 clears the 3:1 bar */
.ea-copper p{color:var(--white);}
.ea-copper .ea-list li{color:var(--white);}
.ea-copper .ea-list li::before{border-left-color:var(--white);border-bottom-color:var(--white);}
.ea-card{background:var(--white);border:1px solid rgba(184,115,51,.3);padding:40px 38px;position:relative;}
/* Inset frame rather than a copper left rule: the 3px rule died against the
   brown band, and this is already the note-card treatment on .svc-card and the
   framed photos, so it reads as the house style on every background. */
.ea-card::before{content:"";position:absolute;inset:12px;border:1px solid rgba(184,115,51,.3);pointer-events:none;}
.ea-card > *{position:relative;}
.ea-card .badge{
  display:inline-block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper-dk);font-weight:600;margin-bottom:16px;
}
.ea-card blockquote{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:21px;font-style:italic;line-height:1.5;color:var(--navy);}
.ea-list{list-style:none;margin-top:26px;}
.ea-list li{font-size:16px;padding-left:26px;position:relative;margin-bottom:11px;}
.ea-list li::before{
  content:"";position:absolute;left:0;top:9px;width:11px;height:6px;
  border-left:2px solid var(--copper-dk);border-bottom:2px solid var(--copper-dk);transform:rotate(-45deg);
}

/* Brown variant for .meet. Its text colours were tuned for --sec-dark green;
   every one of them gains contrast on the darker --bark, so nothing needed
   re-picking — only the background changes. */
.meet.meet-bark{background:var(--bark);} /* .meet-bark alone ties on specificity and loses on source order */

/* ── Secure portal (dark) ─────────────────────────── */
.portal{background:var(--sec-dark);color:var(--sec-txt);padding:96px 0;}
.portal .eyebrow{color:var(--copper-on-dark);}
.portal h2{color:#fff;font-size:clamp(30px,3.4vw,42px);margin-top:14px;line-height:1.22;}
.portal h2 .accent{color:var(--copper-lt);}
/* align-items:end, not center — the screenshot column is shorter than the
   copy + claim tiles beside it, and bottom-flush reads as deliberate where
   centred left it floating 55px high. Self-correcting if the image is
   swapped for a taller one later. */
.portal-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:end;}
.portal p{margin-top:20px;font-size:17px;max-width:52ch;color:var(--sec-txt);}
.portal-feats{list-style:none;margin-top:24px;}
.portal-feats li{font-size:16.5px;padding-left:28px;position:relative;margin-bottom:12px;color:var(--sec-txt);}
.portal-feats li::before{
  content:"";position:absolute;left:0;top:8px;width:12px;height:7px;
  border-left:2px solid var(--copper-on-dark);border-bottom:2px solid var(--copper-on-dark);transform:rotate(-45deg);
}
/* four claim tiles, modelled on the reference layout */
.pills{
  list-style:none;
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:34px;
  background:rgba(0,0,0,.18);padding:16px;border-radius:6px;
}
.pill{
  border:1px solid rgba(224,164,117,.4);border-radius:4px;
  padding:18px 16px;text-align:center;background:rgba(0,0,0,.14);
}
.pill .t{display:block;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:23px;color:#fff;line-height:1.15;}
.pill .s{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-on-dark);margin-top:8px;font-weight:500;}
/* screenshot in a light browser frame */
.portal-shot{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:12px;}
.portal-shot .bar{display:flex;gap:6px;padding:0 4px 10px;}
.portal-shot .bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28);}
/* Slides cross-fade in place. aspect-ratio holds the box so nothing shifts
   while the images load or swap. */
/* Single screenshot now — the four-slide cross-fade and its dots were removed
   2026-07-27. .portal-shot keeps the browser-frame treatment. */
.portal-shot picture img{display:block;border-radius:4px;width:100%;height:auto;}

/* ── Our Process — flowing timeline ───────────────── */
.process{padding:96px 0;background:var(--white);}
/* Five icon medallions on a connecting thread. This section used to be bare
   numerals over text and read as filler — the icons give it the same visual
   language as the service cards above it, which is where the eye has already
   been trained on this page.

   The medallion paints an opaque background on purpose: it masks the thread
   running behind it, so the line reads as continuous rather than segmented. */
.flow{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:22px;position:relative;margin-top:56px;}
.flow::before{ /* the connecting thread — at the medallions' vertical centre */
  content:"";position:absolute;top:38px;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg,transparent,var(--copper) 12%,var(--copper) 88%,transparent);
  opacity:.5;
}
.flow-step{text-align:center;position:relative;}
.flow-node{
  position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:76px;height:76px;margin:0 auto 18px;border-radius:50%;
  background:var(--white);border:1px solid rgba(184,115,51,.4);
  color:var(--moss);                      /* same icon colour as the service cards */
  transition:border-color .22s ease,transform .22s ease;
}
.flow-node .icon{width:32px;height:32px;}
/* The step number rides the ring rather than sitting above the words, so the
   icon carries the meaning and the numeral only carries the order.
   --copper-btn, not --copper: white on it measures 4.6:1, and this is 11.5px. */
.flow-num{
  position:absolute;top:-1px;right:-1px;width:25px;height:25px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--copper-btn);color:#fff;
  font-family:'Jost',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.02em;
}
.flow-step:hover .flow-node{border-color:var(--copper);transform:translateY(-2px);}
.flow-step h3{font-size:22px;margin-bottom:8px;}
.flow-step p{font-size:15.5px;}
.flow-more{text-align:center;margin-top:44px;}
.flow-more a{
  font-size:16px;font-weight:500;color:var(--copper-dk);
  border-bottom:1px solid var(--line);padding-bottom:3px;
}
.flow-more a:hover{color:var(--copper-hov);border-bottom-color:var(--copper-hov);}

/* ── How It Works — the thread ─────────────────────
   A single copper rail running the height of the page with numbered stops
   either side of it, rather than a numbered list. Phase markers sit ON the
   rail like stations, so the eye gets four chapters instead of ten items.

   The rail is one ::before on the <ol>, not a border per row, so it stays
   unbroken between steps and behind the phase markers. Each node paints an
   opaque background to mask the rail passing under it — same trick as
   .flow-node on the homepage. */
.hiw{padding:88px 0 96px;background:var(--bark);}
.hiw-flow{list-style:none;position:relative;max-width:1000px;margin:0 auto;}
.hiw-flow::before{
  content:"";position:absolute;top:6px;bottom:6px;left:50%;width:2px;
  transform:translateX(-1px);
  background:linear-gradient(180deg,transparent,var(--copper-lt) 4%,var(--copper-lt) 96%,transparent);
  opacity:.5;
}
.hiw-phase{
  position:relative;z-index:1;text-align:center;margin:0 0 26px;
}
.hiw-phase:not(:first-child){margin-top:34px;}
.hiw-phase h2{
  display:inline-block;background:var(--bark);padding:0 18px;
  font-size:13px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--copper-on-dark);font-weight:600;
}
.hiw-step{
  display:grid;grid-template-columns:1fr 64px 1fr;align-items:start;
  margin-bottom:30px;
}
.hiw-node{
  grid-column:2;justify-self:center;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--bark);border:1px solid rgba(210,152,104,.5);
  font-family:'Cormorant Garamond',serif;font-weight:500;font-size:23px;
  line-height:1;color:var(--copper-lt);
}
.hiw-card{
  background:rgba(255,255,255,.055);border:1px solid rgba(210,152,104,.28);
  padding:24px 28px;border-radius:4px;
}
.hiw-step.is-left  .hiw-card{grid-column:1;text-align:right;}
.hiw-step.is-right .hiw-card{grid-column:3;}
.hiw-card h3{font-size:23.5px;line-height:1.28;margin-bottom:9px;color:var(--cream);}
.hiw-card p{font-size:17.5px;line-height:1.62;color:#d8cec1;} /* 9.96:1 on --bark */

/* Sits at the top of the shared CTA block, so it lands on every page carrying
   that block and nowhere else — the FAQ's cta-question.html variant does not
   get it. Heart is the .ht-heart from the hero ticker, scaled to this line;
   "love" is sr-only so a screen reader hears a sentence rather than
   "We working for our clients". */
/* Selector is .cta .cta-love, NOT .cta-love: this is a <p>, and `.cta p`
   further down sets `margin:18px auto 0` at (0,1,1) — which silently zeroed a
   plain .cta-love margin-bottom no matter what value it held. Two classes
   here (0,2,1) beat it. max-width:none for the same reason: `.cta p` caps at
   52ch, which this letter-spaced line is wide enough to hit.

   Spacing: the top padding on .cta and the margin below this line are the
   SAME number, which is what centres it between the top edge of the band and
   the heading. Change one, change the other. */
.cta .cta-love{
  font-size:15px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--moss);font-weight:500;line-height:1.1;
  max-width:none;margin:0 auto 68px;
}
.cta-love .ht-heart{width:26px;height:26px;vertical-align:-8px;}

/* ── Industries ───────────────────────────────────── */
.industries{padding:96px 0;background:var(--cream);}
/* 4x3 of the twelve industries, built on the .pills tile pattern from the
   portal section: a translucent tray with bordered tiles inside it. Here the
   tint is --bark rather than black, so it warms the cream band instead of
   greying it. Fixed 4 columns — the set is exactly twelve, and auto-fit gave
   a ragged last row. */
.ind-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px;
  background:rgba(51,32,20,.05);padding:16px;
}
.ind{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:74px;padding:16px 14px;font-size:16.5px;font-weight:500;line-height:1.35;
  /* --bark at 90%: enough of the cream reads through to keep it from going
     flat, not enough to weaken white text (11.5:1 on the blended result) */
  color:#fff;background:rgba(51,32,20,.9);
  /* --copper-lt, not --copper — the darker copper goes muddy on brown */
  border:1px solid rgba(210,152,104,.45);border-radius:4px;
  transition:background .22s ease,border-color .22s ease,transform .22s ease;
}
.ind:hover{background:rgba(51,32,20,1);border-color:var(--copper-lt);transform:translateY(-2px);}
.ind-note{margin-top:26px;font-size:16px;color:var(--ink);text-align:center;}

/* Same tiles on the dark band at the foot of the about page. The light-band
   version is a dark tile on cream; invert it — a translucent WHITE tile — or
   bark-on-bark disappears. Two columns, not four, because it shares the row
   with the ask form. */
.ask-bark .ind-grid{
  grid-template-columns:repeat(2,1fr);background:rgba(0,0,0,.18);margin-top:28px;
}
.ask-bark .ind{
  background:rgba(255,255,255,.06);border-color:rgba(210,152,104,.4);
  min-height:62px;font-size:15.5px;
}
.ask-bark .ind:hover{background:rgba(255,255,255,.12);border-color:var(--copper-lt);}

/* ── Our Story (dark) ─────────────────────────────── */
.meet{background:var(--sec-dark);color:var(--sec-txt);padding:96px 0;}
.meet-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center;}
.meet-img{position:relative;}
.meet-img img{height:420px;width:100%;object-fit:cover;object-position:center 70%;}
.meet-img::after{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.4);}
.meet .eyebrow{color:var(--copper-on-dark);}
.meet h2{font-size:clamp(30px,3.4vw,42px);color:#fff;line-height:1.25;margin-top:14px;}
.meet h2 .accent{color:var(--copper-lt);}
.meet p{margin-top:20px;font-size:17.5px;max-width:52ch;}
.meet .btn{margin-top:28px;}

/* ── Tools / resource cards (used on resources.html) ── */
.tools{padding:96px 0;background:var(--cream);}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.tool{background:var(--white);border:1px solid rgba(184,115,51,.25);padding:36px 32px;}
.tool .icon{width:36px;height:36px;color:var(--moss);margin-bottom:16px;}
.tool h3{font-size:22px;}
.tool p{font-size:16px;margin-top:8px;}
.tool a{display:inline-block;margin-top:16px;font-size:15px;color:var(--copper-dk);font-weight:500;}
.tool a:hover{color:var(--copper-hov);}

/* ── Testimonial ──────────────────────────────────── */
.quote{background:var(--sec-deep);color:#fff;padding:96px 0;text-align:center;}
.quote .eyebrow{color:var(--copper-on-dark);}
.quote h2{color:#fff;font-size:clamp(30px,3.4vw,40px);margin-top:14px;}
.quote blockquote{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:26px;font-style:italic;max-width:680px;margin:38px auto 0;line-height:1.5;}
.quote cite{display:block;margin-top:22px;font-family:'Jost',sans-serif;font-style:normal;font-size:14.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sec-muted);}
.quote cite a{color:var(--copper-on-dark);border-bottom:1px solid rgba(216,162,115,.5);}
.quote cite a:hover{color:#fff;border-bottom-color:#fff;}

/* ── CTA ──────────────────────────────────────────── */
/* Top padding matches .cta .cta-love's margin-bottom so the heart line sits
   centred between the top edge of this band and the heading. */
.cta{padding:68px 0 110px;text-align:center;position:relative;background:var(--cream-soft);overflow:hidden;}
.cta .inner{position:relative;}
.cta h2{font-size:clamp(32px,3.6vw,44px);}
.cta p{max-width:52ch;margin:18px auto 0;font-size:17.5px;}
.cta-btns{display:flex;gap:16px;justify-content:center;margin-top:34px;flex-wrap:wrap;}

/* ── Inner-page shared bits ───────────────────────── */
/* White, matching the services hub — the page's one header block sits on white
   on every page rather than in a tinted band of its own. */
.page-head{background:var(--white);border-bottom:1px solid rgba(184,115,51,.25);padding:60px 0 56px;}
.page-head h1{font-size:clamp(36px,4.2vw,52px);line-height:1.1;margin-top:14px;}
.page-head p{margin-top:18px;font-size:17.5px;max-width:60ch;}
.crumbs{font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--moss);margin-bottom:6px;}
.crumbs a{color:var(--copper-dk);}
.crumbs a:hover{color:var(--copper-hov);}
/* Only the decorative "/" gets copper. The trailing span is the current page
   name — real text, so it inherits --moss and stays above 4.5:1. */
.crumbs span[aria-hidden="true"]{margin:0 8px;color:var(--copper-dk);}
/* Split body: a two-column grid of cells with rules between them, used by
   about and the four policy pages. It has to be a real grid rather than two
   stacked column divs — grid stretches both cells in a row to the taller one,
   and that is the only thing that makes the rules line up when the copy in
   each cell differs in length. Borders sit on the cells so the lines run
   unbroken and cross. Expects an EVEN number of cells.
   The lighter cream separates it from the white page-head above. */
.split-body{background:var(--cream-soft);}
.split-grid{display:grid;grid-template-columns:1fr 1fr;}
.split-cell{padding:44px 0;}
.split-cell:nth-child(odd){padding-right:52px;border-right:1px solid rgba(184,115,51,.28);}
.split-cell:nth-child(even){padding-left:52px;}
.split-cell:nth-child(-n+2){padding-top:0;}
.split-cell:nth-last-child(-n+2){padding-bottom:0;}
/* rule under every row but the last — works for 2, 4 or 6 cells */
.split-cell:not(:nth-last-child(-n+2)){border-bottom:1px solid rgba(184,115,51,.28);}
.split-cell h2:first-child{margin-top:0;}
/* "Last updated" line above a policy grid. Small and quiet — it is a fact
   readers occasionally need, not something to lead with. */
.policy-date{
  font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--moss);font-weight:500;margin-bottom:30px;
}

.prose{padding:80px 0;}
/* line-height matters here: with none set these inherited the body's 1.7,
   which at 36px left ~61px between the two lines of "What an Enrolled Agent
   can — and cannot — do". Every other heading on the site already sets its
   own; .prose was the one that had been missed. */
.prose h2{font-size:clamp(27px,3vw,36px);line-height:1.2;margin:44px 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:23px;line-height:1.3;margin:30px 0 10px;}
.prose p{font-size:17px;margin-bottom:16px;max-width:68ch;}
/* Standfirst: with the duplicate opening <h2> gone, the first paragraph is now
   the page's intro and carries a little more weight than body copy. */
.prose-main > p:first-child{font-size:19px;line-height:1.6;margin-bottom:22px;}

/* Brown prose band — the four service pages. Everything is scoped to
   .prose-main on purpose: the rail card is a sibling inside .prose and stays
   white, so it must not inherit any of this. All values measured on --bark:
   cream 10.68, copper-on-dark 5.35, copper-lt 4.83. */
.prose-bark{background:var(--bark);}
.prose-bark .prose-main h2{color:var(--cream);}
.prose-bark .prose-main p{color:var(--cream);}
.prose-bark .prose-main strong{color:#fff;}
.prose-bark .prose-main ul li{color:var(--cream);}
.prose-bark .prose-main ul li::before{color:var(--copper-lt);}
.prose-bark .prose-main a:not(.btn){color:var(--copper-on-dark);border-bottom-color:rgba(216,162,115,.5);}
.prose-bark .prose-main a:not(.btn):hover{color:var(--copper-lt);border-bottom-color:var(--copper-lt);}
.prose ul{margin:0 0 20px 0;list-style:none;max-width:68ch;}
.prose ul li{font-size:16.5px;padding-left:22px;position:relative;margin-bottom:9px;}
.prose ul li::before{content:"✦";position:absolute;left:0;top:0;color:var(--copper);font-size:11px;line-height:2.4;}
.prose a:not(.btn){color:var(--copper-dk);border-bottom:1px solid var(--line);}
.prose a:not(.btn):hover{color:var(--copper-hov);}
.link-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:22px;}
.link-list li{margin:0;padding:0;}
.link-list li::before{display:none;}
.link-list a{
  display:block;border:1px solid rgba(184,115,51,.28);background:var(--white);
  padding:20px 22px;font-size:16px;transition:all .22s ease;border-bottom:1px solid rgba(184,115,51,.28);
}
.link-list a:hover{border-color:var(--copper);transform:translateY(-2px);}
.link-list .d{display:block;font-size:14.5px;color:var(--moss);margin-top:5px;}

/* ── Prose + right rail ───────────────────────────
   Service pages only. `.prose p` is already capped at 68ch (~694px), so the
   rail occupies space the copy was never going to use — the measure is
   unchanged, nothing gets squeezed. Rail markup comes AFTER the prose in
   source order so it lands below the content when the grid collapses. */
/* Same 1.1fr/.9fr/56px split as .ea-grid and .ask-grid, so the ask card is the
   same 515px on every page that carries one. */
.prose-rail{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;}
.rail{position:sticky;top:177px;} /* .masthead is 153px and sticky; 24px breathing room */
.rail-card{background:var(--white);border:1px solid rgba(184,115,51,.3);padding:34px 32px;position:relative;}
.rail-card::before{content:"";position:absolute;inset:12px;border:1px solid rgba(184,115,51,.3);pointer-events:none;}
.rail-card > *{position:relative;}
.rail-card .eyebrow{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-dk);font-weight:600;margin-bottom:12px;}
/* Full margin shorthand, not just margin-bottom. This card lives inside
   <section class="prose">, so .prose h2's `margin:44px 0 14px` was still
   supplying a 44px TOP margin under the eyebrow — the override only replaced
   the properties it named. Same reason .rail-lead resets .prose p's max-width. */
.rail-card h2{font-size:24px;line-height:1.25;margin:0 0 10px;}
.rail-lead{font-size:15.5px;margin-bottom:22px;}
/* Fields mirror contact.html exactly — same off-white fill (#fcfbf9 reads as
   editable where a flat grey reads as disabled) and the same copper focus ring. */
.rf-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.rf-field label{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--moss);font-weight:500;}
.rf-field input,.rf-field textarea{
  font:inherit;font-size:15.5px;color:var(--ink);background-color:#fcfbf9;
  border:1px solid rgba(184,115,51,.35);padding:11px 13px;width:100%;
}
.rf-field textarea{min-height:104px;resize:vertical;}
.rf-field input:focus,.rf-field textarea:focus{
  outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(184,115,51,.15);
}
.rail-form .btn{width:100%;justify-content:center;text-align:center;margin-top:2px;}
.rf-error{color:#8c2f2f;font-size:14.5px;margin-top:12px;}
/* honeypot — out of view, still in the DOM for bots */
.rf-hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden;}
.rf-done .diamond{color:var(--copper);font-size:22px;display:block;margin-bottom:8px;}
.rf-done p{font-size:15.5px;margin-bottom:8px;}
.rf-done p:last-child{margin-bottom:0;}
.rail-alt{font-size:14.5px;color:var(--moss);margin-top:18px;}
.rail-alt a{color:var(--copper-dk);border-bottom:1px solid var(--line);}
.rail-alt a:hover{color:var(--copper-hov);}

/* Hub variant: the services grid is full-width, so there is no rail-shaped
   gap there. Same card, laid out as a two-column band instead. */
.ask{background:var(--cream-soft);padding:88px 0;}
/* Same 1.1fr/.9fr/56px as .ea-grid, deliberately: the .ea-card sits directly
   above this card, and at different widths the two read as a misalignment. */
.ask-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;}
/* About pairs the form with the industry tile tray, and a centred card floats
   above the tray's bottom edge. Bottom-align there so the two blocks close on
   the same line. Services keeps centre — its left side is running copy with no
   edge to line up against. */
.ask-bark .ask-grid{align-items:end;}
.ask-copy h2{font-size:clamp(28px,3.2vw,38px);line-height:1.22;margin-top:14px;}
/* Scoped to .ask-copy, NOT `.ask-grid > div > p` — the rail card is also a
   direct div child, so the looser selector was overriding .rail-lead. */
.ask-copy p{margin-top:18px;font-size:17px;max-width:58ch;}

/* Brown variant — same --bark as the homepage credential strip. The white
   rail card carries the contrast, so only the left column needs recolouring. */
.ask-bark{background:var(--bark);}
.ask-bark .ask-copy .eyebrow{color:var(--copper-on-dark);}
.ask-bark .ask-copy h2{color:var(--cream);}
.ask-bark .ask-copy h2 .accent{color:var(--copper-lt);}
.ask-bark .ask-copy p{color:var(--cream);}

/* ── FAQ ──────────────────────────────────────────
   Sections collapse, questions do not. Native <details> per SECTION: no `name`
   attribute, so several can be open at once (adding `name` would make them
   mutually exclusive, which is the opposite of what is wanted here). The Q&A
   inside is plain text on the brown band — question light, answer a step
   dimmer — rather than the white cards this page used to have. */
.faq{padding:80px 0;background:var(--bark);}
.faq-sec{border-top:1px solid rgba(247,241,227,.16);}
.faq-sec:last-of-type{border-bottom:1px solid rgba(247,241,227,.16);}
.faq-sec > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:28px;padding:28px 0;
}
.faq-sec > summary::-webkit-details-marker{display:none;}
.faq-sec h2{font-size:clamp(24px,2.6vw,31px);color:var(--cream);margin:0;line-height:1.2;}
.faq-sec > summary:hover h2{color:#fff;}
/* boxed + that becomes an × — 4px radius, the one radius the brand allows */
.faq-plus{
  position:relative;flex:none;width:40px;height:40px;border-radius:4px;
  border:1px solid rgba(247,241,227,.28);transition:transform .22s ease,border-color .22s ease;
}
.faq-plus::before,.faq-plus::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--cream);
}
.faq-plus::before{width:15px;height:1.5px;transform:translate(-50%,-50%);}
.faq-plus::after{width:1.5px;height:15px;transform:translate(-50%,-50%);}
.faq-sec[open] > summary .faq-plus{transform:rotate(45deg);}
.faq-sec > summary:hover .faq-plus{border-color:rgba(247,241,227,.6);}

.faq-sec-body{padding:0 0 40px;}
.faq-sec-lead{font-size:16.5px;color:var(--copper-on-dark);margin:-6px 0 26px;max-width:60ch;}
/* ── Resources (bark band, nothing collapses) ──────
   Borrows the FAQ's band and section rules so the two pages read as siblings.
   Rows are the .qa pattern: bold title, muted note beneath. A row that is a
   link takes the copper title, which is the only signal distinguishing the
   two sections — deadlines are facts, official links go somewhere. */
.res-sec{border-top:1px solid rgba(247,241,227,.16);padding:38px 0 30px;}
.res-sec:last-of-type{border-bottom:1px solid rgba(247,241,227,.16);}
.res-sec h2{font-size:clamp(24px,2.6vw,31px);color:var(--cream);margin:0 0 10px;line-height:1.2;}
.res-list{list-style:none;margin:22px 0 0;}
.res-item{display:flex;align-items:flex-start;gap:18px;padding:16px 0;}
.res-item + .res-item{border-top:1px solid rgba(247,241,227,.10);}
.res-text{display:block;}
.res-title{
  display:block;font-family:'Jost',sans-serif;font-weight:600;font-size:18.5px;
  line-height:1.4;color:#fff;
}
.res-note{display:block;font-size:16.5px;line-height:1.6;color:#d8cec1;margin-top:4px;} /* 9.96:1 on --bark */
a.res-text .res-title{color:var(--copper-on-dark);}                /* 4.65:1 on --bark */
a.res-text:hover .res-title{color:var(--copper-lt);text-decoration:underline;}
a.res-text:hover .res-note{color:#e8e0d6;}

/* Tear-off calendar page: copper month band over a big serif day number. */
.cal-chip{
  flex:none;width:56px;overflow:hidden;text-align:center;
  border:1px solid rgba(216,162,115,.45);border-radius:4px;background:rgba(0,0,0,.2);
}
.cal-chip .m{
  display:block;background:var(--copper-on-dark);color:var(--bark);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  line-height:1;padding:5px 0 4px;
}
.cal-chip .d{
  display:block;font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:25px;line-height:1;color:#fff;padding:7px 0 8px;
}

.qa{padding:24px 0;max-width:76ch;}
.qa + .qa{border-top:1px solid rgba(247,241,227,.10);}
/* Jost, not the global Cormorant for h3 — a scannable list of questions reads
   better in the sans, and it matches how these looked before. */
.qa h3{
  font-family:'Jost',sans-serif;font-weight:500;font-size:18.5px;line-height:1.4;
  color:#fff;margin:0 0 10px;
}
.qa p{font-size:16.5px;line-height:1.7;color:#d8cec1;margin-bottom:12px;} /* 9.96:1 on --bark */
.qa p:last-child{margin-bottom:0;}
.qa a{color:var(--copper-on-dark);border-bottom:1px solid rgba(216,162,115,.5);}
.qa a:hover{color:var(--copper-lt);border-bottom-color:var(--copper-lt);}
.qa strong{color:#fff;}

/* ── Footer ───────────────────────────────────────── */
footer{background:var(--sec-deep);color:var(--foot-txt);padding:72px 0 0;font-size:16px;margin-top:auto;}
/* Brand blurb + FOUR link columns. The gap came down from 48px to 40px to buy
   the extra column its width: 1200px content − 4×40px gap leaves 1040px, so
   the link columns land at 189px each — enough for the longest label,
   "Book a Consultation" at roughly 160px. */
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:40px;}
/* Explore (column 2) holds the shortest labels — "Home", "FAQ" — so its track
   runs ~117px of dead space to the right while sitting 40px off the brand
   paragraph. Read as 40px of gap on one side and 157px on the other. Indenting
   the content splits that run evenly. Fluid so the track never gets squeezed
   below the "EXPLORE" heading's width on a narrow desktop. */
.foot-grid > div:nth-child(2){padding-left:min(56px, 4vw);}
.foot-logo{display:flex;align-items:center;margin-bottom:18px;}
.foot-logo img{height:44px;width:auto;filter:brightness(0) invert(1);opacity:.88;}
/* Footer column headings are <h2> so the document outline never skips a level
   (page content ends at h2). They keep the small sans-serif label look. */
footer h2{
  font-family:'Jost',sans-serif;font-size:14px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--copper-on-dark);font-weight:500;margin-bottom:18px;
}
footer ul{list-style:none;}
footer li{margin-bottom:10px;}
footer a:hover{color:#fff;}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1);margin-top:56px;padding:22px 0;font-size:14.5px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--foot-dim);
}
.foot-bottom a{color:var(--foot-dim);border-bottom:1px solid rgba(255,255,255,.18);}
.foot-bottom a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.5);}
/* Inline SVG rather than the 🇺🇸 emoji: the emoji renders as a bare "US"
   on most Linux desktops and varies by platform everywhere else. */
.foot-made{display:flex;align-items:center;gap:9px;}
.flag-us{width:22px;height:13.5px;flex:none;display:block;}
.foot-legal{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.foot-legal .sep{color:var(--foot-dim);user-select:none;}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 960px){
  .wrap{padding:0 20px;}
  .topbar{font-size:14px;}
  .topbar .wrap{justify-content:center;padding-top:8px;padding-bottom:8px;}
  .topbar .msg{display:none;}       /* keep the links, drop the tagline */
  .topbar-right{gap:10px;}
  .tb-extra{display:none;}
  .mobile-only{display:inline-block;}

  /* header: logo left, hamburger right, menu becomes a drop panel */
  .nav{padding-top:12px;padding-bottom:12px;justify-content:space-between;}
  .logo img{height:44px;}
  .nav-toggle{display:flex;}
  nav.menu{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--cream-soft);border-bottom:1px solid rgba(184,115,51,.35);
    box-shadow:0 14px 26px rgba(28,39,64,.14);
    flex-direction:column;align-items:stretch;gap:0;padding:6px 20px 20px;
  }
  /* The panel now carries the whole footer as well, so it can outrun the
     viewport — and it lives inside a position:sticky masthead, which means an
     overflowing bottom would be unreachable. Cap it and let it scroll. */
  nav.menu[data-open="true"]{
    display:flex;max-height:calc(100vh - 96px);
    overflow-y:auto;overscroll-behavior:contain;
  }
  nav.menu a:not(.btn){padding:15px 0;border-bottom:1px solid rgba(184,115,51,.18);border-top:none;}
  nav.menu a.active{border-bottom-color:rgba(184,115,51,.18);}
  nav.menu .btn{margin:16px 0 0;text-align:center;}

  /* Footer content, folded into the menu. Tighter rows than the six primary
     links above it so the secondary material reads as secondary. */
  .menu-more{display:block;padding-top:8px;}
  .mm-head{
    font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--moss);font-weight:600;margin:18px 0 2px;
  }
  .menu-more ul{list-style:none;}
  .menu-more li{margin:0;}
  nav.menu .menu-more a:not(.btn){padding:9px 0;border-bottom:none;font-size:15.5px;}
  .menu-more li span{display:inline-block;padding:9px 0;font-size:15.5px;color:var(--ink);}
  /* One legal link per line — as a wrapped row they ran together and were
     hard to hit accurately with a thumb. */
  .mm-legal{
    display:flex;flex-direction:column;align-items:flex-start;
    margin-top:22px;padding-top:10px;border-top:1px solid rgba(184,115,51,.18);
    font-size:13.5px;color:var(--moss);
  }
  nav.menu .mm-legal a:not(.btn){padding:8px 0;font-size:14px;color:var(--copper-dk);}
  .mm-legal > span{margin-top:12px;}

  /* Hidden on phones per Tim (2026-07-28) — every link it holds is in the
     menu block above, which stays in the DOM either way. */
  footer{display:none;}

  /* hero */
  .hero{padding-top:28px;}
  .hero-grid,.meet-grid,.svc-grid,.ea-grid,.portal-grid{grid-template-columns:1fr;gap:32px;}
  /* one column: the vertical rule goes away and every cell but the last gets
     a rule beneath it, so the divisions survive the stack */
  .split-grid{grid-template-columns:1fr;}
  .split-cell,
  .split-cell:nth-child(odd),
  .split-cell:nth-child(even){padding:36px 0;border-right:none;padding-left:0;padding-right:0;}
  .split-cell:first-child{padding-top:0;}
  .split-cell:last-child{padding-bottom:0;border-bottom:none;}
  .split-cell:not(:last-child){border-bottom:1px solid rgba(184,115,51,.28);}
  .hero-grid > div{text-align:center;}
  .hero h1{font-size:38px;}
  .hero h1 .lb,.ea h2 .lb,.ask-copy h2 .lb,.section-head h2 .lb{display:none;} /* natural wrapping beats forced breaks on phones */
  .hero-right{padding-top:0;}
  .hero-right p{max-width:none;}
  /* single column here, so there is no row to stretch into — the auto margin
     would collapse to zero and jam the button against the paragraph */
  .hero-ctas{align-items:center;margin-top:28px;}
  .hero-img{margin-top:32px;}
  .hero-img img{height:340px;}
  .hero-ticker{left:14px;right:14px;bottom:14px;padding:22px 26px;}
  .hero-ticker::before{inset:8px;}
  .ht-item{font-size:28px;}
  .ticker span{display:block;margin:6px 0;}
  .ticker .d{display:none;}

  /* credential strip stacks 2x2 (hairlines are light-on-bark here) */
  .creds ul{grid-template-columns:repeat(2,1fr);}
  .creds li{border-left:none;border-top:1px solid rgba(255,255,255,.13);padding:28px 18px 26px;}
  .creds li:nth-child(-n+2){border-top:none;}
  .creds li:nth-child(even){border-left:1px solid rgba(255,255,255,.13);}
  .creds .k{font-size:24px;}

  .vals,.tools-grid{grid-template-columns:1fr;}
  .svc-card{padding:40px 30px;}
  .svc-card::before{inset:9px;}
  .values,.meet,.services,.ea,.portal,.process,.industries,.tools,.quote{padding:64px 0;}
  .services .section-head.is-page-head{text-align:center;}
  .svc-list{columns:1;} /* was grid-template-columns — list is column-flow now */
  /* twelve tiles: 4 across only has room on desktop */
  .ind-grid{grid-template-columns:repeat(2,1fr);padding:12px;gap:10px;}
  /* Rail drops below the copy and stops sticking — a sticky block on a phone
     just eats the viewport. */
  .prose-rail,.ask-grid{grid-template-columns:1fr;gap:44px;}
  .rail{position:static;top:auto;}
  .ask{padding:64px 0;}
  .faq{padding:56px 0;}
  .faq-sec > summary{padding:22px 0;gap:18px;}
  .faq-plus{width:34px;height:34px;}
  .qa{padding:20px 0;}
  .meet{text-align:center;}
  .meet p{margin-left:auto;margin-right:auto;}
  .meet-img img{height:300px;}
  .ea p,.portal p{max-width:none;}

  /* Dark bands on phones. Two things, both about the coloured edge: on cream
     there is no visible boundary for text to run into, but on bark/green a
     20px gutter reads as cramped — so these get a wider one. And they centre,
     matching .meet, which is the treatment Tim picked (2026-07-28). */
  .creds .wrap,.ea .wrap,.portal .wrap,.meet .wrap,.quote .wrap,.ask-bark .wrap{padding:0 30px;}
  .ea-bark,.ea-copper,.portal,.ask-bark .ask-copy{text-align:center;}
  .ea-bark p,.ea-copper p,.portal p,.ask-bark .ask-copy p{margin-left:auto;margin-right:auto;}
  /* ...but the tick lists keep left-aligned ROWS. Their markers are absolutely
     positioned at left:0, so centring the text would strand every check far
     from the words it belongs to. Only the block centres. */
  .ea-list,.portal-feats{display:inline-block;text-align:left;}

  /* process becomes a vertical timeline with a left rail */
  /* How It Works: rail moves to the left edge and every card lines up beside
     it. Alternating sides needs the width; below 960px it just reads as zigzag. */
  .hiw{padding:56px 0 64px;}
  .hiw-flow::before{left:21px;}
  .hiw-phase{text-align:left;padding-left:8px;}
  .hiw-step{grid-template-columns:44px 1fr;column-gap:20px;margin-bottom:22px;}
  .hiw-node{grid-column:1;justify-self:start;}
  .hiw-step.is-left .hiw-card,
  .hiw-step.is-right .hiw-card{grid-column:2;text-align:left;}
  .hiw-card{padding:18px 20px;}

  /* Thread turns vertical and the medallions shrink to sit on it. left:29px
     is the centre of the 58px medallion — it has to track the size below. */
  .flow{grid-template-columns:1fr;gap:0;margin-top:40px;}
  .flow::before{top:0;bottom:0;left:29px;right:auto;width:2px;height:auto;
    background:linear-gradient(180deg,transparent,var(--copper) 8%,var(--copper) 92%,transparent);}
  /* align-items:start keeps each medallion level with its heading; without it
     the grid stretches and it floats beside the paragraph instead. */
  .flow-step{text-align:left;display:grid;grid-template-columns:58px 1fr;gap:18px;
    padding-bottom:34px;align-items:start;}
  .flow-node{width:58px;height:58px;margin:0;}
  .flow-node .icon{width:25px;height:25px;}
  .flow-num{width:21px;height:21px;font-size:10.5px;}
  .flow-step h3{margin-top:0;margin-bottom:6px;}
  .flow-more{margin-top:12px;}

  .cta{padding:80px 0;}
  .prose{padding:56px 0;}
  .page-head{padding:44px 0 40px;}
  .foot-grid{grid-template-columns:1fr;gap:36px;text-align:center;}
  .foot-logo{justify-content:center;}
  .foot-bottom{justify-content:center;text-align:center;}
}

/* very small phones — keep everything reflowing at 320px (ADA R20) */
/* Tile grids stack for the whole phone range, not just below 400px: at
   414-500px two columns left the pills ~165px wide, which "IRS Pub. 4557" at
   23px only just survived. */
@media (max-width: 600px){
  .pills{grid-template-columns:1fr;}
  .ind-grid{grid-template-columns:1fr;}
  .ind{min-height:0;padding:14px 12px;}

  /* Credentials stack. This used to live at ≤400px, which no real phone hits —
     390-430px is the modern range — so the strip stayed 2x2 and wrapped
     "QuickBooks Online" onto two lines. The border selectors have to be
     nth-child, not `li + li`: the ≤960 rule that clears the top border on the
     first ROW is .creds li:nth-child(-n+2), and `li + li` scores lower, so it
     silently lost and the second item came out with no divider at all. */
  .creds ul{grid-template-columns:1fr;}
  .creds li{border-left:none;}
  .creds li:nth-child(even){border-left:none;}
  .creds li:nth-child(n+2){border-top:1px solid rgba(255,255,255,.13);}
}

@media (max-width: 400px){
  .wrap{padding:0 14px;}
  /* dark bands keep a wider gutter than the rest, but not the full 30px here */
  .creds .wrap,.ea .wrap,.portal .wrap,.meet .wrap,.quote .wrap,.ask-bark .wrap{padding:0 20px;}
  .hero h1{font-size:32px;}
  /* The only place buttons shrink. "Book a Consultation" at the full 16px/30px
     runs ~264px and a 320px viewport only offers 256px, so it would overflow.
     Still one spec — every button on the page shrinks together. */
  .btn{padding:13px 20px;min-height:46px;font-size:15px;}
}