/* ==========================================================================
   IAMWYSE — Shared Stylesheet
   ========================================================================== */

@font-face {
  font-family: "Urban Jungle";
  src: url("../fonts/UrbanJungle.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brightened from the original near-black palette for readability —
     backgrounds lifted a few points so the site reads as dark/moody
     rather than pitch-black, and both muted text tones pushed lighter
     so secondary copy (descriptions, labels, meta) clears WCAG AA
     contrast against the background instead of sitting near it. */
  --bg: #12141a;
  --bg-alt: #1a1d26;
  --bg-raised: #21242f;
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.09);
  --text: #f8f9fb;
  --text-muted: #b8bdc9;
  --text-dim: #8b90a0;
  --accent: #3d5bff;
  --accent-bright: #6d87ff;
  --accent-dim: #29397a;
  --accent-glow: rgba(61, 91, 255, 0.35);
  --white-soft: #eceef3;
  --photo-filter: contrast(1.08) saturate(0.9) brightness(1) sepia(0.05);

  --font-display: "Urban Jungle", "Anton", "Arial Narrow Bold", sans-serif;
  --font-script: "Permanent Marker", cursive;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --section-pad: clamp(64px, 9vw, 120px);
  --radius: 4px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol,
ul.wp-block-list, ol.wp-block-list,
.entry-content ul, .entry-content ol { list-style: none !important; margin: 0; padding: 0; }
li { list-style: none !important; }
h1, h2, h3, h4, h5, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

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

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}

.accent { color: inherit; }

.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.05;
}
.section-head p {
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 560px;
}
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .eyebrow::before { display: none; }
.section-head.split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  max-width: none;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid rgba(255,255,255,0.85);
  color: var(--text);
  font-weight: 700;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  transition: color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  white-space: nowrap;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.btn:hover {
  color: #08090d;
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.4);
}
.btn:hover::before { transform: scaleX(1); }
.btn--solid {
  background: transparent;
  border-color: rgba(255,255,255,0.85);
}
.btn--solid::before { background: #fff; }
.btn--solid:hover { color: #08090d; border-color: #fff; }
.btn--ghost-white { border-color: rgba(255,255,255,0.85); }
.btn--sm { padding: 11px 20px; font-size: 0.7rem; }
.btn--wide { width: 100%; }
.btn svg { width: 13px; height: 13px; flex-shrink: 0; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid transparent;
  transition: gap 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.link-arrow:hover { gap: 12px; color: var(--text); border-color: var(--text); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  transition: padding 0.4s var(--ease);
}
.site-header.is-scrolled {
  padding-block: 14px;
}
.logo {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: -0.01em;
  font-style: italic;
  transform: skewX(-2deg);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 210;
}
.logo img,
.logo .custom-logo { height: 52px; width: 52px; object-fit: cover; border-radius: 50%; transition: height 0.3s var(--ease), width 0.3s var(--ease); }
.site-header.is-scrolled .logo img,
.site-header.is-scrolled .logo .custom-logo { height: 42px; width: 42px; }

.nav-primary {
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav-primary a {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav-primary a:hover,
.nav-primary a.is-active { color: var(--text); border-color: var(--accent); }

.nav-side {
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav-social {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-social a {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-muted);
  transition: all 0.3s var(--ease);
}
.nav-social a:hover { color: var(--text); border-color: var(--accent); background: var(--accent-dim); }
.nav-social svg { width: 14px; height: 14px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none;
  border: none;
  z-index: 210;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg video,
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(5,6,9,0.95) 0%, rgba(5,6,9,0.42) 38%, rgba(5,6,9,0.05) 60%, rgba(5,6,9,0.35) 100%),
    linear-gradient(100deg, rgba(5,6,9,0.75) 0%, rgba(5,6,9,0.3) 38%, transparent 62%);
}

/* Flat poster hero — just the artwork, full width, natural aspect ratio
   (no crop, no height cap). All CTAs live in the .hero-bar strip below it
   instead of floating over the image. On mobile a dedicated portrait image
   (hero-mobile.jpg, via <picture>) fills the full viewport height instead
   of showing a short letterboxed slice of the landscape poster. */
.hero--poster { display: block; min-height: auto; padding: 0 !important; }
.hero__bg--flat { position: relative; inset: auto; width: 100%; margin-top: 84px; overflow: hidden; }
.hero__bg--flat picture { display: block; width: 100%; }
.hero__bg--flat img { position: static; display: block; width: 100%; object-fit: cover; background: var(--bg); }
.hero__bg--flat::after { display: none; }
@media (max-width: 700px) {
  /* height:auto (not a forced 100vh cover-crop) so the full poster,
     including the bottom text block, is always shown uncropped — the
     image is free to run taller than the viewport and the page scrolls. */
  .hero__bg--flat img { height: auto; object-fit: contain; }
  /* Hero image runs edge-to-edge to the very top of the screen, with the
     fixed header floating transparently over it (no solid bar/seam) until
     the page is scrolled, when it regains its solid background for
     legibility over whatever content sits underneath it. */
  .hero__bg--flat { margin-top: 0; }
  .site-header:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; }
}

/* Hero action bar — 4 CTAs directly under the hero image, in the theme's
   dark/accent palette. Each button grows slightly and lights up with the
   accent glow on hover. Only "Listen to Music" and "Book IAMWYSE" (marked
   --always) show on mobile; the other two are hidden to keep the strip
   from wrapping into a cramped 2x2 grid on small screens. */
.hero-bar {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.hero-bar__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 16px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  border-right: 1px solid var(--line);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
  transform: scale(1);
}
.hero-bar__btn:last-child { border-right: none; }
.hero-bar__btn svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.3s var(--ease); }
.hero-bar__btn:hover {
  color: var(--accent-bright);
  background: var(--accent-dim);
  transform: scale(1.05);
  z-index: 1;
  box-shadow: 0 0 24px var(--accent-glow);
}
.hero-bar__btn:hover svg { transform: scale(1.12); }
.hero-bar__btn:active { transform: scale(0.97); }

/* "Listen to Music" — a VU meter animates continuously behind the label,
   like a track is playing; hovering freezes the bars mid-swing rather
   than starting the animation, since the idle state is the "live" one. */
.hero-bar__btn--music { position: relative; overflow: hidden; }
.hero-bar__btn--music svg,
.hero-bar__btn--music > span:last-child { position: relative; z-index: 1; }
.vu-meter {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  padding-bottom: 10px;
  opacity: 0.28;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.hero-bar__btn--music:hover .vu-meter { opacity: 0.16; }
.vu-meter span {
  width: 5px;
  min-height: 4px;
  border-radius: 2px;
  background: var(--accent-bright);
  animation: vu-bounce 0.9s ease-in-out infinite;
  animation-play-state: running;
}
.hero-bar__btn--music:hover .vu-meter span { animation-play-state: paused; }
.vu-meter span:nth-child(1) { height: 30%; animation-duration: 0.8s; animation-delay: -0.6s; }
.vu-meter span:nth-child(2) { height: 55%; animation-duration: 0.65s; animation-delay: -0.2s; }
.vu-meter span:nth-child(3) { height: 40%; animation-duration: 0.9s; animation-delay: -0.75s; }
.vu-meter span:nth-child(4) { height: 70%; animation-duration: 0.7s; animation-delay: -0.4s; }
.vu-meter span:nth-child(5) { height: 45%; animation-duration: 0.85s; animation-delay: -0.1s; }
@keyframes vu-bounce {
  0%, 100% { height: 15%; }
  25% { height: 75%; }
  50% { height: 35%; }
  75% { height: 92%; }
}
@media (prefers-reduced-motion: reduce) {
  .vu-meter span { animation: none; height: 40%; }
}

@media (max-width: 700px) {
  .hero-bar__inner { grid-template-columns: repeat(2, 1fr); padding: 0 var(--pad); }
  .hero-bar__btn { font-size: 0.72rem; padding: 20px 10px; gap: 8px; }
  .hero-bar__btn svg { width: 17px; height: 17px; }
  .hero-bar__btn:not(.hero-bar__btn--always) { display: none; }
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 220px var(--pad) 70px;
  max-width: var(--container);
  margin-inline: auto;
}
.hero__logo {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 10vw, 7.4rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  font-style: italic;
  transform: skewX(-2deg);
  transform-origin: left;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.hero__tag {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--white-soft);
}
.hero__type {
  margin-top: 26px;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--white-soft);
}
.hero__type-text { color: var(--text); }
.hero__type-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--white-soft);
  margin-left: 3px;
  vertical-align: -0.15em;
  animation: caret-blink 0.9s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.hero__copy {
  margin-top: 22px;
  max-width: 540px;
  color: var(--text-muted);
  font-size: 1.05rem;
}
.hero__cta {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--text-muted);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

.hero__badges {
  position: absolute;
  right: var(--pad);
  top: 34%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 250px;
}
.badge-card {
  background: rgba(8,9,13,0.72);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  font-size: 0.82rem;
}
.badge-card strong {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}
.badge-card span { color: var(--text-muted); }

.hero--page {
  min-height: 70vh;
  align-items: center;
  margin-top: 84px;
}
.hero--page .hero__content { padding-top: 60px; padding-bottom: 60px; }
@media (max-width: 700px) {
  .hero--page { margin-top: 72px; }
}

.hero__meta-top {
  position: absolute;
  top: 130px;
  right: var(--pad);
  z-index: 2;
  text-align: right;
  font-family: var(--font-script);
  font-size: 1.4rem;
  line-height: 1.35;
  color: var(--white-soft);
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
.hero__location-tag {
  position: absolute;
  bottom: 40px;
  right: var(--pad);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-soft);
}
.hero__location-tag svg { width: 14px; height: 14px; color: var(--white-soft); }

/* ---------- Light / off-white section ----------
   Used to break up long stretches of dark charcoal with an off-white
   band, per the client's request for more contrast. Redefines the
   theme's own color tokens locally (they cascade to every component —
   bento items, cards, split-feature copy, buttons, etc.) so anything
   dropped into a .section-light block gets correct light-mode colors
   automatically instead of needing per-component overrides. */
.section-light {
  --bg: #f4f1e9;
  --bg-alt: #ebe6d8;
  --bg-raised: #e2ddcb;
  --line: rgba(23, 24, 28, 0.12);
  --line-soft: rgba(23, 24, 28, 0.07);
  --text: #17181c;
  --text-muted: #57544c;
  --text-dim: #7d7a70;
  --white-soft: #17181c;
  background: var(--bg);
  color: var(--text);
}
.section-light .eyebrow { color: #6b6656; }
.section-light .eyebrow::before { background: var(--accent); }
.section-light .section-head p { color: var(--text-muted); }
.section-light .timeline__line { background: rgba(0,0,0,0.14); }
.section-light .timeline__dot { background: var(--bg); border-color: var(--accent); }
.section-light .timeline__item h4 { color: var(--text); }
.section-light .timeline__item p { color: var(--text-muted); }
.section-light .btn { color: var(--text); border-color: var(--accent); }
.section-light .btn:hover { color: #fff; }
.section-light .btn--solid { background: var(--text); color: var(--bg); border-color: var(--text); }
.section-light .btn--solid::before { background: var(--accent); }
.section-light .btn--solid:hover { color: #fff; border-color: var(--accent); }
.section-light .photo-nav-card__body p,
.section-light .track-card p,
.section-light .nav-card p,
.section-light .service-card p { color: var(--text-muted); }
.section-light .check-card:hover { border-color: rgba(23,24,28,0.5); }
.section-light .check-card.is-checked { border-color: var(--text); background: rgba(23,24,28,0.05); }
.section-light .epk-placeholder-box { border-color: rgba(23,24,28,0.25); }
.section-light .platform-row a:hover { border-color: var(--text); }

/* ---------- Photo nav card (Home quick-links) ---------- */
.photo-nav-card {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3/4;
  border: 1px solid var(--line);
}
.photo-nav-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--photo-filter);
  transition: transform 0.6s var(--ease);
}
.photo-nav-card:hover img { transform: scale(1.08); }
.photo-nav-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,6,9,0.95) 0%, rgba(5,6,9,0.55) 32%, rgba(5,6,9,0.05) 60%);
}
.photo-nav-card__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 24px;
}
.photo-nav-card__body h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.3rem; margin-bottom: 6px; }
.photo-nav-card__body p { color: var(--text-muted); font-size: 0.86rem; margin-bottom: 14px; }

/* ---------- Marquee ---------- */
.marquee {
  background: var(--accent);
  color: #05060a;
  overflow: hidden;
  white-space: nowrap;
  padding: 14px 0;
  position: relative;
  z-index: 5;
}
.marquee__track {
  display: inline-flex;
  animation: marquee 32s linear infinite;
}
.marquee__track span {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-inline: 18px;
}
.marquee__track span::after {
  content: "\2726";
  margin-left: 18px;
  opacity: 0.7;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Sections ---------- */
section { padding-block: var(--section-pad); }
.section-alt { background: var(--bg-alt); }
.section-border-t { border-top: 1px solid var(--line-soft); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Latest Release ---------- */
#latest-release { position: relative; overflow: hidden; }
/* Full-bleed, blurred + darkened cover art behind the section so the
   single's artwork reads a second time as ambient background, not
   just in the card — same "photo split into its own bg layer" trick
   as the track player header, kept off the text/content layer. */
.latest-release__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(30px) brightness(0.4) saturate(1.3);
  transform: scale(1.15);
}
#latest-release::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, var(--bg) 0%, rgba(18,20,26,0.88) 45%, rgba(18,20,26,0.55) 100%);
}
.release {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.7fr;
  gap: 56px;
  align-items: center;
}
.release__art { position: relative; }
.release__art img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7);
}
.release h3 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  text-transform: uppercase;
}
.release__meta {
  margin-top: 8px;
  color: var(--white-soft);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.release p.desc { margin-top: 18px; color: var(--text-muted); }
.release .btn { margin-top: 26px; }
.platform-list h4 {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 18px;
}
.platform-list ul { display: flex; flex-direction: column; gap: 16px; }
.platform-list a {
  display: flex; align-items: center; gap: 12px;
  font-weight: 600;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.platform-list a:hover { color: var(--text); transform: translateX(4px); }
.platform-list svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text); }

/* ---------- About / photo + text ---------- */
.split-feature {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0;
  align-items: stretch;
}
.split-feature__photo { position: relative; overflow: hidden; min-height: 420px; }
.split-feature__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--photo-filter);
}
.split-feature__body {
  background: var(--bg-alt);
  padding: clamp(32px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.split-feature__body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  text-transform: uppercase;
}
.split-feature__body p { color: var(--text-muted); }
.split-feature__stat {
  margin-left: auto;
  padding-left: 28px;
  border-left: 1px solid var(--line);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--text);
  align-self: center;
}
.split-feature--stat { grid-template-columns: 0.75fr 1fr 0.55fr; }
.split-feature--stat .split-feature__body { padding-right: 12px; }
@media (max-width: 1080px) {
  .split-feature--stat { grid-template-columns: 1fr; }
  .split-feature__stat { margin: 0; padding: 20px 0 0; border-left: none; border-top: 1px solid var(--line); }
}

/* ---------- Card Grids ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* Wider variant for grids sitting in an oversized .container (1680px) —
   bigger gap and bigger card copy so the cards actually read as larger,
   not just spaced further apart, filling out wide viewports instead of
   leaving dead space on either side of the default 1240px container. */
.grid-4--big { gap: 32px; }
.grid-4--big .photo-nav-card__body { padding: 32px; }
.grid-4--big .photo-nav-card__body h3 { font-size: 1.7rem; margin-bottom: 10px; }
.grid-4--big .photo-nav-card__body p { font-size: 1rem; margin-bottom: 18px; }
.grid-4--big .link-arrow { font-size: 0.95rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

.nav-card {
  border: 1px solid var(--line);
  padding: 30px 26px;
  background: var(--bg-alt);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.nav-card:hover { transform: translateY(-6px); border-color: var(--accent); background: var(--bg-raised); }
.nav-card__icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--text);
  margin-bottom: 22px;
  border-radius: 50%;
}
.nav-card h3 { font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase; margin-bottom: 8px; }
.nav-card p { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 18px; }

.service-card {
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg-alt);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.service-card:hover { transform: translateY(-6px); border-color: var(--accent); }
.service-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); transition: transform 0.6s var(--ease); }
.service-card:hover .service-card__media img { transform: scale(1.06); }
.service-card__body { padding: 26px; }
.service-card__body h3 { font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase; margin-bottom: 10px; }
.service-card__body p { color: var(--text-muted); font-size: 0.94rem; margin-bottom: 16px; }

/* Bento feature grid */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 20px; }
.bento--6col { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1080px) { .bento--6col { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .bento--6col { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px !important; } }
@media (max-width: 420px) { .bento--6col { grid-template-columns: 1fr; } }
.bento-item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.bento-item:hover { border-color: var(--accent); transform: translateY(-4px); }
.bento-item--wide { grid-column: span 2; }
.bento-item--tall { grid-row: span 2; }
.bento-item--featured { grid-column: span 2; grid-row: span 2; }
.bento-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); z-index: 0; opacity: 0.55; }
.bento-item::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,6,9,0.92), rgba(5,6,9,0.15));
  z-index: 1;
}
.bento-item__content { position: relative; z-index: 2; }
.bento-item__icon { width: 40px; height: 40px; margin-bottom: 14px; color: var(--text); }
.bento-item h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.15rem; margin-bottom: 6px; }
.bento-item--featured h3 { font-size: 1.7rem; }
.bento-item p { color: var(--text-muted); font-size: 0.86rem; }

/* ---------- YouTube hover-to-play card ---------- */
.yt-hover-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 1px solid var(--line);
  background: var(--bg-alt);
}
.yt-hover-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--photo-filter);
  transition: opacity 0.3s var(--ease), transform 0.5s var(--ease);
  z-index: 1;
}
.yt-hover-card:hover img { transform: scale(1.04); }
.yt-hover-card__frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  z-index: 2;
  pointer-events: none;
}
.yt-hover-card__content {
  position: absolute; inset: auto 0 0 0;
  z-index: 3;
  padding: 18px 20px;
  background: linear-gradient(to top, rgba(5,6,9,0.95), rgba(5,6,9,0.15) 70%, transparent);
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.yt-hover-card:hover .yt-hover-card__content { opacity: 0; }
.yt-hover-card__play {
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  color: #fff;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.yt-hover-card:hover .yt-hover-card__play { background: rgba(255,255,255,0.12); }
.yt-hover-card__play svg { width: 16px; height: 16px; margin-left: 2px; }
.yt-hover-card h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem; margin-bottom: 4px; }
.yt-hover-card p { color: var(--text-muted); font-size: 0.82rem; }
.yt-hover-card__link { position: absolute; inset: 0; z-index: 4; }
@media (prefers-reduced-motion: reduce) { .yt-hover-card__frame { display: none; } }

/* ---------- Testimonials / carousel ---------- */
.stars { display: flex; gap: 3px; color: var(--text); }
.stars svg { width: 16px; height: 16px; }
.rating-line { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 10px; }
.rating-line strong { font-family: var(--font-display); font-size: 1.4rem; }

.carousel { overflow: hidden; margin-top: 48px; }
.carousel__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.testi-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(280px, 32vw, 380px);
  border: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.testi-card p.quote { color: var(--white-soft); font-size: 1rem; }
.testi-card .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testi-card .who .avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  color: var(--text);
}
.testi-card .who strong { display: block; font-size: 0.9rem; }
.testi-card .who span { color: var(--text-dim); font-size: 0.8rem; }
.carousel__controls { display: flex; gap: 14px; justify-content: center; margin-top: 30px; }
.carousel__btn {
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.carousel__btn:hover { border-color: var(--text); color: var(--text); }

/* ---------- Why us list ---------- */
.why-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; margin-top: 40px; }
.why-item { display: flex; gap: 18px; }
.why-item__num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  -webkit-text-stroke: 1px rgba(255,255,255,0.5);
  color: transparent;
  flex-shrink: 0;
  width: 46px;
}
.why-item h4 { font-size: 1.05rem; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.02em; }
.why-item p { color: var(--text-muted); font-size: 0.92rem; }

/* ---------- Gallery ---------- */
.gallery-filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.gallery-filters button {
  padding: 10px 20px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  transition: all 0.3s var(--ease);
}
.gallery-filters button:hover { color: var(--text); border-color: var(--accent); }
.gallery-filters button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-grid figure { position: relative; overflow: hidden; aspect-ratio: 1/1; border: 1px solid var(--line); }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); transition: transform 0.6s var(--ease); }
.gallery-grid figure:hover img { transform: scale(1.08); }
.gallery-grid figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(5,6,9,0.92), transparent);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text);
}

/* ---------- FAQ Accordion ---------- */
.accordion { border-top: 1px solid var(--line); max-width: 820px; }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-item__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 26px 4px;
  background: none; border: none; color: var(--text);
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
}
.accordion-item__q .plus {
  width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  position: relative;
}
.accordion-item__q .plus::before,
.accordion-item__q .plus::after {
  content: "";
  position: absolute;
  background: var(--text);
  transition: transform 0.35s var(--ease);
}
.accordion-item__q .plus::before { left: 50%; top: 6px; bottom: 6px; width: 1.5px; transform: translateX(-50%); }
.accordion-item__q .plus::after { top: 50%; left: 6px; right: 6px; height: 1.5px; transform: translateY(-50%); }
.accordion-item.is-open .plus::before { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.accordion-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.accordion-item__a div { padding: 0 4px 26px; color: var(--text-muted); max-width: 640px; }
.accordion-item.is-open .accordion-item__a { max-height: 260px; }

/* Moody, painterly press photo as a full-bleed backdrop for the
   "Journey" timeline — darkened/vignetted on all sides so the default
   (dark-theme) timeline colors stay readable everywhere, while the
   photo itself stays legible through the middle of the section. */
.journey-bg { position: relative; overflow: hidden; }
.journey-bg__photo { position: absolute; inset: 0; z-index: 0; }
.journey-bg__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% center;
  filter: blur(5px) brightness(0.6) saturate(1.05);
  transform: scale(1.06);
}
.journey-bg::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(10,11,15,0.78) 0%, rgba(10,11,15,0.5) 42%, rgba(10,11,15,0.85) 100%),
    linear-gradient(90deg, rgba(10,11,15,0.6) 0%, rgba(10,11,15,0.15) 45%, rgba(10,11,15,0.65) 100%);
}
.journey-bg .container { position: relative; z-index: 1; }

/* Logo variant: instead of a cropped/blurred photo, the LikeWyse
   Productions mark sits large and centered, faded out toward every
   edge via a radial mask so it dissolves into the section's dark
   background like a watermark rather than a hard-edged image. */
.journey-bg--logo .journey-bg__photo img {
  position: absolute;
  inset: 0;
  object-fit: contain;
  object-position: center;
  width: 85%;
  height: 85%;
  margin: auto;
  filter: none;
  transform: none;
  opacity: 0.6;
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, black 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, black 35%, transparent 78%);
}
.journey-bg--logo::after {
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(10,11,15,0.35) 0%, rgba(10,11,15,0.75) 70%, rgba(10,11,15,0.92) 100%);
}

/* ---------- Timeline ---------- */
.timeline { position: relative; margin-top: 56px; }
.timeline__line { position: absolute; top: 14px; left: 0; right: 0; height: 1px; background: var(--line); }
.timeline__line-fill { position: absolute; top: 0; left: 0; height: 1px; background: var(--accent); width: 100%; }
.timeline__items { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; }
.timeline__item { position: relative; padding-top: 34px; }
.timeline__dot {
  position: absolute; top: 8px; left: 0;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent);
}
.timeline__item h4 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.timeline__item p { color: var(--text-muted); font-size: 0.86rem; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.field input, .field select, .field textarea {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 14px 16px;
  font-size: 0.95rem;
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field input[type="date"] { color-scheme: dark; }
.field textarea { resize: vertical; min-height: 120px; }
.form-panel {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: clamp(24px, 3.5vw, 40px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.checkbox-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.checkbox-grid--2col { grid-template-columns: repeat(2, 1fr); }
.check-card {
  border: 1px solid var(--line);
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  font-size: 0.82rem;
  font-weight: 600;
}
.check-card input { display: none; }
.check-card:hover { border-color: rgba(255,255,255,0.7); }
.check-card.is-checked { border-color: #fff; background: rgba(255,255,255,0.06); color: var(--text); }
.check-card svg { display: block; margin: 0 auto 10px; width: 26px; height: 26px; }

.pricing-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.pricing-table td { padding: 14px 4px; border-bottom: 1px solid var(--line-soft); font-size: 0.92rem; }
.pricing-table td:last-child { text-align: right; color: var(--text); font-weight: 700; }

.package-card {
  border: 1px solid var(--line);
  padding: 30px 26px;
  background: var(--bg-alt);
  transition: all 0.35s var(--ease);
}
.package-card.is-featured { border-color: var(--accent); background: var(--bg-raised); position: relative; }
.package-card.is-featured::before {
  content: "MOST BOOKED";
  position: absolute; top: -12px; left: 26px;
  background: var(--accent);
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em;
  padding: 5px 12px;
}
.package-card h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.2rem; }
.package-card .price { font-family: var(--font-display); font-size: 2.1rem; color: var(--text); margin: 12px 0; }
.package-card .price--text { font-size: 1.3rem; letter-spacing: 0.01em; }
a.price { display: block; text-decoration: none; transition: color 0.25s var(--ease); }
a.price:hover { color: var(--accent-bright); }
.package-card ul { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 24px; }
.package-card li { font-size: 0.88rem; color: var(--text-muted); display: flex; gap: 10px; align-items: center; }
.package-card li svg { width: 14px; height: 14px; color: var(--text); flex-shrink: 0; }

/* ---------- CTA / Newsletter ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: 110px;
  text-align: center;
}
.cta-band__bg { position: absolute; inset: 0; z-index: 0; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
.cta-band__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,7,10,0.97), rgba(6,7,10,0.72)); }
.cta-band__content { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; padding-inline: var(--pad); }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4rem); text-transform: uppercase; }
.cta-band .newsletter-form { margin-top: 30px; display: flex; gap: 12px; max-width: 460px; margin-inline: auto; }
.newsletter-form input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  color: #fff;
  padding: 15px 18px;
  border-radius: var(--radius);
}
.newsletter-form input:focus { outline: none; border-color: var(--accent); }

/* Split CTA (stay connected style) */
.stay-connected {
  position: relative;
  overflow: hidden;
  padding-block: 90px;
}
.stay-connected__bg { position: absolute; inset: 0; z-index: 0; }
.stay-connected__bg img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); }
.stay-connected__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6,7,10,0.96) 30%, rgba(6,7,10,0.55) 100%); }
.stay-connected__inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.stay-connected h2 { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.6rem); text-transform: uppercase; }
.stay-connected__form-wrap p { color: var(--text-muted); margin-bottom: 16px; }
.stay-connected .newsletter-form { max-width: 420px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line-soft); padding-block: 50px 30px; background: var(--bg); }
.site-footer__top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; padding-bottom: 30px; border-bottom: 1px solid var(--line-soft); }
.footer-nav { display: flex; gap: 30px; flex-wrap: wrap; }
.footer-nav a { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.footer-nav a:hover { color: var(--text); }
.site-footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; flex-wrap: wrap; gap: 14px; color: var(--text-dim); font-size: 0.8rem; }
.site-footer__bottom .loc { display: flex; align-items: center; gap: 6px; }
.site-footer__bottom svg { width: 14px; height: 14px; }
.footer-review-link { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; transition: color 0.25s var(--ease); }
.footer-review-link:hover { color: var(--accent-bright); }

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0 !important; }
.text-center { text-align: center; }
.show-mobile { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-item--featured, .bento-item--wide { grid-column: span 2; }
  .release { grid-template-columns: 1fr; gap: 36px; }
  .why-list { grid-template-columns: 1fr; }
  .timeline__items { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
}

@media (max-width: 860px) {
  .nav-primary, .nav-social { display: none; }
  .nav-toggle { display: flex; }
  .nav-side { gap: 14px; }
  .split-feature { grid-template-columns: 1fr; }
  .split-feature__photo { min-height: 320px; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .checkbox-grid { grid-template-columns: repeat(2, 1fr); }
  .stay-connected__inner { flex-direction: column; align-items: flex-start; }
  .hero__badges { position: static; margin-top: 30px; flex-direction: row; flex-wrap: wrap; max-width: none; }
  .hide-mobile { display: none !important; }
  .show-mobile { display: block; }
  .timeline__items { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .grid-4 { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .bento-item--featured, .bento-item--wide, .bento-item--tall { grid-column: span 1; grid-row: span 1; }
  .gallery-grid { grid-template-columns: 1fr; }
  .checkbox-grid { grid-template-columns: 1fr; }
  .timeline__items { grid-template-columns: 1fr; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  section { padding-block: 64px; }
}

/* Mobile nav drawer — full-viewport height so translateY(-100%) fully
   clears it off-screen when closed (a shorter box here would leave a
   sliver of content peeking in at the top, since the translate is a
   percentage of the element's own height). padding-top instead pushes
   the drawer's own content below the fixed header once it's open. */
.mobile-nav {
  position: fixed; inset: 0;
  background: rgba(18,20,26,0.98);
  z-index: 190;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 30px;
  overflow-y: auto;
  padding: 30px 0;
  padding-top: 104px;
  transform: translateY(-100%);
  transition: transform 0.5s var(--ease);
}
.mobile-nav.is-open { transform: translateY(0); }
.mobile-nav a { font-family: var(--font-display); font-size: 1.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text); }
.mobile-nav .nav-social { margin-top: 20px; }

/* ---------- Music page: track grid + platform row ---------- */
.track-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.track-grid--big { gap: 32px; }
.track-grid--big .track-card h4 { font-size: 1.15rem; margin-top: 18px; }
.track-card { display: block; }
.track-card__art { position: relative; overflow: hidden; aspect-ratio: 1/1; border: 1px solid var(--line); background: var(--bg-alt); }
.track-card__art img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); transition: transform 0.5s var(--ease); }
.track-card:hover .track-card__art img { transform: scale(1.06); }
.track-card h4 { margin-top: 14px; font-size: 0.95rem; font-weight: 700; }
.track-card span.meta { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--text-dim); }
.platform-row { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.platform-row a { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; color: var(--text); transition: border-color 0.3s var(--ease); }
.platform-row a:hover { border-color: #fff; }
.platform-row svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .track-grid { grid-template-columns: repeat(2, 1fr); } }

/* Reusable charcoal + crown-pattern section background (introduced on
   the Music page's Studio Previews section, reused anywhere else on
   the site that wants the same branded texture — e.g. the About page
   bio). Seamless repeating tile of the crown/wordmark logo scattered
   in a mix of its original blue/white color and plain grayscale,
   faded into the charcoal via a radial mask so it reads as subtle
   texture rather than a hard-tiled logo wall. */
.crown-pattern-bg {
  --bg: #26282f;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 82% 10%, rgba(61,91,255,0.14) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, #2c2f38 100%);
}
.crown-pattern-bg__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 340px;
  opacity: 0.9;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, black 0%, black 55%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 0%, black 0%, black 55%, transparent 100%);
}
@media (max-width: 700px) {
  .crown-pattern-bg__art { background-size: 240px; opacity: 0.7; }
}

/* Solid, blurred panel behind long-form body copy dropped onto a
   .crown-pattern-bg section, so the pattern reads around the edges
   while the text itself sits on a readable, near-opaque surface. */
.bio-panel {
  background: rgba(15,16,21,0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 40px 44px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.5);
}
@media (max-width: 700px) {
  .bio-panel { padding: 28px 22px; border-radius: 14px; }
}

/* ---------- Track player (studio previews playlist) ----------
   Spotify-style artist-page layout: a header with a big "play all"
   button, a numbered track list, and a persistent "now playing" bar
   pinned to the bottom of the card with transport controls + a shared
   scrub bar. Deliberately dark + self-contained regardless of the
   section it sits in (including .section-light, which is off-white)
   — it defines its own local --tp-* tokens instead of using the
   theme's shared --bg/--text/etc, so it always reads as a dark,
   high-contrast "device" floating on the page. */
.track-player {
  --tp-bg: #ced3da;
  --tp-bg-raised: #e6e9ee;
  --tp-line: rgba(10,12,20,0.12);
  --tp-text: #12141c;
  --tp-text-muted: #454b59;
  --tp-text-dim: #5c6373;
  --tp-accent: #2947d6;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(41,71,214,0.10) 0%, transparent 55%),
    linear-gradient(165deg, #e2e5eb 0%, #b4bac4 100%);
  border: 1px solid rgba(10,12,20,0.1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px -12px rgba(10,12,20,0.28), 0 2px 0 rgba(255,255,255,0.6) inset;
  color: var(--tp-text);
}

/* -- Header: big play-all circle + track count -- */
.track-player__header {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 28px;
  border-bottom: 1px solid var(--tp-line);
  transition: padding 0.4s var(--ease);
}
/* When a track is loaded, the header "fills" with a blurred, darkened
   version of that track's cover art as a full-bleed background, a crisp
   thumbnail appears next to the play button, and the heading swaps from
   the generic playlist title to the track that's playing. */
.track-player__header-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.15);
  filter: blur(24px) brightness(0.55) saturate(1.4);
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
  z-index: 0;
}
.track-player__header::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(8,9,13,0.55) 0%, rgba(8,9,13,0.15) 60%);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.track-player__header.has-track { padding: 34px 28px; }
.track-player__header.has-track .track-player__header-bg,
.track-player__header.has-track::after { opacity: 1; }
.track-player__header.has-track .track-player__header-bg { transform: scale(1); }
.track-player__playall,
.track-player__header-art,
.track-player__headinfo { position: relative; z-index: 1; }
.track-player__header-art {
  flex-shrink: 0;
  width: 0;
  height: 84px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(10,12,20,0.5);
  transition: width 0.4s var(--ease);
}
.track-player__header.has-track .track-player__header-art { width: 84px; }
.track-player__header-art img { width: 84px; height: 100%; object-fit: cover; display: block; }
.track-player__playall {
  flex-shrink: 0;
  width: 68px; height: 68px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--tp-accent), #5068e0);
  color: #fff;
  box-shadow: 0 8px 24px rgba(41,71,214,0.4);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.track-player__playall:hover { transform: scale(1.06); box-shadow: 0 10px 30px rgba(41,71,214,0.55); }
.track-player__playall:active { transform: scale(0.96); }
.track-player__playall svg { width: 28px; height: 28px; margin-left: 2px; }
.track-player__playall .icon-pause { display: none; margin-left: 0; }
.track-player__playall.is-playing .icon-play { display: none; }
.track-player__playall.is-playing .icon-pause { display: block; }
.track-player__headinfo h3 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.55rem; letter-spacing: 0.01em; color: var(--tp-text); transition: font-size 0.3s var(--ease), color 0.3s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.track-player__headinfo span { display: block; margin-top: 4px; font-size: 0.92rem; color: var(--tp-text-muted); transition: color 0.3s var(--ease); }
.track-player__header.has-track .track-player__headinfo h3 { font-size: 1.85rem; color: #fff; }
.track-player__header.has-track .track-player__headinfo span {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* -- Track list -- */
.track-player__list { padding: 8px 0; }
.track-player__colhead {
  display: grid;
  grid-template-columns: 44px 60px 1fr 80px;
  gap: 16px;
  align-items: center;
  padding: 6px 28px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tp-text-dim);
}
.track-player__colhead .col-time { text-align: right; }
.track-player__row {
  position: relative;
  display: grid;
  grid-template-columns: 44px 60px 1fr 80px;
  gap: 16px;
  align-items: center;
  padding: 14px 28px;
  transition: background 0.2s var(--ease);
  cursor: pointer;
}
.track-player__row::before {
  content: "";
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--tp-accent), #5068e0);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.3s var(--ease);
}
.track-player__row.is-active::before { transform: scaleY(1); }
.track-player__row:hover { background: rgba(10,12,20,0.05); }
.track-player__row.is-active { background: linear-gradient(90deg, rgba(41,71,214,0.14) 0%, rgba(41,71,214,0.02) 70%); }
.track-player__row.is-active .track-player__title { color: var(--tp-accent); }

.track-player__num {
  position: relative;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  color: var(--tp-text-dim);
  font-variant-numeric: tabular-nums;
}
.track-player__num .num { transition: opacity 0.15s var(--ease); }
.track-player__playbtn {
  position: absolute; inset: 0;
  border: none;
  background: none;
  color: var(--tp-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
.track-player__row:hover .track-player__num .num { opacity: 0; }
.track-player__row:hover .track-player__playbtn { opacity: 1; }
.track-player__row.is-active .track-player__num .num { opacity: 0; }
.track-player__row.is-active .track-player__playbtn { opacity: 1; color: var(--tp-accent); }
.track-player__playbtn svg { width: 16px; height: 16px; }
.track-player__playbtn .icon-pause { display: none; }
.track-player__row.is-playing .track-player__playbtn .icon-play { display: none; }
.track-player__row.is-playing .track-player__playbtn .icon-pause { display: block; }
.track-player__eq { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 3px; }
.track-player__row.is-playing:not(:hover) .track-player__num .num { display: none; }
.track-player__row.is-playing:not(:hover) .track-player__eq { display: flex; }
.track-player__eq span { width: 3px; height: 60%; background: var(--tp-accent); border-radius: 1px; box-shadow: 0 0 6px rgba(41,71,214,0.7); animation: vu-bounce 0.9s ease-in-out infinite; }
.track-player__eq span:nth-child(1) { animation-duration: 0.8s; animation-delay: -0.6s; }
.track-player__eq span:nth-child(2) { animation-duration: 0.65s; animation-delay: -0.2s; }
.track-player__eq span:nth-child(3) { animation-duration: 0.9s; animation-delay: -0.75s; }

.track-player__art {
  width: 60px; height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--tp-bg-raised);
  box-shadow: 0 4px 12px rgba(10,12,20,0.28);
}
.track-player__art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.track-player__info { min-width: 0; }
.track-player__title { font-weight: 700; font-size: 1.05rem; color: var(--tp-text); display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-player__title span.feat { font-weight: 500; color: var(--tp-text-muted); font-size: 0.88rem; }
.track-player__now-playing { display: none; align-items: center; gap: 6px; margin-top: 3px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tp-accent); }
.track-player__row.is-playing .track-player__now-playing { display: flex; }
.track-player__now-playing .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--tp-accent); box-shadow: 0 0 8px var(--tp-accent); animation: vu-bounce-dot 1s ease-in-out infinite; }
@keyframes vu-bounce-dot { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.track-player__time { font-size: 0.9rem; color: var(--tp-text-dim); font-variant-numeric: tabular-nums; text-align: right; }

/* -- Persistent bottom now-playing bar -- */
.track-player__nowbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 28px;
  border-top: 1px solid var(--tp-line);
  background: rgba(10,12,20,0.06);
}
.track-player__nowbar-track { display: flex; align-items: center; gap: 14px; width: 250px; flex-shrink: 0; }
.track-player__nowbar-art { width: 64px; height: 64px; border-radius: 6px; overflow: hidden; flex-shrink: 0; box-shadow: 0 4px 12px rgba(10,12,20,0.3); }
.track-player__nowbar-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.track-player__nowbar-info { min-width: 0; }
.track-player__nowbar-title { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-player__nowbar-sub { margin-top: 2px; font-size: 0.82rem; color: var(--tp-text-muted); }
.track-player__nowbar-controls { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.track-player__transport { display: flex; align-items: center; gap: 20px; }
.track-player__prev, .track-player__next {
  border: none; background: none; color: var(--tp-text-muted); cursor: pointer;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  transition: color 0.2s var(--ease);
}
.track-player__prev:hover, .track-player__next:hover { color: var(--tp-text); }
.track-player__prev svg, .track-player__next svg { width: 18px; height: 18px; }
.track-player__nowbar-play {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--tp-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(41,71,214,0.4);
  transition: transform 0.2s var(--ease);
}
.track-player__nowbar-play:hover { transform: scale(1.08); }
.track-player__nowbar-play svg { width: 18px; height: 18px; margin-left: 1px; }
.track-player__nowbar-play .icon-pause { display: none; margin-left: 0; }
.track-player__nowbar-play.is-playing .icon-play { display: none; }
.track-player__nowbar-play.is-playing .icon-pause { display: block; }
.track-player__scrub { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 480px; }
.track-player__cur, .track-player__dur { font-size: 0.78rem; color: var(--tp-text-dim); font-variant-numeric: tabular-nums; flex-shrink: 0; width: 38px; }
.track-player__dur { text-align: left; }
.track-player__cur { text-align: right; }
.track-player__nowbar .track-player__bar { flex: 1; height: 4px; background: rgba(10,12,20,0.14); border-radius: 2px; cursor: pointer; overflow: hidden; }
.track-player__nowbar .track-player__bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--tp-accent), #5068e0); border-radius: 2px; transition: width 0.1s linear; box-shadow: 0 0 10px rgba(41,71,214,0.5); }

@media (max-width: 700px) {
  .track-player__colhead { display: none; }
  .track-player__header { padding: 20px; }
  .track-player__row { grid-template-columns: 36px 50px 1fr 60px; gap: 10px; padding: 12px 16px; }
  .track-player__art { width: 50px; height: 50px; }
  .track-player__title { font-size: 0.95rem; }
  .track-player__title span.feat { display: block; }
  .track-player__nowbar { flex-direction: column; align-items: stretch; padding: 14px 16px; gap: 10px; }
  .track-player__nowbar-track { width: 100%; }
  .track-player__scrub { max-width: none; }
}

/* ---------- Home splash intro ---------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
.splash__ring {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.splash__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  transform: scale(0.6);
  animation: splash-ring 1.3s var(--ease) 0.05s forwards;
}
.splash__logo {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.7);
  animation: splash-logo-in 0.9s var(--ease) 0.2s forwards;
  box-shadow: 0 0 50px var(--accent-glow);
}
.splash__word {
  font-family: var(--font-display);
  font-style: italic;
  transform-origin: center;
  letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  color: var(--text);
  opacity: 0;
  transform: translateY(10px) skewX(-2deg);
  animation: splash-word-in 0.7s var(--ease) 0.6s forwards;
}
.splash__tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-bright);
  opacity: 0;
  animation: splash-word-in 0.7s var(--ease) 0.85s forwards;
}
.splash.is-hiding { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes splash-ring {
  0% { opacity: 0; transform: scale(0.6); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.35); }
}
@keyframes splash-logo-in { to { opacity: 1; transform: scale(1); } }
@keyframes splash-word-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .splash__ring::before, .splash__logo, .splash__word, .splash__tag { animation: none; opacity: 1; transform: none; }
}

/* ---------- Two-column page layout (Contact, Booking) ---------- */
.two-col-grid { display: grid; grid-template-columns: var(--col-ratio, 1fr 1fr); gap: 56px; }
@media (max-width: 860px) {
  .two-col-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Track grid: last mobile step ---------- */
@media (max-width: 560px) {
  .track-grid { grid-template-columns: 1fr; }
}

/* ---------- Hero: tighten for small phones ---------- */
@media (max-width: 480px) {
  .hero__content { padding-top: 160px; padding-bottom: 50px; }
  .hero__logo { font-size: clamp(2.6rem, 15vw, 4.2rem) !important; }
  .hero--page .hero__content { padding-top: 130px; }
  .hero__tag { letter-spacing: 0.18em; font-size: 0.72rem; }
  .hero__meta-top { display: none; }
  .hero__location-tag { bottom: 20px; font-size: 0.7rem; }
  .badge-card { max-width: 200px; font-size: 0.76rem; }
  .cta-band { padding-block: 70px; }
  .stay-connected { padding-block: 60px; }
  .stay-connected__inner h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .splash__ring { width: 92px; height: 92px; }
  .splash__logo { width: 68px; height: 68px; }
  .btn { padding: 14px 24px; font-size: 0.74rem; }
}

/* ---------- Buttons/CTAs: never overflow on narrow screens ---------- */
@media (max-width: 600px) {
  .hero__cta .btn,
  .cta-band .hero__cta .btn { width: 100%; }
  .platform-list ul, .platform-row { flex-wrap: wrap; }
}

/* ---------- EPK ---------- */
.epk-toggle-wrap { display: flex; justify-content: center; padding-top: 40px; }
.epk-toggle { display: inline-flex; border: 1px solid var(--line); }
.epk-toggle__btn {
  padding: 12px 28px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.epk-toggle__btn.is-active { background: var(--accent); color: #fff; }
.epk-toggle__btn:not(.is-active):hover { color: var(--text); }

.epk-stats { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); }
.epk-stat {
  flex: 1 1 180px;
  padding: 26px 20px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.epk-stat:last-child { border-right: none; }
.epk-stat strong { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--text); }
.epk-stat span { display: block; margin-top: 6px; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.epk-stat--placeholder strong { color: var(--text-dim); }
.epk-stat--placeholder em { display: block; font-style: normal; color: var(--accent-bright); font-size: 0.68rem; margin-top: 2px; }
.epk-stats-note { margin-top: 16px; font-size: 0.78rem; color: var(--text-dim); text-align: center; }

.epk-placeholder-box {
  border: 1px dashed rgba(255,255,255,0.3);
  padding: 26px 28px;
  max-width: 640px;
}
.epk-placeholder-box strong { color: var(--accent-bright); }

.epk-venue-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 32px;
  max-width: 900px;
}
.epk-venue-list li {
  padding: 16px 20px;
  border: 1px solid var(--line);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
@media (max-width: 700px) {
  .epk-venue-list { grid-template-columns: 1fr; }
}

/* Cleaner, more legible EPK copy: bolder weight + soft white glow so the
   bio text and stat lines read clearly over photos/dark backgrounds. */
.epk-web-view .split-feature__body p,
.epk-web-view .cta-band__content p {
  font-weight: 600;
  color: var(--text);
  text-shadow: 0 0 16px rgba(255,255,255,0.22);
}
.epk-web-view .split-feature__body p strong { color: var(--accent-bright); }

/* Booking inquiry page: lettering was blending into the dark crown-pattern
   background, so bump weight/contrast on labels, checkboxes and package text. */
.crown-pattern-bg .eyebrow { color: var(--text); }
.crown-pattern-bg .field label { color: var(--text); font-weight: 800; }
.crown-pattern-bg .check-card { color: var(--text); font-weight: 700; }
.crown-pattern-bg .package-card li { color: var(--text); font-weight: 500; }
.crown-pattern-bg .package-card h3 { color: var(--text); }

@media (max-width: 700px) {
  .epk-stat { flex: 1 1 50%; border-bottom: 1px solid var(--line); }
  .epk-toggle__btn { padding: 12px 18px; font-size: 0.7rem; }
}

/* ---------- EPK print-only layout ----------
   Hidden on screen; shown only inside @media print, replacing the web
   view entirely so the PDF is a clean one-pager. Styled to match the
   site's own dark/accent branding rather than plain black-on-white —
   print-color-adjust:exact is required or browsers silently drop the
   background colors when printing/saving to PDF. */
.epk-print-only { display: none; }

.epk-print__header { display: flex; align-items: center; gap: 20px; border-bottom: 2px solid var(--accent); padding-bottom: 16px; margin-bottom: 20px; }
.epk-print__logo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); }
.epk-print__header h1 { font-family: var(--font-display); font-size: 2rem; letter-spacing: 0.02em; margin: 0; color: #fff; text-transform: uppercase; }
.epk-print__role { margin: 4px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--accent-bright); }
.epk-print__contact { margin: 4px 0 0; font-size: 0.78rem; color: #a7abb6; }

.epk-print__stats { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.epk-print__stats td { text-align: center; padding: 12px 6px; border: 1px solid var(--line); width: 20%; background: var(--bg-alt); }
.epk-print__stats strong { display: block; font-family: var(--font-display); font-size: 1.4rem; color: var(--accent-bright); }
.epk-print__stats span { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: #a7abb6; margin-top: 4px; }

.epk-print__section { margin-bottom: 20px; break-inside: avoid; }
.epk-print__section h2 { font-family: var(--font-display); font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-bright); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 8px; }
.epk-print__section p { font-size: 0.85rem; line-height: 1.55; margin: 0 0 6px; color: #d7d9de; }
.epk-print__placeholder { color: #767b88; font-style: italic; }

.epk-print__footer { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 20px; font-size: 0.7rem; color: #767b88; }

@media print {
  @page { margin: 16mm 16mm; background: var(--bg); }
  html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact; }
  .epk-web-view, .site-header, .mobile-nav, .site-footer, .splash, .no-print, .nav-toggle { display: none !important; }
  body { background: var(--bg) !important; color: var(--text) !important; }
  .epk-print-only { display: block !important; color: var(--text); background: var(--bg); }
  .epk-print-only * { box-shadow: none !important; }
  a { color: var(--accent-bright) !important; text-decoration: none !important; }
}

/* ---------- Booking rate calculator ---------- */
.rate-calc__grid { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; margin-top: 12px; }
.rate-calc__items { display: flex; flex-direction: column; gap: 12px; }

.rate-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.rate-item:hover { border-color: rgba(255,255,255,0.35); }
.rate-item.is-checked { border-color: var(--accent-bright); background: var(--accent-dim); }
.rate-item input { display: none; }

.rate-item__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  position: relative;
}
.rate-item.is-checked .rate-item__check { border-color: var(--accent-bright); background: var(--accent-bright); }
.rate-item.is-checked .rate-item__check::after {
  content: "";
  position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid var(--bg); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.rate-item__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.rate-item__title { font-weight: 700; color: var(--text); font-size: 0.95rem; }
.rate-item__title em { font-style: normal; color: var(--text-muted); font-weight: 500; }
.rate-item__desc { font-size: 0.8rem; color: var(--text-dim); }
.rate-item__price { flex-shrink: 0; font-weight: 700; color: var(--text); white-space: nowrap; }
.rate-item--quote .rate-item__price { color: var(--text-muted); font-weight: 600; font-size: 0.85rem; }

.rate-item--stepper { cursor: default; }
.rate-stepper { display: flex; align-items: center; gap: 12px; }
.rate-stepper__btn {
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.rate-stepper__btn:hover { border-color: var(--accent-bright); background: var(--accent-dim); }
.rate-stepper__count { min-width: 18px; text-align: center; font-weight: 700; color: var(--text); }

.rate-summary {
  position: sticky;
  top: 100px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  padding: 28px 26px;
}
.rate-summary__label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }
.rate-summary__total { font-family: var(--font-body); font-weight: 800; font-size: 2.4rem; color: var(--text); margin: 10px 0 6px; }
.rate-summary__note { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 16px; }
.rate-summary__list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.rate-summary__list li { font-size: 0.82rem; color: var(--text-muted); display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line-soft); padding-bottom: 8px; }
.rate-summary__list li span:last-child { color: var(--text); font-weight: 600; white-space: nowrap; }
#rate-cta:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 860px) {
  .rate-calc__grid { grid-template-columns: 1fr; }
  .rate-summary { position: static; }
  .rate-item { flex-wrap: wrap; }
  .rate-item__price { margin-left: 36px; }
}