/* ============================================================
   SANTA OLIVER — Home page styles
   ============================================================ */

/* ---------------- HERO ---------------- */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  box-sizing: border-box;
  padding: 104px 0 132px;
  background: #08110b;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  /* gentle warm-leaning grade so it sits inside the brand palette */
  filter: saturate(0.96) contrast(1.02);
}

.hero-vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    /* dark scrim weighted left where the card sits */
    linear-gradient(90deg,
      rgba(9,17,12,0.78) 0%,
      rgba(9,17,12,0.55) 22%,
      rgba(9,17,12,0.20) 42%,
      transparent 60%,
      transparent 100%),
    /* gentle top + bottom darkening */
    linear-gradient(180deg,
      rgba(9,17,12,0.30) 0%,
      transparent 22%,
      transparent 72%,
      rgba(9,17,12,0.50) 100%);
}

.hero-inner { position: relative; z-index: 10; width: 100%; }
.hero-card {
  max-width: 680px; padding: 48px 52px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(15,26,20,0.55), rgba(9,17,12,0.42));
  border: 1px solid var(--hairline-soft);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: var(--shadow-card);
  position: relative;
}
/* The nav brand keeps one restrained star. The former second medallion on
   the hero card competed with it and compressed the brand and hero into one
   visual cluster, especially on short tablet and laptop viewports. */
.nav-logo .seal {
  width: 34px;
  height: 34px;
  color: var(--gold);
  border-color: var(--hairline-soft);
  background: rgba(246,239,223,0.035);
  box-shadow: none;
  opacity: 0.8;
}
.nav-logo .seal svg { width: 19px; height: 19px; }

/* The single header action uses finished artwork supplied for Santa Oliver.
   The transparent crop keeps the plaque crisp without a second pill behind it. */
.nav {
  padding-top: max(10px, env(safe-area-inset-top));
  padding-bottom: 10px;
}
.nav.solid {
  padding-top: max(8px, env(safe-area-inset-top));
  padding-bottom: 8px;
}
.nav-book-art {
  display: block;
  flex: 0 0 auto;
  width: 132px;
  height: 53px;
  overflow: visible;
  border: 0;
  border-radius: 13% / 32%;
  padding: 0 !important;
  background: none !important;
  box-shadow: none;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.5));
  transition: transform .2s ease, filter .2s ease;
}
.nav-book-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (min-width: 1500px) {
  .nav-book-art { width: 142px; height: 57px; }
}
@media (hover: hover) and (pointer: fine) {
  .nav-book-art:hover {
    transform: translateY(-2px) scale(1.015);
    filter: brightness(1.06) drop-shadow(0 10px 14px rgba(222,184,109,0.28));
  }
}
@media (max-width: 1160px) {
  .nav-links { display: none; }
  .nav-book-art { width: 126px; height: 51px; margin-left: auto; }
  .nav-burger { display: inline-flex; margin-left: 10px; }
}
@media (max-width: 820px) {
  .nav-book-art { width: 118px; height: 47px; }
}
@media (max-width: 700px) {
  .nav-book-art { width: 110px; height: 44px; }
  .nav-burger { margin-left: 8px; }
}
@media (max-width: 430px) {
  .nav-logo .wm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-book-art { transition: none; }
}
.hero-card .so-eyebrow {
  display: block;
  margin: 0 0 26px;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--gold-200);
  opacity: 0.82;
}
.hero .hero-display {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(36px, 7vw, 82px); line-height: 0.98; letter-spacing: -0.015em;
  color: var(--cream); margin: 0 0 24px;
  position: relative;
}
.hero .hero-display em { font-style: italic; color: var(--gold-200); }
.hero p.lead {
  font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6;
  color: var(--ink-soft); max-width: 500px; margin: 0 0 30px;
}
.hero-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* trust strip under hero — snowy white */
.trust-strip {
  background: var(--snow);
  border-bottom: 1px solid var(--hairline-ink);
}
.trust-strip .wrap {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  padding-top: 30px; padding-bottom: 30px;
}

/* ---------------- INTRO / Meet Santa ---------------- */
.intro-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: 64px; align-items: center;
}
.intro-photo { position: relative; }
.intro-photo .so-photo {
  width: 100%; aspect-ratio: 4/5; border-radius: var(--r-lg);
}
.intro-photo .frame-corner {
  position: absolute; width: 28px; height: 28px;
}
.intro-photo .tl { top: -10px; left: -10px;
  border-top: 2px solid var(--gold); border-left: 2px solid var(--gold);
}
.intro-photo .br { bottom: -10px; right: -10px;
  border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold);
}
.intro-copy .so-eyebrow { display: block; margin-bottom: 18px; }
.intro-copy h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(34px, 3.6vw, 50px); line-height: 1.04;
}
.intro-copy p { font-size: 17px; line-height: 1.7; color: var(--ink-muted); margin: 22px 0; }
.sig { font-family: var(--display); font-style: italic; font-size: 30px; color: var(--green); margin-top: 8px; }

/* ---------------- EXPERIENCES grid ---------------- */
.exp-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px;
}
.exp-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  min-height: 320px; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 28px;
  color: var(--cream); text-decoration: none;
  border: 1px solid var(--hairline-ink);
  transition: transform .35s ease, box-shadow .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .exp-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(22,34,28,0.5); }
}
.exp-card:active { transform: scale(0.98); }
.exp-card .ph { position: absolute; inset: 0; z-index: 0; }
.exp-card .ph .so-photo { width: 100%; height: 100%; }
.exp-card .scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 30%, rgba(9,17,12,0.88));
}
.exp-card .ec-body { position: relative; z-index: 2; }
.exp-card .ec-kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-200);
}
.exp-card h3 {
  font-family: var(--display); font-weight: 600; font-size: 27px;
  margin: 8px 0 6px; color: #fff;
}
.exp-card p { font-size: 14px; line-height: 1.5; color: rgba(246,239,223,0.82); margin: 0; }
.exp-card .ec-arrow {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--gold-200);
}
.exp-card.span3 { grid-column: span 3; }
.exp-card.span2 { grid-column: span 2; }

/* ---------------- EXPERIENCES HERO (starry night header) ---------------- */
.exp-hero {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(180deg, var(--forest-950), var(--forest-850) 58%, var(--forest-900));
  padding: 120px 0 0;
}
.exp-hero .starfield { position: absolute; inset: 0; z-index: 1; }
.exp-hero .moon-disc { z-index: 2; }
.exp-hero .flyer--moon { z-index: 3; }
.exp-hero .snow-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.exp-hero .ornaments { position: absolute; top: 0; left: 0; right: 0; z-index: 6; pointer-events: none; }
.exp-hero-inner { position: relative; z-index: 7; padding-bottom: 80px; }
.exp-hero .so-rule { width: 120px; margin: 0 auto 22px; }
.exp-hero .so-eyebrow { display: block; margin-bottom: 18px; color: var(--red-bright); letter-spacing: 0.32em; }
.exp-hero h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(36px, 4.8vw, 62px); line-height: 1.04; letter-spacing: -0.015em;
  color: var(--cream); margin: 0 auto 20px; max-width: 16ch;
}
.exp-hero h2 em { display: block; font-style: italic; color: var(--gold-200); }
.exp-hero-sub { max-width: 540px; margin: 0 auto; color: var(--ink-soft); font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.62; }
.exp-snowbank { position: relative; z-index: 8; line-height: 0; margin-top: -2px; }
.exp-snowbank svg { width: 100%; display: block; }
.exp-snowbank path { fill: var(--cream); }

/* ---------------- EXPERIENCES FIELD (cream pricing section) ---------------- */
.exp-field {
  position: relative; overflow: hidden;
  background: var(--cream); padding: 10px 0 100px;
}
.exp-field::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(58% 42% at 50% 2%, rgba(200,162,74,0.13), transparent 62%),
    radial-gradient(40% 34% at 84% 64%, rgba(204,43,43,0.05), transparent 60%),
    radial-gradient(40% 34% at 14% 70%, rgba(23,107,67,0.05), transparent 60%);
}
.exp-field::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .45;
  background-image: radial-gradient(circle, rgba(255,255,255,0.95) 1px, transparent 1.5px);
  background-size: 46px 46px;
}
.exp-wrap { position: relative; z-index: 3; max-width: 1240px; margin: 0 auto; padding: 0 40px; }

/* string-lights garland */
.garland { position: relative; z-index: 4; margin: 0 0 10px; }
.garland .lights { height: 52px; }
.lights { position: relative; }
.lights svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lights .row { display: flex; justify-content: space-around; align-items: flex-end; height: 52px; padding: 0 12px; }
.lights .bulb {
  display: block; width: 10px; height: 14px; border-radius: 3px 3px 5px 5px;
  background: currentColor; margin-top: var(--drop, 8px);
  animation: bulbPulse 2.4s ease-in-out var(--d, 0s) infinite alternate;
  box-shadow: 0 0 6px 2px currentColor;
  position: relative;
}
.lights .bulb::before {
  content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 5px; background: rgba(246,239,223,0.3); border-radius: 2px 2px 0 0;
}
@keyframes bulbPulse { from { opacity: 0.65; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lights .bulb { animation: none; } }

/* ---------------- BOOKING PACKAGE ARTWORK ---------------- */
.home-package-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 22px;
  align-items: stretch;
}
.home-package-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #16271d, #0f1d16);
  border: 1px solid var(--hairline-soft);
  box-shadow: 0 20px 38px -28px rgba(9,17,12,.72);
  transition: transform .25s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.home-package-card picture,
.home-package-card img { display: block; width: 100%; }
.home-package-card picture { flex: none; }
.home-package-card img {
  height: auto;
  aspect-ratio: 1000 / 562;
  object-fit: contain;
}
.home-package-copy {
  display: block;
  flex: 1;
  padding: 18px 20px 20px;
  border-top: 1px solid var(--hairline-soft);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
}
.home-package-card:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 5px;
}
@media (hover: hover) and (pointer: fine) {
  .home-package-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 48px -26px rgba(9,17,12,.82);
  }
}
.home-package-card:active { transform: scale(.985); }
.home-package-card--zoom {
  grid-column: 2 / span 2;
  width: min(100%, 520px);
  justify-self: center;
}

.price-note-row {
  position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px;
  margin-top: 34px; text-align: center;
}
.price-note-row span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-muted); }
.price-note-row svg { width: 16px; height: 16px; color: var(--green); flex: none; }
.home-package-action { display: flex; justify-content: center; margin-top: 34px; }

@media (prefers-reduced-motion: no-preference) {
  .exp-field .reveal { animation: expRise .7s ease both; }
  @keyframes expRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
}

/* ---------------- WHY SANTA: North Pole professional standard ---------------- */
.cred-band {
  position: relative;
  overflow: hidden;
  padding: 116px 0 104px;
  background:
    radial-gradient(ellipse at 82% 6%, rgba(77, 148, 153, 0.18), transparent 34%),
    radial-gradient(ellipse at 14% 16%, rgba(198, 160, 72, 0.12), transparent 31%),
    linear-gradient(145deg, #0d211c 0%, var(--forest-900) 43%, #07120f 100%);
}
.cred-band::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.52;
  background-image:
    radial-gradient(circle at 8% 17%, rgba(240,248,245,0.65) 0 1px, transparent 1.7px),
    radial-gradient(circle at 23% 9%, rgba(240,248,245,0.5) 0 1px, transparent 1.6px),
    radial-gradient(circle at 41% 20%, rgba(240,248,245,0.42) 0 1px, transparent 1.6px),
    radial-gradient(circle at 61% 8%, rgba(240,248,245,0.55) 0 1px, transparent 1.8px),
    radial-gradient(circle at 77% 23%, rgba(240,248,245,0.42) 0 1px, transparent 1.6px),
    radial-gradient(circle at 94% 12%, rgba(240,248,245,0.6) 0 1px, transparent 1.7px);
}
.cred-band::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 180px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(2,9,7,0.78), transparent);
}
.cred-aurora {
  position: absolute;
  top: -23%;
  left: 27%;
  width: 70%;
  height: 52%;
  border-radius: 50%;
  opacity: 0.16;
  filter: blur(54px);
  transform: rotate(-8deg);
  background: linear-gradient(90deg, transparent, #5bb49e 32%, #95c4ba 54%, #c8a24a 76%, transparent);
  pointer-events: none;
}
.cred-pines {
  position: absolute;
  right: -2%;
  bottom: -8px;
  width: 43%;
  height: 255px;
  opacity: 0.22;
  pointer-events: none;
  background: linear-gradient(to top, #020a07, #102a21);
  clip-path: polygon(0 100%, 9% 66%, 15% 80%, 24% 42%, 31% 74%, 43% 18%, 55% 76%, 66% 37%, 75% 72%, 87% 26%, 100% 70%, 100% 100%);
}
.cred-wrap { position: relative; z-index: 2; }

.cred-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: center;
  gap: clamp(52px, 8vw, 118px);
}
.cred-heading.sec-head {
  max-width: 760px;
  margin: 0;
  text-align: left;
}
.cred-heading.sec-head .so-rule { margin: 0 0 22px; }
.cred-heading h2 {
  font-size: clamp(48px, 5vw, 72px);
  line-height: 0.96;
  text-wrap: balance;
}
.cred-heading p {
  max-width: 680px;
  font-size: clamp(16px, 1.35vw, 18px);
  color: rgba(226, 233, 225, 0.76);
}
.cred-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.cred-assurances span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid rgba(219, 190, 111, 0.23);
  border-radius: 999px;
  background: rgba(6, 18, 14, 0.48);
  color: rgba(246, 239, 223, 0.9);
  font-size: 13px;
  font-weight: 600;
  box-shadow: inset 0 1px rgba(255,255,255,0.04);
}
.cred-assurances svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--gold-200);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cred-seal {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 24px 27px;
  border: 1px solid rgba(218, 188, 107, 0.34);
  border-radius: 24px;
  text-align: center;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.08), rgba(255,255,255,0.018)),
    rgba(5, 18, 13, 0.58);
  box-shadow:
    0 30px 70px -40px rgba(0,0,0,0.9),
    inset 0 1px rgba(255,255,255,0.1);
  backdrop-filter: blur(14px);
}
.cred-seal::before,
.cred-seal::after {
  content: '';
  position: absolute;
  width: 38px;
  height: 1px;
  top: 94px;
  background: linear-gradient(90deg, transparent, rgba(218,188,107,0.55));
}
.cred-seal::before { left: 22px; }
.cred-seal::after { right: 22px; transform: scaleX(-1); }
.cred-seal-ring {
  position: relative;
  width: 128px;
  height: 128px;
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(218,188,107,0.82);
  border-radius: 50%;
  background: linear-gradient(145deg, #e2c87f, #86611d 58%, #d8b96a);
  box-shadow: 0 0 30px rgba(200,162,74,0.12);
}
.cred-seal-ring::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255,247,222,0.38);
  border-radius: 50%;
  box-shadow: inset 0 0 20px rgba(3,12,9,0.28);
  pointer-events: none;
}
.cred-seal-ring img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.cred-seal-copy { margin-top: 20px; }
.cred-seal-copy > span {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.cred-seal-copy b {
  display: block;
  margin-top: 5px;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  color: var(--cream);
}
.cred-seal-copy small {
  display: block;
  margin-top: 7px;
  color: rgba(226,233,225,0.61);
  font-size: 11px;
}

.cred-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 64px;
  position: relative;
  z-index: 2;
}
.cred-card {
  position: relative;
  min-height: 270px;
  padding: 27px 27px 25px;
  overflow: hidden;
  border: 1px solid rgba(219, 190, 111, 0.19);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.085), rgba(255,255,255,0.018) 58%),
    rgba(9, 28, 21, 0.7);
  box-shadow:
    0 28px 58px -42px rgba(0,0,0,0.95),
    inset 0 1px rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  transition: transform .24s ease, border-color .24s ease, background-color .24s ease;
}
.cred-card::after {
  content: '✦';
  position: absolute;
  right: 18px;
  bottom: 12px;
  color: rgba(218,188,107,0.14);
  font-size: 24px;
}
.cred-card:hover {
  transform: translateY(-4px);
  border-color: rgba(219, 190, 111, 0.42);
  background-color: rgba(13, 39, 29, 0.8);
}
.cred-card-top {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 48px;
}
.cred-icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(218,188,107,0.32);
  border-radius: 13px;
  background: rgba(200,162,74,0.08);
  color: var(--gold-200);
}
.cred-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cred-card .cc-kind {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(246,239,223,0.78);
}
.cred-card .cc-year {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.cred-card h3 {
  margin: 21px 0 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 1.55vw, 26px);
  color: var(--cream);
  line-height: 1.05;
  text-wrap: balance;
}
.cred-card h3 span { font-size: 0.72em; color: rgba(246,239,223,0.7); }
.cred-card p {
  max-width: 42ch;
  margin: 0;
  color: rgba(226,233,225,0.7);
  font-size: 14px;
  line-height: 1.62;
}

.cred-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  z-index: 2;
  margin-top: 38px;
  padding: 24px 10px;
  border: 1px solid rgba(219,190,111,0.17);
  border-radius: 18px;
  background: rgba(4,15,11,0.48);
  box-shadow: inset 0 1px rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
}
.cred-stat {
  position: relative;
  padding: 4px 18px;
  text-align: center;
}
.cred-stat + .cred-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background: linear-gradient(transparent, rgba(219,190,111,0.27), transparent);
}
.cred-stat .num {
  font-family: var(--display);
  font-size: clamp(40px, 4vw, 54px);
  color: var(--gold-200);
  line-height: 0.92;
}
.cred-stat .num span:not(.sr-only) {
  margin-left: 1px;
  font-size: 0.58em;
  vertical-align: 0.28em;
}
.cred-stat .lbl {
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(226,233,225,0.6);
}

/* GALLERY: the two-room gallery block lives in assets/css/gallery.css (shared with gallery.html), 2026-09-05. */

/* ---------------- Dark band anchor targets ---------------- */
/* global.css parks an anchor target 96px below the viewport top so the fixed
   nav does not cover the heading. That works on pale sections, but the solid
   nav is only ~68px tall, so on a dark band the leftover ~28px window shows
   whatever section sits above: the cream .exp-field above Why Santa, the snow
   .trust-strip above About, the light gallery above Reviews. The result reads
   as a stray white line under the nav.

   For these bands the offset is zeroed and the nav clearance carried as top
   padding instead, so the band runs to the top of the viewport and the nav
   sits on it. Each selector is (0,2,0) and so outweighs section[id] at (0,1,1)
   without !important.

   Written once for all four. Any future dark band that is an anchor target
   should be added here rather than given its own copy. */
.about-band[id],
.cred-band[id],
.rv-band[id],
.np-band[id] {
  scroll-margin-top: 0;
  padding-top: 122px;
}
@media (max-width: 620px) {
  .about-band[id],
  .cred-band[id],
  .rv-band[id],
  .np-band[id] {
    padding-top: 104px;
  }
}

/* ---------------- TESTIMONIALS: North Pole workshop wall ---------------- */
.rv-band {
  position: relative; overflow: hidden; color: var(--cream);
  padding: 74px 0 82px;
  background: linear-gradient(180deg, var(--forest-900), var(--forest-950));
}
.rv-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, rgba(200,162,74,0.10), transparent 60%);
}
.rv-wrap { position: relative; z-index: 2; }

/* Standard section header. .sec-head's default 60px lead-out is too generous
   once the garland sits underneath it, so it is pulled in here. */
.rv-band .sec-head { margin-bottom: 26px; position: relative; z-index: 2; }

/* Light garland strung under the banners */
.rv-garland {
  position: relative; height: 50px; margin: 22px 10px 0; padding-top: 4px;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.rv-garland::before {
  content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 3px; border-radius: 3px;
  background: linear-gradient(to right, transparent, #6a5526 6%, var(--gold-deep) 50%, #6a5526 94%, transparent);
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.rv-bulb { width: 12px; height: 17px; border-radius: 0 0 50% 50%; animation: rv-twinkle 2.6s ease-in-out infinite; }
.rv-bulb--red   { background: linear-gradient(#e9564c, var(--red-deep)); box-shadow: 0 0 14px 3px rgba(204,43,43,0.6); }
.rv-bulb--green { background: linear-gradient(#8fdf7a, var(--green-bright)); box-shadow: 0 0 14px 3px rgba(47,138,87,0.55); animation-delay: 0.3s; }
.rv-bulb--gold  { background: linear-gradient(var(--gold-glow), var(--gold-deep)); box-shadow: 0 0 14px 3px rgba(200,162,74,0.6); animation-delay: 0.6s; }
.rv-bulb--blue  { background: linear-gradient(#7fc4f2, #2f5fa8); box-shadow: 0 0 14px 3px rgba(62,127,184,0.55); animation-delay: 0.9s; }
.rv-orn {
  width: 22px; height: 22px; border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(255,255,255,0.5);
  animation: rv-hang 5s ease-in-out infinite; transform-origin: 50% -60%;
}
.rv-orn--red {
  background: conic-gradient(#f6efe2 0 45deg, var(--red) 45deg 90deg, #f6efe2 90deg 135deg, var(--red) 135deg 180deg, #f6efe2 180deg 225deg, var(--red) 225deg 270deg, #f6efe2 270deg 315deg, var(--red) 315deg 360deg);
}
.rv-orn--green {
  background: conic-gradient(#f6efe2 0 45deg, var(--green) 45deg 90deg, #f6efe2 90deg 135deg, var(--green) 135deg 180deg, #f6efe2 180deg 225deg, var(--green) 225deg 270deg, #f6efe2 270deg 315deg, var(--green) 315deg 360deg);
  animation-delay: 0.7s;
}
.rv-ball {
  width: 26px; height: 26px; border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset -3px -4px 8px rgba(0,0,0,0.35), inset 3px 3px 6px rgba(255,255,255,0.35);
  animation: rv-hang 5.4s ease-in-out infinite 0.2s; transform-origin: 50% -60%;
}
.rv-ball--green { background: radial-gradient(circle at 34% 28%, #6fbf8b, #1f6b41 70%); }
.rv-ball--red   { background: radial-gradient(circle at 34% 28%, #f09a94, #8f1a16 70%); animation-delay: 0.9s; }
.rv-cane {
  width: 10px; height: 34px; border-radius: 6px;
  background: repeating-linear-gradient(38deg, #f6efe2 0 6px, var(--red) 6px 12px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.45);
  animation: rv-hang 6s ease-in-out infinite 0.4s; transform-origin: 50% -40%;
}
.rv-cane--alt { background: repeating-linear-gradient(-38deg, #f6efe2 0 6px, var(--red) 6px 12px); animation-delay: 0.1s; }
.rv-flake {
  font-size: 24px; line-height: 1; color: #cfe7fa; text-shadow: 0 0 12px rgba(160,210,255,0.7);
  animation: rv-hang 6.4s ease-in-out infinite 0.5s; transform-origin: 50% -40%;
}
@keyframes rv-twinkle { 0%, 100% { opacity: 1; filter: brightness(1.3); } 50% { opacity: 0.4; filter: brightness(0.75); } }
@keyframes rv-hang { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }

/* Card grid: reveal lives on the cell (its .in state forces transform:none),
   the hand-placed tilt lives on the card inside so the two never fight. */
.rv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 30px; position: relative; z-index: 2;
}
.rv-card { transition: transform 0.3s ease, filter 0.3s ease; }
.rv-cell:nth-child(1) .rv-card { transform: rotate(-0.8deg); }
.rv-cell:nth-child(2) .rv-card { transform: rotate(0.5deg); }
.rv-cell:nth-child(3) .rv-card { transform: rotate(-0.4deg); }
.rv-cell:nth-child(4) .rv-card { transform: rotate(0.6deg); }
.rv-cell:nth-child(5) .rv-card { transform: rotate(-0.5deg); }
.rv-cell:nth-child(6) .rv-card { transform: rotate(0.8deg); }
.rv-card:hover { transform: rotate(0deg) translateY(-4px); filter: brightness(1.04); }

.rv-plaque-inner, .rv-scroll-inner, .rv-snow-inner { display: flex; flex-direction: column; gap: 12px; }
.rv-stars {
  display: flex; gap: 8px; justify-content: center;
  color: var(--gold-200); font-size: 15px; line-height: 1; letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(200,162,74,0.5);
}
.rv-card blockquote {
  margin: 0; font-family: var(--display); font-style: italic;
  font-size: 17px; line-height: 1.45; color: #4a3319; text-wrap: pretty;
}
.rv-line { height: 1px; background: linear-gradient(to right, transparent, rgba(124,90,30,0.4) 18%, rgba(124,90,30,0.4) 82%, transparent); }
.rv-who { display: flex; align-items: center; gap: 12px; }
.rv-av {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 17px;
}
.rv-id { display: flex; flex-direction: column; gap: 2px; }
.rv-nm { font-family: var(--display); font-weight: 700; font-size: 15px; color: #3a2617; }
.rv-rl { font-size: 12px; color: #75603c; }

/* Variant: carved pine plaque */
.rv-card--plaque {
  border-radius: 8px; padding: 9px;
  background: linear-gradient(150deg, var(--forest-700), var(--forest-800) 55%, var(--forest-950));
  box-shadow: 0 22px 40px -18px rgba(0,0,0,0.75), inset 0 0 0 1px rgba(200,162,74,0.30);
}
.rv-plaque-inner {
  border-radius: 5px; padding: 20px 20px 18px;
  background-color: var(--forest-800);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 26px),
    linear-gradient(165deg, var(--forest-700), var(--forest-850));
  box-shadow: inset 0 0 22px rgba(0,0,0,0.5);
}
.rv-card--plaque blockquote { color: var(--cream); text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.rv-card--plaque .rv-line { background: linear-gradient(to right, transparent, rgba(200,162,74,0.38) 18%, rgba(200,162,74,0.38) 82%, transparent); }
.rv-card--plaque .rv-av {
  background: radial-gradient(circle at 34% 28%, var(--gold-300), var(--gold-deep) 74%);
  border: 2px solid rgba(242,220,160,0.55); color: var(--forest-950);
  box-shadow: 0 4px 10px rgba(0,0,0,0.55);
}
.rv-card--plaque .rv-id { background: linear-gradient(#f1e5c6, #e0cfa4); border-radius: 4px; padding: 6px 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.45); }
.rv-card--plaque .rv-rl { color: #6e5836; }

/* Variant: parchment scroll */
.rv-rod {
  height: 14px; margin: 0 -8px; border-radius: 10px;
  box-shadow: 0 5px 12px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
}
.rv-rod--top { background: linear-gradient(var(--gold), #7c5a1e); }
.rv-rod--bot { background: linear-gradient(#7c5a1e, var(--gold)); }
.rv-scroll-inner {
  padding: 20px 22px 18px;
  background-color: #f0e3c2;
  background-image:
    radial-gradient(70% 50% at 20% 10%, rgba(255,255,255,0.6), transparent),
    radial-gradient(60% 40% at 90% 90%, rgba(140,110,60,0.25), transparent),
    linear-gradient(#f3e7c8, #e3d2a8);
  box-shadow: 0 22px 40px -18px rgba(0,0,0,0.7), inset 0 0 30px rgba(150,118,64,0.25);
}
.rv-card--scroll .rv-stars { color: var(--gold-deep); text-shadow: 0 1px 1px rgba(0,0,0,0.25); }
.rv-card--scroll .rv-av {
  background: radial-gradient(circle at 34% 28%, #f6ebd0, var(--gold) 74%);
  border: 2px solid #7c5a1e; color: #3a2617;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* Variant: snow card with candy-stripe corner ribbons */
.rv-snow-inner {
  position: relative; overflow: hidden; border-radius: 4px 4px 14px 4px;
  padding: 20px 22px 18px;
  background-color: #f2e8ce;
  background-image:
    radial-gradient(70% 40% at 80% 0%, rgba(255,255,255,0.75), transparent),
    linear-gradient(#f7efd9, #e6d8b4);
  box-shadow: 0 22px 40px -18px rgba(0,0,0,0.7), inset 0 0 24px rgba(150,118,64,0.18);
}
.rv-ribbon { position: absolute; width: 190px; height: 32px; box-shadow: 0 3px 10px rgba(0,0,0,0.4); }
.rv-ribbon--l { top: -22px; left: -40px; transform: rotate(-38deg); background: repeating-linear-gradient(90deg, #1f6b41 0 14px, var(--red) 14px 28px); }
.rv-ribbon--r { top: -18px; right: -46px; transform: rotate(38deg); background: repeating-linear-gradient(90deg, var(--red) 0 14px, #1f6b41 14px 28px); }
.rv-stars--flake { color: #4e8fc4; font-size: 18px; letter-spacing: 1px; text-shadow: none; margin-top: 4px; }
.rv-card--snow .rv-av {
  border: 4px double var(--green);
  background: radial-gradient(circle at 40% 30%, #fffaec, #e4d5af);
  color: var(--pine); box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

@media (prefers-reduced-motion: reduce) {
  .rv-bulb, .rv-orn, .rv-ball, .rv-cane, .rv-flake { animation: none; }
  .rv-card { transition: none; }
  .rv-card:hover { transform: rotate(0deg); filter: none; }
}

/* ---------------- NORTH POLE teaser ---------------- */
.np-band {
  background: linear-gradient(135deg, var(--red-deep), #7a1718);
  color: var(--cream); padding: 100px 0;
  position: relative; overflow: hidden;
}
.np-band .snow-canvas { z-index: 1; }
.np-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 56px; align-items: center;
  position: relative; z-index: 3;
}
.np-grid h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(36px, 4vw, 54px); color: #fff; line-height: 1.02;
}
.np-grid p { font-size: 17px; line-height: 1.65; color: rgba(246,239,223,0.9); margin: 20px 0 30px; }
.np-toys { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.np-toy {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-md); padding: 20px;
  backdrop-filter: blur(8px);
}
.np-toy .ico { color: var(--gold-200); margin-bottom: 10px; }
.np-toy h4 { font-family: var(--display); font-size: 19px; color: #fff; margin: 0 0 4px; }
.np-toy p { font-size: 13px; margin: 0; color: rgba(246,239,223,0.8); }

/* ---------------- FINAL CTA ---------------- */
.final-cta {
  background: var(--forest-950);
  padding: 130px 0; text-align: center;
  position: relative; overflow: hidden;
}
.final-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(50% 60% at 50% 40%, rgba(200,162,74,0.14), transparent 60%);
}
.final-cta .inner { position: relative; z-index: 3; }
.final-cta h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(40px, 5vw, 72px); color: var(--cream); line-height: 1.0;
}
.final-cta p {
  font-size: 18px; color: var(--ink-soft);
  max-width: 520px; margin: 22px auto 36px;
}
.final-cta .ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 980px) {
  .intro-grid, .np-grid { grid-template-columns: 1fr; gap: 36px; }
  .exp-grid { grid-template-columns: repeat(2, 1fr); }
  .exp-card.span3, .exp-card.span2 { grid-column: span 2; }
  .home-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-package-card--zoom { grid-column: 1 / -1; }
  .cred-band { padding-top: 96px; }
  .cred-intro { grid-template-columns: 1fr; gap: 38px; }
  .cred-heading.sec-head { max-width: 760px; }
  .cred-seal {
    width: min(100%, 580px);
    justify-self: center;
    flex-direction: row;
    justify-content: center;
    gap: 28px;
  }
  .cred-seal-copy { margin-top: 0; text-align: left; }
  .cred-seal::before, .cred-seal::after { display: none; }
  .cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
  .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .cred-band { padding: 82px 0 72px; }
  .cred-heading.sec-head { text-align: center; }
  .cred-heading.sec-head .so-rule { margin-left: auto; margin-right: auto; }
  .cred-heading h2 { font-size: clamp(36px, 11.5vw, 50px); margin-inline: -6px; }
  .cred-assurances { justify-content: center; }
  .cred-seal {
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding: 25px 20px;
  }
  .cred-seal-copy { margin-top: 18px; text-align: center; }
  .cred-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 38px; }
  .cred-card { min-height: 0; padding: 24px 22px; }
  .cred-card h3 { font-size: 24px; }
  .cred-stats { grid-template-columns: repeat(2, 1fr); padding: 12px; }
  .cred-stat { padding: 18px 8px; }
  .cred-stat:nth-child(3)::before { display: none; }
  .cred-stat:nth-child(n+3)::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(219,190,111,0.27), transparent);
  }
  .rv-grid { grid-template-columns: 1fr; gap: 22px; }
  .rv-garland { margin-left: 0; margin-right: 0; }
  /* Fewer ornaments on narrow phones so the cord never crowds. */
  .rv-cane, .rv-ball, .rv-flake { display: none; }
  .rv-card blockquote { font-size: 17px; }

  /* Bottom-bias the card when there is room, but never let it overflow upward.
     With align-items:flex-end a card taller than the container overflows past
     its TOP edge, which is unreachable by scrolling — on a 320px phone that
     printed the hero eyebrow straight through the fixed nav. An auto margin
     gives the same bottom alignment while letting the container grow instead.
     padding-top clears the single-row phone nav with a little breathing room;
     the Weather Station card now lives inside the hamburger menu. */
  .hero { align-items: flex-start; padding-top: 94px; padding-bottom: 140px; }
  .hero-inner { margin-top: auto; }
  /* The markup is `Christmas <br>Is on Its&nbsp;<em>Way</em>`. Hiding the break
     welds the words together unless the space before it is real — see the same
     trap, and the same fix, in np-map.css. */
  .hero .hero-display br { display: none; }
  .hero-card { padding: 36px 28px; }
  .exp-grid { grid-template-columns: 1fr; }
  .exp-card.span3, .exp-card.span2 { grid-column: span 1; }
  .home-package-grid { grid-template-columns: 1fr; }
  .home-package-card--zoom { grid-column: 1; width: 100%; }
  .exp-wrap { padding: 0 20px; }
}
@media (max-width: 420px) {
  .hero-card { padding: 28px 22px; }
  .trust-strip .wrap { gap: 8px; padding-top: 22px; padding-bottom: 22px; }
  .trust-strip .so-badge { font-size: 12px; padding: 7px 12px; gap: 7px; }
  .trust-strip .so-badge svg { width: 13px; height: 13px; }
  .cred-stat .num { font-size: 42px; }
}

/* Real photos fill the .so-photo frame (added with first portrait) */
.so-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* GALLERY LIGHTBOX moved to assets/css/lightbox.css (shared with gallery.html), 2026-09-05. */