/* ═══════════════════════════════════════════════════════════
   Galaxy Spalon — dark editorial theme
   Brand red sampled from logo.jpeg: #E0202A / #A02020
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Light page. Warm off-white rather than pure #fff — pure white next to the
     footage reads clinical, and the paper tone flatters the brand red. */
  --bg:        #FBFAF8;
  --bg-1:      #F4F1ED;
  --bg-2:      #E9E5E0;
  --ink:       #131118;
  --ink-dim:   #4C4854;
  --muted:     #757080;   /* 4.7:1 on --bg; a lighter grey fails AA on white */
  --line:      rgba(19,17,24,.14);
  --line-soft: rgba(19,17,24,.075);

  --red:       #E0202A;   /* exact brand red — fills and accents */
  --red-deep:  #A02020;
  --red-glow:  rgba(224,32,42,.3);

  /* Apple-style system stack — SF Pro on Apple hardware, Inter elsewhere.
     One family for everything; hierarchy comes from weight and tracking. */
  --f-disp: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter',
            'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-ui:   var(--f-disp);

  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1360px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
/* overflow-x must be `clip`, never `hidden`: `hidden` turns the element into a
   scroll container, and IntersectionObserver then reports document-space rects
   — which silently breaks every scroll reveal on the page. */
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip;
  /* `proximity`, not `mandatory`: the page stays free to scroll, but coming to
     rest near a beat settles onto it instead of halfway through a shot. */
  scroll-snap-type:y proximity;
}
/* zero-size markers positioned by JS at each beat's scroll offset */
.snap{ position:absolute; left:0; width:1px; height:1px; pointer-events:none; scroll-snap-align:start; }
@supports not (overflow:clip){ html{ overflow-x:hidden; } }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-ui); font-weight:300; font-size:clamp(15px,1.05vw,17px);
  line-height:1.68; letter-spacing:.004em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* Lock by pinning, not by `overflow:hidden` — overflow would turn body into a
   scroll container again and reset scroll when the class comes off. */
body.is-loading{ position:fixed; inset:0; width:100%; }
/* `top` is set inline to the locked scroll offset — without it, pinning body
   collapses the document and throws you back to the top of the page. */
body.menu-open{ position:fixed; left:0; right:0; width:100%; }
img,canvas,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red); color:#fff; }

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ── inverted islands ──────────────────────────────────────
   The page is light, but anything sitting on top of footage keeps the dark
   palette. Re-pointing the tokens here means every nested rule inverts on its
   own — no per-element overrides, no duplicated colour logic.            */
.seq__stage, .book{
  --ink:       #FFFFFF;
  --ink-dim:   rgba(255,255,255,.84);
  --muted:     rgba(255,255,255,.62);
  --line:      rgba(255,255,255,.24);
  --line-soft: rgba(255,255,255,.13);
  color:var(--ink);
}
/* captions that sit over an image inside an otherwise light section */
.card figcaption, .plate--b figcaption{ --ink:#FFFFFF; --muted:rgba(255,255,255,.66); color:#fff; }

/* ── type ─────────────────────────────────────────────── */
.h2{
  font-family:var(--f-disp); font-weight:450;
  font-size:clamp(1.6rem,3vw,2.35rem); line-height:1.14;
  letter-spacing:-.022em; margin:.1em 0 .5em;
}
.h2 em, .hero__title em{ font-style:normal; color:var(--red); }
.lead{ font-size:clamp(1rem,1.3vw,1.15rem); color:var(--ink); line-height:1.62; font-weight:300; }
.eyebrow{
  font-size:.62rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--muted); font-weight:450; margin:0 0 1.2rem;
}
p{ color:var(--ink-dim); }
.svc__price, .stat b, .book__facts dd{ font-variant-numeric:tabular-nums; }

/* ── CTAs ─────────────────────────────────────────────────
   No filled pills anywhere. Every call to action is a rule-underlined
   link; the one exception is the WhatsApp button, which earns its weight
   because it is the single thing we want tapped.                        */
.lnk{
  position:relative; display:inline-block; padding:.45rem 0 .5rem;
  font-size:.72rem; font-weight:450; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .35s var(--ease);
}
.lnk::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; opacity:.3; transition:opacity .35s var(--ease);
}
.lnk:hover{ color:var(--ink); }
.lnk:hover::after{ opacity:1; }
.lnk--lead{ color:var(--red); }
.lnk--lead:hover{ color:var(--ink); }   /* resolves light over media, dark on the page */
.hero__cta .lnk{ margin-right:1.9rem; }

/* ── grain + rail ─────────────────────────────────────── */
/* Static, not animated. A full-viewport translucent layer that repaints every
   frame forces the canvas underneath to re-composite — that was costing more
   than the grain was worth. */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.028; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scroll-rail{ position:fixed; top:0; left:0; right:0; height:2px; z-index:9997; background:transparent; }
.scroll-rail span{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:0 50%;   /* scaleX, not width — no layout per frame */
  background:linear-gradient(90deg,var(--red-deep),var(--red));
}

/* ── loader ───────────────────────────────────────────── */
.loader{
  position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ display:grid; justify-items:center; gap:1.6rem; width:min(320px,72vw); }
.loader__logo{ width:140px; background:#000; border-radius:16px; padding:12px; }
.loader__bar{ width:100%; height:2px; background:var(--line); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0; background:var(--red); transition:width .25s linear; }
.loader__pct{ margin:0; font-size:.7rem; letter-spacing:.24em; color:var(--muted); }

/* ── nav ──────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.1rem var(--pad);
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease),
             border-color .5s var(--ease), padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(251,250,248,.78); backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:var(--line-soft); padding-block:.7rem;
}
.nav.is-hidden{ transform:translateY(-110%); transition:transform .45s var(--ease); }

/* Before it goes solid the nav floats over the hero footage, so it inverts
   with the same token swap the media islands use, then returns to page ink. */
.nav:not(.is-stuck){
  --ink:#FFFFFF; --ink-dim:rgba(255,255,255,.86); --muted:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.28); --line-soft:rgba(255,255,255,.16);
  color:#fff;
}
/* The hero footage has the Galaxy Spalon logo burned into its top-left, right
   where this sits. Let the frame's own mark do the work until the nav goes
   solid, so the logo never appears twice. */
.nav__brand{ display:flex; align-items:center; gap:.65rem; font-size:.95rem; letter-spacing:.03em;
  transition:opacity .45s var(--ease); }
.nav:not(.is-stuck) .nav__brand{ opacity:0; pointer-events:none; }
/* the logo is a black-background JPEG — screen blend drops the black out;
   the contrast bump crushes compression noise so no grey box shows */
/* logo.jpeg is white/red artwork on a black field. `mix-blend-mode:screen`
   knocked the black out on a dark page — on a light one it would erase the
   logo entirely (screen against white is white). So it now sits on its own
   black chip, which the artwork's own background blends into seamlessly. */
.nav__brand img{ width:32px; height:32px; object-fit:contain; background:#000; border-radius:7px; padding:3px; }
.nav__brand span{ font-family:var(--f-disp); font-weight:450; font-size:.92rem; letter-spacing:.01em; white-space:nowrap; }
.nav__brand em{ font-style:normal; color:var(--red); }
.nav__links{ display:flex; gap:2rem; }
.nav__links a{
  position:relative; font-size:.7rem; font-weight:400; letter-spacing:.17em; text-transform:uppercase;
  color:var(--ink-dim); transition:color .3s;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-6px; height:1px; width:100%;
  background:var(--red); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__right{ display:flex; align-items:center; gap:1rem; }
.nav__tel{ font-size:.78rem; letter-spacing:.09em; color:var(--ink-dim); }
.nav__tel:hover{ color:var(--red); }

.burger{
  display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:999px;
  background:none; cursor:pointer; padding:0; place-items:center; gap:5px;
}
.burger i{ display:block; width:16px; height:1px; background:var(--ink); transition:transform .35s var(--ease), opacity .3s; }
.burger[aria-expanded="true"] i:first-child{ transform:translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child{ transform:translateY(-3px) rotate(-45deg); }

/* ── mobile menu ──────────────────────────────────────── */
.menu{
  position:fixed; inset:0; z-index:890; background:var(--bg-1);
  display:flex; flex-direction:column; justify-content:center; gap:2rem;
  padding:6rem var(--pad) 3rem;
  clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease-io);
}
.menu[hidden]{ display:none; }
.menu.is-open{ clip-path:inset(0 0 0 0); }
.menu__list{ display:grid; gap:.2rem; }
.menu__list a{
  display:flex; align-items:baseline; gap:1rem; padding:.5rem 0;
  font-family:var(--f-disp); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(1.35rem,5vw,1.75rem); line-height:1.24;
  border-bottom:1px solid var(--line-soft);
}
.menu__list em{ font-family:var(--f-ui); font-style:normal; font-weight:500; font-size:.68rem; letter-spacing:.2em; color:var(--red); }
.menu__foot{ color:var(--muted); font-size:.85rem; }
.menu__foot p{ margin:.2rem 0; }

/* ═══ PINNED SEQUENCE SECTIONS ═══════════════════════════ */
.seq__track{ position:relative; }
/* shorter than before — with snap points you land on the beats, so the extra
   scroll distance only made the page feel like a slog */
.seq--hero .seq__track{ height:300vh; }
.seq--proc .seq__track{ height:320vh; }
.seq__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center;
}
/* The frames are 720p and get upscaled when full-bleed; a touch of contrast
   restores the edge definition that upscaling softens. Kept mild on purpose —
   the source is ~0.2 bits/pixel, so pushing harder surfaces JPEG blocking. */
.seq__canvas{ width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.04); }

/* hero */
.seq--hero .seq__canvas{ position:absolute; inset:0; }
/* Deliberately light. The footage is the subject; this only buys enough
   contrast for the copy sitting in the lower third. */
.seq__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(75% 55% at 14% 84%, rgba(6,6,8,.7) 0%, transparent 72%),
    radial-gradient(125% 95% at 62% 42%, transparent 42%, rgba(6,6,8,.42) 100%),
    linear-gradient(to top, rgba(6,6,8,.86) 0%, rgba(6,6,8,.34) 26%, transparent 52%);
}

/* ── hero copy beats — the text moves, the footage stays ── */
.beat{
  position:absolute; z-index:2; width:100%; max-width:var(--maxw);
  padding-inline:var(--pad); margin-inline:auto; left:0; right:0;
  will-change:opacity, transform;
}
.hero__copy{ bottom:16%; }
.beat--mid{
  bottom:auto; top:50%; text-align:right; opacity:0;
}
.beat--mid p{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(1.05rem,1.9vw,1.45rem); line-height:1.34; letter-spacing:-.014em;
  color:var(--ink); margin:0; text-shadow:0 4px 40px rgba(0,0,0,.8);
}
.beat--mid em{ font-style:normal; color:var(--red); }
.beat--end{ bottom:17%; opacity:0; }
.beat--end .beat__kicker{
  display:block; font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--red); margin-bottom:.8rem;
}
.beat--end p{
  font-family:var(--f-disp); font-weight:450; letter-spacing:-.022em;
  font-size:clamp(1.25rem,2.4vw,1.9rem); line-height:1.18;
  color:var(--ink); margin:0; text-shadow:0 4px 40px rgba(0,0,0,.8);
}

.hero__title{
  font-family:var(--f-disp); font-weight:450;
  font-size:clamp(1.9rem,4vw,3.05rem); line-height:1.1; letter-spacing:-.026em;
  margin:0 0 .9rem; max-width:16ch;
  text-shadow:0 4px 40px rgba(0,0,0,.75);
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line>span{
  display:block; transform:translateY(105%);
  transition:transform 1.15s var(--ease-io);
}
body.is-ready .hero__title .line>span{ transform:translateY(0); }
body.is-ready .hero__title .line:nth-child(2)>span{ transition-delay:.12s; }

[data-hero-fade]{ opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease) , transform .9s var(--ease); }
body.is-ready [data-hero-fade]{ opacity:1; transform:none; }
body.is-ready .eyebrow[data-hero-fade]{ transition-delay:.1s; }
body.is-ready .hero__sub{ transition-delay:.38s; }
body.is-ready .hero__cta{ transition-delay:.5s; }

.hero__sub{ max-width:38ch; font-size:clamp(.94rem,1.15vw,1.05rem); font-weight:300; margin:0 0 1.9rem; color:var(--ink); text-shadow:0 2px 20px rgba(0,0,0,.85); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; }

/* fades in on the last stretch, where the sequence lands on the brand card */
.hero__end{
  position:absolute; z-index:2; left:0; right:0; bottom:22%;
  padding-inline:var(--pad); max-width:var(--maxw); margin-inline:auto;
  opacity:0; pointer-events:none;
}
.hero__end p{
  font-family:var(--f-disp); font-size:clamp(1.5rem,3.4vw,2.6rem); line-height:1.1;
  color:var(--ink); margin:0 0 .5rem; max-width:16ch;
}
.hero__end span{ font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--red); }

.hero__foot{
  position:absolute; z-index:2; left:0; right:0; bottom:calc(1.6rem + env(safe-area-inset-bottom));
  display:flex; align-items:flex-end; justify-content:space-between;
  padding-inline:var(--pad); max-width:var(--maxw); margin-inline:auto;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.hero__scroll{ display:flex; align-items:center; gap:.7rem; }
.hero__scroll i{ display:block; width:52px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.hero__scroll i::after{
  content:''; position:absolute; inset:0; background:var(--red);
  animation:sweep 2.1s var(--ease) infinite;
}
@keyframes sweep{ 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(100%)} }
.hero__meta{ display:flex; gap:.6rem; }
.hero__meta b{ color:var(--red); }

/* process sequence — the frame takes the room; copy lives inside it */
.seq--proc .seq__stage{
  padding:clamp(4.6rem,7vw,5.6rem) clamp(12px,2.2vw,30px) clamp(1.4rem,3vw,2.2rem);
  place-items:stretch; grid-template-rows:minmax(0,1fr);
}
.proc__frame{
  position:relative; width:100%; height:100%; max-width:1560px; margin-inline:auto;
  border-radius:16px; overflow:hidden; border:1px solid var(--line-soft);
  box-shadow:0 40px 140px rgba(0,0,0,.8);
}
.proc__frame .seq__canvas{ position:absolute; inset:0; }
.proc__vig{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(130% 105% at 55% 40%, transparent 48%, rgba(6,6,8,.4) 100%),
    linear-gradient(to top, rgba(6,6,8,.9) 0%, rgba(6,6,8,.3) 24%, transparent 46%);
}
.proc__head{
  position:absolute; top:clamp(1.4rem,3vw,2.6rem); left:clamp(1.4rem,3vw,2.8rem);
  z-index:3; pointer-events:none; will-change:opacity,transform;
}
.proc__head .eyebrow{ margin-bottom:.7rem; }
.proc__head .h2{ font-size:clamp(1.5rem,2.8vw,2.2rem); margin:0; text-shadow:0 4px 40px rgba(0,0,0,.8); }

/* one step at a time — it slides in as the sequence reaches it */
.proc__steps{
  position:absolute; z-index:3;
  left:clamp(1.4rem,3vw,2.8rem); right:clamp(1.4rem,3vw,2.8rem);
  bottom:clamp(2.4rem,4vw,3.4rem);
  list-style:none; margin:0; padding:0; display:grid;
}
.proc__steps li{
  grid-area:1 / 1; max-width:34ch;
  opacity:0; transform:translateY(14px);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events:none;
}
.proc__steps li.is-on{ opacity:1; transform:none; }
.proc__steps b{
  display:inline-block; font-family:var(--f-ui); font-size:.68rem; letter-spacing:.26em;
  color:var(--red); margin-bottom:.5rem;
}
.proc__steps span{
  display:block; font-family:var(--f-disp); font-weight:450; letter-spacing:-.02em;
  font-size:clamp(1.15rem,1.9vw,1.5rem);
  line-height:1.2; margin:0 0 .45rem; text-shadow:0 4px 30px rgba(0,0,0,.8);
}
.proc__steps p{ margin:0; font-size:.88rem; font-weight:300; line-height:1.55; color:var(--ink-dim); text-shadow:0 2px 18px rgba(0,0,0,.9); }
.proc__prog{
  position:absolute; z-index:3; height:2px; background:rgba(255,255,255,.16);
  left:clamp(1.4rem,3vw,2.8rem); right:clamp(1.4rem,3vw,2.8rem); bottom:clamp(1.2rem,2.4vw,1.8rem);
}
.proc__prog i{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%; background:var(--red); }

/* ── marquee ──────────────────────────────────────────── */
.marquee{
  border-block:1px solid var(--line-soft); background:var(--bg-1);
  overflow:hidden; padding:1.15rem 0; position:relative; z-index:2;
}
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__track span{
  font-family:var(--f-disp); font-weight:300; letter-spacing:.01em;
  font-size:clamp(.82rem,1.2vw,1rem);
  white-space:nowrap; padding-right:1.5rem; color:var(--ink-dim);
}
.marquee__track b{ color:var(--red); font-weight:400; padding-inline:.35em; }

/* ── about ────────────────────────────────────────────── */
.about{ padding:clamp(6rem,13vw,11rem) 0 0; position:relative; }
.about__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.about__stick{ position:sticky; top:22vh; }
.about__copy p{ margin:0 0 1.4rem; }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:3rem; }
.stat b{
  display:block; font-family:var(--f-disp); font-weight:300; letter-spacing:-.028em;
  font-size:clamp(1.7rem,2.7vw,2.2rem); line-height:1; color:var(--ink);
}
.stat span{ display:block; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:.7rem; }

.about__plates{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:1.2rem; margin-top:clamp(4rem,9vw,8rem); padding-inline:var(--pad);
  max-width:var(--maxw); margin-inline:auto;
}
.plate{ margin:0; overflow:hidden; border-radius:10px; background:var(--bg-2); }
.plate img{ width:100%; height:100%; object-fit:cover; }
.plate--a{ grid-column:1 / span 7; aspect-ratio:16/10; }
.plate--b{ grid-column:9 / span 4; aspect-ratio:3/4; align-self:end; position:relative; }
.plate--b figcaption{
  position:absolute; left:1rem; bottom:1rem; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); text-shadow:0 2px 12px rgba(0,0,0,.9);
}

/* ── services ─────────────────────────────────────────── */
.services{ padding:clamp(6rem,13vw,11rem) 0; position:relative; }
.sec-head{ max-width:44rem; margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.sec-head__note{ max-width:38ch; }
.svc{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-soft); }
.svc__row{
  display:grid; grid-template-columns:auto 1.15fr 1.35fr auto; gap:1.5rem; align-items:baseline;
  padding:1.8rem 0; border-bottom:1px solid var(--line-soft);
  position:relative; cursor:default;
  transition:padding-left .45s var(--ease);
}
.svc__row::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--red); transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--ease);
}
.svc__row:hover{ padding-left:1.4rem; }
.svc__row:hover::before{ transform:scaleY(1); transform-origin:top; }
.svc__no{ font-size:.64rem; letter-spacing:.22em; color:var(--muted); }
.svc__name{ font-family:var(--f-disp); font-weight:450; font-size:clamp(1rem,1.55vw,1.25rem); margin:0; letter-spacing:-.016em; transition:color .4s; }
.svc__row:hover .svc__name{ color:var(--red); }
.svc__desc{ margin:0; font-size:.87rem; font-weight:300; color:var(--muted); }
.svc__price{ font-size:.78rem; font-weight:300; letter-spacing:.05em; color:var(--ink-dim); justify-self:end; white-space:nowrap; }

.svc__float{
  position:fixed; top:0; left:0; z-index:5; width:230px; aspect-ratio:4/5;
  pointer-events:none; opacity:0; overflow:hidden; border-radius:8px;
  transform:translate3d(-50%,-50%,0) scale(.86); transition:opacity .35s var(--ease), transform .45s var(--ease);
}
.svc__float.is-on{ opacity:1; transform:translate3d(-50%,-50%,0) scale(1); }
.svc__float img{ width:100%; height:100%; object-fit:cover; }

/* ── lookbook (horizontal) ────────────────────────────── */
.look__track{ position:relative; height:340vh; }
.look__stage{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:center; }
.look__rail{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2rem); padding-inline:var(--pad); will-change:transform; }
.look__intro{ flex:0 0 auto; width:min(30rem,72vw); padding-right:clamp(1rem,4vw,3rem); }
.look__note{ max-width:28ch; font-size:.9rem; }
/* sized off viewport height so the rail fills the pinned stage */
.card{
  flex:0 0 auto; margin:0; position:relative; overflow:hidden; border-radius:12px;
  height:min(56vh,520px); width:auto; aspect-ratio:4/3; background:var(--bg-2);
}
.card--tall{ aspect-ratio:3/4; height:min(72vh,660px); }
.card img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); filter:saturate(.85); }
.card:hover img{ transform:scale(1.06); filter:saturate(1); }
.card figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.2rem 1.2rem 1.1rem;
  display:flex; flex-direction:column; align-items:flex-start; gap:.2rem;
  background:linear-gradient(to top, rgba(6,6,8,.92), rgba(6,6,8,.5) 55%, transparent);
}
.card figcaption b{ font-family:var(--f-disp); font-weight:450; font-size:.94rem; letter-spacing:-.014em; }
.card figcaption span{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.look__end{ flex:0 0 auto; width:min(22rem,66vw); padding-left:clamp(1rem,3vw,2.5rem); }
.look__end p{ font-family:var(--f-disp); font-weight:450; letter-spacing:-.02em; font-size:clamp(1.15rem,1.9vw,1.5rem); line-height:1.24; color:var(--ink); margin:0 0 1.5rem; }

/* ── team ─────────────────────────────────────────────── */
.team{ padding:clamp(6rem,13vw,11rem) 0; }
.people{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2.4rem); }
.person__img{ overflow:hidden; border-radius:10px; aspect-ratio:4/5; background:var(--bg-2); margin-bottom:1.2rem; }
.person__img img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter .7s var(--ease), transform 1.1s var(--ease); }
.person:hover .person__img img{ filter:grayscale(0); transform:scale(1.05); }
.person h3{ font-family:var(--f-disp); font-weight:450; font-size:1.02rem; letter-spacing:-.014em; margin:0 0 .3rem; }
.person__role{ margin:0 0 .8rem; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--red); }
.person__note{ margin:0; font-size:.86rem; font-weight:300; color:var(--muted); }

/* ── quote ────────────────────────────────────────────── */
.words{ padding:clamp(5rem,11vw,9rem) 0; border-block:1px solid var(--line-soft); background:var(--bg-1); }
.quote{ max-width:52rem; margin-inline:auto; text-align:center; }
.quote blockquote{ margin:0; }
.quote p{
  font-family:var(--f-disp); font-weight:300; letter-spacing:-.018em;
  font-size:clamp(1.1rem,1.95vw,1.5rem); line-height:1.5; color:var(--ink);
  margin:0 0 1.6rem; min-height:2.9em;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.quote footer{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); transition:opacity .45s; }
.quote.is-swap p, .quote.is-swap footer{ opacity:0; transform:translateY(8px); }
.quote__dots{ display:flex; gap:.5rem; justify-content:center; margin-top:2.2rem; }
.quote__dots button{
  width:6px; height:6px; border-radius:999px; border:0; padding:0; cursor:pointer;
  background:var(--line); transition:background .3s, transform .3s;
}
.quote__dots button.is-on{ background:var(--red); transform:scale(1.5); }

/* ── booking ──────────────────────────────────────────── */
.book{ position:relative; padding:clamp(6rem,13vw,11rem) 0; overflow:hidden; }
.book__media{ position:absolute; inset:0; z-index:0; }
.book__media img{ width:100%; height:100%; object-fit:cover; }
.book__scrim{ position:absolute; inset:0; background:linear-gradient(to right, rgba(6,6,8,.97) 30%, rgba(6,6,8,.82) 100%); }
.book__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.book__facts{ margin:2.4rem 0 0; display:grid; gap:1rem; }
.book__facts div{ display:grid; grid-template-columns:6.5rem 1fr; gap:1rem; padding-bottom:.9rem; border-bottom:1px solid var(--line-soft); }
.book__facts dt{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.book__facts dd{ margin:0; font-size:.94rem; }
.book__facts a:hover{ color:var(--red); }

/* ── WhatsApp block (replaces the booking form entirely) ── */
.wa{ align-self:start; }
.wa__label{ margin:0 0 1rem; font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); }
.wa__chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.chip{
  font-family:var(--f-ui); font-size:.75rem; font-weight:300; letter-spacing:.02em;
  color:var(--ink-dim); background:transparent;
  border:1px solid rgba(255,255,255,.14); border-radius:999px;
  padding:.5rem .95rem; cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.chip:hover{ color:var(--ink); border-color:rgba(255,255,255,.3); }
.chip.is-on{ color:#fff; border-color:var(--red); background:rgba(224,32,42,.14); }

.wa__cta{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.85rem 1.5rem .85rem 1.25rem; border-radius:999px;
  background:#25D366; color:#04220F;
  font-size:.76rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  transition:filter .3s var(--ease), transform .3s var(--ease);
}
.wa__cta svg{ width:19px; height:19px; fill:currentColor; flex:none; }
.wa__cta:hover{ filter:brightness(1.09); }
.wa__cta:active{ transform:scale(.98); }
.wa__note{ margin:1.2rem 0 0; font-size:.8rem; font-weight:300; color:var(--muted); max-width:40ch; }
.wa__note b{ font-weight:400; color:var(--ink-dim); }

/* ── footer ───────────────────────────────────────────── */
.foot{ padding:clamp(4rem,8vw,6rem) 0 2rem; border-top:1px solid var(--line-soft); }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; }
.foot__logo{ width:108px; background:#000; border-radius:13px; padding:10px; margin-bottom:1.1rem; }
.foot__brand p{ max-width:30ch; font-size:.9rem; }
.foot__col h4{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 1rem; font-weight:500; }
.foot__col p{ margin:0 0 .5rem; font-size:.9rem; }
.foot__col a:hover{ color:var(--red); }
.foot__base{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:clamp(3rem,6vw,5rem); padding-top:1.5rem; border-top:1px solid var(--line-soft); }
.foot__base p{ margin:0; font-size:.74rem; letter-spacing:.06em; color:var(--muted); }

/* ── reveal primitives ────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .95s var(--ease), transform .95s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.09s } .reveal[data-d="2"]{ transition-delay:.18s }
.reveal[data-d="3"]{ transition-delay:.27s } .reveal[data-d="4"]{ transition-delay:.36s }
.reveal[data-d="5"]{ transition-delay:.45s }

/* The clip lives on the media child, never on the observed element itself:
   Chrome clips the IntersectionObserver rect by the target's own clip-path,
   so a clipped target reports ratio 0 forever and never reveals. */
.reveal-img > img,
.reveal-img > .person__img{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.25s var(--ease-io);
}
.reveal-img.is-in > img,
.reveal-img.is-in > .person__img{ clip-path:inset(0 0 0 0); }
.reveal-img[data-d="1"] > img, .reveal-img[data-d="1"] > .person__img{ transition-delay:.12s }
.reveal-img[data-d="2"] > img, .reveal-img[data-d="2"] > .person__img{ transition-delay:.24s }
.reveal-img img{ transform:scale(1.14); transition:transform 1.5s var(--ease-io), clip-path 1.25s var(--ease-io); }
.reveal-img.is-in img{ transform:scale(1); }

/* ═══ responsive ═════════════════════════════════════════ */
@media (max-width:1024px){
  .nav__links{ display:none; }
  .nav__tel{ display:none; }
  .burger{ display:grid; }
  .about__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .about__stick{ position:static; }
  .book__grid{ grid-template-columns:1fr; }
  .people{ grid-template-columns:1fr 1fr; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .seq--hero .seq__track{ height:260vh; }
  .seq--proc .seq__track{ height:280vh; }
  .seq__scrim{ background:linear-gradient(to top, rgba(6,6,8,.96) 12%, rgba(6,6,8,.55) 55%, rgba(6,6,8,.7) 100%); }
  .hero__title{ font-size:clamp(1.75rem,7.2vw,2.4rem); }
  .hero__cta{ gap:.55rem; }
  .hero__foot{ font-size:.62rem; }
  .about__plates{ grid-template-columns:1fr; }
  .plate--a,.plate--b{ grid-column:1 / -1; }
  .plate--b{ aspect-ratio:4/3; }
  .stats{ grid-template-columns:1fr; gap:1.6rem; }
  .svc__row{ grid-template-columns:auto 1fr; gap:.4rem 1rem; padding:1.4rem 0; }
  .svc__name{ grid-column:2; }
  .svc__desc{ grid-column:2; }
  .svc__price{ grid-column:2; justify-self:start; color:var(--red); }
  .svc__row:hover{ padding-left:0; }
  .people{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr; gap:2rem; }
  .look__track{ height:300vh; }
  .nav{ gap:.55rem; padding:.85rem 16px; }
  .nav__brand{ gap:.5rem; }
  .nav__brand img{ width:28px; height:28px; }
  .nav__brand span{ font-size:.85rem; }
  .burger{ width:38px; height:38px; }
  .seq--proc .seq__stage{ padding:4.4rem 12px 1.2rem; }
  .beat--mid{ text-align:left; }
  .hero__copy{ bottom:14%; }
  .foot__base{ flex-direction:column; gap:.4rem; }
}

/* ═══ reduced motion ═════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .grain{ display:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .seq--hero .seq__track,.seq--proc .seq__track{ height:100svh; }
  .look__track{ height:auto; }
  .look__stage{ position:static; height:auto; padding-block:4rem; }
  .look__rail{ flex-wrap:wrap; transform:none !important; justify-content:center; }
  .reveal,.reveal-img{ opacity:1; transform:none; }
  .reveal-img > img,.reveal-img > .person__img{ clip-path:none; }
  .reveal-img img{ transform:none; }
  .hero__title .line>span{ transform:none; }
  [data-hero-fade]{ opacity:1; transform:none; }

  /* no scrubbing, so show all four steps side by side instead of stacked */
  .proc__steps{ grid-template-columns:repeat(4,1fr); gap:1.2rem; }
  .proc__steps li{ grid-area:auto; opacity:1; transform:none; max-width:none; }
  .proc__steps span{ font-size:1.05rem; }
  .proc__steps p{ font-size:.78rem; }
  .proc__prog{ display:none; }

  /* the beats can't cross-fade, so only the greeting stays */
  .beat--mid,.beat--end{ display:none; }

  .card,.card--tall{ height:auto; width:min(320px,78vw); }
}
@media (prefers-reduced-motion: reduce) and (max-width:720px){
  .proc__steps{ grid-template-columns:repeat(2,1fr); gap:.8rem; }
  .proc__steps p{ display:none; }
}