/* Put a Bow On It — scroll-narrative landing */
:root{--bg:#fffaf7;--bg-alt:#ffeef3;--bg-deep:#5c2140;--paper:#fff;--ink:#3f2130;--ink-soft:#82606f;--accent:#e8558a;--accent-2:#cf3d72;--sage:#f0863c;--peach:#ffb392;--pink:#ffc2d4;--gold:#f5a44e;--line:rgba(63,33,48,.13);
/* gingham checks are built from two translucent stripe grids — the darker
   squares are real overlaps, so the palette stays honest at any scale */
--gg:rgba(232,85,138,.2);--gg-o:rgba(240,134,60,.16)}
.gingham{background-color:var(--paper);background-image:repeating-linear-gradient(90deg,var(--gg) 0 24px,transparent 24px 48px),repeating-linear-gradient(180deg,var(--gg) 0 24px,transparent 24px 48px)}
.gingham-soft{background-color:var(--bg);background-image:repeating-linear-gradient(90deg,rgba(232,85,138,.085) 0 32px,transparent 32px 64px),repeating-linear-gradient(180deg,rgba(232,85,138,.085) 0 32px,transparent 32px 64px)}
.ribbon-strip{height:20px;background-color:var(--accent);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 16px,transparent 16px 32px),repeating-linear-gradient(180deg,rgba(255,255,255,.3) 0 10px,transparent 10px 20px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Karla',system-ui,sans-serif;font-size:16px;line-height:1.5;overflow-x:hidden}
.serif{font-family:'Instrument Serif',serif;font-weight:400}
.script{font-family:'Caveat',cursive;font-weight:600}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
button{font-family:inherit}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:600}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.wrap-sm{max-width:760px;margin:0 auto;padding:0 40px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;padding:15px 26px;border-radius:999px;border:1.5px solid transparent;font-size:16px;font-weight:500;cursor:pointer;background:transparent;color:var(--ink);white-space:nowrap;transition:transform .15s,background .2s,border-color .2s,box-shadow .2s}
.btn>*+*{margin-left:8px}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-2);box-shadow:0 14px 30px -12px var(--accent)}
.btn-ghost{border-color:rgba(63,33,48,.25)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{background:#fff;color:var(--accent);border-color:#fff}
.btn-outline-light{border-color:rgba(255,255,255,.5);color:#fff}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:18px 40px;transition:background .3s,box-shadow .3s,padding .3s}
.nav.solid{background:rgba(255,248,239,.9);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);padding:12px 40px}
.nav-brand{display:flex;align-items:center;font-family:'Instrument Serif',serif;font-size:23px;color:var(--ink)}
.nav-brand svg{margin-right:10px}
.nav-links{display:flex;gap:26px;font-size:14px}
.nav-links a{color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}

/* progress rail */
.rail{position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:201;width:calc(var(--scroll,0)*100%)}

/* ---------- HERO ---------- */
/* Grid rows keep the box in flow after the copy, so it can never ride up
   into the CTA row on a short viewport. */
.hero{position:relative;min-height:100vh;display:grid;grid-template-rows:auto auto;align-content:center;justify-items:center;overflow:hidden;padding:clamp(72px,11vh,124px) 0 0;background-color:var(--bg);background-image:repeating-linear-gradient(90deg,rgba(232,85,138,.055) 0 17px,transparent 17px 34px),repeating-linear-gradient(180deg,rgba(232,85,138,.055) 0 17px,transparent 17px 34px)}
.hero-inner{position:relative;z-index:2;text-align:center;max-width:960px;padding:0 40px}
.hero h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(34px,min(6.8vw,8.4vh),112px);line-height:1.02;letter-spacing:-.012em;margin:0}
/* The reveal mask clips to the line box; line-height:1 makes that shorter than
   the font's ink, so descenders get sheared. Pad the mask and cancel it with a
   negative margin so the height budget is unchanged. */
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.34em;margin-bottom:-.34em}
/* Intro plays as a CSS animation with the VISIBLE state as the resting value,
   so first paint can never depend on a rAF callback firing. */
.hero h1 .ln>span{display:block;animation:lineUp 1s cubic-bezier(.16,1,.3,1) both}
.hero h1 .ln:nth-of-type(2)>span{animation-delay:.09s}
.hero h1 .ln:nth-of-type(3)>span{animation-delay:.18s}
@keyframes lineUp{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* One cursive accent per section, no more — Parisienne carries the emphasis
   word in the headline and the closing line, and nothing else. */
.hero h1 em{font-family:'Parisienne',cursive;font-style:normal;font-size:1.12em;line-height:.9;color:var(--accent)}
.hero-sub{max-width:560px;margin:clamp(10px,2.2vh,26px) auto 0;font-size:clamp(15px,1.4vw,19px);line-height:1.5;color:var(--ink-soft);animation:fadeUp .9s .35s cubic-bezier(.16,1,.3,1) both}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:clamp(14px,2.6vh,34px);flex-wrap:wrap;animation:fadeUp .9s .5s cubic-bezier(.16,1,.3,1) both}
/* Sized off the leftover height so the whole parcel always clears the fold.
   The max() floor keeps it large enough for the photo slot's empty state. */
.hero-box{position:relative;z-index:1;width:min(330px,max(210px,26vh));margin-top:clamp(6px,1.4vh,36px);margin-bottom:clamp(6px,1.4vh,24px);transform:translateY(calc(var(--p,0)*-34vh)) rotate(calc(var(--p,0)*8deg)) scale(calc(1 - var(--p,0)*.25));opacity:calc(1 - var(--p,0)*.9)}
.parcel{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 26px 34px rgba(63,33,48,.22))}
/* Hero photo slot: square; shape comes from ::part(frame) so the rounded mask
   isn't squared off by a host background, and the drop shadow only applies
   once a photo lands — on an empty slot it reads as a grey smudge. */
/* The drawn parcel is the resting state (via src), so it wants no placeholder
   tint and no card edge — and it carries the shadow the same way a photo would. */
.parcel-photo{display:block;width:100%;aspect-ratio:1;height:auto;min-width:0;min-height:0;filter:drop-shadow(0 22px 30px rgba(63,33,48,.2))}
.parcel-photo::part(frame){background:transparent}
.parcel-photo::part(empty){padding:8px;gap:4px;font-size:12px;line-height:1.35}
/* Bob rides on the slot, not .hero-box — the box owns the scroll-driven
   transform and a competing animation on the same element would win. */
.hero-float{animation:none}
.hero-float>*{animation:bob 5.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.scrollcue{position:absolute;bottom:max(14px,2vh);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);opacity:calc(1 - var(--p,0)*3);z-index:3}
.scrollcue i{display:block;width:1px;height:40px;background:linear-gradient(var(--ink-soft),transparent);animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ---------- generic reveal ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}

/* ---------- PROBLEM (a quick beat, deliberately not card-shaped so it can't
   be mistaken for the product's own three steps) ---------- */
.problem{padding:64px 0;background-color:var(--bg-alt);background-image:repeating-linear-gradient(90deg,rgba(232,85,138,.13) 0 18px,transparent 18px 36px),repeating-linear-gradient(180deg,rgba(232,85,138,.13) 0 18px,transparent 18px 36px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.problem-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(24px,5vw,72px);align-items:center}
.problem .eyebrow{color:var(--ink-soft)}
.problem h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(24px,2.8vw,36px);line-height:1.12;margin:10px 0 0;color:var(--ink-soft);text-wrap:balance;text-shadow:0 1px 0 rgba(255,255,255,.65)}
.problem h2 em{font-style:normal;color:var(--ink)}
.problem-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;justify-items:start}
.problem-list li{display:flex;align-items:baseline;font-size:15px;color:var(--ink-soft);background:#fff;padding:6px 15px;border-radius:999px;box-shadow:0 1px 0 rgba(63,33,48,.06)}
.problem-list li::before{content:'\00d7';margin-right:10px;color:var(--accent);font-size:15px;opacity:.75}
.problem-list s{text-decoration-color:rgba(63,33,48,.35);text-decoration-thickness:1px}

/* ---------- STEPS ---------- */
.steps{background:var(--bg-deep);color:#fff;padding:120px 0 130px}
.steps h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(30px,4.4vw,52px);margin:14px 0 0;line-height:1.05}
.steps .eyebrow{color:var(--pink)}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.scard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:30px}
.scard .n{font-family:'Instrument Serif',serif;font-size:52px;line-height:1;color:var(--pink)}
.scard .tagline{display:inline-block;margin-top:16px;padding:5px 13px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--accent);color:#fff}
.scard h3{font-family:'Instrument Serif',serif;font-weight:400;font-size:23px;margin:14px 0 8px;line-height:1.2}
.scard p{margin:0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.72)}

/* ---------- CTA ---------- */
.cta{background:var(--accent);color:#fff;padding:clamp(72px,10vh,120px) 0}
.cta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(32px,5vw,64px);align-items:start}
.cta h2{font-family:'Parisienne',cursive;font-weight:400;font-size:clamp(40px,6.2vw,78px);line-height:1.06;margin:0;letter-spacing:0}
.cta p{font-size:17px;opacity:.92;max-width:460px;margin:18px 0 28px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* interest capture */
.capture-q{color:rgba(255,255,255,.75);margin-bottom:12px}
.capture-sides{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.capture-sides button{padding:9px 15px;border-radius:999px;font-size:13px;font-weight:500;cursor:pointer;background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);font-family:inherit;transition:background .15s,color .15s}
.capture-sides button:hover{border-color:#fff}
.capture-sides button[aria-pressed=true]{background:#fff;color:var(--accent);border-color:#fff}
.capture-row{display:flex;gap:8px;background:#fff;padding:8px 8px 8px 18px;border-radius:999px;align-items:center;max-width:520px}
.capture-row input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:15px;color:var(--ink);background:transparent}
.capture-row .btn{background:var(--bg-deep);border-color:var(--bg-deep);color:#fff}
.capture-row .btn:hover{background:#1d130c;border-color:#1d130c}
/* :not([hidden]) so the JS-driven hidden attribute keeps working \u2014 a bare
   display:block here would beat the UA's [hidden]{display:none}. */
.capture-extra:not([hidden]){display:block;margin-top:8px;max-width:520px;width:100%;font:inherit;font-size:14px;padding:10px 14px;border-radius:10px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;outline:none}
.capture-extra::placeholder{color:rgba(255,255,255,.6)}
.capture-note{font-size:12px;color:rgba(255,255,255,.75);margin-top:12px;max-width:460px;line-height:1.45}
.capture-note.err{color:#fff;font-weight:600}
.capture-done-mark{font-size:34px}
.capture-done h3{font-family:'Instrument Serif',serif;font-weight:400;font-size:26px;margin:12px 0 8px;line-height:1.15}
.capture-done p{margin:0;opacity:.9;max-width:420px;font-size:15px}

.foot{margin-top:clamp(48px,8vh,88px);padding-top:24px;border-top:1px solid rgba(255,255,255,.22);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;opacity:.85}

@media (max-width:900px){
.sgrid{grid-template-columns:1fr}
.problem-row{grid-template-columns:1fr;gap:20px}
.wrap,.wrap-sm{padding:0 24px}
.nav-links{display:none}
}
/* Short viewports: reclaim height from padding, not from the copy. The cue
   goes — restoring it would collide with the parcel. */
@media (max-height:620px){
.scrollcue{display:none}
.hero{padding-top:44px}
}
@media (prefers-reduced-motion:reduce){
.hero-float,.hero-float>*{animation:none}
.hero h1 .ln>span,.hero-sub,.hero-cta{animation:none}
.scrollcue i{animation:none}
.rv{opacity:1;transform:none}
}

/* ---------- GIFT REQUEST ---------- */
/* Sits between the steps and the CTA on the soft gingham ground, so the form
   reads as a calm pause rather than another block of persuasion. */
.request{background-color:var(--bg);background-image:repeating-linear-gradient(90deg,rgba(232,85,138,.055) 0 17px,transparent 17px 34px),repeating-linear-gradient(180deg,rgba(232,85,138,.055) 0 17px,transparent 17px 34px);padding:clamp(64px,9vh,110px) 0}
.request-head{text-align:center;margin-bottom:clamp(28px,4vh,44px)}
.request-head .eyebrow{color:var(--accent)}
.request-head h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(30px,4.6vw,54px);line-height:1.06;margin:10px 0 0}
.request-head h2 em{font-family:'Parisienne',cursive;font-style:normal;font-size:1.14em;line-height:.9;color:var(--accent)}
.request-head p{color:var(--ink-soft);font-size:16px;line-height:1.55;max-width:520px;margin:14px auto 0}

.giftform{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:clamp(22px,3.4vw,38px);box-shadow:0 30px 60px -34px rgba(63,33,48,.35)}
.giftform fieldset{border:0;margin:0 0 26px;padding:0}
.giftform fieldset:last-of-type{margin-bottom:18px}
.giftform legend{font-family:'Instrument Serif',serif;font-size:21px;color:var(--ink);padding:0 0 12px}
/* auto-fit keeps two columns on desktop and folds to one on narrow screens
   without a second breakpoint to keep in sync. */
.gf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.gf{display:block}
/* display:block on .gf outranks the [hidden] attribute's own display:none,
   so hidden fields need saying explicitly or they render regardless. */
.gf[hidden],.giftform[hidden],.giftform-done[hidden]{display:none}
.gf-wide{margin-top:14px}
.gf>span{display:block;font-size:13px;font-weight:600;letter-spacing:.01em;margin-bottom:6px;color:var(--ink)}
.gf>span small{font-weight:400;color:var(--ink-soft);letter-spacing:.04em;text-transform:uppercase;font-size:10px;margin-left:6px}
.gf input,.gf select,.gf textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
.gf textarea{resize:vertical;line-height:1.5}
.gf input:focus,.gf select:focus,.gf textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,85,138,.15)}
.gf input.err,.gf select.err,.gf textarea.err{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(207,61,114,.16)}
.gf>small{display:block;margin-top:6px;font-size:12px;line-height:1.45;color:var(--ink-soft)}

.gf-submit{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:20px}
.gf-note{font-size:12.5px;color:var(--ink-soft);line-height:1.45;flex:1;min-width:200px}
.gf-note.err{color:var(--accent-2);font-weight:600}

.giftform-done{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:clamp(30px,4vw,46px);text-align:center;box-shadow:0 30px 60px -34px rgba(63,33,48,.35)}
.giftform-done h3{font-family:'Instrument Serif',serif;font-weight:400;font-size:28px;margin:12px 0 8px}
.giftform-done p{margin:0 auto;max-width:420px;color:var(--ink-soft);font-size:15px;line-height:1.55}

@media (max-width:600px){
.gf-submit{flex-direction:column;align-items:stretch}
.gf-submit .btn{justify-content:center}
}

/* Privacy note above the submit row. Deliberately plain and quiet — this is
   a promise about third-party data, and dressing it up as marketing would
   undercut it. */
.gf-privacy{margin-top:22px;padding:16px 18px;border-radius:12px;background:rgba(232,85,138,.06);border:1px solid rgba(232,85,138,.16);font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.gf-privacy b{color:var(--ink);font-weight:600}

/* The capture form sits on the accent-pink CTA, so .capture-extra is styled
   white-on-translucent. A <select> inherits that for its closed state, but
   its dropdown options are painted by the OS against a light menu — without
   an explicit colour they render white on white and read as empty. */
select.capture-extra option{color:var(--ink);background:#fff}
select.capture-extra option[disabled]{color:var(--ink-soft)}