/* Suzanne Scott Skin Care — site stylesheet (Direction 1, version 6: Spa menu). Fonts are linked in index.html.
   Saved from explorations/direction-1-variants.html. Pairs with that page's markup (classes .top .hdr .wm .nav .hero-media .sec .card .prices .loc .foot). */

:root {
  --box-radius: 10px;   /* nav glass + hero Book now button */
  --ink: #141414; --white: #FFFFFF; --paper: #F4F4F2;
  --grey-700: #4A4A48; --grey-600: #666664; --grey-400: #A6A6A3; --grey-300: #8C8C8A; --rule: #D4D4D0;
  --glass: rgba(255,255,255,0.72); --glass-border: rgba(20,20,20,0.12);
  --gutter: clamp(20px, 5vw, 48px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
h1, h2, h3, p, figure, blockquote, dl, dd, address { margin: 0; }
address { font-style: normal; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color .2s, border-color .2s, background-color .2s; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- Version tokens (defaults = version 1, Jost refined) ---------- */
body {
  --f-display: "Jost", Helvetica, sans-serif;
  --f-body: "Jost", Helvetica, sans-serif;
  --f-label: "Jost", Helvetica, sans-serif;
  --wm-font: var(--f-display); --wm-size: clamp(21px, 1rem + 2.6vw, 52px); --wm-track: clamp(4px, .62vw, 9px); --wm-weight: 400; --wm-style: normal;
  --tag-font: var(--f-display); --tag-size: clamp(32px, 1.6rem + 2vw, 52px); --tag-weight: 400; --tag-style: normal; --tag-track: 0;
  --h-font: var(--f-display); --h-size: clamp(32px, 2.2rem + .9vw, 44px); --h-weight: 400; --h-style: normal; --h-case: none; --h-track: .25px;
  --t-font: var(--f-display); --t-size: clamp(24px, 1.4rem + .4vw, 28px); --t-weight: 400; --t-track: 1px; --t-style: normal;
  --label-size: 13px; --label-weight: 500; --label-track: 4px;
  --body-size: clamp(17px, 1.05rem + .2vw, 19px); --body-weight: 300; --body-lh: 1.65;
  --q-font: var(--f-display); --q-size: clamp(22px, 1.1rem + 1.3vw, 32px); --q-weight: 300; --q-style: normal;
  --btn-font: var(--f-label); --btn-radius: 16px; --card-radius: 20px;
  --pad: clamp(72px, 9vw, 120px);
  --hero-h: clamp(440px, 52vw, 740px);
  margin: 0; overflow-x: hidden;
  background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-weight: var(--body-weight); font-size: var(--body-size); line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
}

/* Section color themes. Every section reads --bg/--fg/etc; versions flip sections to white or dark. */
.sec, .top, .foot { --bg: var(--paper); --fg: var(--ink); --muted: var(--grey-600); --text: var(--grey-700); --line: var(--rule); --strong: var(--ink); --card: var(--white); --card-line: var(--rule);
  background: var(--bg); color: var(--fg); }

/* ---------- Shared type ---------- */
.label { font-family: var(--f-label); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-track); text-transform: uppercase; line-height: 1.5; color: var(--muted); }
.h2 { font-family: var(--h-font); font-size: var(--h-size); font-weight: var(--h-weight); font-style: var(--h-style); text-transform: var(--h-case); letter-spacing: var(--h-track); line-height: 1.15; text-wrap: balance; }
.h3 { font-family: var(--t-font); font-size: var(--t-size); font-weight: var(--t-weight); font-style: var(--t-style); letter-spacing: var(--t-track); line-height: 1.2; }
.text { color: var(--text); max-width: 680px; margin-inline: auto; }
.text p + p { margin-top: 1.1em; }
.btn-text { font-family: var(--btn-font); font-size: 14px; font-weight: 500; letter-spacing: 4px; text-transform: uppercase; line-height: 1.3; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 16px 40px 16px 44px; border: 1px solid var(--strong); border-radius: var(--btn-radius); color: var(--fg); text-decoration: none; text-align: center; background: transparent; }
.btn:hover { color: var(--muted); border-color: var(--muted); }
.link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 7px; }

/* ---------- Layout ---------- */
.wrap { width: min(1040px, 100% - 2 * var(--gutter)); margin-inline: auto; text-align: center; }
.sec { padding-block: var(--pad); }
.stack { display: grid; justify-items: center; gap: 16px; }
.sec-head { display: grid; justify-items: center; gap: 16px; margin-bottom: clamp(40px, 5vw, 64px); }

/* Header + hero */
.top { position: relative; }
.hdr { position: relative; z-index: 5; text-align: center; padding: clamp(20px, 3vw, 36px) var(--gutter) 6px; background: var(--bg); }
.brand { font: inherit; }
.wm { display: inline-block; font-family: var(--wm-font); font-size: var(--wm-size); font-weight: var(--wm-weight); font-style: var(--wm-style); letter-spacing: var(--wm-track); margin-right: calc(-1 * var(--wm-track)); text-transform: uppercase; line-height: 1.05; text-decoration: none; }
.wm span { white-space: nowrap; }
.nav { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 48px; margin-top: clamp(12px, 1.8vw, 22px); padding-top: 6px; border-top: 1px solid var(--line); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-label); font-size: 13px; font-weight: 400; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.nav a:hover, .wm:hover { color: var(--muted); }

.hero-media { position: relative; height: var(--hero-h); overflow: hidden; background: var(--bg); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; filter: grayscale(1);
  /* All four edges fade into the white page. Opacity follows an exponential ease (1 - e^-4t): it rises fast right at
     the border and settles gently, so the fade is short and smooth. Horizontal and vertical masks are intersected. */
  -webkit-mask-image: var(--mask-x), var(--mask-y); -webkit-mask-composite: source-in;
  mask-image: var(--mask-x), var(--mask-y); mask-composite: intersect; }
/* The photo tucks up under the nav: its top edge sits on the rule between the wordmark and the nav links.
   --nav-h = one row of links (52px); no rule or extra padding, so the links sit centered in the bar. */
.hdr { position: relative; z-index: 2; background: transparent; }
.hero-media { --nav-h: 52px; margin-top: calc(-1 * var(--nav-h)); }
/* Nav links sit over the photo, so they get the design system's frosted glass for legibility. */
.nav { position: relative; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 0 0 var(--box-radius) var(--box-radius);
  --nav-pad: clamp(20px, 2.6vw, 40px); padding-inline: var(--nav-pad); margin-inline: calc(-1 * var(--nav-pad)); }   /* glass extends past the wordmark; links stay aligned to it */
.hero-media { --fade-x: clamp(100px, 40vw - 40px, 580px); --fade-y: clamp(72px, 16vw, 288px);
  --mask-x: linear-gradient(to right, rgba(0,0,0,0.00) 0, rgba(0,0,0,0.28) calc(var(--fade-x) * 0.08), rgba(0,0,0,0.48) calc(var(--fade-x) * 0.16), rgba(0,0,0,0.66) calc(var(--fade-x) * 0.26), rgba(0,0,0,0.80) calc(var(--fade-x) * 0.38), rgba(0,0,0,0.89) calc(var(--fade-x) * 0.52), rgba(0,0,0,0.96) calc(var(--fade-x) * 0.7), rgba(0,0,0,1.00) var(--fade-x), rgba(0,0,0,1.00) calc(100% - var(--fade-x)), rgba(0,0,0,0.96) calc(100% - var(--fade-x) * 0.7), rgba(0,0,0,0.89) calc(100% - var(--fade-x) * 0.52), rgba(0,0,0,0.80) calc(100% - var(--fade-x) * 0.38), rgba(0,0,0,0.66) calc(100% - var(--fade-x) * 0.26), rgba(0,0,0,0.48) calc(100% - var(--fade-x) * 0.16), rgba(0,0,0,0.28) calc(100% - var(--fade-x) * 0.08), rgba(0,0,0,0.00) 100%);
  --mask-y: linear-gradient(to bottom, rgba(0,0,0,0.00) 0, rgba(0,0,0,0.28) calc(var(--fade-y) * 0.08), rgba(0,0,0,0.48) calc(var(--fade-y) * 0.16), rgba(0,0,0,0.66) calc(var(--fade-y) * 0.26), rgba(0,0,0,0.80) calc(var(--fade-y) * 0.38), rgba(0,0,0,0.89) calc(var(--fade-y) * 0.52), rgba(0,0,0,0.96) calc(var(--fade-y) * 0.7), rgba(0,0,0,1.00) var(--fade-y), rgba(0,0,0,1.00) calc(100% - var(--fade-y)), rgba(0,0,0,0.96) calc(100% - var(--fade-y) * 0.7), rgba(0,0,0,0.89) calc(100% - var(--fade-y) * 0.52), rgba(0,0,0,0.80) calc(100% - var(--fade-y) * 0.38), rgba(0,0,0,0.66) calc(100% - var(--fade-y) * 0.26), rgba(0,0,0,0.48) calc(100% - var(--fade-y) * 0.16), rgba(0,0,0,0.28) calc(100% - var(--fade-y) * 0.08), rgba(0,0,0,0.00) 100%); }
.cta { position: absolute; left: 50%; bottom: clamp(28px, 5vw, 72px); transform: translateX(-50%); width: min(240px, 100% - 2 * var(--gutter)); padding-inline: 20px;
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--glass-border); color: var(--ink); }
.cta:hover { background: var(--white); color: var(--ink); border-color: var(--glass-border); }

/* Intro */
.tag { font-family: var(--tag-font); font-size: var(--tag-size); font-weight: var(--tag-weight); font-style: var(--tag-style); letter-spacing: var(--tag-track); line-height: 1.15; max-width: 860px; text-wrap: balance; }
/* Intro sits close under the photo, a step larger than body copy. */
.sec.intro { padding-top: clamp(14px, 1.75vw, 24px); padding-bottom: clamp(12px, 1.5vw, 24px); }   /* services follows closely */
.sec.services { padding-top: clamp(24px, 3vw, 40px); }
.intro .text { font-size: clamp(19px, 1.05rem + .5vw, 23px); line-height: 1.6; max-width: 760px; }

/* Services */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 64px 48px; }
.card { display: grid; justify-items: center; align-content: start; gap: 16px; padding-top: 28px; border-top: 1px solid var(--strong); min-width: 0; }
.prices { width: min(440px, 100%); margin-top: 12px; border-bottom: 1px solid var(--line); }
.prices > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-block: 13px; border-top: 1px solid var(--line); text-align: left; }
.prices dt { color: var(--text); font-size: .94em; line-height: 1.4; }
.prices dd { flex: none; letter-spacing: 2px; font-variant-numeric: tabular-nums; }

/* Testimonials */
.feat { max-width: 980px; margin: 32px auto 0; }
.feat p { font-family: var(--q-font); font-size: var(--q-size); font-weight: var(--q-weight); font-style: var(--q-style); line-height: 1.5; color: var(--fg); text-wrap: pretty; }
figcaption { margin-top: 24px; color: var(--muted); }
.qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 48px; margin-top: clamp(56px, 8vw, 96px); }
.qgrid figure { padding-top: 28px; border-top: 1px solid var(--line); min-width: 0; }
.qgrid p { color: var(--fg); font-size: .92em; }

/* Contact */
.locs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(32px, 4vw, 48px); }
.loc { display: grid; justify-items: center; align-content: start; gap: 18px; padding: clamp(28px, 4vw, 48px); background: var(--card); border: 1px solid var(--card-line); border-radius: var(--card-radius); min-width: 0; }
.loc .label { color: var(--fg); }
.loc .text { display: grid; gap: 4px; }
.loc .days { color: var(--fg); }
.loc .btn { margin-top: 8px; }
.cdet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px; margin-top: clamp(48px, 6vw, 72px); padding-top: 32px; border-top: 1px solid var(--line); }
.cdet > div { display: grid; gap: 8px; justify-items: center; }
.cdet dd a { display: inline-flex; align-items: center; min-height: 44px; }
.cdet .muted { display: block; color: var(--muted); font-size: .88em; overflow-wrap: anywhere; }
.policy { display: grid; gap: 16px; margin-top: clamp(48px, 6vw, 72px); }

/* Footer */
.foot { border-top: 1px solid var(--line); padding-block: 64px; }
.foot .wrap { display: grid; justify-items: center; gap: 14px; }
.fwm { font-family: var(--wm-font); font-size: 18px; letter-spacing: 6px; margin-right: -6px; text-transform: uppercase; line-height: 1.2; }
.foot p { color: var(--muted); font-size: 15px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; }


/* ======================================================================
   6 · Spa menu — Red Hat Display with Red Hat Text. Slim white bar, panoramic photo, services set like a printed menu.
   ====================================================================== */
body { --f-display: "Red Hat Display", Helvetica, sans-serif; --f-body: "Red Hat Text", Helvetica, sans-serif; --f-label: "Red Hat Display", Helvetica, sans-serif;
  --wm-size: clamp(18px, 3.4vw - 4px, 46px); --wm-track: .35em; --wm-weight: 500;
  --tag-size: clamp(30px, 1.3rem + 2.6vw, 58px); --tag-weight: 300; --tag-track: -.01em;
  --h-size: clamp(32px, 1.4rem + 2vw, 52px); --h-weight: 300; --h-track: -.01em;
  --t-size: clamp(16px, .9rem + .3vw, 19px); --t-weight: 500; --t-track: .28em;
  --body-size: clamp(16px, .95rem + .2vw, 18px); --body-weight: 300; --body-lh: 1.7;
  --label-size: 11px; --label-weight: 500; --label-track: .3em;
  --q-size: clamp(22px, 1.1rem + 1.2vw, 32px); --q-weight: 300;
  --btn-radius: 999px; --card-radius: 16px; --hero-h: clamp(300px, 40vw, 580px); }
.top, .sec { --bg: var(--white); }
.hdr { padding-block: clamp(22px, 2.75vw, 40px) 0; }
.nav { margin-top: clamp(16px, 2vw, 28px); padding-top: 0; }
.nav a { font-size: clamp(11px, 1.7vw - 3px, 17px); letter-spacing: .28em; font-weight: 500; min-height: 52px; color: var(--grey-600); }
.nav a:hover { color: var(--ink); }
/* The header is as wide as the wordmark; the nav spans exactly that width, first link flush left, last flush right. */
.hdr { width: fit-content; max-width: 100%; margin-inline: auto; }
/* Nav glass reaches a little past the wordmark on each side; links spread evenly across it. */
.top { container-type: inline-size; }   /* lets the nav size itself to the page width (cqw), not the window incl. scrollbar */
.nav { width: var(--box-w); max-width: calc(100vw - 2 * var(--gutter)); max-width: calc(100cqw - 2 * var(--gutter)); min-width: 0; margin-inline: 0; left: 50%; transform: translateX(-50%); justify-content: space-evenly; column-gap: 16px; }
.nav a:last-child { margin-right: -.28em; }   /* cancel trailing letter-spacing so the group centers optically */
.wm { word-spacing: .7em; }                    /* equal, wide gaps: Suzanne · Scott · Skincare */
.hero-media img { object-position: 58% 45%; }
/* The photo fills the hero top to bottom and is centered, as wide as the nav box (a little of its top and bottom crops off). */
.hero-media img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: min(var(--box-w), 100%); max-width: none; object-fit: cover; }
.hero-media { --fade-x: 22%; }   /* side fade sized to the photo, not the window */
/* Hero fills the screen down to just above the bio's first line (header ~116px + gap + one line ~ 180px),
   but never taller than the photo's own proportions at the nav-box width, so the photo is never zoomed in. */
.hero-media { height: clamp(300px, calc(100vh - 180px), calc(min(var(--box-w), 100vw) / 1.362));
              height: clamp(300px, calc(100svh - 180px), calc(min(var(--box-w), 100vw) / 1.362)); }
.cta { border-radius: var(--box-radius); }   /* same corners as the nav glass */
/* Larger, more solid hero button. */
.cta { width: min(380px, 100% - 2 * var(--gutter)); min-height: 64px; font-size: 16px; }
/* Nav bar and hero button are solid white (no see-through), and there is no rule between wordmark and nav. */
.nav { border-top: 0; background: var(--white); }
.cta, .cta:hover { background: var(--white); }
/* Shimmer: a band of light sweeps through the "Book now" lettering every few seconds. */
.shimmer {
  background: linear-gradient(110deg, var(--ink) 0%, var(--ink) 40%, var(--grey-300) 47%, var(--rule) 50%, var(--grey-300) 53%, var(--ink) 60%, var(--ink) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: shimmer 9s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .shimmer { animation: none; color: var(--ink); -webkit-text-fill-color: var(--ink); background: none; } }
.h3 { text-transform: uppercase; display: flex; align-items: center; gap: 18px; }
.h3::before, .h3::after { content: ""; width: 36px; border-top: 1px solid var(--grey-300); }
.policy .h3 { justify-content: center; }
.cards { grid-template-columns: 1fr; gap: 80px; max-width: 640px; margin-inline: auto; }
.card { border-top: 0; padding-top: 0; }
.prices { width: 100%; border-bottom: 0; }
.prices > div { border-top: 0; padding-block: 10px; gap: 12px; }
.prices dt { display: flex; align-items: baseline; gap: 12px; flex: 1; min-width: 0; }
.prices dt::after { content: ""; flex: 1; min-width: 24px; border-bottom: 1px dotted var(--grey-300); }
.about { --bg: var(--paper); }
.testimonials { --bg: var(--paper); border-top: 1px solid var(--rule); }
.about + .testimonials { padding-top: 0; border-top: 0; }
.about + .testimonials .wrap { border-top: 1px solid var(--rule); padding-top: var(--pad); }
.loc { background: var(--paper); border: 0; }
.loc .btn { background: var(--ink); color: var(--white); border-color: var(--ink); }
.loc .btn:hover { background: var(--grey-700); border-color: var(--grey-700); color: var(--white); }
.foot { --bg: var(--ink); --fg: var(--paper); --muted: var(--grey-400); --line: var(--ink); }


/* ---------- Layout refinements: wider copy, tighter rhythm ---------- */
body { --pad: clamp(56px, 6.5vw, 88px); --btn-radius: var(--box-radius); }   /* every button shares the nav/hero corners */
.wrap { width: min(1120px, 100% - 2 * var(--gutter)); }
.text { max-width: 880px; }
.intro .text { max-width: 960px; }
.sec-head { margin-bottom: clamp(28px, 3.5vw, 44px); }
.cards { max-width: 880px; gap: 56px; }
.card { gap: 12px; }
.prices { margin-top: 8px; }
.feat { margin-top: 24px; }
.qgrid { margin-top: clamp(40px, 5vw, 64px); gap: 40px; }
.locs { margin-top: clamp(24px, 3vw, 36px); }
.cdet, .policy { margin-top: clamp(36px, 4.5vw, 56px); }
.cdet { padding-top: 28px; }
.foot { padding-block: 48px; }

/* ---------- Widths: wordmark glyph extent = 22.088 × font-size (Red Hat Display); header box = wordmark + --nav-ext each side ---------- */
body { --wm-w: calc(var(--wm-size) * 22.088); --nav-ext: clamp(24px, 4vw, 72px); --box-w: calc(var(--wm-w) + 2 * var(--nav-ext)); }
/* Copy shares the edges of the header box (the nav glass). */
.wrap { width: min(var(--box-w), 100% - 2 * var(--gutter)); }
.text, .intro .text, .cards, .feat { max-width: none; }

/* ---------- Left-aligned copy: compact, edge-to-edge within the wordmark width ---------- */
.wrap { text-align: left; }
.text, .intro .text { margin-inline: 0; }
.stack, .sec-head, .card, .loc, .cdet > div, .foot .wrap { justify-items: start; }

/* Section head: label over headline on the left, optional text link on the right. */
.sec-head { grid-template-columns: 1fr auto; column-gap: 32px; row-gap: 12px; align-items: end; }
.sec-head > .label, .sec-head > .h2 { grid-column: 1; }
.sec-head > .link { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.sec-head > .text { grid-column: 1 / -1; margin-top: 8px; }

/* Services: the two treatments side by side. */
.cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 48px 64px; align-items: start; }
.card { gap: 12px; padding-top: 24px; border-top: 1px solid var(--ink); }
.h3 { display: block; }
.h3::before, .h3::after { content: none; }
.prices { width: 100%; }

/* About and cancellation policy: heading in a narrow left column, copy in the wide right column. */
@media (min-width: 860px) {
  .about .wrap, .policy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 64px; align-items: start; }
  .about .sec-head { margin-bottom: 0; }
  .policy { row-gap: 0; }
}

/* Per-service booking buttons: same solid ink style as the location buttons. */
.cards { align-items: stretch; }
.card { display: flex; flex-direction: column; align-items: flex-start; }
.card .prices { margin-bottom: 4px; }
.card-btn { margin-top: auto; background: var(--ink); color: var(--white); border-color: var(--ink); }
.card-btn:hover { background: var(--grey-700); border-color: var(--grey-700); color: var(--white); }
@media (max-width: 640px) { .card-btn { align-self: stretch; padding-inline: 20px; } }

/* Testimonials */
.feat { margin-top: 20px; }
.qgrid { gap: 32px 48px; }

/* Contact */
.locs { gap: 24px; }
.loc .btn { justify-self: start; }
.cdet { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px 48px; }
.policy .h3 { justify-content: start; }

/* Footer: wordmark and place on the left, contact on the right. */
.foot .wrap { grid-template-columns: 1fr auto; align-items: end; column-gap: 32px; row-gap: 8px; }
.foot .fwm, .foot .wrap > p:nth-child(2) { grid-column: 1; }
.foot .fwm { color: var(--fg); }
.foot .wrap > p:nth-child(3), .foot .wrap > p:nth-child(4) { grid-column: 2; justify-self: end; text-align: right; }
.foot .wrap > p:nth-child(3) { grid-row: 1; }
.foot .wrap > p:nth-child(4) { grid-row: 2; }
@media (max-width: 640px) {
  .foot .wrap { grid-template-columns: 1fr; }
  .foot .wrap > p { grid-column: 1 !important; grid-row: auto !important; justify-self: start !important; text-align: left !important; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-head > .link { grid-column: 1; grid-row: auto; }
  .loc .btn { justify-self: stretch; }
}

/* ---------- Phones and narrow screens: one-line header, menu button, white dropdown ---------- */
.menu-btn { display: none; }
@media (max-width: 720px) {
  .hdr { width: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
         padding: 14px var(--gutter); text-align: left; background: var(--white); }
  .brand { min-width: 0; }
  .wm { font-size: clamp(13px, 4.1vw, 20px); letter-spacing: .2em; word-spacing: normal; margin-right: 0; white-space: nowrap; }
  .wm span { display: inline; }

  .menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; flex: none;
              width: 44px; height: 44px; padding: 0 10px; margin-right: -10px; border: 0; background: none; cursor: pointer; color: var(--ink); }
  .menu-btn span { display: block; height: 1px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* White dropdown under the header bar. Without JS the menu button is hidden and the links show as a list under the wordmark. */
  .hdr { flex-wrap: wrap; }
  html:not(.js) .menu-btn { display: none; }
  .nav { position: static; flex-basis: 100%; z-index: 20; top: 100%; left: 0; right: 0; width: auto; max-width: none; transform: none; margin: 0;
         display: flex; flex-direction: column; padding: 4px var(--gutter) 12px; background: var(--white);
         border-bottom: 1px solid var(--rule); border-radius: 0 0 var(--box-radius) var(--box-radius); }
  .js .nav { position: absolute; display: none; }
  .js .nav.is-open { display: flex; }
  .nav a { justify-content: flex-start; min-height: 52px; font-size: 14px; letter-spacing: .24em; border-top: 1px solid var(--rule); }
  .nav a:first-child { border-top: 0; }
  .nav a:last-child { margin-right: 0; }

  /* Photo sits below the header (no overlap) and fades only at its bottom edge. */
  /* Tall, edge-to-edge photo: fills the first screen below the 72px header, leaving ~128px so only the first line of the intro shows. Sides crop off-screen. */
  .hero-media { --nav-h: 0px; margin-top: 0; height: calc(100vh - 128px); height: calc(100svh - 128px); min-height: 420px; }
  .hero-media img { object-position: 54% 35%; width: auto; aspect-ratio: 2400 / 1762; }   /* full photo height; sides crop off-screen */
  .cta { bottom: clamp(88px, 14svh, 132px); }   /* lifted clear of the bottom fade */
  .hero-media img { -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,1.00) calc(100% - var(--fade-y)), rgba(0,0,0,0.96) calc(100% - var(--fade-y) * 0.7), rgba(0,0,0,0.89) calc(100% - var(--fade-y) * 0.52), rgba(0,0,0,0.80) calc(100% - var(--fade-y) * 0.38), rgba(0,0,0,0.66) calc(100% - var(--fade-y) * 0.26), rgba(0,0,0,0.48) calc(100% - var(--fade-y) * 0.16), rgba(0,0,0,0.28) calc(100% - var(--fade-y) * 0.08), rgba(0,0,0,0.00) 100%); mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,1.00) calc(100% - var(--fade-y)), rgba(0,0,0,0.96) calc(100% - var(--fade-y) * 0.7), rgba(0,0,0,0.89) calc(100% - var(--fade-y) * 0.52), rgba(0,0,0,0.80) calc(100% - var(--fade-y) * 0.38), rgba(0,0,0,0.66) calc(100% - var(--fade-y) * 0.26), rgba(0,0,0,0.48) calc(100% - var(--fade-y) * 0.16), rgba(0,0,0,0.28) calc(100% - var(--fade-y) * 0.08), rgba(0,0,0,0.00) 100%); }

  .wrap { width: calc(100% - 2 * var(--gutter)); }
}
/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .loc .btn { width: 100%; padding-inline: 16px; font-size: 13px; letter-spacing: 3px; }
  .fwm { font-size: 14px; letter-spacing: 4px; margin-right: -4px; }
  .hero-media img { object-position: 55% 30%; }
  .h3::before, .h3::after { width: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 20; padding: 14px 20px; background: var(--white); color: var(--ink); border: 1px solid var(--ink); text-decoration: none; }
.skip-link:focus { top: 16px; }

/* ---------- Location picker: opened by the hero booking button ---------- */
html:has(.book-dialog[open]) { overflow: hidden; }
.book-dialog { --fg: var(--white); --strong: var(--ink); width: min(420px, 100% - 2 * var(--gutter)); margin: auto; padding: 0; border: 1px solid var(--glass-border); border-radius: var(--box-radius); background: var(--white); color: var(--ink); }
.book-dialog::backdrop { background: rgba(20, 20, 20, 0.55); }
.book-panel { position: relative; display: grid; gap: 12px; padding: 60px 24px 28px; }
.book-panel .btn { background: var(--ink); color: var(--white); border-color: var(--ink); padding-inline: 16px; }
.book-panel .btn:hover { background: var(--grey-700); border-color: var(--grey-700); color: var(--white); }
.book-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--box-radius); background: transparent; color: var(--ink); cursor: pointer; }
.book-close:hover { color: var(--grey-600); }
@media (max-width: 640px) { .book-panel .btn { font-size: 13px; letter-spacing: 3px; } }