/* ══════════════════════════════════════════════════
   REVENANTS BARBERSHOP — cinematic noir
   ══════════════════════════════════════════════════ */

/* Rage Italic — the logo's own hand. Used only as an accent voice.
   NOTE: licensed webfont required before going live (see /assets/rage.woff2). */
@font-face{
  font-family:"Rage";
  src:local("Rage Italic"), local("RageItalic"),
      url("assets/rage.woff2") format("woff2"),
      url("assets/rage.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --ink:#08080a;
  --ink-2:#0e0e11;
  --ink-3:#141418;
  --bone:#ece7de;
  --ash:#a09a90;
  --ash-2:#8f8a82;
  --accent:#a8792f;
  --accent-lt:#d8ae66;
  --edge:#ffffff14;
  --f-disp:"Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-hand:"Rage", "Segoe Script", "Brush Script MT", cursive;
  --f-body:"Jost", "Futura", "Trebuchet MS", sans-serif;
  --pad:clamp(1.25rem, 5vw, 6rem);
  --hdr-h:clamp(64px, 8vw, 92px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-body);
  font-weight:300;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-loading{overflow:hidden;height:100vh}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{
  font-family:var(--f-disp);font-weight:800;font-stretch:100%;
  letter-spacing:-.035em;line-height:.94;margin:0;text-transform:uppercase;
}
::selection{background:var(--accent);color:var(--bone)}
/* one visible focus ring for everything interactive — keyboard users were blind */
:focus-visible{outline:1px solid var(--accent-lt);outline-offset:3px}

/* ─── the hand: logo script, accent use only ─── */
.script{
  font-family:var(--f-hand);
  font-style:normal;
  font-weight:400;
  font-synthesis:none;
  letter-spacing:0;
  line-height:1.05;
  padding-right:.06em;      /* the brush tail overshoots its advance width */
}
h1 .script,h2 .script,h3 .script{font-size:1.34em;text-transform:none;letter-spacing:0;font-weight:400;margin-left:.06em}

/* ─── texture ─── */
.grain{
  position:fixed;inset:-150%;z-index:9998;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  animation:grainShift 700ms steps(1) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 40%, #000 130%);
  opacity:.85;
}

/* ══════════ SPLASH ══════════ */
.splash{
  position:fixed;inset:0;z-index:9000;background:#050506;
  transition:opacity 1s ease, visibility 1s;
}
.splash__glow{
  position:absolute;left:50%;top:50%;width:min(120vw,1400px);aspect-ratio:2/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, #ffffff10, transparent 70%);
  opacity:0;animation:glowIn 2.6s .3s ease forwards;
}
@keyframes glowIn{to{opacity:1}}
.splash__skip{
  position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);
  margin:0;font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:#ffffff8c;
  opacity:0;animation:fadeUp 1s 2.6s ease forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translate(-50%,10px)}to{opacity:.9;transform:translate(-50%,0)}}
body.splash-done .splash{opacity:0;visibility:hidden}

/* ══════════ FLYING BRAND ══════════ */
.brand-flyer{
  position:fixed;z-index:9100;left:0;top:0;
  width:min(62vw,780px);
  transform-origin:0 0;
  will-change:transform;
  pointer-events:none;
  opacity:0;
}
.brand-flyer.settled{cursor:pointer}
.brand-svg{width:100%;height:auto;overflow:visible;fill:var(--bone)}
.nib{fill:#fff;filter:drop-shadow(0 0 26px #fff) drop-shadow(0 0 60px var(--accent-lt));opacity:0}
.brand-flyer.settled{pointer-events:auto}

/* ══════════ HEADER ══════════ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:8000;
  height:var(--hdr-h);
  display:flex;align-items:center;gap:2rem;
  padding:0 var(--pad);
  opacity:0;transition:opacity .6s ease, background .5s ease, border-color .5s ease;
  border-bottom:1px solid transparent;
}
body.header-live .hdr{opacity:1}
.hdr.stuck{background:#07070980;backdrop-filter:blur(14px) saturate(.8);border-bottom-color:var(--edge)}
.hdr__slot{flex:0 0 auto;width:clamp(120px,13vw,190px);height:100%;display:block}
.hdr__slot .brand-svg{fill:var(--bone)}
.hdr__nav{display:flex;gap:clamp(1rem,2.2vw,2.4rem);margin-left:auto}
.hdr__nav a{
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:#cfc9c0;
  position:relative;padding:.4rem 0;transition:color .3s;
}
.hdr__nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent-lt);transition:width .35s ease;
}
.hdr__nav a:hover{color:var(--bone)}
.hdr__nav a:hover::after{width:100%}
.hdr__act{display:flex;align-items:center;gap:.9rem;margin-left:clamp(1rem,3vw,3rem)}
.lang{
  background:none;border:none;cursor:pointer;color:var(--ash);font-family:var(--f-body);
  font-size:.68rem;letter-spacing:.2em;padding:.35rem .2rem;
}
.lang__sep{margin:0 .3em;opacity:.4}
.lang__fr,.lang__en{transition:color .3s}
html[lang="fr"] .lang__fr,html[lang="en"] .lang__en{color:var(--bone)}

.btn{
  display:inline-block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.85rem 1.6rem;border:1px solid var(--bone);color:var(--bone);
  position:relative;overflow:hidden;transition:color .4s ease, border-color .4s;
  white-space:nowrap;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--bone);
  transform:translateY(101%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1;
}
.btn{z-index:0}
.btn:hover{color:var(--ink);border-color:var(--bone)}
.btn:hover::before{transform:translateY(0)}
.btn--sm{padding:.7rem 1.1rem;font-size:.68rem}
.btn--lg{padding:1.1rem 2.4rem}
/* ─── primary action: solid bone, ink wash on hover. Reserved for booking
   CTAs so "Réserver" outranks every secondary link on the page ─── */
.btn--solid{background:var(--bone);color:var(--ink);border-color:var(--bone);font-weight:500}
.btn--solid::before{background:var(--ink)}
.btn--solid:hover{color:var(--bone)}
/* ─── shears: the mobile menu toggle ─── */
.burger{
  display:none;background:none;border:none;padding:0;cursor:pointer;
  /* 44px tall for the touch minimum; the icon is width-constrained
     so it keeps its size and just gains vertical hit area */
  width:46px;height:44px;position:relative;
  -webkit-tap-highlight-color:transparent;
}
/* colour rides in on `color` — it is the only thing that reaches
   the shapes cloned inside <use>'s shadow tree */
.shears{width:100%;height:100%;overflow:visible;display:block;color:var(--bone)}
.shears .blade{
  transform-box:view-box;transform-origin:22px 17px;
  transition:transform .55s cubic-bezier(.62,-.32,.28,1.34);
}
.shears .mirror{transform-box:view-box;transform-origin:22px 17px;transform:scaleY(-1)}
.shears .blade--a{transform:rotate(-9deg)}
.shears .blade--b{transform:rotate(9deg)}
.shears .rivet{
  fill:var(--accent-lt);
  transform-box:view-box;transform-origin:22px 17px;
  transition:transform .55s cubic-bezier(.62,-.32,.28,1.34);
}
/* hover / press: a quick snip */
.burger:hover .blade--a,.burger:active .blade--a{transform:rotate(-2deg)}
.burger:hover .blade--b,.burger:active .blade--b{transform:rotate(2deg)}
/* open: blades swing wide into an X */
.burger[aria-expanded="true"] .blade--a{transform:rotate(-26deg)}
.burger[aria-expanded="true"] .blade--b{transform:rotate(26deg)}
.burger[aria-expanded="true"] .rivet{transform:scale(1.3)}
/* one-shot snip fired on tap, before the swing */
.burger.snip .blade--a{animation:snipA .34s cubic-bezier(.5,0,.2,1)}
.burger.snip .blade--b{animation:snipB .34s cubic-bezier(.5,0,.2,1)}
@keyframes snipA{40%{transform:rotate(-.5deg)}100%{transform:rotate(-9deg)}}
@keyframes snipB{40%{transform:rotate(.5deg)}100%{transform:rotate(9deg)}}

.drawer{
  position:fixed;inset:0;z-index:7900;background:#060608f2;backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
}
.drawer[hidden]{display:none}
.drawer a{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:1.8rem}
.drawer .btn{font-family:var(--f-body);font-size:.7rem}

/* ══════════ HERO ══════════ */
.hero{
  --reel:32s;  /* four cuts × 8s on screen — a haircut has to be read, not swept past */
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:calc(var(--hdr-h) + 2rem) var(--pad) clamp(3rem,8vh,7rem);overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:-2;background:var(--ink);overflow:hidden}

/* ─── room tone ───────────────────────────────────────────────────────
   The plates are studio portraits on seamless paper: crop one to a
   landscape hero and better than half the frame is featureless backdrop,
   which is most of why the old full-bleed treatment read as a template.
   The shop shot is put behind everything instead, far out of focus and
   crushed most of the way to black — it is doing the job a set does, not
   the job of a picture. Static, so it rasterises once and never repaints. */
.hero__room{
  position:absolute;inset:-8%;
  background:url("assets/media/hero-shop.jpg") 50% 40%/cover no-repeat;
  /* a little colour survives on purpose: the neon and the bulbs are the
     only warmth in the hero, and a wholly grey room reads flat, not noir */
  filter:grayscale(.62) contrast(1.02) brightness(.52) blur(30px);
}

/* ─── the work reel ───────────────────────────────────────────────────
   Four cuts, one 32s loop. Pure CSS: no JS to stall on. The parallax in
   app.js still drives #heroImg with `translate`, and now has the plate to
   itself — nothing here animates transform any more, so the two cannot
   collide the way they could when a Ken Burns move shared the element.

   The plate is sized to the aspect the plates were shot in and parked in
   the upper right, rather than blown up to cover the viewport. That single
   change is the point of this block. These are 3:4 studio portraits; a
   landscape hero cropped away half of every one of them and scaled what
   was left past 1.2, so the hero was a head enlarged well beyond life size
   floating on empty seamless paper. At native aspect the photographs are
   allowed to be photographs, and the headline gets a column of its own
   instead of sitting on top of a face.

   On the casting: the gallery holds eight work shots across three lighting
   setups. Only the four lit head-out-of-black are in the reel.
   work-mullet-back and -nape are dark hair on a cream wall —
   exposure-matching them to this grade crushes the hair to black, which
   loses the cut itself, and their tonality is the negative of everything
   else here. work-shag is the same problem, milder. work-bowl is the same
   head and the same cut as work-bowl-2, on a lighter wall. All four are
   better used in the gallery than in the hero. */
/* z-index:1 is load-bearing. The scrim below is a ::after and therefore last
   in tree order, and z-index:auto shares a painting layer with z-index:0 —
   so without this the scrim would paint over the plate it is meant to sit
   under, and the whole point of moving it below would be lost. */
.hero__reel{position:absolute;inset:0;z-index:1}
/* Full height, bleeding off the top, bottom and right of the hero, with the
   room tone carrying the rest of the width behind it. Nothing is inset and
   nothing is boxed — between the two the hero is covered edge to edge.

   Why the plate is not simply stretched across the whole width: these are
   3:4 portraits, and `cover` into a 16:9 hero scales to the width and keeps
   under half the height, which puts a head roughly a metre wide on a laptop
   and crops it at the crown and the chin. Sized to the height instead, the
   head lands near life size and the photograph keeps its own composition —
   the picture still runs the full height of the section, it just stops
   short of the left edge, where the room takes over. */
.hero__plate{
  position:absolute;
  top:0;right:0;height:100%;
  aspect-ratio:3/4;
  /* only the left edge has to resolve; the other three run off the hero.
     38% is wide enough that the tail of "reviennent" crosses the plate
     while it is still mostly room. */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 38%);
  -webkit-mask-composite:source-over;
          mask-image:linear-gradient(to right,transparent 0,#000 38%);
          mask-composite:add;
}
.hero__frame{
  position:absolute;inset:0;
  /* clipped to nothing from the bottom — i.e. hidden, waiting at the top */
  clip-path:inset(0 0 100% 0);
  animation:heroWipe var(--reel,32s) cubic-bezier(.72,0,.16,1) infinite;
}
.hero__frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  /* one grade, one exposure. Grayscale neutralises three different colour
     temperatures (a grey studio, a warm gradient, a black cove). The
     per-plate brightness is solved so the four land on the same *highlight*
     — lit skin at the 85th percentile — rather than the same mean. Matching
     means was the old approach and it does not survive the full frame:
     pompadour carries a bright backdrop across half its plate and bowl-2
     carries a near-black one, so equal means demanded a 3x lift on bowl-2
     and blew its face out. Matching the skin is also what the eye actually
     compares, and it keeps the spread to 1.32/0.92/1.10/0.91 — under one
     and a half stops end to end, where the mean-matched set spanned two. */
  filter:grayscale(1) contrast(1.08) brightness(var(--b,1));
}
/* The vignette does the work the old crop did by accident: it sinks three
   mismatched seamless backdrops toward a common black so the wipe does not
   step from grey paper to warm paper, and it holds the eye on the cut. */
.hero__frame::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(74% 60% at 50% 38%, transparent 0%, #08080a2e 52%, #08080ac4 100%);
}
.hero__frame:nth-child(1) img{--b:1.321}  /* bowl, front */
.hero__frame:nth-child(2) img{--b:.917}   /* pompadour, profile */
.hero__frame:nth-child(3) img{--b:1.095}  /* curls, three-quarter */
/* the odd one out: 659x1147, far narrower than 3:4, so it is the only plate
   the frame actually crops. 70% keeps the chin inside the bottom edge while
   leaving the crown a little air — at 50% the mouth fell off the frame. */
.hero__frame:nth-child(4) img{--b:.913; object-position:50% 70%}  /* mullet, tight profile */

.hero__frame:nth-child(2){animation-delay:calc(var(--reel,32s) * .25)}
.hero__frame:nth-child(3){animation-delay:calc(var(--reel,32s) * .5)}
.hero__frame:nth-child(4){animation-delay:calc(var(--reel,32s) * .75)}

/* A wipe, not a dissolve, and nothing moves in between.
   The cross-dissolve was the other half of why this read as a slideshow:
   for its whole duration two different faces at two different scales were
   superimposed, which is a double exposure, not a cut. And the Ken Burns
   push was worse than it looks written down — on a centred head against a
   featureless backdrop the only reference edges are the subject's own, so
   the scale change registered as the head swelling and shrinking rather
   than as camera movement.
   So: the plate holds perfectly still, and the incoming frame drops over
   the outgoing one on a hard edge. The z-index steps keep that edge honest
   — the incoming frame rises above a still-opaque image, so the wipe never
   shows through to black. The outgoing frame resets at 34%, four points
   after the incoming one finished at 25+5, which is the margin that keeps
   the reset off screen.
   5% of the loop is 1.6s, and that duration is doing real work: a wipe
   necessarily shows two heads split across one edge while it runs, so it
   wants to be over quickly. At 7% it lingered long enough to read as two
   pictures rather than as a cut. */
@keyframes heroWipe{
  0%     {clip-path:inset(0 0 100% 0); z-index:3}
  5%     {clip-path:inset(0 0 0 0);    z-index:3}
  25%    {clip-path:inset(0 0 0 0);    z-index:3}
  25.01% {clip-path:inset(0 0 0 0);    z-index:2}   /* the next frame takes the top */
  34%    {clip-path:inset(0 0 0 0);    z-index:2}
  34.01% {clip-path:inset(0 0 100% 0); z-index:1}   /* covered now — reset unseen */
  100%   {clip-path:inset(0 0 100% 0); z-index:1}
}
/* The scrims sit *under* the plate now: this ::after is z-index 0, the room
   is earlier in tree order at auto, and .hero__reel is lifted to 1 above
   both. They condition the room tone and carry the copy; they no longer
   have to be dragged across the photograph itself, which is what forced the
   old left wall up to f5. The plate is left ungraded by them, so it keeps
   the only real luminance in the hero. */
.hero__bg::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top,#08080a 3%,#08080ac9 26%,#08080a3d 64%,#08080a80 100%),
             linear-gradient(to right,#08080abf 0%,#08080a70 34%,transparent 68%);
}
/* The scrims that have to sit *above* the plate: the header band, and the
   left wall that carries the copy.
   The wall is back because the plate is full-bleed again, and the headline
   and the picture now genuinely occupy the same ground. On a 1100x850 window
   the tail of "reviennent" runs 35% into the plate, and white script over a
   lit cheek measured 1.4:1 — the worst number anywhere on the page. Getting
   it to a comfortable 3.5:1 needs about 0.41 of extra alpha there, which is
   what the 52%/66% pair is solved for. It tapers out by 78% so the far side
   of the head, where nothing is written, keeps its highlights.
   Depth is nearly free here: the wall lives over the plate's own feathered
   edge, so most of what it darkens was already half room. */
.hero__bg::before{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(to bottom,#08080ab3 0,#08080a00 calc(var(--hdr-h) + 3rem)),
             linear-gradient(to right,#08080ae0 0%,#08080ac9 34%,#08080a99 52%,#08080a63 66%,transparent 78%);
}
@media (prefers-reduced-motion:reduce){
  .hero__frame{animation:none}
  .hero__frame:first-child{clip-path:inset(0 0 0 0);z-index:3}
}
.hero__inner{position:relative;max-width:min(60ch,92vw)}
.eyebrow{
  font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--ash);margin:0 0 1.6rem;
}
.hero__h1{
  font-size:clamp(3rem,9.6vw,8.8rem);line-height:.9;margin:0 0 1.8rem;letter-spacing:-.045em;
}
.hero__h1 span{display:block;white-space:nowrap}
.hero__h1 .it{
  font-family:var(--f-hand);font-style:normal;font-synthesis:none;font-weight:400;
  text-transform:none;letter-spacing:0;
  color:#fff;font-size:1.5em;line-height:.92;margin-top:-.02em;text-indent:.04em;
  padding-right:.08em;
}
.hero__lede{max-width:44ch;color:#c6c0b7;font-size:clamp(1rem,1.35vw,1.2rem);margin:0 0 2.6rem}
.hero__cta{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.link-arrow{
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);
  display:inline-flex;align-items:center;gap:.6rem;transition:color .3s,gap .3s;
}
.link-arrow::after{content:"→";transition:transform .3s}
.link-arrow:hover{color:var(--bone);gap:.95rem}
.hero__rating{
  display:flex;align-items:center;gap:.8rem;margin-top:2.8rem;font-size:.78rem;color:var(--ash);
}
.hero__rating b{color:var(--bone);font-weight:500}
.stars{color:var(--accent-lt);letter-spacing:.15em;font-size:.85rem}
.hero__scroll{
  position:absolute;right:var(--pad);bottom:clamp(3rem,8vh,7rem);
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;color:var(--ash);
  writing-mode:vertical-rl;
}
.hero__scroll i{display:block;width:1px;height:70px;background:linear-gradient(var(--ash),transparent);animation:scrollPulse 2.4s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* reveal-on-load stagger */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
body.header-live .reveal{opacity:1;transform:none}
body.header-live .d1{transition-delay:.08s}
body.header-live .d2{transition-delay:.18s}
body.header-live .d3{transition-delay:.32s}
body.header-live .d4{transition-delay:.44s}
body.header-live .d5{transition-delay:.56s}

/* scroll-triggered reveals */
.io{opacity:0;transform:translateY(38px);transition:opacity .95s cubic-bezier(.2,.7,.2,1),transform .95s cubic-bezier(.2,.7,.2,1)}
.io-in{opacity:1;transform:none}

/* ══════════ TICKER ══════════ */
.ticker{
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
  overflow:hidden;padding:1.1rem 0;background:var(--ink-2);
}
.ticker__track{display:flex;gap:2.4rem;width:max-content;animation:slide 34s linear infinite;align-items:center}
.ticker__track span{
  font-family:var(--f-disp);font-style:normal;font-synthesis:none;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3vw,2.6rem);line-height:1;color:#b8b2a9;padding-right:.08em;
}
.ticker__track i{color:var(--accent);font-style:normal;font-size:.7rem}
@keyframes slide{to{transform:translateX(-50%)}}

/* ══════════ SECTION FURNITURE ══════════ */
.kicker{font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--accent-lt);margin:0 0 1.1rem}
.sec-head{padding:clamp(5rem,12vh,10rem) var(--pad) clamp(2rem,5vh,3.5rem)}
.sec-head h2{font-size:clamp(2.4rem,6.2vw,5.4rem)}
.sec-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}

/* ══════════ STORY ══════════ */
.story{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center;
  padding:clamp(5rem,14vh,11rem) var(--pad);
}
.story__media{position:relative}
.story__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;
  filter:grayscale(1) contrast(1.1) brightness(.8);
}
.story__media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 120px 20px #08080a}
.story__tag{
  position:absolute;bottom:-1px;left:-1px;background:var(--ink);padding:1rem 1.4rem;
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ash);z-index:2;
}
.story__txt h2{font-size:clamp(2rem,4.2vw,3.5rem);margin-bottom:1.8rem}
.story__txt p{color:#b3ada4;max-width:52ch;margin:0 0 1.3rem}
.story__stats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,3vw,2.5rem);padding:0;margin:2.6rem 0 0;border-top:1px solid var(--edge);padding-top:1.8rem}
.story__stats li{display:flex;flex-direction:column;gap:.35rem}
.story__stats b{font-family:var(--f-disp);font-size:2.1rem;font-weight:700;line-height:1;letter-spacing:-.03em}
.story__stats span{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}

/* ══════════ SERVICES ══════════ */
.services{background:var(--ink-2)}
.menu{list-style:none;margin:0;padding:0 var(--pad)}
.menu__row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:clamp(.9rem,2.5vw,2.4rem);row-gap:.5rem;align-items:baseline;
  padding:1.9rem 0;border-top:1px solid var(--edge);transition:background .4s;
  position:relative;
}
.menu__row h3{grid-column:2;grid-row:1}
.menu__p{grid-column:3;grid-row:1;justify-self:end}
.menu__row p{grid-column:2 / -1;grid-row:2}
.menu__row:last-child{border-bottom:1px solid var(--edge)}
.menu__row::before{
  content:"";position:absolute;left:calc(var(--pad) * -1);right:calc(var(--pad) * -1);top:0;bottom:0;
  background:linear-gradient(90deg,#ffffff08,transparent);opacity:0;transition:opacity .45s;pointer-events:none;
}
.menu__row:hover::before{opacity:1}
.menu__n{grid-column:1;grid-row:1;font-size:.72rem;letter-spacing:.2em;color:var(--accent-lt);font-variant-numeric:tabular-nums}
.menu__row h3{font-size:clamp(1.2rem,2.2vw,1.85rem);margin-bottom:.55rem;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.menu__row:hover h3{transform:translateX(10px)}
.menu__row p{margin:0;color:var(--ash);font-size:.9rem;max-width:48ch}
.menu__p{font-family:var(--f-disp);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.15rem,2vw,1.6rem);white-space:nowrap}
.menu__note{padding:1.6rem var(--pad) clamp(5rem,10vh,8rem);font-size:.72rem;color:var(--ash);letter-spacing:.06em}

/* ══════════ CAROUSEL ══════════ */
.barbers{padding-bottom:clamp(4rem,10vh,8rem)}
.carousel__ctrl{display:flex;gap:.6rem}
.cbtn{
  width:52px;height:52px;border:1px solid var(--edge);background:none;color:var(--bone);
  cursor:pointer;font-size:1rem;transition:background .35s,border-color .35s,transform .35s;
}
.cbtn:hover{background:#ffffff0e;border-color:#ffffff33}
.cbtn:active{transform:scale(.94)}
.carousel{
  display:flex;gap:clamp(1rem,2vw,1.8rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-left:var(--pad);   /* else the snap eats the left gutter */
  padding:0 var(--pad) 2rem;
  scrollbar-width:none;cursor:grab;
}
.carousel::-webkit-scrollbar{display:none}
.carousel.dragging{cursor:grabbing;scroll-snap-type:none}
.card{
  flex:0 0 clamp(240px,26vw,380px);scroll-snap-align:start;position:relative;
  /* column so the booking button can be pushed to a shared baseline —
     the carousel stretches every card to the tallest, so they line up */
  display:flex;flex-direction:column;
}
.card__img{position:relative;overflow:hidden;background:var(--ink-3)}
.card__img img{
  width:100%;aspect-ratio:2/3;object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.72);
  transform:scale(1.02);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1), filter .8s ease;
}
.card:hover .card__img img{transform:scale(1.09);filter:grayscale(1) contrast(1.2) brightness(.95)}
.card__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,#08080aee 0%,transparent 45%);
  opacity:.9;transition:opacity .6s;
}
.card:hover .card__img::after{opacity:.65}
.card__meta{display:flex;align-items:baseline;gap:.8rem;padding:1.1rem .2rem 0;border-top:1px solid var(--edge);margin-top:1rem}
.card__i{font-size:.72rem;color:var(--accent-lt);letter-spacing:.18em}
.card__meta h3{
  font-family:var(--f-hand);font-style:normal;font-synthesis:none;font-weight:400;
  text-transform:none;letter-spacing:0;
  font-size:clamp(2.2rem,4.2vw,3.3rem);line-height:.9;padding-right:.08em;
}
.card__r{margin-left:auto;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ash)}
.card__img--empty{
  aspect-ratio:2/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  border:1px solid var(--edge);text-align:center;padding:2rem;
  /* grows past its ratio to fill the stretched card, so this card's meta line
     ends level with the booking buttons on the barber cards */
  flex:1 1 auto;
}
.card__bio{
  margin:.9rem .2rem 1.4rem;color:var(--ash);font-size:.82rem;line-height:1.6;
  max-width:38ch;
  opacity:.85;transition:opacity .5s ease,color .5s ease;
}
.card:hover .card__bio{opacity:1;color:#b5afa6}
/* per-barber booking link — the card's whole point, so it's solid bone and
   sits on a shared baseline (margin-top:auto) across every card. The .btn
   wash is inverted here: ink slides up over bone instead of the reverse.
   .85rem of padding keeps it over the 44px touch minimum. */
.card__book{
  margin:auto .2rem 0;padding:.85rem 1.1rem;
  display:block;text-align:center;
  background:var(--bone);color:var(--ink);border-color:var(--bone);
  font-weight:500;
}
.card__book::before{background:var(--ink)}
.card__book:hover{color:var(--bone)}
.card__img--empty p{font-family:var(--f-hand);font-style:normal;font-size:2rem;line-height:1.1;color:var(--ash);margin:0}
.carousel__bar{height:1px;background:var(--edge);margin:0 var(--pad)}
.carousel__bar i{display:block;height:1px;width:20%;background:var(--bone);transition:width .2s ease,transform .12s linear}

/* ══════════ THE RITUAL — video triptych ══════════ */
.ritual{
  padding-bottom:clamp(5rem,12vh,9rem);
  background:
    radial-gradient(90% 60% at 50% 0%, #1a140b 0%, transparent 70%),
    var(--ink);
}
.sec-head--center{text-align:center}
.sec-head--center .kicker{color:var(--accent-lt)}
.triptych{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.4vw,1.4rem);
  padding:0 var(--pad);
}
.reel{margin:0;position:relative}
.reel__v{
  width:100%;aspect-ratio:9/16;object-fit:cover;display:block;
  background:var(--ink-3);
  filter:grayscale(.25) contrast(1.08) brightness(.86);
  transition:filter .8s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.reel:hover .reel__v{filter:grayscale(0) contrast(1.1) brightness(1);transform:scale(1.015)}
.reel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,#08080ae6 0%,transparent 38%);
}
.reel figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:baseline;gap:.7rem;
  padding:1.2rem clamp(.8rem,1.4vw,1.4rem);
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:#d6d0c6;
}
.reel__n{color:var(--accent-lt);font-variant-numeric:tabular-nums}

/* ══════════ GALLERY ══════════ */
.gallery{background:var(--ink-2);padding-bottom:clamp(5rem,10vh,8rem);overflow:hidden}
.sec-head__note{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ash);margin:0}
.grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(.5rem,1vw,1rem);
  padding:0 var(--pad) clamp(3rem,7vh,5rem);
}
.grid__i{margin:0;overflow:hidden;position:relative;background:var(--ink-3);aspect-ratio:4/5}
.grid__i img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) contrast(1.06) brightness(.82);
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .7s ease;
}
.grid__i:hover img{transform:scale(1.06);filter:grayscale(0) contrast(1.08) brightness(1)}

/* ══════════ PRODUCTS ══════════ */
.shopsec{background:var(--ink);border-top:1px solid var(--edge)}
.prods{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.2vw,2.4rem);
  padding:0 var(--pad);
}
.prod{margin:0}
.prod__img{overflow:hidden;background:#fff;margin-bottom:1.2rem}
.prod__img img{
  width:100%;aspect-ratio:1;object-fit:contain;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.prod:hover .prod__img img{transform:scale(1.05)}
.prod h3{font-size:clamp(1.05rem,1.6vw,1.35rem);margin-bottom:.55rem;letter-spacing:-.02em}
.prod p{margin:0;color:var(--ash);font-size:.85rem;max-width:34ch}
/* infinite marquee — travels exactly one set width, so the seam never lands */
.strip{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.strip__track{
  display:flex;gap:1rem;width:max-content;
  animation:marquee var(--marquee-dur,60s) linear infinite;
  will-change:transform;
}
.strip:hover .strip__track{animation-play-state:paused}
@keyframes marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--marquee-w,50%)),0,0)}
}
.strip figure{margin:0;flex:0 0 auto;width:clamp(180px,20vw,300px);overflow:hidden}
.strip img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  filter:grayscale(1) brightness(.62) contrast(1.15);transition:filter .6s,transform .8s;
}
.strip figure:hover img{filter:grayscale(1) brightness(.95) contrast(1.2);transform:scale(1.05)}

/* ══════════ REVIEWS ══════════ */
.reviews{
  padding:clamp(5rem,12vh,9rem) var(--pad);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:2.8rem;
}
.reviews__score{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.reviews__score b{font-family:var(--f-disp);font-size:clamp(3.6rem,9vw,7rem);font-weight:800;line-height:.85;letter-spacing:-.05em}
.reviews__cnt{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ash)}
.reviews__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(1.5rem,4vw,3.5rem);max-width:1100px;width:100%}
.reviews blockquote{margin:0;display:flex;flex-direction:column;gap:1rem}
.reviews blockquote p{font-family:var(--f-body);font-weight:300;text-wrap:pretty;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.65;color:#cfc9c0;margin:0}
.reviews cite{font-style:normal;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ash)}

/* ══════════ VISIT ══════════ */
.visit{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  border-top:1px solid var(--edge);
}
.visit__info{padding:clamp(4rem,10vh,7rem) var(--pad);align-self:center}
.visit__info h2{font-size:clamp(2.2rem,4.4vw,3.8rem);margin-bottom:2.6rem}
.visit dl{margin:0 0 3rem;display:flex;flex-direction:column;gap:1.8rem}
.visit dt{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:.5rem}
.visit dd{margin:0;font-size:1.05rem;color:#cfc9c0}
.visit dd a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.hours{display:grid;grid-template-columns:auto 1fr;gap:.35rem 2rem;font-size:.95rem}
.hours span:nth-child(odd){color:var(--ash)}

/* storefront sits beside the text and keeps its own shape */
.visit__photo{
  position:relative;overflow:hidden;
  border-left:1px solid var(--edge);
  min-height:clamp(340px,46vh,560px);
}
/* absolute so the photo's intrinsic height can never drive the grid row */
.visit__photo img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  filter:grayscale(.7) contrast(1.05) brightness(.72);
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .8s;
}
.visit__photo:hover img{transform:scale(1.05);filter:grayscale(.2) brightness(.88)}

/* map is its own full-width band with a height it controls */
.visit__map{
  grid-column:1 / -1;position:relative;
  height:clamp(300px,38vh,420px);
  border-top:1px solid var(--edge);
}
.visit__map iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:grayscale(1) invert(.92) contrast(.86) brightness(.94);
}
.visit__maplink{
  position:absolute;right:clamp(1rem,2vw,2rem);top:clamp(1rem,2vw,2rem);z-index:2;
  background:var(--ink);color:var(--bone);
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  padding:.85rem 1.4rem;border:1px solid var(--edge);
  transition:background .35s,border-color .35s;
}
.visit__maplink:hover{background:var(--ink-3);border-color:#ffffff35}

/* ══════════ FOOTER ══════════ */
.ftr{border-top:1px solid var(--edge);padding:clamp(3.5rem,8vh,6rem) var(--pad) 2.5rem;display:flex;flex-direction:column;gap:2.5rem}
.ftr__mark svg{width:min(90vw,900px);fill:#ffffff12}
.ftr__cols{display:flex;gap:clamp(2rem,6vw,6rem);flex-wrap:wrap;font-size:.85rem;color:var(--ash)}
.ftr__cols a:hover{color:var(--bone)}
.ftr__fine{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash-2);margin:0}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:980px){
  .hdr__nav{display:none}
  /* the nav carried the margin-left:auto that pushes the group right —
     with it hidden, the actions have to claim that space themselves */
  .hdr__act{margin-left:auto}
  .burger{display:block}
  .hdr__slot{width:clamp(110px,30vw,160px)}
  .brand-flyer{width:78vw}
  .hero__inner{max-width:100%}
  /* Below this width the viewport's own aspect is close enough to the
     plate's that `cover` stops being destructive — at 768x1024 it is
     exactly 3:4 and crops nothing at all — so the plate goes properly
     full bleed and the room tone drops out of sight behind it. */
  .hero__plate{
    inset:0;width:auto;height:auto;aspect-ratio:auto;
    -webkit-mask-image:none;mask-image:none;
  }
  /* the copy is full width here, so a left wall is the wrong shape for it —
     the scrim below does the whole job. ::before keeps only its header band. */
  .hero__bg::before{
    background:linear-gradient(to bottom,#08080ab3 0,#08080a00 calc(var(--hdr-h) + 3rem));
  }
  /* with the picture under all of the copy again, the scrim has to come
     back over the top of it — on desktop it sits underneath */
  .hero__bg::after{
    z-index:2;
    background:linear-gradient(to top,#08080a 4%,#08080aed 32%,#08080aa3 68%,#08080ab8 100%),
               linear-gradient(to right,#08080ac4 0%,#08080a70 38%,transparent 74%);
  }
  .hero__frame img{object-position:50% 26%}
  .hero__frame:nth-child(4) img{object-position:50% 34%}
  .story,.visit{grid-template-columns:1fr}
  .visit__photo{border-left:none;border-top:1px solid var(--edge);min-height:0;aspect-ratio:4/5}
  .visit__map{height:clamp(300px,52vh,420px)}
  .prods{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .triptych{grid-template-columns:1fr;gap:.9rem}
  .reel__v{aspect-ratio:4/5}
  .hero__scroll{display:none}
}
@media (max-width:560px){
  .hdr__act .btn--sm{display:none}
  /* A phone is the one viewport that suits these plates outright: at 375x812
     `cover` scales a 3:4 portrait to the height and trims the sides, so the
     head stays near life size and nothing is lost off the top or bottom.
     The copy sits over the picture, which is what the scrim above is for. */
  .hero__frame img{object-position:50% 32%}
  .hero__frame:nth-child(4) img{object-position:50% 50%}
  /* The exposure has to be solved again for this crop, and pompadour is why.
     A phone shows the centre ~62% of each plate, which throws away the dark
     edges — and pompadour is the one plate whose centre is bright backdrop
     behind a lit cheek, so its highlights come up to p85 0.64 where the
     others sit at 0.49-0.53. Carrying the desktop numbers down here left it
     visibly hotter than the rest and put the eyebrow on a lit cheek at
     1.9:1. Re-solved against the same p85 target on the cropped region. */
  .hero__frame:nth-child(1) img{--b:1.046}
  .hero__frame:nth-child(2) img{--b:.795}
  .hero__frame:nth-child(3) img{--b:1.067}
  .hero__frame:nth-child(4) img{--b:.980}
  .hero{--reel:26s}
  /* wider cards so the peek reads as "more", not as a cut-off card */
  .card{flex:0 0 74vw}
  /* name and role won't share a line at this width — give the role its own */
  .card__meta{flex-wrap:wrap}
  .card__r{margin-left:0;flex-basis:100%;margin-top:.35rem}
  .card__bio{max-width:none}
  .menu__row{column-gap:.9rem}
  .menu__n{align-self:start}
  /* the full-bleed hover wash has no purpose on touch and it widens the row */
  .menu__row::before{left:0;right:0}
  /* FR/EN was a 27px target */
  .lang{padding:.85rem .4rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════
   RESERVER.HTML — the chooser
   Its own header and furniture: no splash, no flying
   logo, so none of the home page's staging applies.
   ══════════════════════════════════════════════════ */
.bk-hdr{
  position:sticky;top:0;z-index:8000;height:var(--hdr-h);
  display:flex;align-items:center;gap:1rem;padding:0 var(--pad);
  background:#07070980;backdrop-filter:blur(14px) saturate(.8);
  border-bottom:1px solid var(--edge);
}
/* the mark is a black-on-transparent file — masked, not <img>, so it takes
   the bone from the palette instead of an approximate invert filter */
.bk-hdr__mark{
  width:clamp(112px,12vw,172px);height:clamp(24px,3vw,36px);
  background:var(--bone);transition:opacity .3s ease;
  -webkit-mask:url("assets/logo.svg") no-repeat left center/contain;
          mask:url("assets/logo.svg") no-repeat left center/contain;
}
.bk-hdr__mark:hover{opacity:.72}
.bk-hdr__act{margin-left:auto;display:flex;align-items:center;gap:clamp(.9rem,2vw,1.8rem)}
.bk-hdr__back{
  font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);
  display:inline-flex;align-items:center;gap:.6rem;transition:color .3s,gap .3s;
}
.bk-hdr__back::before{content:"←"}
.bk-hdr__back:hover{color:var(--bone);gap:.9rem}

/* the home page stages .reveal off body.header-live; here there's no splash to
   wait for, so it's a plain load animation — and it can't depend on rAF, which
   never fires if the page opens in a background tab */
.bk-page .reveal{animation:bkIn .9s cubic-bezier(.2,.7,.2,1) both}
.bk-page .d1{animation-delay:.07s}
.bk-page .d2{animation-delay:.15s}
.bk-page .d3{animation-delay:.24s}
.bk-page .d4{animation-delay:.33s}
.bk-page .d5{animation-delay:.44s}
@keyframes bkIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.bk{padding:clamp(2.6rem,7vh,5.5rem) var(--pad) clamp(3.5rem,9vh,6rem);max-width:1560px;margin:0 auto}
.bk__head{margin-bottom:clamp(2.2rem,5.5vh,4rem)}
.bk__h1{font-size:clamp(2.4rem,6.4vw,5.2rem);margin:.55rem 0 1.1rem}
.bk__h1 span{display:block}
.bk__lede{margin:0;color:var(--ash);max-width:54ch;font-size:clamp(.95rem,1.1vw,1.06rem)}

.bk__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.6vw,1.7rem)}

/* ─── a chair ─── */
.pick{
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  padding:0 0 clamp(.9rem,1.4vw,1.2rem);
  background:linear-gradient(180deg,var(--ink-2),#0a0a0c);
  border:1px solid var(--edge);
  transition:border-color .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);
}
.pick:hover,.pick:focus-visible{border-color:#d8ae6659;transform:translateY(-5px)}
.pick:focus-visible{outline:1px solid var(--accent-lt);outline-offset:3px}
.pick__img{display:block;position:relative;overflow:hidden;background:var(--ink-3)}
.pick__img img{
  width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 22%;
  filter:grayscale(1) contrast(1.12) brightness(.7);
  transform:scale(1.02);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .8s ease;
}
.pick:hover .pick__img img{transform:scale(1.08);filter:grayscale(1) contrast(1.2) brightness(.95)}
.pick__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,#0a0a0cee 0%,transparent 42%);
}
.pick__i{
  position:absolute;top:.9rem;left:.9rem;z-index:2;
  font-size:.72rem;letter-spacing:.18em;color:var(--accent-lt);
}
.pick__name{
  font-family:var(--f-hand);font-synthesis:none;font-weight:400;
  font-size:clamp(2rem,3.2vw,2.9rem);line-height:.95;
  margin:-.35em 0 0;padding:0 clamp(.9rem,1.4vw,1.2rem);
  position:relative;z-index:2;
}
.pick__role{
  padding:.5rem clamp(.9rem,1.4vw,1.2rem) 0;
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ash);
}
.pick__note{
  padding:.75rem clamp(.9rem,1.4vw,1.2rem) 1.3rem;
  color:var(--ash);font-size:.82rem;line-height:1.6;
}
/* pushed to a shared baseline so the four CTAs read as one row of choices */
.pick__cta{
  margin:auto clamp(.9rem,1.4vw,1.2rem) 0;
  padding:.85rem 1rem;display:block;text-align:center;
  background:var(--bone);color:var(--ink);border-color:var(--bone);font-weight:500;
}
.pick__cta::before{background:var(--ink)}
.pick:hover .pick__cta{color:var(--bone)}
.pick:hover .pick__cta::before{transform:translateY(0)}

/* ─── no preference ─── */
.bk-any{
  margin-top:clamp(1.4rem,2.6vw,2.2rem);
  display:flex;align-items:center;gap:1.4rem;
  padding:clamp(1.2rem,2.4vw,1.8rem) clamp(1.2rem,2.4vw,2rem);
  border:1px solid var(--edge);position:relative;overflow:hidden;
  transition:border-color .45s ease;
}
.bk-any::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,#ffffff0a,transparent 60%);
  transform:translateX(-101%);transition:transform .6s cubic-bezier(.7,0,.2,1);
}
.bk-any:hover{border-color:#d8ae6659}
.bk-any:hover::before{transform:translateX(0)}
.bk-any__txt{display:flex;flex-direction:column;gap:.25rem;position:relative;z-index:1}
.bk-any__txt b{
  font-family:var(--f-disp);font-weight:700;text-transform:uppercase;
  letter-spacing:-.01em;font-size:clamp(1rem,1.5vw,1.25rem);
}
.bk-any__txt span{color:var(--ash);font-size:.85rem}
.bk-any__arrow{
  margin-left:auto;position:relative;z-index:1;
  color:var(--accent-lt);font-size:1.3rem;transition:transform .35s ease;
}
.bk-any:hover .bk-any__arrow{transform:translateX(8px)}

.bk__fine{margin:clamp(1.6rem,3vw,2.4rem) 0 0;color:var(--ash-2);font-size:.72rem;letter-spacing:.02em}

.bk-ftr{
  padding:2.2rem var(--pad) 3rem;border-top:1px solid var(--edge);
  text-align:center;color:var(--ash);font-size:.8rem;
}
.bk-ftr p{margin:.3rem 0}
.bk-ftr a:hover{color:var(--bone)}
.bk-ftr__fine{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash-2)}

@media (max-width:1024px){
  .bk__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  /* two chairs per row still fits a phone and keeps all four on one screen —
     the note is what has to go, not the choice */
  .bk__grid{gap:.7rem}
  .pick__note{display:none}
  .pick__role{padding-bottom:1rem}
  .pick__cta{padding:.85rem .5rem;font-size:.6rem;letter-spacing:.14em}
  .bk-any{gap:1rem}
  .bk-hdr__back{font-size:.68rem;letter-spacing:.18em}
}