/* ============================================================
   Self-hosted fonts (Phase 1, eliminates render-blocking Google
   Fonts). Variable WOFF2, Latin subset, weight axis 400-700.
   ============================================================ */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/source-serif-4-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: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-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;
}

:root {
  --white: #ffffff;
  --cream: #fdf6f1;
  --cream-deep: #f9ebe0;
  --orange: #ea580c;
  --orange-deep: #c2410c;
  --orange-bright: #fb7a35;
  --yellow: #fbbf24;
  --yellow-soft: #fef0c8;
  --ink: #1c1714;
  --ink-soft: #4a443d;
  --graphite: #6f6a64;
  --sand: #c4bdb4;
  --line: #efe7df;
  --line-dark: rgba(255,250,245,0.13);
  --noir: #1c1714;

  --fs-display: clamp(2.9rem, 6vw + 1rem, 6rem);
  --fs-h1: clamp(2.1rem, 4vw + 0.5rem, 3.9rem);
  --fs-h2: clamp(1.85rem, 3vw + 0.5rem, 3rem);
  --fs-h3: clamp(1.3rem, 1.4vw + 0.6rem, 1.7rem);
  --fs-body-lg: clamp(1.075rem, 0.35vw + 1rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.9rem;
  --fs-micro: 0.74rem;

  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs: 0.75rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-2xl: 6.5rem;
  --sp-3xl: 9.5rem;

  --font-serif: "Source Serif 4", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;

  --r-xs: 8px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 38px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(27,19,11,0.05), 0 3px 10px -3px rgba(27,19,11,0.08);
  --shadow-md: 0 2px 4px rgba(27,19,11,0.04), 0 14px 32px -10px rgba(27,19,11,0.14);
  --shadow-lg: 0 6px 12px rgba(27,19,11,0.06), 0 30px 64px -16px rgba(27,19,11,0.20);
  --shadow-orange: 0 10px 30px -8px rgba(234,88,12,0.45);
  --shadow-orange-sm: 0 6px 18px -6px rgba(234,88,12,0.40);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --max: 1280px;
  --readable: 64ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11", "kern";
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  font-feature-settings: "liga", "dlig", "kern";
}

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange-deep); }
ul, ol { margin: 0; }

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

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.on-dark :focus-visible { outline-color: var(--yellow); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-sm);
  top: -200px;
  z-index: 300;
  background: var(--ink);
  color: var(--white);
  padding: var(--sp-2xs) var(--sp-md);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--sp-sm); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.25em; height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--sp-md);
}

.section {
  position: relative;
  padding-block: var(--sp-2xl);
}
.section--cream { background: var(--cream); }
.section--dark {
  background: var(--noir);
  color: var(--white);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--white); }

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(96px);
  pointer-events: none;
  z-index: 0;
}
.glow--orange { background: radial-gradient(circle, rgba(234,88,12,0.20), transparent 72%); }
.glow--yellow { background: radial-gradient(circle, rgba(251,191,36,0.20), transparent 72%); }
.section > .wrap { position: relative; z-index: 1; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: var(--sp-md);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--orange);
  border-radius: 2px;
}
.section--dark .eyebrow { color: var(--yellow); }
.section--dark .eyebrow::before { background: var(--yellow); }

.section-head { max-width: 60ch; margin-bottom: var(--sp-xl); }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p {
  font-size: var(--fs-body-lg);
  color: var(--graphite);
  margin-top: var(--sp-md);
  line-height: 1.7;
}
.section--dark .section-head p { color: var(--sand); }

.accent { color: var(--orange); }
.markline { position: relative; white-space: nowrap; }
.markline::after {
  content: "";
  position: absolute;
  left: -0.05em; right: -0.05em;
  bottom: 0.05em;
  height: 0.46em;
  background: var(--yellow);
  border-radius: 0.12em;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  animation: markdraw 0.7s var(--ease) 0.95s forwards;
}
@keyframes markdraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  padding: 0.95rem 1.7rem;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), background-color 0.28s var(--ease), color 0.28s var(--ease);
}
.btn .icon { width: 1.05em; height: 1.05em; }
.btn--primary {
  background: var(--orange-deep);
  color: var(--white);
  box-shadow: var(--shadow-orange-sm);
}
.btn--primary:hover {
  background: var(--ink);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.btn--primary:active { transform: translateY(-1px); }
.btn--ghost {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover {
  border-color: var(--orange);
  color: var(--orange-deep);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.section--dark .btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--line-dark);
}
.section--dark .btn--ghost:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
.site-header.scrolled {
  background: rgba(255,255,255,0.98);
  box-shadow: 0 12px 32px -14px rgba(28,23,20,0.20);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  min-height: 78px;
}
.brand {
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
}
.brand__mark {
  width: 66px;
  color: var(--orange);
  flex: none;
  display: flex;
  align-items: flex-end;
  transition: transform 0.35s var(--ease);
}
.brand__mark .skyline { width: 100%; height: auto; display: block; overflow: visible; }
.brand:hover .brand__mark { transform: translateY(-3px) scale(1.04); }
.brand__mark .skyline {
  animation: skyline-reveal 0.9s var(--ease) 0.25s both;
}
@keyframes skyline-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* ============================================================
   Giving Back page
   ============================================================ */
.give-prose p { color: var(--ink-soft); line-height: 1.75; max-width: var(--readable); margin: 0 0 var(--sp-md); }
.give-prose p:last-child { margin-bottom: 0; }
.give-stats { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); margin-top: var(--sp-lg); }
@media (min-width: 680px) { .give-stats { grid-template-columns: repeat(3, 1fr); } }
.give-stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-lg); box-shadow: var(--shadow-sm); }
.give-stat__num { display: block; font-family: var(--font-serif); font-size: clamp(2.5rem, 3vw + 1rem, 3.4rem); line-height: 1; color: var(--orange); }
.give-stat__label { display: block; margin-top: var(--sp-sm); color: var(--ink-soft); line-height: 1.55; }
.give-figure { margin: var(--sp-lg) 0 0; }
.give-figure__frame { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.give-figure__frame img { width: 100%; height: auto; display: block; }
.give-figure figcaption { margin-top: var(--sp-sm); font-size: var(--fs-small); color: var(--graphite); }

/* Homepage: Dallas skyline band */
.skyline-band { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.skyline-band img { width: 100%; height: auto; display: block; }

/* Homepage: downtown Dallas office + map */
.office__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
  align-items: stretch;
}
@media (min-width: 880px) {
  .office__grid { grid-template-columns: 1.32fr 1fr; }
}
.office__map {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  min-height: 340px;
  background: var(--cream-deep);
}
.office__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  filter: saturate(0.94) contrast(1.02);
}
.office__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  padding: var(--sp-lg);
  background: var(--white);
  background-image: linear-gradient(177deg, rgba(255,255,255,0) 52%, rgba(196,189,180,0.14));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 2px rgba(27,19,11,0.04),
    0 12px 28px -14px rgba(27,19,11,0.18),
    inset 0 1px 0 rgba(255,255,255,0.75);
}
.office__eyebrow {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.office__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  flex: 1;
}
.office__row { display: flex; gap: var(--sp-sm); align-items: flex-start; }
.office__icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--orange);
}
.office__icon .icon { width: 20px; height: 20px; }
.office__text { display: flex; flex-direction: column; gap: 2px; }
.office__label {
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
  font-weight: 700;
}
.office__value { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.office__hint { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; }
.office__card .btn { align-self: flex-start; }

/* Homepage CTA: Dallas night backdrop */
.cta-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('images/cowell-dallas-night.webp') center/cover no-repeat;
  opacity: 0.22;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 44%);
          mask-image: linear-gradient(to bottom, transparent, #000 44%);
  pointer-events: none;
}

/* Homepage hero: founder name plate */
.hero__float--name {
  left: 0;
  bottom: 9%;
  z-index: 20;
  animation: none;
  opacity: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
}
.hero__name {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
}
.hero__name-cred {
  font-size: var(--fs-micro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--graphite);
}
@media (max-width: 640px) {
  .hero__float--name { bottom: -16px; padding: var(--sp-2xs) var(--sp-sm); }
  .hero__name { font-size: 1rem; }
}

/* Registered trademark mark on the logo wordmark */
.brand__tm {
  font-size: 0.42em;
  vertical-align: super;
  line-height: 0;
  font-weight: 600;
  margin-left: 0.06em;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.brand__tag {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-top: 3px;
}
.nav__right { display: flex; align-items: center; gap: var(--sp-lg); }
.nav__links {
  display: flex;
  gap: var(--sp-md);
  list-style: none;
  padding: 0;
}
.nav__links a {
  position: relative;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
  padding: var(--sp-2xs) var(--sp-3xs);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: var(--sp-3xs); right: var(--sp-3xs);
  bottom: 0;
  height: 2px;
  background: var(--orange);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--orange-deep); font-weight: 600; }

.seasonal {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  background: none;
  border: 0;
  padding: var(--sp-3xs);
  cursor: pointer;
  font-family: var(--font-sans);
}
.seasonal__text {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
}
.seasonal__track {
  width: 46px; height: 26px;
  border-radius: var(--r-pill);
  background: var(--cream-deep);
  border: 1px solid var(--line);
  position: relative;
  transition: background-color 0.28s var(--ease);
  flex: none;
}
.seasonal__thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 5px rgba(27,19,11,0.35);
  transition: transform 0.3s var(--ease);
}
.seasonal[aria-checked="true"] .seasonal__track {
  background: var(--orange);
  border-color: var(--orange);
}
.seasonal[aria-checked="true"] .seasonal__thumb { transform: translateX(20px); }

.mobile-nav { display: none; }
.mobile-nav__summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
  padding: var(--sp-2xs) var(--sp-sm);
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
}
.mobile-nav__summary::-webkit-details-marker { display: none; }
.mobile-nav__bars { display: inline-flex; flex-direction: column; gap: 3px; }
.mobile-nav__bars span { width: 18px; height: 2px; background: var(--orange); border-radius: 2px; display: block; }
.mobile-nav[open] .mobile-nav__label-open { display: none; }
.mobile-nav__label-close { display: none; }
.mobile-nav[open] .mobile-nav__label-close { display: inline; }
.mobile-nav__panel {
  /* The header carries backdrop-filter, which makes it the containing block
     for this fixed panel. Anchor the panel to the header's own bottom edge
     (top: 100%) and size it against the viewport so it always fills the
     screen below the header, regardless of the header's height. */
  position: fixed;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100vh - 100%);
  height: calc(100dvh - 100%);
  background: var(--noir);
  color: var(--white);
  padding: var(--sp-xl) var(--sp-md) var(--sp-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-nav__panel a:not(.btn) {
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 600;
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: var(--sp-sm);
}
.mobile-nav__panel .btn { align-self: flex-start; margin-top: var(--sp-sm); }

.hero { padding-block: var(--sp-xl) var(--sp-2xl); overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
  align-items: center;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--orange-deep);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--sp-2xs) var(--sp-sm);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-md);
}
.hero__badge .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.65); }
}
.hero h1 { font-size: var(--fs-display); letter-spacing: -0.035em; }
.hero__sub {
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-top: var(--sp-md);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}
.hero__copy--a { display: none; }
body.season-tax .hero__copy--c,
html.pre-season-tax body .hero__copy--c { display: none; }
body.season-tax .hero__copy--a,
html.pre-season-tax body .hero__copy--a { display: block; }
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
  padding-top: var(--sp-lg);
  border-top: 1px solid var(--line);
}
.hero__trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-size: var(--fs-small);
  color: var(--graphite);
  font-weight: 500;
}
.hero__trust-item .icon { color: var(--orange); width: 1.1em; height: 1.1em; }

.hero__media {
  position: relative;
  order: -1;
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
}
.portrait {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.portrait--hero {
  aspect-ratio: 1400 / 721;
  width: 70%;
  margin-left: auto;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait__ph {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 25%, rgba(251,191,36,0.35), transparent 55%),
    linear-gradient(150deg, var(--cream), var(--cream-deep));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2xs);
  text-align: center;
  padding: var(--sp-lg);
}
.portrait__ph .icon { width: 44px; height: 44px; color: var(--orange); margin-bottom: var(--sp-2xs); }
.portrait__ph-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink);
}
.portrait__ph-note {
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
}
.hero__float {
  position: absolute;
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-sm) var(--sp-md);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.hero__float--cap {
  right: 4%;
  bottom: -24px;
  border: 1px solid var(--line);
}
.hero__float-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange-deep);
  flex: none;
}
.hero__float-label {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
}
.hero__float-value {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}
.cap__line--a { display: none; }
body.season-tax .cap__line--c,
html.pre-season-tax body .cap__line--c { display: none; }
body.season-tax .cap__line--a,
html.pre-season-tax body .cap__line--a { display: block; }

/* Page header (sub-pages) */
.pagehead { padding-block: var(--sp-xl) var(--sp-lg); overflow: hidden; }
.pagehead--cream { background: var(--cream); }
.pagehead h1 { font-size: var(--fs-h1); max-width: 20ch; }
.pagehead__sub {
  font-size: var(--fs-body-lg);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 54ch;
  margin-top: var(--sp-md);
}
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--sp-md);
}
.crumbs a { color: var(--orange-deep); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Image media */
.media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--cream-deep);
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media--wide { aspect-ratio: 16 / 10; }
.media--tall { aspect-ratio: 4 / 5; }
.media--band { aspect-ratio: 21 / 7; border-radius: var(--r-lg); }
.media__credit {
  position: absolute;
  right: var(--sp-2xs); bottom: var(--sp-2xs);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.82);
  background: rgba(27,19,11,0.55);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  text-decoration: none;
}

.founder__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-xl);
}
.founder__entity {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.4;
  margin: var(--sp-md) 0 var(--sp-lg);
  color: var(--ink);
}
.founder__body p { margin-bottom: var(--sp-md); line-height: 1.75; color: var(--ink-soft); }
.founder__body p:last-child { margin-bottom: 0; }

.ctx {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.ctx::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--orange), var(--yellow));
}
.ctx__head { display: flex; align-items: center; gap: var(--sp-sm); }
.ctx__photo {
  width: 78px; height: 78px;
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(circle at 65% 30%, rgba(251,191,36,0.4), transparent 60%),
    linear-gradient(150deg, var(--cream), var(--cream-deep));
  display: flex; align-items: center; justify-content: center;
  color: var(--orange);
  flex: none;
}
.ctx__photo img { width: 100%; height: 100%; object-fit: cover; }
.ctx__name { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 600; }
.ctx__creds { font-size: var(--fs-small); font-weight: 600; color: var(--orange-deep); margin-top: 2px; }
.ctx__row { margin-top: var(--sp-md); }
.ctx__label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--sp-2xs);
}
.ctx__row p:not(.ctx__label) { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-soft); }
.ctx__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); }
.ctx__tag {
  font-size: var(--fs-micro);
  font-weight: 600;
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 5px 12px;
  border-radius: var(--r-pill);
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  box-shadow:
    0 1px 2px rgba(27,19,11,0.04),
    0 12px 28px -14px rgba(27,19,11,0.18),
    inset 0 1px 0 rgba(255,255,255,0.75);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(234,88,12,0.24);
  box-shadow:
    0 2px 5px rgba(27,19,11,0.05),
    0 26px 50px -16px rgba(27,19,11,0.26),
    inset 0 1px 0 rgba(255,255,255,0.85);
}

.tier {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  position: relative;
  overflow: hidden;
}
.tier--featured {
  background: var(--noir);
  border-color: var(--noir);
  color: var(--white);
  box-shadow: var(--shadow-lg);
}
.tier--featured .tier__name { color: var(--white); }
.tier--featured .tier__price { color: var(--white); }
.tier--featured .tier__for { color: var(--sand); }
.tier--featured .tier__list li { color: var(--white); }
.tier--featured .tier__outcome { color: var(--sand); border-color: var(--line-dark); }
.tier--featured .tier__divider { color: var(--yellow); }
.tier__flag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-deep);
  background: var(--cream);
  padding: 5px 12px;
  border-radius: var(--r-pill);
}
.tier--featured .tier__flag { background: var(--orange); color: var(--white); }
.tier__name { font-size: var(--fs-h3); }
.tier__for { font-size: var(--fs-small); color: var(--graphite); line-height: 1.6; }
.tier__price { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; }
.tier__price span { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 500; color: var(--graphite); }
.tier--featured .tier__price span { color: var(--sand); }
/* the count-up number span must match the big serif price, not the
   small suffix span it would otherwise inherit from the rule above */
.tier__price .tier__price-num { font: inherit; color: inherit; letter-spacing: inherit; }
.tier__divider {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-top: var(--sp-2xs);
}
.tier__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2xs); }
.tier__list li { display: flex; gap: var(--sp-2xs); font-size: var(--fs-small); line-height: 1.5; }
.tier__list .icon { color: var(--orange); width: 1.15em; height: 1.15em; margin-top: 2px; }
.tier--featured .tier__list .icon { color: var(--yellow); }
.tier__outcome {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-sm);
  margin-top: auto;
}
.tiers-note {
  margin-top: var(--sp-lg);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 1.4;
  max-width: 46ch;
}

.industry { display: flex; flex-direction: column; align-self: start; }
.industry__icon {
  width: 54px; height: 54px;
  border-radius: var(--r-md);
  background: linear-gradient(150deg, var(--cream), var(--cream-deep));
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange-deep);
  margin-bottom: var(--sp-md);
}
.industry__icon .icon { width: 26px; height: 26px; }
.industry h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2xs); }
.industry__pos { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.6; }
.industry__kpis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs);
  margin-top: var(--sp-sm);
}
.industry__kpi {
  font-size: var(--fs-micro);
  font-weight: 600;
  background: var(--cream);
  color: var(--orange-deep);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.disclosure { margin-top: var(--sp-sm); }
.disclosure > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--orange-deep);
  padding: var(--sp-2xs) 0;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary .chev {
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.28s var(--ease);
}
.disclosure[open] > summary .chev { transform: rotate(-135deg); }
.disclosure__body { margin-top: var(--sp-sm); padding-top: var(--sp-sm); border-top: 1px solid var(--line); }
.disclosure__body p { font-size: var(--fs-small); line-height: 1.75; color: var(--ink-soft); margin-bottom: var(--sp-sm); }
.disclosure__body p:last-child { margin-bottom: 0; }

.steps { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); margin-top: var(--sp-lg); list-style: none; padding: 0; }
.step { position: relative; }
.step .step__num {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--orange-bright), var(--orange-deep));
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-orange-sm);
  margin-bottom: var(--sp-md);
}
.step h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2xs); }
.step p { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.7; }

.portal__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-xl); align-items: center; }
.portal__visual {
  position: relative;
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, #2a2018, #14100a);
  border: 1px solid var(--line-dark);
  padding: var(--sp-2xs);
  overflow: hidden;
}
.portal__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-xl) - 10px);
}
.portal__caption {
  text-align: center;
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sand);
  margin-top: var(--sp-sm);
}
.portal__lead { font-size: var(--fs-body-lg); line-height: 1.7; color: var(--white); }
.portal__tiles { display: grid; grid-template-columns: 1fr; gap: var(--sp-sm); margin-top: var(--sp-lg); }
.ptile {
  background: rgba(255,247,237,0.05);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  padding: var(--sp-md);
}
.ptile__label {
  display: inline-flex; align-items: center; gap: var(--sp-3xs);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: var(--sp-2xs);
}
.ptile p { font-size: var(--fs-small); line-height: 1.6; color: var(--sand); }

.capacity {
  background: linear-gradient(120deg, var(--orange), var(--orange-bright));
  color: var(--ink);
}
.capacity__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding-block: var(--sp-lg);
  flex-wrap: wrap;
}
.capacity__pulse {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ink);
  flex: none;
  position: relative;
}
.capacity__pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  opacity: 0.4;
  animation: ring 2.4s ease-out infinite;
}
@keyframes ring {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}
.capacity p { font-size: var(--fs-body-lg); font-weight: 500; line-height: 1.5; }
.capacity strong { font-weight: 700; }

/* Question cards: each is a full link to a standalone answer page */
.qcard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  text-decoration: none;
  color: inherit;
}
.qcard__top { display: flex; align-items: center; gap: var(--sp-2xs); flex-wrap: wrap; }
.qcard__day {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-deep);
  background: var(--yellow-soft);
  padding: 3px 9px;
  border-radius: var(--r-pill);
}
.qcard__who {
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--graphite);
  font-weight: 600;
}
.qcard__q {
  font-family: var(--font-serif);
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.32;
  color: var(--ink);
}
.qcard__a { font-size: var(--fs-small); line-height: 1.7; color: var(--ink-soft); }
.qcard__more {
  display: inline-flex; align-items: center; gap: var(--sp-3xs);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--orange-deep);
  margin-top: auto;
  padding-top: var(--sp-2xs);
}
.qcard__more .icon { width: 1em; height: 1em; transition: transform 0.28s var(--ease); }
.qcard:hover .qcard__more .icon { transform: translateX(4px); }
.byline { font-size: var(--fs-micro); color: var(--graphite); margin-top: var(--sp-lg); font-style: italic; }

/* ===== Answer pages (answers/*.html) ===== */
.answer { max-width: 760px; }
.answer__tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: var(--sp-sm);
}
.answer__bottomline {
  background: linear-gradient(168deg, var(--cream), var(--cream-deep));
  border: 1px solid var(--line);
  border-left: 4px solid var(--orange);
  border-radius: var(--r-md);
  padding: var(--sp-md) var(--sp-lg);
  margin-bottom: var(--sp-xl);
  box-shadow: var(--shadow-md);
}
.answer__bottomline-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3xs);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-deep);
  margin-bottom: var(--sp-2xs);
}
.answer__bottomline-label .icon { width: 1.15em; height: 1.15em; color: var(--orange); }
.answer__bottomline p:last-child {
  font-size: var(--fs-body-lg);
  line-height: 1.65;
  color: var(--ink);
}
.answer__body h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: var(--sp-xl);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.answer__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.answer__body p {
  font-size: var(--fs-body);
  line-height: 1.78;
  color: var(--ink-soft);
  margin-top: var(--sp-sm);
}
.answer__steps {
  margin-top: var(--sp-md);
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.answer__steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-soft);
  min-height: 2rem;
  display: flex;
  align-items: center;
}
.answer__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
  background: var(--orange);
  border-radius: 50%;
}
.answer__disclaimer {
  display: flex;
  gap: var(--sp-2xs);
  margin-top: var(--sp-xl);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--yellow-soft);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: #6b4d09;
}
.answer__disclaimer .icon { width: 1.25em; height: 1.25em; flex: none; color: #b3850f; margin-top: 1px; }
.related {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
}
@media (min-width: 720px) { .related { grid-template-columns: repeat(3, 1fr); } }
.related__card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
  padding: var(--sp-md);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.related__card:hover {
  transform: translateY(-4px);
  border-color: rgba(234,88,12,0.24);
  box-shadow: var(--shadow-lg);
}
.related__day {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.related__q {
  font-family: var(--font-serif);
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.34;
  color: var(--ink);
}
.related__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--orange-deep);
  margin-top: auto;
  padding-top: var(--sp-2xs);
}
.related__more .icon { width: 1em; height: 1em; transition: transform 0.28s var(--ease); }
.related__card:hover .related__more .icon { transform: translateX(4px); }
.answer__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  margin-top: var(--sp-lg);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--orange-deep);
  text-decoration: none;
}
.answer__back:hover { text-decoration: underline; }
.answer__back .icon { width: 1em; height: 1em; }

/* answer pagehead: text beside an animated document motif */
.answer-head { display: grid; gap: var(--sp-lg); }
@media (min-width: 920px) {
  .answer-head { grid-template-columns: 1.6fr 1fr; align-items: center; gap: var(--sp-2xl); }
}
.answer-head__art { display: none; }
@media (min-width: 920px) { .answer-head__art { display: block; } }
.ans-doc {
  width: 100%;
  max-width: 340px;
  height: auto;
  margin-inline: auto;
  display: block;
  overflow: visible;
}
.ans-doc__page { filter: drop-shadow(0 18px 30px rgba(27,19,11,0.12)); }

@media (prefers-reduced-motion: no-preference) {
  .ans-doc__page {
    stroke-dasharray: 1380;
    stroke-dashoffset: 1380;
    animation: ans-draw 1.1s var(--ease) 0.15s forwards;
  }
  .ans-doc__title {
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(0);
    animation: ans-grow 0.5s var(--ease) 0.5s forwards;
  }
  .ans-doc__line {
    stroke-dasharray: 180;
    stroke-dashoffset: 180;
    animation: ans-draw 0.55s var(--ease) var(--d, 0.6s) forwards;
  }
  .ans-doc__seal {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    animation: ans-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards,
               ans-bob 6s ease-in-out 2.3s infinite;
  }
  .ans-doc__check {
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: ans-draw 0.4s var(--ease) 1.95s forwards;
  }
}
@keyframes ans-draw { to { stroke-dashoffset: 0; } }
@keyframes ans-grow { to { transform: scaleX(1); } }
@keyframes ans-pop { to { transform: scale(1); } }
@keyframes ans-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

/* ===== Sub-page pagehead motifs (industries / services / tools) ===== */
.pagehead__grid { display: grid; gap: var(--sp-lg); }
@media (min-width: 920px) {
  .pagehead__grid { grid-template-columns: 1.55fr 1fr; align-items: center; gap: var(--sp-2xl); }
}
.pagehead__art { display: none; }
@media (min-width: 920px) { .pagehead__art { display: block; } }
.ph-motif {
  width: 100%;
  max-width: 360px;
  height: auto;
  margin-inline: auto;
  display: block;
  overflow: visible;
}
.ph-shadow { filter: drop-shadow(0 16px 26px rgba(27,19,11,0.13)); }

@media (prefers-reduced-motion: no-preference) {
  .ph-rise {
    transform-box: fill-box;
    transform-origin: bottom;
    transform: scaleY(0);
    animation: ph-rise 0.62s cubic-bezier(0.34, 1.32, 0.64, 1) var(--d, 0s) forwards;
  }
  .ph-pop {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    animation: ans-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0s) forwards;
  }
  .ph-draw {
    stroke-dasharray: var(--len, 400);
    stroke-dashoffset: var(--len, 400);
    animation: ans-draw 0.85s var(--ease) var(--d, 0s) forwards;
  }
}
@keyframes ph-rise { to { transform: scaleY(1); } }

/* ===== About: founder portrait feature ===== */
.founder-portrait { display: grid; gap: var(--sp-lg); align-items: center; }
@media (min-width: 860px) {
  .founder-portrait { grid-template-columns: 0.82fr 1.18fr; gap: var(--sp-2xl); }
}
.founder-portrait__media { margin: 0; }
.founder-portrait__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.founder-portrait__quote {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: var(--sp-sm) 0 0;
}
.founder-portrait__by {
  margin-top: var(--sp-md);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--orange-deep);
}

.calc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
.calc__head { display: flex; gap: var(--sp-sm); align-items: flex-start; }
.calc__icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--orange-bright), var(--orange-deep));
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  box-shadow: var(--shadow-orange-sm);
}
.calc h3 { font-size: 1.32rem; }
.calc__desc { font-size: var(--fs-small); color: var(--graphite); line-height: 1.6; }
.calc__form { display: flex; flex-direction: column; gap: var(--sp-sm); }
.field { display: flex; flex-direction: column; gap: var(--sp-3xs); }
.field label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
}
.field input, .field select {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink);
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 16px;
  padding-right: 2.4rem;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(234,88,12,0.14);
}
.calc__result {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(251,191,36,0.07) 0%, transparent 55%),
    linear-gradient(160deg, #2D1F16 0%, #1A1108 100%);
  border-radius: var(--r-md);
  padding: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  box-shadow:
    inset 0 1px 0 rgba(255,213,153,0.08),
    inset 0 0 0 1px rgba(255,213,153,0.04),
    0 1px 2px rgba(0,0,0,0.20),
    0 8px 22px rgba(45,31,22,0.18);
}

/* Warm the inner row dividers inside the result block so the breakdown
   reads as a single ledger document, not stacked boxes on cold lines. */
.calc__result .calc__breakdown li,
.calc__result .calc__positions li,
.calc__result .calc__entity-row {
  border-top-color: rgba(251,213,153,0.14);
}
.calc__result .calc__breakdown li:first-child,
.calc__result .calc__positions li:first-child,
.calc__result .calc__entity-row:first-child {
  border-top-color: transparent;
}
.calc__result-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-sm); }
.calc__result-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sand);
}
.calc__result-value {
  font-family: var(--font-serif);
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: -0.02em;
  transition: color 0.3s var(--ease);
}
.calc__result-value.flash { color: var(--orange-bright); }
.calc__breakdown { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.calc__breakdown li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-sm);
  font-size: var(--fs-small);
  color: var(--sand);
  padding-top: var(--sp-2xs);
  border-top: 1px solid var(--line-dark);
}
.calc__breakdown li span:last-child { color: var(--white); font-weight: 600; }
.calc__positions { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2xs); }
.calc__positions li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-sm);
  font-size: var(--fs-small);
  color: var(--white);
  padding-top: var(--sp-2xs);
  border-top: 1px solid var(--line-dark);
}
.calc__positions li:first-child { border-top: 0; padding-top: 0; }
.calc__positions .pos-amt { color: var(--yellow); font-weight: 700; white-space: nowrap; }
.calc__empty { font-size: var(--fs-small); color: var(--sand); }
.calc__run {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  background: var(--orange-deep);
  color: var(--white);
  border: 0;
  border-radius: var(--r-pill);
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  box-shadow: var(--shadow-orange-sm);
  transition: transform 0.28s var(--ease), background-color 0.28s var(--ease);
}
.calc__run:hover { background: var(--ink); transform: translateY(-2px); }
.calc__note { font-size: var(--fs-micro); color: var(--graphite); }
.calc__disclaimer {
  margin-top: var(--sp-lg);
  font-size: var(--fs-micro);
  color: var(--graphite);
  text-align: center;
  max-width: 70ch;
  margin-inline: auto;
}

/* =====================================================================
   Tools-page polish: tighter section rhythm, more refined calc cards
   ===================================================================== */

/* The default .section padding-block (sp-2xl = 6.5rem each side) is
   too generous for a six-card two-section grid. Override per-section
   so the funnel and general blocks read as one continuous instrument
   instead of two pages with an air gap between them. */
#funnel { padding-block: var(--sp-lg) var(--sp-md); }
#tools  { padding-block: var(--sp-md) var(--sp-lg); }
#funnel .section-head,
#tools  .section-head { margin-bottom: var(--sp-md); }

/* Cards stretch to equal height across the row, but the Recalculate
   button is pushed to the bottom of each card via margin-top: auto
   below. Result: a clean grid of equal-height cards with all action
   buttons aligned at the same vertical position.

   `min-width: 0` on the grid items and inner flex containers overrides
   the default `min-width: auto` (= min-content) so columns can shrink
   below their content's intrinsic min-content on narrow viewports.
   Without this, CSS Grid resolves `1fr` to `minmax(auto, 1fr)` and the
   column computes to its widest descendant's min-content (the result
   block + form select combo on the funnel cards came out ~485px),
   which then overflows the viewport on mobile. */
#funnel .grid--3,
#tools  .grid--3 { align-items: stretch; }
#funnel .grid--3 > *,
#tools  .grid--3 > * { min-width: 0; }
.calc { gap: var(--sp-sm); min-width: 0; }
.calc__head, .calc__form, .calc__result, .calc__result-top,
.calc__breakdown, .calc__positions, .calc__entity-row { min-width: 0; }
.field input, .field select {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Refined card elevation + a quiet hover lift. The earlier shadow was
   a single 24px blur; this two-stop pattern reads as a real material
   surface, not a placeholder. */
.calc {
  position: relative;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 22px rgba(15, 23, 42, 0.06);
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
.calc:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 14px 30px rgba(15, 23, 42, 0.10);
}

/* Tighter, cleaner card head: bespoke per-calculator animated SVG
   visual replaces the generic orange chip. Each visual is 44px square
   with its own thematic motion, defined in the .viz-- blocks below. */
.calc__head {
  align-items: center;
  gap: var(--sp-sm);
}
.calc__icon { width: 40px; height: 40px; }
.calc__viz {
  width: 44px;
  height: 44px;
  flex: none;
  display: block;
  overflow: visible;
}
.calc h3 { font-size: 1.28rem; line-height: 1.18; letter-spacing: -0.01em; }

/* =====================================================================
   Per-calculator SVG animations. Entry sequence triggers when the
   IntersectionObserver lights up the parent .calc card (.is-visible);
   one subtle ambient loop continues on the hero element of each icon.
   All motion is disabled under prefers-reduced-motion below.
   ===================================================================== */

/* All viz elements use fill-box transforms for predictable scaling. */
.calc__viz * { transform-box: fill-box; transform-origin: center; }

/* All animations run as infinite cycles. Each keyframe describes one
   full loop: motion in, hold, motion out, return to start. Stagger
   between sibling elements persists across iterations via per-element
   animation-delay. */

/* ----- viz--bars: tax-burden bars rise; winner pulses gold ------------ */
.viz--bars .vz-bar {
  transform-origin: bottom;
  animation: vzBarsLoop 6s cubic-bezier(0.18, 0.85, 0.32, 1) infinite;
}
.viz--bars .vz-bar--4 { animation-delay: 0s;    }
.viz--bars .vz-bar--3 { animation-delay: 0.18s; }
.viz--bars .vz-bar--2 { animation-delay: 0.36s; }
.viz--bars .vz-bar--1 {
  animation:
    vzBarsLoop 6s cubic-bezier(0.18, 0.85, 0.32, 1) 0.54s infinite,
    vzWinnerPulse 2.4s ease-in-out 1.5s infinite;
}
@keyframes vzBarsLoop {
  0%   { transform: scaleY(0); }
  4%   { transform: scaleY(0); }
  13%  { transform: scaleY(1.06); }
  18%  { transform: scaleY(1); }
  86%  { transform: scaleY(1); }
  94%  { transform: scaleY(0.04); }
  100% { transform: scaleY(0); }
}
@keyframes vzWinnerPulse {
  0%, 100% { fill: #fbbf24; }
  50%      { fill: #fde68a; }
}

/* ----- viz--cross: two cost lines draw, cross dot + drop line --------- */
.viz--cross .vz-line {
  stroke-dasharray: 100;
  animation: vzCrossLineLoop 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.viz--cross .vz-line--sp { animation-delay: 0s;    }
.viz--cross .vz-line--sc { animation-delay: 0.22s; }
.viz--cross .vz-drop  { animation: vzCrossDropLoop 6s ease-in-out infinite; }
.viz--cross .vz-cross {
  transform-origin: 24px 20px;
  animation: vzCrossDotLoop 6s cubic-bezier(0.34, 1.5, 0.64, 1) infinite;
}
@keyframes vzCrossLineLoop {
  0%   { stroke-dashoffset: 100; }
  6%   { stroke-dashoffset: 100; }
  26%  { stroke-dashoffset: 0;   }
  86%  { stroke-dashoffset: 0;   }
  96%  { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 100; }
}
@keyframes vzCrossDropLoop {
  0%, 32% { opacity: 0; }
  44%     { opacity: 0.9; }
  86%     { opacity: 0.9; }
  95%     { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes vzCrossDotLoop {
  0%, 36% { transform: scale(0); opacity: 0; }
  46%     { transform: scale(1.4); opacity: 1; }
  54%     { transform: scale(1); opacity: 1; }
  68%     { transform: scale(1.18); filter: drop-shadow(0 0 4px rgba(251,191,36,0.7)); }
  78%     { transform: scale(1); filter: none; }
  86%     { transform: scale(1); opacity: 1; }
  94%     { transform: scale(0); opacity: 0; }
  100%    { transform: scale(0); opacity: 0; }
}

/* ----- viz--range: bell curve draws, marker drops, peak pulses -------- */
.viz--range .vz-curve {
  stroke-dasharray: 100;
  animation: vzCurveLoop 6.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.viz--range .vz-fill { animation: vzFillLoop 6.5s ease-in-out infinite; }
.viz--range .vz-stem {
  transform-origin: 24px 38px;
  animation: vzStemLoop 6.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.viz--range .vz-peak {
  transform-origin: 24px 16px;
  animation: vzPeakLoop 6.5s cubic-bezier(0.34, 1.5, 0.64, 1) infinite;
}
@keyframes vzCurveLoop {
  0%   { stroke-dashoffset: 100; }
  6%   { stroke-dashoffset: 100; }
  28%  { stroke-dashoffset: 0;   }
  86%  { stroke-dashoffset: 0;   }
  96%  { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 100; }
}
@keyframes vzFillLoop {
  0%, 24% { opacity: 0; }
  36%     { opacity: 1; }
  86%     { opacity: 1; }
  94%     { opacity: 0; }
  100%    { opacity: 0; }
}
@keyframes vzStemLoop {
  0%, 32% { transform: scaleY(0); }
  44%     { transform: scaleY(1); }
  86%     { transform: scaleY(1); }
  94%     { transform: scaleY(0); }
  100%    { transform: scaleY(0); }
}
@keyframes vzPeakLoop {
  0%, 40% { transform: scale(0); opacity: 0; }
  50%     { transform: scale(1.4); opacity: 1; }
  58%     { transform: scale(1); opacity: 1; }
  70%     { transform: scale(1.14); filter: drop-shadow(0 0 4px rgba(251,191,36,0.7)); }
  80%     { transform: scale(1); filter: none; }
  86%     { transform: scale(1); opacity: 1; }
  94%     { transform: scale(0); opacity: 0; }
  100%    { transform: scale(0); opacity: 0; }
}

/* ----- viz--quarters: 4 cells fill clockwise, current quarter glows --- */
.viz--quarters .vz-q {
  transform-origin: center;
  animation: vzQuartersLoop 5.5s cubic-bezier(0.34, 1.5, 0.64, 1) infinite;
}
.viz--quarters .vz-q--1 { animation-delay: 0s;    }
.viz--quarters .vz-q--2 { animation-delay: 0.20s; }
.viz--quarters .vz-q--3 { animation-delay: 0.40s; }
.viz--quarters .vz-q--4 {
  animation:
    vzQuartersLoop 5.5s cubic-bezier(0.34, 1.5, 0.64, 1) 0.60s infinite,
    vzCurrentQPulse 2.4s ease-in-out 1.4s infinite;
}
@keyframes vzQuartersLoop {
  0%, 4% { transform: scale(0); opacity: 0; }
  14%    { transform: scale(1.14); opacity: 1; }
  20%    { transform: scale(1); opacity: 1; }
  86%    { transform: scale(1); opacity: 1; }
  94%    { transform: scale(0); opacity: 0; }
  100%   { transform: scale(0); opacity: 0; }
}
@keyframes vzCurrentQPulse {
  0%, 100% { fill: #fbbf24; }
  50%      { fill: #fef3c7; }
}

/* ----- viz--beaker: bubbles continuously rise inside the vial --------- */
.viz--beaker .vz-bubble {
  animation: vzBubbleRise 2.4s ease-in-out infinite;
}
.viz--beaker .vz-bubble--1 { animation-delay: 0.10s; }
.viz--beaker .vz-bubble--2 { animation-delay: 0.85s; }
.viz--beaker .vz-bubble--3 { animation-delay: 1.60s; }
@keyframes vzBubbleRise {
  0%   { transform: translateY(2px);   opacity: 0; }
  15%  { opacity: 0.95; }
  60%  { opacity: 0.85; }
  100% { transform: translateY(-14px); opacity: 0; }
}

/* ----- viz--coins: coins stack up, top coin glints, then reset -------- */
.viz--coins .vz-coin {
  animation: vzCoinsLoop 6s cubic-bezier(0.18, 0.85, 0.32, 1) infinite;
}
.viz--coins .vz-coin--1 { animation-delay: 0s;    }
.viz--coins .vz-coin--2 { animation-delay: 0.16s; }
.viz--coins .vz-coin--3 { animation-delay: 0.32s; }
.viz--coins .vz-coin--4 { animation-delay: 0.48s; }
.viz--coins .vz-glint   { animation: vzGlintLoop 6s ease-in-out infinite; }
@keyframes vzCoinsLoop {
  0%, 4% { transform: translateY(-22px); opacity: 0; }
  14%    { transform: translateY(3px);   opacity: 1; }
  18%    { transform: translateY(0);     opacity: 1; }
  86%    { transform: translateY(0);     opacity: 1; }
  94%    { transform: translateY(10px);  opacity: 0; }
  100%   { transform: translateY(10px);  opacity: 0; }
}
@keyframes vzGlintLoop {
  0%, 56%  { transform: translateX(-6px); opacity: 0; }
  64%      { transform: translateX(0);    opacity: 0.95; }
  74%      { transform: translateX(8px);  opacity: 0; }
  100%     { transform: translateX(8px);  opacity: 0; }
}

/* Mobile (under 640px): tighten typography inside the calculator cards
   so the big result number stops bumping its label, the entity-comparison
   rows collapse to a two-line layout when "S-corp $38,708 -$8,350" can't
   fit on one row, and the wide form labels and select options stop forcing
   the grid column wider than the viewport. */
@media (max-width: 640px) {
  #funnel,
  #tools { padding-inline: 0; }
  #funnel .wrap,
  #tools  .wrap { padding-inline: var(--sp-md); }
  .calc__result { padding: var(--sp-sm); }
  .calc__result-top { gap: var(--sp-xs); }
  .calc__result-value { font-size: 1.85rem; }
  .calc__result-label {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    line-height: 1.35;
  }
  .calc__entity-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label total"
      "label delta";
    row-gap: 2px;
    column-gap: var(--sp-xs);
  }
  .calc__entity-row .calc__entity-label { grid-area: label; }
  .calc__entity-row .calc__entity-total { grid-area: total; }
  .calc__entity-row .calc__entity-delta { grid-area: delta; }
  .calc__breakdown li,
  .calc__positions li { font-size: var(--fs-micro); }
  .calc__breakdown li span:last-child,
  .calc__positions  li span:last-child { white-space: normal; }
  .calc { padding: var(--sp-md); }
  .calc h3 { font-size: 1.18rem; }
  .calc__step {
    top: var(--sp-sm);
    right: var(--sp-sm);
    font-size: 0.92rem;
  }
}

/* Honor user preferences: no ambient motion if reduced-motion is set.
   Each viz still renders in its final composed state via the static
   :not(.is-visible) initial styles which we now reset to "show". */
@media (prefers-reduced-motion: reduce) {
  .calc__viz *,
  .calc__viz .vz-bar,
  .calc__viz .vz-line,
  .calc__viz .vz-cross,
  .calc__viz .vz-range,
  .calc__viz .vz-tick,
  .calc__viz .vz-pin,
  .calc__viz .vz-q,
  .calc__viz .vz-bubble,
  .calc__viz .vz-coin,
  .calc__viz .vz-glint {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
}

/* S-corp decision funnel trio: orange-accent topline groups the three
   cards as a single instrument; a serif italic step number positions
   each card in the funnel sequence. */
.calc--funnel::before {
  content: "";
  position: absolute;
  top: 0; left: var(--sp-md); right: var(--sp-md);
  height: 3px;
  background: linear-gradient(90deg, var(--orange-bright), var(--orange-deep));
  border-radius: 0 0 2px 2px;
}
.calc__step {
  position: absolute;
  top: calc(var(--sp-md) - 2px);
  right: var(--sp-md);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--orange-deep);
  letter-spacing: 0.05em;
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
}

/* Tabular numerics keep dollars aligned in the breakdown columns and
   in the form inputs as the visitor types. */
.calc__result-value,
.calc__breakdown li span:last-child,
.calc__positions .pos-amt,
.field input[inputmode="numeric"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Breakdown rows: prevent the value from wrapping under the label by
   letting the label flex while the right-hand value stays nowrap. */
.calc__breakdown li,
.calc__positions li { align-items: baseline; }
.calc__breakdown li span:first-child,
.calc__positions  li span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
}
.calc__breakdown li span:last-child,
.calc__positions  li span:last-child {
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: right;
}

/* Entity comparison renders a three-cell row: label, total, delta.
   The delta sits as a small caption to the right so the total never
   wraps under the entity label. */
.calc__entity-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: var(--sp-xs);
  padding-top: var(--sp-2xs);
  border-top: 1px solid var(--line-dark);
  font-size: var(--fs-small);
}
.calc__entity-row:first-child { border-top: 0; padding-top: 0; }
.calc__entity-row .calc__entity-label { color: var(--sand); white-space: normal; }
.calc__entity-row .calc__entity-total {
  color: var(--white);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.calc__entity-row .calc__entity-delta {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc__entity-delta--better { color: var(--yellow); }
.calc__entity-delta--worse  { color: #fb7a35; }
.calc__entity-delta--base   { color: var(--graphite); opacity: 0.85; }

/* Reasonable Salary documentation: sits BELOW the dark result block
   as a refined cream-tinted note, not inside the dark block. This
   keeps the dark result panel uniform across the trio. */
.calc__doc {
  font-size: var(--fs-micro);
  color: var(--ink-soft);
  line-height: 1.6;
  margin-top: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  background: linear-gradient(180deg, #fdf6ec, #f7ecd9);
  border-left: 2px solid var(--orange-bright);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-style: italic;
}

/* Audit-risk qualifier when current salary is below the defensible
   floor. Honest, not panic-inducing. */
.calc__qualifier {
  font-size: var(--fs-small);
  color: var(--ink);
  line-height: 1.5;
  margin-top: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  background: linear-gradient(135deg, rgba(234,88,12,0.10), rgba(251,191,36,0.05));
  border: 1px solid rgba(234,88,12,0.22);
  border-radius: var(--r-sm);
}

/* Recalculate button: more refined elevation and a quiet spring. */
.calc__run {
  margin-top: var(--sp-md);
  box-shadow:
    0 1px 2px rgba(194, 65, 12, 0.16),
    0 6px 14px rgba(194, 65, 12, 0.18);
}
.calc__run:hover {
  background: var(--ink);
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.16),
    0 10px 18px rgba(15, 23, 42, 0.22);
}

/* Footer disclaimer: tighter, treated as a small print line rather
   than a hero-sized centered block. */
.calc__disclaimer {
  margin-top: var(--sp-lg);
  font-size: var(--fs-micro);
  color: var(--graphite);
  text-align: center;
  max-width: 64ch;
  margin-inline: auto;
  line-height: 1.7;
  opacity: 0.85;
}

.trust__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); }
.trust__col h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-md); display: flex; align-items: center; gap: var(--sp-2xs); }
.trust__col h3 .icon { color: var(--orange); }
.trust__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-sm); }
.trust__list li { display: flex; gap: var(--sp-sm); font-size: var(--fs-small); line-height: 1.5; }
.trust__list .icon { color: var(--orange); flex: none; margin-top: 1px; }
.trust__list strong { font-weight: 600; }
.trust__note {
  margin-top: var(--sp-lg);
  font-size: var(--fs-micro);
  color: var(--graphite);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-sm);
}

.review { display: flex; flex-direction: column; gap: var(--sp-sm); }
.stars { display: inline-flex; gap: 3px; color: var(--orange); }
.stars .icon { width: 1.05em; height: 1.05em; fill: var(--orange); stroke: var(--orange); }
.review__quote { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-body-lg); line-height: 1.5; }
.review__by { font-size: var(--fs-small); font-weight: 600; color: var(--graphite); margin-top: auto; }
.proof-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); margin-top: var(--sp-md); }
.proof {
  background: var(--noir);
  color: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
.proof__num { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 700; color: var(--yellow); line-height: 1; flex: none; }
.proof p { font-size: var(--fs-small); color: var(--sand); line-height: 1.5; }
.proof .stars { color: var(--yellow); margin-bottom: 4px; }
.proof .stars .icon { fill: var(--yellow); stroke: var(--yellow); }

.contact__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-xl); align-items: start; }
.contact__options { display: flex; flex-direction: column; gap: var(--sp-sm); }
.copt {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  border: 1px solid var(--line-dark);
  border-radius: var(--r-md);
  padding: var(--sp-md);
  text-decoration: none;
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), background-color 0.28s var(--ease);
}
.copt:hover { transform: translateY(-3px); border-color: var(--yellow); }
.copt--primary { background: var(--orange-deep); border-color: var(--orange-deep); }
.copt--primary:hover { background: var(--orange); border-color: var(--orange); }
.copt__icon {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  background: rgba(255,247,237,0.08);
  display: flex; align-items: center; justify-content: center;
  color: var(--yellow);
  flex: none;
}
.copt--primary .copt__icon { background: rgba(255,255,255,0.16); color: var(--white); }
.copt__text { display: flex; flex-direction: column; gap: 2px; }
.copt__label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
}
.copt--primary .copt__label { color: var(--white); }
.copt__value { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 600; color: var(--white); }
.copt__hint { font-size: var(--fs-small); color: var(--sand); }
.copt--primary .copt__hint { color: rgba(255,255,255,0.9); }
.contact__note { font-family: var(--font-serif); font-size: var(--fs-body-lg); line-height: 1.5; margin-top: var(--sp-md); color: var(--sand); }

.faq { max-width: 80ch; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  margin-bottom: var(--sp-sm);
  overflow: hidden;
  transition: box-shadow 0.28s var(--ease);
}
.faq__item[open] { box-shadow: var(--shadow-md); }
.faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  font-family: var(--font-serif);
  font-size: 1.18rem;
  font-weight: 600;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--orange-deep);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.faq__icon .icon { width: 16px; height: 16px; }
.faq__item[open] .faq__icon { transform: rotate(45deg); background: var(--orange); color: var(--white); }
.faq__answer { padding: 0 var(--sp-lg) var(--sp-md); font-size: var(--fs-body); line-height: 1.75; color: var(--ink-soft); }

.cta-band {
  background: var(--noir);
  color: var(--white);
  text-align: center;
}
.cta-band .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--sp-md); padding-block: var(--sp-2xl); }
.cta-band h2 { font-size: var(--fs-h2); max-width: 22ch; }
.cta-band p { color: var(--sand); font-size: var(--fs-body-lg); max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: center; }

.site-footer { background: var(--noir); color: var(--white); }
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-xl);
  padding-block: var(--sp-2xl) var(--sp-lg);
}
@media (min-width: 720px) {
  .footer__grid {
    grid-template-columns: 1.7fr 1fr 1.6fr;
    gap: var(--sp-2xl);
    align-items: start;
  }
}
.footer__brand .brand__name { color: var(--white); }
.footer__brand .brand__tag { color: var(--sand); }
.footer__brand .brand__mark { color: var(--orange-bright); }
.footer__pos { font-size: var(--fs-small); color: var(--sand); line-height: 1.7; margin-top: var(--sp-md); max-width: 34ch; }
.footer__contact { font-size: var(--fs-small); color: var(--sand); margin-top: var(--sp-md); }
.footer__contact a { color: var(--white); }
.footer__col h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: var(--sp-md);
}
.footer__links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2xs); }
.footer__links a { color: var(--white); text-decoration: none; font-size: var(--fs-small); }
.footer__links a:hover { color: var(--yellow); }
.footer__news p { font-size: var(--fs-small); color: var(--sand); line-height: 1.7; margin-bottom: var(--sp-sm); }
.news-form { display: flex; flex-direction: column; gap: var(--sp-2xs); }
.news-form input {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-sm);
  background: rgba(255,247,237,0.06);
  color: var(--white);
}
.news-form input::placeholder { color: var(--sand); }
.footer__legal {
  border-top: 1px solid var(--line-dark);
  padding-block: var(--sp-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs) var(--sp-md);
  font-size: var(--fs-micro);
  color: var(--sand);
}
.footer__legal a { color: var(--sand); }
.footer__legal a:hover { color: var(--yellow); }
.footer__legal .credit a { color: var(--white); font-weight: 600; }

@media (min-width: 640px) {
  .wrap { padding-inline: var(--sp-lg); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .portal__tiles { grid-template-columns: repeat(3, 1fr); }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .proof-row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 920px) {
  .founder__grid { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
  .founder__grid .ctx { position: sticky; top: 96px; }
  .portal__grid { grid-template-columns: 1fr 1fr; }
  .contact__grid { grid-template-columns: 0.85fr 1.15fr; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .pagehead h1 { font-size: var(--fs-h1); }
}
@media (min-width: 1120px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 919px) {
  /* Scope to the direct header CTA only. A bare `.nav .btn--primary` also
     matched the "Schedule a Call" button inside the mobile-nav panel and
     hid it, since the panel is a descendant of .nav. */
  .nav__links, .nav__right > .btn--primary, .seasonal { display: none; }
  .mobile-nav { display: block; }
}
@media (max-width: 600px) {
  .nav { gap: var(--sp-sm); }
  .nav__right { gap: var(--sp-sm); }
  .brand { gap: var(--sp-3xs); }
  .brand__mark { width: 46px; }
  .brand__name { font-size: 1.06rem; white-space: nowrap; }
  .brand__tag { font-size: 0.5rem; letter-spacing: 0.11em; }
  .mobile-nav__summary { padding: var(--sp-2xs) var(--sp-xs); }
}

/* ===== Motion layer ===== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.72s var(--ease), transform 0.72s var(--ease);
  }
  .is-visible { opacity: 1; transform: none; }

  .portrait__ph {
    background-size: 175% 175%;
    animation: drift 17s ease-in-out infinite;
  }
  @keyframes drift {
    0%, 100% { background-position: 0% 28%; }
    50% { background-position: 100% 72%; }
  }
}

.btn--primary { position: relative; overflow: hidden; }
.btn--primary .icon { position: relative; z-index: 1; }
.btn--primary::after {
  content: "";
  position: absolute;
  top: -10%; left: -135%;
  width: 55%; height: 120%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.40), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease);
  pointer-events: none;
}
.btn--primary:hover::after { left: 155%; }

.calc__result-value { display: inline-block; }
.copt__icon { transition: transform 0.28s var(--ease); }
.industry__icon .icon, .calc__icon .icon { transition: transform 0.3s var(--ease); }
.industry:hover .industry__icon .icon,
.calc:hover .calc__icon .icon { transform: scale(1.12) rotate(-5deg); }
.copt:hover .copt__icon { transform: scale(1.08) rotate(-4deg); }

/* ============================================================
   Enhancement layer (Deloitte-study pass, May 16)
   Theme: numbers resolving into precision.
   ============================================================ */

@property --card-glow {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

::selection { background: var(--orange); color: #fff; }
html { scrollbar-color: var(--orange) var(--cream-deep); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--orange-bright), var(--orange-deep));
  border-radius: var(--r-pill);
  border: 3px solid var(--cream);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--orange), var(--orange-deep)); }

/* ---- Scroll progress rail ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 250;
  background: linear-gradient(90deg, var(--orange-deep), var(--orange), var(--yellow));
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* ---- Card cursor spotlight ---- */
.card {
  background-image:
    radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), var(--card-glow, transparent), transparent 68%),
    linear-gradient(177deg, rgba(255,255,255,0) 55%, rgba(196,189,180,0.13));
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), --card-glow 0.4s var(--ease);
}
.tier--featured {
  background-image: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), var(--card-glow, transparent), transparent 68%);
}
.ctx {
  background-image: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), var(--card-glow, transparent), transparent 70%);
  transition: --card-glow 0.4s var(--ease);
}
.card:hover { --card-glow: rgba(234,88,12,0.10); }
.ctx:hover  { --card-glow: rgba(234,88,12,0.085); }
.tier--featured:hover { --card-glow: rgba(251,191,36,0.16); }

/* ---- Hero ambient ledger canvas ---- */
.hero__ledger {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(125% 115% at 72% 32%, #000 36%, transparent 88%);
  mask-image: radial-gradient(125% 115% at 72% 32%, #000 36%, transparent 88%);
}

/* ---- Hero portrait + founder cutout composite ---- */
/* Wraps the office photo and the founder cutout so the cutout anchors
   to the photo, not to .hero__media. This lets the info cards un-float
   into a flow stack below the composite on phones (see max-width 640). */
.hero__composite { position: relative; }
.portrait--hero { z-index: 1; box-shadow: var(--shadow-md); }
.hero__founder {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44%;
  max-width: 412px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  /* a whisper of warmth so the studio-lit cutout sits inside the
     golden-hour office shot, and a shadow that falls down-and-left,
     away from the light glowing on the signage */
  filter: sepia(0.09) saturate(1.1) brightness(1.02)
          drop-shadow(-10px 16px 24px rgba(20,14,8,0.34));
}
.hero__float { z-index: 3; }

/* ---- Hero stat float (scramble-to-precision) ---- */
.hero__float--stat {
  right: 4%;
  top: -24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 1px solid var(--line);
}
.hero__stat-num {
  font-family: var(--font-serif);
  font-size: 1.95rem;
  font-weight: 700;
  color: var(--orange-deep);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.hero__stat-note {
  font-size: var(--fs-micro);
  color: var(--graphite);
  max-width: 17ch;
  line-height: 1.4;
}

@media (prefers-reduced-motion: no-preference) {
  /* Each float card fades in on its own beat (opacity only, so it
     does not fight the perpetual bob), then bobs forever after. */
  .hero__float {
    animation: hero-card-in 0.55s var(--ease) both,
               floatbob 7s ease-in-out infinite;
  }
  .hero__float--stat { animation-delay: 0.46s, -3.5s; }
  .hero__float--cap  { animation-delay: 0.58s, 0s; }
  .hero__float--name { animation-delay: 0.70s, -1.8s; }
  @keyframes floatbob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  @keyframes hero-card-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Staged composite entrance: the office photo settles first,
     then the founder rises into frame. */
  .portrait--hero { animation: hero-photo-in 0.7s var(--ease) 0.05s both; }
  .hero__founder  { animation: hero-founder-in 0.8s var(--ease) 0.3s both; }
  @keyframes hero-photo-in {
    from { opacity: 0; transform: translateY(22px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes hero-founder-in {
    from { opacity: 0; transform: translateY(34px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Hero composite: on tablet and smaller the office photo goes
   full width (it no longer needs room for a side column), and the
   founder cutout overlaps its left edge. On phones the float
   cards are scaled down so the composite stays legible. */
@media (max-width: 760px) {
  .portrait--hero { width: 100%; }
  .hero__founder { width: 50%; max-width: 340px; }
}
@media (max-width: 560px) {
  .hero__founder { width: 54%; }
  .hero__float { padding: var(--sp-2xs) var(--sp-sm); gap: var(--sp-2xs); }
  .hero__stat-num { font-size: 1.5rem; }
  .hero__stat-note { max-width: 15ch; }
  .hero__float-icon { width: 32px; height: 32px; }
  .hero__float-value { font-size: 0.95rem; }
}

/* Phone: the floating info cards cannot float on a phone-width
   composite without overlapping and clipping. Un-float them into a
   readable stack below the photo-and-founder composite. */
@media (max-width: 640px) {
  .hero__media {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
  }
  .hero__composite { width: 100%; }
  .hero__founder { width: 48%; max-width: 300px; }
  .hero__float {
    position: static;
    inset: auto;
    width: 100%;
    margin: 0;
    animation: none;
    opacity: 1;
    box-shadow: var(--shadow-md);
  }
}

/* ---- Global ledger grid texture ----
   The hero keeps its live animated canvas. Every other section, the
   sub-page headers, the capacity band and the footer get the same
   48px ledger grid as a static, GPU-cheap CSS layer, themed per
   background so it reads correctly on white, cream, dark and orange. */
.section:not(.hero),
.pagehead,
.cta-band,
.site-footer {
  --grid-line: rgba(120,92,68,0.055);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, var(--grid-line) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, var(--grid-line) 47px 48px);
}
.section.section--cream,
.pagehead--cream { --grid-line: rgba(120,92,68,0.065); }
.section.section--dark { --grid-line: rgba(255,247,237,0.034); }
.cta-band,
.site-footer { --grid-line: rgba(255,247,237,0.034); }
.capacity {
  --grid-line: rgba(28,23,20,0.06);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, var(--grid-line) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, var(--grid-line) 47px 48px),
    linear-gradient(120deg, var(--orange), var(--orange-bright));
}

/* ---- Compounding-gap chart ---- */
.cgap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
  align-items: center;
  margin: 0;
}
.cgap__chart { min-width: 0; }
.cgap__svg { width: 100%; height: auto; display: block; overflow: visible; }

.cg-grid { stroke: rgba(255,247,237,0.09); stroke-width: 1; stroke-dasharray: 2 7; }
.cg-base { stroke: rgba(255,247,237,0.20); stroke-width: 1.5; }
.cg-ytick { fill: var(--sand); font-family: var(--font-sans); font-size: 15px; font-weight: 600; }
.cg-x { fill: var(--sand); font-family: var(--font-sans); font-size: 17px; font-weight: 600; }

.cgap__area { opacity: 0; transition: opacity 0.9s var(--ease) 1s; }
.cgap__line {
  fill: none;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s var(--ease);
}
.cgap__line--filer { stroke: rgba(196,189,180,0.65); stroke-width: 2.6; }
.cgap__line--strat {
  stroke: url(#cgStroke);
  filter: drop-shadow(0 0 7px rgba(251,191,36,0.45));
}
.cgap.is-drawn .cgap__line--filer { stroke-dashoffset: 0; }
.cgap.is-drawn .cgap__line--strat {
  stroke-dashoffset: 0;
  transition-delay: 0.3s;
  transition-duration: 1.25s;
}
.cgap.is-drawn .cgap__area { opacity: 1; }

.cg-dot { opacity: 0; transition: opacity 0.5s var(--ease), r 0.2s var(--ease); }
.cg-dot--filer { fill: var(--sand); }
.cg-dot--strat { fill: var(--yellow); }
.cgap.is-drawn .cg-dot { opacity: 1; transition-delay: 1.25s; }
.cg-hit { fill: transparent; cursor: pointer; }
.cg-val {
  fill: var(--yellow);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
  pointer-events: none;
}
.cgap__pt:hover .cg-val { opacity: 1; }
.cgap__pt:hover .cg-dot--big { r: 8; }
.cgap__pulse {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.cgap.is-drawn .cgap__pulse { animation: cgPulse 2.8s ease-out 1.9s infinite; }
@keyframes cgPulse {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.2); }
}

.cgap__legend {
  display: flex;
  gap: var(--sp-md);
  list-style: none;
  padding: 0;
  margin-top: var(--sp-sm);
  justify-content: center;
}
.cgap__leg {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sand);
}
.cgap__leg::before {
  content: "";
  width: 14px; height: 4px;
  border-radius: 2px;
}
.cgap__leg--filer::before { background: var(--sand); }
.cgap__leg--strat::before { background: linear-gradient(90deg, var(--orange-bright), var(--yellow)); }

.cgap__caption { display: flex; flex-direction: column; gap: var(--sp-2xs); }
.cgap__tag {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
}
.cgap__total {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 4vw + 2rem, 5.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--yellow);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 44px rgba(251,191,36,0.4);
}
.cgap__total-label {
  font-size: var(--fs-small);
  color: var(--sand);
  line-height: 1.6;
  max-width: 38ch;
}
.cgap__total-label a { color: var(--yellow); font-weight: 600; }

@media (min-width: 920px) {
  .cgap { grid-template-columns: 1.55fr 1fr; gap: var(--sp-xl); }
}

/* ============================================================
   Living-light animation layer (May 16 follow-up)
   Every section gets two drifting, breathing aurora layers behind
   the ledger grid. Pure CSS, transform + opacity only, so they are
   GPU-composited (no JS, no extra canvases). The hero keeps its
   live canvas; this brings motion to every other space, themed per
   background and desynced so no two read in lockstep.
   ============================================================ */

.section:not(.hero),
.pagehead,
.cta-band,
.capacity,
.site-footer {
  position: relative;
  overflow: hidden;
  --aura-a: rgba(234,88,12,0.14);
  --aura-b: rgba(251,191,36,0.13);
  --aura-c: rgba(251,191,36,0.13);
}
.section.section--cream,
.pagehead--cream {
  --aura-a: rgba(234,88,12,0.16);
  --aura-b: rgba(251,191,36,0.16);
  --aura-c: rgba(234,88,12,0.13);
}
.section.section--dark {
  --aura-a: rgba(234,88,12,0.26);
  --aura-b: rgba(251,191,36,0.17);
  --aura-c: rgba(234,88,12,0.20);
}
.cta-band,
.site-footer {
  --aura-a: rgba(234,88,12,0.24);
  --aura-b: rgba(251,191,36,0.16);
  --aura-c: rgba(234,88,12,0.18);
}
.capacity {
  --aura-a: rgba(255,251,242,0.20);
  --aura-b: rgba(255,226,165,0.26);
  --aura-c: rgba(255,255,255,0.22);
}

/* keep section content above the animated layers */
.pagehead > .wrap,
.cta-band > .wrap,
.capacity > .wrap,
.site-footer > .wrap { position: relative; z-index: 1; }

.section:not(.hero)::before, .section:not(.hero)::after,
.pagehead::before, .pagehead::after,
.cta-band::before, .cta-band::after,
.capacity::before, .capacity::after,
.site-footer::before, .site-footer::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* large soft drifting aurora (two warm blobs) */
.section:not(.hero)::before,
.pagehead::before,
.cta-band::before,
.capacity::before,
.site-footer::before {
  inset: -26% -16%;
  background:
    radial-gradient(40% 46% at 24% 30%, var(--aura-a), transparent 72%),
    radial-gradient(36% 42% at 80% 74%, var(--aura-b), transparent 74%);
  filter: blur(46px);
  animation: aura-drift 33s ease-in-out infinite;
}
/* smaller, brighter accent blob drifting on a different path */
.section:not(.hero)::after,
.pagehead::after,
.cta-band::after,
.capacity::after,
.site-footer::after {
  width: 48%;
  aspect-ratio: 1;
  top: 6%;
  right: -8%;
  background: radial-gradient(circle, var(--aura-c), transparent 70%);
  filter: blur(54px);
  animation: aura-float 24s ease-in-out infinite;
}

@keyframes aura-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);       opacity: 0.78; }
  50%      { transform: translate3d(3.6%, 4%, 0) scale(1.16); opacity: 1; }
}
@keyframes aura-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);         opacity: 0.5; }
  50%      { transform: translate3d(-7%, 8%, 0) scale(1.24);   opacity: 0.95; }
}

/* desync so no two sections breathe in lockstep */
.section:nth-of-type(even)::before { animation-duration: 39s; animation-direction: reverse; }
.section:nth-of-type(even)::after  { animation-duration: 29s; animation-direction: reverse; }
.section:nth-of-type(3n)::before   { animation-delay: -13s; }
.section:nth-of-type(3n)::after    { animation-delay: -9s; }
.cta-band::before  { animation-delay: -7s; }
.cta-band::after   { animation-delay: -17s; animation-direction: reverse; }
.site-footer::before { animation-delay: -21s; animation-direction: reverse; }
.site-footer::after  { animation-delay: -4s; }
.pagehead::after     { animation-delay: -11s; }

/* ============================================================
   Scroll-driven choreography (May 16 follow-up)
   CSS Scroll-Driven Animations. The hero zooms and recedes as it
   scrolls away; every section rises into place tied to its own
   scroll position (scrubbed, reversible). Pure CSS, GPU-composited.
   @supports-gated: browsers without scroll timelines fall back to
   the JS IntersectionObserver reveal (see scrollAnimOK in the JS).
   ============================================================ */
@keyframes hero-recede {
  to { transform: translateY(-74px); opacity: 0.1; }
}
@keyframes hero-grid-pull {
  to { transform: scale(1.34); opacity: 0.14; }
}
@keyframes section-rise {
  from { opacity: 0; transform: translateY(52px) scale(0.962); }
  to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Hero: the badge and headline parallax up and fade as you scroll
       through the first screen, while the grid pulls back. The recede
       is scoped to the badge + headline only. The supporting paragraph,
       the CTAs, and the trust strip stay readable while still on screen,
       so the recede never catches content the visitor can still see. */
    .hero__badge,
    .hero__copy h1,
    .hero-alt-h1 {
      animation: hero-recede linear both;
      animation-timeline: scroll(root);
      animation-range: 0 86vh;
    }
    .hero__ledger {
      animation: hero-grid-pull linear both;
      animation-timeline: scroll(root);
      animation-range: 0 94vh;
    }
    /* Every section: content rises and settles as it scrolls in. */
    .section:not(.hero) > .wrap,
    .pagehead > .wrap,
    .cta-band > .wrap,
    .capacity > .wrap,
    .site-footer > .wrap {
      animation: section-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
  }
}

/* ---- CTA band to footer seam ----
   Two stacked dark zones were merging into one mass. The footer now
   sits a step deeper than the CTA band and is divided from it by a
   soft gold ledger rule. */
.site-footer {
  background-color: #14100c;
  border-style: solid;
  border-width: 1px 0 0;
  border-image: linear-gradient(90deg, transparent, rgba(251,191,36,0.42), transparent) 1;
  /* the footer is the calm "rest" zone: a much softer aura than the
     energetic CTA band above it, so the two dark zones read apart */
  --aura-a: rgba(234,88,12,0.10);
  --aura-b: rgba(251,191,36,0.07);
  --aura-c: rgba(234,88,12,0.08);
}

/* ============================================================
   Cursor-reactive grid illumination (May 16 follow-up)
   A brighter copy of the ledger grid, injected per section and
   masked to a soft circle that follows the cursor. The grid itself
   gently lights up under the pointer, then fades. Themed per
   background; the injected layer is phase-locked to the base grid
   by the same JS that aligns the seams.
   ============================================================ */
.section:not(.hero), .pagehead, .cta-band, .site-footer { --cgrid-line: rgba(234,88,12,0.40); }
.section.section--cream, .pagehead--cream { --cgrid-line: rgba(234,88,12,0.42); }
.section.section--dark { --cgrid-line: rgba(251,191,36,0.40); }
.cta-band, .site-footer { --cgrid-line: rgba(251,191,36,0.34); }
.capacity { --cgrid-line: rgba(255,255,255,0.44); }

.cursor-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s var(--ease);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px, var(--cgrid-line) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, var(--cgrid-line) 47px 48px);
  -webkit-mask-image: radial-gradient(circle 200px at var(--cx, -300px) var(--cy, -300px), #000 0%, #000 20%, transparent 72%);
          mask-image: radial-gradient(circle 200px at var(--cx, -300px) var(--cy, -300px), #000 0%, #000 20%, transparent 72%);
}
.cursor-grid.is-lit { opacity: 1; }

/* ============================================================
   Portal interface (client portal + practice admin)
   App-style dashboard chrome: dark sidebar, light work area.
   Reuses the Cowell palette, serif, and design tokens.
   ============================================================ */
.portal-body { background: var(--cream); }
.portal-shell { display: flex; min-height: 100vh; }

.portal-side {
  width: 264px;
  flex: none;
  background: var(--noir);
  color: var(--sand);
  display: flex;
  flex-direction: column;
  padding: var(--sp-md);
  position: sticky;
  top: 0;
  height: 100vh;
}
.portal-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  text-decoration: none;
  padding-bottom: var(--sp-md);
  margin-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--line-dark);
}
.portal-brand__mark { width: 38px; flex: none; color: var(--orange-bright); display: flex; align-items: flex-end; }
.portal-brand__mark .skyline { width: 100%; height: auto; display: block; overflow: visible; }
.portal-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.portal-brand__name { font-family: var(--font-serif); font-size: 1.12rem; font-weight: 700; color: var(--white); }
.portal-brand__sub { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yellow); margin-top: 3px; }

.portal-nav { display: flex; flex-direction: column; gap: 3px; }
.portal-nav__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  padding: 0.62rem 0.7rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--sand);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.portal-nav__item .icon { width: 1.15em; height: 1.15em; color: var(--graphite); transition: color 0.2s var(--ease); }
.portal-nav__item:hover { background: rgba(255,247,237,0.06); color: var(--white); }
.portal-nav__item:hover .icon { color: var(--orange-bright); }
.portal-nav__item.is-active { background: var(--orange-deep); color: var(--white); }
.portal-nav__item.is-active .icon { color: var(--white); }
.portal-nav__count {
  margin-left: auto;
  font-size: var(--fs-micro);
  font-weight: 700;
  background: rgba(255,247,237,0.10);
  color: var(--sand);
  padding: 1px 8px;
  border-radius: var(--r-pill);
}
.portal-nav__item.is-active .portal-nav__count { background: rgba(0,0,0,0.22); color: var(--white); }
.portal-nav__count--alert { background: var(--orange); color: var(--white); }

.portal-side__foot { margin-top: auto; padding-top: var(--sp-md); }
.portal-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--yellow);
  text-decoration: none;
}
.portal-back .icon { width: 1em; height: 1em; }
.portal-back:hover { text-decoration: underline; }
.portal-demo {
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--graphite);
  margin-top: var(--sp-sm);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--line-dark);
}

.portal-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.portal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.portal-eyebrow {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-deep);
}
.portal-title { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; margin-top: 2px; }
.portal-topbar__right { display: flex; align-items: center; gap: var(--sp-md); }
.portal-bell { position: relative; color: var(--graphite); display: flex; }
.portal-bell .icon { width: 1.3em; height: 1.3em; }
.portal-bell__dot {
  position: absolute; top: -1px; right: -1px;
  width: 8px; height: 8px;
  background: var(--orange);
  border: 2px solid var(--white);
  border-radius: 50%;
}
.portal-user { display: flex; align-items: center; gap: var(--sp-2xs); }
.portal-user__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--orange-bright), var(--orange-deep));
  color: var(--white);
  font-size: var(--fs-small);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.portal-user__text { display: flex; flex-direction: column; line-height: 1.2; }
.portal-user__name { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.portal-user__role { font-size: var(--fs-micro); color: var(--graphite); }

.portal-content {
  padding: var(--sp-lg);
  max-width: 1240px;
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.portal-hello {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
}
.portal-hello h2 { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.025em; }
.portal-hello p { font-size: var(--fs-body); color: var(--ink-soft); margin-top: var(--sp-3xs); }

.portal-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
  padding: 0.7rem 1.3rem;
  border-radius: var(--r-pill);
  background: var(--orange-deep);
  color: var(--white);
  border: 0;
  cursor: pointer;
  box-shadow: var(--shadow-orange-sm);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.portal-btn .icon { width: 1em; height: 1em; }
.portal-btn:hover { background: var(--ink); transform: translateY(-2px); }
.portal-btn--sm { padding: 0.42rem 1rem; box-shadow: none; flex: none; }

.pstat-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-sm); }
.pstat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-md);
  box-shadow: var(--shadow-sm);
}
.pstat__label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
}
.pstat__value { font-family: var(--font-serif); font-size: 1.85rem; font-weight: 700; letter-spacing: -0.02em; margin-top: var(--sp-3xs); }
.pstat__value--alert { color: var(--orange-deep); }
.pstat__sub { font-size: var(--fs-micro); color: var(--graphite); margin-top: 2px; }

.portal-cols { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); }
/* A grid track of `1fr` is `minmax(auto, 1fr)`, so it floors at the item's
   min-content width. The widest thing in these columns is a .ptable whose
   <th>s are nowrap, which made the single-column track measure 623px inside a
   345px shell on a phone: the panel overflowed with `overflow: visible` above
   it, so the right-hand columns were CLIPPED AWAY rather than merely hard to
   reach. min-width: 0 lets the item shrink to the track and hands the
   scrolling job back to .ptable-wrap, which is the element built for it. */
.portal-cols > * { min-width: 0; }
.ppanel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
  box-shadow: var(--shadow-sm);
}
.ppanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-sm);
  border-bottom: 1px solid var(--line);
}
.ppanel__head h3 { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 700; }
.ppanel__link { font-size: var(--fs-small); font-weight: 600; color: var(--orange-deep); cursor: pointer; }

.pbadge {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.pbadge--alert { background: rgba(234,88,12,0.12); color: var(--orange-deep); }
.pbadge--review { background: rgba(251,191,36,0.22); color: #92600c; }
.pbadge--done { background: rgba(28,23,20,0.06); color: var(--ink-soft); border: 1px solid var(--line); }

.ptask-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2xs); }
.ptask {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  border-radius: var(--r-md);
  background: var(--cream);
  border: 1px solid var(--line);
}
.ptask__icon {
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--orange-deep);
  display: flex; align-items: center; justify-content: center;
}
.ptask__icon .icon { width: 1.1em; height: 1.1em; }
.ptask__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ptask__title { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.ptask__meta { font-size: var(--fs-micro); color: var(--graphite); }

.pfeed { list-style: none; padding: 0; display: flex; flex-direction: column; }
.pfeed__item { display: flex; gap: var(--sp-sm); padding: var(--sp-2xs) 0; }
.pfeed__item + .pfeed__item { border-top: 1px solid var(--line); }
.pfeed__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
  margin-top: 6px;
}
.pfeed__dot--ok { background: var(--sand); }
.pfeed__body { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
.pfeed__body strong { color: var(--ink); font-weight: 600; }
.pfeed__time { display: block; font-size: var(--fs-micro); color: var(--graphite); margin-top: 1px; }
.pfeed--deadlines .pfeed__item { align-items: center; }
.pfeed__date {
  flex: none;
  width: 48px;
  text-align: center;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--orange-deep);
  line-height: 1.15;
}
.pfeed__date strong { display: block; font-family: var(--font-serif); font-size: 1.3rem; color: var(--ink); }

.pdoc-list { list-style: none; padding: 0; display: flex; flex-direction: column; }
.pdoc { display: flex; align-items: center; gap: var(--sp-sm); padding: var(--sp-sm) 0; }
.pdoc + .pdoc { border-top: 1px solid var(--line); }
.pdoc__icon {
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--orange-deep);
  display: flex; align-items: center; justify-content: center;
}
.pdoc__icon .icon { width: 1.15em; height: 1.15em; }
.pdoc__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pdoc__name { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.pdoc__meta { font-size: var(--fs-micro); color: var(--graphite); }
.pdoc__dl { color: var(--graphite); display: flex; cursor: pointer; }
.pdoc__dl .icon { width: 1.2em; height: 1.2em; }
.pdoc__dl:hover { color: var(--orange-deep); }

.ptable-wrap { overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.ptable th {
  text-align: left;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  padding: 0 var(--sp-sm) var(--sp-2xs);
  white-space: nowrap;
}
.ptable td { padding: var(--sp-sm); border-top: 1px solid var(--line); color: var(--ink-soft); vertical-align: middle; }
.ptable tbody tr:hover { background: var(--cream); }
.ptable__name { font-weight: 600; color: var(--ink); }

@media (min-width: 620px) {
  .pstat-row { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .pstat-row { grid-template-columns: repeat(4, 1fr); }
  .portal-cols { grid-template-columns: 1fr 1fr; }
  .portal-cols--wide { grid-template-columns: 1.4fr 1fr; }
}
@media (max-width: 880px) {
  /* The dark sidebar becomes a compact top bar: brand on one row, the section
     nav as WRAPPING rows of tabs below. The tall footer disclaimer is dropped
     (the demo banner already carries the demo notice and the back link).
     Nothing sticks, so there is no sticky-offset math to fight on a small
     screen. */
  .portal-shell { flex-direction: column; }
  .portal-side {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2xs);
    padding: var(--sp-2xs) var(--sp-sm);
  }
  /* the desktop banner-offset rule pins the sidebar to the full
     viewport height; on mobile it must collapse to its content */
  html:not(.banner-dismissed) .portal-side { height: auto; top: auto; }
  .portal-brand { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
  /* This was a nowrap row in an overflow-x:auto scroller. On a phone the admin
     nav measured 816px of tabs inside a 361px box, so four of the six sections
     sat off-screen behind a horizontal drag with no scrollbar and no other
     affordance, and the visible edge sliced a label mid-word ("Review c...").
     A hidden scroller is not a passing result for the PRIMARY navigation of
     the demo. Wrapping shows every section at once; it is a no-op at widths
     where the row already fits, so nothing changes on a tablet. */
  .portal-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-3xs);
    padding-bottom: 3px;
  }
  /* flex-grow lets each row fill the bar so the wrapped rows read as a tab
     strip rather than as ragged leftovers. */
  .portal-nav__item {
    flex: 1 1 auto;
    justify-content: center;
    white-space: nowrap;
    padding: 0.5rem 0.72rem;
    min-height: 44px;
  }
  .portal-nav__count { margin-left: var(--sp-3xs); }
  .portal-side__foot { display: none; }
  .portal-topbar { position: static; padding: var(--sp-sm) var(--sp-md); }
  .portal-content { padding: var(--sp-md); }
}

/* A phone in portrait fits about two tabs per row, and letting flex decide
   which two produced a ragged strip: at 320px the six admin sections landed
   2/1/2/1 across FOUR rows, 191px of nav before the page began. An explicit
   two-up grid is 3 even rows at every width from 320 to 430, and 48px
   shorter at the narrowest. Measured across 320/360/375/390/412/430: no
   label wraps and the row count never rises. Above this width flex is
   strictly better (2 rows by 480px, 1 by 880px), so it keeps that range. */
@media (max-width: 440px) {
  .portal-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .portal-nav__item { flex: none; }
}

/* ===== Portal tables on a phone =====
   A wide table inside an overflow-x scroller is not a passing result: no probe
   for page overflow reports anything, and the product is still unusable. These
   tables measured 481px to 615px of nowrap columns inside a 263px to 345px
   box, so a row showed its first column and half of its second and the rest
   (status, amount, last activity) needed a per-row horizontal drag.

   Below 768px each row becomes a labelled card instead. The label per line is
   the column heading, copied off the table's own <thead> by
   PortalShared.stampTableLabels. The rules are gated on data-stacked="ready",
   which that function sets only after the labels are actually on the cells, so
   a page whose script never ran keeps the old scroller rather than rendering a
   column of unlabelled values. */
@media (max-width: 767px) {
  .ptable[data-stacked="ready"] {
    display: block;
    font-size: var(--fs-small);
  }
  /* The headings have moved into the cells, so the header row would be a
     duplicate read for a screen reader as well as a visual one. */
  .ptable[data-stacked="ready"] thead { display: none; }
  .ptable[data-stacked="ready"] tbody { display: block; }

  /* :not([hidden]) is load-bearing. The search box and the filter chips hide
     a row by setting the `hidden` property, which relies on the UA rule
     `[hidden] { display: none }`, and an AUTHOR display declaration beats a
     UA one whatever the specificity. A bare `tr { display: block }` therefore
     un-hides every filtered-out row: measured on the admin client roster,
     filtering to Fractional CFO left all 16 of 16 rows on screen with 12
     carrying the hidden attribute. Excluding hidden rows keeps the filter,
     the search and the empty state working. */
  .ptable[data-stacked="ready"] tbody tr:not([hidden]) {
    display: block;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: var(--sp-2xs) var(--sp-sm);
    margin-bottom: var(--sp-2xs);
  }
  .ptable[data-stacked="ready"] tbody tr:hover { background: var(--white); }
  .ptable[data-stacked="ready"] tbody tr:last-child { margin-bottom: 0; }

  .ptable[data-stacked="ready"] td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding: var(--sp-2xs) 0;
    border-top: 1px solid var(--line);
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .ptable[data-stacked="ready"] td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--graphite);
    text-align: left;
  }
  /* The first cell identifies the record, so it reads as the card's title
     rather than as one more label/value line. */
  .ptable[data-stacked="ready"] td:first-child {
    border-top: 0;
    justify-content: flex-start;
    text-align: left;
    font-weight: 600;
    color: var(--ink);
    padding-top: var(--sp-2xs);
  }
  .ptable[data-stacked="ready"] td:first-child::before { display: none; }
  /* A cell whose heading was empty has no label to show, so it becomes a
     full-width action row (the portal invoice download button). */
  .ptable[data-stacked="ready"] td:not([data-label]) { justify-content: flex-end; }
  .ptable[data-stacked="ready"] td:not([data-label])::before { display: none; }
  .ptable[data-stacked="ready"] td.is-num { text-align: right; }

  /* Nothing overflows once the rows are stacked, so the scroller would only
     contribute a stray clip on the card shadows. */
  .ptable-wrap:has(.ptable[data-stacked="ready"]) { overflow-x: visible; }
}

/* services.html portal-preview block links to the live portal page */
.portal__preview { display: block; text-decoration: none; }
.portal__preview .portal__visual { transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease); }
.portal__preview:hover .portal__visual { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.portal__preview .portal__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3xs);
  color: var(--yellow);
}
.portal__preview .portal__caption .icon { width: 1.1em; height: 1.1em; transition: transform 0.28s var(--ease); }
.portal__preview:hover .portal__caption .icon { transform: translateX(4px); }

/* Phase 1: demo trust card + demo phone marker */
.trust-card {
  background: var(--noir);
  color: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  margin-top: var(--sp-md);
}
.trust-card__title { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 600; color: var(--white); }
.trust-card__copy { font-size: var(--fs-small); color: var(--sand); line-height: 1.65; margin-top: var(--sp-2xs); max-width: 64ch; }

/* Homepage: verified review wall mockup */
.reviewwall {
  background: var(--noir);
  color: var(--white);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  margin-top: var(--sp-md);
}
.reviewwall__title { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 600; color: var(--white); }
.reviewwall__sub { font-size: var(--fs-small); color: var(--sand); line-height: 1.6; margin-top: var(--sp-2xs); max-width: 62ch; }
.reviewwall__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}
@media (min-width: 600px) { .reviewwall__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .reviewwall__grid { grid-template-columns: repeat(4, 1fr); } }
.reviewwall__badge {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
  padding: var(--sp-md);
  background: rgba(255, 247, 237, 0.05);
  border: 1px solid rgba(255, 247, 237, 0.12);
  border-radius: var(--r-md);
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), background 0.28s var(--ease);
}
.reviewwall__badge:hover {
  transform: translateY(-3px);
  border-color: rgba(234, 88, 12, 0.5);
  background: rgba(255, 247, 237, 0.08);
}
.reviewwall__src {
  display: flex;
  align-items: center;
  gap: var(--sp-3xs);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sand);
}
.reviewwall__src .icon { width: 1.15em; height: 1.15em; color: var(--orange-bright); flex: none; }
.reviewwall__score {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-family: var(--font-serif);
  font-size: 2.05rem;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  margin-top: var(--sp-3xs);
}
.reviewwall__score .icon { width: 0.92em; height: 0.92em; fill: var(--orange); stroke: var(--orange); }
.reviewwall__count { font-size: var(--fs-small); color: var(--sand); }
.reviewwall__note {
  font-size: var(--fs-micro);
  color: var(--sand);
  margin-top: var(--sp-md);
  font-style: italic;
  opacity: 0.82;
}
.phone__marker {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.4em;
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--graphite);
  background: var(--cream);
  border-radius: 3px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* Phase 1: tax-season hero heading (div role=heading, mirrors the h1 it replaces) */
.hero-alt-h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
  font-feature-settings: "liga", "dlig", "kern";
  font-size: var(--fs-display);
  letter-spacing: -0.035em;
}

/* Phase 1: footer template disclosure (tokens adapted to the dark footer) */
.footer-disclosure {
  font-size: 13px;
  color: var(--sand);
  text-align: center;
  padding: 12px 0;
  border-top: 1px solid var(--line-dark);
  margin-top: 16px;
}
.footer-disclosure a { color: inherit; text-decoration: underline; }

/* Sub-page hero with imagery (about, switching) */
.pagehead--media .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-lg);
  align-items: center;
}
.pagehead__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 1 / 1;
}
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 760px) {
  .pagehead--media .wrap { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-xl); }
}

/* Sub-page hero: faint full-bleed watermark echo of the hero photo.
   Sits above the ledger grid, below the aurora light and content;
   masked so it stays clear of the headline column on the left. */
.pagehead__wm {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0.32;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 20%, rgba(0,0,0,0.5) 50%, #000 82%);
          mask-image: linear-gradient(100deg, transparent 0%, transparent 20%, rgba(0,0,0,0.5) 50%, #000 82%);
  pointer-events: none;
}
@media (max-width: 759px) {
  .pagehead__wm { opacity: 0.17; }
}

/* Services: cinematic range band */
.range-band {
  position: relative;
  overflow: hidden;
  min-height: clamp(320px, 40vw, 480px);
  display: flex;
  align-items: flex-end;
}
.range-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.range-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,16,12,0.9), rgba(20,16,12,0.42) 34%, transparent 62%);
}
.range-band > .wrap { position: relative; z-index: 1; }
.range-band__inner { padding-block: var(--sp-xl); max-width: 52ch; }
.range-band__eyebrow {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: var(--sp-2xs);
}
.range-band__line {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
}

/* ============================================================
   Phase 2 Part A: demo CTA section (links into both portals)
   ============================================================ */
.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 768px) {
  .demo-grid { grid-template-columns: 1fr; gap: 16px; }
}
.demo-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border-radius: 16px;
  text-decoration: none;
  position: relative;
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  border-top: 2px solid var(--orange);
}
.demo-card--client { background: var(--cream); color: var(--ink); }
.demo-card--admin { background: var(--ink); color: var(--cream); }
.demo-card:hover,
.demo-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(26,20,16,0.04),
              0 12px 32px rgba(26,20,16,0.10);
}
@media (prefers-reduced-motion: reduce) {
  .demo-card { transition: none; }
  .demo-card:hover, .demo-card:focus-visible { transform: none; }
}
.demo-card__eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.7;
}
.demo-card__title {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.15;
  margin: 0;
}
.demo-card__copy {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.85;
}
.demo-card__cta {
  margin-top: 8px;
  font-weight: 600;
  color: var(--orange-deep);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.demo-card--admin .demo-card__cta { color: var(--orange-bright); }
.section__footnote {
  margin-top: 32px;
  font-size: 14px;
  opacity: 0.7;
  text-align: center;
}

/* ============================================================
   Phase 2 Part A4: LCP optimization. Skip layout/paint work for
   below-the-fold sections until they approach the viewport, so
   the main thread is free during the LCP window. The `auto`
   keyword on contain-intrinsic-size lets the browser remember
   each section's real height after first render; the length is
   only the pre-render estimate, tuned per section to keep first
   render close to actual height. The slim capacity band is
   intentionally excluded (trivial render cost, not worth a CV
   size estimate).
   ============================================================ */
.cgap-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}
[aria-labelledby="services-teaser-heading"] {
  content-visibility: auto;
  contain-intrinsic-size: auto 960px;
}
.section--demo {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}
[aria-labelledby="reviews-heading"] {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}
.cta-band {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* ============================================================
   Phase 2 Part B: portal navigation chrome.
   Shared utilities (sr-only, toast), demo banner, notification
   dropdown, user menu, view stubs. Reuses the Cowell palette
   and tokens.
   ============================================================ */

/* --- Screen-reader-only utility (used by portal-shared.js) --- */
.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;
}

/* --- Toast notifications --- */
.portal-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.portal-toast {
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: var(--r-xs);
  font-size: var(--fs-small);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
  max-width: 360px;
  pointer-events: auto;
}
.portal-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.portal-toast--success { background: #2c5530; }
.portal-toast--info { background: var(--orange-deep); }
@media (prefers-reduced-motion: reduce) {
  .portal-toast { transition: none; transform: none; }
}

/* --- Demo banner (portal + admin, sticky above the topbar) --- */
.demo-banner {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  height: 40px;
  padding: 0 var(--sp-md);
  background: var(--cream-deep);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-micro);
  color: var(--ink-soft);
}
.demo-banner__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}
.demo-banner__text { flex: 1 1 auto; min-width: 0; }
.demo-banner__text a { color: var(--orange-deep); font-weight: 600; }
.demo-banner__back {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  color: var(--orange-deep);
  font-weight: 600;
  text-decoration: none;
}
.demo-banner__back .icon { width: 1em; height: 1em; }
.demo-banner__back:hover { text-decoration: underline; }
.demo-banner__close {
  flex: none;
  width: 24px; height: 24px;
  border: none;
  background: transparent;
  color: var(--graphite);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--r-xs);
}
.demo-banner__close:hover { background: rgba(0,0,0,0.06); color: var(--ink); }
.banner-dismissed .demo-banner { display: none; }
/* shift the portal sticky chrome down while the banner is visible.
   Desktop only: on mobile the banner, sidebar, and topbar are all
   static, so there is no sticky offset to apply. */
@media (min-width: 881px) {
  html:not(.banner-dismissed) .portal-side { top: 40px; height: calc(100vh - 40px); }
  html:not(.banner-dismissed) .portal-topbar { top: 40px; }
}

/* --- Top-bar menu wrapper (anchors the dropdowns) --- */
.portal-menu { position: relative; }

/* --- Notification trigger + badge --- */
.notif-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--r-sm);
  color: var(--graphite);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.notif-trigger:hover { background: var(--cream); color: var(--ink); }
.notif-trigger .icon { width: 1.25em; height: 1.25em; }
.notif-trigger__badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--orange);
  color: var(--white);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: var(--r-pill);
  border: 2px solid var(--white);
}

/* --- Dropdown panels (notifications + user menu) --- */
.notif-dropdown,
.user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 40;
  overflow: hidden;
}
.notif-dropdown { width: 340px; }

.notif-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--line);
}
.notif-dropdown__header strong { font-size: var(--fs-small); }
.notif-dropdown__mark-read {
  border: none;
  background: none;
  color: var(--orange-deep);
  font-size: var(--fs-micro);
  font-weight: 600;
  cursor: pointer;
}
.notif-dropdown__mark-read:hover { text-decoration: underline; }
.notif-dropdown__list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
}
.notif-item {
  display: flex;
  gap: var(--sp-2xs);
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--line);
}
.notif-item:last-child { border-bottom: none; }
.notif-item__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: transparent;
  flex: none;
  margin-top: 6px;
}
.notif-item--unread { background: var(--cream); }
.notif-item--unread .notif-item__dot { background: var(--orange); }
.notif-item__body { display: flex; flex-direction: column; gap: 2px; }
.notif-item__body strong { font-size: var(--fs-small); font-weight: 600; line-height: 1.35; }
.notif-item__time { font-size: var(--fs-micro); color: var(--graphite); }
.notif-dropdown__footer {
  display: block;
  padding: var(--sp-sm) var(--sp-md);
  text-align: center;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--orange-deep);
  text-decoration: none;
  border-top: 1px solid var(--line);
}
.notif-dropdown__footer:hover { background: var(--cream); }

/* --- User-menu trigger --- */
.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  border: 1px solid transparent;
  background: none;
  padding: var(--sp-3xs);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.user-menu-trigger:hover { background: var(--cream); }
.user-menu-trigger__avatar,
.user-menu__avatar {
  border-radius: 50%;
  background: linear-gradient(140deg, var(--orange-bright), var(--orange-deep));
  color: var(--white);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.user-menu-trigger__avatar { width: 38px; height: 38px; font-size: var(--fs-small); }
.user-menu-trigger__name { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.user-menu-trigger__name strong { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.user-menu-trigger__name span { font-size: var(--fs-micro); color: var(--graphite); }

/* --- User-menu panel --- */
.user-menu { width: 268px; }
.user-menu__profile {
  display: flex;
  gap: var(--sp-2xs);
  padding: var(--sp-md);
  border-bottom: 1px solid var(--line);
}
.user-menu__avatar { width: 44px; height: 44px; font-size: var(--fs-body); }
.user-menu__identity { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.user-menu__identity strong { font-size: var(--fs-small); }
.user-menu__identity span { font-size: var(--fs-micro); color: var(--graphite); }
.user-menu__demo-tag {
  margin-top: 4px;
  align-self: flex-start;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--orange-deep);
  background: var(--cream-deep);
  padding: 2px 7px;
  border-radius: var(--r-pill);
}
.user-menu__list { list-style: none; padding: var(--sp-2xs); margin: 0; }
.user-menu__list button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 0.5rem 0.6rem;
  border-radius: var(--r-xs);
  font-size: var(--fs-small);
  color: var(--ink-soft);
  cursor: pointer;
}
.user-menu__list button:hover { background: var(--cream); color: var(--ink); }
.user-menu__divider {
  height: 1px;
  background: var(--line);
  margin: var(--sp-2xs) 0;
  list-style: none;
}
.user-menu__back {
  display: flex;
  align-items: center;
  gap: var(--sp-3xs);
  padding: var(--sp-sm) var(--sp-md);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--orange-deep);
  text-decoration: none;
}
.user-menu__back .icon { width: 1em; height: 1em; }
.user-menu__back:hover { background: var(--cream); }

/* ============================================================
   Phase 2 Part C/D: portal inner views.
   Documents, messages, tasks, billing (client); clients, review
   queue, deadlines, messages, billing (admin). Plus the shared
   view chrome: toolbars, filter chips, search, message threads,
   progress meters, empty states. Reuses the Cowell palette.
   ============================================================ */

/* Each view is a flex column; :not([hidden]) so the JS hide still
   wins. Descendant [hidden] (filtered rows) collapse cleanly. */
[data-portal-view]:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
[data-portal-view] [hidden] { display: none; }

/* Entrance: the active view fades and lifts in once. */
[data-portal-view]:not([hidden]) { animation: pview-in 0.4s var(--ease) both; }
@keyframes pview-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-portal-view]:not([hidden]) { animation: none; }
}

/* --- View intro: heading + lead, like portal-hello but no CTA --- */
.pview-intro h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.pview-intro p {
  font-size: var(--fs-body);
  color: var(--ink-soft);
  margin-top: var(--sp-3xs);
  max-width: 60ch;
}

/* --- Toolbar: search + chips + actions --- */
.pview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-sm);
}
.pview-bar__spacer { margin-left: auto; }

/* --- Search field --- */
.psearch { position: relative; flex: 1 1 240px; min-width: 0; }
.psearch__icon {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--graphite);
  pointer-events: none;
}
.psearch input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--ink);
  padding: 0.58rem 0.95rem 0.58rem 2.3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.psearch input::placeholder { color: var(--graphite); }
.psearch input:focus-visible {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(234,88,12,0.14);
}

/* --- Filter chips --- */
.pchips { display: flex; flex-wrap: wrap; gap: var(--sp-3xs); }
.pchip {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 0.42rem 0.85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease);
}
.pchip:hover { border-color: var(--sand); color: var(--ink); }
.pchip.is-active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.pchip__count { opacity: 0.55; margin-left: 5px; font-variant-numeric: tabular-nums; }
.pchip:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* --- Result count line --- */
.presult-count {
  font-size: var(--fs-micro);
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
}

/* --- Ghost / secondary buttons --- */
.portal-btn--ghost {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
}
.portal-btn--ghost:hover { background: var(--ink); color: var(--white); }
.portal-btn--quiet {
  background: transparent;
  color: var(--orange-deep);
  box-shadow: none;
  padding-inline: 0.6rem;
}
.portal-btn--quiet:hover { background: var(--cream-deep); color: var(--orange-deep); }

/* --- Empty state --- */
.pempty {
  text-align: center;
  padding: var(--sp-xl) var(--sp-md);
}
.pempty__icon {
  width: 46px; height: 46px;
  margin: 0 auto var(--sp-2xs);
  color: var(--sand);
}
.pempty strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--ink-soft);
}
.pempty p {
  font-size: var(--fs-small);
  color: var(--graphite);
  margin-top: var(--sp-3xs);
}

/* --- Progress meter --- */
.pmeter { display: flex; flex-direction: column; gap: var(--sp-3xs); }
.pmeter__head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-sm);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--graphite);
}
.pmeter__track {
  height: 9px;
  background: var(--cream-deep);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.pmeter__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--orange-bright), var(--orange-deep));
  border-radius: inherit;
  transition: width 0.8s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .pmeter__fill { transition: none; }
}

/* --- KPI strip (lighter than pstat, lives inside a panel) --- */
.pkpi-row {
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.pkpi__label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--graphite);
}
.pkpi__value {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 2px;
}
.pkpi__value--alert { color: var(--orange-deep); }
.pkpi__value--ok { color: #2c5530; }
.pkpi__sub { font-size: var(--fs-micro); color: var(--graphite); margin-top: 1px; }
.pkpi + .pkpi {
  border-left: 1px solid var(--line);
  padding-left: var(--sp-md);
}
@media (max-width: 620px) {
  .pkpi + .pkpi { border-left: 0; padding-left: 0; }
}

/* --- Neutral tag pill --- */
.ptag {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--cream-deep);
  padding: 2px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

/* --- Document filtering: rows reuse .pdoc; add a primary-action
       button and keep the row tappable feel --- */
.pdoc__actions { display: flex; align-items: center; gap: var(--sp-2xs); flex: none; }
.pdoc-list--full .pdoc { padding-inline: var(--sp-3xs); border-radius: var(--r-sm); }
.pdoc-list--full .pdoc:hover { background: var(--cream); }

/* --- Task / job cards (tasks view + admin review queue) --- */
.pjob-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-sm); }
.pjob {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--sp-sm);
  padding: var(--sp-md);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.pjob:hover { border-color: var(--sand); box-shadow: var(--shadow-md); }
.pjob.is-resolved { opacity: 0.6; }
.pjob__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--cream);
  border: 1px solid var(--line);
  color: var(--orange-deep);
  display: flex; align-items: center; justify-content: center;
}
.pjob__icon .icon { width: 1.2em; height: 1.2em; }
.pjob.is-resolved .pjob__icon { background: #eef3ee; color: #2c5530; border-color: #d6e4d6; }
.pjob__main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3xs); }
.pjob__top { display: flex; align-items: flex-start; gap: var(--sp-sm); }
.pjob__title {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
}
.pjob__desc { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.55; }
.pjob__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs) var(--sp-sm);
  font-size: var(--fs-micro);
  color: var(--graphite);
}
.pjob__meta span { display: inline-flex; align-items: center; gap: 4px; }
.pjob__meta .icon { width: 1.05em; height: 1.05em; color: var(--sand); }
.pjob__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs);
  margin-top: var(--sp-3xs);
}
.pjob__done-note {
  display: none;
  font-size: var(--fs-small);
  font-weight: 600;
  color: #2c5530;
}
.pjob.is-resolved .pjob__done-note { display: inline-flex; align-items: center; gap: 5px; }
.pjob.is-resolved .pjob__actions { display: none; }

/* --- Message thread (client messages) --- */
.pthread { display: flex; flex-direction: column; gap: var(--sp-md); }
.pthread__day {
  align-self: center;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
  background: var(--cream);
  padding: 3px 12px;
  border-radius: var(--r-pill);
}
.pmsg { display: flex; gap: var(--sp-2xs); max-width: 80%; }
.pmsg__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  flex: none;
  font-size: var(--fs-micro);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pmsg__avatar--firm {
  background: linear-gradient(140deg, var(--orange-bright), var(--orange-deep));
  color: var(--white);
}
.pmsg__avatar--client { background: var(--cream-deep); color: var(--ink-soft); }
.pmsg__col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pmsg__bubble {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 5px 16px 16px 16px;
  padding: 0.72rem 0.98rem;
  font-size: var(--fs-small);
  line-height: 1.58;
  color: var(--ink-soft);
}
.pmsg__bubble strong { color: var(--ink); font-weight: 600; }
.pmsg__meta { font-size: var(--fs-micro); color: var(--graphite); }
.pmsg--out { align-self: flex-end; flex-direction: row-reverse; }
.pmsg--out .pmsg__bubble {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  border-radius: 16px 5px 16px 16px;
}
.pmsg--out .pmsg__bubble strong { color: var(--white); }
.pmsg--out .pmsg__col { align-items: flex-end; }
.pmsg--in { animation: pmsg-in 0.34s var(--ease) both; }
@keyframes pmsg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pmsg--in { animation: none; }
}

/* --- Typing indicator --- */
.ptyping { display: flex; align-items: center; gap: 4px; padding: 0.85rem 1rem; }
.ptyping span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sand);
  animation: ptype 1.1s var(--ease) infinite;
}
.ptyping span:nth-child(2) { animation-delay: 0.16s; }
.ptyping span:nth-child(3) { animation-delay: 0.32s; }
@keyframes ptype {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ptyping span { animation: none; }
}

/* --- Composer --- */
.pcompose {
  display: flex;
  gap: var(--sp-2xs);
  align-items: flex-end;
  border-top: 1px solid var(--line);
  padding-top: var(--sp-sm);
  margin-top: var(--sp-sm);
}
.pcompose textarea {
  flex: 1;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--ink);
  line-height: 1.5;
  resize: none;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.7rem 0.95rem;
  min-height: 46px;
  max-height: 150px;
  background: var(--white);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.pcompose textarea::placeholder { color: var(--graphite); }
.pcompose textarea:focus-visible {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(234,88,12,0.14);
}
.pcompose__send { flex: none; }

/* --- Thread list (admin messages, left pane) --- */
.pmsg-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); }
/* Same min-content floor as .portal-cols: the thread list's own rows pushed
   this single-column track 37px past the shell on a phone. */
.pmsg-layout > * { min-width: 0; }
.pthreadlist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.pthread-item {
  display: flex;
  gap: var(--sp-2xs);
  padding: var(--sp-sm);
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  width: 100%;
  font-family: var(--font-sans);
  text-align: left;
  transition: background-color 0.16s var(--ease);
}
.pthread-item:hover { background: var(--cream); }
.pthread-item.is-active { background: var(--cream); border-color: var(--line); }
.pthread-item__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex: none;
  font-size: var(--fs-micro);
  font-weight: 700;
  background: var(--cream-deep);
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
}
.pthread-item.is-active .pthread-item__avatar {
  background: linear-gradient(140deg, var(--orange-bright), var(--orange-deep));
  color: var(--white);
}
.pthread-item__main { flex: 1; min-width: 0; }
.pthread-item__top { display: flex; justify-content: space-between; gap: var(--sp-2xs); }
.pthread-item__name { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.pthread-item__time { font-size: var(--fs-micro); color: var(--graphite); flex: none; }
.pthread-item__preview {
  font-size: var(--fs-micro);
  color: var(--graphite);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}
.pthread-item__preview .pdot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  margin-right: 5px;
  vertical-align: middle;
}
.pthread-item.is-read .pthread-item__preview .pdot { display: none; }
@media (min-width: 900px) {
  .pmsg-layout { grid-template-columns: 312px 1fr; align-items: start; }
}

/* --- Deadline month groups --- */
.pmonth + .pmonth { margin-top: var(--sp-md); }
.pmonth__label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-deep);
  padding-bottom: var(--sp-2xs);
  margin-bottom: var(--sp-2xs);
  border-bottom: 1px solid var(--line);
}

/* --- Sortable table headers + numeric cells --- */
.ptable th.is-num, .ptable td.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ptable th.is-sortable {
  cursor: pointer;
  user-select: none;
}
.ptable th.is-sortable:hover { color: var(--ink); }
.psort {
  display: inline-block;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
.ptable th[aria-sort="ascending"] .psort,
.ptable th[aria-sort="descending"] .psort { opacity: 1; }
.ptable th[aria-sort="descending"] .psort { transform: rotate(180deg); }
.ptable tbody tr { transition: background-color 0.14s var(--ease); }
.ptable__row-link { cursor: pointer; }

/* --- Avatar chip used inside tables / lists --- */
.pavatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex: none;
  font-size: 0.66rem;
  font-weight: 700;
  background: var(--cream-deep);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ptable__client { display: flex; align-items: center; gap: var(--sp-2xs); }

/* --- Invoice / billing helpers --- */
.pbalance {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2xs) var(--sp-sm);
}
.pbalance__amount {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.pbalance__amount--ok { color: #2c5530; }
.ppay-method {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.ppay-method__chip {
  width: 46px; height: 32px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--ink), #3a322b);
  flex: none;
  position: relative;
}
.ppay-method__chip::after {
  content: "";
  position: absolute;
  left: 7px; top: 11px;
  width: 11px; height: 9px;
  border-radius: 2px;
  background: var(--yellow);
}
.ppay-method__body { flex: 1; min-width: 0; }
.ppay-method__num { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.ppay-method__sub { font-size: var(--fs-micro); color: var(--graphite); }

/* --- Note / callout strip inside a panel --- */
.pnote {
  display: flex;
  gap: var(--sp-2xs);
  padding: var(--sp-sm);
  background: var(--yellow-soft);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: #6b4d09;
}
.pnote .icon { width: 1.2em; height: 1.2em; flex: none; color: #b3850f; margin-top: 1px; }

/* --- Definition rows (engagement summary) --- */
.pdef { list-style: none; padding: 0; margin: 0; }
.pdef__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-md);
  padding: var(--sp-2xs) 0;
  font-size: var(--fs-small);
}
.pdef__row + .pdef__row { border-top: 1px solid var(--line); }
.pdef__key { color: var(--graphite); }
.pdef__val { color: var(--ink); font-weight: 600; text-align: right; }

/* --- Mini stat used in dashboards' lighter contexts --- */
.psplit { display: grid; gap: var(--sp-md); grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .psplit { grid-template-columns: 1.5fr 1fr; align-items: start; }
  .psplit--even { grid-template-columns: 1fr 1fr; }
}

/* --- Stacked panel: children flow with a consistent gap --- */
.ppanel--stack { display: flex; flex-direction: column; gap: var(--sp-md); }
.ppanel--stack .ppanel__head { margin-bottom: 0; }

/* --- Tight panel: minimal padding, for list containers --- */
.ppanel--tight { padding: var(--sp-2xs); }

/* --- Button row --- */
.pbtn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); }

/* --- Bar chart (billed-by-month, practice billing) --- */
.pbars {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2xs);
  height: 160px;
  padding-top: var(--sp-sm);
}
.pbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3xs); height: 100%; justify-content: flex-end; }
.pbar__fill {
  width: 100%;
  max-width: 42px;
  background: linear-gradient(180deg, var(--orange-bright), var(--orange-deep));
  border-radius: 6px 6px 0 0;
  min-height: 4px;
  transition: height 0.7s var(--ease);
}
.pbar:last-child .pbar__fill { background: linear-gradient(180deg, var(--yellow), var(--orange-bright)); }
.pbar__label { font-size: var(--fs-micro); color: var(--graphite); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .pbar__fill { transition: none; }
}

/* --- Responsive: stack the job card on small screens --- */
@media (max-width: 560px) {
  .pjob { grid-template-columns: 1fr; }
  .pjob__icon { width: 40px; height: 40px; }
  .pmsg { max-width: 92%; }
}

/* ============================================================
   Legal pages (privacy, terms): long-form prose in a readable
   measure. Reuses the Cowell palette and serif headings.
   ============================================================ */
.legal { max-width: 74ch; }
.legal__note {
  display: flex;
  gap: var(--sp-2xs);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--yellow-soft);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: #6b4d09;
  margin-bottom: var(--sp-lg);
}
.legal__note .icon { width: 1.25em; height: 1.25em; flex: none; color: #b3850f; margin-top: 1px; }
.legal__updated {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: var(--sp-lg);
}
.legal h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 600;
  margin-top: var(--sp-md);
}
.legal p, .legal li {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-soft);
}
.legal p { margin-top: var(--sp-sm); }
.legal ul {
  margin-top: var(--sp-sm);
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
}
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--orange-deep); font-weight: 600; }
.legal a:hover { text-decoration: underline; }

/* ============================================================
   Phase 2 follow-ups: orientation callout, resolved dashboard
   task rows, disabled button state.
   ============================================================ */
.portal-btn:disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

/* One-time orientation callout at the top of each portal */
.portal-intro {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  background: var(--yellow-soft);
  border: 1px solid rgba(234,88,12,0.16);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-soft);
}
.portal-intro__text { flex: 1; margin: 0; }
.portal-intro strong { color: var(--ink); font-weight: 700; }
.portal-intro__close {
  flex: none;
  width: 26px; height: 26px;
  border: none;
  background: transparent;
  color: var(--graphite);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--r-xs);
}
.portal-intro__close:hover { background: rgba(0,0,0,0.07); color: var(--ink); }
.intro-dismissed .portal-intro { display: none; }

/* Resolved dashboard "Needs your attention" row */
.ptask.is-resolved { opacity: 0.62; }
.ptask.is-resolved .ptask__icon {
  background: #eef3ee;
  border-color: #d6e4d6;
  color: #2c5530;
}

/* Mobile demo banner: defined here, after the base .demo-banner
   rule, so the static override actually wins the cascade. */
@media (max-width: 880px) {
  .demo-banner {
    position: static;
    height: auto;
    padding: 8px var(--sp-sm);
    align-items: flex-start;
  }
  .demo-banner__back { display: none; }
  .demo-banner__close { margin-top: -2px; }
}

/* ============================================================
   Phone layer
   Last block in the file so these win the cascade over the
   component rules above at equal specificity.
   ============================================================ */

/* iOS Safari zooms the whole page in when a focused form control renders
   under 16px, and it does not zoom back out on blur. Every control the
   visitor can actually type into therefore sits at exactly 16px on a
   phone. The tools.html calculators were already built this way; these
   four were the ones left behind. Width is untouched, only type size. */
@media (max-width: 880px) {
  .news-form input,
  .psearch input,
  .pcompose textarea {
    font-size: 16px;
  }
}

@media (max-width: 880px) {
  /* Touch minimums. Apple and Google both put the comfortable target at
     44px; these were the controls measuring under it. Only the minimum
     is set, so anything already larger is unchanged. */
  .btn,
  .portal-btn,
  .news-form button,
  .news-form input {
    min-height: 44px;
  }
  /* Dismiss controls were 24px and 26px squares. */
  .demo-banner__close,
  .portal-intro__close {
    min-width: 44px;
    min-height: 44px;
  }
  .ppanel__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Footer navigation, the tap-to-call number and the legal row are all
     NAVIGATION rendered as bare inline text, so their targets were 11px to
     15px tall. Padding them out costs footer height and buys a link a thumb
     can actually hit. Links inside prose are deliberately left alone: giving
     those a box would break the line rhythm of the paragraph they sit in. */
  .footer__links { gap: 0; }
  .footer__links a,
  .footer__contact a,
  .footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .notif-trigger {
    min-width: 44px;
    min-height: 44px;
  }
  .pdoc__dl {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* A document row is icon + name/meta + (badge, download). .pdoc__body is
     `flex: 1 1 0%`, so it only ever gets the space the fixed-size actions
     leave behind: on a phone that was 23px, and "2025 Form 1040" rendered
     one word per line beside a full-width badge. Allowing the row to wrap
     puts the actions on their own line only when they genuinely do not
     fit, so a short row still reads as one line. */
  .pdoc { flex-wrap: wrap; }
  .pdoc__body { min-width: 55%; }
  .pdoc__actions { margin-left: auto; }

  /* A task row has the same icon + body + fixed action shape, and squeezed
     the same way: "Upload your 1099-NEC" was breaking inside a 77px column
     next to its button. */
  .ptask { flex-wrap: wrap; }
  .ptask__body { min-width: 55%; }
  .ptask > .portal-btn { margin-left: auto; }

  /* Title on one row, identity on the next, rather than both squeezed
     until the client name breaks across three lines. */
  .portal-topbar { flex-wrap: wrap; gap: var(--sp-sm); }
  .portal-topbar__right { gap: var(--sp-sm); margin-left: auto; }
}

@media (max-width: 600px) {
  /* 0.5rem is 8px, which is below the size at which this tracked-out,
     all-caps line is legible on a phone. 0.62rem still fits the header
     beside the mark and the menu button at 360px. */
  .brand__tag { font-size: 0.62rem; letter-spacing: 0.09em; }

  /* Both panels anchor `right: 0` to their trigger, which is fine when the
     trigger sits at the right edge of a wide topbar and wrong on a phone:
     the notification panel is a fixed 340px, so hanging it off a bell that
     sits mid-bar put its left edge between 142px and 237px OFF the left of
     the screen, and body's overflow-x: hidden cut that part away. Measured
     broken on the live site at 320px and 393px, so this is not a
     consequence of the topbar wrap above.

     Making .portal-menu static hands the containing block to the topbar, so
     the panels can be pinned to BOTH screen edges and sized by the viewport
     instead of by a width that never fit a 320px phone in the first place. */
  .portal-topbar { position: relative; }
  .portal-menu { position: static; }
  .notif-dropdown,
  .user-menu {
    left: var(--sp-sm);
    right: var(--sp-sm);
    width: auto;
    top: calc(100% - var(--sp-3xs));
  }
}