@charset "UTF-8";

/* =========================================================
   Hair Salon AMENU — stylesheet
   ========================================================= */

:root{
  /* color */
  --navy:  #0B3C49;
  --teal:  #14707E;
  --sea:   #2A9D8F;
  --sand:  #E9DCC3;
  --cream: #FBF7F0;
  --paper: #FFFFFF;
  --coral: #E76F51;
  --sun:   #F4A261;
  --ink:   #2B2723;
  --ink-2: #5B534B;
  --line:  #E4DACA;

  /* type */
  --f-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --f-en: "Outfit", var(--f-ja);

  /* layout */
  --w:  1120px;
  --hd: 76px;
  --r:  16px;

  --shadow-s: 0 2px 10px rgba(11,60,73,.06);
  --shadow-m: 0 10px 30px rgba(11,60,73,.09);
  --shadow-l: 0 24px 60px rgba(11,60,73,.14);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--hd) + 12px); }

body{
  margin:0;
  font-family:var(--f-ja);
  font-weight:400;
  color:var(--ink);
  background:var(--cream);
  line-height:1.9;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,iframe{ max-width:100%; }
a{ color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ margin:0; line-height:1.5; font-weight:700; }
p{ margin:0; }
table{ border-collapse:collapse; width:100%; }

.container{ width:min(100% - 40px, var(--w)); margin-inline:auto; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--hd);
  background:rgba(251,247,240,0);
  transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.header.is-solid{
  background:rgba(251,247,240,.92);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-s);
}
.header__inner{
  width:min(100% - 40px, 1240px); margin-inline:auto; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.logo{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--cream); transition:color .35s ease; }
.header.is-solid .logo{ color:var(--navy); }
.logo__mark{ width:38px; height:38px; flex:0 0 auto; display:block; }
.logo__mark svg{ width:100%; height:100%; display:block; }
.logo__text b{ display:block; font-family:var(--f-en); font-size:1.32rem; font-weight:700; letter-spacing:.18em; line-height:1.1; }
.logo__text small{ display:block; font-size:.66rem; letter-spacing:.14em; opacity:.8; line-height:1.6; }

.nav{ display:flex; align-items:center; gap:28px; }
.nav__list{ display:flex; gap:24px; }
.nav__list a{
  position:relative; text-decoration:none; font-size:.87rem; font-weight:500;
  color:var(--cream); transition:color .35s ease; padding-block:6px;
}
.header.is-solid .nav__list a{ color:var(--ink); }
.nav__list a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--sea); transform:scaleX(0); transform-origin:right; transition:transform .3s ease;
}
.nav__list a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__tel{
  text-decoration:none; text-align:right; line-height:1.3; color:var(--cream); transition:color .35s ease;
}
.header.is-solid .nav__tel{ color:var(--navy); }
.nav__tel span{ display:block; font-size:.62rem; letter-spacing:.12em; opacity:.75; }
.nav__tel b{ font-family:var(--f-en); font-size:1.06rem; letter-spacing:.04em; }

.burger{
  display:none; width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer;
  position:relative; z-index:110;
}
.burger span{
  display:block; width:24px; height:2px; margin:5px auto; border-radius:2px;
  background:var(--cream); transition:transform .3s ease, opacity .25s ease, background .35s ease;
}
.header.is-solid .burger span{ background:var(--navy); }
.burger[aria-expanded="true"] span{ background:var(--navy); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:999px;
  font-family:var(--f-en); font-size:1.02rem; font-weight:600; letter-spacing:.05em;
  text-decoration:none; white-space:nowrap; cursor:pointer; border:2px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn svg{ width:20px; height:20px; flex:0 0 auto; }
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--coral); color:#fff; box-shadow:0 8px 22px rgba(231,111,81,.34); }
.btn--primary:hover{ background:#d9603f; box-shadow:0 12px 28px rgba(231,111,81,.42); }
.btn--ghost{ border-color:rgba(251,247,240,.6); color:var(--cream); }
.btn--ghost:hover{ background:rgba(251,247,240,.14); border-color:var(--cream); }
.btn--sand{ background:var(--sand); color:var(--navy); box-shadow:0 8px 22px rgba(0,0,0,.16); }
.btn--sand:hover{ background:#f2e8d6; }
.btn--full{ width:100%; }
.btn--lg{ padding:18px 42px; font-size:1.24rem; }

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{
  position:relative; min-height:min(100svh, 860px);
  display:flex; align-items:center;
  padding:calc(var(--hd) + 60px) 0 140px;
  overflow:hidden; isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 78% 8%, #F7B267 0%, rgba(247,178,103,0) 46%),
    linear-gradient(178deg, #0A3241 0%, #0F4C5C 34%, #14707E 62%, #2A9D8F 100%);
}
.hero__sun{
  position:absolute; top:12%; right:14%;
  width:min(30vw, 260px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,224,178,.95) 0%, rgba(244,162,97,.55) 48%, rgba(244,162,97,0) 72%);
  filter:blur(2px);
}
.hero__palm{ position:absolute; bottom:0; height:min(78%, 560px); }
.hero__palm--l{ left:-3%; transform:scaleX(-1); }
.hero__palm--r{ right:-6%; height:min(58%, 420px); opacity:.85; }
.hero__waves{ position:absolute; left:0; right:0; bottom:-1px; }
.hero__waves svg{ display:block; width:100%; height:clamp(80px, 12vw, 150px); }

.hero__content{ width:min(100% - 40px, var(--w)); margin-inline:auto; color:var(--cream); position:relative; }
.hero__eyebrow{
  font-family:var(--f-en); font-size:.78rem; font-weight:400;
  letter-spacing:.34em; opacity:.86; margin-bottom:24px;
}
.hero__title{
  font-size:clamp(2rem, 5.6vw, 3.9rem); font-weight:900; line-height:1.42;
  letter-spacing:.02em; text-shadow:0 3px 24px rgba(0,0,0,.22);
}
.hero__title span{ display:block; }
.hero__lead{
  margin-top:26px; font-size:clamp(.95rem, 1.6vw, 1.07rem);
  line-height:2.1; max-width:40em; text-shadow:0 2px 14px rgba(0,0,0,.28);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

.hero__badges{
  display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:44px;
}
.hero__badges li{
  padding:8px 18px; border-radius:999px; font-size:.83rem;
  background:rgba(251,247,240,.13); border:1px solid rgba(251,247,240,.3);
  backdrop-filter:blur(4px);
}
.hero__badges b{ font-weight:700; }

/* ---------------------------------------------------------
   Section heads
   --------------------------------------------------------- */
.section{ padding:clamp(72px, 10vw, 128px) 0; }

.sec-head{ margin-bottom:clamp(40px, 5vw, 64px); }
.sec-head--center{ text-align:center; }
.sec-head__en{
  display:block; font-family:var(--f-en); font-size:.8rem; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase; color:var(--sea); margin-bottom:14px;
}
.sec-head__ja{
  font-size:clamp(1.55rem, 3.6vw, 2.35rem); font-weight:700;
  color:var(--navy); letter-spacing:.03em;
}
.sec-head__note{ margin-top:16px; font-size:.94rem; color:var(--ink-2); }
.sec-head--light .sec-head__en{ color:var(--sand); }
.sec-head--light .sec-head__ja{ color:var(--cream); }

/* ---------------------------------------------------------
   Concept
   --------------------------------------------------------- */
.concept{ background:var(--cream); }
.concept__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px, 5vw, 72px); align-items:start; }
.concept__lead p + p{ margin-top:1.5em; }
.concept__lead strong{ color:var(--teal); font-weight:700; }

.concept__points{ display:grid; gap:18px; }
.concept__points li{
  position:relative; background:var(--paper); border-radius:var(--r);
  padding:28px 30px 26px; box-shadow:var(--shadow-s); border:1px solid var(--line);
  transition:transform .3s ease, box-shadow .3s ease;
}
.concept__points li:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }
.concept__no{
  font-family:var(--f-en); font-size:.78rem; font-weight:700;
  letter-spacing:.2em; color:var(--sun);
}
.concept__points h3{ font-size:1.09rem; color:var(--navy); margin:6px 0 8px; }
.concept__points p{ font-size:.92rem; color:var(--ink-2); line-height:1.85; }

/* ---------------------------------------------------------
   Menu
   --------------------------------------------------------- */
.menu{ background:linear-gradient(180deg, #F4EEE2 0%, #FBF7F0 100%); }

.menu__hero{
  position:relative; background:var(--navy); color:var(--cream);
  border-radius:24px; padding:clamp(32px, 4vw, 46px);
  box-shadow:var(--shadow-l); overflow:hidden; margin-bottom:44px;
}
.menu__hero::after{
  content:""; position:absolute; right:-70px; bottom:-90px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(42,157,143,.5), rgba(42,157,143,0) 68%);
}
.menu__hero-tag{
  display:inline-block; background:var(--sun); color:#4a2c12;
  font-size:.76rem; font-weight:700; letter-spacing:.14em;
  padding:6px 16px; border-radius:999px; margin-bottom:20px;
}
.menu__hero-body{
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px;
  padding-bottom:26px; border-bottom:1px solid rgba(233,220,195,.28);
}
.menu__hero-title h3{ font-size:clamp(1.5rem, 3.2vw, 2.05rem); letter-spacing:.04em; }
.menu__hero-title p{ margin-top:8px; font-size:.95rem; opacity:.82; }
.menu__hero-price{ text-align:right; }
.price{ display:block; font-family:var(--f-en); font-size:clamp(2.2rem, 5vw, 3rem); font-weight:700; line-height:1; letter-spacing:.01em; }
.price i{ font-style:normal; font-size:.52em; margin-right:.12em; opacity:.8; }
.price-sub{ display:block; margin-top:10px; font-size:.86rem; opacity:.86; }
.price-sub b{ font-family:var(--f-en); font-size:1.05rem; color:var(--sand); }

.menu__hero-incl{ position:relative; z-index:1; padding-top:26px; }
.menu__hero-incl-label{ font-size:.8rem; letter-spacing:.14em; color:var(--sand); margin-bottom:14px; }
.menu__hero-incl ul{ display:flex; flex-wrap:wrap; gap:10px; }
.menu__hero-incl li{
  padding:7px 16px; border-radius:999px; font-size:.85rem;
  background:rgba(233,220,195,.14); border:1px solid rgba(233,220,195,.3);
}
.menu__hero-incl-foot{ margin-top:16px; font-size:.86rem; opacity:.78; }

.menu__cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; }
.menu__col{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(26px, 3vw, 36px); box-shadow:var(--shadow-s);
}
.menu__col-title{
  font-size:1.05rem; color:var(--teal); letter-spacing:.08em;
  padding-bottom:14px; margin-bottom:8px; border-bottom:2px solid var(--sand);
}
.menu__list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:18px 0; border-bottom:1px dashed var(--line);
}
.menu__list li:last-child{ border-bottom:0; }
.menu__list b{ display:block; font-size:1rem; color:var(--navy); }
.menu__list span{ display:block; font-size:.83rem; color:var(--ink-2); margin-top:3px; }
.menu__list em{
  font-family:var(--f-en); font-style:normal; font-size:1.25rem; font-weight:600;
  color:var(--coral); white-space:nowrap;
}
.menu__callout{
  margin-top:22px; padding:20px 22px; border-radius:12px;
  background:#F4F8F7; border-left:4px solid var(--sea);
}
.menu__callout b{ display:block; font-size:.92rem; color:var(--teal); margin-bottom:6px; }
.menu__callout p{ font-size:.87rem; color:var(--ink-2); line-height:1.85; }
.menu__foot{ margin-top:30px; font-size:.84rem; color:var(--ink-2); text-align:center; }

/* ---------------------------------------------------------
   Style
   --------------------------------------------------------- */
.style{ background:var(--cream); }
.style__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.style__card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-s);
  transition:transform .3s ease, box-shadow .3s ease;
}
.style__card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-m); }
.style__photo{
  position:relative; aspect-ratio:4/3;
  display:grid; place-items:center;
  background:linear-gradient(150deg, #0F4C5C, #2A9D8F);
}
.style__card:nth-child(2) .style__photo{ background:linear-gradient(150deg, #14707E, #F4A261); }
.style__card:nth-child(3) .style__photo{ background:linear-gradient(150deg, #2A9D8F, #E9DCC3); }
.style__card:nth-child(4) .style__photo{ background:linear-gradient(150deg, #E76F51, #F4A261); }
.style__photo span{
  font-family:var(--f-en); font-size:1.02rem; font-weight:600;
  letter-spacing:.16em; color:rgba(255,255,255,.95);
}
.style__photo::after{
  content:attr(data-note); position:absolute; left:10px; bottom:10px;
  font-size:.62rem; letter-spacing:.1em; color:rgba(255,255,255,.62);
}
.style__card h3{ font-size:1.05rem; color:var(--navy); padding:22px 22px 0; }
.style__card p{ font-size:.87rem; color:var(--ink-2); line-height:1.85; padding:10px 22px 26px; }

/* ---------------------------------------------------------
   Owner
   --------------------------------------------------------- */
.owner{ background:linear-gradient(180deg, #FBF7F0 0%, #F4EEE2 100%); }
.owner__wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px, 5vw, 70px); align-items:center; }
.owner__photo{
  position:relative; aspect-ratio:4/5; border-radius:20px; overflow:hidden;
  display:grid; place-items:center; color:var(--navy);
  background:linear-gradient(160deg, var(--sand), #cfe3df);
  box-shadow:var(--shadow-m);
}
.owner__photo svg{ width:56%; }
.owner__photo::after{
  content:attr(data-note); position:absolute; bottom:14px; left:0; right:0; text-align:center;
  font-size:.7rem; letter-spacing:.1em; color:rgba(11,60,73,.5);
}
.owner__text .sec-head__ja{ margin-bottom:22px; }
.owner__text p + p{ margin-top:1.4em; }
.owner__tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.owner__tags li{
  padding:6px 15px; border-radius:999px; font-size:.8rem;
  color:var(--teal); background:rgba(42,157,143,.1); border:1px solid rgba(42,157,143,.24);
}

/* ---------------------------------------------------------
   Voice
   --------------------------------------------------------- */
.voice{ background:var(--navy); position:relative; overflow:hidden; }
.voice::before{
  content:""; position:absolute; top:-120px; left:-80px; width:340px; height:340px;
  border-radius:50%; background:radial-gradient(circle, rgba(42,157,143,.35), transparent 68%);
}
.voice .container{ position:relative; }
.voice__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.voice__card{
  background:rgba(251,247,240,.07); border:1px solid rgba(233,220,195,.22);
  border-radius:var(--r); padding:28px 26px; color:var(--cream);
  backdrop-filter:blur(6px);
}
.voice__stars{ color:var(--sun); letter-spacing:.16em; font-size:1rem; margin-bottom:14px; }
.voice__card p{ font-size:.9rem; line-height:1.95; opacity:.92; }
.voice__note{ margin-top:30px; text-align:center; font-size:.78rem; color:rgba(251,247,240,.6); }

/* ---------------------------------------------------------
   Info
   --------------------------------------------------------- */
.info{ background:var(--cream); }
.info__wrap{ display:grid; grid-template-columns:1.5fr 1fr; gap:36px; align-items:start; }

.info__table{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-s);
}
.info__table th,
.info__table td{ padding:20px 24px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.info__table tr:last-child th,
.info__table tr:last-child td{ border-bottom:0; }
.info__table th{
  width:150px; font-size:.86rem; font-weight:700; color:var(--teal);
  background:#F7F3EA; letter-spacing:.08em; white-space:nowrap;
}
.info__table td{ font-size:.95rem; }
.info__table small{ display:block; margin-top:8px; font-size:.79rem; color:var(--ink-2); }
.hours{ display:block; }
.hours b{ display:inline-block; min-width:4.5em; color:var(--navy); }
.tel-link{ color:var(--coral); font-weight:700; text-decoration:none; border-bottom:1px solid currentColor; }
.tel-link:hover{ opacity:.75; }

.info__side{ display:grid; gap:20px; }
.info__card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:28px 26px; box-shadow:var(--shadow-s);
}
.info__card h3{ font-size:1.02rem; color:var(--navy); margin-bottom:10px; }
.info__card p{ font-size:.88rem; color:var(--ink-2); line-height:1.9; margin-bottom:18px; }
.sns{ display:grid; gap:10px; }
.sns a{
  display:flex; align-items:center; gap:11px; text-decoration:none;
  padding:12px 18px; border-radius:10px; font-size:.9rem; font-weight:500;
  color:var(--navy); background:#F7F3EA; transition:background .25s ease, transform .25s ease;
}
.sns a:hover{ background:var(--sand); transform:translateX(3px); }
.sns svg{ width:20px; height:20px; flex:0 0 auto; }

/* ---------------------------------------------------------
   Access
   --------------------------------------------------------- */
.access{ background:linear-gradient(180deg, #F4EEE2 0%, #FBF7F0 100%); }
.access__map{
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow-m);
  border:1px solid var(--line); background:var(--paper);
}
.access__map iframe{ display:block; width:100%; height:clamp(280px, 42vw, 440px); border:0; }

.access__ways{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:32px; }
.access__ways li{
  display:flex; gap:16px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:26px 24px; box-shadow:var(--shadow-s);
}
.access__icon{
  flex:0 0 auto; width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center; color:var(--teal); background:rgba(42,157,143,.11);
}
.access__icon svg{ width:24px; height:24px; }
.access__ways h3{ font-size:.99rem; color:var(--navy); margin-bottom:7px; }
.access__ways p{ font-size:.87rem; color:var(--ink-2); line-height:1.85; }

/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */
.cta{
  position:relative; padding:clamp(80px, 10vw, 120px) 0; text-align:center;
  color:var(--cream); overflow:hidden;
  background:linear-gradient(140deg, #0A3241 0%, #14707E 55%, #2A9D8F 100%);
}
.cta::after{
  content:""; position:absolute; left:50%; top:-140px; transform:translateX(-50%);
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(244,162,97,.3), transparent 66%);
}
.cta .container{ position:relative; z-index:1; }
.cta__en{ font-family:var(--f-en); font-size:.78rem; letter-spacing:.34em; opacity:.82; margin-bottom:18px; }
.cta__title{ font-size:clamp(1.5rem, 3.6vw, 2.3rem); line-height:1.6; }
.cta__lead{ margin-top:18px; font-size:.95rem; opacity:.9; }
.cta .btn{ margin-top:34px; }
.cta__hours{ margin-top:22px; font-size:.84rem; opacity:.82; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.footer{ background:#08272F; color:rgba(251,247,240,.86); padding:56px 0 26px; }
.footer__inner{
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:32px;
  padding-bottom:32px; border-bottom:1px solid rgba(251,247,240,.14);
}
.footer__brand{ display:flex; gap:14px; color:var(--sand); }
.footer__brand b{ font-size:1.02rem; color:var(--cream); letter-spacing:.06em; }
.footer__brand p{ margin-top:8px; font-size:.83rem; line-height:1.9; color:rgba(251,247,240,.72); }
.footer__nav{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.footer__nav a{ font-size:.85rem; text-decoration:none; color:rgba(251,247,240,.78); transition:color .25s ease; }
.footer__nav a:hover{ color:var(--sun); }
.footer__copy{
  margin-top:24px; text-align:center;
  font-family:var(--f-en); font-size:.74rem; letter-spacing:.1em; color:rgba(251,247,240,.5);
}

/* ---------------------------------------------------------
   Floating call button (mobile)
   --------------------------------------------------------- */
.fab{
  display:none; position:fixed; right:16px; bottom:16px; z-index:90;
  align-items:center; gap:8px; padding:14px 22px; border-radius:999px;
  background:var(--coral); color:#fff; text-decoration:none;
  font-size:.95rem; font-weight:700; box-shadow:0 10px 26px rgba(231,111,81,.42);
}
.fab svg{ width:19px; height:19px; }

/* ---------------------------------------------------------
   Reveal on scroll
   --------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:1000px){
  .concept__grid,
  .owner__wrap,
  .info__wrap{ grid-template-columns:1fr; }
  .owner__photo{ max-width:340px; aspect-ratio:1; }
  .style__grid,
  .voice__grid{ grid-template-columns:repeat(2,1fr); }
  .access__ways{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  :root{ --hd:64px; }

  .burger{ display:block; }

  .nav{
    position:fixed; inset:0; z-index:105;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:28px; padding:0 40px;
    background:var(--cream);
    clip-path:circle(0% at calc(100% - 46px) 32px);
    transition:clip-path .55s cubic-bezier(.65,0,.35,1);
    pointer-events:none;
  }
  .nav.is-open{ clip-path:circle(150% at calc(100% - 46px) 32px); pointer-events:auto; }
  .nav__list{ flex-direction:column; gap:4px; width:100%; }
  .nav__list a,
  .header.is-solid .nav__list a{
    display:block; color:var(--navy); font-size:1.14rem; font-weight:500;
    padding:14px 0; border-bottom:1px solid var(--line);
  }
  .nav__list a::after{ display:none; }
  .nav__tel,
  .header.is-solid .nav__tel{ text-align:left; color:var(--navy); }
  .nav__tel b{ font-size:1.5rem; }

  .hero{ padding-bottom:120px; }
  .hero__palm--r{ opacity:.5; }
  .menu__cols{ grid-template-columns:1fr; }
  .menu__hero-price{ text-align:left; }
  .footer__inner{ flex-direction:column; }

  .fab{ display:inline-flex; }
  .footer{ padding-bottom:90px; }
}

@media (max-width:560px){
  body{ line-height:1.85; }
  .hero__title{ font-size:1.72rem; }
  .hero__actions .btn{ width:100%; }
  .hero__badges li{ font-size:.78rem; padding:7px 14px; }
  .style__grid,
  .voice__grid{ grid-template-columns:1fr; }
  .info__table th,
  .info__table td{ display:block; width:100%; }
  .info__table th{ border-bottom:0; padding-bottom:8px; }
  .info__table td{ padding-top:0; }
  .menu__list li{ flex-direction:column; gap:6px; }
  .menu__list em{ align-self:flex-end; }
}