/* ═══ v4 — EXPOSURE ═════════════════════════════════════════
   PHILOSOPHY  Darkroom. Warm blacks, mono numerals, nothing
               shouts. The page is a print coming up in a tray.
   NAV         Starts under the mark on beat 1, travels to the
               top edge as you leave it.
   SCROLL      Two rigs, switchable: slide-up and fly-out.
   CURSOR      One per beat: beam · spotlight · comet · reticle ·
               gel · pulse.
   COPY        Live. No placeholders, no pending markers.
   ═════════════════════════════════════════════════════════════ */
body{font:400 15.5px/1.62 var(--body)}
.h{font-family:var(--display);font-weight:700;line-height:.9;
  text-transform:uppercase;letter-spacing:-.005em;margin:0}
.mn{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3)}
.beat{padding:104px clamp(22px,5vw,88px) clamp(56px,8vh,92px);align-content:center}
.beat::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:color-mix(in srgb,var(--fg) 22%,transparent)}
.beat:first-child::before{display:none}

/* ── beat 1 · the mark, lit by a beam that follows the cursor ─ */
.hero{padding:0;align-content:center;justify-items:center;text-align:center}
.hero__in{position:relative;z-index:2;width:min(74vw,900px)}
.bl-hero{overflow:visible}
.bl-hero .blh-base{fill:var(--hero-dim)}
.bl-hero .blh-s0{stop-color:var(--beam-hot)}
.bl-hero .blh-s1{stop-color:var(--beam-lit)}
.bl-hero .blh-s2{stop-color:var(--beam-lit);stop-opacity:0}
.bl-hero .blh-spill{opacity:.13}
:root[data-theme="light"] .bl-hero .blh-spill{opacity:.07}
.bl-hero .bl-dot{filter:drop-shadow(0 0 26px color-mix(in srgb,var(--yellow) 85%,transparent))
                        drop-shadow(0 0 70px color-mix(in srgb,var(--yellow) 40%,transparent))}
.hero__sub{margin:24px 0 0;color:var(--fg-3);max-width:46ch;margin-inline:auto}
.hint{position:absolute;z-index:2;bottom:26px;left:50%;transform:translateX(-50%);
  color:var(--fg-3);opacity:calc(1 - var(--p,0)*9)}
@media (hover:none),(pointer:coarse){.hint{display:none}}

/* ── beat 2 · the tagline ─────────────────────────────────── */
.tag{font-size:clamp(40px,9.4vw,138px);margin:0;max-width:16ch}
.tag em{font-style:normal;display:block}
.tag .lit{font-family:var(--script);font-weight:400;color:var(--yellow);
  text-transform:none;letter-spacing:0;line-height:1.05;
  font-size:1.06em;padding-left:.06em;
  filter:drop-shadow(0 0 22px color-mix(in srgb,var(--yellow) 30%,transparent))}
.body{color:var(--fg-2);max-width:52ch;margin:26px 0 0}
.spec{display:flex;gap:clamp(16px,3vw,42px);margin-top:30px;flex-wrap:wrap}
.spec div{border-top:1px solid var(--line);padding-top:10px;min-width:132px}
.spec b{display:block;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:15px}
.spec span{color:var(--fg-3);font-size:11.5px;font-family:var(--mono)}

/* ── service beats ────────────────────────────────────────── */
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.top h2{font-size:clamp(30px,6.6vw,96px);margin:5px 0 0}
.all{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3);display:inline-flex;gap:7px;padding-bottom:5px;
  border-bottom:1px solid var(--line);transition:color .22s,border-color .22s}
@media(hover:hover){.all:hover{color:var(--yellow);border-color:var(--yellow)}}
.lead{color:var(--fg-2);max-width:58ch;margin:14px 0 0}

.sheet{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(7px,1.1vw,13px);margin-top:24px}
@media(max-width:760px){.sheet{grid-template-columns:repeat(2,1fr)}}
.sheet figure{margin:0;position:relative;overflow:hidden;background:#0A0A0C;aspect-ratio:3/2}
.sheet img{transition:transform 1.1s var(--ease)}
@media(hover:hover){.sheet figure:hover img{transform:scale(1.06)}}
.sheet em{position:absolute;top:7px;left:8px;z-index:2;font-family:var(--mono);
  font-size:9px;letter-spacing:.1em;color:rgba(255,255,255,.72);font-style:normal}
.sheet figcaption{position:absolute;left:0;right:0;bottom:0;padding:11px 12px;font-size:11.5px;
  line-height:1.3;background:linear-gradient(180deg,transparent,rgba(0,0,0,.92));color:#F2F1EC}
.sheet figcaption b{display:block;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:13px}
.sheet figcaption small{opacity:.7;font-family:var(--mono);font-size:9.5px}

/* ── beat 6 · contact ─────────────────────────────────────── */
.contact{text-align:center}
.contact h2{font-size:clamp(34px,8.4vw,130px)}
.contact .body{margin-inline:auto;max-width:46ch}
.mail{display:inline-block;margin-top:22px;font-size:clamp(16px,2.4vw,27px);padding-bottom:5px;
  border-bottom:1px solid var(--fg-3);transition:border-color .3s}
@media(hover:hover){.mail:hover{border-color:var(--yellow)}}
.tel{display:block;margin-top:12px;color:var(--fg-3);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em}
@media(hover:hover){.tel:hover{color:var(--fg)}}
.foot{position:absolute;left:clamp(22px,5vw,88px);right:clamp(22px,5vw,88px);bottom:16px;
  display:flex;justify-content:space-between;gap:12px;color:var(--fg-3);font-size:10px;
  font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}