/* Diamond Nail & Lash Studio.
 *
 * One stylesheet. <html data-look> picks the 3D scene (and the hero over it):
 *   pastel   A: the floating-diamonds example's pastel Miami room
 *   ivory    B: ivory and champagne, pearl podiums framed by fern
 *   lacquer  C: noir, deep green water, lacquer red and champagne
 * 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: #0d1011; --bg-2: #131819; --surface: #182021; --line: rgba(243, 236, 228, .12);
  --ink: #f3ece4; --muted: #a9a39b; --faint: #6f6b66;
  --accent: #c6a66b; --accent-ink: #141213; --accent-2: #a3162b;
  --glass: rgba(19, 24, 25, .72); color-scheme: dark;
}
html[data-look="ivory"]:not([data-palette]), html[data-palette="ivory"] {
  --bg: #f7f3ee; --bg-2: #efe8df; --surface: #fffdf9; --line: rgba(26, 23, 24, .1);
  --ink: #1a1718; --muted: #6c645d; --faint: #9c948c;
  --accent: #a8854a; --accent-ink: #fffdf9; --accent-2: #b3122b;
  --glass: rgba(255, 253, 249, .78); color-scheme: light;
}
html[data-look="pastel"]:not([data-palette]), html[data-palette="pastel"] {
  --bg: #f2f7f7; --bg-2: #e6f0f0; --surface: #ffffff; --line: rgba(29, 43, 51, .1);
  --ink: #1d2b33; --muted: #5b6b72; --faint: #8fa0a6;
  --accent: #d9788f; --accent-ink: #ffffff; --accent-2: #4f9e98;
  --glass: rgba(255, 255, 255, .78); color-scheme: light;
}
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: Manrope, 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 { 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; }