/* SnazzyEyes - faithful clone. Every value traced to source.png measurements.
   Source 812x1494 -> built at 1440 (scale 1.7734, target page ~2650px). */

:root{
  /* measured palette */
  --red:#C90C0E; --red-bright:#D10106; --red-deep:#B60B0E;
  --gold:#FDC93E; --gold-deep:#F3B70A; --amber:#FCBB03; --amber-ink:#3a2c00;
  --ink:#171410; --muted:#5b554e;
  --paper:#fefefe; --card-warm:#FBF7F0; --cream:#FFF6E9;
  --line:#ece7e1;
  /* category */
  --cat-red:#CE070A; --cat-orange:#EE8A0C; --cat-yellow:#F6B706;
  --cat-pink:#E96689; --cat-teal:#69CCBD; --cat-purple:#784FA3;
  /* radius */
  --r-pill:999px; --r-card:18px; --r-panel:26px; --r-sm:12px;
  /* shadow */
  --sh-card:0 8px 24px rgba(20,24,32,.08);
  --sh-panel:0 18px 50px rgba(20,24,32,.12);
  --sh-soft:0 3px 10px rgba(20,24,32,.055);
  /* layout: source content = 0.0505-0.952 of width -> 1298px at 1440 */
  --gutter:clamp(16px,2vw,29px);
  --maxw:calc(1298px + 2*var(--gutter));
  --f-disp:"Fredoka",system-ui,sans-serif;
  --f-body:"Nunito",system-ui,sans-serif;
  --f-slab:"Zilla Slab","Rockwell",serif;
  --f-script:"Great Vibes",cursive;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0; font-family:var(--f-body); color:var(--ink);
  background:var(--paper); line-height:1.5;
  font-size:16px; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-family:var(--f-disp); line-height:1.08}
p{margin:0}
button{font-family:inherit; cursor:pointer}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.t-red{color:var(--red)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0}
.skip{position:absolute; left:-999px; top:0; background:var(--red); color:#fff;
  padding:10px 16px; border-radius:0 0 10px 0; z-index:200}
.skip:focus{left:0}

.ico{width:1.25em; height:1.25em; display:inline-block; fill:none; vertical-align:middle}
.ico--xl{width:3em; height:3em}

/* ---------- gold burst marks flanking section titles ---------- */
.burst{width:30px; height:27px; flex:none; display:inline-block;
  background:center/contain no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 30' fill='none' stroke='%23F3B70A' stroke-width='4.2' stroke-linecap='round'%3E%3Cpath d='M4,6 L15,11'/%3E%3Cpath d='M2,16 L14,16'/%3E%3Cpath d='M4,26 L15,21'/%3E%3C/svg%3E")}
.burst--r{transform:scaleX(-1)}

.sec-title{display:flex; align-items:center; justify-content:center; gap:12px;
  color:var(--red); font-weight:600; font-size:clamp(23px,2.25vw,32px);
  text-align:center; margin:0 0 clamp(7px,0.85vw,11px)}
.sec-title--left{justify-content:flex-start}
.sec-title--panel{color:#fff; justify-content:flex-start; gap:11px;
  margin:0 0 clamp(8px,1vw,12px); font-size:clamp(21px,1.95vw,27px)}
.sec-title--left .burst,.sec-title--panel .burst{width:28px; height:25px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-disp); font-weight:600; font-size:1.04rem; line-height:1;
  padding:15px 28px; border-radius:var(--r-pill); border:0;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.btn--red{background:var(--red); color:#fff; box-shadow:0 6px 16px rgba(140,30,10,.30)}
.btn--red:hover{background:var(--red-deep)}
.btn--white{background:#fff; color:var(--ink); box-shadow:0 6px 16px rgba(140,90,10,.22)}
.btn--white:hover{background:#fff7ec}
.btn--amber{background:var(--amber); color:var(--amber-ink); box-shadow:0 6px 16px rgba(160,110,0,.25)}
.btn--amber:hover{background:#ffc933}
.btn--block{width:100%; padding:12px 22px; font-size:1.02rem}
.btn .ico{width:1.2em; height:1.2em}

/* ---------- 1. announcement (39px) ---------- */
.announce{background:var(--red-bright); color:#fff}
.announce__row{display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:43px; padding-block:8px; text-align:center; font-size:.9rem; font-weight:700}
.announce__sun{color:var(--gold)}
.announce__sun .ico{width:18px; height:18px}
.announce__cta{color:var(--gold); font-weight:800; white-space:nowrap; margin-left:6px}
.announce__cta:hover{text-decoration:underline}

/* ---------- 2. header (117px) ---------- */
.site-head{background:#fff; position:relative; z-index:50}
.head__row{display:flex; align-items:center; gap:16px; height:114px}
.brand{display:flex; align-items:center; gap:12px}
.brand__mascot{width:94px; height:94px; object-fit:contain; margin-block:-6px}
.brand__name{font-family:var(--f-slab); font-weight:700; color:var(--red);
  font-size:2.55rem; letter-spacing:1px; line-height:1; display:block}
.brand__tag{font-size:.78rem; color:var(--ink); font-weight:800; line-height:1.2;
  display:block; margin-top:4px}
.nav{display:flex; align-items:center; gap:clamp(9px,1.45vw,21px); margin-inline:auto}
.nav a{font-weight:800; font-size:.95rem; color:var(--ink); padding:6px 2px;
  border-bottom:2px solid transparent; transition:color .15s, border-color .15s}
.nav a:hover{color:var(--red); border-color:var(--red)}
.nav__close,.nav__toggle{display:none; background:none; border:0; color:var(--ink); padding:6px}
.head__actions{display:flex; align-items:center; gap:15px}
.iconbtn{display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:0; color:var(--ink); font-weight:800; font-size:.68rem}
.iconbtn .ico{width:23px; height:23px}
.iconbtn:hover{color:var(--red)}
.cart-wrap{position:relative; display:inline-flex}
.cart-badge{position:absolute; top:-8px; right:-10px; background:var(--red); color:#fff;
  font-size:.62rem; font-weight:800; min-width:17px; height:17px; border-radius:999px;
  display:grid; place-items:center; padding:0 4px}

/* ---------- 3. hero (549px): gold band, torn photo seam, tape, sticker seal ----------
   seam: x 47.7% (top) -> 39.9% (bottom), torn jitter; tape cream bottom-left 58.7% w */
.hero{position:relative; isolation:isolate; overflow:hidden;
  background:var(--gold); min-height:clamp(400px,38.2vw,560px)}
/* soft sunburst: faint rays only near the hero top (source field is flat behind the H1) */
.hero::before{content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 40% 30% at 30% 4%, rgba(255,255,255,.20), rgba(255,255,255,0) 60%),
    repeating-conic-gradient(from 100deg at 20% -4%,
      rgba(255,255,255,0) 0deg 6.4deg, rgba(255,244,205,.12) 6.4deg 12.8deg)}
/* white torn-paper fringe sits just left of the photo's torn seam */
.hero__torn{position:absolute; inset:0; z-index:1; background:#fff;
  clip-path:polygon(47.25% 0.0%, 46.99% 2.5%, 46.73% 5.0%, 46.72% 7.5%, 46.32% 10.0%, 46.29% 12.5%, 46.03% 15.0%, 45.73% 17.5%, 45.69% 20.0%, 45.33% 22.5%, 45.28% 25.0%, 44.95% 27.5%, 44.76% 30.0%, 44.69% 32.5%, 44.64% 35.0%, 44.19% 37.5%, 44.03% 40.0%, 43.98% 42.5%, 43.9% 45.0%, 43.57% 47.5%, 43.31% 50.0%, 43.33% 52.5%, 42.8% 55.0%, 42.89% 57.5%, 42.49% 60.0%, 42.25% 62.5%, 42.04% 65.0%, 41.92% 67.5%, 41.9% 70.0%, 41.48% 72.5%, 41.43% 75.0%, 41.26% 77.5%, 40.96% 80.0%, 40.83% 82.5%, 40.46% 85.0%, 40.27% 87.5%, 40.12% 90.0%, 40.1% 92.5%, 39.81% 95.0%, 39.58% 97.5%, 39.45% 100.0%, 100% 100%, 100% 0%)}
.hero__photo{position:absolute; inset:0; z-index:2; width:100%; height:100%;
  object-fit:cover; object-position:72% 30%;
  clip-path:polygon(47.7% 0.0%, 47.44% 2.5%, 47.18% 5.0%, 47.17% 7.5%, 46.77% 10.0%, 46.74% 12.5%, 46.48% 15.0%, 46.18% 17.5%, 46.14% 20.0%, 45.78% 22.5%, 45.73% 25.0%, 45.4% 27.5%, 45.21% 30.0%, 45.14% 32.5%, 45.09% 35.0%, 44.64% 37.5%, 44.48% 40.0%, 44.43% 42.5%, 44.35% 45.0%, 44.02% 47.5%, 43.76% 50.0%, 43.78% 52.5%, 43.25% 55.0%, 43.34% 57.5%, 42.94% 60.0%, 42.7% 62.5%, 42.49% 65.0%, 42.37% 67.5%, 42.35% 70.0%, 41.93% 72.5%, 41.88% 75.0%, 41.71% 77.5%, 41.41% 80.0%, 41.28% 82.5%, 40.91% 85.0%, 40.72% 87.5%, 40.57% 90.0%, 40.55% 92.5%, 40.26% 95.0%, 40.03% 97.5%, 39.9% 100.0%, 100% 100%, 100% 0%)}
.hero__wave{position:absolute; left:0; right:0; line-height:0; z-index:3; pointer-events:none}
.hero__wave svg{width:100%; display:block}
.hero__wave--top{top:-1px}
.hero__wave--top svg{height:clamp(10px,1.2vw,18px)}
.hero__inner{position:relative; z-index:4;
  padding-top:clamp(26px,3.6vw,52px); padding-bottom:clamp(96px,8.5vw,122px)}
.hero__text{position:relative; width:min(47%,610px)}
.hero__title{font-family:var(--f-disp); letter-spacing:-.5px;
  font-size:clamp(34px,3.55vw,51px); line-height:1.0; color:var(--ink); font-weight:700;
  transform:rotate(-2deg); transform-origin:left center; margin:4px 0 2px}
.hero__lede{margin:13px 0 18px; font-size:clamp(.9rem,1.05vw,.95rem); font-weight:600;
  color:#2a2620; max-width:42ch}
.hero__cta{display:flex; gap:13px; flex-wrap:wrap}
.spark{position:absolute; opacity:.92; z-index:1}
.spark .ico{width:100%; height:100%}
.spark--1{width:25px; height:25px; top:-14px; left:0; color:var(--gold-deep)}
.spark--2{width:26px; height:26px; top:-10px; left:97%; color:var(--red)}
.spark--3{width:19px; height:19px; bottom:34%; left:-15px; color:var(--red)}
.spark--4{width:17px; height:17px; top:5%; left:54%; color:var(--gold-deep)}
.spark--5{width:23px; height:23px; top:42%; left:101%; color:var(--red)}
.spark--6{width:14px; height:14px; bottom:1%; left:31%; color:var(--gold-deep)}

/* torn-sticker seal: red disc + arc text + mascot (source: ~195px, right 117, near bottom) */
.seal{display:block; width:clamp(116px,12.9vw,186px); aspect-ratio:1}
.seal svg{width:100%; height:100%; display:block; filter:drop-shadow(0 7px 16px rgba(60,10,0,.35))}
.seal__disc{fill:var(--red)}
.seal__txt{font-family:var(--f-disp); font-weight:600; fill:#fff; font-size:11px; letter-spacing:2.2px}
.seal--hero{position:absolute; right:clamp(20px,8.1vw,117px); bottom:clamp(5px,0.7vw,9px);
  z-index:5; transform:rotate(-8deg)}

/* cream torn-paper trust tape (bottom-left, 58.7% wide, ~73px tall) */
.hero__trust{position:absolute; left:0; bottom:0; z-index:4; width:58.7%; min-height:73px;
  background:var(--cream); display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:15px clamp(40px,4.5vw,64px) 13px var(--gutter)}
.hero__trust-wave{position:absolute; left:0; right:0; top:1px; transform:translateY(-100%);
  height:14px; line-height:0; pointer-events:none}
.hero__trust-wave svg{width:100%; height:100%; display:block}
.trust__item{display:flex; align-items:center; gap:8px; font-weight:800; font-size:.88rem; color:var(--ink); white-space:nowrap}
.trust__item .ico{width:19px; height:19px; color:var(--ink)}

/* ---------- section rhythm (source is dense) ---------- */
.moment{padding-block:clamp(14px,1.5vw,22px) 0}
.engrave{padding-block:clamp(12px,1.4vw,20px) 0}
.preview-sec{padding-block:clamp(10px,1.2vw,16px) 0}
.bundles{padding-block:clamp(10px,1.2vw,18px) 0}
.how{padding-block:clamp(10px,1.2vw,18px) 0}
.favorites{padding-block:clamp(10px,1.3vw,20px) 0}
.bulk{padding-block:clamp(10px,1.2vw,18px) 0}
.faq{padding-block:clamp(8px,1vw,14px) clamp(8px,1vw,13px)}

/* ---------- 4. shop by moment: integrated label bar (card 207x205) ---------- */
.moment__row{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(8px,0.72vw,11px)}
.tile{display:flex; flex-direction:column; border-radius:15px; overflow:hidden;
  box-shadow:var(--sh-soft); transition:transform .16s, box-shadow .16s; background:#eee}
.tile:hover{transform:translateY(-4px); box-shadow:var(--sh-card)}
.tile img{width:100%; aspect-ratio:207/156; object-fit:cover; flex:none}
.tile__label{background:var(--c); color:#fff; font-weight:800; font-size:clamp(.72rem,1vw,.92rem);
  padding:12px 4px; text-align:center; white-space:nowrap; overflow:hidden; flex:1;
  display:flex; align-items:center; justify-content:center}
.tile__label--dark{color:#3a2c00}

/* ---------- 5. see the engraving: 5 big macros (246x164 = 3:2) ---------- */
.engrave__row{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(8px,0.8vw,12px)}
.glass{margin:0; border-radius:13px; overflow:hidden; box-shadow:0 3px 10px rgba(20,24,32,.05); background:#f4f1ec}
.engrave__cap{text-align:center; margin-top:clamp(10px,1.3vw,17px);
  font-weight:800; font-size:clamp(.95rem,1.25vw,1.1rem)}
.engrave__cap .ico{width:1em; height:1em}

/* ---------- 6. preview your design (red panel 338px) ---------- */
.panel-red{background:var(--red); border-radius:var(--r-panel); color:#fff;
  padding:clamp(8px,0.95vw,13px) clamp(9px,1.2vw,16px) clamp(8px,0.95vw,12px);
  box-shadow:var(--sh-panel); position:relative}
.preview__grid{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(10px,1.4vw,20px); align-items:start}
.preview__card{background:#fff; border-radius:var(--r-card); padding:11px 13px 13px; box-shadow:var(--sh-card); display:flex; flex-direction:column}
.preview__feats{list-style:none; margin:9px 2px 0; padding:0; display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between}
.preview__feats li{display:flex; align-items:center; gap:7px; font-weight:800; font-size:.82rem; color:var(--ink)}
.preview__feats .ico{color:var(--ink); width:17px; height:17px}
/* form sits in a WHITE card; red shows only as the panel frame around it */
.preview__form{display:grid; grid-template-columns:1fr 1fr; gap:13px 15px; align-content:start;
  background:#fff; border-radius:var(--r-card); padding:17px 16px; box-shadow:var(--sh-card)}
.field{display:flex; flex-direction:column; gap:5px}
.field label,.field .field__lab{font-weight:800; font-size:.82rem; color:#3a352e}
.field input,.field select{font-family:inherit; font-size:.9rem; font-weight:700;
  padding:10px 12px; border:1.5px solid var(--line); border-radius:9px; background:#fcfbfa; color:var(--ink);
  width:100%; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23171410' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px}
.field input{background-image:none}
.field input:focus,.field select:focus{outline:3px solid rgba(252,187,3,.65); outline-offset:1px}
.swatches{display:flex; gap:12px; align-items:center; min-height:37px}
.sw{width:31px; height:31px; border-radius:999px; background:var(--sw); border:2px solid rgba(0,0,0,.12);
  transition:transform .15s, box-shadow .15s; position:relative; padding:0}
.sw--light{border-color:#d9d2c8}
.sw:hover{transform:scale(1.1)}
.sw.is-selected{box-shadow:0 0 0 2.5px #fff, 0 0 0 5px var(--red)}
.btn--block{grid-column:1/-1; margin-top:2px}
.preview__note{grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:7px;
  font-weight:800; font-size:.82rem; color:#4a443c; margin-top:0}
.preview__note .ico{color:var(--red); width:16px; height:16px}
.form-msg{grid-column:1/-1; text-align:center; font-weight:800; font-size:.85rem; margin:0}
.form-msg:empty{display:none}
.form-msg.ok{color:#ffe9b0} .form-msg.err{color:#ffd2d2}

/* ---------- 7. bundles (cards on warm card bg, big photos) ---------- */
.bundles__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.5vw,21px)}
.card{background:var(--card-warm); border-radius:16px; padding:9px 9px 10px; box-shadow:var(--sh-soft);
  display:flex; flex-direction:column; gap:3px; position:relative; transition:transform .16s, box-shadow .16s;
  text-align:center}
.card:hover{transform:translateY(-4px); box-shadow:var(--sh-card)}
.card__img{display:block; border-radius:var(--r-sm); overflow:hidden; aspect-ratio:300/92; background:#f1ede6}
.card__img img{width:100%; height:100%; object-fit:cover}
.card h3{font-size:1.02rem; font-weight:600; margin-top:5px}
.card p{font-size:.8rem; color:var(--muted); font-weight:700; flex:1}
.card__price{font-family:var(--f-disp); font-weight:600; color:var(--red); font-size:1rem; margin-top:2px}
.card__tag{position:absolute; top:-12px; left:-10px; background:var(--gold); color:#3a2c00;
  font-family:var(--f-disp); font-weight:600; font-size:.64rem; padding:7px 11px; z-index:2;
  clip-path:polygon(50% 0,63% 12%,80% 7%,82% 25%,99% 33%,88% 47%,99% 63%,80% 67%,77% 86%,60% 78%,50% 99%,40% 78%,23% 86%,20% 67%,1% 63%,12% 47%,1% 33%,18% 25%,20% 7%,37% 12%);
  display:grid; place-items:center; width:60px; height:60px; text-align:center; line-height:1.05}

/* ---------- 8. how it works: ONE pill band, dividers, num+icon+text rows ---------- */
.steps{list-style:none; margin:0; padding:clamp(10px,1.2vw,16px) clamp(10px,1.2vw,18px);
  background:var(--card-warm); border-radius:16px; box-shadow:0 2px 8px rgba(20,24,32,.05); border:1px solid #f3eee4;
  display:grid; grid-template-columns:repeat(4,1fr)}
.step{display:flex; align-items:center; gap:9px; padding-inline:clamp(8px,1.1vw,15px)}
.step+.step{border-left:1px solid #efe9dd}
.step__num{flex:none; width:31px; height:31px; border-radius:999px; background:var(--red); color:#fff;
  font-family:var(--f-disp); font-weight:600; display:grid; place-items:center; font-size:.95rem}
.step__ico{flex:none; width:34px; height:34px}
.step__abc{flex:none; font-family:var(--f-disp); font-weight:600; font-size:1.5rem; color:var(--ink); line-height:1}
.step__txt h3{font-size:.98rem; font-weight:600}
.step__txt p{font-size:.8rem; color:var(--muted); font-weight:700; margin-top:2px; max-width:21ch}

/* ---------- 9. favorites split ---------- */
.fav__split{display:grid; grid-template-columns:1.31fr auto 1fr; gap:clamp(16px,2.6vw,40px); align-items:start}
.fav__rule{width:1.5px; align-self:stretch; background:var(--line)}
.fav__grid{display:grid; gap:clamp(10px,1.2vw,17px)}
.fav__grid--4{grid-template-columns:repeat(4,1fr)}
.fav__grid--3{grid-template-columns:repeat(3,1fr)}
.pcard{display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center; transition:transform .16s}
.pcard:hover{transform:translateY(-3px)}
.pcard__img{width:100%; aspect-ratio:166/97; border-radius:13px; overflow:hidden; background:#f4f1ec; box-shadow:var(--sh-soft)}
.pcard__img img{width:100%; height:100%; object-fit:cover}
.pcard h3{font-size:.9rem; font-weight:600; margin-top:4px}
.pcard .card__price{font-size:.92rem}

/* ---------- 10. bulk CTA (panel ~111px) ---------- */
.bulk__panel{display:flex; align-items:center; gap:clamp(12px,1.9vw,24px); flex-wrap:wrap;
  padding:clamp(10px,1.2vw,14px) clamp(16px,2vw,26px); border-radius:22px}
.bulk__mascot{width:76px; height:76px; object-fit:contain; flex:none; margin-block:-3px}
.bulk__copy{flex:1; min-width:220px}
.bulk__copy h2{font-size:clamp(1.3rem,1.85vw,1.65rem); font-weight:600}
.bulk__copy p{font-weight:700; margin-top:4px; opacity:.95; font-size:.92rem}
.bulk__people{color:rgba(255,255,255,.9); flex:none; width:52px; height:52px}

/* ---------- 11. FAQ (compact rows) ---------- */
.faq__cols{display:grid; grid-template-columns:1fr 1fr; gap:12px clamp(14px,2vw,26px); align-items:start}
.faq__col{display:flex; flex-direction:column; gap:6px}
.ac{background:#fff; border:1.5px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgba(20,24,32,.04)}
.ac summary{list-style:none; cursor:pointer; padding:4px 15px; font-weight:800; font-size:.84rem;
  font-family:var(--f-body); display:flex; align-items:center; justify-content:space-between; gap:12px}
.ac summary::-webkit-details-marker{display:none}
.ac__chev{transition:transform .2s; color:var(--ink); flex:none; width:17px; height:17px}
.ac[open] .ac__chev{transform:rotate(180deg)}
.ac__body{padding:0 17px 12px; color:var(--muted); font-weight:600; font-size:.88rem}
.ac:hover{border-color:#e3b9b9}

/* ---------- 12. footer (compact red strip ~150px incl legal) ---------- */
.site-foot{background:var(--red); color:#fff; padding-top:clamp(6px,0.8vw,10px)}
.foot__grid{display:grid; grid-template-columns:1.4fr 0.85fr 0.95fr 1.4fr auto;
  gap:6px clamp(14px,1.9vw,25px); position:relative; align-items:start}
.brand--foot{gap:10px}
.foot__brand .brand__name{color:#fff; font-size:1.35rem}
.foot__brand .brand__mascot{width:48px; height:48px; margin-block:0}
.foot__brand>p{margin:1px 0 5px; font-weight:700; opacity:.95; max-width:26ch; font-size:.76rem}
.foot__social{display:flex; gap:9px}
.foot__social a{width:26px; height:26px; border-radius:999px; background:rgba(255,255,255,.14);
  display:grid; place-items:center; transition:background .15s}
.foot__social a .ico{width:16px; height:16px}
.foot__social a:hover{background:rgba(255,255,255,.3)}
.foot__col{border-left:1px solid rgba(255,255,255,.25); padding-left:clamp(14px,1.8vw,26px)}
.foot__col h4{font-family:var(--f-disp); font-weight:600; font-size:.94rem; margin-bottom:4px}
.foot__col a{display:block; font-weight:700; font-size:.75rem; opacity:.92; padding:1px 0}
.foot__col a:hover{opacity:1; text-decoration:underline}
.foot__follow p{font-weight:700; font-size:.74rem; opacity:.95; margin-bottom:6px}
.foot__ugc{display:flex; gap:5px}
.foot__ugc img{width:33px; height:33px; aspect-ratio:1; object-fit:cover; border-radius:7px}
.foot__badge{width:clamp(76px,6.5vw,93px); aspect-ratio:1; display:block; align-self:center; transform:rotate(6deg)}
.foot__badge svg{width:100%; height:100%; display:block; filter:drop-shadow(0 4px 10px rgba(60,10,0,.3))}
.foot-badge__disc{fill:var(--cream)}
.foot-badge__txt{font-family:var(--f-disp); font-weight:600; fill:var(--red); font-size:11.5px; letter-spacing:1.6px}
.foot__legal{margin-top:clamp(5px,0.7vw,8px); border-top:1px solid rgba(255,255,255,.18);
  padding-block:4px; font-size:.7rem; opacity:.85}
.foot__legal .wrap{display:block}

/* ================= RESPONSIVE ================= */
@media(max-width:1024px){
  .head__row{height:auto; padding-block:10px}
  .brand__mascot{width:64px; height:64px}
  .brand__name{font-size:1.8rem}
  .hero{min-height:0}
  .hero__inner{padding-bottom:150px}
  .moment__row{grid-template-columns:repeat(3,1fr)}
  .engrave__row{grid-template-columns:repeat(3,1fr)}
  .bundles__grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr 1fr; gap:14px 0; padding-block:16px}
  .step:nth-child(3){border-left:0}
  .fav__split{grid-template-columns:1fr; gap:clamp(20px,3.5vw,34px)}
  .fav__rule{display:none}
  .fav__grid--3,.fav__grid--4{grid-template-columns:repeat(4,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr; gap:20px}
  .foot__col{border-left:0; padding-left:0}
  .foot__badge{position:relative; right:auto; bottom:auto; margin-top:6px; width:92px}
}
@media(max-width:860px){
  .nav__toggle{display:inline-flex}
  .nav{position:fixed; inset:0 0 0 auto; width:min(82vw,320px); background:#fff;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px;
    padding:64px 24px 24px; transform:translateX(100%); transition:transform .25s ease;
    box-shadow:-12px 0 40px rgba(0,0,0,.18); z-index:120; margin:0}
  .nav.open{transform:translateX(0)}
  .nav__close{display:inline-flex; position:absolute; top:16px; right:16px}
  .nav a{font-size:1.05rem; padding:10px 4px; border-bottom:1px solid var(--line)}
  .nav a:hover{border-color:var(--line)}
  body.nav-open{overflow:hidden}
  .nav-scrim{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:110; opacity:0;
    pointer-events:none; transition:opacity .25s}
  .nav-scrim.show{opacity:1; pointer-events:auto}
  .iconbtn span:last-child{display:none}
  .hero__photo,.hero__torn{position:relative; inset:auto; width:100%; height:300px; clip-path:none; order:2}
  .hero__torn{display:none}
  .hero{display:flex; flex-direction:column}
  .hero__inner{padding-bottom:28px}
  .hero__text{width:100%}
  .hero__title{transform:none}
  .seal--hero{bottom:310px; right:18px; width:120px}
  .hero__trust{position:relative; width:100%; clip-path:none; flex-wrap:wrap; order:3;
    padding:12px var(--gutter); gap:8px 18px}
  .preview__grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr; gap:12px}
  .step{border-left:0 !important; padding-inline:4px}
  .step+.step{border-top:1.5px solid #eae4d8; padding-top:12px}
  .bulk__panel{justify-content:center; text-align:center}
  .bulk__people{display:none}
}
@media(max-width:640px){
  .announce__row{font-size:.74rem}
  .brand__tag{display:none}
  .moment__row{grid-auto-flow:column; grid-auto-columns:46%; grid-template-columns:none;
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; gap:12px}
  .tile{scroll-snap-align:start}
  .tile__label{white-space:normal}
  .engrave__row{grid-auto-flow:column; grid-auto-columns:62%; grid-template-columns:none;
    overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px}
  .glass{scroll-snap-align:start}
  .bundles__grid{grid-template-columns:1fr 1fr; gap:12px}
  .fav__grid--3,.fav__grid--4{grid-template-columns:repeat(2,1fr)}
  .faq__cols{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .hero__title{font-size:clamp(34px,9vw,46px)}
  .hero__cta .btn{flex:1; padding:15px 18px}
  .seal--hero{display:none}
  .trust__item{flex:1 1 44%; justify-content:flex-start; font-size:.84rem; white-space:normal}
  .preview__form{grid-template-columns:1fr}
}