/* One story per inner page (Mason, 2026-10-20). A sticky stage of chapters: each picture wipes in as you scroll, its
   words come up with it, and one object stays on screen the whole way: the size meter (Services), the year rail (About),
   the index (Work), the device (The Site). Built on site7.css tokens (t1 to t5, one heading face). */
.s7{--ink:#060507;--cream:#EBDED0;--stone:#9A938A;--pink:#FF2D78;--green:#81FF28;--blue:#0083FC;--purple:#762AED;--e:cubic-bezier(.3,0,.1,1);
  position:relative;height:calc(var(--n) * 85vh + 30vh);background:var(--ink);color:var(--cream)}
.s7-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.s7-ly{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 100%);background:var(--ink)}
.s7-glow{position:absolute;inset:0;background:radial-gradient(60% 70% at 72% 50%,color-mix(in srgb,var(--g) 38%,transparent) 0%,transparent 70%),radial-gradient(40% 50% at 20% 90%,color-mix(in srgb,var(--g) 14%,transparent) 0%,transparent 70%)}
.s7-ly[data-i="0"]{clip-path:inset(0 0 0 0)}
.s7-ly img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.s7-dimmer{position:absolute;inset:0;background:var(--ink);opacity:0}
.s7-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,5,7,.92) 0%,rgba(6,5,7,.5) 30%,rgba(6,5,7,0) 56%)}
.s7-left{position:absolute;inset:0;background:linear-gradient(to right,rgba(6,5,7,.95) 0%,rgba(6,5,7,.86) 38%,rgba(6,5,7,0) 68%)}

/* words */
.s7-cap,.s7-q{position:absolute;left:var(--gx);bottom:9vh;z-index:5;max-width:min(760px,48vw);display:grid;gap:12px;opacity:0;transform:translateY(24px);
  transition:opacity .18s var(--e),transform .18s var(--e);pointer-events:none}
.s7-cap.on,.s7-q.on{transition:opacity .45s var(--e) .3s,transform .45s var(--e) .3s}
.s7-cap.wide{max-width:820px}
.s7-cap.on,.s7-q.on{opacity:1;transform:none;pointer-events:auto}
.s7-n{display:flex;gap:10px;align-items:center;margin:0;font-size:var(--t1);font-weight:600;color:var(--stone)}
.s7-n i{display:inline-block;width:28px;height:2px;background:var(--cream)}
.s7-h{margin:0;font-size:var(--t4);font-weight:700;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.s7-cap p{margin:0;font-size:var(--t2);line-height:1.55;color:rgba(235,222,208,.86);max-width:600px}
.s7-cap ul{margin:4px 0;padding:0;list-style:none;display:grid;gap:6px}
.s7-cap li{font-size:var(--t2);line-height:1.45;padding-left:18px;position:relative}
.s7-cap li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:2px;background:var(--green)}
.s7-act{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:6px}
.s7-go{display:inline-flex;align-items:center;min-height:50px;padding:0 22px;border-radius:4px;background:var(--pink);color:#160008;font-weight:700;
  font-size:var(--t2);text-decoration:none;transition:transform .24s var(--e)}
.s7-go:hover{transform:translateY(-2px)}
.s7-more{color:var(--cream);font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(235,222,208,.4)}
.s7-fine{font-size:var(--t1)!important;color:var(--stone)!important}
.s7-swatch{display:flex;gap:6px}
.s7-swatch span{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.s7-q{max-width:min(640px,46vw);top:0;bottom:0;align-content:center}
.s7-q blockquote{margin:0;font-size:var(--t4);font-weight:700;line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.s7-q .by{margin:0;font-size:var(--t1);color:var(--stone)}
.s7-q .by b{color:var(--cream)}

/* Four-99's badge and colors, sharp on the right */
.s7-badge{position:absolute;right:8vw;top:50%;transform:translateY(-55%);display:grid;justify-items:center;gap:22px}
.s7-badge img{width:min(36vw,52vh);aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 0 120px rgba(255,45,120,.3)}
.s7-chips{display:flex;gap:8px}
.s7-chips span{width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
/* their site, held in front of their truck */
.s7-phone{position:absolute;right:12vw;top:9vh;height:76vh;aspect-ratio:780/1688;perspective:1600px}
.s7-phone .scr{width:100%;height:100%;border-radius:32px;border:9px solid #1d1b1e;overflow:hidden;transform:rotateY(-16deg) rotateX(5deg) rotateZ(3deg);
  box-shadow:-30px 50px 90px rgba(0,0,0,.75),0 0 90px rgba(0,188,212,.22)}
.s7-phone img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* five demonstration builds sliding past */
.s7-strip{position:absolute;left:0;top:15vh;display:flex;gap:22px;padding-left:var(--gx);will-change:transform}
.s7-strip figure{margin:0;width:min(44vw,600px);flex:none;display:grid;gap:10px}
.s7-strip img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.s7-strip figcaption{display:grid;gap:2px;font-size:var(--t1);color:var(--stone)}
.s7-strip figcaption b{font-size:var(--t3);color:var(--cream);letter-spacing:-.02em}
.s7-work .s7-ly:last-of-type{background:radial-gradient(120% 90% at 50% 20%,#1a1416 0%,var(--ink) 70%)}

/* the object that stays: rails */
.s7-rail{position:absolute;z-index:6;left:var(--gx);right:var(--gx);top:92px;margin:0;padding:0;list-style:none;display:flex;gap:6px}
.s7-rail li{flex:1;display:grid;gap:8px;font-size:var(--t1);font-weight:600;color:rgba(235,222,208,.45);transition:color .4s var(--e)}
.s7-rail li::before{content:"";height:3px;border-radius:2px;background:rgba(235,222,208,.18);transition:background .4s var(--e)}
.s7-rail li.on{color:var(--cream)}
.s7-rail.meter li.fill::before{background:var(--purple)}
.s7-rail.years li.on::before,.s7-rail.index li.on::before{background:var(--cream)}
.s7-rail.years li.past::before,.s7-rail.index li.past::before{background:rgba(235,222,208,.5)}
/* the object that stays: the device on The Site */
.s7-dev{position:absolute;z-index:4;right:6vw;top:50%;width:min(52vw,820px);transform:translateY(-52%);border-radius:10px;overflow:hidden;background:#111;
  box-shadow:0 40px 140px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12);opacity:0;transition:opacity .5s var(--e),width .7s var(--e),border-radius .7s var(--e)}
.s7-dev.on{opacity:1}
.s7-dev .bar{display:flex;gap:6px;padding:10px 14px;background:#1b1a1c;transition:height .5s}
.s7-dev .bar i{width:9px;height:9px;border-radius:50%;background:#3a3836}
.s7-dev .scr{position:relative;aspect-ratio:16/10}
.s7-dev .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity .6s var(--e)}
.s7-dev .scr img.on{opacity:1}
.s7-dev.phone{width:min(22vw,300px);border-radius:30px;border:9px solid #1d1b1e}
.s7-dev.phone .bar{display:none}
.s7-dev.phone .scr{aspect-ratio:9/19.5}

@media (max-width:760px){
  .s7{height:calc(var(--n) * 62vh + 30vh)}
  .s7-cap,.s7-q{left:16px;right:16px;max-width:none;bottom:6vh}
  .s7-q{top:auto;align-content:end}
  .s7-left{background:linear-gradient(to top,rgba(6,5,7,.96) 35%,rgba(6,5,7,.6) 65%,rgba(6,5,7,.2) 100%)}
  .s7-badge{right:50%;transform:translateX(50%);top:14vh}
  .s7-badge img{width:52vw}
  .s7-chips span{width:30px;height:30px}
  .s7-phone{right:auto;left:50%;margin-left:-10.5vh;top:14vh;height:45vh}
  .s7-strip{top:16vh}
  .s7-strip figure{width:72vw}
  .s7-rail{top:74px;left:16px;right:16px}
  .s7-rail li span{display:none}
  .s7-rail li.on span{display:block;white-space:nowrap}
  .s7-dev{left:50%;right:auto;top:14vh;width:88vw;transform:translateX(-50%)}
  .s7-dev.phone{width:42vw}
  .s7-the-site .s7-cap{background:linear-gradient(to top,var(--ink) 70%,rgba(6,5,7,0));padding-top:30px}
}
@media (prefers-reduced-motion:reduce){.s7-cap,.s7-q,.s7-dev,.s7-dev .scr img{transition:none}}

/* craft step 2: the object each page keeps on screen */
.s7-price{position:absolute;z-index:6;right:var(--gx);top:118px;margin:0;display:grid;justify-items:end;gap:2px;opacity:0;transition:opacity .4s var(--e)}
.s7.priced .s7-price{opacity:1}
.s7-price span{font-size:var(--t1);font-weight:600;color:var(--stone)}
.s7-price b{font-size:var(--t5);font-weight:700;letter-spacing:-.05em;line-height:.9;color:var(--cream);text-shadow:0 4px 40px rgba(0,0,0,.5);
  background:linear-gradient(var(--purple),var(--purple)) no-repeat 0 100%/100% 8px;padding-bottom:10px}
.s7-num{position:absolute;z-index:6;right:var(--gx);top:96px;margin:0;font-size:var(--t5);font-weight:700;letter-spacing:-.05em;line-height:.9;
  color:transparent;-webkit-text-stroke:1.5px rgba(235,222,208,.7);font-variant-numeric:tabular-nums}
.s7-thumbs{position:absolute;z-index:6;right:var(--gx);bottom:9vh;display:flex;gap:12px}
.s7-thumbs a{display:grid;gap:8px;width:clamp(96px,10vw,150px);color:var(--stone);text-decoration:none;font-size:var(--t1);font-weight:600;transition:color .3s var(--e)}
.s7-thumbs img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:6px;opacity:.55;box-shadow:0 0 0 1px rgba(235,222,208,.18);transition:opacity .3s var(--e),box-shadow .3s var(--e),transform .3s var(--e)}
.s7-thumbs a.on{color:var(--cream)}
.s7-thumbs a.on img,.s7-thumbs a:hover img{opacity:1;box-shadow:0 0 0 2px var(--cream);transform:translateY(-4px)}
@media (max-width:760px){
  .s7-price{top:78px}
  .s7-num{top:70px}
  .s7-thumbs{left:16px;right:auto;top:76px;bottom:auto;gap:8px}
  .s7-thumbs a{width:58px}
  .s7-thumbs span{display:none}
}

.s7-more{transition:text-decoration-color .3s var(--e)}
.s7-more:hover{text-decoration-color:var(--cream)}

/* long lists get a deeper ground; on phones every caption sits on ink, never on a busy picture */
.s7-shade.deep{background:linear-gradient(to top,rgba(6,5,7,.97) 0%,rgba(6,5,7,.86) 45%,rgba(6,5,7,.25) 80%,rgba(6,5,7,0) 100%)}
.s7-cap.long li{font-size:var(--t1)}
@media (max-width:760px){
  .s7-cap{background:linear-gradient(to top,var(--ink) 0%,var(--ink) 72%,rgba(6,5,7,0) 100%);padding-top:44px;margin-bottom:-6vh;padding-bottom:6vh;left:0;right:0;padding-left:16px;padding-right:16px}
  .s7-cap.long p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* stranger panel: the price sits under the size meter on phones, never on it */
@media (max-width:760px){.s7-price{top:112px}}