/* ============================================================
   HORROR HOSPITAL — landing page (uses real cropped photos)
   ============================================================ */
:root {
  --black: #07090a;
  --ink: #0c0e0f;
  --blood: #a8121a;
  --blood-bright: #d61f26;
  --blood-glow: #ff2a32;
  --teal: #5bb8c0;
  --bone: #e9e3d6;
  --ash: #b7b2a8;
  --gold: #c9a24b;
  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Fonts: headings = Crimson Pro · body/UI = Google Sans · Thai = Noto Sans Thai */
  --font-heading: "Crimson Pro", "Noto Sans Thai", Georgia, serif;
  --font-body: "Google Sans", "Noto Sans Thai", system-ui, sans-serif;
  --font-thai: "Noto Sans Thai", "Google Sans", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--bone);
  /* EN: Google Sans · TH: Noto Sans Thai (browser picks per-glyph) */
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
  letter-spacing: 0.01em;
}
/* Thai text — let Noto Sans Thai win and relax letter-spacing for legibility.
   IMPORTANT: most elements declare their own `font-family: var(--font-body|heading)`,
   which (equal specificity, later in the source) overrides a plain `:lang(th)` rule —
   so Thai text would fall back to the Latin-first "Google Sans"/"Crimson Pro" stacks.
   Fix: rebind the font *variables* on the Thai root. Custom properties inherit and are
   resolved where `var()` is used, so EVERY `var(--font-body|heading|thai)` across the
   page now resolves Noto Sans Thai first — no per-rule edits needed. */
:lang(th), [lang="th"] {
  --font-heading: "Noto Sans Thai", "Crimson Pro", Georgia, serif;
  --font-body: "Noto Sans Thai", "Google Sans", system-ui, sans-serif;
  --font-thai: "Noto Sans Thai", "Google Sans", sans-serif;
  font-family: var(--font-thai); letter-spacing: 0;
}
/* Horror headings use Crimson Pro at weight 500 (not 700). Scoped to the Horror
   page only — the Pyramid page (body.pyr) still uses Crimson Text at its own weights.
   `!important` overrides the per-rule `font-weight: 700` on each *__title below. */
body:not(.pyr) .hero__headline,
body:not(.pyr) .why__title,
body:not(.pyr) .intro__title,
body:not(.pyr) .trailer__title,
body:not(.pyr) .inside__title,
body:not(.pyr) .zone__title,
body:not(.pyr) .zone-modal__caption,
body:not(.pyr) .fear-panel__label,
body:not(.pyr) .says__title,
body:not(.pyr) .garden__title,
body:not(.pyr) .events__title,
body:not(.pyr) .faq__title,
body:not(.pyr) .cta__title,
body:not(.pyr) .contact__title,
body:not(.pyr) .plans__title,
body:not(.pyr) .hh-modal__title { font-weight: 500 !important; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Accessibility: visible keyboard focus ---------- */
:focus-visible { outline: 2px solid var(--blood-glow); outline-offset: 3px;
  border-radius: 2px; }
/* don't show the ring on mouse click, only keyboard */
:focus:not(:focus-visible) { outline: none; }

/* ---------- Image loading skeleton ----------
   Each media wrapper that holds a real <img> is tagged [data-skeleton]. While
   the image loads, a dark shimmer sweeps a placeholder over the wrapper and the
   <img> stays faded out; script.js adds .is-loaded once the image finishes (or
   errors), which fades the shimmer out and the image in. Wrappers are already
   position:relative; overflow:hidden, so the overlay clips to their shape.
   Shared shape so it works for the Pyramid (.pyr) page too. */
[data-skeleton] { position: relative; }
[data-skeleton]::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(100deg, transparent 20%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.06) 60%, transparent 80%),
    #14181b;
  background-size: 220% 100%, 100% 100%;
  animation: skeleton-sweep 1.25s ease-in-out infinite;
  opacity: 1; transition: opacity .45s ease;
}
[data-skeleton] img,
[data-skeleton] iframe { opacity: 0; transition: opacity .5s ease; }
[data-skeleton].is-loaded::before { opacity: 0; }
[data-skeleton].is-loaded img,
[data-skeleton].is-loaded iframe { opacity: 1; }
@keyframes skeleton-sweep { 0% { background-position: 200% 0, 0 0; } 100% { background-position: -120% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-skeleton]::before { animation: none; }
  [data-skeleton] img,
  [data-skeleton] iframe { transition: none; }
}

/* ---------- Full-card loading skeleton (CHOOSE YOUR EXPERIENCE) ----------
   A whole pricing card ([data-skeleton-card]) is held back as a single shimmer
   block — image AND text/price/order — until its image lands; script.js adds
   .is-loaded (keyed off the card's <img>) to fade the real card in. This keeps
   the card from flashing an unstyled/empty frame on a slow first paint. Shares
   the skeleton-sweep keyframe above. */
[data-skeleton-card] { position: relative; }
[data-skeleton-card]::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(100deg, transparent 20%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.06) 60%, transparent 80%),
    #14181b;
  background-size: 220% 100%, 100% 100%;
  animation: skeleton-sweep 1.25s ease-in-out infinite;
  opacity: 1; transition: opacity .45s ease;
}
[data-skeleton-card] > * { opacity: 0; transition: opacity .5s ease; }
[data-skeleton-card].is-loaded::before { opacity: 0; }
[data-skeleton-card].is-loaded > * { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-skeleton-card]::before { animation: none; }
  [data-skeleton-card] > * { transition: none; }
}

/* ---------- Global FX ---------- */
.fx-grain {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.6s steps(2) infinite; mix-blend-mode: overlay;
}
@keyframes grain { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-2%,1%)} }
.fx-vignette {
  position: fixed; inset: 0; z-index: 8000; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
}

/* ============================================================ BUTTONS */
.btn {
  display: inline-block; font-family: var(--font-body); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.82rem;
  color: var(--bone); padding: 0.85em 2em;
  background: linear-gradient(180deg, #c11820, #7e0d12);
  border: 1px solid rgba(255,70,70,0.45); border-radius: 2px; cursor: pointer;
  position: relative; transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.btn--lg { font-size: 0.95rem; padding: 1.05em 2.8em; }
/* Header CTA — plain button, no glow / no pulse. */
.btn--ticket { font-size: 0.74rem; padding: 0.42em 1.5em; letter-spacing: 0.14em;
  color: #fff; border-color: rgba(255,120,120,.7);
  background: linear-gradient(180deg, #f0242c, #a01016);
  box-shadow: none; animation: none; }
.btn--ticket:hover { filter: brightness(1.1); box-shadow: none; }
/* styles.css loads after Tailwind, so .btn's `display:inline-block` overrides
   Tailwind's `.hidden`. Re-assert hidden below the lg breakpoint (1024px) so the
   header BUY TICKETS button stays hidden on phones + all tablets — the burger
   menu carries navigation there, avoiding a cramped/wrapping nav row. */
@media (max-width: 1023px) { .btn.hidden { display: none; } }

/* Burger-menu range (phones + tablets, <1024px): the full horizontal nav only
   fits comfortably at lg+, so below it the links live in the dropdown that the
   burger toggles. Overrides Tailwind's `hidden` on .nav__links when open. */
@media (max-width: 1023px) {
  .nav.open .nav__links { display: flex; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 1.1rem; padding: 1.4rem 1.5rem; background: rgba(7,9,10,.97);
    border-bottom: 1px solid rgba(168,18,26,.4); }
}
/* desktop nav (lg+): keep each label on a single line and tighten the gaps so
   the full row fits at exactly 1024px without wrapping mid-word */
@media (min-width: 1024px) {
  .nav__links { gap: 1.15rem; }
  .nav__links a, .btn--ticket { white-space: nowrap; }
}
@keyframes ticket-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,42,50,.35), 0 4px 16px rgba(214,31,38,.5), 0 0 14px rgba(255,42,50,.5); }
  50%      { box-shadow: 0 0 0 1px rgba(255,42,50,.5),  0 4px 20px rgba(214,31,38,.6), 0 0 22px rgba(255,42,50,.8); }
}

/* ============================================================ NAV
   Layout/spacing/links are Tailwind utilities in the markup.
   These rules cover the scroll state + logo blend + mobile menu only. */
/* Keep the fixed header above the global FX overlays (grain z-9000,
   vignette z-8000) so nothing tints/covers the nav — it owns the top layer. */
.nav { z-index: 9600; }
.nav.scrolled { background: rgba(7,9,10,.9); backdrop-filter: blur(8px);
  border-bottom-color: rgba(168,18,26,.4); }
/* JPG logo has a black background — 'screen' drops black to transparent so it
   blends over both the hero photo and the scrolled nav background */
/* screen drops the JPG's black box to transparent; contrast/brightness lift the
   gold so it doesn't sink into the dark backdrop. No drop-shadow — the JPG has a
   (black) background, so a shadow would render around the box, not the letters. */
.brand__logo { mix-blend-mode: screen; filter: brightness(1.3) contrast(1.15) saturate(1.1); }

/* --- language toggle (flag + code; shows the ACTIVE language only) --- */
.lang-toggle { cursor: pointer; border: 1px solid rgba(255,255,255,.25); border-radius: 5px;
  background: transparent; color: var(--bone); padding: 0.42em 0.8em; gap: 0.5em;
  font: inherit; font-size: 0.86rem; letter-spacing: 0.12em; line-height: 1;
  /* center flag + label on the cross axis explicitly (don't rely on the Tailwind
     items-center utility) so neither child rides high in the bordered pill */
  display: inline-flex; align-items: center;
  transition: border-color .2s var(--ease), background .2s var(--ease); }
.lang-toggle:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); }
.lang-toggle__flag { display: inline-flex; align-items: center; line-height: 0; }
/* "TH"/"EN" label — its own inline-flex box with line-height:1 so its line box
   collapses to the cap height and doesn't add phantom descender space (which was
   making the flex row taller below and pushing the content up in the pill). */
.lang-toggle__code { display: inline-flex; align-items: center; line-height: 1; }
.lang-flag { display: block; width: 28px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
/* show the flag matching the current data-lang, hide the other */
.lang-toggle .lang-flag { display: none; }
.lang-toggle[data-lang="en"] .lang-flag--en { display: block; }
.lang-toggle[data-lang="th"] .lang-flag--th { display: block; }

/* --- mobile dropdown footer: RESERVE NOW + language switch ---
   These live inside the burger dropdown (.nav__links) below lg. A thin divider
   separates them from the page links; the CTA is full-width, the language switch
   is a flag-in-frame + label row. The whole block is hidden at lg+. */
.nav__menu-actions { display: flex; flex-direction: column; gap: 1rem;
  margin-top: 0.4rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(168,18,26,.35); }
.nav__menu-cta { width: 100%; text-align: center; }
.nav__menu-lang { display: inline-flex; align-items: center; gap: 0.6em;
  align-self: center; color: var(--bone); font-size: 0.9rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color .2s var(--ease); }
.nav__menu-lang:hover { color: var(--blood-bright); }
.nav__menu-lang-label { line-height: 1; }
/* Thai glyphs read smaller than Latin at the same px — bump the label up a touch
   (and drop the wide tracking/uppercase, which don't suit Thai script). */
.nav__menu-lang[data-lang="th"] .nav__menu-lang-label { font-size: 1.02rem;
  letter-spacing: 0.04em; text-transform: none; }

/* Thai nav links read smaller/cramped at the Latin-tuned text-[0.82rem]+0.14em
   tracking — bump them up and relax tracking so the Thai labels are comfortable.
   Covers both the desktop row and the mobile dropdown (.nav__links), the footer
   nav, and the lang-toggle code. Latin sizing is untouched. */
:lang(th) .nav__links a, [lang="th"] .nav__links a {
  font-size: 0.98rem; letter-spacing: 0.02em; }
:lang(th) .footer__nav a, [lang="th"] .footer__nav a {
  font-size: 0.96rem; letter-spacing: 0.02em; }
:lang(th) .lang-toggle__code, [lang="th"] .lang-toggle__code { letter-spacing: 0.04em; }
/* Thai header CTA (.btn--ticket "จองตอนนี้") — match the Thai nav-link size so the
   button text isn't smaller than the menu beside it; drop the wide tracking/caps. */
:lang(th) .btn--ticket, [lang="th"] .btn--ticket {
  font-size: 0.98rem; letter-spacing: 0.02em; text-transform: none; }

/* Flag of the ACTIVE language, wrapped in a thin frame. No code text. */
.lang-flag-link { display: inline-flex; line-height: 0; padding: 3px;
  border: 1px solid rgba(255,255,255,.35); border-radius: 4px;
  transition: border-color .2s var(--ease); }
.nav__menu-lang:hover .lang-flag-link { border-color: rgba(255,255,255,.6); }
.lang-flag-link .lang-flag { display: none; width: auto; height: 18px;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.lang-flag-link[data-lang="en"] .lang-flag--en { display: block; }
.lang-flag-link[data-lang="th"] .lang-flag--th { display: block; }

/* --- two-button language switch (EN + TH shown side by side) ---
   Both languages are always visible; the active one is highlighted. Used in the
   desktop header (.lang-switch) and inside the mobile dropdown (--menu). */
.lang-switch { gap: 0.4em; }
.lang-switch__btn { display: inline-flex; align-items: center; gap: 0.4em;
  cursor: pointer; border: 1px solid rgba(255,255,255,.22); border-radius: 5px;
  background: transparent; color: var(--ash); padding: 0.34em 0.62em;
  font: inherit; font-size: 0.82rem; letter-spacing: 0.1em; line-height: 1;
  text-transform: uppercase;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.lang-switch__btn:hover { border-color: rgba(255,255,255,.5); color: var(--bone); }
.lang-switch__btn.is-active { border-color: var(--blood-bright);
  background: rgba(168,18,26,.18); color: var(--bone); }
.lang-switch__btn .lang-flag { display: block; width: 22px; height: 11px;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.lang-switch__code { display: inline-flex; align-items: center; line-height: 1; }
/* mobile dropdown variant: center the pair and give them a little more room */
.lang-switch--menu { align-self: center; }
.lang-switch--menu .lang-switch__btn { font-size: 0.86rem; padding: 0.42em 0.8em; }
.lang-switch--menu .lang-switch__btn .lang-flag { width: 26px; height: 13px; }

/* ============================================================ HERO SLIDESHOW */
.hero { position: relative; height: 100vh; min-height: 560px; max-height: 920px;
  overflow: hidden; background: #060809; line-height: 1.55; }

/* --- single static background image (no effects) --- */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* --- darkening scrim so text stays legible (heavier on the left) --- */
.hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,7,9,.82) 0%, rgba(5,7,9,.5) 38%, rgba(5,7,9,.15) 70%, rgba(5,7,9,.35) 100%),
    linear-gradient(180deg, rgba(5,7,9,.5) 0%, transparent 30%, transparent 60%, rgba(5,7,9,.7) 100%); }

/* --- top backdrop: a black gradient behind the fixed header so the nav
   stays legible over any slide photo. Sits above the photo/scrim, below the
   header (z-index:1000). Fades out by ~halfway down the header zone. --- */
.hero__topfade { position: absolute; left: 0; right: 0; top: 0; height: 180px; z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(3,4,6,.9) 0%, rgba(3,4,6,.7) 35%, rgba(3,4,6,.32) 70%, transparent 100%); }

/* --- fixed overlay content (left-aligned, like the reference) --- */
.hero__content { position: relative; z-index: 3; height: 100%;
  max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 3.5rem);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
/* Constrain the hero copy to a left column on desktop so the headline doesn't
   run across the banner and collide with the photo subjects on the right. */
.hero__content > * { max-width: 70%; }
/* --- kicker: small gold eyebrow with a leading rule --- */
.hero__kicker { display: flex; align-items: center; gap: 0.8em;
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(.6rem, 1.3vw, .74rem); letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1rem;
  text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.hero__kicker::before { content: ""; width: clamp(28px, 5vw, 52px); height: 2px;
  background: linear-gradient(90deg, var(--blood-bright), rgba(214,31,38,0)); }

/* --- headline: layered display type, dramatic + premium --- */
.hero__headline { position: relative; display: inline-block;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.3rem); line-height: 1.08; letter-spacing: 0.05em;
  text-transform: uppercase; margin: 0; padding-bottom: 0.34em;
  /* bone-white with a faint vertical sheen for depth */
  background: linear-gradient(180deg, #fff 0%, #ece5d6 48%, #b9b09c 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--bone); /* fallback */
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.55)) drop-shadow(0 10px 30px rgba(0,0,0,.6));
  transition: opacity .45s ease, transform .45s ease; }
/* Thai needs more vertical room for tone marks/vowels above & below */
:lang(th) .hero__headline, [lang="th"] .hero__headline { line-height: 1.6; }
.hero__hours { display: flex; align-items: center; gap: 0.5em;
  font-size: clamp(.85rem, 1.8vw, 1.05rem); font-weight: 500; letter-spacing: 0.06em;
  color: var(--bone); margin-top: 1.1rem; text-shadow: 0 1px 10px rgba(0,0,0,.8); }
/* hero CTA — painted brush-stroke background (btn-bg.png) instead of the
   gradient pill. Border/box removed so only the ragged red stroke shows;
   extra side padding clears the frayed ends and centers the label. */
.hero__buy { margin-top: 1.5rem; font-size: 0.98rem; letter-spacing: 0.16em;
  padding: 1.05em 2.9em; border: 0; border-radius: 0;
  background: url("../images/btn-bg.webp") center / 100% 100% no-repeat;
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
  filter: drop-shadow(0 6px 16px rgba(168,18,26,.45)); }
.hero__buy:hover { transform: none;
  filter: none;
  box-shadow: none; }
.hero__award { display: flex; align-items: center; gap: 0.7em;
  font-size: clamp(.62rem, 1.4vw, .78rem); letter-spacing: 0.22em;
  color: var(--ash); margin-top: 1.4rem; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.hero__award-badge { height: 4.2em; width: auto; flex: 0 0 auto;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.6)); }

/* ============================================================ WHY HORROR HOSPITAL?
   Three feature columns: red line-art icon + EN title + TH/EN subline.
   Layout/centering via Tailwind on the markup; this owns the chalk title,
   the icon framing, and the column type that Tailwind can't express. */
.why { position: relative; background: var(--black); overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 6.5rem); }
/* faint decaying-wall texture behind the black: soft blotchy plaster stains
   spread organically, no straight lines, no tiling seams. The noise SVG is
   stretched to cover the whole section (background-size: cover) so it never
   repeats, and a radial mask fades the edges so there's no hard border. */
.why::before { content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; mix-blend-mode: screen; opacity: .1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1000'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='5' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='2.6' amplitude='1.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 45%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 100% at 50% 45%, #000 55%, transparent 100%); }
/* peeling-plaster grit: a finer noise pass, also stretched to cover */
.why::after { content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; mix-blend-mode: overlay; opacity: .05;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='800'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.012' numOctaves='4' seed='13'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 50%, transparent 100%);
          mask-image: radial-gradient(120% 100% at 50% 50%, #000 50%, transparent 100%); }
.why__inner { position: relative; z-index: 1; text-align: center; }

/* chalk/scratchy headline — bone with HORROR in blood */
.why__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.55rem, 4.6vw, 3rem); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bone); line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
  margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.why__title-accent { color: var(--blood-bright); }
/* Optional lead under the heading. When present it carries the spacing to the
   grid, so tighten the title's own bottom margin via the adjacent-sibling rule. */
.why__title:has(+ .why__lead) { margin-bottom: 1rem; }
.why__lead { font-size: clamp(.85rem, 1.7vw, 1rem); line-height: 1.6;
  color: var(--ash); max-width: 60ch; margin: 0 auto clamp(2.5rem, 6vw, 4rem); }

.why__grid { list-style: none; display: grid; gap: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: repeat(3, 1fr); align-items: start; }

.why-feat { display: flex; flex-direction: column; align-items: center;
  text-align: center; }
.why-feat__icon { color: var(--blood-bright); margin-bottom: 1.4rem;
  filter: drop-shadow(0 0 10px rgba(214,31,38,.45)); }
.why-feat__icon svg { width: clamp(58px, 8vw, 76px); height: auto; display: block; }
/* Admin-uploaded image stands in for the icon: shown full, in proportion
   (no frame/crop) so SVG icons display as-is. */
.why-feat__icon--img { filter: drop-shadow(0 0 14px rgba(214,31,38,.4)); }
.why-feat__icon--img img { width: clamp(96px, 13vw, 140px); height: clamp(96px, 13vw, 140px);
  object-fit: contain; display: block; }
.why-feat__title { font-family: var(--font-body);
  font-weight: 700; font-size: clamp(.95rem, 1.8vw, 1.18rem); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bone); margin-bottom: 0.55rem; }
.why-feat__copy { font-size: clamp(.82rem, 1.5vw, .96rem); line-height: 1.5;
  color: var(--ash); max-width: 22ch; }

/* ============================================================ INTRO (story block after hero)
   Image on the left, copy on the right (desktop). On mobile the layout stacks
   and the copy comes first, then the image (admin-editable: Intro Section). */
.intro { position: relative; background: var(--black); overflow: hidden;
  padding: clamp(3rem, 6vw, 5rem) 0; }
.intro__inner { position: relative; z-index: 1; display: grid;
  grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.intro__media { position: relative; border-radius: 14px; overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(214,31,38,.25); box-shadow: 0 12px 40px rgba(0,0,0,.6); }
.intro__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.intro__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.55rem, 4.6vw, 3rem); line-height: 1.1; letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: 1.2rem; color: var(--bone);
  text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.intro__title-accent { color: var(--blood-bright); }
.intro__body { font-size: clamp(.9rem, 1.7vw, 1.05rem); line-height: 1.7;
  color: var(--ash); max-width: 52ch; }
.intro__body p { margin: 0; }
.intro__body p + p { margin-top: 1rem; }
.intro__body a { color: var(--blood-bright); text-decoration: underline; }
.intro__body strong, .intro__body b { color: var(--bone); }
/* Optional lead under the intro heading (admin-editable, hidden when blank). */
.intro__title:has(+ .intro__lead) { margin-bottom: .8rem; }
.intro__lead { font-size: clamp(.95rem, 1.8vw, 1.1rem); line-height: 1.6;
  color: var(--bone); max-width: 52ch; margin: 0 0 1.2rem; }
@media (max-width: 767px) {
  .intro__inner { grid-template-columns: 1fr; }
  .intro__media { order: 2; }   /* text first, image after on mobile */
  .intro__copy { order: 1; }
}

/* ============================================================ TRAILER
   Full-width background photo (videos.png). Copy overlaid on the left, a
   YouTube-style play button centered on the right half. A left-heavy scrim
   keeps the copy legible over the photo. */
.trailer { position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(360px, 42vw, 540px);
  padding: clamp(3rem, 7vw, 5rem) 0;
  background: var(--black) var(--trailer-bg, url("../images/trailer-horror-desktop.webp")) center / cover no-repeat; }
/* left-heavy darkening scrim for text legibility */
.trailer::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,7,9,.92) 0%, rgba(5,7,9,.72) 32%, rgba(5,7,9,.25) 60%, rgba(5,7,9,.45) 100%),
    linear-gradient(180deg, rgba(5,7,9,.4) 0%, transparent 40%, rgba(5,7,9,.55) 100%); }
.trailer__inner { position: relative; z-index: 2; width: 100%; }
.trailer__copy { max-width: 30rem; }

/* right column — play button centered within its 6-col half */
.trailer__media { display: flex; justify-content: center; align-items: center; }
.trailer__play { display: block;
  width: clamp(64px, 8vw, 92px); padding: 0; border: 0; background: transparent;
  cursor: pointer; filter: drop-shadow(0 6px 22px rgba(0,0,0,.6));
  transition: transform .25s var(--ease); }
.trailer__play svg { width: 100%; height: auto; display: block; }
.trailer__play-bg { fill: #f0242c; transition: fill .25s; }
.trailer__play:hover { transform: scale(1.08); }
.trailer__play:hover .trailer__play-bg { fill: #ff2a32; }
.trailer__play:focus-visible { outline-offset: 8px; border-radius: 14px; }

/* trailer video lightbox (injected by script.js) */
.video-modal { position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  opacity: 0; transition: opacity .3s var(--ease); }
.video-modal.is-open { opacity: 1; }
.video-modal__backdrop { position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 40%, rgba(40,4,6,.85), rgba(3,4,5,.96));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.video-modal__frame { position: relative; z-index: 1;
  width: min(92vw, 1000px);
  /* enter: lift + scale in from the fade */
  transform: translateY(14px) scale(.96); opacity: 0;
  transition: transform .38s var(--ease), opacity .38s var(--ease); }
.video-modal.is-open .video-modal__frame { transform: translateY(0) scale(1); opacity: 1; }
.video-modal__embed { position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: 10px;
  border: 1px solid rgba(214, 31, 38, .5);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .8),
              0 0 0 1px rgba(255, 70, 70, .12),
              0 0 60px rgba(214, 31, 38, .35);
  overflow: hidden; }
.video-modal__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Plain close button at the top-right corner over the video. The × is an inline
   SVG (stroke colour set on the element itself), so it can't be hidden by
   Tailwind's Play-CDN button reset the way a font glyph could. */
.video-modal__close { position: absolute; top: -13px; right: -17.4px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; padding: 0;
  background: rgba(0, 0, 0, .55); border: 0; border-radius: 999px;
  cursor: pointer; transition: background .2s; }
.video-modal__close:hover { background: rgba(0, 0, 0, .8); }
.video-modal__close svg { display: block; width: 22px; height: 22px; }

/* ---- Zone image lightbox -------------------------------------------------
   Click a "What's Inside" zone image to view it full (uncropped) in an overlay,
   with a thumbnail rail at the bottom to switch between zones. Built once in JS
   (script.js) from the zone images on the page. Shares the video-modal's
   backdrop/close conventions; theme overrides for the Pyramid live under .pyr. */
.zone-modal { position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; padding: clamp(1rem, 3vw, 2.5rem);
  opacity: 0; transition: opacity .3s var(--ease); }
.zone-modal.is-open { opacity: 1; }
.zone-modal__backdrop { position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 40%, rgba(40,4,6,.85), rgba(3,4,5,.97));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.zone-modal__close { position: absolute; top: 14px; right: 16px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0;
  background: rgba(0,0,0,.55); border: 0; border-radius: 999px;
  cursor: pointer; transition: background .2s; }
.zone-modal__close:hover { background: rgba(214,31,38,.75); }
.zone-modal__close svg { display: block; width: 22px; height: 22px; }
/* full-image stage — contain so nothing is cropped */
.zone-modal__stage { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  transform: translateY(14px) scale(.97); opacity: 0;
  transition: transform .38s var(--ease), opacity .38s var(--ease); }
.zone-modal.is-open .zone-modal__stage { transform: translateY(0) scale(1); opacity: 1; }
.zone-modal__img { max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0,0,0,.8), 0 0 60px rgba(214,31,38,.28); }
.zone-modal__caption { position: relative; z-index: 1; flex: 0 0 auto;
  text-align: center; color: var(--bone); font-family: var(--font-heading);
  letter-spacing: 0.06em; text-transform: uppercase; font-size: clamp(.95rem, 2.4vw, 1.3rem);
  margin: clamp(.8rem, 2vw, 1.2rem) 0 clamp(.6rem, 1.5vw, 1rem);
  text-shadow: 0 2px 12px rgba(0,0,0,.7); }
/* thumbnail rail at the bottom */
.zone-modal__thumbs { position: relative; z-index: 1; flex: 0 0 auto;
  display: flex; gap: clamp(.5rem, 1.4vw, .8rem); justify-content: center;
  flex-wrap: wrap; max-width: 100%; overflow-x: auto; padding: 2px 2px 0;
  scrollbar-width: thin; }
.zone-modal__thumb { flex: 0 0 auto; height: clamp(56px, 9vw, 84px); width: auto;
  border-radius: 7px; overflow: hidden; padding: 0; cursor: pointer;
  border: 2px solid transparent; background: #000; opacity: .55;
  transition: opacity .2s, border-color .2s, transform .2s; }
.zone-modal__thumb img { height: 100%; width: auto; object-fit: contain; display: block; }
.zone-modal__thumb:hover { opacity: .85; transform: translateY(-2px); }
.zone-modal__thumb.is-active { opacity: 1; border-color: var(--blood-bright);
  box-shadow: 0 0 16px rgba(214,31,38,.5); }

/* tablet portrait (640–767px): grid is still 1-col (Tailwind md: = 768px),
   so center the stacked copy + play button and balance the scrim. */
@media (min-width: 640px) and (max-width: 767px) {
  .trailer { text-align: center; }
  .trailer::before { background:
    linear-gradient(180deg, rgba(5,7,9,.5) 0%, rgba(5,7,9,.32) 45%, rgba(5,7,9,.78) 100%); }
  .trailer__copy { max-width: none; margin: 0 auto; }
}

/* --- left copy --- */
.trailer__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.55rem, 4.6vw, 3rem); line-height: 1.1; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bone); margin-bottom: 1.1rem;
  text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.trailer__title-accent { color: var(--blood-bright); }
.trailer__lead { font-size: clamp(.95rem, 1.8vw, 1.15rem); line-height: 1.5;
  color: var(--ash); margin-bottom: 1.9rem; }

/* ============================================================ WHAT'S INSIDE?
   A horizontal journey of 4 zone cards joined by red » chevrons. Each card is
   a tall photo with the number badge at the top-left and the EN title +
   subtitle overlaid at the bottom over a black gradient backdrop for
   legibility. Odd numbers are blood-red, even are bone. */
/* ============ DECAY WRAPPER ============
   inside + fear + says sit on ONE continuous decaying-wall texture so there
   are no seams between the sections. The noise SVG is stretched to cover the
   whole wrapper (a single image, never tiled), so the blotches flow unbroken
   from the top of WHAT'S INSIDE through to the bottom of WHAT VISITORS SAY.
   A top/bottom linear mask fades the texture in/out at the wrapper edges so it
   blends seamlessly into the plain-black sections above (trailer) and below. */
.decay { position: relative; background: var(--black); overflow: hidden; }
.decay::before { content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; mix-blend-mode: screen; opacity: .1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1800'%3E%3Cfilter id='wd'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='5' seed='17'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='2.6' amplitude='1.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wd)'/%3E%3C/svg%3E");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.decay::after { content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; mix-blend-mode: overlay; opacity: .05;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1500'%3E%3Cfilter id='pd'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.012' numOctaves='4' seed='29'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pd)'/%3E%3C/svg%3E");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%); }

/* texture comes from the shared .decay wrapper — section is transparent */
.inside { position: relative; background: transparent;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 6.5rem); }
.inside__inner { position: relative; z-index: 1; text-align: center; }
.inside__title { font-family: var(--font-heading);
  font-weight: 700; font-size: clamp(1.55rem, 4.6vw, 3rem); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bone); line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0,0,0,.6); margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.inside__title-accent { color: var(--blood-bright); }
/* Optional lead under the heading (admin-editable, hidden when blank). */
.inside__title:has(+ .inside__lead) { margin-bottom: 1rem; }
.inside__lead { font-size: clamp(.85rem, 1.7vw, 1rem); line-height: 1.6;
  color: var(--ash); max-width: 60ch; text-align: center;
  margin: 0 auto clamp(2.5rem, 6vw, 4rem); }

/* edge-to-edge grid of large photo cards (no chevrons, no number badges).
   gap:0 + flush edges make the images read as one continuous strip.
   Desktop = 6 per row; extra cards wrap onto a new line. */
.inside__track { list-style: none; display: flex; flex-wrap: wrap; align-items: stretch;
  justify-content: center; gap: 0; }
.zone { flex: 0 0 calc(100% / 6); max-width: calc(100% / 6); min-width: 0;
  display: flex; flex-direction: column; align-items: stretch; }

/* the photo card — fixed height so cards stay tall even when 6 share a row
   (an aspect-ratio would shrink the height as the column narrows). */
.zone__card { position: relative; width: 100%; height: clamp(300px, 30vw, 480px);
  overflow: hidden; margin: 0;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.zone__card img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease), filter .3s; }
/* solid-ish black backdrop covering ONLY the bottom band (where the text sits)
   so the text stays readable even over bright images; the top edge feathers
   into the photo so there's no hard line. */
.zone__card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%, rgba(3,4,6,.55) 22%, rgba(3,4,6,.9) 48%, rgba(3,4,6,.97) 100%); }
.zone:hover .zone__card { z-index: 2; transform: translateY(-4px); }
.zone:hover .zone__card img { transform: scale(1.05); filter: brightness(1.05); }

/* clickable image — fills the card under the text overlay, opens the lightbox */
.zone__open { position: absolute; inset: 0; z-index: 1; padding: 0; margin: 0;
  border: 0; background: none; cursor: pointer; display: block; width: 100%; height: 100%; }
/* magnifier hint, top-right; fades in on hover/focus */
.zone__zoom { position: absolute; top: 10px; right: 10px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 999px; color: var(--bone);
  background: rgba(7,9,10,.6); border: 1px solid rgba(232,224,210,.35);
  backdrop-filter: blur(2px); opacity: 0; transform: scale(.85);
  transition: opacity .25s var(--ease), transform .25s var(--ease), background .2s; }
.zone__open:hover .zone__zoom,
.zone__open:focus-visible .zone__zoom { opacity: 1; transform: scale(1); }
.zone__open:hover .zone__zoom { background: rgba(214,31,38,.7); border-color: rgba(255,70,70,.6); }
/* text block pinned to the bottom of the card, over the gradient.
   pointer-events:none so clicks pass through to the image button below it.
   The title box below has a fixed 2-line height, so every h3 occupies the same
   height and the subtitles stay aligned whether a title wraps to 1 or 2 lines. */
.zone__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  pointer-events: none;
  padding: clamp(.9rem, 1.8vw, 1.3rem) clamp(.8rem, 1.6vw, 1.1rem) clamp(1rem, 2vw, 1.4rem);
  text-align: center;
  display: flex; flex-direction: column; align-items: stretch; }
.zone__title { font-family: var(--font-heading);
  font-weight: 700; font-size: clamp(.82rem, 1.5vw, 1.05rem); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--bone); line-height: 1.2; margin: 0 0 0.35rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.85);
  /* reserve exactly 2 lines and pin the text to the TOP of that box, so a 1-line
     title (MORGUE) sits on the same top line as the first line of a 2-line title
     (RECEPTION OF THE DEAD) — making every h3's first line align. */
  height: calc(2 * 1.2em); flex: none;
  display: flex; align-items: flex-start; justify-content: center; }
.zone__sub { font-size: clamp(.7rem, 1.3vw, .88rem); line-height: 1.4; color: var(--ash);
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
  /* reserve exactly 2 lines, text pinned to the TOP; combined with the fixed
     title height above, the whole body is a constant height on every card. */
  height: calc(2 * 1.4em); flex: none;
  display: flex; align-items: flex-start; justify-content: center; }

/* tablet (640–1023px): 6-across is too cramped — show 3 per row (still flush),
   extra cards wrap to the next line. */
@media (min-width: 640px) and (max-width: 1023px) {
  .zone { flex: 0 0 calc(100% / 3); max-width: calc(100% / 3); }
  /* 3-up columns are wider — give the cards more height to match */
  .zone__card { height: clamp(320px, 42vw, 460px); }
  /* cards are wider now, so the vw-based type lands too small — scale it back up */
  .zone__title { font-size: clamp(1rem, 2.3vw, 1.3rem); }
  .zone__sub { font-size: clamp(.82rem, 1.7vw, 1rem); }
}

/* ============================================================ FEAR LEVEL
   Three torn-black panels in a row: a 5-skull fear rating, a green "suitable
   for" checklist, and a red "not recommended" X list. The grid + responsive
   columns are Tailwind utilities on the markup (gap-px draws the hairline
   dividers via the section background); this owns the panel atmosphere
   (smudged brush-stroke backdrop), the skull/score type, and the list styling. */
/* texture comes from the shared .decay wrapper — section is transparent.
   symmetric vertical padding so the gap below the panels matches the gap above. */
.fear { position: relative; background: transparent;
  margin-top: clamp(-3.5rem, -6vw, -2rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) 0; }
.fear__inner { position: relative; z-index: 1; }
/* each panel — sits directly on the page background, no card frame */
.fear-panel { position: relative; background: transparent;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; gap: clamp(.7rem, 1.6vw, 1.1rem);
  padding: clamp(1.6rem, 3.2vw, 2.4rem) clamp(1.8rem, 3.4vw, 2.6rem); }
/* irregular brush-stroke backdrop, like the torn black paint in the mockup */
.fear-panel::before { content: ""; position: absolute; inset: clamp(.7rem,1.6vw,1.1rem);
  z-index: 0; pointer-events: none; border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
  background: radial-gradient(ellipse at 35% 40%, rgba(20,23,25,.95) 0%, rgba(12,14,15,.6) 60%, transparent 80%);
  filter: blur(6px); }
.fear-panel > * { position: relative; z-index: 1; }
/* desktop (md+, where the panels sit in a row): a faint blood divider between
   columns — drawn on panels 2 & 3 so there's no trailing line. Hidden on
   mobile, where the panels stack (see the <768px block). */
@media (min-width: 768px) {
  .fear-panel:not(:first-child)::after { content: ""; position: absolute;
    left: 0; top: 12%; bottom: 12%; width: 1px; z-index: 2; pointer-events: none;
    background: linear-gradient(to bottom, transparent,
      rgba(214,31,38,.45) 25%, rgba(214,31,38,.45) 75%, transparent); }
}

/* panel heading — uppercase, tight, with coloured accents per panel */
.fear-panel__label { font-family: var(--font-heading);
  font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.5rem); letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1.05; color: var(--bone); }
.fear-panel__label-accent { color: var(--blood-bright); }
.fear-panel__label--ok { color: #46c46a; text-shadow: 0 0 14px rgba(70,196,106,.4); }
.fear-panel__label--no { color: var(--blood-bright); text-shadow: 0 0 14px rgba(255,42,50,.5); }

/* --- rating panel: row of skulls + a big blood score --- */
.fear-panel--rating { align-items: center; text-align: center; }
.fear-panel--rating .fear-panel__label { align-self: center; }
.fear-skulls { display: flex; align-items: center; gap: clamp(.35rem, 1vw, .6rem);
  line-height: 1; }
/* fear-level icon (assets/images/fear_level_w.svg) tinted solid blood-red via
   a CSS mask, with no glow/shadow. Size matches the old emoji skulls. */
.fear-icon { display: inline-block;
  width: clamp(1.5rem, 3.4vw, 2.3rem); height: clamp(1.5rem, 3.4vw, 2.3rem);
  background-color: var(--blood-bright);
  -webkit-mask: url("../images/fear_level_w.svg") center / contain no-repeat;
          mask: url("../images/fear_level_w.svg") center / contain no-repeat; }
/* unlit skull — same shape, dimmed, for fear ratings below 5/5 */
.fear-icon--empty { background-color: rgba(183, 178, 168, .22); }
.fear-score { font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.8rem, 4.2vw, 2.8rem); line-height: 1; letter-spacing: 0.02em;
  color: var(--blood-bright); text-shadow: 0 0 18px rgba(255,42,50,.55); }

/* --- checklist / X-list --- */
.fear-list { list-style: none; display: flex; flex-direction: column;
  gap: clamp(.5rem, 1.2vw, .8rem); width: 100%; }
.fear-list__item { display: flex; align-items: center; gap: 0.7em;
  font-size: clamp(.9rem, 1.7vw, 1.05rem); font-weight: 500; color: var(--bone); }
.fear-list__mark { display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 1.5em; height: 1.5em; border-radius: 50%; font-size: 0.95em;
  font-weight: 700; line-height: 1; }
.fear-list__item--ok .fear-list__mark { color: #46c46a;
  background: rgba(70,196,106,.12); box-shadow: inset 0 0 0 1px rgba(70,196,106,.4); }
.fear-list__item--no .fear-list__mark { color: var(--blood-bright);
  background: rgba(214,31,38,.12); box-shadow: inset 0 0 0 1px rgba(214,31,38,.45); }

/* center the SUITABLE FOR / NOT RECOMMENDED panels (every panel except the
   rating one). The label centers, and every list row is centered horizontally
   (mark + text as a unit) so each item sits under the heading's centre. */
.fear-panel:not(.fear-panel--rating) { align-items: center; text-align: center; }
.fear-panel:not(.fear-panel--rating) .fear-panel__label { align-self: center; }
.fear-panel:not(.fear-panel--rating) .fear-list { width: 100%; align-items: stretch; }
.fear-panel:not(.fear-panel--rating) .fear-list__item { justify-content: center; }

/* mobile (<768px, where Tailwind md: stops applying): panels stack. Draw the
   seam on the cross axis and let each panel breathe. */
@media (max-width: 767px) {
  .fear-panel { align-items: center; text-align: center; }
  .fear-panel--rating { gap: clamp(.8rem, 2vw, 1.1rem); }
  .fear-list { align-items: flex-start; width: max-content; max-width: 100%; margin: 0 auto; }
}

/* ============================================================ WHAT VISITORS SAY
   Heading (VISITORS in blood) + three torn-black review cards: red star row,
   a bold quote, and an avatar + name/country line. Grid is Tailwind-free here
   so the cards keep equal height regardless of quote length. */
/* texture comes from the shared .decay wrapper — section is transparent */
.says { position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  /* review backdrop fills the section: cover stretches the image to the
     section's height and scales with the viewport width (cropping edges as
     needed). Section height is driven by its padding + content. */
  background: var(--black) url("../images/review_horror_desktop.webp") center / cover no-repeat;
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 9vw, 6.5rem); }
/* darkening scrim over the review photo so the cards/text stay readable */
.says::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(80% 70% at 50% 50%, rgba(5,7,9,.82) 0%, rgba(5,7,9,.55) 45%, transparent 82%),
    linear-gradient(180deg, rgba(5,7,9,.6) 0%, rgba(5,7,9,.35) 40%, rgba(5,7,9,.6) 100%); }
.says__inner { position: relative; z-index: 1; text-align: center; width: 100%; }
.says__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.55rem, 4.6vw, 3rem); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bone); line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem); }
.says__title-accent { color: var(--blood-bright); }
/* Optional lead under the heading (admin-editable, hidden when blank). */
.says__title:has(+ .says__lead) { margin-bottom: 1rem; }
.says__lead { font-size: clamp(.85rem, 1.7vw, 1rem); line-height: 1.6;
  color: var(--ash); max-width: 60ch; text-align: center;
  margin: 0 auto clamp(2.25rem, 5vw, 3.25rem); }

/* carousel shell: arrows flank a horizontally-scrolling, snap-aligned track */
.says__carousel { position: relative; }
.says__grid { list-style: none; margin: 0; padding: .25rem;
  display: flex; gap: clamp(1.1rem, 2.4vw, 1.6rem); align-items: stretch;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth; scrollbar-width: none; }
.says__grid::-webkit-scrollbar { display: none; }
/* three cards visible per "page" on desktop; shrinks at the breakpoints below */
.review { flex: 0 0 calc((100% - 2 * clamp(1.1rem, 2.4vw, 1.6rem)) / 3);
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(.7rem, 1.6vw, 1rem);
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.3rem, 2.6vw, 1.9rem);
  background: rgba(16,19,21,.85); border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.4); }

/* prev/next arrows — circular, sit just outside the track on the vertical center */
.says__arrow { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: clamp(38px, 5vw, 48px); height: clamp(38px, 5vw, 48px); border-radius: 50%;
  border: 1px solid rgba(214,31,38,.45); background: rgba(7,9,10,.8);
  cursor: pointer; display: grid; place-items: center;
  transition: background .2s, border-color .2s, opacity .2s; }
.says__arrow:hover { background: rgba(168,18,26,.85); border-color: var(--blood-bright); }
.says__arrow:disabled { opacity: .3; cursor: default; }
.says__arrow--prev { left: clamp(-8px, -1.5vw, 0px); }
.says__arrow--next { right: clamp(-8px, -1.5vw, 0px); }
.says__arrow::before { content: ""; width: 0.6em; height: 0.6em; font-size: clamp(16px,2vw,20px);
  border-top: 2px solid var(--bone); border-right: 2px solid var(--bone); }
.says__arrow--prev::before { transform: translateX(2px) rotate(-135deg); }
.says__arrow--next::before { transform: translateX(-2px) rotate(45deg); }

/* page dots */
.says__dots { display: flex; justify-content: center; gap: .6rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.says__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; cursor: pointer;
  padding: 0; background: rgba(233,227,214,.25); transition: background .2s, transform .2s; }
.says__dot.is-active { background: var(--blood-bright); transform: scale(1.25);
  box-shadow: 0 0 10px rgba(255,42,50,.6); }
.review__stars { display: flex; gap: clamp(.1rem, .5vw, .25rem); line-height: 1;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem); color: var(--blood-bright);
  filter: drop-shadow(0 0 8px rgba(214,31,38,.5)); }
.review__quote { font-family: var(--font-body);
  font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.4rem); letter-spacing: 0.01em;
  line-height: 1.2; color: var(--bone); margin: 0; }
.review__author { display: flex; align-items: center; gap: 0.55em; margin: 0;
  font-size: clamp(.78rem, 1.5vw, .92rem); color: var(--ash); }
.review__avatar { flex: 0 0 auto; display: block;
  width: 2.1em; height: 2.1em; border-radius: 50%; object-fit: cover;
  background: #1a1416; filter: grayscale(.25);
  box-shadow: inset 0 0 0 1px rgba(214,31,38,.4), 0 0 10px rgba(214,31,38,.25); }
/* initials fallback when a review has no avatar image */
.review__avatar--initial { display: grid; place-items: center;
  font-weight: 700; font-size: .9em; line-height: 1; color: var(--bone);
  filter: none; text-transform: uppercase; }

/* tablet (<900px): two cards per view */
@media (max-width: 899px) {
  .review { flex-basis: calc((100% - clamp(1.1rem, 2.4vw, 1.6rem)) / 2); }
}
/* mobile (<640px): one card per view, with a peek of the next */
@media (max-width: 639px) {
  .review { flex-basis: 84%; }
  .says__arrow { display: none; } /* swipe instead, like the INSIDE track */
}

/* ============================================================ THE CURSED GARDEN
   A compact highlight block (copy left · media right) introducing the open-air
   scare-zone garden. Not in the original mockup — own content; the media is a
   placeholder blood-glow gradient + a faint dead-tree glyph. */
.garden { position: relative; overflow: hidden; background: var(--black);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.garden__inner { position: relative; z-index: 1; display: grid;
  grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
/* optional section heading — sits inside the copy column, above the title */
.garden__head { font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(1.55rem, 4.6vw, 3rem); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bone); line-height: 1.1; text-align: left; text-shadow: 0 2px 14px rgba(0,0,0,.6);
  margin: 0 0 0.65rem; }
.garden__head-accent { color: var(--blood-bright); }
/* left — copy */
.garden__kicker { display: flex; align-items: center; gap: 0.7em;
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(.62rem, 1.3vw, .78rem); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--blood-bright); margin-bottom: 1rem; }
.garden__kicker::before { content: ""; width: clamp(24px, 4vw, 44px); height: 2px;
  background: linear-gradient(90deg, var(--blood-bright), rgba(214,31,38,0)); }
.garden__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.08; letter-spacing: 0.03em;
  text-transform: uppercase; margin-bottom: 1rem; color: var(--bone);
  text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.garden__lead { font-size: clamp(.9rem, 1.7vw, 1.05rem); line-height: 1.65;
  color: var(--ash); margin-bottom: 1.6rem; max-width: 42ch; }
.garden__list { list-style: none; display: flex; flex-direction: column; gap: 0.85rem;
  margin-bottom: 1.8rem; }
.garden__list li { display: flex; align-items: center; gap: 0.7em;
  font-size: clamp(.85rem, 1.5vw, .98rem); color: var(--bone); }
/* simple round bullet marker in the theme accent, in place of per-item icons */
.garden__list li::before { content: ""; flex: 0 0 auto;
  width: 0.5em; height: 0.5em; border-radius: 50%;
  background: var(--blood-bright); box-shadow: 0 0 8px rgba(214,31,38,.55); }
.garden__cta { display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.84rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone);
  padding: 0.85em 2em; border-radius: 3px; border: 1px solid rgba(214,31,38,.55);
  background: rgba(12,14,15,.35); cursor: pointer;
  transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s var(--ease); }
.garden__cta:hover { transform: translateY(-2px);
  background: linear-gradient(180deg, var(--blood-bright), var(--blood)); color: var(--bone); }
/* right — placeholder media (blood torch-lit gradient + a dead-tree glyph) */
.garden__media { position: relative; align-self: stretch; aspect-ratio: 13 / 10;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  display: grid; place-items: center; }
.garden__media svg { width: clamp(70px, 12vw, 120px); height: auto;
  color: var(--blood-bright); opacity: .85;
  filter: drop-shadow(0 0 18px rgba(255,42,50,.5)); }
.garden__media img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
@media (max-width: 767px) {
  .garden__inner { grid-template-columns: 1fr; }
  .garden__media { order: -1; }   /* media on top when stacked */
}

/* ============================================================ SPECIAL EVENTS (Midnight Lockdown)
   Eyebrow + a two-up feature card: placeholder blood-gradient media panel on the
   left, body (lead + date/location/audience meta + solid blood CTA) on the right. */
.events { position: relative; overflow: hidden; background: var(--ink);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.events__inner { position: relative; z-index: 1; }
.events__title { text-align: center;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.55rem, 4.6vw, 3rem); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--bone); line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
  margin-bottom: clamp(2.5rem, 5.5vw, 3.5rem); }
.events__title-accent { color: var(--blood-bright); }
/* SPECIAL EVENTS — horizontal cards (4:3 media left · body right).
   JS sets .events[data-mode]: single (1, full width) · duo (2, side-by-side)
   · slide (3+, one card per view with arrows + dots). */
.events__carousel { position: relative; }
.events__viewport { overflow: hidden; }
.events__track { list-style: none; margin: 0; padding: 0; display: flex;
  gap: clamp(1.4rem, 3vw, 2rem); }

/* one horizontal card — media is a locked 4:3 box that drives the card height;
   the body fills the rest and is centered within that same height. */
.event-card { position: relative; display: grid;
  grid-template-columns: minmax(0, 44%) 1fr; align-items: stretch; flex: 0 0 100%;
  background: rgba(12,14,15,.7); border: 1px solid rgba(214,31,38,.28); border-radius: 16px;
  overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.6);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.event-card:hover { border-color: rgba(214,31,38,.5); box-shadow: 0 18px 50px rgba(168,18,26,.4); }
/* Whole-card link: contents lets __media/__body keep the card's grid layout. */
.event-card__link { display: contents; color: inherit; text-decoration: none; cursor: pointer; }

/* media: strict 4:3 box; img covers it. The 4:3 cell sets the row height, so
   the body (overflow-hidden, min-height:0) can't stretch it taller. */
.event-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.event-card__body { min-height: 0; overflow: hidden; }
.event-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.2) contrast(1.05) brightness(.82);
  transition: transform .5s var(--ease), filter .5s var(--ease); }
.event-card:hover .event-card__media img { transform: scale(1.05); filter: grayscale(0) brightness(.92); }
.event-card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,9,10,0) 70%, rgba(7,9,10,.5) 100%); }
/* date pill, top-left over the image */
.event-card__tag { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.06em; color: var(--bone);
  padding: 0.4em 0.85em; border-radius: 999px;
  background: linear-gradient(180deg, var(--blood-bright), var(--blood));
  box-shadow: 0 4px 14px rgba(168,18,26,.55), 0 0 0 1px rgba(255,42,50,.4); }

.event-card__body { display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-start; gap: 0.9rem; padding: clamp(1.4rem, 3vw, 2.4rem); }
.event-card__title { font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem); letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--bone); line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; }
.event-card__lead { font-size: clamp(.86rem, 1.6vw, 1rem); line-height: 1.55; color: var(--ash);
  max-width: 46ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; }
.event-card__meta { list-style: none; margin: 0; padding: 0; width: 100%;
  display: flex; flex-direction: column; gap: 0.55rem; }
.event-card__meta li { display: flex; align-items: center; gap: 0.6em;
  font-size: clamp(.8rem, 1.5vw, .92rem); color: var(--bone); }
.event-card__meta svg { flex: 0 0 auto; width: 1.15em; height: 1.15em; color: var(--blood-bright); }
.event-card__cta { margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone);
  padding: 0.9em 1.8em; border: 0; border-radius: 3px; cursor: pointer;
  background: linear-gradient(180deg, var(--blood-bright), var(--blood));
  box-shadow: 0 6px 16px rgba(168,18,26,.5), 0 0 0 1px rgba(255,42,50,.4);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s; }
.event-card__cta:hover { transform: translateY(-2px); filter: brightness(1.08);
  box-shadow: 0 10px 24px rgba(255,42,50,.55), 0 0 0 1px rgba(255,42,50,.6); }

/* === mode: single (1 card) — fills the row === */
.events[data-mode="single"] .event-card { flex-basis: 100%; }

/* === mode: duo (2 cards) — two side-by-side, each card stays HORIZONTAL
   (image left · content right), just narrower. Slightly tighter type so the
   content column breathes in the half-width card. === */
.events[data-mode="duo"] .event-card { flex-basis: calc(50% - clamp(.7rem, 1.5vw, 1rem));
  grid-template-columns: minmax(0, 40%) 1fr; }
.events[data-mode="duo"] .event-card__body { padding: clamp(1.1rem, 2vw, 1.5rem); gap: 0.7rem; }
.events[data-mode="duo"] .event-card__title { font-size: clamp(1.1rem, 1.9vw, 1.35rem); }
.events[data-mode="duo"] .event-card__lead { font-size: clamp(.8rem, 1.4vw, .9rem); }

/* === mode: slide (3+) — one card per view; track slides === */
.events[data-mode="slide"] .event-card { flex-basis: 100%; }

/* carousel arrows — only shown in slide mode */
.events__arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 2.8rem; height: 2.8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(214,31,38,.5); background: rgba(7,9,10,.75);
  transition: background .2s var(--ease), transform .2s var(--ease); }
.events__arrow::before { content: ""; position: absolute; inset: 0; margin: auto;
  width: 0.7rem; height: 0.7rem; border-right: 2px solid var(--bone); border-bottom: 2px solid var(--bone); }
.events__arrow--prev { left: -0.5rem; }
.events__arrow--prev::before { transform: translateX(2px) rotate(135deg); }
.events__arrow--next { right: -0.5rem; }
.events__arrow--next::before { transform: translateX(-2px) rotate(-45deg); }
.events__arrow:hover { background: linear-gradient(180deg, var(--blood-bright), var(--blood));
  transform: translateY(-50%) scale(1.06); }
.events[data-mode="slide"] .events__arrow { display: block; }

/* carousel dots — only shown in slide mode */
.events__dots { display: none; justify-content: center; gap: 0.5rem;
  margin-top: clamp(1.4rem, 3vw, 2rem); }
.events[data-mode="slide"] .events__dots { display: flex; }
.events__dot { width: 0.7rem; height: 0.7rem; border-radius: 999px; cursor: pointer;
  border: 0; background: rgba(231,216,181,.28); padding: 0;
  transition: background .2s var(--ease), transform .2s var(--ease); }
.events__dot.is-active { background: var(--blood-bright); transform: scale(1.25);
  box-shadow: 0 0 8px rgba(255,42,50,.6); }

/* mobile: every mode collapses to a vertical card, one per row */
@media (max-width: 767px) {
  .events__track { flex-direction: column; }
  .event-card { grid-template-columns: 1fr; flex-basis: auto !important; }
  .events[data-mode] .events__arrow, .events[data-mode] .events__dots { display: none; }
}

/* ============================================================ FAQ
   Heading (Q in blood) over a two-column grid of native <details> accordions.
   Each item is a torn-black card; the summary holds the Thai question + a short
   answer line, with a chevron that rotates 180° when the item is open. The full
   answer paragraph reveals below. No JS — <details> handles the toggle. */
.faq { position: relative; background: var(--black);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 9vw, 6.5rem); }
.faq__inner { text-align: center; }
.faq__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.55rem, 4.6vw, 3rem); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bone); line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem); }
/* Optional lead under the heading (admin-editable, hidden when blank). */
.faq__title:has(+ .faq__lead) { margin-bottom: 1rem; }
.faq__lead { font-size: clamp(.85rem, 1.7vw, 1rem); line-height: 1.6;
  color: var(--ash); max-width: 60ch; text-align: center;
  margin: 0 auto clamp(2.25rem, 5vw, 3.25rem); }
.faq__title-accent { color: var(--blood-bright); }

/* two-column grid; collapses to one column at the mobile breakpoint below */
.faq__grid { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.4vw, 1.6rem); text-align: left; align-items: start; }

/* each accordion card */
.faq-item { background: rgba(16,19,21,.85); border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.4);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.faq-item[open] { border-color: rgba(214,31,38,.4);
  box-shadow: inset 0 0 0 1px rgba(214,31,38,.18), 0 10px 32px rgba(0,0,0,.5); }

/* summary = the always-visible question row */
.faq-item__q { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 1rem; padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.4vw, 1.6rem); }
.faq-item__q::-webkit-details-marker { display: none; } /* drop default triangle */
.faq-item__head { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; flex: 1; }
.faq-item__title { font-family: var(--font-body);
  font-weight: 700; font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.25; color: var(--bone); }
.faq-item__sub { font-size: clamp(.8rem, 1.5vw, .92rem); line-height: 1.4; color: var(--ash); }

/* chevron — a CSS arrowhead that rotates when the item opens */
.faq-item__chevron { flex: 0 0 auto; width: 0.62em; height: 0.62em;
  font-size: clamp(16px, 2vw, 20px); margin-right: 0.2em;
  border-bottom: 2px solid var(--blood-bright); border-right: 2px solid var(--blood-bright);
  transform: translateY(-25%) rotate(45deg);
  transition: transform .25s var(--ease); }
.faq-item[open] .faq-item__chevron { transform: translateY(10%) rotate(225deg); }

/* the revealed answer */
.faq-item__a { margin: 0; padding: 0 clamp(1.1rem, 2.4vw, 1.6rem) clamp(1rem, 2.2vw, 1.4rem);
  font-size: clamp(.85rem, 1.6vw, .98rem); line-height: 1.6; color: var(--ash);
  border-top: 1px solid rgba(255,255,255,.06); padding-top: clamp(.8rem, 1.8vw, 1.1rem);
  margin-top: clamp(-.2rem, 0vw, 0rem); }

/* mobile (<640px): single column */
@media (max-width: 639px) {
  .faq__grid { grid-template-columns: 1fr; }
}

/* ============================================================ CTA
   "ARE YOU BRAVE ENOUGH?" — full-width corridor photo (cta-desktop.webp) with a
   darkening scrim + mist creeping in from the edges. Centered chalk/blood
   headline, subtitle, and a rounded pill ticket button. */
.cta { position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(300px, 34vw, 460px);
  padding: clamp(3rem, 7vw, 5rem) 0;
  background: var(--black) url("../images/cta-desktop.webp") center / cover no-repeat; }
/* darkening scrim — a black backdrop pooling at the center (behind the text)
   that fades outward, plus heavier top/bottom and a soft red vignette glow */
.cta::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(80% 70% at 50% 50%, rgba(5,7,9,.85) 0%, rgba(5,7,9,.55) 45%, transparent 80%),
    radial-gradient(120% 90% at 50% 50%, rgba(120,12,16,.18) 0%, transparent 55%),
    linear-gradient(180deg, rgba(5,7,9,.6) 0%, rgba(5,7,9,.35) 40%, rgba(5,7,9,.6) 100%); }
/* mist creeping in from the left/right edges */
.cta::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(190,200,205,.16) 0%, transparent 22%, transparent 78%, rgba(190,200,205,.16) 100%);
  mix-blend-mode: screen; }
.cta__inner { position: relative; z-index: 2; width: 100%; text-align: center; }

.cta__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(2rem, 6vw, 4rem); line-height: 1.04; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--bone);
  text-shadow: 0 3px 18px rgba(0,0,0,.7);
  margin-bottom: clamp(.6rem, 1.6vw, 1rem); }
.cta__title-accent { color: var(--blood-bright); }
.cta__lead { font-size: clamp(1rem, 2.4vw, 1.5rem); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone);
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
  margin-bottom: clamp(1.6rem, 3.6vw, 2.4rem); }

/* rounded pill ticket button — brighter blood gradient + resting glow */
/* painted brush-stroke background (btn-bg.png) — matches the hero CTA.
   No pill/border/box; extra side padding clears the frayed ends. */
.cta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  font-family: var(--font-body); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.98rem;
  color: #fff; padding: 1.05em 2.9em; border: 0; border-radius: 0;
  background: url("../images/btn-bg.webp") center / 100% 100% no-repeat;
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
  filter: drop-shadow(0 6px 18px rgba(168,18,26,.5));
  cursor: pointer; transition: transform .25s var(--ease), filter .25s var(--ease); }
.cta__btn:hover { transform: none;
  filter: none;
  box-shadow: none; }

/* ============================================================ CONTACT
   Two dark torn panels on black: the left lists address / phone / fax / hours
   as blood-iconed rows; the right holds a "Get Directions" map link and a row
   of larger round blood-bordered social buttons that glow on hover. A faint
   blood radial glow + hairline dividers carry the page's horror atmosphere.
   Title/cards mirror the .faq + .faq-item conventions exactly. */
.contact { position: relative; overflow: hidden; background: var(--black);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 9vw, 6.5rem); }
/* faint blood glow pooling at the top edge */
.contact::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 0%, rgba(168,18,26,.16) 0%, transparent 62%); }
.contact__inner { position: relative; z-index: 1; text-align: center; }

/* title — Crimson Text, bone, blood accent (matches .faq__title) */
.contact__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.55rem, 4.6vw, 3rem); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bone); line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem); }
.contact__title-accent { color: var(--blood-bright); }

/* two-column grid; collapses to one column at the mobile breakpoint below */
.contact__grid { text-align: left; align-items: stretch; }

/* torn-black panel — same surface treatment as .faq-item */
.contact__card { background: rgba(16,19,21,.85); border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; padding: clamp(1.4rem, 3vw, 2.1rem);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.4);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.contact__card:hover { border-color: rgba(214,31,38,.4);
  box-shadow: inset 0 0 0 1px rgba(214,31,38,.18), 0 10px 32px rgba(0,0,0,.5); }
/* directions block, nested under the info card — centered button */
.contact__connect { display: flex; flex-direction: column;
  align-items: center; gap: clamp(1rem, 2.4vw, 1.4rem);
  margin-top: clamp(1.1rem, 2.6vw, 1.6rem); padding-top: clamp(1.1rem, 2.6vw, 1.6rem);
  border-top: 1px solid rgba(255,255,255,.06); }

/* map card — no backdrop: strip the card chrome so the iframe shows clean/full-color */
.contact__card--map { padding: 0; overflow: hidden; display: flex;
  background: none; border: 0; box-shadow: none; }
.contact__card--map:hover { border: 0; box-shadow: none; }
.contact__map-embed { width: 100%; min-height: clamp(280px, 38vw, 100%);
  flex: 1 1 auto; border: 0; display: block; }

/* info rows — blood icon · stacked label + value */
.contact__list { list-style: none; display: flex; flex-direction: column; }
.contact__row { display: flex; align-items: flex-start; gap: clamp(.85rem, 2vw, 1.1rem);
  padding: clamp(.95rem, 2.2vw, 1.25rem) 0; }
.contact__row + .contact__row { border-top: 1px solid rgba(255,255,255,.06); }
.contact__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 12px; color: var(--blood-bright);
  background: rgba(168,18,26,.1); border: 1px solid rgba(214,31,38,.28);
  box-shadow: 0 0 14px rgba(255,42,50,.12); }
.contact__icon svg { width: 1.35rem; height: 1.35rem; display: block; }
.contact__body { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; }
.contact__label { font-family: var(--font-body); font-weight: 700;
  font-size: clamp(.68rem, 1.4vw, .76rem); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blood-bright); }
.contact__value { font-family: var(--font-body); font-size: clamp(.92rem, 1.8vw, 1.05rem);
  line-height: 1.5; color: var(--bone); }
.contact__value--muted { color: var(--ash); font-size: clamp(.82rem, 1.5vw, .92rem); }
.contact__value--link { color: var(--bone); text-decoration: none; width: fit-content;
  transition: color .2s var(--ease), text-shadow .2s var(--ease); }
.contact__value--link:hover { color: var(--blood-glow);
  text-shadow: 0 0 14px rgba(255,42,50,.5); }

/* "Get Directions" — blood-outlined pill that fills + glows on hover */
.contact__map { display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(.82rem, 1.6vw, .94rem); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone); text-decoration: none;
  padding: 0.85em 1.7em; border-radius: 999px;
  border: 1px solid rgba(214,31,38,.5); background: rgba(168,18,26,.12);
  transition: background .25s var(--ease), border-color .25s var(--ease),
    box-shadow .25s var(--ease), transform .25s var(--ease); }
.contact__map-icon { display: inline-flex; color: var(--blood-bright); }
.contact__map-icon svg { width: 1.15rem; height: 1.15rem; display: block; }
/* plain hover — just fill + border, no lift or glow */
.contact__map:hover {
  background: rgba(168,18,26,.28); border-color: var(--blood-bright); }

/* mobile (<640px): single column; give the map a fixed height since it no
   longer has a tall sibling to stretch against */
@media (max-width: 639px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__map-embed { min-height: 300px; }
}

/* ============================================================ FOOTER
   Brand wordmark left · social icons centered · nav links + copyright right.
   Layout/flex are Tailwind utilities in the markup; this styles the brand
   script type, the social pills, and the link/copy type. */
.footer { position: relative; background: var(--black);
  border-top: 1px solid rgba(214,31,38,.45);
  box-shadow: inset 0 1px 0 rgba(255,42,50,.25); }

/* brand — Ripley's logo (black-bg JPG → screen-blended like the nav brand) */
.footer__brand { display: inline-flex; align-items: center; text-decoration: none; }
.footer__brand-logo { height: clamp(40px, 6vw, 52px); width: auto; display: block;
  mix-blend-mode: screen; filter: brightness(1.3) contrast(1.15) saturate(1.1); }

/* social icons — solid brand-colored circles (white glyph), lift on hover */
.footer__social { list-style: none; display: flex; align-items: center; gap: 0.8rem; }
.footer__social-link { display: inline-flex; align-items: center; justify-content: center;
  width: 2.85rem; height: 2.85rem; border-radius: 50%;
  color: #fff; border: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease); }
.footer__social-link svg { width: 1.45rem; height: 1.45rem; display: block; margin: auto; }
.footer__social-link:hover { transform: translateY(-3px); filter: brightness(1.08); }

/* per-brand fills */
.footer__social-link[aria-label="Facebook"]  { background: #1877f2; }
.footer__social-link[aria-label="Instagram"] { background:
  radial-gradient(120% 120% at 28% 105%, #fdf497 0%, #fdf497 8%, #fd5949 38%, #d6249f 64%, #285aeb 100%); }
.footer__social-link[aria-label="TikTok"]    { background: #010101; }
.footer__social-link[aria-label="YouTube"]   { background: #ff0000; }

/* right column — nav links over the copyright line */
.footer__right { display: flex; flex-direction: column; gap: 0.85rem;
  align-items: center; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(0.7rem, 1.6vw, 1.4rem); }
/* match the header nav links: bone, wide tracking, blood-bright + glow on hover */
.footer__nav a { font-size: 0.82rem; font-weight: 400; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bone); text-decoration: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.7);
  transition: color .2s var(--ease), text-shadow .2s var(--ease); }
.footer__nav a:hover { color: var(--blood-bright);
  text-shadow: 0 0 10px var(--blood-glow); }
.footer__copy { display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 0.8rem; font-weight: 400; line-height: 1.6;
  letter-spacing: 0.08em; color: rgba(255,255,255,.62);
  padding-top: 0.85rem; margin: 0;
  border-top: 1px solid rgba(255,255,255,.08); }
.footer__copy-mark { width: 1.05em; height: 1.05em; flex: none;
  color: var(--bone); }

/* ============ CHOOSE YOUR EXPERIENCE (pricing) ============ */
.plans { position: relative; background: var(--black);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 9vw, 6.5rem); }
.plans__inner { text-align: center; }
.plans__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.55rem, 4.6vw, 3rem); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--bone); line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0,0,0,.6);
  margin-bottom: clamp(2.5rem, 5.5vw, 3.5rem); }
/* Optional lead under the heading (admin-editable, hidden when blank). */
.plans__title:has(+ .plans__lead) { margin-bottom: 1rem; }
.plans__lead { font-size: clamp(.85rem, 1.7vw, 1rem); line-height: 1.6;
  color: var(--ash); max-width: 60ch; text-align: center;
  margin: 0 auto clamp(2.5rem, 5.5vw, 3.5rem); }
.plans__title-accent { color: var(--blood-bright); }

.plans__grid { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2.4vw, 1.8rem); align-items: stretch; }
/* single card → one centered column instead of a left-aligned third */
.plans__grid:has(.plan:only-child) { grid-template-columns: 1fr;
  max-width: 26rem; margin-inline: auto; }
.plans__grid:has(.plan:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr);
  max-width: 44rem; margin-inline: auto; }

/* a single card — image (4:3) on top · body below */
.plan { position: relative; display: flex; flex-direction: column; text-align: left;
  overflow: hidden;
  background: rgba(16,19,21,.85); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.plan:hover { transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 16px 44px rgba(0,0,0,.6); }

/* 4:3 image header — cover-cropped, with a bottom scrim so the body reads */
.plan__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.plan__media img { width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.25) contrast(1.05) brightness(.82);
  transition: transform .5s var(--ease), filter .5s var(--ease); }
.plan:hover .plan__media img { transform: scale(1.05); filter: grayscale(0) contrast(1.08) brightness(.92); }
.plan__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,9,10,0) 45%, rgba(7,9,10,.85) 100%); }

.plan__body { display: flex; flex-direction: column; align-items: flex-start;
  flex: 1 1 auto; gap: 0.85rem; padding: clamp(1.4rem, 2.6vw, 1.9rem); }

.plan__name { font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.05rem, 2.1vw, 1.35rem); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bone); }

.plan__price { font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: 0.02em; color: var(--bone);
  text-shadow: 0 2px 12px rgba(0,0,0,.6); line-height: 1; }
.plan__cur { font-size: 0.45em; font-weight: 700; letter-spacing: 0.08em; color: var(--ash); }

.plan__feats { margin: 0; width: 100%;
  font-size: clamp(.82rem, 1.5vw, .92rem); line-height: 1.55; color: var(--ash);
  border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.1rem; margin-top: 0.2rem; }

/* order row — quantity stepper (− N +) + per-card running total */
.plan__order { margin-top: auto; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.1rem; }
.plan__qty { display: inline-flex; align-items: center; overflow: hidden;
  border: 1px solid rgba(214,31,38,.45); border-radius: 999px;
  background: rgba(7,9,10,.6); }
.plan__step { display: grid; place-items: center; width: 2.2em; height: 2.2em;
  border: 0; background: transparent; cursor: pointer; color: var(--bone);
  font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; line-height: 1;
  transition: background .2s var(--ease), color .2s var(--ease); }
.plan__step:hover { background: linear-gradient(180deg, var(--blood-bright), var(--blood)); color: #fff; }
.plan__step:disabled { opacity: .35; cursor: default; }
.plan__step:disabled:hover { background: transparent; color: var(--bone); }
.plan__count { min-width: 2.1em; text-align: center;
  font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--bone);
  font-variant-numeric: tabular-nums; }
.plan__total { font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem); color: var(--bone); white-space: nowrap;
  line-height: 1; text-align: right; }
.plan__total-label { display: block; font-size: 0.4em; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ash); margin-bottom: 0.3em; }
.plan__total-val { color: var(--blood-bright); text-shadow: 0 0 12px rgba(255,42,50,.5); }
.plan__total .plan__cur { font-size: 0.42em; }

/* booking summary bar under the grid */
.plans__cart { margin-top: clamp(2rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2rem); }
.plans__cart-summary { font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.25rem); color: var(--bone); }
.plans__cart-summary #cartQty, .plans__cart-summary #cartTotal { color: var(--blood-bright);
  text-shadow: 0 0 10px rgba(255,42,50,.45); }
.plans__cart-btn { margin: 0; }

/* desktop (lg+, where the footer becomes a 3-across row): right column
   right-aligns its rows under the nav. Below lg the footer is a centered
   stack (brand → social → nav → copyright), so keep those centered. */
@media (min-width: 1024px) {
  .footer__right { align-items: flex-end; }
  .footer__nav { justify-content: flex-end; }
  .footer__copy { text-align: right; }
}

/* offset anchored sections so they don't tuck under the fixed 84px header */
section[id] { scroll-margin-top: 92px; }

/* ============================================================ SCROLL TO TOP
   Fixed blood pill bottom-right; revealed by JS (drops the [hidden] attr +
   adds .is-visible) once the page is scrolled past the hero. */
.to-top { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 900; width: 3rem; height: 3rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
  border: 1px solid rgba(255,120,120,.7);
  background: linear-gradient(180deg, #f0242c, #a01016);
  opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none;
  transition: opacity .28s var(--ease), transform .28s var(--ease), filter .25s; }
.to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.to-top:hover { filter: brightness(1.1); transform: translateY(-3px) scale(1.04); }
.to-top svg { width: 1.3rem; height: 1.3rem; display: block; }

/* ============================================================ RESPONSIVE
   Grids/visibility are Tailwind utilities. These handle the mobile nav
   dropdown (toggled by .nav.open) and hero tweaks Tailwind can't express. */
@media (max-width: 639px) {
  /* section titles: ensure long headings wrap and their glow isn't clipped at
     the section's overflow:hidden edge (e.g. "CHOOSE YOUR EXPERIENCE", "…SAY") */
  .why__title, .inside__title, .says__title, .plans__title, .faq__title, .events__title {
    font-size: clamp(1.3rem, 6vw, 1.9rem); letter-spacing: 0.03em;
    overflow-wrap: break-word; padding: 0 0.5rem; }

  /* pricing cards stack on mobile */
  .plans__grid { grid-template-columns: 1fr; gap: 2rem; }

  /* hero: center the content and even out the scrim on small screens */
  .hero__content { align-items: center; text-align: center; }
  /* drop the desktop left-column cap so the centered copy uses full width */
  .hero__content > * { max-width: 100%; }
  .hero__hours { justify-content: center; }
  /* mobile uses a dedicated portrait crop — scrim leans top→bottom (text is
     centered, subject fills the frame) rather than left-heavy */
  .hero__scrim { background:
    linear-gradient(180deg, rgba(5,7,9,.62) 0%, rgba(5,7,9,.32) 38%, rgba(5,7,9,.42) 62%, rgba(5,7,9,.82) 100%); }
  /* headline: tighten so the two-word lines never clip the viewport edge */
  .hero__headline { display: block; width: 100%; font-size: 1.55rem;
    letter-spacing: 0; word-break: break-word; }
  /* stack the WHY columns on small screens */
  .why__grid { grid-template-columns: 1fr; gap: 2.75rem; }
  /* WHAT'S INSIDE: 2 per row (still flush), extra cards wrap to the next line */
  .inside__track { gap: 0; }
  .zone { flex: 0 0 50%; max-width: 50%; }
  /* 2-up columns are wide on phones — keep the cards nice and tall */
  .zone__card { height: clamp(300px, 62vw, 440px); }
  /* bump card type so it reads clearly in the larger 2-up cards on phones */
  .zone__title { font-size: clamp(.95rem, 4vw, 1.15rem); }
  .zone__sub { font-size: clamp(.8rem, 3.2vw, .95rem); }
  /* trailer (mobile <640px): grid stacks to 1 col (Tailwind). Swap in the
     portrait nurse crop, lighten the scrim, center copy, play button below. */
  .trailer { text-align: center;
    background-image: var(--trailer-bg-mobile, url("../images/trailer-horror-mobile.webp"));
    background-position: center top; }
  .trailer::before { background:
    linear-gradient(180deg, rgba(5,7,9,.72) 0%, rgba(5,7,9,.32) 42%, rgba(5,7,9,.62) 70%, rgba(5,7,9,.88) 100%); }
  .trailer__copy { max-width: none; margin: 0 auto; }

  /* CTA (mobile <640px): swap in the portrait corridor crop; keep the centered
     scrim pooling behind the headline so text stays legible. */
  .cta { background-image: url("../images/cta-mobile.webp");
    background-position: center; }

  /* REVIEWS (mobile <640px): swap in the portrait review backdrop; cover fills
     the section's height and scales with width. */
  .says { background-image: url("../images/review_horror_mobile.webp");
    background-position: center; background-size: cover; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   CHECKOUT MODAL (.hh-modal) — buyer form + payment, then summary.
   Horror-themed (blood/bone). Markup lives at the end of
   horror_hospital.php; driven by js/checkout.js. The .hh- prefix keeps
   it isolated; the Pyramid page can later reuse the structure under .pyr.
   ============================================================ */
.hh-modal { position: fixed; inset: 0; z-index: 12000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(.75rem, 2.5vh, 1.75rem) 1rem; overflow-y: auto;
  opacity: 0; transition: opacity .25s ease; }
.hh-modal.is-open { opacity: 1; }
.hh-modal[hidden] { display: none; }
.hh-modal__backdrop { position: fixed; inset: 0;
  background: rgba(4,2,3,.86); backdrop-filter: blur(4px); }

.hh-modal__dialog { position: relative; width: 100%; max-width: 640px;
  margin: auto; background: linear-gradient(180deg, #14090b 0%, #0b0608 100%);
  border: 1px solid rgba(168,18,26,.5);
  border-radius: 14px; padding: clamp(1.5rem, 4vw, 2.6rem);
  box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 40px rgba(214,31,38,.12);
  transform: translateY(14px) scale(.98); transition: transform .25s ease; }
.hh-modal.is-open .hh-modal__dialog { transform: none; }

.hh-modal__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2rem); letter-spacing: .04em; text-transform: uppercase;
  color: var(--bone); margin: 0 0 1.1rem; text-align: center; }
.hh-modal__subtitle { font-family: var(--font-body); font-weight: 700;
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin: 1.6rem 0 .9rem; }

/* cart recap / summary list */
.hh-modal__cart { list-style: none; margin: 0 0 .4rem; padding: 0;
  border-top: 1px solid rgba(168,18,26,.3); }
.hh-modal__cart-row { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .6rem 0; border-bottom: 1px solid rgba(168,18,26,.22);
  font-size: .95rem; color: var(--bone); }
.hh-modal__cart-name em { font-style: normal; color: var(--ash); margin-left: .25rem; }
.hh-modal__cart-price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hh-modal__cart-total { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin: .5rem 0 0; padding: .3rem 0;
  font-family: var(--font-body); font-weight: 700; color: var(--blood-bright);
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em; }

/* review step — selected-ticket cards + conditions (legacy lightbox-1) */
.hh-review { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.4rem; }
.hh-review__card { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .9rem 1.1rem;
  border: 1px solid rgba(201,162,75,.55); border-radius: 8px;
  background: rgba(201,162,75,.05); }
.hh-review__name { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem;
  color: var(--bone); }
.hh-review__qty { font-family: var(--font-body); font-weight: 700; color: var(--gold);
  white-space: nowrap; }

.hh-terms { color: var(--ash); font-size: .86rem; line-height: 1.55; }
.hh-terms__head { font-family: var(--font-body); font-weight: 600; font-size: .98rem;
  color: var(--bone); margin: 0 0 .5rem; }
.hh-terms__head--gap { margin-top: 1.3rem; }
.hh-terms__list { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .4rem; }
.hh-terms__list li { padding-left: .2rem; }
/* numbered lines (number rendered inline in the text, like the legacy box) */
.hh-terms__line { margin: 0 0 .55rem; }
.hh-terms__line:last-child { margin-bottom: 0; }
/* compact variant — terms shown under the payment method in the form step */
.hh-terms--compact { font-size: .8rem; line-height: 1.5; }
.hh-terms--compact .hh-terms__list { gap: .3rem; }
.hh-terms--compact .hh-terms__line { margin-bottom: .45rem; }

/* form */
.hh-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.hh-form__field { display: flex; flex-direction: column; gap: .35rem; }
.hh-form__field--full { margin-top: .9rem; }
.hh-form__label { font-family: var(--font-body); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ash); }
.hh-form input, .hh-form textarea { width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px; padding: .7rem .85rem; color: var(--bone);
  font-family: var(--font-body); font-size: .95rem;
  transition: border-color .2s ease, box-shadow .2s ease; }
.hh-form input:focus, .hh-form textarea:focus { outline: none;
  border-color: var(--blood-bright); box-shadow: 0 0 0 3px rgba(214,31,38,.18); }
.hh-form textarea { resize: vertical; min-height: 70px; }
.hh-form__error { margin: 1rem 0 0; padding: .65rem .85rem; border-radius: 8px;
  background: rgba(214,31,38,.12); border: 1px solid rgba(214,31,38,.45);
  color: #ffb4b8; font-size: .88rem; }

/* payment options */
.hh-pay { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.hh-pay__opt { display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1rem .8rem; background: rgba(255,255,255,.03);
  border: 2px solid rgba(255,255,255,.14); border-radius: 10px;
  color: var(--ash); font-family: var(--font-body); font-weight: 600;
  font-size: .82rem; letter-spacing: .04em; cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease; }
.hh-pay__opt:hover { color: var(--bone); border-color: rgba(214,31,38,.6); }
.hh-pay__opt.is-active { color: var(--blood-bright); border-color: var(--blood-bright);
  background: rgba(214,31,38,.08); }

/* actions / buttons */
.hh-modal__actions { display: flex; gap: .9rem; justify-content: flex-end;
  margin-top: 1.6rem; }
.hh-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 700; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  padding: .85em 1.7em; border-radius: 8px; border: 2px solid transparent;
  text-decoration: none; transition: filter .2s ease, background .2s ease, color .2s ease; }
.hh-btn--ghost { background: transparent; border-color: rgba(255,255,255,.2);
  color: var(--ash); }
.hh-btn--ghost:hover { color: var(--bone); border-color: var(--bone); }
.hh-btn--blood { background: var(--blood); color: var(--bone);
  box-shadow: 0 4px 18px rgba(168,18,26,.4); }
.hh-btn--blood:hover { filter: brightness(1.12); }
.hh-btn.is-loading { pointer-events: none; opacity: .8; }
.hh-btn__spinner { display: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(233,227,214,.4); border-top-color: var(--bone);
  animation: hh-spin .7s linear infinite; }
.hh-btn.is-loading .hh-btn__spinner { display: inline-block; }
@keyframes hh-spin { to { transform: rotate(360deg); } }

/* summary step */
/* pending icon — order is created but NOT yet paid, so use a gold "awaiting
   payment" clock rather than a green success check (which would imply paid). */
.hh-modal__pending { width: 64px; height: 64px; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center; color: var(--gold);
  background: rgba(201,162,75,.1); border: 2px solid rgba(201,162,75,.5);
  border-radius: 50%; }
/* buyer-details recap on the summary step */
.hh-buyer { margin: 0 0 .4rem; padding: 0;
  border-top: 1px solid rgba(168,18,26,.3); }
.hh-buyer__row { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .55rem 0; border-bottom: 1px solid rgba(168,18,26,.22); }
.hh-buyer__row dt { margin: 0; font-family: var(--font-body); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ash); white-space: nowrap; }
.hh-buyer__row dd { margin: 0; text-align: right; color: var(--bone);
  font-size: .92rem; word-break: break-word; }

.hh-modal__invoice { text-align: center; color: var(--ash); font-size: .9rem;
  margin: 0 0 1.2rem; }
.hh-modal__invoice strong { color: var(--bone); letter-spacing: .04em; }
.hh-modal__note { text-align: center; color: var(--ash); font-size: .88rem;
  margin: 1.1rem 0 0; }

/* empty-cart shake on the RESERVE NOW button */
.plans__cart.is-empty-shake { animation: hh-shake .5s ease; }
@keyframes hh-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

@media (max-width: 560px) {
  .hh-form__grid { grid-template-columns: 1fr; }
  .hh-modal__actions { flex-direction: column-reverse; }
  .hh-btn { width: 100%; }
}

/* ============================================================
   THE LOST PYRAMID — scoped theme (prefix: pyr-)
   Egyptian re-skin sharing Horror Hospital's structure. All rules
   are scoped under `.pyr` (on <body>) or use the pyr- prefix so they
   never touch the Horror page. Loads after Tailwind, same as above.
   Currently built: NAV (reuses Horror markup, gold-tinted here) + HERO.
   ============================================================ */
:root {
  /* warmed-up ground tones — brown-black instead of flat black, for depth */
  --pyr-night: #120d07;     /* base section ground (warm espresso-black) */
  --pyr-ink: #1a130b;       /* alternating section ground (one step lighter/warmer) */
  --pyr-deep: #0b0805;      /* darkest, for edges/vignette */
  --pyr-gold: #c9962e;
  --pyr-gold-bright: #e8b647;
  --pyr-gold-glow: #ffd36b;
  --pyr-sand: #e7d8b5;
  --pyr-ash: #a89878;
  --pyr-ember: #c25a1f;
}

/* base scope — warm layered ground (subtle top-warmth → deep base) + sand text.
   The fixed gradient gives the whole page gentle depth so stacked sections don't
   read as flat black; individual sections layer their own warmth on top. */
body.pyr { color: var(--pyr-sand);
  background:
    linear-gradient(180deg, #17100a 0%, var(--pyr-night) 22%, var(--pyr-deep) 100%)
    var(--pyr-deep) fixed; }

/* logo-pyr.png is a transparent PNG (not a black-box JPG), so drop the
   `screen` blend + contrast lift that .brand__logo applies for the Horror JPG.
   A small contrast/brightness lift keeps the gold crisp over the dark hero. */
.pyr .brand__logo { mix-blend-mode: normal;
  filter: brightness(1.06) contrast(1.08) drop-shadow(0 1px 4px rgba(0,0,0,.6)); }

/* The global film-grain + vignette layers (z 8000/9000) sit ABOVE the fixed
   nav, so on this page they wash the logo with a dim film. The base
   .nav { z-index: 9600 } already lifts the header above both FX layers
   (grain z-9000, vignette z-8000), keeping the logo + links crisp here too. */

/* scroll-to-top — DARK face + bright gold ring & arrow. A gold button sank into
   the warm gold/brown grounds (same hue); inverting it (dark fill, gold edge)
   gives strong contrast on every section, light or dark. */
.pyr .to-top { color: var(--pyr-gold-glow);
  border: 2px solid var(--pyr-gold-bright);
  background:
    radial-gradient(circle at 50% 38%, #241a0c 0%, #120c06 75%);
  box-shadow:
    0 0 0 3px rgba(232,182,71,.22),       /* faint outer gold halo ring */
    0 6px 20px rgba(0,0,0,.6),
    0 0 18px rgba(255,211,107,.45),
    inset 0 0 10px rgba(255,211,107,.15); }
.pyr .to-top svg { stroke: var(--pyr-gold-glow); stroke-width: 2.6;
  filter: drop-shadow(0 0 4px rgba(255,211,107,.6)); }
.pyr .to-top:hover { transform: translateY(-3px) scale(1.05);
  border-color: var(--pyr-gold-glow);
  box-shadow:
    0 0 0 3px rgba(232,182,71,.35),
    0 10px 28px rgba(0,0,0,.65),
    0 0 26px rgba(255,211,107,.7),
    inset 0 0 12px rgba(255,211,107,.22); }

/* ---- NAV (shared Horror markup, gold-tinted on this page) ---- */
.pyr .nav.scrolled { background: rgba(13,10,6,.9);
  border-bottom-color: rgba(201,150,46,.42); }
/* links + language toggle hover → gold instead of blood */
.pyr .nav__links a:hover {
  color: var(--pyr-gold-bright) !important;
  text-shadow: 0 0 10px var(--pyr-gold-glow) !important; }
/* burger dropdown panel: gold hairline instead of red (≥2 classes to win) */
@media (max-width: 1023px) {
  .pyr .nav.open .nav__links { border-bottom-color: rgba(201,150,46,.4); }
}
/* mobile menu footer divider + lang-switch hover → gold instead of blood */
.pyr .nav__menu-actions { border-top-color: rgba(201,150,46,.35); }
.pyr .nav__menu-lang:hover { color: var(--pyr-gold-bright); }
/* BUY-TICKET CTA → warm gold gradient + gold glow pulse */
.pyr .btn--ticket {
  color: #1a1206; border-color: rgba(255,211,107,.7);
  background: linear-gradient(180deg, #f0c258, #b97f1f);
  box-shadow: 0 0 0 1px rgba(255,211,107,.35), 0 4px 16px rgba(201,150,46,.5), 0 0 14px rgba(255,211,107,.5);
  animation: pyr-ticket-pulse 2.6s ease-in-out infinite; }
.pyr .btn--ticket:hover { animation: none; filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(255,211,107,.6), 0 8px 30px rgba(201,150,46,.6), 0 0 24px rgba(255,211,107,.7); }
@keyframes pyr-ticket-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,211,107,.35), 0 4px 16px rgba(201,150,46,.5), 0 0 14px rgba(255,211,107,.5); }
  50%      { box-shadow: 0 0 0 1px rgba(255,211,107,.5),  0 4px 20px rgba(201,150,46,.6), 0 0 22px rgba(255,211,107,.8); }
}

/* ============================================================ PYR HERO
   Single static photo (hero-pyr.jpg) + left-aligned gold overlay. Mirrors
   Horror's .hero structure with its own prefixed classes + gold accents. */
.pyr-hero { position: relative; height: 100vh; min-height: 560px; max-height: 920px;
  overflow: hidden; background: var(--pyr-night); line-height: 1.55; }
.pyr-hero__bg { position: absolute; inset: 0; z-index: 0; }
.pyr-hero__bg picture { display: block; width: 100%; height: 100%; }
.pyr-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* darkening scrim — heavier on the left so the overlay copy stays legible */
.pyr-hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,7,3,.85) 0%, rgba(10,7,3,.5) 38%, rgba(10,7,3,.12) 70%, rgba(10,7,3,.34) 100%),
    linear-gradient(180deg, rgba(10,7,3,.5) 0%, transparent 30%, transparent 58%, rgba(10,7,3,.72) 100%); }
/* black backdrop behind the fixed nav so links stay legible over the photo */
.pyr-hero__topfade { position: absolute; left: 0; right: 0; top: 0; height: 180px; z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(6,4,2,.9) 0%, rgba(6,4,2,.7) 35%, rgba(6,4,2,.3) 70%, transparent 100%); }

/* left-aligned overlay content */
.pyr-hero__content { position: relative; z-index: 3; height: 100%;
  max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 3.5rem);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }

/* gold eyebrow with a leading gold rule */
.pyr-hero__kicker { display: flex; align-items: center; gap: 0.8em;
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(.6rem, 1.3vw, .74rem); letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--pyr-gold-bright); margin-bottom: 1rem;
  text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.pyr-hero__kicker::before { content: ""; width: clamp(28px, 5vw, 52px); height: 2px;
  background: linear-gradient(90deg, var(--pyr-gold-bright), rgba(232,182,71,0)); }

/* headline — gradient-clipped gold sheen + gold underline accent */
.pyr-hero__headline { position: relative; display: inline-block;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(2rem, 5.8vw, 4.3rem); line-height: 1.06; letter-spacing: 0.05em;
  text-transform: uppercase; margin: 0; padding-bottom: 0.34em;
  background: linear-gradient(180deg, #ffe9b0 0%, #e8b647 48%, #a9781f 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--pyr-gold-bright); /* fallback */
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.55)) drop-shadow(0 10px 30px rgba(0,0,0,.6)); }
.pyr-hero__headline::after { content: ""; position: absolute; left: 0; bottom: 0;
  width: clamp(70px, 22%, 160px); height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--pyr-gold-bright), var(--pyr-gold) 60%, rgba(201,150,46,0));
  box-shadow: 0 0 16px rgba(232,182,71,.6); }

.pyr-hero__sub { font-family: var(--font-body); font-weight: 700;
  font-size: clamp(.78rem, 1.8vw, 1rem); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pyr-sand); margin-top: 1.1rem; text-shadow: 0 1px 10px rgba(0,0,0,.8); }
/* "by Ripley's …" presenter line */
.pyr-hero__present { font-size: clamp(.72rem, 1.5vw, .9rem); letter-spacing: 0.04em;
  color: var(--pyr-ash); margin-top: 0.5rem; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.pyr-hero__present strong { color: var(--pyr-sand); font-weight: 600; }

.pyr-hero__hours { display: flex; align-items: center; gap: 0.5em;
  font-size: clamp(.85rem, 1.8vw, 1.05rem); font-weight: 500; letter-spacing: 0.06em;
  color: var(--pyr-sand); margin-top: 1.1rem; text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.pyr-hero__hours::before { content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--pyr-gold-bright); box-shadow: 0 0 10px var(--pyr-gold-glow); }

/* hero CTA — warm gold gradient pill (no brush texture; that asset is blood-red) */
.pyr-hero__buy { margin-top: 1.5rem; display: inline-block;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #1a1206; padding: 1.05em 2.9em; border: 0; border-radius: 3px; cursor: pointer;
  background: linear-gradient(180deg, #f3c75f, #b97f1f);
  box-shadow: 0 6px 18px rgba(201,150,46,.45), 0 0 0 1px rgba(255,211,107,.4);
  text-shadow: 0 1px 1px rgba(255,240,200,.5);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s; }
.pyr-hero__buy:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.06); }

/* ---- PYR hero responsive (mobile <640px): center the overlay ---- */
@media (max-width: 639px) {
  .pyr-hero__content { align-items: center; text-align: center; }
  .pyr-hero__kicker { justify-content: center; }
  .pyr-hero__headline { font-size: 1.7rem; }
  .pyr-hero__headline::after { left: 50%; transform: translateX(-50%); }
  .pyr-hero__scrim {
    background: linear-gradient(180deg, rgba(10,7,3,.5) 0%, rgba(10,7,3,.2) 35%, rgba(10,7,3,.55) 68%, rgba(10,7,3,.88) 100%); }
}

/* ============================================================ PYR EXPERIENCE HIGHLIGHTS
   Three feature columns (gold line-art icon + EN title + TH subline) on a
   dark sand-brown ground with a faint weathered-stone texture. Mirrors the
   Horror .why section; centering/grid via Tailwind on the markup. */
.pyr-why { position: relative; overflow: hidden;
  background: var(--pyr-night) url("../images/bg-pyr-experience.jpg") center / cover no-repeat;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 6.5rem); }
/* darkening scrim over the carving photo so the gold/sand copy stays legible;
   pools heavier behind the centered text, fades at top/bottom for clean seams */
.pyr-why::before { content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(85% 75% at 50% 50%, rgba(13,10,6,.82) 0%, rgba(13,10,6,.6) 45%, rgba(13,10,6,.32) 80%),
    linear-gradient(180deg, rgba(13,10,6,.7) 0%, rgba(13,10,6,.35) 28%, rgba(13,10,6,.35) 72%, rgba(13,10,6,.8) 100%); }
.pyr-why__inner { position: relative; z-index: 1; text-align: center; }

/* headline — sand with HIGHLIGHTS in gold */
.pyr-why__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.55rem, 4.6vw, 3rem); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--pyr-sand); line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0,0,0,.6); margin-bottom: 0.9rem; }
.pyr-why__title-accent {
  background: linear-gradient(180deg, #ffe9b0, #e8b647 55%, #b9821f);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--pyr-gold-bright);
  text-shadow: 0 0 18px rgba(232,182,71,.45); }
/* Thai lead under the title */
.pyr-why__lead { font-size: clamp(.85rem, 1.7vw, 1rem); line-height: 1.6;
  color: var(--pyr-ash); max-width: 56ch; margin: 0 auto clamp(2.5rem, 6vw, 4rem); }

.pyr-why__grid { list-style: none; display: grid; gap: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: repeat(3, 1fr); align-items: start; }

.pyr-feat { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* round gold-rimmed icon medallion, like the mockup's coin badges */
.pyr-feat__icon { display: grid; place-items: center; width: clamp(64px, 9vw, 84px);
  height: clamp(64px, 9vw, 84px); margin-bottom: 1.3rem; border-radius: 50%;
  color: var(--pyr-gold-bright);
  background: radial-gradient(circle at 50% 40%, rgba(232,182,71,.16), rgba(13,10,6,.4) 72%);
  border: 1px solid rgba(232,182,71,.45);
  box-shadow: 0 0 18px rgba(201,150,46,.3), inset 0 0 14px rgba(232,182,71,.15); }
.pyr-feat__icon svg { width: clamp(34px, 4.4vw, 44px); height: auto; display: block;
  filter: drop-shadow(0 0 6px rgba(232,182,71,.4)); }
/* solid-fill glyphs with fine detail (pharaoh, location pin, disco ball) — render a touch larger */
.pyr-feat__icon--detail svg { width: clamp(40px, 5.2vw, 52px); }
/* Admin-uploaded image fills the medallion as a circular thumbnail. Sized up
   from the icon so the photo reads clearly. */
.pyr-feat__icon--img { width: clamp(96px, 13vw, 132px); height: clamp(96px, 13vw, 132px);
  overflow: hidden; padding: 0; }
.pyr-feat__icon--img img { width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; display: block; }
.pyr-feat__title { font-family: var(--font-body);
  font-weight: 700; font-size: clamp(.95rem, 1.8vw, 1.18rem); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--pyr-sand); margin-bottom: 0.55rem; }
.pyr-feat__copy { font-size: clamp(.82rem, 1.5vw, .96rem); line-height: 1.5;
  color: var(--pyr-ash); max-width: 24ch; }

/* PYR highlights responsive — stack the columns on phones */
@media (max-width: 639px) {
  .pyr-why__grid { grid-template-columns: 1fr; gap: 2.75rem; }
}

/* ============================================================ PYR PREVIEW THE EXPERIENCE
   Full-bleed background photo, copy + outline CTA on the left, a gold-ringed
   play button centered on the right. Mirrors Horror's .trailer with gold
   accents. BG is a warm sandstone/torch placeholder until a real photo lands. */
.pyr-trailer { position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(360px, 42vw, 540px);
  padding: clamp(3rem, 7vw, 5rem) 0;
  background: var(--pyr-night) var(--pyr-trailer-bg, url("../images/videos-2.jpg")) center / cover no-repeat; }
/* left-heavy darkening scrim for copy legibility */
.pyr-trailer::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,7,3,.94) 0%, rgba(10,7,3,.74) 32%, rgba(10,7,3,.28) 60%, rgba(10,7,3,.5) 100%),
    linear-gradient(180deg, rgba(10,7,3,.4) 0%, transparent 40%, rgba(10,7,3,.6) 100%); }
.pyr-trailer__inner { position: relative; z-index: 2; width: 100%; }
.pyr-trailer__copy { max-width: 32rem; }

/* gold kicker with a leading rule (the mockup's "PREVIEW THE EXPERIENCE") */
.pyr-trailer__kicker { display: flex; align-items: center; gap: 0.8em;
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(.6rem, 1.3vw, .76rem); letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--pyr-gold-bright); margin-bottom: 1rem;
  text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.pyr-trailer__kicker::before { content: ""; width: clamp(24px, 4vw, 44px); height: 2px;
  background: linear-gradient(90deg, var(--pyr-gold-bright), rgba(232,182,71,0)); }

.pyr-trailer__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(2rem, 5.4vw, 3.6rem); line-height: 1.04; letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 1.1rem;
  background: linear-gradient(180deg, #ffe9b0 0%, #e8b647 50%, #a9781f 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--pyr-gold-bright);
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); }
.pyr-trailer__lead { font-size: clamp(.95rem, 1.8vw, 1.12rem); line-height: 1.55;
  color: var(--pyr-sand); margin-bottom: 1.9rem; max-width: 30rem; }

/* outline pill CTA — "PREVIEW EXPERIENCE ›" */
.pyr-trailer__cta { display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pyr-gold-bright); padding: 0.8em 1.9em; border-radius: 3px;
  border: 1px solid rgba(232,182,71,.55); background: rgba(13,10,6,.35);
  cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease),
    background .25s, color .25s; }
.pyr-trailer__cta:hover { transform: translateY(-2px);
  background: linear-gradient(180deg, #f3c75f, #b97f1f); color: #1a1206;
  box-shadow: 0 8px 22px rgba(201,150,46,.45), 0 0 0 1px rgba(255,211,107,.5); }

/* right — play button uses Horror's .trailer__play (YouTube-style red button) */
.pyr-trailer__media { display: flex; justify-content: center; align-items: center; }

/* tablet portrait (640–767px): grid still 1-col, so center the stack */
/* mobile (<640px): swap in the portrait crop; center the stacked copy and
   pool the scrim top→bottom so the copy stays legible over the tall photo. */
@media (max-width: 639px) {
  .pyr-trailer { background-image: var(--pyr-trailer-bg-mobile, url("../images/videos-mobile-2.jpg"));
    background-position: center; text-align: center; }
  .pyr-trailer__kicker { justify-content: center; }
  .pyr-trailer__copy { max-width: none; margin: 0 auto; }
  .pyr-trailer__lead { margin-left: auto; margin-right: auto; }
  .pyr-trailer::before { background:
    linear-gradient(180deg, rgba(10,7,3,.55) 0%, rgba(10,7,3,.3) 40%, rgba(10,7,3,.82) 100%); }
}
@media (min-width: 640px) and (max-width: 767px) {
  .pyr-trailer { text-align: center; }
  .pyr-trailer__kicker { justify-content: center; }
  .pyr-trailer__copy { max-width: none; margin: 0 auto; }
  .pyr-trailer__lead { margin-left: auto; margin-right: auto; }
  .pyr-trailer::before { background:
    linear-gradient(180deg, rgba(10,7,3,.5) 0%, rgba(10,7,3,.32) 45%, rgba(10,7,3,.8) 100%); }
}

/* ============================================================ PYR YOUR JOURNEY BEGINS HERE
   Six landscape zone cards in a 3×2 grid on a dark sandstone ground. Each card
   is a gold-framed photo with the EN title + TH subline BELOW it (unlike
   Horror's overlaid 4-card track). Card photos are placeholders for now. */
.pyr-journey { position: relative; overflow: hidden;
  background: var(--pyr-night) url("../images/bg-pyr-experience.jpg") center / cover no-repeat;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 6.5rem); }
/* heavy darkening scrim over the carving photo so the zone cards stand out and
   the busy wall doesn't compete; top/bottom fades keep clean section seams */
.pyr-journey::before { content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13,10,6,.86) 0%, rgba(13,10,6,.7) 22%, rgba(13,10,6,.7) 78%, rgba(13,10,6,.9) 100%); }
.pyr-journey__inner { position: relative; z-index: 1; text-align: center; }
.pyr-journey__title { font-family: var(--font-heading);
  font-weight: 700; font-size: clamp(1.55rem, 4.6vw, 3rem); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--pyr-sand); line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0,0,0,.6); margin-bottom: 0.8rem; }
.pyr-journey__title-accent {
  background: linear-gradient(180deg, #ffe9b0, #e8b647 55%, #b9821f);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--pyr-gold-bright); text-shadow: 0 0 18px rgba(232,182,71,.45); }
.pyr-journey__lead { font-size: clamp(.85rem, 1.7vw, 1rem); color: var(--pyr-ash);
  margin-bottom: clamp(2.5rem, 6vw, 4rem); }

/* 3×2 grid */
.pyr-journey__grid { list-style: none; display: grid; gap: clamp(1.4rem, 2.6vw, 2.2rem);
  grid-template-columns: repeat(3, 1fr); }
.pyr-zone { display: flex; flex-direction: column; }

/* ---- gold-framed photo card with title + Thai subline OVERLAID on a bottom
   scrim (mockup-faithful), plus a gold 01–06 number badge top-left ---- */
.pyr-zone__card { position: relative; width: 100%; aspect-ratio: 16 / 10;
  margin: 0; border-radius: 10px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(232,182,71,.45);
  box-shadow: 0 10px 30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(232,182,71,.12);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.pyr-zone__card img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  /* warm torch-lit tint on the placeholder photos */
  filter: sepia(.4) saturate(1.15) hue-rotate(-12deg) brightness(.9);
  transition: transform .6s var(--ease), filter .25s; }
/* legibility scrim — layered so sand text clears 4.5:1 over the brightest photo */
.pyr-zone__card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,10,6,.10) 0%, rgba(13,10,6,0) 38%,
    rgba(13,10,6,.62) 74%, rgba(13,10,6,.88) 100%); }

/* overlaid caption block (title + Thai subline) */
.pyr-zone__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  text-align: left;
  padding: clamp(.9rem, 2vw, 1.3rem) clamp(1rem, 2.2vw, 1.4rem) clamp(.95rem, 2vw, 1.25rem); }
.pyr-zone__title { font-family: var(--font-heading);
  font-weight: 700; font-size: clamp(.95rem, 1.45vw, 1.1rem); letter-spacing: .045em;
  text-transform: uppercase; color: var(--pyr-gold-bright); line-height: 1.18;
  margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,.85); }
/* gold hairline accent under the title (grows on hover) */
.pyr-zone__title::after { content: ""; display: block; width: 2.2rem; height: 2px;
  margin: .5rem 0 .55rem;
  background: linear-gradient(90deg, var(--pyr-gold-bright), rgba(232,182,71,0));
  transition: width .25s var(--ease); }
.pyr-zone__sub { font-size: clamp(.74rem, 1.15vw, .88rem); line-height: 1.45;
  color: var(--pyr-sand); margin: 0; max-width: 30ch; text-shadow: 0 1px 8px rgba(0,0,0,.9); }

/* hover: lift, glow, brighten photo, extend the gold accent */
.pyr-zone:hover .pyr-zone__card { transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0,0,0,.6), inset 0 0 0 1px rgba(232,182,71,.5), 0 0 22px rgba(201,150,46,.3); }
.pyr-zone:hover .pyr-zone__card img { transform: scale(1.05);
  filter: sepia(.32) saturate(1.2) hue-rotate(-12deg) brightness(1); }
.pyr-zone:hover .pyr-zone__title::after { width: 3.4rem; }

/* responsive — 2 cols on tablet, 1 col (taller portrait) on phone */
@media (max-width: 900px) {
  .pyr-journey__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 539px) {
  .pyr-journey__grid { grid-template-columns: 1fr; }
  .pyr-zone__card { aspect-ratio: 4 / 5; }
}

/* ============================================================ PYR ADVENTURE LEVEL
   Three panels: diamond rating 3/5 · suitable-for list · recommended-age ankh.
   Mirrors Horror's .fear but gold-themed with diamonds + ankh. */
.pyr-level { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 50% 50%, rgba(201,150,46,.06), transparent 65%);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.pyr-level::before { content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; mix-blend-mode: screen; opacity: .08;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800'%3E%3Cfilter id='pl'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='5' seed='31'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.79  0 0 0 0 0.59  0 0 0 0 0.18  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pl)'/%3E%3C/svg%3E");
  background-size: cover; background-position: center;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%); }
.pyr-level__inner { position: relative; z-index: 1; }
/* panels: row 1 = label (same baseline across all 3), row 2 = content centered
   in the remaining height. No frame — gold hairline dividers between columns. */
.pyr-level-panel { position: relative; display: grid;
  grid-template-rows: auto 1fr; justify-items: center; text-align: center;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  padding: clamp(1rem, 2.4vw, 1.8rem) clamp(1.4rem, 3vw, 2.4rem); }
/* row 2 — the panel's main content, vertically centered & balanced */
.pyr-level-panel__body { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: clamp(.8rem, 1.8vw, 1.3rem); }
/* gold hairline dividers between the 3 panels (desktop) */
.pyr-level-panel + .pyr-level-panel { box-shadow: inset 1px 0 0 rgba(232,182,71,.22); }
.pyr-level-panel__label { font-family: var(--font-heading);
  font-weight: 700; font-size: clamp(1rem, 2.1vw, 1.4rem); letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1.1; color: var(--pyr-gold-bright);
  text-shadow: 0 0 16px rgba(232,182,71,.35); }

/* rating: diamonds + big score */
.pyr-level__diamonds { display: flex; gap: clamp(.35rem, 1vw, .6rem); line-height: 1;
  font-size: clamp(1.6rem, 3.6vw, 2.4rem); color: var(--pyr-gold-bright);
  filter: drop-shadow(0 0 10px rgba(232,182,71,.45)); }
.pyr-level__diamond--empty { color: rgba(232,182,71,.25);
  filter: none; text-shadow: none; }
.pyr-level__score { font-family: var(--font-body); font-weight: 700;
  font-size: clamp(4rem, 10vw, 6.4rem); line-height: 1; color: var(--pyr-sand);
  text-shadow: 0 0 22px rgba(232,182,71,.4);
  text-align: center; }
.pyr-level__score b { color: var(--pyr-gold-bright); }
.pyr-level__score-sep { margin: 0 0.12em; }

/* suitable-for list with people icons + sublines */
.pyr-level-list { list-style: none; display: flex; flex-direction: column;
  gap: clamp(.9rem, 1.8vw, 1.3rem); width: max-content; max-width: 100%; text-align: left; }
.pyr-level-list__item { display: flex; align-items: flex-start; gap: 0.8em; }
.pyr-level-list__icon { flex: 0 0 auto; width: 1.9em; height: 1.9em; display: grid;
  place-items: center; color: var(--pyr-gold-bright); }
.pyr-level-list__icon svg { width: 100%; height: auto; display: block; }
.pyr-level-list__title { display: block; font-family: var(--font-body);
  font-weight: 700; font-size: clamp(.92rem, 1.7vw, 1.05rem); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--pyr-sand); line-height: 1.2; }
.pyr-level-list__sub { display: block; font-size: clamp(.74rem, 1.4vw, .86rem); color: var(--pyr-ash);
  line-height: 1.35; margin-top: 0.15rem; }

/* recommended age — large ankh + age */
.pyr-level__ankh { color: var(--pyr-gold-bright);
  filter: drop-shadow(0 0 16px rgba(232,182,71,.45)); }
.pyr-level__ankh svg { width: clamp(48px, 7vw, 76px); height: auto; display: block; }
.pyr-level__age { font-family: var(--font-body); font-weight: 700;
  font-size: clamp(4rem, 10vw, 6.4rem); line-height: 1; color: var(--pyr-gold-bright);
  text-shadow: 0 0 20px rgba(232,182,71,.4); }
.pyr-level__age small { display: block; font-size: clamp(1rem, 2.1vw, 1.4rem); letter-spacing: 0.22em;
  color: var(--pyr-ash); margin-top: 0.4em; }

/* tablet (768–1023px): 3 panels stay side-by-side but the big score/age and the
   suitable-for list crowd each other — tighten paddings, shrink the giant numbers,
   and let the list center so nothing overflows its column. */
@media (min-width: 768px) and (max-width: 1023px) {
  .pyr-level-panel { padding: clamp(.8rem, 2vw, 1.2rem) clamp(.7rem, 1.6vw, 1.1rem);
    gap: clamp(1rem, 2.4vw, 1.6rem); }
  .pyr-level-panel__label { font-size: clamp(.9rem, 1.7vw, 1.1rem); }
  .pyr-level__score, .pyr-level__age { font-size: clamp(3rem, 7vw, 4.6rem); }
  .pyr-level__age small { font-size: clamp(.85rem, 1.6vw, 1.05rem); }
  .pyr-level__diamonds { font-size: clamp(1.3rem, 3vw, 1.9rem); }
  .pyr-level-list { width: auto; margin: 0 auto; }
  .pyr-level-list__title { font-size: clamp(.82rem, 1.5vw, .95rem); }
  .pyr-level-list__sub { font-size: clamp(.7rem, 1.2vw, .8rem); }
}

@media (max-width: 767px) {
  .pyr-level-panel + .pyr-level-panel { box-shadow: inset 0 1px 0 rgba(232,182,71,.22); }
  .pyr-level-list { margin: 0 auto; }
}

/* ============================================================ PYR WHAT ADVENTURERS SAY
   Carousel mirroring Horror's .says (reuses #reviewTrack JS), gold-themed. */
.pyr-says { position: relative; overflow: hidden; background: rgba(26,19,11,.55);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 9vw, 6.5rem); }
.pyr-says__inner { position: relative; z-index: 1; text-align: center; }
.pyr-says__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.55rem, 4.6vw, 3rem); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pyr-sand); line-height: 1.1; text-shadow: 0 2px 14px rgba(0,0,0,.6);
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem); }
.pyr-says__title-accent {
  background: linear-gradient(180deg, #ffe9b0, #e8b647 55%, #b9821f);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--pyr-gold-bright); text-shadow: 0 0 18px rgba(232,182,71,.45); }
/* Optional lead under the heading (admin-editable, hidden when blank). */
.pyr-says__title:has(+ .pyr-says__lead) { margin-bottom: 1rem; }
.pyr-says__lead { font-size: clamp(.85rem, 1.7vw, 1rem); line-height: 1.6;
  color: var(--pyr-ash); max-width: 56ch; margin: 0 auto clamp(2.25rem, 5vw, 3.25rem); }
.pyr-says__carousel { position: relative; }
.pyr-says__grid { list-style: none; margin: 0; padding: .25rem;
  display: flex; gap: clamp(1.1rem, 2.4vw, 1.6rem); align-items: stretch;
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth; scrollbar-width: none; }
.pyr-says__grid::-webkit-scrollbar { display: none; }
.pyr-review { flex: 0 0 calc((100% - 2 * clamp(1.1rem, 2.4vw, 1.6rem)) / 3);
  scroll-snap-align: start; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: clamp(.7rem, 1.6vw, 1rem);
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.3rem, 2.6vw, 1.9rem);
  background: rgba(20,16,10,.85); border: 1px solid rgba(232,182,71,.22);
  border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.4); }
.pyr-says__arrow { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: clamp(38px, 5vw, 48px); height: clamp(38px, 5vw, 48px); border-radius: 50%;
  border: 1px solid rgba(232,182,71,.5); background: rgba(13,10,6,.8);
  cursor: pointer; display: grid; place-items: center;
  transition: background .2s, border-color .2s, opacity .2s; }
.pyr-says__arrow:hover { background: rgba(185,130,31,.85); border-color: var(--pyr-gold-bright); }
.pyr-says__arrow:disabled { opacity: .3; cursor: default; }
.pyr-says__arrow--prev { left: clamp(-8px, -1.5vw, 0px); }
.pyr-says__arrow--next { right: clamp(-8px, -1.5vw, 0px); }
.pyr-says__arrow::before { content: ""; width: 0.6em; height: 0.6em;
  border-top: 2px solid var(--pyr-sand); border-right: 2px solid var(--pyr-sand); }
.pyr-says__arrow--prev::before { transform: translateX(2px) rotate(-135deg); }
.pyr-says__arrow--next::before { transform: translateX(-2px) rotate(45deg); }
.pyr-says__dots { display: flex; justify-content: center; gap: .6rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.pyr-says__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; cursor: pointer;
  padding: 0; background: rgba(231,216,181,.25); transition: background .2s, transform .2s; }
.pyr-says__dot.is-active { background: var(--pyr-gold-bright); transform: scale(1.25);
  box-shadow: 0 0 10px rgba(232,182,71,.6); }
.pyr-review__stars { display: flex; gap: clamp(.1rem, .5vw, .25rem); line-height: 1;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem); color: var(--pyr-gold-bright);
  filter: drop-shadow(0 0 8px rgba(232,182,71,.5)); }
.pyr-review__quote { font-family: var(--font-body);
  font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.4rem); line-height: 1.2;
  color: var(--pyr-sand); margin: 0; }
.pyr-review__author { display: flex; align-items: center; gap: 0.55em; margin: 0;
  font-size: clamp(.78rem, 1.5vw, .92rem); color: var(--pyr-ash); }
.pyr-review__avatar { flex: 0 0 auto; display: block; width: 2.1em; height: 2.1em;
  border-radius: 50%; object-fit: cover; background: #1a140a;
  box-shadow: inset 0 0 0 1px rgba(232,182,71,.4), 0 0 10px rgba(232,182,71,.25); }
@media (max-width: 899px) {
  .pyr-review { flex-basis: calc((100% - clamp(1.1rem, 2.4vw, 1.6rem)) / 2); }
}
@media (max-width: 639px) {
  .pyr-review { flex-basis: 84%; }
  .pyr-says__arrow { display: none; }
}

/* ============================================================ PYR TICKET PACKAGES */
.pyr-plans { position: relative; background: radial-gradient(120% 80% at 50% 0%, rgba(201,150,46,.06), transparent 55%);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 9vw, 6.5rem); }
.pyr-plans__inner { text-align: center; }
.pyr-plans__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.55rem, 4.6vw, 3rem); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pyr-sand); line-height: 1.1; text-shadow: 0 2px 14px rgba(0,0,0,.6);
  margin-bottom: clamp(2.5rem, 5.5vw, 3.5rem); }
/* Optional lead under the heading (admin-editable, hidden when blank). */
.pyr-plans__title:has(+ .pyr-plans__lead) { margin-bottom: 1rem; }
.pyr-plans__lead { font-size: clamp(.85rem, 1.7vw, 1rem); line-height: 1.6;
  color: var(--pyr-ash); max-width: 60ch; text-align: center;
  margin: 0 auto clamp(2.5rem, 5.5vw, 3.5rem); }
.pyr-plans__title-accent {
  background: linear-gradient(180deg, #ffe9b0, #e8b647 55%, #b9821f);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--pyr-gold-bright); }
.pyr-plans__grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2.4vw, 1.8rem); align-items: stretch; }
/* single card → one centered column instead of a left-aligned third */
.pyr-plans__grid:has(.pyr-plan:only-child) { grid-template-columns: 1fr;
  max-width: 26rem; margin-inline: auto; }
.pyr-plans__grid:has(.pyr-plan:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr);
  max-width: 44rem; margin-inline: auto; }
/* a single card — 4:3 image on top · body below */
.pyr-plan { position: relative; display: flex; flex-direction: column; text-align: left;
  overflow: hidden;
  background: rgba(20,16,10,.85); border: 1px solid rgba(232,182,71,.25);
  border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.pyr-plan:hover { transform: translateY(-6px); border-color: rgba(232,182,71,.5);
  box-shadow: 0 16px 44px rgba(0,0,0,.55), 0 0 24px rgba(201,150,46,.3); }

/* 4:3 image header — cover-cropped, bottom scrim so the body reads */
.pyr-plan__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.pyr-plan__media img { width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.04) brightness(.92);
  transition: transform .5s var(--ease), filter .5s var(--ease); }
.pyr-plan:hover .pyr-plan__media img { transform: scale(1.05); filter: contrast(1.06) brightness(1); }
.pyr-plan__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,8,5,0) 45%, rgba(11,8,5,.85) 100%); }

.pyr-plan__body { display: flex; flex-direction: column; align-items: flex-start;
  flex: 1 1 auto; gap: 0.85rem; padding: clamp(1.4rem, 2.6vw, 1.9rem); }
.pyr-plan__name { font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.05rem, 2.1vw, 1.35rem); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pyr-gold-bright); }
.pyr-plan__price { font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: 0.02em; color: var(--pyr-sand);
  text-shadow: 0 2px 12px rgba(0,0,0,.6); line-height: 1; }
.pyr-plan__cur { font-size: 0.42em; font-weight: 700; letter-spacing: 0.08em; color: var(--pyr-ash); }
.pyr-plan__feats { margin: 0; width: 100%;
  font-size: clamp(.82rem, 1.5vw, .92rem); line-height: 1.55; color: var(--pyr-ash);
  border-top: 1px solid rgba(232,182,71,.18); padding-top: 1.1rem; margin-top: 0.2rem; }

/* order row — quantity stepper (− N +) + per-card running total */
.pyr-plan__order { margin-top: auto; width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem;
  border-top: 1px solid rgba(232,182,71,.18); padding-top: 1.1rem; }
.pyr-plan__qty { display: inline-flex; align-items: center; overflow: hidden;
  border: 1px solid rgba(232,182,71,.45); border-radius: 999px; background: rgba(11,8,5,.6); }
.pyr-plan__step { display: grid; place-items: center; width: 2.2em; height: 2.2em;
  border: 0; background: transparent; cursor: pointer; color: var(--pyr-sand);
  font-family: var(--font-body); font-size: 1.15rem; font-weight: 700; line-height: 1;
  transition: background .2s var(--ease), color .2s var(--ease); }
.pyr-plan__step:hover { background: linear-gradient(180deg, #f3c75f, #b97f1f); color: #1a1206; }
.pyr-plan__step:disabled { opacity: .35; cursor: default; }
.pyr-plan__step:disabled:hover { background: transparent; color: var(--pyr-sand); }
.pyr-plan__count { min-width: 2.1em; text-align: center;
  font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--pyr-sand);
  font-variant-numeric: tabular-nums; }
.pyr-plan__total { font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem); color: var(--pyr-sand); white-space: nowrap;
  line-height: 1; text-align: right; }
.pyr-plan__total-val { color: var(--pyr-gold-bright); text-shadow: 0 0 12px rgba(232,182,71,.5); }
.pyr-plan__total .pyr-plan__cur { font-size: 0.42em; }

/* booking summary bar under the grid */
.pyr-plans__cart { margin-top: clamp(2rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1rem, 3vw, 2rem); }
.pyr-plans__cart-summary { font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.25rem); color: var(--pyr-sand); }
.pyr-plans__cart-summary #cartQty, .pyr-plans__cart-summary #cartTotal { color: var(--pyr-gold-bright);
  text-shadow: 0 0 10px rgba(232,182,71,.5); }
.pyr-plans__cart-btn { margin: 0; }
/* tablet (768–1023px): 2 cols — 3 across is cramped at this width, but a single
   column wastes the space. The 3rd card centers on its own row. */
@media (min-width: 768px) and (max-width: 1023px) {
  .pyr-plans__grid { grid-template-columns: repeat(2, 1fr);
    max-width: 44rem; margin: 0 auto; }
  /* a lone card stays one centered column even at tablet width */
  .pyr-plans__grid:has(.pyr-plan:only-child) { grid-template-columns: 1fr; max-width: 26rem; }
}
/* phone: single column */
@media (max-width: 767px) {
  .pyr-plans__grid { grid-template-columns: 1fr; max-width: 26rem; margin: 0 auto; }
}

/* ============================================================ PYR SPECIAL EVENTS (Mystery Gems Quest) */
.pyr-events { position: relative; overflow: hidden; background: rgba(26,19,11,.55);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.pyr-events__inner { position: relative; z-index: 1; }
.pyr-events__title { text-align: center;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.55rem, 4.6vw, 3rem); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pyr-sand); line-height: 1.1; text-shadow: 0 2px 14px rgba(0,0,0,.6);
  margin-bottom: clamp(2.5rem, 5.5vw, 3.5rem); }
.pyr-events__title-accent {
  background: linear-gradient(180deg, #ffe9b0, #e8b647 55%, #b9821f);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--pyr-gold-bright); }
/* SPECIAL EVENTS — horizontal cards (4:3 media left · body right).
   JS sets .pyr-events[data-mode]: single (1) · duo (2) · slide (3+). */
.pyr-events__carousel { position: relative; }
.pyr-events__viewport { overflow: hidden; }
.pyr-events__track { list-style: none; margin: 0; padding: 0; display: flex;
  gap: clamp(1.4rem, 3vw, 2rem); }

.pyr-event-card { position: relative; display: grid;
  grid-template-columns: minmax(0, 44%) 1fr; align-items: stretch; flex: 0 0 100%;
  background: rgba(20,16,10,.7); border: 1px solid rgba(232,182,71,.28); border-radius: 16px;
  overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.5);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.pyr-event-card:hover { border-color: rgba(232,182,71,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 24px rgba(201,150,46,.3); }
/* Whole-card link: contents lets __media/__body keep the card's grid layout. */
.pyr-event-card__link { display: contents; color: inherit; text-decoration: none; cursor: pointer; }

.pyr-event-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.pyr-event-card__body { min-height: 0; overflow: hidden; }
.pyr-event-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.04) brightness(.9);
  transition: transform .5s var(--ease), filter .5s var(--ease); }
.pyr-event-card:hover .pyr-event-card__media img { transform: scale(1.05); filter: contrast(1.06) brightness(1); }
.pyr-event-card__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,8,5,0) 70%, rgba(11,8,5,.5) 100%); }
.pyr-event-card__tag { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.06em; color: #1a1206;
  padding: 0.4em 0.85em; border-radius: 999px;
  background: linear-gradient(180deg, #f3c75f, #b97f1f);
  box-shadow: 0 4px 14px rgba(201,150,46,.5), 0 0 0 1px rgba(255,211,107,.4); }

.pyr-event-card__body { display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-start; gap: 0.9rem; padding: clamp(1.4rem, 3vw, 2.4rem); }
.pyr-event-card__title { font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem); letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--pyr-gold-bright); line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; }
.pyr-event-card__lead { font-size: clamp(.86rem, 1.6vw, 1rem); line-height: 1.55; color: var(--pyr-sand);
  max-width: 46ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; }
.pyr-event-card__meta { list-style: none; margin: 0; padding: 0; width: 100%;
  display: flex; flex-direction: column; gap: 0.55rem; }
.pyr-event-card__meta li { display: flex; align-items: center; gap: 0.6em;
  font-size: clamp(.8rem, 1.5vw, .92rem); color: var(--pyr-ash); }
.pyr-event-card__meta svg { flex: 0 0 auto; width: 1.15em; height: 1.15em; color: var(--pyr-gold-bright); }
.pyr-event-card__cta { margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: #1a1206;
  padding: 0.9em 1.8em; border: 0; border-radius: 3px; cursor: pointer;
  background: linear-gradient(180deg, #f3c75f, #b97f1f);
  box-shadow: 0 6px 16px rgba(201,150,46,.45), 0 0 0 1px rgba(255,211,107,.4);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s; }
.pyr-event-card__cta:hover { transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 10px 24px rgba(232,182,71,.55), 0 0 0 1px rgba(255,211,107,.6); }

/* modes */
.pyr-events[data-mode="single"] .pyr-event-card { flex-basis: 100%; }
/* duo → two side-by-side, each card stays horizontal (image left · content right) */
.pyr-events[data-mode="duo"] .pyr-event-card { flex-basis: calc(50% - clamp(.7rem, 1.5vw, 1rem));
  grid-template-columns: minmax(0, 40%) 1fr; }
.pyr-events[data-mode="duo"] .pyr-event-card__body { padding: clamp(1.1rem, 2vw, 1.5rem); gap: 0.7rem; }
.pyr-events[data-mode="duo"] .pyr-event-card__title { font-size: clamp(1.1rem, 1.9vw, 1.35rem); }
.pyr-events[data-mode="duo"] .pyr-event-card__lead { font-size: clamp(.8rem, 1.4vw, .9rem); }
.pyr-events[data-mode="slide"] .pyr-event-card { flex-basis: 100%; }

/* carousel arrows — slide mode only */
.pyr-events__arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 2.8rem; height: 2.8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(232,182,71,.5); background: rgba(11,8,5,.75);
  transition: background .2s var(--ease), transform .2s var(--ease); }
.pyr-events__arrow::before { content: ""; position: absolute; inset: 0; margin: auto;
  width: 0.7rem; height: 0.7rem; border-right: 2px solid var(--pyr-sand); border-bottom: 2px solid var(--pyr-sand); }
.pyr-events__arrow--prev { left: -0.5rem; }
.pyr-events__arrow--prev::before { transform: translateX(2px) rotate(135deg); }
.pyr-events__arrow--next { right: -0.5rem; }
.pyr-events__arrow--next::before { transform: translateX(-2px) rotate(-45deg); }
.pyr-events__arrow:hover { background: linear-gradient(180deg, #f3c75f, #b97f1f); transform: translateY(-50%) scale(1.06); }
.pyr-events__arrow:hover::before { border-color: #1a1206; }
.pyr-events[data-mode="slide"] .pyr-events__arrow { display: block; }

/* carousel dots — slide mode only */
.pyr-events__dots { display: none; justify-content: center; gap: 0.5rem;
  margin-top: clamp(1.4rem, 3vw, 2rem); }
.pyr-events[data-mode="slide"] .pyr-events__dots { display: flex; }
.pyr-events__dot { width: 0.7rem; height: 0.7rem; border-radius: 999px; cursor: pointer;
  border: 0; background: rgba(168,152,120,.4); padding: 0;
  transition: background .2s var(--ease), transform .2s var(--ease); }
.pyr-events__dot.is-active { background: var(--pyr-gold-bright); transform: scale(1.25);
  box-shadow: 0 0 8px rgba(232,182,71,.6); }

/* tablet (768–1023px): duo mode keeps two cards side-by-side, but at 50% width
   the horizontal image/text split gets cramped — stack each card vertically
   (image on top) so both the photo and copy have room. Single/slide modes are
   full-width and stay horizontal. */
@media (min-width: 768px) and (max-width: 1023px) {
  .pyr-events[data-mode="duo"] .pyr-event-card { grid-template-columns: 1fr; }
  .pyr-events[data-mode="duo"] .pyr-event-card__media { aspect-ratio: 16 / 9; }
  .pyr-events[data-mode="duo"] .pyr-event-card__body { padding: clamp(1.2rem, 2.4vw, 1.6rem); }
}

/* mobile: every mode collapses to a vertical card, one per row */
@media (max-width: 767px) {
  .pyr-events__track { flex-direction: column; }
  .pyr-event-card { grid-template-columns: 1fr; flex-basis: auto !important; }
  .pyr-event-card__media { aspect-ratio: 16 / 9; }
  .pyr-events[data-mode] .pyr-events__arrow, .pyr-events[data-mode] .pyr-events__dots { display: none; }
}

/* ============================================================ PYR THE PHARAOH'S GARDEN
   A compact highlight block (copy left · image right) introducing the open-air
   garden area. Not in the mockup — own content; image is a placeholder gradient. */
.pyr-garden { position: relative; overflow: hidden; background: var(--pyr-night);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.pyr-garden__inner { position: relative; z-index: 1; display: grid;
  grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
/* left — copy */
.pyr-garden__kicker { display: flex; align-items: center; gap: 0.7em;
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(.62rem, 1.3vw, .78rem); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--pyr-gold-bright); margin-bottom: 1rem; }
.pyr-garden__kicker::before { content: ""; width: clamp(24px, 4vw, 44px); height: 2px;
  background: linear-gradient(90deg, var(--pyr-gold-bright), rgba(232,182,71,0)); }
.pyr-garden__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.08; letter-spacing: 0.03em;
  text-transform: uppercase; margin-bottom: 1rem;
  background: linear-gradient(180deg, #ffe9b0, #e8b647 55%, #b9821f);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--pyr-gold-bright); }
.pyr-garden__lead { font-size: clamp(.9rem, 1.7vw, 1.05rem); line-height: 1.65;
  color: var(--pyr-sand); margin-bottom: 1.6rem; max-width: 42ch; }
.pyr-garden__list { list-style: none; display: flex; flex-direction: column; gap: 0.85rem;
  margin-bottom: 1.8rem; }
.pyr-garden__list li { display: flex; align-items: center; gap: 0.7em;
  font-size: clamp(.85rem, 1.5vw, .98rem); color: var(--pyr-sand); }
.pyr-garden__list svg { flex: 0 0 auto; width: 1.3em; height: 1.3em; color: var(--pyr-gold-bright); }
.pyr-garden__cta { display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.84rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pyr-gold-bright);
  padding: 0.85em 2em; border-radius: 3px; border: 1px solid rgba(232,182,71,.55);
  background: rgba(13,10,6,.35); cursor: pointer;
  transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s var(--ease); }
.pyr-garden__cta:hover { transform: translateY(-2px);
  background: linear-gradient(180deg, #f3c75f, #b97f1f); color: #1a1206; }
/* right — placeholder media (gold torch-lit gradient + a faint garden glyph) */
.pyr-garden__media { position: relative; align-self: stretch; min-height: clamp(240px, 34vw, 360px);
  border-radius: 16px; overflow: hidden; border: 1px solid rgba(232,182,71,.3);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  background: var(--pyr-deep)
    radial-gradient(120% 120% at 60% 35%, rgba(201,150,46,.45), rgba(60,40,12,.5) 45%, rgba(11,8,5,.96) 82%);
  display: grid; place-items: center; }
.pyr-garden__media svg { width: clamp(70px, 12vw, 120px); height: auto;
  color: var(--pyr-gold-bright); opacity: .85;
  filter: drop-shadow(0 0 18px rgba(232,182,71,.5)); }
.pyr-garden__media img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
@media (max-width: 767px) {
  .pyr-garden__inner { grid-template-columns: 1fr; }
  .pyr-garden__media { order: -1; }   /* image on top when stacked */
}

/* ============================================================ PYR FAQ (gold-themed) */
.pyr-faq { position: relative; background: transparent;
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 9vw, 6.5rem); }
.pyr-faq__inner { text-align: center; }
.pyr-faq__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.55rem, 4.6vw, 3rem); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pyr-sand); line-height: 1.1; text-shadow: 0 2px 14px rgba(0,0,0,.6);
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem); }
/* Optional lead under the heading (admin-editable, hidden when blank). */
.pyr-faq__title:has(+ .pyr-faq__lead) { margin-bottom: 1rem; }
.pyr-faq__lead { font-size: clamp(.85rem, 1.7vw, 1rem); line-height: 1.6;
  color: var(--pyr-ash); max-width: 60ch; text-align: center;
  margin: 0 auto clamp(2.25rem, 5vw, 3.25rem); }
.pyr-faq__title-accent {
  background: linear-gradient(180deg, #ffe9b0, #e8b647 55%, #b9821f);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--pyr-gold-bright); }
.pyr-faq__grid { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.4vw, 1.6rem); text-align: left; align-items: start; }
.pyr-faq-item { background: rgba(20,16,10,.85); border: 1px solid rgba(232,182,71,.2);
  border-radius: 14px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.4);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.pyr-faq-item[open] { border-color: rgba(232,182,71,.45);
  box-shadow: inset 0 0 0 1px rgba(232,182,71,.18), 0 10px 32px rgba(0,0,0,.5); }
.pyr-faq-item__q { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 1rem; padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.4vw, 1.6rem); }
.pyr-faq-item__q::-webkit-details-marker { display: none; }
.pyr-faq-item__title { font-family: var(--font-body); font-weight: 700;
  font-size: clamp(.95rem, 1.9vw, 1.12rem); line-height: 1.3; color: var(--pyr-sand); flex: 1; min-width: 0; }
.pyr-faq-item__chevron { flex: 0 0 auto; width: 0.62em; height: 0.62em;
  border-bottom: 2px solid var(--pyr-gold-bright); border-right: 2px solid var(--pyr-gold-bright);
  transform: translateY(-25%) rotate(45deg); transition: transform .25s var(--ease); }
.pyr-faq-item[open] .pyr-faq-item__chevron { transform: translateY(10%) rotate(225deg); }
.pyr-faq-item__a { margin: 0; padding: 0 clamp(1.1rem, 2.4vw, 1.6rem) clamp(1rem, 2.2vw, 1.4rem);
  font-size: clamp(.85rem, 1.6vw, .98rem); line-height: 1.6; color: var(--pyr-ash);
  border-top: 1px solid rgba(232,182,71,.14); padding-top: clamp(.8rem, 1.8vw, 1.1rem); }
@media (max-width: 639px) { .pyr-faq__grid { grid-template-columns: 1fr; } }

/* ============================================================ PYR FINAL CTA (Dare to explore) */
.pyr-cta { position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(300px, 34vw, 460px); padding: clamp(3rem, 7vw, 5rem) 0;
  background: var(--pyr-night)
    radial-gradient(100% 120% at 50% 50%, rgba(60,34,10,.7), rgba(13,10,6,.98) 75%); }
.pyr-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 70% at 50% 50%, rgba(201,150,46,.16) 0%, transparent 60%),
    linear-gradient(180deg, rgba(13,10,6,.5) 0%, transparent 40%, rgba(13,10,6,.6) 100%); }
.pyr-cta__inner { position: relative; z-index: 2; width: 100%; text-align: center; }
.pyr-cta__title { font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(2rem, 6vw, 4rem); line-height: 1.04; letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: clamp(.6rem, 1.6vw, 1rem);
  background: linear-gradient(180deg, #ffe9b0, #e8b647 55%, #b9821f);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--pyr-gold-bright); filter: drop-shadow(0 3px 18px rgba(0,0,0,.7)); }
.pyr-cta__lead { font-size: clamp(.95rem, 2vw, 1.2rem); line-height: 1.5; color: var(--pyr-sand);
  text-shadow: 0 2px 12px rgba(0,0,0,.7); margin-bottom: clamp(1.6rem, 3.6vw, 2.4rem); }
.pyr-cta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  font-family: var(--font-body); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; font-size: clamp(.9rem, 1.8vw, 1.08rem);
  color: #1a1206; padding: 1.05em 3em; border: 0; border-radius: 4px;
  background: linear-gradient(180deg, #f3c75f, #b97f1f);
  box-shadow: 0 8px 22px rgba(201,150,46,.5), 0 0 0 1px rgba(255,211,107,.45);
  cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s; }
.pyr-cta__btn:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.06); }

/* ============================================================ PYR FOOTER
   Uses Horror's `.footer*` layout/markup verbatim; these `.pyr`-scoped rules
   just re-tint it gold and fix the transparent-PNG logo (Horror's footer logo
   is a black-bg JPG screen-blended; logo-pyr.png is already transparent). */
.pyr .footer { background: var(--pyr-ink);
  border-top-color: rgba(232,182,71,.4); box-shadow: inset 0 1px 0 rgba(255,211,107,.2); }
.pyr .footer__brand-logo { mix-blend-mode: normal;
  filter: brightness(1.04) contrast(1.06) drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.pyr .footer__nav a:hover { color: var(--pyr-gold-bright);
  text-shadow: 0 0 10px var(--pyr-gold-glow); }

/* ============================================================ PYR VIDEO LIGHTBOX
   The .video-modal markup is shared with Horror (built in pyramid.js), so its
   default backdrop/frame are blood-red. Re-skin them to the gold/Egyptian
   theme while on the Pyramid page. Scoped to .pyr so Horror is untouched. */
.pyr .video-modal__backdrop {
  background: radial-gradient(120% 120% at 50% 40%, rgba(26,16,6,.86), rgba(7,5,3,.97)); }
.pyr .video-modal__embed {
  border: 1px solid rgba(232,182,71,.5);
  box-shadow: 0 24px 80px rgba(0,0,0,.8),
              0 0 0 1px rgba(255,211,107,.14),
              0 0 60px rgba(201,150,46,.4); }
.pyr .video-modal__close { background: rgba(13,10,6,.6); }
.pyr .video-modal__close:hover { background: rgba(13,10,6,.85); }
.pyr .video-modal__close svg { stroke: var(--pyr-gold-glow); }