/* ==========================================================================
   KOR Consulting — Design System
   Version: 1.5
   Date: 2026-08-21
   Changelog: 1.5 (2026-08-21) — Primary CTA gold: #8A6A00/light text →
   #D4AF37/navy text (Ori pick A2, 7.1:1). New tokens --gold-cta (#D4AF37)
   and --gold-cta-hover (#C09B23) replace --gold-deep/--gold-deep-hover on
   .btn-primary and the .bg-navy .btn-primary override; --gold-deep and
   --gold-deep-hover are retired (kept only so nothing else that referenced
   them breaks) — do not use for new work. --gold (#C9A227) is unchanged,
   accent/badge use only.
   1.4 (2026-08-21) — HE-2: .lang-switch header link (reuses
   .nav-link sizing, adds a subtle leading separator via logical
   border/padding/margin so it mirrors correctly on LTR and RTL pages
   without a kor-rtl.css override) for the EN/HE language switcher shipped
   on all 12 site pages.
   1.3 (2026-08-21) — Wave 3: FAQ items converted to native
   <details>/<summary> accordions (CSS-drawn chevron, transform-only
   rotation, reduced-motion gated); 3-tier micro-label system introduced
   (.eyebrow / .label-card / .label-meta), with .step-label, .stage-rail-label,
   .callout-label, .detail-label, .step-part-label, and .footer-col h4
   aliased to the new tiers via grouped selectors so existing markup keeps
   working unchanged; compact .footer-trust badge row for the footer brand
   block.
   1.2 (2026-08-21) — Wave 2: vertical stage-rail timeline
   (numbered-icon nodes + continuous connector line) for staged frameworks,
   compact horizontal mini-stage-diagram teaser, credibility strip band,
   reveal-stagger extended to 5 steps (was capped at 3, undershot the
   4-card guardrails grid and the new 5-node rail).
   1.1 (2026-08-21) — Wave 1: card/ladder-step hover state, nav-link
   and footer-link touch targets, mobile-nav flex-item fix, logo wordmark +
   gap, ladder-arrow grid support, .req AA fix (gold-dark -> accent-purple).
   Source of truth (spec): ../KOR-DESIGN-SYSTEM-CANONICAL.md — do not invent,
   adjust, or "improve" token values here without a new dated decision there.
   Extracted from: ../website/index.html and ../website/contact.html
   (shared <style> block), generalized into a standalone, linkable stylesheet.

   RULE: gold (--gold, #C9A227) is accent/fill-only — never a text color on a
   light background, at any size. Buttons use --gold-cta (#D4AF37) fill with
   --ink (#16283E) navy text, which clears AA at 7.1:1. See CANONICAL.md §2.2
   and the "CTA revision 2026-08-21" note in §5.1. (Supersedes the prior
   --gold-deep / #FAF9FB-text pair from the 2026-08-17 revision.)

   Sections:
     1. Design tokens (:root)
     2. Base / reset + typography
     3. Layout helpers
     4. Components (buttons, cards, badges, ladder, stat callout, FAQ,
        form fields, header/nav, footer, stage rail, mini stage diagram,
        credibility strip)
     5. Motion (.reveal system)
     6. Accessibility (focus-visible, reduced-motion)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --bg: #FAF9FB;
  --bg-tint: #F3F0F8;
  --border: #E8DDEE;
  --border-strong: #D8CFE8;
  --ink: #16283E;
  --muted: #736A7C;
  --accent-purple: #7A4FA3;
  --teal: #1B8F8A;
  --teal-dark: #0E6B66;
  --gold: #C9A227;
  --gold-hover: #B8941F;
  --gold-dark: #B8860B;
  --gold-tint: #FDF3DF;
  --gold-cta: #D4AF37;
  --gold-cta-hover: #C09B23;
  /* retired 2026-08-21 (Ori: brighter CTA gold, navy text) — do not use for new work */
  --gold-deep: #8A6A00;
  --gold-deep-hover: #6F5500;

  /* Radius */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-cta: 0 2px 6px rgba(22, 40, 62, 0.18);
  --shadow-cta-hover: 0 4px 10px rgba(22, 40, 62, 0.24);

  /* Type scale — fixed ratio 1.25 from a 16px base */
  --fs-sm: 0.8rem;
  --fs-base: 1rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.563rem;
  --fs-xl: 1.953rem;
  --fs-2xl: 2.441rem;
}


/* --------------------------------------------------------------------------
   2. BASE / RESET + TYPOGRAPHY
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 120px; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: var(--ink); font-weight: 800; margin: 0 0 0.6em; }
h1 { font-size: clamp(var(--fs-xl), 4.5vw, var(--fs-2xl)); line-height: 1.15; letter-spacing: -0.01em; }
h2 { font-size: clamp(var(--fs-lg), 3vw, var(--fs-xl)); line-height: 1.15; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-md); font-weight: 700; line-height: 1.3; }
p { margin: 0 0 1em; }

/* Eyebrow / section label — Tier 1 of the 3-tier micro-label system.
   Tier 2 (.label-card) and Tier 3 (.label-meta) are defined in §4 Components,
   grouped with the older class names they replace. See that block for the
   full tier writeup. */
.eyebrow {
  color: var(--accent-purple);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.9em;
}

/* Lead paragraph */
.lead { font-size: 1.125rem; color: var(--ink); max-width: 68ch; }

/* Muted / secondary text */
.muted-text { color: var(--muted); font-size: 15px; }

/* Prose: opt-in 72ch reading-width cap. Apply to a wrapping container
   (e.g. <div class="prose">) rather than relying on a page-layout class —
   a generic ".section-inner p" rule does not belong in a shared library. */
.prose p { max-width: 72ch; }


/* --------------------------------------------------------------------------
   3. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.section-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section.tight { padding: 64px 0; }

.bg-tint { background: var(--bg-tint); }

.bg-navy { background: var(--ink); color: #E9EDF5; }
.bg-navy h2, .bg-navy h3 { color: #FFFFFF; }
.bg-navy p { color: #C7D0DC; }
.bg-navy a { color: #8FD9D3; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-3-ladder { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 20px; margin: 32px 0; }

/* Batch 1-3: 4-card grid (Home "Who I work with" section) */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .grid-3, .grid-3-ladder { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
}

/* Centered final-CTA layout modifier */
.final-cta { text-align: center; }
.final-cta .section-inner { max-width: 720px; }

/* Two-column split layout (generalized from website's page-scoped
   ".contact-grid" — same 1.3fr/1fr pattern, renamed for reuse beyond the
   contact page, e.g. any form-plus-sidebar layout). */
.split-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) {
  .split-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .section { padding: 60px 0; }
}


/* --------------------------------------------------------------------------
   4. COMPONENTS
   -------------------------------------------------------------------------- */

/* --- Buttons ------------------------------------------------------------
   Five states: default, hover, focus-visible, active, is-loading (spinner).
   CTA fill is --gold-cta with --ink navy text (AA 7.1:1) — see header rule. */
.btn {
  display: inline-block;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  border-radius: var(--radius-sm);
}
.btn-primary {
  background: var(--gold-cta);
  color: var(--ink);
  padding: 14px 32px;
  box-shadow: var(--shadow-cta);
  transition: transform 200ms ease-out, background-color 200ms ease-out;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--gold-cta-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
  text-decoration: none;
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
}
.btn-primary.is-loading {
  pointer-events: none;
  opacity: 0.7;
}
.btn-primary.is-loading::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 10px;
  vertical-align: -3px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 600ms linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}
.btn-secondary {
  background: transparent;
  color: var(--accent-purple);
  border: 1px solid var(--border-strong);
  padding: 13px 31px;
  transition: border-color 200ms ease-out, color 200ms ease-out;
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  border-color: var(--accent-purple);
  text-decoration: none;
}
.btn-sm { padding: 10px 20px; font-size: 0.9rem; }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color 200ms ease-out, transform 200ms ease-out;
}
.card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.card h3 { margin-bottom: 0.5em; }
.card p { font-size: 0.98rem; color: var(--ink); }
.card-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-tint);
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
}
.card-icon svg { width: 24px; height: 24px; }
.card-link { font-weight: 700; font-size: 0.92rem; color: var(--teal-dark); display: inline-flex; align-items: center; gap: 6px; }

/* --- Badges ----------------------------------------------------------------
   Core accent badge (website's .badge, purple-on-tint chip). */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid;
  white-space: nowrap;
  background: var(--bg-tint);
  color: var(--accent-purple);
  border-color: var(--border-strong);
}
.badge-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 0; }

/* Status badge sub-system (CANONICAL.md §2.3/§5.3 — carried forward from
   AI-Tool-Selection-Governance-Map_A4.html, not currently used on the
   website pages but part of the canonical spec for future status/regulatory
   chip UI). Do not repurpose --accent-purple or --gold as status colors. */
.badge-critical { background:#fef2f2; color:#b91c1c; border-color:#fca5a5; }
.badge-warning  { background:#fffbeb; color:#b45309; border-color:#fcd34d; }
.badge-success  { background:#d1fae5; color:#047857; border-color:#a7f3d0; }
.badge-neutral  { background:#e8ddee; color:#32203c; border-color:transparent; }

/* --- Micro-label system (3-tier) --------------------------------------------
   Tier 1: .eyebrow (§2) — section-level, 13px purple, unchanged.
   Tier 2: .label-card — card/component-level micro-label, 12px 700 0.1em
     uppercase purple. Canonical replacement for .step-label,
     .stage-rail-label, and .callout-label — those three names are grouped
     into this rule as aliases, so existing page markup keeps working without
     a rename. Each aliased selector keeps its own margin/display below,
     since spacing is tuned to its own layout context; only the shared visual
     spec (color/weight/size/letter-spacing/case) is consolidated.
   Tier 3: .label-meta — muted meta micro-label, 12px 700 0.08em uppercase
     muted. Canonical replacement for .detail-label, .step-part-label, and
     .footer-col h4 styling — same grouped-alias approach. Note this changes
     .step-part-label from teal-dark to muted (deliberate consolidation, was
     the one outlier not already muted) and nudges .detail-label from 11.5px
     to 12px and .footer-col h4 from 13px to 12px. */
.label-card,
.step-label,
.stage-rail-label,
.callout-label {
  color: var(--accent-purple);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.label-card { margin-bottom: 0.5em; }
.step-label { margin-bottom: 0.5em; }
.stage-rail-label { margin-bottom: 0.5em; }
.callout-label { display: block; margin-bottom: 10px; }

.label-meta,
.detail-label,
.step-part-label,
.footer-col h4 {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.label-meta { margin-bottom: 0.35em; }
.detail-label { margin-bottom: 0.35em; }
.step-part-label { margin-bottom: 0.3em; }
.footer-col h4 { margin: 0 0 12px; }

/* --- Ladder steps ----------------------------------------------------------- */
.ladder-step {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px;
  position: relative;
  transition: border-color 200ms ease-out, transform 200ms ease-out;
}
.ladder-step:hover { border-color: var(--border-strong); transform: translateY(-2px); }
/* .step-label styling lives in the Micro-label system block above (Tier 2
   alias) — this scoped selector only ever needed the bare class anyway. */
.ladder-step h3 { font-size: 1.05rem; margin-bottom: 0.4em; }
.ladder-step p { font-size: 0.92rem; color: var(--muted); margin: 0; }
.ladder-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--teal-dark); font-weight: 700; font-size: 1.2rem;
}
/* Stacked ladder (<=860px): arrow points down between cards. Placed after the
   base rule on purpose: an earlier media-query hide lost the cascade to it. */
@media (max-width: 860px) {
  .ladder-arrow { transform: rotate(90deg); line-height: 1; padding: 0; }
}


/* --- Callout (gold-tint aside, generalized from page-local copies, Batch 1-3 2026-09-05) --- */
.callout {
  background: var(--gold-tint);
  border-left: 3px solid var(--gold-dark);
  border-radius: var(--radius);
  padding: 24px 28px;
  color: var(--ink);
  margin-bottom: 24px;
}
.callout h3 { margin: 0 0 0.4em; }
.callout p { margin: 0; font-size: 1rem; }
.callout p + p { margin-top: 0.8em; }

/* --- Stat callout ------------------------------------------------------------- */
.stat-callout {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.stat-number {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--gold-dark);
  line-height: 1;
  white-space: nowrap;
}
.stat-text { font-size: 0.95rem; color: var(--ink); margin: 0; }

@media (max-width: 480px) {
  .stat-callout { flex-direction: column; text-align: center; }
}

/* --- FAQ item (native <details>/<summary> accordion) ------------------------
   Semantics, keyboard operation, and AT behavior come from the native
   <details>/<summary> elements — CSS only styles the row, draws the chevron,
   and adds open-state answer spacing. Also usable as a plain static block
   (h3 + p, no <details>) for non-interactive contexts; that markup still
   gets the border/padding/typography below, just no chevron or summary row. */
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}
.faq-item:first-child { padding-top: 0; }
.faq-item h3 { font-size: 1.05rem; margin-bottom: 0.5em; }
.faq-item p { font-size: 0.97rem; color: var(--ink); margin: 0; }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary h3 { margin: 0; }
.faq-item[open] summary { margin-bottom: 0; }
.faq-item[open] p { padding-top: 14px; }

.faq-chevron {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--accent-purple);
  border-bottom: 2px solid var(--accent-purple);
  transform: rotate(45deg);
  transition: transform 200ms ease-out;
}
.faq-item[open] .faq-chevron { transform: rotate(225deg); }

@media (prefers-reduced-motion: reduce) {
  .faq-chevron { transition: none !important; }
}

/* --- Stage rail (vertical numbered-icon timeline) ---------------------------
   Used by staged frameworks (e.g. the 5-Stage Automation Model). Each row
   is its own grid (icon column + content column); the connector line is a
   pseudo-element scoped to each row's icon wrap, bridging down through that
   row's own padding into the next row's icon center. This is deliberately
   per-row rather than one long pseudo-element on the outer wrapper: content
   height varies a lot between stages, so a single fixed-offset line cannot
   reliably start at node 1 and stop exactly at the last node. Per-row
   segments are robust to that, and :not(:last-child) means the line simply
   never gets drawn past the final node — no line-in-empty-space to trim. */
.stage-rail { position: relative; }
.stage-rail-row {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.stage-rail-row:last-child { border-bottom: none; }
.stage-rail-icon-wrap { position: relative; }
.stage-rail-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--accent-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.stage-rail-icon svg { width: 22px; height: 22px; }
.stage-rail-row:not(:last-child) .stage-rail-icon-wrap::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: -76px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--border-strong);
  z-index: 0;
}
/* .stage-rail-label styling lives in the Micro-label system block above
   (Tier 2 alias). */
@media (max-width: 480px) {
  .stage-rail-row { grid-template-columns: 40px 1fr; gap: 14px; }
  .stage-rail-icon { width: 40px; height: 40px; }
  .stage-rail-icon svg { width: 18px; height: 18px; }
  .stage-rail-row:not(:last-child) .stage-rail-icon-wrap::after { top: 20px; bottom: -72px; }
}

/* --- Mini stage diagram (compact teaser, e.g. Home page) ---------------------
   Small horizontal echo of .stage-rail: numbered circles joined by short
   connector segments. The whole diagram is one link through to the full
   rail. Connectors are real flex siblings (not pseudo-elements) so they can
   simply disappear at the mobile breakpoint when the row wraps, rather than
   trying to keep a connector aligned across a wrap point. */
.mini-stage-diagram {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  text-decoration: none;
}
.mini-stage-diagram:hover, .mini-stage-diagram:focus-visible { text-decoration: none; }
.mini-stage-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 84px;
  text-align: center;
  flex-shrink: 0;
}
.mini-stage-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--accent-purple);
  color: var(--accent-purple);
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}
.mini-stage-diagram:hover .mini-stage-circle,
.mini-stage-diagram:focus-visible .mini-stage-circle {
  background: var(--accent-purple);
  color: #FFFFFF;
}
.mini-stage-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.mini-stage-connector {
  flex: 1 1 16px;
  min-width: 12px;
  height: 2px;
  background: var(--border-strong);
  margin-top: 13px;
  align-self: flex-start;
}
@media (max-width: 560px) {
  .mini-stage-connector { display: none; }
  .mini-stage-diagram { flex-wrap: nowrap; justify-content: space-between; gap: 6px; }
  .mini-stage-item { width: auto; flex: 1 1 0; min-width: 0; }
  .mini-stage-name { font-size: 9.5px; letter-spacing: 0.03em; }
}
@media (prefers-reduced-motion: reduce) {
  .mini-stage-circle { transition: none !important; }
}

/* --- Credibility strip (slim full-width proof band under a hero) ------------- */
.credibility-strip {
  background: var(--gold-tint);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  padding: 16px 24px;
}
.credibility-strip-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
  font-size: 15px;
  color: var(--ink);
}
.credibility-strip-inner svg { flex-shrink: 0; }

/* --- Form fields (extracted from contact.html) --------------------------------
   .form-card wraps the field stack; .form-field is one label+control+feedback
   unit; validation states are .is-invalid / .is-shake; email gets a dedicated
   live-checkmark pattern via .email-wrap. */
.form-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}
.form-field { margin-bottom: 20px; }
.form-field label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.form-field .req { color: var(--accent-purple); font-weight: 700; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 1px;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field.is-invalid input,
.form-field.is-invalid textarea {
  border-color: #B91C1C;
}
.field-feedback {
  font-size: 13px;
  margin: 6px 0 0;
  display: none;
  color: #B91C1C;
}
.field-feedback.error { display: block; }
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.form-field.is-shake {
  animation: field-shake 100ms ease-in-out 3;
}
.form-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: -12px;
  margin-bottom: 20px;
}
/* A note that follows the submit button or the status box sits below them,
   not pulled up over the button by the negative margin above. */
.btn ~ .form-note, .form-status ~ .form-note { margin-top: 16px; margin-bottom: 0; }
/* Generalized from website's page-scoped "#form-status" ID into a reusable
   class — a shared library should not ship ID-scoped component hooks. */
.form-status {
  display: none;
  background: var(--gold-tint);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.92rem;
  color: var(--ink);
  margin-top: 16px;
}
.form-status.visible { display: block; }
.form-status.error { background: #FDECEC; border-color: #C0392B; }

.email-wrap { position: relative; display: block; }
.email-wrap input { padding-right: 44px; }
.email-mark {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  font-weight: 700;
  display: none;
  pointer-events: none;
}
.email-wrap.is-valid .email-mark.mark-ok { display: block; color: var(--teal-dark); }
.email-wrap.is-invalid .email-mark.mark-bad { display: block; color: #B91C1C; }
.email-wrap.is-valid input { border-color: var(--teal-dark); }
.email-wrap.is-invalid input { border-color: #B91C1C; }
.email-feedback { font-size: 13px; margin: 6px 0 0; display: none; }
.email-feedback.error { display: block; color: #B91C1C; }

.direct-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  margin-bottom: 22px;
}
.direct-card h3 { margin-bottom: 0.7em; }
.direct-card ul { list-style: none; margin: 0; padding: 0; }
.direct-card li { margin-bottom: 12px; font-size: 0.98rem; }

.expect-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  font-size: 0.95rem;
  color: var(--ink);
}
.expect-strip svg { flex-shrink: 0; }

/* --- Header / nav --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 249, 251, 0.94);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: none;
  margin: 0;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  flex-wrap: wrap;
}
.logo-link { display: flex; align-items: center; gap: 12px; line-height: 0; }
.logo-link img { width: 72px; height: 72px; }
.logo-wordmark { font-weight: 800; font-size: 1.15rem; color: var(--ink); letter-spacing: 0.01em; }
.logo-wordmark span { color: var(--teal-dark); }

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.nav-link { display: inline-block; padding: 10px 2px; color: var(--ink); font-weight: 500; font-size: 0.95rem; }
.nav-link:hover, .nav-link.active { color: var(--teal-dark); text-decoration: none; }
.nav-link.active { font-weight: 700; }

.header-cta { margin-left: auto; flex-shrink: 0; }
@media (max-width: 560px) {
  .header-inner { padding: 8px 16px; gap: 8px 16px; }
  .logo-link img { width: 56px; height: 56px; }
  .header-cta { display: none; }
  .nav-links { gap: 12px; }
  .nav-link { font-size: 0.9rem; padding: 8px 0; }
}

/* --- Language switcher (EN/HE, header) ---------------------------------- */
.lang-switch {
  font-weight: 600;
  font-size: 0.9rem;
  margin-inline-start: 4px;
  padding-inline-start: 16px;
  border-inline-start: 1px solid var(--border);
}

@media (max-width: 700px) {
  .logo-link img { width: 56px; height: 56px; }
  /* The <nav> element, not the .nav-links <ul> inside it, is the actual
     flex child of .header-inner — order/width must target the flex item. */
  .header-inner nav {
    order: 3;
    width: 100%;
  }
  .nav-links {
    justify-content: flex-start;
    gap: 14px 18px;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px solid var(--border);
  }
}

/* --- Hero ------------------------------------------------------------------------ */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 900px 500px at 82% -10%, rgba(122, 79, 163, 0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 8% 110%, rgba(201, 162, 39, 0.10), transparent 60%),
    var(--bg);
}
/* On navy sections, primary buttons use the same CTA gold/navy-text pair as
   the base .btn-primary (2026-08-21): #D4AF37 on #16283E clears AA for the
   label (7.1:1) and the fill stands out against navy. Kept as an explicit
   override (rather than relying on inheritance) so navy sections stay
   correct even if .btn-primary's default ever changes for light sections
   only — but now single-sourced from --gold-cta / --gold-cta-hover instead
   of the old --gold / --gold-hover pair. */
.bg-navy .btn-primary {
  background: var(--gold-cta);
  color: var(--ink);
}
.bg-navy .btn-primary:hover, .bg-navy .btn-primary:focus-visible {
  background: var(--gold-cta-hover);
}
/* Navy eyebrow/lead helpers so pages don't need inline colors */
.bg-navy .eyebrow { color: #8FD9D3; }
.bg-navy .lead { color: #C7D0DC; }
.hero-inner { max-width: 800px; padding: 96px 24px 80px; margin: 0 auto; }
.hero .subhead { font-size: 1.15rem; color: var(--ink); max-width: 60ch; margin-bottom: 1.8em; }

@media (max-width: 480px) {
  .hero-inner { padding: 64px 20px 56px; }
}

/* --- Footer ------------------------------------------------------------------------ */
footer { padding: 48px 0 32px; border-top: 1px solid var(--border); background: var(--bg); }
.footer-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px;
}
.footer-brand { max-width: 320px; }
.footer-logo { width: 130px; height: 130px; border-radius: 50%; margin-bottom: 16px; }
.footer-brand p { color: var(--muted); font-size: 14px; }
/* .footer-col h4 styling (incl. its margin) lives in the Micro-label system
   block above (Tier 3 alias). */
.footer-col ul { list-style: none; margin: 0; padding: 0; }

/* --- Footer trust row (compact badge strip under the brand blurb) -----------
   Reuses .badge at a smaller size — subtle, one wrapping row, no new colors. */
.footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.footer-trust .badge {
  font-size: 11px;
  padding: 3px 9px;
}
.footer-col li { margin-bottom: 0; font-size: 14px; }
.footer-col a { display: inline-block; padding: 6px 0; color: var(--ink); }
.footer-col a:hover { color: var(--teal-dark); }
.footer-bottom {
  max-width: 1120px; margin: 32px auto 0; padding: 20px 24px 0;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
}
.footer-bottom p { color: var(--muted); font-size: 14px; margin: 0; }
.footer-bottom a { display: inline-block; padding: 6px 0; color: var(--muted); font-size: 14px; }


/* --------------------------------------------------------------------------
   5. MOTION — scroll-entry reveal system
   Progressive enhancement: gated under html.js (added by an inline script
   in <head>, see README.md). With JavaScript disabled, .reveal elements are
   simply visible — nothing is ever hidden by CSS alone.
   -------------------------------------------------------------------------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
html.js .reveal:nth-child(1) { transition-delay: 0ms; }
html.js .reveal:nth-child(2) { transition-delay: 80ms; }
html.js .reveal:nth-child(3) { transition-delay: 160ms; }
html.js .reveal:nth-child(4) { transition-delay: 240ms; }
html.js .reveal:nth-child(5) { transition-delay: 320ms; }


/* --------------------------------------------------------------------------
   6. ACCESSIBILITY
   -------------------------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* Scoped, not blunt: only disables the transform-based effects the deck
   guidance is protecting against (see CANONICAL.md §9.7) — harmless
   opacity/color transitions elsewhere are left alone. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-primary,
  .btn-secondary,
  .card,
  .ladder-step,
  .reveal {
    transition: none !important;
  }
  .btn-primary:hover,
  .btn-primary:active,
  .btn-primary:focus-visible,
  .card:hover,
  .ladder-step:hover {
    transform: none !important;
  }
  .btn-primary.is-loading::after {
    content: "\2026";
    display: inline-block;
    width: auto;
    height: auto;
    margin-left: 8px;
    vertical-align: baseline;
    border: none;
    border-radius: 0;
    animation: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .form-field.is-shake {
    animation: none !important;
  }
}