/* ==========================================================================
   Teamhafsawajid, Beauty at Ghar-pey
   Design system derived entirely from the client's own printed rate cards.
   Two typefaces only:
     Style Script  -> the wordmark (signature script on the flyers)
     Jost          -> everything else (geometric sans on the flyers)
   ========================================================================== */

/* ---------- 0. Fonts (self-hosted) --------------------------------------
   Served from this domain instead of Google Fonts. That removes two extra
   origins (fonts.googleapis.com + fonts.gstatic.com), and with them two DNS
   lookups, two TLS handshakes and one render-blocking stylesheet before any
   text can paint. Subset to latin + full A-Z/a-z/0-9/punctuation, so editing
   any headline or the wordmark can never produce a missing glyph.
   font-display:swap keeps text visible while a face is still loading.        */
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-var.woff2") format("woff2-variations"),
       url("../fonts/jost-var.woff2") format("woff2");
  font-weight: 300 700;              /* one variable file covers every weight */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Style Script";
  src: url("../fonts/style-script.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo Black";
  src: url("../fonts/archivo-black.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Colour, sampled from the rate-card artwork */
  --blush:        #f7dcd3;   /* flyer background */
  --blush-deep:   #efc9bd;
  --blush-tint:   #fdf3ef;
  --cream:        #fffcfa;
  --ink:          #17120f;   /* flyer body copy */
  --ink-soft:     #55483f;
  --ink-mute:     #877568;
  --rose:         #9e5744;   /* accent, darkened from the line-art for contrast */
  --rose-light:   #c08d7c;
  --line:         #e2c0b4;   /* hairlines */
  --line-soft:    #f0d9d0;

  /* Type */
  --f-script:  "Style Script", "Sacramento", cursive;
  --f-sans:    "Jost", "Century Gothic", "Questrial", system-ui, sans-serif;
  /* The heavy grotesque used for the underlined headings on the rate cards
     ("Deals & Discounts.", "MASSAGE."), a third face that was already in the
     client's own artwork. Single weight: never set font-weight above 400. */
  --f-display: "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-lg:   1.125rem;
  --t-xl:   1.375rem;
  --t-2xl:  clamp(1.5rem,  1.1rem + 1.6vw, 2rem);
  --t-3xl:  clamp(1.9rem,  1.3rem + 2.6vw, 2.9rem);
  --t-4xl:  clamp(2.4rem,  1.4rem + 4.4vw, 4.4rem);

  /* Space */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.75rem; --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  --wrap: 1180px;
  --wrap-narrow: 780px;
  --radius: 2px;          /* flyers are flat and square, almost no rounding */
  --radius-lg: 4px;

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.4, 0, .2, 1);
  --dur: .62s;

  --header-h: 76px;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; top: -100px; left: var(--s-4); z-index: 200;
  background: var(--ink); color: var(--cream);
  padding: var(--s-3) var(--s-5); font-size: var(--t-sm);
  letter-spacing: .08em; text-transform: uppercase;
}
.skip-link:focus { top: var(--s-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Layout primitives ---------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--blush { background: var(--blush-tint); }
.section--blush-full { background: var(--blush); }
.section--ink { background: var(--ink); color: var(--blush-tint); }

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

/* ---------- 4. Typography ------------------------------------------------ */
/* Logo: if assets/img/logo.png (or .svg) exists, main.js swaps the script
   text for the real artwork, which is the only way to match the client's
   wordmark exactly. No font substitute is pixel-identical to it. Until the
   file is added, the script text below is the fallback. */
.header__brand img.brand-logo {
  height: 34px; width: auto; display: block;
}
@media (max-width: 860px) { .header__brand img.brand-logo { height: 28px; } }
.footer .brand-logo, .cta-band .brand-logo { height: 46px; }
/* The CTA band sits on ink, where a near-black wordmark would disappear.
   Flipping it to white costs nothing and avoids shipping a second file. */
.cta-band .brand-logo { filter: brightness(0) invert(1); opacity: .94; }

.wordmark {
  font-family: var(--f-script);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .01em;
}

.eyebrow {
  font-size: var(--t-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--rose);
}

/* Section heading mirrors the flyers: heavy sans + a drawn underline */
.s-head { margin-bottom: var(--s-6); }
.s-head__title {
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  position: relative;
  display: inline-block;
  padding-bottom: var(--s-3);
}
.s-head__title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 3px; width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease) .15s;
}
.is-in .s-head__title::after,
.s-head__title.is-in::after { transform: scaleX(1); }
.section--ink .s-head__title::after { background: var(--blush); }

.s-head__sub {
  margin-top: var(--s-4);
  max-width: 56ch;
  color: var(--ink-soft);
  font-weight: 300;
  font-size: var(--t-lg);
}
.section--ink .s-head__sub { color: var(--blush-deep); }
.s-head--center { text-align: center; }
.s-head--center .s-head__sub { margin-inline: auto; }

.lede {
  font-size: var(--t-lg);
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--cream);
  --btn-bd: var(--ink);
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  padding: .95rem 1.9rem;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .35s var(--ease-io), border-color .35s var(--ease-io);
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--rose);
  transform: translateY(101%);
  transition: transform .42s var(--ease);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--cream); border-color: var(--rose); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--light  { --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-bd: var(--cream); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: var(--cream); --btn-bd: rgba(253,243,239,.55); }
.btn--sm { padding: .6rem 1.15rem; font-size: var(--t-xs); letter-spacing: .1em; }
.btn--full { display: flex; width: 100%; justify-content: center; }

.btn-wa { --btn-bg: #128c7e; --btn-bd: #128c7e; --btn-fg: #fff; }
.btn-wa::before { background: #0e6f64; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-sm); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--rose);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-io);
}
.link-arrow svg { transition: transform .35s var(--ease); }
.link-arrow:hover { border-bottom-color: var(--rose); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---------- 6. Mobile action bar ----------------------------------------
   90% of this client's customers arrive on a phone, so the three things they
   might want, call, WhatsApp, book, are pinned to the thumb zone and never
   scroll away. Hidden entirely on desktop, where the header already has them. */
.mobile-bar { display: none; }

@media (max-width: 860px) {
  .mobile-bar {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: var(--cream);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -6px 24px -14px rgba(23,18,15,.4);
  }
  .mobile-bar__btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    min-height: 58px;                 /* comfortable thumb target */
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
    border-left: 1px solid var(--line-soft);
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-bar__btn:first-child { border-left: 0; }
  .mobile-bar__btn:active { background: var(--blush-tint); }
  .mobile-bar__btn--wa { color: #0d7b6c; }
  .mobile-bar__btn--primary { background: var(--ink); color: var(--cream); }
  .mobile-bar__btn--primary:active { background: var(--rose); }

  /* keep the bar from covering the end of the page */
  body { padding-bottom: 58px; }
}

/* ---------- 7. Header ---------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,252,250,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease-io), background .4s var(--ease-io);
}
.header.is-stuck { border-bottom-color: var(--line-soft); background: rgba(255,252,250,.96); }

.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  min-height: var(--header-h);
}
.header__brand { display: flex; flex-direction: column; line-height: 1; }
.header__brand .wordmark { font-size: 2rem; }
.header__brand small {
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 1px;
}

.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav a {
  font-size: var(--t-sm); letter-spacing: .1em; text-transform: uppercase;
  font-weight: 400; position: relative; padding-block: 4px;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { font-weight: 500; }

.header__actions { display: flex; align-items: center; gap: var(--s-4); }
.header__tel {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: .04em;
  white-space: nowrap;
}
.header__tel svg { color: var(--rose); flex: none; }

/* Mobile menu toggle */
.burger {
  display: none;
  width: 42px; height: 42px;
  background: none; border: 1px solid var(--line);
  cursor: pointer; position: relative;
}
.burger span {
  position: absolute; left: 11px; width: 18px; height: 1.5px;
  background: var(--ink);
  transition: transform .38s var(--ease), opacity .2s linear;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: block; }
  .header__tel span { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line-soft);
    padding: var(--s-3) var(--s-5) var(--s-6);
    transform: translateY(-12px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s var(--ease-io), transform .38s var(--ease), visibility .3s;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .nav a { padding: var(--s-4) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-base); }
  .nav a::after { display: none; }
  .nav .btn { margin-top: var(--s-5); justify-content: center; }
}

/* ---------- 8. Hero (full-bleed image, text laid over it) --------------- */
.hero {
  position: relative;
  min-height: 640px;
  min-height: min(88svh, 800px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 42%; }
/* Scrim: dark on the text side, clearing toward the subject on the right. */
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(23,18,15,.86) 0%, rgba(23,18,15,.66) 40%,
                           rgba(23,18,15,.22) 74%, rgba(23,18,15,.04) 100%),
    linear-gradient(180deg, rgba(23,18,15,.30) 0%, rgba(23,18,15,0) 45%);
}
/* Keeps the shared 1180px content width so the copy lines up with every other
   section. Constraining the block itself would let .wrap's margin-inline:auto
   centre a narrow column and open a huge gap on the left at desktop sizes. */
.hero__inner {
  position: relative; z-index: 1;
  color: var(--cream);
  padding-block: clamp(4rem, 3rem + 6vw, 7rem);
}
.hero__inner > * { max-width: 660px; }
/* Same eyebrow type as everywhere else, only the colour changes, because
   the brand rose is unreadable on a dark scrim. */
.hero .eyebrow { color: var(--blush-deep); }

.hero h1 {
  font-family: var(--f-display);
  font-size: var(--t-4xl);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -.035em;
  color: var(--cream);
  margin-block: var(--s-3) var(--s-5);
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--blush-deep); }

.hero__lede { max-width: 46ch; font-size: var(--t-lg); font-weight: 300; color: rgba(253,243,239,.86); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.hero__proof {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid rgba(253,243,239,.26);
}
.hero__proof div strong { display: block; font-size: var(--t-xl); font-weight: 600; line-height: 1.1; color: var(--cream); }
.hero__proof div span { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: rgba(253,243,239,.62); }

@media (max-width: 860px) {
  .hero { align-items: end; min-height: min(92svh, 760px); }
  .hero__bg img { object-position: 50% 35%; }
  .hero__bg::after {
    background: linear-gradient(180deg, rgba(23,18,15,.58) 0%, rgba(23,18,15,.34) 26%,
                                        rgba(23,18,15,.80) 68%, rgba(23,18,15,.92) 100%);
  }
  .hero__inner { padding-block: clamp(5rem, 4rem + 8vw, 8rem) var(--s-7); }
  .hero__inner > * { max-width: none; }
  .hero__proof { gap: var(--s-5); }
}

/* ---------- 9. Marquee --------------------------------------------------- */
.marquee {
  background: var(--ink); color: var(--blush);
  padding-block: var(--s-4);
  overflow: hidden;
  display: flex;
  user-select: none;
}
.marquee__track {
  display: flex; flex: none; gap: var(--s-5);
  padding-right: var(--s-5);
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span {
  font-size: var(--t-sm); letter-spacing: .2em; text-transform: uppercase;
  white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s-5);
}
.marquee span::after { content: "✦"; color: var(--rose-light); font-size: .7em; }
@keyframes slide { to { transform: translateX(-100%); } }

/* ---------- 10. Service cards ------------------------------------------- */
.grid { display: grid; gap: var(--s-5); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.svc {
  background: var(--cream);
  border: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color .4s var(--ease-io), transform .5s var(--ease);
}
.svc__media { display: block; overflow: hidden; background: var(--blush-deep); }
.svc__media img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 9;   /* matches the 16:9 service photos */
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.svc:hover .svc__media img { transform: scale(1.045); }
.svc__body {
  display: flex; flex-direction: column; flex: 1;
  padding: var(--s-5);
}
.svc::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 100%; height: 2px; background: var(--rose);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.svc:hover { border-color: var(--line); transform: translateY(-4px); }
.svc:hover::after { transform: scaleX(1); }
.svc__icon { color: var(--rose); margin-bottom: var(--s-4); }
.svc h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.01em; margin-bottom: var(--s-2); }
.svc p { font-size: var(--t-sm); color: var(--ink-soft); font-weight: 300; line-height: 1.7; }
.svc__foot {
  margin-top: auto;
  padding-top: var(--s-5);
}
/* The whole card is a single link, so this is a button-styled span rather than
   a nested anchor, which would be invalid HTML. It reacts to hover on the card. */
.svc__btn {
  display: inline-flex; align-items: center; gap: .55rem;
  border: 1px solid var(--ink);
  padding: .75rem 1.35rem;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background .35s var(--ease-io), color .35s var(--ease-io),
              border-color .35s var(--ease-io);
}
.svc__btn svg { transition: transform .35s var(--ease); }
.svc:hover .svc__btn,
.svc:focus-visible .svc__btn { background: var(--ink); color: var(--cream); }
.svc:hover .svc__btn svg { transform: translateX(4px); }

/* ---------- 11. Price menu (dotted leaders, real menu idiom) ----------- */
.menu-block { margin-bottom: var(--s-8); scroll-margin-top: calc(var(--header-h) + 70px); }
.menu-block__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--s-5);
}
.menu-block__head h3 {
  font-size: var(--t-2xl); font-weight: 700; letter-spacing: .01em; text-transform: uppercase;
}
.menu-block__head p { font-size: var(--t-sm); color: var(--ink-mute); font-weight: 300; }

.menu-cols { columns: 2; column-gap: var(--s-8); }
@media (max-width: 760px) { .menu-cols { columns: 1; } }

.price-row {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: .62rem 0;
  border-bottom: 1px dotted var(--line);
  break-inside: avoid;
  transition: padding-left .35s var(--ease);
  position: relative;
}
.price-row::before {
  content: ""; position: absolute; left: -14px; top: 50%;
  width: 6px; height: 1px; background: var(--rose);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.price-row:hover { padding-left: 6px; }
.price-row:hover::before { transform: scaleX(1); }
.price-row__name { font-weight: 400; }
.price-row__name small {
  display: block; font-size: var(--t-xs); color: var(--ink-mute); letter-spacing: .02em;
}
.price-row__dots { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); min-width: 18px; }
.price-row__price {
  font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.price-row__price::before {
  content: "Rs\00a0";
  font-size: var(--t-xs); font-weight: 400; color: var(--ink-mute);
}
/* duration sits under the price so it can never read as extra digits */
.price-row__price span {
  display: block;
  font-size: var(--t-xs); color: var(--ink-mute); font-weight: 400;
  line-height: 1.3;
}

.menu-note {
  background: var(--blush-tint);
  border-left: 2px solid var(--rose);
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin-top: var(--s-5);
}

/* ---------- 12. Deals ---------------------------------------------------- */
.deal {
  background: var(--cream);
  border: 1px solid var(--line-soft);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-4);
  position: relative;
  transition: border-color .4s var(--ease-io), box-shadow .4s var(--ease-io);
}
.deal:hover { border-color: var(--rose-light); box-shadow: 0 12px 34px -22px rgba(23,18,15,.35); }
.deal__num {
  font-size: var(--t-xs); letter-spacing: .18em; color: var(--rose); font-weight: 500;
}
.deal__items { font-size: var(--t-base); font-weight: 400; line-height: 1.55; flex: 1; }
.deal__price { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.deal__was {
  font-size: var(--t-sm); color: var(--ink-mute); position: relative; white-space: nowrap;
}
.deal__was::after {
  content: ""; position: absolute; left: 0; top: 52%;
  height: 1px; width: 100%; background: var(--rose);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease) .25s;
}
.is-in .deal__was::after { transform: scaleX(1); }
.deal__now { font-size: var(--t-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.deal__save {
  font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase;
  background: var(--blush); color: var(--rose); padding: .18rem .5rem; font-weight: 500;
}

/* ---------- 13. Steps ---------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s-6); grid-template-columns: repeat(3,1fr); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: var(--s-5); } }
.step { counter-increment: step; position: relative; padding-top: var(--s-5); }
.step::before {
  content: "0" counter(step);
  position: absolute; top: 0; left: 0;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .1em; color: var(--rose);
}
.step::after {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 1px; background: var(--line);
}
.step h3 { font-size: var(--t-lg); font-weight: 600; margin: var(--s-5) 0 var(--s-2); }
.step p { font-size: var(--t-sm); color: var(--ink-soft); font-weight: 300; }

/* ---------- 14. Why-us list --------------------------------------------- */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6) var(--s-7); }
@media (max-width: 860px) { .why { grid-template-columns: 1fr; } }
.why__item { display: flex; gap: var(--s-4); }
.why__item svg { flex: none; color: var(--rose); margin-top: 3px; }
.why__item h3 { font-size: var(--t-lg); font-weight: 600; margin-bottom: var(--s-1); }
.why__item p { font-size: var(--t-sm); color: var(--ink-soft); font-weight: 300; }
.section--ink .why__item p { color: var(--blush-deep); }
.section--ink .why__item svg { color: var(--rose-light); }

/* ---------- 14b. Reviews carousel ---------------------------------------
   Centred active card with faded neighbours peeking either side. Built on
   native scroll-snap so a phone gets real momentum swiping for free; the
   arrows and dots just drive the same scroll container.                     */
/* vw, not %: a percentage flex-basis resolves against the track content box,
   which padding-inline has already shrunk, that feeds back on itself. */
.reviews { --rv-card: min(620px, 78vw); position: relative; }

.rv-track {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: var(--s-2) var(--s-6);
  padding-inline: calc((100% - var(--rv-card)) / 2);
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.rv-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .rv-track { scroll-behavior: auto; } }

.rv-card {
  flex: 0 0 var(--rv-card);
  scroll-snap-align: center;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: var(--s-6);
  box-shadow: 0 20px 50px -34px rgba(23,18,15,.55);
  transition: opacity .45s var(--ease-io), transform .45s var(--ease),
              filter .45s var(--ease-io);
}
.rv-card[data-clone] { user-select: none; }
/* dimming only once JS is confirmed alive, so a no-JS visitor sees them all */
html.js .rv-card { opacity: .45; transform: scale(.94); filter: blur(2.5px); }
html.js .rv-card.is-active { opacity: 1; transform: none; filter: none; }

.rv-card__head {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.rv-card__avatar {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blush); color: var(--rose);
  font-weight: 600; font-size: var(--t-base);
}
.rv-card__id { min-width: 0; }
.rv-card__id b { display: block; font-weight: 600; font-size: var(--t-base); line-height: 1.3; }
.rv-card__id span { font-size: var(--t-sm); color: var(--ink-mute); font-weight: 300; }
.rv-card__src {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--t-xs); color: var(--ink-mute);
}
.rv-card__src svg { color: #128c7e; }

.rv-card__stars { display: flex; gap: 3px; color: #e0a419; margin-bottom: var(--s-4); }

.rv-card__body {
  font-size: var(--t-lg);
  line-height: 1.62;
  font-weight: 300;
  color: var(--ink-soft);
}

/* Controls */
.rv-controls {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-5);
  margin-top: var(--s-2);
}
.rv-btn {
  width: 50px; height: 50px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--cream);
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .32s var(--ease-io), color .32s var(--ease-io),
              border-color .32s var(--ease-io), transform .32s var(--ease);
}
.rv-btn:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.rv-btn:active { transform: scale(.94); }
.rv-btn[disabled] { opacity: .35; cursor: not-allowed; }
.rv-btn[disabled]:hover { background: var(--cream); color: var(--ink); border-color: var(--line); }

.rv-dots { display: flex; align-items: center; gap: 7px; }
.rv-dot {
  position: relative;                    /* anchors the enlarged hit area */
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 99px;
  background: var(--line);
  cursor: pointer;
  transition: width .38s var(--ease), background .32s var(--ease-io);
}
.rv-dot.is-active { width: 28px; background: var(--rose); }
/* The visible dot stays 8px; this invisible box is what the thumb actually
   hits. Without it the target is 8x8, far below the 44px guideline. */
.rv-dot::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 44px;
}

@media (max-width: 860px) { .reviews { --rv-card: min(560px, 62vw); } }

@media (max-width: 640px) {
  /* card + gap sized so a slice of the next card always shows */
  .reviews { --rv-card: 68vw; }
  .rv-track { gap: var(--s-2); }
  .rv-card { padding: var(--s-5); border-radius: 8px; }
  .rv-card__body { font-size: var(--t-base); }
  .rv-controls { gap: var(--s-4); }
  .rv-btn { width: 46px; height: 46px; }
}

/* ---------- 15. Instagram ------------------------------------------------ */
/* align-items:start so the two square posts sit at the top of the row rather
   than floating in a cell sized by the taller 9:16 reel beside them. */
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); align-items: start; }
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ig-grid { grid-template-columns: 1fr; } }
.ig-grid iframe, .ig-grid .instagram-media { width: 100% !important; min-width: 0 !important; margin: 0 !important; }
.ig-fallback {
  border: 1px solid var(--line-soft); background: var(--blush-tint);
  padding: var(--s-6); text-align: center; font-size: var(--t-sm); color: var(--ink-soft);
}


/* ---------- 15b. Self-hosted reel ---------------------------------------
   An Instagram embed is a cross-origin iframe, so no script here can pause or
   mute it. Hosting the file ourselves makes it a plain <video> we control,
   and drops a third-party iframe off the page as a bonus.                   */
.reel {
  position: relative;
  margin: 0;
  aspect-ratio: 9 / 16;
  background: var(--blush-deep);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  overflow: hidden;
}
.reel__video { width: 100%; height: 100%; object-fit: cover; display: block; }

.reel__controls {
  position: absolute; left: 10px; bottom: 10px;
  display: flex; gap: 8px;
  z-index: 2;
}
.reel__btn {
  width: 44px; height: 44px;             /* full tap target on phones */
  border: 0; border-radius: 50%;
  background: rgba(23,18,15,.55);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .25s var(--ease-io), transform .25s var(--ease);
}
.reel__btn:hover { background: rgba(23,18,15,.78); }
.reel__btn:active { transform: scale(.92); }

/* Each button holds both icons; the state class decides which one shows. */
.reel__btn .ic-pause, .reel__btn .ic-sound { display: none; }
.reel.is-playing .reel__btn .ic-play  { display: none; }
.reel.is-playing .reel__btn .ic-pause { display: block; }
.reel.is-unmuted .reel__btn .ic-muted { display: none; }
.reel.is-unmuted .reel__btn .ic-sound { display: block; }

.reel__link {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(23,18,15,.55);
  padding: .5rem .75rem; border-radius: 99px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .25s var(--ease-io);
}
.reel__link:hover { background: rgba(23,18,15,.78); }

/* File not there yet: a quiet placeholder that holds the layout. Deliberately
   has no "open on Instagram" link, because leaving the site is the thing we
   are trying to avoid. Disappears on its own once the mp4 exists. */
/* Centred play affordance. Nothing autoplays, so the poster needs an obvious
   invitation; it fades out once the clip is running, leaving the small
   corner controls to take over. */
.reel__big {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border: 0; padding: 0;
  background: rgba(23,18,15,.18);
  color: #fff;
  cursor: pointer;
  transition: opacity .3s var(--ease-io), background .3s var(--ease-io);
}
.reel__big svg {
  width: 62px; height: 62px; padding: 19px;
  border-radius: 50%;
  background: rgba(23,18,15,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .3s var(--ease), background .3s var(--ease-io);
}
.reel__big:hover { background: rgba(23,18,15,.28); }
.reel__big:hover svg { transform: scale(1.08); background: rgba(23,18,15,.75); }
.reel.is-playing .reel__big { opacity: 0; pointer-events: none; }

/* clip with no audio track: nothing to mute, so no mute button */
.reel[data-noaudio] .reel__controls { gap: 0; }

.reel--missing { background: var(--blush-tint); }
.reel--missing .reel__controls { display: none; }
.reel--missing::after {
  content: "Video coming soon";
  position: absolute; inset: 0;
  display: grid; place-content: center;
  font-size: var(--t-sm); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- 16. Forms ---------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field > label {
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
}
.field > label .req { color: var(--rose); }
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--cream);
  border: 1px solid var(--line);
  padding: .85rem 1rem;
  font-size: var(--t-base);
  font-weight: 300;
  transition: border-color .3s var(--ease-io), background .3s var(--ease-io);
}
.field input:hover, .field textarea:hover { border-color: var(--rose-light); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--rose); background: #fff;
  box-shadow: 0 0 0 3px rgba(158,87,68,.1);
}
.field__hint { font-size: var(--t-xs); color: var(--ink-mute); }
.field__error {
  font-size: var(--t-xs); color: #b3261e; display: none; align-items: center; gap: .3rem;
}
.field.has-error input, .field.has-error textarea, .field.has-error .chips {
  border-color: #b3261e; background: #fff8f7;
}
.field.has-error .field__error { display: flex; }

.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 620px) { .row-2 { grid-template-columns: 1fr; } }

/* Service picker, collapsible groups so 81 options stay thumb-sized */
.chips {
  border: 1px solid var(--line);
  background: var(--cream);
  padding: var(--s-2);
  display: grid;
}
.chipgroup { border-bottom: 1px solid var(--line-soft); }
.chipgroup:last-child { border-bottom: 0; }
.chipgroup > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-3);
  min-height: 48px;
  font-size: var(--t-base); font-weight: 500;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s var(--ease-io);
}
.chipgroup > summary::-webkit-details-marker { display: none; }
.chipgroup > summary::before {
  content: ""; flex: none;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--rose);
  border-bottom: 1.5px solid var(--rose);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
}
.chipgroup[open] > summary::before { transform: rotate(-135deg) translate(-3px, -3px); }
.chipgroup > summary:hover { color: var(--rose); }
/* count badge, set from JS, so a collapsed group still shows what's picked */
.chipgroup > summary::after {
  content: attr(data-n);
  margin-left: auto;
  background: var(--ink); color: var(--cream);
  font-size: 11px; font-weight: 500;
  min-width: 20px; height: 20px; padding-inline: 5px;
  display: grid; place-items: center;
}
.chipgroup > summary:not([data-n])::after,
.chipgroup > summary[data-n=""]::after { content: none; }

.chips__set {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  padding: 0 var(--s-3) var(--s-4);
}
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-block; cursor: pointer;
  border: 1px solid var(--line);
  padding: .42rem .85rem;
  font-size: var(--t-sm); font-weight: 300;
  transition: all .28s var(--ease-io);
  user-select: none;
}
.chip span:hover { border-color: var(--rose-light); background: var(--blush-tint); }
.chip input:checked + span {
  background: var(--ink); color: var(--cream); border-color: var(--ink); font-weight: 400;
}
.chip input:focus-visible + span { outline: 2px solid var(--rose); outline-offset: 2px; }

.form__summary {
  background: var(--blush-tint);
  border: 1px solid var(--line-soft);
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-sm);
}
.form__summary b { font-weight: 600; }
.form__summary ul { margin-top: var(--s-2); }
.form__summary li { padding-left: 1rem; position: relative; color: var(--ink-soft); }
.form__summary li::before { content: "·"; position: absolute; left: 0; color: var(--rose); }

/* ---------- 17. Contact page layout ------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 3rem; }
.contact-aside { display: grid; gap: 1.25rem; align-content: start; }
.policy-box { border: 1px solid var(--line-soft); background: var(--blush-tint); padding: var(--s-5); }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  /* on a phone the form is the point, contact cards follow it */
  .contact-aside { grid-template-columns: 1fr 1fr; }
  .policy-box { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .contact-aside { grid-template-columns: 1fr; } }

/* ---------- 17b. Contact cards ------------------------------------------ */
.contact-card {
  border: 1px solid var(--line-soft);
  background: var(--cream);
  padding: var(--s-5);
  display: flex; gap: var(--s-4); align-items: flex-start;
  transition: border-color .35s var(--ease-io), transform .45s var(--ease);
}
.contact-card:hover { border-color: var(--rose-light); transform: translateY(-3px); }
.contact-card svg { flex: none; color: var(--rose); margin-top: 2px; }
.contact-card h3 { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; }
.contact-card p { font-size: var(--t-lg); font-weight: 400; margin-top: 2px; }
.contact-card small { font-size: var(--t-xs); color: var(--ink-mute); display: block; margin-top: 2px; }

.policy { display: grid; gap: var(--s-4); }
.policy li {
  display: flex; gap: var(--s-3); font-size: var(--t-sm); color: var(--ink-soft); font-weight: 300;
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-soft);
}
.policy li:last-child { border-bottom: 0; padding-bottom: 0; }
.policy li svg { flex: none; color: var(--rose); margin-top: 3px; }
.policy li b { color: var(--ink); font-weight: 500; }

/* ---------- 18. Page hero (inner pages) --------------------------------- */
.phero {
  position: relative;
  overflow: hidden;
  background: var(--blush);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  border-bottom: 1px solid var(--blush-deep);
}
/* Optional photo layer. The scrim is tinted with the brand blush rather than
   plain white so the band still reads as part of the palette, and it is
   heaviest on the left where the heading sits, clearing toward the right so
   the picture is actually visible. Text stays dark ink throughout. */
.phero__bg { position: absolute; inset: 0; z-index: 0; }
.phero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--phero-pos, 72% 50%);
}
.phero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(247,220,211, var(--scrim-a, .94)) 0%,
    rgba(247,220,211, var(--scrim-b, .84)) 38%,
    rgba(247,220,211, var(--scrim-c, .38)) 70%,
    rgba(247,220,211, var(--scrim-d, .10)) 100%);
}
/* Darker source image needs a denser scrim to keep the body copy legible. */
.phero--dense { --scrim-a: .96; --scrim-b: .90; --scrim-c: .52; --scrim-d: .20; }
.phero .wrap { position: relative; z-index: 1; }
.phero h1 {
  font-size: var(--t-4xl); font-weight: 700; line-height: 1.03; letter-spacing: -.03em;
  margin-block: var(--s-2) var(--s-4);
}
.phero p { max-width: 54ch; font-size: var(--t-lg); font-weight: 300; color: var(--ink-soft); }
@media (max-width: 860px) {
  /* Copy spans the full width on a phone, so the scrim has to be even rather
     than a left-to-right ramp, or the last words sit on bare photo. */
  .phero__bg::after {
    background: linear-gradient(180deg,
      rgba(247,220,211,.92) 0%, rgba(247,220,211,.88) 60%, rgba(247,220,211,.94) 100%);
  }
  .phero--dense .phero__bg::after {
    background: linear-gradient(180deg,
      rgba(247,220,211,.95) 0%, rgba(247,220,211,.92) 60%, rgba(247,220,211,.96) 100%);
  }
}
/* ---------- 19. Sticky category nav (services page) --------------------- */
.catnav {
  position: sticky; top: var(--header-h); z-index: 50;
  background: rgba(255,252,250,.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.catnav__scroll {
  display: flex; gap: var(--s-5); overflow-x: auto;
  padding-block: var(--s-4);
  scrollbar-width: none;
}
.catnav__scroll::-webkit-scrollbar { display: none; }
.catnav a {
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; color: var(--ink-mute);
  padding-bottom: 4px; border-bottom: 1.5px solid transparent;
  transition: color .3s var(--ease-io), border-color .3s var(--ease-io);
}
.catnav a:hover { color: var(--ink); }
.catnav a.is-active { color: var(--ink); border-bottom-color: var(--rose); font-weight: 500; }

/* ---------- 20. CTA band ------------------------------------------------- */
.cta-band { background: var(--ink); color: var(--blush-tint); text-align: center; }
.cta-band .wordmark { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); color: var(--blush); }
.cta-band h2 {
  font-size: var(--t-3xl); font-weight: 700; letter-spacing: -.02em;
  margin-block: var(--s-3) var(--s-4); line-height: 1.1;
}
.cta-band p { color: var(--blush-deep); font-weight: 300; max-width: 48ch; margin-inline: auto; }
.cta-band__btns { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; margin-top: var(--s-6); }

/* ---------- 21. Footer --------------------------------------------------- */
.footer { background: var(--blush); padding-block: var(--s-8) var(--s-5); }
.footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--s-6);
  padding-bottom: var(--s-7); border-bottom: 1px solid var(--blush-deep);
}
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-5); } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer .wordmark { font-size: 2.4rem; }
.footer h4 {
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; margin-bottom: var(--s-4);
}
.footer li { margin-bottom: var(--s-2); }
.footer a { font-size: var(--t-sm); font-weight: 300; color: var(--ink-soft); transition: color .25s; }
.footer a:hover { color: var(--rose); }
.footer__tag { font-size: var(--t-sm); color: var(--ink-soft); font-weight: 300; margin-top: var(--s-3); max-width: 34ch; }
.footer__social { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.footer__social a {
  width: 38px; height: 38px; border: 1px solid var(--blush-deep);
  display: grid; place-items: center; color: var(--ink);
  transition: background .3s var(--ease-io), color .3s var(--ease-io), border-color .3s;
}
.footer__social a:hover { background: var(--ink); color: var(--blush); border-color: var(--ink); }
.footer__bottom {
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  padding-top: var(--s-5);
  font-size: var(--t-xs); color: var(--ink-mute);
}

/* ---------- 22. Floating WhatsApp --------------------------------------- */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 26px -6px rgba(37,211,102,.55);
  transform: scale(0);
  transition: transform .45s var(--ease), box-shadow .3s;
}
.wa-float.is-on { transform: scale(1); }
.wa-float:hover { box-shadow: 0 10px 30px -4px rgba(37,211,102,.7); }

/* ---------- 23. Scroll reveal -------------------------------------------
   Content is VISIBLE by default. The hidden state is applied only once the
   inline head script has confirmed JS is alive (html.js). If scripting fails
   for any reason the page still renders in full, never a blank site.        */
.reveal { opacity: 1; transform: none; }

html.js .reveal { opacity: 0; transform: translateY(16px); }
html.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur) var(--ease) var(--d, 0s),
              transform var(--dur) var(--ease) var(--d, 0s);
}

/* Hard override: set by the failsafe when the observer never fires. Shows the
   page outright rather than depending on a transition to complete. */
html.no-reveal .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---------- 23b. Mobile-first refinements -------------------------------
   Everything here exists because most visitors are on a phone: bigger tap
   targets, less scrolling to reach a price, no accidental zoom on inputs.   */
@media (max-width: 860px) {

  /* Type: tighten the vertical rhythm so more fits per screen */
  :root { --header-h: 64px; }
  .section { padding-block: clamp(2.5rem, 1.5rem + 5vw, 4rem); }
  .hero { padding-block: var(--s-6) var(--s-7); }
  .s-head { margin-bottom: var(--s-5); }
  .s-head__sub { font-size: var(--t-base); }

  /* Hero: headline and both CTAs land above the fold on a 375×667 screen */
  /* Sized so the longest line ("Not the service.") always fits on one line.
     Measured: that line is ~8.2x its own font-size wide in Archivo Black, so
     dividing the usable width by 8.6 keeps it on one line with margin to
     spare, at every phone width down to 320px. */
  .hero h1 { font-size: clamp(1.75rem, calc((100vw - 2.5rem) / 8.6), 3.2rem); }
  .hero__lede { font-size: var(--t-base); }
  .hero__cta { gap: var(--s-2); }
  .hero__cta .btn { flex: 1 1 100%; justify-content: center; }
  .hero__proof { gap: var(--s-4); justify-content: space-between; }
  .hero__proof div strong { font-size: var(--t-lg); }
  .hero__proof div span { font-size: 10px; letter-spacing: .1em; }

  /* Tap targets: nothing interactive smaller than ~44px */
  .btn { padding: 1rem 1.6rem; }
  .nav a { min-height: 52px; display: flex; align-items: center; }
  .footer li a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__social a { width: 44px; height: 44px; }
  /* Category tabs are the main way to move through 74 price rows on a phone,
     so give them a full 44px target. Trimming the strip's own padding at the
     same time keeps the sticky chrome from growing. */
  .catnav__scroll { padding-block: var(--s-2); }
  .catnav a { min-height: 44px; display: inline-flex; align-items: center; padding-block: 0; }
  .menu-block { scroll-margin-top: calc(var(--header-h) + 66px); }
  .header__tel { min-width: 44px; min-height: 44px; justify-content: center; }
  .header__brand { min-height: 44px; justify-content: center; }
  /* 9px uppercase is genuinely hard to read on a phone */
  .header__brand small { font-size: 10px; letter-spacing: .06em; }
  .hero__proof div span { font-size: 11px; }
  .burger { width: 46px; height: 46px; }

  /* Price rows: roomier and easier to scan with a thumb */
  .svc__btn { min-height: 46px; padding-inline: 1.5rem; }
  .price-row { padding: .8rem 0; }
  .price-row__name { font-size: var(--t-base); line-height: 1.35; }
  .menu-block { margin-bottom: var(--s-7); }
  .menu-block__head h3 { font-size: var(--t-xl); }

  /* Forms: 16px minimum stops iOS from zooming the page on focus */
  .field input, .field textarea, .field select { font-size: 16px; padding: .95rem 1rem; }
  .chip span { padding: .6rem 1rem; font-size: var(--t-base); }
  .chips { padding: var(--s-3); max-height: none; }

  .deal { padding: var(--s-4); }
  .marquee { padding-block: var(--s-3); }
  .marquee span { font-size: var(--t-xs); }

  /* The bottom bar replaces the floating bubble on phones. This rule must sit
     after .wa-float's base declaration in section 22, or it loses on order. */
  .wa-float { display: none !important; }

  /* Standalone text links need their own tap area (inside a card the whole
     card is already tappable, so only free-standing ones are padded). */
  a.link-arrow { min-height: 44px; align-items: center; }
  .crumbs a { display: inline-block; padding-block: 10px; }
}

@media (max-width: 400px) {
  .wrap { padding-inline: var(--s-4); }
  .hero__proof { gap: var(--s-3); }
}

/* ---------- 24. Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, html.js .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .s-head__title::after, .deal__was::after { transform: scaleX(1); }
}

/* ---------- 25. Print ---------------------------------------------------- */
@media print {
  .header, .announce, .catnav, .wa-float, .cta-band, .footer__social { display: none !important; }
  body { background: #fff; }
  .reveal { opacity: 1; transform: none; }
  .menu-cols { columns: 2; }
}