/* ============================================================
   MY MIRRORS — Spa & Salon, Nandigama
   Motion + layout system cloned from the BNX PiX / Sree Vikash engine
   (Lenis inner-scroll, GSAP expo reveals, clip-path curtain).

   WHITE + VIOLET (2026-08-14, second revision same day). First pass this
   session was black + violet (dark base, faint violet undertone). Koushik's
   next message asked for the black gone entirely — page base is now --paper
   (white), not --ink. --ink didn't disappear: it kept its exact dark-violet
   value and just changed ROLE, from page background to body/heading text
   colour. Same trick the acid-flash hover already used before either of
   today's changes (row flips paper<->ink on hover) — the whole stylesheet
   already treated ink/paper as a reciprocal pair, so most of today's flip is
   "swap which one each rule reaches for," not new colours.
   Violet is still the one hue, still governed — glow and outline, not fill —
   except the live `.dot`, which had to become a solid violet fill: a white
   dot with only a violet glow is invisible on a white page.
   Two things deliberately did NOT flip: `.curtain` (already white-bg/dark-
   text, so it needed zero changes — it now matches the page instead of
   contrasting with it) and the LOOKBOOK modal (`.book-modal` and children,
   gallery.html only) — kept dark on purpose, as an immersive photo-viewer
   stays dark regardless of site theme, same reason Photos/Lightroom do.
   The photography itself is still a clean, true-to-life grade
   (_source/grade.sh) — violet and the white base both live in the chrome,
   never baked into skin or hair.

   THE MIRROR SEAM
   The business is called My Mirrors. Media blocks carry a flipped, dimmed
   copy of themselves under a hairline seam (.mirror). That reflection is the
   signature of the site, not decoration bolted on — kill it and the page
   loses its idea, not just an effect.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Instrument+Serif:ital@0;1&family=Space+Mono:wght@400;700&display=swap');

/* ---------- tokens ---------- */
:root{
  /* --ink kept its exact black+violet value from the first revision — it is
     now TEXT colour (body copy, headings), not page background. --black /
     --ink-2 / --ink-3 are unchanged and still dark: they back photo
     placeholders and a couple of deliberately-dark panels, which stays right
     in a white theme too (see the banner comment above). */
  --black:#050308;
  --ink:#0A0810;             /* body text, headings — was page base */
  --ink-2:#120E1C;           /* photo placeholder / dark panel backing */
  --ink-3:#1C1626;           /* hover variant of the above */
  --paper:#FFFFFF;           /* page base now — was the on-dark accent */
  --paper-2:#EDEDED;
  --dim:#423C52;             /* body copy — was light-on-dark, now dark-on-light */
  --muted:#6E6780;           /* mono slate labels */
  --faint:#9992A8;           /* most de-emphasised text — decorative use only */
  --line:rgba(10,8,16,.10);
  --line-2:rgba(10,8,16,.20);
  --scrim:rgba(0,0,0,.55);   /* unchanged — darkens PHOTOS for overlaid white text, not page chrome */

  /* the one hue in the system. governed: glow and outline, not fill —
     except .dot, which needs a solid violet fill (see rule below). */
  --violet:#8C7CFF;
  --violet-2:#6552E0;
  --violet-glow:rgba(140,124,255,.45);
  --violet-glow-soft:rgba(140,124,255,.22);
  --violet-line:rgba(140,124,255,.30);

  --font-display:'Inter Tight',system-ui,-apple-system,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --font-serif:'Instrument Serif',Georgia,serif;

  --ease-expo:cubic-bezier(.19,1,.22,1);      /* the signature filmic ease */
  --ease-io:cubic-bezier(.4,0,.2,1);
  --d-fast:.4s; --d-base:.8s; --d-slow:1.5s;

  --frame:14px;
  --track:.06em;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--dim);
  font-family:var(--font-display);font-size:16px;line-height:1.45;
  font-weight:500;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow:hidden;                    /* scroll lives in .scroller */
}
h1,h2,h3,h4{color:var(--ink);font-weight:800;letter-spacing:-.035em;line-height:.92}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- scroller ---------- */
.scroller{position:relative;height:100svh;width:100vw;overflow-y:auto;overflow-x:hidden;background:var(--paper)}
.scroller::-webkit-scrollbar{width:0;height:0}
.frame{position:relative;min-height:100svh;padding:var(--frame)}
.wrap{padding:0 clamp(10px,2.4vw,30px)}

/* ---------- type utilities ---------- */
.mono,.label{font-family:var(--font-mono);font-weight:400;font-size:10.5px;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--muted)}
.label--bright{color:var(--ink)}
.serif{font-family:var(--font-serif);font-weight:400;letter-spacing:0}
.it{font-style:italic}
.display{font-weight:800;letter-spacing:-.04em;line-height:.88;color:var(--ink)}
.display--xl{font-size:clamp(58px,14vw,190px)}
.display--lg{font-size:clamp(40px,8.4vw,120px)}
.display--md{font-size:clamp(30px,4.6vw,64px)}
.lede{font-size:clamp(17px,1.9vw,26px);font-weight:500;line-height:1.5;letter-spacing:-.015em;color:var(--dim);max-width:60ch}
.dim{color:var(--muted)}

/* ============================================================
   CHROME — fixed slate bars, top and bottom
   ============================================================ */
.chrome{position:fixed;inset:0;z-index:60;pointer-events:none}
.chrome a,.chrome button{pointer-events:auto}
/* the overlay is z-80, so the chrome has to climb over it while the menu is
   open — otherwise the close button sits UNDER the menu it closes and the
   overlay can only be dismissed with Escape */
.is-open .chrome{z-index:90}
.chrome__row{position:absolute;left:calc(var(--frame) + 14px);right:calc(var(--frame) + 14px);
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.chrome__row--top{top:calc(var(--frame) + 14px)}
.chrome__row--bot{bottom:calc(var(--frame) + 14px)}
.chrome__group{display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:15px;color:var(--ink)}
.brand small{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
/* the mark is a mirror: a filled half and its reflection */
.brand__mark{width:16px;height:16px;flex:none;position:relative;border:1px solid var(--ink);border-radius:1px;overflow:hidden}
.brand__mark::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:var(--ink)}
.brand__mark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;background:var(--ink);opacity:.3}

/* the real mark — crossed scissors in a ring, echoing the oval emblem etched
   on the salon's own glass door (see _reference/image). Landing page only
   for now: the rest of the chrome still carries the abstract mirror-bar mark
   above until this is approved and rolled out to every page. */
.brand__mark--emblem{width:23px;height:23px;flex:none;color:var(--ink);
  transition:color .4s var(--ease-expo),filter .4s var(--ease-expo)}
.brand__mark--emblem svg{width:100%;height:100%;display:block}
.brand:hover .brand__mark--emblem{color:var(--violet);filter:drop-shadow(0 0 6px var(--violet-glow))}
.tc{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--ink)}
/* solid violet fill, not white+glow — a white dot on a white page is
   invisible, glow alone can't carry it */
.dot{width:6px;height:6px;border-radius:50%;background:var(--violet);display:inline-block;animation:pulse 2.4s var(--ease-io) infinite;box-shadow:0 0 7px 1px var(--violet-glow)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.x-link{position:relative;color:var(--ink)}
.x-link::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1px;background:var(--ink);transition:right var(--d-base) var(--ease-expo)}
.x-link:hover::after{right:0}
.menu-btn{display:flex;flex-direction:column;gap:4px;padding:9px 10px;border:1px solid var(--line);border-radius:2px;background:rgba(255,255,255,.55)}
.menu-btn span{width:18px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease-expo),opacity .3s}
.is-open .menu-btn span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.is-open .menu-btn span:nth-child(2){opacity:0}
.is-open .menu-btn span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ============================================================
   CURTAIN — white clip-path page transition
   ============================================================ */
.curtain{position:fixed;inset:0;z-index:100;background:var(--paper);pointer-events:none;
  display:grid;place-items:center;clip-path:inset(0 0 0 0);transition:clip-path var(--d-slow) var(--ease-expo)}
.curtain__logo{font-weight:800;letter-spacing:-.04em;font-size:clamp(30px,6.4vw,72px);color:var(--ink);opacity:0;transition:opacity .5s}
.curtain.is-hiding{clip-path:inset(0 0 100% 0)}
.curtain.is-armed .curtain__logo{opacity:1}

/* ============================================================
   FULL MENU — editorial overlay. Each link carries its own mirrored ghost.
   ============================================================ */
.fullmenu{position:fixed;inset:0;z-index:80;background:var(--paper);
  clip-path:inset(0 0 100% 0);transition:clip-path var(--d-slow) var(--ease-expo);
  display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none}
.is-open .fullmenu{clip-path:inset(0 0 0 0);pointer-events:auto}
/* DIRECT CHILDREN ONLY — as a descendant selector this also caught the phone
   link down in .fullmenu__foot and set it in 124px display type */
.fullmenu>a{position:relative;display:flex;align-items:baseline;gap:.35em;
  font-weight:800;letter-spacing:-.04em;font-size:clamp(38px,10vw,124px);line-height:1;
  color:var(--faint);transform:translateY(110%);
  transition:transform .9s var(--ease-expo),color .35s var(--ease-expo),opacity .35s}
.is-open .fullmenu>a{transform:translateY(0)}
.fullmenu>a sup{font-family:var(--font-mono);font-size:12px;font-weight:400;color:var(--muted);transform:translateY(-1.6em)}
.fullmenu>a::after{content:"";position:absolute;left:0;right:100%;bottom:.02em;height:3px;background:var(--ink);transition:right .55s var(--ease-expo)}
.fullmenu>a:hover{color:var(--ink)}
.fullmenu>a:hover::after{right:0}
.fullmenu:hover>a{opacity:.4}
.fullmenu:hover>a:hover{opacity:1}
.fullmenu__foot a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* the reflection under each menu line */
.fullmenu>a .ghost{position:absolute;left:0;top:100%;transform:scaleY(-1);transform-origin:top;
  color:var(--ink);opacity:.06;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 62%);
          mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 62%)}
.fullmenu__foot{position:absolute;left:0;right:0;bottom:calc(var(--frame) + 18px);
  display:flex;justify-content:space-between;padding:0 calc(var(--frame) + 14px);gap:16px;flex-wrap:wrap}

/* ============================================================
   MIRROR — the signature. real pane + flipped reflection + hairline seam.
   ============================================================ */
.mirror{position:relative;overflow:hidden;background:var(--black)}
.mirror__real{position:relative;height:78%;overflow:hidden}
.mirror__ref{position:relative;height:22%;overflow:hidden;transform:scaleY(-1)}
.mirror__real img,.mirror__ref img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The reflection is dimmer and softer than the real pane but it must still be
   READABLE — at .30 opacity under the page scrim it went to solid black and
   the whole idea disappeared. It reads as a reflection, not a duplicate,
   because of the falloff and the blur, not because it is hidden. */
.mirror__ref img{opacity:.42;filter:blur(2.4px) brightness(.82) contrast(1.04) saturate(.85)}
/* CAREFUL — this gradient lives INSIDE the scaleY(-1) box, so it is drawn
   mirrored too: `to top` puts its FIRST stop against the seam and its last at
   the visual bottom. Written the intuitive way round it laid solid ink across
   the seam and the reflection vanished. Read it upside-down. */
.mirror__ref::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.04),rgba(0,0,0,.45) 46%,var(--paper))}
.mirror__seam{position:absolute;left:0;right:0;top:78%;height:1px;z-index:4;
  background:linear-gradient(90deg,transparent,var(--paper) 14%,var(--paper) 86%,transparent);
  opacity:.7;box-shadow:0 0 26px rgba(255,255,255,.20),0 0 46px var(--violet-glow-soft)}
/* the scrim only darkens the REAL pane — running it over the reflection too
   was what crushed it */
.mirror__scrim{position:absolute;left:0;right:0;top:0;height:78%;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.1) 36%,rgba(0,0,0,.5))}

/* ============================================================
   HERO — the mirror surface

   No photograph anywhere on this screen. The backdrop is a WebGL fragment
   shader (assets/js/mirror-shader.js) painting a flowing polished surface
   folded about a horizon. Everything below is the chrome that sits on it.

   The CSS here also has to stand ALONE: if WebGL is unavailable the canvas is
   never inserted, and .mirrorsurface's own background is a static rendering of
   the same idea — two radial sheens meeting at a lit seam. It is dimmer, but
   it is the same picture.
   ============================================================ */
.hero{position:relative;width:100%;min-height:100svh;overflow:hidden;background:var(--paper)}

/* the real emblem, photographed off the salon's own glass door and cleaned up
   (see _reference/image + CLAUDE.md rule 2). Replaces the WebGL mirror
   surface that used to fill this whole screen — that shader is unlinked, not
   deleted (assets/js/mirror-shader.js is still on disk, just not loaded by
   index.html any more). Shown as a photographed card, like .board__doc does
   for the price board, rather than faked as a clean vector cutout. */
.hero__seal{width:clamp(96px,11vw,150px);border-radius:6px;overflow:hidden;
  box-shadow:0 1px 0 var(--line),0 24px 54px -22px rgba(10,8,16,.30),0 0 0 1px var(--line);
  margin-bottom:clamp(10px,2vh,20px)}
.hero__seal img{width:100%;height:auto;display:block}

.hero__inner{position:relative;z-index:3;min-height:100svh;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:calc(var(--frame) + 74px) clamp(16px,4vw,54px) calc(var(--frame) + 52px)}

.hero__kicker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted)}
.hero__kicker-since{margin-left:auto;color:var(--faint)}

/* ---------- the lockup ---------- */
.hero__center{align-self:center;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:clamp(14px,2vh,22px);padding:clamp(10px,3vh,40px) 0}
.hero__type{margin:0;font-weight:800;letter-spacing:-.045em;line-height:.82;
  font-size:clamp(56px,15vw,230px);text-transform:uppercase;color:var(--ink)}
/* mask reveal, line by line — not an opacity fade */
.hero__line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero__line>span{display:block;transform:translateY(112%);
  transition:transform 1.15s var(--ease-expo)}
.hero__line:nth-child(2)>span{transition-delay:.1s}
.is-lit .hero__line>span{transform:none}
.hero__sub{font-family:var(--font-serif);font-style:italic;color:var(--ink);
  font-size:clamp(20px,2.5vw,34px);line-height:1.15;opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease-expo) .45s,transform .9s var(--ease-expo) .45s}
.is-lit .hero__sub{opacity:.94;transform:none}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease-expo) .6s,transform .9s var(--ease-expo) .6s}
.is-lit .hero__cta{opacity:1;transform:none}
.btn--ghost{border-color:var(--line);color:var(--dim);background:transparent}
.btn--ghost:hover{border-color:var(--ink);color:var(--paper);background:var(--ink)}

/* ---------- the proof bar ---------- */
.proofbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(16px);
  transition:opacity 1s var(--ease-expo) .8s,transform 1s var(--ease-expo) .8s}
.is-lit .proofbar{opacity:1;transform:none}
.pf{background:rgba(140,124,255,.05);
  padding:clamp(14px,2vh,20px) clamp(12px,1.6vw,22px);
  display:flex;flex-direction:column;gap:5px;position:relative;overflow:hidden;
  transition:background .45s var(--ease-io)}
.pf:hover{background:rgba(140,124,255,.11)}
/* a hairline that wipes across the cell on hover — the only motion here, and
   the numerals never animate (a count-up on a real rating reads as a gimmick) */
.pf::after{content:"";position:absolute;left:0;bottom:0;height:1px;right:100%;
  background:var(--ink);transition:right .7s var(--ease-expo)}
.pf:hover::after{right:0}
.pf__n{font-weight:800;letter-spacing:-.045em;line-height:.9;color:var(--ink);
  font-size:clamp(28px,3.4vw,50px);font-variant-numeric:tabular-nums}
.pf__n sup{font-size:.42em;font-weight:600;letter-spacing:0;vertical-align:super;color:var(--dim)}
.pf__k{color:var(--muted)}
.pf__s{color:var(--faint);font-size:11px;line-height:1.5}

.hero__scrollcue{position:absolute;left:50%;bottom:calc(var(--frame) + 16px);transform:translateX(-50%);
  z-index:4;width:1px;height:34px;background:linear-gradient(to bottom,transparent,var(--line-2));overflow:hidden}
.hero__scrollcue span{position:absolute;inset:0;background:var(--violet);
  animation:cue 2.6s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* crosshairs + photographic hero, still used on the inner pages */
.hero__crosshair{position:absolute;width:14px;height:14px;z-index:6}
.hero__crosshair::before,.hero__crosshair::after{content:"";position:absolute;background:rgba(255,255,255,.55)}
.hero__crosshair::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)}
.hero__crosshair::after{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px)}
.ch-tl{top:18px;left:18px}.ch-tr{top:18px;right:18px}.ch-bl{bottom:18px;left:18px}.ch-br{bottom:18px;right:18px}
.hero--photo{height:calc(100svh - var(--frame)*2);min-height:0;border-radius:2px}
.hero--photo .mirror{position:absolute;inset:0}
.hero__copy{position:absolute;left:clamp(18px,4vw,54px);right:clamp(18px,4vw,54px);
  bottom:calc(22% + clamp(20px,3.5vh,48px));z-index:7;max-width:min(980px,92%)}
.hero__copy h1{margin:14px 0 10px}

/* ---------- hero, small screens ----------
   Rebuilt for the phone rather than scaled down: the proof bar becomes 2x2 so
   the numbers stay large enough to read, buttons become full-width thumb
   targets at 48px minimum, and the kicker's trailing note is dropped because
   it wraps into a second line that pushes the lockup off centre. */
@media(max-width:820px){
  .hero__inner{padding:calc(var(--frame) + 62px) 16px calc(var(--frame) + 44px)}
  .hero__kicker-since{display:none}
  .hero__type{font-size:clamp(52px,17vw,132px)}
  .hero__center{gap:18px;padding:clamp(20px,5vh,50px) 0}
  .proofbar{grid-template-columns:1fr 1fr}
  .hero__cta{gap:8px;width:100%}
  .hero__cta .btn{flex:1 1 100%;justify-content:center;min-height:48px}
  .hero__scrollcue{display:none}
}
@media(max-width:420px){
  .hero__type{font-size:clamp(46px,17.5vw,104px);letter-spacing:-.035em}
  .hero__sub{font-size:clamp(19px,6vw,26px)}
  .pf{padding:13px 12px}
  .pf__n{font-size:clamp(24px,7.5vw,34px)}
}
@media(prefers-reduced-motion:reduce){
  .hero__line>span,.hero__sub,.hero__cta,.proofbar{transform:none;opacity:1}
  .hero__scrollcue span{animation:none}
}


/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:var(--track);text-transform:uppercase;padding:14px 26px;border-radius:40px;
  border:1px solid var(--line-2);color:var(--ink);background:rgba(10,8,16,.035);
  transition:background .4s var(--ease-expo),color .4s var(--ease-expo),border-color .4s var(--ease-expo),box-shadow .4s var(--ease-expo)}
.btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 6px 30px var(--violet-glow-soft)}
.btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--solid:hover{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:0 6px 30px var(--violet-glow-soft)}

/* ============================================================
   STATEMENT + MARQUEE
   ============================================================ */
.statement{padding:clamp(90px,16vh,190px) 0 clamp(50px,8vh,90px);max-width:1180px}
.statement p{font-weight:700;letter-spacing:-.03em;font-size:clamp(25px,4.4vw,62px);line-height:1.08;color:var(--paper)}
.statement .serif{color:var(--paper)}
.statement .dim{color:var(--faint)}
/* needs to out-specify `.statement p` above — as a bare class it lost, and the
   supporting paragraph rendered at display size */
.statement p.statement__note{margin-top:30px;max-width:640px;font-size:clamp(15px,1.4vw,18px);
  font-weight:500;line-height:1.62;letter-spacing:-.01em;color:var(--dim)}

.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;white-space:nowrap}
.marquee__track{display:inline-flex;gap:48px;animation:scroll 32s linear infinite;will-change:transform}
.marquee__track span{font-family:var(--font-serif);font-style:italic;font-size:clamp(24px,3.8vw,52px);color:var(--ink)}
.marquee__track span::after{content:"·";color:var(--faint);margin-left:48px;font-style:normal}
@keyframes scroll{to{transform:translateX(calc(-50% - 24px))}}

/* ============================================================
   MENU / SERVICES — dotted-leader list, group by group
   ============================================================ */
.svc{padding:clamp(70px,11vh,130px) 0 clamp(50px,8vh,90px)}
.svc__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(34px,5vh,60px)}
.svc__group{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);
  border-top:1px solid var(--line);padding:clamp(26px,4vh,44px) 0;align-items:start}
.svc__group:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.svc__group:nth-child(even) .svc__aside{order:2}
.svc__aside{display:flex;flex-direction:column;gap:14px;position:relative}
.svc__aside h3{font-size:clamp(28px,4vw,54px)}
.svc__img{aspect-ratio:4/5;max-width:290px;overflow:hidden;border-radius:2px;background:var(--ink-2)}
.svc__img img{width:100%;height:100%;object-fit:cover}
.svc__rows{display:flex;flex-direction:column}
.svc__row{display:flex;align-items:baseline;gap:12px;padding:15px 14px;margin:0 -14px;
  border-bottom:1px solid var(--line);
  transition:background .28s var(--ease-io),color .28s var(--ease-io),padding-left .45s var(--ease-expo)}
.svc__row b{font-weight:600;letter-spacing:-.015em;font-size:clamp(17px,1.9vw,23px);color:var(--ink);white-space:nowrap}
.svc__row .fill{flex:1;min-width:20px;height:1px;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 2px,transparent 2px 6px);transform:translateY(-3px)}
.svc__row .note{color:var(--faint);font-size:12.5px;letter-spacing:-.005em;white-space:nowrap}
.svc__row .price{font-family:var(--font-mono);font-size:13.5px;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* THE ACID FLASH — a mirror inverts what it is given, so a row under the
   cursor flips to negative. One deliberate interaction for the whole section;
   nothing else on the page does this. */
.svc__row:hover{background:var(--ink);color:var(--paper);padding-left:22px;border-bottom-color:var(--ink)}
.svc__row:hover b,.svc__row:hover .price,.svc__row:hover .note{color:var(--paper)}
.svc__row:hover .note{color:#B8B2C4}
.svc__row:hover .fill{background:repeating-linear-gradient(90deg,rgba(255,255,255,.34) 0 2px,transparent 2px 6px)}

/* mark 1 — the group anchor. Inverted chip, and it stays inverted through the
   row flash by flipping the other way. */
.svc__row.is-anchor .price{background:var(--ink);color:var(--paper);padding:5px 10px;border-radius:2px;
  font-weight:700;box-shadow:0 0 0 1px var(--ink),0 0 26px var(--violet-glow-soft)}
.svc__row.is-anchor:hover .price{background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--paper)}
.svc__row.is-anchor b{font-weight:700}

/* mark 2 — named in a Google review. Outlined, never filled: it is a citation,
   not a price. */
.svc__row .tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--line-2);border-radius:20px;padding:4px 9px;white-space:nowrap;
  transform:translateY(-2px);cursor:help}
.svc__row:hover .tag{color:var(--paper);border-color:rgba(255,255,255,.4)}

.svc__legend{display:flex;flex-wrap:wrap;gap:12px 30px;padding:16px 0 4px;margin-bottom:6px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.legend__i{display:flex;align-items:center;gap:10px;padding:10px 0}
.legend__m{width:24px;height:24px;flex:none;display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;border-radius:2px}
.legend__m--anchor{background:var(--ink);color:var(--paper);font-weight:700}
.legend__m--asked{border:1px solid var(--line-2);color:var(--ink)}

.svc__note{margin-top:26px;padding:16px 18px;border:1px solid var(--line);border-radius:3px;background:var(--ink-2);
  display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap}

/* the photographed board, shown as the receipt behind the typed menu */
.board{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(22px,4vw,54px);
  align-items:center;padding:clamp(40px,7vh,80px) 0;border-top:1px solid var(--line)}
.board__doc{position:relative;padding:clamp(12px,2vw,22px);background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line),0 40px 90px rgba(0,0,0,.6)}
.board__doc img{width:100%;height:auto;filter:contrast(1.04)}
.board__doc::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.10),transparent 34%,transparent 70%,rgba(0,0,0,.22))}
@media(max-width:860px){.board{grid-template-columns:1fr}}

/* ============================================================
   ROOMS — asymmetric 12-col media grid
   ============================================================ */
.rooms{display:grid;grid-template-columns:repeat(12,1fr);gap:10px;padding-bottom:clamp(70px,11vh,130px)}
.room{position:relative;display:block;overflow:hidden;border-radius:2px;background:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.room img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease-expo)}
.room:hover img{transform:scale(1.045)}
.room::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.06) 34%,rgba(0,0,0,.78))}
.room__bar{position:absolute;left:16px;right:16px;bottom:14px;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.room__t{font-weight:700;letter-spacing:-.025em;font-size:clamp(19px,2.3vw,32px);line-height:1;color:var(--paper)}
.span-12{grid-column:span 12}.span-7{grid-column:span 7}.span-6{grid-column:span 6}.span-5{grid-column:span 5}
.ar-cine{aspect-ratio:16/9}.ar-port{aspect-ratio:4/5}.ar-tall{aspect-ratio:3/4}.ar-wide{aspect-ratio:21/9}

/* ============================================================
   PROOF — rating, static-bold numerals. No count-up.
   ============================================================ */
.proof{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end;
  border-top:1px solid var(--line);padding:clamp(34px,6vh,60px) 0}
.proof__n{grid-column:span 3;display:flex;flex-direction:column;gap:6px}
.proof__n b{font-weight:800;letter-spacing:-.05em;font-size:clamp(44px,7vw,96px);line-height:.86;color:var(--ink)}
.proof__txt{grid-column:6/13;font-size:clamp(15px,1.5vw,19px);line-height:1.55;color:var(--dim)}
.stars{letter-spacing:.18em;color:var(--ink);font-size:13px}

/* ============================================================
   VOICES — review carousel
   ============================================================ */
.voices{padding:clamp(60px,10vh,120px) 0;border-top:1px solid var(--line)}
.voices__stage{position:relative;min-height:clamp(190px,26vh,270px);margin-top:26px}
.voice{position:absolute;inset:0;opacity:0;transform:translateY(22px);pointer-events:none;
  transition:opacity .7s var(--ease-expo),transform .7s var(--ease-expo)}
.voice.is-on{opacity:1;transform:none;pointer-events:auto}
.voice p{font-family:var(--font-serif);font-style:italic;color:var(--ink);
  font-size:clamp(23px,3.6vw,50px);line-height:1.18;letter-spacing:-.01em;max-width:22ch}
.voice .who{margin-top:20px;display:flex;gap:14px;align-items:center}
.voices__dots{display:flex;gap:8px;margin-top:20px}
.voices__dots button{width:26px;height:2px;background:var(--line-2);transition:background .4s var(--ease-expo)}
.voices__dots button[aria-current="true"]{background:var(--ink)}

/* ============================================================
   HOURS / VISIT
   ============================================================ */
.visit{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,40px);
  padding:clamp(70px,11vh,130px) 0;border-top:1px solid var(--line);align-items:start}
.visit__h{grid-column:1/6}
.visit__cols{grid-column:7/13;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.vcol{display:flex;flex-direction:column;gap:9px}
.vcol .v{color:var(--ink);font-size:14.5px;line-height:1.55}
.vcol .v a:hover{text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   AFTER-VISIT — where the printed QR code lands
   (site/assets/img/qr-website.png encodes this section's deep link).

   THE COUNTER STUB. Not two buttons side by side — one ticket, torn down the
   middle, because that is what you are handed at a counter after a visit, and
   it makes the two asks read as one motion rather than a choice between them.
   The perforation IS the idea: delete it and this is a generic two-button
   card. The notches are punched in --paper against the card's faint violet
   wash, so .stub must NOT get overflow:hidden — the circles straddle its edge
   and get clipped into ugly half-moons the moment it does.
   ============================================================ */
.afterv{padding:clamp(50px,8vh,90px) 0;border-top:1px solid var(--line)}
.afterv__lede{margin-top:16px;max-width:56ch;font-size:clamp(15px,1.4vw,18px);
  line-height:1.62;color:var(--dim)}

/* max-width matters: full-bleed this reads as a page-wide banner, not as a
   ticket you were handed. The object has to look holdable. */
.stub{position:relative;display:grid;grid-template-columns:1fr 1px 1fr;
  max-width:940px;
  margin-top:clamp(24px,4vh,38px);border:1px solid var(--line-2);border-radius:10px;
  background:rgba(140,124,255,.045);
  box-shadow:0 24px 60px -34px rgba(10,8,16,.5)}
.stub__half{padding:clamp(20px,2.6vw,34px);display:flex;flex-direction:column;
  align-items:flex-start;gap:9px}
.stub__no{color:var(--violet-2)}
.stub__t{font-weight:700;letter-spacing:-.025em;font-size:clamp(19px,2.1vw,27px);
  line-height:1.1;color:var(--ink)}
.stub__s{font-size:14px;line-height:1.55;color:var(--dim);max-width:34ch}

/* the perforation, with a punched notch at each end */
.stub__perf{position:relative;
  background:repeating-linear-gradient(180deg,var(--line-2) 0 5px,transparent 5px 11px)}
.stub__perf::before,.stub__perf::after{content:"";position:absolute;left:50%;
  width:20px;height:20px;border-radius:50%;background:var(--paper);
  border:1px solid var(--line-2);transform:translateX(-50%)}
.stub__perf::before{top:-11px}
.stub__perf::after{bottom:-11px}

.stub__go{margin-top:8px;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:var(--track);
  text-transform:uppercase;padding:15px 24px;border-radius:40px;min-height:48px;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  transition:background .4s var(--ease-expo),color .4s var(--ease-expo),
             border-color .4s var(--ease-expo),box-shadow .4s var(--ease-expo)}
.stub__go:hover{background:transparent;color:var(--ink);
  box-shadow:0 6px 30px var(--violet-glow-soft)}
.stub__go--wa{background:transparent;color:var(--ink);border-color:var(--line-2)}
.stub__go--wa:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.stub__arw{transition:transform .4s var(--ease-expo)}
.stub__go:hover .stub__arw{transform:translateX(4px)}

/* torn state — set only once step one has actually been clicked. Step one
   settles back and step two lifts, so the eye is handed on rather than left
   to choose again. */
.stub__done{display:none;color:var(--violet-2)}
.stub.is-done .stub__half--one{opacity:.62}
.stub.is-done .stub__done{display:block}
.stub.is-done .stub__go--wa{background:var(--ink);color:var(--paper);
  border-color:var(--ink);box-shadow:0 0 0 4px var(--violet-glow-soft)}

@media(max-width:760px){
  /* the tear turns horizontal on a phone, so the notches move to the sides */
  .stub{grid-template-columns:1fr;grid-template-rows:1fr 1px 1fr}
  .stub__perf{background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 11px)}
  .stub__perf::before,.stub__perf::after{top:50%;left:auto;bottom:auto;
    transform:translateY(-50%)}
  .stub__perf::before{left:-11px}
  .stub__perf::after{right:-11px}
  .stub__go{width:100%;justify-content:center}
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding:clamp(60px,10vh,120px) 0;border-top:1px solid var(--line)}
.faq__list{margin-top:30px;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:20px 0;text-align:left;font-weight:600;letter-spacing:-.02em;
  font-size:clamp(17px,2vw,25px);color:var(--ink);transition:padding-left .45s var(--ease-expo)}
.faq__q:hover{padding-left:10px}
.faq__q .sign{font-family:var(--font-mono);font-size:18px;color:var(--muted);transition:transform .45s var(--ease-expo)}
.faq__item.is-open .faq__q .sign{transform:rotate(45deg);color:var(--ink)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .6s var(--ease-expo)}
.faq__a p{padding:0 0 22px;max-width:70ch;color:var(--dim);line-height:1.62;font-size:15.5px}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--line);padding:44px 0 26px;display:grid;grid-template-columns:repeat(12,1fr);gap:22px;align-items:end}
.foot__big{grid-column:1/8;font-weight:800;letter-spacing:-.05em;font-size:clamp(44px,10.5vw,146px);line-height:.84;color:var(--ink)}
.foot__col{grid-column:span 2;display:flex;flex-direction:column;gap:7px}
.foot__col a:hover{color:var(--ink)}
/* the chrome's bottom slate bar is fixed, so the last line of the footer has
   to clear it or the two print on top of each other at the end of every page */
.foot__bar{grid-column:1/13;display:flex;justify-content:space-between;gap:16px;
  border-top:1px solid var(--line);margin-top:32px;padding-top:15px;
  padding-bottom:calc(var(--frame) + 44px);flex-wrap:wrap}

/* sticky call bar — appears once the hero is gone */
.sticky-cta{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);z-index:70;
  display:flex;gap:8px;align-items:center;padding:8px 8px 8px 18px;border-radius:40px;
  border:1px solid var(--violet-line);background:rgba(10,8,16,.86);backdrop-filter:blur(9px);
  box-shadow:0 10px 40px var(--violet-glow-soft);
  transition:transform .7s var(--ease-expo)}
.sticky-cta.is-on{transform:translate(-50%,0)}
.sticky-cta .btn{padding:10px 18px}
@media(max-width:600px){.sticky-cta{left:12px;right:12px;transform:translateY(140%);width:auto;justify-content:space-between}
  .sticky-cta.is-on{transform:translateY(0)}}

/* ============================================================
   GRAIN + reveal utilities
   ============================================================ */
.grain{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.r-up{opacity:0;transform:translateY(26px);transition:opacity var(--d-base) var(--ease-expo),transform var(--d-base) var(--ease-expo)}
.r-up.in{opacity:1;transform:none}
.r-clip{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease-expo)}
.r-clip.in{clip-path:inset(0 0 0 0)}
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.w{display:inline-block;will-change:transform}
.btn,.menu-btn,.book-close,.book-ctrl button{will-change:transform}

/* ============================================================
   GALLERY — 3D depth stack, camera dollies through on scroll
   ============================================================ */
.gal3d{position:relative;width:100%}
.gal3d__viewport{position:sticky;top:0;height:100svh;overflow:hidden;perspective:1500px;perspective-origin:50% 47%}
.gal3d__stack{position:absolute;inset:0;transform-style:preserve-3d}
.gal3d__slide{position:absolute;left:50%;top:50%;width:min(44vw,430px);height:min(72vh,600px);
  transform:translate(-50%,-50%);transform-origin:center;will-change:transform,opacity;
  border-radius:3px;overflow:hidden;background:var(--ink-2);box-shadow:0 50px 110px rgba(0,0,0,.7)}
.gal3d__slide img{width:100%;height:100%;object-fit:cover}
.gal3d__slide::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  background:linear-gradient(180deg,transparent 62%,rgba(0,0,0,.45))}
.gal3d__chrome{position:absolute;inset:0;z-index:50;pointer-events:none}
.gal3d__chrome>*{pointer-events:auto}
.thumbs{display:flex;flex-direction:column;gap:8px;max-height:72vh;overflow:auto;padding-right:4px;
  position:absolute;left:18px;top:50%;transform:translateY(-50%)}
.thumbs::-webkit-scrollbar{width:0}
.thumb{position:relative;width:64px;height:46px;border-radius:2px;overflow:hidden;opacity:.35;transition:opacity .4s var(--ease-expo)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb[aria-current="true"]{opacity:1;outline:1px solid var(--paper)}
.exif{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:212px;display:flex;flex-direction:column;gap:9px}
.exif .row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:7px}
.exif .row span:last-child{color:var(--paper)}
.gal-no{position:absolute;top:11%;right:18px;font-weight:800;font-size:clamp(38px,6vw,82px);letter-spacing:-.05em;line-height:1;color:var(--paper)}
.gal-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%)}
.gal-hint{position:absolute;left:18px;bottom:22px}
.book-open-btn{position:absolute;right:18px;bottom:20px}
@media(max-width:860px){
  .gal3d__slide{width:74vw;height:54vh}
  .thumbs{display:none}
  .exif{right:12px;width:154px}
}

/* ============================================================
   LOOKBOOK — CSS-3D flip book
   ============================================================ */
.book-modal{position:fixed;inset:0;z-index:90;display:none;place-items:center;
  background:radial-gradient(120% 120% at 50% 30%,rgba(20,20,20,.62),rgba(3,3,3,.97));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.book-modal.is-open{display:grid;animation:fadeIn .5s var(--ease-expo)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.book-modal__chrome{position:absolute;inset:0;pointer-events:none;padding:calc(var(--frame) + 18px)}
.book-modal__chrome>*{pointer-events:auto}
.book-modal__title{position:absolute;top:calc(var(--frame) + 22px);left:calc(var(--frame) + 18px)}
.book-close{position:absolute;top:calc(var(--frame) + 18px);right:calc(var(--frame) + 18px);
  width:44px;height:44px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  color:var(--paper);transition:.3s var(--ease-expo);background:rgba(0,0,0,.5)}
.book-close:hover{background:var(--paper);color:var(--ink);transform:rotate(90deg)}
.book-loc{position:absolute;top:calc(var(--frame) + 66px);left:calc(var(--frame) + 18px);
  border:1px solid var(--line);border-radius:3px;padding:12px 14px;width:196px;background:rgba(10,10,10,.55)}
.book-loc .h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.book-loc .pin{width:13px;height:13px;border:1.5px solid var(--paper);border-radius:50% 50% 50% 0;transform:rotate(45deg)}
.book-loc .co{color:var(--paper)}
.book-vols{position:absolute;top:calc(var(--frame) + 184px);left:calc(var(--frame) + 18px);
  border:1px solid var(--line);border-radius:3px;padding:12px 14px;width:196px;background:rgba(10,10,10,.55);
  display:flex;flex-direction:column;gap:7px}
.book-vols .v{display:flex;justify-content:space-between;gap:10px}
.book-vols .v.off{color:var(--faint)}
.book-vols .v.on b{color:var(--paper);font-weight:600}
.book-zoom{position:absolute;left:calc(var(--frame) + 18px);bottom:calc(var(--frame) + 18px);display:flex;flex-direction:column;gap:6px}
.book-zoom button{width:34px;height:34px;border:1px solid var(--line);border-radius:3px;display:grid;place-items:center;
  color:var(--paper);background:rgba(10,10,10,.55);transition:.3s var(--ease-expo)}
.book-zoom button:hover{background:var(--paper);color:var(--ink)}
.book-cta-row{position:absolute;left:50%;bottom:calc(var(--frame) + 76px);transform:translateX(-50%);display:flex;gap:10px}
.book-stage{perspective:2700px;perspective-origin:50% 38%;width:min(84vw,700px);height:min(76vh,580px);position:relative}
.book{position:absolute;top:0;left:50%;width:50%;height:100%;transform-style:preserve-3d;transition:transform .9s var(--ease-expo)}
.book__shadow{position:absolute;left:-46%;right:-46%;bottom:-9%;height:13%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.75),rgba(0,0,0,.3) 52%,transparent 78%);
  filter:blur(11px);transform:translateZ(-30px)}
.book__thickness{position:absolute;top:1.6%;right:-12px;width:12px;height:96.8%;border-radius:0 3px 3px 0;transform:translateZ(-2px);
  background:repeating-linear-gradient(0deg,#EDEDED 0 1.4px,#BFBFBF 1.4px 2.8px);box-shadow:3px 3px 8px rgba(0,0,0,.5)}
.leaf{position:absolute;top:0;left:0;width:100%;height:100%;transform-style:preserve-3d;
  transform-origin:left center;transform:rotateY(0deg);will-change:transform;cursor:grab;transition:filter .25s linear}
.leaf:active{cursor:grabbing}
.book.is-turning .leaf{filter:blur(2.2px)}
.leaf__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:var(--ink-2)}
.leaf__face--front{transform:rotateY(0deg);border-radius:0 4px 4px 0;box-shadow:2px 3px 18px rgba(0,0,0,.5)}
.leaf__face--back{transform:rotateY(180deg);border-radius:4px 0 0 4px}
.leaf__face--front::after,.leaf__face--back::after{content:"";position:absolute;top:0;bottom:0;width:30%;pointer-events:none;z-index:3}
.leaf__face--front::after{left:0;background:linear-gradient(90deg,rgba(0,0,0,.3),transparent)}
.leaf__face--back::after{right:0;background:linear-gradient(270deg,rgba(0,0,0,.3),transparent)}
.page{position:absolute;inset:0;background:#F2F2F2;display:flex;flex-direction:column;padding:8% 8.5% 6.5%}
.leaf__face--front .page{box-shadow:inset 18px 0 32px -16px rgba(0,0,0,.5)}
.leaf__face--back  .page{box-shadow:inset -18px 0 32px -16px rgba(0,0,0,.5)}
.page__img{position:relative;flex:1;overflow:hidden;background:var(--ink-2);box-shadow:0 5px 16px rgba(0,0,0,.3)}
.page__img img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.page__cap{margin-top:6.5%;display:flex;justify-content:space-between;align-items:baseline;color:#2B2B2B}
.page__cap span:first-child{font-weight:600;letter-spacing:-.01em;font-size:12px}
.page__cap span:last-child{font-family:var(--font-mono);font-size:11px}
.leaf__cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;
  background:linear-gradient(140deg,#1F1F1F,#050505);color:var(--paper);text-align:center;padding:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 0 90px rgba(0,0,0,.6)}
.leaf__cap::before{content:"";position:absolute;inset:8.5% 7.5%;border:1px solid rgba(255,255,255,.22);border-radius:2px}
.leaf__cap h3{font-weight:800;letter-spacing:-.035em;font-size:clamp(24px,4.4vw,42px);line-height:.95;position:relative}
.leaf__cap .mono{position:relative}
.leaf__cap .brand__mark{width:32px;height:32px}
.book-ctrl{position:absolute;left:50%;bottom:calc(var(--frame) + 18px);transform:translateX(-50%);display:flex;align-items:center;gap:14px}
.book-ctrl button{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  color:var(--paper);background:rgba(10,10,10,.55);transition:.3s var(--ease-expo)}
.book-ctrl button:hover:not(:disabled){background:var(--paper);color:var(--ink)}
.book-ctrl button:disabled{opacity:.28;cursor:not-allowed}
.book-ctrl .pageno{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--track);color:var(--muted);min-width:74px;text-align:center}
.book-hint{position:absolute;left:50%;bottom:calc(var(--frame) + 76px);transform:translateX(-50%);opacity:.7;transition:opacity .4s}
@media(max-width:600px){
  .book-stage{width:90vw;height:60vh}
  .book-loc,.book-vols,.book-zoom{display:none}
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-lead{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,60px);
  padding:clamp(30px,5vh,56px) 0 clamp(46px,7vh,80px);align-items:end}
.about-lead__txt p{font-size:clamp(17px,1.85vw,25px);font-weight:500;line-height:1.5;letter-spacing:-.012em;
  color:var(--dim);margin-bottom:18px;max-width:600px}
.about-lead__txt .serif{color:var(--ink)}
.about-lead__img{aspect-ratio:4/5;min-height:320px;overflow:hidden;border-radius:2px;background:var(--ink-2)}
.about-lead__img img{width:100%;height:100%;object-fit:cover}
.credo{display:flex;flex-wrap:wrap;gap:14px 44px;align-items:baseline;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;margin-bottom:clamp(40px,7vh,74px)}
.credo .c{display:flex;flex-direction:column;gap:5px}
.credo .c b{font-weight:700;letter-spacing:-.025em;font-size:clamp(18px,2vw,27px);color:var(--ink)}
.about-banner{position:relative;height:78vh;overflow:hidden;border-radius:2px}
.about-banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.6))}
.about-banner__cap{position:absolute;left:22px;bottom:20px;z-index:3;color:var(--paper)}

/* ============================================================
   responsive
   ============================================================ */
@media(max-width:1024px){
  .rooms .span-7,.rooms .span-5,.rooms .span-6{grid-column:span 12}
  .proof__n{grid-column:span 6}
  .proof__txt{grid-column:1/13}
  .visit__h,.visit__cols{grid-column:1/13}
  .foot__big{grid-column:1/13}
  .foot__col{grid-column:span 4}
  .svc__group,.svc__group:nth-child(even){grid-template-columns:1fr;gap:26px}
  .svc__group:nth-child(even) .svc__aside{order:0}
  .svc__img{max-width:220px}
  .about-lead{grid-template-columns:1fr}
  .about-lead__img{aspect-ratio:16/10;min-height:0}
}
@media(max-width:600px){
  :root{--frame:9px}
  /* the sub-lockup wraps the brand onto two lines at 375px */
  .brand small{display:none}
  body{font-size:15px}
  .chrome__row{gap:10px}
  .hide-sm{display:none}
  .visit__cols{grid-template-columns:1fr}
  .svc__row{flex-wrap:wrap;gap:6px 12px}
  .svc__row .fill{min-width:24px}
  .svc__row .note{white-space:normal;flex-basis:100%}
  .fullmenu>a{font-size:clamp(34px,13vw,62px)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .r-up{opacity:1;transform:none}
  .r-clip{clip-path:none}
}

/* ============================================================
   MOBILE ERGONOMICS
   Everything below exists because verify-mobile.js failed on it across
   iPhone SE / 14, Pixel 7 and iPad mini. These are not cosmetic tweaks —
   a 15px link and a 2px dot are unusable with a thumb, and this site's whole
   job is to get someone to tap "call".

   The rule applied: anything tappable gets a >=44px hit area, achieved with
   padding rather than by growing the visible element, so the layout keeps its
   editorial density while the target grows underneath it.
   ============================================================ */
@media(max-width:820px){
  /* mono links in the footer, the visit columns and the menu overlay foot were
     15-22px tall — text-height only, no padding */
  .foot__col a,
  .vcol a,
  .fullmenu__foot a,
  .about-lead__txt a,
  .board a{display:inline-flex;align-items:center;min-height:44px;padding:6px 0}
  .foot__col{gap:0}
  .vcol{gap:2px}

  /* the review scrubber was a 26x2 bar with a 2px hit area */
  .voices__dots{gap:14px}
  .voices__dots button{width:38px;height:44px;background:none;position:relative}
  .voices__dots button::before{content:"";position:absolute;left:0;right:0;top:21px;height:2px;
    background:var(--line-2);transition:background .4s var(--ease-expo)}
  .voices__dots button[aria-current="true"]::before{background:var(--ink)}

  /* the header lockup and the chrome link.
     NOTE: grow the hit area with PADDING, never by setting display — a
     display declaration here out-specifies .hide-sm and un-hides the links
     that are meant to disappear on a narrow screen. */
  .brand{min-height:44px;align-items:center;white-space:nowrap}
  .chrome__row--top .x-link{padding:12px 0}

  /* the hero frame scrubber, where it survives */
  .hbar{width:40px;height:44px}
  .hbar::before,.hbar i{top:21px}

  /* the negative gutter on menu rows made them wider than the viewport. The
     parent clipped it so nothing scrolled sideways, but it is 8px of risk for
     no gain on a screen this narrow. */
  .svc__row{margin:0;padding-left:0;padding-right:0}
  .svc__row:hover{padding-left:10px;padding-right:10px;margin:0 -10px}

  /* under 12px is below the readable floor on a phone. 10.5px mono slate
     labels are a desktop affectation; on a handset they are just small. */
  .pf__s{font-size:12px}
  .svc__row .note{font-size:12px}
  .mono,.label{font-size:12px;letter-spacing:.05em}

  /* accordion and filter rows need real height too */
  .faq__q{min-height:56px}
  .tier-tabs button,.filters button{min-height:44px}
}

/* iOS: inputs and tap highlights */
@media(hover:none){
  a,button{-webkit-tap-highlight-color:rgba(10,8,16,.10)}
  /* hover-only affordances must not latch on after a tap */
  .svc__row:hover{background:transparent;color:inherit}
  .svc__row:hover b,.svc__row:hover .price{color:var(--ink)}
  .svc__row:active{background:var(--ink);color:var(--paper)}
  .svc__row:active b,.svc__row:active .price,.svc__row:active .note{color:var(--paper)}
  .svc__row.is-anchor:active .price{background:var(--paper);color:var(--ink)}
}