/* ===== Rustam Barbershop — design tokens ===== */
:root{
  --ink:#131210;
  --bg:#141310;
  --bg-soft:#1c1a16;
  --line-dark:rgba(239,231,214,.1);
  --paper:#f5f1e6;
  --paper-dim:#e6dfcd;
  --accent:#a97b45;
  --accent-dim:#7a5a34;
  --red:#b23b2c;
  --cream:#efe7d6;
  --cream-dim:rgba(239,231,214,.85);
  --cream-faint:rgba(239,231,214,.7);
  --ink-dim:rgba(19,18,16,.85);
  --ink-faint:rgba(19,18,16,.75);
  --line-light:rgba(19,18,16,.13);

  --serif:"Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --display:"Playfair Display", "Newsreader", Georgia, serif;

  --container:1240px;
  --header-container:1290px;
  --gutter:clamp(20px, 5vw, 64px);

  --ease:cubic-bezier(.16,.8,.28,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
/* subtle film grain — breaks digital flatness, brand-neutral texture */
body::before{
  content:"";
  position:fixed; inset:0; z-index:300; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

p{text-wrap:pretty}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
::selection{background:var(--accent); color:var(--paper)}

.wrap{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.01em;
  text-wrap:balance;
}

.eyebrow{
  display:inline-block;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cream-dim);
  font-weight:600;
  margin-bottom:18px;
}
.section-paper .eyebrow{color:var(--ink-faint)}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:1.05em 1.9em;
  border-radius:2px;
  transition:transform .5s var(--ease-spring), background-color .3s, color .3s, border-color .3s, box-shadow .4s;
  white-space:nowrap;
}
.btn-primary{
  background:var(--paper);
  color:var(--ink);
}
.btn-primary:hover{background:var(--accent); color:var(--paper); transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(169,123,69,.55)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-ghost{
  border:1px solid rgba(239,231,214,.3);
  color:var(--cream);
}
.btn-ghost:hover{border-color:var(--cream); background:rgba(239,231,214,.06); transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0) scale(.98)}
.section-paper .btn-ghost{border-color:rgba(19,18,16,.25); color:var(--ink)}
.section-paper .btn-ghost:hover{border-color:var(--ink); background:rgba(19,18,16,.05)}

/* ===== reveal-on-scroll ===== */
[data-reveal]{
  opacity:0;
  transform:translateY(32px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal].is-visible{opacity:1; transform:none}
[data-reveal-stagger] > *{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
[data-reveal-stagger].is-visible > *{opacity:1; transform:none}
[data-reveal-stagger] > *:nth-child(1){transition-delay:0s}
[data-reveal-stagger] > *:nth-child(2){transition-delay:.06s}
[data-reveal-stagger] > *:nth-child(3){transition-delay:.12s}
[data-reveal-stagger] > *:nth-child(4){transition-delay:.18s}
[data-reveal-stagger] > *:nth-child(5){transition-delay:.24s}
[data-reveal-stagger] > *:nth-child(6){transition-delay:.3s}
[data-reveal-stagger] > *:nth-child(7){transition-delay:.36s}
[data-reveal-stagger] > *:nth-child(8){transition-delay:.42s}

/* ===================== HEADER ===================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:80;
  padding-block:18px;
  /* Both states now use a plain background-color (no background-image)
     so this actually crossfades — mixing a gradient background-image in
     one state with a solid background-color in the other can't
     transition at all, the image just vanishes the instant the class
     flips while only the color fades in, reading as a flicker/pop. */
  transition:background-color .4s, backdrop-filter .4s, padding .4s, border-color .4s;
  border-bottom:1px solid transparent;
  background-color:rgba(15,14,11,.72);
}
.site-header.is-scrolled{
  background-color:rgba(20,19,16,.92);
  backdrop-filter:blur(10px);
  padding-block:14px;
  border-color:var(--line-dark);
}
.header-inner{
  max-width:var(--header-container); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family:var(--serif);
  font-size:1.28rem;
  letter-spacing:.02em;
  display:flex; align-items:baseline; gap:.4em;
  position:relative; z-index:96;
}
.brand strong{font-style:italic}
.brand span{font-family:var(--sans); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--cream-dim)}
.site-header .brand span{display:none}

.main-nav{display:flex; align-items:center; gap:clamp(14px,1.6vw,26px)}
.main-nav a{
  font-size:.86rem; letter-spacing:.01em; font-weight:500;
  color:var(--cream-dim); white-space:nowrap;
  position:relative; padding-bottom:4px;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--cream);
  transition:right .4s var(--ease-out);
}
.main-nav a:hover{color:var(--cream)}
.main-nav a:hover::after{right:0}
.main-nav a.btn-primary{color:var(--ink); padding:1.05em 1.9em; line-height:1}
.main-nav a.btn-primary:hover{color:var(--paper)}
.main-nav a.btn-primary::after{display:none}

.nav-icon{
  position:absolute; left:50%; top:-19px; transform:translate(-50%,4px);
  width:17px; height:17px; color:var(--accent);
  opacity:0; transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
  pointer-events:none;
}
.main-nav a:hover .nav-icon{opacity:1; transform:translate(-50%,0)}
.main-nav a.btn-primary .nav-icon{display:none}

.nav-toggle{display:none}

.lang-switch{display:flex; align-items:center; gap:9px; font-size:.72rem; letter-spacing:.06em}
.lang-switch a{color:var(--cream-faint); padding:2px 4px; font-weight:600}
.lang-switch a.is-active{color:var(--cream)}
.lang-switch a:hover{color:var(--paper)}

/* ===================== HERO ===================== */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--ink);
}
.hero-media{position:absolute; inset:-6% -6%}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:50% 38%; will-change:transform}
.hero-media::after{
  content:""; position:absolute; inset:0;
  /* Darkening the whole frame evenly (previous round) fixed legibility
     but flattened the product photo everywhere, including the right
     side and top where there's no text at all. Pulled back to a light
     overall wash and put the actual contrast into one soft pool
     anchored where the copy block sits (left, lower half) — strong
     enough right behind the text, fading out well before the right
     edge so the clippers stay visible and lit. A 2D ellipse tuned for
     the wide desktop hero doesn't translate to the tall mobile one
     (same percentages land in a totally different spot on a portrait
     box), so mobile gets its own simple bottom-heavy linear wash below
     instead of trying to reuse this pool. */
  background:
    linear-gradient(90deg, rgba(12,11,9,.8) 0%, rgba(12,11,9,.7) 20%, rgba(12,11,9,.62) 40%, rgba(12,11,9,.5) 53%, rgba(12,11,9,.2) 65%, transparent 75%),
    linear-gradient(180deg, rgba(12,11,9,.04) 0%, rgba(12,11,9,.08) 55%, rgba(12,11,9,.18) 100%);
}
.hero-copy{
  position:relative; z-index:2; width:100%;
  max-width:var(--container); margin-inline:auto;
  padding:0 var(--gutter) 70px;
  display:flex; flex-direction:column; gap:34px;
}
.hero h1{
  font-size:clamp(2.6rem, 4.8vw, 4.5rem);
  line-height:1.22;
  color:var(--paper);
  max-width:16ch;
  text-shadow:0 2px 3px rgba(0,0,0,.85), 0 4px 28px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.6);
}
.hero h1 em{font-style:italic; color:var(--accent)}
.hero h1 .word{display:inline-block; opacity:0; transform:translateY(100%) rotate(2deg); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.hero h1 .word.is-in{opacity:1; transform:none}
.hero-sub{
  max-width:46ch; font-size:1.05rem; color:var(--cream-dim); font-weight:400;
  text-shadow:0 1px 2px rgba(0,0,0,.8), 0 2px 14px rgba(0,0,0,.55);
}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:6px}
.hero-actions .btn-ghost{
  border-color:rgba(239,231,214,.55);
  background:rgba(15,14,11,.3);
  backdrop-filter:blur(6px);
}
.hero-actions .btn-ghost:hover{border-color:var(--cream); background:rgba(15,14,11,.45)}
.hero-scroll{
  position:absolute; right:var(--gutter); bottom:34px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-faint);
}
.hero-scroll .line{width:1px; height:46px; background:linear-gradient(var(--cream-dim), transparent); animation:scrollLine 2.2s ease-in-out infinite}
@keyframes scrollLine{0%{transform:scaleY(0); transform-origin:top}50%{transform:scaleY(1); transform-origin:top}50.01%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}

.hero-strip{
  position:relative; z-index:2;
  border-top:1px solid var(--line-dark);
  background:rgba(20,19,16,.5);
}
.hero-strip .wrap{
  display:grid; grid-template-columns:repeat(3,1fr);
  padding-block:22px;
}
.hero-strip dt{font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-faint); margin-bottom:6px}
.hero-strip dd{color:var(--cream); font-family:var(--serif); font-size:1.05rem}
.hero-strip div + div{border-left:1px solid var(--line-dark); padding-left:clamp(16px,3vw,32px)}

/* ===================== SECTION shell ===================== */
section{position:relative}
.section{padding-block:clamp(84px,11vw,150px)}
.section-dark{background:var(--bg)}
.section-soft{background:var(--bg-soft)}
.section-paper{background:var(--paper); color:var(--ink)}
.section-paper .about-copy p{color:var(--ink-dim)}
.section-paper .locations-list li{color:var(--ink-dim); border-color:var(--line-light)}
.section-paper .locations-list b{color:var(--ink)}
.section-paper .locations-list span{color:var(--accent-dim)}
.section-paper .hero-strip{border-color:var(--line-light)}
.section-paper .reels-tab{border-color:var(--line-light); color:var(--ink-dim)}
.section-paper .reels-tab.is-active, .section-paper .reels-tab:hover{border-color:var(--ink); color:var(--ink); background:rgba(19,18,16,.05)}
.section-paper .about-figure .tag{background:var(--ink); color:var(--cream)}
.section-paper .section-head p{color:var(--ink-dim)}

.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
  margin-bottom:clamp(28px,4vw,48px);
}

/* ===================== SECTION BADGE (looping icon ornament) ===================== */
.section-badge{display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:22px}
.section-badge .badge-line{
  flex:1; max-width:110px; height:1px; position:relative;
  background:linear-gradient(90deg, transparent, var(--line-light) 65%, var(--line-light) 100%);
}
.section-badge .badge-line::after{
  content:""; position:absolute; right:-3px; top:50%; width:5px; height:5px;
  background:var(--accent); transform:translateY(-50%) rotate(45deg);
}
.section-badge .badge-line.is-end{
  background:linear-gradient(90deg, var(--line-light) 0%, var(--line-light) 35%, transparent 100%);
}
.section-badge .badge-line.is-end::after{left:-3px; right:auto}
.section-badge .badge-svg{width:26px; height:26px; color:var(--accent-dim); flex-shrink:0; overflow:visible}

.badge-aperture{transform-origin:12px 12px; animation:badgeAperture 5s linear infinite}
@keyframes badgeAperture{to{transform:rotate(360deg)}}

.badge-tag{transform-origin:4px 4px; animation:badgeTag 3s ease-in-out infinite}
@keyframes badgeTag{0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)}}

.badge-blade-a{transform-origin:7.6px 7.6px; animation:badgeSnipA 2.6s ease-in-out infinite}
.badge-blade-b{transform-origin:7.6px 16.4px; animation:badgeSnipB 2.6s ease-in-out infinite}
@keyframes badgeSnipA{0%,100%{transform:rotate(0)} 50%{transform:rotate(-10deg)}}
@keyframes badgeSnipB{0%,100%{transform:rotate(0)} 50%{transform:rotate(10deg)}}

.badge-star{transform-origin:12px 12px; animation:badgeStar 2.8s ease-in-out infinite}
@keyframes badgeStar{0%,100%{transform:scale(1); opacity:.8} 50%{transform:scale(1.14); opacity:1}}

.badge-play{transform-origin:12.5px 12px; animation:badgePlay 2.2s ease-in-out infinite}
@keyframes badgePlay{0%,100%{transform:scale(1); opacity:.85} 50%{transform:scale(1.16); opacity:1}}

/* ===================== SEAM BADGE (straddles the join between two sections) ===================== */
.seam{position:relative; height:0; z-index:25}
.seam-inner{
  position:absolute; left:0; right:0; top:0;
  display:flex; justify-content:center;
  transform:translateY(-50%);
  padding-inline:var(--gutter);
  pointer-events:none;
}
.seam-badge{
  background:#000; color:var(--cream);
  border:1px solid rgba(239,231,214,.15);
  padding:clamp(22px,3vw,36px) clamp(24px,5vw,52px);
  max-width:900px;
  border-radius:0;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  transition:border-color .45s var(--ease-out);
  pointer-events:auto;
}
.badge-inner{
  display:flex; flex-direction:column; align-items:center; gap:clamp(16px,2.4vw,24px);
}
.badge-inner .section-badge{margin-bottom:0; gap:clamp(12px,1.8vw,20px)}
.badge-inner .section-badge .badge-line-wrap{
  flex:none; width:clamp(70px,15vw,185px); display:flex; align-items:center; gap:3px;
}
.badge-inner .section-badge .badge-line{
  flex:1; min-width:0; max-width:none; height:13px; opacity:.85; background:var(--paper);
  clip-path:polygon(100% 28%, 0% 50%, 100% 72%, 95% 50%);
}
.badge-inner .section-badge .badge-line-wrap.is-end .badge-line{
  clip-path:polygon(0% 28%, 100% 50%, 0% 72%, 5% 50%);
}
.badge-inner .section-badge .badge-diamond{flex:none; background:var(--paper); transform:rotate(45deg)}
.badge-inner .section-badge .badge-diamond-sm{width:7px; height:7px}
.badge-inner .section-badge .badge-diamond-lg{width:11px; height:11px}
.badge-arrow-tip{display:none}
.badge-inner .badge-svg{color:var(--cream); width:clamp(40px,5.8vw,58px); height:clamp(40px,5.8vw,58px); overflow:visible}
.seam-title{
  font-family:var(--display); font-size:clamp(1.35rem,3.1vw,2.05rem); letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--paper); white-space:nowrap; line-height:1;
}

.hero-strip{padding-bottom:clamp(74px,15vw,116px)}
#o-nas{padding-top:clamp(80px,18vw,150px)}

/* per-icon character animations */
.badge-icon-heart{animation:badgeHeartbeat 2.3s ease-in-out infinite; transform-origin:center}
@keyframes badgeHeartbeat{0%,100%{transform:scale(1)} 45%{transform:scale(1.12)} 60%{transform:scale(1.04)}}
.badge-icon-hourglass{transform-origin:center; animation:hourglassFlip 6s cubic-bezier(.65,.05,.36,1) infinite}
@keyframes hourglassFlip{
  0%, 18%{transform:rotate(0deg)}
  50%, 68%{transform:rotate(180deg)}
  100%{transform:rotate(360deg)}
}

/* razor: blade pivots at the hinge (50,25) — closed merges into the handle, open spreads into a peak */
.badge-icon-razor{overflow:visible}
.badge-inner .badge-svg.badge-icon-razor{width:clamp(80px,11.6vw,116px); height:clamp(80px,11.6vw,116px)}
.razor-blade{transform-origin:50px 25px; animation:razorFold 4.6s cubic-bezier(.25,1,.5,1) infinite}
@keyframes razorFold{
  0%, 15%{transform:rotate(0deg)}
  50%, 65%{transform:rotate(-35deg)}
  100%{transform:rotate(0deg)}
}

/* mirror: mustache crossfades between a resting pose and a curled smile, like a changing expression */
.mustache-rest{animation:mustacheRestFade 3.2s ease-in-out infinite}
.mustache-smile{animation:mustacheSmileFade 3.2s ease-in-out infinite}
@keyframes mustacheRestFade{0%,40%{opacity:1} 55%,85%{opacity:0} 100%{opacity:1}}
@keyframes mustacheSmileFade{0%,40%{opacity:0} 55%,85%{opacity:1} 100%{opacity:0}}

/* price tag: front tag hangs and sways off a static back tag, for a stacked/voluminous feel */
.tag-front{animation:badgeTagSwing 3.4s ease-in-out infinite; transform-origin:15.5px 7.5px}
@keyframes badgeTagSwing{0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(7deg)}}

/* clippers: periodic buzz burst, then rest — same unhurried pacing as the other icons */
.badge-icon-clippers{transform-origin:center; animation:clipperCycle 2.8s ease-in-out infinite}
@keyframes clipperCycle{
  0%, 55%{transform:translate(0,0) rotate(0deg)}
  60%{transform:translate(.8px,-.6px) rotate(-2deg)}
  65%{transform:translate(-.7px,.5px) rotate(2deg)}
  70%{transform:translate(.6px,-.5px) rotate(-1.6deg)}
  75%{transform:translate(-.5px,.4px) rotate(1.4deg)}
  80%{transform:translate(.4px,-.3px) rotate(-1deg)}
  85%, 100%{transform:translate(0,0) rotate(0deg)}
}

@media (max-width:640px){
  .seam-badge{padding:22px 26px}
  .badge-inner .section-badge{gap:12px}
  .badge-inner .section-badge .badge-line{max-width:40px}
  .badge-inner .badge-svg{width:30px; height:30px}
  .badge-inner .badge-svg.badge-icon-razor{width:56px; height:56px}
  .seam-title{font-size:1.25rem}
}
.section-head h2{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.section-head p{max-width:38ch; color:var(--cream-dim); font-size:.98rem}

/* ===================== ABOUT ===================== */
.about{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,90px); align-items:start}
.about-copy h2{line-height:1.55}
.about-copy p{color:var(--ink-dim); font-size:1.03rem; margin-top:20px; max-width:52ch}
.about-copy p + p{margin-top:14px}
.about-figure{position:relative}
.about-figure img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px}
.about-figure .tag{
  position:absolute; left:-18px; bottom:-18px;
  background:var(--ink); color:var(--cream);
  padding:16px 22px; max-width:220px;
  font-family:var(--serif); font-style:italic; font-size:1.02rem; line-height:1.3;
}
.locations-list{margin-top:34px; display:grid; gap:14px}
.locations-list li{
  display:flex; justify-content:space-between; gap:20px; padding-block:14px;
  border-top:1px solid var(--line-light); font-size:.92rem; color:var(--ink-dim);
}
.locations-list b{color:var(--ink); font-weight:600}
.locations-list span{color:var(--accent-dim); font-size:.78rem; letter-spacing:.05em}

/* ===================== SERVICES — editorial menu ===================== */
.menu-layout{display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(40px,6vw,90px)}
.menu-intro{display:flex; flex-direction:column; align-self:start; position:sticky; top:88px}
.menu-intro h2{font-size:clamp(2.1rem,4vw,3rem)}
.menu-intro p{margin-top:18px; color:var(--ink-dim); max-width:36ch}
.menu-photo-wrap{margin-top:32px}
.menu-photo{height:min(60vh,540px); overflow:hidden; box-shadow:0 30px 50px -30px rgba(19,18,16,.35)}
.menu-photo img{width:100%; height:100%; object-fit:cover; object-position:center top}
.menu-list{display:flex; flex-direction:column; gap:44px}
.menu-group{display:grid; grid-template-columns:1fr 1fr; column-gap:32px}
.menu-group h3{
  grid-column:1/-1;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-family:var(--sans); font-weight:700;
  color:var(--accent-dim); padding-bottom:14px; border-bottom:1px solid var(--line-light); margin-bottom:6px;
}
.menu-item{display:flex; align-items:baseline; gap:10px; padding:14px 0; border-bottom:1px dotted var(--line-light)}
/* A group with an odd item count leaves its last item alone in the left
   column with an empty cell beside it — its divider line then reads as
   a stray half-width line going nowhere. Let that lone item span both
   columns instead of sitting orphaned next to empty space. */
.menu-item:last-child:nth-of-type(odd){grid-column:1/-1}
.menu-item .name{font-family:var(--serif); font-size:1.15rem}
.menu-item .desc{display:block; font-family:var(--sans); font-size:.8rem; color:var(--ink-faint); margin-top:3px}
.menu-item .fill{flex:1; border-bottom:1px dotted var(--line-light); margin-bottom:6px; min-width:16px}
.menu-item .price{font-family:var(--serif); font-size:1.1rem; white-space:nowrap}

/* ===================== PRICING — one panel, clear tiers ===================== */
.pricing-panel{background:var(--paper-dim); padding:clamp(28px,4vw,48px); border-radius:2px}
.pricing-list{display:flex; flex-direction:column; gap:14px}
.tier{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:28px;
  padding:22px 24px; border:1px solid var(--line-light); border-radius:2px; background:var(--paper);
}
.tier-avatar{width:56px; height:56px; border-radius:50%; overflow:hidden; flex-shrink:0}
.tier-avatar img{width:100%; height:100%; object-fit:cover; object-position:center 16%}
.tier-id{display:flex; flex-direction:column; gap:6px}
.tier .tier-tag{font-size:1.3rem; font-family:var(--serif); font-style:italic; display:flex; align-items:center; gap:10px; min-height:36px}
.tier .tier-sub{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); min-height:34px}
.tier-price{text-align:right; min-width:90px}
.tier-price .label{display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px}
.tier-price b{font-family:var(--serif); font-size:1.4rem; color:var(--ink); font-weight:500}
.tier.is-featured{border-color:var(--accent)}
.tier.is-featured .tier-tag .badge{
  font-family:var(--sans); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  color:var(--paper); background:var(--accent-dim); padding:.35em .7em; border-radius:2px;
}

.addons-block{margin-top:40px; padding-top:36px; border-top:1px solid var(--line-light)}
.addons-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px}
.addons-head h3{font-size:1.2rem}
.addons{display:grid; grid-template-columns:1fr 1fr; gap:0 40px}
.addon-row{display:flex; align-items:baseline; gap:10px; padding:12px 0; border-bottom:1px dotted var(--line-light); font-size:.88rem; color:var(--ink-dim)}
.addon-row .fill{flex:1; border-bottom:1px dotted var(--line-light); margin-bottom:6px; min-width:12px}
.addon-row b{font-weight:600; color:var(--ink); font-family:var(--serif); font-size:.98rem; white-space:nowrap}
.loyalty-note{margin-top:28px; display:flex; gap:16px; align-items:center; font-size:.86rem; color:var(--ink-dim)}
.loyalty-note .pill{background:var(--red); color:var(--paper); padding:.4em .9em; border-radius:2px; font-weight:700; font-size:.76rem; letter-spacing:.04em; white-space:nowrap}

/* ===================== PORTFOLIO — featured photo + marquee rails ===================== */
.gallery-marquee{
  display:grid; grid-template-columns:.57fr 1.5fr .57fr; gap:16px;
  height:min(80vh,700px); overflow:hidden; position:relative;
}
.gallery-col{overflow:hidden; border-radius:2px}
.gallery-track{display:flex; flex-direction:column; gap:16px; width:100%; will-change:transform}
.gallery-track img{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block; border-radius:2px; cursor:pointer;
  filter:grayscale(12%) sepia(6%) contrast(1.07) saturate(1.04);
  box-shadow:0 20px 30px -24px rgba(19,18,16,.35);
  transition:filter .3s, transform .45s var(--ease-spring), box-shadow .35s;
  position:relative; z-index:1;
}
.gallery-track img:hover{
  filter:grayscale(0%) sepia(0%) contrast(1.02) saturate(1.05);
  transform:scale(1.045);
  box-shadow:0 26px 40px -20px rgba(19,18,16,.45);
}
.gallery-col--up .gallery-track{animation:galleryUp 34s linear infinite}
.gallery-col--down .gallery-track{animation:galleryDown 34s linear infinite}
.gallery-col--slow .gallery-track{animation-duration:46s}
@keyframes galleryUp{from{transform:translateY(0)} to{transform:translateY(-50%)}}
@keyframes galleryDown{from{transform:translateY(-50%)} to{transform:translateY(0)}}
.gallery-marquee:hover .gallery-track{animation-play-state:paused}

.gallery-feature{
  position:relative; overflow:hidden; border-radius:2px; align-self:center;
  aspect-ratio:4/5; box-shadow:0 40px 70px -24px rgba(19,18,16,.4);
}
.gallery-feature-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(8%) sepia(4%) contrast(1.05) saturate(1.03);
  opacity:1; transition:opacity .45s ease;
}
.gallery-feature-img.is-fading{opacity:0}

/* ===================== TEAM ===================== */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.team-card{position:relative; display:block}
.team-card::before{
  content:""; position:absolute; inset:-10px; z-index:-1; pointer-events:none; opacity:0;
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%), rgba(169,123,69,.16), transparent 72%);
  transition:opacity .4s;
}
.team-card:hover::before{opacity:1}
.team-card .frame{aspect-ratio:4/5; overflow:hidden; background:var(--paper-dim); position:relative}
.team-card img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out)}
.team-card:hover img{transform:scale(1.05)}
.team-card .frame::before,.team-card .frame::after{
  content:""; position:absolute; width:22px; height:22px; z-index:2; pointer-events:none;
  transition:width .35s var(--ease-out), height .35s var(--ease-out);
}
.team-card .frame::before{
  top:12px; left:12px; border-top:1px solid rgba(245,241,230,.85); border-left:1px solid rgba(245,241,230,.85);
}
.team-card .frame::after{
  bottom:12px; right:12px; border-bottom:1px solid rgba(245,241,230,.85); border-right:1px solid rgba(245,241,230,.85);
}
.team-card:hover .frame::before,.team-card:hover .frame::after{width:28px; height:28px}
.team-card .info{padding-top:14px}
.team-card .role{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-dim); display:block; margin-bottom:4px}
.team-card h3{font-size:1.25rem; color:var(--ink); font-weight:500}

/* ===================== REVIEWS — asymmetric ===================== */
.reviews-top{display:flex; align-items:center; gap:28px; flex-wrap:wrap}
.rating-badge{display:flex; align-items:baseline; gap:10px}
.rating-badge .num{font-family:var(--serif); font-size:3.4rem; color:var(--ink)}
.rating-badge .stars{color:var(--accent); letter-spacing:.14em}
.rating-badge .count{color:var(--ink-dim); font-size:.86rem}
.reviews-track{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:auto auto; gap:22px; margin-top:44px;
}
.review-card{
  position:relative; overflow:hidden;
  padding:28px 26px; display:flex; flex-direction:column; gap:16px;
  border-left:3px solid var(--accent); background:var(--paper-dim);
}
.review-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(169,123,69,.14), transparent 72%);
  transition:opacity .4s;
}
.review-card:hover::before{opacity:1}
.review-card > *{position:relative}
.review-card:nth-child(1){grid-row:1/3; justify-content:center}
.review-card:nth-child(1) p{font-family:var(--serif); font-size:1.3rem; line-height:1.4; color:var(--ink)}
.review-card .stars{color:var(--accent); font-size:.82rem; letter-spacing:.14em}
.review-card p{color:var(--ink); font-size:.94rem; line-height:1.6}
.review-card .who{display:flex; justify-content:space-between; font-size:.78rem; color:var(--ink-faint); margin-top:auto; padding-top:10px}

/* ===================== REELS ===================== */
.reels-tabs{display:flex; gap:10px; margin-bottom:34px}
.reels-tab{
  padding:.7em 1.4em; border:1px solid var(--line-light); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); transition:.3s;
}
.reels-tab.is-active, .reels-tab:hover{border-color:var(--ink); color:var(--ink); background:rgba(19,18,16,.05)}
.reels-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
.reel{position:relative; aspect-ratio:9/16; overflow:hidden; background:var(--ink); cursor:pointer}
.reel video{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out)}
.reel:hover video{transform:scale(1.04)}
.reel[hidden]{display:none}
.reel .play-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(10,9,7,.15); transition:opacity .3s, background-color .3s; pointer-events:none;
}
.reel .play-icon svg{width:38px; height:38px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.reel.is-playing .play-icon{opacity:0}

.video-lightbox{
  position:fixed; inset:0; z-index:250; background:rgba(10,9,7,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.video-lightbox.is-open{opacity:1; pointer-events:auto}
.video-lightbox .lightbox-video{
  max-width:min(92vw,420px); max-height:86vh; width:100%; aspect-ratio:9/16;
  background:#000; box-shadow:0 40px 90px rgba(0,0,0,.55);
}
.lightbox-close{
  position:absolute; top:22px; right:22px; width:44px; height:44px; border-radius:50%;
  background:rgba(239,231,214,.1); color:var(--cream); font-size:1.7rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background-color .3s;
}
.lightbox-close:hover{background:rgba(239,231,214,.2)}

/* ===================== CTA / BOOKING ===================== */
.cta{
  position:relative; min-height:min(72vh,620px); overflow:hidden;
  background:var(--ink); isolation:isolate;
  display:flex; align-items:flex-end; justify-content:center;
  padding-block:clamp(32px,5vw,48px);
  text-align:center;
}
.cta-media{position:absolute; inset:0; z-index:0}
.cta-media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 28%; opacity:1;
  filter:contrast(1.03) saturate(1.05);
}
.cta-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,9,7,.05) 0%, rgba(10,9,7,.12) 46%, rgba(8,7,5,.82) 100%)}
.cta > .wrap{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center}
.cta .eyebrow{color:var(--cream-dim)}
.cta h2{font-size:clamp(1.7rem,3.6vw,2.9rem); color:var(--paper); max-width:20ch; text-shadow:0 4px 24px rgba(0,0,0,.6)}
.cta p{margin-top:14px; color:var(--cream-dim); text-shadow:0 2px 12px rgba(0,0,0,.5); font-size:.92rem}
.cta .btn{margin-top:26px; padding:1.1em 2.3em; font-size:.85rem}

/* ===================== FOOTER ===================== */
.site-footer{background:var(--paper); color:var(--ink); padding-block:70px 30px; border-top:1px solid var(--line-light)}
.footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px}
.footer-top h4{font-family:var(--sans); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); font-weight:700; margin-bottom:18px}
.footer-top a, .footer-top li{color:rgba(19,18,16,.82); font-size:.9rem; line-height:2}
.footer-top a:hover{color:var(--ink)}
.footer-brand p{color:rgba(19,18,16,.82); font-size:.88rem; max-width:32ch; margin-top:14px}
.social-row{display:flex; gap:14px; margin-top:20px}
.social-row a{width:38px; height:38px; border:1px solid var(--line-light); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.3s}
.social-row a:hover{border-color:var(--ink); background:rgba(19,18,16,.05)}
.footer-bottom{
  margin-top:60px; padding-top:26px; border-top:1px solid var(--line-light);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-size:.78rem; color:rgba(19,18,16,.7);
}
.footer-bottom a:hover{color:var(--ink)}

/* ===================== COOKIE BANNER ===================== */
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:200;
  max-width:560px;
  background:var(--paper); color:var(--ink);
  padding:26px 28px; border-radius:2px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  transform:translateY(140%); transition:transform .6s var(--ease-out);
}
.cookie-banner.is-visible{transform:none}
.cookie-banner p{font-size:.86rem; line-height:1.55; color:var(--ink-dim)}
.cookie-banner .actions{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.cookie-banner .btn-primary{padding:.85em 1.6em; font-size:.82rem}
.cookie-banner .btn-text{padding:.85em 0; font-size:.82rem; text-decoration:underline; text-underline-offset:3px; color:var(--ink-dim)}

/* ===================== PERSON PAGE ===================== */
.person-hero{
  padding-top:calc(88px + clamp(40px,7vw,90px));
  padding-bottom:clamp(50px,7vw,90px);
  background:var(--paper); color:var(--ink);
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,6vw,80px); align-items:center;
}
.person-hero .figure{aspect-ratio:4/5; overflow:hidden; background:var(--paper-dim); box-shadow:0 30px 60px -30px rgba(19,18,16,.35)}
.person-hero .figure img{width:100%; height:100%; object-fit:cover}
.person-hero .figure.is-empty{display:flex; align-items:center; justify-content:center; border:1px solid var(--line-light)}
.person-hero .figure.is-empty span{font-family:var(--serif); font-style:italic; color:var(--ink-faint); font-size:1.1rem; text-align:center; padding:0 30px}
.person-copy .role{color:var(--accent-dim)}
.person-copy h1{font-size:clamp(2.8rem,7vw,5.4rem); color:var(--ink); margin-top:10px}
.person-copy .lead{margin-top:20px; font-size:1.1rem; color:var(--ink-dim); max-width:44ch}
.person-specialties{margin-top:30px; display:flex; flex-wrap:wrap; gap:10px}
.person-specialties span{
  border:1px solid var(--line-light); padding:.6em 1.1em; font-size:.8rem; color:var(--ink-dim);
}
.person-cta{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap}
.person-gallery{padding-block:clamp(48px,6vw,80px); background:var(--bg)}
.person-gallery .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.person-gallery .grid img{aspect-ratio:3/4; object-fit:cover; width:100%}
.person-gallery .note{margin-top:18px; font-size:.8rem; color:var(--cream-faint)}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1230px) and (min-width:1081px){
  /* Below ~1230px the header-inner is still viewport-bound (hasn't hit
     its own 1290px cap yet), and the unsqueezed nav doesn't fit next to
     the brand with any margin at that narrower width. Above ~1230px the
     unsqueezed nav already fits fine on its own, so this band ends well
     before the 1290px cap instead of squeezing all the way up to it —
     squeezing past the point where it's needed just pushed the leftover
     slack into one big gap again. */
  .main-nav{gap:clamp(8px,1vw,16px)}
  .main-nav a{font-size:.8rem}
  .main-nav a.btn-primary{padding:.9em 1.4em}
}
@media (max-width:1080px){
  /* .hero-scroll is bottom:34px, absolutely positioned — on desktop the
     button row is one line and never reaches that far down. On mobile
     the two buttons wrap onto two lines, so the taller button stack
     runs right into the scroll cue and the two visually collide. */
  .hero-scroll{display:none}
  /* The desktop pool is an ellipse tuned for a wide, short box — on a
     tall portrait hero the same percentages don't land over the text.
     Swap it for a straightforward bottom-heavy wash instead. */
  .hero-media::after{
    background:linear-gradient(180deg, rgba(12,11,9,.12) 0%, rgba(12,11,9,.35) 20%, rgba(12,11,9,.75) 38%, rgba(12,11,9,.88) 55%, rgba(12,11,9,.92) 100%);
  }
  .main-nav{
    position:fixed; inset:0; z-index:90; background:var(--ink); flex-direction:column; gap:22px;
    justify-content:flex-start; padding:110px 32px 60px; overflow-y:auto;
    transform:translateX(100%); transition:transform .5s var(--ease-out);
  }
  .main-nav.is-open{transform:none}
  .main-nav a{font-size:1.05rem}
  .nav-icon{display:none}
  .main-nav .btn-primary{margin-top:10px}
  .nav-toggle{display:flex; flex-direction:column; align-items:flex-end; gap:6px; z-index:96; width:30px; padding:6px}
  .nav-toggle span{height:2px; border-radius:1px; background:var(--cream); width:100%; transition:.3s var(--ease-out)}
  .nav-toggle span:nth-child(2){width:70%}
  .nav-toggle.is-open span{background:var(--cream)}
  .nav-toggle.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg); width:100%}
  .nav-toggle.is-open span:nth-child(2){opacity:0}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg); width:100%}
  .section-head{flex-direction:column; align-items:flex-start; gap:14px}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .tier{grid-template-columns:auto 1fr; row-gap:16px}
  .tier-price{grid-column:1/3; display:flex; justify-content:space-between; text-align:left}
  .about, .menu-layout{grid-template-columns:1fr}
  .menu-intro{position:static}
  .menu-photo{height:auto; aspect-ratio:4/5}
  .reviews-track{grid-template-columns:1fr}
  .review-card:nth-child(1){grid-row:auto}
  .review-card:not(:nth-child(1)){border-left:0}
  .hero-strip .wrap{grid-template-columns:1fr; gap:14px}
  .hero-strip div + div{border-left:0; padding-left:0; border-top:1px solid var(--line-dark); padding-top:14px}
  .section-paper .hero-strip div + div{border-color:var(--line-light)}
  .footer-top{grid-template-columns:1fr 1fr}
  .reviews-track{grid-template-columns:1fr}
  /* On a tall narrow viewport the section is height-bound, so the crop
     is centered horizontally — on the homepage's steam photo that lands
     squarely on the towel/arm in the middle, missing the client's face
     on the left. Scoped to that specific photo by filename: the
     Atmosfera page uses a different CTA photo (cta-trim.webp) where the
     face sits centered, so it needs the default centered crop, not this
     shift — applying this to both was actively wrong for that one. */
  .cta-media img[src*="cta-steam"]{object-position:5% 28%}
  .reels-grid{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px;
    margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }
  .reel{flex:0 0 auto; width:38vw; scroll-snap-align:start}
  .gallery-marquee{height:min(64vh,520px)}
  .addons{grid-template-columns:1fr}
  .person-hero{grid-template-columns:1fr}
  .person-gallery .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .team-grid{grid-template-columns:repeat(2,1fr); gap:14px}
  .menu-group{column-gap:16px}
  .footer-top{grid-template-columns:1fr 1fr; row-gap:32px}
  .footer-brand{grid-column:1/-1}
  .footer-bottom{flex-direction:column; align-items:flex-start; gap:8px; margin-top:40px}
  .reel{width:58vw}
  .gallery-marquee{grid-template-columns:1fr 1fr; height:auto; row-gap:12px}
  .gallery-feature{grid-column:1/3; order:-1; aspect-ratio:6/5}
  .gallery-col{height:250px}
  .cookie-banner{left:12px; right:12px; bottom:12px; padding:22px}
}