/* ==========================================================
   The BTS Dulhan — luxury, bold, a little cheesy. On purpose.
   ========================================================== */
:root {
  --cream: #f7efe6;
  --sand: #efe2d3;
  --blush: #f4d3cc;
  --ink: #17110f;
  --ink-soft: #4a3f3a;
  --hibiscus: #d42e5b;
  --hibiscus-deep: #a81c44;
  --gold: #c8a25a;
  --lagoon: #17524f;
  --white: #fffaf5;

  --display: "Bodoni Moda", "Didot", serif;
  --script: "Mrs Saint Delafield", cursive;
  --sans: "Manrope", system-ui, sans-serif;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --radius: 22px;
  --gutter: clamp(16px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--hibiscus); color: var(--white); }

/* film grain for that editorial feel */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999;
  opacity: .06; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.display {
  font-family: var(--display);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.02em;
  margin: 0;
}
.display em { font-style: italic; font-weight: 400; }
.xl { font-size: clamp(3.2rem, 11vw, 10.5rem); }
.lg { font-size: clamp(2.6rem, 7vw, 6.2rem); }
.md { font-size: clamp(2rem, 4.6vw, 3.8rem); }
.script {
  font-family: var(--script);
  font-weight: 400;
  color: var(--hibiscus);
  font-size: 1.15em;
  line-height: .5;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .7em;
  margin: 0 0 1.4rem;
}
.eyebrow::before { content: ""; width: 34px; height: 1.5px; background: currentColor; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 34em; color: var(--ink-soft); }
.hot { color: var(--hibiscus); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; }
.pad { padding: clamp(80px, 12vw, 170px) 0; }
.dark { background: var(--ink); color: var(--cream); }
.dark .lede { color: #cdbfb4; }
.pink { background: var(--hibiscus); color: var(--white); }
.pink .lede { color: #ffe3ea; }
.blush { background: var(--blush); }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--ink); --fg: var(--cream);
  position: relative; display: inline-flex; align-items: center; gap: .8em;
  padding: 1.05em 1.9em; border-radius: 999px; border: 0;
  background: var(--bg); color: var(--fg);
  font-weight: 700; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase;
  overflow: hidden; isolation: isolate;
  transition: transform .4s var(--ease), color .4s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--hibiscus); border-radius: inherit;
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { transform: translateY(-2px) rotate(-1deg); color: var(--white); }
.btn .arrow { transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }
.btn.light { --bg: var(--cream); --fg: var(--ink); }
.btn.hotbtn { --bg: var(--hibiscus); --fg: var(--white); }
.btn.hotbtn::before { background: var(--ink); }
.btn.ghost { --bg: transparent; --fg: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  transition: background .4s, padding .4s, color .4s, box-shadow .4s;
  color: var(--white);
}
.nav.solid, body.light-nav .nav {
  color: var(--ink);
}
.nav.solid {
  background: rgba(247, 239, 230, .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding-top: 12px; padding-bottom: 12px;
  box-shadow: 0 1px 0 rgba(23, 17, 15, .08);
}
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.35rem; letter-spacing: .02em; }
.logo img { width: 38px; height: 38px; border-radius: 50%; background: var(--cream); }
.logo em { font-style: italic; color: var(--hibiscus); }
.nav-links { display: flex; gap: clamp(18px, 2.6vw, 38px); align-items: center; }
.nav-links a:not(.btn) {
  font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  position: relative; padding: 6px 0;
}
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--hibiscus); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav-links a:not(.btn):hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav .btn { padding: .85em 1.4em; font-size: .72rem; }
.burger { display: none; background: none; border: 0; width: 44px; height: 44px; position: relative; z-index: 102; }
.burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 26px; }
body.menu-open .burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
body.menu-open .burger span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 101; background: var(--hibiscus); color: var(--white);
  display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter);
  clip-path: circle(0 at calc(100% - 40px) 40px);
  transition: clip-path .7s var(--ease);
}
body.menu-open .mobile-menu { clip-path: circle(150% at calc(100% - 40px) 40px); }
body.menu-open .nav { color: var(--white); background: transparent; box-shadow: none; }
.mobile-menu a { font-family: var(--display); font-size: clamp(2.6rem, 12vw, 4.4rem); line-height: 1.12; font-style: italic; }
.mobile-menu small { margin-top: 30px; letter-spacing: .2em; text-transform: uppercase; font-size: .75rem; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: block; }
}

/* ---------- hero (home) ---------- */
.hero {
  min-height: 100svh; position: relative; display: flex; align-items: flex-end;
  color: var(--white); overflow: hidden; background: var(--ink);
}
.hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,17,15,.35) 0%, rgba(23,17,15,.05) 35%, rgba(23,17,15,.75) 100%);
}
.hero-content { position: relative; z-index: 2; padding-bottom: clamp(40px, 8vh, 90px); width: 100%; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: inline-block; transform: translateY(110%); animation: rise 1.1s var(--ease) forwards; }
.hero h1 .line:nth-child(2) > span { animation-delay: .12s; }
.hero h1 .line:nth-child(3) > span { animation-delay: .24s; }
@keyframes rise { to { transform: translateY(0); } }
.hero-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px; margin-top: 34px; }
.hero-foot p { max-width: 30em; margin: 0; color: #f3e6dc; font-size: 1.08rem; }
.rotator { display: inline-grid; vertical-align: bottom; }
.rotator > span { grid-area: 1 / 1; opacity: 0; transform: translateY(40%) rotate(4deg); transition: opacity .6s, transform .6s var(--ease); white-space: nowrap; }
.rotator > span.on { opacity: 1; transform: none; }

.scroll-cue {
  position: absolute; right: var(--gutter); top: 50%; z-index: 2;
  writing-mode: vertical-rl; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  display: flex; align-items: center; gap: 14px;
}
.scroll-cue::after { content: ""; width: 1.5px; height: 70px; background: currentColor; animation: drip 2s infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 700px) { .scroll-cue { display: none; } }

/* sub-page hero */
.page-hero { padding: clamp(140px, 20vw, 220px) 0 clamp(60px, 8vw, 110px); position: relative; overflow: hidden; }
.page-hero .display { max-width: 12ch; }
.page-hero .lede { margin-top: 30px; }
.page-hero .sticker { position: absolute; right: var(--gutter); top: 140px; }
@media (max-width: 800px) { .page-hero .sticker { display: none; } }

/* ---------- marquee ---------- */
.marquee { background: var(--hibiscus); color: var(--white); overflow: hidden; padding: 18px 0; transform: rotate(-1.5deg); margin: -10px -20px; position: relative; z-index: 3; box-shadow: 0 14px 40px -18px rgba(168,28,68,.6); }
.marquee.ink { background: var(--ink); color: var(--cream); transform: rotate(1.2deg); }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font-family: var(--display); font-style: italic; font-size: clamp(1.5rem, 3vw, 2.4rem); padding: 0 .55em; white-space: nowrap; }
.marquee b { font-family: var(--sans); font-style: normal; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .55em; vertical-align: middle; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sticker (rotating badge) ---------- */
.sticker { width: 150px; height: 150px; position: relative; display: grid; place-items: center; }
.sticker svg { position: absolute; inset: 0; animation: spin 18s linear infinite; }
.sticker text { font-family: var(--sans); font-size: 11.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; fill: currentColor; }
.sticker .heart { font-size: 2rem; color: var(--hibiscus); animation: beat 1.4s infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }

/* ---------- choose-your-adventure split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 60px; }
.door {
  position: relative; border-radius: var(--radius); overflow: hidden; min-height: clamp(440px, 64vh, 680px);
  display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 3vw, 44px);
  color: var(--white); isolation: isolate; transition: flex .7s var(--ease);
}
.door > img, .door > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.door::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(23,17,15,.85)); transition: background .6s; }
.door:hover > img, .door:hover > video { transform: scale(1.07); }
.door:hover::before { background: linear-gradient(180deg, rgba(212,46,91,.15) 0%, rgba(168,28,68,.9)); }
.door .num { position: absolute; top: 26px; left: clamp(24px, 3vw, 44px); font-size: .75rem; letter-spacing: .3em; font-weight: 700; }
.door .tag { position: absolute; top: 22px; right: 22px; background: var(--cream); color: var(--ink); border-radius: 999px; padding: 8px 14px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; transform: rotate(6deg); }
.door h3 { margin-bottom: 12px; }
.door p { margin: 0 0 22px; max-width: 26em; color: #f6e8de; }
.door .go { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; }
.door .go i { width: 46px; height: 46px; border-radius: 50%; background: var(--white); color: var(--ink); display: grid; place-items: center; font-style: normal; transition: transform .5s var(--ease), background .4s; }
.door:hover .go i { transform: rotate(-45deg); background: var(--hibiscus); color: var(--white); }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1.5px solid currentColor; }
.stat { padding: 34px 20px 10px 0; border-right: 1.5px solid rgba(255,250,245,.18); }
.stat:last-child { border-right: 0; }
.stat .n { font-family: var(--display); font-size: clamp(3rem, 6vw, 5.4rem); line-height: 1; }
.stat .n sup { font-size: .4em; color: var(--hibiscus); }
.stat p { margin: 8px 0 0; font-size: .9rem; letter-spacing: .04em; color: #cdbfb4; max-width: 16em; }
@media (max-width: 800px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(2) { border-right: 0; } }

/* ---------- phone reels ---------- */
.reels { display: flex; gap: clamp(14px, 2vw, 26px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 30px var(--gutter) 40px; scrollbar-width: none; cursor: grab; }
.reels::-webkit-scrollbar { display: none; }
.reels.dragging { cursor: grabbing; scroll-snap-type: none; }
.phone {
  flex: 0 0 clamp(210px, 22vw, 290px); aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; position: relative;
  scroll-snap-align: center; background: #000;
  box-shadow: 0 0 0 7px var(--ink), 0 30px 60px -25px rgba(23,17,15,.6);
  transition: transform .6s var(--ease);
  margin: 7px;
}
.phone:nth-child(odd) { transform: rotate(-2deg); }
.phone:nth-child(even) { transform: rotate(2deg) translateY(24px); }
.phone:hover { transform: rotate(0) translateY(-8px) scale(1.03); z-index: 2; }
.phone video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.phone .cap { position: absolute; left: 14px; right: 14px; bottom: 14px; color: var(--white); font-size: .78rem; font-weight: 700; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.phone .cap b { display: block; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.25rem; }
.phone .likes { position: absolute; right: 12px; bottom: 70px; display: flex; flex-direction: column; gap: 14px; color: var(--white); font-size: 1.3rem; text-shadow: 0 1px 8px rgba(0,0,0,.5); align-items: center; }
.phone .likes small { font-size: .62rem; font-weight: 800; }
.phone .notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 34%; height: 20px; border-radius: 20px; background: #000; z-index: 2; }
.phone .mute { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(23,17,15,.55); color: #fff; font-size: .9rem; display: grid; place-items: center; }
.drag-hint { text-align: center; font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; opacity: .6; }

/* ---------- island picker ---------- */
.islands { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.map { position: relative; width: 100%; }
.map svg { width: 100%; height: auto; overflow: visible; }
.map .isle { fill: rgba(255,250,245,.14); stroke: rgba(255,250,245,.6); stroke-width: 1.5; cursor: pointer; transition: fill .4s, transform .5s var(--ease); transform-box: fill-box; transform-origin: center; }
.map .isle:hover { fill: rgba(255,250,245,.35); transform: scale(1.06); }
.map .isle.on { fill: var(--hibiscus); stroke: var(--white); transform: scale(1.08); }
.map .lbl { fill: var(--cream); font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; pointer-events: none; }
.map .home-pin { fill: var(--gold); animation: beat 1.6s infinite; transform-box: fill-box; transform-origin: center; }
.isle-card { min-height: 260px; }
.isle-card .display { margin-bottom: 18px; }
.isle-card p { color: #cdbfb4; font-size: 1.1rem; margin: 0 0 18px; }
.isle-card .chip { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--gold); color: var(--gold); font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.isle-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.isle-btns button { background: none; border: 1.5px solid rgba(255,250,245,.35); border-radius: 999px; padding: 8px 16px; font-size: .78rem; font-weight: 700; color: var(--cream); transition: all .3s; }
.isle-btns button:hover, .isle-btns button.on { background: var(--cream); color: var(--ink); border-color: var(--cream); }
@media (max-width: 900px) { .islands { grid-template-columns: 1fr; } }

/* ---------- testimonials (card stack) ---------- */
.stack { position: relative; height: clamp(320px, 40vh, 360px); max-width: 720px; margin: 50px auto 0; perspective: 1200px; }
.quote-card {
  position: absolute; inset: 0; background: var(--white); border-radius: var(--radius); padding: clamp(28px, 4vw, 54px);
  box-shadow: 0 30px 60px -30px rgba(23,17,15,.35); display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .7s var(--ease), opacity .7s var(--ease); cursor: pointer; user-select: none;
}
.quote-card blockquote { margin: 0; font-family: var(--display); font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.22; }
.quote-card blockquote::before { content: "“"; display: block; font-size: 4.5rem; line-height: .6; color: var(--hibiscus); }
.quote-card cite { font-style: normal; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: .75rem; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.quote-card cite span:last-child { color: var(--hibiscus); letter-spacing: .1em; }
.stack-nav { display: flex; justify-content: center; gap: 12px; margin-top: 30px; }
.stack-nav button { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--ink); background: none; font-size: 1.1rem; transition: all .3s; }
.stack-nav button:hover { background: var(--ink); color: var(--cream); }

/* ---------- editorial image + text ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.duo.rev > :first-child { order: 2; }
.frame { position: relative; border-radius: 300px 300px var(--radius) var(--radius); overflow: hidden; aspect-ratio: 4 / 5.4; }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
.frame-wrap { position: relative; }
.frame-wrap .sticker { position: absolute; bottom: -40px; right: -30px; color: var(--ink); background: var(--cream); border-radius: 50%; }
.dark .frame-wrap .sticker { background: var(--ink); color: var(--cream); }
@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
  .duo.rev > :first-child { order: 0; }
  .frame-wrap .sticker { right: 0; width: 120px; height: 120px; }
}

/* ---------- steps / timeline ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 60px; }
.step { background: var(--white); border-radius: var(--radius); padding: 34px 30px 38px; position: relative; overflow: hidden; transition: transform .5s var(--ease), background .4s, color .4s; }
.step:hover { transform: translateY(-8px); background: var(--ink); color: var(--cream); }
.step .big { font-family: var(--display); font-size: 5rem; line-height: .9; color: var(--hibiscus); font-style: italic; }
.step h4 { font-family: var(--display); font-size: 1.7rem; font-weight: 500; margin: 18px 0 10px; line-height: 1.1; }
.step p { margin: 0; color: inherit; opacity: .78; }
.dark .step { background: #241b18; }
.dark .step:hover { background: var(--hibiscus); color: var(--white); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---------- coverage calculator ---------- */
.calc { background: var(--white); border-radius: calc(var(--radius) + 8px); padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; box-shadow: 0 40px 80px -50px rgba(23,17,15,.45); }
.seg { display: inline-flex; background: var(--sand); border-radius: 999px; padding: 6px; gap: 4px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 12px 22px; border-radius: 999px; font-weight: 800; font-size: .85rem; letter-spacing: .08em; transition: background .35s, color .35s; }
.seg button.on { background: var(--ink); color: var(--cream); }
.calc .readout { font-family: var(--display); font-size: clamp(4rem, 10vw, 8rem); line-height: .9; color: var(--hibiscus); }
.calc .readout small { font-size: .3em; color: var(--ink); font-style: italic; display: block; margin-top: 10px; }
.calc ul { list-style: none; padding: 0; margin: 26px 0 0; }
.calc li { padding: 12px 0; border-bottom: 1px solid rgba(23,17,15,.12); display: flex; gap: 12px; }
.calc li::before { content: "✦"; color: var(--hibiscus); }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

/* ---------- add-ons ---------- */
.addons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 50px; }
.addon { border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 30px; transition: background .4s, color .4s, transform .5s var(--ease); }
.addon:hover { background: var(--hibiscus); border-color: var(--hibiscus); color: var(--white); transform: rotate(-1.5deg); }
.addon .emoji { font-size: 2rem; }
.addon h4 { font-family: var(--display); font-weight: 500; font-size: 1.7rem; margin: 14px 0 8px; }
.addon p { margin: 0 0 16px; opacity: .8; }
.addon .price { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }
@media (max-width: 860px) { .addons { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 900px; margin: 50px auto 0; }
.faq details { border-bottom: 1.5px solid rgba(23,17,15,.15); }
.faq summary { list-style: none; cursor: pointer; padding: 26px 50px 26px 0; position: relative; font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--cream); display: grid; place-items: center; font-family: var(--sans); font-size: 1.3rem; transition: transform .4s var(--ease), background .3s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--hibiscus); }
.faq details p { margin: 0 0 26px; color: var(--ink-soft); max-width: 44em; }

/* ---------- gallery ---------- */
.masonry { columns: 3 280px; column-gap: 16px; margin-top: 50px; }
.masonry figure { margin: 0 0 16px; break-inside: avoid; border-radius: 16px; overflow: hidden; position: relative; cursor: zoom-in; }
.masonry img { width: 100%; transition: transform 1s var(--ease), filter .6s; }
.masonry figure:hover img { transform: scale(1.05); }
.masonry figcaption { position: absolute; left: 14px; bottom: 12px; color: var(--white); font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; opacity: 0; transform: translateY(8px); transition: all .4s var(--ease); text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.masonry figure:hover figcaption { opacity: 1; transform: none; }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(23,17,15,.94); display: none; align-items: center; justify-content: center; padding: 40px 16px; }
.lightbox.open { display: flex; animation: fade .4s; }
.lightbox img { max-height: 88vh; max-width: 92vw; border-radius: 10px; }
.lightbox button { position: absolute; background: var(--cream); border: 0; border-radius: 50%; width: 50px; height: 50px; font-size: 1.2rem; }
.lightbox .close { top: 20px; right: 20px; }
.lightbox .prev { left: 16px; top: 50%; }
.lightbox .next { right: 16px; top: 50%; }
@keyframes fade { from { opacity: 0; } }

/* ---------- about chapters ---------- */
.chapters { position: relative; margin-top: 60px; }
.chapter { display: grid; grid-template-columns: 140px 1fr; gap: clamp(20px, 4vw, 60px); padding: 40px 0; border-top: 1.5px solid rgba(23,17,15,.15); }
.chapter .yr { font-family: var(--display); font-style: italic; font-size: 2.6rem; color: var(--hibiscus); line-height: 1; }
.chapter h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.1; margin: 0 0 12px; }
.chapter p { margin: 0; color: var(--ink-soft); max-width: 40em; }
@media (max-width: 640px) { .chapter { grid-template-columns: 1fr; gap: 10px; } }
.values { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.values span { padding: 14px 22px; border-radius: 999px; background: var(--white); font-family: var(--display); font-size: 1.3rem; font-style: italic; transition: transform .4s var(--ease), background .3s, color .3s; }
.values span:hover { transform: rotate(-4deg) scale(1.06); background: var(--hibiscus); color: var(--white); }

/* ---------- booking ---------- */
.book-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 6vw, 90px); align-items: start; }
.book-aside { position: sticky; top: 110px; }
.countdown { margin-top: 36px; background: var(--ink); color: var(--cream); border-radius: var(--radius); padding: 30px; }
.countdown .days { font-family: var(--display); font-size: clamp(3.4rem, 7vw, 5.4rem); line-height: 1; color: var(--hibiscus); }
.countdown p { margin: 6px 0 0; color: #cdbfb4; }
.form-card { background: var(--white); border-radius: calc(var(--radius) + 8px); padding: clamp(24px, 4vw, 54px); box-shadow: 0 40px 80px -50px rgba(23,17,15,.45); }
.progress { height: 6px; border-radius: 6px; background: var(--sand); overflow: hidden; margin-bottom: 14px; }
.progress i { display: block; height: 100%; width: 25%; background: var(--hibiscus); border-radius: inherit; transition: width .6s var(--ease); }
.step-label { font-size: .75rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); display: flex; justify-content: space-between; }
.fstep { display: none; animation: slidein .55s var(--ease); }
.fstep.on { display: block; }
@keyframes slidein { from { opacity: 0; transform: translateX(30px); } }
.fstep h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.05; margin: 26px 0 26px; }
.field { margin-bottom: 20px; }
.field label, .field .lab { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; border: 0; border-bottom: 1.5px solid rgba(23,17,15,.25); background: transparent; padding: 12px 0; font: inherit; font-size: 1.1rem; color: var(--ink); border-radius: 0; transition: border-color .3s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--hibiscus); }
.field textarea { resize: vertical; min-height: 90px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .row2 { grid-template-columns: 1fr; } }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills label { margin: 0; cursor: pointer; }
.pills input { position: absolute; opacity: 0; pointer-events: none; }
.pills span { display: inline-block; padding: 12px 20px; border-radius: 999px; border: 1.5px solid rgba(23,17,15,.25); font-size: .92rem; font-weight: 700; letter-spacing: 0; text-transform: none; transition: all .3s var(--ease); }
.pills input:checked + span { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: rotate(-2deg) scale(1.04); }
.pills input:focus-visible + span { outline: 2px solid var(--hibiscus); outline-offset: 3px; }
.pills label:hover span { border-color: var(--ink); }
.form-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 34px; gap: 14px; }
.form-nav .back { background: none; border: 0; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; font-size: .78rem; opacity: .6; }
.form-nav .back:hover { opacity: 1; }
.form-nav .back[hidden] { visibility: hidden; display: block; }
.err { color: var(--hibiscus); font-size: .85rem; font-weight: 700; min-height: 1.3em; margin-top: 8px; }
.hidden { display: none !important; }

/* ---------- CTA band ---------- */
.cta { text-align: center; overflow: hidden; }
.cta .display { max-width: 14ch; margin: 0 auto 36px; }
.cta .floaty { position: absolute; font-size: 2.2rem; animation: float 6s ease-in-out infinite; opacity: .9; }
@keyframes float { 50% { transform: translateY(-22px) rotate(12deg); } }

/* ---------- footer ---------- */
footer { background: var(--ink); color: var(--cream); padding: 90px 0 40px; overflow: hidden; }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.foot-top .display { max-width: 11ch; }
.foot-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.foot-cols h5 { margin: 0 0 14px; font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); }
.foot-cols a { display: block; padding: 4px 0; transition: color .3s, transform .3s; }
.foot-cols a:hover { color: var(--hibiscus); transform: translateX(4px); }
.bigname { font-family: var(--display); font-style: italic; font-size: clamp(4rem, 17vw, 16rem); line-height: .8; letter-spacing: -.03em; margin: 70px 0 30px; white-space: nowrap; color: var(--hibiscus); }
.foot-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-size: .78rem; color: #a99a8f; letter-spacing: .06em; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; }

/* ---------- cursor + confetti hearts ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 1000; pointer-events: none; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--hibiscus); mix-blend-mode: multiply; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .3s; }
.cursor.big { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: rgba(212,46,91,.25); }
.cursor .lbl { position: absolute; inset: 0; display: grid; place-items: center; color: var(--hibiscus); font-size: .6rem; font-weight: 800; letter-spacing: .14em; opacity: 0; }
.cursor.big .lbl { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
.pop { position: fixed; z-index: 1001; pointer-events: none; font-size: 20px; animation: pop 1.1s var(--ease) forwards; }
@keyframes pop { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.4); opacity: 0; } }

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

/* ---------- home hero: type + floating phones ---------- */
.hero-home { min-height: 100svh; background: var(--ink); color: var(--cream); display: flex; align-items: center; overflow: hidden; position: relative; padding: 120px 0 70px; }
.hero-home::before { content: ""; position: absolute; width: 70vw; height: 70vw; right: -20vw; top: -20vw; border-radius: 50%; background: radial-gradient(circle, rgba(212,46,91,.55), transparent 65%); filter: blur(20px); }
.hero-home .wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; align-items: center; position: relative; }
.hero-home h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-home h1 .line > span { display: inline-block; transform: translateY(110%); animation: rise 1.1s var(--ease) forwards; }
.hero-home h1 .line:nth-child(2) > span { animation-delay: .12s; }
.hero-home h1 .line:nth-child(3) > span { animation-delay: .24s; }
.hero-home h1 .line:nth-child(4) > span { animation-delay: .36s; }
.hero-home .sub { margin: 34px 0 36px; max-width: 30em; color: #d8c9be; font-size: 1.12rem; }
.hero-home .sub b { color: var(--white); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.phones { position: relative; height: min(78vh, 700px); }
.phones .phone { position: absolute; width: 46%; flex: none; margin: 0; box-shadow: 0 0 0 7px #2b211e, 0 40px 70px -20px rgba(0,0,0,.8); animation: bob 7s ease-in-out infinite; }
.phones .phone:nth-child(1) { left: 0; top: 12%; transform: rotate(-8deg); }
.phones .phone:nth-child(2) { left: 27%; top: 0; z-index: 2; transform: rotate(2deg); animation-delay: -2s; }
.phones .phone:nth-child(3) { right: 0; top: 18%; transform: rotate(9deg); animation-delay: -4s; }
.phones .phone:hover { transform: rotate(0) scale(1.04); z-index: 3; }
@keyframes bob { 50% { translate: 0 -14px; } }
.phones .bubble { position: absolute; z-index: 4; background: var(--cream); color: var(--ink); border-radius: 18px 18px 18px 4px; padding: 10px 16px; font-weight: 800; font-size: .82rem; box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); animation: bob 5s ease-in-out infinite; }
.phones .bubble.b1 { left: -4%; bottom: 14%; }
.phones .bubble.b2 { right: -2%; top: 6%; background: var(--hibiscus); color: var(--white); border-radius: 18px 18px 4px 18px; animation-delay: -2.5s; }
@media (max-width: 900px) {
  .hero-home .wrap { grid-template-columns: 1fr; }
  .phones { height: 520px; max-width: 420px; width: 100%; margin: 20px auto 0; }
}
.hero-home h1 { font-size: clamp(3rem, 7.4vw, 8.4rem); }

/* ---------- press + google badge ---------- */
.press { padding: 70px 0 10px; text-align: center; }
.press .eyebrow { justify-content: center; display: flex; opacity: .6; }
.press-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(22px, 5vw, 70px); }
.press-row span { font-family: var(--display); font-size: clamp(1.3rem, 2.6vw, 2.1rem); opacity: .55; transition: opacity .3s, color .3s, transform .4s var(--ease); }
.press-row span:nth-child(even) { font-style: italic; }
.press-row span:hover { opacity: 1; color: var(--hibiscus); transform: rotate(-3deg) scale(1.06); }
.g-badge { display: inline-flex; gap: 10px; align-items: center; margin-top: 22px; padding: 10px 20px; border-radius: 999px; background: var(--white); font-size: .85rem; font-weight: 700; box-shadow: 0 10px 30px -18px rgba(23,17,15,.4); transition: transform .4s var(--ease); }
.g-badge:hover { transform: translateY(-2px) rotate(-1deg); }
.g-badge b { font-family: var(--display); font-size: 1.3rem; }
.addons { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------- three doors ---------- */
.split:has(> .door:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
.split:has(> .door:nth-child(3)) .door { min-height: clamp(440px, 60vh, 620px); }
@media (max-width: 1000px) { .split:has(> .door:nth-child(3)) { grid-template-columns: 1fr; } }

/* ---------- super 8 films ---------- */
.films { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; margin-top: 50px; }
.film { margin: 0; }
.film-frame {
  position: relative; aspect-ratio: 4 / 3; background: #0d0a09; border-radius: 6px; overflow: hidden;
  padding: 0 26px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
}
/* sprocket holes down both edges */
.film-frame::before, .film-frame::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 26px; z-index: 2; pointer-events: none;
  background: radial-gradient(circle, transparent 0, transparent 0) , repeating-linear-gradient(180deg, transparent 0 10px, #e9dccb 10px 22px, transparent 22px 34px);
  -webkit-mask: linear-gradient(90deg, transparent 8px, #000 8px 18px, transparent 18px);
          mask: linear-gradient(90deg, transparent 8px, #000 8px 18px, transparent 18px);
  opacity: .85;
}
.film-frame::before { left: 0; }
.film-frame::after { right: 0; }
.film-frame video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.film figcaption { margin-top: 16px; font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #cdbfb4; }
.film figcaption b { display: block; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.6rem; letter-spacing: 0; text-transform: none; color: var(--cream); }
/* film-leader countdown for empty slots */
.leader { position: absolute; inset: 0 26px; display: grid; place-items: center; background: radial-gradient(circle, #3b302b 0%, #15100e 75%); overflow: hidden; }
.leader::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(233,220,203,.5); box-shadow: inset 0 0 0 18px rgba(233,220,203,.08); }
.leader::after { content: ""; position: absolute; width: 140%; height: 140%; background: conic-gradient(from 0deg, rgba(233,220,203,.18) 0 90deg, transparent 90deg); animation: spin 2s linear infinite; }
.leader span { position: relative; z-index: 1; font-family: var(--display); font-size: 6rem; color: var(--cream); animation: flicker 1.6s infinite steps(2); }
.film-slot .film-frame { cursor: default; }
@keyframes flicker { 50% { opacity: .82; } }
body.super8 .page-hero { background: radial-gradient(ellipse at 80% 0%, rgba(200,162,90,.22), transparent 60%); }

/* =====================================================================
   EDITORIAL v2 — magazine layout: black bar, condensed serif caps,
   heavy expanded sans, ovals, hairline rows. (Overrides above.)
   ===================================================================== */
:root {
  --cream: #fbf7f1;
  --paper: #ffffff;
  --sand: #f3ead9;
  --ink: #121010;
  --ink-soft: #3d3836;
  --hibiscus: #d1304f;
  --hibiscus-deep: #a8203c;
  --butter: #f4e46c;
  --line: rgba(18,16,16,.85);
  --display: "Instrument Serif", "Bodoni Moda", serif;
  --heavy: "Archivo", "Archivo Black", system-ui, sans-serif;
  --sans: "Archivo", system-ui, sans-serif;
  --radius: 18px;
}
body { background: var(--paper); font-size: 16px; }
body::after { opacity: .035; }

/* type */
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .95; letter-spacing: -.005em; }
.display em, .display .oval { text-transform: none; font-style: italic; }
.xl { font-size: clamp(3rem, 8.6vw, 8.2rem); }
.lg { font-size: clamp(2.5rem, 5.8vw, 5.4rem); }
.md { font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
.heavy { font-family: var(--heavy); font-weight: 900; font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; letter-spacing: -.02em; line-height: .9; font-style: normal; }
.oval {
  display: inline-block; position: relative; padding: .02em .38em .08em; margin: 0 .05em;
  border: 1.5px solid currentColor; border-radius: 50%; background: var(--butter); color: var(--ink);
  transform: rotate(-4deg); line-height: 1; font-family: var(--display); font-style: italic; text-transform: none; font-size: .78em; vertical-align: .08em;
}
.oval.pink { background: var(--hibiscus); color: #fff; border-color: var(--ink); }
.oval.clear { background: transparent; }
.eyebrow { color: var(--hibiscus); font-size: .68rem; font-weight: 800; letter-spacing: .16em; margin-bottom: .9rem; }
.eyebrow::before { display: none; }
.dark .eyebrow, .pink .eyebrow { color: var(--butter); }
.lede { font-size: 1.02rem; color: var(--ink-soft); max-width: 36em; text-align: justify; hyphens: auto; }

/* buttons: outlined pills */
.btn { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 1.5px currentColor; font-size: .74rem; letter-spacing: .18em; padding: 1.05em 1.8em; }
.btn::before { background: var(--ink); }
.btn:hover { color: var(--paper); transform: none; }
.btn.hotbtn { --bg: var(--hibiscus); --fg: #fff; box-shadow: none; }
.btn.hotbtn::before { background: var(--ink); }
.btn.light { --bg: transparent; --fg: var(--cream); }
.btn.light::before { background: var(--cream); }
.btn.light:hover { color: var(--ink); }
.dark .btn.ghost, .pink .btn { --fg: #fff; }
.pink .btn::before { background: #fff; } .pink .btn:hover { color: var(--hibiscus); }

/* promo bar + black nav */
.promo { background: var(--hibiscus); color: #fff; text-align: center; padding: 10px 16px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; position: relative; z-index: 101; }
.promo a { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.promo .pill { background: var(--cream); color: var(--ink); border-radius: 999px; padding: 5px 12px; }
.promo em { font-family: var(--display); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 1.25rem; font-weight: 400; }
.nav, .nav.solid, body.light-nav .nav { position: sticky; top: 0; background: var(--ink); color: var(--paper); padding: 16px var(--gutter); box-shadow: none; backdrop-filter: none; }
body.menu-open .nav { background: var(--ink); }
.logo { font-family: var(--heavy); font-weight: 900; font-variation-settings: "wdth" 125; font-size: 1.35rem; letter-spacing: -.02em; text-transform: uppercase; gap: 0; }
.logo img { display: none; }
.logo em { font-family: var(--display); font-style: italic; font-weight: 400; text-transform: none; color: var(--butter); font-size: 1.15em; margin-left: .18em; letter-spacing: 0; font-variation-settings: normal; }
.nav-links a:not(.btn) { font-size: .7rem; letter-spacing: .16em; }
.nav .btn { box-shadow: inset 0 0 0 1.5px var(--paper); --fg: var(--paper); --bg: transparent; }
.nav .btn::before { background: var(--hibiscus); }
.mobile-menu { background: var(--ink); }
.mobile-menu a { font-family: var(--display); font-style: normal; text-transform: uppercase; }
.page-hero { padding-top: clamp(70px, 10vw, 130px); }
.page-hero .sticker { top: 60px; }

/* hero (editorial split) */
.ed-hero { display: grid; grid-template-columns: 1.05fr 1fr; min-height: calc(100svh - 110px); background: var(--sand); }
.ed-hero .pic { position: relative; overflow: hidden; }
.ed-hero .pic img, .ed-hero .pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ed-hero .copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 90px) var(--gutter); }
.ed-hero h1 .row { display: block; }
.ed-hero h1 .heavy { font-size: 1.35em; display: block; margin-top: .06em; }
.ed-hero .lede { margin: 26px 0 30px; max-width: 30em; }
@media (max-width: 860px) { .ed-hero { grid-template-columns: 1fr; } .ed-hero .pic { min-height: 48vh; } }

/* hairline link rows */
.rows a { display: block; text-align: center; padding: 26px 16px 22px; border-bottom: 1px solid var(--line); transition: background .4s; }
.rows a:first-child { border-top: 1px solid var(--line); }
.rows a .eyebrow { display: block; margin-bottom: 4px; }
.rows a .display { display: inline-flex; align-items: center; gap: .4em; font-size: clamp(2rem, 4.4vw, 3.4rem); }
.rows a .display i { font-style: normal; font-family: var(--sans); font-weight: 300; transition: transform .45s var(--ease); }
.rows a:hover { background: var(--sand); }
.rows a:hover .display i { transform: translateX(10px); }

/* press band */
.press-band { background: var(--hibiscus); color: #fff; padding: 22px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 56px); }
.press-band small { font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.press-band span { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); text-transform: uppercase; }
.press-band span:nth-of-type(even) { font-family: var(--heavy); font-weight: 900; font-variation-settings: "wdth" 125; font-size: clamp(.95rem, 1.6vw, 1.25rem); letter-spacing: .02em; }

/* meet split */
.meet { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.meet > div:first-child { padding: clamp(50px, 8vw, 120px) var(--gutter); border-right: 1px solid var(--line); }
.meet .pic { position: relative; min-height: 560px; }
.meet .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.meet .pic .cap { position: absolute; top: 22px; right: 22px; text-align: right; font-weight: 900; font-variation-settings: "wdth" 125; font-family: var(--heavy); text-transform: uppercase; font-size: .78rem; line-height: 1.25; color: var(--paper); text-shadow: 0 1px 12px rgba(0,0,0,.4); max-width: 16em; }
.meet h2 { margin-bottom: 26px; }
.meet .sign { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .76rem; margin: 0 0 12px; }
.meet p { text-align: justify; color: var(--ink-soft); }
@media (max-width: 860px) { .meet { grid-template-columns: 1fr; } .meet > div:first-child { border-right: 0; } }

/* rounded cards grid */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 30px); margin-top: 50px; }
.card { text-align: center; }
.card .ph { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5.2; position: relative; background: var(--sand); }
.card .ph img, .card .ph video { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.card:hover .ph img, .card:hover .ph video { transform: scale(1.05); }
.card .stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); font-family: var(--heavy); font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase; color: var(--butter); font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: .9; text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,.45); pointer-events: none; }
.card .soon { position: absolute; top: 14px; right: 14px; background: var(--ink); color: var(--butter); border-radius: 999px; padding: 6px 12px; font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.card .eyebrow { margin: 16px 0 2px; }
.card h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.05; margin: 0; }
.card .arr { display: block; font-size: 1.4rem; margin-top: 6px; transition: transform .4s var(--ease); }
.card:hover .arr { transform: translateX(8px); }
@media (max-width: 860px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cards { grid-template-columns: 1fr; } }

/* italic quote ticker between hairlines */
.ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 14px 0; }
.ticker .marquee-track { animation-duration: 60s; }
.ticker span { font-family: var(--display); font-style: italic; font-size: 1.15rem; padding: 0 2.2em; white-space: nowrap; }

/* free goodies with circle icons */
.goodies { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 26px); margin-top: 40px; }
.goody { text-align: center; }
.goody .ph { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; }
.goody .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.goody:hover .ph img { transform: scale(1.05); }
.goody .ic { width: 54px; height: 54px; border-radius: 50%; background: var(--paper); margin: -28px auto 8px; position: relative; display: grid; place-items: center; font-size: 1.15rem; box-shadow: 0 6px 18px -8px rgba(0,0,0,.3); }
.goody h4 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1.05; margin: 2px 0 0; }
.goody .eyebrow { margin: 0; }
@media (max-width: 860px) { .goodies { grid-template-columns: 1fr 1fr; } }
.big-head { text-align: center; }
.big-head .heavy { font-size: clamp(2.8rem, 7vw, 6rem); }
.big-head .oval { font-size: clamp(1.6rem, 3.4vw, 2.8rem); vertical-align: .45em; margin-right: -.2em; position: relative; z-index: 1; }

/* cream band with floating DM bubbles */
.dm-band { background: var(--sand); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(70px, 9vw, 120px) 0; position: relative; overflow: hidden; text-align: center; }
.dm-band h2 { color: var(--hibiscus); }
.dm-band h2 .heavy { display: block; font-size: 1.05em; }
.dm-band .lede { margin: 22px auto 30px; text-align: center; max-width: 30em; }
.dm { position: absolute; background: var(--paper); border-radius: 16px; padding: 12px 16px; max-width: 250px; text-align: left; font-size: .82rem; line-height: 1.35; box-shadow: 0 16px 40px -18px rgba(0,0,0,.35); border: 1px solid rgba(0,0,0,.08); animation: bob 7s ease-in-out infinite; }
.dm b { display: block; font-size: .7rem; letter-spacing: .06em; margin-bottom: 4px; }
.dm.a { left: 5%; top: 18%; transform: rotate(-6deg); }
.dm.b { right: 5%; top: 14%; transform: rotate(5deg); animation-delay: -2s; }
.dm.c { left: 9%; bottom: 14%; transform: rotate(4deg); animation-delay: -4s; }
.dm.d { right: 8%; bottom: 16%; transform: rotate(-4deg); animation-delay: -3s; }
@media (max-width: 1000px) { .dm { position: relative; inset: auto; display: block; margin: 14px auto; transform: none !important; animation: none; } }

/* diagonal slash 3-up */
.slashes { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.slashes a { position: relative; padding: clamp(40px, 6vw, 70px) clamp(24px, 4vw, 60px); display: block; }
.slashes a + a::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--line); transform: rotate(28deg); }
.slashes .display { font-size: clamp(1.7rem, 2.8vw, 2.5rem); display: block; }
.slashes i { font-style: normal; font-size: 1.3rem; display: inline-block; transition: transform .4s var(--ease); }
.slashes a:hover i { transform: translateX(10px); }
.slashes a:hover .display { color: var(--hibiscus); }
@media (max-width: 760px) { .slashes { grid-template-columns: 1fr; } .slashes a + a::before { display: none; } .slashes a + a { border-top: 1px solid var(--line); } }

/* section heading helper */
.sec-head { text-align: center; max-width: 900px; margin: 0 auto; }
.sec-head .lede { margin: 22px auto 0; text-align: center; }

/* re-skin older components */
.step, .quote-card, .calc, .form-card, .g-badge, .values span { border-radius: var(--radius); }
.step h4, .addon h4, .chapter h3, .faq summary, .fstep h3, .quote-card blockquote { font-family: var(--display); font-weight: 400; }
.chapter h3, .fstep h3 { text-transform: uppercase; }
.step .big, .chapter .yr { font-family: var(--display); }
.marquee span { font-family: var(--display); }
.marquee { transform: none; margin: 0; box-shadow: none; padding: 14px 0; }
.marquee.ink { transform: none; }
.blush { background: var(--sand); }
.pink { background: var(--hibiscus); }
footer .display { text-transform: uppercase; }
.bigname { font-family: var(--heavy); font-style: normal; font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase; font-size: clamp(3rem, 12vw, 12rem); letter-spacing: -.04em; }
.cursor { background: var(--hibiscus); }
#waitlist h2 .heavy { font-size: .78em; }
#waitlist .dm.a { top: 40%; } #waitlist .dm.b { top: 36%; }
#waitlist .dm.c { bottom: 8%; } #waitlist .dm.d { bottom: 10%; }
@media (max-width: 1240px) { #waitlist .dm { position: relative; inset: auto; display: inline-block; margin: 10px; transform: none !important; animation: none; vertical-align: top; } }

/* =====================================================================
   PALETTE v3 — white / light gray / brick red / highlighter yellow /
   butter cream / cobalt. No black backgrounds.
   ===================================================================== */
:root {
  --paper: #ffffff;
  --cream: #ffffff;
  --gray: #f2f2f2;
  --sand: #faefc2;
  --brick: #921c1a;
  --red: #b9151c;
  --hibiscus: #921c1a;
  --hibiscus-deep: #6f1513;
  --butter: #f2f004;
  --cobalt: #1863dc;
  --navy: #0056a7;
  --ink: #111111;
  --ink-soft: #3a3a3a;
}
.hot { color: var(--red); }
.eyebrow { color: var(--red); }
.dark .eyebrow, .pink .eyebrow { color: var(--sand); }

/* bars */
.promo { background: var(--brick); }
.promo .pill { background: var(--sand); }
.nav, .nav.solid, body.light-nav .nav { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--ink); }
body.menu-open .nav { background: var(--brick); color: var(--sand); border-color: transparent; }
.logo em { color: var(--red); }
.nav .btn { box-shadow: inset 0 0 0 1.5px var(--ink); --fg: var(--ink); }
.nav .btn::before { background: var(--brick); }
.nav .btn:hover { color: #fff; }
.mobile-menu { background: var(--brick); color: var(--sand); }

/* dark & pink sections become brick red with cream type */
.dark, .pink { background: var(--brick); color: #fff; }
.dark .lede, .pink .lede, .isle-card p, .stat p { color: #f6dcd4; }
.btn::before { background: var(--brick); }
.btn:hover { color: #fff; }
.btn.hotbtn { --bg: var(--brick); }
.btn.hotbtn::before { background: var(--ink); }
.pink .btn, .dark .btn.ghost { --fg: #fff; }
.pink .btn::before, .dark .btn::before { background: var(--sand); }
.pink .btn:hover, .dark .btn:hover { color: var(--brick); }
.btn.light { --fg: #fff; }
.btn.light::before { background: var(--sand); }
.btn.light:hover { color: var(--brick); }
.oval { background: var(--butter); color: var(--ink); border-color: var(--ink); }
.oval.pink { background: var(--sand); color: var(--brick); border-color: var(--brick); }
.oval.clear { background: transparent; }
.dark .oval.pink, .pink .oval.pink { background: var(--butter); color: var(--ink); }

/* bands */
.press-band { background: linear-gradient(90deg, var(--navy), var(--cobalt) 55%, #4f8fe8); }
.ed-hero { background: var(--gray); }
.blush, .dm-band { background: var(--sand); }
.rows a:hover { background: var(--gray); }
.marquee { background: var(--brick); }
.marquee.ink { background: var(--cobalt); color: #fff; }
.card .soon { background: var(--brick); color: var(--sand); }
.card .stamp { color: var(--butter); }
.dm-band h2 { color: var(--brick); }

/* components that used ink fills */
.step { background: var(--gray); }
.step:hover { background: var(--brick); color: #fff; }
.dark .step { background: rgba(255,255,255,.08); }
.dark .step:hover { background: var(--sand); color: var(--brick); }
.step .big { color: var(--red); }
.dark .step .big { color: var(--butter); }
.seg { background: var(--gray); }
.seg button.on { background: var(--brick); color: #fff; }
.calc { background: var(--paper); border: 1px solid var(--ink); box-shadow: none; }
.calc .readout { color: var(--brick); }
.faq summary::after { background: var(--brick); }
.faq details[open] summary::after { background: var(--cobalt); }
.pills input:checked + span { background: var(--brick); border-color: var(--brick); color: #fff; }
.progress i { background: var(--brick); }
.progress { background: var(--gray); }
.form-card { background: var(--paper); border: 1px solid var(--ink); box-shadow: none; }
.countdown { background: var(--brick); }
.countdown .days { color: var(--butter); }
.stack-nav button:hover { background: var(--brick); border-color: var(--brick); color: #fff; }
.addon:hover { background: var(--brick); border-color: var(--brick); }
.values span { background: var(--gray); }
.values span:hover { background: var(--butter); color: var(--ink); }
.quote-card { background: var(--paper); border: 1px solid var(--ink); }
.quote-card blockquote::before { color: var(--red); }
.isle-btns button:hover, .isle-btns button.on { background: var(--sand); color: var(--brick); border-color: var(--sand); }
.map .isle.on { fill: var(--butter); stroke: var(--ink); }
.map .home-pin { fill: var(--cobalt); }
.sticker .heart { color: var(--red); }
.frame-wrap .sticker { background: var(--paper); color: var(--ink); }
.dark .frame-wrap .sticker { background: var(--sand); color: var(--brick); }
.lightbox { background: rgba(146,28,26,.94); }
.cursor { background: var(--red); }
.cursor .lbl { color: var(--red); }
.phone .mute { background: rgba(146,28,26,.75); }
.film-frame, .leader { background: #2a1210; }
.drag-hint { color: var(--ink-soft); }
.stat { border-right-color: rgba(255,255,255,.25); }
.stat .n sup { color: var(--butter); }
.slashes a:hover .display { color: var(--red); }

/* footer: brick red, cream text */
footer { background: var(--brick); color: #fff; }
.foot-cols h5 { color: var(--butter); }
.foot-cols a:hover { color: var(--butter); }
.bigname { color: var(--sand); }
.foot-bot { color: #f6dcd4; }
footer .hot { color: var(--butter); }
.bigname { font-size: 7.4vw; white-space: nowrap; margin-left: calc(-1 * var(--gutter) + 8px); }

/* =====================================================================
   RELAY v4 — warm paper, forest green + lime, heavy caps with an italic
   serif accent, halftone photos, torn edges, graph paper, scribbles and
   scroll-scrubbed motion. (Overrides everything above.)
   ===================================================================== */
:root {
  --paper: #fcfbf8; --cream: #f4f1e7; --linen: #eae6d7; --sand: #f4f1e7; --gray: #f4f1e7; --white: #fcfbf8;
  --forest: #002813; --green: #004822; --lime: #d5e27b; --mint: #e5edb6; --leaf: #8ea35a;
  --brick: var(--forest); --red: var(--green); --hibiscus: var(--green); --hibiscus-deep: var(--forest);
  --butter: var(--lime); --cobalt: var(--green); --navy: var(--forest); --gold: var(--lime);
  --ink: #1b1f1a; --ink-soft: #4a5048; --line: rgba(0,40,19,.18);
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 32' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,18 L23,20 L40,10 L60,19 L77,24 L104,9 L123,21 L163,10 L192,10 L233,9 L254,15 L271,26 L310,9 L338,9 L360,17 L400,12 L421,26 L454,25 L479,11 L505,19 L525,25 L543,26 L560,27 L587,23 L628,18 L671,26 L714,19 L747,15 L772,30 L801,10 L834,24 L879,18 L921,17 L939,11 L985,21 L1009,18 L1032,23 L1072,9 L1090,25 L1124,18 L1160,27 L1200,18 L1200,0 Z'/%3E%3C/svg%3E");
  --loop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M30 52 C 10 20, 170 4, 188 34 C 202 62, 60 80, 16 54 C -4 40, 50 10, 132 12' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  --halftone: radial-gradient(rgba(0,40,19,.5) 28%, transparent 34%);
}
body { background: var(--paper); color: var(--ink); }
::selection { background: var(--lime); color: var(--forest); }

/* type: heavy caps + italic serif accents */
.display { font-family: var(--heavy); font-weight: 800; font-variation-settings: "wdth" 108; text-transform: uppercase; line-height: .92; letter-spacing: -.012em; color: var(--forest); }
.dark .display, .pink .display, footer .display { color: var(--mint); }
.display em, .display .hot, .display .oval, .display .script { font-family: var(--display); font-weight: 400; font-style: italic; font-variation-settings: normal; text-transform: uppercase; letter-spacing: -.01em; }
.hot { color: var(--green); }
.dark .hot, .pink .hot, footer .hot { color: var(--lime); }
.heavy { color: inherit; }
.eyebrow { color: var(--green); }
.dark .eyebrow, .pink .eyebrow { color: var(--lime) !important; }
.lede { color: var(--ink-soft); }
.dark .lede, .pink .lede, .isle-card p, .stat p, .foot-bot { color: #d7dcc6; }

/* ovals become hand-drawn loops */
.oval, .oval.pink, .oval.clear, .dark .oval.pink, .pink .oval.pink { background: none; border: 0; color: inherit; transform: none; position: relative; padding: 0 .12em; box-shadow: none; }
.oval::after { content: ""; position: absolute; left: -12%; right: -12%; top: -22%; bottom: -22%; background: var(--leaf); -webkit-mask: var(--loop) center / 100% 100% no-repeat; mask: var(--loop) center / 100% 100% no-repeat; pointer-events: none; }
.dark .oval::after, .pink .oval::after { background: var(--lime); }

/* buttons: Relay pills */
.btn, .btn.hotbtn { --bg: var(--forest); --fg: var(--paper); box-shadow: none; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .92rem; padding: .95em 1.6em; }
.btn::before, .btn.hotbtn::before { background: var(--green); }
.btn:hover { color: var(--paper); transform: translateY(-2px); }
.btn.ghost, .btn.light { --bg: transparent; --fg: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn.ghost::before, .btn.light::before { background: var(--lime); }
.btn.ghost:hover, .btn.light:hover { color: var(--forest); }
.dark .btn, .pink .btn, .r-pill.lime { --bg: var(--lime); --fg: var(--forest); }
.dark .btn::before, .pink .btn::before, .r-pill.lime::before { background: var(--mint); }
.dark .btn:hover, .pink .btn:hover, .r-pill.lime:hover { color: var(--forest); }
.r-pill { font-size: 1rem; padding: 1em 1.8em; }

/* promo + nav: cream with forest */
.promo { background: var(--forest); color: var(--mint); }
.promo em { color: var(--lime); }
.promo .pill { background: var(--lime); color: var(--forest); }
.nav, .nav.solid, body.light-nav .nav, body.menu-open .nav { background: rgba(252,251,248,.92); backdrop-filter: blur(10px); color: var(--forest); border-bottom: 1px solid var(--line); }
.logo { color: var(--forest); }
.logo em { color: var(--green); }
.nav-links a:not(.btn) { text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 500; }
.nav .btn { --bg: var(--forest); --fg: var(--paper); box-shadow: none; }
.nav .btn::before { background: var(--green); }
.burger span { background: var(--forest); }
.mobile-menu { background: var(--forest); color: var(--mint); }

/* section fills */
.dark, .pink { background: var(--forest); color: var(--paper); }
.blush, .dm-band, .ed-hero { background: var(--cream); }
.press-band { background: var(--green); color: var(--mint); }
.marquee, .marquee.ink { background: var(--forest); color: var(--lime); }
.dm-band h2 { color: var(--forest); }
.card .soon { background: var(--forest); color: var(--lime); }
.card .stamp { color: var(--lime); }
.step { background: var(--cream); }
.step:hover { background: var(--forest); color: var(--paper); }
.dark .step { background: rgba(229,237,182,.08); color: var(--paper); }
.dark .step:hover { background: var(--lime); color: var(--forest); }
.step .big { color: var(--green); }
.dark .step .big { color: var(--lime); }
.seg { background: var(--cream); }
.seg button.on, .pills input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.calc, .form-card, .quote-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 60px -40px rgba(0,40,19,.45); }
.calc .readout { color: var(--forest); }
.faq summary::after { background: var(--forest); }
.faq details[open] summary::after { background: var(--leaf); }
.progress i, .countdown { background: var(--forest); }
.countdown .days, .stat .n sup { color: var(--lime); }
.addon:hover { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.values span:hover { background: var(--lime); }
.isle-btns button:hover, .isle-btns button.on { background: var(--lime); color: var(--forest); border-color: var(--lime); }
.map .isle { fill: rgba(229,237,182,.16); stroke: var(--mint); }
.map .isle.on { fill: var(--lime); stroke: var(--forest); }
.map .home-pin { fill: var(--lime); stroke: var(--forest); }
.sticker .heart { color: var(--green); }
.lightbox { background: rgba(0,40,19,.95); }
.cursor { background: var(--lime); mix-blend-mode: normal; }
.cursor .lbl { color: var(--forest); }
.phone { box-shadow: 0 0 0 7px #1b1f1a, 0 30px 60px -25px rgba(0,40,19,.55); }
.phone .mute { background: rgba(0,40,19,.7); }
.film-frame, .leader { background: #14180f; }
.slashes a:hover .display { color: var(--green); }
footer { background: var(--forest); color: var(--paper); }
.foot-cols h5, .foot-cols a:hover { color: var(--lime); }
.bigname { color: var(--lime); font-family: var(--heavy); font-weight: 800; font-variation-settings: "wdth" 108; }

/* ---------- textures ---------- */
.grid-paper { background-color: var(--paper); background-image: linear-gradient(rgba(0,40,19,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,40,19,.06) 1px, transparent 1px); background-size: 24px 24px; }
.halftone { position: relative; overflow: hidden; }
.halftone img, .halftone video { filter: contrast(1.06) saturate(.9) sepia(.08); }
.halftone::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--halftone); background-size: 4px 4px; mix-blend-mode: multiply; opacity: .28; }
.torn-b, .torn-t { position: relative; }
.torn-b::after, .torn-t::before { content: ""; position: absolute; left: 0; right: 0; height: 30px; background: inherit; background-image: none; -webkit-mask: var(--torn) 0 0 / 100% 100% no-repeat; mask: var(--torn) 0 0 / 100% 100% no-repeat; z-index: 3; pointer-events: none; }
.torn-b::after { top: 100%; }
.torn-t::before { bottom: 100%; transform: scaleY(-1); }
.u-link { display: inline-flex; gap: .4em; align-items: center; font-weight: 600; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; color: var(--forest); }
.u-link span { transition: transform .4s var(--ease); }
.u-link:hover span { transform: translateX(5px); }
.scribble { display: block; fill: none; stroke: var(--forest); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.scribble path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--d, 0)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* shared Relay type */
.r-h1, .r-h2, .r-h3, .r-mega { font-family: var(--heavy); font-weight: 800; font-variation-settings: "wdth" 108; text-transform: uppercase; line-height: .9; letter-spacing: -.015em; margin: 0; color: var(--forest); }
.r-h1 span, .r-h2 span, .r-h1 em, .r-h2 em { display: block; }
.r-h1 em, .r-h2 em, .r-h3 em, .r-mega em { font-family: var(--display); font-weight: 400; font-style: italic; letter-spacing: -.01em; }
.r-h1 { font-size: clamp(2.5rem, min(5.6vw, 9.4vh), 6rem); }
.r-h2 { font-size: clamp(2.4rem, 6.6vw, 6.4rem); }
.r-h3 { font-size: clamp(2rem, 4.4vw, 3.9rem); }
.r-paper { background: var(--paper); }

/* ---------- 1. flat-lay hero ---------- */
.r-hero { height: 175vh; background: var(--cream); position: relative; }
.r-hero .stick { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.r-hero-copy { position: relative; z-index: 5; text-align: center; max-width: 900px; padding: 90px 20px 20px; transform: translateY(calc(var(--p, 0) * -8vh)); }
.r-hero-copy .lede { max-width: 34em; margin: 22px auto 26px; color: var(--ink); }
.r-hero-copy .fine { font-size: .74rem; color: var(--ink-soft); margin-top: 14px; }
.r-date { display: inline-flex; gap: 8px; background: var(--paper); padding: 6px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -24px rgba(0,40,19,.5); }
.r-date input { border: 0; background: transparent; font: inherit; padding: 0 18px; color: var(--forest); min-width: 0; }
.r-date input:focus { outline: none; }
.obj { position: absolute; z-index: 2; left: var(--x); top: var(--y); transform: translate(calc(var(--dx) * var(--p, 0)), calc(var(--dy) * var(--p, 0))) rotate(calc(var(--r) + var(--p, 0) * var(--spin, 14deg))); will-change: transform; filter: drop-shadow(0 22px 26px rgba(40,30,10,.28)); }
.obj > * { animation: settle 1.2s var(--ease) both; animation-delay: var(--dl, 0s); }
@keyframes settle { from { opacity: 0; transform: translateY(-40px) scale(1.08); } }
.polaroid { background: #fffdf7; padding: 10px 10px 34px; width: clamp(130px, 14vw, 210px); position: relative; }
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: contrast(1.05) saturate(.9) sepia(.12); }
.polaroid span { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--script); font-size: 1.5rem; color: var(--forest); line-height: 1; }
.polaroid.tape::before { content: ""; position: absolute; top: -12px; left: 50%; width: 80px; height: 24px; transform: translateX(-50%) rotate(-4deg); background: rgba(213,226,123,.75); }
.polaroid.big { width: min(440px, 80vw); }
.phone.mini { flex: none; width: clamp(110px, 10vw, 150px); border-radius: 22px; box-shadow: 0 0 0 5px #1b1f1a; margin: 0; transform: none !important; }
.note { background: #fffdf3; width: clamp(160px, 15vw, 220px); padding: 16px 18px; font-family: var(--script); font-size: 1.55rem; line-height: 1.05; color: #2b2a24; background-image: repeating-linear-gradient(transparent 0 25px, rgba(0,72,34,.18) 25px 26px); }
.note b { display: block; font-family: var(--heavy); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; color: var(--green); }
.ticket { background: var(--mint); width: clamp(190px, 18vw, 260px); padding: 14px 18px; border-radius: 10px; color: var(--forest); border-left: 2px dashed rgba(0,40,19,.35); -webkit-mask: radial-gradient(circle 10px at 0 50%, transparent 98%, #000) ; mask: radial-gradient(circle 10px at 0 50%, transparent 98%, #000); }
.ticket small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.ticket b { display: block; font-family: var(--heavy); font-weight: 900; font-variation-settings: "wdth" 120; font-size: 1.5rem; margin: 4px 0; }
.ticket b i { font-style: normal; font-weight: 400; }
.ticket span { font-size: .7rem; }
.cart { width: clamp(120px, 11vw, 170px); }
.sticky-note { background: var(--lime); width: clamp(140px, 12vw, 180px); aspect-ratio: 1; padding: 16px; font-family: var(--heavy); font-weight: 800; font-size: .95rem; line-height: 1.2; color: var(--forest); }
.sticky-note small { display: block; font-family: var(--script); font-weight: 400; font-size: 1.4rem; margin-top: 8px; }
.stamp-badge { width: 130px; height: 130px; border-radius: 50%; background: var(--green); color: var(--mint); display: grid; place-items: center; position: relative; }
.stamp-badge svg { position: absolute; inset: 0; animation: spin 18s linear infinite; }
.stamp-badge text { font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; fill: currentColor; }
.stamp-badge span { font-size: 1.8rem; color: var(--lime); }
.o1 { --x: 3%; --y: 11%; --r: -8deg; --dx: -40vw; --dy: -20vh; --dl: .05s; }
.o2 { --x: 15%; --y: 60%; --r: 7deg; --dx: -30vw; --dy: 30vh; --dl: .15s; }
.o3 { --x: 2%; --y: 62%; --r: 4deg; --dx: -45vw; --dy: 10vh; --dl: .25s; }
.o4 { --x: 25%; --y: 3%; --r: -3deg; --dx: -10vw; --dy: -40vh; --dl: .35s; }
.o5 { --x: 81%; --y: 8%; --r: 9deg; --dx: 40vw; --dy: -25vh; --dl: .1s; }
.o6 { --x: 87%; --y: 42%; --r: -12deg; --dx: 40vw; --dy: 5vh; --dl: .2s; }
.o7 { --x: 63%; --y: 3%; --r: 6deg; --dx: 15vw; --dy: -40vh; --dl: .3s; }
.o8 { --x: 82%; --y: 66%; --r: -6deg; --dx: 35vw; --dy: 35vh; --dl: .4s; }
.o9 { --x: 11%; --y: 36%; --r: 0deg; --dx: -40vw; --dy: -5vh; --spin: 90deg; --dl: .45s; }
.o10 { --x: 74%; --y: 63%; --r: -5deg; --dx: 25vw; --dy: 25vh; --dl: .5s; }
.o2, .o10 { z-index: 1; }
@media (max-width: 1100px) { .o2, .o10, .o9 { display: none; } }
@media (max-width: 760px) {
  .r-hero { height: 150vh; }
  .r-hero .stick { place-items: end center; }
  .r-hero-copy { padding: 0 16px 9vh; }
  .obj { transform: translate(calc(var(--dx) * var(--p, 0)), calc(var(--dy) * var(--p, 0))) rotate(var(--r)) scale(.62); transform-origin: top left; }
  .o3, .o6, .o4 { display: none; }
  .o1 { --x: -2%; --y: 9%; } .o5 { --x: 60%; --y: 8%; } .o7 { --x: 34%; --y: 22%; } .o8 { --x: 70%; --y: 24%; }
  .r-date { flex-direction: column; border-radius: 22px; width: 100%; max-width: 340px; }
  .r-date input { padding: 12px 16px; }
}

/* ---------- 2. expanding media panel ---------- */
.r-expand { height: 260vh; background: var(--cream); }
.r-expand .stick { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; --e: min(1, calc(var(--p, 0) * 1.6)); background: color-mix(in srgb, var(--forest) calc(max(0, var(--p, 0) - .75) * 400%), var(--cream)); }
.r-expand .panel { display: grid; grid-template-columns: repeat(3, 1fr); width: calc(42vw + var(--e) * 58vw); height: calc(52svh + var(--e) * 48svh); border-radius: calc(26px * (1 - var(--e))); overflow: hidden; }
.r-expand .col { position: relative; }
.r-expand .col video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-expand .stat { position: absolute; z-index: 2; left: 6%; bottom: 9%; color: var(--paper); font-weight: 700; font-size: clamp(.7rem, 1.1vw, .95rem); opacity: calc((var(--e) - .55) * 2.4); transform: translateY(calc((1 - var(--e)) * 40px)); text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.r-expand .stat b { display: block; font-family: var(--heavy); font-weight: 800; font-variation-settings: "wdth" 108; font-size: clamp(1.8rem, 4.6vw, 4.6rem); line-height: .95; color: var(--lime); }
.r-expand .foot { position: absolute; bottom: 14px; right: var(--gutter); margin: 0; font-size: .72rem; color: var(--paper); opacity: calc((var(--e) - .7) * 3); }
@media (max-width: 760px) { .r-expand { height: 220vh; } .r-expand .panel { width: calc(78vw + var(--e) * 22vw); height: calc(60svh + var(--e) * 40svh); } .r-expand .stat { left: 8%; right: 4%; } }

/* ---------- 3. forest statement ---------- */
.r-forest { background: var(--forest); color: var(--paper); padding: clamp(90px, 14vw, 200px) 0 clamp(110px, 14vw, 200px); text-align: center; }
.r-forest .r-h2 { color: var(--mint); }
.r-forest .r-h2 em { color: var(--lime); }
.r-forest .lede { color: #d7dcc6; max-width: 36em; margin: 30px auto 0; }

/* ---------- 4. graph-paper scrolly ---------- */
.r-scrolly { padding: clamp(80px, 10vw, 140px) 0; }
.r-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); min-height: 92vh; align-items: start; }
.r-row .txt { position: sticky; top: 30vh; padding: 0 0 0 22px; border-left: 3px solid var(--lime); max-width: 430px; }
.r-row h3 { font-family: var(--heavy); font-weight: 700; font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 14px; color: var(--forest); }
.r-row p { color: var(--ink-soft); margin: 0 0 18px; }
.r-row .scribble { width: min(300px, 70%); margin-top: 26px; }
.r-card { position: sticky; top: 16vh; justify-self: center; padding: 30px 0 60px; }
.r-card .phone { flex: none; width: clamp(220px, 22vw, 300px); transform: rotate(3deg) !important; margin: 0; }
.r-card .print { background: #fffdf7; padding: 14px; width: clamp(260px, 30vw, 440px); transform: rotate(-3deg); box-shadow: 0 30px 50px -28px rgba(40,30,10,.5); }
.r-card .print img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.r-card .print.film { background: #14180f; padding: 14px 30px; background-image: radial-gradient(circle at 12px 10px, var(--paper) 4px, transparent 4.5px), radial-gradient(circle at calc(100% - 12px) 10px, var(--paper) 4px, transparent 4.5px); background-size: 100% 22px; transform: rotate(2deg); }
.r-card .print.film img { filter: sepia(.45) contrast(1.1) saturate(.8); }
.r-card .tag { position: absolute; right: -14px; top: 6px; background: var(--lime); color: var(--forest); font-weight: 700; font-size: .78rem; padding: 6px 14px; border-radius: 6px; transform: rotate(4deg); z-index: 2; }
@media (max-width: 760px) { .r-row { grid-template-columns: 1fr; min-height: 0; margin-bottom: 70px; } .r-row .txt, .r-card { position: relative; top: 0; } .r-card { justify-self: center; } }

/* ---------- 5. folder ---------- */
.r-folder { background: var(--paper); padding-top: 40px; }
.r-folder .tabs { position: relative; height: 70px; margin: 0 var(--gutter); }
.r-folder .tabs i { position: absolute; bottom: 0; height: 100%; border-radius: 22px 22px 0 0; }
.r-folder .tabs i:nth-child(1) { left: 2%; width: 30%; background: var(--leaf); height: 70px; }
.r-folder .tabs i:nth-child(2) { left: 14%; width: 26%; background: var(--mint); height: 50px; }
.r-folder .tabs i:nth-child(3) { left: 0; width: 18%; background: var(--forest); height: 30px; }
.r-folder .inner { background: var(--forest); margin: 0 var(--gutter); border-radius: 0 26px 0 0; padding: clamp(50px, 7vw, 100px) clamp(20px, 4vw, 60px) clamp(50px, 6vw, 80px); position: relative; }
.r-mega { color: var(--lime); font-size: clamp(2.4rem, 7.4vw, 7.6rem); line-height: .96; }
.r-mega em { color: var(--mint); }
.r-mega .tile { display: inline-block; height: .78em; width: 1.25em; object-fit: cover; border-radius: 10px; vertical-align: -.02em; transform: rotate(-4deg) scale(.4); opacity: 0; transition: transform .9s var(--ease), opacity .6s; }
.r-mega .tile.in { transform: rotate(-4deg); opacity: 1; }
.r-mega .tile.d1.in { transform: rotate(5deg); }
.r-mega .tile.round { border-radius: 50%; width: .8em; }
.r-folder .inner p { text-align: right; margin: 30px 0 0; }

/* ---------- 7. banner ---------- */
.r-banner { height: clamp(380px, 72vh, 720px); background: var(--forest); }
.r-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.15 - var(--d, 0) * .15)); }
.r-banner .r-h2 { position: absolute; z-index: 2; left: var(--gutter); bottom: 9%; color: var(--paper); text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.r-banner .r-h2 em { color: var(--lime); }

/* ---------- 8. stacking reviews ---------- */
.r-reviews { background: var(--forest); position: relative; padding-bottom: 80px; }
.r-reviews .words { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: var(--heavy); font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase; font-size: clamp(5rem, 21vw, 22rem); line-height: .82; color: transparent; background-image: radial-gradient(rgba(213,226,123,.32) 1.3px, transparent 1.8px); background-size: 7px 7px; -webkit-background-clip: text; background-clip: text; user-select: none; }
.r-reviews .r-stack { margin-top: -70svh; position: relative; z-index: 2; padding: 0 var(--gutter); }
.r-reviews .q { position: sticky; top: calc(18vh + var(--i, 0) * 16px); width: min(560px, 100%); margin: 0 auto 34vh; background: var(--paper); border-radius: 14px; padding: 30px 32px 26px; box-shadow: 0 -10px 40px -10px rgba(0,0,0,.35); }
.r-reviews .q:last-child { margin-bottom: 0; }
.r-reviews blockquote { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.45; color: var(--ink); }
.r-reviews blockquote::before { content: "\201C"; display: block; font-family: var(--display); font-size: 3.4rem; line-height: .7; color: var(--leaf); margin-bottom: 6px; }
.r-reviews figcaption { margin-top: 16px; font-size: .78rem; font-weight: 700; color: var(--green); letter-spacing: .04em; }
.r-reviews .more { text-align: center; margin: 60px 0 0; position: relative; z-index: 2; }

/* ---------- 9. meet ---------- */
.r-meet { padding: clamp(80px, 10vw, 140px) 0; }
.r-meet .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.r-meet .pic { justify-self: center; transform: rotate(-4deg); filter: drop-shadow(0 30px 30px rgba(40,30,10,.25)); }
.r-meet .polaroid.big img { aspect-ratio: 4/5; }
.r-meet p { color: var(--ink-soft); }
.r-meet .scribble.under { width: 220px; margin: 10px 0 18px; }
@media (max-width: 860px) { .r-meet .wrap { grid-template-columns: 1fr; } }

/* islands + cta */
.torn-t.dark, .r-cta { background-color: var(--forest); }
.r-cta { background: var(--forest); color: var(--paper); text-align: center; padding: clamp(100px, 13vw, 180px) 0; }
.r-cta .r-h2 { color: var(--mint); } .r-cta .r-h2 em { color: var(--lime); }
.r-cta .lede { color: #d7dcc6; max-width: 32em; margin: 26px auto 30px; }

@media (prefers-reduced-motion: reduce) {
  .obj > * { animation: none; }
  .r-mega .tile { opacity: 1; transform: none; }
  .scribble path { stroke-dashoffset: 0; }
}
.r-expand .col::before { content: ""; position: absolute; inset: 45% 0 0; z-index: 1; background: linear-gradient(transparent, rgba(0,40,19,.75)); opacity: var(--e); }
.r-hero-copy .lede, .r-forest .lede, .r-cta .lede { text-align: center; }
.r-mega .tile { height: .84em; width: 1.5em; }
.r-mega .tile.round { width: .86em; }

/* ---------- HERO v2: full-bleed flat-lay of gear + keepsakes ---------- */
.r-hero { height: 180vh; background: var(--paper); }
.r-hero .stick { background: radial-gradient(ellipse 60% 55% at 50% 52%, #fffefb 0%, var(--paper) 55%, var(--cream) 100%); }
.obj > svg { display: block; width: 100%; height: auto; overflow: visible; }
.obj { filter: drop-shadow(0 18px 18px rgba(50,40,20,.22)) drop-shadow(0 4px 4px rgba(50,40,20,.12)); }
.polaroid img { filter: none; }
.polaroid { padding: 9px 9px 36px; }
.r-hero .polaroid { width: 100%; }
.r-hero .note, .r-hero .ticket, .r-hero .sticky-note { width: 100%; }
.r-hero .phone.mini { width: 100%; border-radius: 26px; box-shadow: 0 0 0 6px #1b1f1a; }
.r-hero .stamp-badge { width: 100%; height: auto; aspect-ratio: 1; }
/* left side */
.g-cam   { --x: -3vw; --y: 9%;  width: 25vw; --r: -14deg; --dx: -45vw; --dy: -25vh; }
.g-p1    { --x: 13vw; --y: 36%; width: 12vw; --r: -7deg;  --dx: -40vw; --dy: 5vh; --dl: .1s; z-index: 3; }
.g-reel  { --x: 1vw;  --y: 54%; width: 11vw; --r: 9deg;   --dx: -40vw; --dy: 35vh; --dl: .15s; }
.g-sd    { --x: 15vw; --y: 76%; width: 11vw; --r: 0deg;   --dx: -25vw; --dy: 40vh; --dl: .2s; }
.g-mic   { --x: 26vw; --y: 86%; width: 6.5vw; --r: -20deg; --dx: -10vw; --dy: 45vh; --dl: .25s; }
.g-pl1   { --x: -2vw; --y: 40%; width: 8vw; --r: 20deg;   --dx: -40vw; --dy: 0vh; --dl: .3s; z-index: 4; }
.g-note  { --x: 21vw; --y: -4%; width: 15vw; --r: 5deg;   --dx: -15vw; --dy: -45vh; --dl: .2s; }
.g-badge { --x: 38vw; --y: 2%;  width: 8vw; --r: 0deg;    --dx: -5vw;  --dy: -40vh; --spin: 120deg; --dl: .35s; }
/* right side */
.g-tix   { --x: 51vw; --y: -1%; width: 17vw; --r: -4deg;  --dx: 10vw;  --dy: -45vh; --dl: .15s; }
.g-iph   { --x: 84vw; --y: -6%; width: 12vw; --r: 16deg;  --dx: 35vw;  --dy: -35vh; --dl: .05s; }
.g-rev   { --x: 71vw; --y: 6%;  width: 11vw; --r: 7deg;   --dx: 20vw;  --dy: -40vh; --dl: .25s; }
.g-p2    { --x: 82vw; --y: 34%; width: 13vw; --r: 10deg;  --dx: 40vw;  --dy: 0vh; --dl: .1s; }
.g-lens  { --x: 75vw; --y: 47%; width: 8.5vw; --r: 0deg;  --dx: 35vw;  --dy: 10vh; --spin: 60deg; --dl: .3s; z-index: 3; }
.g-s8    { --x: 82vw; --y: 66%; width: 21vw; --r: -9deg;  --dx: 40vw;  --dy: 35vh; --dl: .2s; }
.g-p3    { --x: 64vw; --y: 78%; width: 12vw; --r: -8deg;  --dx: 15vw;  --dy: 45vh; --dl: .35s; }
.g-pl2   { --x: 77vw; --y: 80%; width: 7vw; --r: -15deg;  --dx: 25vw;  --dy: 45vh; --dl: .4s; z-index: 4; }

.r-hero-copy { max-width: 50vw; padding-top: 70px; }
.r-hero-copy .kicker { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 0 18px; }
.r-hero .r-h1 { font-size: clamp(2.3rem, min(4.6vw, 8.6vh), 5.2rem); font-variation-settings: "wdth" 100; line-height: .93; }
.r-sub { font-family: var(--display); font-style: italic; font-size: clamp(1.5rem, min(2.7vw, 5vh), 2.8rem); line-height: 1.05; color: var(--green); margin: 14px 0 0; }
.r-hero-copy .lede { font-size: .98rem; margin: 18px auto 24px; max-width: 30em; }
.r-hero-copy .fine { margin-top: 12px; }

@media (max-width: 760px) {
  .r-hero { height: 160vh; }
  .r-hero-copy { max-width: none; padding: 0 16px 7vh; }
  .obj { transform: translate(calc(var(--dx) * var(--p, 0)), calc(var(--dy) * var(--p, 0))) rotate(var(--r)); }
  .g-p1, .g-sd, .g-mic, .g-note, .g-badge, .g-tix, .g-lens, .g-p3, .g-pl2, .g-reel { display: none; }
  .g-cam  { --x: -8vw; --y: 1%;  width: 52vw; }
  .g-iph  { --x: 74vw; --y: -3%; width: 25vw; }
  .g-rev  { --x: 44vw; --y: 16%; width: 27vw; }
  .g-p2   { --x: 76vw; --y: 20%; width: 27vw; }
  .g-s8   { --x: 2vw;  --y: 23%; width: 34vw; --r: 6deg; }
  .g-pl1  { --x: 36vw; --y: 6%;  width: 14vw; }
  .r-hero .sticky-note { font-size: .7rem; padding: 10px; }
  .r-hero .sticky-note small { font-size: 1rem; }
}
.r-hero-copy { max-width: 64vw; }
.r-hero .r-h1 { font-size: clamp(2.3rem, min(4.3vw, 8.4vh), 5rem); }
.r-hero .r-h1 span { white-space: nowrap; }
.r-sub { font-size: clamp(1.4rem, min(2.4vw, 4.6vh), 2.5rem); }
@media (min-width: 761px) { .r-sub { white-space: nowrap; } }
.g-p1 { --x: 8vw; --y: 40%; }
.g-lens { --x: 80vw; --y: 50%; }
.g-p2 { --x: 84vw; }
@media (max-width: 760px) { .r-hero .r-h1 span { white-space: normal; } }
@media (max-width: 760px) {
  .r-hero-copy { max-width: none; padding: 0 18px 6vh; }
  .r-hero .stick { place-items: end center; }
  .r-hero .r-h1 { font-size: 2.5rem; }
  .r-hero-copy .lede { hyphens: none; }
}
@media (max-width: 760px) {
  .g-rev { display: none; }
  .g-cam { --x: -10vw; --y: 9%;  width: 44vw; }
  .g-iph { --x: 76vw;  --y: 6%;  width: 22vw; }
  .g-pl1 { --x: 40vw;  --y: 13%; width: 13vw; }
  .g-p2  { --x: 84vw;  --y: 50%; width: 26vw; }
  .g-s8  { --x: -14vw; --y: 80%; width: 36vw; }
  .r-hero-copy { padding-bottom: 4vh; }
}
@media (max-width: 760px) { .g-p2, .g-s8 { display: none; } .r-hero-copy .kicker { letter-spacing: .12em; } }

/* ---------- HERO v3: dense raw collage, rough torn edges ---------- */
.rough-a { clip-path: polygon(0.0% 0.5%, 4.5% 1.2%, 9.1% 0.8%, 13.6% 1.3%, 18.2% 1.4%, 22.7% 0.1%, 27.3% 0.0%, 31.8% 1.8%, 36.4% 0.6%, 40.9% 0.5%, 45.5% 2.2%, 50.0% 1.0%, 54.5% 1.8%, 59.1% 1.0%, 63.6% 1.4%, 68.2% 0.3%, 72.7% 1.4%, 77.3% 1.9%, 81.8% 1.2%, 86.4% 1.6%, 90.9% 1.5%, 95.5% 0.1%, 98.3% 0.0%, 98.7% 4.5%, 99.3% 9.1%, 99.9% 13.6%, 98.1% 18.2%, 99.0% 22.7%, 98.4% 27.3%, 98.1% 31.8%, 98.4% 36.4%, 98.0% 40.9%, 99.1% 45.5%, 98.2% 50.0%, 99.0% 54.5%, 97.9% 59.1%, 98.1% 63.6%, 99.8% 68.2%, 99.7% 72.7%, 99.5% 77.3%, 97.9% 81.8%, 99.0% 86.4%, 98.6% 90.9%, 99.3% 95.5%, 100.0% 98.9%, 95.5% 99.2%, 90.9% 99.2%, 86.4% 98.7%, 81.8% 98.7%, 77.3% 98.0%, 72.7% 98.5%, 68.2% 98.0%, 63.6% 98.1%, 59.1% 97.8%, 54.5% 98.5%, 50.0% 99.6%, 45.5% 98.1%, 40.9% 97.9%, 36.4% 98.0%, 31.8% 98.7%, 27.3% 98.4%, 22.7% 99.5%, 18.2% 98.2%, 13.6% 98.7%, 9.1% 99.4%, 4.5% 99.9%, 1.9% 100.0%, 2.2% 95.5%, 0.2% 90.9%, 1.8% 86.4%, 0.9% 81.8%, 0.3% 77.3%, 0.6% 72.7%, 1.7% 68.2%, 1.9% 63.6%, 0.1% 59.1%, 1.4% 54.5%, 0.1% 50.0%, 1.6% 45.5%, 0.7% 40.9%, 1.9% 36.4%, 2.2% 31.8%, 1.1% 27.3%, 2.2% 22.7%, 0.7% 18.2%, 0.2% 13.6%, 1.3% 9.1%, 0.1% 4.5%); }
.rough-b { clip-path: polygon(0.0% 1.3%, 4.5% 1.6%, 9.1% 2.6%, 13.6% 1.3%, 18.2% 1.4%, 22.7% 1.6%, 27.3% 0.5%, 31.8% 1.4%, 36.4% 1.8%, 40.9% 2.2%, 45.5% 0.3%, 50.0% 0.8%, 54.5% 0.3%, 59.1% 2.3%, 63.6% 1.9%, 68.2% 0.1%, 72.7% 2.8%, 77.3% 2.7%, 81.8% 1.8%, 86.4% 1.7%, 90.9% 0.4%, 95.5% 0.0%, 98.5% 0.0%, 99.8% 4.5%, 99.5% 9.1%, 99.3% 13.6%, 99.9% 18.2%, 98.7% 22.7%, 98.8% 27.3%, 97.6% 31.8%, 98.5% 36.4%, 98.2% 40.9%, 98.6% 45.5%, 98.1% 50.0%, 98.7% 54.5%, 99.2% 59.1%, 97.2% 63.6%, 97.2% 68.2%, 97.6% 72.7%, 98.0% 77.3%, 99.1% 81.8%, 99.4% 86.4%, 99.2% 90.9%, 99.8% 95.5%, 100.0% 97.9%, 95.5% 98.9%, 90.9% 97.6%, 86.4% 98.9%, 81.8% 97.3%, 77.3% 97.6%, 72.7% 100.0%, 68.2% 99.4%, 63.6% 97.5%, 59.1% 98.7%, 54.5% 97.3%, 50.0% 98.9%, 45.5% 99.8%, 40.9% 98.2%, 36.4% 97.8%, 31.8% 99.2%, 27.3% 99.8%, 22.7% 99.1%, 18.2% 97.3%, 13.6% 97.9%, 9.1% 99.7%, 4.5% 99.3%, 0.3% 100.0%, 0.2% 95.5%, 2.2% 90.9%, 0.5% 86.4%, 1.6% 81.8%, 1.3% 77.3%, 0.5% 72.7%, 2.0% 68.2%, 0.4% 63.6%, 1.8% 59.1%, 0.3% 54.5%, 1.2% 50.0%, 0.6% 45.5%, 0.8% 40.9%, 2.7% 36.4%, 2.2% 31.8%, 0.9% 27.3%, 2.5% 22.7%, 0.6% 18.2%, 1.1% 13.6%, 2.4% 9.1%, 1.8% 4.5%); }
.rough-c { clip-path: polygon(0.0% 1.7%, 4.5% 1.7%, 9.1% 1.6%, 13.6% 0.2%, 18.2% 1.1%, 22.7% 0.8%, 27.3% 1.0%, 31.8% 0.2%, 36.4% 0.3%, 40.9% 0.8%, 45.5% 0.4%, 50.0% 0.8%, 54.5% 0.0%, 59.1% 0.2%, 63.6% 1.3%, 68.2% 0.8%, 72.7% 0.9%, 77.3% 1.3%, 81.8% 0.6%, 86.4% 0.1%, 90.9% 1.4%, 95.5% 1.1%, 98.8% 0.0%, 98.9% 4.5%, 98.3% 9.1%, 99.3% 13.6%, 98.6% 18.2%, 99.3% 22.7%, 99.0% 27.3%, 98.8% 31.8%, 99.4% 36.4%, 99.8% 40.9%, 99.1% 45.5%, 98.7% 50.0%, 98.9% 54.5%, 99.2% 59.1%, 98.8% 63.6%, 99.7% 68.2%, 99.7% 72.7%, 99.4% 77.3%, 98.5% 81.8%, 99.6% 86.4%, 99.8% 90.9%, 99.8% 95.5%, 100.0% 99.9%, 95.5% 99.5%, 90.9% 99.0%, 86.4% 98.5%, 81.8% 99.4%, 77.3% 99.3%, 72.7% 99.5%, 68.2% 99.5%, 63.6% 98.6%, 59.1% 99.0%, 54.5% 99.5%, 50.0% 99.8%, 45.5% 98.6%, 40.9% 98.7%, 36.4% 98.5%, 31.8% 99.6%, 27.3% 99.0%, 22.7% 98.3%, 18.2% 98.9%, 13.6% 98.3%, 9.1% 99.7%, 4.5% 98.2%, 0.1% 100.0%, 0.7% 95.5%, 0.0% 90.9%, 1.5% 86.4%, 1.2% 81.8%, 1.8% 77.3%, 1.4% 72.7%, 1.7% 68.2%, 1.0% 63.6%, 1.8% 59.1%, 1.3% 54.5%, 0.6% 50.0%, 1.8% 45.5%, 0.7% 40.9%, 0.3% 36.4%, 0.1% 31.8%, 0.8% 27.3%, 0.4% 22.7%, 1.7% 18.2%, 1.7% 13.6%, 0.4% 9.1%, 0.2% 4.5%); }
.rough-d { clip-path: polygon(0.0% 1.3%, 4.5% 0.8%, 9.1% 0.6%, 13.6% 3.1%, 18.2% 2.0%, 22.7% 2.3%, 27.3% 1.9%, 31.8% 1.3%, 36.4% 2.5%, 40.9% 2.0%, 45.5% 2.7%, 50.0% 2.2%, 54.5% 2.9%, 59.1% 1.5%, 63.6% 0.5%, 68.2% 0.5%, 72.7% 2.5%, 77.3% 0.6%, 81.8% 2.2%, 86.4% 2.1%, 90.9% 0.2%, 95.5% 2.7%, 99.9% 0.0%, 97.1% 4.5%, 97.1% 9.1%, 99.3% 13.6%, 97.5% 18.2%, 97.5% 22.7%, 99.6% 27.3%, 97.7% 31.8%, 99.6% 36.4%, 96.9% 40.9%, 97.7% 45.5%, 96.7% 50.0%, 99.8% 54.5%, 98.9% 59.1%, 97.9% 63.6%, 97.9% 68.2%, 99.4% 72.7%, 97.0% 77.3%, 97.1% 81.8%, 99.0% 86.4%, 99.5% 90.9%, 97.7% 95.5%, 100.0% 98.6%, 95.5% 97.7%, 90.9% 98.3%, 86.4% 98.7%, 81.8% 99.9%, 77.3% 99.5%, 72.7% 98.4%, 68.2% 97.5%, 63.6% 98.6%, 59.1% 97.5%, 54.5% 98.2%, 50.0% 97.0%, 45.5% 97.8%, 40.9% 98.9%, 36.4% 99.5%, 31.8% 99.8%, 27.3% 99.9%, 22.7% 97.1%, 18.2% 97.0%, 13.6% 97.4%, 9.1% 99.6%, 4.5% 97.8%, 0.4% 100.0%, 3.0% 95.5%, 2.2% 90.9%, 2.5% 86.4%, 2.1% 81.8%, 1.4% 77.3%, 2.9% 72.7%, 3.3% 68.2%, 0.8% 63.6%, 1.5% 59.1%, 2.5% 54.5%, 2.3% 50.0%, 1.4% 45.5%, 1.5% 40.9%, 3.3% 36.4%, 0.9% 31.8%, 0.7% 27.3%, 2.3% 22.7%, 0.9% 18.2%, 3.1% 13.6%, 1.1% 9.1%, 3.1% 4.5%); }
.r-hero .stick { background: var(--paper); }
.paper { width: 100%; height: var(--h, 40vh); background-color: var(--c); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.paper.kraft { --c: #c9b088; }
.paper.forest { --c: #0f3a24; }
.paper.lime { --c: var(--lime); }
.paper.mint { --c: var(--mint); }
.paper.white { --c: #fbf8f0; background-image: linear-gradient(rgba(0,72,34,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(0,72,34,.14) 1px, transparent 1px); background-size: 18px 18px; }
.print-r { background: #fbf8f0; padding: 9px; }
.print-r img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.tape { position: absolute; top: -12px; left: 32%; width: 74px; height: 24px; background: rgba(236,231,214,.85); transform: rotate(-6deg); z-index: 2; clip-path: polygon(0 8%, 6% 0, 12% 10%, 20% 2%, 100% 0, 94% 50%, 100% 100%, 10% 96%, 4% 100%, 0 60%, 5% 40%); }
.tape.t2 { left: auto; right: 14%; transform: rotate(8deg); background: rgba(213,226,123,.8); }
.filmstrip { background: #151913; padding: 12px 20px; display: grid; gap: 8px; background-image: radial-gradient(circle at 9px 50%, var(--paper) 3.4px, transparent 4px), radial-gradient(circle at calc(100% - 9px) 50%, var(--paper) 3.4px, transparent 4px); background-size: 100% 16px; }
.filmstrip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: sepia(.25) contrast(1.08); }
.receipt { background: #fffdf7; padding: 16px 14px 26px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .68rem; line-height: 1.7; color: #2b2a24; display: flex; flex-direction: column; -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x; mask: linear-gradient(#000, #000) top / 100% calc(100% - 8px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 8px repeat-x; }
.receipt b { text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px dashed #999; padding-bottom: 6px; margin-bottom: 6px; }
.receipt em { margin-top: 8px; border-top: 1px dashed #999; padding-top: 6px; text-align: center; font-style: normal; }
.r-hero .obj { filter: drop-shadow(0 14px 14px rgba(50,40,20,.26)) drop-shadow(0 2px 3px rgba(50,40,20,.18)); }
.r-hero .obj.scrap { filter: drop-shadow(0 6px 8px rgba(50,40,20,.18)); }
/* left cluster */
.c-kraft1 { --x: -5vw; --y: 3%;  width: 23vw; --h: 54vh; --r: -5deg; --dx: -45vw; --dy: -20vh; z-index: 1; }
.c-forest1{ --x: 6vw;  --y: 42%; width: 20vw; --h: 66vh; --r: 5deg;  --dx: -40vw; --dy: 30vh; z-index: 1; }
.c-white1 { --x: 15vw; --y: -12%; width: 15vw; --h: 34vh; --r: 9deg; --dx: -25vw; --dy: -40vh; z-index: 1; }
.g-cam    { --x: -3vw; --y: 7%;  width: 23vw; --r: -14deg; z-index: 5; }
.c-note   { --x: 16vw; --y: -3%; width: 13vw; --r: 6deg;  --dx: -20vw; --dy: -45vh; z-index: 4; --dl: .1s; }
.c-print1 { --x: 11vw; --y: 29%; width: 13vw; --r: -6deg; --dx: -40vw; --dy: 0vh; z-index: 4; --dl: .15s; }
.c-film   { --x: 0vw;  --y: 44%; width: 9vw;  --r: 4deg;  --dx: -40vw; --dy: 20vh; z-index: 3; --dl: .2s; }
.g-reel   { --x: 14vw; --y: 55%; width: 9.5vw; --r: 8deg; z-index: 5; }
.g-pl1    { --x: 22vw; --y: 25%; width: 6vw;  --r: 20deg; z-index: 6; }
.g-sd     { --x: 2vw;  --y: 79%; width: 11vw; z-index: 5; }
.g-mic    { --x: 24vw; --y: 80%; width: 6vw;  z-index: 6; }
.c-print4 { --x: 9vw;  --y: 84%; width: 12vw; --r: -10deg; --dx: -30vw; --dy: 40vh; z-index: 4; --dl: .3s; }
/* right cluster */
.c-lime1  { --x: 77vw; --y: -7%; width: 25vw; --h: 50vh; --r: 4deg;  --dx: 40vw; --dy: -30vh; z-index: 1; }
.c-kraft2 { --x: 81vw; --y: 43%; width: 23vw; --h: 66vh; --r: -6deg; --dx: 40vw; --dy: 30vh; z-index: 1; }
.c-mint1  { --x: 67vw; --y: 72%; width: 17vw; --h: 42vh; --r: 9deg;  --dx: 20vw; --dy: 45vh; z-index: 1; }
.g-iph    { --x: 87vw; --y: -5%; width: 11vw; --r: 16deg; z-index: 5; }
.c-rev    { --x: 74vw; --y: 5%;  width: 11vw; --r: 6deg;  --dx: 20vw; --dy: -40vh; z-index: 4; --dl: .1s; }
.c-print2 { --x: 76vw; --y: 25%; width: 14vw; --r: 8deg;  --dx: 40vw; --dy: -5vh; z-index: 4; --dl: .15s; }
.g-lens   { --x: 88vw; --y: 41%; width: 8vw; z-index: 6; }
.c-tix    { --x: 69vw; --y: 50%; width: 15vw; --r: -10deg; --dx: 30vw; --dy: 10vh; z-index: 5; --dl: .2s; }
.c-receipt{ --x: 91vw; --y: 49%; width: 10vw; --r: 5deg;  --dx: 30vw; --dy: 20vh; z-index: 3; --dl: .25s; }
.g-s8     { --x: 79vw; --y: 65%; width: 21vw; --r: -9deg; z-index: 5; }
.c-print3 { --x: 68vw; --y: 77%; width: 12vw; --r: -6deg; --dx: 15vw; --dy: 45vh; z-index: 4; --dl: .3s; }
.g-pl2    { --x: 76vw; --y: 87%; width: 6vw; z-index: 6; }
.r-hero-copy { max-width: 42vw; }
.r-hero .r-h1 { font-size: clamp(2.4rem, min(4.8vw, 8.6vh), 5.6rem); }
.r-sub { white-space: normal !important; font-size: clamp(1.3rem, min(2.1vw, 4vh), 2.2rem); }

@media (max-width: 760px) {
  .r-hero .obj { display: none; }
  .r-hero-copy { max-width: none; }
  .c-kraft1, .c-lime1, .g-cam, .g-iph, .c-print1, .c-rev, .g-pl1, .c-white1, .c-print2 { display: block !important; }
  .c-kraft1 { --x: -6vw; --y: 6%;  width: 52vw; --h: 34vh; }
  .c-lime1  { --x: 50vw; --y: 3%;  width: 56vw; --h: 30vh; }
  .c-white1 { --x: 30vw; --y: 22%; width: 34vw; --h: 18vh; }
  .g-cam    { --x: -6vw; --y: 10%; width: 46vw; }
  .g-iph    { --x: 76vw; --y: 4%;  width: 22vw; }
  .c-rev    { --x: 46vw; --y: 9%;  width: 27vw; }
  .c-print1 { --x: 24vw; --y: 23%; width: 26vw; }
  .c-print2 { --x: 64vw; --y: 22%; width: 28vw; }
  .g-pl1    { --x: 2vw;  --y: 30%; width: 14vw; }
  .r-hero .sticky-note { font-size: .62rem; padding: 9px; }
  .r-hero .sticky-note small { font-size: .95rem; }
}
.r-hero .r-h1 { font-size: clamp(2.4rem, min(4.1vw, 8vh), 5rem); }
.c-tix { --x: 73vw; --y: 57%; width: 14vw; }
.c-print1 { --x: 9vw; }

/* ---------- SUPER 8 PAGE ---------- */
.s8-hero { height: 210vh; background: var(--paper); position: relative; }
.s8-hero .stick { position: sticky; top: 0; height: 100svh; overflow: hidden; --e: min(1, calc(var(--p, 0) * 1.4)); }
.s8-hero .obj { filter: drop-shadow(0 14px 14px rgba(50,40,20,.26)) drop-shadow(0 2px 3px rgba(50,40,20,.18)); }
.s8-hero .obj.scrap { filter: drop-shadow(0 6px 8px rgba(50,40,20,.18)); }
.s8-hero .note, .s8-hero .ticket { width: 100%; }
.s8-copy { position: absolute; z-index: 8; left: 50%; top: 13%; width: min(46vw, 760px); transform: translate(-50%, calc(var(--e) * -30vh)); opacity: calc(1 - var(--e) * 2.2); text-align: center; }
.s8-copy .kicker { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 0 14px; }
.s8-copy .r-h1 { font-size: clamp(2.2rem, min(4vw, 7.4vh), 4.6rem); font-variation-settings: "wdth" 100; }
.s8-copy .r-h1 span { white-space: nowrap; }
.s8-screen { position: absolute; z-index: 7; left: 50%; top: 50%; width: calc(44vw + var(--e) * 56vw); height: calc(44vh + var(--e) * 56vh); transform: translate(-50%, calc(-50% + (1 - var(--e)) * 11vh)); background: #151913; padding: calc((1 - var(--e)) * 12px); box-shadow: 0 30px 60px -30px rgba(0,40,19,.6); }
.s8-screen video { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.05) saturate(1.05); }
.s8-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.35)); }
.s8-hero .c-kraft1 { --x: -5vw; --y: 2%; width: 26vw; --h: 56vh; --r: -5deg; --dx: -45vw; --dy: -20vh; z-index: 1; }
.s8-hero .c-lime1 { --x: 76vw; --y: -6%; width: 27vw; --h: 52vh; --r: 4deg; --dx: 40vw; --dy: -30vh; z-index: 1; }
.s8-mint   { --x: 70vw; --y: 62%; width: 22vw; --h: 46vh; --r: 9deg; --dx: 30vw; --dy: 45vh; z-index: 1; }
.s8-forest { --x: 1vw;  --y: 56%; width: 21vw; --h: 52vh; --r: -6deg; --dx: -40vw; --dy: 40vh; z-index: 1; }
.s8-cam   { --x: -3vw; --y: 26%; width: 24vw; --r: -10deg; --dx: -45vw; --dy: 5vh; z-index: 5; }
.s8-note  { --x: 13vw; --y: -3%; width: 13vw; --r: -5deg; --dx: -20vw; --dy: -45vh; z-index: 4; --dl: .1s; }
.s8-pl    { --x: 22vw; --y: 22%; width: 6vw; --r: 18deg; --dx: -30vw; --dy: -10vh; z-index: 6; }
.s8-p2    { --x: 3vw;  --y: 70%; width: 13vw; --r: -7deg; --dx: -40vw; --dy: 40vh; z-index: 4; --dl: .2s; }
.s8-cart  { --x: 17vw; --y: 76%; width: 10vw; --r: 14deg; --dx: -20vw; --dy: 45vh; z-index: 5; --dl: .25s; }
.s8-tix   { --x: 72vw; --y: 5%;  width: 15vw; --r: 6deg; --dx: 25vw; --dy: -45vh; z-index: 5; --dl: .1s; }
.s8-reel  { --x: 84vw; --y: 30%; width: 15vw; --r: 0deg; --dx: 40vw; --dy: 0vh; --spin: 180deg; z-index: 4; --dl: .15s; }
.s8-p1    { --x: 81vw; --y: 62%; width: 14vw; --r: 8deg; --dx: 40vw; --dy: 40vh; z-index: 5; --dl: .2s; }
.s8-cart2 { --x: 73vw; --y: 80%; width: 10vw; --r: -14deg; --dx: 20vw; --dy: 45vh; z-index: 6; --dl: .3s; }
@media (max-width: 760px) {
  .s8-hero { height: 170vh; }
  .s8-copy { width: calc(100% - 32px); top: 9%; }
  .s8-copy .r-h1 { font-size: 2.3rem; } .s8-copy .r-h1 span { white-space: normal; }
  .s8-screen { width: calc(88vw + var(--e) * 12vw); height: calc(34vh + var(--e) * 66vh); transform: translate(-50%, calc(-50% + (1 - var(--e)) * 16vh)); }
  .s8-hero .obj { display: none; }
  .s8-hero .s8-cam, .s8-hero .s8-reel, .s8-hero .c-lime1, .s8-hero .s8-cart { display: block; }
  .s8-hero .s8-cam { --x: -8vw; --y: 80%; width: 44vw; } .s8-hero .s8-reel { --x: 70vw; --y: 82%; width: 30vw; }
  .s8-hero .c-lime1 { --x: 60vw; --y: -4%; width: 50vw; --h: 18vh; } .s8-hero .s8-cart { --x: -4vw; --y: 0%; width: 26vw; }
}

/* moving film strip */
.s8-strip { background: #151913; padding: 22px 0; overflow: hidden; background-image: radial-gradient(circle at 50% 9px, var(--paper) 3.5px, transparent 4px), radial-gradient(circle at 50% calc(100% - 9px), var(--paper) 3.5px, transparent 4px); background-size: 20px 100%; }
.s8-strip .track { display: flex; gap: 10px; width: max-content; animation: s8roll 50s linear infinite; }
.s8-strip video { width: 200px; height: 150px; object-fit: cover; border-radius: 3px; filter: sepia(.15) contrast(1.05); }
@keyframes s8roll { to { transform: translateX(calc(-50% - 5px)); } }

/* now screening */
.s8-films { background: var(--forest); color: var(--paper); padding: clamp(80px, 10vw, 140px) 0; }
.s8-films-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; margin-bottom: 50px; }
.s8-films .r-h2 { color: var(--mint); } .s8-films .r-h2 em { color: var(--lime); }
.s8-films .lede { color: #d7dcc6; max-width: 22em; margin: 0; }
.s8-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3vw, 44px) clamp(18px, 2.4vw, 34px); }
.s8-film { all: unset; cursor: pointer; display: block; color: var(--paper); transition: transform .5s var(--ease); }
.s8-film:nth-child(3n+1) { transform: rotate(-1.2deg); } .s8-film:nth-child(3n+2) { transform: rotate(.8deg) translateY(18px); } .s8-film:nth-child(3n) { transform: rotate(-.4deg); }
.s8-film:hover { transform: rotate(0) translateY(-6px); }
.s8-film .frame { display: block; position: relative; aspect-ratio: 4 / 3; background: #0d100c; padding: 12px 26px; background-image: radial-gradient(circle at 12px 50%, var(--forest) 4px, transparent 4.5px), radial-gradient(circle at calc(100% - 12px) 50%, var(--forest) 4px, transparent 4.5px); background-size: 100% 22px; box-shadow: 0 30px 50px -30px rgba(0,0,0,.7); }
.s8-film .frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.s8-film .frame .leader { inset: 12px 26px; }
.s8-film b { display: block; margin-top: 16px; font-family: var(--heavy); font-weight: 800; font-variation-settings: "wdth" 104; text-transform: uppercase; font-size: 1.25rem; letter-spacing: -.01em; color: var(--mint); }
.s8-film small { display: block; font-size: .85rem; color: #b9c2a6; margin-top: 2px; }
.s8-film i { display: inline-block; margin-top: 10px; font-style: normal; font-weight: 700; font-size: .82rem; color: var(--forest); background: var(--lime); padding: 6px 14px; border-radius: 999px; transition: background .3s; }
.s8-film:hover i { background: var(--mint); }
.s8-yours b { color: var(--lime); }
@media (max-width: 900px) { .s8-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .s8-grid { grid-template-columns: 1fr; } }

/* film player */
.s8-modal { position: fixed; inset: 0; z-index: 300; background: rgba(0,40,19,.94); display: grid; place-items: center; padding: 20px; }
.s8-modal[hidden] { display: none; }
.s8-modal .inner { position: relative; width: min(1000px, 100%); }
.s8-modal video { width: 100%; max-height: 80vh; background: #000; display: block; }
.s8-modal .cap { color: var(--mint); font-family: var(--heavy); font-weight: 800; text-transform: uppercase; margin: 14px 0 0; }
.s8-modal .close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--lime); color: var(--forest); font-size: 1.6rem; line-height: 1; cursor: pointer; }

/* ---------- super 8 frame looks (A burnt film / B torn print / C taped snapshot) ---------- */
.s8-film .frame { border-radius: 0; overflow: visible; aspect-ratio: 4 / 3; }
.s8-film .frame video { position: relative; z-index: 1; }

/* A · burnt film: dark film base, sprockets, ragged edge, light-leak burn */
:is([data-look="burn"] .s8-film, .s8-film[data-look="burn"]) .frame { background-color: #0d100c; padding: 14px 28px; }
:is([data-look="burn"] .s8-film, .s8-film[data-look="burn"]) .frame video { filter: sepia(.12) contrast(1.06); }
:is([data-look="burn"] .s8-film, .s8-film[data-look="burn"]) .frame::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 40% 55% at 100% 0%, rgba(255,120,40,.55), transparent 70%), radial-gradient(ellipse 30% 40% at 0% 100%, rgba(255,70,30,.35), transparent 70%); }
:is([data-look="burn"] .s8-film, .s8-film[data-look="burn"]):nth-child(even) .frame::after { background: radial-gradient(ellipse 45% 60% at 0% 0%, rgba(255,150,60,.5), transparent 70%), radial-gradient(ellipse 25% 35% at 100% 100%, rgba(255,90,40,.3), transparent 70%); }

/* B · torn print: cream paper with ripped edges on the forest wall */
:is([data-look="torn"] .s8-film, .s8-film[data-look="torn"]) .frame { background: #fbf8f0; padding: 12px; background-image: none; }
:is([data-look="torn"] .s8-film, .s8-film[data-look="torn"]) .frame video { filter: contrast(1.04); }
:is([data-look="torn"] .s8-film, .s8-film[data-look="torn"]):nth-child(odd) .frame { background: var(--mint); }

/* C · taped snapshot: thick white border, tape, no ragged clip */
:is([data-look="polaroid"] .s8-film, .s8-film[data-look="polaroid"]) .frame { clip-path: none; background: #fffdf7; background-image: none; padding: 12px 12px 46px; aspect-ratio: auto; }
:is([data-look="polaroid"] .s8-film, .s8-film[data-look="polaroid"]) .frame video { aspect-ratio: 4 / 3; height: auto; }
:is([data-look="polaroid"] .s8-film, .s8-film[data-look="polaroid"]) .frame::before { content: ""; position: absolute; z-index: 3; top: -12px; left: 50%; width: 84px; height: 24px; transform: translateX(-50%) rotate(-4deg); background: rgba(213,226,123,.85);
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 20% 2%, 100% 0, 94% 50%, 100% 100%, 10% 96%, 4% 100%, 0 60%, 5% 40%); }
:is([data-look="polaroid"] .s8-film, .s8-film[data-look="polaroid"]):nth-child(even) .frame::before { background: rgba(236,231,214,.9); transform: translateX(-50%) rotate(5deg); }

/* temporary style switcher */
.look-switch { position: fixed; z-index: 200; left: 50%; transform: translateX(-50%); top: 92px; border: 2px solid var(--lime); font-size: .9rem; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: var(--paper); padding: 8px 10px; border-radius: 14px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); font-size: .8rem; }
.look-switch span { font-weight: 700; color: var(--forest); margin-right: 4px; }
.look-switch button { border: 1px solid var(--forest); background: transparent; color: var(--forest); border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.look-switch button.on { background: var(--forest); color: var(--lime); }

/* ---------- PHOTOGRAPHY PAGE ---------- */
.ph-hero { height: 180vh; background: var(--paper); position: relative; }
.ph-hero .stick { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.ph-hero .obj { filter: drop-shadow(0 14px 14px rgba(50,40,20,.26)) drop-shadow(0 2px 3px rgba(50,40,20,.18)); }
.ph-hero .obj.scrap { filter: drop-shadow(0 6px 8px rgba(50,40,20,.18)); }
.ph-hero .print-r img { aspect-ratio: auto; }
.ph-copy { position: relative; z-index: 8; text-align: center; max-width: min(46vw, 760px); padding-top: 60px; transform: translateY(calc(var(--p, 0) * -8vh)); }
.ph-copy .kicker, .ph-index .kicker { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 0 14px; }
.ph-copy .r-h1 { font-size: clamp(2.3rem, min(4.3vw, 8vh), 5rem); font-variation-settings: "wdth" 100; }
.ph-copy .r-h1 span { white-space: nowrap; }
.ph-copy .lede { margin: 18px auto 24px; max-width: 32em; text-align: center; }
.ph-copy .cta-row { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; }
.ph-k1 { --x: -5vw; --y: 3%;  width: 27vw; --h: 60vh; --r: -4deg; --dx: -45vw; --dy: -20vh; z-index: 1; }
.ph-k2 { --x: 77vw; --y: 34%; width: 28vw; --h: 66vh; --r: 5deg; --dx: 40vw; --dy: 30vh; z-index: 1; }
.ph-h1 { --x: 1vw;  --y: 7%;  width: 13vw; --r: -8deg; --dx: -40vw; --dy: -25vh; z-index: 4; }
.ph-h2 { --x: 14vw; --y: 44%; width: 12vw; --r: 6deg;  --dx: -35vw; --dy: 5vh; z-index: 5; --dl: .1s; }
.ph-h3 { --x: 0vw;  --y: 62%; width: 13vw; --r: -4deg; --dx: -40vw; --dy: 35vh; z-index: 4; --dl: .2s; }
.ph-h4 { --x: 18vw; --y: -2%; width: 10vw; --r: 5deg;  --dx: -15vw; --dy: -45vh; z-index: 3; --dl: .3s; }
.ph-h5 { --x: 85vw; --y: 3%;  width: 13vw; --r: 7deg;  --dx: 40vw; --dy: -25vh; z-index: 4; --dl: .1s; }
.ph-h6 { --x: 71vw; --y: 10%; width: 11vw; --r: -6deg; --dx: 25vw; --dy: -40vh; z-index: 5; --dl: .2s; }
.ph-h7 { --x: 86vw; --y: 52%; width: 12vw; --r: 5deg;  --dx: 40vw; --dy: 10vh; z-index: 5; --dl: .25s; }
.ph-h8 { --x: 70vw; --y: 66%; width: 12vw; --r: -8deg; --dx: 25vw; --dy: 40vh; z-index: 4; --dl: .35s; }
@media (max-width: 760px) {
  .ph-hero { height: 150vh; }
  .ph-hero .stick { place-items: end center; }
  .ph-copy { max-width: none; padding: 0 18px 6vh; }
  .ph-copy .r-h1 { font-size: 2.4rem; } .ph-copy .r-h1 span { white-space: normal; }
  .ph-hero .obj { display: none; }
  .ph-hero .ph-k1, .ph-hero .ph-h1, .ph-hero .ph-h5, .ph-hero .ph-h6, .ph-hero .ph-h4 { display: block; }
  .ph-k1 { --x: -6vw; --y: 8%; width: 60vw; --h: 26vh; }
  .ph-h1 { --x: 2vw; --y: 10%; width: 30vw; } .ph-h4 { --x: 30vw; --y: 16%; width: 26vw; }
  .ph-h6 { --x: 52vw; --y: 9%; width: 26vw; } .ph-h5 { --x: 74vw; --y: 14%; width: 28vw; }
}

/* index of weddings */
.ph-index { padding: 50px var(--gutter) 10px; text-align: center; }
.ph-index .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.ph-index a { font-family: var(--heavy); font-weight: 700; text-transform: uppercase; font-size: .86rem; letter-spacing: .02em; color: var(--forest); border-bottom: 1.5px solid transparent; padding-bottom: 2px; transition: border-color .3s; }
.ph-index a b { color: var(--leaf); margin-right: 6px; font-weight: 800; }
.ph-index a:hover { border-color: var(--forest); }

/* wedding chapters */
.ph-stories { padding: clamp(60px, 8vw, 110px) var(--gutter) clamp(40px, 6vw, 80px); }
.ph-story { max-width: 1320px; margin: 0 auto clamp(90px, 13vw, 180px); display: grid; grid-template-columns: 1.25fr 1fr; grid-template-areas: "big txt" "strip strip"; gap: clamp(26px, 5vw, 80px); align-items: start; scroll-margin-top: 90px; }
.ph-story.flip { grid-template-columns: 1fr 1.25fr; grid-template-areas: "txt big" "strip strip"; }
.ph-story figure { margin: 0; cursor: zoom-in; }
.ph-story .print-r { filter: drop-shadow(0 22px 22px rgba(50,40,20,.22)); }
.ph-story .big { grid-area: big; transform: rotate(-1.2deg); }
.ph-story.flip .big { transform: rotate(1.2deg); }
.ph-story .big img { width: 100%; height: auto; max-height: 82vh; object-fit: cover; }
.ph-story .txt { grid-area: txt; padding-top: 10px; }
.ph-story .num { display: block; font-family: var(--heavy); font-weight: 900; font-variation-settings: "wdth" 120; font-size: clamp(3.6rem, 7vw, 6.4rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--forest); }
.ph-story h2 { font-family: var(--heavy); font-weight: 800; font-variation-settings: "wdth" 104; text-transform: uppercase; font-size: clamp(2rem, 3.6vw, 3.3rem); line-height: .95; letter-spacing: -.01em; color: var(--forest); margin: 14px 0 6px; }
.ph-story .venue { font-family: var(--display); font-style: italic; font-size: 1.45rem; color: var(--green); margin: 0 0 14px; }
.ph-story .txt > p:not(.venue):not(.hand) { color: var(--ink-soft); max-width: 30em; }
.ph-story .hand { font-family: var(--script); font-size: 2.3rem; color: var(--green); transform: rotate(-3deg); margin: 6px 0 24px; line-height: 1; }
.ph-story .pair { position: relative; height: clamp(260px, 26vw, 400px); }
.ph-story .pair figure { position: absolute; width: 52%; }
.ph-story .pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ph-story .p1 { left: 0; top: 0; transform: rotate(-5deg); z-index: 2; }
.ph-story .p2 { right: 2%; top: 14%; transform: rotate(6deg); z-index: 1; }
.ph-story .strip { grid-area: strip; display: flex; gap: clamp(14px, 2vw, 28px); align-items: flex-start; }
.ph-story .strip .sp { flex: 1; min-width: 0; }
.ph-story .strip .sp:nth-child(odd) { transform: rotate(-1.5deg) translateY(10px); }
.ph-story .strip .sp:nth-child(even) { transform: rotate(1.4deg); }
.ph-story .strip img { width: 100%; height: clamp(200px, 22vw, 340px); object-fit: cover; }
.ph-story .print-r { transition: transform .5s var(--ease); }
@media (max-width: 860px) {
  .ph-story, .ph-story.flip { grid-template-columns: 1fr; grid-template-areas: "big" "txt" "strip"; }
  .ph-story .pair { height: 72vw; }
  .ph-story .strip { flex-wrap: wrap; } .ph-story .strip .sp { flex: 1 1 45%; }
  .ph-story .strip img { height: 46vw; }
}

/* bridal editorial */
.ph-edit { background: var(--forest); color: var(--paper); padding: clamp(90px, 11vw, 150px) 0; text-align: center; }
.ph-edit .r-h2 { color: var(--mint); } .ph-edit .r-h2 em { color: var(--lime); }
.ph-edit .lede { color: #d7dcc6; max-width: 30em; margin: 22px auto 50px; text-align: center; }
.ph-edit .ed-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 40px); }
.ph-edit figure { margin: 0; cursor: zoom-in; background: #fbf8f0; padding: 10px; }
.ph-edit figure:nth-child(1) { transform: rotate(-3deg); } .ph-edit figure:nth-child(2) { transform: rotate(2deg) translateY(30px); } .ph-edit figure:nth-child(3) { transform: rotate(-1.5deg); }
.ph-edit img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 640px) { .ph-edit .ed-row { grid-template-columns: 1fr; } }

/* let width/height attributes reserve space without forcing pixel heights */
.print-r img, .ph-edit img, .ph-story .big img, .ph-story .pair img { height: auto; }

/* ---------- PHOTOGRAPHY: luxury editorial (clean, airy, no collage) ---------- */
.lx { background: var(--paper); }
.lx-kicker { font-size: .7rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--green); margin: 0 0 18px; }
.lx-hero { position: relative; height: calc(100svh - 110px); min-height: 560px; overflow: hidden; color: var(--paper); }
.lx-hero-img { position: absolute; inset: 0; }
.lx-hero-img img { width: 100%; height: 100%; object-fit: cover; animation: lxzoom 14s ease-out both; }
@keyframes lxzoom { from { transform: scale(1.08); } }
.lx-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,20,10,.05) 30%, rgba(0,20,10,.55)); }
.lx-hero-copy { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: clamp(40px, 8vh, 90px); }
.lx-hero .lx-kicker { color: var(--mint); }
.lx-hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 7.4vw, 7.6rem); line-height: .92; letter-spacing: -.01em; margin: 0; text-transform: none; max-width: 12ch; }
.lx-hero h1 em { font-style: italic; }
.lx-sub { font-family: var(--display); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.7rem); margin: 18px 0 0; color: var(--mint); }
.lx-scroll { position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(40px, 8vh, 90px); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; writing-mode: vertical-rl; padding-bottom: 60px; }
.lx-scroll::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 48px; background: currentColor; animation: lxline 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes lxline { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }

.lx-intro { padding: clamp(90px, 12vw, 170px) 0 clamp(60px, 8vw, 110px); text-align: center; }
.lx-intro p { font-family: var(--display); font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.32; max-width: 30em; margin: 0 auto; color: var(--ink); }
.lx-actions { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 40px; }

.lx-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 var(--gutter); }
.lx-index a { padding: 20px clamp(14px, 2vw, 28px); font-family: var(--display); font-size: 1.15rem; color: var(--ink); transition: color .3s; }
.lx-index a span { font-family: var(--sans); font-size: .62rem; letter-spacing: .2em; color: var(--leaf); margin-right: 8px; vertical-align: 3px; }
.lx-index a:hover { color: var(--green); }

.lx-stories { padding: clamp(80px, 10vw, 150px) var(--gutter) 0; }
.lx-story { max-width: 1280px; margin: 0 auto clamp(120px, 15vw, 220px); scroll-margin-top: 100px; }
.lx-story figure, .lx-edit figure { margin: 0; overflow: hidden; cursor: zoom-in; background: var(--cream); }
.lx-story img, .lx-edit img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s var(--ease); }
.lx-story figure:hover img, .lx-edit figure:hover img { transform: scale(1.035); }
.lx-head { text-align: center; margin-bottom: clamp(36px, 5vw, 64px); }
.lx-head .no { display: block; font-size: .7rem; letter-spacing: .32em; text-transform: uppercase; color: var(--leaf); margin-bottom: 14px; }
.lx-head h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: 1; margin: 0; color: var(--forest); text-transform: none; }
.lx-head .venue { font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); margin: 16px 0 0; }
.lx-main { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end; }
.lx-story.flip .lx-main { grid-template-columns: 1fr 1.55fr; }
.lx-story.flip .lx-big { order: 2; }
.lx-big { aspect-ratio: 4 / 5; max-height: 88vh; }
.lx-big img { object-position: center 35%; }
.lx-side .line { font-family: var(--display); font-style: italic; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.15; color: var(--forest); margin: 0 0 14px; }
.lx-side .txt { color: var(--ink-soft); max-width: 26em; margin: 0 0 clamp(28px, 4vw, 48px); line-height: 1.7; }
.lx-s1 { aspect-ratio: 4 / 5; width: 78%; }
.lx-story.flip .lx-s1 { margin-left: auto; }
.lx-row { display: grid; gap: clamp(14px, 2vw, 26px); margin-top: clamp(14px, 2vw, 26px); }
.lx-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.lx-row.cols-4 { grid-template-columns: repeat(4, 1fr); }
.lx-row figure { aspect-ratio: 4 / 5; }
@media (max-width: 860px) {
  .lx-main, .lx-story.flip .lx-main { grid-template-columns: 1fr; }
  .lx-story.flip .lx-big { order: 0; }
  .lx-s1 { width: 100%; }
  .lx-row.cols-3, .lx-row.cols-4 { grid-template-columns: 1fr 1fr; }
  .lx-scroll { display: none; }
}

.lx-edit { background: var(--cream); padding: clamp(90px, 12vw, 160px) 0; }
.lx-approach { padding: clamp(100px, 13vw, 180px) 0; text-align: center; }
.lx-approach h2, .lx-cta h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1; margin: 0; color: var(--forest); text-transform: none; }
.lx-approach h2 em, .lx-cta h2 em { font-style: italic; }
.lx-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 5vw, 70px); margin-top: clamp(50px, 6vw, 80px); text-align: left; border-top: 1px solid var(--line); padding-top: 40px; }
.lx-three h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; margin: 0 0 10px; color: var(--forest); }
.lx-three p { color: var(--ink-soft); margin: 0; line-height: 1.7; }
@media (max-width: 760px) { .lx-three { grid-template-columns: 1fr; } }
.lx-cta { background: var(--forest); color: var(--paper); text-align: center; padding: clamp(100px, 13vw, 180px) 0; }
.lx-cta h2 { color: var(--paper); } .lx-cta h2 em { color: var(--lime); }
.lx-cta p { color: #d7dcc6; max-width: 30em; margin: 24px auto 32px; }
.lx-cta .btn { --bg: var(--paper); --fg: var(--forest); }

/* =====================================================================
   HEADER OPTIONS (html[data-header="a|b|c|d"]) — temporary, pick one
   ===================================================================== */
html[data-header] .promo { display: none; }
html[data-header] body.menu-open .nav { z-index: 103; }
html[data-header] .mobile-menu a { font-family: var(--display); font-style: normal; text-transform: none; font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: 1.08; transition: color .3s, padding-left .4s var(--ease); }
html[data-header] .mobile-menu a:hover { color: var(--lime); font-style: italic; padding-left: 14px; }

/* A · Centered luxury: big spaced logo on top, quiet small-caps links below */
html[data-header="a"] .nav { position: sticky; top: 0; flex-direction: column; gap: 12px; padding: 24px var(--gutter) 14px; background: rgba(252,251,248,.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); box-shadow: none; }
html[data-header="a"] .logo { font-family: var(--display); font-weight: 400; font-variation-settings: normal; text-transform: uppercase; letter-spacing: .3em; font-size: 1.55rem; }
html[data-header="a"] .logo em { font-size: 1.1em; letter-spacing: .02em; margin-left: .3em; color: var(--green); }
html[data-header="a"] .nav-links { gap: clamp(20px, 3vw, 44px); }
html[data-header="a"] .nav-links a:not(.btn) { font-size: .68rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
html[data-header="a"] .nav .btn { --bg: transparent; --fg: var(--forest); box-shadow: inset 0 -1px 0 currentColor; border-radius: 0; padding: .3em 0; font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; }
html[data-header="a"] .nav .btn::before { display: none; }
html[data-header="a"] .nav .btn .arrow { display: none; }
@media (max-width: 900px) { html[data-header="a"] .nav { flex-direction: row; justify-content: space-between; padding: 16px var(--gutter); } html[data-header="a"] .logo { font-size: 1.1rem; letter-spacing: .2em; } }

/* B · Floating glass pill */
html[data-header="b"] .nav { position: fixed; top: 14px; left: 50%; right: auto; transform: translateX(-50%); width: min(1160px, calc(100% - 28px)); border-radius: 999px; padding: 8px 8px 8px 26px; background: rgba(252,251,248,.74); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); border: 1px solid rgba(0,40,19,.12); box-shadow: 0 14px 36px -22px rgba(0,40,19,.5); }
html[data-header="b"] body { padding-top: 88px; }
html[data-header="b"] body.lx, html[data-header="b"] body.home { padding-top: 0; }
html[data-header="b"] .lx-hero { height: 100svh; }
html[data-header="b"] .nav .btn { --bg: var(--lime); --fg: var(--forest); }
html[data-header="b"] .nav .btn::before { background: var(--mint); }
html[data-header="b"] .nav-links a:not(.btn) { font-size: .86rem; }
@media (max-width: 900px) { html[data-header="b"] .nav { padding: 6px 6px 6px 20px; } }

/* C · Minimal: "Menu" left, logo centred, Book right, full-screen editorial menu */
html[data-header="c"] .nav { position: sticky; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px var(--gutter); background: rgba(252,251,248,.92); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
html[data-header="c"] .nav.solid { border-bottom-color: var(--line); }
html[data-header="c"] .burger { display: block; order: 0; justify-self: start; width: 112px; }
html[data-header="c"] .burger span { left: 0; right: auto; width: 26px; }
html[data-header="c"] .burger::after { content: "Menu"; position: absolute; left: 38px; top: 12px; font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: currentColor; }
html[data-header="c"] body.menu-open .burger::after { content: "Close"; }
html[data-header="c"] .logo { order: 1; justify-self: center; font-size: 1.45rem; }
html[data-header="c"] .nav-links { order: 2; justify-self: end; display: flex; }
html[data-header="c"] .nav-links a:not(.btn) { display: none; }
@media (max-width: 600px) { html[data-header="c"] .nav-links { display: none; } html[data-header="c"] .nav { grid-template-columns: auto 1fr; } html[data-header="c"] .logo { justify-self: end; font-size: 1.15rem; } }

/* D · Wild: a vertical side rail, logo running up the edge */
@media (min-width: 901px) {
  html[data-header="d"] .nav { position: fixed; top: 0; bottom: 0; left: 0; right: auto; width: 86px; flex-direction: column; justify-content: space-between; align-items: center; padding: 22px 0; background: var(--forest); color: var(--mint); border: 0; backdrop-filter: none; }
  html[data-header="d"] body { padding-left: 86px; }
  html[data-header="d"] .burger { display: block; order: 0; }
  html[data-header="d"] .burger span { background: var(--lime); }
  html[data-header="d"] .logo { order: 1; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.6rem; color: var(--paper); }
  html[data-header="d"] .logo em { color: var(--lime); margin-top: .3em; }
  html[data-header="d"] .nav-links { order: 2; flex-direction: column; gap: 0; }
  html[data-header="d"] .nav-links a:not(.btn) { display: none; }
  html[data-header="d"] .nav .btn { writing-mode: vertical-rl; transform: rotate(180deg); --bg: var(--lime); --fg: var(--forest); padding: 1.4em .9em; }
  html[data-header="d"] .nav .btn .arrow { display: none; }
  html[data-header="d"] .mobile-menu { padding-left: calc(86px + var(--gutter)); }
}
@media (max-width: 900px) { html[data-header="d"] .nav { background: var(--forest); color: var(--paper); } html[data-header="d"] .logo em { color: var(--lime); } html[data-header="d"] .burger span { background: var(--lime); } }

/* the temporary picker */
.hdr-pick { position: fixed; z-index: 400; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; background: var(--forest); color: var(--mint); padding: 8px 10px; border-radius: 999px; box-shadow: 0 14px 40px -12px rgba(0,0,0,.5); font-size: .78rem; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 24px); }
.hdr-pick span { font-weight: 700; padding: 0 6px; }
.hdr-pick button { border: 1px solid rgba(229,237,182,.4); background: transparent; color: var(--mint); border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.hdr-pick button.on { background: var(--lime); color: var(--forest); border-color: var(--lime); }

/* ---------- hero option pickers (temporary) ---------- */
.phv-pick { position: fixed; z-index: 400; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; background: var(--forest); color: var(--mint); padding: 8px 10px; border-radius: 999px; box-shadow: 0 14px 40px -12px rgba(0,0,0,.5); font-size: .78rem; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 24px); }
.phv-pick span { font-weight: 700; padding: 0 6px; }
.phv-pick button { border: 1px solid rgba(229,237,182,.4); background: transparent; color: var(--mint); border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer; }
.phv-pick button.on { background: var(--lime); color: var(--forest); border-color: var(--lime); }

/* ---------- PHOTOGRAPHY hero options ---------- */
main[data-ph] .phv { display: none; }
main[data-ph="va"] .va, main[data-ph="vb"] .vb, main[data-ph="vc"] .vc, main[data-ph="vd"] .vd { display: block; }
.phv .kicker { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 0 14px; }
.phv .r-h1 { font-size: clamp(2.5rem, 5.4vw, 5.6rem); font-variation-settings: "wdth" 100; }
.phv .r-h1 span { display: block; }
.phv .hand { font-family: var(--script); font-size: 2.3rem; color: var(--green); transform: rotate(-3deg); margin: 14px 0; line-height: 1; }
.phv .lede { max-width: 34em; color: var(--ink-soft); }
.phv .ctas { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.phv figure { margin: 0; }
.phv .print-r { filter: drop-shadow(0 22px 22px rgba(50,40,20,.22)); }

/* A · torn reveal */
.va { position: relative; padding-bottom: clamp(60px, 8vw, 110px); }
.va-img { height: 76vh; min-height: 480px; clip-path: polygon(0 0, 100% 0, 100.0% 96.6%, 98.3% 99.9%, 96.7% 95.6%, 95.0% 99.7%, 93.3% 96.8%, 91.7% 97.8%, 90.0% 98.6%, 88.3% 97.8%, 86.7% 96.3%, 85.0% 98.6%, 83.3% 98.5%, 81.7% 96.9%, 80.0% 100.0%, 78.3% 97.3%, 76.7% 98.6%, 75.0% 99.7%, 73.3% 99.3%, 71.7% 99.3%, 70.0% 98.4%, 68.3% 98.7%, 66.7% 96.0%, 65.0% 95.7%, 63.3% 96.9%, 61.7% 95.8%, 60.0% 99.1%, 58.3% 96.9%, 56.7% 97.6%, 55.0% 95.7%, 53.3% 98.7%, 51.7% 96.1%, 50.0% 95.6%, 48.3% 99.0%, 46.7% 99.1%, 45.0% 96.1%, 43.3% 100.0%, 41.7% 99.4%, 40.0% 97.2%, 38.3% 99.4%, 36.7% 96.4%, 35.0% 99.3%, 33.3% 96.6%, 31.7% 95.9%, 30.0% 98.7%, 28.3% 99.0%, 26.7% 99.9%, 25.0% 97.4%, 23.3% 97.6%, 21.7% 98.9%, 20.0% 97.9%, 18.3% 99.5%, 16.7% 95.9%, 15.0% 97.1%, 13.3% 95.8%, 11.7% 97.9%, 10.0% 99.9%, 8.3% 95.8%, 6.7% 96.7%, 5.0% 95.8%, 3.3% 96.4%, 1.7% 96.7%, 0.0% 97.2%); }
.va-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.va-print { position: absolute; z-index: 3; right: 7vw; top: calc(76vh - 14vw); width: clamp(150px, 16vw, 260px); transform: rotate(6deg); filter: drop-shadow(0 22px 22px rgba(50,40,20,.3)); }
.va-print img { aspect-ratio: 4 / 5; object-fit: cover; }
.va-copy { padding-top: clamp(40px, 5vw, 70px); max-width: 1320px; }
@media (max-width: 760px) { .va-img { height: 56vh; } .va-print { top: calc(56vh - 30vw); width: 34vw; right: 5vw; } }

/* B · cover chapter */
.vb { padding: clamp(40px, 5vw, 70px) var(--gutter) clamp(60px, 8vw, 110px); }
.vb-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(26px, 5vw, 80px); align-items: start; }
.vb-big { transform: rotate(-1.2deg); }
.vb-big img { width: 100%; aspect-ratio: 4 / 5; max-height: 84vh; object-fit: cover; }
.vb-txt .num { display: block; font-family: var(--heavy); font-weight: 900; font-variation-settings: "wdth" 120; font-size: clamp(3.6rem, 7vw, 6.4rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--forest); margin-bottom: 16px; }
.vb-pair { position: relative; height: clamp(220px, 22vw, 340px); margin-top: 30px; }
.vb-pair figure { position: absolute; width: 46%; }
.vb-pair img { aspect-ratio: 4 / 5; object-fit: cover; }
.vb-pair .p1 { left: 0; top: 0; transform: rotate(-5deg); z-index: 2; }
.vb-pair .p2 { left: 38%; top: 12%; transform: rotate(6deg); }
@media (max-width: 860px) { .vb-grid { grid-template-columns: 1fr; } .vb-pair { height: 64vw; } }

/* C · contact sheet */
.vc { padding: clamp(50px, 6vw, 90px) 0 clamp(60px, 8vw, 110px); text-align: center; }
.vc-copy .r-sub { margin-left: auto; margin-right: auto; }
.vc-row { overflow: hidden; padding: clamp(36px, 4vw, 60px) 0; }
.vc-track { display: flex; gap: clamp(16px, 2vw, 28px); width: max-content; animation: s8roll 70s linear infinite; }
.vc-track .print-r { width: clamp(170px, 16vw, 250px); flex: none; }
.vc-track .print-r:nth-child(odd) { transform: rotate(-2deg); } .vc-track .print-r:nth-child(even) { transform: rotate(2deg) translateY(16px); }
.vc-track img { aspect-ratio: 4 / 5; object-fit: cover; }
.vc-foot .lede { margin: 0 auto; text-align: center; } .vc-foot .ctas { justify-content: center; }

/* D · magazine cover */
.vd { padding: clamp(30px, 4vw, 60px) 0 clamp(60px, 8vw, 110px); }
.vd-stage { position: relative; width: min(1180px, 92vw); height: min(84vh, 820px); margin: 0 auto; }
.vd-cover { position: absolute; left: 50%; top: 50%; width: min(30vw, 440px); transform: translate(-50%, -50%) rotate(-2deg); z-index: 2; }
.vd-cover img { aspect-ratio: 4 / 5; object-fit: cover; }
.vd-top, .vd-bot { position: absolute; z-index: 3; margin: 0; font-family: var(--heavy); font-weight: 900; font-variation-settings: "wdth" 110; text-transform: uppercase; font-size: clamp(3rem, 8.4vw, 8.6rem); line-height: .84; letter-spacing: -.02em; color: var(--forest); }
.vd-top { left: 0; top: 4%; }
.vd-bot { right: 0; bottom: 4%; text-align: right; }
.vd-bot { -webkit-text-stroke: 0; }
.vd-sticker { position: absolute; z-index: 4; left: 8%; bottom: 20%; width: clamp(110px, 11vw, 160px); aspect-ratio: 1; border-radius: 50%; background: var(--lime); color: var(--forest); display: grid; place-items: center; text-align: center; font-family: var(--display); font-style: italic; font-size: clamp(1rem, 1.4vw, 1.3rem); line-height: 1.05; transform: rotate(-12deg); box-shadow: 0 14px 30px -14px rgba(0,40,19,.5); }
.vd-note { position: absolute; z-index: 4; right: 6%; top: 18%; }
.vd-foot { text-align: center; } .vd-foot .lede { margin: 30px auto 0; text-align: center; } .vd-foot .ctas { justify-content: center; }
@media (max-width: 760px) { .vd-stage { height: 110vw; } .vd-cover { width: 56vw; } .vd-note { display: none; } }

/* ---------- SUPER 8 hero options ---------- */
main[data-s8="c"] .s8-hero { display: none; }
main:not([data-s8="c"]) .s8v-c { display: none; }
.s8-beam { display: none; }
/* A · just the screen */
main[data-s8="a"] .s8-hero .obj, main[data-s8="b"] .s8-hero .obj { display: none; }
main[data-s8="a"] .s8-hero .stick { background: var(--paper); background-image: linear-gradient(rgba(0,40,19,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,40,19,.06) 1px, transparent 1px); background-size: 24px 24px; }
main[data-s8="a"] .s8-screen { box-shadow: 0 40px 80px -40px rgba(0,40,19,.7); }
/* B · full-screen film */
main[data-s8="b"] .s8-hero { height: auto; }
main[data-s8="b"] .s8-hero .stick { position: relative; height: calc(100svh - 110px); min-height: 520px; }
main[data-s8="b"] .s8-screen { left: 0; top: 0; width: 100%; height: 100%; transform: none; padding: 0; }
main[data-s8="b"] .s8-screen::after { background: linear-gradient(180deg, rgba(0,20,10,.1) 35%, rgba(0,20,10,.65)); }
main[data-s8="b"] .s8-screen video { animation: s8flick .18s steps(2) infinite; }
@keyframes s8flick { 50% { opacity: .965; } }
main[data-s8="b"] .s8-copy { top: auto; bottom: 8vh; left: var(--gutter); transform: none; opacity: 1; text-align: left; width: auto; max-width: 900px; }
main[data-s8="b"] .s8-copy .r-h1, main[data-s8="b"] .s8-copy .r-sub { color: var(--paper); }
main[data-s8="b"] .s8-copy .kicker { color: var(--lime); }
/* C · rolling film strip */
.s8v-c { padding: clamp(40px, 5vw, 70px) 0; overflow: hidden; }
.s8v-c-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.s8v-c .kicker { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 0 14px; }
.s8v-c .r-h1 { font-size: clamp(2.5rem, 5vw, 5.2rem); } .s8v-c .r-h1 span { display: block; }
.s8v-c .lede { max-width: 30em; } .s8v-c .ctas { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 22px; }
.s8v-c-strip { height: min(80vh, 760px); overflow: hidden; justify-self: center; width: min(360px, 100%); background: #151913; padding: 0 30px; transform: rotate(3deg); background-image: radial-gradient(circle at 13px 50%, var(--paper) 4.5px, transparent 5px), radial-gradient(circle at calc(100% - 13px) 50%, var(--paper) 4.5px, transparent 5px); background-size: 100% 24px; box-shadow: 0 40px 70px -40px rgba(0,40,19,.7); }
.s8v-c-strip .track { display: flex; flex-direction: column; gap: 12px; animation: s8up 40s linear infinite; }
.s8v-c-strip video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@keyframes s8up { to { transform: translateY(calc(-50% - 6px)); } }
@media (max-width: 860px) { .s8v-c-grid { grid-template-columns: 1fr; } .s8v-c-strip { height: 70vh; } }
/* D · projector beam */
main[data-s8="d"] .s8-hero .obj:not(.s8-cam) { display: none; }
main[data-s8="d"] .s8-cam { --x: -1vw; --y: calc(62% - 7vw); width: 19vw; --r: 0deg; --dx: -30vw; --dy: 0vh; }
main[data-s8="d"] .s8-cam svg { transform: scaleX(-1); }
main[data-s8="d"] .s8-screen { left: 58%; width: calc(40vw + var(--e) * 60vw); }
main[data-s8="d"] .s8-beam { display: block; position: absolute; z-index: 6; left: 16vw; top: 37%; width: 24vw; height: 48vh; clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 56%); background: linear-gradient(90deg, rgba(255,246,214,.85), rgba(255,246,214,.12)); filter: blur(1.5px); opacity: calc(1 - var(--e) * 2.5); animation: s8beam 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes s8beam { 0%, 100% { opacity: .9; } 50% { opacity: .7; } }
@media (max-width: 760px) { main[data-s8="d"] .s8-beam { display: none; } main[data-s8="d"] .s8-screen { left: 50%; } }

/* ---------- TIMELINE BUILDER ---------- */
.tl-hero { padding: clamp(60px, 8vw, 110px) 0 clamp(40px, 5vw, 70px); text-align: center; }
.tl-hero .kicker { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 0 14px; }
.tl-hero .r-h1 { font-size: clamp(2.4rem, 5vw, 5rem); } .tl-hero .r-h1 span { display: block; }
.tl-hero .lede { max-width: 38em; margin: 22px auto 0; text-align: center; }
.tl-app { background: var(--forest); color: var(--paper); padding: clamp(50px, 7vw, 100px) 0; }
.tl-grid { display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.tl-controls { position: sticky; top: 130px; display: grid; gap: 22px; }
.tl-field > span { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); margin-bottom: 10px; }
.tl-field input[type=date] { width: 100%; font: inherit; font-size: 1.1rem; padding: 14px 16px; border-radius: 14px; border: 0; background: var(--paper); color: var(--forest); }
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-chips button { border: 1px solid rgba(229,237,182,.35); background: transparent; color: var(--mint); border-radius: 999px; padding: 9px 14px; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; transition: background .25s, color .25s; }
.tl-chips button:hover { border-color: var(--lime); }
.tl-chips button.on { background: var(--lime); border-color: var(--lime); color: var(--forest); }
.tl-note { font-size: .78rem; color: #b9c2a6; margin: 0; }
.tl-out { background: var(--paper); color: var(--ink); border-radius: 22px; padding: clamp(22px, 3vw, 40px); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.tl-sun { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; padding-bottom: 24px; border-bottom: 1px dashed var(--line); margin-bottom: 18px; }
.tl-arc { position: relative; height: 90px; border-radius: 200px 200px 0 0; background: linear-gradient(180deg, #ffd88a 0%, #f6a96b 45%, #e57c7c 75%, #6d5a8f 100%); overflow: hidden; }
.tl-arc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: #2f5d7c; opacity: .85; }
.tl-arc .sun { --t: .5; position: absolute; width: 34px; height: 34px; border-radius: 50%; background: #fff3c2; box-shadow: 0 0 30px 10px rgba(255,236,170,.8); left: calc(8% + var(--t) * 80% - 17px); bottom: calc(10px + (1 - var(--t)) * 40px); transition: left .6s var(--ease), bottom .6s var(--ease); }
.tl-sunfacts { display: flex; gap: 22px; }
.tl-sunfacts p { margin: 0; }
.tl-sunfacts small { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.tl-sunfacts b { font-family: var(--heavy); font-weight: 800; font-size: 1.3rem; color: var(--forest); }
.tl-list { list-style: none; margin: 0; padding: 0; }
.tl-list li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tl-list time { font-family: var(--heavy); font-weight: 700; font-size: .92rem; color: var(--green); padding-top: 2px; }
.tl-list b { display: block; font-size: 1.02rem; color: var(--forest); }
.tl-list span { display: block; font-size: .9rem; color: var(--ink-soft); margin-top: 2px; }
.tl-list li.sun { background: linear-gradient(90deg, rgba(246,169,107,.22), transparent); border-radius: 10px; padding-left: 10px; margin-left: -10px; }
.tl-list li.sun b::after { content: " ☀"; color: #e98a3a; }
.tl-list li.bts b::after { content: "BTS moment"; margin-left: 10px; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--lime); color: var(--forest); padding: 3px 8px; border-radius: 999px; vertical-align: 2px; }
.tl-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.tl-rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: 40px; }
.tl-rules > div { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.tl-rules b { font-family: var(--heavy); font-weight: 900; font-size: 2.2rem; color: transparent; -webkit-text-stroke: 1.2px var(--forest); }
.tl-rules h4 { font-family: var(--heavy); font-size: 1.05rem; color: var(--forest); margin: 6px 0 8px; }
.tl-rules p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 1000px) { .tl-rules { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .tl-grid { grid-template-columns: 1fr; } .tl-controls { position: static; } .tl-sun { grid-template-columns: 1fr; } .tl-list li { grid-template-columns: 78px 1fr; } }
@media (max-width: 560px) { .tl-rules { grid-template-columns: 1fr; } .tl-sunfacts { gap: 14px; } }
@media print {
  .promo, .nav, .mobile-menu, footer, .slashes, .tl-hero, .tl-controls, .tl-actions, main > section:not(.tl-app) { display: none !important; }
  .tl-app { background: #fff; padding: 0; } .tl-grid { display: block; } .tl-out { box-shadow: none; }
}

/* ---------- GEAR PAGE ---------- */
.gr-hero { padding: clamp(50px, 7vw, 100px) 0; }
.gr-hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.gr-hero .kicker { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 0 14px; }
.gr-hero .r-h1 { font-size: clamp(2.6rem, 6vw, 6rem); } .gr-hero .r-h1 span { display: block; }
.gr-hero .lede { max-width: 32em; margin-top: 20px; }
.gr-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.gr-jump a { border: 1px solid var(--forest); border-radius: 999px; padding: 8px 16px; font-weight: 600; font-size: .88rem; color: var(--forest); transition: background .3s, color .3s; }
.gr-jump a:hover { background: var(--forest); color: var(--lime); }
.gr-phone { justify-self: center; text-align: center; }
.gr-phone .phone { flex: none; width: clamp(220px, 22vw, 300px); margin: 0 auto; transform: rotate(3deg) !important; }
.gr-phone .hand { font-family: var(--script); font-size: 2rem; color: var(--green); margin: 18px 0 0; transform: rotate(-3deg); }
.gr-sec { padding: clamp(70px, 9vw, 120px) 0; scroll-margin-top: 110px; }
.gr-head { margin-bottom: 36px; }
.gr-head .num { display: block; font-family: var(--heavy); font-weight: 900; font-variation-settings: "wdth" 120; font-size: clamp(3rem, 5vw, 4.6rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.4px var(--forest); }
.gr-head h2 { font-family: var(--heavy); font-weight: 800; font-variation-settings: "wdth" 104; text-transform: uppercase; font-size: clamp(2rem, 4vw, 3.4rem); line-height: .95; color: var(--forest); margin: 10px 0 8px; }
.gr-head h2 em { font-family: var(--display); font-weight: 400; font-style: italic; }
.gr-head p { color: var(--ink-soft); margin: 0; }
.gr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.gr-item { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s; }
.gr-item:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(0,40,19,.5); }
.gr-item h3 { font-family: var(--heavy); font-weight: 800; font-size: 1.15rem; color: var(--forest); margin: 0 0 8px; }
.gr-item h3 small { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--green); margin-left: 4px; }
.gr-item p { color: var(--ink-soft); font-size: .93rem; margin: 0 0 18px; flex: 1; }
.gr-item .shop { align-self: flex-start; background: var(--lime); color: var(--forest); font-weight: 700; font-size: .84rem; padding: 8px 16px; border-radius: 999px; }
.gr-item .shop[href=""] { background: var(--cream); color: var(--ink-soft); pointer-events: none; font-size: 0; }
.gr-item .shop[href=""]::after { content: "Link coming soon"; font-size: .8rem; }
.gr-disclose { margin-top: 40px; font-size: .8rem; color: var(--ink-soft); max-width: 46em; }
@media (max-width: 900px) { .gr-hero-grid { grid-template-columns: 1fr; } .gr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gr-grid { grid-template-columns: 1fr; } }
.tl-stats { background: var(--paper); padding: 0 0 clamp(40px, 5vw, 70px); }
.tl-stats .kicker { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 0 18px; }
.tl-stat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tl-stat-row > div { padding: 22px 16px; text-align: center; border-right: 1px solid var(--line); }
.tl-stat-row > div:last-child { border-right: 0; }
.tl-stat-row b { display: block; font-family: var(--heavy); font-weight: 900; font-variation-settings: "wdth" 110; font-size: clamp(1.6rem, 2.6vw, 2.3rem); color: var(--forest); text-transform: uppercase; }
.tl-stat-row span { font-size: .84rem; color: var(--ink-soft); }
@media (max-width: 860px) { .tl-stat-row { grid-template-columns: 1fr 1fr; } .tl-stat-row > div { border-bottom: 1px solid var(--line); } }
.tl-list li.day { display: block; background: var(--forest); color: var(--lime); border-radius: 10px; padding: 8px 14px; margin: 14px 0 6px; border: 0; }
.tl-list li.day b { color: var(--lime); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.tl-layout b { -webkit-text-stroke: 0; color: var(--green); font-size: 1.6rem; }
/* timeline: make it yours */
.tl-title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--forest); margin: 4px 0 2px; }
.tl-hint { font-size: .82rem; color: var(--ink-soft); margin: 0 0 10px; }
.tl-list li:not(.day):not(.tip) { grid-template-columns: 96px 1fr 28px; position: relative; }
.tl-list time .nudge { display: flex; gap: 4px; margin-top: 6px; opacity: .35; transition: opacity .25s; }
.tl-list li:hover .nudge, .tl-list li:focus-within .nudge { opacity: 1; }
.tl-list .nudge button, .tl-list .x { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--forest); font: 600 .9rem/1 var(--sans, inherit); cursor: pointer; padding: 0; }
.tl-list .nudge button:hover { background: var(--lime); border-color: var(--lime); }
.tl-list .x { align-self: start; opacity: 0; transition: opacity .25s; }
.tl-list li:hover .x, .tl-list li:focus-within .x { opacity: .7; }
.tl-list .x:hover { opacity: 1; background: #f3d9c9; }
.tl-list b[contenteditable] { outline: none; border-radius: 6px; cursor: text; }
.tl-list b[contenteditable]:hover, .tl-list b[contenteditable]:focus { background: rgba(214,240,120,.35); box-shadow: 0 0 0 4px rgba(214,240,120,.35); }
.tl-list li.own b::after { content: "Your moment"; margin-left: 10px; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--forest); color: var(--lime); padding: 3px 8px; border-radius: 999px; vertical-align: 2px; }
.tl-list li.fresh { animation: tl-pop 1.2s var(--ease); }
@keyframes tl-pop { 0% { background: var(--lime); transform: scale(1.02); } 100% { background: transparent; transform: none; } }
.tl-add { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; margin-top: 18px; }
.tl-add input { border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font: inherit; background: #fff; color: var(--ink); }
.tl-actions .ghost { background: transparent; border: 1px solid var(--forest); color: var(--forest); }
.tl-reset { background: none; border: 0; cursor: pointer; font: inherit; }
@media (max-width: 560px) { .tl-add { grid-template-columns: 1fr 1fr; } .tl-add input[type=text] { grid-column: 1 / -1; order: -1; } .tl-list li:not(.day):not(.tip) { grid-template-columns: 78px 1fr 26px; } .tl-list .x { opacity: .5; } }
@media print { .tl-hint, .tl-add, .nudge, .tl-list .x { display: none !important; } .tl-list li:not(.day):not(.tip) { grid-template-columns: 96px 1fr; } }
/* ---------- BLOG / GUIDE ---------- */
.bl-hero { padding: clamp(40px, 6vw, 90px) 0; }
.bl-hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.bl-hero .kicker { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 0 14px; }
.bl-hero .r-h1 { font-size: clamp(2.4rem, 5.4vw, 5.2rem); } .bl-hero .r-h1 span { display: block; }
.bl-by { font-size: .86rem; color: var(--ink-soft); margin-top: 18px; }
.bl-free { background: var(--forest); color: var(--mint); border-radius: 22px; padding: 22px; position: sticky; top: 110px; box-shadow: 0 40px 70px -40px rgba(0,40,19,.7); }
.bl-free img { display: block; width: 62%; height: auto; margin: -60px auto 16px; border-radius: 10px; transform: rotate(-3deg); box-shadow: 0 24px 40px -20px rgba(0,0,0,.6); }
.bl-free-h { font-family: var(--display); font-style: italic; font-size: 1.6rem; color: var(--lime); margin: 0 0 12px; }
.bl-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bl-form .field { margin-bottom: 10px; } .bl-form label { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.bl-form input { width: 100%; border: 0; border-radius: 999px; padding: 11px 16px; font: inherit; background: var(--paper); color: var(--ink); }
.bl-form .err { color: var(--lime); font-size: .85rem; min-height: 1em; }
.bl-form .u-link { color: var(--lime); }
.bl-body { max-width: 780px; padding-bottom: clamp(60px, 8vw, 110px); font-size: 1.06rem; line-height: 1.7; }
.bl-body h2 { font-family: var(--heavy); font-weight: 800; font-variation-settings: "wdth" 106; text-transform: uppercase; color: var(--forest); font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1; margin: 2.2em 0 .6em; padding-top: .6em; border-top: 3px solid var(--lime); }
.bl-body h3 { font-family: var(--heavy); color: var(--green); font-size: 1.12rem; margin: 1.6em 0 .5em; }
.bl-lead { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; color: var(--forest); margin-top: 0; }
.bl-body table { width: 100%; border-collapse: collapse; margin: 14px 0 22px; font-size: .95rem; }
.bl-body th, .bl-body td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.bl-body thead th { background: var(--forest); color: var(--mint); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.bl-tl td:first-child { width: 110px; font-weight: 700; color: var(--green); white-space: nowrap; }
.bl-tl tr.sun td { background: rgba(246,169,107,.2); }
.bl-num th { width: 34%; color: var(--forest); }
.bl-formula { background: var(--mint); padding: 14px 18px; border-radius: 14px; }
.bl-check { list-style: none; padding: 0; } .bl-check li { padding: 6px 0 6px 32px; position: relative; } .bl-check li::before { content: ""; position: absolute; left: 0; top: 10px; width: 18px; height: 18px; border: 2px solid var(--green); border-radius: 5px; }
.bl-chart { margin: 18px 0; } .bl-chart svg { width: 100%; height: auto; font-family: var(--sans); }
.bl-chart figcaption { font-size: .8rem; color: var(--ink-soft); }
.bl-chart .band { fill: var(--cream); } .bl-chart .bandt { font-size: 11px; fill: var(--ink-soft); }
.bl-chart .sun { fill: none; stroke: #e98a3a; stroke-width: 2.5; } .bl-chart .sund { fill: #e98a3a; } .bl-chart .sunt { font-size: 11px; text-anchor: middle; fill: var(--ink); font-weight: 700; }
.bl-chart .cer { fill: none; stroke: var(--green); stroke-width: 2; stroke-dasharray: 4 4; } .bl-chart .cerd { fill: var(--green); } .bl-chart .cert { font-size: 11px; text-anchor: middle; fill: var(--ink-soft); }
.bl-chart .mon { font-size: 12px; text-anchor: middle; fill: var(--ink-soft); } .bl-chart .key text { font-size: 12px; fill: var(--ink); }
.bl-faq details { border-bottom: 1px solid var(--line); padding: 14px 0; } .bl-faq summary { font-weight: 700; color: var(--forest); cursor: pointer; }
@media (max-width: 900px) { .bl-hero-grid { grid-template-columns: 1fr; } .bl-free { position: static; margin-top: 50px; } }
@media (max-width: 560px) { .bl-form .row2 { grid-template-columns: 1fr; } .bl-body table { font-size: .86rem; } .bl-tl td:first-child { width: 84px; } }
/* ---------- CONTENT CREATION HERO OPTIONS ---------- */
.cc-hero { display: none; position: relative; overflow: hidden; }
main[data-cc="a"] .cc-a, main[data-cc="b"] .cc-b, main[data-cc="c"] .cc-c, main[data-cc="d"] .cc-d { display: block; }
.cc-hero .display.xl { font-size: clamp(3rem, 7.4vw, 7.6rem); }
.cc-btns { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.cc-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(20px, 4vw, 60px); align-items: center; padding-top: clamp(40px, 6vw, 90px); padding-bottom: clamp(40px, 6vw, 90px); }
.cc-copy .lede { max-width: 34em; }
/* A: phone stack */
.cc-stack { position: relative; height: clamp(440px, 46vw, 640px); }
.cc-stack .phone { position: absolute; width: clamp(160px, 15vw, 230px); flex: none; }
.cc-p1 { left: 2%; top: 14%; transform: rotate(-9deg) !important; z-index: 2; }
.cc-p2 { left: 32%; top: 0; transform: rotate(3deg) !important; z-index: 3; }
.cc-p3 { right: 0; top: 22%; transform: rotate(10deg) !important; z-index: 2; }
.cc-kraft { position: absolute; inset: 10% 6% 6% 10%; transform: rotate(-4deg); z-index: 0; }
.cc-tape { position: absolute; left: 44%; top: -2%; z-index: 4; }
.cc-bubble { position: absolute; z-index: 5; left: 6%; bottom: 6%; background: var(--lime); color: var(--forest); font-weight: 800; padding: 12px 18px; border-radius: 22px 22px 22px 6px; transform: rotate(-4deg); box-shadow: 0 16px 30px -16px rgba(0,40,19,.6); margin: 0; }
.cc-bubble small { display: block; font-weight: 500; font-size: .78rem; }
.cc-stack .cc-sticker { position: absolute; right: -2%; top: -4%; z-index: 6; }
.cc-hero .sticker { width: 130px; height: 130px; }
/* B: full-screen film */
.cc-b { min-height: min(92vh, 900px); display: none; color: var(--mint); }
main[data-cc="b"] .cc-b { display: flex; align-items: flex-end; }
.cc-bg { position: absolute; inset: 0; } .cc-bg video { width: 100%; height: 100%; object-fit: cover; }
.cc-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,40,19,.15) 0%, rgba(0,40,19,.55) 50%, rgba(0,40,19,.92) 100%); }
.cc-b .cc-copy { position: relative; z-index: 2; padding-bottom: clamp(50px, 7vw, 100px); padding-top: 120px; }
.cc-b .display, .cc-b .eyebrow { color: var(--mint) !important; } .cc-b .display em { color: var(--lime); }
.cc-b .lede { color: rgba(229,237,182,.9); } .cc-b .lede b { color: var(--lime); }
.cc-b .btn.ghost { color: var(--mint); border-color: var(--mint); }
.cc-b .cc-sticker { position: absolute; right: 4%; top: 8%; z-index: 3; }
.cc-b .cc-sticker text { fill: var(--mint); }
/* C: wedding-night feed */
.cc-feed { position: relative; height: clamp(480px, 48vw, 640px); }
.cc-fphone { position: absolute; width: clamp(200px, 18vw, 260px); right: 6%; top: 0; transform: rotate(4deg) !important; }
.cc-notes { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; top: 8%; width: min(330px, 80%); z-index: 3; display: grid; gap: 10px; }
.cc-notes li { background: rgba(252,251,248,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; font-size: .9rem; color: var(--forest); box-shadow: 0 18px 30px -22px rgba(0,40,19,.7); opacity: 0; transform: translateY(14px) scale(.97); animation: cc-in .6s var(--ease) forwards; }
.cc-notes li b { display: block; font-size: .68rem; letter-spacing: .14em; color: var(--green); }
.cc-notes li i { display: block; font-style: normal; color: var(--ink-soft); font-size: .8rem; }
.cc-notes li:nth-child(1) { animation-delay: .4s; } .cc-notes li:nth-child(2) { animation-delay: 1.1s; margin-left: 24px; } .cc-notes li:nth-child(3) { animation-delay: 1.8s; } .cc-notes li:nth-child(4) { animation-delay: 2.5s; margin-left: 30px; background: var(--lime); } .cc-notes li:nth-child(5) { animation-delay: 3.2s; background: var(--forest); color: var(--mint); } .cc-notes li:nth-child(5) b, .cc-notes li:nth-child(5) i { color: var(--lime); }
@keyframes cc-in { to { opacity: 1; transform: none; } }
/* D: reel ribbon */
.cc-d { padding: clamp(50px, 7vw, 100px) 0 clamp(40px, 5vw, 70px); }
.cc-center { text-align: center; } .cc-center .lede { margin-left: auto; margin-right: auto; } .cc-center .cc-btns { justify-content: center; }
.cc-ribbon { margin-top: 50px; transform: rotate(-3deg); background: var(--forest); padding: 22px 0; -webkit-mask: var(--torn) top / 100% 18px no-repeat, linear-gradient(#000, #000) 0 17px / 100% calc(100% - 34px) no-repeat, var(--torn) bottom / 100% 18px no-repeat; }
.cc-track { display: flex; gap: 18px; width: max-content; animation: cc-roll 60s linear infinite; }
.cc-track .phone { width: 170px; flex: none; transform: none !important; }
.cc-track .phone:nth-child(odd) { transform: rotate(-2deg) !important; } .cc-track .phone:nth-child(even) { transform: rotate(2deg) translateY(10px) !important; }
@keyframes cc-roll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cc-track { animation: none; } .cc-notes li { animation: none; opacity: 1; transform: none; } }
@media (max-width: 900px) { .cc-grid { grid-template-columns: 1fr; } .cc-stack, .cc-feed { height: 480px; max-width: 460px; margin: 0 auto; width: 100%; } }
/* ---------- REVIEW STRIPS (post cards, scroll-fed) ---------- */
.rv-strip { padding: clamp(50px, 7vw, 90px) 0; background: var(--cream); position: relative; overflow: hidden; }
.rv-head { text-align: center; margin-bottom: 28px; }
.rv-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 0 8px; }
.rv-h { font-family: var(--heavy); font-weight: 800; font-variation-settings: "wdth" 106; text-transform: uppercase; font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: .95; color: var(--forest); margin: 0; }
.rv-h em { font-family: var(--display); font-weight: 400; font-style: italic; }
.rv-card { margin: 0; }
.rv-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lime); color: var(--forest); font-weight: 800; flex: none; }
.rv-stars { color: #e3a33b; letter-spacing: .12em; font-size: .82rem; }
.rv-card blockquote { margin: 6px 0 10px; color: var(--forest); }
.rv-card figcaption { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.rv-more { text-align: center; margin: 30px 0 0; } .rv-more a { font-weight: 700; color: var(--forest); border-bottom: 2px solid var(--lime); }
.rv-track { scrollbar-width: none; } .rv-track::-webkit-scrollbar { display: none; }

/* POST: Instagram-style cards in a swipeable row that glides as you scroll */
.rv-track { display: flex; gap: 20px; overflow-x: auto; padding: 10px max(var(--gutter), calc((100vw - 1200px) / 2)) 24px; scroll-snap-type: x proximity; }
.rv-card { flex: none; width: clamp(270px, 26vw, 340px); background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 18px; display: flex; gap: 12px; scroll-snap-align: center; box-shadow: 0 24px 40px -32px rgba(0,40,19,.6); }
.rv-card:nth-child(even) { background: var(--mint); transform: translateY(18px); }
.rv-card blockquote { font-family: var(--display); font-size: 1.3rem; line-height: 1.22; }


/* ---------- HOMEPAGE SUNSET TEASER ---------- */
.sun-teaser { background: var(--forest); color: var(--mint); padding: clamp(70px, 9vw, 130px) 0; }
.st-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.sun-teaser .kicker { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--lime); margin: 0 0 14px; }
.sun-teaser .r-h2 span, .sun-teaser .r-h2 { color: var(--mint); } .sun-teaser .r-h2 em { color: var(--lime); display: block; }
.sun-teaser .lede { color: rgba(229,237,182,.85); max-width: 32em; }
.st-date { display: block; margin: 26px 0 22px; max-width: 320px; }
.st-date span { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); margin-bottom: 8px; }
.st-date input { width: 100%; border: 0; border-radius: 999px; padding: 14px 20px; font: inherit; font-size: 1.05rem; background: var(--paper); color: var(--forest); }
.st-guide { color: var(--mint); margin-left: 14px; }
.st-card { background: var(--paper); color: var(--ink); border-radius: 26px; padding: 26px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); transform: rotate(2deg); }
.st-sky { position: relative; height: 150px; border-radius: 180px 180px 14px 14px; background: linear-gradient(180deg, #ffd88a 0%, #f6a96b 45%, #e57c7c 75%, #6d5a8f 100%); overflow: hidden; }
.st-sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: #2f5d7c; opacity: .9; }
.st-sun { --t: .5; position: absolute; width: 48px; height: 48px; border-radius: 50%; background: #fff3c2; box-shadow: 0 0 40px 14px rgba(255,236,170,.85); left: calc(8% + var(--t) * 80% - 24px); bottom: calc(14px + (1 - var(--t)) * 60px); transition: left .7s var(--ease), bottom .7s var(--ease); }
.st-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 10px; }
.st-card dt { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.st-card dd { margin: 4px 0 0; font-family: var(--heavy); font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--forest); }
.st-tip { margin: 6px 0 0; font-size: .92rem; color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: 12px; }
.st-tip b { color: var(--green); }
@media (max-width: 900px) { .st-grid { grid-template-columns: 1fr; } .st-card { transform: none; } }
@media (max-width: 480px) { .st-card dl { grid-template-columns: 1fr 1fr; } }

/* ---------- REVIEWS PAGE (/reviews) ---------- */
.lv-hero { padding: clamp(40px, 6vw, 90px) 0; }
.lv-hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.lv-hero .kicker { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 0 14px; }
.lv-hero .r-h1 span { display: block; } .lv-hero .r-h1 em { font-family: var(--display); font-weight: 400; font-style: italic; text-transform: none; }
.lv-phone { background: #0d0f0e; border-radius: 42px; padding: 18px 16px 22px; box-shadow: 0 50px 80px -40px rgba(0,40,19,.8); transform: rotate(3deg); max-width: 360px; justify-self: center; width: 100%; }
.lv-phone-top { text-align: center; color: #9aa; font-size: .72rem; margin: 4px 0 12px; }
.lv-thread { display: flex; flex-direction: column; gap: 6px; height: 470px; overflow: hidden; justify-content: flex-end; }
.lv-thread .b { margin: 0; align-self: flex-start; background: #262829; color: #f2f2f2; padding: 9px 14px; border-radius: 18px; font-size: .95rem; max-width: 85%; opacity: 0; transform: translateY(10px); animation: lv-in .4s var(--ease) forwards; }
.lv-thread .b.me { align-self: flex-end; background: var(--lime); color: var(--forest); font-weight: 700; }
.lv-thread .b.emo { background: none; font-size: 2.6rem; padding: 0 6px; }
.lv-thread .b:nth-child(1) { animation-delay: .3s } .lv-thread .b:nth-child(2) { animation-delay: .7s } .lv-thread .b:nth-child(3) { animation-delay: 1.1s } .lv-thread .b:nth-child(4) { animation-delay: 1.5s } .lv-thread .b:nth-child(5) { animation-delay: 2s } .lv-thread .b:nth-child(6) { animation-delay: 2.6s } .lv-thread .b:nth-child(7) { animation-delay: 3.1s } .lv-thread .b:nth-child(8) { animation-delay: 3.6s } .lv-thread .b:nth-child(9) { animation-delay: 4s } .lv-thread .b:nth-child(10) { animation-delay: 4.6s } .lv-thread .b:nth-child(11) { animation-delay: 5.1s }
@keyframes lv-in { to { opacity: 1; transform: none; } }
.lv-dms { padding: clamp(60px, 8vw, 110px) 0; background: var(--forest); }
.lv-dms .r-h3 { color: var(--mint); } .lv-dms .r-h3 em { color: var(--lime); }
.lv-wall { columns: 3 260px; column-gap: 18px; margin-top: 36px; }
.lv-dm { break-inside: avoid; margin: 0 0 18px; background: #262829; color: #f2f2f2; border-radius: 26px 26px 26px 8px; padding: 16px 20px; }
.lv-dm blockquote { margin: 0 0 8px; font-size: 1.05rem; line-height: 1.4; }
.lv-dm.big blockquote { font-family: var(--display); font-size: 1.6rem; line-height: 1.18; }
.lv-dm.lime { background: var(--lime); color: var(--forest); border-radius: 26px 26px 8px 26px; } .lv-dm.mint { background: var(--mint); color: var(--forest); }
.lv-dm figcaption { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; opacity: .65; }
.lv-dm:nth-child(4n+2) { transform: rotate(-1deg); } .lv-dm:nth-child(4n) { transform: rotate(1deg); }
.lv-google { padding: clamp(60px, 8vw, 110px) 0; }
.lv-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; align-items: start; }
.lv-rev { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: 0 24px 40px -32px rgba(0,40,19,.6); }
.lv-rev p { margin: 0 0 12px; color: var(--ink-soft); font-size: .95rem; line-height: 1.6; } .lv-rev .rv-stars { margin: 0 0 6px; }
.lv-rev h3 { margin: 0; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
@media (max-width: 900px) { .lv-hero-grid, .lv-reviews { grid-template-columns: 1fr; } .lv-phone { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lv-thread .b { animation: none; opacity: 1; transform: none; } }
.lv-weekend { padding: clamp(60px, 8vw, 110px) 0; background: var(--cream); }
.lv-wk-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.lv-wk-copy { position: sticky; top: 130px; }
.lv-wk-copy .kicker { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 0 12px; }
.lv-wk { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.lv-day { align-self: center; margin: 18px 0 4px; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px; }
.lv-b { margin: 0; align-self: flex-start; max-width: 88%; background: #262829; color: #f2f2f2; padding: 12px 16px; border-radius: 22px 22px 22px 6px; font-size: 1rem; line-height: 1.4; }
.lv-b.big { font-family: var(--display); font-size: 1.45rem; line-height: 1.2; }
.lv-b.lime { background: var(--lime); color: var(--forest); font-weight: 700; }
@media (max-width: 900px) { .lv-wk-grid { grid-template-columns: 1fr; } .lv-wk-copy { position: static; } }

.proof { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .9rem; font-weight: 600; color: var(--forest); background: var(--mint); padding: 8px 14px; border-radius: 999px; }
.proof u { text-decoration-color: var(--green); text-underline-offset: 3px; }
a.sticky-note { display: block; color: inherit; text-decoration: none; }
.lv-dm[hidden] { display: none; }
.lv-pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 30px; flex-wrap: wrap; }
.lv-pager[hidden] { display: none; }
.lv-pager button { min-width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(229,237,182,.4); background: transparent; color: var(--mint); font: inherit; font-weight: 700; cursor: pointer; }
.lv-pager button.on { background: var(--lime); color: var(--forest); border-color: var(--lime); }
.lv-pager button:disabled { opacity: .3; cursor: default; }
.lv-pager span { color: rgba(229,237,182,.7); font-size: .8rem; margin-left: 10px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- LOVE NOTES BAND (teaser -> /reviews) ---------- */
.ln-band { background: var(--forest); padding: clamp(50px, 7vw, 90px) 0; overflow: hidden; }
.ln-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; color: inherit; text-decoration: none; }
.ln-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--lime); margin: 0 0 12px; }
.ln-h { font-family: var(--heavy); font-weight: 800; font-variation-settings: "wdth" 106; text-transform: uppercase; font-size: clamp(2rem, 4vw, 3.4rem); line-height: .95; color: var(--mint); margin: 0 0 26px; }
.ln-h em { font-family: var(--display); font-weight: 400; font-style: italic; color: var(--lime); }
.ln-bubbles { display: flex; flex-direction: column; gap: 12px; }
.ln-b { margin: 0; max-width: 88%; background: #262829; color: #f2f2f2; padding: 13px 18px; border-radius: 24px 24px 24px 6px; font-size: 1.02rem; line-height: 1.4; box-shadow: 0 20px 34px -22px rgba(0,0,0,.8); transition: transform .5s var(--ease); }
.ln-b0 { transform: rotate(-2deg); } .ln-b1 { align-self: flex-end; background: var(--lime); color: var(--forest); border-radius: 24px 24px 6px 24px; transform: rotate(1.5deg); font-family: var(--display); font-size: 1.35rem; line-height: 1.2; } .ln-b2 { transform: rotate(-.5deg) translateX(18px); }
.ln-grid:hover .ln-b0 { transform: rotate(-3deg) translateY(-4px); } .ln-grid:hover .ln-b1 { transform: rotate(2.5deg) translateY(-6px); } .ln-grid:hover .ln-b2 { transform: rotate(-1deg) translate(24px, -3px); }
@media (max-width: 860px) { .ln-grid { grid-template-columns: 1fr; } .ln-b2 { transform: none; } }

.cc-team { display: flex; gap: 10px; align-items: flex-start; max-width: 34em; margin: 16px 0 0; font-size: .92rem; font-weight: 600; color: var(--forest); background: var(--mint); padding: 10px 16px; border-radius: 14px; }
.cc-team span { color: var(--green); }

/* ---------- BRIDE CONTENT KIT (sales page + hidden download page) ---------- */
.kit-hero, .kit-dl { padding: clamp(50px, 7vw, 100px) 0; }
.kit-dl-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.kit-hero .kicker, .kit-dl .kicker { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin: 0 0 14px; }
.kit-hero .r-h1 span, .kit-dl .r-h1 span { display: block; } .kit-hero .r-h1 em, .kit-dl .r-h1 em { font-family: var(--display); font-weight: 400; font-style: italic; text-transform: none; }
.kit-btns { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.kit-small { font-size: .84rem; color: var(--ink-soft); margin-top: 14px; }
.kit-cover img { display: block; width: min(100%, 420px); height: auto; margin: 0 auto; border-radius: 14px; transform: rotate(3deg); box-shadow: 0 50px 80px -40px rgba(0,40,19,.75); }
.kit-next { margin-top: 30px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; }
.kit-next p { margin: 0 0 6px; color: var(--forest); } .kit-next ol { margin: 0; padding-left: 20px; } .kit-next a { color: var(--green); font-weight: 700; }
@media (max-width: 900px) { .kit-dl-grid { grid-template-columns: 1fr; } }

/* homepage uses the content-creation phone-stack hero */
.home-hero .display.xl { font-size: clamp(2.8rem, 6.2vw, 6.4rem); }
.home-hero .r-date { margin-top: 30px; }
.home-hero .fine { font-size: .84rem; color: var(--ink-soft); margin-top: 12px; }
.home-hero .fine a { color: var(--green); font-weight: 700; }

/* never let a decorative element widen the page on phones */
main { overflow-x: clip; }
.cc-hero { overflow: hidden; }