@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

/* ============ Design Tokens ============ */
:root {
  --red-deep: #5C0F1C;
  --red-primary: #B31029;
  --red-bright: #E2142F;
  --gold: #E8A917;
  --gold-soft: #F6D998;
  --white: #FFFFFF;
  --cream: #F7F0E5;
  --ink: #201A18;
  --ink-muted: #6E6560;
  --border: #EDE3D6;
  --shadow-sm: 0 2px 8px rgba(32, 26, 24, 0.06);
  --shadow-md: 0 10px 30px rgba(92, 15, 28, 0.12);
  --shadow-lg: 0 20px 60px rgba(92, 15, 28, 0.18);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 420ms;
  --container-w: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: 'Source Serif 4', serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 8%, rgba(179,16,41,0.05), transparent 50%),
    radial-gradient(circle at 12% 95%, rgba(232,169,23,0.07), transparent 50%),
    var(--cream);
  background-attachment: fixed;
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.no-scroll { height: 100dvh; overflow: hidden; }

/* Content pages: on mobile, stay locked to one screen with no scrolling until
   a card is opened (mobile-card-lock), then unlock so the expanded content can
   be reached. Contact/More Information have no card, so they stay locked
   permanently (mobile-static-lock) — their content is sized to always fit. */
@media (max-width: 700px) {
  body.mobile-card-lock, body.mobile-static-lock { height: 100dvh; overflow: hidden; }
  body.mobile-card-lock.cards-open,
  body.mobile-static-lock.form-invalid-open { height: auto; min-height: 100dvh; overflow-y: auto; }
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: 'Source Serif 4', serif;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700; }

p { color: var(--ink-muted); }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 56px 0; }

@media (max-width: 768px) {
  section { padding: 36px 0; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Source Serif 4', serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-primary);
  margin-bottom: 0;
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--gold);
  display: inline-block;
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  font-family: 'Source Serif 4', serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  min-height: 40px;
  touch-action: manipulation;
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: linear-gradient(135deg, var(--red-bright), var(--red-primary));
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.btn-gold {
  background: var(--gold);
  color: var(--red-deep);
  box-shadow: 0 10px 30px rgba(232, 169, 23, 0.28);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(232, 169, 23, 0.36); }

.btn-outline-dark {
  background: transparent;
  color: var(--red-primary);
  border-color: var(--red-primary);
}
.btn-outline-dark:hover { background: var(--red-primary); color: var(--white); }

/* Liquid glass button — ported from becher2028's .hero-btn, recolored maroon */
.btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: 'Source Serif 4', serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--red-deep);
  background: rgba(179, 16, 41, 0.22);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1.5px solid rgba(179, 16, 41, 0.55);
  padding: 10px 28px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 40px;
  text-align: center;
  line-height: 1.5;
  box-shadow: 0 6px 24px rgba(179, 16, 41, 0.16);
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.btn-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(179, 16, 41, 0.18) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out);
}
.btn-glass:hover::before { transform: translateX(100%); }
.btn-glass:hover {
  background: rgba(179, 16, 41, 0.2);
  border-color: rgba(179, 16, 41, 0.65);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(179, 16, 41, 0.18);
}
.btn-glass span { position: relative; z-index: 1; }

/* ============ Navbar ============ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  background: rgba(255, 255, 255, 0.0);
  transition: box-shadow var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out);
  /* Forces its own compositing layer so iOS Safari doesn't briefly misplace
     this fixed + backdrop-filter element (causing it to overlap page content)
     when the address bar collapses at the start of a scroll. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
  padding: 10px 0;
}

/* Home page: keep the navbar transparent even after scrolling, everywhere
   else it turns opaque white as usual. */
body.home .navbar.scrolled {
  background: rgba(255, 255, 255, 0);
  backdrop-filter: none;
  box-shadow: none;
}

.navbar .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.navbar .nav-links { grid-column: 1; justify-self: start; }
.navbar .brand { grid-column: 2; justify-self: center; }
.navbar .nav-cta { grid-column: 3; justify-self: end; }

.brand { position: relative; display: flex; align-items: center; justify-content: center; }
.brand img { height: 94px; width: auto; transition: height var(--dur-base) var(--ease-out); }
.navbar.scrolled .brand img { height: 72px; }

.nav-links { display: none; align-items: center; gap: 36px; }
.nav-links a {
  font-family: 'Source Serif 4', serif;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink);
  position: relative;
  padding: 4px 0;
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--red-primary);
  transition: width var(--dur-base) var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--red-primary); }

.nav-cta { display: flex; align-items: center; gap: 14px; }

.nav-toggle {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  display: flex;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  z-index: 101;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); position: relative; transition: background var(--dur-fast) var(--ease-out); }
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 24px; height: 2px; background: var(--ink);
  transition: transform var(--dur-fast) var(--ease-out), top var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }

body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); background: var(--ink); }
body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); background: var(--ink); }

body.nav-open .nav-links {
  display: flex;
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(82vw, 360px);
  background: linear-gradient(165deg, var(--white) 0%, var(--cream) 100%);
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 100px 32px 32px;
  box-shadow: -12px 0 40px rgba(32,26,24,0.18);
  z-index: 99;
  animation: slideIn var(--dur-slow) var(--ease-out);
  overflow-y: auto;
}

body.nav-open .nav-links a {
  color: var(--ink);
  font-size: 1.05rem;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
}
body.nav-open .nav-links a:last-of-type { border-bottom: none; }
body.nav-open .nav-links a.active { color: var(--red-primary); }
body.nav-open .nav-links a::after { display: none; }

@media (max-width: 900px) {
  .brand img { height: 64px; }
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.nav-scrim {
  display: none;
  position: fixed; inset: 0;
  background: rgba(32,26,24,0.4);
  z-index: 98;
}
body.nav-open .nav-scrim { display: block; }

/* ============ Hero ============ */
.hero {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding-top: 46px;
  padding-bottom: 24px;
  background: radial-gradient(circle at 80% 10%, rgba(232,169,23,0.13), transparent 55%),
              radial-gradient(circle at 10% 90%, rgba(179,16,41,0.10), transparent 55%),
              #F7F0E5;
  overflow: hidden;
}

/* Devices shorter than an iPhone Pro Max (~926px tall) may not fit the logo +
   quote + buttons in one screen, so allow scrolling there. Pro Max and taller
   (including desktop) stay locked to a single static screen. */
@media (max-height: 925px) {
  .hero { height: auto; min-height: 100dvh; overflow: visible; }
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0.4;
  filter: blur(14px) saturate(1);
  z-index: 0;
  pointer-events: none;
}

.hero-brand {
  width: 100%;
  flex: 0 1 auto;
  min-height: 0;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
}

.hero-logo-wrap {
  width: 100%;
  max-width: 77%;
  max-height: min(100%, 58vh);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-logo-wrap img { max-width: 100%; max-height: 58vh; width: auto; height: auto; display: block; }

.hero .quotes { width: 100%; padding: 0 0 24px; flex-shrink: 0; }
.hero > .container { flex-shrink: 0; }

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 70%, var(--white));
  pointer-events: none;
}

.hero .container {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

.coming-soon {
  font-family: 'Source Serif 4', serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  letter-spacing: 0.06em;
  color: var(--red-primary);
  margin: 0;
}

@media (max-width: 700px) {
  .hero-brand { justify-content: flex-start; flex: 0 0 auto; }
  .hero-logo-wrap { max-width: 90%; }
  .hero { padding-top: 98px; }
}

@keyframes spin { to { transform: rotate(360deg); } }


/* ============ Quotes ============ */
.quotes { background: transparent; position: relative; overflow: hidden; }
.quotes .eyebrow::before { background: var(--gold); }

.quote-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 640px;
  margin: 4px auto 0;
}

.quote-card {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(179,16,41,0.12);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
  padding: 18px 26px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.quote-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.quote-card blockquote {
  color: var(--ink);
  font-family: 'Source Serif 4', serif;
  font-size: 0.92rem;
  line-height: 1.5;
  font-weight: 600;
}
.quote-card blockquote .quote-now { color: var(--red-primary); font-style: italic; }
.quote-card blockquote::-webkit-scrollbar { width: 4px; }
.quote-card blockquote::-webkit-scrollbar-thumb { background: rgba(179,16,41,0.3); border-radius: 4px; }
.quote-card cite {
  display: block;
  margin-top: 12px;
  font-style: italic;
  font-family: 'Source Serif 4', serif;
  font-weight: 600;
  color: var(--red-primary);
  font-size: 0.9rem;
}


/* ============ Page Banner (Info / Pricing) ============ */
.page-banner {
  padding: 142px 0 8px;
  text-align: center;
}
@media (max-width: 900px) { .page-banner { padding-top: clamp(88px, 11vh, 142px); } }
.page-banner .eyebrow { justify-content: center; }
.page-banner p { max-width: 60ch; margin: 14px auto 0; font-size: 1.05rem; }

.page-banner-phone {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Source Serif 4', serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--gold);
  margin: 0 auto 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.page-banner-phone:hover { color: var(--red-primary); }

/* ============ Enter Page (single screen) ============ */
.enter-single {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: clamp(88px, 11vh, 142px);
  overflow: hidden;
  background: var(--cream);
}

/* Devices shorter than an iPhone Pro Max (~926px tall) may not fit the video +
   quote + buttons in one screen, so allow scrolling there. Pro Max and taller
   (including desktop) stay locked to a single static screen. */
@media (max-height: 925px) {
  body.no-scroll { height: auto; overflow: visible; }
  .enter-single { height: auto; min-height: 100dvh; overflow: visible; }
}
.enter-banner { flex-shrink: 0; text-align: center; padding-bottom: 2px; }
.enter-banner .eyebrow { justify-content: center; font-size: clamp(0.72rem, 1.8vh, 0.86rem); }
.enter-banner .page-banner-phone { font-size: clamp(1rem, 3vh, 1.2rem); margin: 0 auto 2px; }
.enter-body {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: min(92vw, 640px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe start;
  gap: clamp(6px, 1.6vh, 12px);
}
.enter-body .video-embed { width: 100%; max-width: 520px; margin: 0 auto 0; flex-shrink: 0; }
.enter-body .quote-card { width: 100%; flex-shrink: 0; padding: 18px 26px; text-align: center; }
.enter-body .quote-card blockquote { font-size: 0.92rem; line-height: 1.5; max-height: clamp(36px, calc(18.5vh + 45px), 265px); overflow-y: auto; text-align: center; }
.enter-body .quote-card cite { margin-top: 12px; font-size: 0.9rem; text-align: center; }
.enter-body .hero-actions {
  width: 100%;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6px, 1.2vh, 10px);
}
.enter-body .hero-actions .btn { width: 100%; }

/* Mobile: shrink so all 4 labels fit on one line at half-column width instead
   of wrapping to 2 lines and growing taller. */
@media (max-width: 700px) {
  .enter-body .hero-actions .btn { padding: 13.3px 4px; font-size: 0.6rem; white-space: nowrap; min-height: 0; }
}

/* Short screens: the +45px quote boost doesn't leave room for it, so fall back
   to the smaller size that still fits without pushing the buttons off screen. */
@media (max-width: 700px) and (max-height: 760px) {
  .enter-body .quote-card blockquote { max-height: clamp(36px, 18.5vh, 220px); }
}

.video-placeholder {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--red-deep), var(--ink));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.video-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(232,169,23,0.25), transparent 55%);
}
.play-btn {
  position: relative;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.play-btn:hover { transform: scale(1.08); background: rgba(255,255,255,0.25); }
.play-btn svg { width: 30px; height: 30px; margin-left: 4px; }
.video-caption { position: relative; margin-top: 18px; text-align: center; color: rgba(255,255,255,0.75); font-size: 0.88rem; }

.video-embed {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 24px;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ============ YouTube Playlist Grid ============ */
.playlist-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (min-width: 560px) { .playlist-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .playlist-grid { grid-template-columns: repeat(3, 1fr); } }

.playlist-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.playlist-card:hover { box-shadow: var(--shadow-md); }

.playlist-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border: none;
  padding: 0;
  cursor: pointer;
}
.playlist-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.playlist-play-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(32,26,24,0.28);
  transition: background var(--dur-base) var(--ease-out);
}
.playlist-thumb:hover .playlist-play-badge { background: rgba(32,26,24,0.45); }

.playlist-play-circle {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(179,16,41,0.18);
  border: 1.5px solid rgba(179,16,41,0.65);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  transform: scale(0.92);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.playlist-thumb:hover .playlist-play-circle {
  transform: scale(1.08);
  background: var(--red-primary);
  border-color: var(--red-primary);
}

.playlist-title {
  padding: 14px 16px 16px;
  font-family: 'Source Serif 4', serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.4;
}

.playlist-card.is-skel .playlist-thumb { cursor: default; background: var(--border); animation: playlistSkelPulse 1.4s ease-in-out infinite; }
.playlist-skel-line {
  height: 12px; margin: 14px 16px 0;
  background: var(--border); border-radius: 4px;
  animation: playlistSkelPulse 1.4s ease-in-out infinite;
}
.playlist-skel-line.short { width: 60%; margin-top: 8px; margin-bottom: 16px; }
@keyframes playlistSkelPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.playlist-fallback { text-align: center; color: var(--ink-muted); }
.playlist-fallback a { color: var(--red-primary); font-weight: 600; }

/* ============ Form ============ */
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
}
.form-card h3 { margin-bottom: 8px; }
.form-card > p { margin-bottom: 28px; }

.field { margin-bottom: 22px; }
.field label {
  display: flex;
  gap: 4px;
  font-family: 'Source Serif 4', serif;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--ink);
}
.field .req { color: var(--red-primary); }
.field input, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Source Serif 4', serif;
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  min-height: 44px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--red-primary);
  box-shadow: 0 0 0 4px rgba(179,16,41,0.12);
  background: var(--white);
}
.field .error-msg {
  display: none;
  color: var(--red-bright);
  font-size: 0.82rem;
  margin-top: 6px;
  font-weight: 500;
}
.field.invalid input, .field.invalid textarea { border-color: var(--red-bright); }
.field.invalid .error-msg { display: block; }

.form-submit {
  width: 100%;
  justify-content: center;
}

.form-success {
  display: none;
  text-align: center;
  padding: 30px 10px;
}
.form-success.show { display: block; }
.form-success .icon-wrap {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #C98E0E);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  color: var(--white);
  animation: popIn var(--dur-slow) var(--ease-out);
}
@keyframes popIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.form-success h3 { margin-bottom: 10px; }
form.hidden { display: none; }

/* ============ Pricing ============ */
.intro-card .btn { margin-top: 18px; }

.path-card .btn-gold + .btn { margin-left: 14px; }

.about-card { max-width: 820px; margin: 14px auto 0; }
.contact-link { color: var(--gold); font-size: 1.08em; font-weight: 700; }
.contact-link:hover { color: var(--gold-soft); }
.about-body { margin-top: 4px; }
.about-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.about-list li { display: flex; align-items: baseline; gap: 10px; font-family: 'Source Serif 4', serif; font-size: 0.95rem; line-height: 1.5; }
.about-list li::before { content: ''; width: 14px; height: 2px; flex-shrink: 0; background: var(--gold); transform: translateY(-4px); }

.ventures { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.ventures-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 640px) { .ventures-grid { grid-template-columns: 1fr; } }
.venture-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(179,16,41,0.12);
  border-radius: var(--radius-md);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.venture-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(179,16,41,0.28); }
.venture-name { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.02rem; color: var(--red-primary); }
.venture-desc { font-family: 'Source Serif 4', serif; font-size: 0.85rem; line-height: 1.4; color: var(--ink-muted); }

/* ============ Photos ============ */
.photo-fade {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(179,16,41,0.12);
  box-shadow: var(--shadow-sm);
}
.photo-fade-slide { position: absolute; inset: 0; display: block; }
.photo-fade-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.photo-fade::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78));
  pointer-events: none;
  z-index: 1;
}
.photo-fade-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 16px 16px 14px;
  text-align: center;
  font-size: 0.95rem;
  color: var(--white);
}

.photo-fade-slide.pf-1, .photo-fade-caption.pf-1 { animation: photoFade1 15s ease-in-out infinite; }
.photo-fade-slide.pf-2, .photo-fade-caption.pf-2 { animation: photoFade2 15s ease-in-out infinite; }
.photo-fade-slide.pf-3, .photo-fade-caption.pf-3 { animation: photoFade3 15s ease-in-out infinite; }

@keyframes photoFade1 {
  0%, 26.667% { opacity: 1; }
  33.333%, 93.333% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes photoFade2 {
  0%, 26.667%, 66.667%, 100% { opacity: 0; }
  33.333%, 60% { opacity: 1; }
}
@keyframes photoFade3 {
  0%, 60%, 100% { opacity: 0; }
  66.667%, 93.333% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-fade-slide, .photo-fade-caption { animation: none !important; opacity: 0 !important; }
  .photo-fade-slide.pf-1, .photo-fade-caption.pf-1 { opacity: 1 !important; }
}

@media (max-width: 420px) {
  .photo-fade-caption { padding: 12px 12px 10px; font-size: 0.8rem; }
}

.path-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 20px;
}

/* Mobile: tighten the 2x3 grid so the collapsed view fits one screen without
   scrolling, but let each card's own padding grow on taller phones so the
   cards themselves stretch to fill the extra height (gaps stay fixed). */
@media (max-width: 700px) {
  .path-grid { gap: 10px; margin-top: 6px; }
  #packages { padding-bottom: 6px; }
  #packages details.path-card { padding: clamp(8px, calc(13.8vh - 75px), 66px) 14px; }
  #packages details.path-card.featured, #packages details.path-card.info-card { padding-top: clamp(20px, calc(15.4vh - 79px), 76px); }
  #packages details.path-card summary h3 { font-size: clamp(0.62rem, 2vh, 1.05rem); line-height: 1.15; }
  #packages details.path-card summary .path-price { font-size: clamp(0.56rem, 1.8vh, 0.95rem); }
  #packages .path-card .btn { padding: 13.3px 4px; font-size: 0.6rem; white-space: nowrap; }
  #packages .path-card .btn-gold + .btn { margin-left: 6px; }
}

/* Pricing page on small phones: squeeze section/banner spacing so the collapsed
   view (nothing expanded) fits on one screen without scrolling. */

.path-card {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(179,16,41,0.12);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.path-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(179,16,41,0.24); }
.path-card.featured { border-color: var(--gold); position: relative; }
.path-card.featured::before {
  content: 'Custom';
  position: absolute; top: -13px; left: 28px;
  background: var(--gold);
  color: var(--red-deep);
  font-family: 'Source Serif 4', serif;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.path-card h3 { margin-bottom: 12px; }
.path-card p { flex-grow: 1; margin-bottom: 18px; font-family: 'Source Serif 4', serif; font-size: 0.95rem; line-height: 1.5; }
.path-card .path-price { font-family: 'Source Serif 4', serif; font-weight: 700; color: var(--red-primary); font-size: 1.05rem; margin-top: auto; }

/* Accordion (details/summary) service cards */
details.path-card summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  cursor: pointer;
  list-style: none;
}
details.path-card summary::-webkit-details-marker { display: none; }
details.path-card summary h3 { margin-bottom: 0; font-size: 1.05rem; }
details.path-card summary .path-price {
  margin-top: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
details.path-card summary .path-price::after {
  content: '';
  flex-shrink: 0;
  width: 9px; height: 9px;
  border-right: 2px solid var(--red-primary);
  border-bottom: 2px solid var(--red-primary);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
}
details.path-card[open] summary .path-price::after { transform: rotate(-135deg); }
details.path-card p { margin: 18px 0 0; }

/* Important Information card — dark variant, matching its original color scheme */
.path-card.info-card { background: var(--ink); border-color: transparent; }
.path-card.info-card:hover { border-color: transparent; }
.path-card.info-card summary h3 { color: var(--white); }
.path-card.info-card summary .path-price { color: var(--gold-soft); }
.path-card.info-card summary .path-price::after { border-color: var(--gold-soft); }

.info-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 18px;
}
@media (max-width: 900px) { .info-panel { grid-template-columns: 1fr; } }
.info-panel h4 { color: var(--gold); font-size: 0.95rem; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.info-panel p { color: rgba(255,255,255,0.75); font-size: 0.92rem; }
.info-panel a { color: var(--gold); font-weight: 600; }

/* Pricing/contact/about pages on small phones: squeeze section, card and form
   spacing so the collapsed view (nothing expanded) fits on one screen without
   scrolling. Placed at the end of the file, and using selectors that match or
   exceed the specificity of the summary/details rules above, so these values
   reliably win the cascade instead of being silently overridden by them. */
@media (max-width: 480px) {
  .page-banner { padding: clamp(88px, 11vh, 142px) 0 2px; }
  .page-banner .page-banner-phone, .enter-banner .page-banner-phone { font-size: 1.05rem; margin: 0 auto 2px; }
  .page-banner .eyebrow, .enter-banner .eyebrow { margin-bottom: 0; }
}

/* Contact page: this page is locked to one screen on mobile with no way to
   unlock (no card to expand), so the form must always fit without scrolling. */
@media (max-width: 700px) {
  .page-banner { padding: clamp(88px, 11vh, 142px) 0 clamp(2px, 1vh, 8px); }
  .form-card { padding: clamp(12px, 3.2vh, 40px) clamp(16px, 4vh, 40px); }
  .form-card h3 { font-size: clamp(1rem, 2.8vh, 1.5rem); margin-bottom: clamp(2px, 0.8vh, 8px); }
  .form-card > p { margin-bottom: clamp(4px, 1.6vh, 28px); font-size: clamp(0.8rem, 2vh, 1rem); }
  .field { margin-bottom: clamp(5px, 1.7vh, 22px); }
  .field label { margin-bottom: clamp(2px, 0.7vh, 8px); font-size: clamp(0.75rem, 1.8vh, 0.9rem); }
  .field input, .field textarea { padding: clamp(5px, 1.3vh, 14px) 14px; min-height: clamp(30px, 4.6vh, 44px); font-size: clamp(0.85rem, 1.8vh, 1rem); }
  .field textarea { min-height: clamp(36px, 7vh, 120px); }
}

/* About Us page: static until the card is expanded, so the photo + collapsed
   card must always fit one screen without scrolling. */
@media (max-width: 700px) {
  .photo-fade { max-width: clamp(180px, 42vh, 420px); }
  .about-card { margin-top: clamp(8px, 3vh, 40px); }
}