/* SPARX × Modernist — shared page-level layout. Every color/font/space/radius
   comes from the bound design system's styles.css tokens; this file is
   layout-and-rhythm scaffolding only. Shared by index.html and case-study.html. */
:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); position: sticky; top: 0; background: var(--color-bg); z-index: 20; }
@media (max-width: 720px) { .nav > a { display: none; } }

.rule2 { height: 2px; border: 0; margin: 0; background: var(--color-divider); }

.brandLockup { display: flex; align-items: center; gap: 9px; margin-right: auto; color: var(--color-text); }
.brandLockup .mark { font-size: 22px; color: var(--color-accent); line-height: 1; }
.brandLockup b { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px; letter-spacing: 0.01em; line-height: 1; }
.brandLockup small { display: block; font-size: 8px; letter-spacing: 0.14em; opacity: 0.6; margin-top: 3px; font-weight: 600; }

.mark-sq { width: 9px; height: 9px; background: var(--color-accent); display: inline-block; flex: none; }

.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}
.muted { color: color-mix(in srgb, var(--color-text) 78%, transparent); font-size: 15.5px; line-height: var(--leading); margin: 0; }
.row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

.sectionHead { max-width: 700px; margin: 0 auto calc(1.5 * var(--leading)); text-align: center; }
.sectionHead .kicker { text-align: center; }
.sectionHead h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.3; letter-spacing: -0.02em; margin: 0; }
.sectionHead .muted { max-width: 56ch; margin: var(--half) auto 0; }
.blk { padding: calc(2.4 * var(--leading)) 0; }

/* — hero — */
.hero { padding: calc(3 * var(--leading)) 0 calc(2.4 * var(--leading)); }
.heroGrid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: clamp(27.5px, 3.6vw, 44.5px);
  letter-spacing: -0.02em; margin: 0; margin-left: -0.058em;
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; }
.sub { font-size: 17px; line-height: var(--leading); max-width: var(--measure); margin: calc(1.5 * var(--leading) - 1cap) 0 0; text-box: trim-both cap alphabetic; }
.hero .row { margin-top: var(--leading); }
.heroStatus { border: 2px solid var(--color-divider); padding: var(--leading); margin-top: calc(0.6 * var(--leading)); }
.heroStatus b { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 19px; line-height: 1.4; margin-top: var(--half); }
.proof { display: flex; flex-wrap: wrap; gap: var(--half) var(--leading); margin-top: var(--leading); font-size: 13px; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.proof b { color: var(--color-text); }
.proof > * + * { border-left: 2px solid var(--color-divider); padding-left: var(--leading); }

/* — ruled equal-width grids (problems / services) — */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--color-divider); }
.grid4 > div { padding: var(--leading) clamp(14px, 1.8vw, 24px); }
.grid4 > div:not(:nth-child(4n+1)) { border-left: 2px solid var(--color-divider); }
.grid4 > div:nth-child(4n+1) { padding-left: 0; }
.grid4 > div:nth-child(4n) { padding-right: 0; }
.grid4.rows2 > div:nth-child(n+5) { border-top: 2px solid var(--color-divider); }
.grid4 svg { color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.grid4 b, .processStep b { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; margin: var(--half) 0 6px; letter-spacing: -0.01em; }
.grid4 p, .processStep p { font-size: 14px; line-height: 1.75; margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* — process / cycle — */
.processIntro { max-width: 860px; }
.processGrid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--color-divider); margin-top: calc(1.6 * var(--leading)); }
.processGrid > div { padding: var(--leading) clamp(14px, 1.8vw, 22px) 0; }
.processGrid > div:not(:nth-child(4n+1)) { border-left: 2px solid var(--color-divider); }
.processGrid > div:nth-child(4n+1) { padding-left: 0; }
.processGrid > div:nth-child(4n) { padding-right: 0; }
.processStep .num { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px; letter-spacing: 0.04em; }
.processStep svg { display: block; margin: var(--half) 0; color: var(--color-text); }
.cycleNote { text-align: center; font-size: 13px; font-weight: 700; color: var(--color-accent-700); margin: calc(1.4 * var(--leading)) 0 0; }

/* — imagery split + mini stats (case study teaser) — */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--leading) clamp(24px, 5vw, 88px); align-items: center; }
.split-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.35; letter-spacing: -0.015em; margin: 0; }
.split-copy h3 { font-size: 16px; margin: var(--half) 0 0; }
.split-copy .note { font-size: 15.5px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: var(--half) 0 0; max-width: 48ch; }
.split-figure { margin: 0; }
.split-figure img { width: 100%; aspect-ratio: 951 / 665; object-fit: cover; }
.miniStats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--half); margin: var(--leading) 0; padding-top: var(--half); border-top: 2px solid var(--color-divider); }
.miniStats strong { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 28px; color: var(--color-accent); }
.miniStats span { display: block; font-size: 11px; margin-top: 4px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }

/* — quote — */
.quote blockquote {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.5;
  letter-spacing: -0.015em; max-width: 34ch; margin: 0;
  text-indent: -0.496em;
}
.quote figcaption { font-size: 15.5px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: var(--half) 0 0; text-indent: -1.209em; }

/* — pricing cards — */
.planGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--half); align-items: stretch; }
.planGrid .card { padding: var(--leading); gap: var(--half); border-radius: 0; }
.planGrid .card.recommended { border: 2px solid var(--color-accent); }
.planGrid h3 { margin: 2px 0 0; font-size: 22px; }
.planPrice { display: flex; align-items: baseline; gap: 4px; border-top: 2px solid var(--color-divider); padding-top: var(--half); margin-top: 2px; }
.planPrice small { font-size: 12px; }
.planPrice strong { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 34px; color: var(--color-text); }
.planGrid ul { list-style: none; padding: 0; margin: var(--half) 0 0; display: grid; gap: 9px; }
.planGrid li { font-size: 13px; display: flex; gap: 8px; align-items: flex-start; }
.planGrid li svg { flex: none; margin-top: 2px; color: var(--color-accent); }
.fineprint { text-align: center; font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); margin: var(--leading) 0 0; }

/* — flow — */
.flowSteps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--color-divider); }
.flowSteps > div { padding: var(--leading) clamp(14px, 1.8vw, 22px) 0; }
.flowSteps > div:not(:nth-child(4n+1)) { border-left: 2px solid var(--color-divider); }
.flowSteps > div:nth-child(4n+1) { padding-left: 0; }
.flowSteps > div:nth-child(4n) { padding-right: 0; }
.flowSteps .num { color: var(--color-accent); font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px; }
.flowSteps b { display: block; font-size: 18px; margin: var(--half) 0 6px; }
.flowSteps p { font-size: 13.5px; line-height: 1.75; margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* — the red poster close + application form — */
.close { background: var(--color-accent); color: var(--color-bg); }
.close .wrap { padding-top: calc(2.6 * var(--leading)); padding-bottom: calc(2.6 * var(--leading)); }
.close .kicker { color: var(--color-bg); opacity: 0.85; }
.close h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(26px, 4vw, 50px); line-height: 1.2;
  letter-spacing: -0.015em; margin: 0; margin-left: -0.058em;
}
.close h3 .line { display: block; }
.close .sub { color: var(--color-bg); opacity: 0.92; }
.close .row { margin-top: var(--leading); gap: var(--leading); font-size: 13px; font-weight: 700; }
.formPanel { max-width: 640px; margin: 0 auto; padding: calc(1.6 * var(--leading)) 0; }
.formPanel h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 var(--leading); }
.formGrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.formNote { font-size: 13px; margin: var(--space-2) 0 0; min-height: 1.4em; }

.num-tag { color: var(--color-accent); font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px; display: inline-block; }

/* — case-study only: 3-col ruled grids, facts row, result stats — */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--color-divider); }
.grid3 > div { padding: var(--leading) clamp(14px, 1.8vw, 24px); }
.grid3 > div:not(:nth-child(3n+1)) { border-left: 2px solid var(--color-divider); }
.grid3 > div:nth-child(3n+1) { padding-left: 0; }
.grid3 > div:nth-child(3n) { padding-right: 0; }

.caseHeroGrid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 72px); align-items: center; }

.caseFacts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); margin: calc(1.2 * var(--leading)) 0; }
.caseFacts > div { padding: var(--half) clamp(14px, 1.8vw, 24px) var(--leading); }
.caseFacts > div:not(:nth-child(3n+1)) { border-left: 2px solid var(--color-divider); }
.caseFacts > div:nth-child(3n+1) { padding-left: 0; }
.caseFacts b { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 8px; }
.caseFacts p { margin: 0; font-size: 14.5px; line-height: 1.7; font-weight: 600; }

.resultGrid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--color-divider); }
.resultGrid > div { padding: var(--leading) clamp(12px, 1.6vw, 20px); }
.resultGrid > div:not(:nth-child(4n+1)) { border-left: 2px solid var(--color-divider); }
.resultGrid > div:nth-child(4n+1) { padding-left: 0; }
.resultGrid > div:nth-child(4n) { padding-right: 0; }
.resultGrid b { display: block; font-size: 12px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.resultGrid strong { display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 28px; color: var(--color-accent); margin-top: var(--half); }
.resultGrid strong small { font-size: 16px; color: var(--color-text); opacity: 0.5; margin: 0 4px; }
.secondaryResults { display: flex; justify-content: center; gap: var(--leading); flex-wrap: wrap; margin-top: var(--leading); font-size: 13.5px; }
.secondaryResults b { color: var(--color-accent-700); }

footer.siteFooter { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--leading); border-top: 2px solid var(--color-divider); padding: calc(1.8 * var(--leading)) 0; }
footer.siteFooter .side { text-align: right; }
footer.siteFooter .side p { margin: 0 0 var(--half); font-size: 13.5px; }
footer.siteFooter .side .row { justify-content: flex-end; }
footer.siteFooter small { display: block; opacity: 0.6; font-size: 12px; margin-top: var(--half); }

@media (max-width: 880px) {
  .heroGrid { grid-template-columns: 1fr; }
  .grid4, .processGrid, .flowSteps { grid-template-columns: repeat(2, 1fr); }
  .grid4 > div:nth-child(2n+1), .processGrid > div:nth-child(2n+1), .flowSteps > div:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .grid4 > div:nth-child(2n), .processGrid > div:nth-child(2n), .flowSteps > div:nth-child(2n) { padding-right: 0; }
  .grid4 > div:nth-child(n+3), .processGrid > div:nth-child(n+3), .flowSteps > div:nth-child(n+3) { border-top: 2px solid var(--color-divider); }
  .split, .caseHeroGrid { grid-template-columns: 1fr; }
  .planGrid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .formGrid { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: 1fr; }
  .grid3 > div { border-left: 0 !important; padding-left: 0 !important; }
  .grid3 > div:not(:first-child) { border-top: 2px solid var(--color-divider); }
  .caseFacts { grid-template-columns: 1fr; }
  .caseFacts > div { border-left: 0 !important; padding-left: 0 !important; }
  .caseFacts > div:not(:first-child) { border-top: 2px solid var(--color-divider); padding-top: var(--leading); }
  .resultGrid { grid-template-columns: repeat(2, 1fr); }
  .resultGrid > div:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .resultGrid > div:nth-child(2n) { padding-right: 0; }
  .resultGrid > div:nth-child(n+3) { border-top: 2px solid var(--color-divider); }
}
@media (max-width: 600px) {
  .miniStats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  footer.siteFooter, footer.siteFooter .side { text-align: left; }
  footer.siteFooter .side .row { justify-content: flex-start; }
}