/* Nail Oasis — site styles (mockup 2026-09-28). No frameworks. */
/* metric-matched local fallbacks (from concept B): text keeps its shape while the web fonts arrive, so the swap barely moves anything */
@font-face { font-family: 'Cormorant Fallback'; src: local('Times New Roman'), local('Times'), local('Georgia'); size-adjust: 89%; ascent-override: 104%; descent-override: 32%; }
@font-face { font-family: 'DM Sans Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 102%; ascent-override: 96%; descent-override: 30%; }
:root {
  /* existing brand tokens (unchanged) */
  --cream: oklch(96% 0.022 65);
  --cream-dark: oklch(92% 0.028 68);
  --terra: oklch(57% 0.13 34);
  --terra-light: oklch(75% 0.09 38);
  --terra-dark: oklch(42% 0.11 32);
  --sage: oklch(60% 0.072 152);
  --sage-light: oklch(82% 0.045 152);
  --sand: oklch(88% 0.042 78);
  --sand-dark: oklch(75% 0.055 72);
  --ink: oklch(24% 0.025 50);
  --ink-light: oklch(45% 0.02 55);
  --white: oklch(99% 0.008 65);
  /* added: deeper sage for AA text, and the logo's own oasis blue */
  --sage-deep: oklch(44% 0.06 152);
  --terra-text: #a3492f; /* terra tuned for AA on cream at small sizes */
  --oasis: #8da29d;
  --oasis-deep: #55706b;
  --oasis-mist: #c9dcd9;
  --dusk: #2d2430;
  --rule: color-mix(in oklab, var(--sand-dark) 55%, transparent);
  --inset: clamp(8px, .9vw, 14px);
  --radius: clamp(24px, 2.6vw, 40px);
  --display: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;
  --body: 'DM Sans', 'DM Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Dancing Script', 'Brush Script MT', cursive;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(18px, 4.2vw, 64px);
  --maxw: 1360px;
  --water-h: clamp(150px, 22vh, 210px);
  --range-h: clamp(210px, 33vh, 320px);
  --nav-h: 84px;
}
@view-transition { navigation: auto; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { font-family: var(--body); background: var(--cream); color: var(--ink); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--terra-dark); outline-offset: 3px; border-radius: 8px; }
.about :focus-visible, .footer :focus-visible, .booking__go :focus-visible, .lightbox :focus-visible, .path:hover:focus-visible, .chat__head :focus-visible { outline-color: #fff3e8; }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-size: 14px; }
.skip:focus { top: 12px; }

/* ── type ──────────────────────────────────────────── */
.kicker { display: block; font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(21px, 1.7vw, 26px); color: var(--terra-text); letter-spacing: .1px; margin-bottom: clamp(8px, 1.2vh, 14px); }
.kicker--script { font-family: var(--script); font-style: normal; font-weight: 500; font-size: clamp(20px, 1.65vw, 25px); letter-spacing: .2px; }
.kicker--sage { color: var(--sage-deep); }
.kicker--light { color: #f7cdb6; font-size: clamp(24px, 2vw, 28px); }
h2.title { font: 300 clamp(2.8rem, 5.6vw, 5.2rem)/.95 var(--display); letter-spacing: -.025em; color: var(--ink); }
h2.title em { font-style: italic; font-weight: 400; }
.lede { margin-top: 22px; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.7; color: var(--ink-light); max-width: 46ch; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ── buttons ───────────────────────────────────────── */
.btn { --bg: var(--terra); --fg: var(--white); --bd: var(--terra); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 999px; font: 500 15px/1 var(--body); letter-spacing: .2px; text-decoration: none; color: var(--fg); background: var(--bg); border: 1.5px solid var(--bd); cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s; position: relative; overflow: hidden; isolation: isolate; white-space: nowrap; }
.btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .38) 50%, transparent 65%); transform: translateX(-120%); transition: transform .9s var(--ease); z-index: -1; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px color-mix(in oklab, var(--bd) 80%, black); }
.btn:hover::before { transform: translateX(120%); }
.btn--sm { padding: 10px 18px; font-size: 13.5px; }
.btn--lg { padding: 18px 32px; font-size: 16.5px; }
.btn--ghost { --bg: rgb(255 250 245 / .4); --fg: var(--terra-dark); }
.btn--ghost:hover { --bg: rgb(176 96 64 / .07); }
.btn--sage { --bg: var(--sage-deep); --bd: var(--sage-deep); }
.btn--sage-ghost { --bg: transparent; --fg: var(--sage-deep); --bd: var(--sage-deep); }
.btn--sage-ghost:hover { --bg: rgb(106 143 114 / .08); }
.nav__ctas .btn--sage-ghost, .menu-sheet .btn--sage-ghost { --bg: rgb(255 250 245 / .45); }
.gallery-cta .btn { --bg: transparent; --fg: var(--terra-dark); --bd: color-mix(in oklab, var(--terra) 45%, transparent); }
.gallery-cta .btn--sage { --fg: var(--sage-deep); --bd: color-mix(in oklab, var(--sage-deep) 45%, transparent); }
.gallery-cta .btn:hover { --bg: rgb(255 250 245 / .7); }
.btn--light { --bg: var(--white); --fg: var(--terra-dark); --bd: var(--white); }

/* ── nav ───────────────────────────────────────────── */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .5s var(--ease), box-shadow .5s var(--ease); }
.nav.is-scrolled { background: rgb(251 243 234 / .8); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 1px 0 rgb(176 96 64 / .1), 0 10px 30px -20px rgb(120 60 30 / .35); }
.nav__inner { max-width: 1600px; margin: 0 auto; padding: 16px var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; transition: padding .5s var(--ease); }
.nav.is-scrolled .nav__inner { padding-block: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; background: rgb(255 250 245 / .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 40px; padding: 5px 16px 5px 5px; border: 1px solid rgb(176 96 64 / .16); width: fit-content; box-shadow: 0 6px 18px -10px rgb(120 60 30 / .35); position: relative; z-index: 2; }
.brand img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgb(255 255 255 / .8), 0 2px 10px rgb(176 96 64 / .25); }
.brand span { font-family: var(--script); font-size: 23px; color: var(--terra-dark); letter-spacing: .3px; }
.nav__links { display: flex; gap: clamp(18px, 2.4vw, 36px); list-style: none; }
.nav__links a { font-size: 14.5px; font-weight: 500; color: var(--ink-light); text-decoration: none; letter-spacing: .2px; position: relative; padding: 6px 0; transition: color .25s; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--terra); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--terra-dark); }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav__ctas { display: flex; gap: 10px; justify-content: flex-end; }
.nav__book { display: none; }
.nav__burger { display: none; justify-self: end; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgb(176 96 64 / .2); background: rgb(255 250 245 / .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer; position: relative; z-index: 2; }
.menu-sheet { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: center; padding: 96px var(--gutter) 40px; background: linear-gradient(180deg, #fbefe4 0%, #f8e2d2 70%, #e9e5dc 100%); clip-path: circle(0% at calc(100% - 44px) 40px); transition: clip-path .8s var(--ease), visibility 0s linear .8s; visibility: hidden; }
.menu-sheet.is-open { clip-path: circle(150% at calc(100% - 44px) 40px); visibility: visible; transition: clip-path .8s var(--ease), visibility 0s; }
.menu-sheet ul { list-style: none; }
.menu-open .nav__ctas { visibility: hidden; }
.menu-sheet li a { display: block; font: 300 clamp(40px, 11vw, 64px)/1.15 var(--display); color: var(--ink); text-decoration: none; padding: 6px 0; letter-spacing: -.01em; }
.menu-sheet .mobile-ctas { margin-top: 36px; display: grid; gap: 12px; }
.menu-sheet .mobile-ctas .btn { padding: 16px 22px; font-size: 16px; }

/* ── hero ──────────────────────────────────────────── */
.hero { position: relative; min-height: max(100svh, 760px); overflow: clip; isolation: isolate; display: grid; }
.hero__sky { position: absolute; inset: 0; z-index: -8;
  background:
    radial-gradient(38% 34% at 72% 58%, rgb(255 244 226 / 1) 0%, rgb(255 236 214 / .55) 45%, rgb(255 236 214 / 0) 75%),
    linear-gradient(180deg, #fbefe5 0%, #fbe6d6 34%, #f8dcc8 52%, #efdccd 64%, #dfe3da 76%, #d2e1dd 100%); }
.js .hero__ring:not(.is-placed) { visibility: hidden; }
.hero__ring { position: absolute; z-index: -7; aspect-ratio: 1; pointer-events: none; overflow: visible; rotate: 90deg; }
.hero__ring circle { fill: none; stroke: rgb(156 135 122 / .6); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hero__sun { position: absolute; z-index: -7; left: 50%; bottom: calc(var(--water-h) + var(--range-h) * .35); width: min(70vw, 900px); aspect-ratio: 2; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 236 206 / .85), rgb(255 226 196 / .35) 55%, transparent); pointer-events: none; }
.js .hero .hero__ring circle { stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s cubic-bezier(.65, 0, .35, 1) .35s; }
.js .hero.is-in .hero__ring circle { stroke-dashoffset: 0; }
.js .hero .hero__sun { opacity: 0; scale: .8; transition: opacity 2.4s ease .1s, scale 2.6s var(--ease) .1s; }
.js .hero.is-in .hero__sun { opacity: 1; scale: 1; }
.js .hero .water::before { transform: scaleX(0); transition: transform 1.6s var(--ease) .25s; }
.js .hero.is-in .water::before { transform: scaleX(1); }
.scene { position: absolute; left: 0; right: 0; bottom: 0; z-index: -6; height: calc(var(--water-h) + var(--range-h)); pointer-events: none; }
.range { position: absolute; left: -3%; width: 106%; bottom: var(--water-h); height: var(--range-h); transform: translate3d(calc(var(--mx, 0) * var(--dx, 0px)), calc(var(--py, 0) * var(--dy, 0) * 1px), 0); }
.range svg, .ridge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.range--far { --dx: -5px; --dy: .05; }
.range--mid { --dx: -11px; --dy: .1; }
.range--near { --dx: -20px; --dy: .17; }
.water { position: absolute; left: 0; right: 0; bottom: 0; height: var(--water-h); overflow: hidden; background: linear-gradient(180deg, #bcd3d2 0%, #c9dcd9 26%, #dde5dc 64%, var(--cream) 100%); }
.water::before { content: ''; position: absolute; inset: 0 0 auto; height: 1.5px; background: rgb(255 255 255 / .9); box-shadow: 0 0 14px 1px rgb(255 255 255 / .8); z-index: 2; }
.water .mirror { position: absolute; left: -3%; width: 106%; top: 0; height: var(--range-h); transform: scaleY(-1) translate3d(calc(var(--mx, 0) * -14px), 0, 0); transform-origin: 50% 0; translate: 0 100%; opacity: .32; filter: url(#ripple) blur(.5px); -webkit-mask-image: linear-gradient(to top, #000 0%, rgb(0 0 0 / .4) 30%, transparent 62%); mask-image: linear-gradient(to top, #000 0%, rgb(0 0 0 / .4) 30%, transparent 62%); }
.water .mirror svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.streak { position: absolute; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .95), transparent); animation: drift 10s ease-in-out 6 alternate; z-index: 1; }
@keyframes drift { from { translate: -22px 0; opacity: .3; } to { translate: 22px 0; opacity: .9; } }
.grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .085; mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .15 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero__inner { position: relative; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(120px, 17vh, 160px) var(--gutter) var(--water-h); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; gap: clamp(24px, 4vw, 72px); }
.hero__copy { align-self: start; }
.hero h1 { font-weight: inherit; }
.headline { display: block; font-family: var(--display); font-weight: 300; font-size: clamp(3.2rem, 7vw, 7rem); line-height: .9; letter-spacing: -.028em; color: var(--ink); }
.headline span, .headline em { display: block; }
.headline em { font-style: italic; font-weight: 400; color: var(--terra); padding-left: .62em; letter-spacing: -.02em; }
.headline .l3 { padding-left: .16em; }
.tagline { margin-top: clamp(18px, 3vh, 28px); max-width: 36ch; font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.6; color: var(--ink-light); }
.hero__ctas { margin-top: clamp(22px, 3vh, 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.hero__ctas .btn--sage-ghost { --bg: rgb(255 250 245 / .78); }
.hero__trust { flex-basis: 100%; font-size: 12.5px; letter-spacing: .3px; color: var(--ink-light); }
.window { position: relative; align-self: end; justify-self: center; width: min(100%, 420px); }
.arch { position: relative; aspect-ratio: 3 / 4; border-radius: 999px 999px 20px 20px; overflow: hidden; background: #e9d2c2; box-shadow: 0 50px 90px -40px rgb(90 38 18 / .5), 0 0 0 1px rgb(255 255 255 / .55); transform: translateZ(0); }
.reel { position: absolute; inset: 0; display: flex; gap: 10px; will-change: transform; } /* the arch is a window onto a slow, endless reel of sets (site.js rolls it; still for reduced motion) */
.reel img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
.arch::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .22) 45%, transparent 58%); transform: translateX(-100%); animation: sheen 7s var(--ease) 1.6s 4; pointer-events: none; }
@keyframes sheen { 0%, 72% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.window figcaption { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; z-index: 2; display: grid; }
.window figcaption span { grid-area: 1 / 1; justify-self: center; white-space: nowrap; font: italic 400 17px/1 var(--display); color: var(--ink); background: rgb(255 250 245 / .8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 9px 16px 10px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .8); opacity: 0; translate: 0 6px; transition: opacity .8s ease, translate .8s var(--ease); }
.window figcaption span.is-on { opacity: 1; translate: 0 0; }
.slide-toggle { display: none; }
.js .slide-toggle { display: grid; }
.slide-toggle { position: absolute; z-index: 3; right: 14px; bottom: 16px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .8); background: rgb(255 250 245 / .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); place-items: center; cursor: pointer; color: var(--ink); }
.slide-toggle { opacity: 0; pointer-events: none; transition: opacity .2s; }
.slide-toggle:focus-visible { opacity: 1; pointer-events: auto; }
.slide-toggle[hidden] { display: none !important; }
.slide-toggle svg { width: 12px; height: 12px; }
.slide-toggle .play { display: none; }
.slide-toggle[aria-pressed="true"] .play { display: block; }
.slide-toggle[aria-pressed="true"] .pause { display: none; }
.mirror-arch { position: absolute; left: 0; right: 0; top: 100%; aspect-ratio: 3 / 4; border-radius: 999px 999px 20px 20px; overflow: hidden; transform: scaleY(-1); transform-origin: 50% 50%; opacity: .13; filter: url(#ripple) blur(1.8px) saturate(.6) brightness(1.25); -webkit-mask-image: linear-gradient(to bottom, transparent 80%, rgb(0 0 0 / .7) 100%); mask-image: linear-gradient(to bottom, transparent 80%, rgb(0 0 0 / .7) 100%); pointer-events: none; }
.explore { position: absolute; left: 50%; bottom: calc(var(--water-h) - 64px); translate: -50% 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 500; letter-spacing: 2.4px; text-transform: uppercase; color: var(--oasis-deep); text-decoration: none; }
.explore i { width: 1px; height: 30px; background: linear-gradient(to bottom, var(--oasis-deep), transparent); animation: pulse 2s ease-in-out 5; transform-origin: top; }
@keyframes pulse { 0%, 100% { opacity: .3; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }
/* the one orchestrated load moment */
.js .hero [data-in] { translate: 0 18px; transition: translate 1.4s var(--ease); transition-delay: var(--d, 0s); }
.js .hero [data-fade] { opacity: 0; transition: opacity 1.1s var(--ease), translate 1.4s var(--ease); transition-delay: var(--d, 0s); }
.js .hero.is-in [data-in] { translate: 0 0; }
.js .hero.is-in [data-fade] { opacity: 1; }
.js .hero .range { opacity: 0; translate: 0 36px; transition: opacity 1.6s var(--ease), translate 1.9s var(--ease); transition-delay: var(--d, 0s); }
.js .hero.is-in .range { opacity: 1; translate: 0 0; }
.js .hero .arch { clip-path: inset(62% 0 0 0 round 999px 999px 20px 20px); transition: clip-path 1.5s var(--ease) .05s; }
.js .hero.is-in .arch { clip-path: inset(0 0 0 0 round 999px 999px 20px 20px); }


/* desktop: the booking row sits on open sky, above the red rock (the copy is lifted a little and the ranges sit a little lower) */
@media (min-width: 861px) {
  .hero { --range-h: clamp(170px, 25vh, 240px); }
  .hero__inner { padding-top: clamp(100px, 12.5vh, 130px); }
  .hero .headline { font-size: clamp(3.2rem, 6.1vw, 6.3rem); }
  .hero .tagline { margin-top: clamp(14px, 2.2vh, 22px); }
}
@media (min-width: 861px) and (max-height: 999px) { .hero__trust { display: none; } } /* on shorter desktop screens the same line waits beside the Square button in the booking section */

/* ── paths band ────────────────────────────────────── */
.paths-band { position: relative; z-index: 3; margin-top: calc(var(--water-h) * -.46); padding: 0 var(--gutter); }
.paths { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.path { --accent: var(--terra); display: grid; grid-template-columns: clamp(92px, 9vw, 118px) 1fr; gap: 18px; align-items: center; text-decoration: none; padding: 12px 22px 12px 12px; border-radius: 28px; background: rgb(255 252 248 / .9); border: 1px solid rgb(255 255 255 / .9); box-shadow: inset 0 1px 0 rgb(255 255 255 / .8), 0 28px 60px -34px rgb(60 70 65 / .55); color: var(--ink); transition: background .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease), color .3s; overflow: hidden; }
.path--shop { --accent: var(--sage-deep); }

.path__media { aspect-ratio: 3 / 4; border-radius: 999px 999px 14px 14px; overflow: hidden; background: #e8d6c8; }
.path__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.path__body { display: grid; justify-items: start; }
.path .ic { font-size: 20px; line-height: 1; margin-bottom: 8px; }
.path .t { display: block; font: 400 clamp(22px, 1.9vw, 26px)/1.1 var(--display); letter-spacing: -.005em; }
.path p { font-size: 13.5px; line-height: 1.55; color: var(--ink-light); margin: 6px 0 12px; transition: color .3s; max-width: 34ch; }
.path .go { font-size: 13.5px; font-weight: 600; letter-spacing: .2px; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; transition: color .3s; }
.path .go i { font-style: normal; transition: transform .45s var(--ease); }
.path:hover { background: var(--accent); color: var(--white); transform: translateY(-4px); box-shadow: 0 34px 70px -34px color-mix(in oklab, var(--accent) 75%, black); }
.path.path--studio .go { color: var(--terra-text); }
.path:hover p, .path:hover .go, .path.path--studio:hover .go { color: rgb(255 255 255 / .92); }
.path:hover .path__media img { transform: scale(1.07); }
.path:hover .go i { transform: translateX(5px); }

/* ── sections ──────────────────────────────────────── */
.section { position: relative; padding: clamp(84px, 11vw, 150px) var(--gutter); }
.wrap { max-width: var(--maxw); margin: 0 auto; }

/* services — the price list (concept B): a giant title with the intro beside it, a sandstone strata rule, every price in two columns, then one booking line */
.services__head { display: grid; gap: 22px; }
h2.title--xl { font-size: clamp(3.4rem, 9.4vw, 9.4rem); line-height: .9; letter-spacing: -.018em; }
.services .kicker--script { font-size: clamp(24px, 2.1vw, 31px); margin-bottom: 8px; }
.services__head .lede { margin-top: 0; max-width: 44ch; }
.services__head .lede--entity { margin-top: 14px; font-size: 15px; }
.price-list { margin-top: clamp(44px, 6vw, 88px); }
.strata-rule { display: block; width: 100%; height: 26px; overflow: visible; margin-bottom: 6px; }
.price-list__cols { display: grid; }
.svc { padding: 26px 0 28px; }
.svc h3 { display: flex; align-items: baseline; gap: 10px; font: 400 clamp(29px, 2.7vw, 38px)/1.1 var(--display); letter-spacing: -.005em; color: var(--ink); }
.svc h3 .spark { font-size: .46em; color: var(--terra); translate: 0 -.55em; }
.svc ul { list-style: none; margin-top: 12px; }
.svc li { display: flex; align-items: baseline; gap: 14px; padding: 6px 0; font-size: 16.5px; line-height: 1.35; color: var(--ink-light); }
.svc li .dots { flex: 1; min-width: 18px; border-bottom: 1.5px dotted color-mix(in oklab, var(--sand-dark) 85%, transparent); translate: 0 -5px; }
.svc li .price { font: 400 27px/1 var(--display); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.svc + .svc { border-top: 1px solid var(--rule); }
.svc > ul { grid-column: 1 / -1; }
.svc__about { grid-column: 1 / -1; grid-row: 1; interpolate-size: allow-keywords; }
.svc__about summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 48px; padding-right: 96px; border-radius: 10px; }
.svc__about summary::-webkit-details-marker { display: none; }
.svc__about summary h3 { transition: color .25s; }
.svc__about summary:hover h3, .svc__about[open] summary h3 { color: var(--terra-dark); }
.svc__about summary::after, .qa summary::after { content: ''; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--terra) 42%, transparent); background: linear-gradient(var(--terra-dark) 0 0) center / 11px 1.5px no-repeat, linear-gradient(var(--terra-dark) 0 0) center / 1.5px 11px no-repeat; transition: transform .45s var(--ease), background-color .3s; }
.svc__about[open] summary::after, .qa[open] summary::after { transform: rotate(45deg); background-color: rgb(176 96 64 / .08); }
.svc__about::details-content, .qa::details-content { block-size: 0; overflow: clip; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.svc__about[open]::details-content, .qa[open]::details-content { block-size: auto; }
.svc__book { grid-column: 2; grid-row: 1; margin-top: 2px; position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 17px; border-radius: 999px; border: 1.5px solid color-mix(in oklab, var(--terra) 45%, transparent); color: var(--terra-dark); font: 500 14px/1 var(--body); letter-spacing: .2px; text-decoration: none; transition: background .25s, color .25s, border-color .25s, transform .35s var(--ease); }
.svc__book:hover, .svc__book:focus-visible { background: var(--terra); border-color: var(--terra); color: var(--white); transform: translateY(-1px); }
.dur { flex: none; font-size: 12.5px; font-weight: 500; letter-spacing: .3px; color: var(--oasis-deep); background: rgb(141 162 157 / .15); padding: 6px 11px; border-radius: 999px; white-space: nowrap; }
.svc__desc { margin: 12px 0 4px; font-size: 15px; line-height: 1.7; color: var(--ink-light); text-align: justify; text-justify: inter-word; text-wrap: pretty; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
@media (min-width: 900px) { .svc__desc { -webkit-hyphens: manual; hyphens: manual; } } /* wide columns justify cleanly without breaking words */
@media (max-width: 560px) { .svc__desc { font-size: 14.5px; hyphenate-limit-chars: 6 3 3; } } /* narrow phones: a few more hyphen breaks keep the justified lines even */
.svc ul { margin-top: 10px; }
.book-line { margin-top: clamp(28px, 3.5vw, 48px); padding-top: clamp(32px, 4vw, 52px); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.book-line .nudge { font: italic 400 clamp(34px, 3.8vw, 54px)/1.05 var(--display); color: var(--ink); }
@media (min-width: 900px) {
  .services__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .services__title { grid-column: 1 / span 8; }
  .services__head .services__intro { grid-column: 9 / span 4; padding-bottom: 14px; }
  .price-list__cols { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: clamp(48px, 7vw, 120px); align-items: start; } /* left column first (same reading order), rows shared: each pair starts on one line */
  .price-list__cols .svc:nth-child(5) { border-top: 0; }
}

/* press-ons — the boutique shelf */
.services { padding-bottom: clamp(40px, 4.5vw, 64px); }
.shop { padding-top: clamp(56px, 6vw, 88px); background: linear-gradient(180deg, var(--cream) 0%, #eef0e6 9%, #e8ede5 100%); overflow: clip; }
.shop .wrap { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
@media (min-width: 861px) { .shop .wrap > div:first-child { position: sticky; top: 120px; padding-top: clamp(8px, 2vw, 32px); } } /* the copy rides beside the shelf instead of floating mid-height */
.shop h2 em { color: var(--sage-deep); }
.shop p.body { font-size: clamp(16px, 1.2vw, 17.5px); line-height: 1.8; color: var(--ink-light); max-width: 46ch; margin-top: 20px; }
.actions { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; }
.shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); padding-bottom: clamp(30px, 5vw, 70px); }
.shelf .tile:nth-child(2n) { translate: 0 clamp(30px, 5vw, 70px); }
.tile { text-decoration: none; color: var(--ink); display: block; }
.tile__arch { position: relative; aspect-ratio: 3 / 4; border-radius: 999px 999px 18px 18px; overflow: hidden; background: #dfe3d8; box-shadow: 0 30px 60px -34px rgb(40 60 45 / .55); }
.tile__arch img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile__arch::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 32%, rgb(255 255 255 / .35) 48%, transparent 62%); transform: translateX(-110%); transition: transform 1.1s var(--ease); }
.tile:hover .tile__arch img { transform: scale(1.06); }
.tile:hover .tile__arch::after { transform: translateX(110%); }
.tile figcaption { margin-top: 14px; font: italic 400 21px/1.2 var(--display); color: var(--ink); text-align: center; }

/* about — sunset */
.about { color: var(--white); background: radial-gradient(45% 70% at 18% 45%, rgb(214 128 92 / .42) 0%, rgb(214 128 92 / 0) 65%), linear-gradient(165deg, #96482f 0%, #86402b 50%, #6f3423 100%); overflow: clip; }
.about::before { content: ''; position: absolute; width: min(70vw, 820px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(255 255 255 / .16); right: -12vw; top: 50%; translate: 0 -50%; }
.about .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 120px); align-items: center; position: relative; }
.about__photo { position: relative; justify-self: center; width: min(100%, 420px); }
.about__photo .tile__arch { box-shadow: 0 50px 90px -40px rgb(40 12 4 / .7); background: #8e4a33; }
.about__photo .ring { position: absolute; inset: -22px -22px auto; aspect-ratio: 3 / 4; border-radius: 999px 999px 26px 26px; border: 1px solid rgb(255 255 255 / .28); pointer-events: none; }
.about h2.title { color: var(--white); }
.quote-mark { font: 400 110px/1 var(--display); color: rgb(255 255 255 / .18); height: 58px; margin-top: 18px; }
.about blockquote p { font: italic 400 clamp(19px, 1.75vw, 24px)/1.65 var(--display); color: rgb(255 255 255 / .92); max-width: 40ch; }
.about blockquote p + p { margin-top: 16px; }
.about__letter { width: fit-content; max-width: 100%; } /* as wide as the quote, so the sign-off centres under it */
.about__signoff { display: flex; flex-direction: column; align-items: center; text-align: center; }
.signature { margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.signature i { height: 1px; width: 48px; background: rgb(255 255 255 / .35); }
.signature span { font: 500 clamp(32px, 2.8vw, 40px)/1 var(--script); color: var(--white); clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--ease) .2s; }
.signature.is-in span, .no-js .signature span { clip-path: inset(0 0 0 0); }
.byline { margin-top: 10px; font-size: 14px; letter-spacing: .5px; color: rgb(255 255 255 / .82); }
.badge--about { display: inline-block; margin-top: 26px; padding: 8px 12px; border-radius: 16px; background: rgb(255 255 255 / .94); box-shadow: 0 14px 30px -18px rgb(0 0 0 / .5); }
.badge--about img { height: 50px; width: auto; }

/* gallery */
.gallery-head { max-width: 760px; margin: 0 auto clamp(40px, 6vw, 72px); }
.gallery-head .lede a { color: var(--terra-dark); font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.gallery-head .lede a.sage { color: var(--sage-deep); }
.grid-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 34px); max-width: 1180px; margin: 0 auto; }
.grid-gallery button.tile { align-self: start; border: 0; background: none; cursor: zoom-in; text-align: inherit; font: inherit; width: 100%; }
.grid-gallery .tile__arch { box-shadow: 0 30px 60px -34px rgb(90 40 20 / .45); background: #ecd9cb; }
.gallery-cta { margin-top: clamp(60px, 8vw, 110px); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; inset: 0; margin: 0; }
.lightbox::backdrop { background: rgb(38 28 24 / .82); backdrop-filter: blur(8px); }
.lightbox__inner { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 24px; }
.lightbox figure { display: grid; justify-items: center; gap: 14px; }
.lightbox img { max-height: 78dvh; max-width: min(92vw, 720px); width: auto; border-radius: 28px; box-shadow: 0 40px 100px -30px rgb(0 0 0 / .7); }
.lightbox figcaption { font: italic 400 24px/1.2 var(--display); color: var(--white); }
.lb-ctas { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lightbox img { view-transition-name: lb-photo; }
.lb-btn { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .35); background: rgb(255 255 255 / .12); color: var(--white); font-size: 22px; cursor: pointer; backdrop-filter: blur(6px); display: grid; place-items: center; }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; translate: 0 -50%; }
.lb-next { right: 20px; top: 50%; translate: 0 -50%; }

/* testimonials — the pour (concept C's live gel shader), with every word on frosted glass so it always reads */
.reviews { padding: clamp(28px, 4vw, 64px) var(--inset); }
.reviews__panel { position: relative; isolation: isolate; overflow: clip; border-radius: var(--radius); padding: clamp(84px, 10vw, 150px) var(--gutter) clamp(72px, 8vw, 124px);
  /* CSS gel: shown before WebGL paints, and wherever WebGL is unavailable */
  background:
    radial-gradient(38% 22% at 71% 16%, rgb(255 253 249 / .95), rgb(255 253 249 / 0) 70%),
    radial-gradient(34% 26% at 12% 78%, rgb(141 162 157 / .8), rgb(141 162 157 / 0) 72%),
    radial-gradient(26% 20% at 90% 66%, rgb(194 212 215 / .85), rgb(194 212 215 / 0) 72%),
    radial-gradient(60% 30% at 46% 106%, #b85a3c, rgb(184 90 60 / 0) 78%),
    radial-gradient(40% 26% at 96% 104%, #9a4630, rgb(154 70 48 / 0) 80%),
    linear-gradient(180deg, #f9eee4 0%, #f4e2d2 36%, #eecab0 60%, #dc9676 84%, #c97252 100%); }
.js .reviews__panel:not(.no-gl) { /* WebGL is about to pour: start from a still, pale glaze */
  background: radial-gradient(38% 26% at 60% 20%, rgb(255 253 249 / .95), rgb(255 253 249 / 0) 70%), radial-gradient(70% 34% at 50% 106%, rgb(236 196 170 / .9), rgb(236 196 170 / 0) 75%), linear-gradient(180deg, #faf0e6 0%, #f6e7da 55%, #f1dccb 100%); }
.reviews__panel .gel { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.reviews__panel .gel canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease; }
.reviews__panel .gel canvas.is-on { opacity: 1; }
.reviews__panel::before { /* a soft pool of cream under the heading */ content: ''; position: absolute; z-index: -1; left: 50%; top: 2%; width: min(1100px, 120%); height: clamp(260px, 30%, 420px); translate: -50% 0; pointer-events: none; background: radial-gradient(closest-side, rgb(252 245 238 / .66), rgb(252 245 238 / .3) 60%, rgb(252 245 238 / 0)); }
.reviews__head .kicker, .reviews__head .title { text-shadow: 0 0 22px rgb(252 245 238 / .95), 0 0 60px rgb(252 245 238 / .7); }
.quotes { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); max-width: 1240px; margin: clamp(40px, 6vw, 72px) auto 0; }
.quote { padding: clamp(24px, 2.4vw, 36px); display: flex; flex-direction: column; border-radius: 28px; background: rgb(255 250 244 / .86); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); border: 1px solid rgb(255 255 255 / .78); box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), 0 34px 64px -34px rgb(90 32 12 / .55); }
.stars { display: flex; gap: 3px; color: var(--terra-text); font-size: 15px; margin-bottom: 18px; }
.quote p { font: italic 400 clamp(21px, 1.8vw, 26px)/1.5 var(--display); color: var(--ink); flex: 1; }
.quote .who { margin-top: 22px; font-size: 13.5px; font-weight: 600; letter-spacing: .5px; color: var(--terra-dark); }
.reviews__panel .proposal--center { margin: 30px auto 0; width: fit-content; padding: 6px 12px; border-radius: 12px; background: rgb(255 250 244 / .9); color: var(--ink); }
.reviews__actions { width: fit-content; max-width: 100%; margin: clamp(40px, 5vw, 64px) auto 0; padding: 12px 22px 12px 12px; border-radius: 36px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px; background: rgb(255 250 244 / .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 24px 48px -26px rgb(90 32 12 / .55); }
.reviews__book { display: grid; justify-items: center; gap: 8px; }
.reviews__trust { font-size: 12px; letter-spacing: .3px; color: var(--ink-light); }
.reviews__actions .review-link { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 6px 8px; }
.review-link { display: flex; width: fit-content; align-items: center; gap: 14px; text-decoration: none; padding: 10px 22px 10px 10px; border-radius: 999px; background: rgb(255 252 248 / .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgb(255 255 255 / .85); color: var(--ink); box-shadow: 0 18px 36px -22px rgb(90 32 12 / .55); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.review-link:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -20px rgb(90 32 12 / .6); }
.review-link .gi { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--white); font-size: 18px; box-shadow: 0 2px 8px rgb(0 0 0 / .08); }
.review-link strong { display: block; font: 400 20px/1.1 var(--display); }
.review-link small { display: block; font-size: 13px; color: var(--ink-light); margin-top: 2px; }
/* concept C's "little bottle of gel" button: a clear-coat highlight that catches the same light as the pour */
.btn--gel { border-color: transparent; background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 30%), linear-gradient(180deg, oklch(51% 0.125 34), oklch(45% 0.12 33));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -8px 14px rgb(60 20 10 / .16), 0 0 0 4px rgb(255 250 244 / .6), 0 18px 34px -14px rgb(90 30 12 / .6); }
.btn--gel::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(70px 8px at calc(var(--lx, .5) * 100%) 0%, rgb(255 255 255 / .35), rgb(255 255 255 / 0) 70%); } /* the glint stays above the letters, so white text keeps 4.5:1 */
.btn--gel:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 -8px 14px rgb(60 20 10 / .16), 0 0 0 4px rgb(255 250 244 / .75), 0 22px 38px -14px rgb(90 30 12 / .7); }
.reviews__panel a:focus-visible { outline: 2.5px solid #fff8f0; outline-offset: 3px; box-shadow: 0 0 0 7px rgb(41 28 21 / .6); } /* reads on any colour the gel pours */
@media (pointer: coarse) { .reviews__panel .quote, .reviews__panel .review-link, .reviews__panel .reviews__actions { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(255 250 244 / .95); } } /* phones: no live re-blur on every gel redraw */

/* faq */
.faq { padding-block: clamp(64px, 8vw, 112px); }
.faq .wrap { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq__aside { position: sticky; top: 112px; }
.faq__aside .tile__arch { width: min(100%, 230px); margin-top: 30px; }
.qa-list { border-bottom: 1px solid rgb(176 96 64 / .18); }
.qa { border-top: 1px solid rgb(176 96 64 / .18); interpolate-size: allow-keywords; }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 17px 2px; border-radius: 10px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font: 400 clamp(21px, 1.75vw, 25px)/1.25 var(--display); color: var(--ink); transition: color .25s; }
.qa summary:hover h3, .qa[open] summary h3 { color: var(--terra-dark); }
.qa__a { padding: 0 50px 22px 2px; }
.qa__a p { font-size: 16px; line-height: 1.7; color: var(--ink-light); max-width: 62ch; overflow-wrap: anywhere; text-wrap: pretty; }
.qa-more { margin-top: 10px; }
.qa-more a { font-size: 14.5px; font-weight: 500; color: var(--terra-dark); }

/* contact — dusk */
.contact { background: linear-gradient(180deg, var(--cream) 0%, #f6dcc9 28%, #e8c3b6 56%, #b9a7ac 82%, #7e7a8a 100%); padding-bottom: 0; overflow: clip; }
.contact .wrap { position: relative; z-index: 2; }
.booking { margin: clamp(40px, 6vw, 70px) auto 0; max-width: 1080px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-radius: 36px; overflow: hidden; background: rgb(255 252 248 / .9); border: 1px solid rgb(255 255 255 / .85); box-shadow: 0 60px 120px -60px rgb(60 30 30 / .6); }
.booking__studio { padding: clamp(28px, 4vw, 48px); display: grid; gap: 12px; align-content: start; }
.booking__studio .ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 26px; background: rgb(176 96 64 / .09); }
.booking__studio h3 { font: 400 clamp(30px, 2.8vw, 40px)/1.05 var(--display); letter-spacing: -.01em; }
.booking__studio p { font-size: 15.5px; line-height: 1.65; color: var(--ink-light); }
.booking__studio a.addr { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.addr-line { color: var(--ink) !important; font-weight: 500; }
.addr-tel a { display: inline-block; padding: 3px 0; font-weight: 600; color: var(--terra-dark); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.hours-block { margin-top: 8px; padding-top: 16px; border-top: 1px solid rgb(176 96 64 / .14); }
.hours__title { font-size: 11.5px !important; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--terra-dark) !important; margin-bottom: 8px; }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; font-size: 14.5px; color: var(--ink-light); max-width: 360px; }
.hours dt { font-weight: 500; color: var(--ink); }
.booking__go { padding: clamp(28px, 4vw, 48px); display: grid; align-content: center; justify-items: center; gap: 14px; text-align: center; background: linear-gradient(160deg, #bd6444 0%, #a5523a 100%); color: var(--white); position: relative; overflow: hidden; }
.booking__go::before { content: ''; position: absolute; width: 140%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(255 255 255 / .18); top: 50%; left: 50%; translate: -50% -50%; }
.booking__go .btn { position: relative; }
#contact:target .booking__go .btn { animation: ring 1.4s var(--ease) .7s 2; }
@keyframes ring { 50% { box-shadow: 0 0 0 10px rgb(255 255 255 / .38); } }
.booking__go small { position: relative; font-size: 12.5px; letter-spacing: .3px; color: rgb(255 255 255 / .86); }
.booking__go .card-note { position: relative; max-width: 30ch; font-size: 13px; line-height: 1.55; color: rgb(255 255 255 / .86); margin-top: 6px; }
.booking__go .policy-link { position: relative; font-size: 13px; font-weight: 500; color: var(--white); text-underline-offset: 3px; }
address { font-style: normal; display: grid; gap: 6px; }
.channels { max-width: 1180px; margin: 18px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 12px; } /* columns: contact · Instagram · Facebook; salon on top, press-ons below */
.channel { --tint: var(--oasis-deep); position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 46px 14px 14px; border-radius: 22px; background: rgb(255 252 248 / .9); border: 1px solid rgb(255 255 255 / .85); box-shadow: 0 16px 34px -24px rgb(60 30 40 / .55); text-decoration: none; color: var(--ink); transition: transform .4s var(--ease), background .3s, box-shadow .4s var(--ease); min-width: 0; }
.channel--salon { --tint: var(--terra-dark); }
.channel--shop { --tint: var(--sage-deep); }
.channel__txt { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'lbl tag' 'val val'; align-items: center; column-gap: 8px; } /* the tag comes first in the markup so each card's original label reads unbroken */
.channel__go { position: absolute; right: 18px; top: 50%; width: 14px; height: 14px; translate: 0 -50%; background: var(--tint); opacity: .5; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h11M8 3l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h11M8 3l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: opacity .3s, transform .4s var(--ease); }
a.channel:hover { transform: translateY(-3px); background: rgb(255 252 248 / .98); box-shadow: 0 22px 40px -22px rgb(60 30 40 / .6); }
a.channel:hover .channel__go { opacity: 1; transform: translateX(3px); }
.channel .ic { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; color: var(--tint); background: color-mix(in oklab, var(--tint) 11%, white); transition: background .35s, color .35s; }
a.channel:hover .ic { background: var(--tint); color: var(--white); }
.channel .lbl { grid-area: lbl; display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--tint); margin-bottom: 4px; }
.channel .tag { grid-area: tag; justify-self: start; margin-bottom: 4px; padding: 3px 8px 4px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .2px; text-transform: none; color: var(--tint); background: color-mix(in oklab, var(--tint) 12%, white); }
.channel .val { grid-area: val; display: block; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.channel .val a { text-decoration: none; display: block; padding: 5px 0; min-height: 28px; }
.channel .val a:hover { color: var(--terra-dark); }
.ridge { position: relative; height: clamp(120px, 16vw, 220px); margin: clamp(60px, 8vw, 110px) calc(var(--gutter) * -1) 0; }

/* footer — a pool of chocolate gel (concept C), set into the night ground below the dusk ridge */
.footer { position: relative; background: var(--dusk); padding: var(--inset); }
.footer__panel { position: relative; overflow: clip; border-radius: var(--radius); color: oklch(93% 0.025 65); padding: clamp(56px, 6vw, 92px) var(--gutter) clamp(26px, 3vw, 40px);
  background:
    radial-gradient(55% 80% at 86% -12%, rgb(255 222 196 / .17), rgb(255 222 196 / 0) 62%),
    radial-gradient(42% 70% at 6% 118%, rgb(183 87 65 / .42), rgb(183 87 65 / 0) 70%),
    linear-gradient(180deg, #45291d, #2d1c14);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 -1px 0 rgb(255 236 220 / .06); }
.footer__grid, .footer__legal { max-width: 1320px; margin: 0 auto; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 40px 56px; align-items: start; }
.footer__brand { display: flex; align-items: center; gap: 16px; }
.footer .logo { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 0 0 2px rgb(255 255 255 / .18); flex: none; }
.footer .word { font: 500 29px/1 var(--script); color: #f7dcc7; }
.footer .tag { margin-top: 7px; font: italic 400 19px/1.3 var(--display); color: rgb(247 231 218 / .84); }
.footer__about { display: grid; gap: 24px; align-content: start; }
.footer__nap { font-style: normal; display: grid; gap: 2px; font: 400 14px/1.55 var(--body); color: rgb(247 231 218 / .82); }
.footer__nap a { display: inline-block; padding: 4px 0; color: rgb(251 239 229 / .95); font-weight: 500; text-decoration: none; text-underline-offset: 4px; }
.footer__nap a:hover { color: #fff; text-decoration: underline; }
.footer-links ul { list-style: none; display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 44px; }
.footer-links a { display: inline-block; padding: 5px 0; font: 400 15px/1.3 var(--body); color: rgb(251 239 229 / .92); text-decoration: none; text-underline-offset: 4px; transition: color .2s; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer .badge { display: block; border-radius: 12px; }
.footer .badge img { width: 110px; height: 55px; }
.footer__legal { margin-top: clamp(40px, 5vw, 64px); padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .13); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
.legal { display: flex; flex-wrap: wrap; gap: 0 24px; }
.legal a { display: inline-block; padding: 6px 0; font: 400 13.5px/1.4 var(--body); color: rgb(247 231 218 / .78); text-underline-offset: 3px; }
.legal a:hover { color: #fff; }
.copy { font: 400 13.5px/1.4 var(--body); color: rgb(247 231 218 / .78); }
@media (min-width: 761px) { body:has(.chat-fab) .footer__legal { padding-right: 84px; } }
@media (max-width: 860px) {
  .footer__grid { grid-template-columns: 1fr auto; }
  .footer-links { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 32px; }
  .footer__brand { flex-direction: column; gap: 12px; }
  .footer__about { justify-items: center; }
  .footer-links ul { grid-template-columns: 1fr 1fr; gap: 4px 22px; text-align: left; }
  .footer__legal { flex-direction: column; align-items: center; text-align: center; }
  .legal { justify-content: center; }
}
@media (max-width: 520px) {
  .footer-links ul { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 2px; }
}

/* chat */
.chat-fab { position: fixed; right: 24px; bottom: 24px; z-index: 55; width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; background: var(--terra); color: var(--white); font-size: 26px; box-shadow: 0 14px 34px -10px rgb(176 96 64 / .7); display: grid; place-items: center; transition: transform .35s var(--ease); }
.chat-fab:hover { transform: scale(1.07); }
.chat { position: fixed; right: 24px; bottom: 100px; z-index: 55; width: min(360px, calc(100vw - 32px)); max-height: min(560px, calc(100dvh - 140px)); display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: var(--white); border: 1px solid rgb(176 96 64 / .14); box-shadow: 0 40px 90px -30px rgb(60 30 20 / .5); transform-origin: bottom right; }
.chat[hidden] { display: none; }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(160deg, #bd6444, #a5523a); color: var(--white); }
.chat__head img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .45); }
.chat__head b { display: block; font-size: 14.5px; font-weight: 600; }
.chat__head small { display: block; font-size: 11.5px; opacity: .8; }
.chat__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.bubble { max-width: 84%; padding: 11px 14px; border-radius: 18px 18px 18px 5px; background: var(--cream); color: var(--ink); font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.bubble.me { align-self: flex-end; border-radius: 18px 18px 5px 18px; background: var(--terra); color: var(--white); }
.typing { display: flex; gap: 4px; padding: 12px 14px; width: 60px; background: var(--cream); border-radius: 18px 18px 18px 5px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-light); animation: dot 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
.chat__chips { padding: 12px 14px 16px; border-top: 1px solid rgb(176 96 64 / .1); display: grid; gap: 7px; }
.chat__chips p { font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-light); }
.chip { text-align: left; padding: 9px 13px; border-radius: 14px; border: 1.5px solid rgb(176 96 64 / .28); background: var(--cream); color: var(--ink); font-size: 12.5px; line-height: 1.35; cursor: pointer; transition: background .2s; }
.chip:hover { background: rgb(176 96 64 / .08); }
.chip.is-asked { color: var(--ink-light); border-color: rgb(176 96 64 / .14); }
.chip--more { text-align: center; color: var(--terra-dark); font-weight: 500; }
.chat__book { min-height: 44px; }

/* mobile dock */
.dock { display: none; }

.ic-alt { display: inline-block; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.path .ic, .booking__studio .ic, .review-link .gi { color: var(--terra-dark); }
.path--shop .ic { color: var(--sage-deep); }
.dock__call .ic-alt { font-size: 20px; color: var(--oasis-deep); }
/* mockup-only review layer: default = only the owner's existing words; review mode = proposals */
.service-area { margin-top: 6px; font-size: 14px !important; font-style: italic; }
.proposal { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-light); }
.about .proposal { color: rgb(255 255 255 / .86); }
.proposal--center { text-align: center; margin: 36px auto 0; }
.proposal-slot { position: absolute; inset: auto 14px 14px; z-index: 2; padding: 10px 12px; border-radius: 14px; background: rgb(255 250 245 / .92); color: var(--ink); font-size: 12.5px; line-height: 1.4; text-align: center; }

/* photos are never hidden waiting for a scroll trigger: a fast mouse wheel used to land on empty arches (29 Sept) */

@media (prefers-reduced-transparency: reduce) {
  .nav.is-scrolled, .dock { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--cream); }
  .brand, .nav__burger, .window figcaption span, .slide-toggle, .quote, .review-link, .reviews__actions, .path, .channel { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(255 250 244); }
}
@media (forced-colors: active) {
  .btn, .path, .dock a, .channel, .review-link { border: 1px solid CanvasText; }
  .reviews__panel .gel { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .hero [data-in], .js .hero [data-fade], .js .hero .range { opacity: 1; translate: none; }
  .js .hero .arch { clip-path: none; }
  .js .hero .hero__ring circle { stroke-dashoffset: 0; }
  .js .hero .hero__sun { opacity: 1; scale: 1; }
  .js .hero .water::before { transform: none; }
  .range { transform: none !important; }
  .water .mirror { transform: scaleY(-1) !important; }
  .signature span { clip-path: none; }
  .menu-sheet { transition: none; }
}

/* phones and tablets: the desert scene is a still picture (no scroll parallax, rising ranges, animated ripple or drifting
   light), so scrolling stays smooth; the reflections keep a plain soft blur instead of the SVG ripple filter */
@media (max-width: 860px), (pointer: coarse) {
  .range { transform: none !important; }
  .js .hero .range { opacity: 1; translate: none; transition: none; }
  .water .mirror { transform: scaleY(-1) !important; filter: blur(.8px); }
  .mirror-arch { filter: blur(2px) saturate(.6) brightness(1.25); }
  .streak { animation: none; opacity: .55; }
}
@media (max-width: 1080px) {
  .nav__inner { grid-template-columns: 1fr auto auto; }
  .nav__primary { display: none; }
  .nav__burger { display: grid; place-items: center; }
  .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; } /* pairs: call + email, Instagram salon + press-ons, Facebook salon + press-ons */
}
@media (min-width: 861px) and (max-width: 1080px) {
  .menu-sheet .mobile-ctas { max-width: 440px; }
}
@media (max-width: 860px) {
  :root { --water-h: 124px; --range-h: 168px; }
  html { scroll-padding-top: 76px; }
  .nav__ctas { display: none; }
  .nav__burger { display: grid; place-items: center; }
  .nav__book { display: inline-flex; justify-self: end; min-height: 44px; padding-inline: 18px; font-size: 15px; transition: opacity .35s, transform .35s var(--ease), visibility 0s; }
  .dock-on .nav__book { opacity: 0; transform: scale(.85); pointer-events: none; visibility: hidden; transition: opacity .35s, transform .35s var(--ease), visibility 0s .35s; } /* gone from the Tab order too */
  .nav__inner { grid-template-columns: 1fr auto auto; }
  .nav__inner { padding-block: 12px; gap: 10px; }
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; padding-top: 104px; gap: 30px; }
  .headline { font-size: clamp(3.1rem, 15vw, 4.7rem); }
  .headline em { padding-left: .5em; }
  .kicker { font-size: 22px; }
  .tagline { max-width: 30ch; margin-top: 16px; }
  .hero__ctas .btn--gel { flex: 1 1 100%; min-height: 52px; }
  .svc__book { display: none; }
  .svc__about summary { padding-right: 0; }
  .svc__about summary::after { margin-left: auto; }
  .hero__shop { display: none !important; }
  .hero__trust { text-align: center; }
  .window { width: min(66vw, 300px); }
  .explore { display: none; }
  .paths-band { margin-top: -34px; }
  .paths { grid-template-columns: 1fr; }
  .path { grid-template-columns: 86px 1fr; padding: 10px 16px 10px 10px; border-radius: 24px; }
  .shop .wrap, .about .wrap, .faq .wrap { grid-template-columns: 1fr; }
  .window figcaption { left: 12px; translate: none; bottom: 16px; }
  .window figcaption span { justify-self: start; font-size: 15px; padding: 8px 13px 9px; }
  .slide-toggle { right: 12px; bottom: 14px; }
  .faq__aside { position: static; }
  .faq__aside .tile__arch { display: none; }
  .about__photo { width: min(78%, 340px); }
  .grid-gallery { gap: 18px 10px; }
  .grid-gallery .tile figcaption { margin-top: 8px; font-size: 15px; line-height: 1.15; }
  .quotes { grid-template-columns: 1fr; gap: 14px; }
  .reviews__actions { flex-direction: column; padding: 14px; border-radius: 30px; }
  html { scroll-padding-bottom: 96px; }
  .booking { grid-template-columns: 1fr; border-radius: 28px; }
  .shelf { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scrollbar-width: none; }
  .shelf::-webkit-scrollbar { display: none; }
  .shelf .tile { flex: 0 0 72%; scroll-snap-align: center; }
  .shelf .tile:nth-child(2n) { translate: none; }
  .channels { gap: 10px; }
  .dock { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 8px; position: fixed; z-index: 40; left: 12px; right: 12px; bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 6px)); padding: 7px; border-radius: 999px; background: rgb(251 243 234 / .86); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgb(255 255 255 / .85); box-shadow: 0 18px 40px -16px rgb(90 40 20 / .45); translate: 0 150%; transition: translate .7s var(--ease); }
  .dock-on .dock { translate: 0 0; }
  .dock a { display: grid; place-items: center; min-height: 50px; border-radius: 999px; text-decoration: none; font: 600 15px/1 var(--body); letter-spacing: .1px; white-space: nowrap; padding: 0 10px; }
  .dock__book { background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 30%), linear-gradient(180deg, oklch(51% 0.125 34), oklch(45% 0.12 33)); color: var(--white); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 -8px 14px rgb(60 20 10 / .16), 0 8px 18px -8px rgb(176 96 64 / .8); }
  .dock__shop { color: var(--sage-deep); border: 1.5px solid color-mix(in oklab, var(--sage-deep) 70%, transparent); }
  .dock__call { width: 50px; background: rgb(141 162 157 / .2); font-size: 19px; }
  .chat-fab { right: 16px; bottom: 88px; width: 54px; height: 54px; font-size: 23px; transition: transform .35s var(--ease), opacity .35s, visibility 0s; }
  .chat-fab.is-tucked { opacity: 0; transform: scale(.6); pointer-events: none; visibility: hidden; transition: transform .35s var(--ease), opacity .35s, visibility 0s .35s; }
  .chat { right: 16px; bottom: 152px; max-height: calc(100dvh - 190px); }
  .footer { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 600px) {
  .channel { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 14px 16px; border-radius: 20px; }
  .channel .ic { width: 40px; height: 40px; border-radius: 13px; font-size: 20px; }
  .channel__go { top: 27px; right: 16px; }
  .channel .val { font-size: 13.5px; }
  .channel__txt { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'lbl' 'tag' 'val'; row-gap: 2px; } /* the tag always gets its own line, so paired cards match */
  .channel .tag { margin-bottom: 6px; }
}
@media (max-width: 420px) {
  .path .t { font-size: 21px; }
  .qa summary h3 { font-size: 20px; }
  .qa__a { padding-right: 8px; }
}
@media (max-width: 360px) {
  .nav__inner { gap: 8px; }
  .brand { gap: 8px; padding: 4px 12px 4px 4px; }
  .brand img { width: 38px; height: 38px; }
  .brand span { font-size: 20px; white-space: nowrap; }
  .nav__burger { width: 44px; height: 44px; }
  .dock { left: 8px; right: 8px; gap: 6px; padding: 6px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
  .dock a { font-size: 13px; padding: 0 5px; letter-spacing: 0; }
  .dock__call { width: 44px; }
}