/* Chapter 03 · What I'm Building (redesign 2026-10-14).
   New file so styles.css (cached for a year) stays untouched.
   Bump ?v= on the <link> if this file ever changes. */

/* ---- The stack: three layers at a glance ---- */
.bx-stack{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft)}
@media (min-width:820px){.bx-stack{grid-template-columns:repeat(3,1fr)}}
.bx-stack li{background:var(--black)}
.bx-stack a{
  display:grid;grid-template-columns:auto 1fr auto;gap:6px 16px;align-items:baseline;
  padding:clamp(18px,2.4vw,26px);color:inherit;text-decoration:none;height:100%;box-sizing:border-box;
  transition:background .25s var(--ease-out);
}
.bx-stack a:hover,.bx-stack a:focus-visible{background:var(--near-black)}
.bx-stack a:focus-visible{outline:2px solid var(--paper);outline-offset:-2px}
.bx-no{font-family:var(--font-display);font-size:clamp(28px,3.6vw,40px);line-height:1;color:var(--steel)}
.bx-stack b{font-family:var(--font-cond);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(16px,1.8vw,19px)}
.bx-stack small{grid-column:2/3;font-size:14px;color:var(--ash);font-weight:400;line-height:1.45}
.bx-stack em{font-style:normal;font-family:var(--font-cond);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--smoke);grid-column:2/3}
.bx-arrow{grid-row:1/4;grid-column:3;align-self:center;color:var(--smoke);font-size:18px}

/* ---- Layer sections ---- */
.bx-layer{margin-top:clamp(48px,9vh,96px)}
.bx-layer-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.bx-layer-head .bx-no{font-size:clamp(22px,2.6vw,28px)}
.bx-layer-head .kicker{margin:0}
.bx-h{font-family:var(--font-display);text-transform:uppercase;line-height:.95;letter-spacing:.005em;
  font-size:clamp(30px,5vw,56px);margin:0 0 14px}
.bx-p{margin:0;color:var(--ash);font-weight:400;font-size:clamp(15px,1.6vw,17px);line-height:1.6;max-width:52ch}
.bx-p strong{color:var(--paper);font-weight:500}

/* ---- 01 The Place ---- */
.bx-place{display:grid;gap:12px}
@media (min-width:820px){.bx-place{grid-template-columns:1.35fr 1fr}}
.bx-place .eco-feature{min-height:clamp(380px,56vh,600px)}
.bx-locs{display:grid;gap:12px;grid-template-rows:1fr 1fr}
.bx-locs .pod-loc{aspect-ratio:auto;min-height:200px}
@media (max-width:819px){.bx-locs{grid-template-rows:none;grid-template-columns:1fr 1fr}.bx-locs .pod-loc{aspect-ratio:4/5;min-height:0}}

.bx-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bx-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;align-items:center}
.bx-btn{
  display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;
  font-family:var(--font-cond);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--paper);color:var(--black);background:var(--paper);
  transition:background .2s var(--ease-out),color .2s var(--ease-out);
}
.bx-btn:hover,.bx-btn:focus-visible{background:transparent;color:var(--paper)}
.bx-btn.ghost{background:transparent;color:var(--paper);border-color:var(--hair)}
.bx-btn.ghost:hover,.bx-btn.ghost:focus-visible{border-color:var(--paper)}
.bx-btn:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

/* ---- 02 The Coach ---- */
.bx-coach{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:900px){.bx-coach{grid-template-columns:minmax(0,600px) auto;column-gap:clamp(40px,8vw,140px);justify-content:center}}
.bx-try{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 6px}
.bx-try-label{width:100%;font-family:var(--font-cond);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--smoke);margin-bottom:2px}
.bx-chip{
  min-height:44px;padding:0 16px;background:transparent;color:var(--ash);cursor:pointer;
  border:1px solid var(--hair);border-radius:100px;
  font-family:var(--font-cond);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  transition:border-color .2s,color .2s,background .2s;
}
.bx-chip:hover{border-color:var(--paper);color:var(--paper)}
.bx-chip[aria-pressed="true"]{background:var(--paper);color:var(--black);border-color:var(--paper)}
.bx-chip:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
.bx-does{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft);max-width:520px}
.bx-does li{background:var(--black);padding:14px 16px;display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:baseline}
.bx-does b{font-family:var(--font-cond);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
.bx-does span{font-size:14.5px;color:var(--ash);line-height:1.45}
@media (max-width:480px){.bx-does li{grid-template-columns:1fr;gap:4px}}
.bx-coach .eco-phone{height:auto}

/* ---- 03 The Brain ---- */
.bx-brain{display:grid;gap:clamp(24px,4vw,48px);align-items:center}
@media (min-width:900px){.bx-brain{grid-template-columns:minmax(280px,420px) 1fr}}
.bx-wheel{width:100%;max-width:480px;height:auto;display:block;margin:0 auto;color:var(--paper)}
.bx-wheel .ring{fill:none;stroke:var(--hair);stroke-width:1}
.bx-wheel .arc{fill:none;stroke:var(--paper);stroke-width:1.5;stroke-dasharray:6 8;animation:bxSpin 14s linear infinite;transform-origin:210px 210px}
@media (prefers-reduced-motion:reduce){.bx-wheel .arc{animation:none}}
@keyframes bxSpin{to{transform:rotate(360deg)}}
.bx-wheel .node{fill:var(--black);stroke:var(--paper);stroke-width:1.2}
.bx-wheel text{fill:var(--paper);font-family:var(--font-cond);font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-anchor:middle}
.bx-wheel .core{font-family:var(--font-display);font-size:30px;letter-spacing:.02em}
.bx-wheel .sub{fill:var(--smoke);font-size:10px;letter-spacing:.22em}
.bx-points{display:grid;gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft);margin-top:24px}
@media (min-width:620px){.bx-points{grid-template-columns:1fr 1fr}}
.bx-point{background:var(--black);padding:clamp(18px,2.4vw,26px)}
.bx-point h4{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.04em;font-weight:600;font-size:clamp(16px,1.9vw,19px);margin:0 0 8px;line-height:1.1}
.bx-point p{margin:0;color:var(--ash);font-size:14.5px;line-height:1.55}

/* ---- Scale (B2B) ---- */
.bx-scale .gaas p{color:var(--ash);font-weight:400}
.bx-next{margin-top:clamp(28px,5vh,44px)}
.bx-next .pipe p{color:var(--ash)}

/* ---- Where do you fit? ---- */
.bx-fit{display:grid;gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft);margin-top:14px}
@media (min-width:620px){.bx-fit{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.bx-fit{grid-template-columns:repeat(4,1fr)}}
.bx-fit a{
  background:var(--black);color:inherit;text-decoration:none;padding:clamp(20px,2.6vw,28px);
  display:flex;flex-direction:column;gap:10px;min-height:150px;transition:background .25s var(--ease-out);
}
.bx-fit a:hover,.bx-fit a:focus-visible{background:var(--near-black)}
.bx-fit a:focus-visible{outline:2px solid var(--paper);outline-offset:-2px}
.bx-fit i{font-style:normal;font-family:var(--font-cond);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--smoke)}
.bx-fit b{font-family:var(--font-cond);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(18px,2vw,22px);line-height:1.1}
.bx-fit span{margin-top:auto;font-family:var(--font-cond);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.bx-fit a:hover span{color:var(--paper)}