/* ============================================================
   Spiritual Designs by Cheryl — Home (light floral theme)
   Self-contained styles matching the approved homepage mockup.
   ============================================================ */

:root{
  --ink:#1b2c66;            /* deep royal-blue headings & body */
  --ink-soft:#3a4a86;
  --magenta:#d81f7a;        /* primary / script pink */
  --magenta-deep:#b81665;
  --blue:#2f74b8;           /* secondary accent / "by Cheryl" */
  --gold:#c69a3e;
  --gold-soft:#e6c877;
  --teal:#26a79a;
  --purple:#7b3fa0;
  --green:#4a9d5b;

  --sky-top:#cfe9f8;
  --cream:#fffaf1;
  --panel:#fffdf9;
  --panel-2:#fff6ea;
  --line:#efe4d2;

  --shadow-sm:0 2px 8px rgba(60,40,20,.08);
  --shadow-md:0 10px 26px rgba(60,40,20,.12);
  --shadow-lg:0 20px 50px rgba(60,40,20,.16);
  --radius:18px;
  --radius-lg:26px;

  --script:"Great Vibes",cursive;
  --display:"Playfair Display",Georgia,serif;
  --serif:"Cormorant Garamond","Playfair Display",Georgia,serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--serif);
  font-size:19px;
  line-height:1.6;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1320px;margin:0 auto;padding:0 28px}

h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;margin:0}
p{margin:0 0 1em}

.skip-link{position:absolute;left:-999px;top:0;background:var(--magenta);color:#fff;padding:10px 16px;border-radius:0 0 12px 0;z-index:200}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--magenta);outline-offset:2px;border-radius:6px}

/* ---------- buttons ---------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--display);font-weight:600;font-size:1.05rem;
  padding:.72em 1.5em;border-radius:999px;cursor:pointer;border:2px solid transparent;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
  line-height:1;
}
.btn > span,.btn > svg{position:relative;z-index:1}
.btn::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .6s ease}
.btn:hover::before{left:140%}
.btn svg{width:1.1em;height:1.1em;transition:transform .25s ease}
.btn:hover{transform:translateY(-3px)}
.btn:hover svg{transform:scale(1.2)}
.btn:active{transform:translateY(-1px)}
.btn--magenta{background:linear-gradient(135deg,#e83a8e,#c8156a);color:#fff;box-shadow:0 8px 20px rgba(200,21,106,.32)}
.btn--magenta:hover{box-shadow:0 14px 30px rgba(200,21,106,.46)}
.btn--outline{background:#fff;color:var(--blue);border-color:#a9cbe8;box-shadow:var(--shadow-sm)}
.btn--outline:hover{border-color:var(--blue);box-shadow:var(--shadow-md);background:#f5faff}
.btn--teal{background:linear-gradient(135deg,#33bcae,#1c8b80);color:#fff;box-shadow:0 8px 20px rgba(28,139,128,.3)}
.btn--teal:hover{box-shadow:0 14px 30px rgba(28,139,128,.44)}

/* ---------- header ---------- */
.topbg{
  background:linear-gradient(180deg,var(--sky-top) 0%, #eaf5fc 42%, var(--cream) 100%);
}
.site-header{position:relative;z-index:20}
.header-inner{display:flex;align-items:center;gap:24px;padding:16px 0 10px}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;transition:transform .3s ease}
.brand:hover{transform:translateY(-1px)}
.brand__mark{width:52px;height:52px;flex-shrink:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.brand:hover .brand__mark{transform:rotate(-6deg) scale(1.08)}
.brand__name{font-family:var(--script);font-size:2.5rem;line-height:.9;color:var(--magenta)}
.brand__by{font-family:var(--script);font-size:1.35rem;color:var(--blue);display:block;margin-top:2px;padding-left:6px}

.nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav a{
  font-family:var(--serif);font-weight:600;font-size:1.22rem;color:var(--ink);
  position:relative;padding:4px 0;letter-spacing:.2px;transition:color .22s ease;
}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--magenta),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.nav a:hover{color:var(--magenta)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.nav a.is-active{color:var(--magenta)}

/* hanging "Coming Soon" sign under a nav item */
.nav a.nav-soon{overflow:visible}
.soon-tag{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);transform-origin:top center;
  font-family:var(--display);font-weight:700;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;padding:3px 9px;border-radius:6px;color:#4a2d0b;
  background:linear-gradient(135deg,#efd799,#c9a14a);border:1px solid rgba(120,90,30,.35);
  box-shadow:0 4px 8px rgba(80,55,10,.25);
  animation:soonSway 4s ease-in-out infinite;
}
.soon-tag::before{content:"";position:absolute;top:-10px;left:50%;width:1.5px;height:10px;background:#c9a14a;transform:translateX(-50%)}
.soon-tag::after{content:"";position:absolute;top:-13px;left:50%;width:5px;height:5px;border-radius:50%;background:#c9a14a;box-shadow:0 0 0 1px rgba(120,90,30,.35);transform:translateX(-50%)}
@keyframes soonSway{0%,100%{transform:translateX(-50%) rotate(-4deg)}50%{transform:translateX(-50%) rotate(4deg)}}

.header-tools{display:flex;align-items:center;gap:20px;margin-left:6px}
.icon-btn{background:none;border:0;cursor:pointer;color:var(--ink);display:inline-flex;position:relative;transition:transform .2s ease,color .2s ease}
.icon-btn:hover{color:var(--magenta);transform:translateY(-2px) scale(1.06)}
.icon-btn svg{width:26px;height:26px}
.cart-count{position:absolute;top:-8px;right:-10px;background:var(--magenta);color:#fff;font-family:var(--display);
  font-size:.72rem;min-width:19px;height:19px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px}

.nav-toggle{display:none}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.22fr;gap:24px;align-items:center;padding:14px 0 54px}
.hero-copy{padding-left:118px;position:relative;z-index:5;min-height:520px;display:flex;flex-direction:column;justify-content:center}

/* soft heavenly glow behind the headline */
.hero-halo{position:absolute;left:40px;top:6%;width:460px;height:460px;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 40% 40%, rgba(255,244,214,.85), rgba(255,244,214,0) 62%);
  filter:blur(6px)}

.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);
  font-size:.82rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px;position:relative;z-index:2}
.hero-eyebrow svg{width:16px;height:16px;color:var(--gold)}

.hero-title{margin:0;position:relative;z-index:2}
.nowrap{white-space:nowrap}
.ht-main{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,4vw,3.8rem);line-height:1.04;
  letter-spacing:-.015em;text-wrap:balance;
  background:linear-gradient(180deg,#243a86 0%, #1b2c66 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .script-line{display:block;font-family:var(--script);font-size:clamp(2.3rem,3.6vw,3.4rem);line-height:.96;margin-top:6px;
  background:linear-gradient(92deg,#e0247f,#b3288f 55%,#8e2f8f);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.08em}

.divider-filigree{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--gold);position:relative;z-index:2}
.divider-filigree .fl-line{height:1px;width:70px;background:linear-gradient(90deg,transparent,var(--gold-soft),var(--gold))}
.divider-filigree .fl-line:last-child{background:linear-gradient(90deg,var(--gold),var(--gold-soft),transparent)}
.divider-filigree svg{width:40px;height:24px;color:var(--gold)}

.hero-lede{font-size:1.24rem;line-height:1.7;color:var(--ink-soft);max-width:30rem;margin:0 0 28px;position:relative;z-index:2;font-style:italic}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;position:relative;z-index:2}

/* floral accents */
.floral{position:absolute;pointer-events:none;z-index:0}
.floral--hero-left{left:-66px;top:-6px;width:326px;height:560px}
.card-panel h2,.card-panel p,.card-panel .btn,.card-panel .about__photo,.card-panel .madewith{position:relative;z-index:2}
.floral--edge-right{right:-30px;top:0;width:150px;height:100%}

/* carousel */
.carousel{position:relative}
.viewport{overflow:hidden;padding:14px 6px}
.slides{display:flex;gap:20px;will-change:transform}
.slide{flex:0 0 auto;width:236px}
.ecard{
  position:relative;display:block;aspect-ratio:5/7;border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.6);
}
.phlayer{position:absolute;inset:0}
.ecard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.ecard__heart{position:absolute;left:12px;bottom:12px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));z-index:4}
.ecard__heart svg{width:22px;height:22px}
.ribbon{position:absolute;top:0;right:0;z-index:5;overflow:hidden;width:96px;height:96px}
.ribbon span{position:absolute;top:20px;right:-30px;transform:rotate(45deg);background:linear-gradient(90deg,#e83a8e,#c8156a);
  color:#fff;font-family:var(--display);font-weight:700;font-size:.62rem;letter-spacing:1.5px;padding:5px 34px;box-shadow:0 2px 6px rgba(0,0,0,.25)}

/* card art variants */
.ecard--verse{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:22px 18px;text-align:center}
.ecard--luke{background:
  radial-gradient(120% 60% at 50% 12%, rgba(230,200,110,.28), transparent 60%),
  linear-gradient(180deg,#20301c,#0e1a10 70%,#0a130c)}
.ecard--luke .verse-ref{font-family:var(--display);font-style:italic;color:var(--gold-soft);font-size:1.5rem}
.ecard--luke .verse-body{font-family:var(--serif);color:#efe7cf;font-size:.82rem;line-height:1.45}
.ecard--luke .glow{position:absolute;left:50%;top:34%;width:60px;height:60px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,214,120,.9),rgba(255,180,60,.15) 55%,transparent 70%)}

.ecard--light{background:
  radial-gradient(70% 46% at 50% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 62%),
  linear-gradient(180deg,#7db8e6 0%, #a9d3ef 44%, #d9ecf8 100%);
  color:var(--ink);justify-content:center;gap:2px}
.ecard--light .rays{position:absolute;inset:0;background:conic-gradient(from 200deg at 50% 34%,
  rgba(255,255,255,0) 0deg, rgba(255,255,255,.55) 12deg, rgba(255,255,255,0) 24deg,
  rgba(255,255,255,0) 40deg, rgba(255,255,255,.45) 52deg, rgba(255,255,255,0) 64deg,
  rgba(255,255,255,0) 300deg, rgba(255,255,255,.4) 315deg, rgba(255,255,255,0) 330deg);opacity:.7}
.ecard--light .kicker{font-family:var(--script);font-size:1.7rem;color:#2f74b8;position:relative}
.ecard--light .big{font-family:var(--display);font-weight:800;font-size:2.5rem;letter-spacing:3px;
  color:transparent;background:linear-gradient(180deg,#e6c877,#b98a2f);-webkit-background-clip:text;background-clip:text;line-height:.9;position:relative}
.ecard--light .shine{font-family:var(--script);font-size:2.3rem;color:#26508f;position:relative;margin-top:-4px}
.ecard--light .ref{font-family:var(--serif);font-size:.8rem;color:#3a4a86;margin-top:8px;position:relative}

/* portrait/photo cards */
.ecard--photo{background:linear-gradient(135deg,#fbe7ef,#f3e6f7 55%,#e9f0e0)}
.ecard--photo .frame{position:absolute;inset:0}
.ecard--photo .headline{position:absolute;top:16px;left:0;right:0;text-align:center;z-index:3}
.ecard--photo .headline .h-script{font-family:var(--script);color:var(--magenta-deep);font-size:1.9rem;line-height:.85;display:block}
.ecard--photo .headline .h-ref{font-family:var(--display);font-style:italic;color:var(--ink);font-size:.72rem;margin-top:4px}

.ecard--photo .ph{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}

.dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.dot{width:9px;height:9px;border-radius:50%;background:#cdbfa8;border:0;cursor:pointer;padding:0;transition:transform .2s}
.dot.is-active{background:var(--magenta);transform:scale(1.15)}

/* ---------- featured collections ---------- */
.section{padding:30px 0}
.section-title{text-align:center;display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:26px}
.section-title span{font-family:var(--display);font-weight:700;letter-spacing:6px;font-size:1.5rem;color:var(--magenta);text-transform:uppercase}
.section-title .st-heart{width:22px;height:20px;color:var(--magenta)}
.title-sprig{width:70px;height:70px;opacity:.9;flex-shrink:0}
.title-sprig.flip{transform:scaleX(-1)}

.collections{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.collection{
  background:linear-gradient(180deg,#fffdf9,#fff6ea);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:14px;padding:16px;position:relative;
  transition:transform .18s ease, box-shadow .18s ease;
}
.collection:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.collection__art{width:96px;height:96px;flex:0 0 96px;border-radius:14px;overflow:hidden}
.collection__art svg{width:100%;height:100%}
.collection__body h3{font-family:var(--display);font-size:1.28rem;color:var(--ink);line-height:1.05;margin-bottom:4px}
.collection__body p{font-size:1rem;color:var(--ink-soft);margin:0}
.collection__heart{position:absolute;right:14px;bottom:12px}
.collection__heart svg{width:18px;height:18px}

/* ---------- digital & printed strip ---------- */
.feature-strip{
  background:linear-gradient(180deg,#eaf4fb,#dfeef8);border-radius:var(--radius-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),var(--shadow-sm);
  display:grid;grid-template-columns:1.5fr 2fr;gap:18px;align-items:center;padding:26px 34px;margin:30px 0;
}
.fs-intro{display:flex;align-items:center;gap:20px}
.fs-devices{width:150px;flex:0 0 150px}
.fs-intro h2{font-family:var(--display);font-size:1.7rem;color:var(--ink);margin-bottom:6px}
.fs-intro p{font-size:1.02rem;color:var(--ink-soft);margin:0}
.fs-icons{display:grid;grid-template-columns:repeat(4,1fr)}
.fs-icon{text-align:center;padding:0 14px;border-left:1px solid #c4dcee}
.fs-icons .fs-icon:first-child{border-left:0}
.fs-icon svg{width:40px;height:40px;color:var(--blue);margin:0 auto 8px}
.fs-icon .lab{font-family:var(--display);font-size:1.05rem;color:var(--ink);line-height:1.15}

/* ---------- about + custom ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:10px 0 40px}
.card-panel{background:linear-gradient(180deg,#fffdf9,#fff5e9);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:26px 30px;position:relative;overflow:hidden}
.about{display:flex;align-items:center;gap:22px}
.about__photo{width:132px;height:132px;flex:0 0 132px;border-radius:50%;overflow:hidden;border:4px solid #fff;box-shadow:var(--shadow-md)}
.about__photo img{width:100%;height:100%;object-fit:cover}
.about h2{font-family:var(--display);font-size:1.9rem;color:var(--blue);margin-bottom:8px}
.about p{font-size:1.02rem;color:var(--ink-soft);margin-bottom:14px}

.custom h2{font-family:var(--display);font-size:2rem;color:var(--magenta);margin-bottom:10px;max-width:22rem}
.custom p{font-size:1.05rem;color:var(--ink-soft);max-width:24rem;margin-bottom:16px}
.custom .madewith{position:absolute;right:24px;bottom:20px;font-family:var(--script);font-size:1.9rem;color:var(--gold);
  line-height:.9;text-align:center;transform:rotate(-6deg)}
.floral--duo{position:absolute;width:150px;height:150px;pointer-events:none}
.about .floral--duo{right:-10px;bottom:-24px}
.custom .floral--duo{right:110px;bottom:-30px;opacity:.9}

/* ---------- footer ---------- */
.site-footer{background:linear-gradient(90deg,#d81f7a 0%, #b3288f 55%, #7b3fa0 100%);color:#fff;margin-top:20px}
.footer-inner{display:flex;align-items:center;justify-content:center;gap:26px;padding:20px 0;position:relative}
.footer-tag{font-family:var(--script);font-size:2rem;color:#fff;display:flex;align-items:center;gap:12px}
.footer-tag svg{width:24px;height:24px;color:var(--gold-soft)}
.socials{display:flex;gap:14px;position:absolute;right:28px}
.social{width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
  transition:transform .18s ease}
.social:hover{transform:translateY(-3px) scale(1.05)}
.social svg{width:20px;height:20px;color:var(--magenta)}

/* ---------- hover states (site-wide polish) ---------- */
.ecard{transition:transform .38s cubic-bezier(.22,1,.36,1),box-shadow .38s ease}
.ecard::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;z-index:5;
  box-shadow:inset 0 0 0 0 rgba(230,200,110,0);transition:box-shadow .38s ease}
.ecard img{transition:transform .5s ease}
.ecard__heart svg{transition:transform .3s ease,color .3s ease}
.ecard:hover{transform:translateY(-10px) scale(1.015);box-shadow:0 30px 60px rgba(60,40,20,.24)}
.ecard:hover img{transform:scale(1.06)}
.ecard:hover::after{box-shadow:inset 0 0 0 3px rgba(230,200,110,.8)}
.ecard:hover .ecard__heart{color:#ff5fa8;transform:scale(1.25)}

.dot{transition:transform .2s ease,background .2s ease}
.dot:hover{transform:scale(1.4);background:var(--magenta)}

.collection__art,.collection__body h3,.collection__heart,.collection{transition:transform .3s ease,box-shadow .3s ease,color .3s ease,border-color .3s ease}
.collection:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--gold-soft)}
.collection:hover .collection__art{transform:scale(1.07) rotate(-2deg)}
.collection:hover .collection__body h3{color:var(--magenta)}
.collection:hover .collection__heart{transform:scale(1.28)}

.fs-icon svg,.fs-icon .lab{transition:transform .28s ease,color .28s ease}
.fs-icon:hover svg{color:var(--magenta);transform:translateY(-4px) scale(1.1)}
.fs-icon:hover .lab{color:var(--magenta)}

.card-panel{transition:transform .3s ease,box-shadow .3s ease}
.card-panel:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.about__photo img,.about__photo svg{transition:transform .5s ease}
.card-panel:hover .about__photo img,.card-panel:hover .about__photo svg{transform:scale(1.06)}

.social{transition:transform .22s ease,background .22s ease,box-shadow .22s ease}
.social svg{transition:color .22s ease}
.social:hover{transform:translateY(-4px) scale(1.08);background:var(--gold-soft);box-shadow:0 8px 18px rgba(0,0,0,.18)}
.social:hover svg{color:var(--magenta-deep)}

/* footer legal / copyright */
.footer-legal{border-top:1px solid rgba(255,255,255,.22);margin-top:6px;padding:14px 0 20px;text-align:center}
.footer-legal .fl-copy{margin:0 0 4px;font-family:var(--display);font-size:.92rem;letter-spacing:.02em;color:#fff}
.footer-legal .fl-note{margin:0 auto;max-width:60rem;font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.82)}

/* gentle candle-flicker on the hero bouquet */
@keyframes floatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.floral--hero-left{animation:floatSlow 7s ease-in-out infinite}

/* ---------- background samples ---------- */
.ecard__tag{position:absolute;top:10px;left:10px;z-index:4;font-family:var(--display);font-size:.58rem;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;
  background:rgba(255,255,255,.88);color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.16)}
.bg-note{text-align:center;max-width:48rem;margin:0 auto 22px;color:var(--ink-soft);font-size:1.12rem;line-height:1.6}
.bg-note strong{color:var(--magenta)}
.bg-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:24px}
.bg-chip{font-family:var(--display);font-weight:600;font-size:.92rem;padding:.42em 1.05em;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.bg-chip:hover{border-color:var(--gold-soft);color:var(--ink);transform:translateY(-1px)}
.bg-chip.is-active{background:linear-gradient(135deg,#e83a8e,#c8156a);color:#fff;border-color:transparent;box-shadow:0 6px 14px rgba(200,21,106,.28)}
.bg-grid{column-width:220px;column-gap:16px}
.bg-tile{position:relative;display:inline-block;width:100%;margin:0 0 16px;border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-sm);break-inside:avoid;background:#f3ece0;transition:transform .3s ease,box-shadow .3s ease}
.bg-tile img{width:100%;height:auto;display:block;transition:transform .5s ease}
.bg-tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.bg-tile:hover img{transform:scale(1.05)}
.bg-tile__label{position:absolute;top:10px;left:10px;font-family:var(--display);font-size:.6rem;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.9);color:var(--ink)}
.bg-tile__pick{position:absolute;left:0;right:0;bottom:0;padding:14px 10px 10px;text-align:center;font-family:var(--display);
  font-weight:600;font-size:.92rem;color:#fff;background:linear-gradient(0deg,rgba(27,44,102,.9),rgba(27,44,102,0));
  transform:translateY(100%);transition:transform .3s ease}
.bg-tile:hover .bg-tile__pick{transform:translateY(0)}
.bg-cta{text-align:center;margin-top:28px}

/* ---------- responsive ---------- */
@media (max-width:1080px){

  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-copy{padding-left:64px;min-height:auto}
  .hero-halo{width:340px;height:340px;left:10px}
  .slides{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .slide{scroll-snap-align:center}
  .feature-strip{grid-template-columns:1fr;gap:24px}
  .duo{grid-template-columns:1fr}
}
@media (max-width:820px){
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:14px;
    background:#fff;padding:20px 28px;box-shadow:var(--shadow-md);z-index:60;margin:0}
  .nav.open .soon-tag{position:static;transform:none;display:inline-block;margin-left:10px;animation:none}
  .nav.open .soon-tag::before,.nav.open .soon-tag::after{display:none}
  .ht-main{font-size:3rem}
  .hero .script-line{font-size:2.6rem}
  .title-sprig{display:none}
  .collections{grid-template-columns:1fr 1fr}
  .footer-inner{flex-direction:column;gap:16px}
  .socials{position:static}
  .footer-tag{font-size:1.6rem;text-align:center}
  .fs-icons{grid-template-columns:1fr 1fr;gap:18px 0}
  .fs-icon:nth-child(3){border-left:0}
}
@media (max-width:520px){
  .brand__name{font-size:2rem}.brand__by{font-size:1.1rem}
  .ht-main{font-size:2.5rem}.hero .script-line{font-size:2.2rem}
  .hero-copy{padding-left:16px}
  .hero-eyebrow{letter-spacing:.2em;font-size:.74rem}
  .collections{grid-template-columns:1fr}
  .about{flex-direction:column;text-align:center}
  .wrap{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}