@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ============ Design Tokens ============ */
:root {
  --blue-deep: #041B33;
  --blue-primary: #0090FF;
  --blue-bright: #29B6FF;
  --silver: #C7CFD9;
  --silver-soft: #ECEFF3;
  --white: #FFFFFF;
  --black: #05070A;
  --surface: #12161D;
  --surface-2: #191F29;
  --ink: #F2F4F7;
  --ink-muted: #9AA3AF;
  --border: rgba(255, 255, 255, 0.12);
  --error: #FF5A5F;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px rgba(0, 144, 255, 0.22);
  --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: 'Inter', sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 8%, rgba(0,144,255,0.12), transparent 50%),
    radial-gradient(circle at 12% 95%, rgba(0,144,255,0.07), transparent 50%),
    var(--black);
  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: 'Oswald', sans-serif;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

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: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-primary);
  margin-bottom: 0;
}

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

/* ============ Buttons (liquid glass) ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 10px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  min-height: 40px;
  touch-action: manipulation;
}

/* Diagonal light sweep on hover, like glass catching light */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
}
.btn:hover::before { transform: translateX(100%); }
.btn > * { position: relative; z-index: 1; }

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

.btn-primary {
  background: rgba(0, 144, 255, 0.16);
  border-color: rgba(0, 144, 255, 0.4);
  color: var(--white);
  box-shadow: var(--shadow-md);
  filter: url(#liquid-filter);
}
.btn-primary:hover {
  background: rgba(0, 144, 255, 0.28);
  border-color: rgba(0, 144, 255, 0.7);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.btn-gold {
  background: rgba(199, 207, 217, 0.14);
  border-color: rgba(199, 207, 217, 0.4);
  color: var(--silver-soft);
  box-shadow: 0 10px 30px rgba(199, 207, 217, 0.14);
}
.btn-gold:hover {
  background: rgba(199, 207, 217, 0.24);
  border-color: rgba(199, 207, 217, 0.65);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(199, 207, 217, 0.2);
}

.btn-outline-dark {
  background: rgba(255,255,255,0.03);
  color: var(--blue-bright);
  border-color: var(--blue-primary);
}
.btn-outline-dark:hover { background: rgba(0, 144, 255, 0.18); color: var(--white); border-color: rgba(0,144,255,0.7); }

/* iOS/Android: SVG filter + backdrop-filter conflict — strip the liquid
   turbulence filter on touch devices, keep the plain glass look. */
@media (hover: none) {
  .btn-primary, .form-submit { filter: none; }
}

/* ============ 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(5, 7, 10, 0.88);
  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 dark as usual. */
body.home .navbar.scrolled {
  background: rgba(5, 7, 10, 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: 'Oswald', sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.9rem;
  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(--blue-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(--blue-bright); }

.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(--surface-2) 0%, var(--black) 100%);
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 100px 32px 32px;
  box-shadow: -12px 0 40px rgba(0,0,0,0.5);
  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(--blue-bright); }
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(0,0,0,0.6);
  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: flex-start;
  padding-top: 46px;
  padding-bottom: 24px;
  background: var(--black);
  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 20%;
  opacity: 0.68;
  filter: saturate(1.2) contrast(1.08) brightness(0.82);
  z-index: 0;
  pointer-events: none;
}

/* Video tint + vignette: ties the footage into the blue/black brand palette
   and keeps the centered logo + text legible over busy footage. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 34%, rgba(0,139,253,0.4), transparent 42%),
    radial-gradient(circle at 50% 34%, rgba(0,139,253,0.2), transparent 60%),
    linear-gradient(180deg, rgba(5,7,10,0.35) 0%, rgba(5,7,10,0.25) 45%, rgba(5,7,10,0.88) 100%);
  pointer-events: none;
}

.hero-brand {
  width: 100%;
  flex: 1 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: 60%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-logo-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  opacity: 0.75;
}

.hero .quotes { width: 100%; padding: 16px 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 72%, var(--black));
  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; }

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

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


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

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

.quote-card {
  background: rgba(0, 144, 255, 0.08);
  border: 1px solid rgba(0, 144, 255, 0.22);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-radius: var(--radius-lg);
  padding: 18px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  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), background var(--dur-base) var(--ease-out);
}
.quote-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.16) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
}
.quote-card:hover::before { transform: translateX(100%); }
.quote-card > * { position: relative; z-index: 1; }
.quote-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  background: rgba(0, 144, 255, 0.13);
  border-color: rgba(0, 144, 255, 0.4);
}
.quote-card blockquote {
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
  font-weight: 600;
}
.quote-card blockquote .quote-now { color: var(--blue-bright); font-style: italic; }
.quote-card blockquote::-webkit-scrollbar { width: 4px; }
.quote-card blockquote::-webkit-scrollbar-thumb { background: rgba(0,144,255,0.35); border-radius: 4px; }
.quote-card cite {
  display: block;
  margin-top: 12px;
  font-style: italic;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: var(--blue-bright);
  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: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--silver);
  margin: 0 auto 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.page-banner-phone:hover { color: var(--blue-bright); }

/* ============ Page Banner shared bits ============ */
.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; }

/* ============ Form ============ */
.form-card {
  background: var(--surface);
  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: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--ink);
}
.field .req { color: var(--blue-bright); }
.field input, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  background: var(--black);
  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(--blue-primary);
  box-shadow: 0 0 0 4px rgba(0,144,255,0.18);
  background: var(--surface-2);
}
.field .error-msg {
  display: none;
  color: var(--error);
  font-size: 0.82rem;
  margin-top: 6px;
  font-weight: 500;
}
.field.invalid input, .field.invalid textarea { border-color: var(--error); }
.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(--silver-soft), var(--silver));
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  color: var(--blue-deep);
  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(--blue-bright); font-size: 1.08em; font-weight: 700; }
.contact-link:hover { color: var(--silver-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: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.5; }
.about-list li::before { content: ''; width: 14px; height: 2px; flex-shrink: 0; background: var(--silver); 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.05);
  border: 1px solid rgba(255,255,255,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(0,144,255,0.35); }
.venture-name { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--blue-bright); }
.venture-desc { font-family: 'Inter', sans-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(255,255,255,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.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,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(0,144,255,0.35); }
.path-card.featured { border-color: var(--silver); position: relative; }
.path-card.featured::before {
  content: 'Custom';
  position: absolute; top: -13px; left: 28px;
  background: linear-gradient(135deg, var(--silver-soft), var(--silver));
  color: var(--blue-deep);
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  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: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.5; }
.path-card .path-price { font-family: 'Oswald', sans-serif; font-weight: 600; color: var(--blue-bright); 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(--blue-bright);
  border-bottom: 2px solid var(--blue-bright);
  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 — distinct navy-tinted variant */
.path-card.info-card { background: linear-gradient(160deg, var(--blue-deep), var(--black)); 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(--silver-soft); }
.path-card.info-card summary .path-price::after { border-color: var(--silver-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(--silver); 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(--silver-soft); 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); }
}

/* ============ Gallery ============ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.gallery-item {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  background: rgba(0, 144, 255, 0.06);
  border: 1px dashed rgba(255,255,255,0.22);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-muted);
  text-align: center;
  padding: 20px;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.gallery-item:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 144, 255, 0.5);
  background: rgba(0, 144, 255, 0.12);
}
.gallery-item svg { width: 34px; height: 34px; opacity: 0.6; }
.gallery-item span { font-family: 'Oswald', sans-serif; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* ============ VIP perks ============ */
.perk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.perk-card {
  background: rgba(0, 144, 255, 0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.perk-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(0,144,255,0.4); }
.perk-card h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--silver-soft); }
.perk-card p { font-size: 0.92rem; line-height: 1.5; margin: 0; }