/* =====================================================================
   BROWS & BEAUTY by Rochelle — "Atelier"
   Rose gold used as precision: hairlines, small caps, numerals.
   Never as a big glossy slab with text sitting on top of the glare.
   ===================================================================== */

:root{
  /* --- rose gold, tuned for contrast rather than shine --- */
  --rose-50 : #FAF0EA;
  --rose-100: #F2DDD2;
  --rose-200: #E5C3B4;
  --rose-300: #D3A48F;
  --rose-400: #BE8168;   /* accent line / small text on ivory */
  --rose-500: #A66A52;   /* body-safe accent */
  --rose-600: #8B5540;   /* button fill — 5.6:1 on white text */
  --rose-700: #6E4130;

  /* --- paper & ink --- */
  --ivory   : #FCF9F6;
  --shell   : #F5EDE7;
  --sand    : #EADFD6;
  --line    : #E2D3C8;
  --ink     : #241C18;
  --ink-2   : #4A3B34;
  --ink-3   : #7C6A61;

  --wa      : #25D366;
  --wa-dark : #12855C;

  /* one hairline, used everywhere a rule is needed */
  --hairline: linear-gradient(90deg, transparent, var(--rose-300) 18%, var(--rose-400) 50%, var(--rose-300) 82%, transparent);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans : "Jost", "Helvetica Neue", Arial, sans-serif;

  --shadow-s: 0 12px 30px -18px rgba(70,44,33,.34);
  --shadow-m: 0 26px 60px -32px rgba(70,44,33,.46);
  --shadow-l: 0 44px 90px -44px rgba(70,44,33,.5);

  --header-h: 76px;
  --ease: cubic-bezier(.22,.68,.28,1);
}

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

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

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px,.5vw + 13.8px,16.5px);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:400; line-height:1.06; margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }

.shell{ width:min(1240px,92vw); margin-inline:auto; }
.shell--narrow{ width:min(880px,92vw); margin-inline:auto; }

/* =====================================================================
   TYPE HELPERS
   ===================================================================== */
.eyebrow{
  margin:0 0 20px;
  font-size:10px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--rose-500); font-weight:400;
}

.display{ font-size:clamp(38px,5.2vw,72px); letter-spacing:-.008em; }
.display em{ font-style:italic; color:var(--rose-500); }

/* rose-gold foil for a word or two — kept mid-tone so it stays readable */
.foil{
  background:linear-gradient(96deg,#8B5540 0%,#A66A52 26%,#C68B71 50%,#A66A52 74%,#8B5540 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.rule{ height:1px; background:var(--hairline); border:0; margin:0; }

/* =====================================================================
   BUTTONS — solid fills, real contrast, no gloss over the label
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 34px; border-radius:2px; border:1px solid transparent; cursor:pointer;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:400;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), transform .35s var(--ease);
}
.btn--solid{ background:var(--rose-600); color:#fff; }
.btn--solid:hover{ background:var(--rose-700); transform:translateY(-2px); }

.btn--outline{ background:transparent; color:var(--rose-600); border-color:var(--rose-300); }
.btn--outline:hover{ background:var(--rose-600); color:#fff; border-color:var(--rose-600); transform:translateY(-2px); }

.btn--ink{ background:var(--ink); color:#fff; }
.btn--ink:hover{ background:#000; transform:translateY(-2px); }

.btn--wide{ width:100%; }

/* =====================================================================
   HEADER — one hairline, nothing thick
   ===================================================================== */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:10000;
  background:var(--rose-500);
  transition:width .12s linear;
}

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:9000;
  background:rgba(252,249,246,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:transform .5s var(--ease), border-color .4s, background .4s;
}
.site-header.is-stuck{ border-bottom-color:var(--line); background:rgba(252,249,246,.94); }
.site-header.is-hidden{ transform:translateY(-100%); }

.header__inner{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.brand{ display:block; }
.brand__logo{
  height:clamp(26px,2.7vw,34px); width:auto;
  transition:opacity .35s var(--ease);
}
.brand:hover .brand__logo{ opacity:.72; }

.nav{ display:flex; align-items:center; gap:clamp(16px,2.1vw,34px); }
.nav__link{
  position:relative; font-size:11px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--ink-2); padding:4px 0; white-space:nowrap; transition:color .3s;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:0;
  background:var(--rose-500); transition:width .4s var(--ease);
}
.nav__link:hover{ color:var(--rose-600); }
.nav__link:hover::after,.nav__link.is-current::after{ width:100%; }

.nav__cta{
  padding:11px 24px; background:var(--rose-600); color:#fff; border-radius:2px;
  font-size:11px; letter-spacing:.19em; text-transform:uppercase;
  transition:background .35s var(--ease);
}
.nav__cta:hover{ background:var(--rose-700); color:#fff; }
.nav__cta::after{ display:none; }

.burger{
  display:none; width:40px; height:34px; border:0; background:none; cursor:pointer;
  padding:0; flex-direction:column; justify-content:center; gap:6px;
}
.burger span{
  display:block; height:1px; width:24px; margin-inline:auto;
  background:var(--ink); transition:transform .4s var(--ease), opacity .3s;
}
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =====================================================================
   PRELOADER
   ===================================================================== */
.preloader{
  position:fixed; inset:0; z-index:10001; display:grid; place-items:center;
  background:var(--ivory);
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__logo{ width:min(230px,52vw); opacity:0; animation:plIn 1.1s var(--ease) forwards; }
@keyframes plIn{ from{opacity:0;transform:translateY(10px) scale(.97)} to{opacity:1;transform:none} }
.preloader__rule{
  display:block; width:0; height:1px; margin:22px auto 0; background:var(--hairline);
  animation:plRule 1s var(--ease) .5s forwards;
}
@keyframes plRule{ to{ width:min(230px,52vw); } }

/* =====================================================================
   REVEAL
   ===================================================================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.d1{ transition-delay:.1s } .d2{ transition-delay:.2s }
.d3{ transition-delay:.3s } .d4{ transition-delay:.4s }

/* =====================================================================
   SECTION FURNITURE
   ===================================================================== */
.section{ padding:clamp(72px,8.5vw,132px) 0; }
.section--tint{ background:var(--shell); }

.section__head{ max-width:640px; margin-bottom:clamp(40px,5vw,68px); }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__title{ font-size:clamp(34px,4.6vw,62px); margin-bottom:18px; }
.section__lede{ color:var(--ink-3); margin:0; }

/* =====================================================================
   HERO — photography led, split, asymmetric
   ===================================================================== */
.hero{
  position:relative; padding-top:calc(var(--header-h) + clamp(40px,6vw,84px));
  padding-bottom:clamp(50px,6vw,90px);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:60vw; height:60vw; max-width:760px; max-height:760px;
  right:-14vw; top:-12vw; border-radius:50%;
  background:radial-gradient(circle,rgba(229,195,180,.42),transparent 66%);
}

.hero__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(36px,5vw,74px); align-items:center;
}

.hero__title{
  font-size:clamp(44px,6.6vw,96px); line-height:1.02; margin:0 0 26px;
  letter-spacing:-.012em;
}
.hero__title em{ font-style:italic; color:var(--rose-500); }
.hero__lede{ color:var(--ink-3); max-width:44ch; margin:0 0 36px; font-size:1.05em; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:44px; }

.hero__stats{ display:flex; gap:clamp(22px,3.4vw,48px); flex-wrap:wrap; }
.hero__stats li{ display:flex; flex-direction:column; }
.hero__stats b{
  font-family:var(--serif); font-size:clamp(26px,3vw,38px); font-weight:400;
  line-height:1; color:var(--rose-600);
}
.hero__stats span{
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-3); margin-top:8px;
}

/* hero photo — offset frame, no card, no glare */
.hero__figure{ position:relative; }
/* height:auto is required — the img's width/height attributes act as
   presentational hints and would otherwise beat aspect-ratio */
.hero__figure img{
  width:100%; height:auto; aspect-ratio:13/10;
  object-fit:cover; object-position:center 30%;
  border-radius:2px; box-shadow:var(--shadow-l);
}
.hero__caption{
  position:absolute; left:-22px; bottom:-22px;
  background:var(--ivory); padding:14px 20px; border-radius:2px;
  box-shadow:var(--shadow-s); max-width:210px;
}
.hero__caption b{
  display:block; font-family:var(--serif); font-size:20px; font-weight:400; color:var(--rose-600);
}
.hero__caption span{
  font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3);
}

/* =====================================================================
   TICKER — thin, quiet, no flashing
   ===================================================================== */
.ticker{
  border-block:1px solid var(--line);
  padding:15px 0; overflow:hidden; background:var(--ivory);
}
.ticker__track{ display:flex; gap:34px; align-items:center; width:max-content; animation:marquee 46s linear infinite; }
.ticker__track span{
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.ticker__track i{ color:var(--rose-300); font-style:normal; font-size:9px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =====================================================================
   SERVICES — image-led cards
   ===================================================================== */
.services__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,2.6vw,34px); }

.svc{ position:relative; }
.svc__media{ position:relative; overflow:hidden; border-radius:2px; margin-bottom:22px; }
.svc__media img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.svc:hover .svc__media img{ transform:scale(1.05); }
.svc__no{
  position:absolute; left:16px; top:14px; z-index:2;
  font-family:var(--serif); font-size:15px; color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.5); letter-spacing:.1em;
}
.svc__title{ font-size:clamp(24px,2.3vw,31px); margin-bottom:10px; }
.svc__text{ color:var(--ink-3); font-size:.95em; margin:0 0 16px; }
.svc__meta{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-top:14px; border-top:1px solid var(--line);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--rose-600);
}
.svc__meta span:last-child{ color:var(--ink-3); }

/* =====================================================================
   BEFORE / AFTER
   Shown as a labelled pair rather than a drag-reveal: these two frames were
   shot at different distances, so sliding one over the other reads as a jump
   rather than a transformation.
   ===================================================================== */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.2vw,16px); }
.compare__item{
  position:relative; margin:0; overflow:hidden; border-radius:2px;
  box-shadow:var(--shadow-m); background:var(--sand);
}
.compare__item img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:center 42%;
}
.compare__item figcaption{
  position:absolute; left:14px; bottom:14px;
  font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:#fff;
  background:rgba(36,28,24,.66); padding:7px 15px; border-radius:2px;
  backdrop-filter:blur(6px);
}
.compare__note{
  text-align:center; max-width:52ch; margin:26px auto 0;
  color:var(--ink-3); font-size:.9em; font-style:italic;
}

/* =====================================================================
   GALLERY
   ===================================================================== */
/* Fixed row height + images filling their tile — far more predictable than
   per-tile aspect ratios once tiles start spanning rows and columns. */
.gallery__grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:236px; gap:14px;
}
.tile{
  position:relative; margin:0; overflow:hidden; border-radius:2px; cursor:zoom-in;
  background:var(--sand);
}
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.tile:hover img{ transform:scale(1.06); }
.tile::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .45s;
  background:linear-gradient(180deg,transparent 45%,rgba(36,28,24,.62));
}
.tile:hover::after{ opacity:1; }
.tile figcaption{
  position:absolute; left:16px; bottom:14px; z-index:2; color:#fff;
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.tile:hover figcaption{ opacity:1; transform:none; }
.tile--w2{ grid-column:span 2; }
.tile--h2{ grid-row:span 2; }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:10002; display:grid; place-items:center;
  background:rgba(24,18,15,.94); padding:5vh 5vw;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox img{ max-width:100%; max-height:90vh; object-fit:contain; border-radius:2px; }
.lightbox__close,.lightbox__nav{
  position:absolute; background:none; border:0; color:#fff; cursor:pointer;
  font-size:26px; line-height:1; padding:14px; opacity:.72; transition:opacity .3s;
}
.lightbox__close:hover,.lightbox__nav:hover{ opacity:1; }
.lightbox__close{ top:12px; right:16px; font-size:30px; }
.lightbox__nav--prev{ left:8px; top:50%; transform:translateY(-50%); font-size:34px; }
.lightbox__nav--next{ right:8px; top:50%; transform:translateY(-50%); font-size:34px; }

/* =====================================================================
   ABOUT
   ===================================================================== */
.about__grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(34px,5vw,76px); align-items:center;
}
.about__media{ position:relative; display:grid; grid-template-columns:1fr; gap:14px; }
.about__media img{
  width:100%; height:auto; border-radius:2px; box-shadow:var(--shadow-m);
}
.about__media img:first-child{ aspect-ratio:3/4; object-fit:cover; object-position:center 22%; }
.about__media img:last-child{
  aspect-ratio:16/10; object-fit:cover; object-position:center 30%;
  width:66%; margin-left:auto; margin-top:-16%; position:relative; z-index:2;
  border:6px solid var(--ivory);
}
.about__body p{ color:var(--ink-3); margin:0 0 18px; }
.about__points{ margin:26px 0 32px; display:grid; gap:12px; }
.about__points li{ position:relative; padding-left:26px; color:var(--ink-2); font-size:.95em; }
.about__points li::before{
  content:""; position:absolute; left:0; top:12px; width:14px; height:1px; background:var(--rose-400);
}
.about__sign{
  font-family:var(--serif); font-style:italic; font-size:30px;
  color:var(--rose-600); margin:0 0 26px;
}

/* =====================================================================
   PRICE LIST
   ===================================================================== */
.menu__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(28px,4vw,58px); }
.menu__cat{ font-size:clamp(21px,2vw,27px); margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.price li{ display:flex; align-items:baseline; gap:10px; padding:10px 0; }
.price__name{ color:var(--ink-2); }
.price__dots{ flex:1; height:1px; margin-bottom:4px; border-bottom:1px dotted var(--line); }
.price__val{ font-family:var(--serif); font-size:1.2em; color:var(--rose-600); white-space:nowrap; }
.menu__note{ margin:clamp(30px,4vw,48px) 0 0; color:var(--ink-3); font-size:.87em; font-style:italic; }

/* =====================================================================
   TESTIMONIALS
   ===================================================================== */
.quotes{ position:relative; min-height:190px; }
.quote{
  position:absolute; inset:0; margin:0; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .3s ease-out;
}
.quote.is-active{ opacity:1; pointer-events:auto; position:relative; transition:opacity .55s var(--ease) .28s; }
.quote p{
  font-family:var(--serif); font-size:clamp(20px,2.6vw,31px); line-height:1.5;
  font-style:italic; font-weight:300; margin:0 0 22px; color:var(--ink);
}
.quote cite{
  font-style:normal; display:flex; flex-direction:column; gap:6px; align-items:center;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--rose-600);
}
.quote cite span{ color:var(--ink-3); font-size:9px; letter-spacing:.16em; }
.qdots{ display:flex; justify-content:center; gap:10px; margin-top:32px; }
.qdot{
  width:8px; height:8px; border-radius:50%; border:1px solid var(--rose-400);
  background:transparent; padding:0; cursor:pointer; transition:background .3s, transform .3s;
}
.qdot.is-active{ background:var(--rose-600); border-color:var(--rose-600); transform:scale(1.3); }

/* =====================================================================
   BOOKING
   ===================================================================== */
.book__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,3.6vw,54px); align-items:stretch; }

.book__form{
  display:flex; flex-direction:column; gap:24px; justify-content:space-between;
  background:var(--ivory); border:1px solid var(--line);
  padding:clamp(26px,3.2vw,42px); border-radius:2px;
}
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.field{ position:relative; }
.field input,.field select,.field textarea{
  width:100%; padding:16px 2px 9px; border:0; border-bottom:1px solid var(--line);
  background:transparent; font-family:var(--sans); font-size:15px; font-weight:300;
  color:var(--ink); border-radius:0; transition:border-color .3s;
}
.field textarea{ height:112px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--rose-500); }
.field label{
  position:absolute; left:2px; top:16px; color:var(--ink-3); font-size:14px;
  pointer-events:none; transition:.28s var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field .label--fixed{
  top:-2px; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--rose-500);
}
.field select{ appearance:none; cursor:pointer; padding-top:18px; }
.field select + label{ top:-2px; }
.field--select::after{
  content:""; position:absolute; right:6px; top:22px; pointer-events:none;
  width:7px; height:7px; border-right:1px solid var(--rose-500); border-bottom:1px solid var(--rose-500);
  transform:rotate(45deg);
}
.book__fine{ margin:12px 0 0; font-size:10.5px; color:var(--ink-3); text-align:center; }

.book__aside{ display:flex; flex-direction:column; gap:16px; }
.info{ border:1px solid var(--line); padding:26px 24px; border-radius:2px; background:var(--ivory); }
.info h3{
  font-family:var(--sans); font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--rose-600); font-weight:500; margin-bottom:16px;
}
.info__row{ display:flex; gap:13px; align-items:flex-start; padding:11px 0; transition:transform .3s var(--ease); }
.info__row + .info__row{ border-top:1px solid var(--line); }
.info__row:hover{ transform:translateX(4px); }
.info__row svg{ width:17px; height:17px; flex:none; fill:var(--rose-500); margin-top:3px; }
.info__row span{ font-size:.93em; color:var(--ink-2); line-height:1.55; }
.hours li{ display:flex; justify-content:space-between; padding:8px 0; font-size:.92em; }
.hours li + li{ border-top:1px solid var(--line); }
.hours span{ color:var(--ink-3); }
.hours b{ font-weight:400; color:var(--rose-600); }
.map{ flex:1; min-height:210px; overflow:hidden; border:1px solid var(--line); border-radius:2px; }
.map iframe{ width:100%; height:100%; border:0; filter:grayscale(.4) sepia(.18); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{ background:var(--shell); border-top:1px solid var(--line); padding:clamp(46px,5vw,68px) 0 24px; }
.footer__grid{
  display:grid; grid-template-columns:1.4fr .8fr 1fr; gap:34px;
  padding-bottom:30px; border-bottom:1px solid var(--line);
}
.footer__logo{ width:min(260px,80%); height:auto; margin-bottom:16px; }
.footer__brand p{ margin:0; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--rose-500); }
.footer__nav{ display:flex; flex-direction:column; gap:10px; }
.footer__nav a{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); transition:color .3s,padding-left .3s; }
.footer__nav a:hover{ color:var(--rose-600); padding-left:6px; }
.footer__contact{ display:flex; flex-direction:column; gap:10px; text-align:right; }
.footer__contact a{ font-size:.92em; color:var(--ink-2); transition:color .3s; }
.footer__contact a:first-child{ font-family:var(--serif); font-size:1.5em; color:var(--rose-600); }
.footer__contact a:hover{ color:var(--rose-500); }
.footer__base{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-top:20px; font-size:10.5px; color:var(--ink-3);
}
.footer__base p{ margin:0; }
.footer__base em{ font-family:var(--serif); font-size:12.5px; color:var(--rose-500); }

/* =====================================================================
   WHATSAPP
   ===================================================================== */
.wa{ position:fixed; right:22px; bottom:22px; z-index:9500; width:58px; height:58px; display:grid; place-items:center; }
.wa__ring{
  position:absolute; inset:0; border-radius:50%; background:rgba(37,211,102,.45);
  animation:waPulse 2.4s cubic-bezier(.24,.6,.4,1) infinite;
}
.wa__ring--2{ animation-delay:1.2s; }
@keyframes waPulse{
  0%{ transform:scale(1); opacity:.7 } 70%{ transform:scale(2); opacity:0 } 100%{ transform:scale(2); opacity:0 }
}
.wa__btn{
  position:relative; z-index:3; width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; background:var(--wa);
  box-shadow:0 10px 26px -8px rgba(18,133,92,.7);
  transition:transform .35s var(--ease);
}
.wa__btn svg{ width:31px; height:31px; fill:#fff; }
.wa:hover .wa__btn{ transform:scale(1.08); }
.wa__label{
  position:absolute; right:70px; top:50%; transform:translateY(-50%) translateX(8px);
  white-space:nowrap; background:var(--ink); color:#fff; padding:9px 16px; border-radius:2px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.wa:hover .wa__label{ opacity:1; transform:translateY(-50%) translateX(0); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1024px){
  .hero__grid,.about__grid,.book__grid{ grid-template-columns:1fr; }
  .hero__figure{ order:-1; }
  .about__media{ max-width:520px; }
  .gallery__grid{ grid-template-columns:repeat(3,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
  .footer__contact{ text-align:left; }
}

@media (max-width:820px){
  :root{ --header-h:66px; }
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto; flex-direction:column; gap:0;
    background:var(--ivory); border-bottom:1px solid var(--line);
    padding:14px 0 26px; align-items:stretch;
    transform:translateY(-130%); transition:transform .5s var(--ease);
    max-height:calc(100svh - var(--header-h)); overflow-y:auto;
  }
  .nav.is-open{ transform:translateY(0); }
  .nav__link{ padding:15px 6vw; font-size:12.5px; border-bottom:1px solid var(--line); }
  .nav__link::after{ display:none; }
  .nav__cta{ margin:16px 6vw 0; text-align:center; }

  .gallery__grid{ grid-template-columns:repeat(2,1fr); }
  .tile--w2{ grid-column:span 2; }
  .tile--h2{ grid-row:span 1; }
  .tile--h2 img{ aspect-ratio:1; }

  .frow{ grid-template-columns:1fr; }
  .hero__caption{ left:0; bottom:-18px; padding:11px 16px; }
  .about__media img:last-child{ width:74%; }
  .wa{ right:14px; bottom:14px; }
  .wa__label{ display:none; }
}

@media (max-width:520px){
  .hero__stats{ gap:18px; }
  .hero__actions .btn{ width:100%; }
  .footer__grid{ grid-template-columns:1fr; }
  .gallery__grid{ gap:9px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

:focus-visible{ outline:2px solid var(--rose-500); outline-offset:3px; }
::selection{ background:var(--rose-200); color:var(--ink); }