/*  SOAR-GC — PROJECT / CASE-STUDY TEMPLATE (.soar-proj / .sp-*)
    Recovered verbatim from littleton-project-page.html (2026-07-15 build).
    Portrait-grid rules live in _fixes.css. References tokens only. */

.soar-proj{--pri:#2b7de2;--act:#1a63bc;--act-h:#0f386c;--navy:#0a2648;--ink:#0a0c0f;--steel:#a2a8ae;
  --paper:#ffffff;--subtle:#f2f7fc;--muted:#f3f5f7;--ink-txt:#13202e;--soft:#586674;--inv:#eaf2fb;
  --fh:"Fraunces","Iowan Old Style",Georgia,serif;--fb:"Inter",ui-sans-serif,-apple-system,"Segoe UI",Arial,sans-serif;
  --rad:3px;--wrap:1180px;--gutter:clamp(20px,5vw,64px)}
.soar-proj{font-family:var(--fb);color:var(--ink-txt);line-height:1.65;-webkit-font-smoothing:antialiased}
.soar-proj *{box-sizing:border-box}
.soar-proj img{max-width:100%;display:block}
.soar-proj .sp-wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.soar-proj h1,.soar-proj h2,.soar-proj h3{font-family:var(--fh);font-weight:600;letter-spacing:-.015em;line-height:1.08;margin:0}
.soar-proj .sp-eyebrow{font-family:var(--fb);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.74rem;color:var(--pri)}
.soar-proj .sp-sec{padding:clamp(56px,8vw,104px) 0}
.soar-proj .sp-sec--subtle{background:var(--subtle)}
.soar-proj .sp-sec--dark{background:var(--ink);color:var(--inv)}
.soar-proj .sp-sec--dark h2,.soar-proj .sp-sec--dark h3{color:#fff}
.soar-proj .sp-sec--dark .sp-eyebrow{color:#7db3f2}
.soar-proj .sp-sec--dark p{color:#c6d3e2}
.soar-proj h2{font-size:clamp(1.7rem,3.6vw,2.7rem)}
.soar-proj .sp-lede{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--soft);max-width:60ch;margin:18px 0 0}
.soar-proj .sp-sec--dark .sp-lede{color:#c6d3e2}
/* HERO */
.soar-proj .sp-hero{position:relative;min-height:clamp(560px,86vh,860px);display:flex;align-items:flex-end;
  background:#0a0c0f center/cover no-repeat;color:#fff}
.soar-proj .sp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,15,.28) 0%,rgba(10,12,15,.30) 42%,rgba(10,12,15,.86) 100%)}
.soar-proj .sp-hero .sp-wrap{position:relative;z-index:2;padding-top:120px;padding-bottom:clamp(48px,8vw,92px)}
.soar-proj .sp-hero h1{font-size:clamp(2.3rem,6vw,4.4rem);color:#fff;max-width:16ch}
.soar-proj .sp-hero .sp-eyebrow{color:#9cc4f5}
.soar-proj .sp-hero p{font-size:clamp(1.05rem,1.8vw,1.3rem);color:#e7eef8;max-width:56ch;margin:20px 0 30px}
.soar-proj .sp-btns{display:flex;flex-wrap:wrap;gap:14px}
.soar-proj .sp-btn{display:inline-block;font-family:var(--fb);font-weight:600;letter-spacing:.02em;font-size:.98rem;
  padding:15px 30px;border-radius:var(--rad);text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.soar-proj .sp-btn--primary{background:var(--act);color:#fff}
.soar-proj .sp-btn--primary:hover{background:var(--pri)}
.soar-proj .sp-btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.soar-proj .sp-btn--ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
/* stat row */
.soar-proj .sp-stats{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:30px;padding-top:26px;border-top:1px solid #e7eef7}
.soar-proj .sp-stat{font-family:var(--fh);font-size:clamp(1rem,1.5vw,1.18rem);color:var(--navy)}
.soar-proj .sp-stat span{display:block;font-family:var(--fb);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:.66rem;color:var(--soft);margin-top:3px}
/* split rows */
.soar-proj .sp-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.soar-proj .sp-split--rev .sp-split-media{order:2}
.soar-proj .sp-split-media img{width:100%;height:100%;object-fit:cover;border-radius:var(--rad);box-shadow:0 24px 50px rgba(10,38,72,.20)}
.soar-proj .sp-split-stack{display:grid;gap:14px}
/* galleries */
.soar-proj .sp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.soar-proj .sp-grid--2{grid-template-columns:repeat(2,1fr)}
.soar-proj .sp-grid figure{margin:0;position:relative;overflow:hidden;border-radius:var(--rad);background:#e7eef7}
.soar-proj .sp-grid img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s var(--fb,ease)}
.soar-proj .sp-grid figure:hover img{transform:scale(1.045)}
.soar-proj .sp-span2{grid-column:span 2}
.soar-proj .sp-head{max-width:64ch}
.soar-proj .sp-cta{background:linear-gradient(160deg,var(--pri),var(--navy));color:#fff}
.soar-proj .sp-cta h2{color:#fff}.soar-proj .sp-cta p{color:#dbe8fb}
.soar-proj .sp-embed{margin-top:30px;background:#fff;border-radius:var(--rad);padding:8px;box-shadow:0 24px 50px rgba(10,38,72,.28)}
@media(max-width:820px){.soar-proj .sp-split{grid-template-columns:1fr}.soar-proj .sp-split--rev .sp-split-media{order:0}
  .soar-proj .sp-grid,.soar-proj .sp-grid--2{grid-template-columns:1fr 1fr}.soar-proj .sp-span2{grid-column:span 2}}
@media(max-width:520px){.soar-proj .sp-grid,.soar-proj .sp-grid--2{grid-template-columns:1fr}.soar-proj .sp-span2{grid-column:auto}}

/* Hero scrim. The recovered template's default gradient tops out at .86 and left
   type sitting on bright concrete at the foot of the Littleton frame. Deepened,
   and weighted to the lower half where copy actually sits. Verified against the
   real photograph in-browser, not against the markup. */
.soar-proj .sp-hero::after{background:linear-gradient(180deg,
  rgba(10,12,15,.30) 0%, rgba(10,12,15,.24) 30%,
  rgba(10,12,15,.62) 58%, rgba(10,12,15,.88) 80%, rgba(10,12,15,.97) 100%)}