/* ============================================================
   מאיה סהר · קוראת בקלפים - demo site stylesheet
   Engraved celestial etching on cream paper.
   Built by VERVE Studio. RTL, Frank Ruhl Libre + Assistant.
   ============================================================ */

:root {
  /* Palette - engraved celestial on cream, crimson line art */
  --cream:       #F5EEE2;   /* hero + booking bg */
  --paper:       #FFFFFF;   /* services bg (one continuous background) */
  --sand:        #F2E7D3;   /* quote band */
  --sienna:      #A6212A;   /* line art, links, primary CTA (deep crimson) */
  --sienna-deep: #7E141C;   /* hover / pressed */
  --ink:         #2B241D;   /* near-black warm headings */
  --ink-muted:   #7C7166;   /* body copy */
  --blush:       #F8DCDA;   /* circles behind icons (blush rose) */
  --dusty-blue:  #9BB0C1;
  --ochre:       #D9A441;
  --rose:        #DB9B8A;
  --hairline:        rgba(43, 36, 29, 0.14);
  --hairline-strong: rgba(43, 36, 29, 0.28);

  --font-serif: 'Frank Ruhl Libre', 'Times New Roman', serif;
  --font-sans:  'Assistant', -apple-system, 'Segoe UI', sans-serif;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --r-full: 9999px;
  --r-md: 14px;
  --max-w: 1200px;
  --nav-h: 72px;

  --t-micro:   180ms cubic-bezier(0.32, 0.72, 0, 1);
  --t-default: 480ms cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-float: 0 10px 30px rgba(43, 36, 29, 0.16);
}

/* ---------------- Base ---------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 400 17.5px/1.75 var(--font-sans);
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--sienna);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

/* Skip link */
.sr-skip {
  position: fixed; top: -60px; inset-inline-start: 16px; z-index: 300;
  padding: 10px 18px; border-radius: var(--r-full);
  background: var(--ink); color: #fff; font-weight: 600; font-size: 15px;
  transition: top var(--t-micro);
}
.sr-skip:focus-visible { top: 16px; color: #fff; }

/* ---------------- Accessibility widget (IS 5568) ---------------- */

.a11y-toggle {
  position: fixed; bottom: 20px; inset-inline-start: 20px; z-index: 260;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: #fff;
  box-shadow: var(--shadow-float);
  transition: transform var(--t-micro);
}
.a11y-toggle:hover { transform: scale(1.06); }
.a11y-toggle svg { width: 24px; height: 24px; }

.a11y-panel {
  position: fixed; bottom: 80px; inset-inline-start: 20px; z-index: 260;
  width: 262px; padding: var(--s-5);
  background: #FFFDF9;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-float);
}
.a11y-panel h2 { font: 700 16px var(--font-sans); margin: 0 0 var(--s-4); }
.a11y-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); font-size: 14px; }
.a11y-btns { display: flex; gap: 6px; }
.a11y-btns button {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--hairline-strong);
  font-weight: 700;
}
.a11y-btns button:hover { background: var(--cream); }
.a11y-tog {
  display: block; width: 100%; text-align: start;
  padding: 9px 12px; margin-bottom: 6px;
  border: 1px solid var(--hairline);
  border-radius: 8px; font-size: 14px;
}
.a11y-tog:hover { background: var(--cream); }
.a11y-tog[aria-pressed="true"] {
  background: var(--blush);
  border-color: var(--sienna);
  color: var(--sienna-deep);
  font-weight: 700;
}
.a11y-reset { width: 100%; padding: 9px; margin-top: 4px; font-size: 13px; color: #A02F2F; border-radius: 8px; }
.a11y-reset:hover { background: rgba(160, 47, 47, 0.08); }
.a11y-foot { font-size: 11.5px; color: var(--ink-muted); margin: var(--s-3) 0 0; line-height: 1.5; }

/* ---------------- Nav ---------------- */

.nav-wrap {
  position: fixed; inset-inline: 0; top: 0; z-index: 200;
  background: rgba(245, 238, 226, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-default);
}
.nav-wrap.is-scrolled { border-bottom-color: var(--hairline); }

.nav {
  height: var(--nav-h);
  max-width: 1280px; margin-inline: auto;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--s-5);
  padding-inline: var(--s-5);
}

.nav-logo { display: inline-flex; align-items: center; gap: 12px; }
.nav-mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--sienna);
  border: 1px solid var(--hairline);
}
.nav-mark svg { width: 26px; height: 26px; }
.nav-word {
  display: grid; line-height: 1.15;
  font: 700 17px var(--font-serif);
  letter-spacing: 0.01em;
}
.nav-word span {
  font: 600 11.5px var(--font-sans);
  letter-spacing: 0.14em;
  color: var(--sienna);
}

.nav-links {
  display: flex; justify-content: center; gap: clamp(14px, 2.4vw, 30px);
  font: 500 15px var(--font-sans);
}
.nav-links a {
  position: relative; padding-block: 6px;
  color: var(--ink);
}
.nav-links a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0;
  height: 1.5px; background: var(--sienna);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--t-micro);
}

.nav-cta { display: flex; align-items: center; gap: var(--s-4); justify-self: end; }

/* Hamburger */
.menu-toggle {
  position: relative; display: none;
  width: 42px; height: 42px;
}
.menu-toggle span {
  position: absolute; inset-inline: 9px;
  height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform var(--t-micro), top var(--t-micro);
}
.menu-toggle span:nth-child(1) { top: 16px; }
.menu-toggle span:nth-child(2) { top: 24px; }
.menu-toggle.is-open span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { top: 20px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  background: var(--cream);
  opacity: 0; transition: opacity var(--t-default);
}
.mobile-menu.is-open { opacity: 1; }
.mobile-menu ul { display: grid; gap: var(--s-5); text-align: center; }
.mobile-menu li {
  opacity: 0; transform: translateY(14px);
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms),
              transform 500ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
}
.mobile-menu.is-open li { opacity: 1; transform: none; }
.mobile-menu a { font: 500 26px var(--font-serif); color: var(--ink); }
.mobile-menu .m-cta { color: var(--sienna); }

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--r-full);
  padding: 14px 32px;
  font: 600 16px var(--font-sans);
  line-height: 1.2;
  transition: transform var(--t-micro), background var(--t-micro),
              color var(--t-micro), border-color var(--t-micro);
}
.btn-primary { background: var(--sienna); color: #FBF6EC; }
.btn-primary:active { transform: translateY(1px); }
.btn-outline { border: 1.5px solid var(--ink); color: var(--ink); padding: 10px 24px; font-size: 15px; }
.btn-ghost { border: 1.5px solid var(--sienna); color: var(--sienna); }
.btn-ico { width: 19px; height: 19px; flex: none; }

/* ---------------- Hero ---------------- */

.hero {
  position: relative;
  min-height: 92vh;
  display: grid; align-items: center;
  padding: calc(var(--nav-h) + var(--s-8)) 0 var(--s-9);
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px; margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) minmax(0, 1.7fr) minmax(150px, 0.85fr);
  align-items: center;
  gap: var(--s-6);
  padding-inline: var(--s-5);
  /* Perspective stage for the pointer-tilt on the two art columns. */
  perspective: 1200px;
}

/* Static vertical offset via `top` (not transform) so the pointer-tilt is free
   to own the .hero-art transform without clobbering the offset. */
.hero-art { position: relative; display: grid; place-items: center; transform-style: preserve-3d; }
.hero-art--face { top: -1.1rem; }
.hero-art--moon { top: 1.9rem; }
.hero-sun {
  width: clamp(210px, 26vw, 380px);
  height: auto;
  will-change: transform, filter;
  /* Soft crimson aura; JS breathes --glow-blur / --glow-a. */
  --glow-blur: 18px;
  --glow-a: 0.12;
  filter: drop-shadow(0 8px var(--glow-blur) rgba(166, 33, 42, var(--glow-a)));
}

.hero-dot {
  position: absolute; border-radius: 50%;
  pointer-events: none;
}
.hero-dot--blue  { width: 20px; height: 20px; background: var(--dusty-blue); }
.hero-dot--ochre { width: 13px; height: 13px; background: var(--ochre); }
.hero-dot--rose  { width: 24px; height: 24px; background: var(--rose); }

.spark {
  position: absolute; color: var(--sienna);
  width: 16px; height: 16px;
  pointer-events: none;
}
.spark--1 { top: 16%; inset-inline-start: 31%; }
.spark--2 { top: 66%; inset-inline-end: 30%; width: 13px; }
.spark--3 { top: 9%;  inset-inline-end: 21%; width: 19px; }
.spark--4 { top: 42%; inset-inline-start: 20%; width: 12px; }
.spark--5 { top: 76%; inset-inline-start: 38%; width: 15px; }

/* Ambient drifting motes (canvas). Behind the hero content, non-interactive. */
.hero-motes {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

.hero-copy { text-align: center; }

.hero-eyebrow {
  font: 600 15px var(--font-sans);
  letter-spacing: 0.04em;
  color: var(--sienna);
  margin-bottom: var(--s-5);
}

.hero-h1 {
  font: 500 clamp(40px, 4.8vw, 64px)/1.14 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--s-5);
}
/* Overflow masks: generous compensation so Hebrew descenders (ק ף ,) survive */
.h1-mask {
  display: block; overflow: hidden;
  padding-bottom: 0.22em; margin-bottom: -0.22em;
}
.h1-line { display: block; }

.hero-sub {
  font-size: 19px; color: var(--ink-muted);
  max-width: 54ch; margin-inline: auto;
  margin-bottom: var(--s-6);
}

.hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  align-items: center; justify-content: center;
}
.hero-scroll {
  font: 600 16px var(--font-sans);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--hairline-strong);
  transition: color var(--t-micro), text-decoration-color var(--t-micro);
}

.hero-clouds {
  position: absolute; bottom: -2px; inset-inline: 0;
  width: 100%; height: auto;
  color: var(--sienna);
  opacity: 0.32;
  pointer-events: none;
}

/* ---------------- Services (the zigzag) ---------------- */

.services {
  background: var(--paper);
  padding-block: var(--s-10) var(--s-9);
}

.services-head {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--s-7);
}
.sec-label {
  font: 700 14.5px var(--font-sans);
  letter-spacing: 0.08em;
  color: var(--sienna);
  margin-bottom: var(--s-4);
}
.services-statement {
  font: 400 clamp(30px, 4.4vw, 54px)/1.32 var(--font-serif);
  color: var(--ink);
}

.svc-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(40px, 7vw, 104px);
  padding-block: clamp(56px, 9vh, 104px);
}
.svc-row--flip .svc-art { order: 2; }

.svc-art {
  position: relative;
  display: grid; place-items: center;
}
.svc-blush {
  /* The raster illustrations carry their own blush circle in-image. */
  display: none;
  position: absolute; z-index: 0;
  width: min(72%, 300px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blush);
  inset-inline-start: 3%; top: 7%;
}
.svc-row--flip .svc-blush { inset-inline-start: auto; inset-inline-end: 3%; }

.svc-icon {
  position: relative; z-index: 1;
  width: clamp(260px, 32vw, 420px); height: auto;
  color: var(--sienna);
  /* Line-art on near-white: multiply melts the image background into the page. */
  mix-blend-mode: multiply;
}

.svc-copy h3 {
  font: 500 clamp(26px, 3vw, 36px)/1.25 var(--font-serif);
  color: var(--ink);
  margin-bottom: var(--s-4);
}
.svc-copy p {
  color: var(--ink-muted);
  font-size: 17px;
  max-width: 46ch;
  margin-bottom: var(--s-5);
}
.svc-link {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 16px var(--font-sans);
  color: var(--sienna);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.link-arrow {
  display: inline-block;
  transition: transform var(--t-micro);
}

/* ---------------- Quote band ---------------- */

.quote-band {
  position: relative;
  background: var(--sand);
  padding-block: clamp(88px, 14vh, 150px);
  text-align: center;
  overflow: hidden;
}
.qb-rays {
  position: absolute; top: 50%;
  width: clamp(90px, 13vw, 200px); height: auto;
  color: var(--sienna);
  opacity: 0.75;
  pointer-events: none;
}
.qb-rays--start { inset-inline-start: 0; transform: translateY(-50%); }
.qb-rays--end   { inset-inline-end: 0;   transform: translateY(-50%) scaleX(-1); }

.qb-inner {
  position: relative;
  max-width: 800px; margin-inline: auto;
  padding-inline: var(--s-5);
}
.qb-quote {
  font: 400 clamp(24px, 3.4vw, 40px)/1.5 var(--font-serif);
  color: var(--ink);
  margin-bottom: var(--s-7);
}
.qb-attrib { display: grid; justify-items: center; gap: 4px; }
.qb-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream);
  border: 1px solid var(--sienna);
  color: var(--sienna);
  margin-bottom: var(--s-2);
}
.qb-avatar svg { width: 44px; height: 44px; }
.qb-name { font: 700 17px var(--font-sans); color: var(--sienna); }
.qb-role, .qb-about { font-size: 15.5px; color: var(--ink-muted); }

/* ---------------- Booking ---------------- */

.booking {
  background: var(--cream);
  text-align: center;
  padding-block: var(--s-10);
}
.booking-inner { max-width: 720px; margin-inline: auto; padding-inline: var(--s-5); }
.bk-moon {
  width: 92px; height: auto;
  margin: 0 auto var(--s-5);
  color: var(--sienna);
}
.booking h2 {
  font: 500 clamp(30px, 4vw, 46px)/1.25 var(--font-serif);
  margin-bottom: var(--s-4);
}
.booking p { color: var(--ink-muted); max-width: 52ch; margin-inline: auto; }
.booking-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: center;
  margin-top: var(--s-6);
}
.booking-hours { margin-top: var(--s-5); font-size: 15px; color: var(--ink-muted); }

/* ---------------- Footer ---------------- */

.footer {
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  padding-block: var(--s-8) var(--s-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-7);
  margin-bottom: var(--s-7);
}
.footer-brand p {
  margin-top: var(--s-4);
  color: var(--ink-muted); font-size: 15.5px; max-width: 34ch;
}
.footer-col h3 {
  font: 700 14px var(--font-sans);
  letter-spacing: 0.08em;
  color: var(--sienna);
  margin-bottom: var(--s-4);
}
.footer-col ul { display: grid; gap: 10px; font-size: 15.5px; color: var(--ink-muted); }
.footer-col a { color: var(--ink); transition: color var(--t-micro); }
.footer-disclaimer {
  font-size: 13.5px; color: var(--ink-muted);
  max-width: 72ch;
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3);
  margin-top: var(--s-5);
  font-size: 13px; color: var(--ink-muted);
}
.footer-bottom small { font-size: inherit; }

/* ---------------- Scroll reveals (IO baseline) ---------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1) var(--rd, 0ms),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1) var(--rd, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* No-JS: content must be visible */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------------- Drawn by default (load-bearing) ----------------
   Complete art for no-JS / reduced-motion; JS applies the dash
   values only when motion is allowed. Never set dasharray here. */
.draw-path { stroke-dashoffset: 0; }

.dot {
  fill: currentColor; stroke: none;
  transform-box: fill-box; transform-origin: center;
}
.dot--blue  { fill: var(--dusty-blue); }
.dot--ochre { fill: var(--ochre); }
.dot--rose  { fill: var(--rose); }

.pm-glyph { transform-box: fill-box; transform-origin: center; }
.zw-rot   { transform-box: fill-box; transform-origin: center; will-change: transform; }
.cf-steam path { opacity: 0.6; }

/* ---------------- a11y body classes ---------------- */

body.a11y-contrast {
  --cream: #ffffff;
  --paper: #ffffff;
  --sand:  #ffffff;
  --blush: #ffffff;
  --ink:       #000000;
  --ink-muted: #000000;
  --sienna:      #7A0E16;
  --sienna-deep: #000000;
  --dusty-blue: #00306e;
  --ochre:      #6e4a00;
  --rose:       #6e0f00;
  --hairline:        rgba(0, 0, 0, 0.4);
  --hairline-strong: rgba(0, 0, 0, 0.6);
}
body.a11y-contrast .nav-wrap { background: #ffffff; }
body.a11y-contrast .btn-primary { background: #000000; color: #ffffff; }
body.a11y-contrast .mobile-menu { background: #ffffff; }

body.a11y-links a:not(.btn):not(.nav-logo) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  font-weight: 700;
}

body.a11y-motion *, body.a11y-motion *::before, body.a11y-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
body.a11y-motion .draw-path {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}
body.a11y-motion .reveal { opacity: 1 !important; transform: none !important; }
body.a11y-motion .hero-motes { display: none !important; }
body.a11y-motion .hero-sun { filter: none !important; transform: none !important; }

body.a11y-readable { letter-spacing: 0.02em; word-spacing: 0.06em; }
body.a11y-readable .hero-h1,
body.a11y-readable .services-statement,
body.a11y-readable .svc-copy h3,
body.a11y-readable .qb-quote,
body.a11y-readable .booking h2 { font-family: var(--font-sans); }

/* ---------------- Reduced motion (OS preference) ---------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .draw-path {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  .reveal { opacity: 1; transform: none; transition: opacity 200ms ease; }
  .hero-motes { display: none !important; }
  .hero-sun { filter: none !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------- Hover layer (fine pointers only) ---------------- */

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover::after { transform: scaleX(1); }
  .btn-primary:hover { background: var(--sienna-deep); transform: translateY(-1px); }
  .btn-outline:hover { border-color: var(--sienna); color: var(--sienna); }
  .btn-ghost:hover { background: var(--sienna); color: #FBF6EC; }
  .hero-scroll:hover { color: var(--sienna); text-decoration-color: var(--sienna); }
  .svc-link:hover .link-arrow { transform: translateX(-5px); }
  .svc-link:hover { color: var(--sienna-deep); }
  .footer-col a:hover { color: var(--sienna); }
}

/* ---------------- Breakpoints ---------------- */

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .menu-toggle { display: block; }
  .nav { grid-template-columns: auto auto; justify-content: space-between; }
  .nav-cta .btn { display: none; }

  .hero-inner {
    grid-template-columns: minmax(90px, 0.55fr) minmax(0, 2.2fr) minmax(90px, 0.55fr);
    gap: var(--s-4);
  }
  .hero-sun { width: clamp(130px, 17vw, 220px); }
}

@media (max-width: 720px) {
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + var(--s-7)); }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art--face { order: 0; top: 0; transform: none; margin-bottom: var(--s-4); }
  .hero-copy { order: 1; }
  .hero-art--moon { order: 2; top: 0; transform: none; margin-top: var(--s-6); }
  .hero-art--face .hero-sun { width: 190px; }
  .hero-art--moon .hero-sun { width: 170px; }
  .spark--1 { top: 8%; inset-inline-start: 12%; }
  .spark--2 { top: auto; bottom: 18%; inset-inline-end: 12%; }
  .spark--3 { top: 5%; inset-inline-end: 10%; }
  .spark--4 { top: 30%; inset-inline-start: 8%; }
  .spark--5 { top: auto; bottom: 30%; inset-inline-start: 14%; }

  .services { padding-block: var(--s-8); }
  .svc-row {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-block: var(--s-7);
  }
  .svc-row--flip .svc-art { order: 0; }
  .svc-icon { width: min(74vw, 340px); }
  .svc-blush { width: min(62%, 240px); }

  .qb-rays { width: 74px; opacity: 0.5; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

@media (max-width: 480px) {
  body { font-size: 16.5px; }
  .hero-h1 { font-size: 40px; }
  .hero-actions .btn, .booking-actions .btn { width: 100%; }
  .hero-sub { font-size: 17.5px; }
  .svc-icon { width: min(82vw, 320px); }
  .footer-bottom { justify-content: center; text-align: center; }
}