/* =============================================
   Home page

   One working day, told over a street that slides past. The sky runs from
   dawn to night behind the page, a van drives between the jobs, and each
   beat in the copy is a stop on the way. js/home.js draws the street and
   moves everything with the scroll. Everything here is under .hm, so none of
   it rides along on the other pages.

   Archivo is declared here as well as in websites.css because only these two
   pages use it. Same file, so it is one download either way.
============================================= */
@font-face{font-family:'Archivo';src:url('fonts/archivo-condensed.woff2') format('woff2');font-weight:800 900;font-stretch:62% 90%;font-display:swap}

.hm{--ink:#eeeef1;--ink-2:#b9bcc8;--cond:'Archivo','Arial Narrow',sans-serif;--nav:72px;
  /* the side margin, nudged out to the notch / Dynamic Island's safe edge on a phone on its side (0 elsewhere), so copy sits as close to the island as it can without being covered */
  --gut:max(clamp(16px,5vw,64px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  --street:clamp(96px,min(24vh,28vw),280px)}
@media (max-width:860px){.hm{--nav:60px}}
html .nav-inner{padding-left:max(clamp(1.25rem,5vw,4rem),env(safe-area-inset-left,0px));padding-right:max(clamp(1.25rem,5vw,4rem),env(safe-area-inset-right,0px))}
html .rw-bubble{right:calc(20px + env(safe-area-inset-right,0px))}
@media (max-width:480px){html .rw-bubble{right:calc(12px + env(safe-area-inset-right,0px))}}
/* Phones with a notch or Dynamic Island: the nav is one solid bar all the way up into the cutout
   (index.html asks for viewport-fit=cover), the same colour as the browser's own top strip
   (theme-color), so there's no seam above it. The insets are 0 where the browser doesn't
   let the page reach up there. */
@media (max-width:860px){
  html .nav{height:calc(60px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);background:#0a0a0b;border-bottom-color:var(--color-divider)}
  html .nav-links-wrap.open{top:calc(60px + env(safe-area-inset-top,0px))}
  .hm{--nav:calc(60px + env(safe-area-inset-top,0px))}
}
@media (max-width:899px){.hm{--street:clamp(140px,42vw,200px)}}
.hm h1,.hm h2,.hm h3{text-wrap:balance}

/* ═══ THE SKY ═══
   Absolutely placed and full height, with the sky itself sticky inside, so
   it stays put for the whole day and lets go when the day ends. */
.day{position:relative;background:#0b1120}
.sky-wrap{position:absolute;inset:0;z-index:0;pointer-events:none}
.sky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.sky-bg{position:absolute;inset:0;background:linear-gradient(to bottom,var(--s1,#0b1226) 0%,var(--s2,#252a4a) 58%,var(--s3,#a5684f) 100%)}
.stars{position:absolute;inset:0 0 35% 0;opacity:.5;background-image:
  radial-gradient(1.4px 1.4px at 8% 14%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 17% 32%,#fff 50%,transparent 52%),
  radial-gradient(1.2px 1.2px at 26% 9%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 34% 41%,#fff 50%,transparent 52%),
  radial-gradient(1.5px 1.5px at 43% 21%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 51% 6%,#fff 50%,transparent 52%),
  radial-gradient(1.1px 1.1px at 59% 36%,#fff 50%,transparent 52%),radial-gradient(1.4px 1.4px at 67% 16%,#fff 50%,transparent 52%),
  radial-gradient(1px 1px at 74% 44%,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 82% 11%,#fff 50%,transparent 52%),
  radial-gradient(1px 1px at 90% 29%,#fff 50%,transparent 52%),radial-gradient(1.4px 1.4px at 96% 52%,#fff 50%,transparent 52%),
  radial-gradient(1px 1px at 4% 48%,#fff 50%,transparent 52%),radial-gradient(1.1px 1.1px at 22% 58%,#fff 50%,transparent 52%),
  radial-gradient(1px 1px at 63% 60%,#fff 50%,transparent 52%),radial-gradient(1.2px 1.2px at 47% 52%,#fff 50%,transparent 52%)}
.orb{position:absolute;left:0;top:0;border-radius:50%;will-change:transform;transform:translate(-200px,-200px)}
.sun{width:clamp(36px,9vmin,104px);height:clamp(36px,9vmin,104px);background:var(--sunc,#ffb06b)}
.moon{width:clamp(30px,5vmin,54px);height:clamp(30px,5vmin,54px);background:#eceadf;box-shadow:inset -9px -4px 0 0 rgba(0,0,0,.12)}

/* ═══ THE STREET ═══
   Painted onto a canvas by home.js, in the light of the hour. The van is
   SVG on top; its colours come in as --name custom properties. */
.street{position:absolute;left:0;right:0;bottom:0;height:var(--street);overflow:hidden}
.street canvas{position:absolute;left:0;bottom:0;width:100%;height:100%;display:block}
.hm .van{max-width:none}
.van .vb{fill:var(--vb)}.van .vs{fill:var(--vs)}.van .vd{fill:var(--vd)}.van .vg{fill:var(--vg)}.van .vgh{fill:var(--vgh)}.van .vst{fill:var(--vst)}.van .vlg{fill:var(--vlg)}.van .vsl{fill:var(--vsl)}.van .tyr{fill:var(--tyr)}.van .rim{fill:var(--rim)}.van .alu{fill:var(--alu)}

/* the van */
.van{position:absolute;left:0;bottom:0;overflow:visible;will-change:transform;transform-origin:0 0}
.van .vshadow{fill:#000;opacity:.28}
.van .beam{fill:url(#beamg);opacity:var(--beam,0)}
.van .vbody{transform:translateY(var(--bob,0px))}
.van .letters{transform:scaleX(var(--face,1));transform-box:fill-box;transform-origin:center}
.van .vlogo{font:800 13px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.3px}
.van .vtag{font:700 3.3px/1 var(--font-body);letter-spacing:.06px;fill:var(--vlg)}
.van .vurl{font:700 4.4px/1 var(--font-mono);fill:var(--vst)}
.van .tail{fill:#9c2a24}
.van.braking .tail{fill:#ff3b30;filter:drop-shadow(0 0 2px #ff3b30)}
.van .ind{fill:#b8751a}
.van.indicating .ind{animation:d-blink .7s steps(1) infinite}
@keyframes d-blink{0%{fill:#ffb238}50%{fill:#7a4d10}}
.van .hl{fill:#fff3cf}
.van.asleep .hl{fill:#8a8370}
.van .wheel{transform:rotate(var(--spin,0deg))}

/* what happens on the street at each moment */
.pins{position:absolute;inset:0}
.pin{position:absolute;left:0;top:0;will-change:transform}
.pin-in{display:flex;align-items:center;gap:8px;transform:translate(-50%,-100%) scale(.6);transform-origin:50% 100%;opacity:0;
  transition:opacity .22s ease,transform .3s cubic-bezier(.2,.9,.3,1.3);
  background:#fff;color:#14161a;font:700 .8125rem/1 var(--font-body);padding:7px 12px 7px 7px;border-radius:999px;white-space:nowrap;box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.pin-in::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:2px;z-index:-1}
.pin.on .pin-in{opacity:1;transform:translate(-50%,calc(-100% - 8px)) scale(1)}
.pin-i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#e9eaee;color:#2b2f36;flex:none}
.pin[data-tone="sys"] .pin-i{background:var(--sys);color:#06272a}
.pin[data-tone="loss"] .pin-i{background:var(--loss);color:#3a1405}
.pin.on[data-ring] .pin-i{animation:d-ring .9s ease-in-out infinite}
@keyframes d-ring{0%,40%,100%{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%{transform:rotate(14deg)}}
@media (max-width:899px){.pin-in{font-size:.75rem;padding:6px 10px 6px 6px}.pin-i{width:22px;height:22px}.pin-i svg{width:12px;height:12px}}

/* ═══ THE COPY ═══ */
.day-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(280px,30%) minmax(0,1fr);color:var(--ink)}
.day-grid,.day-grid p,.d-go,.rail,.d-row{transition:color .35s ease,border-color .35s ease}
.day.ink-dark{--ink:#0d1520;--ink-2:#2c3a4c}

.d-hero{grid-column:1/-1;position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:26px;
  padding:calc(var(--nav) + 40px) var(--gut) calc(var(--street) + 48px)}
.d-hero h1{font:600 clamp(2.4rem,1rem + 4vw,5.2rem)/.98 var(--font-display);letter-spacing:-.022em;max-width:15ch;color:var(--ink)}
.d-sub{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.6;color:var(--ink-2);max-width:52ch}
.d-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.d-price{font:500 .8125rem/1.7 var(--font-mono);color:var(--ink-2);letter-spacing:.02em}
.d-price a{color:var(--ink);text-underline-offset:4px}
.d-clock{position:absolute;right:var(--gut);bottom:calc(var(--street) + 64px);text-align:right}
.d-clock span{display:block;font:500 .75rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.d-clock b{font:900 clamp(3.5rem,2rem + 4vw,6rem)/.82 var(--cond);font-stretch:62%;font-variant-numeric:tabular-nums}
@media (max-width:899px){.d-clock{display:none}}
.d-link{font:700 .9375rem/1.3 var(--font-body);text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px;color:var(--ink)}
.d-link:hover{text-decoration-thickness:2px}

/* the clock down the left of the day */
.mid{grid-column:1/-1;display:grid;grid-template-columns:minmax(280px,30%) minmax(0,1fr)}
.rail{grid-column:1;grid-row:1;align-self:start;position:sticky;top:var(--nav);height:calc(100svh - var(--nav));display:flex;flex-direction:column;justify-content:center;padding:0 0 calc(var(--street) * .5) var(--gut);color:var(--ink)}
.rail-d{font:500 .75rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:16px}
.rail-t{font:900 clamp(5rem,9.2vw,10.5rem)/.82 var(--cond);font-stretch:62%;font-variant-numeric:tabular-nums;letter-spacing:-.005em}
.beats{grid-column:2;grid-row:1}

.beat{min-height:100svh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center;padding:14svh var(--gut) 14svh clamp(16px,3vw,48px)}
.beat--short{min-height:72svh;grid-template-columns:minmax(0,1fr)}
.beat-time{font:900 4.4rem/.85 var(--cond);font-stretch:62%;font-variant-numeric:tabular-nums;margin-bottom:18px;display:block}
.beat h2{font:600 clamp(1.75rem,1rem + 1.9vw,2.8rem)/1.04 var(--font-display);letter-spacing:-.012em;margin-bottom:16px;max-width:15ch}
.beat>div:first-child>p{font-size:1.0625rem;line-height:1.62;color:var(--ink-2);max-width:40ch}
.d-go{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font:700 .9375rem/1 var(--font-body);color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.art{justify-self:center;position:relative;width:100%;display:flex;flex-direction:column;align-items:center}
.d-cap{font:500 .75rem/1.5 var(--font-mono);color:var(--ink-2);letter-spacing:.02em;margin-top:16px;text-align:center;max-width:34ch}
@media (min-width:900px){.beat-time{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media (max-width:899px){
  .day-grid,.mid{display:block}
  .rail{display:none}
  .beat{display:flex;flex-direction:column;align-items:stretch;min-height:0;gap:36px;padding:18svh var(--gut) 8svh}
  .beat--short{padding-bottom:18svh}
  /* the price line and websites link wait for the page; the hero just invites the scroll */
  .d-price{display:none}
  /* the example site and the customer's chat take a whole screen on a phone */
  #b2 .art,#b4 .art{display:none}
  /* calmer on a small screen: less size, less empty sky */
  .beat{gap:28px;padding:12svh var(--gut) 6svh}
  .beat--short{padding-bottom:12svh}
  /* the first section starts up under the hero's street; its copy stays hidden until it clears the rooftops */
  #b1{padding-top:2svh;margin-top:-16svh}
  .beat-time{font-size:3.4rem;margin-bottom:12px}
  .beat h2{font-size:1.65rem;margin-bottom:12px}
  .beat>div:first-child>p{font-size:1rem;line-height:1.58}
  .d-go{margin-top:18px}
  /* the pricing list matches the other sections' type */
  .hm .beat--list{padding-left:var(--gut)}
  /* shorter: the section above already told the story, so just name, one line and price */
  .ph-skip,.hm .d-row-d{display:none}
  .hm .d-row{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:4px 16px;padding:18px 0}
  .hm .d-row-n{grid-column:1;grid-row:1}
  .hm .d-row-p{grid-column:2;grid-row:1;margin-top:0;text-align:right;max-width:11.5rem}
  .hm .d-row-p b{font-size:1.9rem}
  .hm .d-row svg{display:none}
  .hm .beat--list h2.d-h2{font-size:1.65rem;line-height:1.04}
  .hm .d-lede{font-size:1rem;line-height:1.58}
  .hm .d-row-n{font-size:1.2rem}
  .hm .d-row-d{font-size:.9375rem;line-height:1.5}
  .hm .d-row-p b{font-size:2.3rem}
  /* the two example boxes, 30% smaller again */
  .d-phone{zoom:.7}
  /* the roundup runs the full width, with the text a touch larger to keep its height */
  .hm .note{zoom:.8;width:100%}
}

/* copy fades in from the rooftops (js/home.js sets --cut) */
.em{-webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--cut,0px) - var(--fade,70px)),transparent var(--cut,0px));mask-image:linear-gradient(to bottom,#000 calc(var(--cut,0px) - var(--fade,70px)),transparent var(--cut,0px))}

/* phones and messages */
.d-phone{width:min(100%,312px);border-radius:42px;background:#0c0d10;border:9px solid #18191d;box-shadow:0 40px 70px -30px rgba(0,0,0,.55);overflow:hidden;color:#e8e8ea;font-size:.875rem}
.ph-bar{display:flex;justify-content:space-between;padding:13px 24px 4px;font:700 .75rem/1 var(--font-body)}
.ph-who{text-align:center;padding:10px 0 13px;border-bottom:1px solid #222327}
.ph-who b{display:block;font-weight:700;font-size:.9375rem}
.ph-who small{color:#8a8a96;font-size:.75rem}
.thread{display:flex;flex-direction:column;gap:10px;padding:16px 14px 24px}
.sysl{align-self:center;font:500 .6875rem/1 var(--font-mono);letter-spacing:.04em;color:var(--loss);padding:4px 0 6px}
.bub{max-width:84%;padding:10px 13px;border-radius:18px;line-height:1.42}
.bub.out{align-self:flex-end;background:var(--sys);color:#06272a;border-bottom-right-radius:6px}
.bub.in{align-self:flex-start;background:#26272c;border-bottom-left-radius:6px}
.bmeta{align-self:flex-end;font:500 .6875rem/1 var(--font-mono);color:#8a8a96;display:flex;gap:6px;align-items:center;margin-top:-4px}
.bmeta i{font-style:normal;color:var(--sys);border:1px solid rgba(92,225,230,.35);padding:3px 5px;border-radius:3px}

/* their site, on a phone */
.d-phone.site{background:#f3f1ec;color:#141414}
.ms-head{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fff;border-bottom:1px solid #e7e4dc}
.ms-mark{width:26px;height:26px;display:grid;place-items:center;background:#f4511e;color:#fff;font:900 .9rem/1 var(--cond);flex:none}
.ms-name{font:900 .8125rem/1 var(--cond);font-stretch:80%;text-transform:uppercase;letter-spacing:.01em;flex:1;min-width:0}
.ms-name small{display:block;font:600 .5625rem/1.4 var(--font-body);letter-spacing:.14em;color:#777}
.ms-call{background:#f4511e;color:#fff;font:900 .75rem/1 var(--cond);font-stretch:80%;letter-spacing:.05em;padding:8px 10px;text-transform:uppercase}
.ms-hero{position:relative;height:318px;overflow:hidden}
.ms-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ms-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.05) 20%,rgba(0,0,0,.75))}
.ms-copy{position:absolute;left:14px;right:14px;bottom:16px;z-index:1;color:#fff}
.ms-tag{display:inline-block;background:#f4511e;font:800 .5625rem/1 var(--font-body);letter-spacing:.14em;padding:5px 7px;text-transform:uppercase;margin-bottom:10px}
.ms-h{font:900 2.1rem/.9 var(--cond);font-stretch:62%;text-transform:uppercase}
.ms-sub{font-size:.75rem;line-height:1.4;margin-top:8px;opacity:.9}
.ms-btn{display:inline-block;margin-top:12px;background:#f4511e;font:900 .75rem/1 var(--cond);font-stretch:80%;letter-spacing:.06em;padding:11px 13px;text-transform:uppercase}
.ms-areas{background:#141414;color:#fff;font:800 .625rem/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;padding:11px 12px;white-space:nowrap;overflow:hidden}
.ms-areas span{color:#f4511e;padding:0 7px}

/* quote chase: just the two messages, no phone */
.chase{display:flex;flex-direction:column;gap:12px;width:min(100%,380px)}
.chase-k{font:500 .75rem/1 var(--font-mono);color:var(--ink-2);letter-spacing:.02em}
.chase .bub{max-width:90%;font-size:.9375rem;box-shadow:0 14px 30px -18px rgba(0,0,0,.45)}
.chase .bub.in{background:#fff;color:#151515}
.chase-f{font:500 .75rem/1.4 var(--font-mono);color:var(--ink-2);align-self:flex-start;margin-top:4px}

/* the customer's phone at 21:40 */
.d-phone.cust{background:#fff;color:#1b1b1f;height:min(620px,calc(100svh - 190px));min-height:460px;display:flex;flex-direction:column}
.cust .ph-bar{color:#111}
.cu-head{display:flex;gap:10px;align-items:center;padding:10px 14px 12px;background:#0f766e;color:#fff}
.cu-av{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-weight:700;flex:none}
.cu-head b{display:block;font-size:.875rem;line-height:1.25}
.cu-head small{opacity:.85;font-size:.6875rem}
.cu-log{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:12px 12px 16px}
.cu-m{align-self:flex-start;max-width:84%;padding:9px 12px;background:#f1f2f4;border-radius:14px 14px 14px 4px;font-size:.8125rem;line-height:1.4;flex:none}
.cu-m.me{align-self:flex-end;background:#0f766e;color:#fff;border-radius:14px 14px 4px 14px}
.cu-opts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;flex:none}
.cu-opts span{position:relative;padding:8px 12px;border:1.5px solid #0f766e;border-radius:20px;font-size:.78rem;font-weight:700;color:#1f2328;background:#fff;transition:background .25s .45s,color .25s .45s,opacity .25s .45s}
.cu-opts.in span:not(.sel){opacity:.35}
.cu-opts.in .sel{background:#0f766e;color:#fff}
.cu-opts.in .sel::after{content:"";position:absolute;inset:-6px;border-radius:24px;border:2px solid #0f766e;opacity:0;animation:d-tap .6s ease-out .4s 1}
@keyframes d-tap{0%{opacity:.6;transform:scale(.8)}100%{opacity:0;transform:scale(1.25)}}
.cu-pics{align-self:flex-end;display:flex;gap:5px;flex:none}
.cu-pics img{width:86px;height:86px;object-fit:cover;border-radius:12px;border:2px solid #0f766e}
.cu-sent{align-self:center;display:flex;align-items:center;gap:6px;font:500 .6875rem/1 var(--font-mono);color:#0f766e;background:#e7f5f3;padding:8px 11px;border-radius:999px;flex:none}
.cust.play .st:not(.in){display:none}
.cust.play .st.in{animation:d-pop .34s cubic-bezier(.2,.9,.3,1.25) both}
.cust.play .cu-m.st.in:not(.me){transform-origin:bottom left}
.cust.play .me.st.in,.cust.play .cu-pics.st.in,.cust.play .cu-opts.st.in{transform-origin:bottom right}
@keyframes d-pop{from{opacity:0;transform:scale(.85) translateY(6px)}}

/* the morning text */
.note{width:min(100%,384px);background:#f6f6f8;color:#141416;border-radius:22px;padding:16px 18px 18px;box-shadow:0 40px 70px -30px rgba(0,0,0,.6)}
.note-top{display:flex;justify-content:space-between;font-size:.75rem;color:#5c5c66;margin-bottom:6px}
.note b.from{display:block;font-size:.9375rem;margin-bottom:6px}
.note p{color:#26262a;font-size:.875rem;line-height:1.5}
.note ul{margin:8px 0 0;padding:0 0 0 18px;font-size:.875rem;line-height:1.5;display:grid;gap:6px;list-style:disc}

/* ═══ WHERE TO START ═══
   A price list rather than cards. It sits on the morning sky, so its lines
   take the ink colour of the hour. */
.beat--list{display:block;min-height:0;padding:16svh var(--gut) 8svh clamp(16px,3vw,48px)}
.d-h2{font:600 clamp(2.1rem,1rem + 3vw,3.6rem)/1 var(--font-display);letter-spacing:-.018em}
.d-lede{color:var(--ink-2);font-size:1.0625rem;line-height:1.65;max-width:50ch;margin-top:16px}
.d-rows{margin-top:clamp(28px,4vw,44px);border-top:1px solid color-mix(in srgb,var(--ink) 28%,transparent)}
.d-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) 200px 24px;gap:12px 40px;align-items:center;padding:26px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 28%,transparent);text-decoration:none;color:var(--ink)}
.d-row-n{font:600 clamp(1.25rem,1rem + .6vw,1.6rem)/1.1 var(--font-display)}
.d-row-n small{display:block;margin-top:10px;font:500 .75rem/1.35 var(--font-mono);color:var(--ink-2)}
.d-row-d{color:var(--ink-2);line-height:1.55;max-width:46ch}
.d-row-p{text-align:right}
.d-row-p b{display:block;font:900 clamp(2.6rem,2rem + 1.8vw,3.6rem)/.85 var(--cond);font-stretch:62%;font-variant-numeric:tabular-nums}
.d-row-p small{display:block;margin-top:8px;font:500 .75rem/1.35 var(--font-mono);color:var(--ink-2)}
.d-row svg{transition:transform .18s}
.d-row:hover svg{transform:translateX(4px)}
.d-row:hover .d-row-n{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.d-list-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:22px;font-size:.9375rem;color:var(--ink-2)}
.d-list-foot a{color:var(--ink);font-weight:700;text-underline-offset:5px}
@media (max-width:1100px){
  .d-row{grid-template-columns:minmax(0,1fr) 24px;gap:8px 16px;padding:24px 0}
  .d-row-n,.d-row-d{grid-column:1}
  .d-row-p{grid-column:1;text-align:left;margin-top:6px}
  .d-row svg{grid-column:2;grid-row:1}
}

/* ═══ THE LAST SHOT ═══
   The van pulls up and the camera moves in. The copy is sticky so it holds
   still while that happens, then everything scrolls away to the footer. */
.finale{grid-column:1/-1;height:195svh;position:relative}
.fin-in{position:sticky;top:0;height:100svh;padding:calc(var(--nav) + clamp(20px,5svh,56px)) var(--gut) 0}
.fin-copy{max-width:600px}
.fin-copy .d-h2{font-size:clamp(2rem,1rem + 2.6vw,3.4rem)}
.fin-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:26px}
.d-sign{margin-top:24px;font:500 .75rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.d-sign b{margin-right:10px;color:var(--ink)}

/* ═══ PHONES ON THEIR SIDE ═══
   A short, wide screen: the street, nav and type come down to fit, and the
   copy goes back to two columns so a section fits in the space above the roofs.
   Kept last so it wins over the phone and desktop rules above. */
@media (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .hm{--street:clamp(96px,33vh,150px);--nav:48px}
  html .nav{height:calc(48px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px)}
  html .nav-links-wrap.open{top:calc(48px + env(safe-area-inset-top,0px))}
  .d-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(20px,4vw,48px);row-gap:14px;align-content:center;align-items:center;
    padding:calc(var(--nav) + 12px) var(--gut) calc(var(--street) + 10px)}
  .d-hero h1{grid-row:1/3;font-size:clamp(1.7rem,4.6vw,2.5rem);max-width:12ch}
  .d-sub{font-size:.875rem;line-height:1.45;align-self:end}
  .d-cta{align-self:start;gap:10px 24px}
  .d-cta .btn-primary{min-height:44px;padding-block:.55rem}
  .d-price,.d-clock{display:none}
  .beat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,40px);align-items:center;min-height:100svh;
    padding:calc(var(--nav) + 8px) var(--gut) calc(var(--street) * .8)}
  .beat--short{grid-template-columns:minmax(0,1fr)}
  #b1{margin-top:0;padding-top:calc(var(--nav) + 8px)}
  .beat{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
  .beat-time{font-size:2rem;margin-bottom:4px}
  .beat h2{font-size:1.3rem;margin-bottom:6px;max-width:none}
  .beat>div:first-child>p{font-size:.8125rem;line-height:1.45;max-width:none}
  .d-go{margin-top:10px;font-size:.8125rem}
  .d-phone{zoom:.55}
  .hm .note{zoom:.6;width:100%}
  .beat--list{display:block;min-height:0;padding:calc(var(--nav) + 8px) var(--gut) calc(var(--street) + 24px)}
  .hm .beat--list h2.d-h2{font-size:1.3rem}
  .hm .d-lede{font-size:.8125rem;line-height:1.45;margin-top:8px}
  .hm .d-rows{margin-top:14px}
  .hm .d-row{padding:10px 0;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) 170px 20px;gap:4px 24px}
  .hm .d-row-n,.hm .d-row-d,.hm .d-row-p,.hm .d-row svg{grid-column:auto;grid-row:auto}
  .hm .d-row-p{text-align:right;margin-top:0}
  .hm .d-row-n{font-size:1rem}
  .hm .d-row-n small,.hm .d-row-p small{font-size:.6875rem;margin-top:4px}
  .ph-skip,.hm .d-row-d{display:none}
  .hm .d-row{grid-template-columns:minmax(0,1fr) 170px 20px}
  .hm .d-row-p b{font-size:1.9rem}
  .fin-in{padding-top:calc(var(--nav) + 12px)}
  .fin-copy{max-width:min(48%,420px)}
  .fin-copy .d-h2{font-size:1.5rem}
  .fin-copy .d-lede{font-size:.8125rem;line-height:1.5;margin-top:8px}
  .fin-cta{margin-top:12px;gap:10px 20px}
  .fin-cta .btn-primary{min-height:40px;padding-block:.45rem}
  .d-sign{margin-top:12px}
}

@media (prefers-reduced-motion:reduce){
  .hm *,.hm *::before,.hm *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .finale{height:auto}
  .fin-in{position:static;height:auto;padding-bottom:calc(var(--street) + 60px)}
}