/* ==========================================================================
   AlignMyTax Inc — site styles
   Brand: navy #07072E · orange #F7941D · off-white #FCFCFC
   ========================================================================== */

/* Both faces are self-hosted, so no page view calls Google.
   Licences live beside the files in assets/fonts/ (both SIL OFL).

   Pairing: Fraunces headings + Quicksand body.

   Quicksand is the VARIABLE font — one 126 KB file carrying the whole wght
   axis (300–700), which is why the `font-weight` descriptor is a RANGE. That
   gives real drawn weights at every step, including the intermediate values
   this sheet uses (550, 650). Do not swap in the static Quicksand-Regular.ttf
   on its own: every weight above 400 would go back to being synthesised.
   (This replaced Varela Round, which shipped Regular only and had no bold.) */
@font-face {
  font-family: 'Quicksand';
  src: url('../fonts/Quicksand-Variable.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* Fraunces replaced DM Serif Display as the heading face on 16 Aug 2026.

   Which file: Fraunces ships a 4-axis variable font (SOFT, WONK, opsz, wght) at
   357 KB — five times DM Serif's 72 KB, on a face that is PRELOADED and needed
   at first paint. The design only ever asks for one heading weight, so the
   static `72pt` cut at 72 KB holds the payload exactly where it was. The
   variable file is in Fraunces.zip at the project root if the SOFT or WONK axes
   are ever wanted; swapping to it means re-preloading the bigger file.

   Why the 72pt cut specifically: `opsz` is an optical-size axis, and 72pt is
   the display end of it — drawn for large settings, which is all headings are.

   Why Bold and not Regular: DM Serif Display was a single, already-heavy
   display face, so headings sat at weight 400 and needed no bolding. Fraunces
   has a real weight range and its Regular is markedly lighter than DM Serif at
   the same size — at 400 the headings would have gone visibly weedy. 700 keeps
   the heading colour on the page roughly where it was. This also matches the
   "Fraunces headings (700)" option shown on font-samples.html.

   Consequence: EVERY --font-head usage must specify font-weight 700. Only the
   700 cut is shipped, so a rule left at 400 renders the same file at its drawn
   weight and merely looks inconsistent in the source. They are all set below —
   h1-h4, .chooser-card strong, and the .person-avatar monogram fallback. */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-72pt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #07072E;
  --navy-800: #12123f;
  --navy-700: #1e1e55;
  --orange: #F7941D;
  --orange-dark: #d97b09;   /* backgrounds / hover fills only */
  --orange-text: #96530a;   /* orange used AS TEXT on light backgrounds.
                               --orange-dark only reaches ~3.05:1 on white,
                               which fails WCAG AA for body-size text;
                               this reaches ~5.8:1. */
  --orange-soft: #fff4e6;
  --off-white: #FCFCFC;

  --ink: #14142b;
  --body: #474765;
  --muted: #6b6b85;
  --line: #e3e3ec;
  --line-soft: #eeeef4;
  --surface: #ffffff;
  --surface-alt: #f6f6fa;

  --header-h: 88px;   /* header height; sticky offsets key off this */
  --wrap: 1140px;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(7, 7, 46, .06), 0 2px 8px rgba(7, 7, 46, .04);
  --shadow-md: 0 4px 12px rgba(7, 7, 46, .07), 0 12px 32px rgba(7, 7, 46, .07);
  --shadow-lg: 0 12px 28px rgba(7, 7, 46, .10), 0 28px 60px rgba(7, 7, 46, .10);

  --font-sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
              Arial, "Noto Sans", sans-serif;
  --font: 'Quicksand', var(--font-sys);             /* body + UI */
  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;  /* headings */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* --text-scale is driven by the header text-size control. Because the whole
   stylesheet sizes in rem/em, scaling this one value scales the entire page. */
:root { --text-scale: 1; }
html { font-size: calc(100% * var(--text-scale)); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration-color: rgba(247, 148, 29, .5); text-underline-offset: 3px; }
a:hover { color: var(--orange-text); }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.18;
  /* 700 is the only Fraunces cut shipped — see the @font-face note at the top
     for why headings are bold here when they were 400 under DM Serif. A touch
     of negative tracking tightens the setting. */
  letter-spacing: -.012em;
  margin: 0 0 .6em;
  font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.1vw, 3.4rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; }
ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .45em; }

/* ---------- emphasis ----------
   Quicksand has a real 700, so `font-weight:700` here is now a drawn cut
   rather than a browser smear. The shift to the darker ink colour stays:
   it was introduced to carry emphasis when there was no bold, and it still
   earns its place — Quicksand's bold is fairly gentle at body size, and the
   colour step is what makes runs like "Form 5471" read as emphasised. */
strong, b {
  font-weight: 700;
  color: var(--ink);
}
/* On dark surfaces the colour shift has to go the other way. */
.section--navy > .wrap strong, .hero strong, .page-head strong,
.profile-head strong, .aud-panel strong { color: #fff; }
.note strong { color: #4a2f04; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 2rem + 6vw, 6rem) 0; }
.section--tight { padding: clamp(2.5rem, 1.5rem + 4vw, 4rem) 0; }
.section--alt { background: var(--surface-alt); border-block: 1px solid var(--line-soft); }
.section--navy { background: var(--navy); color: rgba(255, 255, 255, .82); }
/* Only text sitting DIRECTLY on the navy goes light. Cards and notes inside a
   navy section keep their own light background, so everything inside them must
   revert to dark ink — otherwise the inherited white renders white-on-white
   and the text disappears entirely. */
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy .card,
.section--navy .note { color: var(--body); }
.section--navy .card h2,
.section--navy .card h3,
.section--navy .card h4,
.section--navy .note h2,
.section--navy .note h3 { color: var(--ink); }
.section--navy .note { color: #6b4407; }

.section-head { max-width: 46rem; margin-bottom: 2.75rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 1.06rem; color: var(--muted); margin-bottom: 0; }
.section--navy .section-head p { color: rgba(255, 255, 255, .72); }

/* The section kicker ("Core services", "US International Tax", …).
   Raised from .74rem (11.8px) to .86rem (13.8px): at the old size it read as
   fine print rather than as the label of the section, and the jump down from a
   47px h1 or a 33px h2 was too abrupt. Tracking eases off slightly as the size
   goes up — .14em was tuned for 11.8px and gets gappy at 13.8px. */
.eyebrow {
  display: inline-block;
  font-family: var(--font);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange-text);
  margin-bottom: .85rem;
}
/* On dark surfaces the eyebrow uses full-strength orange (8.5:1 on navy).
   --orange-text is tuned for light backgrounds and only reaches 3.3:1 here. */
.section--navy .eyebrow,
.hero .eyebrow,
.page-head .eyebrow,
.profile-head .eyebrow { color: var(--orange); }

.grid { display: grid; gap: 1.5rem; }
/* min(100%, Npx) keeps the track from ever exceeding the container: a bare
   minmax(300px, 1fr) forces a 300px track inside a 280px wrap on a 320px
   phone, which pushes the whole page sideways. */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); }

/* Main content + sidebar. Must be a class, not an inline style: a fixed
   two-column track has no breakpoint of its own, so on a phone the main
   column was being squeezed to a few pixels wide while the sidebar kept
   its minimum. Collapses to a single column below 860px. */
.grid--sidebar { grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr); gap: 3rem; align-items: start; }
@media (max-width: 860px) {
  .grid--sidebar { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .82rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 100px;
  font: inherit;
  font-family: var(--font);
  font-size: .97rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s, box-shadow .18s, border-color .18s, color .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* Dark ink on orange, in both states. White on --orange-dark is only 3.12:1,
   which fails AA at this text size; near-black on it reaches 5.5:1. */
.btn--primary { background: var(--orange); color: #2a1600; box-shadow: 0 4px 14px rgba(247, 148, 29, .34); }
.btn--primary:hover { background: var(--orange-dark); color: #2a1600; box-shadow: 0 8px 22px rgba(247, 148, 29, .42); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-700); color: #fff; }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy); background: #fff; color: var(--navy); }
/* Ghost buttons on ANY dark surface — .hero and .page-head are dark too but
   don't carry .section--navy, and the default navy-on-navy text was invisible.
   .45 alpha keeps the outline at ~3:1 against the navy; .3 fell to 2.6:1. */
.section--navy .btn--ghost,
.hero .btn--ghost,
.page-head .btn--ghost,
.profile-head .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.section--navy .btn--ghost:hover,
.hero .btn--ghost:hover,
.page-head .btn--ghost:hover,
.profile-head .btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn-row.center { justify-content: center; }

/* selected state for the "viewing as" switch */
.btn[data-choose][aria-pressed="true"] {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn[data-choose][aria-pressed="true"]:hover { background: var(--navy-700); color: #fff; }

/* sticky audience switch bar */
.aud-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: .9rem 0;
}
.aud-bar-inner { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.aud-bar-label { font-size: .85rem; font-weight: 650; color: var(--muted); margin-right: .2rem; }
/* The header keeps its 74px min-height at every width, so the bar sticks
   below it on phones too — top:0 here would slide it under the header. */
@media (max-width: 560px) {
  .aud-bar { padding: .75rem 0; }
  .aud-bar-inner { gap: .5rem; }
  .aud-bar-label { flex-basis: 100%; margin-bottom: .1rem; }
  .aud-bar .btn { flex: 1 1 auto; }
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(252, 252, 252, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner { display: flex; align-items: center; gap: 1.25rem; min-height: var(--header-h); }
.brand { flex-shrink: 0; display: block; line-height: 0; }
/* Uses the trimmed logo (transparent padding cropped off). The original export
   was 71% empty vertical space, so a 34px box rendered a ~10px wordmark. */
.brand img { height: 42px; width: auto; }
@media (max-width: 560px) {
  :root { --header-h: 72px; }
  .brand img { height: 34px; }
}
/* Anchor targets must clear the sticky header when jumped to. */
[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
.nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
/* :not(.btn) matters — `.nav a` outranks `.btn--primary` on specificity, so
   without it the nav CTA lost its dark ink and sat at 3.9:1 on orange. */
.nav a:not(.btn) {
  padding: .5rem .8rem;
  border-radius: 8px;
  font-family: var(--font);
  font-size: .98rem;
  font-weight: 400;
  color: var(--body);
  text-decoration: none;
  transition: color .15s, background-color .15s;
}
.nav a:not(.btn):hover { color: var(--navy); background: var(--surface-alt); }
/* Current page is marked with colour + an underline rule rather than weight.
   That began as a workaround for Varela Round's missing bold; it stays because
   a weight change here would reflow the nav and risk wrapping at the
   breakpoint. Colour + rule is the stable signal. */
.nav a:not(.btn)[aria-current="page"] {
  color: var(--navy);
  box-shadow: inset 0 -2px 0 var(--orange);
  border-radius: 4px;
}
.nav .btn { margin-left: .5rem; padding: .6rem 1.2rem; font-size: .92rem; }
/* ---------- text size control ---------- */
.textsize {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: .6rem;
  padding: 3px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 100px;
}
.textsize-btn {
  min-width: 30px; height: 30px;
  display: grid; place-items: center;
  padding: 0 .3rem;
  background: none; border: 0; border-radius: 100px;
  font-family: inherit; font-weight: 700; color: var(--body);
  line-height: 1; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.textsize-btn:hover { background: #e6e6ef; color: var(--navy); }
.textsize-btn[aria-pressed="true"] { background: var(--navy); color: #fff; }
.textsize-btn.s1 { font-size: 12px; }
.textsize-btn.s2 { font-size: 15px; }
.textsize-btn.s3 { font-size: 18px; }

/* Quicksand, like Varela Round before it, sets wider than a system sans, so
   the desktop nav needs more room than it used to. Between the breakpoint and
   ~1140px, tighten it. */
@media (min-width: 993px) and (max-width: 1140px) {
  .nav { gap: .1rem; }
  .nav a:not(.btn) { padding: .5rem .55rem; font-size: .93rem; }
  .nav .btn { padding: .55rem 1rem; font-size: .88rem; }
  .textsize { margin-left: .35rem; }
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; color: var(--navy);
}

@media (max-width: 992px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: 1rem 1.25rem 1.5rem;
    background: var(--off-white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a { padding: .75rem .6rem; font-size: 1.02rem; }
  .nav .btn { margin: .5rem 0 0; }
  .textsize {
    margin: .9rem 0 0;
    align-self: flex-start;
    padding: 4px;
  }
  .textsize-btn { min-width: 40px; height: 40px; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--navy) 0%, #0d0d3d 55%, #16164b 100%);
  color: rgba(255, 255, 255, .8);
  padding: clamp(3.5rem, 2rem + 7vw, 6.5rem) 0 clamp(3rem, 2rem + 5vw, 5rem);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero::before {
  width: 620px; height: 620px;
  top: -280px; right: -180px;
  background: radial-gradient(circle, rgba(247, 148, 29, .20), transparent 68%);
}
.hero::after {
  width: 460px; height: 460px;
  bottom: -300px; left: -160px;
  background: radial-gradient(circle, rgba(247, 148, 29, .11), transparent 70%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero-lede {
  font-size: clamp(1.05rem, .95rem + .5vw, 1.22rem);
  color: rgba(255, 255, 255, .78);
  max-width: 54ch;
  margin-bottom: 2rem;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: .55rem 1.5rem;
  margin-top: 2.25rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: .9rem; color: rgba(255, 255, 255, .62);
}
.hero-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-meta svg { flex-shrink: 0; color: var(--orange); }

/* ---------- audience chooser ---------- */
.chooser { margin: 2.4rem 0 0; }
/* Sits directly below the hero .eyebrow, so it tracks that size — leaving it
   at .76rem after the eyebrow went up made two identical-looking kickers in
   the same hero render at visibly different sizes. */
.chooser-label {
  font-size: .86rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255, 255, 255, .55);
  margin-bottom: .9rem;
}
.chooser-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr)); max-width: 46rem; }
.chooser-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 1.35rem 1.5rem;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  color: rgba(255, 255, 255, .72);
  font: inherit;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s var(--ease);
}
.chooser-card:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .34); transform: translateY(-3px); }
.chooser-card strong { display: block; font-family: var(--font-head); font-size: 1.12rem; color: #fff; margin-bottom: .3rem; font-weight: 700; }
.chooser-card span { font-size: .92rem; line-height: 1.5; display: block; }
.chooser-card[aria-pressed="true"] {
  background: rgba(247, 148, 29, .14);
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
}
.chooser-card[aria-pressed="true"]::after {
  content: "✓";
  position: absolute; top: .9rem; right: 1.1rem;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--orange); color: var(--navy);
  border-radius: 50%; font-size: .78rem; font-weight: 800;
}

/* audience-conditional content: hidden until an audience is chosen */
[data-aud] { display: none; }
body[data-audience="pro"] [data-aud="pro"],
body[data-audience="client"] [data-aud="client"] { display: block; }
body[data-audience="pro"] li[data-aud="pro"],
body[data-audience="client"] li[data-aud="client"] { display: list-item; }
body[data-audience="pro"] .grid > [data-aud="pro"],
body[data-audience="client"] .grid > [data-aud="client"] { display: block; }
[data-aud-hide] { display: block; }
body[data-audience="pro"] [data-aud-hide="pro"],
body[data-audience="client"] [data-aud-hide="client"] { display: none; }

/* Shown only while no audience has been chosen yet. */
[data-aud-default] { display: block; }
body[data-audience] [data-aud-default] { display: none; }

/* ---------- audience tracks: reorder, never hide ----------
   Both audiences' content stays on the page permanently. Choosing simply
   moves your track to the top and flags it, so a visitor who picks one
   never loses access to the other's information. */
.aud-tracks { display: flex; flex-direction: column; gap: 3.5rem; }
.aud-track { position: relative; }
body[data-audience="client"] .aud-track[data-track="client"],
body[data-audience="pro"]    .aud-track[data-track="pro"]    { order: -1; }

/* the "Your view" flag only appears on the selected track */
.track-flag { display: none; }
body[data-audience="client"] .aud-track[data-track="client"] .track-flag,
body[data-audience="pro"]    .aud-track[data-track="pro"]    .track-flag {
  display: inline-block;
  margin-left: .55rem;
  padding: .16rem .5rem;
  background: var(--orange);
  color: #2a1600;
  border-radius: 100px;
  font-size: .66rem;
  letter-spacing: .08em;
}
/* the non-selected track is separated by a rule, not dimmed —
   dimming would signal "less important" and hurt readability */
body[data-audience="client"] .aud-track[data-track="pro"],
body[data-audience="pro"]    .aud-track[data-track="client"] {
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}

.aud-panel {
  margin-top: 1.5rem;
  padding: 1.5rem 1.6rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius);
  animation: fade-up .35s var(--ease);
}
.aud-panel p { color: rgba(255, 255, 255, .82); margin-bottom: 1rem; }
.aud-panel p:last-child { margin-bottom: 0; }
.aud-panel strong { color: #fff; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d6d6e4; }
.card h3 { margin-bottom: .5rem; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card ul { padding-left: 1.1em; font-size: .96rem; }

.card-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  margin-bottom: 1.1rem;
  background: var(--orange-soft);
  color: var(--orange-text);
  border-radius: 12px;
}
.card-num {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: 1rem;
  background: var(--navy); color: #fff;
  border-radius: 50%;
  font-size: .9rem; font-weight: 700;
}

/* pill list */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.pills li {
  margin: 0;
  padding: .4rem .85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .88rem;
  font-weight: 550;
  color: var(--navy);
}

/* ---------- forms table ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 480px; }
th, td { padding: .85rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
thead th {
  background: var(--navy); color: #fff;
  font-family: var(--font);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-alt); }
td.forms { font-weight: 650; color: var(--navy); white-space: nowrap; }

/* ---------- people ---------- */
.person { display: grid; gap: 1.25rem; grid-template-columns: 68px 1fr; align-items: start; }
.person-avatar {
  width: 68px; height: 68px;
  display: grid; place-items: center;
  overflow: hidden;
  background: var(--navy); color: var(--orange);
  border-radius: 50%;
  font-family: var(--font-head);
  font-size: 1.32rem; font-weight: 700; letter-spacing: .02em;
  flex-shrink: 0;
}
/* same photo treatment as .portrait — white plate so the studio background
   doesn't meet a navy rim at the circle's anti-aliased edge */
.person-avatar.has-photo { background: #fff; }
.person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { margin-bottom: .15rem; }
.person .credential {
  font-size: .87rem; font-weight: 650; color: var(--orange-text);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .8rem;
}
.person ul { font-size: .96rem; }

/* ---------- team listing ---------- */
.team-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.team-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #d6d6e4; }
.team-card .portrait { margin-bottom: 1.35rem; }
.team-card h3 { margin-bottom: .2rem; font-size: 1.35rem; }
.team-card .credential {
  font-size: .87rem; font-weight: 650; color: var(--orange-text);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem;
}
.team-card .role { font-size: .95rem; color: var(--muted); margin-bottom: 1rem; }
.team-card .team-body { flex: 1; }
.team-card .btn-row { margin-top: 1.5rem; }

/* portrait: real photo if provided, initials monogram otherwise */
.portrait {
  width: 104px; height: 104px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy);
  color: var(--orange);
  display: grid; place-items: center;
  font-size: 2rem; font-weight: 700; letter-spacing: .02em;
  flex-shrink: 0;
}
/* Photos are pre-cropped square and face-centred, so a plain cover fit is
   correct. The white studio background needs a white plate behind it —
   otherwise the navy monogram fill shows at the anti-aliased circle edge. */
.portrait.has-photo { background: #fff; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.portrait--lg { width: 148px; height: 148px; font-size: 2.8rem; }

/* ---------- profile page ---------- */
.profile-head {
  background: linear-gradient(165deg, var(--navy) 0%, #101040 100%);
  color: rgba(255, 255, 255, .78);
  padding: clamp(2.5rem, 2rem + 4vw, 4rem) 0;
}
.profile-head h1 { color: #fff; margin-bottom: .3rem; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem); }
.profile-layout { display: grid; gap: 2rem; grid-template-columns: 148px 1fr; align-items: start; }
@media (max-width: 640px) { .profile-layout { grid-template-columns: 1fr; } }
.profile-head .portrait { border: 3px solid rgba(255, 255, 255, .18); }
.profile-credential {
  font-size: .95rem; font-weight: 650; color: var(--orange);
  letter-spacing: .04em; margin-bottom: .9rem;
}
.profile-quote {
  margin: 0 0 1.5rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--orange);
  font-size: 1.08rem;
  color: rgba(255, 255, 255, .88);
  font-style: italic;
  max-width: 46ch;
}
.profile-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* tabs */
.tabs {
  display: flex; flex-wrap: wrap; gap: .25rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.25rem;
}
.tab {
  padding: .8rem 1.25rem;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font: inherit; font-family: var(--font); font-size: 1rem; font-weight: 400;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--navy); }
.tab[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--orange); font-weight: 700; }
.tab-panel[hidden] { display: none; }

/* fact list used in credentials panel */
.facts { list-style: none; padding: 0; margin: 0; }
.facts li { margin-bottom: 1.1rem; padding-left: 1.4rem; position: relative; }
.facts li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
}
.facts .label {
  display: block; font-size: .74rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .1rem;
}

/* ---------- on-demand booking ---------- */
.booking-launch {
  padding: clamp(1.75rem, 1rem + 3vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.booking-launch h3 { margin-bottom: .5rem; }
.booking-launch p { max-width: 42ch; margin-inline: auto; color: var(--muted); font-size: .97rem; }
.booking-launch .btn-row { justify-content: center; margin-top: 1.35rem; }
.booking-launch[hidden] { display: none; }

/* ---------- scope / boundary note ---------- */
.note {
  padding: 1.35rem 1.5rem;
  background: var(--orange-soft);
  border: 1px solid #f6d9ac;
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  font-size: .96rem;
  color: #6b4407;
}
.note strong { color: #4a2f04; }
/* a button that reads as an inline link (used for audience cross-links) */
.linklike {
  display: inline;
  padding: 0; border: 0; background: none;
  font: inherit; font-weight: 700;
  color: #6b4407;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linklike:hover { color: var(--navy); }
.note p:last-child { margin-bottom: 0; }

/* ---------- contact ---------- */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: .9rem; margin-bottom: 1.35rem; align-items: flex-start; }
.contact-list svg { flex-shrink: 0; margin-top: .3rem; color: var(--orange-text); }
.contact-list .label {
  display: block; font-size: .74rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .1rem;
}
.contact-list a { font-weight: 600; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
/* principal name links through to the full profile */
.contact-name {
  display: inline-block;
  font-size: 1.05rem; font-weight: 700; color: var(--navy);
  margin-bottom: .05rem;
}
.contact-name::after { content: " →"; color: var(--orange-text); font-weight: 700; }
.contact-name:hover { color: var(--orange-text); text-decoration: underline; }
.contact-role {
  display: block; font-size: .78rem; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .4rem;
}

/* form */
.field { margin-bottom: 1.15rem; }
.field label { display: block; font-size: .9rem; font-weight: 650; color: var(--ink); margin-bottom: .4rem; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .75rem .9rem;
  font: inherit; font-size: .97rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(247, 148, 29, .18);
}
.field textarea { resize: vertical; min-height: 130px; }
.field-hint { font-size: .84rem; color: var(--muted); margin: .35rem 0 0; }

/* ---------- booking embed ---------- */
.booking-embed {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-height: 620px;
}
.booking-embed iframe { width: 100%; height: 660px; border: 0; display: block; }
.booking-fallback { padding: clamp(2rem, 1rem + 4vw, 3.5rem) 1.5rem; text-align: center; }
.booking-fallback .card-icon { margin-inline: auto; }

/* ---------- newsletter signup (Kit) ----------
   Deliberately a LIGHT surface, not a navy band. A new dark section would have
   to be added to the .section--navy / .hero / .page-head / .profile-head
   selector list in four places or its ghost buttons render navy-on-navy and its
   eyebrow drops below AA — see HANDOVER.md §5. This block appears on the blog
   index, every article and the home page, so it is the worst possible place to
   take that risk. Light surface, orange rule, no new dark-surface rules. */
.newsletter {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 1rem + 2.4vw, 2.6rem);
}
.newsletter h2, .newsletter h3 { margin-bottom: .4rem; }
.newsletter .newsletter-lede { color: var(--body); max-width: 46rem; }

/* min() so the field can never demand more width than its container — a bare
   minmax(260px, …) pushes the page sideways on a 320px phone (HANDOVER.md §5). */
.newsletter-form {
  display: grid;
  grid-template-columns: minmax(min(100%, 260px), 1fr) auto;
  gap: .7rem;
  align-items: start;
  margin-top: 1.4rem;
}
@media (max-width: 560px) {
  .newsletter-form { grid-template-columns: 1fr; }
}
.newsletter-form input[type="email"] {
  width: 100%;
  padding: .8rem .95rem;
  font: inherit; font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(247, 148, 29, .18);
}
.newsletter-form .btn { white-space: nowrap; }

/* Spam honeypot. Must be reachable by nothing: hidden from sight, from screen
   readers (aria-hidden), and from keyboard order (tabindex=-1 on the input).
   display:none is avoided on purpose — some bots skip those and it would defeat
   the trap. */
.newsletter-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
.newsletter-note { font-size: .86rem; color: var(--muted); margin: .9rem 0 0; }
.newsletter-status { margin: .9rem 0 0; font-size: .95rem; }
.newsletter-status:empty { margin: 0; }
.newsletter-status[data-state="ok"] { color: var(--ink); font-weight: 650; }
/* #a33 on --surface-alt is ~5.9:1 — --orange-text would read as success, and a
   lighter red fails AA on this background. */
.newsletter-status[data-state="error"] { color: #a3312a; font-weight: 650; }
.newsletter[data-state="done"] .newsletter-form,
.newsletter[data-state="done"] .newsletter-note { display: none; }

/* ---------- blog ---------- */
.post-list { display: grid; gap: 1.25rem; }
.post-card {
  display: block;
  padding: 1.6rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #d6d6e4; }
.post-meta { font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: .6rem; }
.tag {
  display: inline-block; padding: .18rem .6rem;
  background: var(--orange-soft); color: var(--orange-text);
  border-radius: 100px; font-size: .74rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.post-card h3 { color: var(--ink); margin-bottom: .4rem; }
.post-card:hover h3 { color: var(--navy); }
.post-card p { color: var(--body); font-size: .97rem; margin: 0; }

.prose { max-width: 44rem; }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.9rem; }
.prose > :first-child { margin-top: 0; }
.prose blockquote {
  margin: 1.8rem 0;
  padding: .3rem 0 .3rem 1.35rem;
  border-left: 3px solid var(--orange);
  color: var(--ink);
  font-size: 1.06rem;
}

/* ---------- cta band ---------- */
.cta-band { text-align: center; }
.cta-band p { max-width: 44rem; margin-inline: auto; font-size: 1.06rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .6); padding: 3.5rem 0 2rem; font-size: .93rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.5fr 1fr 1fr; margin-bottom: 2.5rem; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
/* Below ~560px two footer columns squeeze to ~97px and the links wrap badly. */
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }
/* Trimmed asset, sized to read clearly against the navy footer. */
.footer-brand img { height: 52px; width: auto; margin-bottom: 1.25rem; }
@media (max-width: 560px) { .footer-brand img { height: 44px; } }
.footer-brand p { max-width: 34ch; margin-bottom: 0; }
/* Rendered small, but marked up as h2 so heading levels never skip. */
.site-footer h4,
.footer-heading {
  color: #fff; font-family: var(--font);
  font-size: .76rem; font-weight: 700; line-height: 1.3;
  letter-spacing: .13em; text-transform: uppercase; margin: 0 0 1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .6rem; }
.site-footer a { color: rgba(255, 255, 255, .68); text-decoration: none; }
.site-footer a:hover { color: var(--orange); }
.footer-bottom {
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  justify-content: space-between;
  /* .45 alpha landed at 4.38:1 — just under AA for this size. .6 gives 7.2:1. */
  font-size: .86rem; color: rgba(255, 255, 255, .6);
}
.footer-bottom p { margin: 0; }
.disclaimer { max-width: 62ch; font-size: .82rem; line-height: 1.6; color: rgba(255, 255, 255, .6); }

/* booking escape-hatch link under the calendar embed */
.booking-escape { margin: .9rem 0 0; font-size: .9rem; color: var(--muted); }

/* ---------- utilities ---------- */
.center { text-align: center; }
.lede { font-size: 1.1rem; color: var(--muted); }
.mb-0 { margin-bottom: 0; }
.skip-link {
  position: absolute; left: -9999px;
  padding: .7rem 1.2rem; background: var(--navy); color: #fff;
  border-radius: 0 0 8px 0; z-index: 100; text-decoration: none;
}
.skip-link:focus { left: 0; top: 0; color: #fff; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.page-head {
  background: linear-gradient(165deg, var(--navy) 0%, #101040 100%);
  color: rgba(255, 255, 255, .78);
  padding: clamp(2.75rem, 2rem + 4vw, 4.5rem) 0;
}
.page-head h1 { color: #fff; margin-bottom: .5rem; }
.page-head p { font-size: 1.08rem; color: rgba(255, 255, 255, .74); max-width: 52ch; margin-bottom: 0; }

.breadcrumb { font-size: .87rem; color: rgba(255, 255, 255, .5); margin-bottom: .9rem; }
.breadcrumb a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.breadcrumb a:hover { color: var(--orange); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .card--hover:hover, .post-card:hover, .chooser-card:hover { transform: none; }
}