/* Mica's Shack (on the studio platform, from Diamond).
 *
 * One stylesheet. <html data-look> picks the look (internal names kept):
 *   lacquer  A · Omakase    her gold on near-black, dark walnut counter
 *   ivory    B · Sobremesa  warm paper and ink, terracotta, clay plaster
 *   pastel   C · Brasa      charcoal and ember, charred ground
 * data-palette picks the page's colours (default: the look's own) and
 * data-font-display the headline font. Only tokens change; the layout is shared.
 */
@import url('/fonts/fonts.css');

/* ── Page colours: data-palette (the owner's colour theme) ──────────────────
   With no palette chosen, each look keeps its own: :not([data-palette]). */
:root, html[data-look="lacquer"]:not([data-palette]), html[data-palette="lacquer"] {
  --bg: #0a0905; --bg-2: #111009; --surface: #181510; --line: rgba(201, 148, 58, .18);
  --ink: #f0e6cc; --muted: #b3a68f; --faint: #7a6e5c;
  --accent: #c9943a; --accent-ink: #0a0905; --accent-2: #e0b060;
  --glass: rgba(17, 16, 9, .76); color-scheme: dark; --texture: url('/images/texture/omakase.webp');
}
html[data-look="ivory"]:not([data-palette]), html[data-palette="ivory"] {
  --bg: #f4ede2; --bg-2: #ebe1d2; --surface: #fbf7f0; --line: rgba(43, 31, 22, .12);
  --ink: #2b1f16; --muted: #6e5e4f; --faint: #9c8b79;
  --accent: #a4532f; --accent-ink: #fbf7f0; --accent-2: #c9943a;
  --glass: rgba(251, 247, 240, .82); color-scheme: light; --texture: url('/images/texture/sobremesa.webp');
}
html[data-look="pastel"]:not([data-palette]), html[data-palette="pastel"] {
  --bg: #0f0b09; --bg-2: #17110d; --surface: #1f1712; --line: rgba(224, 119, 58, .18);
  --ink: #f3e6d8; --muted: #bfa792; --faint: #7d6a5a;
  --accent: #e0773a; --accent-ink: #0f0b09; --accent-2: #f2b366;
  --glass: rgba(23, 17, 13, .76); color-scheme: dark; --texture: url('/images/texture/brasa.webp');
}
html[data-palette="blush"] {
  --bg: #fbf5f3; --bg-2: #f4e9e6; --surface: #ffffff; --line: rgba(58, 36, 40, .1);
  --ink: #3a2428; --muted: #7d6368; --faint: #b09a9e;
  --accent: #b86b77; --accent-ink: #ffffff; --accent-2: #8c3b4a;
  --glass: rgba(255, 255, 255, .8); color-scheme: light;
}
html[data-palette="noirrose"] {
  --bg: #120d0f; --bg-2: #1a1316; --surface: #21181b; --line: rgba(244, 226, 230, .12);
  --ink: #f4e7ea; --muted: #b39ea4; --faint: #7a676c;
  --accent: #d9a0aa; --accent-ink: #1a1114; --accent-2: #b3122b;
  --glass: rgba(26, 19, 22, .74); color-scheme: dark;
}
html[data-palette="sage"] {
  --bg: #f3f4ef; --bg-2: #e7eae0; --surface: #fbfbf8; --line: rgba(34, 43, 34, .1);
  --ink: #222b22; --muted: #5f6a5c; --faint: #97a08f;
  --accent: #6f8b6a; --accent-ink: #ffffff; --accent-2: #b0864f;
  --glass: rgba(251, 251, 248, .8); color-scheme: light;
}
html[data-palette="espresso"] {
  --bg: #16110e; --bg-2: #1e1814; --surface: #262019; --line: rgba(240, 228, 214, .12);
  --ink: #f2e7da; --muted: #b5a391; --faint: #7c6d5f;
  --accent: #d6a878; --accent-ink: #16110e; --accent-2: #9e4a2f;
  --glass: rgba(30, 24, 20, .74); color-scheme: dark;
}

/* ── The hero over the 3D scene: data-look (the scene is light or dark) ── */
:root, html[data-look="lacquer"] {
  --hero-ink: #f7f1ea; --hero-shade: linear-gradient(90deg, rgba(9, 11, 12, .72) 0%, rgba(9, 11, 12, .2) 55%, rgba(9, 11, 12, 0) 100%);
}
html[data-look="ivory"] {
  /* Light, and only behind the words: at .86 it washed the whole set out. */
  --hero-ink: #1a1718; --hero-shade: radial-gradient(ellipse 60% 70% at 18% 72%, rgba(247, 243, 238, .72) 0%, rgba(247, 243, 238, .25) 60%, rgba(247, 243, 238, 0) 100%);
}
html[data-look="pastel"] {
  --hero-ink: #1d2b33; --hero-shade: radial-gradient(ellipse 60% 70% at 18% 72%, rgba(242, 247, 247, .78) 0%, rgba(242, 247, 247, .28) 60%, rgba(242, 247, 247, 0) 100%);
}

/* ── Fonts: data-font-display / data-font-body (the owner's choice) ── */
:root { --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', system-ui, sans-serif; }
html[data-font-display="playfair"] { --font-display: 'Playfair Display', Georgia, serif; }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.65 var(--font-body); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.serif { font-family: var(--font-display); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 300; line-height: 1.05; letter-spacing: -.01em; margin: 0; }
h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 em, h1 em { font-style: italic; color: var(--accent); }
.kicker { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }
section { position: relative; }

/* ── Header ── */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 24px 14px; transition: background .3s, backdrop-filter .3s;
}
.site-head.solid { background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--hero-ink); }
.site-head.solid .brand { color: var(--ink); }
.brand svg { width: 30px; height: 30px; color: var(--accent); }
.brand-logo { height: 36px; width: auto; max-width: 220px; object-fit: contain; }
.brand b { font: 500 1.05rem/1 var(--font-body); letter-spacing: .34em; }
.brand small { display: block; font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; opacity: .7; margin-top: 4px; }
.nav { display: flex; align-items: center; gap: 28px; font-size: .85rem; letter-spacing: .06em; }
.nav a { text-decoration: none; color: var(--hero-ink); opacity: .85; }
.site-head.solid .nav a { color: var(--ink); }
.nav a:hover { opacity: 1; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none;
  font: 600 .82rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  padding: 16px 26px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -12px var(--accent); }
.btn.ghost { background: transparent; color: var(--hero-ink); box-shadow: inset 0 0 0 1px currentColor; }
.nav .btn { padding: 12px 20px; }
.menu-btn { display: none; background: none; border: 0; color: inherit; font: inherit; }
@media (max-width: 820px) {
  .nav a:not(.btn) { display: none; }
}

/* ── Hero ── */
.hero { height: 100svh; min-height: 620px; overflow: hidden; color: var(--hero-ink); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero::after { content: ""; position: absolute; inset: 0; background: var(--hero-shade); pointer-events: none; }
/* The copy sits a little below the middle, clear of the header: at the bottom
   it left a wide empty band under the menu. */
.hero { display: flex; align-items: center; padding: 104px 0 6vh; }
/* In the flow, not absolutely placed: on a short or narrow window the copy
   grows upward into the hero's top padding, never under the fixed header
   (it did, at 770px wide). The headline sizes by height as well as width. */
.hero-copy { position: relative; z-index: 2; margin-left: max(24px, calc((100vw - 1180px) / 2)); margin-right: 24px; max-width: 560px; }
.hero h1 { font-size: clamp(2.6rem, min(7.2vw, 10.5vh), 6.2rem); }
.hero p.lede { font-size: 1.05rem; max-width: 460px; margin: 22px 0 32px; opacity: .88; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.scroll-cue { position: absolute; z-index: 2; right: 28px; bottom: 28px; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; opacity: .7; writing-mode: vertical-rl; }
@media (max-width: 700px) { .hero { padding-bottom: 9vh; } .scroll-cue { display: none; } }

/* ── Menu ── */
.menu { padding: 140px 0 110px; background: var(--bg); }
.menu-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 56px; }
.menu-head p { max-width: 420px; color: var(--muted); margin: 0; }
.menu-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px 72px; }
.menu-col h3 { font-size: 2rem; margin-bottom: 18px; display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.menu-col h3 span { font: 500 .72rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.svc { display: grid; grid-template-columns: 1fr auto; gap: 2px 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.svc b { font-weight: 500; }
.svc .price { font-family: var(--font-display); font-size: 1.3rem; color: var(--accent); }
.svc small { color: var(--muted); font-size: .85rem; grid-column: 1; }
.svc .time { color: var(--faint); font-size: .78rem; letter-spacing: .08em; text-align: right; }
.svc.featured b::after { content: "Signature"; margin-left: 10px; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); vertical-align: 2px; }

/* ── Signature sets (ring of cards) ── */
/* Not pinned: the page scrolls straight past; the ring turns only when the
   visitor drags it, swipes it, or presses an arrow. */
.sets { background: var(--bg-2); }
.sets-stage { position: relative; height: max(640px, 100svh); overflow: hidden; }
.sets canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; }
.sets canvas.dragging { cursor: grabbing; }
.sets-copy { position: absolute; z-index: 2; top: 16vh; left: 0; right: 0; text-align: center; pointer-events: none; }
.sets-copy p { color: var(--muted); margin: 14px auto 0; max-width: 460px; }
.set-caption { position: absolute; z-index: 2; bottom: 7vh; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 28px; text-align: center; }
.set-caption > div { min-width: min(320px, 56vw); }
.nav-btn { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); background: transparent; color: var(--ink); font-size: 1.1rem; cursor: pointer; transition: background .2s, border-color .2s; }
.nav-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); border-color: var(--accent); }
.nav-btn:disabled { opacity: .3; cursor: default; }
.set-caption b { font-family: var(--font-display); font-weight: 300; font-size: 2rem; display: block; }
.set-caption span { color: var(--muted); font-size: .88rem; }

/* ── Experience ── */
.experience { padding: 130px 0; }
.exp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.exp-photo { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; }
.exp-photo img { width: 100%; height: 100%; object-fit: cover; }
.exp-list { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 26px; }
.exp-list li { padding-left: 34px; position: relative; }
.exp-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; transform: rotate(45deg); border: 1px solid var(--accent); }
.exp-list b { display: block; font-weight: 600; margin-bottom: 4px; }
.exp-list p { margin: 0; color: var(--muted); }
@media (max-width: 860px) { .exp-grid { grid-template-columns: 1fr; } .exp-photo { aspect-ratio: 16 / 10; } }

/* ── Team ── */
.team { padding: 110px 0 40px; }
.team h2 { margin-bottom: 40px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.team-card { margin: 0; display: grid; gap: 14px; }
.team-photo { aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--surface); display: grid; place-items: center; font: 300 4rem var(--font-display); color: var(--accent); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card figcaption { display: grid; gap: 4px; }
.team-card b { font: 400 1.6rem var(--font-display); }
.team-card span { color: var(--accent); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.team-card small { color: var(--muted); font-size: .86rem; }
.team-card p { color: var(--muted); font-size: .9rem; margin: 6px 0; }
.team-card .btn { justify-self: start; margin-top: 8px; padding: 11px 18px; font-size: .72rem; }
.team-card .btn.ghost { color: var(--ink); }

/* ── Reviews ── */
.reviews { padding: 110px 0 60px; }
.rev-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.rev-badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; }
.rev-badge[href]:hover { border-color: var(--accent); }
.rev-stars { color: var(--accent); letter-spacing: .12em; }
.rev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.rev-card { margin: 0; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); display: flex; flex-direction: column; gap: 14px; }
.rev-card blockquote { margin: 0; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.45; color: var(--ink); }
.rev-card figcaption { color: var(--muted); font-size: .86rem; margin-top: auto; }
.rev-card figcaption b { color: var(--ink); font-weight: 600; }
.rev-source { color: var(--faint); font-size: .8rem; margin-top: 18px; }

/* ── Lookbook strip ── */
/* A sideways scroller that drifts on its own and a little with the page.
   The wheel still scrolls the page; a trackpad swipe, a finger, a mouse drag
   or the arrows move the photos. No snapping: it would fight the drift. */
.lookbook { padding: 40px 0 120px; }
.look-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.look-nav { display: flex; gap: 10px; }
.strip { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.strip::-webkit-scrollbar { display: none; }
.strip.dragging { cursor: grabbing; }
.strip.dragging img { pointer-events: none; }
.strip figure { margin: 0; width: clamp(220px, 26vw, 340px); aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; flex: none; }
.strip img { width: 100%; height: 100%; object-fit: cover; }

/* ── Visit ── */
.visit { padding: 110px 0 130px; background: var(--bg-2); }
.visit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 48px; margin-top: 44px; }
.visit h3 { font-size: 1.6rem; margin-bottom: 14px; }
.visit ul { list-style: none; padding: 0; margin: 0; color: var(--muted); }
.visit li { padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 18px; }
.visit .policy li { display: block; }
.cta-band { margin-top: 80px; text-align: center; }
.cta-band h2 { margin-bottom: 26px; }

/* ── Footer ── */
.site-foot { padding: 50px 0 calc(40px + env(safe-area-inset-bottom, 0px)); font-size: .8rem; color: var(--faint); border-top: 1px solid var(--line); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; }
.site-foot a { color: var(--muted); }

/* ── Comparing looks (preview only) ── */
.tune { position: fixed; z-index: 30; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tune-gear { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(20, 18, 19, .72); color: #f3ece4; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: .6; transition: opacity .2s, transform .3s; }
.tune-gear:hover, .tune-gear[aria-expanded="true"] { opacity: 1; }
.tune-gear[aria-expanded="true"] { transform: rotate(60deg); }
.tune-gear svg { width: 20px; height: 20px; }
.tune[hidden], .look-switch[hidden] { display: none; }
.tune .look-switch { padding: 8px 10px; }
.look-switch {
  display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(20, 18, 19, .82); backdrop-filter: blur(10px); }
.look-switch button { font: inherit; border: 0; background: none; cursor: pointer; }
.look-switch a, .look-switch button { padding: 9px 14px; border-radius: 999px; color: #f3ece4; text-decoration: none; font-size: .78rem; letter-spacing: .06em; }
.look-switch button[aria-pressed="true"], .look-switch a[aria-current] { background: #f3ece4; color: #141213; }

/* ── Reveal on scroll ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ══ Layouts: how the hero meets the page (html[data-flow]) ══════════════ */

/* cut (default): the hero is one screen and the page begins below it. */

/* bleed: the hero runs on and melts into the page; the menu starts over its
   fading lower half, so there is no edge between them. */
/* The hero runs half a screen longer and fades into the menu; the 3D scene
   carries on behind that fade. gems.js frames the camera and the backdrop on
   the top screen, so the distance is the same as "Ends" (stretching the
   framing with the canvas once zoomed every backdrop 1.5x). The copy sits
   where it does in "Ends". */
html[data-flow="bleed"] .hero { height: 150svh; padding-bottom: calc(50svh + 6vh); }
html[data-flow="bleed"] .hero::before { content: ""; position: absolute; inset: auto 0 0; height: 70%; z-index: 1;
  background: linear-gradient(180deg, transparent, var(--bg) 88%); pointer-events: none; }
html[data-flow="bleed"] .menu { margin-top: -48svh; background: transparent; z-index: 2; }

/* through: the stones stay behind the whole page as it scrolls. The canvas
   is fixed to the window; every section is a veil of the page colour, thin
   enough to see them drift behind the words. */
html[data-flow="through"] .hero { background: transparent; }
html[data-flow="through"] .hero canvas { position: fixed; z-index: 0; }
html[data-flow="through"] main > section:not(.hero) { background: color-mix(in srgb, var(--bg) 80%, transparent); z-index: 1; }
html[data-flow="through"] .sets { background: color-mix(in srgb, var(--bg-2) 70%, transparent); }
html[data-flow="through"] .site-foot { position: relative; z-index: 1; background: var(--bg); }

/* ══ Type: classic or bold (html[data-type]) ═════════════════════════════ */

/* bold: a heavy high-contrast serif with a little depth, for a louder brand. */
html[data-type="bold"] h1, html[data-type="bold"] h2, html[data-type="bold"] h3,
html[data-type="bold"] .set-caption b, html[data-type="bold"] .svc .price {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 800; letter-spacing: -.02em;
}
html[data-type="bold"] h1 { line-height: .98; }
/* The layered shadow lifts the hero headline off the 3D scene; elsewhere
   (booking, legal, admin) it only muddies the type. */
html[data-type="bold"] .hero h1 { text-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 55%, transparent), 0 2px 0 color-mix(in srgb, var(--accent) 35%, transparent), 0 14px 30px rgba(0, 0, 0, .18); }
html[data-type="bold"] h1 em, html[data-type="bold"] h2 em { font-weight: 700; }
html[data-type="bold"] .brand b:not(*) { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; letter-spacing: .22em; }

/* The comparison bar, in rows: look, layout, type. */
.look-switch { flex-direction: column; border-radius: 18px; gap: 4px; }
.look-switch .row { display: flex; gap: 4px; }
.look-switch .row b { color: #a9a39b; font: 600 .62rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; align-self: center; width: 54px; }
@media (max-width: 640px) { .look-switch a { padding: 8px 9px; font-size: .7rem; } .look-switch .row b { display: none; } }

/* ── Headline side: data-align="right" puts the hero copy over the open space
   on the right, and mirrors the shade behind it. ── */
html[data-align="right"] .hero-copy { margin-left: auto; margin-right: max(24px, calc((100vw - 1180px) / 2)); }
html[data-align="right"][data-look="lacquer"] .hero::after, html[data-align="right"]:not([data-look]) .hero::after {
  background: linear-gradient(270deg, rgba(9, 11, 12, .72) 0%, rgba(9, 11, 12, .2) 55%, rgba(9, 11, 12, 0) 100%);
}
html[data-align="right"][data-look="ivory"] .hero::after {
  background: radial-gradient(ellipse 60% 70% at 82% 72%, rgba(247, 243, 238, .72) 0%, rgba(247, 243, 238, .25) 60%, rgba(247, 243, 238, 0) 100%);
}
html[data-align="right"][data-look="pastel"] .hero::after {
  background: radial-gradient(ellipse 60% 70% at 82% 72%, rgba(242, 247, 247, .78) 0%, rgba(242, 247, 247, .28) 60%, rgba(242, 247, 247, 0) 100%);
}


/* B's set has dark fern fronds in the top corners: a soft light fade keeps
   the logo and menu readable over them until the header turns solid. */
html[data-look="ivory"] .site-head:not(.solid) { background: linear-gradient(180deg, rgba(247, 243, 238, .85) 0%, rgba(247, 243, 238, .45) 60%, rgba(247, 243, 238, 0) 100%); }

/* ── Headline centred (data-align="center") ── */
html[data-align="center"] .hero { justify-content: center; }
html[data-align="center"] .hero-copy { margin: 0 24px; max-width: 760px; text-align: center; }
html[data-align="center"] .hero p.lede { margin-inline: auto; }
html[data-align="center"] .hero .actions { justify-content: center; }
html[data-align="center"][data-look="lacquer"] .hero::after, html[data-align="center"]:not([data-look]) .hero::after {
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(9, 11, 12, .62) 0%, rgba(9, 11, 12, .18) 65%, rgba(9, 11, 12, 0) 100%);
}
html[data-align="center"][data-look="ivory"] .hero::after {
  background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(247, 243, 238, .72) 0%, rgba(247, 243, 238, .22) 65%, rgba(247, 243, 238, 0) 100%);
}
html[data-align="center"][data-look="pastel"] .hero::after {
  background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(242, 247, 247, .78) 0%, rgba(242, 247, 247, .25) 65%, rgba(242, 247, 247, 0) 100%);
}

/* ── Headline height (data-vpos): up, middle (default), down ── */
html[data-vpos="up"] .hero { align-items: flex-start; padding-top: calc(118px + 4vh); }
html[data-vpos="down"] .hero { align-items: flex-end; padding-bottom: 12vh; }
html[data-flow="bleed"][data-vpos="down"] .hero { padding-bottom: calc(50svh + 12vh); }


/* ── Phones: the copy covers most of the screen, so the one-sided shade used
   on wide screens is not enough to read over the set. An even veil instead,
   whatever the text side or height. ── */
@media (max-width: 700px) {
  html[data-look="lacquer"] .hero::after, html:not([data-look]) .hero::after {
    background: linear-gradient(180deg, rgba(9, 11, 12, .45) 0%, rgba(9, 11, 12, .62) 100%) !important;
  }
  html[data-look="ivory"] .hero::after {
    background: linear-gradient(180deg, rgba(247, 243, 238, .42) 0%, rgba(247, 243, 238, .32) 100%) !important;
  }
  html[data-look="pastel"] .hero::after {
    background: linear-gradient(180deg, rgba(242, 247, 247, .4) 0%, rgba(242, 247, 247, .3) 100%) !important;
  }
  .hero .kicker { font-weight: 600; }
  /* A soft halo in the page colour behind the words: they read over any part
     of the set without veiling the whole of it. */
  html[data-look="ivory"] .hero-copy > *:not(.actions) { text-shadow: 0 0 14px rgba(247, 243, 238, .95), 0 0 30px rgba(247, 243, 238, .8); }
  html[data-look="pastel"] .hero-copy > *:not(.actions) { text-shadow: 0 0 14px rgba(242, 247, 247, .95), 0 0 30px rgba(242, 247, 247, .8); }
  html[data-look="lacquer"] .hero-copy > *:not(.actions) { text-shadow: 0 0 14px rgba(9, 11, 12, .9), 0 0 30px rgba(9, 11, 12, .7); }
  html[data-look="pastel"] .hero .kicker { color: #c44f6c; }
}

/* ── Visit-counts banner (consent.js) ── */
.consent { position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 520px; margin: 0 auto;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; box-shadow: 0 16px 50px rgba(0, 0, 0, .25); }
.consent p { margin: 0 0 12px; font-size: .9rem; line-height: 1.5; }
.consent div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.consent .btn { padding: 11px 18px; font-size: .72rem; }
.consent .btn.ghost { color: var(--ink); }
.consent a { color: var(--muted); font-size: .84rem; margin-left: auto; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }


/* ── Mica's Shack ─────────────────────────────────────────────────────── */
/* The page sits on its look's texture (CC0, Poly Haven), quiet and fixed. */
body { background-color: var(--bg); background-image: linear-gradient(var(--bg-wash, rgba(0,0,0,0)), var(--bg-wash, rgba(0,0,0,0))), var(--texture, none); background-size: auto, 768px 768px; background-attachment: fixed; }
html[data-look="ivory"] body { --bg-wash: rgba(244, 237, 226, .55); }
html[data-look="lacquer"] body, html[data-look="pastel"] body { --bg-wash: rgba(0, 0, 0, .35); }
section.menu, section.experience, section.visit, section.reviews, section.team { background: transparent; }
.brand-mark { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.brand { display: inline-flex; align-items: center; gap: 12px; }

/* hero: her photos, one at a time */
.hero-photos { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.hero-photo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.hero-photo.on { opacity: 1; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hero-photo.soft img { filter: blur(.4px) saturate(1.05); }
html[data-look="lacquer"] { --hero-ink: #f5ecd6; --hero-shade: linear-gradient(90deg, rgba(10, 9, 5, .86) 0%, rgba(10, 9, 5, .45) 50%, rgba(10, 9, 5, .1) 100%), linear-gradient(0deg, rgba(10, 9, 5, .7) 0%, rgba(10, 9, 5, 0) 40%); }
html[data-look="ivory"] { --hero-ink: #fbf7f0; --hero-shade: linear-gradient(90deg, rgba(43, 31, 22, .78) 0%, rgba(43, 31, 22, .35) 55%, rgba(43, 31, 22, .05) 100%), linear-gradient(0deg, rgba(43, 31, 22, .55) 0%, rgba(43, 31, 22, 0) 45%); }
html[data-look="pastel"] { --hero-ink: #f8ead9; --hero-shade: linear-gradient(90deg, rgba(15, 11, 9, .85) 0%, rgba(15, 11, 9, .4) 55%, rgba(15, 11, 9, .1) 100%), radial-gradient(60% 50% at 80% 100%, rgba(224, 119, 58, .25), transparent 70%); }
.hero h1 em { color: var(--accent-2); }
html[data-look="ivory"] .hero h1 em { color: #e8b98c; }
.hero .kicker { color: var(--hero-ink); opacity: .8; }
@media (prefers-reduced-motion: reduce) { .hero-photo { transition: none; } }

/* ── Photo hero shades (Mica). Her photos sit under the words on every look, so
   every look gets a dark shade, whatever the text side or screen: the light
   veils above were for Diamond's pale 3D sets and washed her food out. A band
   at the top keeps the header readable over a bright plate. ── */
html[data-look] .hero::after, html .hero::after {
  background:
    linear-gradient(180deg, rgba(var(--shade), .55) 0%, rgba(var(--shade), 0) 22%),
    radial-gradient(ellipse 70% 60% at var(--shade-x, 50%) 55%, rgba(var(--shade), .62) 0%, rgba(var(--shade), .28) 65%, rgba(var(--shade), .12) 100%),
    linear-gradient(0deg, rgba(var(--shade), .6) 0%, rgba(var(--shade), 0) 35%) !important;
}
html[data-look="lacquer"] { --shade: 10, 9, 5; }
html[data-look="ivory"] { --shade: 38, 27, 19; }
html[data-look="pastel"] { --shade: 15, 11, 9; }
html[data-align="right"] { --shade-x: 72%; }
html[data-align="left"] { --shade-x: 28%; }
html[data-look] .hero-copy > *:not(.actions) { text-shadow: 0 1px 18px rgba(var(--shade), .55) !important; }
html[data-look="pastel"] .hero .kicker { color: var(--hero-ink); }
@media (max-width: 700px) {
  html[data-look] .hero::after { background: linear-gradient(180deg, rgba(var(--shade), .6) 0%, rgba(var(--shade), .38) 30%, rgba(var(--shade), .5) 70%, rgba(var(--shade), .75) 100%) !important; }
  /* the round logo carries the name on a phone; the tracked words wrapped and vanished */
  .site-head .brand b, .site-head .brand small { display: none; }
}
.site-head:not(.solid) .brand { text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
html[data-look] .site-head:not(.solid) { background: linear-gradient(180deg, rgba(var(--shade), .35) 0%, rgba(var(--shade), 0) 100%); }
/* her name set as a name, in the display face, not spaced-out capitals */
.site-head .brand b { font: 600 1.2rem/1 var(--font-display); letter-spacing: .01em; text-transform: none; }
.site-head .brand small { letter-spacing: .08em; text-transform: none; font-size: .72rem; }
/* plain hairline instead of the rotated diamond markers */
.exp-list li { padding-left: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.exp-list li::before { content: none; }

/* ── Hero, chef-led (replaces the full-bleed food photos). The page's own
   surface and texture, her name large, and Mica herself in a tall frame with
   an offset hairline behind it. The look's text and height options keep
   working for the copy; the portrait always sits opposite it. ── */
html[data-look] .hero::after { display: none !important; }
html[data-look] .hero { --hero-ink: var(--ink); height: auto; min-height: min(100svh, 980px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(32px, 6vw, 96px); padding: 120px max(24px, calc((100vw - 1180px) / 2)) 72px; background: none; }
html[data-look] .hero-copy { margin: 0; max-width: 620px; text-align: left; }
html[data-look] .hero-copy > *:not(.actions) { text-shadow: none !important; }
html[data-look] .hero p.lede { margin-inline: 0; color: var(--muted); opacity: 1; }
html[data-look] .hero .actions { justify-content: flex-start; }
html[data-look] .hero h1 em { color: var(--accent); }
html[data-look] .hero .kicker { color: var(--accent); opacity: 1; }
html[data-look] .btn.ghost { color: var(--ink); }
html[data-align="right"] .hero-copy { order: 2; }
html[data-look][data-align] .hero-copy { text-align: left; margin: 0; }
html[data-look][data-align] .hero p.lede { margin-inline: 0; }
html[data-look][data-align] .hero .actions { justify-content: flex-start; }
html[data-vpos="up"] .hero { align-items: start; }
html[data-vpos="down"] .hero { align-items: end; }
.hero-portrait { position: relative; margin: 0; justify-self: center; width: min(100%, 420px, calc((100svh - 240px) / 1.3)); }
.hero-portrait::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid var(--accent); border-radius: 220px 220px 6px 6px; opacity: .55; pointer-events: none; }
.hero-portrait img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5.2; object-fit: cover; object-position: 50% 18%; border-radius: 220px 220px 6px 6px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55); }
.hero-portrait figcaption { position: absolute; left: 0; right: 0; top: calc(100% + 38px); font: italic 400 1.05rem/1.2 var(--font-display); color: var(--muted); text-align: center; }
html[data-look] .site-head:not(.solid) { background: none; }
html[data-look] .site-head:not(.solid) .brand, html[data-look] .site-head:not(.solid) .nav a:not(.btn) { color: var(--ink); text-shadow: none; }
@media (max-width: 860px) {
  html[data-look] .hero { grid-template-columns: 1fr; padding-top: 104px; gap: 44px; min-height: 0; }
  html[data-look] .hero-copy, html[data-align] .hero-copy { order: 2; text-align: left; margin: 0; }
  html[data-align] .hero .actions { justify-content: flex-start; }
  .hero-portrait { order: 1; width: min(64%, 300px, 30svh); justify-self: start; margin-left: 8px; }
  .hero-portrait::before { inset: 14px -14px -14px 14px; }
  .hero-portrait figcaption { display: none; }
}
@media (max-width: 700px) {
  html[data-look] .site-head .brand b, html[data-look] .site-head .brand small { display: block; }
  .site-head .brand small { display: none !important; }
}

/* Diamond's scroll and height options were for its 3D scene; with the chef-led
   hero they only broke the layout, so they are off whatever is saved. */
html[data-flow] .hero { height: auto; }
html[data-flow] .menu { margin-top: 0; }
html[data-flow] .hero::before { content: none; }
html[data-flow="through"] main > section:not(.hero) { background: none; }

/* ── Hero modes (html[data-hero], hero-modes.js). Portrait is the default
   layout above; each other mode swaps what sits opposite the copy. ── */
.hero-card, .hero-words { display: none; }
html:not([data-hero="photos"]) .hero-photos { display: none; }
html[data-hero="photos"] .hero-portrait, html[data-hero="card"] .hero-portrait, html[data-hero="words"] .hero-portrait { display: none; }
html[data-hero="card"] .hero-card, html[data-hero="words"] .hero-words { display: block; }

/* Photos: her dishes full-bleed, a dark shade, light words (the first redesign) */
html[data-hero="photos"][data-look] .hero { display: flex; align-items: center; min-height: 100svh; padding: 120px max(24px, calc((100vw - 1180px) / 2)) 8vh; }
html[data-hero="photos"][data-look] .hero::after { display: block !important; }
html[data-hero="photos"][data-look="lacquer"] .hero { --hero-ink: #f5ecd6; }
html[data-hero="photos"][data-look="ivory"] .hero { --hero-ink: #fbf7f0; }
html[data-hero="photos"][data-look="pastel"] .hero { --hero-ink: #f8ead9; }
html[data-hero="photos"][data-look] .hero h1, html[data-hero="photos"][data-look] .hero p.lede, html[data-hero="photos"][data-look] .hero .kicker, html[data-hero="photos"][data-look] .hero .btn.ghost { color: var(--hero-ink); }
html[data-hero="photos"][data-look] .hero h1 em { color: var(--accent-2, var(--accent)); }
html[data-hero="photos"][data-look="ivory"] .hero h1 em { color: #e8b98c; }
html[data-hero="photos"][data-look] .hero-copy > *:not(.actions) { text-shadow: 0 1px 18px rgba(var(--shade), .55) !important; }
html[data-hero="photos"][data-look] .site-head:not(.solid) { background: linear-gradient(180deg, rgba(var(--shade), .4) 0%, rgba(var(--shade), 0) 100%); }
html[data-hero="photos"][data-look] .site-head:not(.solid) .brand, html[data-hero="photos"][data-look] .site-head:not(.solid) .nav a:not(.btn) { color: #fbf5ea; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
html[data-hero="photos"][data-align="right"] .hero { justify-content: flex-end; }

/* Menu card: a printed tasting menu lying on the table */
.hero-card { justify-self: center; width: min(100%, 410px); padding: 46px 40px 34px; text-align: center; color: #2a211a; background: #f6efe2; border-radius: 3px; transform: rotate(-1.6deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 30px 60px -28px rgba(0, 0, 0, .7), 0 8px 18px -10px rgba(0, 0, 0, .5);
  background-image: linear-gradient(rgba(246, 239, 226, .9), rgba(246, 239, 226, .9)), url('/images/texture/sobremesa.webp'); background-size: auto, 420px; }
html[data-look="ivory"] .hero-card { background-color: #fffdf8; background-image: none; box-shadow: 0 30px 60px -32px rgba(60, 40, 25, .45), 0 0 0 1px rgba(60, 40, 25, .08); }
.hero-card::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(42, 33, 26, .18); pointer-events: none; }
.hc-title { font: italic 400 1.6rem/1.1 var(--font-display); margin: 0 0 18px; }
.hc-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 26px; }
.hc-tabs button { background: none; border: 0; padding: 6px 0; cursor: pointer; font: 500 .9rem/1 var(--font-body); color: rgba(42, 33, 26, .55); border-bottom: 1px solid transparent; }
.hc-tabs button[aria-selected="true"] { color: #2a211a; border-color: var(--accent); }
.hc-for { font: italic 400 1rem/1.3 var(--font-display); color: rgba(42, 33, 26, .7); margin: 0 0 22px; }
.hc-menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.hc-menu li { display: grid; gap: 4px; }
.hc-menu li + li::before { content: ""; justify-self: center; width: 22px; height: 1px; background: var(--accent); opacity: .7; margin-bottom: 16px; }
.hc-menu b { font: 600 1.28rem/1.15 var(--font-display); }
.hc-menu li span { font-size: .88rem; color: rgba(42, 33, 26, .62); }
.hc-menu.in { animation: hc-in .7s ease both; }
@keyframes hc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hc-note { margin: 28px 0 0; font-size: .78rem; color: rgba(42, 33, 26, .55); }
html[data-hero="card"] .hero-card { position: relative; }

/* Cuisines: the three words, large; a dish appears beside the one pointed at */
.hero-words { position: relative; }
.hero-words ul { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; }
.hero-words a { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; text-decoration: none; color: var(--ink); padding: 6px 0; transition: opacity .35s ease, color .35s ease; }
.hw-word { font: 600 clamp(2.8rem, 6.4vw, 6rem)/.98 var(--font-display); letter-spacing: -.01em; }
html[data-type="bold"] .hw-word { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; }
.hw-line { font-size: .92rem; color: var(--muted); }
.hero-words.lit a { opacity: .28; }
.hero-words.lit a.on { opacity: 1; color: var(--accent); }
.hero-words a.on .hw-word { font-style: italic; }
.hw-frame { position: absolute; z-index: 1; right: 0; top: var(--y, 50%); width: clamp(170px, 17vw, 250px); aspect-ratio: 4 / 5; margin: 0; transform: translateY(-50%) rotate(3deg); transition: top .45s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.hw-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; opacity: 0; transform: scale(.94); transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.hw-frame img.on { opacity: 1; transform: none; }
html[data-hero="words"][data-look] .hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
html[data-hero="words"] .hero h1 { font-size: clamp(2.4rem, min(5vw, 8vh), 4.4rem); }
@media (hover: none) { .hw-frame { display: none; } }
@media (prefers-reduced-motion: reduce) { .hc-menu.in { animation: none; } .hw-frame, .hw-frame img { transition: none; } }
@media (max-width: 860px) {
  .hero-card, .hero-words { order: 3; }
  .hero-card { transform: none; justify-self: stretch; width: auto; padding: 38px 26px 28px; }
  html[data-hero="card"][data-look] .hero, html[data-hero="words"][data-look] .hero { padding-bottom: 56px; }
  html[data-hero="photos"][data-look] .hero { padding-top: 104px; }
}

/* ── Ask Mica (ask-mica.js) ── */
.chat { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.chat-bubble { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 18px 6px 6px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 30px; cursor: pointer; font: 500 .9rem/1 var(--font-body); box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .45); }
.chat-bubble:hover { border-color: var(--accent); }
.chat-face { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: italic 600 1.3rem/1 var(--font-display); flex: none; }
.chat-nudge { background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 14px 14px 2px 14px; font-size: .88rem; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.chat-panel { order: -1; width: min(370px, calc(100vw - 36px)); max-height: min(580px, calc(100svh - 120px)); display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55); }
.chat-panel[hidden] { display: none; }
.chat-panel header { display: flex; align-items: center; gap: 12px; padding: 14px 10px 14px 16px; border-bottom: 1px solid var(--line); }
.chat-panel header b { display: block; font: 600 1.15rem/1.1 var(--font-display); }
.chat-panel header span { font-size: .78rem; color: var(--muted); }
.chat-x { margin-left: auto; width: 44px; height: 44px; background: none; border: 0; color: var(--ink); font-size: 1.5rem; cursor: pointer; }
.chat-log { padding: 16px; overflow-y: auto; display: grid; gap: 10px; align-content: start; flex: 1; }
.chat .msg { max-width: 88%; padding: 10px 14px; border-radius: 16px; font-size: .92rem; line-height: 1.45; }
.chat .msg.bot { background: var(--bg-2); border-bottom-left-radius: 4px; }
.chat .msg.me { justify-self: end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.chat-sum { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--surface); }
.chat-sum dt { color: var(--muted); font-size: .82rem; } .chat-sum dd { margin: 0; font-weight: 500; }
.chat-options { padding: 0 16px 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.chat-options button, .chat-go { min-height: 40px; padding: 9px 14px; background: transparent; border: 1px solid var(--line); color: var(--ink); font: 400 .9rem/1.3 var(--font-body); cursor: pointer; text-align: left; border-radius: 20px; text-decoration: none; }
.chat-options button:hover { border-color: var(--accent); color: var(--accent); }
.chat-go { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.chat-go.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
@media (max-width: 600px) {
  .chat { right: 12px; bottom: 14px; }
  .chat-bubble { padding: 6px; } .chat-label { display: none; }
  .chat-panel { position: fixed; left: 8px; right: 8px; bottom: 76px; width: auto; }
}
.bk-plan { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.bk-plan dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0; }
.bk-plan dt { color: var(--muted); font-size: .85rem; } .bk-plan dd { margin: 0; }
/* the line under each cuisine, clear of the dish that appears beside it */
.hero-words a { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 0; }
.hw-line { padding-left: 4px; }
.hw-frame { right: -3%; }
@media (max-width: 860px) {
  html[data-hero="words"][data-look] .hero { grid-template-columns: 1fr; }
  .hw-word { font-size: clamp(2.6rem, 13vw, 3.6rem); }
}

/* Meet the chef: her own words and her quote */
.exp-bio { margin-top: 26px; display: grid; gap: 14px; }
.exp-bio p { margin: 0; color: var(--muted); line-height: 1.75; }
.exp-quote { margin: 30px 0 0; padding: 0 0 0 22px; border-left: 2px solid var(--accent); }
.exp-quote p { margin: 0; font: italic 400 clamp(1.25rem, 2vw, 1.6rem)/1.35 var(--font-display); color: var(--ink); }
.exp-quote cite { display: block; margin-top: 10px; font-style: normal; font-size: .85rem; color: var(--muted); }
.exp-list:empty { display: none; }
.exp-grid { align-items: start; }
.exp-photo { position: sticky; top: 100px; }
.exp-photo img { object-position: 50% 18%; }
@media (max-width: 860px) { .exp-photo { position: static; aspect-ratio: 4 / 4.4; } }
/* Until site.js has chosen the hero (data-hero), show nothing beside the name:
   the portrait flashed for a moment before the menu card took its place. */
html:not([data-hero]) .hero-portrait { visibility: hidden; }

/* ── Service pages (src/pages/landing.js) ── */
.lp main { padding-top: 96px; }
.lp-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 88px); align-items: center; padding-block: 48px 72px; }
.lp-crumbs { font-size: .82rem; color: var(--muted); margin-bottom: 26px; }
.lp-crumbs a { color: var(--muted); }
.lp h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1.02; margin: 10px 0 22px; }
.lp h1 em { color: var(--accent); display: block; }
.lp-intro p { color: var(--muted); font-size: 1.08rem; line-height: 1.75; margin: 0 0 14px; max-width: 600px; }
.lp .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.lp-photo { margin: 0; justify-self: center; width: min(100%, 420px); }
.lp-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 210px 210px 6px 6px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.lp-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px 56px; padding-block: 40px 64px; border-top: 1px solid var(--line); }
.lp-block h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 12px; }
.lp-block p, .lp-block li { color: var(--muted); line-height: 1.7; }
.lp-block ul { margin: 0 0 12px; padding-left: 18px; }
.lp-block li::marker { color: var(--accent); }
.lp-faq { padding-block: 24px 72px; max-width: 860px; }
.lp-faq h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 18px; }
.lp-faq details { border-top: 1px solid var(--line); padding: 18px 0; }
.lp-faq details:last-child { border-bottom: 1px solid var(--line); }
.lp-faq summary { cursor: pointer; font: 600 1.12rem/1.35 var(--font-display); list-style: none; display: flex; justify-content: space-between; gap: 18px; }
.lp-faq summary::after { content: "+"; color: var(--accent); font: 400 1.4rem/1 var(--font-body); }
.lp-faq details[open] summary::after { content: "−"; }
.lp-faq details p { color: var(--muted); line-height: 1.7; margin: 12px 0 0; max-width: 680px; }
.lp-cta { background: var(--bg-2); padding-block: 72px; text-align: center; border-block: 1px solid var(--line); }
.lp-cta h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: 0 0 8px; }
.lp-cta p { color: var(--muted); margin: 0 0 22px; }
.lp-cta .lp-reach { margin: 22px 0 0; }
.lp-cta .lp-reach a { color: var(--ink); }
.lp-related { padding-block: 64px; }
.lp-related h2 { font-size: 1.6rem; margin: 0 0 18px; }
.lp-related > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.lp-related a { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); background: var(--surface); }
.lp-related a:hover { border-color: var(--accent); }
.lp-related span { color: var(--muted); font-size: .86rem; line-height: 1.45; }
.foot-pages { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .86rem; }
.foot-pages a { color: var(--muted); }
.site-foot .wrap { flex-wrap: wrap; row-gap: 12px; }
@media (max-width: 860px) {
  .lp-hero { grid-template-columns: 1fr; padding-top: 24px; }
  .lp-photo { order: -1; width: min(70%, 300px); justify-self: start; }
}