/* Home, new design (Stage 3 Phase 2). From the Stage 2 prototype (site_src/home.py HOME_CSS);
   additions for the Stage 2 critique are marked. */
.stage{--hero-bg:var(--sand-2)}
.stall{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.stall .h2{font-size:clamp(36px,5.2vw,68px)}
.stall .lead+.land{margin-top:20px}
/* lead-in line (Weeb, 2026-10-12): heavy Inter, a step above the body, not a heading */
.stall-in{font-family:var(--f-stmt);font-weight:800;font-size:clamp(21px,1.9vw,26px);line-height:1.3;letter-spacing:-.015em;color:var(--ink);max-width:22em;margin-bottom:10px}
.yrs{display:flex;align-items:baseline;gap:18px;margin-top:40px;padding-top:24px;border-top:2px solid var(--ink)}
.yrs b{font-weight:900;font-size:clamp(64px,8vw,112px);letter-spacing:-.06em;line-height:.8}
.yrs span{font-size:16px;line-height:1.45;max-width:16em}
@media (max-width:860px){.stall{grid-template-columns:1fr}}

.trk{margin-top:48px;border-top:2px solid var(--ink)}
.trk a{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.3fr) auto;gap:16px 40px;align-items:center;padding:30px 12px;border-bottom:1px solid var(--line-2);text-decoration:none;transition:background .2s}
.trk a:hover,.trk a:focus-visible{background:#fff}
.trk .nm{font-weight:900;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;font-size:clamp(32px,3.7vw,54px)}
.trk .ds{font-size:17px;line-height:1.5}
.trk .ds small{display:block;color:var(--grey);font-size:15px;margin-top:6px}
.trk .go{font-weight:650;font-size:15px;white-space:nowrap;display:inline-flex;gap:8px;align-items:center;border-bottom:2px solid var(--ember);padding-bottom:3px}
.trk a:hover .go{color:var(--blue)}
.mix{margin-top:28px;font-family:var(--f-voice);font-style:italic;font-size:clamp(22px,2.4vw,30px);line-height:1.2;max-width:28em}
@media (max-width:860px){.trk a{grid-template-columns:1fr;padding:24px 4px}}

.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px;position:relative}
.how::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:var(--ink)}
.how li{list-style:none;position:relative;padding:48px 32px 0 0}
.how li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.how li:first-child::before{background:var(--ember);border-color:var(--ember)}
.how .w{font-weight:900;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(30px,3.4vw,46px);line-height:.95}
.how .t{font-family:var(--f-voice);font-style:italic;font-size:22px;margin:8px 0 12px;color:var(--ink)}
.how p{font-size:16px;line-height:1.6;max-width:22em}
@media (max-width:820px){.how{grid-template-columns:1fr}.how::before{left:8px;right:auto;top:0;bottom:0;width:2px;height:auto}.how li{padding:0 0 36px 44px}.how li::before{top:6px}}


.ways{margin-top:48px;border-top:2px solid var(--ink)}
.ways div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px 40px;padding:28px 0;border-bottom:1px solid var(--line)}
.ways dt{font-weight:900;text-transform:uppercase;letter-spacing:-.035em;font-size:clamp(22px,2.4vw,30px);line-height:1}
.ways dd{margin:0;font-size:17px}
.ways dd b{font-weight:700}
@media (max-width:760px){.ways div{grid-template-columns:1fr}}

.work{margin-top:36px;display:grid;gap:0;border-top:2px solid var(--ink)}
.work a{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:10px 32px;padding:26px 0;border-bottom:1px solid var(--line-2);text-decoration:none;align-items:baseline}
.work .d{font-size:14px;font-weight:700;color:var(--ember-deep);letter-spacing:.02em}
.work h3{font-family:var(--f-voice);font-style:italic;font-weight:400;font-size:clamp(24px,2.6vw,32px);line-height:1.12}
.work p{font-size:16px;margin-top:8px;max-width:44em}
.work .go{font-weight:650;font-size:15px;border-bottom:2px solid var(--ember);padding-bottom:3px;white-space:nowrap}
.work a:hover h3{color:var(--blue)}
@media (max-width:760px){.work a{grid-template-columns:1fr}}

/* Stage 2 critique, change 4: "who you'll work with" strip, between proof and method */

/* Stage 2 critique, change 4: method and ways to engage condensed into one section */
#how-h+.lead{margin-top:14px}
.ways-h{margin-top:72px;font-weight:900;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(26px,2.8vw,36px);line-height:1}
.ways{margin-top:24px}
#help-h,#work-h{margin-top:0;max-width:16em}
.kicker+#work-h{margin-top:16px}

/* Past and present engagements (Weeb, 2026-10-12): its own Sand band, CMS logos as a carousel.
   Hover pauses it (site.css); reduced motion shows one static, wrapped row (site.css hides the copies). */
.logos .cl-h{display:flex;margin:0 0 32px}
.lmarq .mtrack{gap:clamp(32px,4vw,56px);align-items:center}
.lmarq .lg{display:flex;align-items:center}
.lmarq img{height:64px;width:auto;max-width:180px;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s}
.lmarq .lg:hover img{filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){.lmarq .mtrack{justify-content:center}}