/* ==========================================================================
   Twins Cleaners & Alterations — v2
   Tokens + components. Static CSS, no build step.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------ */
:root,
[data-theme='light'] {
  --bg: #f6f2ea;
  --surface: #fbf9f4;
  --surface-2: #fffefb;
  --surface-offset: #efe9dc;
  --surface-offset-2: #e8e0cf;
  --divider: #e2dac9;
  --border: #ddd4c1;

  --text: #1d2a27;
  --muted: #5b625f;
  --faint: #9a9c93;
  --inverse: #f8f5ee;

  --primary: #0e5a52;
  --primary-hover: #0a463f;
  --primary-active: #07332e;
  --primary-highlight: #d2e3df;

  /* Accent = storefront sign red (owner request 2026-08-15: match the
     channel letters / window lettering; green stays). */
  --accent: #a63a2e;
  --accent-hover: #872e24;
  --accent-highlight: #f5ddd6;

  --shadow-1: 0 1px 2px oklch(35% 0.04 180 / .08);
  --shadow-2: 0 6px 18px -6px oklch(35% 0.04 180 / .18);
  --shadow-3: 0 24px 60px -24px oklch(35% 0.04 180 / .30);

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: 'Boska', Georgia, serif;
  --font-body: 'Satoshi', Inter, system-ui, sans-serif;

  /* pinstripe stripe colour (fabric texture device) */
  --pin: oklch(30% 0.03 180 / .055);

  /* literals used on photo / teal grounds, where tokens don't reach */
  --on-dark: #fdfbf5;
  --on-dark-accent: #ee8877;
  --accent-hairline: #c25a4a;
  --open-dot: #4ec08f;

  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;  --space-10: 2.5rem;
  --space-12: 3rem;  --space-16: 4rem;  --space-20: 5rem;  --space-24: 6rem;

  --radius-sm: .375rem; --radius-md: .625rem; --radius-lg: 1rem;
  --radius-xl: 1.5rem;  --radius-full: 9999px;

  --container: 1240px;
  --container-narrow: 1080px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-pad: clamp(3rem, 7vw, 6rem);
}

[data-theme='dark'] {
  --bg: #10181a;
  --surface: #161f21;
  --surface-2: #1a2426;
  --surface-offset: #1a2326;
  --surface-offset-2: #212c2e;
  --divider: #24302f;
  --border: #2c3938;

  --text: #e3eae8;
  --muted: #939c98;
  --faint: #616b67;
  --inverse: #1d2a27;

  --primary: #56b3a6;
  --primary-hover: #3d9c8f;
  --primary-active: #2c8478;
  --primary-highlight: #1f3b39;

  --accent: #e2735f;
  --accent-hover: #eb9080;
  --accent-highlight: #3a201b;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 6px 18px -6px rgba(0, 0, 0, .55);
  --shadow-3: 0 24px 60px -24px rgba(0, 0, 0, .7);

  --pin: oklch(90% 0.02 180 / .045);
}

/* Dark-theme service / stats / reviews bands need a deeper ground than the
   dark-theme --primary-active (which is a light teal). */
[data-theme='dark'] .band-teal,
[data-theme='dark'] .card--teal { background: #0d1a1b; }

/* --- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration-color: color-mix(in oklch, var(--primary) 35%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); text-decoration-color: currentColor; }
::selection { background: var(--accent-highlight); color: var(--text); }
:where(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
section[id] { scroll-margin-top: 92px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 18px; background: var(--primary); color: var(--inverse);
  border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; color: var(--inverse); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-pad); }

/* --- Shared devices ---------------------------------------------------- */

/* fabric pinstripe overlay */
.pinstripe { position: relative; overflow: hidden; }
.pinstripe::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, transparent 0 7px, var(--pin) 7px 8px);
}
.pinstripe > * { position: relative; }
.band-teal::before { background-image: repeating-linear-gradient(90deg, transparent 0 7px, rgba(238, 136, 119, .06) 7px 8px); }
.band-gold::before { background-image: repeating-linear-gradient(90deg, transparent 0 7px, oklch(45% 0.08 25 / .07) 7px 8px); }

.band-teal { background: var(--primary-active); color: #f4f1e8; }
.band-gold { background: var(--accent-highlight); }

/* eyebrow + dashed lead-in rule */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  font-size: .78rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--primary);
}
.eyebrow::before { content: ''; display: block; width: 40px; border-top: 2px dashed var(--accent); }
.eyebrow--onDark { color: var(--on-dark-accent); }
.eyebrow--onDark::before { border-top-color: var(--accent-hairline); }

/* display type */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  text-wrap: pretty;
}
.display em { font-style: italic; font-weight: 500; color: var(--primary); }
.display--onDark { color: var(--on-dark); }
.display--onDark em { color: var(--on-dark-accent); }

.lede { color: var(--muted); font-size: clamp(1.02rem, 1rem + 0.3vw, 1.2rem); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: var(--radius-full);
  font-weight: 700; font-size: 1rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: var(--transition-interactive);
}
.btn--primary { background: var(--primary); color: var(--inverse); box-shadow: var(--shadow-2); }
.btn--primary:hover { background: var(--primary-hover); color: var(--inverse); transform: translateY(-2px); }
.btn--ghost { border-color: var(--border); color: var(--text); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn--gold { background: #b13a2e; color: #fdfbf5; box-shadow: var(--shadow-3); }
.btn--gold:hover { background: #9a3227; color: #fdfbf5; transform: translateY(-2px); }
.btn--onDark { border-color: rgba(248, 245, 238, .42); color: var(--on-dark); }
.btn--onDark:hover { background: rgba(248, 245, 238, .13); border-color: var(--on-dark); color: var(--on-dark); }
.btn--outlineGold { border-color: var(--accent); color: var(--text); }
.btn--outlineGold:hover { background: rgba(166, 58, 46, .12); color: var(--text); }
.btn--sm { padding: 10px 18px; font-size: .9rem; }

/* live status pill */
.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--radius-full);
  background: var(--surface-offset); border: 1px solid var(--border);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text); white-space: nowrap;
}
.status-pill--highlight { background: var(--primary-highlight); border-color: transparent; }
.status-dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--accent); }
.is-open .status-dot, .status-dot.is-open { background: var(--open-dot); }

/* ticket tag (punched hole + perforation) */
.ticket {
  position: relative;
  padding: 30px 30px 26px 44px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-3);
}
.ticket::before { /* punched hole */
  content: ''; position: absolute; left: 17px; top: 34px;
  width: 11px; height: 11px; border-radius: var(--radius-full);
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--border);
}
.ticket::after { /* perforation */
  content: ''; position: absolute; left: 14px; top: 14px; bottom: 14px;
  border-left: 2px dashed var(--accent-highlight);
}
.ticket__no { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }


/* --- Header ------------------------------------------------------------ */
.header {
  position: sticky; top: 0; z-index: 80;
  background: color-mix(in oklch, var(--surface-2) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--accent-highlight);
}
.nav {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter);
  height: 68px; display: flex; align-items: center; gap: clamp(12px, 3vw, 32px);
}
.nav a, .nav span, .nav button { white-space: nowrap; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); flex: none; }
.brand svg { color: var(--primary); }
.brand__names { display: flex; flex-direction: column; line-height: 1.02; }
.brand__name { font-family: var(--font-display); font-size: 1.34rem; font-weight: 700; letter-spacing: -.015em; }
.brand__sub { font-size: .6rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }

.nav__links { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 24px); margin-right: auto; }
.nav__links a { color: var(--muted); text-decoration: none; font-size: .94rem; font-weight: 500; }
.nav__links a:hover { color: var(--primary); }

.header__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.header__ctas { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--radius-full); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: var(--transition-interactive);
}
.icon-btn:hover { border-color: var(--primary); color: var(--primary); }
/* SVG elements don't get the UA [hidden] rule (HTML namespace only). */
svg[hidden] { display: none; }
.hamburger { display: none; border-radius: 10px; }

/* --- Hero -------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--primary-active); }
/* Background layers stack in DOM order (photo -> scrim -> pin). The hero is
   the owner's storefront photo (client request 2026-08-15, replaced the
   steaming-worker video); the scrim is heavy over the text column and opens
   up to the right so the storefront and sign stay recognizable. */
.hero__photo, .hero__scrim, .hero__pin { position: absolute; inset: 0; }
.hero__photo { background-image: url('assets/hero.jpg?v=61b32ed1'); background-size: cover; background-position: center 32%; }
.hero__scrim { background: linear-gradient(104deg, oklch(20% .045 185 / .92) 0%, oklch(22% .05 185 / .74) 46%, oklch(19% .04 185 / .38) 100%); }
.hero__pin { background-image: repeating-linear-gradient(90deg, transparent 0 7px, rgba(238, 136, 119, .075) 7px 8px); }

.hero__grid {
  position: relative; z-index: 1;
  max-width: var(--container); margin-inline: auto;
  padding: clamp(74px, 11vw, 132px) var(--gutter) clamp(52px, 7vw, 86px);
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr);
  gap: clamp(36px, 5vw, 64px); align-items: center;
  min-height: clamp(560px, 84vh, 880px);
}
.hero h1 { position: relative; font-size: clamp(3rem, 10vw, 6.6rem); line-height: .9; letter-spacing: -.032em; color: var(--on-dark); max-width: 18ch; text-wrap: balance; }
.hero h1 .echo {
  position: absolute; left: 0; top: 0; width: 100%;
  /* The twin device: a visible offset outline copy. em-based so it keeps the
     same visual weight at every viewport (fixed px reads 2-3x heavier on
     mobile type sizes). The real copy above it carries a dark text-shadow,
     which keeps the pair separated instead of reading as blur. */
  transform: translate(.075em, .085em);
  color: transparent; -webkit-text-stroke: .014em rgba(238, 136, 119, .18);
  pointer-events: none;
}
/* No mirror on the italic line - client call (2026-08-15): every ghost/shadow
   treatment on the thin gold italics rendered as blur on real devices.
   The twin motif lives on line one only. visibility (not display) so the
   echo's line geometry still matches the real copy exactly. */
.hero h1 .echo em { visibility: hidden; }
.hero h1 .real {
  position: relative;
  /* Tight dark edge only, plus a faint wide pool with NO vertical offset -
     an offset ambient shadow under thin italic strokes reads as double
     vision ("looks like I need glasses"). Legibility comes from the edge. */
  text-shadow: 0 1px 2px oklch(18% .04 185 / .45), 0 0 22px oklch(18% .04 185 / .35);
}
/* Italic line: tight edge only. No ambient pool, no ghost - nothing that can
   read as a second copy under the thin gold strokes. */
.hero h1 .real em { text-shadow: 0 1px 2px oklch(18% .04 185 / .4); }
.hero__sub { margin-top: clamp(20px, 2.8vw, 30px); max-width: 44ch; font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.4rem); line-height: 1.5; color: rgba(248, 245, 238, .92); text-shadow: 0 1px 2px oklch(18% .04 185 / .5), 0 4px 18px oklch(18% .04 185 / .45); }
.hero__ctas { margin-top: clamp(28px, 4vw, 42px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero__ctas .btn { padding: 17px 30px; font-size: 1.04rem; }
.hero__fine { margin-top: 24px; font-size: .85rem; font-weight: 600; color: rgba(248, 245, 238, .62); }

.hero__ticketCol { justify-self: end; width: min(100%, 340px); position: relative; }
.hero__thread { position: absolute; left: 50%; top: -58px; width: 1px; height: 58px; background: linear-gradient(var(--on-dark-accent), rgba(238, 136, 119, 0)); }
.hero__ticket { transform: rotate(-1.6deg); }
.hero__ticket::before { background: var(--primary-active); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.ticket__status { margin-top: 16px; }
.ticket__line { margin-top: 12px; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; letter-spacing: -.015em; color: var(--text); }
.ticket__yelp { margin-top: 20px; padding-top: 18px; border-top: 2px dashed var(--divider); display: flex; align-items: flex-end; gap: 12px; }
.ticket__rating { font-family: var(--font-display); font-size: 2.6rem; line-height: .85; color: var(--primary); }
.ticket__meta { font-size: .78rem; color: var(--muted); margin-top: 5px; }
.ticket__cta { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 18px; font-size: .94rem; }

/* marquee */
.marquee { position: relative; border-top: 1px solid rgba(238, 136, 119, .28); background: rgba(7, 29, 26, .55); overflow: hidden; }
.marquee__track { display: flex; width: max-content; padding: 15px 0; animation: twinmarquee 42s linear infinite; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 26px; padding-right: 26px;
  font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-style: italic; font-weight: 500; color: rgba(253, 251, 245, .82); white-space: nowrap;
}
.marquee__item::after { content: ''; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--accent-hairline); flex: none; }
@keyframes twinmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* --- Diptych ----------------------------------------------------------- */
.diptych { border-bottom: 1px solid var(--border); background: var(--surface-offset); }
.diptych__grid { max-width: var(--container); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; }
.diptych__half { padding: clamp(38px, 5.5vw, 64px) clamp(20px, 4vw, 52px); }
.diptych__half:first-child { border-right: 2px dashed var(--border); }
.diptych__half:last-child { background: var(--surface-offset-2); }
.diptych__num { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 4.6rem); line-height: .8; letter-spacing: -.03em; color: var(--accent); opacity: .34; }
.diptych__half h2 { margin-top: 14px; font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1; letter-spacing: -.025em; }
.diptych__half p { margin-top: 14px; color: var(--muted); max-width: 34ch; }

/* --- Stats ------------------------------------------------------------- */
.stats__grid {
  max-width: var(--container); margin-inline: auto;
  padding: clamp(34px, 4.6vw, 54px) var(--gutter);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.stat { padding: 14px clamp(16px, 2vw, 28px); border-left: 1px solid rgba(238, 136, 119, .24); }
.stat__value { font-family: var(--font-display); font-size: clamp(2.4rem, 4.6vw, 3.5rem); line-height: .92; letter-spacing: -.03em; color: var(--on-dark-accent); }
.stat__label { margin-top: 10px; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(244, 241, 232, .7); }

/* --- Services ---------------------------------------------------------- */
.section__head { max-width: 680px; margin-bottom: clamp(34px, 4vw, 54px); }
.section__head h2 { font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: .98; }
.section__head p { margin-top: 18px; }

.cards { display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.card {
  position: relative; overflow: hidden;
  padding: clamp(26px, 2.6vw, 36px);
  border-radius: var(--radius-lg);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--shadow-1);
  transition: var(--transition-interactive);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-3); }
.card__wm {
  position: absolute; right: -6px; bottom: -32px;
  font-family: var(--font-display); font-size: 8.5rem; line-height: 1;
  color: color-mix(in oklch, var(--accent) 16%, transparent); pointer-events: none;
}
.card__kicker { position: relative; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; }
.card h3 { position: relative; font-family: var(--font-display); font-size: clamp(1.45rem, 1.25rem + 0.6vw, 1.85rem); line-height: 1.06; letter-spacing: -.02em; }
.card p { position: relative; margin-top: 14px; color: var(--muted); font-size: .97rem; }
.card__price {
  position: relative; margin-top: 20px; padding-top: 16px;
  border-top: 2px dashed var(--border);
  font-size: .82rem; font-weight: 700; letter-spacing: .05em; color: var(--accent);
  display: none; /* pricing slot — flip to block when the client supplies prices */
}
.card--teal { background: var(--primary-active); color: var(--on-dark); border-color: rgba(238, 136, 119, .32); }
.card--teal .card__wm { color: rgba(238, 136, 119, .13); }
.card--teal .card__kicker, .card--teal .card__price { color: var(--on-dark-accent); }
.card--teal p { color: rgba(244, 241, 232, .8); }
.card--teal .card__price { border-top-color: rgba(238, 136, 119, .32); }

/* --- About ------------------------------------------------------------- */
.about { background: var(--surface-offset); border-block: 1px solid var(--border); }
.about__grid { display: grid; gap: clamp(40px, 5vw, 80px); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: center; }
.about__photos { position: relative; padding-bottom: 34px; }
.about__main { aspect-ratio: 4 / 5; border-radius: var(--radius-xl); background: var(--primary-highlight) url('assets/about.jpg?v=14c9ab92') center / cover; box-shadow: var(--shadow-3); outline: 1px solid var(--border); }
.about__inset { position: absolute; left: -18px; bottom: 0; width: 46%; aspect-ratio: 1; border-radius: var(--radius-lg); background: url('assets/hero.jpg?v=61b32ed1') center / cover; border: 8px solid var(--surface-offset); box-shadow: var(--shadow-3); }
.about__badge {
  position: absolute; right: -10px; top: -16px;
  padding: 16px 22px 16px 34px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-3); transform: rotate(3deg);
}
.about__badge::before { content: ''; position: absolute; left: 15px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: var(--radius-full); background: var(--surface-offset); box-shadow: inset 0 0 0 1px var(--border); }
.about__badge span { display: block; }
.about__badge .est { font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.about__badge .year { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; }
.about h2 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
.about p + p, .about h2 + p { margin-top: 20px; }
.about p + p { margin-top: 14px; }
.proof { margin-top: 28px; display: grid; gap: 14px; }
.proof li { display: flex; gap: 14px; align-items: flex-start; font-weight: 500; padding-bottom: 14px; border-bottom: 1px solid var(--divider); }
.proof svg { flex: none; margin-top: 3px; color: var(--accent); }

/* --- How it works ------------------------------------------------------ */
.steps { display: grid; gap: clamp(16px, 2vw, 26px); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.step { padding: clamp(26px, 2.6vw, 36px); border-radius: var(--radius-lg); background: var(--surface); border: 2px dashed var(--border); }
.step__nums { display: flex; align-items: baseline; gap: 6px; margin-bottom: 18px; font-family: var(--font-display); font-size: 3rem; line-height: .85; }
.step__nums .solid { color: var(--primary); }
.step h3 { font-family: var(--font-display); font-size: 1.55rem; line-height: 1.08; letter-spacing: -.02em; }
.step p { margin-top: 12px; color: var(--muted); font-size: .98rem; }

/* --- Reviews ----------------------------------------------------------- */
.reviews__grid { display: grid; gap: clamp(34px, 5vw, 68px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; }
.reviews h2 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
.reviews__lede { margin-top: 18px; color: rgba(244, 241, 232, .8); max-width: 44ch; }
.reviews__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.reviews__panel { padding: clamp(30px, 3.2vw, 46px); border-radius: var(--radius-xl); background: rgba(244, 241, 232, .075); border: 1px solid rgba(244, 241, 232, .2); }
.reviews__score { display: flex; align-items: flex-end; gap: 18px; }
.reviews__score .num { font-family: var(--font-display); font-size: clamp(3.8rem, 9vw, 6rem); line-height: .8; letter-spacing: -.03em; color: var(--on-dark); }
.reviews__count { margin-top: 8px; font-size: .88rem; color: rgba(244, 241, 232, .76); }
.reviews__note { margin-top: 26px; padding-top: 20px; border-top: 2px dashed rgba(244, 241, 232, .22); font-size: .82rem; color: rgba(244, 241, 232, .62); }

/* --- Visit ------------------------------------------------------------- */
.visit__grid { display: grid; gap: clamp(18px, 2vw, 26px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.panel { padding: clamp(26px, 2.6vw, 36px); border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.panel h3 { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -.02em; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }

.hours { width: 100%; border-collapse: collapse; font-size: .98rem; }
.hours th, .hours td { padding: 12px; border-bottom: 1px solid var(--divider); font-weight: 500; }
.hours th { text-align: left; color: var(--text); }
.hours td { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.hours tr.is-closed td { color: var(--faint); }
.hours tr.is-today { background: var(--accent-highlight); }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 700; }
.hours__note { margin-top: 18px; font-size: .86rem; color: var(--faint); }

.visit__contact { display: flex; flex-direction: column; gap: 24px; }
.contact-rows { display: grid; gap: 10px; }
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-radius: var(--radius-md); background: var(--surface-offset); color: var(--text); text-decoration: none; font-weight: 700; transition: var(--transition-interactive); }
.contact-row:hover { background: var(--primary-highlight); color: var(--text); }
.contact-row span:last-child { color: var(--primary); }
.visit__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.visit__ctas .btn { flex: 1 1 auto; }
.map { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); min-height: 340px; background: var(--surface-offset); }
.map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* --- CTA band ---------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(2.1rem, 5.4vw, 3.7rem); max-width: 24ch; margin-inline: auto; }
.cta-band p { margin-top: 18px; }
.cta-band__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cta-band__ctas .btn { padding: 17px 30px; font-size: 1.04rem; }

/* --- Footer ------------------------------------------------------------ */
.footer { background: var(--surface); border-top: 2px dashed var(--border); }
.footer__grid { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-block: clamp(2.6rem, 5vw, 4rem); }
.footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer__brand svg { color: var(--primary); }
.footer__brand span { font-family: var(--font-display); font-size: 1.24rem; font-weight: 700; }
.footer p { color: var(--muted); font-size: .94rem; max-width: 32ch; }
.footer__heading { font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.footer__list { display: grid; gap: 10px; font-size: .94rem; }
.footer__list li, .footer__list a { color: var(--muted); text-decoration: none; }
.footer__list a:hover { color: var(--primary); }
.footer__bar { border-top: 1px solid var(--divider); }
.footer__bar p { padding-block: 20px; font-size: .84rem; color: var(--faint); max-width: none; }

/* --- Mobile bar -------------------------------------------------------- */
.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; grid-template-columns: repeat(3, 1fr);
  background: color-mix(in oklch, var(--surface-2) 95%, transparent);
  backdrop-filter: blur(12px);
  border-top: 2px dashed var(--border);
  box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, .5);
}
.mobilebar a {
  min-height: 4.5rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  color: var(--text); text-decoration: none;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
}
.mobilebar a svg { color: var(--primary); }
.mobilebar a.is-primary { background: var(--primary); color: var(--inverse); }
.mobilebar a.is-primary svg { color: currentColor; }

/* --- Reveals ----------------------------------------------------------- */
/* Hidden state is applied by app.js so content stays visible without JS. */
[data-reveal].reveal-init { opacity: 0; transform: translateY(20px); }
[data-reveal].reveal-init { transition: opacity 640ms cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms), transform 640ms cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 1080px) {
  .header__ctas { display: none; }
  .hamburger { display: inline-flex; align-items: center; justify-content: center; }
  .nav__links { display: none; }
  .nav__links.is-open {
    display: flex; position: fixed; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px 20px 20px;
    background: var(--surface-2); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-3); z-index: 70;
  }
  .nav__links.is-open a { padding: 14px 4px; border-bottom: 1px solid var(--divider); font-size: 1.05rem; }
}

@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__ticketCol { justify-self: start; }
  /* Narrow cover-crop can only show a slice of the wide sign - anchor the
     slice so it reads "TWINS" (complete word) over the left window banners. */
  .hero__photo { background-position: 28% 32%; }
}

@media (max-width: 640px) {
  body { padding-bottom: 4.5rem; }
  .mobilebar { display: grid; }
  .diptych__grid { grid-template-columns: 1fr; }
  .diptych__half:first-child { border-right: 0; border-bottom: 2px dashed var(--border); }
  .about__inset { display: none; }
}

@media (max-width: 480px) {
  /* Status still shows in the hero ticket and hours card; the header pill
     is what pushes the row past narrow viewports. */
  .header .status-pill { display: none; }
}

@media (max-width: 360px) {
  .brand__sub { display: none; }
}