/* ============================================================
   EVIL WITH ELEGANCE — design system
   Spooky-cute. Single committed dark theme; every colour explicit.
   ============================================================ */
:root {
  --midnight: #14101F;
  --crypt: #1E1730;
  --crypt-2: #2A2142;
  --grape: #6B3FC4;
  --grape-deep: #4E2A99;
  --lilac: #CDB4F7;
  --lilac-dim: #AC9AD1;               /* 6.3:1 on --crypt, 6.9:1 on --midnight (WCAG AA small text) */
  --bone: #F2ECF7;
  --bone-dim: rgba(242,236,247,0.72);
  --fang: #FF5C8A;
  --fang-deep: #E23F70;
  --line: rgba(205,180,247,0.16);

  --font-display: 'Pirata One', 'Cinzel Decorative', Georgia, serif;
  --font-elegance: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-body: 'Figtree', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'DM Mono', 'SFMono-Regular', Menlo, monospace;

  --t-xs: 0.78rem; --t-sm: 0.9rem; --t-base: 1.0625rem; --t-lg: 1.25rem; --t-xl: 1.6rem;
  --t-2xl: 2.1rem; --t-3xl: 2.9rem; --t-4xl: 4rem; --t-hero: clamp(8.5rem, 40vw, 19rem);

  --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6.5rem;
  --radius: 10px; --radius-lg: 16px; --radius-pill: 6px; --radius-btn: 6px;
  --ease: cubic-bezier(.4,0,.2,1);
  --shadow: 0 10px 40px rgba(0,0,0,.35);
  --glow-fang: 0 0 0 1px rgba(255,92,138,.35), 0 12px 36px rgba(255,92,138,.28);
  --measure: 62ch;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--midnight); color: var(--bone);
  font-family: var(--font-body); font-size: var(--t-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::after { content: ''; position: fixed; inset: 0; background: var(--grain); pointer-events: none; z-index: 1; opacity: .6; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--lilac); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bone); }
:focus-visible { outline: 2px solid var(--fang); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; line-height: 1.05; text-wrap: balance; font-weight: 400; }
h1, h2 { font-family: var(--font-display); letter-spacing: .01em; }
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--t-lg); }
p { margin: 0 0 var(--space-2); max-width: var(--measure); }
.elegance { font-family: var(--font-elegance); font-style: italic; font-weight: 500; color: var(--lilac); letter-spacing: .01em; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .18em; color: var(--lilac); display: inline-flex; align-items: center; gap: .55em; }
.eyebrow .bat { width: 1.15em; height: auto; fill: var(--lilac); }
.muted { color: var(--bone-dim); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1120px, 100% - 2 * var(--space-3)); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2 * var(--space-3)); margin-inline: auto; }
.section { padding-block: var(--space-5); position: relative; }
.section--tight { padding-block: var(--space-4); }
.section__head { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.section__head p { color: var(--bone-dim); }
.stack { display: grid; gap: var(--space-2); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; }

/* ---------- buttons & chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .95em 1.6em; border-radius: var(--radius-btn); font-weight: 700; font-size: var(--t-sm);
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s;
  font-family: var(--font-body);
}
.btn .bat { width: 1.25em; height: auto; fill: currentColor; transition: transform .4s var(--ease); }
.btn:hover .bat { transform: translateY(-2px) rotate(-8deg) scale(1.15); }
.btn--fang { background: var(--fang); color: #1a0710; box-shadow: var(--glow-fang); }
.btn--fang:hover { background: #ff7aa0; color: #1a0710; transform: translateY(-2px); }
.btn--ghost { border-color: var(--lilac-dim); color: var(--bone); background: transparent; }
.btn--ghost:hover { border-color: var(--lilac); background: rgba(205,180,247,.08); color: var(--bone); }
.btn--grape { background: var(--grape); color: var(--bone); }
.btn--grape:hover { background: #7d4fd9; color: var(--bone); transform: translateY(-2px); }
.btn--sm { padding: .6em 1.1em; font-size: var(--t-xs); }
.chip { display: inline-flex; align-items: center; gap: .4em; padding: .35em .85em; border-radius: var(--radius-btn); border: 1px solid var(--line); background: rgba(30,23,48,.7); font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; color: var(--lilac); }
.chip strong { color: var(--bone); font-weight: 700; }
.chip .star { color: var(--fang); }

/* ---------- nav ---------- */
:root { --nav-h: 64px; }
.nav { position: sticky; top: 0; z-index: 50; background: rgba(20,16,31,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block: .7rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--bone); }
.brand__mark { width: 40px; height: 40px; border-radius: var(--radius-btn); border: 1.5px solid var(--grape); overflow: hidden; background: var(--crypt); }
.brand__word { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .02em; line-height: 1; white-space: nowrap; }
.brand__word em { font-family: var(--font-elegance); font-style: italic; font-size: .95em; color: var(--lilac); }
.nav__links { display: none; align-items: center; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nav__links a { color: var(--bone-dim); text-decoration: none; font-weight: 600; font-size: var(--t-sm); letter-spacing: .03em; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--bone); }
.nav__cta { display: none; }
.nav__toggle { display: inline-flex; align-items: center; gap: .5rem; background: transparent; border: 1px solid var(--line); color: var(--bone); border-radius: var(--radius-btn); padding: .5rem .9rem; font: inherit; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nav__toggle .bat { width: 1.3em; fill: var(--lilac); }
.nav__drawer { display: none; border-top: 1px solid var(--line); background: var(--crypt); }
.nav__drawer[data-open="true"] { display: block; }
.nav__drawer ul { list-style: none; margin: 0; padding: .5rem 0; }
.nav__drawer a { display: block; padding: .8rem 0; color: var(--bone); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line); }
.nav__drawer a.btn { display: inline-flex; padding: .95em 1.6em; border-bottom: 0; margin-block: 1rem; width: 100%; }
@media (min-width: 900px) {
  .nav__links, .nav__cta { display: inline-flex; }
  .nav__toggle, .nav__drawer { display: none !important; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; min-height: calc(100svh - var(--nav-h, 64px)); display: grid; align-content: center; padding-block: var(--space-4) calc(var(--space-5) + 2.5rem); }
.hero__scroll { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); display: grid; justify-items: center; gap: .3rem; text-decoration: none; color: var(--lilac-dim); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; }
.hero__scroll .bat { width: 34px; fill: var(--lilac); animation: swoop 2.2s var(--ease) infinite; }
.hero__scroll:hover { color: var(--bone); }
@keyframes swoop { 0%, 100% { transform: translateY(0) scaleY(1); } 45% { transform: translateY(9px) scaleY(.7); } 60% { transform: translateY(6px) scaleY(1.05); } }
.hero__moon { position: absolute; left: 50%; top: 6%; width: min(90vw, 900px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(107,63,196,.45) 0%, rgba(107,63,196,.12) 40%, transparent 70%); z-index: -2; pointer-events: none; }
.hero__colony { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__web { position: absolute; width: clamp(140px, 22vw, 320px); opacity: .22; z-index: -1; pointer-events: none; }
.hero__web--tl { left: -2%; top: -2%; }
.hero__web--br { right: -2%; bottom: -2%; transform: rotate(180deg); }
.hero__in { display: grid; justify-items: center; text-align: center; gap: var(--space-2); }
.hero__word, @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .hero__word { background-image: none; color: var(--lilac); -webkit-text-fill-color: var(--lilac); } }
@media (forced-colors: active) { .hero__word { background-image: none; color: CanvasText; -webkit-text-fill-color: CanvasText; filter: none; } }
.hero__with { display: block; }
.hero__word {
  font-family: var(--font-display); font-size: var(--t-hero); line-height: .82; letter-spacing: .02em; margin: 0;
  background-image: url('/assets/img/hero-collage.jpg'); background-size: cover; background-position: center;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(107,63,196,.55)) drop-shadow(0 24px 40px rgba(0,0,0,.6));
}
.hero__with { font-family: var(--font-elegance); font-style: italic; font-weight: 500; font-size: clamp(2.2rem, 7vw, 4.6rem); color: var(--lilac); margin-top: -.35em; line-height: 1; text-shadow: 0 6px 30px rgba(20,16,31,.9); position: relative; }
.hero__sub { max-width: 34ch; color: var(--bone-dim); font-size: var(--t-lg); margin-inline: auto; }
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-1); }
.hero__chips { margin-top: var(--space-1); justify-content: center; }

/* ---------- dividers (bats instead of hairlines) ---------- */
.divider { display: flex; justify-content: center; align-items: center; gap: 1.4rem; padding-block: var(--space-2); color: var(--lilac-dim); }
.divider .bat { width: 22px; fill: currentColor; }
.divider .bat:nth-child(2) { width: 30px; transform: translateY(-4px); }
.divider::before, .divider::after { content: ''; flex: 0 1 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); }
.divider::after { background: linear-gradient(90deg, var(--line), transparent); }

/* ---------- gallery ---------- */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: 64%; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); scrollbar-width: thin; scrollbar-color: var(--grape) transparent; }
.strip > * { scroll-snap-align: start; }
@media (min-width: 600px) { .strip { grid-auto-columns: 34%; } }
@media (min-width: 1000px) { .strip { grid-auto-columns: 23%; } }
.tile { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--crypt); aspect-ratio: 4 / 5; box-shadow: var(--shadow); border: 1px solid var(--line); }
.tile picture, .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tile:hover img { transform: scale(1.04); }
.tile__tag { position: absolute; left: .7rem; bottom: .7rem; display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.tile__tag span { background: rgba(20,16,31,.78); backdrop-filter: blur(6px); color: var(--lilac); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: .3em .6em; border-radius: 4px; }
.tile--link { display: block; text-decoration: none; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-3); }
.filters a, .filters button { font: inherit; font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lilac); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-btn); padding: .5em 1em; text-decoration: none; cursor: pointer; }
.filters a:hover, .filters button:hover { border-color: var(--lilac); color: var(--bone); }
.filters a[aria-current], .filters button[aria-pressed="true"] { background: var(--grape); border-color: var(--grape); color: var(--bone); }
.tile[hidden] { display: none; }
.count { font-family: var(--font-mono); color: var(--lilac-dim); font-size: var(--t-xs); }

/* ---------- services ---------- */
.menu { display: grid; gap: var(--space-4); }
.menu__group h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--t-xl); color: var(--bone); margin-bottom: var(--space-2); display: flex; align-items: baseline; gap: .75rem; }
.menu__group h2 small { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--lilac-dim); letter-spacing: .12em; text-transform: uppercase; }
.menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.menu__item { display: grid; grid-template-columns: 1fr auto; gap: .35rem var(--space-2); padding: .9rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.menu__name { font-weight: 600; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.menu__name .chip { font-size: .62rem; padding: .2em .6em; }
.menu__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--lilac); font-size: var(--t-base); text-align: right; white-space: nowrap; }
.menu__meta { grid-column: 1 / -1; color: var(--bone-dim); font-size: var(--t-sm); max-width: var(--measure); }
.menu__meta .dur { font-family: var(--font-mono); color: var(--lilac-dim); font-size: var(--t-xs); letter-spacing: .06em; margin-right: .6rem; }
.menu__item .btn { grid-column: 1 / -1; justify-self: start; margin-top: .35rem; }
@media (min-width: 700px) { .menu__item { grid-template-columns: 1fr auto auto; } .menu__item .btn { grid-column: auto; margin-top: 0; } .menu__meta { grid-column: 1 / 3; } }

/* ---------- tiers ---------- */
.tiers { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tier { background: var(--crypt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3); display: grid; gap: .6rem; position: relative; overflow: hidden; }
.tier::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(107,63,196,.28), transparent 55%); pointer-events: none; }
.tier__n { display: flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--lilac); }
.tier__n .bat { width: 1.3em; fill: var(--lilac); }
.tier__name { font-family: var(--font-display); font-weight: 400; font-size: var(--t-xl); line-height: 1.05; margin: 0; }
.tier__price { font-family: var(--font-mono); color: var(--fang); font-size: var(--t-lg); }
.tier__price small { color: var(--lilac-dim); font-size: var(--t-xs); margin-left: .5em; letter-spacing: .08em; }
.tier p { color: var(--bone-dim); font-size: var(--t-sm); margin: 0; }
.tier__ex { font-family: var(--font-elegance); font-style: italic; font-size: var(--t-base); color: var(--lilac); }
.tier .tile { aspect-ratio: 5 / 4; margin-top: .4rem; }

/* ---------- reviews ---------- */
.quote-wall { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.quote { background: var(--crypt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3); display: grid; gap: .8rem; align-content: start; }
.quote__pull { font-family: var(--font-elegance); font-style: italic; font-size: var(--t-xl); line-height: 1.15; color: var(--lilac); }
.quote__text { color: var(--bone-dim); font-size: var(--t-sm); margin: 0; }
.quote__meta { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--lilac-dim); letter-spacing: .06em; }
.quote__meta strong { color: var(--bone); font-weight: 600; }
.stars { color: var(--fang); letter-spacing: .1em; }
.required { color: var(--fang); font-weight: 700; }

/* ---------- split / feature blocks ---------- */
.split { display: grid; gap: var(--space-3); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr .9fr; gap: var(--space-5); } .split--rev > :first-child { order: 2; } }
.panel { background: var(--crypt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3); }
.panel--grape { background: linear-gradient(160deg, var(--grape-deep), var(--crypt-2)); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; margin: 0; }
.kv dt { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--lilac-dim); padding-top: .2rem; }
.kv dd { margin: 0; }
.hours { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-family: var(--font-mono); font-size: var(--t-sm); }
.hours li { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding: .35rem 0; }
.hours li[data-today="true"] { color: var(--fang); }
.hours .closed { color: var(--lilac-dim); }
.map { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4 / 3; background: var(--crypt); }
.map iframe { width: 100%; height: 100%; border: 0; filter: invert(.9) hue-rotate(200deg) saturate(.6) contrast(.9); }
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.steps li::before { counter-increment: step; content: counter(step); font-family: var(--font-display); font-size: var(--t-xl); color: var(--fang); line-height: 1; padding-top: .1rem; }
.steps h2, .steps h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--t-lg); margin-bottom: .2rem; }
.steps p { margin: 0; color: var(--bone-dim); font-size: var(--t-sm); }

/* ---------- faq ---------- */
.faq { display: grid; gap: .5rem; }
.faq details { background: var(--crypt); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--space-3); }
.faq summary { cursor: pointer; padding: 1rem 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-mono); color: var(--fang); font-size: 1.3rem; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--bone-dim); padding-bottom: 1rem; margin: 0; }

/* ---------- forms ---------- */
.form { display: grid; gap: var(--space-2); }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: var(--t-sm); }
.field .hint { color: var(--lilac-dim); font-size: var(--t-xs); }
.field input, .field textarea, .field select { font: inherit; color: var(--bone); background: var(--crypt); border: 1px solid var(--line); border-radius: var(--radius-btn); padding: .8rem 1rem; width: 100%; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--grape); outline: none; box-shadow: 0 0 0 3px rgba(107,63,196,.35); }
.field textarea { min-height: 120px; resize: vertical; }
.field--row { display: grid; gap: var(--space-2); }
@media (min-width: 640px) { .field--row { grid-template-columns: 1fr 1fr; } }
.radios { display: grid; gap: .5rem; }
.radios label { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; background: var(--crypt); border: 1px solid var(--line); border-radius: var(--radius-btn); padding: .8rem 1rem; cursor: pointer; }
.radios label:has(input:checked) { border-color: var(--grape); box-shadow: 0 0 0 2px rgba(107,63,196,.35); }
.radios input { accent-color: var(--fang); margin-top: .25rem; }
.radios strong { display: block; }
.radios span { color: var(--bone-dim); font-size: var(--t-sm); }
.check { display: flex; gap: .7rem; align-items: start; font-size: var(--t-sm); color: var(--bone-dim); }
.check input { accent-color: var(--fang); margin-top: .3rem; }
.drop { border: 1.5px dashed var(--lilac-dim); border-radius: var(--radius-lg); padding: var(--space-3); text-align: center; background: rgba(30,23,48,.5); display: grid; gap: .5rem; justify-items: center; cursor: pointer; }
.drop:focus-within { outline: 2px solid var(--fang); outline-offset: 3px; }
.drop:hover, .drop[data-over="true"] { border-color: var(--fang); background: rgba(255,92,138,.06); }
.drop .bat { width: 40px; fill: var(--lilac); }
.drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.previews { display: flex; flex-wrap: wrap; gap: .5rem; }
.previews img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.honey { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form__status { min-height: 1.5em; font-size: var(--t-sm); color: var(--lilac); }
.form__status[data-state="error"] { color: var(--fang); }
.flap { display: inline-block; width: 1.4em; fill: currentColor; animation: flap .5s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes flap { from { transform: scaleY(.55) } to { transform: scaleY(1.1) } }

/* ---------- footer ---------- */
.footer { position: relative; overflow: hidden; border-top: 1px solid var(--line); background: var(--crypt); padding-block: var(--space-5) var(--space-3); }
.footer__web { position: absolute; right: -3%; top: -4%; width: clamp(160px, 24vw, 340px); opacity: .16; transform: rotate(90deg); pointer-events: none; }
.footer__grid { display: grid; gap: var(--space-4); }
@media (min-width: 800px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer h2 { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--lilac-dim); margin-bottom: .8rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer a { color: var(--bone-dim); text-decoration: none; font-size: var(--t-sm); }
.footer a:hover { color: var(--bone); }
.footer__legal { margin-top: var(--space-4); padding-top: var(--space-2); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--lilac-dim); }
.footer__word { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1; }
.footer__word em { font-family: var(--font-elegance); font-style: italic; color: var(--lilac); }

/* ---------- misc ---------- */
.cta-band { background: linear-gradient(120deg, var(--grape-deep) 0%, var(--crypt-2) 60%, var(--crypt) 100%); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-3); display: grid; gap: var(--space-2); justify-items: center; text-align: center; position: relative; overflow: hidden; }
.cta-band .bat-row { position: absolute; inset: auto 0 -10px; display: flex; justify-content: space-around; opacity: .14; pointer-events: none; }
.cta-band .bat-row .bat { width: 50px; fill: var(--lilac); }
.cta-band h1, .cta-band h2 { font-size: var(--t-3xl); }
.breadcrumb { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .06em; color: var(--lilac-dim); margin-bottom: var(--space-2); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45em; }
.breadcrumb li + li::before { content: "/"; margin-right: .45em; }
.breadcrumb a { color: var(--lilac-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--bone); }
.page-head { padding-block: var(--space-4) var(--space-3); }
.page-head h1 { font-size: clamp(2.6rem, 9vw, var(--t-4xl)); }
.page-head .lede { font-size: var(--t-lg); color: var(--bone-dim); max-width: 48ch; margin-top: var(--space-2); }
.callout { border-left: 3px solid var(--fang); background: rgba(255,92,138,.06); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--space-2) var(--space-3); }
.callout strong { color: var(--bone); }
.skip { position: absolute; left: 1rem; top: -3rem; background: var(--fang); color: #1a0710; padding: .5rem 1rem; border-radius: var(--radius-btn); z-index: 100; font-weight: 700; }
.skip:focus { top: 1rem; }
@media (max-width: 640px) {
  :root { --space-4: 2rem; --space-5: 3rem; --space-6: 4rem; }
  h2 { font-size: clamp(1.9rem, 7.5vw, 2.6rem); }
  .brand__word { font-size: 1.15rem; }
  .brand__mark { width: 34px; height: 34px; }
  .nav__in { gap: .6rem; }
  .nav__toggle { padding: .45rem .7rem; }
  :root { --t-hero: clamp(7.5rem, 36vw, 19rem); }
  .hero { padding-block: var(--space-2) 4.5rem; }
  .hero__in { gap: .7rem; }
  .hero__sub { font-size: .98rem; max-width: 30ch; }
  .hero__with { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero .eyebrow { font-size: .7rem; letter-spacing: .12em; text-align: center; }
  .hero__chips .chip:nth-child(n+3) { display: none; }
  .hero__scroll { bottom: .6rem; }
  .hero__scroll .bat { width: 28px; }
  .divider { padding-block: var(--space-1); }
  .hero__ctas { flex-direction: column; align-items: stretch; width: min(100%, 320px); }
  .hero__ctas .btn { width: 100%; }
  .cta-band h1, .cta-band h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .cta-band .cluster { flex-direction: column; align-items: stretch; width: 100%; }
  .cta-band .btn, .page-head .cluster .btn { width: 100%; }
  .page-head .cluster { flex-direction: column; align-items: stretch; }
  .menu__price { font-size: var(--t-sm); }
  .kv { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .kv dd { margin-bottom: .6rem; }
  .filters { gap: .4rem; }
  .filters a, .filters button { padding: .45em .8em; }
  .quote__pull { font-size: var(--t-lg); }
  .tier .tile { aspect-ratio: 4 / 3; }
  .split { gap: var(--space-3); }
  .previews img { width: 60px; height: 60px; }
  @media (max-width: 400px) { .brand__word em { display: none; } }
}
.reveal { opacity: 1; }