/* =====================================================================
   ProHand — massage studio, Zhytomyr
   Art direction: «Руки і вогонь» — a scroll from morning light into
   candle-lit fire. Dependency-free (system serif + vanilla motion).
   ===================================================================== */

/* ------------------------------ Tokens ------------------------------ */
:root{
  --cream:#F4ECE0; --latte:#E9DAC6; --parchment:#EADBC7;
  --mocha:#6E4E36; --coffee:#3B2819; --espresso:#1A120B; --ink:#0E0906;
  --ember:#C24A1E; --flame:#E8863A; --gold:#C7A15A; --gold-soft:#d8bd8b;
  --on-light:#2A1D12; --on-light-soft:#6b5843;
  --warm-white:#F2E8DA; --warm-dim:#c9b7a3; --warm-faint:#8f7c68;

  --serif: Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans: system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  --step--1: clamp(.78rem,.75rem + .15vw,.9rem);
  --step-0:  clamp(1rem,.96rem + .2vw,1.12rem);
  --step-1:  clamp(1.2rem,1.1rem + .5vw,1.5rem);
  --step-2:  clamp(1.5rem,1.3rem + 1vw,2.15rem);
  --step-3:  clamp(2rem,1.6rem + 2vw,3.4rem);
  --step-4:  clamp(2.6rem,1.9rem + 3.4vw,5rem);
  --step-5:  clamp(3rem,2rem + 5.5vw,7.6rem);

  --wrap: 1280px; --gutter: clamp(1.15rem,3.5vw,4rem);
  --radius: 2px;
  --ease: cubic-bezier(.22,1,.36,1);
  --glow-x:70%; --glow-y:12%;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--on-light);
  font-family:var(--sans); font-size:var(--step-0); line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
body.nav-open{overflow:hidden}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-family:var(--serif); font-weight:400; line-height:1.03;
  letter-spacing:-.015em; text-wrap:balance; font-feature-settings:"liga" 1}
p{margin:0; text-wrap:pretty}
::selection{background:var(--ember); color:#fff}
[id]{scroll-margin-top:88px}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:#111; color:#fff; padding:.6em 1em}
.skip-link:focus{left:1rem; top:1rem}

/* --------------------------- Utilities ----------------------------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.eyebrow{font-family:var(--sans); font-size:var(--step--1); letter-spacing:.3em;
  text-transform:uppercase; font-weight:600}
.section{position:relative; padding-block:clamp(3.4rem,7vw,7.5rem)}
.section__head{display:flex; align-items:baseline; gap:1.2rem; margin-bottom:clamp(1.8rem,4vw,3.4rem)}
.section__index{font-family:var(--serif); font-style:italic; font-size:var(--step-1); color:var(--gold); opacity:.85; line-height:1}
.section__eyebrow{color:var(--gold)}
.section__title{font-size:var(--step-4); max-width:16ch}

/* reveal — hidden only while JS active (visible otherwise) */
.js [data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal].is-in{opacity:1; transform:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}

/* grain + cursor */
.grain{position:fixed; inset:-50%; z-index:60; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}
.cursor{position:fixed; top:0; left:0; z-index:80; pointer-events:none; width:34px; height:34px;
  margin:-17px 0 0 -17px; border:1px solid var(--gold); border-radius:50%; opacity:0;
  transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s,opacity .3s}
.cursor.is-active{opacity:1}
.cursor.is-hot{width:64px; height:64px; margin:-32px 0 0 -32px; border-color:var(--ember);
  background:radial-gradient(circle,rgba(232,134,58,.22),transparent 70%)}
.cursor__dot{position:fixed; top:0; left:0; z-index:81; pointer-events:none; width:5px; height:5px;
  margin:-2.5px 0 0 -2.5px; border-radius:50%; background:var(--gold); opacity:0; transition:opacity .3s}
.cursor__dot.is-active{opacity:1}
@media (hover:none),(pointer:coarse){.cursor,.cursor__dot{display:none}}

/* buttons */
.btn{position:relative; display:inline-flex; align-items:center; gap:.7em; font-family:var(--sans);
  font-size:var(--step--1); letter-spacing:.13em; text-transform:uppercase; font-weight:600;
  padding:1.05em 1.9em; border-radius:100px; border:1px solid transparent; cursor:pointer;
  transition:transform .5s var(--ease),background .4s,color .4s,border-color .4s; will-change:transform}
.btn svg{width:1.1em; height:1.1em}
.btn--ember{background:var(--ember); color:#fff}
.btn--ember:hover{background:var(--flame)}
.btn--ghost{border-color:currentColor; color:inherit}
.btn--ghost:hover{background:var(--coffee); border-color:var(--coffee)}
.btn--ghost:hover span{color:var(--warm-white)}
.btn--light{background:var(--warm-white); color:var(--espresso)}
.btn--light:hover{background:#fff}

/* ------------------------------ Header ----------------------------- */
.site-header{position:fixed; top:0; left:0; right:0; z-index:70; display:flex; align-items:center;
  gap:clamp(1rem,2vw,1.75rem); padding:clamp(.9rem,2vw,1.5rem) var(--gutter);
  transition:background .5s,backdrop-filter .5s,padding .4s}
.site-header.is-stuck{background:color-mix(in srgb,var(--espresso) 84%,transparent); backdrop-filter:blur(10px); padding-block:.8rem}
.site-header.is-stuck .brand__word,.site-header.is-stuck .nav__link,.site-header.is-stuck .header-tel{color:var(--warm-white)}
.brand{display:flex; align-items:center; gap:.7rem; margin-right:auto}
.brand__emblem{width:42px; height:42px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 60%,transparent)}
.brand__word{font-family:var(--serif); font-size:1.5rem; letter-spacing:-.01em; color:var(--coffee)}
.brand__by{display:block; font-family:var(--sans); font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-top:2px}
.nav{display:flex; align-items:center; gap:clamp(1.1rem,1.9vw,2.2rem)}
.nav__link{position:relative; font-size:var(--step--1); letter-spacing:.06em; color:var(--coffee); padding:.3em 0}
.nav__link::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .4s var(--ease)}
.nav__link:hover::after{width:100%}
.nav__link.is-soon{opacity:.55; pointer-events:none; display:none}
.nav__link.is-soon small{font-size:.62em; letter-spacing:.1em; color:var(--gold); vertical-align:super; margin-left:.2em}
.nav__cta{display:inline-flex; padding:.72em 1.35em; letter-spacing:.1em}
.header-tel{font-weight:600; letter-spacing:.04em; color:var(--coffee)}
.nav-toggle{display:none; width:44px; height:44px; position:relative; background:none; border:0; cursor:pointer; z-index:66}
.nav-toggle span{position:absolute; left:10px; right:10px; height:2px; background:var(--coffee); transition:transform .4s var(--ease),background .3s; transform-origin:center}
.nav-toggle span:first-child{top:18px}
.nav-toggle span:last-child{top:25px}
.site-header.is-stuck .nav-toggle span{background:var(--warm-white)}

/* mobile bottom bar */
.mobilebar{position:fixed; left:0; right:0; bottom:0; z-index:64; display:none; grid-template-columns:1fr 1fr;
  gap:1px; background:color-mix(in srgb,var(--gold) 30%,transparent); border-top:1px solid color-mix(in srgb,var(--gold) 30%,transparent)}
.mobilebar__btn{display:flex; align-items:center; justify-content:center; gap:.5em; padding:1em;
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; background:var(--espresso); color:var(--warm-white)}
.mobilebar__btn--tg{background:var(--ember); color:#fff}
.mobilebar__btn svg{width:1.05em; height:1.05em}

/* ------------------------------- Hero ------------------------------ */
.hero{position:relative; min-height:100svh; display:flex; align-items:center; padding-top:8rem; padding-bottom:4rem; overflow:hidden;
  background:radial-gradient(120% 90% at var(--glow-x) var(--glow-y),rgba(232,134,58,.16),transparent 55%),linear-gradient(180deg,var(--cream),var(--latte))}
.hero__inner{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,5rem); align-items:center; width:100%}
.hero__eyebrow{display:flex; align-items:center; gap:.8em; color:var(--mocha); margin-bottom:clamp(1.2rem,3vw,2rem)}
.hero__eyebrow .dot{width:5px; height:5px; border-radius:50%; background:var(--ember)}
.hero__title{font-size:var(--step-5); letter-spacing:-.03em; color:var(--coffee)}
.hero__title em{color:var(--ember); font-style:italic}
.hero__lede{margin-top:clamp(1.3rem,3vw,2rem); max-width:34ch; font-size:var(--step-1); line-height:1.5; color:var(--on-light-soft)}
.hero__actions{margin-top:clamp(1.6rem,3.5vw,2.6rem); display:flex; flex-wrap:wrap; gap:1rem}
.hero__media{position:relative; align-self:center}
.hero__media img{width:100%; max-width:440px; margin-inline:auto; aspect-ratio:3/4; object-fit:cover; border-radius:220px 220px var(--radius) var(--radius); box-shadow:0 40px 90px -40px rgba(43,26,11,.6)}
.hero__media::before{content:""; position:absolute; inset:-8% -6% auto auto; width:60%; height:60%; border:1px solid var(--gold); border-radius:50%; opacity:.4; z-index:-1}
.hero__cue{position:absolute; left:var(--gutter); bottom:2rem; display:flex; align-items:center; gap:.7em; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--mocha)}
.hero__cue .line{width:46px; height:1px; background:var(--mocha); transform-origin:left; animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleX(.3);opacity:.4}50%{transform:scaleX(1);opacity:1}}

/* --------------------------- Philosophy ---------------------------- */
.philo{background:linear-gradient(180deg,var(--latte),var(--parchment)); color:var(--on-light)}
.philo__grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.philo__media{position:relative}
.philo__media img{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius)}
.philo__media figcaption{position:absolute; left:1rem; bottom:1rem; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--warm-white); background:rgba(20,12,7,.5); padding:.5em .8em; backdrop-filter:blur(4px)}
.philo__quote{font-family:var(--serif); font-size:var(--step-3); line-height:1.16; color:var(--coffee); letter-spacing:-.02em}
.philo__quote em{color:var(--ember); font-style:italic}
.philo__text{margin-top:1.6rem; max-width:44ch; color:var(--on-light-soft)}
.philo__sign{margin-top:2rem; display:inline-flex; align-items:center; gap:.8rem; color:var(--mocha)}
.philo__sign .rule{width:40px; height:1px; background:var(--gold)}

/* ---------------------------- Services ----------------------------- */
.services{background:linear-gradient(180deg,var(--parchment) 0%,#e3d0b6 100%); color:var(--on-light)}
.menu{display:flex; flex-direction:column; gap:clamp(2.2rem,4vw,3.4rem)}
.menu__group--hot .menu__grouptitle{color:var(--ember)}
.menu__grouptitle{display:flex; align-items:center; gap:1rem; margin-bottom:1rem; color:var(--coffee)}
.menu__grouptitle .eyebrow{color:inherit}
.menu__grouptitle .rule{flex:1; height:1px; background:color-mix(in srgb,var(--coffee) 25%,transparent)}
.menu__row{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:1rem; padding:1.15rem 0;
  border-top:1px solid color-mix(in srgb,var(--coffee) 18%,transparent); cursor:default}
.menu__row:last-child{border-bottom:1px solid color-mix(in srgb,var(--coffee) 18%,transparent)}
.menu__name{font-family:var(--serif); font-size:var(--step-2); color:var(--coffee); transition:color .4s}
.menu__sub{display:block; font-family:var(--sans); font-size:var(--step--1); letter-spacing:.02em; color:var(--on-light-soft); text-transform:none; margin-top:.35em; max-width:52ch}
.menu__meta{display:flex; gap:clamp(1rem,2.4vw,2.6rem); font-variant-numeric:tabular-nums; text-align:right}
.menu__opt{display:flex; flex-direction:column; gap:.15em; line-height:1.2}
.menu__opt .d{font-size:var(--step--1); letter-spacing:.06em; color:var(--mocha)}
.menu__opt .p{font-size:var(--step-1); font-family:var(--serif); color:var(--coffee)}
.menu__note{margin-top:2.2rem; max-width:60ch; color:var(--coffee); font-size:var(--step--1); opacity:.85}
.menu__note strong{color:var(--ember); font-weight:600}
@media (hover:hover){
  .menu__row{transition:padding-left .4s var(--ease)}
  .menu__row:hover{padding-left:.55rem}
  .menu__row:hover .menu__name{color:var(--ember)}
}

/* ------------------------------ Fire ------------------------------- */
.fire{position:relative; background:var(--espresso); color:var(--warm-white)}
.fire__track{position:relative; height:175vh}
.fire__sticky{position:sticky; top:0; height:100svh; overflow:hidden; display:grid; place-items:center}
.fire__bg{position:absolute; inset:0}
.fire__bg img{width:100%; height:100%; object-fit:cover; opacity:.5; transform:scale(1.15); will-change:transform}
.fire__bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(14,9,6,.55),rgba(14,9,6,.22) 50%,rgba(14,9,6,.55)),
             radial-gradient(90% 70% at 50% 82%,rgba(194,74,30,.5),transparent 60%),
             linear-gradient(180deg,var(--espresso) 2%,transparent 45%,transparent 55%,var(--ink) 98%)}
.fire__content{position:relative; text-align:center; padding-inline:var(--gutter); max-width:70ch}
.fire__title,.fire__text{text-shadow:0 2px 24px rgba(0,0,0,.55)}
.fire__eyebrow{color:var(--flame); display:flex; justify-content:center}
.fire__title{font-size:var(--step-5); margin:1rem 0 1.4rem; color:var(--warm-white)}
.fire__title em{color:var(--flame); font-style:italic}
.fire__text{font-size:var(--step-1); line-height:1.55; color:var(--warm-dim); max-width:46ch; margin-inline:auto}
.fire__cta{margin-top:2.2rem}
.ember{position:absolute; bottom:-10px; width:4px; height:4px; border-radius:50%; background:radial-gradient(circle,var(--flame),rgba(232,134,58,0)); pointer-events:none}

/* ----------------------------- Couples ----------------------------- */
.couples{background:linear-gradient(180deg,var(--ink),var(--coffee)); color:var(--warm-white)}
.couples__head{max-width:22ch}
.couples__title{font-size:var(--step-4); color:var(--warm-white)}
.couples__title em{color:var(--flame); font-style:italic}
.couples__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); margin-top:2rem; align-items:start}
.couples__lead{font-size:var(--step-1); line-height:1.55; color:var(--warm-dim)}
.couples__body{margin-top:1.4rem; color:var(--warm-dim); max-width:52ch}
.couples__media{position:relative}
.couples__media img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius)}
.feature-list{list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.9rem}
.feature-list li{position:relative; padding-left:1.6rem; color:var(--warm-white)}
.feature-list li::before{content:""; position:absolute; left:0; top:.7em; width:.7rem; height:1px; background:var(--flame)}
.feature-list b{color:var(--flame); font-weight:600}
.priceblock{margin-top:2.2rem; padding-top:1.5rem; border-top:1px solid color-mix(in srgb,var(--gold) 30%,transparent)}
.priceblock__row{display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1.8rem; margin-bottom:1rem}
.priceblock__name{font-family:var(--serif); font-size:var(--step-2); color:var(--warm-white)}
.priceblock__opts{display:flex; flex-wrap:wrap; gap:1.4rem; font-variant-numeric:tabular-nums; color:var(--gold-soft)}
.priceblock__opts .p{color:var(--warm-white); font-family:var(--serif)}
.priceblock__add{color:var(--warm-dim); font-size:var(--step--1); margin-top:.4rem}
.priceblock__add b{color:var(--flame)}
.atmos{margin-top:1.8rem; font-family:var(--serif); font-style:italic; font-size:var(--step-1); line-height:1.5; color:var(--gold-soft); max-width:54ch}
.couples__cta{margin-top:2rem}

/* ------------------------------ Team ------------------------------- */
.team{background:var(--espresso); color:var(--warm-white)}
.masters{display:flex; flex-direction:column; gap:clamp(3rem,6vw,6rem)}
.master{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(1.8rem,4vw,4rem); align-items:center}
.master--rev{grid-template-columns:1.2fr .8fr}
.master--rev .master__body{order:-1}
.master__photo{position:relative}
.master__photo img{width:100%; object-fit:cover; border-radius:var(--radius); filter:saturate(.96)}
.master--owner .master__photo img{aspect-ratio:16/10}
.master__photo figcaption{position:absolute; left:0; bottom:0; padding:.5em .9em; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--warm-white); background:linear-gradient(0deg,rgba(0,0,0,.55),transparent)}
.master__role{color:var(--gold); margin-bottom:.7rem}
.master__name{font-size:var(--step-3); color:var(--warm-white)}
.master__name small{display:block; font-family:var(--sans); font-size:var(--step--1); letter-spacing:.02em; text-transform:none; color:var(--warm-dim); margin-top:.5em}
.master__quote{font-family:var(--serif); font-style:italic; font-size:var(--step-1); line-height:1.45; color:var(--gold-soft); margin:1.3rem 0}
.master__text{color:var(--warm-dim); max-width:52ch}
.master__list{list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.6rem; max-width:46ch}
.master__list li{position:relative; padding-left:1.4rem; color:var(--warm-white); font-size:var(--step--1)}
.master__list li::before{content:""; position:absolute; left:0; top:.65em; width:.6rem; height:1px; background:var(--gold)}

/* ------------------------------ Gift ------------------------------- */
.gift{position:relative; background:linear-gradient(180deg,var(--coffee),var(--mocha)); color:var(--warm-white); overflow:hidden}
.gift__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.gift__media img{width:100%; max-width:440px; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius); box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.gift__title{font-size:var(--step-4); color:var(--warm-white)}
.gift__title em{color:var(--flame); font-style:italic}
.gift__text{margin:1.4rem 0 1.9rem; max-width:46ch; color:var(--warm-white); font-size:var(--step-1); line-height:1.55}

/* -------------------------- Social proof --------------------------- */
.testi{background:var(--espresso); color:var(--warm-white)}
.testi__panel{border:1px solid color-mix(in srgb,var(--gold) 24%,transparent); border-radius:var(--radius);
  background:color-mix(in srgb,var(--ink) 40%,transparent); padding:clamp(1.8rem,4vw,3.2rem); max-width:60ch}
.testi__lead{font-size:var(--step-1); line-height:1.55; color:var(--warm-dim)}
.testi__actions{margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:1rem}

/* ---------------------------- Contact ------------------------------ */
.contact{background:linear-gradient(180deg,var(--espresso),var(--ink)); color:var(--warm-white)}
.contact__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start}
.contact__title{font-size:var(--step-4); color:var(--warm-white); margin-bottom:1.5rem}
.contact__title em{color:var(--flame); font-style:italic}
.contact__lead{color:var(--warm-dim); max-width:40ch; margin-bottom:2rem}
.info{display:grid; gap:1.3rem}
.info__row{display:grid; grid-template-columns:8.5rem 1fr; gap:1rem; align-items:baseline; padding-bottom:1.1rem; border-bottom:1px solid color-mix(in srgb,var(--gold) 20%,transparent)}
.info__k{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold)}
.info__v{font-size:var(--step-1); color:var(--warm-white); font-family:var(--serif)}
.info__v a:hover{color:var(--flame)}
.info__v small{display:block; font-family:var(--sans); font-size:.72rem; letter-spacing:.06em; color:var(--warm-faint); margin-top:.3em; text-transform:none}
.contact__cta{margin-top:2rem; display:flex; flex-wrap:wrap; gap:1rem}
.map-wrap{position:relative; border:1px solid color-mix(in srgb,var(--gold) 22%,transparent); border-radius:var(--radius); overflow:hidden; min-height:360px}
.map{width:100%; height:100%; min-height:360px; border:0; filter:grayscale(.3) sepia(.25) brightness(.85)}

/* ----------------------------- Footer ------------------------------ */
.site-footer{background:var(--ink); color:var(--warm-dim); padding-block:clamp(2.6rem,6vw,5rem)}
.footer__top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; margin-bottom:2.6rem}
.footer__brand .brand__word{color:var(--warm-white)}
.footer__brand .brand{margin-right:0}
.footer__tag{margin-top:1rem; max-width:32ch; color:var(--warm-faint)}
.footer__col h4{font-family:var(--sans); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem}
.footer__col a,.footer__col p{display:block; color:var(--warm-dim); padding:.25em 0}
.footer__col a:hover{color:var(--flame)}
.footer__bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-top:1.5rem; border-top:1px solid color-mix(in srgb,var(--gold) 16%,transparent); font-size:var(--step--1); color:var(--warm-faint)}

@media (max-width:1120px){ .header-tel{display:none} }

/* ========================= Tablet / nav ============================ */
@media (max-width:1000px){
  .header-tel{display:none}
  .nav-toggle{display:block}
  .nav__link.is-soon{display:block}
  .nav{position:fixed; inset:0; z-index:65; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:.2rem; padding:5.5rem var(--gutter) 6rem; overflow-y:auto;
    background:linear-gradient(160deg,var(--espresso),var(--ink)); transform:translateX(100%);
    transition:transform .55s var(--ease); visibility:hidden}
  .site-header.is-nav-open .nav{transform:none; visibility:visible}
  .site-header.is-nav-open{background:var(--espresso)}
  .site-header.is-nav-open .brand__word,.site-header.is-nav-open .nav-toggle span{color:var(--warm-white); background:var(--warm-white)}
  .site-header.is-nav-open .brand__word{background:none; color:var(--warm-white)}
  .nav__link{font-family:var(--serif); font-size:clamp(1.9rem,8vw,2.6rem); color:var(--warm-white); padding:.28em 0}
  .nav__link::after{display:none}
  .nav__cta{display:inline-flex; margin-top:1.6rem; font-family:var(--sans)}
  .site-header.is-nav-open .nav-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .site-header.is-nav-open .nav-toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .mobilebar{display:grid}
  body{padding-bottom:56px}
}

/* ======================= Phone — compact =========================== */
@media (max-width:760px){
  [id]{scroll-margin-top:68px}
  .section{padding-block:2.7rem}
  .section__head{margin-bottom:1.5rem; gap:.7rem}
  .section__index{font-size:1rem}
  .section__title{font-size:clamp(1.9rem,7.5vw,2.5rem); max-width:none}

  .hero{min-height:auto; padding-top:5.8rem; padding-bottom:2.6rem}
  .hero__inner{grid-template-columns:1fr; gap:1.6rem}
  .hero__copy{text-align:left}
  .hero__title{font-size:clamp(2.5rem,11.5vw,3.3rem)}
  .hero__lede{font-size:1.05rem; margin-top:1rem; max-width:none}
  .hero__actions{margin-top:1.4rem; gap:.7rem}
  .hero__media{order:-1; max-width:240px}
  .hero__media img{aspect-ratio:1/1; border-radius:130px 130px var(--radius) var(--radius)}
  .hero__media::before{display:none}
  .hero__cue{display:none}

  .philo__grid{grid-template-columns:1fr; gap:1.5rem}
  .philo__media{max-width:300px; margin-inline:auto}
  .philo__media img{aspect-ratio:4/5}
  .philo__quote{font-size:1.6rem}
  .philo__text{margin-top:1rem}

  .menu{gap:1.9rem}
  .menu__row{padding:.9rem 0; gap:.4rem}
  .menu__name{font-size:1.28rem}
  .menu__meta{gap:1.1rem}
  .menu__opt .p{font-size:1.05rem}
  .menu__note{margin-top:1.6rem}

  .fire__track{height:auto}
  .fire__sticky{position:relative; height:auto; min-height:auto; padding-block:4.2rem}
  .fire__bg img{transform:none; opacity:.42}
  .fire__title{font-size:clamp(2.6rem,13vw,3.4rem)}
  .fire__text{font-size:1.05rem}

  .couples__grid{grid-template-columns:1fr; gap:1.5rem}
  .couples__title{font-size:clamp(1.85rem,7.5vw,2.5rem)}
  .couples__lead{font-size:1.08rem}
  .couples__body{margin-top:1rem}
  .feature-list{margin-top:1.4rem}
  .atmos{font-size:1.08rem; margin-top:1.4rem}
  .priceblock{margin-top:1.6rem}
  .priceblock__name{font-size:1.35rem}
  .couples__media{max-width:300px; margin-inline:auto; order:-1}
  .couples__media img{aspect-ratio:4/5}

  .masters{gap:2.3rem}
  .master,.master--rev{grid-template-columns:1fr; gap:1rem}
  .master--rev .master__body{order:0}
  .master__photo{max-width:290px; margin-inline:auto}
  .master--owner .master__photo img{aspect-ratio:16/11}
  .master__name{font-size:1.7rem}
  .master__quote{font-size:1.08rem; margin:.8rem 0}
  .master__text{font-size:.98rem}
  .master__list{margin-top:1rem}

  .gift__grid{grid-template-columns:1fr; gap:1.5rem}
  .gift__media{max-width:250px; margin-inline:auto}
  .gift__media img{aspect-ratio:4/5}
  .gift__title{font-size:clamp(1.9rem,7.5vw,2.5rem)}
  .gift__text{font-size:1.05rem; margin:1rem 0 1.4rem}

  .testi__lead{font-size:1.08rem}
  .testi__panel{padding:1.6rem 1.4rem}

  .contact__grid{grid-template-columns:1fr; gap:1.8rem}
  .contact__title{font-size:clamp(1.9rem,7.5vw,2.5rem)}
  .info__row{grid-template-columns:6.2rem 1fr; gap:.6rem; padding-bottom:.9rem}
  .info__v{font-size:1.05rem}
  .map-wrap,.map{min-height:260px}

  .footer__top{grid-template-columns:1fr 1fr; gap:1.6rem; margin-bottom:1.8rem}
  .footer__brand{grid-column:1/-1}
  .footer__bottom{flex-direction:column; gap:.4rem}

  .btn{padding:.95em 1.5em}
  .hero__actions .btn,.testi__actions .btn,.contact__cta .btn,.couples__cta .btn{flex:1 1 auto; justify-content:center; min-width:0}
}

@media (max-width:380px){
  .footer__top{grid-template-columns:1fr}
}

/* --------------------------- Reduced motion ------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-reveal]{opacity:1 !important; transform:none !important; transition:none !important}
  .fire__track{height:auto}
  .fire__sticky{position:relative; height:auto; min-height:86svh; padding-block:5rem}
  .fire__bg img{transform:none}
  .hero__cue .line{animation:none}
  .nav{transition:none}
  .cursor,.cursor__dot{display:none}
}