/* ============================================================================
   TwelveFoxes — authored styles (on top of the copied Resonance tokens).
   Built incrementally per the handoff rebuild order. This file currently covers:
   STEP 2 — header, spacer, nav, buttons, logo mark, mobile menu, smooth scroll.
   ============================================================================ */

html { scroll-behavior: smooth; }

/* Focus is ALWAYS indigo — reads as "system", never "action" (handoff rule). */
:focus-visible {
  outline: 3px solid var(--indigo-200);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Icon (Lucide via inline <use> sprite) ---------- */
.tf-icon {
  width: 20px; height: 20px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Buttons (mirrors DS Button.jsx) ---------- */
.tf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: var(--weight-semibold);
  line-height: 1; letter-spacing: -0.01em; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-back),
              box-shadow var(--dur-base) var(--ease-out-soft);
}
.tf-btn:hover { text-decoration: none; }
.tf-btn--md { height: 44px; min-height: 44px; padding: 0 20px; font-size: 15px; border-radius: var(--radius-md); }
.tf-btn--lg { height: 54px; min-height: 54px; padding: 0 28px; font-size: 17px; border-radius: var(--radius-md); }
.tf-btn--pill { border-radius: var(--radius-pill); }

.tf-btn--primary { background: var(--accent-gradient); color: var(--white); }
.tf-btn--primary:hover {
  background: linear-gradient(135deg, #0A4491 0%, #5A8FCB 100%);
  transform: translateY(-1px);
  box-shadow: var(--shadow-indigo);
}
.tf-btn--primary:active {
  background: var(--indigo-600);
  transform: scale(.97);
  box-shadow: none;
}

/* ---------- Icon button (mirrors DS IconButton.jsx, outline/lg) ---------- */
.tf-iconbtn {
  width: 48px; height: 48px; flex: 0 0 auto; margin-left: auto;
  display: none;                       /* shown < 900px via media query */
  align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--text-strong);
  border: 1px solid var(--border-subtle); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-soft),
              transform var(--dur-base) var(--ease-out-back);
}
.tf-iconbtn:hover { background: var(--paper-dim); }
.tf-iconbtn:active { transform: scale(.92); }

/* ---------- Header ---------- */
.tf-header {
  position: fixed; top: 0; left: 0; right: 0; width: 100%;
  z-index: 100;
  background: rgba(56, 6, 15, .94);   /* opaque, NOT translucent-blur — fights band-focus blur */
  border-bottom: 1px solid var(--border-subtle);
  transition: transform var(--dur-base) var(--ease-out-soft);
}
.tf-header__row {
  max-width: var(--container-max); margin: 0 auto;
  padding: 10px clamp(20px, 4vw, 48px);
  display: flex; align-items: center;
  gap: clamp(12px, 2vw, 32px);
  flex-wrap: wrap; row-gap: 6px;
}

/* Logo: four-bar mark (final) + wordmark. Also in favicon.svg and both tools/ scripts. */
.tf-logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; text-decoration: none; }
.tf-logo:hover { text-decoration: none; }
.tf-logo__mark { display: flex; align-items: center; gap: 3.4px; height: 24px; }
.tf-logo__mark i { display: block; width: 3px; border-radius: var(--radius-pill); }
.tf-logo__mark i:nth-child(1) { height: 12px; background: var(--coral-200); }
.tf-logo__mark i:nth-child(2) { height: 24px; background: var(--white); }
.tf-logo__mark i:nth-child(3) { height: 16px; background: var(--indigo-200); }
.tf-logo__mark i:nth-child(4) { height: 8px;  background: var(--indigo-300); }
.tf-logo__word {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: -0.03em; color: var(--white); line-height: 1;
}

/* Nav */
.tf-nav { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 28px); flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.tf-nav a {
  display: flex; align-items: center; min-height: 44px;
  font-family: var(--font-body); font-size: clamp(13px, 1.1vw, 15px); font-weight: 500;
  color: var(--text-body); text-decoration: none; white-space: nowrap;
}
.tf-nav a:hover { color: var(--white); text-decoration: none; }

/* Mobile menu panel */
.tf-menu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(56, 6, 15, .98);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  padding: 4px clamp(20px, 4vw, 48px) 16px;
}
.tf-menu[hidden] { display: none; }
.tf-menu a {
  display: flex; align-items: center; min-height: 56px;
  font-family: var(--font-body); font-size: 17px; font-weight: 500;
  color: var(--text-strong); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.tf-menu a:hover { color: var(--white); text-decoration: none; }
.tf-menu__cta {
  min-height: 56px; margin-top: 16px; justify-content: center;
  font-weight: 600; color: var(--white);
  border-radius: var(--radius-pill); background: var(--accent-gradient);
  border-bottom: 0;
}

/* Spacer — height set by header.js to the header's measured height */
.tf-spacer { width: 100%; }

/* ---------- Breakpoint: single 900px switch ---------- */
@media (max-width: 899.98px) {
  .tf-nav,
  .tf-header__cta { display: none; }
  .tf-iconbtn { display: inline-flex; }
}

/* ============================================================================
   STEP 3 — Bands & the wave seam
   Each band from 02 down overlaps the previous by 56px and clips its own
   background with a wave-shaped top edge; the previous band's colour shows
   through above the wave, and a 2px stroked wave line is drawn on the seam.
   ([data-band] min-height:60vh, [data-band-inner] blur, [data-band-content]
   scale/centering all come from tokens/band-focus.css.)
   ============================================================================ */

.tf-band { position: relative; z-index: var(--z, 1); }
.tf-band + .tf-band { margin-top: -56px; }   /* 56px overlap from band 02 down */

/* Seam: 56px-tall clipped strip holding the stroked wave line, over the seam. */
.tf-band__seam,
.tf-footer .tf-band__seam {
  position: absolute; top: 0; left: 0; width: 100%; height: 56px;
  overflow: hidden; z-index: 3; pointer-events: none;
}
.tf-band__seam svg { position: absolute; top: 0; left: 0; }

/* Band background layer. --wave adds the clipped wave top edge + clearance. */
.tf-band__bg { min-height: inherit; }
.tf-band__bg--wave {
  padding-top: 56px;
  clip-path: url(#tf-wave-clip);       /* userSpaceOnUse: constant wavelength */
}

/* Cherry / deep grounds (default light-on-dark tokens). */
.tf-bg-hero  { background-image: var(--hero-glow), var(--hero-gradient); }
.tf-bg-brand { background-image: var(--hero-glow), var(--brand-gradient); }
.tf-bg-deep  { background-image: var(--hero-glow), var(--brand-gradient-deep); }

/* Light-band retint — descendants read dark-on-light automatically.
   Exact block from the handoff; reused on bands 02 and 04. */
.tf-band--light {
  --text-strong: #33060F;
  --text-body: rgba(51, 6, 15, .80);
  --text-muted: rgba(51, 6, 15, .58);
  --ink: #33060F;
  --surface-card: rgba(255, 255, 253, .55);
  --surface-sunken: rgba(51, 6, 15, .06);
  --surface-accent-soft: rgba(94, 11, 27, .12);
  --surface-ai-soft: rgba(0, 47, 114, .12);
  --paper-dim: rgba(51, 6, 15, .08);
  --line: rgba(51, 6, 15, .16);
  --border-subtle: rgba(51, 6, 15, .16);
  --border-strong: rgba(51, 6, 15, .32);
  --text-accent: #5E0B1B;
  --text-ai: #002F72;
  --coral-200: #5E0B1B;
  --indigo-200: #002F72;
  background: var(--wave-gradient-diag);
}

/* Anchored bands clear the fixed header on jump. */
#individuals, #business, #schools, #contact { scroll-margin-top: 72px; }

/* ---------- Band content container ---------- */
.tf-container {
  width: min(100%, max(340px, 60vw));
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 32px);
}
.tf-container--hero    { padding-block: clamp(56px, 7vw, 96px); }
.tf-container--narrow  { max-width: var(--container-narrow); width: 100%; }

/* ---------- Headings (per-band sizes tuned in step 4) ---------- */
.tf-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 3.7vw, 48px); line-height: 1.1;
  letter-spacing: -0.03em; margin: 0; text-wrap: pretty;
}
.tf-h2 {
  font-weight: 700; letter-spacing: -0.03em; margin: 0; text-wrap: pretty;
  font-size: clamp(26px, 3vw, 40px); line-height: 1.12;
}

/* ---------- Footer (flat indigo, wave seam like the bands) ---------- */
.tf-footer { position: relative; z-index: 7; margin-top: -56px; }
.tf-footer__bg { background: #002F72; }
.tf-footer__row {
  max-width: var(--container-max); margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) clamp(20px, 4vw, 48px);
  display: flex; flex-wrap: wrap; gap: 32px;
  justify-content: space-between; align-items: flex-start;
}
.tf-footer__brand { display: flex; flex-direction: column; gap: 12px; }
.tf-footer__tagline { margin: 0; font-size: 15px; color: rgba(255, 255, 253, .72); }

/* ============================================================================
   STEP 4 — Content: grids, copy columns, cards, tags, frames, waveform, footer
   ============================================================================ */

/* ---------- Two-column bands (hero, schools) — organic auto-fit collapse ---------- */
.tf-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min, 340px)), 1fr));
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

/* Copy column: vertical rhythm via gap. */
.tf-copy { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.tf-copy--tight   { gap: clamp(14px, 2vw, 22px); }   /* individuals */
.tf-copy--schools { gap: 16px; }

.tf-btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.tf-lead { font-size: var(--text-lead); line-height: 1.55; color: var(--text-body); max-width: 54ch; margin: 0; text-wrap: pretty; }
.tf-body { font-size: var(--text-body-lg); line-height: 1.6; color: var(--text-body); margin: 0; text-wrap: pretty; }

/* Per-band heading sizes (each headline tuned to its own measure). */
.tf-h2--how      { font-size: clamp(26px, 3vw, 38px);  line-height: 1.14; max-width: 26ch; }
.tf-h2--business { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; }
.tf-h2--schools  { font-size: clamp(26px, 3vw, 38px);  line-height: 1.12; }
.tf-h2--contact  { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.06; }

/* ---------- Individuals: photo left when 2-up, below when stacked ----------
   Container query so the order flip matches the column count exactly. */
.tf-band--indiv .tf-container { container-type: inline-size; }
.tf-indiv-grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
@container (min-width: 730px) {
  .tf-indiv-grid { grid-template-columns: 1fr 1fr; }
  .tf-indiv-photo { order: -1; }
}

/* ---------- Heading blocks (how, business) ---------- */
.tf-headblock { display: flex; flex-direction: column; gap: 14px; }
.tf-headblock--how      { margin-bottom: clamp(32px, 4vw, 56px); }
.tf-headblock--business { margin-bottom: clamp(28px, 3vw, 44px); max-width: 60ch; }

.tf-container--how       { padding-block: clamp(56px, 7vw, 104px); }
.tf-container--business  { padding-block: clamp(48px, 6vw, 96px); }

/* ---------- Card grids (single row on wide desktop) ---------- */
.tf-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min, 168px)), 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  align-items: stretch;
}
.tf-band--business .tf-cards { gap: clamp(12px, 1.4vw, 24px); }

/* ---------- Card (mirrors DS Card.jsx) ---------- */
.tf-card {
  position: relative; overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  color: var(--text-body);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out-back), box-shadow var(--dur-base) var(--ease-out-soft);
}
.tf-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tf-card--accent::before {   /* 3px wave-gradient rule flush along the top edge */
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--wave-gradient);
}
.tf-card h3 { font-size: var(--text-h3); margin: 16px 0 8px; color: var(--text-strong); }
.tf-card p  { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-body); }

.tf-card__head { display: block; }
.tf-card__tile {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: grid; place-items: center;
}
.tf-card__tile--coral  { background: var(--surface-accent-soft); color: var(--coral-200); }
.tf-card__tile--indigo { background: var(--surface-ai-soft);     color: var(--indigo-200); }

/* Schools cards: horizontal head at all widths. */
.tf-card--row { display: flex; gap: 16px; align-items: flex-start; }
.tf-card--row .tf-card__tile { flex: 0 0 auto; }
.tf-card--row h3 { margin: 0 0 8px; }

.tf-card-col { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 20px); }

/* Mobile card head: icon inline with title (~-35% card height). */
@media (max-width: 899.98px) {
  .tf-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
  .tf-card__head h3 { margin: 0; }
}

/* ---------- Language tags (mirrors DS Tag.jsx) ---------- */
.tf-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tf-tag {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--text-strong);
  border: 1px solid var(--border-subtle);
  font-size: 13px; font-weight: var(--weight-medium);
  transition: background var(--dur-fast) var(--ease-out-soft);
}
.tf-tag:hover { background: var(--paper-dim); }

/* ---------- Framed photo panels (thick frame = 5px, the width IS the signal) ---------- */
.tf-frame { border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-inverse); }
.tf-frame--photo       { aspect-ratio: 3/4; border: 5px solid var(--white); }             /* dark bands */
.tf-frame--photo-light { aspect-ratio: 3/4; border: 1px solid var(--border-subtle); }     /* light band: 1px */
.tf-frame--wide {
  width: 100%; height: clamp(267px, 29.33vw, 533px);   /* desktop: +1/3 over the handoff 200/22vw/400 */
  border-radius: var(--radius-lg); overflow: hidden;
  border: 5px solid var(--white); background: var(--surface-inverse);   /* dark photo → 5px reads on light */
  margin-top: clamp(16px, 2vw, 24px);
}
/* Mobile keeps the original height. */
@media (max-width: 899.98px) { .tf-frame--wide { height: clamp(200px, 22vw, 400px); } }
.tf-frame img, .tf-frame--wide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Contact ---------- */
.tf-container--narrow { padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 48px); }
.tf-contact { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.tf-waveform { height: 56px; gap: 6px; }   /* contact override of .rs-waveform (44px/5px) */

/* ---------- Footer link columns ---------- */
.tf-footer__cols { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 64px); }
.tf-footer__col  { display: flex; flex-direction: column; gap: 10px; }
.tf-footer__eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: lowercase; color: rgba(255, 255, 253, .58);
}
.tf-footer a { color: rgba(255, 255, 253, .80); font-size: 14px; text-decoration: none; }
.tf-footer a:hover { color: var(--white); text-decoration: none; }
.tf-footer__email { color: var(--white); }
.tf-footer__copy  { font-size: 13px; color: rgba(255, 255, 253, .58); }

/* ---------- Legal / prose pages (privacy-policy.html) ----------
   Reuses .tf-band--light's token retint (dark ink on light ground) but replaces
   its diagonal wave with a calm paper wash — a full wave gradient over a page
   this tall would be unreadable. No bands, no JS. */
.tf-band--light.tf-legal { background: linear-gradient(180deg, #FFFFFD 0%, #FBEFEF 100%); }
.tf-legal { min-height: 100vh; }

.tf-legal__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: var(--container-max); margin: 0 auto;
  padding: 20px clamp(20px, 4vw, 48px);
}
.tf-legal__bar .tf-logo__word { color: var(--text-strong); }
.tf-legal__bar .tf-logo__mark i:nth-child(1) { background: #B36F6F; }
.tf-legal__bar .tf-logo__mark i:nth-child(2) { background: #5E0B1B; }
.tf-legal__back { font-size: 14px; color: var(--text-ai); }

.tf-prose {
  max-width: var(--container-narrow); margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 32px) clamp(64px, 8vw, 104px);
  color: var(--text-body); font-size: 16px; line-height: 1.65;
}
.tf-prose h1 { margin-bottom: 8px; }
.tf-prose h2 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(20px, 2.2vw, 25px); line-height: 1.2;
  color: var(--text-strong); margin: clamp(36px, 4vw, 52px) 0 12px;
}
.tf-prose h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--text-strong); margin: 28px 0 8px;
}
.tf-prose p, .tf-prose ul { margin: 0 0 14px; }
.tf-prose ul { padding-left: 22px; }
.tf-prose li { margin-bottom: 6px; }
.tf-prose li::marker { color: var(--text-muted); }
.tf-prose strong { color: var(--text-strong); font-weight: var(--weight-semibold); }
.tf-prose a { color: var(--text-ai); text-decoration: underline; text-underline-offset: 3px; }
.tf-prose__updated {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--text-muted); margin-bottom: clamp(28px, 4vw, 40px);
}
.tf-legal__foot {
  border-top: 1px solid var(--line);
  max-width: var(--container-narrow); margin: 0 auto;
  padding: 24px clamp(20px, 4vw, 32px) clamp(40px, 5vw, 64px);
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: 13px; color: var(--text-muted);
}
.tf-legal__foot a { color: var(--text-ai); }

/* ---------- 404 (404.html only — no bands, no JS, no seam) ---------- */
.tf-404 {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(28px, 4vw, 44px); text-align: center;
}
/* Own width holder: .tf-container--narrow carries the contact band's 120px padding. */
.tf-404__body { width: 100%; max-width: var(--container-narrow); padding-inline: clamp(20px, 4vw, 32px); }
.tf-404__links { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; }
.tf-404__links a { color: rgba(255, 255, 253, .78); font-size: 14px; }
.tf-404__links a:hover { color: var(--white); }