:root {
  --cream: #f7f0df;
  --paper: #fffaf0;
  --butter: #f2cf68;
  --coral: #df7867;
  --sky: #91bed1;
  --leaf: #637c64;
  --gold: #b88b3f;
  --ink: #2f3431;
  --muted: #6f706a;
  --white: #ffffff;
  --shadow: 0 24px 70px rgba(65, 54, 35, 0.14);
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "Poppins", system-ui, sans-serif;
  --script: "Sacramento", cursive;
  --radius-lg: 36px;
  --radius-md: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--sans);
  line-height: 1.65;
}
body.is-locked { overflow: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 9999;
  transform: translateY(-180%);
  background: var(--ink);
  color: white;
  padding: .8rem 1rem;
  border-radius: 999px;
}
.skip-link:focus { transform: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.secret-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 24px;
  overflow: auto;
  background:
    radial-gradient(circle at 14% 15%, rgba(242,207,104,.72), transparent 26%),
    radial-gradient(circle at 86% 18%, rgba(145,190,209,.62), transparent 26%),
    radial-gradient(circle at 78% 88%, rgba(223,120,103,.46), transparent 28%),
    var(--cream);
  transition: opacity .5s ease, visibility .5s ease;
}
.secret-gate.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.gate-card {
  position: relative;
  width: min(680px, 100%);
  padding: clamp(34px, 7vw, 72px);
  text-align: center;
  border: 1px solid rgba(47,52,49,.12);
  border-radius: var(--radius-lg);
  background: rgba(255,250,240,.94);
  box-shadow: var(--shadow);
}
.gate-card::before, .gate-card::after {
  content: "";
  position: absolute;
  width: 64px; height: 64px;
  border: 2px solid var(--gold);
  opacity: .45;
}
.gate-card::before { top: 18px; left: 18px; border-right: 0; border-bottom: 0; border-radius: 18px 0 0 0; }
.gate-card::after { right: 18px; bottom: 18px; border-left: 0; border-top: 0; border-radius: 0 0 18px 0; }

.mini-tag, .eyebrow, .panel-label {
  display: inline-block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mini-tag {
  padding: .45rem .8rem;
  border-radius: 999px;
  background: var(--butter);
}
.script-name {
  margin: 8px 0 -12px;
  color: var(--coral);
  font-family: var(--script);
  font-size: clamp(4rem, 11vw, 7rem);
  line-height: 1;
}
.gate-card h1 {
  margin: 0 auto 18px;
  max-width: 580px;
  font-family: var(--serif);
  font-size: clamp(2.25rem, 6vw, 4.3rem);
  line-height: 1.02;
  font-weight: 400;
}
.gate-card > p:not(.script-name) {
  max-width: 570px;
  margin: 0 auto 22px;
  color: var(--muted);
  font-size: 1.04rem;
}
.secret-note {
  margin: 25px 0;
  padding: 18px;
  border: 1px dashed rgba(47,52,49,.32);
  border-radius: 16px;
  background: rgba(242,207,104,.16);
  font-size: .94rem;
}
.secret-note strong { display: block; }

.site-shell { opacity: 1; transition: opacity .45s ease; }
.site-shell[aria-hidden="true"] { opacity: 0; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  padding: 12px clamp(20px, 5vw, 74px);
  border-bottom: 1px solid rgba(47,52,49,.1);
  background: rgba(247,240,223,.88);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
.brand-script { color: var(--coral); font-family: var(--script); font-size: 2.25rem; line-height: 1; }
.brand-year { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.3vw, 34px); }
.site-nav a {
  position: relative;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
}
.site-nav a:not(.nav-rsvp)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -5px;
  height: 2px;
  background: var(--coral);
  transition: right .25s ease;
}
.site-nav a:hover::after, .site-nav a:focus-visible::after { right: 0; }
.nav-rsvp {
  padding: .7rem 1.2rem;
  border-radius: 999px;
  background: var(--ink);
  color: white;
}
.menu-toggle { display: none; border: 0; background: none; padding: 8px; }
.menu-toggle span:not(.sr-only) { display: block; width: 26px; height: 2px; margin: 5px; background: var(--ink); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(400px, .94fr);
  gap: clamp(40px, 7vw, 100px);
  align-items: center;
  min-height: calc(100svh - 82px);
  padding: clamp(76px, 9vw, 130px) clamp(22px, 6.5vw, 105px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  width: 440px; height: 440px;
  right: -210px; top: 8%;
  border: 70px solid rgba(145,190,209,.25);
  border-radius: 50%;
}
.hero-copy { position: relative; z-index: 2; max-width: 760px; }
.eyebrow { color: var(--leaf); }
.hero h1, .section-heading h2, .memory-copy h2, .travel-copy h2, .favorites-card h2,
.rsvp-copy h2, .finale h2 {
  margin: 15px 0 22px;
  font-family: var(--serif);
  font-size: clamp(3rem, 6.4vw, 6.8rem);
  line-height: .94;
  font-weight: 400;
  letter-spacing: -.025em;
}
.hero h1 em { display: block; color: var(--coral); font-weight: 400; }
.hero-lede { max-width: 680px; font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
.hero-turn { margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: .86rem 1.45rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.button:hover, .button:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(47,52,49,.16); }
.button-primary { background: var(--ink); color: white; }
.button-secondary { background: transparent; color: var(--ink); }
.button-secondary:hover { background: var(--paper); }
.surprise-reminder {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  color: var(--muted);
  font-size: .86rem;
}

.hero-collage {
  position: relative;
  z-index: 2;
  min-height: 620px;
}
.photo-card {
  position: absolute;
  width: 55%;
  margin: 0;
  padding: 12px 12px 25px;
  background: var(--paper);
  box-shadow: var(--shadow);
  transform: rotate(-5deg);
}
.photo-one { left: 2%; top: 2%; }
.photo-two { right: 0; bottom: 5%; transform: rotate(7deg); }
.photo-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 4/5;
  padding: 20px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(145,190,209,.45), rgba(242,207,104,.25)),
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(255,255,255,.22) 20px 40px);
  color: rgba(47,52,49,.66);
}
.photo-two .photo-placeholder { background: linear-gradient(135deg, rgba(223,120,103,.3), rgba(242,207,104,.35)); }
.photo-card figcaption {
  padding-top: 10px;
  text-align: center;
  font-family: var(--script);
  font-size: 1.55rem;
}
.hero-90 {
  position: absolute;
  top: 36%; left: 35%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: var(--butter);
  box-shadow: 0 20px 45px rgba(69,52,18,.18);
  transform: rotate(-4deg);
}
.hero-90 span { font-family: var(--serif); font-size: 5.7rem; line-height: .8; }
.hero-90 small { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.shopping-tag {
  position: absolute;
  right: 13%; top: 8%;
  z-index: 5;
  padding: 15px 18px 12px 28px;
  background: var(--coral);
  color: white;
  box-shadow: 0 12px 30px rgba(74,35,29,.22);
  transform: rotate(6deg);
}
.shopping-tag::before {
  content: "";
  position: absolute;
  left: 8px; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cream);
  transform: translateY(-50%);
}
.shopping-tag span, .shopping-tag strong { display: block; }
.shopping-tag span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }

.marquee { overflow: hidden; padding: 15px 0; background: var(--ink); color: var(--cream); }
.marquee-track {
  display: flex;
  gap: 28px;
  width: max-content;
  align-items: center;
  animation: marquee 30s linear infinite;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.marquee-track b { color: var(--butter); }
@keyframes marquee { to { transform: translateX(-50%); } }

.section { padding: clamp(86px, 11vw, 150px) clamp(22px, 7vw, 120px); }
.section-heading { max-width: 900px; margin-bottom: 65px; }
.section-heading h2, .memory-copy h2, .travel-copy h2, .favorites-card h2,
.rsvp-copy h2, .finale h2 { font-size: clamp(2.6rem, 5.4vw, 5.7rem); }
.centered { margin-left: auto; margin-right: auto; text-align: center; }
.centered p { max-width: 640px; margin: auto; color: var(--muted); }

.story { background: var(--paper); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .7fr); gap: clamp(45px, 9vw, 120px); align-items: start; }
.story-copy { max-width: 720px; font-size: 1.08rem; }
.dropcap::first-letter {
  float: left;
  margin: .08em .12em 0 0;
  color: var(--coral);
  font-family: var(--serif);
  font-size: 4.6rem;
  line-height: .72;
}
blockquote {
  margin: 36px 0 0;
  padding-left: 24px;
  border-left: 4px solid var(--butter);
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 3.1rem);
  line-height: 1.06;
}
.receipt-card {
  padding: 35px 28px;
  background: #fffdf6;
  filter: drop-shadow(0 18px 30px rgba(46,39,27,.12));
  clip-path: polygon(0 0,100% 0,100% 96%,97% 100%,93% 96%,89% 100%,85% 96%,81% 100%,77% 96%,73% 100%,69% 96%,65% 100%,61% 96%,57% 100%,53% 96%,49% 100%,45% 96%,41% 100%,37% 96%,33% 100%,29% 96%,25% 100%,21% 96%,17% 100%,13% 96%,9% 100%,5% 96%,0 100%);
}
.receipt-top { text-align: center; padding-bottom: 25px; border-bottom: 1px dashed #aaa; }
.receipt-top span, .receipt-top small { display: block; }
.receipt-top span { font-weight: 700; letter-spacing: .12em; }
.receipt-card ul { padding: 0; margin: 25px 0; list-style: none; }
.receipt-card li { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px dotted #bbb; font-size: .9rem; }
.receipt-card li strong { text-align: right; }
.receipt-total { display: flex; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 2px solid var(--ink); }
.receipt-total strong { text-align: right; }

.memory-section { background: var(--sky); }
.memory-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  max-width: 1200px;
  margin: auto;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.memory-copy { padding: clamp(40px, 7vw, 90px); }
.memory-copy p { max-width: 690px; }
.prompt-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0; }
.prompt-chips span { padding: .62rem .85rem; border-radius: 999px; background: rgba(145,190,209,.22); font-size: .84rem; font-weight: 600; }
.memory-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 45px;
  background: var(--coral);
  color: white;
}
.memory-number { font-family: var(--serif); font-size: clamp(8rem, 18vw, 15rem); line-height: .72; }
.memory-visual p { margin: 25px 0 0; font-size: 1.2rem; font-weight: 700; line-height: 1.45; text-transform: uppercase; letter-spacing: .15em; }

.details { background: var(--cream); }
.detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.detail-card { min-height: 240px; padding: 30px; border: 1px solid rgba(47,52,49,.1); border-radius: var(--radius-md); background: rgba(255,250,240,.74); }
.detail-card:nth-child(2) { background: rgba(242,207,104,.32); }
.detail-card:nth-child(3) { background: rgba(145,190,209,.3); }
.detail-card:nth-child(4) { background: rgba(223,120,103,.22); }
.detail-icon { font-size: 2rem; }
.detail-card h3 { margin: 22px 0 5px; font-family: var(--serif); font-size: 1.8rem; font-weight: 400; }
.detail-card p { color: var(--muted); }
.countdown { max-width: 880px; margin: 60px auto 0; padding: 34px; text-align: center; border-radius: var(--radius-md); background: var(--ink); color: white; }
.countdown > p { margin-top: 0; color: var(--butter); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.countdown-grid div { padding: 15px; border-left: 1px solid rgba(255,255,255,.16); }
.countdown-grid div:first-child { border-left: 0; }
.countdown-grid strong, .countdown-grid span { display: block; }
.countdown-grid strong { font-family: var(--serif); font-size: clamp(2.3rem, 6vw, 4.8rem); line-height: 1; }
.countdown-grid span { margin-top: 8px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }

.travel { background: var(--leaf); color: white; }
.travel-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 10vw, 140px); align-items: center; }
.travel .eyebrow { color: var(--butter); }
.travel-copy p { max-width: 680px; color: rgba(255,255,255,.78); }
.text-link { display: inline-flex; gap: 10px; margin-top: 18px; font-weight: 700; text-underline-offset: 5px; }
.travel-notes { display: grid; gap: 14px; }
.travel-notes div { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; padding: 22px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(255,255,255,.08); }
.travel-notes span { font-size: 1.65rem; }
.travel-notes p { margin: 0; color: rgba(255,255,255,.8); }
.travel-notes strong { color: white; }

.favorites { background: var(--butter); }
.favorites-card { position: relative; max-width: 1000px; margin: auto; padding: clamp(40px, 7vw, 85px); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
.favorites-card::after {
  content: "FAVORITES?";
  position: absolute;
  right: -25px; bottom: -20px;
  color: rgba(223,120,103,.12);
  font-family: var(--serif);
  font-size: clamp(5rem, 12vw, 10rem);
  transform: rotate(-7deg);
}
.favorites-card > * { position: relative; z-index: 2; }
.favorites-card p { max-width: 720px; font-size: 1.08rem; }
.favorites-stamp { display: inline-block; margin-top: 28px; padding: 10px 15px; border: 3px solid var(--coral); color: var(--coral); font-weight: 800; letter-spacing: .08em; transform: rotate(-3deg); }
.favorites-card small { display: block; margin-top: 10px; color: var(--muted); }

.rsvp { background: var(--paper); }
.rsvp-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .65fr); gap: clamp(50px, 9vw, 120px); align-items: center; }
.rsvp-copy p { max-width: 680px; }
.promise-box { max-width: 680px; margin-top: 28px; padding: 22px; border: 1px dashed rgba(47,52,49,.34); border-radius: 18px; background: rgba(242,207,104,.16); }
.promise-box p { margin: 6px 0 0; font-size: .9rem; }
.rsvp-panel { padding: clamp(32px, 5vw, 58px); border-radius: var(--radius-lg); background: var(--coral); color: white; box-shadow: var(--shadow); }
.panel-label { color: var(--butter); }
.rsvp-panel h3 { margin: 15px 0; font-family: var(--serif); font-size: 2.5rem; line-height: 1.02; font-weight: 400; }
.rsvp-panel p { color: rgba(255,255,255,.82); }
.rsvp-panel .button { width: 100%; margin: 15px 0; background: white; color: var(--ink); border-color: white; }
.rsvp-panel small { display: block; color: rgba(255,255,255,.72); }
.rsvp-panel small a { color: white; }

.finale { position: relative; overflow: hidden; text-align: center; background: var(--cream); }
.finale::before, .finale::after {
  content: "";
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
}
.finale::before { left: -170px; top: -100px; background: rgba(145,190,209,.32); }
.finale::after { right: -170px; bottom: -140px; background: rgba(223,120,103,.25); }
.finale-inner { position: relative; z-index: 2; max-width: 850px; margin: auto; }
.finale h2 { margin-top: 0; }
.finale p:not(.script-name) { max-width: 700px; margin: 0 auto 30px; }

footer { display: flex; justify-content: space-between; gap: 30px; padding: 28px clamp(22px, 6vw, 90px); background: var(--ink); color: rgba(255,255,255,.68); font-size: .82rem; }
footer p { margin: 0; }
footer a { color: white; }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; }
  .hero-collage { min-height: 580px; max-width: 660px; width: 100%; margin: auto; }
  .story-grid, .travel-layout, .rsvp-layout { grid-template-columns: 1fr; }
  .receipt-card { max-width: 550px; }
  .detail-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  .site-header { min-height: 70px; }
  .brand-year { display: none; }
  .menu-toggle { display: block; position: relative; z-index: 3; }
  .site-nav {
    position: fixed;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 24px;
    background: var(--cream);
    transform: translateX(100%);
    transition: transform .35s ease;
  }
  .site-nav.is-open { transform: none; }
  .site-nav a { font-family: var(--serif); font-size: 1.8rem; }
  .nav-rsvp { font-family: var(--sans) !important; font-size: 1rem !important; }
  .hero { min-height: auto; padding-top: 75px; }
  .hero h1 { font-size: clamp(3.2rem, 15vw, 5.4rem); }
  .hero-collage { min-height: 500px; }
  .hero-90 { width: 145px; height: 145px; }
  .hero-90 span { font-size: 4.4rem; }
  .memory-card { grid-template-columns: 1fr; }
  .memory-visual { min-height: 330px; }
  .memory-number { font-size: 10rem; }
}

@media (max-width: 560px) {
  .gate-card { padding: 45px 24px; }
  .gate-card::before, .gate-card::after { width: 42px; height: 42px; }
  .hero-actions .button { width: 100%; }
  .hero-collage { min-height: 430px; }
  .photo-card { width: 63%; }
  .photo-one { left: 0; }
  .photo-two { right: 0; }
  .hero-90 { top: 33%; left: 32%; width: 125px; height: 125px; }
  .hero-90 span { font-size: 3.8rem; }
  .hero-90 small { font-size: .56rem; }
  .shopping-tag { right: 4%; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-card { min-height: auto; }
  .countdown { padding: 24px 12px; }
  .countdown-grid { gap: 3px; }
  .countdown-grid div { padding: 8px 3px; }
  .countdown-grid strong { font-size: 2rem; }
  .countdown-grid span { font-size: .55rem; }
  footer { flex-direction: column; }
}


/* =========================================================
   v0.8.1 APPROVED REFINEMENTS
   ========================================================= */

/* Hero: original content + contained balloon visual */
.hero {
  min-height: calc(100svh - 82px);
  padding-top: clamp(52px, 6vw, 82px);
  padding-bottom: clamp(52px, 6vw, 82px);
}

.hero-balloons {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  min-height: 500px;
  overflow: hidden;
  pointer-events: none;
}

.balloon-main {
  position: relative;
  width: min(82%, 520px);
  max-height: 520px;
  object-fit: contain;
  filter: drop-shadow(0 22px 28px rgba(47,52,49,.16));
  animation: heroHelium 12s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroHelium {
  0%   { transform: translate3d(0, 10px, 0) rotate(-1deg); }
  50%  { transform: translate3d(-7px, -6px, 0) rotate(.4deg); }
  100% { transform: translate3d(5px, -18px, 0) rotate(-.4deg); }
}

/* Polaroids are now an intentional transition, not part of the hero */
.polaroid-transition {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 610px;
  padding: 54px 22px 84px;
  overflow: hidden;
  background: var(--cream);
}

.transition-collage {
  position: relative;
  width: min(620px, 92vw);
  min-height: 500px;
}

.transition-collage .photo-card {
  width: 48%;
}

.transition-collage .photo-one {
  left: 4%;
  top: 2%;
}

.transition-collage .photo-two {
  right: 4%;
  bottom: 2%;
}

.transition-collage .hero-90 {
  top: 31%;
  left: 35%;
}

.transition-collage .shopping-tag {
  right: 7%;
  top: 8%;
}

/* 90 Memories: balloon artwork with words behind the strings */
.memory-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: 28px;
  overflow: hidden;
  background: var(--coral);
  color: white;
}

.memory-words {
  position: relative;
  z-index: 1;
  margin-top: 120px;
  text-align: center;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.memory-balloons {
  position: absolute;
  z-index: 2;
  top: 6%;
  left: 50%;
  width: min(82%, 330px);
  max-height: 470px;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 24px rgba(82,37,29,.16));
  animation: memoryHelium 13s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes memoryHelium {
  0%   { transform: translateX(-50%) translateY(8px) rotate(-.8deg); }
  100% { transform: translateX(-50%) translateY(-12px) rotate(.6deg); }
}

/* Celebrate From Anywhere: same copy, stronger visual hierarchy */
.anywhere {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: white;
}

.anywhere::before {
  content: "90";
  position: absolute;
  right: -1vw;
  top: -7vw;
  color: rgba(255,255,255,.035);
  font-family: var(--serif);
  font-size: clamp(15rem, 35vw, 34rem);
  line-height: 1;
  pointer-events: none;
}

.anywhere-layout {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 1180px;
  margin: 0 auto;
}

.anywhere-intro {
  max-width: 900px;
  margin: 0 auto 54px;
  text-align: center;
}

.anywhere .eyebrow {
  color: var(--butter);
}

.anywhere h2 {
  margin: 15px auto 24px;
  max-width: 980px;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5.5vw, 5.8rem);
  line-height: .96;
  font-weight: 400;
}

.anywhere-intro p {
  max-width: 760px;
  margin: 0 auto;
  color: rgba(255,255,255,.72);
  font-size: 1.06rem;
}

.anywhere-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.anywhere-options article {
  position: relative;
  min-height: 260px;
  padding: 30px;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  color: var(--ink);
  box-shadow: 0 20px 50px rgba(0,0,0,.14);
}

.anywhere-options article:nth-child(1) { background: var(--paper); }
.anywhere-options article:nth-child(2) { background: var(--sky); }
.anywhere-options article:nth-child(3) { background: var(--butter); }

.anywhere-options article > span {
  display: block;
  margin-bottom: 34px;
  color: var(--coral);
  font-family: var(--serif);
  font-size: 3.8rem;
  line-height: .8;
}

.anywhere-options h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
}

.anywhere-options p {
  margin: 0;
  color: rgba(47,52,49,.74);
}

.anywhere-options .button {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 220px;
  margin-top: 18px;
  background: var(--coral);
  border-color: var(--coral);
  color: white;
}

/* Previous countdown restored, with surprise status retained */
.countdown {
  max-width: 880px;
  margin: 60px auto 0;
  padding: 34px;
  text-align: center;
  border-radius: var(--radius-md);
  background: var(--ink);
  color: white;
  box-shadow: none;
}

.countdown > p {
  margin-top: 0;
  color: var(--butter);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.countdown-grid div {
  padding: 15px;
  border-left: 1px solid rgba(255,255,255,.16);
}

.countdown-grid div:first-child {
  border-left: 0;
}

.countdown-grid strong,
.countdown-grid span {
  display: block;
}

.countdown-grid strong {
  font-family: var(--serif);
  font-size: clamp(2.3rem, 6vw, 4.8rem);
  line-height: 1;
}

.countdown-grid span {
  margin-top: 8px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.surprise-status {
  display: inline-block;
  margin-top: 24px;
  padding: .5rem .8rem;
  border-radius: 999px;
  background: rgba(242,207,104,.14);
  color: var(--butter);
  font-size: .78rem;
  font-weight: 700;
}

/* Travel layout preserved from current build */
.travel-layout {
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
}

.travel-actions {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.travel-action-card {
  min-height: 330px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  background: rgba(255,255,255,.08);
}

.travel-action-icon {
  display: inline-grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--butter);
  color: var(--ink);
  font-size: 1.45rem;
}

.travel-action-card h3 {
  margin: 24px 0 8px;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
}

.travel-action-card p {
  min-height: 96px;
  color: rgba(255,255,255,.78);
}

.button-light {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--ink);
}

.travel-faq {
  max-width: 1000px;
  margin: 60px auto 0;
  border-top: 1px solid rgba(255,255,255,.22);
}

.travel-faq details {
  border-bottom: 1px solid rgba(255,255,255,.22);
}

.travel-faq summary {
  position: relative;
  cursor: pointer;
  padding: 22px 40px 22px 0;
  list-style: none;
  font-weight: 700;
}

.travel-faq summary::-webkit-details-marker {
  display: none;
}

.travel-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 19px;
  font-size: 1.6rem;
  font-weight: 400;
}

.travel-faq details[open] summary::after {
  content: "−";
}

.travel-faq details p {
  max-width: 760px;
  margin: -4px 0 22px;
  color: rgba(255,255,255,.76);
}

.travel-surprise-note {
  max-width: 760px;
  margin: 36px auto 0;
  padding: 20px 22px;
  text-align: center;
  border-radius: 18px;
  background: rgba(242,207,104,.13);
}

.travel-surprise-note p {
  margin: 4px 0 0;
  color: rgba(255,255,255,.76);
}

@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-balloons {
    min-height: 420px;
    height: auto;
  }

  .balloon-main {
    width: min(72%, 450px);
  }

  .transition-collage {
    min-height: 480px;
  }

  .anywhere-options {
    grid-template-columns: 1fr;
  }

  .anywhere-options .button {
    grid-column: 1;
  }

  .travel-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .hero-balloons {
    min-height: 350px;
  }

  .balloon-main {
    width: min(86%, 390px);
  }

  .polaroid-transition {
    min-height: 520px;
    padding-top: 34px;
  }

  .transition-collage {
    min-height: 430px;
  }

  .memory-visual {
    min-height: 420px;
  }

  .memory-balloons {
    width: min(72%, 280px);
  }

  .memory-words {
    margin-top: 100px;
  }

  .travel-actions {
    grid-template-columns: 1fr;
  }

  .travel-action-card {
    min-height: auto;
  }

  .travel-action-card p {
    min-height: auto;
  }
}

@media (max-width: 560px) {
  .transition-collage .photo-card {
    width: 60%;
  }

  .transition-collage .photo-one {
    left: 0;
  }

  .transition-collage .photo-two {
    right: 0;
  }

  .transition-collage .hero-90 {
    top: 33%;
    left: 31%;
  }

  .countdown {
    padding: 24px 12px;
  }

  .countdown-grid {
    gap: 3px;
  }

  .countdown-grid div {
    padding: 8px 3px;
  }

  .countdown-grid strong {
    font-size: 2rem;
  }

  .countdown-grid span {
    font-size: .55rem;
  }
}

/* =========================================================
   v0.8.2 HERO CONTAINMENT FIX
   ========================================================= */

@media (min-width: 781px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(340px, .94fr);
    align-items: center;
    min-height: calc(100svh - 82px);
    gap: clamp(28px, 5vw, 78px);
    overflow: hidden;
  }

  .hero-copy,
  .hero-balloons {
    min-width: 0;
  }

  .hero-balloons {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    height: auto;
    max-height: calc(100svh - 150px);
    overflow: hidden;
  }

  .hero-balloons .balloon-main {
    width: min(88%, 500px);
    max-width: 100%;
    max-height: min(70vh, 520px);
    object-fit: contain;
  }
}

@media (max-width: 780px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-balloons {
    min-height: 340px;
    max-height: none;
  }

  .hero-balloons .balloon-main {
    width: min(82%, 390px);
    max-height: 390px;
  }
}

/* =========================================================
   v0.8.3 HERO GRID ROOT-CAUSE FIX
   hero-dots was occupying the first grid cell.
   ========================================================= */

.hero-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-copy {
  grid-column: 1;
  grid-row: 1;
}

.hero-balloons {
  grid-column: 2;
  grid-row: 1;
}

@media (max-width: 780px) {
  .hero-copy {
    grid-column: 1;
    grid-row: 1;
  }

  .hero-balloons {
    grid-column: 1;
    grid-row: 2;
  }
}

/* =========================================================
   v0.8.4 POLAROID PHOTO CONTENT
   ========================================================= */

.polaroid-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--paper);
}

.polaroid-photo-birthday {
  object-position: 50% 42%;
}

.polaroid-photo-family {
  object-position: 60% 50%;
}


/* v0.8.5 Life, Lately mixed media strip */
.life-lately{position:relative;overflow:hidden;padding:clamp(74px,9vw,120px) 0 clamp(82px,10vw,130px);background:var(--cream)}
.life-lately-heading{max-width:760px;margin:0 auto 42px;padding:0 clamp(22px,6vw,90px);text-align:center}
.life-lately-heading h2{margin:12px 0 14px;font-family:var(--serif);font-size:clamp(3rem,6vw,5.8rem);line-height:.95;font-weight:400}
.life-lately-heading p{max-width:620px;margin:0 auto;color:var(--muted)}
.memory-strip-wrap{position:relative}
.memory-strip{display:flex;gap:18px;overflow-x:auto;padding:18px clamp(36px,7vw,116px) 28px;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-inline:contain}
.memory-strip::-webkit-scrollbar{display:none}
.strip-item{position:relative;flex:0 0 auto;height:clamp(280px,32vw,390px);margin:0;overflow:hidden;scroll-snap-align:center;border:6px solid var(--paper);border-radius:20px;background:var(--paper);box-shadow:0 16px 40px rgba(65,54,35,.11)}
.strip-portrait{width:clamp(210px,23vw,285px)}
.strip-wide{width:clamp(330px,38vw,500px)}
.strip-item img,.strip-item video{display:block;width:100%;height:100%;object-fit:cover;background:var(--ink)}
.strip-item img{filter:saturate(.90) contrast(.97) brightness(1.02) sepia(.035);transition:filter .35s ease,transform .45s ease}
.strip-item:hover img,.strip-item:focus-within img{filter:saturate(1) contrast(1) brightness(1);transform:scale(1.018)}
.strip-item video{filter:saturate(.94) contrast(.98) brightness(1.01)}
.strip-arrow{position:absolute;top:50%;z-index:4;display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(47,52,49,.22);border-radius:50%;background:rgba(255,250,240,.94);color:var(--ink);font:inherit;font-size:1.3rem;cursor:pointer;box-shadow:0 10px 28px rgba(65,54,35,.12);transform:translateY(-50%);transition:transform .2s ease,background .2s ease}
.strip-arrow:hover,.strip-arrow:focus-visible{background:var(--butter);transform:translateY(-50%) scale(1.05)}
.strip-prev{left:clamp(10px,2vw,30px)} .strip-next{right:clamp(10px,2vw,30px)}
.life-lately-close{margin:22px 0 0;padding:0 22px;text-align:center;color:var(--coral);font-family:var(--script);font-size:clamp(2rem,4vw,3rem);line-height:1}
@media(max-width:780px){.memory-strip{gap:12px;padding-left:22px;padding-right:22px}.strip-item{height:330px;border-width:5px;border-radius:16px}.strip-portrait{width:235px}.strip-wide{width:330px}.strip-arrow{display:none}}

/* =========================================================
   v1.0 LAUNCH POLISH
   Performance-safe media interaction refinements only.
   ========================================================= */

.strip-item img,
.polaroid-photo {
  backface-visibility: hidden;
}

@media (hover: none) {
  .strip-item:hover img {
    filter: saturate(.90) contrast(.97) brightness(1.02) sepia(.035);
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .balloon-main,
  .memory-balloons {
    animation: none !important;
  }
}

/* =========================================================
   v1.2.1 FINAL DELIGHT POLISH
   ========================================================= */

/* Hero balloons: larger, still contained */
@media (min-width: 781px) {
  .hero-balloons .balloon-main {
    width: min(100%, 650px);
    max-height: min(82vh, 650px);
  }
}

@media (max-width: 780px) {
  .hero-balloons .balloon-main {
    width: min(94%, 460px);
    max-height: 460px;
  }
}

/* One-time soft gold confetti at page end */
.celebration-confetti {
  position: fixed;
  inset: 0;
  z-index: 950;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -30px;
  width: 8px;
  height: 15px;
  border-radius: 2px;
  opacity: 0;
  background: var(--gold);
  animation: confettiFall var(--duration, 4s) cubic-bezier(.2,.65,.3,1) forwards;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}

.confetti-piece:nth-child(3n) {
  background: var(--butter);
}

.confetti-piece:nth-child(4n) {
  background: #d9b55c;
}

@keyframes confettiFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0) rotate(0deg);
  }
  8% {
    opacity: .9;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift, 20px), 108vh, 0) rotate(var(--spin, 540deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .celebration-confetti {
    display: none;
  }
}


/* v1.2.2 confetti visibility refinement */
.confetti-piece {
  width: 9px;
  height: 17px;
  opacity: 0;
  box-shadow: 0 1px 2px rgba(47,52,49,.08);
}


/* =========================================================
   v1.2.3 CONFETTI + FOOTER RELIABILITY
   ========================================================= */

.confetti-piece {
  width: 10px;
  height: 18px;
}

.confetti-piece:nth-child(5n) {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

footer #backToTop {
  cursor: pointer;
  text-underline-offset: 4px;
}