/* CherishQ – styles layered on Bootstrap 5 */
:root{
  --cocoa:#2b1410;--cocoa2:#3d1f18;--gold:#ffa400;--berry:#e8456b;--mint:#a9d3a4;
  --bg:#fff6e6;--bg2:#ffe9c4;--ink:#2b1410;--muted:#6f564d;--card:#fffaf1;
  --serif:"Fraunces",Georgia,serif;--sans:"Figtree",system-ui,sans-serif;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1d0e0b;--bg2:#2b1410;--ink:#fff0d8;--muted:#cdb3a6;--card:#341a14}}
:root[data-theme="dark"]{--bg:#1d0e0b;--bg2:#2b1410;--ink:#fff0d8;--muted:#cdb3a6;--card:#341a14}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--bg);color:var(--ink);font:400 1.05rem/1.65 var(--sans)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--cocoa);z-index:2000}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-variation-settings:"SOFT" 100;line-height:1.05;color:inherit}
h2{font-size:clamp(2rem,4.5vw,3.2rem);font-weight:700}
.py-6{padding-block:5.5rem}
.text-muted-cq{color:var(--muted)}
:focus-visible{outline:3px solid var(--berry)!important;outline-offset:3px}

/* buttons */
.btn{font-weight:700;border-radius:999px;border-width:2px;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 7px 0 rgba(0,0,0,.25)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--cocoa)}
.btn-gold:hover,.btn-gold:focus{background:var(--gold);border-color:var(--gold);color:var(--cocoa)}
.btn-cocoa{background:var(--cocoa);border-color:var(--cocoa);color:#fff6e6}
.btn-cocoa:hover{background:var(--cocoa);border-color:var(--cocoa);color:#fff6e6}
.btn-outline-cocoa{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline-cocoa:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
.chip{display:inline-block;background:var(--cocoa);color:#fff6e6;padding:.3rem .9rem;border-radius:999px;font-weight:600;font-size:.88rem}

/* nav + hanging logo tag */
.cq-nav{background:var(--cocoa);padding:.55rem 0;z-index:1030}
.cq-nav .nav-link{color:#fff6e6;font-weight:600}
.cq-nav .nav-link:hover{color:var(--gold)}
.navbar-toggler{border-color:rgba(255,246,230,.5)}
.navbar-toggler-icon{filter:invert(1)}
.cq-tag{position:relative;z-index:5;margin:0;transform:rotate(-3deg);transform-origin:top center;transition:transform .3s}
.cq-tag:hover{transform:rotate(2deg)}
.cq-tag::before{content:"";position:absolute;top:7px;left:50%;width:11px;height:11px;margin-left:-5px;border-radius:50%;background:var(--cocoa);z-index:2}
.cq-tag img{display:block;width:168px;height:auto;margin-bottom:-58px;background:#fff;border-radius:6px 6px 22px 22px;padding:20px 10px 8px;box-shadow:0 8px 0 rgba(0,0,0,.28)}

/* hero with sprinkles + taped polaroids */
.hero{position:relative;padding:5.5rem 0 4.5rem;overflow:hidden;
  background:
   radial-gradient(var(--berry) 3px,transparent 4px) 10px 20px/120px 120px,
   radial-gradient(var(--gold) 3px,transparent 4px) 70px 90px/170px 170px,
   radial-gradient(#7cc4a0 3px,transparent 4px) 130px 40px/210px 210px,var(--bg)}
.hero h1{font-size:clamp(3rem,8vw,6.2rem);font-weight:800;letter-spacing:-.02em}
.hero .lead{max-width:30rem;margin:1.2rem 0 1.8rem;color:var(--muted);font-size:1.15rem}
.stack{position:relative;height:460px;max-width:520px;margin-inline:auto}
.pola{position:absolute;margin:0;background:#fff;padding:10px 10px 0;border-radius:4px;box-shadow:0 12px 0 rgba(43,20,16,.15);width:210px}
.pola img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.pola figcaption{font:italic 600 1.05rem var(--serif);color:var(--cocoa);text-align:center;padding:.5rem 0 .6rem}
.pola::before{content:"";position:absolute;top:-12px;left:50%;width:78px;height:24px;margin-left:-39px;background:rgba(255,164,0,.7);transform:rotate(-4deg)}
.p1{left:0;top:30px;transform:rotate(-7deg)}
.p2{left:50%;margin-left:-105px;top:0;transform:rotate(3deg);z-index:2}
.p2::before{background:rgba(232,69,107,.7)}
.p3{right:0;top:120px;transform:rotate(8deg)}
.p3::before{background:rgba(124,196,160,.8)}
.about-pola{position:relative;display:inline-block;transform:rotate(-4deg);width:260px}

/* ticker */
.ticker{background:var(--gold);color:var(--cocoa);overflow:hidden;white-space:nowrap;font-weight:700;padding:.75rem 0}
.ticker div{display:inline-block;animation:slide 32s linear infinite}
.ticker span{margin:0 1.4rem}
@keyframes slide{to{transform:translateX(-50%)}}

/* bakes: cookie-cutter cards */
.bake{height:100%;padding:2rem 1.7rem;position:relative;outline:2px dashed currentColor;outline-offset:-12px;opacity:.98}
.bake .em{font-size:2.4rem;display:block}
.bake h3{font-size:1.6rem;margin:.8rem 0 .5rem}
.bake p{margin:0}
.b1{background:var(--gold);color:var(--cocoa);border-radius:130px 130px 26px 26px;padding-top:3.2rem}
.b2{background:var(--berry);color:#fff;border-radius:26px 130px 26px 26px;padding-top:3.2rem}
.b3{background:var(--cocoa);color:#fff6e6;border-radius:26px}
.b4{background:var(--mint);color:var(--cocoa);border-radius:26px 26px 26px 130px}

/* gallery */
.gallery{background:var(--bg2)}
.thumb{all:unset;display:block;width:100%;aspect-ratio:4/5;cursor:zoom-in;border:5px solid var(--card);border-radius:999px 999px 20px 20px;overflow:hidden;box-shadow:0 10px 0 rgba(43,20,16,.12);transition:transform .3s;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.thumb:hover{transform:rotate(-2deg) scale(1.03)}
.thumb:hover img{transform:scale(1.08)}
.thumb:focus-visible{outline:4px solid var(--berry)}
#grid>.col:nth-child(even){margin-top:1.6rem}
@media (max-width:767px){#grid>.col:nth-child(even){margin-top:0}}

/* order */
.order{background:var(--cocoa);color:#fff6e6}
.lead-sm{color:#e6cdb8;font-size:1.15rem}
.steps{list-style:none;padding:0}
.steps li{display:flex;gap:1rem;align-items:center}
.steps i{flex:none;width:48px;height:48px;border-radius:50%;background:var(--gold);color:var(--cocoa);display:grid;place-items:center;font:700 1.3rem var(--serif);font-style:normal}
.builder{background:var(--card);color:var(--ink);border-radius:28px 28px 120px 28px;padding:2rem 2rem 3rem}
.builder h3{font-size:1.7rem;margin-bottom:1.2rem}
fieldset{border:0;margin:0 0 1.2rem;padding:0}
legend{font:600 1rem var(--sans);float:none;width:auto;margin-bottom:.5rem}
.opt{display:inline-block;margin:0 .35rem .5rem 0;padding:.45rem 1.1rem;border:2px solid var(--cocoa);border-radius:999px;font-weight:600;cursor:pointer;transition:transform .15s,background .15s}
:root[data-theme="dark"] .opt{border-color:var(--gold)}
.opt:hover{transform:translateY(-2px)}
.btn-check:checked+.opt{background:var(--berry);border-color:var(--berry);color:#fff;transform:rotate(-2deg)}
.btn-check:focus-visible+.opt{outline:3px solid var(--gold);outline-offset:2px}
.form-control{border-radius:14px;border:2px solid var(--cocoa);background:var(--bg);color:var(--ink)}
.slip{position:sticky;top:110px;background:#fffdf7;color:var(--cocoa);padding:1.8rem 1.6rem 2.2rem;transform:rotate(1.5deg);box-shadow:0 12px 0 rgba(0,0,0,.3);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/20px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/20px 100%}
.slip h3{font-size:1.5rem;border-bottom:2px dashed var(--cocoa);padding-bottom:.7rem;margin-bottom:1rem}
.slip dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin-bottom:1.3rem}
.slip dt{font-weight:600;color:#6f564d}
.slip dd{margin:0;text-align:right;font-family:var(--serif);font-weight:700}
.slip .small{color:#6f564d}

/* contact + footer */
.contact{background:var(--gold);color:var(--cocoa)}
.contact .num{display:block;font:800 clamp(2.4rem,7vw,5rem)/1.1 var(--serif);margin:.6rem 0 1rem}
.cq-foot{background:var(--cocoa);color:#d8bfae;font-size:.9rem;padding:1.4rem 0}

/* lightbox */
.modal-backdrop.show{opacity:.92;background:#190a07}
#lightbox .modal-content{background:transparent;border:0;align-items:center}
#lightbox .modal-dialog{max-width:560px}
#lbCar{width:100%}
#lbCar .frame{width:min(78vw,400px,calc((100vh - 190px)*.8));aspect-ratio:4/5;margin:0 auto;border:5px solid var(--gold);border-radius:999px 999px 26px 26px;overflow:hidden;background:var(--cocoa2);box-shadow:0 14px 0 rgba(0,0,0,.3)}
#lbCar img{width:100%;height:100%;object-fit:cover}
#lbCar .cap{text-align:center;color:#fff6e6;font:600 1.2rem var(--serif);margin-top:1.3rem}
#lbCar .cap small{display:block;color:var(--gold);font:600 .9rem var(--sans)}
.carousel-control-prev,.carousel-control-next{width:auto;opacity:1;top:42%;bottom:auto}
.arrow,.x{width:50px;height:50px;border-radius:50%;background:var(--gold);color:var(--cocoa);display:grid;place-items:center;font:700 1.7rem var(--sans);transition:transform .2s}
.carousel-control-prev:hover .arrow,.carousel-control-next:hover .arrow,.x:hover{transform:scale(1.1)}
.x{position:fixed;top:calc(1rem + env(safe-area-inset-top,0px));right:1rem;border:0;background:var(--berry);color:#fff;width:44px;height:44px;font-size:1.1rem;z-index:5}
@media (max-width:991px){
  .py-6{padding-block:4rem}
  .stack{height:400px}.pola{width:170px}.p3{top:100px}
  .cq-tag img{width:128px;margin-bottom:-44px}
  .hero{padding-top:4.5rem}
  .slip{position:static;transform:none}
  .carousel-control-prev{left:-.3rem}.carousel-control-next{right:-.3rem}
}
@media (prefers-reduced-motion:reduce){.ticker div{animation:none}html{scroll-behavior:auto}*{transition:none!important}}