/* ==========================================================================
   GENEVA PR — SHARED STYLES (V1)
   Source of truth: Geneva_PR_Website_V1_Master.md
   Values below are carried over from the approved HTML prototypes.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --cream: #F5F1E8;
  --ink: #14120F;
  --taupe: #C4B7A6;
  --crimson: #9E1B32;
  --crimson-hover: #86172A;
  --muted: #6E6B62;

  --serif: 'Fraunces', serif;
  --sans: 'Archivo', sans-serif;

  --gutter: 64px;
  --rule: 1px solid rgba(20, 18, 15, 0.1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, blockquote { margin: 0; }
button { font-family: inherit; }

.serif { font-family: var(--serif); }

/* Screen-reader-only text */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.skip-link:focus { top: 16px; }

/* ---------- Keyboard focus (visible everywhere) ---------- */
:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 4px;
}
.on-dark :focus-visible,
.on-crimson :focus-visible {
  outline-color: var(--cream);
}

/* ---------- Wordmark ---------- */
.wordmark {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.wordmark .pr {
  font-style: italic;
  font-weight: 500;
  color: var(--crimson);
}

/* ---------- Shared buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 16px 28px;
  white-space: nowrap;
}
.btn-ink { background: var(--ink); color: var(--cream); }
.btn-cream { background: var(--cream); color: var(--ink); }
.btn svg, .header-cta svg { flex: none; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 20;
  background: var(--cream);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px var(--gutter);
}

.nav-links {
  display: flex;
  gap: 38px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.nav-link:hover { opacity: 0.55; }
.nav-link[aria-current="page"] { color: var(--crimson); }

.header-cta {
  background: var(--ink);
  color: var(--cream);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 13px 22px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Menu control + drop-down are mobile only */
.menu-toggle { display: none; }
.menu-panel { display: none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding: 76px var(--gutter) 40px;
}

.footer-cta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 56px;
}
.footer-cta h2 {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  max-width: 560px;
}
.footer-cta h2 em { font-style: italic; font-weight: 500; color: var(--taupe); }

.footer-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  border-top: 1px solid rgba(244, 241, 232, 0.15);
}
.footer-mark { font-family: var(--serif); font-size: 15px; font-weight: 600; }
.footer-mark .pr { font-style: italic; font-weight: 500; opacity: 0.6; }
.footer-links {
  display: flex;
  gap: 26px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.footer-links a:hover { opacity: 0.7; }
.footer-copy { font-size: 12px; opacity: 0.6; }

/* Slim footer variant (Contact page) */
.site-footer--slim {
  background: transparent;
  color: var(--ink);
  padding: 26px var(--gutter);
  border-top: 1px solid rgba(20, 18, 15, 0.12);
}
.site-footer--slim .footer-bar { padding-top: 0; border-top: 0; }
.site-footer--slim .footer-mark .pr { color: var(--muted); opacity: 1; }
.site-footer--slim .footer-copy { color: var(--muted); opacity: 1; }

/* ==========================================================================
   HOME
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  border-top: var(--rule);
}
.hero-copy {
  padding: 64px 56px 64px var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--crimson);
  margin-bottom: 22px;
}
.hero h1 {
  font-family: var(--serif);
  font-size: 52px;
  line-height: 1.14;
  font-weight: 700;
  max-width: 600px;
  margin-bottom: 26px;
}
.hero h1 em { font-style: italic; font-weight: 500; color: var(--crimson); }
.hero-lede {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 420px;
  margin-bottom: 32px;
}
.btn-hero {
  background: var(--ink);
  color: var(--cream);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 15px 26px;
  display: inline-block;
}

/* Graphic hero panel — crimson field + oversized cropped G */
.hero-panel {
  position: relative;
  background: var(--crimson);
  overflow: hidden;
  min-height: 460px;
  border-left: var(--rule);
}
.dot-texture {
  background-image: radial-gradient(rgba(244, 241, 232, 0.14) 1.4px, transparent 1.4px);
  background-size: 15px 15px;
}
.dot-texture-dark {
  background-image: radial-gradient(rgba(20, 18, 15, 0.12) 1.4px, transparent 1.4px);
  background-size: 15px 15px;
}
.hero-panel .dots { position: absolute; inset: 0; }
.hero-panel .rules {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero-panel .rules span { border-right: 1px solid rgba(244, 241, 232, 0.14); }
.hero-panel .rules span:last-child { border-right: 0; }
.hero-g {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-42%, -46%);
  font-family: var(--serif);
  font-size: 640px;
  font-weight: 700;
  line-height: 1;
  color: rgba(244, 241, 232, 0.95);
  user-select: none;
}
.hero-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(158, 27, 50, 0) 40%, var(--crimson) 92%);
}
.hero-stamp {
  position: absolute;
  bottom: 30px;
  left: 30px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(244, 241, 232, 0.75);
}
.hero-vertical {
  position: absolute;
  top: 24px;
  right: -26px;
  transform: rotate(90deg);
  transform-origin: right top;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(244, 241, 232, 0.6);
  white-space: nowrap;
}

/* What We Do */
.what-we-do {
  background: var(--ink);
  color: var(--cream);
  padding: 50px var(--gutter);
}
.wwd-grid {
  display: grid;
  grid-template-columns: 0.5fr repeat(3, 1fr);
  align-items: stretch;
}
.wwd-label {
  border-right: 1px solid rgba(244, 241, 232, 0.2);
  padding-right: 20px;
}
.wwd-label h2 {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  opacity: 0.8;
}
.service-card {
  border-right: 1px solid rgba(244, 241, 232, 0.15);
  padding: 0 24px;
  display: flex;
  flex-direction: column;
}
.service-card:last-child { border-right: 0; padding-right: 0; }
.service-num {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  opacity: 0.6;
  margin-bottom: 18px;
}
.service-card h3 {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}
.service-quote {
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  opacity: 0.85;
  margin-bottom: 12px;
  line-height: 1.4;
}
.service-blurb {
  font-size: 13.5px;
  line-height: 1.6;
  opacity: 0.78;
  margin-bottom: 14px;
  flex-grow: 1;
}
.service-more { font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; opacity: 0.9; }
.service-more:hover { opacity: 0.6; }

/* Philosophy pull-quote */
.philosophy {
  background-color: var(--ink);
  color: var(--cream);
  padding: 90px var(--gutter);
  text-align: center;
}
.philosophy h2 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  opacity: 0.55;
  margin-bottom: 26px;
}
.philosophy blockquote {
  font-family: var(--serif);
  font-size: 64px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
  max-width: 900px;
  margin: 0 auto;
}

/* Founder */
.founder {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  background: var(--cream);
}
.founder-field {
  position: relative;
  background-color: var(--taupe);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  overflow: hidden;
}
.founder-mark {
  font-family: var(--serif);
  font-size: 260px;
  line-height: 1;
  font-weight: 700;
  color: rgba(20, 18, 15, 0.16);
}
.founder-copy {
  padding: 56px var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.founder-tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--crimson);
  margin-bottom: 14px;
}
.founder-copy h2 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 18px;
}
.founder-copy p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 480px;
  margin-bottom: 22px;
}
.learn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 4px;
  width: fit-content;
  transition: gap 0.2s ease;
}
.learn-link:hover { gap: 10px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  :root { --gutter: 40px; }

  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 56px var(--gutter); }
  .hero-panel { min-height: 420px; border-left: 0; border-top: var(--rule); }

  .wwd-grid { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
  .wwd-label {
    grid-column: 1 / -1;
    border-right: 0;
    padding-right: 0;
  }
  .service-card:first-of-type { padding-left: 0; }

  .footer-cta h2 { font-size: 38px; }
}

@media (max-width: 780px) {
  :root { --gutter: 24px; }

  .site-nav { padding: 20px var(--gutter); }
  .wordmark { font-size: 19px; }

  /* Fallback (default): the full nav shows inline, wrapped onto its own row. This is what
     renders if JavaScript is off OR site.js fails to load/run — there is no separate
     no-JS stylesheet; the safe state is the CSS default. It stays in place until the
     "html.js-nav" rule below narrows it into the MENU control. */
  .site-nav { flex-wrap: wrap; row-gap: 14px; }
  .nav-links { width: 100%; order: 3; flex-wrap: wrap; gap: 12px 18px; font-size: 11px; }
  .menu-toggle, .menu-panel { display: none; }

  /* JS-enhanced: site.js sets this class only after it has found the menu button and
     panel and attached their listeners. Only then is the fuller nav collapsed behind it. */
  html.js-nav .nav-links, html.js-nav .header-cta { display: none; }

  html.js-nav .menu-toggle {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 11px 16px;
    min-height: 44px;
    cursor: pointer;
  }
  html.js-nav .menu-toggle[aria-expanded="true"] { background: var(--ink); color: var(--cream); }

  html.js-nav .menu-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--cream);
    border-top: var(--rule);
    border-bottom: 1px solid rgba(20, 18, 15, 0.2);
    box-shadow: 0 16px 30px rgba(20, 18, 15, 0.12);
  }
  html.js-nav .menu-panel:not([hidden]) { display: block; }
  html.js-nav .menu-panel a {
    display: block;
    padding: 18px var(--gutter);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-bottom: var(--rule);
    min-height: 44px;
  }
  html.js-nav .menu-panel a[aria-current="page"] { color: var(--crimson); }
  /* Full-width links: draw the focus ring inside so the screen edge doesn't clip it */
  html.js-nav .menu-panel a:focus-visible { outline-offset: -4px; }
  html.js-nav .menu-panel a.menu-cta:focus-visible { outline-color: var(--cream); }
  html.js-nav .menu-panel a.menu-cta {
    background: var(--ink);
    color: var(--cream);
    border-bottom: 0;
  }

  /* Home hero */
  .hero-copy { padding: 44px var(--gutter) 48px; }
  .hero h1 { font-size: 36px; }
  .hero-lede { max-width: none; }
  .hero-panel { min-height: 320px; }
  .hero-g { font-size: 400px; }
  .hero-stamp { bottom: 22px; left: 22px; }

  /* Services grid: stack vertically */
  .what-we-do { padding: 44px var(--gutter); }
  .wwd-grid { display: block; }
  .wwd-label { margin-bottom: 28px; }
  .service-card,
  .service-card:last-child {
    padding: 28px 0;
    border-right: 0;
    border-top: 1px solid rgba(244, 241, 232, 0.15);
  }
  .service-more { display: inline-block; padding: 8px 0; }

  .philosophy { padding: 64px var(--gutter); }
  .philosophy blockquote { font-size: 36px; }

  .founder { grid-template-columns: 1fr; }
  .founder-field { min-height: 200px; }
  .founder-mark { font-size: 180px; }
  .founder-copy { padding: 44px var(--gutter); }

  /* Footer */
  .site-footer { padding: 56px var(--gutter) 32px; }
  .footer-cta { margin-bottom: 40px; }
  .footer-cta h2 { font-size: 34px; }
  .footer-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .footer-links a { padding: 6px 0; }
}

/* ==========================================================================
   REDUCED MOTION — remove nonessential transitions and animation
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.page-intro {
  padding: 64px var(--gutter) 0;
  border-top: var(--rule);
}
.page-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 26px;
}
.page-intro h1 {
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1.25;
  font-weight: 700;
  max-width: 1100px;
}

.selector { padding: 64px var(--gutter) 90px; }

.toggle-buttons {
  display: flex;
  flex-direction: row;
  gap: 26px;
  margin-bottom: 44px;
}
.toggle-btn {
  flex: 1;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  padding: 26px;
  border-radius: 4px;
  border: none;
  background: var(--crimson);
  color: var(--cream);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.toggle-btn.active { background: var(--ink); color: var(--cream); }
.toggle-btn:hover:not(.active) { background: var(--crimson-hover); }

.toggle-panel:not([hidden]) { display: block; animation: panelIn 0.4s ease; }
.toggle-panel:focus-visible { outline-offset: 10px; }

/* Fallback (default): services.js hasn't confirmed it initialized (JS off, or the script
   failed to load or errored), so every description shows open rather than staying stuck
   behind selectors nothing can operate. Once services.js runs, it adds "js-services" and
   this stands down in favor of the interactive tabs above. */
#service-selector:not(.js-services) .toggle-panel { display: block !important; }
#service-selector:not(.js-services) .toggle-panel + .toggle-panel { margin-top: 56px; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.service-statement {
  font-family: var(--serif);
  font-size: 32px;
  font-style: italic;
  font-weight: 500;
  color: var(--crimson);
  max-width: 1200px;
  line-height: 1.35;
}
.service-copy {
  font-size: 15px;
  line-height: 1.75;
  max-width: 1000px;
  margin-top: 20px;
}

.supporting {
  padding: 46px var(--gutter);
  border-top: var(--rule);
}
.supporting-inner { max-width: 1200px; }
.supporting h2 {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  font-weight: 500;
}
.supporting p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 12px;
}

.page-cta {
  padding: 50px var(--gutter) 90px;
  border-top: 1px solid rgba(20, 18, 15, 0.12);
}
.page-cta h2 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  max-width: 700px;
  margin-bottom: 30px;
}

@media (max-width: 1000px) {
  .toggle-btn { min-height: 300px; font-size: 19px; padding: 20px; }
  .toggle-buttons { gap: 16px; }
}

@media (max-width: 780px) {
  .page-intro { padding-top: 44px; }
  .page-label { margin-bottom: 18px; }
  .page-intro h1 { font-size: 30px; }

  .selector { padding: 36px var(--gutter) 56px; }
  /* Stacked selectors with comfortable touch targets */
  .toggle-buttons { flex-direction: column; gap: 12px; margin-bottom: 32px; }
  .toggle-btn { flex: none; min-height: 88px; align-items: center; font-size: 19px; padding: 20px 22px; }
  .service-statement { font-size: 25px; }
  .service-copy { font-size: 15.5px; }

  .supporting { padding: 36px var(--gutter); }
  .page-cta { padding: 40px var(--gutter) 64px; }
  .page-cta h2 { font-size: 22px; }
}

/* ==========================================================================
   APPROACH
   ========================================================================== */
.approach-intro {
  padding: 80px var(--gutter) 70px;
  border-top: var(--rule);
}
.approach-intro .page-label { margin-bottom: 26px; }
.approach-intro h1 {
  font-family: var(--serif);
  font-size: 58px;
  line-height: 1.18;
  font-weight: 700;
  max-width: 980px;
}
.approach-intro h1 em { font-style: italic; font-weight: 500; }
.approach-lede { padding: 0 var(--gutter) 76px; }
.approach-lede p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 620px;
}

/* Three steps — cropped numerals */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(20, 18, 15, 0.12);
  border-bottom: 1px solid rgba(20, 18, 15, 0.12);
}
.step {
  position: relative;
  padding: 60px 36px;
  border-right: 1px solid rgba(20, 18, 15, 0.12);
  overflow: hidden;
  min-height: 300px;
}
.step:last-child { border-right: 0; }
.step--crimson { background: var(--crimson); color: var(--cream); }
.numeral {
  position: absolute;
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1;
  font-size: 220px;
  color: rgba(20, 18, 15, 0.06);
  user-select: none;
}
.numeral-1 { top: -30px; left: -20px; }
.numeral-2 { top: -30px; right: -30px; }
.numeral-3 { bottom: -50px; right: -10px; font-size: 260px; color: rgba(244, 241, 232, 0.14); }
.step-body { position: relative; }
.step-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}
.step h2 {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  margin-bottom: 14px;
}
.step p { font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.step--crimson .step-label { color: inherit; opacity: 0.7; }
.step--crimson h2 { font-size: 25px; font-weight: 700; }
.step--crimson p { color: inherit; font-size: 14px; opacity: 0.9; }

/* The Principle — Editorial Redline */
.principle { padding: 110px var(--gutter) 60px; }
.principle .page-label { margin-bottom: 40px; }
.redline {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 600;
  line-height: 1.35;
  max-width: 920px;
  margin-bottom: 34px;
}
.redline del, .redline ins { text-decoration: none; }
.redline-crossed {
  position: relative;
  display: inline-block;
  color: var(--muted);
  font-weight: 500;
  animation: crossedFade 7s ease-in-out infinite;
}
.redline-crossed::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 52%;
  height: 3px;
  background-color: var(--crimson);
  animation: strikeDraw 7s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.redline-resolution { animation: resolutionFade 7s ease-in-out infinite; }
.principle > p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--muted);
  max-width: 640px;
}
@keyframes crossedFade {
  0% { opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes strikeDraw {
  0% { width: 0; } 18% { width: 0; } 28% { width: 100%; } 90% { width: 100%; } 100% { width: 0; }
}
@keyframes resolutionFade {
  0% { opacity: 0; } 32% { opacity: 0; } 42% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; }
}

/* Entrance */
@keyframes ascend {
  from { opacity: 0; transform: translateY(34px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes resolve {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.ascend-step { opacity: 0; animation: ascend 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ascend-1 { animation-delay: 0.05s; }
.ascend-2 { animation-delay: 0.28s; }
.ascend-3 { animation-delay: 0.52s; }
.numeral-resolve { opacity: 0; animation: resolve 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; transform-origin: center; }
.numeral-1.numeral-resolve { animation-delay: 0.2s; }
.numeral-2.numeral-resolve { animation-delay: 0.45s; }
.numeral-3.numeral-resolve { animation-delay: 0.75s; }

.approach-cta {
  padding: 60px var(--gutter) 90px;
  margin-top: 20px;
  border-top: 1px solid rgba(20, 18, 15, 0.12);
}
.approach-cta-line {
  font-family: var(--serif);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.4;
  max-width: 760px;
  margin-bottom: 34px;
}

@media (max-width: 1000px) {
  .approach-intro h1 { font-size: 46px; }
  .step { padding: 48px 28px; min-height: 340px; }
  .numeral { font-size: 180px; }
  .numeral-3 { font-size: 210px; }
  .redline { font-size: 38px; }
}

@media (max-width: 780px) {
  .approach-intro { padding: 44px var(--gutter) 32px; }
  .approach-intro .page-label { margin-bottom: 18px; }
  .approach-intro h1 { font-size: 34px; }
  .approach-lede { padding-bottom: 44px; }

  /* Steps stack; numerals stay cropped at the edges */
  .steps { grid-template-columns: 1fr; }
  .step {
    min-height: 0;
    padding: 44px var(--gutter);
    border-right: 0;
    border-bottom: 1px solid rgba(20, 18, 15, 0.12);
  }
  .step:last-child { border-bottom: 0; }
  .numeral { font-size: 170px; }
  .numeral-1 { top: -22px; left: -14px; }
  .numeral-2 { top: -22px; right: -14px; }
  .numeral-3 { font-size: 190px; bottom: -40px; right: -8px; }
  .step-label { margin-bottom: 14px; }

  .principle { padding: 64px var(--gutter) 40px; }
  .principle .page-label { margin-bottom: 26px; }
  .redline { font-size: 30px; margin-bottom: 24px; }
  .principle > p { font-size: 15.5px; }

  .approach-cta { padding: 44px var(--gutter) 64px; }
  .approach-cta-line { font-size: 22px; margin-bottom: 28px; }
}

/* Reduced motion: show final states, no entrance or looping animation.
   (Approach: redline shows the drawn crimson strike + the resolution.) */
@media (prefers-reduced-motion: reduce) {
  .ascend-step, .numeral-resolve { opacity: 1; transform: none; }
  .redline-crossed { opacity: 1; }
  .redline-crossed::after { width: 100%; }
  .redline-resolution { opacity: 1; }
}

/* Approach — secondary CTA (visually subordinate: text link, no fill) */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.cta-secondary {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-bottom: 1.5px solid var(--ink);
  padding: 4px 0;
}
.cta-secondary:hover { opacity: 0.6; }

/* ==========================================================================
   ABOUT — The Belief, Then the Believer (taupe-led)
   ========================================================================== */
.about-belief {
  padding: 90px var(--gutter) 70px;
  border-top: var(--rule);
}
.about-belief .page-label { margin-bottom: 30px; }
.about-belief h1 {
  font-family: var(--serif);
  font-size: 46px;
  line-height: 1.35;
  font-weight: 600;
  max-width: 920px;
}

.about-why {
  background: var(--taupe);
  padding: 80px var(--gutter);
}
.about-why .page-label {
  color: rgba(20, 18, 15, 0.75);
  margin-bottom: 26px;
}
.about-why p {
  font-size: 19px;
  line-height: 1.8;
  color: var(--ink);
  max-width: 780px;
}
.about-why p + p { margin-top: 24px; }

.about-who { padding: 56px var(--gutter) 100px; }
.who-marker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--crimson);
  margin-bottom: 30px;
}
.beat-mark {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--crimson);
  display: inline-block;
}
.who-lead {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  max-width: 820px;
  margin-bottom: 26px;
}
.who-copy {
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 740px;
  margin-bottom: 20px;
}
.who-copy--ink { color: var(--ink); margin-bottom: 0; }

.about-close {
  padding: 50px var(--gutter) 90px;
  border-top: 1px solid rgba(20, 18, 15, 0.12);
}
.about-close p {
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  max-width: 700px;
}

@media (max-width: 1000px) {
  .about-belief h1 { font-size: 40px; }
}

@media (max-width: 780px) {
  .about-belief { padding: 56px var(--gutter) 48px; }
  .about-belief .page-label { margin-bottom: 20px; }
  .about-belief h1 { font-size: 30px; line-height: 1.35; }

  .about-why { padding: 52px var(--gutter); }
  .about-why p { font-size: 17px; line-height: 1.75; }

  .about-who { padding: 44px var(--gutter) 64px; }
  .who-marker { margin-bottom: 22px; }
  .who-lead { font-size: 23px; margin-bottom: 22px; }
  .who-copy { font-size: 16px; }

  .about-close { padding: 40px var(--gutter) 56px; }
  .about-close p { font-size: 21px; }
}

/* ==========================================================================
   CONTACT — Two Fields of Ground
   ========================================================================== */
main:has(> .contact-split) { display: flex; flex-direction: column; }
.contact-split {
  flex: 1;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  border-top: var(--rule);
  min-height: 720px;
}
.cream-panel {
  padding: 70px 56px 70px var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cream-panel h1 {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 18px;
}
.cream-panel p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 360px;
}
.crimson-panel {
  background: var(--crimson);
  color: var(--cream);
  padding: 70px 56px;
}
/* Heading is present for structure; only shown on the stacked mobile layout */
.panel-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  font-family: var(--sans);
}

.contact-form { display: flex; flex-direction: column; gap: 18px; max-width: 480px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { min-width: 0; }
.field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(244, 241, 232, 0.85);
  margin-bottom: 7px;
  padding: 0;
}
.field-label .optional { font-weight: 400; opacity: 0.85; }
.field-input {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid transparent;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 14px;
  background: var(--cream);
  color: var(--ink);
}
.field-input:focus { border-color: var(--ink); }
.field-input:focus-visible { outline-offset: 2px; }
textarea.field-input { resize: none; }
.field-input[aria-invalid="true"] { border-color: var(--ink); border-width: 2px; padding: 12.5px 13.5px; }

/* Error text: ink block with cream text (brand colors only, high contrast) */
.field-error {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--cream);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}
.field-error[hidden] { display: none; }

/* Selector buttons (real radio inputs, visually styled as pills) */
fieldset.pill-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.pill-group .field-label { margin-bottom: 10px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { position: relative; cursor: pointer; }
.pill input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.pill span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 9px 16px;
  border-radius: 30px;
  border: 1.5px solid var(--cream);
  background: transparent;
  color: var(--cream);
}
.pill input:checked + span { background: var(--cream); color: var(--crimson); }
.pill input:focus-visible + span { outline: 2px solid var(--cream); outline-offset: 3px; }

.form-actions { margin-top: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.submit-btn {
  background: var(--cream);
  color: var(--crimson);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 15px 32px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.form-status {
  padding: 14px 16px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--cream);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
}
.form-status[hidden] { display: none; }
.form-status:focus-visible { outline-color: var(--cream); }

/* Honeypot: off-screen for sighted visitors, out of the tab order, and never announced —
   only a script that blindly fills every field would reach or fill it. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1000px) {
  .cream-panel { padding: 56px 32px 56px var(--gutter); }
  .crimson-panel { padding: 56px 40px; }
}

@media (max-width: 780px) {
  /* Intentional stack: cream introduction, then the crimson rising card */
  .contact-split { display: block; min-height: 0; }
  .cream-panel { padding: 56px var(--gutter) 40px; }
  .cream-panel h1 { font-size: 34px; }
  .crimson-panel {
    padding: 44px var(--gutter) 56px;
    border-radius: 28px 28px 0 0;
    margin-top: -20px;
    position: relative;
    box-shadow: 0 -12px 30px rgba(20, 18, 15, 0.12);
  }
  .panel-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 22px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(244, 241, 232, 0.8);
  }
  .site-footer--slim { padding: 22px var(--gutter); }
  .site-footer--slim .footer-bar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  .field-row { grid-template-columns: 1fr; gap: 18px; }
  /* 16px inputs stop iOS from zooming the page on focus */
  .field-input { font-size: 16px; }
  .pill span { padding: 12px 16px; }
  .submit-btn { padding: 17px 32px; }
}