/* ==========================================================================
   SQUAD CUTS — barbershop Paramaribo
   Premium dark, one warm-paper section, single brass accent. Quiet & sharp.
   ========================================================================== */

:root{
  --bg:#0c0b0a;
  --bg-2:#151310;
  --paper:#f1ece2;
  --paper-2:#e6ddcd;
  --ink:#f4f0e8;
  --ink-soft:#a29a8a;
  --ink-dark:#1a1712;
  --ink-dark-soft:#6c6355;
  --line:rgba(244,240,232,.12);
  --line-strong:rgba(244,240,232,.22);
  --line-dark:rgba(26,23,18,.16);
  --brass:#c6a568;
  --brass-deep:#a98a4c;

  --f-display:'Fraunces',Georgia,'Times New Roman',serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --container:1240px;
  --pad:clamp(20px,5vw,48px);
  --section:clamp(64px,7vw,100px);

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--brass);color:#1a1204}

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

/* ---------- type primitives ---------- */
.display{
  font-family:var(--f-display);
  font-weight:500;
  font-optical-sizing:auto;
  line-height:1.06;
  letter-spacing:-.02em;
}
h1.display{font-size:clamp(2.7rem,6.4vw,4.7rem)}
h2.display{font-size:clamp(1.95rem,3.8vw,3rem)}
h3{font-family:var(--f-body);font-weight:600;font-size:1.06rem;letter-spacing:.01em}

.eyebrow{
  font-family:var(--f-body);
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--brass);
}
.eyebrow--onDark{color:var(--brass)}

/* ---------- buttons & links ---------- */
.btn{
  --py:16px;--px:30px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--py) var(--px);
  font-family:var(--f-body);font-weight:600;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid transparent;border-radius:2px;
  cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--ink);color:var(--ink-dark)}
.btn--primary:hover{background:#fff}
.btn--dark{background:var(--ink-dark);color:var(--paper)}
.btn--dark:hover{background:#000}
.btn--line{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--line:hover{border-color:var(--brass);color:var(--brass)}
.btn--sm{--py:12px;--px:20px;font-size:.72rem}
.btn--review{background:transparent;color:var(--ink);border-color:var(--line-strong);gap:11px}
.btn--review:hover{border-color:var(--brass);color:var(--brass);transform:translateY(-2px)}
.btn__stars{display:inline-flex;align-items:center;gap:3px}
.btn__stars svg{width:13px;height:13px;fill:none;stroke:var(--brass);stroke-width:1.6;stroke-linejoin:round;transition:fill .2s ease}
.btn--review:hover .btn__stars svg{fill:var(--brass)}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-dark);
}
.link-arrow--onDark{color:var(--ink)}
.link-arrow::after{content:"→";transition:transform .25s ease}
.link-arrow:hover{color:var(--brass)}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:18px 0;
  transition:background .3s ease,padding .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(12,11,10,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
  padding:12px 0;
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:flex;align-items:center;gap:12px;font-family:var(--f-body);font-weight:600;font-size:.9rem;letter-spacing:.16em;text-transform:uppercase}
.brand__mark{
  width:40px;height:40px;object-fit:contain;
}

.nav__links{display:flex;align-items:center;gap:36px}
.nav__links a:not(.btn){
  font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);opacity:.8;transition:opacity .2s ease,color .2s ease;
}
.nav__links a:not(.btn):hover{opacity:1;color:var(--brass)}

.nav__toggle{display:none;flex-direction:column;gap:6px;background:none;border:0;padding:8px;cursor:pointer}
.nav__toggle span{width:24px;height:1.5px;background:var(--ink);transition:transform .3s ease,opacity .3s ease}

/* ==========================================================================
   HERO — split: text panel + image
   ========================================================================== */
.hero{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  min-height:min(100svh,900px);
  background:var(--bg);
}
.hero__text{
  display:flex;align-items:center;
  padding:clamp(96px,12vh,140px) clamp(32px,4vw,72px) clamp(48px,7vh,88px) var(--pad);
}
.hero__text-inner{width:100%;max-width:582px;margin-left:auto}
.hero .eyebrow{margin-bottom:20px}
.hero__title{margin-bottom:22px;font-size:clamp(2.3rem,3.4vw,3.15rem);text-wrap:balance}
.hero__sub{max-width:44ch;font-size:1.05rem;color:#cfc9bd;margin-bottom:38px}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-bottom:44px}
.hero__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding-top:clamp(22px,3vw,32px);
  border-top:1px solid var(--line);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--ink-soft);
}
.hero__foot-sep{width:4px;height:4px;border-radius:50%;background:var(--brass);flex:none}
.hero__media{position:relative;overflow:hidden;background:var(--bg-2)}
.hero__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 62%;
  filter:grayscale(.12) contrast(1.04) brightness(.86) saturate(.88);
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--bg) 0%,rgba(12,11,10,0) 20%),
    linear-gradient(180deg,rgba(12,11,10,.34) 0%,rgba(12,11,10,0) 14%),
    linear-gradient(0deg,rgba(12,11,10,.3),rgba(12,11,10,0) 42%);
}

/* ==========================================================================
   STATEMENT + VALUES
   ========================================================================== */
.statement{padding-block:var(--section)}
.statement__lead{
  font-size:clamp(1.5rem,3.2vw,2.35rem);
  font-weight:400;
  line-height:1.28;
  letter-spacing:-.015em;
  max-width:26ch;
  color:var(--ink);
}
.values{
  margin-top:clamp(40px,5vw,60px);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.value{padding:32px 26px 32px 0;border-bottom:1px solid var(--line)}
.value + .value{border-left:1px solid var(--line);padding-left:26px}
.value__label{
  display:block;margin-bottom:12px;
  font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
}
.value p{color:var(--ink-soft);font-size:.92rem;line-height:1.55}
.value .reveal:nth-child(2){transition-delay:.05s}
.values .value:nth-child(2){transition-delay:.06s}
.values .value:nth-child(3){transition-delay:.12s}
.values .value:nth-child(4){transition-delay:.18s}

/* ==========================================================================
   OVER ONS
   ========================================================================== */
.about{padding-block:var(--section)}
.about__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,96px);align-items:start}
.about__text .eyebrow{margin-bottom:18px}
.about__text h2{margin-bottom:26px}
.about__text p{color:#d8d2c5;margin-bottom:18px;max-width:46ch}
.about__text p:last-child{margin-bottom:0}
.about__loc{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--ink-soft);
}
.about__media{overflow:hidden;border:1px solid var(--line)}
.about__media img{width:100%;height:clamp(400px,44vw,520px);object-fit:cover;filter:grayscale(.15) contrast(1.05) brightness(.95) saturate(.9)}

/* ==========================================================================
   DIENSTEN — light paper section
   ========================================================================== */
.menu{background:var(--paper);color:var(--ink-dark);padding-block:var(--section)}
.menu .eyebrow{color:var(--brass-deep)}
.menu__head{max-width:52ch;margin-bottom:clamp(40px,6vw,72px)}
.menu__head h2{margin:14px 0 16px}
.menu__note{color:var(--ink-dark-soft);font-size:.95rem}

.pricelist{list-style:none;border-top:1px solid var(--line-dark)}
.pricelist li{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:22px 8px;border-bottom:1px solid var(--line-dark);
  transition:background .25s ease,padding-left .25s ease;
}
.pricelist li:hover{background:rgba(198,165,104,.09);padding-left:18px}
.pricelist__name{font-weight:500;font-size:1.08rem;letter-spacing:.005em}
.pricelist__name em{font-style:normal;font-weight:400;color:var(--ink-dark-soft);font-size:.82rem;letter-spacing:.06em}
.pricelist__price{
  font-family:var(--f-display);font-weight:500;font-size:1.32rem;letter-spacing:0;
  color:var(--ink-dark);flex:none;
}
.pricelist__price em{font-style:normal;font-family:var(--f-body);font-weight:600;font-size:.62rem;letter-spacing:.14em;color:var(--ink-dark-soft);margin-right:.5em;vertical-align:.15em}
.pricelist li.is-feature .pricelist__price{color:var(--brass-deep)}
.pricelist li.is-feature{box-shadow:inset 3px 0 0 var(--brass)}

.menu__cta{margin-top:clamp(36px,5vw,56px)}

/* ==========================================================================
   RESERVEREN
   ========================================================================== */
.reserve{padding-block:var(--section);border-bottom:1px solid var(--line)}
.reserve__head{margin-bottom:clamp(44px,6vw,72px)}
.reserve__head .eyebrow{margin-bottom:14px}
/* --- booking picker --- */
.booking [hidden]{display:none}
.booking__step{display:flex;align-items:baseline;gap:14px;margin:0 0 18px}
.booking__step:not(:first-child){margin-top:40px}
.booking__step-n{font-family:var(--f-display);font-weight:500;font-size:1rem;color:var(--brass);letter-spacing:.02em}
.booking__step-label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--ink-soft)}

.booking__services{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.booking__service{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:var(--bg);color:var(--ink);border:0;cursor:pointer;
  padding:22px 24px;text-align:left;font:inherit;position:relative;
  transition:background .2s ease;
}
.booking__service:hover{background:var(--bg-2)}
.booking__service.is-active{background:var(--bg-2);box-shadow:inset 3px 0 0 var(--brass)}
.booking__service-name{font-family:var(--f-display);font-size:1.12rem;font-weight:500;line-height:1.2}
.booking__service-tag{font-family:var(--f-body);font-weight:600;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);vertical-align:.15em;margin-left:.35em}
.booking__service-meta{display:flex;align-items:center;gap:12px;font-size:.82rem;color:var(--ink-soft);letter-spacing:.04em}
.booking__service-price{color:var(--ink)}
.booking__service-sep{width:3px;height:3px;border-radius:50%;background:var(--brass);flex:none}
.booking__service-check{position:absolute;top:20px;right:22px;color:var(--brass);opacity:0;transition:opacity .18s ease;font-size:.9rem}
.booking__service.is-active .booking__service-check{opacity:1}
/* orphan last service (Full Service) fills the row — no empty grid cell */
.booking__service:nth-child(odd):last-child{grid-column:1/-1}

.booking__barbers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.booking__barber{
  display:flex;align-items:center;justify-content:center;gap:8px;position:relative;
  background:var(--bg);color:var(--ink);border:0;cursor:pointer;
  padding:20px 14px;font:inherit;transition:background .2s ease;
}
.booking__barber:hover{background:var(--bg-2)}
.booking__barber.is-active{background:var(--bg-2);box-shadow:inset 0 -3px 0 var(--brass)}
.booking__barber-name{font-family:var(--f-display);font-size:1.02rem;font-weight:500}
.booking__barber-check{color:var(--brass);opacity:0;transition:opacity .18s ease;font-size:.82rem}
.booking__barber.is-active .booking__barber-check{opacity:1}

.booking__frame-wrap{margin-top:20px;border:1px solid var(--line);background:var(--bg-2);transition:border-color .25s ease,background .25s ease}
/* before a barber is picked it's just a hint line — drop the heavy empty box */
.booking__frame-wrap:has(> .booking__frame[hidden]){border-color:transparent;background:transparent;margin-top:8px}
.booking__frame-placeholder{padding:22px 24px;text-align:center;color:var(--ink-soft);font-size:.9rem;letter-spacing:.04em}
.booking__frame{
  display:block;width:100%;min-height:900px;border:0;background:#fff;
  opacity:0;transition:opacity .3s ease;
}
.booking__frame.is-visible{opacity:1}

@media (max-width:640px){
  .booking__services{grid-template-columns:1fr}
  .booking__barbers{grid-template-columns:repeat(2,1fr)}
  .booking__frame{min-height:1040px}
}

.reserve__cta{margin-top:clamp(40px,5vw,60px);max-width:60ch}
.reserve__cta > p{color:#d8d2c5}
.reserve__buttons{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin:24px 0 22px}
.reserve__walkin{font-size:.82rem;letter-spacing:.06em;color:var(--ink-soft)}

/* ==========================================================================
   WERK — uniform grid
   ========================================================================== */
.work{padding-block:var(--section)}
.work__head{margin-bottom:clamp(40px,5vw,64px)}
.work__head .eyebrow{margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
.grid__item{position:relative;overflow:hidden;background:var(--bg-2);aspect-ratio:4/5}
.grid__item img{width:100%;height:100%;object-fit:cover;filter:grayscale(.16) contrast(1.05) brightness(.92) saturate(.88);transition:transform .7s cubic-bezier(.2,.6,.2,1),filter .5s ease}
.grid__item:hover img{transform:scale(1.04);filter:grayscale(0) contrast(1.05) brightness(.98) saturate(1)}
.grid__item figcaption{
  position:absolute;left:16px;bottom:14px;
  font-weight:600;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.grid .grid__item:nth-child(2){transition-delay:.06s}
.grid .grid__item:nth-child(3){transition-delay:.12s}
.grid .grid__item:nth-child(4){transition-delay:.06s}
.grid .grid__item:nth-child(5){transition-delay:.12s}
.grid .grid__item:nth-child(6){transition-delay:.18s}

/* ==========================================================================
   REVIEWS — Google review CTA
   ========================================================================== */
.reviews{padding-block:var(--section);border-top:1px solid var(--line)}
.reviews__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.reviews__head{max-width:46ch;margin-bottom:clamp(34px,4.5vw,48px)}
.reviews__head .eyebrow{margin-bottom:14px}
.reviews__head h2{margin-bottom:16px}
.reviews__sub{color:var(--ink-soft);font-size:.98rem;max-width:52ch;margin-inline:auto}

/* Live Google reviews (GHL widget mounts here) — hidden until it has content */
.reviews__feed{width:100%;max-width:960px}
.reviews__feed:not(:empty){margin-bottom:clamp(30px,4vw,44px)}
.reviews__feed:empty{display:none}

.gcard{
  width:100%;max-width:440px;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:clamp(32px,5vw,44px) clamp(24px,4vw,40px);
  background:var(--bg-2);border:1px solid var(--line);border-radius:3px;
}
.gcard__top{display:flex;align-items:center;gap:14px}
.gcard__logo{display:flex;flex:none}
.gcard__id{display:flex;flex-direction:column;align-items:flex-start;line-height:1.35}
.gcard__name{font-weight:600;font-size:.98rem;letter-spacing:.02em}
.gcard__meta{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.gcard__stars{display:flex;gap:7px}
.gcard__stars svg{width:22px;height:22px;fill:none;stroke:var(--brass);stroke-width:1.5;stroke-linejoin:round}
.gcard__note{color:var(--ink-soft);font-size:.9rem}
.gcard .btn{width:100%}

/* ==========================================================================
   BEZOEK
   ========================================================================== */
.visit{padding-block:var(--section);border-top:1px solid var(--line)}
.visit__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:stretch}
.visit__info .eyebrow{margin-bottom:16px}
.visit__city{color:var(--ink-soft);margin:8px 0 30px}
.hours{width:100%;border-collapse:collapse;margin-bottom:30px}
.hours th,.hours td{padding:14px 0;border-bottom:1px solid var(--line);font-size:.94rem;font-weight:400}
.hours th{text-align:left;color:var(--ink)}
.hours td{text-align:right;color:var(--brass);font-variant-numeric:tabular-nums}
.visit__buttons{display:flex;gap:12px;margin-bottom:30px}
.visit__meta{display:flex;flex-direction:column;gap:18px;padding-top:24px;border-top:1px solid var(--line)}
.visit__socials{display:flex;gap:26px;font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.visit__socials a{color:var(--ink-soft);transition:color .2s ease}
.visit__socials a:hover{color:var(--brass)}
.visit__map{overflow:hidden;border:1px solid var(--line);min-height:420px}
.visit__map iframe{width:100%;height:100%;min-height:420px;border:0;filter:grayscale(.55) contrast(1) brightness(.82)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{padding-block:clamp(56px,8vw,88px);border-top:1px solid var(--line);text-align:center}
.foot__inner{display:flex;flex-direction:column;align-items:center;gap:10px}
.brand--foot{font-size:.95rem;letter-spacing:.18em;margin-bottom:6px}
.foot__tag{font-family:var(--f-display);font-weight:400;font-style:italic;color:var(--brass);font-size:1.05rem;letter-spacing:0}
.foot__line{color:var(--ink-soft);font-size:.88rem}
.foot__line a:hover{color:var(--brass)}
.foot__credit{color:#6a6357;font-size:.78rem;letter-spacing:.04em;margin-top:12px}
.foot__credit a{color:var(--ink-soft)}
.foot__credit a:hover{color:var(--brass)}

/* ==========================================================================
   STICKY MOBILE CTA
   ========================================================================== */
.stickybook{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:90;display:none;
  text-align:center;padding:16px;
  background:var(--ink);color:var(--ink-dark);
  font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  border-radius:2px;box-shadow:0 18px 44px -14px rgba(0,0,0,.7);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__media{order:-1;height:46svh;min-height:300px;max-height:520px}
  .hero__media img{object-position:center 15%}
  .hero__media::after{background:linear-gradient(0deg,var(--bg) 0%,rgba(12,11,10,0) 30%)}
  .hero__text{padding:clamp(34px,7vw,56px) var(--pad) clamp(40px,8vw,60px)}
  .hero__text-inner{max-width:none;margin-left:0}
  .hero__title{font-size:clamp(2.4rem,6.4vw,3.4rem)}
}
@media (max-width:960px){
  .about__inner,.visit__inner{grid-template-columns:1fr;gap:40px}
  .values{grid-template-columns:1fr 1fr}
  .value{padding-right:20px}
  .value + .value{border-left:0;padding-left:0}
  .values .value:nth-child(3){border-left:0;padding-left:0}
  .values .value:nth-child(odd) + .value{border-left:1px solid var(--line);padding-left:26px}
  .steps{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .visit__map,.visit__map iframe{min-height:340px}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .nav__links{
    position:fixed;inset:0 0 0 auto;width:min(84vw,330px);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;
    padding:40px;background:#100e0c;border-left:1px solid var(--line);
    box-shadow:-24px 0 64px rgba(0,0,0,.55);
    transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  }
  .nav__links.is-open{transform:translateX(0)}
  .nav__links a:not(.btn){font-size:.95rem;opacity:1}
  .nav__toggle{display:flex}
  .nav__toggle.is-open span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
  .nav__toggle.is-open span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

  .hero .eyebrow{margin-bottom:16px}
  .hero__title{font-size:clamp(2.15rem,7.6vw,3rem);letter-spacing:-.025em;text-wrap:pretty;margin-bottom:18px}
  .hero__sub{font-size:1rem;margin-bottom:26px}
  .hero__actions{flex-direction:column;align-items:stretch;gap:14px}
  .hero__actions .btn{width:100%}
  .hero__actions .link-arrow{justify-content:center}
  .hero__foot{gap:12px 14px}

  .statement__lead{font-size:clamp(1.4rem,6vw,1.8rem)}

  .values{grid-template-columns:1fr}
  .value,.value + .value{border-left:0!important;padding-left:0!important;padding-right:0;padding-block:26px}
  .values .value:nth-child(odd) + .value{border-left:0}

  .grid{grid-template-columns:1fr;gap:12px}
  .grid__item{aspect-ratio:1/1}

  .visit__buttons .btn{flex:1}

  .stickybook{display:block}
  .foot{padding-bottom:96px}
  .reserve__buttons .btn{width:100%}
  .reserve__buttons .link-arrow{width:100%;justify-content:center}
}
@media (max-width:400px){
  .container{padding-inline:18px}
  .pricelist li{gap:14px;padding:20px 2px}
  .pricelist li:hover{padding-left:2px}
  .pricelist__name{font-size:1rem}
  .pricelist__name em{display:none}
  .pricelist__price{font-size:1.15rem}
  .hero__foot{font-size:.66rem;letter-spacing:.12em}
}