/* =========================================================
   ARTISTLY SALON & SPA — Winnipeg
   Cinematic scroll · midnight-navy (pitch deck) · Ironmark Systems
   Palette: deep navy ground + warm bone + Blue-Popsicle accent
   ========================================================= */

/* ---------------------------------------------------------
   FONTS — self-hosted (Satoshi + Sentient, ITF Free Font License)
   Previously loaded from api.fontshare.com, but the request used an
   invalid weight token (sentient@400i) so that stylesheet answered 500
   every time and NEITHER family ever rendered — the site was silently
   falling back to system-ui and Georgia. Self-hosting fixes the bug and
   removes a third-party dependency from the critical render path.
   --------------------------------------------------------- */
@font-face{font-family:'Satoshi';src:url('../assets/fonts/satoshi-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../assets/fonts/satoshi-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('../assets/fonts/satoshi-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Sentient';src:url('../assets/fonts/sentient-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Sentient';src:url('../assets/fonts/sentient-400-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}

:root{
  --black:#070f1c;     /* deep midnight navy — the dark ground (was pure black) */
  --ink:#0a1626;
  --navy-deep:#050b15; /* gradient floor */
  --navy-glow:#0c1f3d; /* atmospheric glow */
  --paper:#F4F1EA;     /* warm bone white (navy + cream = premium) */
  --white:#FFFFFF;

  --blue:#1c3f7e;      /* Blue Popsicle (lite) — primary accent */
  --blue-deep:#0f2862; /* deep blue */
  --accent:#9fb1d4;    /* periwinkle highlight */

  --red:#ff1f3d;       /* offers accent — vibrant black+red treatment (RV, Jul 30). Used ONLY here. */
  --red-deep:#c60d26;
  --offer-black:#0a0a0c;

  --g-900:#13202f;     /* cool near-navy (borders/marquee on dark) */
  --g-700:#3a4a5e;
  --g-500:#6f7d90;     /* cool muted text */
  --g-300:#aab4c2;
  --g-100:#e7e4db;     /* warm hairline on light sections */

  --maxw:1480px;
  --pad:clamp(20px,5vw,80px);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);

  --ff-disp:"League Spartan",system-ui,sans-serif;
  --ff-logo:"Poppins","League Spartan",system-ui,sans-serif; /* matches the artistly logo wordmark (Poppins Bold) */
  --ff-edit:"Sentient",Georgia,serif;
  --ff-text:"Satoshi",system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:var(--ff-text);
  background:
    radial-gradient(120% 80% at 50% -8%, var(--navy-glow) 0%, rgba(12,31,61,0) 55%),
    linear-gradient(180deg,#06101d 0%,var(--navy-deep) 100%);
  background-attachment:fixed;
  color:var(--paper);
  overflow-x:hidden;
  cursor:none;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
em{font-style:normal;font-family:var(--ff-edit);font-style:italic}
::selection{background:var(--paper);color:var(--black)}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* =========================================================
   GRAIN
   ========================================================= */
.grain{
  position:fixed;inset:-50%;z-index:9000;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(8) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}30%{transform:translate(3%,-2%)}
  50%{transform:translate(-2%,3%)}70%{transform:translate(4%,2%)}90%{transform:translate(-3%,1%)}100%{transform:translate(0,0)}
}

/* =========================================================
   CUSTOM CURSOR
   ========================================================= */
.cursor{position:fixed;top:0;left:0;z-index:9500;pointer-events:none;mix-blend-mode:difference}
.cursor__dot{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.cursor__ring{
  position:absolute;width:46px;height:46px;border:1px solid #fff;border-radius:50%;
  transform:translate(-50%,-50%);transition:width .4s var(--ease),height .4s var(--ease),background .3s,opacity .3s
}
.cursor__label{
  position:absolute;transform:translate(-50%,-50%);color:var(--black);font-family:var(--ff-text);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:0;white-space:nowrap;mix-blend-mode:normal
}
body.cur-hover .cursor__ring{width:74px;height:74px;background:#fff}
body.cur-hover .cursor__label{opacity:1}
body.cur-hover .cursor__dot{opacity:0}
@media (hover:none),(pointer:coarse){.cursor{display:none}body{cursor:auto}}

/* =========================================================
   LOADER — 3D tool relay
   Clipper → comb → razor → shears, each turning in on its own
   axis as the bar fills. Renders are studio-lit product art, so
   they sit in a soft light pool to lift them off the navy.
   ========================================================= */
.loader{position:fixed;inset:0;z-index:9800;overflow:hidden;background:var(--black);display:flex;flex-direction:column;justify-content:center;align-items:center}
.loader__inner{width:min(92vw,var(--maxw));padding:0 var(--pad)}

.loader__stage{position:relative;display:flex;flex-direction:column;align-items:center;
  margin-bottom:clamp(18px,3vh,46px)}
.loader__pool{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(94vw,760px);aspect-ratio:1/1;pointer-events:none;
  background:radial-gradient(circle at 50% 46%,
    rgba(159,177,212,.2) 0%, rgba(28,63,126,.16) 30%, rgba(7,15,28,0) 66%)}
.loader__tools{position:relative;width:clamp(190px,38vh,370px);height:clamp(190px,38vh,370px);
  perspective:1100px}
.ltool{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;
  opacity:0;will-change:transform,opacity}
/* The two black tools would vanish into the navy on silhouette alone, so each
   tool carries a faint cool rim — drop-shadow follows the alpha, so it reads as
   light catching the edge rather than a box glow. Exactly ONE filter here, and
   none on the animated parent: nesting filters inside the 3D transform makes
   Chrome rasterise the tool in torn horizontal bands. */
.ltool img{display:block;filter:drop-shadow(0 0 34px rgba(159,177,212,.18))}
.ltool--clipper  img{height:100%;width:auto}
.ltool--comb     img{width:min(152%,82vw);max-width:none;height:auto}
.ltool--razor    img{width:104%;max-width:none;height:auto}
.ltool--scissors img{height:100%;width:auto}
/* Landscape phones: the stage + wordmark won't both fit at full size. */
@media (max-height:540px){
  .loader__tools{width:clamp(110px,30vh,190px);height:clamp(110px,30vh,190px)}
  .loader__word{font-size:clamp(34px,7vw,88px)}
}
.loader__word{display:flex;gap:.02em;font-family:var(--ff-logo);font-weight:700;
  font-size:clamp(44px,11.5vw,168px);line-height:1;color:var(--paper);justify-content:center}
.loader__word span{transform:translateY(110%);display:inline-block}
.loader__meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:clamp(14px,2vw,28px);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--g-500)}
.loader__count{font-family:var(--ff-disp);font-size:clamp(20px,3vw,40px);color:var(--paper)}
.loader__bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--g-900)}
.loader__bar i{display:block;height:100%;width:0;background:var(--paper)}

/* =========================================================
   NAV
   ========================================================= */
.nav{position:fixed;top:0;left:0;width:100%;z-index:800;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,2.4vw,30px) var(--pad);mix-blend-mode:difference;transition:transform .5s var(--ease)}
.nav.is-hidden{transform:translateY(-110%)}
.nav__brand{font-family:var(--ff-logo);font-weight:700;font-size:clamp(18px,1.6vw,24px);letter-spacing:-.01em;color:#fff}
.nav__brand sup{font-size:.4em;top:-1.1em}
.nav__links{display:flex;gap:clamp(18px,2vw,40px)}
.nav__links a{font-size:13px;letter-spacing:.04em;color:#fff;position:relative;padding:4px 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:#fff;transition:width .4s var(--ease)}
.nav__links a:hover::after{width:100%}
.nav__links a.is-current::after{width:100%}
.nav__cta{display:inline-flex;align-items:center;gap:8px;border:1px solid #fff;color:#fff;padding:11px 20px;border-radius:100px;
  font-size:13px;font-weight:500;letter-spacing:.02em;overflow:hidden;position:relative}
.nav__cta span{position:relative;z-index:2;transition:color .4s var(--ease)}
.nav__cta::before{content:"";position:absolute;inset:0;background:#fff;border-radius:100px;transform:translateY(101%);transition:transform .45s var(--ease)}
.nav__cta:hover::before{transform:translateY(0)}
.nav__cta:hover span{color:var(--black)}
@media (max-width:880px){.nav__links{display:none}}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  font-family:var(--ff-text);font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  padding:18px 38px;border-radius:100px;border:1px solid currentColor;will-change:transform}
.btn span{position:relative;z-index:2;transition:color .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:currentColor;transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn--invert{background:var(--paper);color:var(--black);border-color:var(--paper)}
.btn--invert span{color:var(--black)}
.btn--invert:hover span{color:var(--paper)}
.btn--invert::before{background:var(--black)}
.btn--line{color:var(--paper)}
.btn--line span{color:var(--paper)}
.btn--line:hover span{color:var(--black)}
.btn--line::before{background:var(--paper)}
.btn--block{width:100%}

/* =========================================================
   PLACEHOLDERS (B&W film frames)
   ========================================================= */
.ph{position:relative;overflow:hidden;background:#0d0d0d;isolation:isolate}
.ph::before{ /* spotlight + duotone */
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 30% 12%, rgba(255,255,255,.34), rgba(255,255,255,0) 46%),
    radial-gradient(140% 120% at 78% 110%, rgba(0,0,0,.7), rgba(0,0,0,0) 60%),
    linear-gradient(160deg,#2a2a28 0%,#161615 42%,#080808 100%);
  filter:grayscale(1) contrast(1.08);
}
.ph::after{ /* grain + vignette */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 120px 30px rgba(0,0,0,.7);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;opacity:.6
}
.ph__label{position:absolute;left:18px;bottom:16px;z-index:2;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(246,244,239,.62);font-weight:500}
.ph--1::before{background:radial-gradient(120% 90% at 22% 8%,rgba(255,255,255,.4),rgba(255,255,255,0) 44%),linear-gradient(155deg,#33322f,#0a0a0a);filter:grayscale(1) contrast(1.1)}
.ph--2::before{background:radial-gradient(130% 100% at 80% 10%,rgba(255,255,255,.32),rgba(255,255,255,0) 50%),linear-gradient(200deg,#2b2b29,#070707);filter:grayscale(1) contrast(1.12)}
.ph--3::before{background:radial-gradient(110% 80% at 50% 0%,rgba(255,255,255,.36),rgba(255,255,255,0) 48%),linear-gradient(180deg,#302f2c,#090909);filter:grayscale(1) contrast(1.06)}
.ph--4::before{background:radial-gradient(120% 90% at 12% 30%,rgba(255,255,255,.34),rgba(255,255,255,0) 46%),linear-gradient(120deg,#34332f,#0b0b0b);filter:grayscale(1) contrast(1.1)}
.ph--5::before{background:radial-gradient(140% 110% at 68% 6%,rgba(255,255,255,.3),rgba(255,255,255,0) 52%),linear-gradient(210deg,#2d2c2a,#060606);filter:grayscale(1) contrast(1.14)}
.ph--portrait::before{background:radial-gradient(90% 70% at 60% 18%,rgba(255,255,255,.42),rgba(255,255,255,0) 50%),linear-gradient(165deg,#37362f,#0a0a0a);filter:grayscale(1) contrast(1.1)}

/* =========================================================
   SHARED SECTION BITS
   ========================================================= */
.sec-kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--g-500);margin-bottom:clamp(20px,3vw,40px)}
.sec-kicker--light{color:var(--g-500)}
.reveal,.ln,.word{will-change:transform,opacity}
.reveal-lines .ln,.hero__title .line,.book__title .line{overflow:hidden;display:block}
.reveal-lines .ln{padding-bottom:.04em}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:100svh;color:var(--paper);
  background:
    radial-gradient(120% 78% at 50% -6%, var(--navy-glow) 0%, rgba(12,31,61,0) 52%),
    radial-gradient(80% 60% at 78% 108%, rgba(28,63,126,.32) 0%, rgba(28,63,126,0) 60%),
    linear-gradient(180deg,#06101d 0%,var(--navy-deep) 100%);
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:0 var(--pad);overflow:hidden}
.hero__framemark{position:absolute;top:clamp(80px,11vh,130px);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--g-500)}
.hero__framemark--tl{left:var(--pad)}
.hero__framemark--tr{right:var(--pad)}
/* Phones don't have the width for two corner marks: at 390px they collided with
   the logo, the Menu toggle, and each other. They're decorative — drop them. */
@media (max-width:760px){ .hero__framemark{display:none} }

/* Phone: give footer + inline links room for a thumb without changing the look. */
@media (max-width:760px){
  .footer__col p a,.footer__nav a,.wall__fine a,.reels__fine a{
    display:inline-block;padding-block:5px}
}
.hero__stage{position:relative;z-index:3;max-width:1200px}
.hero__eyebrow{overflow:hidden;margin-bottom:clamp(14px,2vh,26px)}
.hero__eyebrow span{display:inline-block;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--g-300)}
/* Two-line logo wordmark: arti / stly — 4 up, 4 down (RV, Jul 25).
   Four characters per line instead of eight, so it can run ~2× larger. */
.hero__title{font-family:var(--ff-logo);font-weight:700;line-height:.86;letter-spacing:-.035em;
  font-size:clamp(72px,15vw,210px)}
.hero__title .line{display:block}
.hero__title .line + .line{margin-top:-.06em}
.hero__title .word{display:inline-block;transform:translateY(110%)}
.hero__title-outline{color:transparent;-webkit-text-stroke:1.5px var(--paper);text-stroke:1.5px var(--paper)}
.hero__sub{max-width:560px;margin:clamp(24px,3.5vh,44px) auto 0;font-size:clamp(16px,1.5vw,21px);line-height:1.5;color:var(--g-300)}
.hero__sub em{color:var(--paper)}
.hero .btn{margin-top:clamp(28px,4vh,48px)}
/* Sits lower and shorter than the one-line era — the two-line wordmark
   needs the vertical room, and this must never touch the Book CTA. */
.hero__scroll{position:absolute;bottom:clamp(68px,7.5vh,80px);left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--g-500)}
.hero__scroll-line{width:1px;height:36px;background:linear-gradient(var(--g-500),transparent);overflow:hidden;position:relative}
.hero__scroll-line::after{content:"";position:absolute;top:-36px;left:0;width:100%;height:36px;background:var(--paper);animation:scrolldash 2.2s var(--ease) infinite}
@keyframes scrolldash{0%{transform:translateY(0)}60%,100%{transform:translateY(72px)}}
/* Short laptops: drop the cue entirely rather than crowd the hero */
@media (max-height:760px){ .hero__scroll{display:none} }
@media (max-height:780px){
  .hero__scroll{display:none}
  .hero__title{font-size:clamp(72px,23vw,180px)}
}

/* MARQUEE */
.marquee{position:absolute;bottom:0;left:0;width:100%;overflow:hidden;border-top:1px solid var(--g-900);
  padding:16px 0;background:var(--black);z-index:2}
.marquee__track{display:inline-flex;align-items:center;gap:32px;white-space:nowrap;will-change:transform}
.marquee__track span{font-family:var(--ff-disp);font-weight:500;font-size:clamp(18px,2vw,30px);text-transform:uppercase;letter-spacing:.01em}
.marquee__track i{color:var(--accent);font-style:normal;font-size:14px}

/* =========================================================
   MANIFESTO (WHITE)
   ========================================================= */
.manifesto{position:relative;z-index:5;background:var(--paper);color:var(--black);
  border-radius:38px 38px 0 0;margin-top:-38px;
  padding:clamp(90px,16vh,200px) var(--pad) clamp(80px,12vh,160px);
  display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,90px);max-width:100%}
.manifesto__index{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--g-500)}
.manifesto__head{font-family:var(--ff-disp);font-weight:600;line-height:.92;letter-spacing:-.02em;
  font-size:clamp(48px,10vw,170px);text-transform:uppercase}
.manifesto__head .ln span,.manifesto__head em{display:inline-block}
.manifesto__body{margin-left:auto;max-width:560px;display:grid;gap:22px}
.manifesto__body p{font-size:clamp(16px,1.4vw,20px);line-height:1.55;color:var(--g-700)}
.manifesto__body em{color:var(--black)}
.manifesto__sig{font-family:var(--ff-edit);font-style:italic;font-size:clamp(18px,2vw,26px);color:var(--black)}
/* Editorial plate — fills the dead air beside the headline */
.manifesto__plate{position:relative;margin:0;max-width:420px;justify-self:end;width:100%}
/* Default is FULLY VISIBLE — motion.js sets the hidden state before it animates,
   so a JS failure leaves the photo on screen rather than clipped away. */
.manifesto__plate-mask{position:relative;overflow:hidden;border-radius:12px;background:#e6e2d8;
  clip-path:inset(0 0 0 0);box-shadow:0 40px 70px -44px rgba(7,15,28,.5)}
.manifesto__plate-mask img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;
  transform:scale(1.16);will-change:transform}
.manifesto__plate figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding-top:12px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g-500)}
.manifesto__plate figcaption i{font-style:normal;color:var(--g-300)}

@media(min-width:900px){
  .manifesto{grid-template-columns:1.1fr .9fr;
    grid-template-areas:"idx idx" "head plate" "head body" "sig sig";align-items:end}
  .manifesto__index{grid-area:idx}.manifesto__head{grid-area:head}
  .manifesto__plate{grid-area:plate;margin-bottom:clamp(28px,4vw,54px)}
  .manifesto__body{grid-area:body}.manifesto__sig{grid-area:sig}
}
@media(max-width:899px){
  .manifesto__plate{max-width:340px;justify-self:start}
}

/* =========================================================
   KINETIC COPY — words rise out of their own mask (DBNS-style)
   ========================================================= */
.kinetic .kw{display:inline-block;overflow:hidden;vertical-align:bottom}
.kinetic .kw i{display:inline-block;font-style:inherit;will-change:transform}

/* =========================================================
   TALLY — rolling-digit count band between ETHOS and THE EXHIBITION
   ========================================================= */
.tally{position:relative;z-index:5;background:var(--paper);color:var(--black);
  padding:0 var(--pad) clamp(80px,12vh,150px)}
.tally__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,4vw,60px);border-top:1px solid var(--g-100);padding-top:clamp(36px,5vw,64px)}
.tally__item{display:flex;flex-direction:column;gap:8px}
.tally__num{font-family:var(--ff-disp);font-weight:600;letter-spacing:-.02em;line-height:.85;
  font-size:clamp(58px,9vw,150px);font-variant-numeric:tabular-nums}
.tally__label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--g-500)}
@media(max-width:700px){
  .tally__grid{grid-template-columns:1fr;gap:28px}
  .tally__item{flex-direction:row;align-items:baseline;gap:18px}
  .tally__num{font-size:clamp(52px,17vw,86px)}
  .tally__label{flex:1}
}

/* =========================================================
   SECTION INDEX RAIL — fixed chapter marker (desktop only)
   ========================================================= */
.chapters{position:fixed;right:clamp(14px,1.6vw,26px);top:50%;transform:translateY(-50%);
  z-index:600;display:none;flex-direction:column;gap:14px;pointer-events:none;
  opacity:0;transition:opacity .5s var(--ease)}
body.chapters-on .chapters{opacity:1}
.chapters button{pointer-events:auto;display:flex;align-items:center;gap:10px;background:none;border:0;
  cursor:pointer;padding:0;font-family:var(--ff-text);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--g-500);transition:color .4s var(--ease)}
.chapters button span{opacity:0;transform:translateX(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.chapters button i{display:block;width:16px;height:1px;background:currentColor;flex:0 0 auto;
  transition:width .45s var(--ease),background .4s var(--ease)}
.chapters button:hover span,.chapters button.is-active span{opacity:1;transform:none}
.chapters button.is-active{color:var(--paper)}
.chapters button.is-active i{width:30px}
.chapters.on-light button{color:var(--g-300)}
.chapters.on-light button.is-active{color:var(--black)}
@media(min-width:1100px){ .chapters{display:flex} }
@media (prefers-reduced-motion:reduce){ .chapters{display:none!important} }

/* =========================================================
   WALL TILE WIPE — each tile uncovers itself on entry
   ========================================================= */
.wall__item{clip-path:inset(0 0 0 0)}

/* =========================================================
   EXHIBITION COUNTER — live 01 / 05 while the rail is pinned
   ========================================================= */
.excount{position:absolute;left:var(--pad);bottom:clamp(28px,5vh,54px);z-index:6;
  display:flex;align-items:baseline;gap:10px;color:var(--paper);
  font-family:var(--ff-disp);letter-spacing:.02em;
  opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease);
  pointer-events:none}
.excount.is-on{opacity:1;transform:none}
.excount b{font-weight:600;font-size:clamp(30px,4vw,58px);line-height:1;font-variant-numeric:tabular-nums}
.excount i{display:block;width:26px;height:1px;background:rgba(159,177,212,.5);transform:translateY(-.35em)}
.excount span{font-weight:500;font-size:clamp(13px,1.4vw,18px);color:var(--g-500);font-variant-numeric:tabular-nums}
@media(max-width:760px){ .excount{display:none} }

/* =========================================================
   EXHIBITION — pinned horizontal (BLACK)
   ========================================================= */
.exhibition{position:relative;background:var(--black);color:var(--paper)}
.exhibition__pin{height:100svh;overflow:hidden;display:flex;align-items:center}
.exhibition__rail{display:flex;align-items:center;gap:clamp(40px,6vw,110px);padding:0 var(--pad);height:100%;will-change:transform}
.panel{flex:0 0 auto;height:100%;display:flex;flex-direction:column;justify-content:center}

.exhibition__intro{justify-content:center;width:min(82vw,520px)}
.exhibition__kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--g-500);margin-bottom:24px}
.exhibition__title{font-family:var(--ff-disp);font-weight:600;font-size:clamp(56px,9vw,140px);line-height:.86;text-transform:uppercase;letter-spacing:-.02em}
.exhibition__note{margin-top:28px;font-size:15px;line-height:1.5;color:var(--g-300);max-width:280px}
.exhibition__arrow{margin-top:32px;font-size:40px;line-height:1;color:var(--accent);animation:nudge 1.8s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}}

.plate{width:min(80vw,440px);gap:24px}
.plate__frame{flex:1;width:100%;border-radius:6px}
.plate__cap{display:flex;flex-direction:column;gap:8px}
.plate__cap h3{font-family:var(--ff-disp);font-weight:500;font-size:clamp(24px,2.4vw,36px);text-transform:uppercase;letter-spacing:-.01em}
.plate__cap p{font-size:14px;line-height:1.5;color:var(--g-300);max-width:38ch}
.plate{counter-increment:plate}
.plate::before{content:"— " attr(data-num);font-size:12px;letter-spacing:.2em;color:var(--g-500);margin-bottom:14px}

.exhibition__end{width:min(82vw,480px);justify-content:center;gap:32px;align-items:flex-start}
.exhibition__endhead{font-family:var(--ff-disp);font-weight:600;font-size:clamp(48px,8vw,120px);line-height:.86;text-transform:uppercase;letter-spacing:-.02em}

/* =========================================================
   CATALOGUE (WHITE)
   ========================================================= */
.catalogue{position:relative;z-index:5;background:var(--paper);color:var(--black);
  border-radius:38px 38px 0 0;margin-top:-38px;padding:clamp(80px,12vh,160px) var(--pad)}
.catalogue__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(40px,6vh,80px)}
.catalogue__title{font-family:var(--ff-disp);font-weight:600;font-size:clamp(44px,8vw,130px);line-height:.86;text-transform:uppercase;letter-spacing:-.02em}
.catalogue__list{list-style:none;border-top:1px solid var(--g-100)}
.cat{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,3vw,48px);
  padding:clamp(22px,3.4vw,40px) 0;border-bottom:1px solid var(--g-100);overflow:hidden;transition:padding-left .5s var(--ease)}
.cat__no{font-family:var(--ff-disp);font-size:14px;color:var(--g-500)}
.cat__name{font-family:var(--ff-disp);font-weight:500;font-size:clamp(28px,4.4vw,68px);text-transform:uppercase;
  line-height:1;letter-spacing:-.01em;transition:transform .5s var(--ease),color .4s;grid-column:2}
.cat__desc{display:none}
.cat__price{font-family:var(--ff-disp);font-size:clamp(18px,2vw,30px);justify-self:end;transition:transform .5s var(--ease)}
.cat__hover{position:absolute;right:clamp(150px,18vw,300px);top:50%;width:230px;height:150px;border-radius:6px;
  transform:translateY(-50%) scale(.85);opacity:0;pointer-events:none;transition:opacity .45s var(--ease),transform .55s var(--ease);z-index:1}
.cat:hover{padding-left:clamp(12px,2vw,32px)}
.cat:hover .cat__name{transform:translateX(10px)}
.cat:hover .cat__price{transform:translateX(-6px)}
.cat:hover .cat__hover{opacity:1;transform:translateY(-50%) scale(1)}
.catalogue__fine{margin-top:28px;font-size:12px;letter-spacing:.04em;color:var(--g-500)}
@media (max-width:680px){
  .cat__hover{display:none}
  .cat{grid-template-columns:auto 1fr auto}
}

/* =========================================================
   ARTIST (BLACK)
   ========================================================= */
.artist{position:relative;z-index:6;background:var(--black);color:var(--paper);
  border-radius:38px 38px 0 0;margin-top:-38px;
  display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,80px);
  padding:clamp(80px,12vh,160px) var(--pad);align-items:center}
.artist__media{position:relative}
.artist__portrait{aspect-ratio:4/5;width:100%;border-radius:8px}
.artist__badge{position:absolute;top:-14px;right:-6px;background:var(--paper);color:var(--black);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:10px 16px;border-radius:100px;z-index:3}
.artist__name{font-family:var(--ff-disp);font-weight:600;font-size:clamp(56px,9vw,150px);line-height:.84;text-transform:uppercase;letter-spacing:-.02em}
.artist__copy p{margin-top:22px;font-size:clamp(16px,1.4vw,20px);line-height:1.55;color:var(--g-300);max-width:48ch}
.artist__copy em{color:var(--paper)}
.artist__stats{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,60px);margin-top:clamp(36px,5vh,60px);border-top:1px solid var(--g-900);padding-top:32px}
.stat{display:flex;flex-direction:column}
.stat__num,.stat__suf{font-family:var(--ff-disp);font-weight:600;font-size:clamp(40px,5vw,72px);line-height:1;display:inline}
.stat__suf{color:var(--g-500)}
.stat__lbl{margin-top:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--g-500)}
@media(min-width:900px){
  .artist{grid-template-columns:.85fr 1.15fr}
  .artist__media{max-width:460px}
}

/* =========================================================
   BOOK (WHITE)
   ========================================================= */
.book{position:relative;z-index:7;background:var(--paper);color:var(--black);
  border-radius:38px 38px 0 0;margin-top:-38px;padding:clamp(80px,13vh,180px) var(--pad);
  display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,80px)}
.book .sec-kicker{color:var(--g-500)}
.book__title{font-family:var(--ff-disp);font-weight:600;font-size:clamp(52px,10vw,170px);line-height:.84;text-transform:uppercase;letter-spacing:-.02em}
.book__title .word{display:inline-block;transform:translateY(110%)}
.book__sub{margin-top:24px;font-size:clamp(16px,1.4vw,20px);line-height:1.5;color:var(--g-700);max-width:42ch}
.book__form{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-self:center;max-width:560px;width:100%;margin-left:auto}
.field{position:relative}
.field--full{grid-column:1/-1}
.field input,.field select{width:100%;background:transparent;border:none;border-bottom:1px solid var(--g-300);
  padding:22px 0 12px;font-family:var(--ff-text);font-size:18px;color:var(--black);outline:none;transition:border-color .4s}
.field select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23111' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center}
.field label{position:absolute;left:0;top:22px;font-size:18px;color:var(--g-500);pointer-events:none;transition:.35s var(--ease)}
.field input:focus,.field select:focus{border-color:var(--black)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field select:focus+label,.field select:valid+label{top:2px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--g-500)}
.book__form .btn{grid-column:1/-1;margin-top:14px}
.book__ok{grid-column:1/-1;font-size:14px;color:var(--g-700);font-family:var(--ff-edit);font-style:italic}
@media(min-width:900px){.book{grid-template-columns:1fr 1fr;align-items:center}}
@media(max-width:560px){.book__form{grid-template-columns:1fr}}

/* =========================================================
   FOOTER (BLACK)
   ========================================================= */
.footer{position:relative;z-index:8;background:var(--black);color:var(--paper);
  border-radius:38px 38px 0 0;margin-top:-38px;padding:clamp(60px,8vh,110px) var(--pad) 30px;overflow:hidden}
.footer__big{font-family:var(--ff-logo);font-weight:700;font-size:clamp(80px,24vw,420px);line-height:.9;letter-spacing:-.03em;
  text-align:center;color:transparent;-webkit-text-stroke:1px var(--g-700);text-stroke:1px var(--g-700);margin-bottom:clamp(40px,6vh,80px);user-select:none}
.footer__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 24px;max-width:var(--maxw);margin:0 auto;border-top:1px solid var(--g-900);padding-top:50px}
.footer__col h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--g-500);margin-bottom:14px}
.footer__col p{font-size:16px;line-height:1.7;color:var(--paper)}
.footer__col a{position:relative}
.footer__col a::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--paper);transition:width .4s var(--ease)}
.footer__col a:hover::after{width:100%}
.footer__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:var(--maxw);margin:60px auto 0;
  font-size:12px;letter-spacing:.06em;color:var(--g-500);text-transform:uppercase}
@media(min-width:760px){.footer__grid{grid-template-columns:repeat(4,1fr)}}

/* =========================================================
   BOOKING WIDGET (lives in the white .book section)
   ========================================================= */
.booking{align-self:center;width:100%;max-width:580px;margin-left:auto;
  background:#fff;border:1px solid var(--g-100);border-radius:18px;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.35);padding:clamp(20px,2.4vw,30px);overflow:hidden}
.booking__bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--g-100)}
.booking__steps{display:flex;gap:14px;list-style:none;counter-reset:bk}
.booking__steps li{counter-increment:bk;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--g-300);display:flex;align-items:center;gap:7px}
.booking__steps li::before{content:counter(bk);width:20px;height:20px;border:1px solid var(--g-300);border-radius:50%;
  display:grid;place-items:center;font-size:10px;font-family:var(--ff-disp);transition:.3s var(--ease)}
.booking__steps li.is-active{color:var(--black)}
.booking__steps li.is-active::before{background:var(--black);color:#fff;border-color:var(--black)}
.booking__steps li.is-done::before{content:"✓";background:var(--g-700);color:#fff;border-color:var(--g-700)}
.booking__sync{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--g-500)}
.booking__sync i{width:7px;height:7px;border-radius:50%;background:#1a1a1a;position:relative}
.booking__sync i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #1a1a1a;opacity:.4;animation:pingdot 1.8s ease-out infinite}
@keyframes pingdot{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.6);opacity:0}}
.booking__stage{min-height:344px}

.bk-pane{display:block}
.bk-h{font-family:var(--ff-disp);font-weight:500;font-size:clamp(18px,1.7vw,22px);text-transform:uppercase;margin-bottom:18px;letter-spacing:-.01em}
.bk-h em{font-family:var(--ff-edit);font-style:italic;text-transform:none}
.bk-back{background:none;border:none;color:var(--g-500);font-size:12px;letter-spacing:.04em;cursor:pointer;padding:0;margin-bottom:16px;transition:color .3s}
.bk-back:hover{color:var(--black)}
.bk-note,.bk-fine{font-size:12px;color:var(--g-500);margin-top:16px}
.bk-err{font-size:13px;color:var(--accent,#9e363a);margin:8px 0;color:#a11;}

/* services */
.bk-services{display:flex;flex-direction:column;gap:10px}
.bk-svc{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;text-align:left;
  background:transparent;border:1px solid var(--g-100);border-radius:12px;padding:15px 18px;cursor:pointer;transition:.3s var(--ease)}
.bk-svc:hover{border-color:var(--black);transform:translateX(4px)}
.bk-svc.is-sel{background:var(--black);border-color:var(--black)}
.bk-svc.is-sel *{color:var(--paper)!important}
.bk-svc__name{font-family:var(--ff-disp);font-weight:500;font-size:18px;text-transform:uppercase;display:block;line-height:1}
.bk-svc__desc{font-size:12.5px;color:var(--g-500);display:block;margin-top:5px}
.bk-svc__r{text-align:right;flex:0 0 auto}
.bk-svc__price{font-family:var(--ff-disp);font-size:19px;display:block;line-height:1}
.bk-svc__mins{font-size:10px;color:var(--g-500);text-transform:uppercase;letter-spacing:.08em;display:block;margin-top:5px}

/* calendar */
.bk-cal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.bk-cal__title{font-family:var(--ff-disp);font-size:18px;text-transform:uppercase}
.bk-nav{width:34px;height:34px;border:1px solid var(--g-300);background:transparent;border-radius:50%;font-size:18px;line-height:1;cursor:pointer;transition:.3s}
.bk-nav:hover:not(:disabled){background:var(--black);color:#fff;border-color:var(--black)}
.bk-nav:disabled{opacity:.25;cursor:not-allowed}
.bk-cal__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.bk-cal__dow span{text-align:center;font-size:10px;letter-spacing:.06em;color:var(--g-500)}
.bk-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.bk-cell{aspect-ratio:1;border:none;background:transparent;border-radius:9px;font-size:14px;cursor:pointer;
  color:var(--black);transition:.18s;display:grid;place-items:center;font-family:var(--ff-text)}
.bk-cell--empty{pointer-events:none}
.bk-cell:hover:not(.is-dis):not(.is-sel){background:var(--g-100)}
.bk-cell.is-sel{background:var(--black);color:#fff}
.bk-cell.is-dis{color:var(--g-300);cursor:not-allowed;opacity:.55}

/* time slots */
.bk-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px}
.bk-slot{border:1px solid var(--g-300);background:transparent;border-radius:100px;padding:11px 6px;font-size:13px;
  font-weight:500;cursor:pointer;transition:.22s;color:var(--black)}
.bk-slot:hover:not(.is-dis):not(.is-sel){border-color:var(--black);background:var(--black);color:#fff}
.bk-slot.is-sel{background:var(--black);color:#fff;border-color:var(--black)}
.bk-slot.is-dis{opacity:.3;text-decoration:line-through;cursor:not-allowed}

/* details */
.bk-field{position:relative;margin-bottom:14px}
.bk-field input{width:100%;background:transparent;border:none;border-bottom:1px solid var(--g-300);
  padding:20px 0 10px;font-family:var(--ff-text);font-size:17px;color:var(--black);outline:none;transition:border-color .3s}
.bk-field label{position:absolute;left:0;top:20px;color:var(--g-500);font-size:17px;pointer-events:none;transition:.3s var(--ease)}
.bk-field input:focus{border-color:var(--black)}
.bk-field input:focus+label,.bk-field input:not(:placeholder-shown)+label{top:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.bk-fields .btn{margin-top:8px}

/* confirmation */
.bk-done{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 0}
.bk-check{color:var(--black)}
.bk-done__h{font-family:var(--ff-disp);font-size:clamp(26px,3vw,34px);text-transform:uppercase;letter-spacing:-.01em}
.bk-summary{width:100%;border-top:1px solid var(--g-100);margin-top:4px;text-align:left}
.bk-summary div{display:flex;justify-content:space-between;gap:16px;padding:13px 2px;border-bottom:1px solid var(--g-100)}
.bk-summary span{color:var(--g-500);text-transform:uppercase;letter-spacing:.08em;font-size:10px;align-self:center}
.bk-summary b{font-weight:600;text-align:right;font-size:14px}
.bk-done__note{font-family:var(--ff-edit);font-style:italic;color:var(--g-700);max-width:34ch}
.bk-restart{background:none;border:none;border-bottom:1px solid var(--black);color:var(--black);cursor:pointer;font-size:14px;padding:2px 0;margin-top:4px}

/* =========================================================
   MOBILE — exhibition becomes a vertical stack (not a shrunk pin)
   ========================================================= */
@media (max-width:760px){
  .exhibition__pin{height:auto;overflow:visible;display:block}
  .exhibition__rail{flex-direction:column;height:auto;gap:clamp(48px,9vw,72px);padding:clamp(70px,12vh,110px) var(--pad);transform:none!important}
  .panel{height:auto;width:100%!important;flex:none}
  .exhibition__arrow{display:none}
  .exhibition__title{font-size:clamp(56px,17vw,92px)}
  .plate{width:100%;gap:18px}
  .plate__frame{flex:none;width:100%;aspect-ratio:4/5}
  .exhibition__endhead{font-size:clamp(46px,13vw,88px)}
  .artist__media{max-width:none}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .hero__title .word,.book__title .word,.loader__word span{transform:none!important}
}

/* =========================================================
   BTN — solid (for use on LIGHT/cream sections)
   ========================================================= */
.btn--solid{background:var(--black);color:var(--paper);border-color:var(--black)}
.btn--solid span{color:var(--paper)}
.btn--solid::before{background:var(--blue)}
.btn--solid:hover span{color:#fff}

/* =========================================================
   THE MENU — grouped service list (lives in white .catalogue)
   ========================================================= */
.menu{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,60px)}
@media(min-width:760px){.menu{grid-template-columns:1fr 1fr;gap:clamp(44px,5vw,72px) clamp(48px,7vw,120px)}}
.menu__cat{font-family:var(--ff-text);font-weight:500;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--g-500);padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid var(--g-100);
  display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.menu__cat span{font-family:var(--ff-disp);font-weight:600;color:var(--black);font-size:clamp(22px,2.6vw,32px);
  letter-spacing:-.01em;text-transform:none}
.menu__list{list-style:none}
.svc{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:14px 0;
  border-bottom:1px solid var(--g-100);transition:padding-left .4s var(--ease)}
.svc:hover{padding-left:10px}
.svc__name{font-family:var(--ff-text);font-weight:500;font-size:clamp(15px,1.25vw,17.5px);color:var(--ink);line-height:1.35}
.svc__time{font-family:var(--ff-disp);font-weight:500;font-size:13px;letter-spacing:.03em;color:var(--g-500);white-space:nowrap;flex:0 0 auto}
.svc__tag{font-family:var(--ff-text);font-style:normal;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);border:1px solid var(--blue);border-radius:100px;padding:2px 8px;margin-left:8px;vertical-align:middle}
.catalogue__foot{margin-top:clamp(46px,6vw,80px);display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:center;gap:28px;border-top:1px solid var(--g-100);padding-top:38px}
.catalogue__fine{font-size:13px;letter-spacing:.01em;color:var(--g-500);max-width:64ch;line-height:1.65}
.catalogue__fine em{font-family:var(--ff-edit);font-style:italic;color:var(--black)}

/* =========================================================
   CTA BAND (navy) — replaces inline booking on home
   ========================================================= */
.cta-band{position:relative;z-index:8;background:var(--black);color:var(--paper);
  border-radius:38px 38px 0 0;margin-top:-38px;overflow:hidden;
  padding:clamp(90px,15vh,180px) var(--pad);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:18px}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 50% 118%,rgba(28,63,126,.45),transparent 62%)}
.cta-band>*{position:relative;z-index:1}
.cta-band__title{font-family:var(--ff-disp);font-weight:700;font-size:clamp(46px,9vw,140px);
  line-height:.86;text-transform:uppercase;letter-spacing:-.02em}
.cta-band__sub{max-width:48ch;font-size:clamp(15px,1.4vw,19px);line-height:1.55;color:var(--g-300)}
.cta-band .btn{margin-top:16px}

/* =========================================================
   FOOTER NAV row
   ========================================================= */
.footer__nav{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,40px);justify-content:center;
  max-width:var(--maxw);margin:46px auto 0;padding-top:34px;border-top:1px solid var(--g-900)}
.footer__nav a{font-family:var(--ff-disp);font-weight:500;font-size:14px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--g-300);transition:color .3s}
.footer__nav a:hover{color:var(--paper)}

/* =========================================================
   INNER-PAGE HERO (navy)
   ========================================================= */
.page-hero{position:relative;overflow:hidden;text-align:center;
  padding:clamp(140px,20vh,220px) var(--pad) clamp(54px,8vh,96px);
  background:radial-gradient(110% 80% at 50% -10%,var(--navy-glow),rgba(12,31,61,0) 55%),linear-gradient(180deg,#06101d,var(--navy-deep))}
.page-hero__kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.page-hero__title{font-family:var(--ff-disp);font-weight:700;font-size:clamp(52px,11vw,150px);
  line-height:.86;text-transform:uppercase;letter-spacing:-.02em}
.page-hero__sub{max-width:56ch;margin:22px auto 0;font-size:clamp(16px,1.5vw,20px);line-height:1.55;color:var(--g-300)}

/* =========================================================
   MEET THE TEAM
   ========================================================= */
.team{position:relative;z-index:5;background:var(--paper);color:var(--black);
  border-radius:38px 38px 0 0;margin-top:-38px;padding:clamp(70px,11vh,150px) var(--pad)}
.lead-artist{max-width:var(--maxw);margin:0 auto clamp(60px,9vh,110px);
  display:grid;grid-template-columns:1fr;gap:clamp(30px,5vw,64px);align-items:center}
@media(min-width:900px){.lead-artist{grid-template-columns:.82fr 1.18fr}}
.lead-artist__photo{position:relative;aspect-ratio:4/5;width:100%;max-width:440px;border-radius:14px;overflow:hidden;
  background:var(--g-100);box-shadow:0 44px 90px -52px rgba(7,15,28,.65)}
.lead-artist__photo img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(1) contrast(1.04)}
.lead-artist__badge{position:absolute;top:14px;left:14px;background:var(--blue);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;border-radius:100px}
.lead-artist__kicker{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--g-500);margin-bottom:14px}
.lead-artist__name{font-family:var(--ff-disp);font-weight:700;font-size:clamp(44px,7vw,104px);line-height:.84;
  text-transform:uppercase;letter-spacing:-.02em}
.lead-artist__copy p{margin-top:20px;font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:var(--g-700);max-width:52ch}
.lead-artist__copy em{font-family:var(--ff-edit);font-style:italic;color:var(--black)}

.team__label{max-width:var(--maxw);margin:0 auto clamp(28px,4vw,46px);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--g-500);
  border-top:1px solid var(--g-100);padding-top:30px}
.team__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(28px,4vw,52px);
  max-width:var(--maxw);margin:0 auto}
.member{text-align:center}
.member__photo{width:100%;max-width:230px;aspect-ratio:1;margin:0 auto 18px;border-radius:14px;overflow:hidden;
  background:var(--g-100);box-shadow:0 30px 60px -42px rgba(7,15,28,.5)}
.member__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);
  transition:filter .5s var(--ease),transform .8s var(--ease)}
.member:hover .member__photo img{filter:grayscale(0);transform:scale(1.06)}
.member__photo--soon{display:grid;place-items:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--g-500)}
.member__name{font-family:var(--ff-disp);font-weight:600;font-size:clamp(22px,2.3vw,30px);text-transform:uppercase;letter-spacing:-.01em}
.member__role{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--g-500);margin-top:7px}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{position:relative;z-index:5;background:var(--paper);color:var(--black);
  border-radius:38px 38px 0 0;margin-top:-38px;padding:clamp(70px,11vh,150px) var(--pad)}
.contact__grid{display:grid;gap:clamp(44px,6vw,90px);max-width:var(--maxw);margin:0 auto}
@media(min-width:900px){.contact__grid{grid-template-columns:1fr 1fr}}
.contact__h{font-family:var(--ff-disp);font-weight:600;font-size:clamp(28px,3.2vw,44px);text-transform:uppercase;
  letter-spacing:-.01em;margin-bottom:8px}
.info-row{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--g-100)}
.info-row dt{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--g-500);padding-top:3px}
.info-row dd{font-size:clamp(15px,1.4vw,18px);line-height:1.5;color:var(--ink)}
.info-row dd a{position:relative;border-bottom:1px solid var(--g-300);transition:border-color .3s}
.info-row dd a:hover{border-color:var(--black)}
.contact__note{margin-top:22px;font-family:var(--ff-edit);font-style:italic;color:var(--g-700);font-size:15px}
/* Map + a real shot of the room, side by side on wide screens so "where we are"
   reads as a place rather than a pin. Stacks below 1200px so neither gets tiny. */
.contact__place{margin-top:30px;display:grid;gap:clamp(14px,1.6vw,20px)}
@media(min-width:1200px){ .contact__place{grid-template-columns:1fr 1fr;align-items:start} }
.contact__shot{margin:0}
.contact__shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;
  box-shadow:0 30px 60px -44px rgba(7,15,28,.45)}
.contact__shot figcaption{margin-top:9px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--g-500)}

.contact__map{border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:var(--g-100);
  box-shadow:0 30px 60px -44px rgba(7,15,28,.45)}
.contact__map iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}
.contact__form{display:grid;gap:6px;align-content:start}
.contact__form .btn{margin-top:18px;justify-self:start}
.contact__ok{margin-top:14px;font-family:var(--ff-edit);font-style:italic;color:var(--g-700);font-size:14px}

/* =========================================================
   BOOK PAGE — hybrid navy selector (Service → Artist → Square)
   ========================================================= */
.bookpage{max-width:1080px;margin:0 auto;padding:clamp(38px,6vh,80px) var(--pad) clamp(80px,12vh,150px);color:var(--paper)}
.bk2__steps{display:flex;gap:10px;justify-content:center;margin-bottom:clamp(34px,5vh,60px);flex-wrap:wrap}
.bk2__step{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--g-500)}
.bk2__step b{width:24px;height:24px;border:1px solid var(--g-700);border-radius:50%;display:grid;place-items:center;
  font-family:var(--ff-disp);font-size:12px;color:var(--g-300);transition:.3s var(--ease)}
.bk2__step.is-active{color:var(--paper)}
.bk2__step.is-active b{background:var(--blue);border-color:var(--blue);color:#fff}
.bk2__step.is-done b{background:var(--accent);border-color:var(--accent);color:var(--black)}
.bk2__sep{width:30px;height:1px;background:var(--g-700);align-self:center}
.bk2__h{font-family:var(--ff-disp);font-weight:700;font-size:clamp(30px,5vw,60px);line-height:.92;text-transform:uppercase;
  letter-spacing:-.02em;text-align:center;margin-bottom:8px}
.bk2__h em{font-family:var(--ff-edit);font-style:italic;text-transform:none;color:var(--accent)}
.bk2__lead{text-align:center;color:var(--g-300);font-size:15px;margin-bottom:clamp(30px,4vh,50px)}
.bk2__back{display:inline-flex;align-items:center;gap:7px;background:none;border:none;color:var(--g-300);
  cursor:pointer;font-size:13px;letter-spacing:.04em;margin-bottom:24px;transition:color .3s}
.bk2__back:hover{color:var(--paper)}

/* service picker (grouped) */
.svcgrid{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,48px)}
@media(min-width:720px){.svcgrid{grid-template-columns:1fr 1fr}}
.svcgrid__cat{font-family:var(--ff-text);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--g-900)}
.svcbtn{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;text-align:left;
  background:rgba(159,177,212,.04);border:1px solid var(--g-900);border-radius:12px;padding:14px 16px;margin-bottom:10px;
  cursor:pointer;color:var(--paper);transition:.28s var(--ease)}
.svcbtn:hover{border-color:var(--blue);background:rgba(28,63,126,.18);transform:translateX(4px)}
.svcbtn.is-sel{border-color:var(--accent);background:rgba(28,63,126,.3)}
.svcbtn__name{font-family:var(--ff-text);font-weight:500;font-size:15px;line-height:1.3}
.svcbtn__time{font-family:var(--ff-disp);font-size:12.5px;color:var(--g-300);white-space:nowrap;flex:0 0 auto}

/* artist picker (cards with photos) */
.artistgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(16px,2.4vw,26px)}
.artistcard{background:rgba(159,177,212,.05);border:1px solid var(--g-900);border-radius:16px;padding:18px;
  cursor:pointer;text-align:center;color:var(--paper);transition:.28s var(--ease)}
.artistcard:hover{border-color:var(--blue);transform:translateY(-4px);background:rgba(28,63,126,.2)}
.artistcard.is-sel{border-color:var(--accent);background:rgba(28,63,126,.32)}
.artistcard__photo{width:96px;height:96px;border-radius:50%;overflow:hidden;margin:0 auto 14px;background:var(--g-900);
  border:1px solid var(--g-700)}
.artistcard__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.artistcard__photo--soon{display:grid;place-items:center;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--g-500)}
.artistcard__name{font-family:var(--ff-disp);font-weight:600;font-size:18px;text-transform:uppercase;letter-spacing:-.01em}
.artistcard__role{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--g-500);margin-top:5px}
.artistcard--any .artistcard__photo{display:grid;place-items:center;font-size:30px;color:var(--accent)}

/* summary / handoff */
.bk2__summary{max-width:520px;margin:0 auto;background:rgba(159,177,212,.05);border:1px solid var(--g-900);
  border-radius:18px;padding:clamp(24px,3vw,36px);text-align:center}
.bk2__sumrow{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--g-900);text-align:left}
.bk2__sumrow:last-of-type{border-bottom:none}
.bk2__sumrow span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--g-500);align-self:center}
.bk2__sumrow b{font-family:var(--ff-disp);font-weight:600;font-size:16px;text-align:right}
.bk2__note{font-size:13px;color:var(--g-300);line-height:1.6;margin:18px 0 22px}
.bk2__note b{color:var(--accent)}
.bk2-soon{font-size:12px;letter-spacing:.04em;color:var(--g-500);margin-top:16px}

/* =========================================================
   PRICE bits — home menu + booking
   ========================================================= */
.svc__meta{display:inline-flex;align-items:baseline;gap:10px;flex:0 0 auto;white-space:nowrap}
.svc__price{font-family:var(--ff-disp);font-weight:600;font-size:14px;color:var(--blue);letter-spacing:.01em}
.svcbtn__meta{display:inline-flex;align-items:baseline;gap:9px;flex:0 0 auto;white-space:nowrap;text-align:right}
.svcbtn__meta b{font-family:var(--ff-disp);font-weight:600;font-size:13.5px;color:var(--accent)}
.svcbtn__meta span{font-family:var(--ff-disp);font-size:12px;color:var(--g-300)}
.svcgrid__col--wide{grid-column:1/-1}
.artistcard__price{font-family:var(--ff-disp);font-weight:600;font-size:15px;color:var(--accent);margin-top:8px}

/* =========================================================
   SCROLL PROGRESS BAR + hero zoom setup
   ========================================================= */
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:850;pointer-events:none;background:rgba(159,177,212,.08)}
.scroll-progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--blue),var(--accent))}
.hero__title{will-change:transform;transform-origin:50% 46%;backface-visibility:hidden}

/* =========================================================
   REAL IMAGERY PASS (Jun 27) — exhibition plates, hero backdrop, menu thumbs
   ========================================================= */
/* Exhibition plates now hold real salon work photos */
.plate__frame{overflow:hidden;position:relative;background:#0d0d0d}
.plate__frame img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
  filter:contrast(1.04) saturate(1.03);transition:transform 1s var(--ease);will-change:transform}
.plate:hover .plate__frame img{transform:scale(1.05)}
.plate__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,16,29,0) 45%,rgba(5,11,21,.5));
  box-shadow:inset 0 0 80px 14px rgba(0,0,0,.28)}
.plate__tag{position:absolute;left:16px;bottom:14px;z-index:2;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(246,244,239,.86);font-weight:500}

/* Hero atmospheric backdrop — the actual salon, dimmed for legibility */
.hero__bg{position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(6,16,29,.84),rgba(5,11,21,.93)),
    url("../assets/ig/salon-interior.jpg") center/cover no-repeat;
  filter:grayscale(.4) contrast(1.06);opacity:.92}
.hero__stage{z-index:3}.hero__scroll{z-index:3}.hero__framemark{z-index:3}

/* Menu category thumbnails */
.menu__cat{align-items:center}
.menu__thumb{width:44px;height:44px;border-radius:9px;object-fit:cover;flex:0 0 auto;
  filter:grayscale(.12) contrast(1.03);box-shadow:0 10px 22px -12px rgba(7,15,28,.55)}
@media (max-width:520px){.menu__thumb{width:38px;height:38px}}

/* =========================================================
   THE WALL — parallax gallery (navy, between menu + CTA)
   ========================================================= */
.wall{position:relative;z-index:6;background:var(--black);color:var(--paper);
  border-radius:38px 38px 0 0;margin-top:-38px;overflow:hidden;
  padding:clamp(90px,14vh,170px) var(--pad) clamp(70px,10vh,130px)}
.wall::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 50% -10%,rgba(28,63,126,.35),transparent 60%)}
.wall__head{position:relative;z-index:1;text-align:center;margin-bottom:clamp(44px,7vh,90px)}
.wall__title{font-family:var(--ff-disp);font-weight:600;font-size:clamp(46px,9vw,140px);
  line-height:.86;text-transform:uppercase;letter-spacing:-.02em}
.wall__title em{color:var(--accent)}
.wall__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2.4vw,30px);max-width:var(--maxw);margin:0 auto;align-items:start}
.wall__col{display:flex;flex-direction:column;gap:clamp(14px,2.4vw,30px);will-change:transform}
.wall__col:nth-child(2){margin-top:clamp(40px,7vw,110px)}
.wall__item{position:relative;border-radius:10px;overflow:hidden;background:#0d1524;margin:0}
.wall__item img{width:100%;aspect-ratio:4/5;object-fit:cover;
  filter:contrast(1.05) saturate(1.02);transition:transform 1.1s var(--ease);will-change:transform}
.wall__item:hover img{transform:scale(1.06)}
.wall__item::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,16,29,0) 55%,rgba(5,11,21,.55));
  box-shadow:inset 0 0 60px 10px rgba(0,0,0,.22)}
.wall__item figcaption{position:absolute;left:14px;bottom:12px;z-index:2;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(246,244,239,.85);font-weight:500}
.wall__fine{position:relative;z-index:1;text-align:center;margin-top:clamp(40px,6vh,70px);
  font-size:13px;letter-spacing:.04em;color:var(--g-500)}
.wall__fine a{color:var(--accent);border-bottom:1px solid rgba(159,177,212,.35);transition:border-color .3s}
.wall__fine a:hover{border-color:var(--accent)}
@media (max-width:760px){
  .wall__grid{grid-template-columns:repeat(2,1fr)}
  .wall__col{transform:none!important}
  .wall__col:nth-child(2){margin-top:clamp(28px,9vw,48px)}
  .wall__col:nth-child(3){display:none}
}

/* =========================================================
   BOOKING — (dead rule; artist levels were removed site-wide Jul 25)
   ========================================================= */

/* =========================================================
   MOBILE HERO — Ken Burns backdrop (the phone's signature moment)
   ========================================================= */
@media (max-width:760px){
  .hero__bg{animation:heroKen 16s var(--ease-io) infinite alternate;transform-origin:52% 40%}
  @keyframes heroKen{from{transform:scale(1)}to{transform:scale(1.12)}}
}

/* Menu category thumb — grows on group hover */
.menu__group:hover .menu__thumb{transform:scale(1.5);box-shadow:0 18px 34px -14px rgba(7,15,28,.6)}
.menu__thumb{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}

/* =========================================================
   IN MOTION — real @artistly.ca reels (between THE WALL + CTA)
   ========================================================= */
.reels{position:relative;z-index:7;background:var(--ink);color:var(--paper);
  border-radius:38px 38px 0 0;margin-top:-38px;overflow:hidden;
  padding:clamp(80px,12vh,150px) var(--pad) clamp(70px,10vh,120px)}
.reels::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(85% 55% at 50% -10%,rgba(28,63,126,.32),transparent 62%)}
.reels__head{position:relative;z-index:1;text-align:center;margin-bottom:clamp(40px,6vh,80px)}
.reels__title{font-family:var(--ff-disp);font-weight:600;font-size:clamp(44px,8vw,120px);
  line-height:.86;text-transform:uppercase;letter-spacing:-.02em}
.reels__title em{color:var(--accent)}
.reels__sub{margin:22px auto 0;max-width:48ch;font-size:clamp(15px,1.3vw,18px);
  line-height:1.55;color:var(--g-300)}

.reels__rail{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.8vw,24px);max-width:1260px;margin:0 auto}
@media (max-width:1080px){ .reels__rail{grid-template-columns:repeat(2,1fr)} }
.reel{margin:0}
.reel__frame{position:relative;border-radius:14px;overflow:hidden;background:#0d1524;
  box-shadow:0 34px 64px -34px rgba(0,0,0,.8)}
.reel__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,16,29,0) 62%,rgba(5,11,21,.42));
  box-shadow:inset 0 0 0 1px rgba(159,177,212,.16)}
.reel__frame video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;
  background:#0d1524;transition:transform 1.1s var(--ease);will-change:transform}
.reel:hover .reel__frame video{transform:scale(1.045)}
.reel figcaption{display:flex;flex-direction:column;gap:5px;padding:15px 2px 0}
.reel__name{font-family:var(--ff-disp);font-weight:600;font-size:clamp(15px,1.4vw,19px);
  text-transform:uppercase;letter-spacing:.01em}
.reel__meta{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g-500)}

.reels__fine{position:relative;z-index:1;text-align:center;margin-top:clamp(40px,6vh,70px);
  font-size:13px;letter-spacing:.04em;color:var(--g-500)}
.reels__fine a{color:var(--accent);border-bottom:1px solid rgba(159,177,212,.35);transition:border-color .3s}
.reels__fine a:hover{border-color:var(--accent)}

/* Mobile: swipeable snap rail (RV reviews on his phone) */
@media (max-width:760px){
  .reels__rail{display:flex;grid-template-columns:none;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 6px;
    scrollbar-width:none;-ms-overflow-style:none}
  .reels__rail::-webkit-scrollbar{display:none}
  .reel{flex:0 0 74%;scroll-snap-align:center}
}
@media (prefers-reduced-motion:reduce){
  .reel__frame video{transition:none}
  .reel:hover .reel__frame video{transform:none}
}

/* =========================================================
   OFFERS — red CTA on the booking page + the panel it reveals
   (RV request, Jul 29). Red is used here and nowhere else, so it
   reads as a promo flag rather than part of the palette.
   ========================================================= */
/* OFFER BAR — spans the service grid at the top of the booking step.
   Built from the same vocabulary as .svcbtn (rounded card, hairline, lift on
   hover) so it belongs, then pushed one notch further — live pulse, a sheen
   that sweeps across, a travelling arrow — so it reads as the one thing on the
   page worth a click. Red stays a signal: the dot, the arrow, the price. */
.offerbar{grid-column:1/-1;position:relative;overflow:hidden;
  display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
  color:var(--paper);font:inherit;
  background:linear-gradient(100deg,rgba(255,31,61,.10),rgba(159,177,212,.05) 46%);
  border:1px solid rgba(255,31,61,.28);border-radius:14px;
  padding:16px 20px;margin-bottom:clamp(24px,3.4vw,36px);
  transition:transform .32s var(--ease),border-color .32s var(--ease),box-shadow .32s var(--ease)}
.offerbar:hover{transform:translateY(-2px);border-color:rgba(255,31,61,.62);
  box-shadow:0 20px 44px -24px rgba(0,0,0,.85),0 0 0 1px rgba(255,31,61,.16)}
.offerbar:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* sheen */
.offerbar::after{content:"";position:absolute;top:0;left:-45%;width:38%;height:100%;
  pointer-events:none;transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent,rgba(244,241,234,.14),transparent);
  transition:left .8s var(--ease)}
.offerbar:hover::after{left:125%}

/* live pulse */
.offerbar__dot{position:relative;flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  background:var(--red);box-shadow:0 0 10px 1px rgba(255,31,61,.55)}
.offerbar__dot::before{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid var(--red);animation:offerPulse 2.4s var(--ease-io) infinite}
@keyframes offerPulse{0%{transform:scale(.5);opacity:.8}70%,100%{transform:scale(1.4);opacity:0}}

.offerbar__copy{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0}
.offerbar__title{font-family:var(--ff-disp);font-weight:600;font-size:15px;
  text-transform:uppercase;letter-spacing:.09em}
.offerbar__sub{font-size:13px;line-height:1.35;color:var(--g-300)}

.offerbar__go{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  font-family:var(--ff-disp);font-weight:600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red)}
.offerbar__go i{font-style:normal;transition:transform .4s var(--ease)}
.offerbar:hover .offerbar__go i{transform:translateX(6px)}
.offerbar[aria-expanded="true"] .offerbar__go i{transform:rotate(90deg)}

@media (max-width:620px){
  .offerbar{gap:13px;padding:15px 16px}
  .offerbar__sub{display:none}
}
@media (prefers-reduced-motion:reduce){
  .offerbar,.offerbar::after,.offerbar__go i{transition:none}
  .offerbar:hover{transform:none}
  .offerbar:hover::after{left:-45%}
  .offerbar__dot::before{animation:none;opacity:.4}
}

.offers{position:relative;z-index:6;padding:clamp(14px,3vh,34px) var(--pad) clamp(20px,4vh,44px)}
.offers__inner{position:relative;max-width:var(--maxw);margin:0 auto;
  background:var(--ink);color:var(--paper);border-radius:14px;
  padding:clamp(26px,4vw,44px);
  box-shadow:inset 0 0 0 1px rgba(159,177,212,.16), 0 34px 64px -34px rgba(0,0,0,.8)}
.offers__kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--g-500);
  margin-bottom:clamp(18px,2.5vw,26px);display:flex;align-items:center;gap:10px}
.offers__kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 3px rgba(255,31,61,.18)}
.offers__list{list-style:none;display:grid;gap:20px}
.offer{border-top:1px solid rgba(159,177,212,.16);padding-top:20px}
.offers__list .offer:first-child{border-top:0;padding-top:0}
.offer__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.offer__head h3{font-family:var(--ff-disp);font-weight:600;font-size:clamp(19px,2vw,26px);
  text-transform:uppercase;letter-spacing:-.01em}
.offer__price{font-family:var(--ff-disp);font-weight:600;color:var(--red);
  font-size:clamp(17px,1.8vw,22px);white-space:nowrap}
.offer p{margin-top:10px;font-size:clamp(14px,1.2vw,16px);line-height:1.55;color:var(--g-300);
  max-width:62ch}
.offer__meta{display:block;margin-top:10px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--g-500)}
.offers__empty h3{font-family:var(--ff-disp);font-weight:600;font-size:clamp(19px,2vw,26px);
  text-transform:uppercase;letter-spacing:-.01em}
.offers__empty p{margin-top:10px;font-size:clamp(14px,1.2vw,16px);line-height:1.55;
  color:var(--g-300);max-width:56ch}
.offers__empty a{color:var(--accent);border-bottom:1px solid rgba(159,177,212,.35)}
.offers__empty a:hover{border-color:var(--accent)}
.offers__fine{margin-top:clamp(22px,3vw,30px);font-size:13px;line-height:1.5;color:var(--g-500)}
@media (max-width:560px){
  .offer__head{flex-direction:column;gap:4px}
}

/* =========================================================
   MOBILE NAV — hamburger + full-screen menu
   ========================================================= */
/* padding gives a ~44px touch target — at 6px it measured 25px tall, well under
   the 44px guideline, and it's the only navigation on a phone. */
.nav__toggle{display:none;font-family:var(--ff-disp);font-weight:600;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:none;border:0;cursor:pointer;
  padding:14px 4px;margin:-14px -4px;line-height:1}
.navmenu{position:fixed;inset:0;z-index:790;
  background:radial-gradient(120% 80% at 50% -10%,var(--navy-glow),rgba(12,31,61,0) 55%),
    linear-gradient(180deg,#06101d,#050b15);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(-1.5%);
  transition:opacity .4s var(--ease),transform .55s var(--ease),visibility .4s}
body.menu-open .navmenu{opacity:1;visibility:visible;transform:none}
body.menu-open{overflow:hidden}
.navmenu a{font-family:var(--ff-disp);font-weight:600;font-size:clamp(36px,11vw,58px);line-height:1.18;
  text-transform:uppercase;color:var(--paper);letter-spacing:-.01em;padding:6px 0;opacity:.92;transition:opacity .25s}
.navmenu a:hover,.navmenu a:active{opacity:1}
.navmenu .navmenu__book{margin-top:24px;font-size:14px;font-weight:700;letter-spacing:.06em;
  border:1px solid var(--paper);border-radius:100px;padding:15px 36px;opacity:1}
@media (max-width:880px){.nav__toggle{display:inline-block}.nav__cta{display:none}}
@media (min-width:881px){.navmenu{display:none!important}.nav__toggle{display:none}}

/* =========================================================
   LIVE BOOKING — add-ons, day rail, slots, details form
   Steps 3–5 of the on-site Square booking. Same navy/bone
   language as the rest of the booking page; nothing here
   should read as a different product.
   ========================================================= */

/* ---- add-ons ---- */
.addongrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:12px;margin:clamp(18px,3vw,30px) 0}
.addon{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:16px 18px;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--g-900);border-radius:14px;
  color:var(--paper);transition:border-color .25s,background .25s,transform .25s}
.addon:hover{border-color:var(--accent);background:rgba(255,255,255,.06);transform:translateY(-2px)}
.addon.is-on{border-color:var(--accent);background:rgba(159,177,212,.12)}
.addon__tick{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--g-700);
  position:relative;transition:background .2s,border-color .2s}
.addon.is-on .addon__tick{background:var(--accent);border-color:var(--accent)}
.addon.is-on .addon__tick::after{content:"";position:absolute;left:5px;top:1px;
  width:5px;height:10px;border:solid var(--black);border-width:0 2px 2px 0;transform:rotate(45deg)}
.addon__name{font-weight:600;font-size:15px;line-height:1.25}
.addon__meta{font-size:12.5px;color:var(--g-300);letter-spacing:.02em}

/* ---- day rail ---- */
.dayrail{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;
  margin:clamp(16px,2.5vw,26px) 0 6px;scrollbar-width:none}
.dayrail::-webkit-scrollbar{display:none}
.daypill{flex:0 0 auto;padding:10px 16px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--g-900);color:var(--g-300);
  font-size:13px;white-space:nowrap;transition:all .22s}
.daypill:hover{border-color:var(--accent);color:var(--paper)}
.daypill.is-on{background:var(--paper);border-color:var(--paper);color:var(--black);font-weight:600}

/* ---- time slots ---- */
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:10px;margin-top:14px}
.slot{padding:13px 8px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--g-900);color:var(--paper);
  font-size:14px;font-variant-numeric:tabular-nums;transition:all .22s}
.slot:hover{border-color:var(--accent);background:rgba(159,177,212,.14);transform:translateY(-2px)}

/* ---- details form ---- */
.bkform{margin-top:clamp(18px,3vw,28px);display:grid;gap:14px;max-width:520px}
.bkform .btn{justify-self:start;margin-top:6px}
.bkform .btn[disabled]{opacity:.55;pointer-events:none}

.bk2__actions{margin-top:clamp(18px,3vw,28px)}
.bk2__err{color:#ff7b8d;font-size:14px;margin:10px 0 0;line-height:1.5}
.bk2__big{font-size:clamp(22px,4vw,34px);line-height:1.25;margin:0 0 18px;color:var(--paper)}
.bk2__summary--done{border-color:var(--accent)}

@media (max-width:600px){
  .addongrid{grid-template-columns:1fr}
  .slotgrid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
}

/* =========================================================
   BOOKING FORM — dark-surface field overrides
   `.field input` is color:var(--black), which is right on the light contact
   page but invisible on the navy booking page: users were typing into what
   looked like empty fields. Scoped to .bkform so contact.html is untouched.
   ========================================================= */
.bkform .field input{color:var(--paper);border-bottom-color:var(--g-700)}
.bkform .field input::placeholder{color:transparent}
.bkform .field label{color:var(--g-300)}
.bkform .field input:focus{border-color:var(--accent)}
.bkform .field input:focus+label,
.bkform .field input:not(:placeholder-shown)+label{color:var(--accent)}

/* Browser autofill forces its own light background + dark text, which would
   put us straight back to unreadable. Paint over it. */
.bkform .field input:-webkit-autofill,
.bkform .field input:-webkit-autofill:hover,
.bkform .field input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--paper);
  caret-color:var(--paper);
  transition:background-color 9999s ease-in-out 0s;
}

/* =========================================================
   OFFER — 30% off first visit (7–31 Aug 2026)
   Uses the existing red accent so it reads as a promotion without
   introducing a new colour to the palette.
   ========================================================= */
.offer{display:flex;gap:clamp(16px,3vw,28px);align-items:center;
  background:linear-gradient(135deg,rgba(255,31,61,.10),rgba(198,13,38,.04));
  border:1px solid rgba(255,31,61,.35);border-radius:16px;
  padding:clamp(18px,3vw,28px);margin:clamp(14px,2.5vw,22px) 0}
.offer__badge{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;width:clamp(78px,11vw,104px);aspect-ratio:1/1;border-radius:50%;
  background:linear-gradient(135deg,var(--red),var(--red-deep));color:#fff;
  font-family:var(--ff-disp);font-weight:700;font-size:clamp(26px,4vw,36px);line-height:1;
  box-shadow:0 10px 30px rgba(255,31,61,.28)}
.offer__badge span{font-size:clamp(9px,1.3vw,11px);letter-spacing:.14em;margin-top:3px}
.offer__body h3{margin:0 0 8px;font-size:clamp(19px,3vw,27px);color:var(--paper);line-height:1.15}
.offer__body p{margin:0 0 7px;color:var(--g-300);font-size:clamp(14px,1.6vw,16px);line-height:1.55}
.offer__body b{color:var(--paper)}
.offer__when{color:var(--accent)!important;font-size:13px!important;letter-spacing:.03em}

/* hero pill */
.hero__offer{display:inline-flex;align-items:center;gap:8px;align-self:center;
  padding:9px 18px;margin-bottom:clamp(14px,2vw,22px);border-radius:999px;
  background:rgba(255,31,61,.14);border:1px solid rgba(255,31,61,.45);
  color:var(--paper);font-size:clamp(12px,1.4vw,14px);letter-spacing:.02em;
  text-decoration:none;transition:background .3s,border-color .3s,transform .3s}
.hero__offer:hover{background:rgba(255,31,61,.24);border-color:var(--red);transform:translateY(-2px)}
.hero__offer b{font-weight:700;letter-spacing:.04em}
.hero__offer i{font-style:normal;color:var(--g-300)}

@media(max-width:620px){
  .offer{flex-direction:column;text-align:center}
  .offer__badge{width:88px}
}