/* ============================================================
   Kramer CPA — design tokens & components (light-only)
   ============================================================ */

/* Onest, self-hosted (2026-08-24; was Google Fonts). Variable font: one file
   carries weights 300-600. Files live in fonts/ — a served prefix in
   devserver.py ALLOWED_DIRS, probed by secscan. Removes the render-blocking
   third-party stylesheet and the last non-Calendly external dependency. */
@font-face{
  font-family:'Onest';
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url(fonts/onest-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Onest';
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url(fonts/onest-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --bg:#FAF7F1;
  --text:#272727;
  --muted:#a8a49c;        /* decorative only (numerals, glyphs) — 2.3:1, not for text */
  --muted-text:#6f6b64;   /* readable metadata (footer, credentials, card numbers) — 4.96:1 AA */
  --muted-2:#63605c;
  --line:#e6e1d6;
  --line-2:#ede8dd;
  --btn-tint:#e5e5f2;
  --accent:#272727;

  /* artwork */
  --icon-dot:#8F76E4;
  --brand:#6D3FE0;

  --display-weight:300;
  --header-h:72px;
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
}
body{
  font-family:'Onest',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit}
::selection{background:var(--btn-tint)}

/* ---------- keyboard focus ---------- */
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--text);
  outline-offset:3px;
}

/* ---------- skip link (visible on keyboard focus only) ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--text);color:#ffffff;
  font-size:14px;font-weight:500;
  padding:13px 18px;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

/* FAQ questions are h3 for the accessibility tree; visuals stay the button's */
.faq-h{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}

/* the reg mark shouldn't shout at statement scale */
.statement sup.reg{font-size:.45em;letter-spacing:0}

/* ---------- type ---------- */
.display{
  font-size:clamp(54px,8vw,122px);
  line-height:.9;
  font-weight:var(--display-weight);
  letter-spacing:-0.025em;
  text-wrap:balance;
}
.statement{
  font-size:clamp(42px,6vw,84px);
  line-height:.92;
  font-weight:var(--display-weight);
  letter-spacing:-0.022em;
  text-wrap:balance;
}
.statement--sm{font-size:clamp(30px,4vw,54px);line-height:.95}
#about .statement{font-size:clamp(32px,4.4vw,62px)}
#how .statement{font-size:clamp(30px,4.2vw,56px)}
/* mobile-only controlled line break */
.br-m{display:none}
.support{
  font-size:16px;
  color:var(--muted-2);
  line-height:1.75;
  max-width:560px;
  text-wrap:pretty;
}
.label{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- pill ---------- */
.pill{
  display:inline-block;
  background:var(--btn-tint);
  color:var(--text);
  font-size:13px;
  font-weight:500;
  line-height:1;
  padding:8px 16px;
  border-radius:999px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:500;
  line-height:1;
  padding:14px 22px;
  border-radius:8px;
  white-space:nowrap;   /* the label is 4 words; never let it wrap inside the pill */
  transition:opacity .2s ease,background .2s ease,transform .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:#ffffff}
.btn--primary:hover{opacity:.88}
.btn--primary .btn-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:5px;
  background:rgba(255,255,255,.22);font-size:11px;
}
.btn--secondary{background:var(--line-2);color:var(--text)}
.btn--secondary:hover{background:var(--line)}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;
  background:color-mix(in srgb,var(--bg) 80%,transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.wordmark{
  display:flex;align-items:center;gap:11px;
  font-size:14px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  white-space:nowrap;
}
.wordmark .k-mark{width:auto;height:21px;flex:none;color:var(--brand)}
.site-nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:500}
.site-nav a{color:var(--text);opacity:.85;transition:opacity .2s}
.site-nav a:hover{opacity:1}
.header-actions{display:flex;align-items:center;gap:14px}
.header-actions .btn{padding:11px 18px}

/* ---------- artwork images ---------- */
.hero-art img,.sec-art img,.cta-art img{
  display:block;width:100%;height:100%;object-fit:contain;
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100vh;min-height:100svh;
  overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--bg);
}
.hero-inner{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:calc(var(--header-h) + 20px) 24px 48px;
}
.hero-art{width:min(540px,86vw);aspect-ratio:1399/967;height:auto;margin-top:40px}
.hero-inner .display{font-size:clamp(38px,6.2vw,96px)}
.hero-wordmark{
  font-weight:var(--display-weight);
  text-transform:uppercase;
  letter-spacing:-0.012em;
  line-height:.9;
}
.hero-inner .support{margin:26px auto 0}
.hero-inner{transition:opacity .9s ease,transform .9s ease}
.hero.is-pre .hero-inner{opacity:0;transform:translateY(26px);transition:none}

/* ---------- snap statement sections ---------- */
.snap{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:100svh;
  overflow:hidden;
  border-top:1px solid var(--line-2);
}
.snap .inner{
  width:100%;
  max-width:920px;
  margin:0 auto;
  padding:112px 24px 112px;
  text-align:center;
  transition:opacity .8s ease,transform .8s ease;
}
/* entrance state only when JS runs — without it, content stays visible */
.js .snap .inner{opacity:0;transform:translateY(32px)}
.snap.is-active .inner{opacity:1;transform:none}
.snap .pill{margin-bottom:24px}
.credentials{margin-top:22px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-text);line-height:2}
.badge-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:34px;margin-top:44px}
.about-portrait{margin:0 auto 28px;width:148px;height:148px}
.about-portrait img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.badge-row img{width:120px;height:72px;object-fit:contain}
.about-loc{margin-top:8px}.snap .support{margin:26px auto 0}
/* the entity line (2026-08-24) sits close under the bio blurb — one thought,
   two paragraphs; full 26px would read as a new section */
.snap .support.about-entity{margin-top:10px}
.section-cta{margin-top:36px;display:flex;justify-content:center}
.sec-art{width:min(350px,70vw);aspect-ratio:902/890;height:auto;margin:32px auto 0}
.numeral{
  position:absolute;
  top:50%; /* fallback; JS aligns to each pill */
  transform:translateY(-50%);
  font-size:16px;
  font-weight:600;line-height:1;
  letter-spacing:.04em;
  color:var(--muted);
  user-select:none;pointer-events:none;
  transition:opacity 1s ease .15s;
}
.js .numeral{opacity:0}
.is-active .numeral{opacity:1}
.numeral-l{left:2.5vw}
.numeral-r{right:2.5vw}

/* ---------- services ---------- */
/* Accordion rows, one per service family — the same pattern, metrics and
   behavior as the FAQ below (keep the two in sync). Collapsed: bold title +
   lede, all four visible. Open: the bulleted list, with its footnote when it
   has one. One open at a time; without JS every panel stays open & readable.
   Same layout at every width — desktop and mobile share the stacked rows.
   Careful with the framing: Accounting is included in every BUSINESS
   engagement, but the other three do not all depend on it — 1040-only
   clients get Strategy and Compliance with no books (FAQ 2). Do not add a
   blanket "everything depends on this" line, and do not promote one row
   above the others. */
.svc-body{margin-top:44px;text-align:left}
.svc-list{max-width:720px;margin:0 auto;border-top:1px solid var(--line)}
.svc-item{border-bottom:1px solid var(--line)}
/* service names are h3 for the accessibility tree; visuals stay the button's */
.svc-h{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
/* Hybrid alignment (Corey's call, 2026-08-09): headers and notes centered to
   match the page's display type; the bullet list is a centered BLOCK that
   stays internally left-aligned so the dots hold a column. Plain-centering
   the list makes the dots zigzag — measured, rejected. */
.svc-q{
  width:100%;
  display:block;position:relative;
  padding:22px 44px;
  text-align:center;
}
.svc-head{display:block}
.svc-ttl{display:block;font-size:16.5px;font-weight:600}
.svc-lede{
  display:block;
  margin-top:6px;
  font-size:13.5px;font-weight:400;color:var(--muted-2);
  line-height:1.6;
  text-wrap:pretty;
}
.svc-q .ind{
  position:absolute;right:2px;top:calc(50% - 11px);
  width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted-text); /* functional state cue, not decoration — needs 3:1 (WCAG 1.4.11) */
  font-size:18px;font-weight:300;
  transition:transform .35s ease;
}
/* the rows are interactive and nothing else says so — a tonal wash is the
   flat-design-legal hover (a hairline or tonal shift, never a shadow) */
@media (hover:hover){
  .svc-q:hover,.faq-q:hover{background:var(--line-2)}
  .svc-q:hover .ind,.faq-q:hover .ind{color:var(--text)}
}
.svc-item.open .svc-q .ind{transform:rotate(45deg)}
.svc-a{
  display:grid;
  transition:grid-template-rows .4s ease;
}
/* collapsed only when JS runs — without it, the lists stay open & readable */
.js .svc-a{grid-template-rows:0fr}
.svc-item.open .svc-a{grid-template-rows:1fr}
/* padding lives on the CONTENT, never on the overflow wrapper — padding on
   the wrapper keeps the clip box open when the row collapses to 0fr, and the
   first bullet shows through every collapsed row (the FAQ pads the <p> for
   the same reason) */
.svc-a > div{overflow:hidden}
.svc-a > div > :last-child{padding-bottom:26px}
/* the specifics — the payload behind each row */
.svc-inc{
  list-style:none;
  width:max-content;max-width:100%;
  margin:0 auto;padding:0;
  font-size:13.5px;line-height:1.6;color:var(--muted-text);
  text-align:left;
}
.svc-inc li{padding-left:16px;position:relative;margin-top:7px}
.svc-inc li:first-child{margin-top:0}
.svc-inc li::before{
  content:"";
  position:absolute;left:0;top:.62em;
  width:4px;height:4px;border-radius:50%;
  background:var(--icon-dot);
  opacity:.55;
}
.svc-star{color:var(--icon-dot)}
.svc-note{
  margin-top:14px;
  padding:0 44px;
  font-size:11.5px;line-height:1.6;
  color:var(--muted-text);
  text-align:center;
}
.svc-note .svc-star{margin-right:5px}
/* ---------- FAQ ---------- */
.faq{
  padding:0 0 128px;
  text-align:center;
  border-top:1px solid var(--line-2);
}
.faq-intro{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  min-height:0;
  padding:112px 24px 56px;
}
.faq .pill{margin-bottom:24px}
.faq-list{max-width:720px;margin-left:auto;margin-right:auto;padding:0 24px;margin-top:0;text-align:left;border-top:1px solid var(--line);position:relative;z-index:2}
.faq-item{border-bottom:1px solid var(--line)}
/* Hybrid alignment, matching Services: centered questions, centered answers
   (text-wrap:pretty keeps a lone word off the last line). */
.faq-q{
  width:100%;
  display:block;position:relative;
  padding:26px 44px;
  font-size:16.5px;font-weight:500;
  text-align:center;
}
.faq-q .ind{
  position:absolute;right:2px;top:calc(50% - 11px);
  width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted-text); /* keep in sync with .svc-q .ind */
  font-size:18px;font-weight:300;
  transition:transform .35s ease;
}
.faq-item.open .faq-q .ind{transform:rotate(45deg)}
.faq-a{
  display:grid;
  transition:grid-template-rows .4s ease;
}
/* collapsed only when JS runs — without it, answers stay open & readable */
.js .faq-a{grid-template-rows:0fr}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{
  margin:0 auto;
  padding:0 44px 28px;
  font-size:15px;color:var(--muted-2);
  max-width:600px;
  text-align:center;
  text-wrap:pretty;
}

/* ---------- CTA band ---------- */
.cta-band{border-top:1px solid var(--line-2);padding:112px 24px 64px;text-align:center;min-height:calc(100svh - 124px);display:flex;flex-direction:column;align-items:center;justify-content:center}
.cta-art{width:min(300px,62vw);aspect-ratio:772/1014;height:auto;margin:48px auto 0}
.cta-band .section-cta{margin-top:40px}
/* the two de-risking facts, restated at the moment of commitment — a visitor
   who skipped the FAQ should not have to click blind */
.cta-note{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--muted-text)}

/* anchor landings must not depend on section padding exceeding the fixed
   header — padding trims silently break them without this */
#how,#services,#about,#faq{scroll-margin-top:var(--header-h)}

/* ---------- footer ---------- */
.site-footer{
  padding:40px 5vw 44px;
  font-size:13px;color:var(--muted-text);
}
.footer-row{
  display:flex;justify-content:space-between;align-items:center;
  gap:10px 24px;flex-wrap:wrap;
}
.footer-meta{display:flex;align-items:center;gap:20px}
.site-footer address{font-style:normal;line-height:1.5}
/* phone sits above the address with a gap, so the two read as separate facts
   rather than one block. Tappable on mobile; the only public contact channel
   besides the funnel. */
.footer-contact{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
/* padding buys a 32px tap target (13px text is only ~20px tall, under the 24px
   WCAG 2.2 minimum); the flex gap is reduced to match so the visual gap to the
   address stays 14px */
.footer-tel{line-height:1.5;padding:6px 0}
.footer-tel:hover{color:var(--text)}
/* same tap-target math as .footer-tel: 13px text is ~20px tall, under the
   24px WCAG 2.2 minimum — padding buys the Privacy link a 34px target */
.footer-meta a{padding:6px 0}
.footer-meta a:hover{color:var(--text)}
/* professional disclaimer, shown on both footers (restored to the homepage
   2026-08-24 with the privacy link — see STATUS) */
.footer-legal{margin-top:14px}

/* ---------- plain document page (privacy) ---------- */
.doc{
  max-width:680px;
  margin:0 auto;
  padding:calc(var(--header-h) + 72px) 24px 96px;
}
.doc h1{font-size:clamp(30px,4vw,44px);line-height:1.05;font-weight:var(--display-weight);letter-spacing:-0.02em}
.doc .doc-date{margin-top:14px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-text)}
.doc h2{margin-top:44px;font-size:16px;font-weight:600;line-height:1.4}
.doc p,.doc li{margin-top:14px;font-size:15px;line-height:1.75;color:var(--muted-2);text-wrap:pretty}
.doc ul{margin-top:8px;padding-left:20px}
.doc li{margin-top:8px}
.doc a{text-decoration:underline;text-underline-offset:3px}
/* ---------- responsive ---------- */
@media (max-width:760px){
  .site-nav{display:none}
  .site-header{padding:0 20px}
  .header-actions .btn{padding:0 18px;height:44px;display:inline-flex;align-items:center;font-size:13px}
}
@media (max-width:600px){
  .numeral{display:none}
}
/* narrowest phones (320-360px): "See If We're a Fit" is a wide label sitting
   next to a wide tracked-out wordmark, and at 320px the two collide. Measured:
   wordmark 163px + button 140px = 303px against 280px of usable header. These
   three small trims buy 17px of clearance at 320px and change nothing at 375+. */
@media (max-width:360px){
  .site-header{padding:0 12px}
  .header-actions .btn{padding:0 13px}
  .wordmark{letter-spacing:.12em}
}
@media (max-width:560px){
  /* keep the three credential badges on one row inside the 24px gutters */
  .badge-row{gap:24px}
  .badge-row img{width:min(120px,23vw)}
  /* "Everything you need." / "Coordinated." — one phrase per line */
  .br-m{display:inline}
  #services .statement{font-size:min(30px,calc((100vw - 71px)*0.105))}
  /* let the hero tagline use full width so each sentence sits on its own line */
  .hero-inner .support{align-self:stretch;margin-inline:0}
}
@media (max-width:440px){
  /* keep "Corey Kramer, CPA, CFP®" on one line */
  #about .statement{font-size:min(26px,calc((100vw - 71px)*0.089));white-space:nowrap}
}
@media (max-width:760px){
  /* the single-column stack is the base presentation now — see
     "services"; nothing extra is needed here to collapse it */
  .snap .inner{padding:84px 24px 96px}
  .hero-inner .display{font-size:min(44px,11.2vw);white-space:nowrap}
  .sec-art{width:min(220px,60vw)}

  .hero-art{width:min(300px,78vw);margin-top:28px}
  .credentials{line-height:2;padding-inline:8px}
  .about-loc{margin-top:2px}
  #about .support{margin-top:22px}
}

/* short-viewport laptops — keep each statement section to one screenful
   (at full sizes #how measures 815px and #about 786px; typical 13" laptop
   viewports are 660-730px) */
@media (min-width:761px) and (max-height:820px){
  .snap .inner{padding:72px 24px}
  .hero-art{width:min(540px,86vw,75svh)}
  .sec-art{width:min(280px,38svh);margin-top:24px}
  /* shrink the illustration INSIDE its column rather than narrowing the column
     — narrowing it would hand the space to the copy and give short viewports
     the longest lines on the page */
  .svc-body{margin-top:34px}
  .about-portrait{width:128px;height:128px;margin-bottom:20px}
  .badge-row{margin-top:28px}
}

@media (prefers-reduced-motion:reduce){
  .snap .inner,.js .snap .inner{transition:none;opacity:1;transform:none}
  .numeral,.js .numeral{transition:none;opacity:1}
  html{scroll-behavior:auto}
}