/* ============================================================
   WOWO · Wax On Wax Off — v3 "Light Editorial"
   2026-07-25

   The change from v2 in one line:
   cream stops being the page and becomes a tint; matcha stops
   being decoration and becomes one deliberate move.

     FIELD   near-white          (the page, ~60% of it)
     TINT    cream               (alternating bands only)
     INK     near-black          (type, footer)
     MATCHA  reserved            (primary CTAs + ONE deep band)

   Written as a single clean cascade. v2 had grown three stacked
   override blocks fighting each other; do not re-patch this file
   at the bottom, edit the rule in place.
   ============================================================ */

/* ---- Self-hosted type: Geist everywhere, Trajan Pro for the wordmark only ---- */
@font-face { font-family: 'Geist'; src: url('fonts/Geist-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/Geist-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/Geist-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('fonts/Geist-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Trajan Pro'; src: url('fonts/TrajanPro-Regular.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  /* --- the field ---
     2026-07-27: cream and beige removed entirely at Cybil's call. The bands are
     now neutral grey, so warmth only ever comes from the photography. Nothing
     in the palette carries a yellow or brown cast any more. */
  --paper:       #FFFFFF;   /* default page. true white, no warm bias */
  --paper-lift:  #FFFFFF;   /* cards; separated by a hairline, not a tone */
  --tint:        #F4F4F5;   /* neutral grey, alternating bands only */
  --tint-deep:   #E8E8EA;   /* rare, for a card edge on tint */

  /* --- ink --- */
  --ink:         #12110F;   /* near-black. THIS is what kills the dated feel */
  --ink-soft:    #52525B;   /* body copy. was #57534C, still warm-brown */
  --ink-mute:    #8A8A93;   /* eyebrows, captions. was #8A857C, a warm grey */
  --line:        rgba(18, 17, 15, 0.10);
  --line-soft:   rgba(18, 17, 15, 0.06);

  /* --- the action colour (2026-07-27) ---
     Matcha is retired. It read heavy against a white field, and with the beige
     gone it was the last loud thing on the page. Every CTA is now soft cherry
     blossom, the brand's own flower, doing the job the reference site gives its
     pastel blue. Type on it is a deep blossom ink at 7.4:1, so a pastel button
     still passes AA. --matcha* tokens are gone; do not reintroduce them. */
  --cta:         #F7DCE4;   /* pastel cherry blossom. secondary / read-more */
  --cta-hover:   #EFC4D1;
  --cta-ink:     #6B2B3D;   /* type ON blossom */
  /* Primary actions (Book / Join / Gift) are BLACK. Blossom everywhere flattened
     the hierarchy: the primary read the same weight as a read-more link. Black
     for the ask, blossom for the invitation. Cybil's call, 2026-07-28. */
  --cta-solid:       #12110F;
  --cta-solid-hover: #2E2A26;
  --cta-solid-ink:   #FFFFFF;
  --sakura:      #F7DCE4;   /* same value, kept for accent marks */
  --sakura-deep: #EFC4D1;
  --sakura-ink:  #6B2B3D;

  --serif: 'Geist', system-ui, sans-serif;
  --sans:  'Geist', system-ui, sans-serif;
  --jp:    'Noto Serif JP', serif;

  --maxw: 1200px;
  --gut:  clamp(1.5rem, 5vw, 4.5rem);
  /* 2026-07-27: 7rem was still too generous. Cybil: "more scrolling when it's
     that large". Space should separate sections, not pad them out. Section gap
     now tops out at 4.5rem, and blocks that already carry an inset panel
     (founders, offers) sit tighter again. */
  --space: clamp(1.7rem, 1.2rem + 1.5vw, 2.7rem);
  --radius: 16px;
  --radius-sm: 12px;
  --ribbon-h: 44px;
  --dur: 600ms;
  --dur-fast: 200ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.09rem);
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* Editorial type: bigger, tighter, blacker than v2 */
h1, h2, h3 {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  line-height: 1.02; letter-spacing: -0.03em;
}
h3 { letter-spacing: -0.02em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }

/* Eyebrow: NO longer matcha. Muted ink, so matcha means "act". */
.eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 0.85em;
}
.eyebrow.center { justify-content: center; }

/* the giant kanji watermarks stay retired */
.kanji { display: none !important; }

.whisper {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 600;
}
.whisper .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sakura-deep); flex: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--sans); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.01em;
  padding: 1.05rem 2rem; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn .arrow { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }
/* .btn--matcha keeps its class name so every page and landing page picks the
   change up at once. It is no longer matcha and no longer blossom: it is the
   PRIMARY, and the primary is black. Dark surfaces override it below. */
.btn--matcha { background: var(--cta-solid); color: var(--cta-solid-ink); }
.btn--matcha:hover { background: var(--cta-solid-hover); transform: translateY(-2px); }
/* Header sits transparent over the dark hero until you scroll, where a black
   pill would vanish. White at the top, black once the header goes solid. */
header:not(.scrolled) .nav-links .btn--matcha { background: var(--paper); color: var(--ink); }
header:not(.scrolled) .nav-links .btn--matcha:hover { background: #fff; }
/* ...but the open mobile panel is paper, so white-on-white would disappear. */
header .nav-links.open .btn--matcha { background: var(--cta-solid); color: var(--cta-solid-ink); }
header .nav-links.open .btn--matcha:hover { background: var(--cta-solid-hover); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--cream { background: var(--paper); color: var(--ink); }
.btn--cream:hover { background: #fff; transform: translateY(-2px); }
.btn--sakura { background: var(--cta); color: var(--cta-ink); }
.btn--sakura:hover { background: var(--cta-hover); transform: translateY(-2px); }

/* ---------- focus-visible ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, .book-chip:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px;
}
.visiting a:focus-visible, .visiting button:focus-visible,
.hero a:focus-visible, footer a:focus-visible { outline-color: var(--paper); }

/* ---------- booking cluster ---------- */
.booking { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.3rem; }
.booking__alt { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.82rem; color: var(--ink-mute); }
.booking__alt .lbl { font-weight: 600; }
.book-chip {
  display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; font-size: 0.84rem;
  color: var(--ink); padding: 0.6em 1em; border: 1px solid var(--line);
  border-radius: 999px; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.book-chip .badge {
  width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: 0.62rem; font-weight: 700;
}
.book-chip:hover { border-color: var(--ink); }

/* ---------- top ribbon (evergreen gift strip) ---------- */
.hero__fd {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  background: var(--ink); color: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 0.5rem var(--gut); min-height: var(--ribbon-h);
  font-size: 0.8rem; text-align: center;
}
.hero__fd, .hero__fd:hover, .hero__fd:focus { background: var(--ink); }
.hero__fd-text { font-weight: 400; }
.hero__fd-tag { font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.68rem; color: #fff; margin-right: 0.55rem; }
.hero__fd-tag::after { content: "·"; margin-left: 0.55rem; opacity: 0.45; }
.hero__fd-cta { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; font-weight: 600; font-size: 0.82rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 1px; }
.hero__fd:hover .arrow { transform: translateX(4px); }
.hero__fd .arrow { transition: transform var(--dur-fast) var(--ease); }

/* ---------- nav ---------- */
header {
  position: fixed; inset: var(--ribbon-h) 0 auto 0; z-index: 100;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
header.scrolled {
  background: color-mix(in oklab, var(--paper) 72%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line-soft);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding-block: 1.1rem; }
.brand { font-family: 'Trajan Pro', serif; font-weight: 700; letter-spacing: 0.22em; font-size: 0.9rem; color: #fff; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; }
.nav-links a.navlink { font-size: 0.85rem; letter-spacing: 0.01em; color: #fff; position: relative; }
.nav-links a.navlink::after {
  content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1.5px;
  background: currentColor; transition: width var(--dur) var(--ease);
}
.nav-links a.navlink:hover::after { width: 100%; }
header.scrolled .brand, header.scrolled .nav-links a.navlink { color: var(--ink); }
header.scrolled .nav-toggle span { background: var(--ink); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 42px; height: 42px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 8px; margin-left: auto; }
.nav-toggle span { display: block; height: 2px; width: 24px; background: #fff; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 250;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-top: 1px solid var(--line-soft);
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    padding: 0 var(--gut);
    transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease), padding var(--dur) var(--ease);
  }
  .nav-links.open {
    max-height: 80vh; opacity: 1; visibility: visible; padding: 1.1rem var(--gut) 1.4rem;
    box-shadow: 0 18px 30px -16px rgba(18,17,15,0.28);
  }
  header .nav-links a.navlink,
  header.scrolled .nav-links a.navlink { color: var(--ink); }
  .nav-links a.navlink { display: block; width: 100%; padding: 0.95rem 0; font-size: 1rem; border-bottom: 1px solid var(--line-soft); }
  .nav-links.open a.navlink:first-of-type { padding-top: 0.3rem; }
  .nav-links a.navlink::after { display: none; }
  .nav-links .btn--matcha { margin-top: 1.1rem; width: 100%; justify-content: center; }
}

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-content: end; background: var(--ink); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
/* mirrored so the subject sits RIGHT and the headline never crosses her face */
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 32%; transform: scaleX(-1); filter: saturate(1.06) contrast(1.04); }
/* NO MIRROR on this clip, unlike the still above it. The still is a fixed frame
   with the subject on the left, so scaleX(-1) was the only way to clear the
   headline. In this footage she WALKS, tracking centre to centre-right for the
   whole 16s, which already leaves the left third open. Mirroring would drag her
   straight into the copy.

   20% is measured against the two tightest frames in the loop, t=0 and t=9,
   where she tracks closest to the copy. At 58% the lead paragraph's last line
   ran into her arm; 20% shows more of the source's left edge, which seats her
   clear of both the headline and the lead for the whole 16s. */
.hero__bg .hero__video {
  width: 100%; height: 100%; object-fit: cover; object-position: 20% 42%;
  filter: saturate(1.06) contrast(1.04);
  /* The poster is letterboxed by default while the video buffers, which flashes
     bars before playback. object-fit covers the poster too. */
  display: block;
}
/* Reduced motion is handled by PAUSING the video in JS, not by hiding it and
   swapping in a CSS background. A background image cannot be mirrored, and the
   mirror is load-bearing here: unmirrored, the subject sits under the headline.
   A paused video shows its poster, which the same transform mirrors correctly,
   so the reduced-motion view is the identical frame, just still. */
/* 2026-07-29: the scrim is GONE. Cybil: "do not add overlay as the video goes
   dark on one side". The 90deg gradient below was blacking out the left third to
   buy contrast for the headline, which is exactly the darkening he is objecting
   to. Legibility now comes from a shadow on the TYPE (see .hero__inner), which
   darkens the letters instead of the footage. */
.hero__bg::after { content: none; }
/* The desktop scrim, which blacked out the left third, is removed for the same
   reason. Nothing replaces it on the image. */
/* Contrast without touching the picture. With the scrim removed the copy sits
   straight on bright sand and surf, so each text layer carries its own shadow.
   A shadow tracks the glyph edges, so it buys legibility over the few hundred
   pixels the letters actually occupy rather than dimming the whole left third. */
.hero__inner :is(h1, .hero__lead, .hero__rating, .hero__whisper) {
  text-shadow: 0 1px 2px rgba(12,11,10,.42), 0 2px 18px rgba(12,11,10,.55);
}
.hero__inner {
  position: relative; z-index: 3;
  padding: calc(var(--ribbon-h) + 6rem) var(--gut) clamp(2.5rem, 5vw, 5rem);
}
.hero__inner > * { max-width: 46ch; }
.hero__inner .eyebrow { color: rgba(255,255,255,0.78); }
/* Sized so the longest line clears the subject on the right at every width.
   At 1440 the headline must stop by ~560px; she starts around 610px. */
.hero__inner h1 {
  color: #fff; font-size: clamp(2.8rem, 1.4rem + 4vw, 4.9rem);
  line-height: 0.96; letter-spacing: -0.04em; max-width: 13ch; margin: 1rem 0 1.1rem;
}
.hero__inner h1 em { font-style: normal; color: var(--sakura); }
/* "Get Beach / READY". READY drops to its own line and comes in larger, so the
   payoff word carries the weight rather than the setup. display:block does the
   line break, so there is no <br> to keep in sync with the type size. The
   tighter line-height closes the gap the bigger word would otherwise open. */
.hero__h1 em {
  display: block;
  font-size: 1.42em;
  line-height: 0.88;
  letter-spacing: -0.045em;
}
.hero__lead { color: rgba(255,255,255,0.9); max-width: 40ch; font-size: clamp(1.05rem, 1rem + 0.45vw, 1.28rem); line-height: 1.55; }
.hero .booking__alt { color: rgba(255,255,255,0.8); }
.hero .book-chip { color: #fff; border-color: rgba(255,255,255,0.4); }
.hero .book-chip:hover { border-color: #fff; }
.hero__rating { margin-top: 1.2rem; color: #fff; font-weight: 600; font-size: 0.86rem; opacity: 0.92; }
/* opt out of the 46ch cap so the three-part line doesn't wrap and orphan its dot */
.hero__whisper { color: rgba(255,255,255,0.75); margin-top: 1.1rem; max-width: none; }
.hero__stamp {
  position: absolute; right: clamp(1.2rem, 4vw, 2.6rem); top: calc(var(--ribbon-h) + 78px); z-index: 3;
  width: 48px; height: 48px; display: grid; place-items: center;
  font-family: var(--jp); font-size: 1.45rem; color: #fff;
  background: transparent; border: 1px solid rgba(255,255,255,0.45); border-radius: 50%; opacity: 0.85;
}

@media (max-width: 880px) {
  /* z-index: the hero's gift strip (.hero__fd, order:-1) was painting over the
     OPEN burger menu and swallowing the first nav item. The header owns the
     menu, so it has to win the stack. */
  /* sticky, NOT relative: relative scrolled the nav away entirely, so on a
     phone there was no way back to the menu without scrolling to the top. The
     gift ribbon still scrolls off, the nav does not. */
  header { position: sticky; top: 0; z-index: 400; inset: 0 0 auto 0; background: var(--paper); box-shadow: 0 1px 0 var(--line-soft); }
  .nav-links.open { background: var(--paper); }
  .brand, .nav-links a.navlink { color: var(--ink); }
  .nav-toggle span { background: var(--ink); }

  /* Mobile hero is an OVERLAY, same as desktop. It used to stack: video on top,
     copy in a black block underneath. That block ate most of a phone screen and
     read as a separate panel rather than a hero. The video now fills the whole
     section and the copy sits over the sand at bottom-left, clear of her. */
  .hero { position: relative; display: flex; flex-direction: column; min-height: 76svh; }
  .hero__fd { position: static; order: -1; z-index: 3; }
  /* inset 0 puts the video behind the gift ribbon too, which is fine: the
     ribbon is opaque ink and covers it. */
  .hero__bg { position: absolute; inset: 0; height: auto; order: 0; }
  /* Same left-of-model crop as desktop. A LOWER percentage shows more of the
     scene to her left, which pushes her toward the right of the frame and keeps
     the copy column clear. 58% centred her straight over the headline. */
  .hero__bg .hero__video { object-position: 44% 42%; }
  .hero__inner { order: 1; margin-top: auto; background: transparent;
                 padding: 1.6rem var(--gut) 2.2rem; }
  /* Hold the copy in a left-hand column. Unconstrained, the lead and the
     whisper ran the full width and crossed onto her, where white type over a
     lit bikini has no contrast left to spend. */
  .hero__inner > * { max-width: 22ch; }
  /* Smaller than the desktop clamp: at 2.8rem "Get Beach" filled a 390px screen
     edge to edge and READY, 1.42x larger again, overflowed it. */
  .hero__inner h1 { font-size: clamp(2rem, 1rem + 5.4vw, 2.9rem); margin: 0.5rem 0 0.7rem; }
  .hero__h1 em { font-size: 1.28em; }
  .hero__lead { font-size: 0.95rem; line-height: 1.45; max-width: 21ch; }
  .hero__rating { margin-top: 0.7rem; font-size: 0.78rem; }
  /* Cybil's call, 2026-07-29: the three-part whisper wrapped to three lines on
     a phone and there was no width left to keep them off her. Dropped on mobile
     only, which lets the rest of the copy sit in a narrower column clear of her.
     It still runs on desktop, where the room exists. */
  .hero__whisper { display: none; }
  .hero__stamp { top: auto; bottom: auto; }
}

/* ============================================================
   BAND RHYTHM — this is the whole redesign.
   White is the default. Cream appears only on .block--cream.
   Exactly ONE band is deep matcha (.visiting).
   ============================================================ */
/* NB: no `section` qualifier on the base — an element-qualified selector would
   out-specify the tint modifiers below and flatten every band to white.
   Base first, tint modifiers last. */
.block { padding-block: var(--space); background: var(--paper); }
/* Two blocks on the same field stack padding-bottom onto padding-top and open a
   trough twice the intended size. Collapse the join. */
.block + .block { padding-top: 0; }
.block--cream, .gift, .pricing, .moment, .reviews, .location { background: var(--paper); }

/* Cream earns TWO bands on the whole page, and only where content fills the
   field — the membership cards, and the FAQ list. Everywhere else is white.
   (Tinting all five .block--cream sections left thin sections like the three
   pillars floating in a large empty cream field, which read as beige-heavy.) */
#smooth-season, .faq { background: var(--tint); }

.head { max-width: 54ch; margin-bottom: clamp(1.4rem, 0.9rem + 1.6vw, 2.4rem); }
.head.center { margin-inline: auto; text-align: center; }
.head h2 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem); margin: 0.6rem 0 0.8rem; }
.lead-p { font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem); color: var(--ink-soft); line-height: 1.6; }

/* ---------- gift ---------- */
.gift-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 860px; margin-inline: auto;
}
.gift-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(2.2rem, 4vw, 3.2rem) 1.75rem;
  background: var(--paper-lift); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(18,17,15,.03), 0 24px 48px -32px rgba(18,17,15,.35);
}
.gift-card--feature { background: var(--ink); border-color: var(--ink); color: rgba(255,255,255,0.82); }
.gift-card__eyebrow { font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-mute); }
.gift-card--feature .gift-card__eyebrow { color: rgba(255,255,255,0.6); }
.gift-card__value {
  font-family: var(--serif); font-weight: 600; line-height: 0.95; letter-spacing: -0.04em;
  font-size: clamp(3.4rem, 2.2rem + 4vw, 5rem); color: var(--ink); margin: 0.7rem 0 0.3rem;
}
.gift-card--feature .gift-card__value { color: #fff; }
.gift-card__value span {
  display: inline-block; font-family: var(--sans); font-weight: 600; letter-spacing: 0.2em;
  font-size: 0.66rem; text-transform: uppercase; vertical-align: super; margin-left: 0.4em; color: var(--ink-mute);
}
.gift-card--feature .gift-card__value span { color: rgba(255,255,255,0.55); }
.gift-card__pay { font-size: 1.05rem; color: var(--ink-soft); }
.gift-card--feature .gift-card__pay { color: rgba(255,255,255,0.82); }
.gift-card__pay strong { font-weight: 700; color: var(--ink); }
.gift-card--feature .gift-card__pay strong { color: #fff; }
.gift-card__back {
  display: inline-block; margin-top: 0.8rem; padding: 0.32rem 0.9rem;
  background: var(--tint); color: var(--ink); border-radius: 999px;
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.gift-card__btn { margin-top: 1.7rem; }
.gift-card--feature .gift-card__btn { background: #fff; color: var(--ink); }
.gift-card--feature .gift-card__btn:hover { background: var(--tint); }
.gift-note { text-align: center; max-width: 58ch; margin: clamp(1.2rem, 1.8vw, 1.7rem) auto 0; font-size: 0.9rem; color: var(--ink-mute); }

/* ---------- smooth season / rewards ---------- */
.ss-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 960px; margin-inline: auto; align-items: stretch;
}
.ss-card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(2rem, 3.5vw, 2.9rem);
  background: var(--paper-lift); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(18,17,15,.03), 0 24px 48px -32px rgba(18,17,15,.35);
}
.ss-card--feature { background: var(--ink); border-color: var(--ink); }
.ss-card__eyebrow { font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-mute); }
.ss-card--feature .ss-card__eyebrow { color: rgba(255,255,255,0.55); }
.ss-card__title { font-family: var(--serif); font-weight: 600; line-height: 1.05; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.25rem); margin: 0.7rem 0 0.5rem; }
.ss-card--feature .ss-card__title { color: #fff; }
.ss-card__lead { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.55; }
.ss-card--feature .ss-card__lead { color: rgba(255,255,255,0.78); }
.ss-card__price { font-family: var(--serif); font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); color: var(--ink); margin: 1.1rem 0 0; }
.ss-card--feature .ss-card__price { color: #fff; }
.ss-card__price small { font-family: var(--sans); font-size: 0.85rem; font-weight: 500; letter-spacing: 0; color: var(--ink-mute); }
.ss-card--feature .ss-card__price small { color: rgba(255,255,255,0.6); }
.ss-card__perks { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.65rem; font-size: 0.95rem; color: var(--ink-soft); }
.ss-card__perks li { display: flex; gap: 0.7rem; align-items: flex-start; }
.ss-card__perks li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 0.62em; border-radius: 50%; background: var(--ink); }
.ss-card--feature .ss-card__perks { color: rgba(255,255,255,0.82); }
.ss-card--feature .ss-card__perks li::before { background: rgba(255,255,255,0.55); }
.ss-card__cta { margin-top: auto; padding-top: 1.8rem; }
.ss-card__cta .btn { width: 100%; justify-content: center; }
.ss-card--feature .ss-card__cta .btn--matcha { background: var(--cta); color: var(--cta-ink); }
.ss-card--feature .ss-card__cta .btn--matcha:hover { background: var(--cta-hover); }

@media (max-width: 620px) {
  .gift-grid { grid-template-columns: 1fr; max-width: 380px; }
  .ss-grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* ---------- pricing / service cards ---------- */
.pricing .wrap { padding-block: clamp(3rem, 5vw, 5rem); }
.pricing__eyebrow { display: block; margin-bottom: 1.6rem; }
.pricing__grp { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.pi {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper-lift); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; padding: 0.5rem 0.5rem 1.25rem;
  box-shadow: 0 1px 2px rgba(18,17,15,.03), 0 22px 46px -30px rgba(18,17,15,.4);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.pi:hover { transform: translateY(-4px); box-shadow: 0 2px 5px rgba(18,17,15,.05), 0 34px 66px -28px rgba(18,17,15,.45); }
.pi__img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-sm); }
.pi .k { position: absolute; top: 1rem; right: 1.15rem; z-index: 2; font-family: var(--jp); font-size: 1.4rem; color: #fff; opacity: 0.85; text-shadow: 0 1px 10px rgba(0,0,0,0.3); }
.pi .lbl { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--ink); margin-top: 1.1rem; padding-inline: 0.55rem; }
.pi .desc { font-size: 0.85rem; color: var(--ink-mute); line-height: 1.45; padding-inline: 0.55rem; margin-top: 0.3rem; }
.pi .val { font-family: var(--serif); font-weight: 700; font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); letter-spacing: -0.03em; color: var(--ink); margin-top: 0.7rem; padding-inline: 0.55rem; line-height: 1; }
.pi .val small { font-family: var(--sans); font-size: 0.56rem; font-weight: 700; color: var(--ink-mute); letter-spacing: 0.14em; margin-left: 0.45em; vertical-align: middle; }
.pricing__menu {
  display: inline-block; margin-top: 2rem; font-size: 0.88rem; font-weight: 600;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  transition: opacity var(--dur-fast) var(--ease);
}
.pricing__menu:hover { opacity: 0.6; }
@media (max-width: 820px) { .pricing__grp { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pricing__grp { grid-template-columns: 1fr; } }

/* ============================================================
   THE ONE DARK BAND — deep matcha. This is where the depth
   comes from, and the only place matcha owns a whole field.
   ============================================================ */
.visiting { background: var(--ink); color: rgba(255,255,255,0.8); position: relative; overflow: hidden; }
.visiting .wrap { padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); }
.visiting__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.eyebrow--cream { color: rgba(255,255,255,0.55); }
.visiting__lead h2 { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem); line-height: 1.02; color: #fff; margin: 1rem 0 1.2rem; }
.visiting__copy { max-width: 54ch; color: rgba(255,255,255,0.78); font-size: 1.05rem; line-height: 1.7; }
.visiting__copy strong { color: #fff; font-weight: 600; }
.visiting__cta { margin-top: 2rem; background: #fff; color: var(--ink); }
.visiting__cta:hover { background: var(--tint); transform: translateY(-2px); }
.visiting__points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.7rem 1.8rem; }
.visiting__points li { display: flex; gap: 0.95rem; align-items: flex-start; }
.vp-ic {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  font-weight: 700; font-size: 0.8rem; color: #fff;
}
/* the label/sub pairs inherit body line-height 1.65 and drift apart; tighten both */
.visiting__points li > div { line-height: 1.3; }
.visiting__points strong { display: block; font-size: 0.98rem; color: #fff; font-weight: 600; line-height: 1.25; margin-bottom: 0.3rem; }
/* `li > div span`, NOT any span in the list: the unscoped selector also matched
   .vp-ic and forced it from grid to block, so every icon sat in the top-left
   corner of its circle instead of centred. */
.visiting__points li > div span { display: block; font-size: 0.84rem; color: rgba(255,255,255,0.6); line-height: 1.4; }
@media (max-width: 880px) {
  .visiting__inner { grid-template-columns: 1fr; }
  .visiting__points { grid-template-columns: 1fr; gap: 1.3rem; }
}

/* ---------- philosophy ---------- */
.philosophy { text-align: center; }
/* rem, not ch: `ch` resolves against THIS element's 1rem font, not the 2.4rem
   the paragraph inside is set at, so 38ch measured ~300px and broke the
   statement into seven lines of three words. */
.philosophy__inner { max-width: min(34rem, 100%); margin-inline: auto; }
.philosophy__inner p { font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem); line-height: 1.3; letter-spacing: -0.03em; color: var(--ink); }

/* ---------- pillars ---------- */
.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.pillar { position: relative; padding-top: 2rem; border-top: 1px solid var(--line); }
.pillar .num { font-family: var(--jp); font-size: 1.4rem; color: var(--ink); opacity: 0.22; position: absolute; top: -1.15rem; right: 0; }
.pillar h3 { font-size: 1.45rem; margin-bottom: 0.6rem; }
.pillar p { color: var(--ink-soft); }
/* Four disciplines on the founders page. The base grid is 3-up, which left a
   single orphaned pillar on a second row. */
.pillars-grid--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .pillars-grid--four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .pillars-grid { grid-template-columns: 1fr; gap: 2.2rem; }
                            .pillars-grid--four { grid-template-columns: 1fr; } }

/* ---------- founders panel ----------
   Trial 2026-07-27: the four-sisters block as a single dark inset card, the way
   the reference site does it. Photo left, copy right, headline UNDER the story
   (their order, and it works: you read who they are, then the line lands), one
   CTA out to the About page. Previous cream-band version is parked in
   outputs/wowo-v2/_story_block_previous.html if we revert. */
.founders-panel { padding: calc(var(--space) * 0.7) 0; background: var(--paper); }
.founders-panel__inner {
  background: var(--ink); color: rgba(255,255,255,0.74);
  border-radius: clamp(20px, 2vw, 28px);
  padding: clamp(1.6rem, 3vw, 3rem);
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.6rem, 3.5vw, 3.4rem);
  /* start, not center: with the headline living under the photo the left column
     is much taller, and centring left the copy floating in the middle of the
     panel with dead space above and below it. */
  align-items: start;
}
/* The headline sits in this column, directly UNDER the photo of the sisters
   (Cybil 2026-07-27) rather than at the foot of the copy. No overflow:hidden on
   the wrapper now that it holds text as well: the radius goes on the image. */
.founders-panel__media { align-self: start; }
.founders-panel__media img { width: 100%; height: auto; display: block; border-radius: 14px; }
.founders-panel__media h2 {
  color: #fff; margin: 1.5rem 0 0;
  font-size: clamp(1.7rem, 1.05rem + 1.9vw, 2.45rem); letter-spacing: -0.035em; line-height: 1.05;
}
.founders-panel__copy p { font-size: 0.98rem; line-height: 1.62; }
.founders-panel__copy .eyebrow { color: rgba(255,255,255,0.45); margin-bottom: 0.9rem; }
.founders-panel__copy .principles { margin: 1.1rem 0; }
.founders-panel__copy .principles p { color: rgba(255,255,255,0.9); font-weight: 500; }
@media (max-width: 860px) {
  .founders-panel__inner { grid-template-columns: 1fr; gap: 1.6rem; }
  .founders-panel__media { aspect-ratio: 4 / 3; }
}


/* ---------- first-visit offers ----------
   2026-07-27 v2. First attempt split this across three tiles plus a strip
   underneath, which took four elements to say what the reference says in one
   paragraph. Rebuilt to match the sample exactly: ONE panel, copy left, image
   right, a single button. Panel is the blossom pastel, the job their pale blue
   does. First-visit PRICES ARE HELD (Cybil, 2026-07-28) until the Fresha margin
   is run: the copy names the offer, not the rand. Only R249 Smooth Season, which
   is already live on Paystack, carries a number. */
.offer-panel { padding: calc(var(--space) * 0.7) 0; background: var(--paper); }
.offer-panel__inner {
  background: var(--cta); color: var(--cta-ink);
  border-radius: clamp(20px, 2vw, 28px);
  padding: clamp(1.8rem, 3.4vw, 3.4rem);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3.6rem); align-items: center;
}
.offer-panel__copy h2 {
  color: var(--ink); margin: 0 0 1.1rem;
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); letter-spacing: -0.035em; line-height: 1.04;
}
.offer-panel__copy p { color: var(--cta-ink); font-size: 0.98rem; line-height: 1.6; max-width: 52ch; }
.offer-panel__copy strong { color: var(--ink); font-weight: 600; }
.offer-panel__copy .btn { margin-top: 1.5rem; }
/* height:100% inside an auto-height grid item collapsed this to zero once
   aspect-ratio was also set. Let the ratio drive the height. */
.offer-panel__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; display: block; }
@media (max-width: 860px) {
  .offer-panel__inner { grid-template-columns: 1fr; gap: 1.6rem; }
  .offer-panel__media { order: -1; }
}

/* ---------- service cards (home, 4 up) ----------
   The restructure's centrepiece. Three text-only columns asked the client to
   read; four image cards let them recognise what they came for and tap it.
   Each card is a link straight into its category on menu.html, so the path
   from "I want my legs done" to a price is two taps. */
.svc-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.8rem; }
.svc-card {
  position: relative; display: block; aspect-ratio: 3 / 4;
  border-radius: var(--radius); overflow: hidden; background: var(--tint);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(18,17,15,0.35); }
.svc-card__img { position: absolute; inset: 0; }
.svc-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.svc-card:hover .svc-card__img img { transform: scale(1.04); }
/* See-through glass, deliberately SHALLOW. The first version carried a
   description as well and grew tall enough to cover the subject: on the brows
   card it sat straight over the brow, which is the only thing that photo is
   about. Name and price only, two tight lines. The description was doing no
   work here anyway, the menu page carries the detail. */
.svc-card__body {
  position: absolute; left: 0.55rem; right: 0.55rem; bottom: 0.55rem;
  background: rgba(255, 255, 255, 0.30);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 24px -14px rgba(18, 17, 15, 0.45);
  border-radius: 11px; padding: 0.5rem 0.7rem 0.55rem;
  /* Stacked, not side by side: at 4-up the card is ~250px and "Brazilian &
     Hollywood" next to a price wrapped onto two lines anyway. Each line now
     gets the full width, so nothing wraps and the panel stays two lines. */
  display: flex; flex-direction: column; gap: 0.1rem;
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .svc-card__body { background: rgba(255, 255, 255, 0.82); }
}
.svc-card__body h3 { font-size: 0.92rem; letter-spacing: -0.02em; color: var(--ink); font-weight: 700; line-height: 1.2; }
/* Description, NOT price. The cards are the shop window; the first-visit offer
   panel is where a number should do the persuading. A full price on the card
   argues against the loss-leader before the client has reached the offer. */
.svc-card__body p { font-size: 0.76rem; line-height: 1.35; color: var(--ink); opacity: 0.82; font-weight: 500; }
.svc-card__from { display: none; }
.svc-card__from .arrow { transition: transform var(--dur-fast) var(--ease); display: inline-block; }
.svc-card:hover .svc-card__from .arrow { transform: translateX(4px); }
/* the brow is low in its frame; lift the crop so the glass never lands on it */
.svc-card__img img[src*="svc-face"] { object-position: 50% 38%; }
@media (max-width: 1000px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } }
/* Keeps the desktop 3/4 portrait crop. A 4/3 landscape card here re-cropped
   every photo from the middle, which cut the heads off the men's and brows
   shots: the same image, framed differently, is not the same image. */
@media (max-width: 520px)  { .svc-cards { grid-template-columns: 1fr; gap: 0.8rem; } }

/* ---------- splits ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
.split__media {
  aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; position: relative;
  box-shadow: 0 40px 80px -46px rgba(18,17,15,.5);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media .k { position: absolute; right: 1.3rem; bottom: 0.8rem; font-family: var(--jp); font-size: 2.6rem; color: #fff; opacity: 0.85; text-shadow: 0 2px 14px rgba(0,0,0,0.35); }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } }

.detail-list { margin-top: 0.5rem; }
.detail-list .di { display: flex; gap: 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line-soft); }
.detail-list .di .mk { color: var(--ink); font-weight: 700; }
.detail-list .di p { margin: 0; color: var(--ink-soft); }

.tick-list { list-style: none; margin-top: 1rem; }
.tick-list li { position: relative; padding: 0.8rem 0 0.8rem 1.7rem; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); }
.tick-list li::before { content: ""; position: absolute; left: 0; top: 1.35rem; width: 6px; height: 6px; border-radius: 50%; background: var(--sakura-deep); }

/* ---------- the quiet moment ---------- */
.moment { text-align: center; }
/* the three lines recede so the brand line lands; 0.32 read as broken/disabled */
.moment__inner p { font-family: var(--serif); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.35; letter-spacing: -0.03em; color: var(--ink); opacity: 0.52; }
.moment__inner p.final { margin-top: 2rem; font-weight: 600; color: var(--ink); opacity: 1; }
.moment .label { display: none; }

/* ---------- founders ---------- */
.founders__media { aspect-ratio: auto; border-radius: var(--radius); background: transparent; box-shadow: 0 40px 80px -46px rgba(18,17,15,.45); }
.founders__media img { width: 100%; height: auto; object-fit: contain; border-radius: var(--radius); }
.founders__story p { margin-bottom: 1.15rem; color: var(--ink-soft); }
.principles { display: flex; flex-direction: column; gap: 0.3rem; margin: 1.6rem 0; }
.principles p { font-family: var(--serif); font-size: 1.2rem; letter-spacing: -0.02em; color: var(--ink); margin: 0; }

/* ---------- experience steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.step { position: relative; padding-top: 2.2rem; border-top: 1px solid var(--line); }
/* the number knocks out the rule behind it, so it must match its band (now white) */
.step .n { font-family: var(--jp); position: absolute; top: -1.2rem; left: 0; font-size: 1.3rem; color: var(--ink); opacity: 0.22; background: var(--paper); padding-right: 0.6rem; }
.step h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.step p { font-size: 0.95rem; color: var(--ink-soft); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* ---------- reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1rem; }
.review {
  background: var(--paper-lift); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2.1rem 1.9rem; display: flex; flex-direction: column; gap: 1.1rem;
  box-shadow: 0 1px 2px rgba(18,17,15,.03), 0 18px 40px -32px rgba(18,17,15,.4);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.review:hover { transform: translateY(-4px); box-shadow: 0 2px 5px rgba(18,17,15,.05), 0 34px 66px -26px rgba(18,17,15,.45); }
.review .stars { color: var(--ink); letter-spacing: 0.15em; font-size: 0.9rem; }
.review .quote { font-family: var(--serif); font-size: 1.15rem; line-height: 1.45; letter-spacing: -0.02em; color: var(--ink); }
.review .who { font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--ink-mute); }
/* the 4th tile is a CTA, not a review: run it full width as a dark closing band
   so a 4-item grid never leaves an orphan sitting alone on row two */
.review--cta {
  grid-column: 1 / -1; background: var(--ink); border-color: var(--ink);
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1.9rem 2.2rem;
}
.review--cta:hover { transform: none; }
.review--cta .stars { color: rgba(255,255,255,0.6); }
.review--cta .quote { color: #fff; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); }
.review--cta .who { color: #fff; font-size: 0.86rem; text-transform: none; letter-spacing: 0; }
.review--cta .who a { border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 2px; }
.review--cta .who a:hover { border-color: #fff; }
@media (max-width: 820px) {
  .reviews-grid { grid-template-columns: 1fr; }
  .review--cta { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ---------- faq ---------- */
.faq__list { max-width: 740px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; align-items: center; gap: 1rem; padding: 1.5rem 2.6rem 1.5rem 0;
  font-family: var(--serif); font-size: clamp(1.15rem, 1.05rem + 0.55vw, 1.45rem);
  font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1.3;
  transition: opacity var(--dur) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 0.2rem; top: 50%; width: 15px; height: 15px; margin-top: -7.5px;
  background:
    linear-gradient(var(--ink),var(--ink)) center/15px 1.5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.5px 15px no-repeat;
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-item summary:hover { opacity: 0.6; }
.faq-a { padding: 0 2.6rem 1.7rem 0; }
.faq-a p { margin: 0; color: var(--ink-soft); max-width: 64ch; }
.faq-item[open] .faq-a { animation: faqIn var(--dur) var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq__cta { text-align: center; margin-top: 2.8rem; font-family: var(--serif); font-size: 1.15rem; letter-spacing: -0.02em; color: var(--ink); }
.faq__cta a { font-weight: 600; border-bottom: 1px solid var(--ink); }
.faq__cta a:hover { opacity: 0.6; }

/* ---------- location ---------- */
.location__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: stretch; }
.location__map { border-radius: var(--radius); overflow: hidden; min-height: 380px; box-shadow: 0 30px 60px -38px rgba(18,17,15,.45); }
.location__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; border-radius: var(--radius); }
.location__info h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.location .divider { width: 40px; height: 1.5px; background: var(--ink); margin: 1.2rem 0 1.6rem; }
.location__row { margin-bottom: 1.2rem; color: var(--ink-soft); }
.location__row strong { color: var(--ink-mute); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-bottom: 0.3rem; }
.location__row a { border-bottom: 1px solid var(--line); }
.location__row a:hover { border-color: var(--ink); }
@media (max-width: 820px) { .location__grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
footer { background: var(--ink); color: rgba(255,255,255,0.62); padding-block: clamp(3.5rem, 2rem + 4vw, 6rem) 2.4rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3rem; }
.foot-grid--lean { grid-template-columns: 1.5fr 1fr; }
.foot .brand { color: #fff; letter-spacing: 0.22em; margin-bottom: 1.1rem; display: block; }
.foot p { font-size: 0.92rem; }
.foot .whisper { color: rgba(255,255,255,0.55); }
.foot-col h4 { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 1.1rem; font-weight: 700; }
.foot-col a { font-size: 0.92rem; color: rgba(255,255,255,0.72); display: block; margin-bottom: 0.5rem; transition: color var(--dur-fast) var(--ease); }
.foot-col a:hover { color: #fff; }
.foot-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.78rem; color: rgba(255,255,255,0.42); }
.foot-bottom .kanji-min { font-family: var(--jp); }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .btn, .nav-links a.navlink::after, .faq-item[open] .faq-a { transition: none; animation: none; }
}