/* ==========================================================
   Remarkable Gatherings — site styles
   Palette from the Project Launch Plan & logo
   ========================================================== */
:root{
  --navy:#1F3A4D;        /* Midnight Navy  */
  --navy-deep:#132634;   /* Navy Shadow    */
  --evergreen:#0A2727;   /* Evergreen Night (cover) */
  --aqua:#1F8A99;        /* Remarkable Aqua */
  --aqua-bright:#15A8AF; /* Logo Aqua      */
  --gold:#B8963E;        /* Champagne Gold */
  --gold-light:#D1A365;  /* Laurel Gold    */
  --champagne:#E9D6A8;   /* Bubbles        */
  --ivory:#F6EFDF;       /* Ivory Linen    */
  --mist:#E6F3F5;        /* Aqua Mist      */
  --silver:#C9D9DD;      /* Silver Mist    */
  --ink:#1F3A4D;
  --muted:#5B7080;
  --white:#FFFFFF;
  --gold-ink:#86671E;    /* Antique Gold: small gold text on light */
  --aqua-ink:#176C78;    /* Deep Aqua: small aqua text on light */

  --serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --script:"Pinyon Script","Great Vibes",cursive;

  --radius:18px;
  --shadow:0 24px 60px -24px rgba(19,38,52,.45);
  --ease:cubic-bezier(.2,.7,.2,1);
  --max:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-weight:400;color:var(--ink);background:var(--ivory);line-height:1.65;font-size:17px;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0 0 .4em;letter-spacing:.005em}
h2{font-size:clamp(2.2rem,4.6vw,3.6rem)}
h3{font-size:clamp(1.45rem,2.2vw,1.9rem)}
p{margin:0 0 1em}
.wrap{width:min(var(--max),100% - 32px);margin-inline:auto}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.32em;font-size:.74rem;font-weight:500;color:var(--gold-ink);display:inline-flex;align-items:center;gap:.8em}
.eyebrow::before,.eyebrow.both::after{content:"";width:34px;height:1px;background:currentColor;opacity:.7}
.script{font-family:var(--script);font-weight:400;color:var(--gold-light);font-size:1.35em;letter-spacing:0;line-height:.8}
.center{text-align:center}
.lead{font-size:1.15rem;color:var(--muted);max-width:62ch}
.center .lead{margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hidden{display:none}

/* ---------- Buttons ---------- */
.btn{--bg:var(--gold);--fg:var(--navy-deep);position:relative;display:inline-flex;align-items:center;gap:.6em;padding:1em 1.8em;border-radius:999px;background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;text-decoration:none;border:1px solid transparent;cursor:pointer;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(184,150,62,.75)}
.btn:hover::after{transform:translateX(120%)}
.btn-gold{background:linear-gradient(135deg,#D9B66A,#B8963E 55%,#9C7A2C)}
.btn-ghost{--bg:transparent;--fg:var(--white);border-color:rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.1);box-shadow:none}
.btn-navy{--bg:var(--navy);--fg:var(--white)}
.btn-navy:hover{box-shadow:0 14px 30px -12px rgba(31,58,77,.7)}
.btn-aqua{--bg:var(--aqua);--fg:var(--white)}
.btn svg{width:16px;height:16px}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .5s,box-shadow .5s,padding .5s;padding:18px 0}
.nav.scrolled{background:rgba(19,38,52,.92);backdrop-filter:blur(14px);box-shadow:0 10px 30px -20px rgba(0,0,0,.6);padding:10px 0}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--white)}
.brand img{width:var(--logo,50px);height:var(--logo,50px);flex:none;transition:width .5s,height .5s,transform 1s var(--ease)}
.nav.scrolled .brand img{width:var(--logo,50px);height:var(--logo,50px)}
.brand:hover img{transform:rotate(-12deg)}
.brand span{font-family:var(--serif);font-size:1.45rem;letter-spacing:.04em;line-height:1.02}
.brand small{display:block;font-family:var(--serif);font-size:1em;letter-spacing:.04em;text-transform:none;color:var(--gold-light);margin-top:2px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{color:rgba(255,255,255,.86);text-decoration:none;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;position:relative;padding:6px 0}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold-light);transition:right .4s var(--ease)}
.nav-links a:not(.btn):hover::after{right:0}
.nav-links .btn{padding:.8em 1.4em;color:var(--navy-deep)}
.menu-btn{display:none;background:none;border:0;color:#fff;width:44px;height:44px;cursor:pointer}
.menu-btn span{display:block;width:24px;height:1.5px;background:currentColor;margin:6px auto;transition:transform .4s,opacity .4s}
@media (max-width:980px){
  .menu-btn{display:block}
  .nav-links{position:fixed;inset:0;background:rgba(10,39,39,.97);flex-direction:column;justify-content:center;gap:28px;opacity:0;pointer-events:none;transition:opacity .45s}
  .nav-links a{font-size:1rem}
  body.menu-open .nav-links{opacity:1;pointer-events:auto}
  body.menu-open .menu-btn span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  body.menu-open .menu-btn span:nth-child(2){opacity:0}
  body.menu-open .menu-btn span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .menu-btn{position:relative;z-index:2}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--evergreen);color:var(--white);isolation:isolate}
.hero-media{position:absolute;inset:-4%;z-index:-3;background:url("assets/hero.jpg?v=10") 62% 22%/cover no-repeat;animation:kenburns 32s ease-in-out infinite alternate;will-change:transform}
@media (min-width:701px){.hero-media{inset:-4% -4% -4% 30%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%);mask-image:linear-gradient(90deg,transparent 0%,#000 28%)}}
@keyframes kenburns{
  0%{transform:scale(1.04) translate3d(0,0,0)}
  50%{transform:scale(1.12) translate3d(-1.6%,-1%,0)}
  100%{transform:scale(1.18) translate3d(1.2%,-2%,0)}
}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  linear-gradient(90deg,rgba(10,26,32,.92) 0%,rgba(10,26,32,.72) 34%,rgba(10,26,32,.18) 62%,rgba(10,26,32,.25) 100%),
  linear-gradient(0deg,rgba(10,39,39,.95) 0%,rgba(10,39,39,0) 38%),
  radial-gradient(ellipse at 70% 30%,rgba(233,214,168,.18),transparent 55%)}
#fx{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero-inner{padding:150px 0 140px;max-width:720px}
.hero h1{font-size:clamp(2.9rem,7.4vw,6rem);font-weight:400;margin:.35em 0 .35em;line-height:1}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line>span{display:inline-block;transform:translateY(105%);animation:rise 1.2s var(--ease) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.15s}
.hero h1 .line:nth-child(3)>span{animation-delay:.3s}
@keyframes rise{to{transform:none}}
.shimmer{background:linear-gradient(100deg,#B8963E 0%,#F3DFA6 22%,#D1A365 40%,#FFF4D6 50%,#C9A050 62%,#B8963E 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite;font-style:italic}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-150% 0}}
.hero p.sub{font-size:clamp(1.05rem,1.6vw,1.25rem);color:rgba(255,255,255,.86);max-width:54ch;opacity:0;animation:fadeup 1s .6s var(--ease) forwards}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;opacity:0;animation:fadeup 1s .8s var(--ease) forwards}
.hero .eyebrow{opacity:0;animation:fadeup 1s .1s var(--ease) forwards;color:var(--champagne);font-size:clamp(1.1rem,1.9vw,1.48rem);letter-spacing:.22em;line-height:1.4;align-items:flex-start}
.hero .eyebrow::before{width:48px;flex:none;margin-top:.7em}
.hero-hint{margin-top:26px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);opacity:0;animation:fadeup 1s 1.4s var(--ease) forwards;display:flex;align-items:center;gap:10px}
.hero-hint i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold-light);box-shadow:0 0 0 0 rgba(209,163,101,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(209,163,101,0)}100%{box-shadow:0 0 0 0 rgba(209,163,101,0)}}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.scroll-cue{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);width:26px;height:42px;border:1.5px solid rgba(255,255,255,.5);border-radius:14px}
.scroll-cue::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--gold-light);animation:scrolly 2s infinite}
@keyframes scrolly{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
.ribbon{position:absolute;bottom:0;left:0;right:0;border-top:1px solid rgba(209,163,101,.35);background:rgba(10,39,39,.55);backdrop-filter:blur(6px);overflow:hidden;white-space:nowrap;padding:14px 0}
.ribbon-track{display:inline-flex;gap:46px;animation:marquee 38s linear infinite;font-family:var(--serif);font-size:1.25rem;font-style:italic;color:var(--champagne)}
.ribbon-track span{display:inline-flex;align-items:center;gap:46px}
.ribbon-track span::after{content:"✦";font-style:normal;font-size:.7rem;color:var(--gold)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (max-width:700px){
  .hero-media{background-position:46% 18%}
  .hero::before{background:linear-gradient(0deg,rgba(10,26,32,.96) 0%,rgba(10,26,32,.7) 50%,rgba(10,26,32,.35) 100%)}
  .hero-inner{padding:130px 0 150px}
  .scroll-cue{display:none}
}

/* ---------- Sections ---------- */
section{position:relative}
.section{padding:clamp(36px,4.5vw,56px) 0}
.section-head{margin-bottom:34px}
.section-head h2 em{font-style:italic;color:var(--aqua)}
.dark{background:var(--navy);color:var(--white)}
.dark .lead{color:rgba(255,255,255,.72)}
.dark .eyebrow,.evergreen .eyebrow,.finale .eyebrow,.reg-side .eyebrow{color:var(--gold-light)}
.dark .section-head h2 em{color:var(--gold-light)}
.evergreen{background:radial-gradient(ellipse at top,#123a3a 0%,var(--evergreen) 60%);color:var(--white)}
.evergreen .lead{color:rgba(255,255,255,.72)}
.mist{background:var(--mist)}
.divider{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold);margin:18px 0}
.divider::before,.divider::after{content:"";height:1px;width:70px;background:linear-gradient(90deg,transparent,currentColor)}
.divider::after{transform:scaleX(-1)}

/* Reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.12s}.reveal[data-delay="2"]{transition-delay:.24s}.reveal[data-delay="3"]{transition-delay:.36s}.reveal[data-delay="4"]{transition-delay:.48s}.reveal[data-delay="5"]{transition-delay:.6s}

/* ---------- Featured book ---------- */
.feature{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(40px,7vw,100px);align-items:center}
.book-stage{perspective:1600px;display:flex;justify-content:center;position:relative}
.book-stage::before{content:"";position:absolute;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(21,168,175,.22),rgba(184,150,62,.12) 45%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);filter:blur(10px);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.08)}}
.book{position:relative;width:min(380px,78vw);aspect-ratio:8.25/11;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(4deg);transition:transform .8s var(--ease);animation:floaty 7s ease-in-out infinite}
@keyframes floaty{50%{translate:0 -12px}}
.book .front{position:absolute;inset:0;background:url("assets/cover-wedding.jpg?v=10") center/cover;border-radius:2px 6px 6px 2px;box-shadow:inset 4px 0 10px rgba(255,255,255,.18),inset -2px 0 4px rgba(0,0,0,.25);transform:translateZ(16px)}
.book .front::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,rgba(255,255,255,.0) 40%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 60%);background-size:300% 100%;background-position:var(--glare,100%) 0;mix-blend-mode:screen;transition:background-position .3s}
.book .spine{position:absolute;top:0;bottom:0;left:0;width:32px;background:linear-gradient(90deg,#0b2424,#164040 50%,#0b2424);transform:rotateY(-90deg) translateZ(16px);transform-origin:left}
.book .pages{position:absolute;top:6px;bottom:6px;right:0;width:30px;background:repeating-linear-gradient(90deg,#fdfaf2 0 1px,#e9e2cf 1px 2px);transform:rotateY(90deg) translateZ(calc(100% - 14px));transform-origin:right;}
.book .back{position:absolute;inset:0;background:#0b2424;transform:translateZ(-16px);box-shadow:30px 40px 60px -20px rgba(0,0,0,.55);border-radius:2px 6px 6px 2px}
.badge-new{position:absolute;top:-14px;left:2%;z-index:3;width:104px;height:104px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#F3DFA6,#B8963E 60%,#8E6E22);color:var(--navy-deep);display:grid;place-items:center;text-align:center;font-family:var(--serif);font-size:.95rem;line-height:1.05;font-weight:600;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);animation:spinslow 18s linear infinite}
.badge-new span{animation:spinslow 18s linear infinite reverse;display:block}
.badge-new small{display:block;font-family:var(--sans);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;margin-top:4px}
@keyframes spinslow{to{rotate:360deg}}
.feature h2{font-size:clamp(2.2rem,4.4vw,3.5rem)}
.feature h2 .sub{display:block;font-size:.55em;font-style:italic;color:var(--aqua);margin-top:.3em}
.promise{font-family:var(--serif);font-size:1.45rem;font-style:italic;color:var(--navy);border-left:2px solid var(--gold);padding-left:18px;margin:22px 0}
.checks{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;background:var(--aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat}
.formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 24px}
.format{border:1px solid var(--silver);background:#fff;border-radius:14px;padding:12px 14px;min-width:0}
.format b{display:block;font-family:var(--serif);font-size:1.6rem;font-weight:600;color:var(--navy)}
.format span{display:block;font-size:.64rem;letter-spacing:.08em;line-height:1.35;text-transform:uppercase;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;border-top:1px solid var(--silver);padding-top:26px}
.stat b{display:block;font-family:var(--serif);font-size:clamp(2.6rem,5vw,4rem);font-weight:500;color:var(--aqua);line-height:1}
.stat span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.feature{grid-template-columns:1fr}.book{transform:rotateY(-16deg)}}
@media (max-width:560px){.stats{grid-template-columns:1fr;text-align:center}}

/* ---------- Method ---------- */
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tier{position:relative;padding:44px 34px 38px;border-radius:var(--radius);background:rgba(255,255,255,.04);border:1px solid rgba(209,163,101,.28);overflow:hidden;transition:transform .5s var(--ease),border-color .5s,background .5s}
.tier::before{content:"";position:absolute;inset:-1px;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(209,163,101,.22),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.tier:hover{transform:translateY(-8px);border-color:rgba(209,163,101,.7);background:rgba(255,255,255,.07)}
.tier:hover::before{opacity:1}
.tier .gems{display:flex;gap:6px;margin-bottom:22px;color:var(--gold-light)}
.tier .gems svg{width:18px;height:18px}
.tier h3{font-size:2.2rem;color:var(--white);letter-spacing:.02em}
.tier .tag{font-family:var(--serif);font-style:italic;color:var(--champagne);font-size:1.2rem;margin-bottom:14px}
.tier p{color:rgba(255,255,255,.72);font-size:.98rem}
.tier .num{position:absolute;right:22px;top:12px;font-family:var(--serif);font-size:6rem;line-height:1;color:rgba(209,163,101,.12);font-weight:600}
.tier.featured{background:linear-gradient(160deg,rgba(31,138,153,.35),rgba(255,255,255,.03));border-color:rgba(21,168,175,.6)}
.quote{max-width:860px;margin:70px auto 0;text-align:center;font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2rem);font-style:italic;line-height:1.35;color:var(--white)}
.quote cite{display:block;margin-top:18px;font-family:var(--sans);font-style:normal;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light)}
@media (max-width:900px){.method-grid{grid-template-columns:1fr}}

/* ---------- Journey / chapters ---------- */
.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.phase{background:#fff;border-radius:var(--radius);padding:30px 26px;border:1px solid var(--silver);position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s}
.phase:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.phase::after{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,var(--aqua),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.phase.in::after{transform:scaleX(1)}
.phase .ph{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);font-weight:500}
.phase h3{margin:.4em 0 .7em;font-size:1.7rem}
.phase ol{margin:0;padding:0;list-style:none;counter-reset:none}
.phase li{display:flex;gap:10px;padding:7px 0;border-top:1px dashed var(--silver);font-size:.93rem;line-height:1.35}
.phase li b{font-family:var(--serif);color:var(--aqua);font-size:1.05rem;min-width:22px}
@media (max-width:1000px){.journey{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.journey{grid-template-columns:1fr}}

/* ---------- Della's Takes ---------- */
.takes{position:relative;max-width:900px;margin:0 auto;text-align:center;min-height:260px}
.takes .qmark{font-family:var(--serif);font-size:9rem;line-height:.6;color:var(--gold);opacity:.6;height:60px}
.take{position:absolute;inset:70px 0 auto 0;opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease);pointer-events:none}
.take.on{opacity:1;transform:none;position:relative;inset:auto;pointer-events:auto}
.take p{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.3;font-style:italic;margin:0 0 18px}
.take span{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light)}
.dots{display:flex;justify-content:center;gap:10px;margin-top:34px}
.dots button{width:9px;height:9px;border-radius:50%;border:1px solid var(--gold-light);background:transparent;padding:0;cursor:pointer;transition:background .3s,transform .3s}
.dots button.on{background:var(--gold-light);transform:scale(1.25)}
.takes-wrap{display:grid;grid-template-columns:300px 1fr;gap:60px;align-items:center}
.della-arch{position:relative;border-radius:200px 200px 18px 18px;overflow:hidden;aspect-ratio:5/7;box-shadow:var(--shadow);outline:1px solid rgba(209,163,101,.6);outline-offset:10px}
.della-arch img{width:100%;height:100%;object-fit:cover;transition:transform 6s var(--ease)}
.della-arch:hover img{transform:scale(1.06)}
@media (max-width:860px){.takes-wrap{grid-template-columns:1fr}.della-arch{max-width:260px;margin:0 auto}}

/* ---------- Collection ---------- */
.shelf{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;align-items:end}
.vol{perspective:1000px;text-align:center;cursor:pointer;background:none;border:0;padding:0;font:inherit;color:inherit}
.vol .cover{position:relative;aspect-ratio:3/4.1;border-radius:3px 10px 10px 3px;overflow:hidden;box-shadow:0 20px 40px -18px rgba(19,38,52,.6), inset 6px 0 0 rgba(0,0,0,.18);transition:transform .7s var(--ease),box-shadow .7s;transform:rotateY(-12deg);transform-origin:left;display:flex;flex-direction:column;justify-content:space-between;padding:20px 14px 18px;color:#fff}
.vol:hover .cover,.vol:focus-visible .cover{transform:rotateY(0) translateY(-10px);box-shadow:0 34px 50px -20px rgba(19,38,52,.65)}
.vol .cover::before{content:"";position:absolute;inset:8px;border:1px solid rgba(233,214,168,.55);border-radius:2px 6px 6px 2px;pointer-events:none}
.vol .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);transform:translateX(-100%);transition:transform 1.1s var(--ease)}
.vol:hover .cover::after{transform:translateX(100%)}
.vol .series{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--champagne);position:relative;z-index:1}
.vol .icon{width:48%;margin:0 auto;color:var(--gold-light);position:relative;z-index:1}
.vol .ttl{font-family:var(--serif);font-size:1.15rem;line-height:1.1;position:relative;z-index:1}
.vol .ttl em{display:block;font-size:.7em;color:var(--champagne);margin-top:4px}
.vol .status{display:inline-block;margin-top:16px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--mist);color:var(--aqua-ink);font-weight:500}
.vol .status.live{background:var(--gold);color:var(--navy-deep)}
.vol.book1 .cover{background:url("assets/cover-wedding.jpg?v=10") center/cover;padding:0}
.vol.book1 .cover::before{display:none}
.c-bach{background:linear-gradient(160deg,#1F8A99,#0E4F5C 70%)}
.c-anniv{background:linear-gradient(160deg,#1F3A4D,#0F2230 70%)}
.c-office{background:linear-gradient(160deg,#2A5262,#132634 70%)}
.c-bday{background:linear-gradient(160deg,#0E5B5E,#0A2727 70%)}
.c-baby{background:linear-gradient(160deg,#1F8A99,#176C78 45%,#1F3A4D 85%)}
.vote{margin-top:36px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;background:#fff;border:1px solid var(--silver);border-radius:24px;padding:38px 40px}
.vote h3{font-size:2rem;margin-bottom:.3em}
@media (max-width:1000px){.shelf{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.shelf{grid-template-columns:repeat(2,1fr)}.vote{grid-template-columns:1fr;padding:28px 22px}}

/* ---------- Forms ---------- */
.inline-form{display:flex;flex-wrap:wrap;gap:10px}
.inline-form input,.inline-form select{flex:1 1 200px}
input,select,textarea{font:inherit;font-size:.98rem;color:var(--ink);background:#fff;border:1px solid var(--silver);border-radius:12px;padding:.85em 1em;width:100%;transition:border-color .3s,box-shadow .3s;appearance:none;-webkit-appearance:none}
select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3A4D' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat;padding-right:40px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--aqua);box-shadow:0 0 0 4px rgba(31,138,153,.16)}
.dark input,.dark select,.evergreen input,.evergreen select{background-color:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}
.dark input::placeholder,.evergreen input::placeholder{color:rgba(255,255,255,.55)}
.dark select option,.evergreen select option{color:var(--ink)}
.form-note{font-size:.8rem;color:var(--muted);margin-top:10px}
.dark .form-note,.evergreen .form-note{color:rgba(255,255,255,.55)}
.ok-msg{display:none;font-family:var(--serif);font-size:1.3rem;font-style:italic;color:var(--aqua)}
.dark .ok-msg,.evergreen .ok-msg{color:var(--gold-light)}
form.sent .ok-msg{display:block}
form.sent .inline-form{display:none}

/* ---------- Toolkit section ---------- */
.toolkit{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.steps{display:grid;gap:22px;margin:28px 0 34px}
.step{display:flex;gap:18px;align-items:flex-start}
.step b{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:1.4rem;border:1px solid var(--gold);color:var(--gold-ink)}
.step h4{font-size:1.4rem;margin:0 0 2px}
.step p{margin:0;color:var(--muted);font-size:.95rem}
.kit-stack{position:relative;height:560px}
.sheet{position:absolute;width:62%;background:#fff;border-radius:14px;padding:22px 22px 18px;box-shadow:var(--shadow);border:1px solid var(--silver);transition:transform .8s var(--ease)}
.sheet h5{font-family:var(--serif);font-size:1.25rem;margin:0 0 4px;font-weight:600;color:var(--navy)}
.sheet .k{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink)}
.sheet .row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px dashed var(--silver);font-size:.82rem}
.sheet .row i{width:14px;height:14px;border:1.5px solid var(--aqua);border-radius:4px;flex:none}
.sheet .row i.x{background:var(--aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat}
.sheet .bar{height:8px;border-radius:4px;background:var(--mist);overflow:hidden;margin-top:4px}
.sheet .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--aqua),var(--gold));width:0;transition:width 1.6s var(--ease)}
.in .sheet .bar span{width:var(--w)}
.s1{left:0;top:10px;transform:rotate(-6deg)}
.s2{left:16%;top:250px;transform:rotate(3deg);z-index:2}
.s3{right:0;top:40px;transform:rotate(7deg);z-index:1}
.kit-stack:hover .s1{transform:rotate(-10deg) translate(-20px,-10px)}
.kit-stack:hover .s3{transform:rotate(12deg) translate(20px,-14px)}
.qr-card{position:absolute;right:4%;bottom:0;z-index:3;background:var(--navy);color:#fff;border-radius:16px;padding:16px;text-align:center;box-shadow:var(--shadow);width:150px;animation:floaty 6s ease-in-out infinite}
.qr-card img{background:#fff;border-radius:8px;padding:8px}
.qr-card.qr-book{background:transparent;padding:0;width:190px;box-shadow:0 24px 50px -22px rgba(19,38,52,.55);border-radius:14px}
.qr-card.qr-book img{display:block;width:100%;height:auto;padding:0;border-radius:14px;background:none}
.qr-card span{display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;margin-top:8px;color:var(--champagne)}
@media (max-width:900px){.toolkit{grid-template-columns:1fr}.kit-stack{height:540px}}
@media (max-width:520px){.sheet{width:80%;padding:16px}.s2{left:8%;top:230px}.kit-stack{height:500px}.qr-card{width:120px}.qr-card.qr-book{width:140px}}

/* ---------- Planner app ---------- */
.app{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0}
.feat{padding:20px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.feat svg{width:26px;height:26px;color:var(--gold-light);margin-bottom:10px}
.feat h4{font-family:var(--sans);font-size:1rem;font-weight:500;margin:0 0 4px;letter-spacing:.02em}
.feat p{margin:0;font-size:.88rem;color:rgba(255,255,255,.66)}
.phone{width:290px;margin:0 auto;aspect-ratio:9/19;border-radius:44px;padding:12px;background:linear-gradient(145deg,#2c4a5e,#0d1c27);box-shadow:0 40px 80px -30px rgba(0,0,0,.7),inset 0 0 0 1.5px rgba(209,163,101,.45);position:relative;animation:floaty 8s ease-in-out infinite}
.screen{height:100%;border-radius:34px;background:linear-gradient(180deg,var(--ivory),#fff 60%);overflow:hidden;color:var(--ink);padding:44px 18px 18px;position:relative}
.screen::before{content:"";position:absolute;top:12px;left:50%;width:90px;height:22px;margin-left:-45px;border-radius:12px;background:#0d1c27}
.app-h{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.countdown{margin:10px 0 14px;font-family:var(--serif);font-size:1.6rem;line-height:1.1}
.countdown b{color:var(--aqua);font-size:2.2rem}
.ring{width:140px;height:140px;margin:6px auto 12px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10}
.ring .track{stroke:var(--mist)}
.ring .val{stroke:url(#rg);stroke-linecap:round;stroke-dasharray:339.3;stroke-dashoffset:339.3;transition:stroke-dashoffset 2s var(--ease)}
.in .ring .val{stroke-dashoffset:105}
.ring .lbl{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--serif);font-size:1.5rem;line-height:1}
.ring .lbl small{display:block;font-family:var(--sans);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.task{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--silver);border-radius:12px;padding:9px 11px;margin-bottom:8px;font-size:.78rem}
.task i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--aqua);flex:none}
.task.done i{background:var(--aqua)}
.task.done span{text-decoration:line-through;color:var(--muted)}
.task em{margin-left:auto;font-style:normal;font-size:.62rem;color:var(--gold-ink);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:900px){.app{grid-template-columns:1fr}.feat-grid{grid-template-columns:1fr}}

/* ---------- Final CTA ---------- */
.finale{position:relative;overflow:hidden;text-align:center;background:linear-gradient(135deg,var(--navy) 0%,var(--evergreen) 100%);color:#fff}
.finale canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.finale .script{font-size:clamp(2.2rem,4vw,3.2rem)}
.finale h2{font-size:clamp(2.6rem,6vw,5rem);font-weight:400}
.finale .inline-form{max-width:620px;margin:30px auto 0}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep);color:rgba(255,255,255,.7);padding:48px 0 28px;font-size:.92rem}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot h4{font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-light);font-weight:500;margin-bottom:16px}
.foot a{display:block;text-decoration:none;padding:4px 0;transition:color .3s}
.foot a:hover{color:#fff}
.foot .brand img{width:76px;height:76px}
.legal{margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:.78rem;color:rgba(255,255,255,.5)}
.credit{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.credit img{width:26px;height:26px}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot{grid-template-columns:1fr}}

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

/* ---------- Comparison (v6) ---------- */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);box-shadow:var(--shadow);background:#fff}
.cmp{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:.95rem}
.cmp th,.cmp td{padding:14px 12px;text-align:center;border-bottom:1px solid #E7EEF0}
.cmp thead th{background:var(--navy);color:#fff;font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;vertical-align:bottom}
.cmp thead th small{display:block;text-transform:none;letter-spacing:.02em;font-size:.78rem;opacity:.72;margin-top:4px;font-weight:300}
.cmp th[scope=row]{text-align:left;font-weight:400;color:var(--ink);position:sticky;left:0;background:#fff;z-index:1;min-width:220px}
.cmp tbody tr:nth-child(even) th[scope=row],.cmp tbody tr:nth-child(even) td{background:#F8FBFB}
.cmp .ours{background:linear-gradient(180deg,#FBF4E2,#F6EFDF)!important;border-left:2px solid var(--gold);border-right:2px solid var(--gold)}
.cmp thead .ours{background:linear-gradient(135deg,#D9B66A,#B8963E 55%,#9C7A2C)!important;color:var(--navy-deep);font-weight:600}
.cmp tbody tr:last-child .ours{border-bottom:2px solid var(--gold)}
.cmp thead .ours small{opacity:.85}
.cmp .price td,.cmp .price th[scope=row]{font-family:var(--serif);font-size:1.05rem;line-height:1.3}
.cmp td.ours,.cmp th.ours{min-width:150px}
.mk{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:.85rem;line-height:1;vertical-align:middle}
.mk.y{background:var(--aqua);color:#fff}
.mk.y::before{content:"\2713"}
.mk.p{background:conic-gradient(var(--aqua) 0 50%,#D7E6E9 50% 100%)}
.mk.n{color:#A9BAC0}
.mk.n::before{content:"\2014"}
.swipe{display:none;font-size:.8rem;color:var(--muted);text-align:right;margin:0 0 8px;letter-spacing:.06em}
.cmp-legend{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin:22px 0 0;font-size:.85rem;color:var(--muted)}
.cmp-legend span{display:inline-flex;align-items:center;gap:8px}
.cmp-legend .mk{width:20px;height:20px;font-size:.7rem}
.cmp-key{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:28px}
.cmp-key div{background:#fff;border:1px solid var(--silver);border-radius:14px;padding:14px 16px;font-size:.9rem;color:var(--muted)}
.cmp-key b{display:block;color:var(--navy);font-family:var(--serif);font-size:1.15rem;font-weight:600}
.cmp-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px}
.cmp-note{font-size:.8rem;color:var(--muted);text-align:center;max-width:70ch;margin:18px auto 0}
.page-top{padding:120px 0 48px;background:radial-gradient(ellipse at top,#123a3a,var(--evergreen) 70%);color:#fff}
.page-top h1{font-size:clamp(2.6rem,5vw,4.2rem);font-weight:400;margin:.3em 0 .2em}
.page-top .lead{color:rgba(255,255,255,.78)}
.page-top .eyebrow{color:var(--gold-light)}
.wins{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:40px}
.wins div{background:#fff;border-radius:16px;padding:20px;border-top:3px solid var(--gold);box-shadow:0 14px 30px -24px rgba(19,38,52,.6)}
.wins h3{font-size:1.35rem;margin-bottom:.3em}
.wins p{font-size:.92rem;color:var(--muted);margin:0}
@media (max-width:900px){.swipe{display:block}}
@media (max-width:640px){.cmp th[scope=row]{min-width:170px;font-size:.88rem}.cmp{min-width:720px}}
.cmp tr.grp th{background:var(--mist)!important;color:var(--aqua-ink);text-align:left;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;padding:10px 12px;position:sticky;left:0}
.mk.u{border:1.5px dashed #B7C7CC;color:#8FA3AA;font-size:.75rem}
.mk.u::before{content:"?"}

@media (max-width:520px){.formats{grid-template-columns:1fr 1fr}}

/* ---------- Early reader reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review{background:var(--white);border-radius:var(--radius);padding:30px 28px 26px;box-shadow:0 18px 40px -26px rgba(19,38,52,.35);border-top:3px solid var(--gold);display:flex;flex-direction:column}
.review-lead{grid-column:1/-1;padding:38px 44px 32px}
.review .rq{font-family:var(--serif);font-size:4.2rem;line-height:.6;height:.42em;color:var(--gold);margin-bottom:10px}
.review blockquote{margin:0;flex:1}
.review blockquote p{font-family:var(--serif);font-size:1.28rem;font-style:italic;line-height:1.45;color:var(--ink)}
.review .pull{font-size:clamp(1.55rem,2.8vw,2.15rem);line-height:1.25;color:var(--aqua-ink)}
.review .pull.short{font-size:clamp(1.7rem,3vw,2.3rem)}
.review-lead blockquote p:not(.pull){max-width:80ch;color:var(--muted)}
.review cite{display:block;margin-top:14px;font-family:var(--sans);font-style:normal;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink);font-weight:500}
.review cite span{display:block;margin-top:4px;letter-spacing:.14em;font-size:.7rem;color:var(--muted);font-weight:400}
.review details{margin-top:4px}
.review summary{cursor:pointer;list-style:none;display:inline-block;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--aqua-ink);font-weight:500;border-bottom:1px solid currentColor;padding-bottom:2px}
.review summary::-webkit-details-marker{display:none}
.review summary .less,.review details[open] summary .more{display:none}
.review details[open] summary .less{display:inline}
.review .letter{margin-top:18px;padding:22px 26px;background:var(--ivory);border-radius:12px;font-size:1rem;color:var(--ink)}
.review .letter p:last-child{margin-bottom:0}
.review .letter .sign{font-family:var(--script);font-size:1.6rem;line-height:1.2;color:var(--aqua-ink)}
@media (max-width:900px){.reviews{grid-template-columns:1fr}.review-lead{padding:30px 24px 26px}}

/* admin nav link */
.nav-links a.nav-admin{display:inline-flex;align-items:center;gap:6px;color:var(--champagne)}
.nav-admin svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}