/* ============================================================
   Woodshop Joy — handcrafted carts, built with joy
   Warm artisan-maker brand. Cream paper, walnut wood,
   quiet sage, a small clay heart for joy.
   ============================================================ */

:root {
  --paper:      #F7F2E9;
  --paper-2:    #F1E9D9;
  --kraft:      #E8DBC5;
  --cream-card: #FFFDF8;
  --ink:        #2A2420;
  --ink-soft:   #6A6055;
  --wood:       #A9743F;
  --wood-deep:  #87592E;
  --sage:       #7E8A6C;
  --sage-deep:  #5F6B4E;
  --clay:       #C2674C;
  --line:       #DCCFB8;
  --line-soft:  #EBE2CF;
  --shadow-sm:  0 2px 10px rgba(64,46,20,.06);
  --shadow-md:  0 14px 34px -16px rgba(64,46,20,.28);
  --shadow-lg:  0 40px 80px -40px rgba(64,46,20,.45);
  --r:          18px;
  --r-sm:       12px;
  --maxw:       1180px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body {
  font-family:"Caveat",system-ui,cursive;
  color:var(--ink);
  background:var(--paper);
  line-height:1.45;
  font-size:20px;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* subtle paper grain */
  background-image:
    radial-gradient(1200px 700px at 80% -10%, rgba(169,116,63,.06), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(126,138,108,.07), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }

/* ---------- type ---------- */
h1,h2,h3,h4 { font-family:"Caveat",cursive; font-weight:540; line-height:1.08; letter-spacing:-.01em; }
.display { font-size:clamp(2.4rem,5.7vw,4.4rem); font-weight:560; }
h2 { font-size:clamp(1.8rem,4vw,2.75rem); }
h3 { font-size:1.3rem; }
.script { font-family:"Caveat",cursive; }

.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--wood); margin-bottom:1.1rem;
}
.eyebrow svg { width:16px; height:16px; }

.lead { font-size:1.16rem; color:var(--ink-soft); }

/* ---------- layout ---------- */
.wrap { width:min(var(--maxw),92vw); margin-inline:auto; }
section { padding:clamp(4.5rem,9vw,8rem) 0; position:relative; }
.center { text-align:center; }
.center .eyebrow { justify-content:center; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.95rem 1.6rem; border-radius:999px;
  font-weight:600; font-size:.97rem; letter-spacing:.01em;
  border:1.5px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s;
  will-change:transform;
}
.btn svg { width:18px; height:18px; }
.btn-primary { background:var(--wood); color:#FFF8EE; box-shadow:var(--shadow-md); }
.btn-primary:hover { background:var(--wood-deep); transform:translateY(-2px); box-shadow:0 20px 40px -16px rgba(131,89,46,.55); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--wood); color:var(--wood); transform:translateY(-2px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem clamp(1.1rem,4vw,2.4rem);
  transition:background .4s var(--ease), box-shadow .4s, padding .4s;
}
.nav.scrolled {
  background:rgba(247,242,233,.82); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--line-soft), 0 10px 30px -24px rgba(64,46,20,.5);
  padding-block:.7rem;
}
.brand { display:flex; align-items:center; gap:.6rem; }
.brand .heart { width:34px; height:34px; color:var(--clay); flex:none; transition:transform .4s var(--ease); }
.brand:hover .heart { transform:rotate(-8deg) scale(1.08); }
.brand .word { font-family:"Caveat",cursive; font-size:1.85rem; line-height:.9; color:var(--ink); font-weight:700; }
.brand .word small { display:block; font-family:"Caveat",cursive; font-size:.52rem; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; margin-top:.4rem; padding-left:.15rem; }

.nav-links { display:flex; align-items:center; gap:.4rem; }
.nav-links a { padding:.5rem .85rem; border-radius:999px; font-size:.92rem; font-weight:500; color:var(--ink-soft); transition:color .2s, background .2s; }
.nav-links a:hover { color:var(--ink); background:rgba(169,116,63,.1); }
.nav-links .btn { margin-left:.5rem; padding:.6rem 1.2rem; }

.nav-toggle { display:none; width:44px; height:44px; border:1.5px solid var(--line); border-radius:12px; background:var(--cream-card); align-items:center; justify-content:center; }
.nav-toggle span { display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:.3s var(--ease); }
.nav-toggle span::before,.nav-toggle span::after { content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); transition:.3s var(--ease); }
.nav-toggle span::before { top:-6px; } .nav-toggle span::after { top:6px; }
body.menu-open .nav-toggle span { background:transparent; }
body.menu-open .nav-toggle span::before { top:0; transform:rotate(45deg); }
body.menu-open .nav-toggle span::after { top:0; transform:rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top:clamp(7rem,14vw,10rem); padding-bottom:clamp(3rem,6vw,5rem); overflow:visible; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero-copy { max-width:33ch; }
.hero h1 .ink { color:var(--ink); }
.hero h1 .joy { color:var(--wood); font-style:italic; position:relative; white-space:nowrap; }
.hero h1 .joy::after {
  content:""; position:absolute; left:0; right:0; bottom:.04em; height:.36em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'%3E%3Cpath d='M2 9 C50 2 150 2 198 7' stroke='%23C2674C' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  opacity:.85;
}
.hero .lead { margin-top:1.4rem; }
.hero-cta { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.hero-meta { display:flex; gap:1.6rem; margin-top:2.4rem; flex-wrap:wrap; }
.hero-meta .stat strong { font-family:"Caveat",cursive; font-size:1.7rem; display:block; line-height:1; color:var(--ink); }
.hero-meta .stat span { font-size:.82rem; color:var(--ink-soft); letter-spacing:.02em; }
.hero-meta .stat { border-left:2px solid var(--line); padding-left:.9rem; }

.hero-art { position:relative; }
.hero-art .frame {
  position:relative; border-radius:24px; overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.6);
  transform:rotate(1.4deg);
}
.hero-art .frame img { width:100%; height:auto; aspect-ratio:4/3.05; object-fit:cover; transform:scale(1.02); }
.hero-art .frame::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(42,36,32,.08); border-radius:24px; }
.hero-badge {
  position:absolute; z-index:3; background:var(--cream-card);
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-md);
  padding:.7rem .95rem; display:flex; align-items:center; gap:.6rem;
}
.hero-badge .heart { width:26px; height:26px; color:var(--clay); flex:none; }
.hero-badge b { font-size:.86rem; }
.hero-badge span { display:block; font-size:.72rem; color:var(--ink-soft); }
.hero-badge.b1 { left:-22px; bottom:34px; transform:rotate(-3deg); }
.hero-badge.b2 { right:-14px; top:30px; transform:rotate(3deg); }

/* marquee of cart types */
.ticker { margin-top:clamp(2.6rem,5.5vw,4rem); border-block:1px solid var(--line-soft); padding-block:1.05rem; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.ticker-track { display:flex; gap:3rem; width:max-content; animation:scrollx 34s linear infinite; }
.ticker:hover .ticker-track { animation-play-state:paused; }
.ticker-track span { font-family:"Caveat",cursive; font-size:1.25rem; color:var(--ink-soft); display:inline-flex; align-items:center; gap:1rem; font-style:italic; }
.ticker-track span::after { content:"✦"; color:var(--wood); font-style:normal; font-size:.7rem; }
@keyframes scrollx { to { transform:translateX(-50%); } }

/* ============================================================
   STORY / ABOUT
   ============================================================ */
.story { background:linear-gradient(180deg,transparent, rgba(232,219,197,.4) 30%, rgba(232,219,197,.4) 70%, transparent); }
.story-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2.2rem,5vw,4.5rem); align-items:center; }
.portrait {
  position:relative; aspect-ratio:4/5; border-radius:200px 200px 22px 22px;
  overflow:hidden; background:var(--paper-2); box-shadow:var(--shadow-md);
  border:1px solid var(--line);
  display:flex; align-items:flex-end; justify-content:center; text-align:center;
}
.portrait img { width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block; }
.portrait .ph { padding:2rem 1.5rem; color:var(--ink-soft); }
.portrait .ph .heart { width:46px; height:46px; color:var(--clay); margin:0 auto 1rem; }
.portrait .ph small { font-size:.78rem; letter-spacing:.02em; }
.portrait .tag { position:absolute; bottom:1rem; left:1rem; z-index:2; background:var(--cream-card); border:1px solid var(--line); border-radius:999px; padding:.4rem .9rem; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--sage-deep); box-shadow:var(--shadow-sm); }
.story-copy p + p { margin-top:1.05rem; }
.story-copy .lead { color:var(--ink); }
.pullquote { font-family:"Caveat",cursive; font-style:italic; font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.35; color:var(--wood-deep); margin:1.6rem 0; padding-left:1.2rem; border-left:3px solid var(--clay); }
.sign { font-family:"Caveat",cursive; font-size:2.1rem; color:var(--ink); margin-top:1.2rem; line-height:.9; }
.sign small { display:block; font-family:"Caveat",cursive; font-size:.78rem; letter-spacing:.04em; color:var(--ink-soft); margin-top:.2rem; }

/* ============================================================
   WHAT I MAKE
   ============================================================ */
.makes-head { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom:3rem; }
.makes-head p { max-width:46ch; color:var(--ink-soft); }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.card {
  background:var(--cream-card); border:1px solid var(--line); border-radius:var(--r);
  padding:1.7rem 1.6rem 1.8rem; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
  position:relative; overflow:hidden;
}
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--wood); }
.card .ic { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:var(--paper-2); color:var(--wood); margin-bottom:1.1rem; }
.card .ic svg { width:26px; height:26px; }
.card h3 { margin-bottom:.45rem; }
.card p { font-size:.95rem; color:var(--ink-soft); }
.card.feature { grid-column:span 1; background:linear-gradient(160deg,var(--sage-deep),#4c5740); color:#F3F1E6; border-color:transparent; }
.card.feature .ic { background:rgba(255,255,255,.14); color:#F3F1E6; }
.card.feature p { color:rgba(243,241,230,.82); }

/* options strip */
.options { margin-top:1.2rem; background:var(--ink); color:#EFE7D8; border-radius:var(--r); padding:clamp(1.6rem,3vw,2.4rem); }
.options h3 { color:#FFF8EE; font-size:1.15rem; margin-bottom:1.3rem; display:flex; align-items:center; gap:.6rem; }
.options h3 .heart { width:22px; height:22px; color:var(--clay); }
.opt-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; }
.chip { display:flex; align-items:center; gap:.6rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:.7rem .85rem; font-size:.9rem; }
.chip svg { width:18px; height:18px; color:var(--wood); flex:none; }

/* ============================================================
   PORTFOLIO
   ============================================================ */
.filters { display:flex; flex-direction:column; gap:.7rem; align-items:center; margin:2rem 0 2.4rem; }
.filter-row { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; align-items:center; }
.filter-row-feat { width:100%; padding-top:.85rem; margin-top:.15rem; border-top:1px dashed var(--line); }
.filter-label { width:100%; text-align:center; font-family:"Inter",sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.15rem; }
.filter-row-feat .filter.active { background:var(--logo-pink-deep); border-color:var(--logo-pink-deep); color:#fff; }
.filter { padding:.55rem 1.1rem; border-radius:999px; border:1.5px solid var(--line); background:var(--cream-card); font-size:.9rem; font-weight:500; color:var(--ink-soft); transition:.25s var(--ease); }
.filter:hover { border-color:var(--wood); color:var(--wood); }
.filter.active { background:var(--ink); border-color:var(--ink); color:#FFF8EE; }
.gallery { columns:3; column-gap:1.1rem; }
.shot {
  break-inside:avoid; margin-bottom:1.1rem; border-radius:var(--r-sm); overflow:hidden;
  position:relative; cursor:zoom-in; background:var(--paper-2);
  box-shadow:var(--shadow-sm); border:1px solid var(--line-soft);
  transition:transform .35s var(--ease), box-shadow .35s, opacity .4s, filter .4s;
}
.shot img { width:100%; transition:transform .6s var(--ease); }
.shot:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.shot:hover img { transform:scale(1.05); }
.shot .cap { position:absolute; inset:auto 0 0 0; padding:1.4rem .9rem .8rem; background:linear-gradient(transparent, rgba(34,28,24,.78)); color:#FBF6EC; opacity:0; transition:opacity .3s; font-size:.84rem; font-weight:500; display:flex; align-items:center; gap:.4rem; }
.shot:hover .cap { opacity:1; }
.shot.hide { display:none; }

/* lightbox */
.lb { position:fixed; inset:0; z-index:120; background:rgba(28,22,18,.92); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:4vw; opacity:0; pointer-events:none; transition:opacity .35s; }
.lb.open { opacity:1; pointer-events:auto; }
.lb img { max-width:92vw; max-height:86vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lb-close,.lb-nav { position:absolute; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; transition:.2s; }
.lb-close:hover,.lb-nav:hover { background:rgba(255,255,255,.25); }
.lb-close { top:4vw; right:4vw; }
.lb-nav.prev { left:3vw; } .lb-nav.next { right:3vw; }
.lb-nav svg,.lb-close svg { width:22px; height:22px; }
@media (max-width:640px){ .lb-nav{ top:auto; bottom:4vw; } .lb-nav.prev{ left:28vw; } .lb-nav.next{ right:28vw; } }

/* ============================================================
   PROCESS
   ============================================================ */
.process { background:var(--ink); color:#EDE4D4; }
.process .eyebrow { color:#D9A57E; }
.process h2 { color:#FFF8EE; }
.process .lead { color:rgba(237,228,212,.75); }
.steps { display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem; margin-top:3.2rem; counter-reset:step; }
.step { position:relative; padding-top:2.4rem; }
.step::before { counter-increment:step; content:"0" counter(step); font-family:"Caveat",cursive; font-size:2.6rem; color:var(--wood); position:absolute; top:-.6rem; left:0; opacity:.55; }
.step::after { content:""; position:absolute; top:.7rem; left:3.3rem; right:-.65rem; height:1px; background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 5px,transparent 5px 11px); }
.step:last-child::after { display:none; }
.step h3 { color:#FFF8EE; font-size:1.15rem; margin-bottom:.5rem; }
.step p { font-size:.92rem; color:rgba(237,228,212,.72); }
.process-note { margin-top:3rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:1.2rem 1.6rem; }
.process-note .heart { width:26px; height:26px; color:var(--clay); flex:none; }
.process-note p { font-size:.95rem; color:rgba(237,228,212,.85); margin:0; }

/* process "good to know" cards */
.pcards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:3.4rem; }
.pcard { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:1.6rem 1.5rem; transition:transform .3s var(--ease), background .3s, border-color .3s; }
.pcard:hover { transform:translateY(-4px); background:rgba(255,255,255,.08); border-color:rgba(217,165,126,.4); }
.pcard .ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.08); color:#D9A57E; margin-bottom:1.05rem; }
.pcard .ic svg { width:24px; height:24px; }
.pcard h3 { color:#FFF8EE; font-size:1.1rem; margin-bottom:.5rem; }
.pcard p { font-size:.92rem; color:rgba(237,228,212,.74); }
.process-cta { margin-top:2.6rem; text-align:center; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
/* even, breathable vertical rhythm + centred header */
.contact-copy { display:flex; flex-direction:column; gap:clamp(1.5rem,3.4vw,2.1rem); }
.contact-copy > * { margin:0; }
.contact-copy .eyebrow { align-self:center; }
.contact-copy h2, .contact-copy .lead { text-align:center; }
.contact-copy .lead { color:var(--ink-soft); max-width:46ch; margin-inline:auto; }
.contact-list { display:grid; gap:1.1rem; }
.contact-list a,.contact-list div { display:flex; align-items:center; gap:.9rem; font-size:.97rem; color:var(--ink); transition:color .2s; }
.contact-list a:hover { color:var(--wood); }
.contact-list .ic { width:42px; height:42px; border-radius:12px; background:var(--paper-2); display:grid; place-items:center; color:var(--wood); flex:none; }
.contact-list .ic svg { width:20px; height:20px; }
.assurances { margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.assurances .tag { font-size:.8rem; background:var(--cream-card); border:1px solid var(--line); border-radius:999px; padding:.4rem .85rem; color:var(--ink-soft); display:inline-flex; gap:.4rem; align-items:center; }
.assurances .tag svg { width:14px; height:14px; color:var(--sage-deep); }

.form { background:var(--cream-card); border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow-md); }
.form .row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field { margin-bottom:1.1rem; }
.field label { display:block; font-size:.82rem; font-weight:600; margin-bottom:.4rem; color:var(--ink); letter-spacing:.01em; }
.field label .req { color:var(--clay); }
.field input,.field select,.field textarea {
  width:100%; padding:.8rem .95rem; border:1.5px solid var(--line); border-radius:12px;
  background:var(--paper); font:inherit; font-size:.95rem; color:var(--ink); transition:border .2s, box-shadow .2s, background .2s;
}
.field textarea { resize:vertical; min-height:120px; }
.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:var(--wood); background:var(--cream-card); box-shadow:0 0 0 4px rgba(169,116,63,.12); }
.form .btn-primary { width:100%; justify-content:center; margin-top:.4rem; }
.form-note { font-size:.8rem; color:var(--ink-soft); text-align:center; margin-top:.9rem; }
.form-success { display:none; text-align:center; padding:1rem 0; }
.form-success.show { display:block; }
.form-success .heart { width:54px; height:54px; color:var(--clay); margin:0 auto 1rem; }
.form-success h3 { margin-bottom:.5rem; }
.form-success p { color:var(--ink-soft); font-size:.95rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--paper-2); border-top:1px solid var(--line); padding:clamp(3rem,6vw,4.5rem) 0 2rem; }
.footer-grid { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-start; }
.footer .brand .word { color:var(--ink); }
.footer-tag { max-width:30ch; color:var(--ink-soft); font-size:.95rem; margin-top:1rem; }
.socials { display:flex; gap:.6rem; margin-top:1.3rem; }
.socials a { width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--cream-card); display:grid; place-items:center; color:var(--ink); transition:.25s var(--ease); }
.socials a:hover { color:#FFF8EE; background:var(--wood); border-color:var(--wood); transform:translateY(-3px); }
.socials svg { width:20px; height:20px; }
.foot-col h4 { font-family:"Caveat",cursive; font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-soft); margin-bottom:1rem; font-weight:700; }
.foot-col a { display:block; font-size:.95rem; color:var(--ink-soft); padding:.28rem 0; transition:color .2s; }
.foot-col a:hover { color:var(--wood); }
.foot-bottom { margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.84rem; color:var(--ink-soft); }
.foot-bottom .heart { width:15px; height:15px; color:var(--clay); display:inline; vertical-align:-2px; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
/* Reveal is progressive enhancement only: content is visible by default and
   is hidden-then-animated ONLY when JS has added `.js-anim` to <html>.
   If JS fails to load, content stays visible. */
.js-anim .reveal { opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .js-anim .reveal{ opacity:1; transform:none; } *{ scroll-behavior:auto; } .ticker-track{ animation:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero-grid,.story-grid,.contact-grid { grid-template-columns:1fr; }
  .hero-copy { max-width:none; }
  .hero-art { max-width:560px; margin-inline:auto; }
  .story-grid .portrait { max-width:380px; margin-inline:auto; }
  .cards { grid-template-columns:repeat(2,1fr); }
  .opt-grid { grid-template-columns:repeat(2,1fr); }
  .steps { grid-template-columns:repeat(2,1fr); gap:2rem 1.3rem; }
  .step::after { display:none; }
  .gallery { columns:2; }
}
@media (max-width:680px){
  body { font-size:16px; }
  .nav-links { position:fixed; inset:0 0 auto 0; top:0; flex-direction:column; align-items:stretch; gap:.2rem;
    background:var(--paper); padding:5.5rem 1.4rem 1.8rem; box-shadow:var(--shadow-lg);
    transform:translateY(-110%); transition:transform .45s var(--ease); border-bottom:1px solid var(--line); }
  body.menu-open .nav-links { transform:none; }
  .nav-links a { padding:.85rem 1rem; font-size:1.05rem; border-bottom:1px solid var(--line-soft); border-radius:0; }
  .nav-links .btn { margin:.6rem 0 0; justify-content:center; }
  .nav-toggle { display:flex; }
  .cards { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .pcards { grid-template-columns:1fr; }
  .form .row { grid-template-columns:1fr; }
  .gallery { columns:1; }
  .hero-badge.b1 { left:-8px; } .hero-badge.b2 { right:-4px; }
  .footer-grid { flex-direction:column; }
}

/* ============================================================
   v2 ADDITIONS — SEO hero, enriched gallery, wins, FAQ, pricing
   ============================================================ */

/* hero title lines + location keyword line */
.hero-title .t-line { display:block; }
.hero-title .t-loc {
  display:block; margin-top:1rem;
  font-family:"Caveat",cursive; font-weight:600;
  font-size:clamp(.92rem,1.5vw,1.12rem); letter-spacing:.02em;
  color:var(--ink-soft);
}
.hero-title .tilde { color:var(--wood); font-family:"Caveat",cursive; padding:0 .15em; }

/* gallery: persistent caption (proof, not just pretty) */
.shot { cursor:default; }
.shot-media { display:block; cursor:zoom-in; overflow:hidden; line-height:0; }
.shot-media img { width:100%; height:auto; display:block; transition:transform .6s var(--ease); }
.shot:hover .shot-media img { transform:scale(1.05); }
.shot-meta { display:block; padding:.85rem .95rem 1rem; }
.shot-type { display:block; font-family:"Caveat",cursive; font-weight:560; font-size:.98rem; color:var(--ink); line-height:1.2; }
.shot-desc { display:block; font-size:.82rem; color:var(--ink-soft); margin-top:.3rem; line-height:1.5; }

/* lightbox caption */
.lb-fig { margin:0; display:flex; flex-direction:column; align-items:center; gap:1rem; max-width:92vw; }
.lb-fig img { max-width:92vw; max-height:78vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
#lbCap { text-align:center; max-width:58ch; }
#lbCap strong { display:block; font-family:"Caveat",cursive; font-weight:560; font-size:1.05rem; color:#FBF6EC; margin-bottom:.25rem; }
#lbCap span { font-size:.88rem; color:rgba(243,236,223,.72); }

/* ===== client wins ===== */
.wins-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:3rem; }
.win { background:var(--cream-card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s; }
.win:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.win-photo { aspect-ratio:1/1; background:var(--paper-2); border-bottom:1px solid var(--line); overflow:hidden; }
.win-photo img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .5s var(--ease); }
.win:hover .win-photo img { transform:scale(1.04); }
.win-body { padding:1.25rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1; }
.win-quote { font-family:"Caveat",cursive; font-style:italic; font-size:1.08rem; line-height:1.3; color:var(--wood-deep); margin-bottom:.55rem; }
.win-body > p { font-size:.88rem; color:var(--ink-soft); }
.win-name { display:block; margin-top:auto; padding-top:1rem; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--sage-deep); font-weight:600; }
.wins-foot { text-align:center; margin-top:2.4rem; color:var(--ink-soft); font-size:.98rem; }
.wins-foot a { color:var(--wood); font-weight:600; white-space:nowrap; }
.wins-foot a:hover { color:var(--wood-deep); }

/* ===== FAQ accordion ===== */
.faq { max-width:760px; margin:2.6rem auto 0; display:grid; gap:.8rem; }
.faq-item { background:var(--cream-card); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; transition:border-color .25s, box-shadow .25s; }
.faq-item[open] { border-color:var(--wood); box-shadow:var(--shadow-sm); }
.faq-item summary { list-style:none; cursor:pointer; padding:1.1rem 1.3rem; font-weight:600; font-size:1.02rem; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:hover { color:var(--wood); }
.faq-ico { position:relative; width:18px; height:18px; flex:none; }
.faq-ico::before, .faq-ico::after { content:""; position:absolute; background:var(--wood); border-radius:2px; transition:transform .3s var(--ease); }
.faq-ico::before { top:8px; left:0; width:18px; height:2px; }
.faq-ico::after { top:0; left:8px; width:2px; height:18px; }
.faq-item[open] .faq-ico::after { transform:scaleY(0); }
.faq-a { padding:0 1.3rem 1.2rem; }
.faq-a p { font-size:.95rem; color:var(--ink-soft); }

/* ===== pricing qualifier ===== */
.price-note { display:flex; gap:.85rem; align-items:flex-start; margin-top:0; background:var(--paper-2); border:1px solid var(--line); border-left:3px solid var(--wood); border-radius:12px; padding:1rem 1.1rem; }
.price-note > svg { width:24px; height:24px; color:var(--wood); flex:none; margin-top:.1rem; }
.price-note p { font-size:.88rem; color:var(--ink-soft); margin:0; line-height:1.55; }
.price-note strong { color:var(--ink); }

/* ===== form error ===== */
.form-error { display:none; margin-top:.9rem; font-size:.86rem; color:#9A3412; background:#FBEEE7; border:1px solid #E6C3B2; border-radius:10px; padding:.7rem .9rem; text-align:center; }
.form-error.show { display:block; }
.form-error a { color:var(--wood-deep); font-weight:600; text-decoration:underline; }

/* ===== v2 responsive ===== */
@media (max-width:980px) {
  .wins-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px) {
  .wins-grid { grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
}
@media (max-width:680px) {
  .hero-title .t-loc { font-size:1rem; }
  .faq-item summary { font-size:.98rem; }
}

/* honeypot (hidden from humans) */
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* ============================================================
   Client Journey (how-it-works, infused into Client Wins, lively)
   ============================================================ */
.journey { margin-top:4.5rem; padding-top:3.6rem; border-top:1px dashed var(--line); }
.journey-head { margin-bottom:1rem; }

.journey-steps {
  list-style:none; padding:0; margin:3.2rem 0 0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.1rem; position:relative;
}
/* dotted "path" connecting the steps, behind the cards */
.journey-steps::before {
  content:""; position:absolute; top:1px; left:9%; right:9%; height:2px; z-index:0;
  background:repeating-linear-gradient(90deg, var(--wood) 0 6px, transparent 6px 14px);
  opacity:.5;
}
.jstep {
  position:relative; z-index:1; background:var(--cream-card); border:1px solid var(--line);
  border-radius:var(--r); padding:2.8rem 1.25rem 1.5rem; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.jstep:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--wood); }
.jnum {
  position:absolute; top:-22px; left:1.25rem; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; font-family:"Caveat",cursive; font-weight:600;
  font-size:1.25rem; color:#FFF8EE; background:var(--wood);
  box-shadow:0 10px 22px -8px rgba(131,89,46,.6);
}
.jstep:nth-child(2) .jnum { background:var(--clay); box-shadow:0 10px 22px -8px rgba(194,103,76,.55); }
.jstep:nth-child(3) .jnum { background:var(--sage-deep); box-shadow:0 10px 22px -8px rgba(95,107,78,.5); }
.jstep:nth-child(5) .jnum { background:var(--clay); box-shadow:0 10px 22px -8px rgba(194,103,76,.55); }
.jstep h3 { font-size:1.1rem; margin-bottom:.45rem; }
.jstep p { font-size:.9rem; color:var(--ink-soft); }

.journey-note {
  margin-top:2.8rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:center;
  background:var(--paper-2); border:1px solid var(--line); border-left:3px solid var(--clay);
  border-radius:var(--r); padding:1.1rem 1.5rem;
}
.journey-note .heart { width:26px; height:26px; color:var(--clay); flex:none; }
.journey-note p { font-size:.95rem; color:var(--ink-soft); margin:0; }
.journey-note strong { color:var(--ink); }
.journey-cta { margin-top:2.2rem; text-align:center; }

@media (max-width:980px) {
  .journey-steps { grid-template-columns:repeat(2,1fr); gap:2.4rem 1.1rem; }
  .journey-steps::before { display:none; }
}
@media (max-width:560px) {
  .journey-steps { grid-template-columns:1fr; }
}

/* inline heart after "built with joy" in titles */
.title-heart { width:.72em; height:.72em; color:var(--clay); display:inline-block; vertical-align:-0.04em; margin-left:.22em; }

/* ============================================================
   Hero redesign — centered single column + rotating carousel
   ============================================================ */
.hero-inner { display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero-inner .hero-copy { max-width:820px; text-align:center; }
.hero-inner .eyebrow { justify-content:center; }
.hero-inner .lead { margin-left:auto; margin-right:auto; max-width:56ch; }
.hero-inner .hero-cta { justify-content:center; }
.hero-inner .hero-meta { justify-content:center; }

.hero-carousel { position:relative; width:100%; max-width:560px; margin:clamp(2.6rem,5vw,3.6rem) auto 0; }
.hc-frame { position:relative; aspect-ratio:4/3.2; border-radius:24px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.6); transform:rotate(1.2deg); }
.hc-frame::after { content:""; position:absolute; inset:0; border-radius:24px; box-shadow:inset 0 0 0 1px rgba(42,36,32,.08); pointer-events:none; }
.hc-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s var(--ease); }
.hc-slide.is-active { opacity:1; }

.hc-badge { position:absolute; z-index:3; background:var(--cream-card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-md); padding:.7rem .95rem; display:flex; align-items:center; gap:.6rem; text-align:left; }
.hc-badge b { font-size:.86rem; display:block; line-height:1.15; }
.hc-badge span { display:block; font-size:.72rem; color:var(--ink-soft); }
.hc-badge .heart { width:26px; height:26px; color:var(--clay); flex:none; }
.hc-b1 { top:16px; right:-14px; animation:hcFloatA 4s ease-in-out infinite; }
.hc-b2 { bottom:26px; left:-16px; animation:hcFloatB 4.6s ease-in-out infinite; }
@keyframes hcFloatA { 0%,100% { transform:translateY(0) rotate(2.5deg); } 50% { transform:translateY(-9px) rotate(2.5deg); } }
@keyframes hcFloatB { 0%,100% { transform:translateY(0) rotate(-2.5deg); } 50% { transform:translateY(8px) rotate(-2.5deg); } }

.hc-dots { display:flex; gap:.45rem; justify-content:center; margin-top:1.1rem; }
.hc-dot { width:8px; height:8px; border-radius:50%; background:var(--line); border:none; padding:0; cursor:pointer; transition:width .3s var(--ease), background .3s; }
.hc-dot.is-active { background:var(--wood); width:22px; border-radius:99px; }

@media (prefers-reduced-motion:reduce) { .hc-b1, .hc-b2 { animation:none; } }
@media (max-width:560px) {
  .hero-carousel { max-width:440px; }
  .hc-b1 { right:6px; top:10px; }
  .hc-b2 { left:6px; bottom:14px; }
}

/* ============================================================
   Iteration — brand-font polish, animated buttons, carousel, layout
   ============================================================ */

/* "joy" squiggle — sit cleanly below the descenders */
.hero h1 .joy::after { bottom:-0.18em; height:.2em; opacity:.9; }

/* buttons gently move; hover pauses (no transform conflict) */
.btn { animation:btnFloat 2.8s ease-in-out infinite; }
@keyframes btnFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
.btn-primary:hover, .btn-ghost:hover { transform:none; }
.btn:hover { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) { .btn { animation:none; } }

/* carousel — pop-ups OUTSIDE the photo (above & below, no overlap) */
.hero-carousel { display:flex; flex-direction:column; align-items:center; }
.hc-frame { width:100%; }
.hc-badge { position:static; right:auto; left:auto; top:auto; bottom:auto; }
.hc-b1 { align-self:flex-end; margin:0 .3rem 1.1rem 0; animation:hcFloatA 4s ease-in-out infinite; }
.hc-b2 { align-self:flex-start; margin:1.2rem 0 0 .3rem; animation:hcFloatB 4.6s ease-in-out infinite; }

/* ticker — centered evenly between carousel (above) and Laura's photo (below) */
.hero { padding-bottom:0; }
.ticker { margin-top:clamp(3rem,7vw,5rem); margin-bottom:0; }
#story { padding-top:clamp(3rem,7vw,5rem); }

/* footer — centered */
.footer-grid { flex-direction:column; align-items:center; text-align:center; gap:2.4rem; }
.footer .brand { justify-content:center; }
.footer-tag { margin-left:auto; margin-right:auto; }
.socials { justify-content:center; }
.foot-col { text-align:center; }
.foot-bottom { justify-content:center; text-align:center; }

/* ============================================================
   Type system restore — Fraunces headings + Inter body,
   Copperplate-style (Cinzel fallback) uppercase labels
   ============================================================ */
body { font-family:"Inter",system-ui,sans-serif; font-size:17px; line-height:1.65; font-weight:400; }
h1, h2, h3, h4 { font-family:"Fraunces",Georgia,serif; }
.display { font-weight:560; }

/* serif accents back to Fraunces */
.hero-meta .stat strong,
.ticker-track span,
.win-quote,
.pullquote,
#lbCap strong,
.jnum,
.step::before,
.shot-type { font-family:"Fraunces",Georgia,serif; }

/* script stays only on the logo + signature */
.brand .word { font-family:"Caveat",cursive; }
.sign { font-family:"Caveat",cursive; }
.sign small { font-family:"Inter",sans-serif; }

/* Copperplate engraved-caps for upscale labels */
.eyebrow,
.brand .word small,
.foot-col h4 {
  font-family:"Copperplate","Copperplate Gothic Light","Copperplate Gothic Bold","Cinzel",serif;
  letter-spacing:.12em;
  font-weight:600;
}
.brand .word small { letter-spacing:.18em; }

/* ============================================================
   Brand script (Caveat) for titles, buttons & stats
   + animated "sawdust" outline on all buttons
   ============================================================ */
:root { --sawdust:#BD8C54; }

/* titles in the logo font */
h1, h2, h3, h4 { font-family:"Caveat",cursive; font-weight:700; letter-spacing:0; line-height:1.12; }
.display { font-weight:700; }

/* stats boxes in the logo font */
.hero-meta .stat strong { font-family:"Caveat",cursive; font-weight:700; font-size:2.1rem; }
.hero-meta .stat span { font-family:"Caveat",cursive; font-size:1rem; letter-spacing:0; }

/* buttons: logo-font text, keep existing colors/styles */
.btn { font-family:"Caveat",cursive; font-weight:700; font-size:1.2rem; letter-spacing:.005em; position:relative; }

/* animated sawdust outline (same on every button) */
.btn::before {
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:3px solid transparent;
  pointer-events:none;
  background:
    radial-gradient(circle, var(--sawdust) 1.3px, transparent 1.7px) 0 0 / 8px 8px,
    radial-gradient(circle, color-mix(in srgb, var(--sawdust) 70%, #fff) 0.9px, transparent 1.4px) 4px 5px / 11px 11px;
  background-clip:border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  opacity:.9;
  animation:sawDrift 1.6s linear infinite;
}
.btn:hover::before { animation-duration:.9s; opacity:1; }
@keyframes sawDrift { to { background-position:8px 8px, 15px 11px; } }
@media (prefers-reduced-motion:reduce) { .btn::before { animation:none; } }

/* ============================================================
   Buttons: identical translucent-brown style + more sawdust
   ============================================================ */
.btn-primary,
.btn-ghost {
  background:rgba(169,116,63,0.3);
  color:var(--wood-deep);
  border:1.5px solid rgba(169,116,63,0.38);
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover,
.btn-ghost:hover {
  background:rgba(169,116,63,0.45);
  color:var(--wood-deep);
  border-color:rgba(169,116,63,0.55);
  box-shadow:var(--shadow-md);
  transform:none;
}

/* more, denser, livelier sawdust */
.btn::before {
  inset:-7px;
  border:5px solid transparent;
  background:
    radial-gradient(circle, var(--sawdust) 1.5px, transparent 1.9px) 0 0 / 6px 6px,
    radial-gradient(circle, color-mix(in srgb, var(--sawdust) 78%, #fff) 1.1px, transparent 1.6px) 3px 4px / 9px 9px,
    radial-gradient(circle, color-mix(in srgb, var(--sawdust) 60%, #3a2a16) 0.9px, transparent 1.4px) 5px 2px / 12px 8px;
  background-clip:border-box;
  opacity:.95;
  animation:sawDrift2 1.2s linear infinite;
}
.btn:hover::before { animation-duration:.7s; opacity:1; }
@keyframes sawDrift2 { to { background-position:12px 12px, -9px 9px, 8px -10px; } }
@media (prefers-reduced-motion:reduce) { .btn::before { animation:none; } }

/* ============================================================
   Cart Art — horizontal slider reel (compact, unified, elegant)
   ============================================================ */
.reel-wrap { position:relative; margin-top:.5rem; }

.gallery {
  display:flex;
  gap:1.1rem;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:.6rem .3rem 1.5rem;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.gallery::-webkit-scrollbar { height:8px; }
.gallery::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
.gallery::-webkit-scrollbar-thumb:hover { background:var(--wood); }
.gallery::-webkit-scrollbar-track { background:transparent; }

/* uniform cards */
.shot {
  flex:0 0 clamp(258px, 80vw, 310px);
  scroll-snap-align:start;
  break-inside:auto;
  margin:0;
  display:flex;
  flex-direction:column;
}
.shot-media { aspect-ratio:4/3; width:100%; height:auto; }
.shot-media img { width:100%; height:100%; object-fit:cover; }
.shot-meta { flex:1 1 auto; display:flex; flex-direction:column; gap:.3rem; }
.shot.hide { display:none; }

/* nav arrows (desktop) */
.reel-nav {
  position:absolute; top:34%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:var(--cream-card); border:1px solid var(--line); box-shadow:var(--shadow-md);
  display:grid; place-items:center; color:var(--ink); z-index:5; cursor:pointer;
  transition:color .2s, border-color .2s, transform .2s var(--ease), opacity .2s;
}
.reel-nav:hover { color:var(--wood); border-color:var(--wood); transform:translateY(-50%) scale(1.06); }
.reel-nav svg { width:21px; height:21px; }
.reel-nav.prev { left:-14px; }
.reel-nav.next { right:-14px; }

.reel-hint {
  text-align:center; margin-top:.6rem; font-size:.86rem; color:var(--ink-soft);
  font-family:"Caveat",cursive; font-weight:600; font-size:1.1rem;
}

@media (max-width:760px) {
  .reel-nav { display:none; }            /* mobile: swipe */
  .reel-hint { display:block; }
}
@media (min-width:761px) {
  .reel-hint { display:none; }           /* desktop: arrows are obvious */
}

/* ============================================================
   Form — pickup / delivery segmented toggle
   ============================================================ */
.seg { display:flex; gap:.6rem; }
.seg-btn {
  flex:1; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:12px;
  background:var(--paper); font:inherit; font-size:.95rem; font-weight:600; color:var(--ink-soft);
  cursor:pointer; transition:border-color .2s, background .2s, color .2s;
}
.seg-btn:hover { border-color:var(--wood); color:var(--wood); }
.seg-btn.is-active {
  background:rgba(169,116,63,0.3); border-color:rgba(169,116,63,0.55); color:var(--wood-deep);
}
#addressField[hidden] { display:none; }

/* form: pickup-only note (no delivery/shipping for now) */
.pickup-note { display:flex; gap:.7rem; align-items:flex-start; background:var(--paper-2); border:1.5px solid var(--line); border-radius:12px; padding:.85rem 1rem; }
.pickup-note > svg { width:20px; height:20px; color:var(--wood); flex:none; margin-top:.15rem; }
.pickup-note p { font-size:.9rem; color:var(--ink-soft); margin:0; line-height:1.5; }
.pickup-note strong { color:var(--ink); }

/* nav brand badge (circular logo) */
.brand-badge { width:62px; height:62px; flex:none; border-radius:50%; transition:transform .5s var(--ease); }
.brand:hover .brand-badge { transform:rotate(-10deg) scale(1.05); }
.nav.scrolled .brand-badge { width:52px; height:52px; }
@media (max-width:680px) { .brand-badge { width:56px; height:56px; } }

/* ============================================================
   Logo ring rotation + brown fills converted to logo pink
   ============================================================ */
:root { --logo-pink:#F9B4CF; --logo-pink-deep:#F291BD; --sawdust:#F291BD; }

/* badge: pink ring + curved text rotate very slowly via SMIL (see index.html) */

/* buttons: pink fill (was translucent brown), identical pair preserved */
.btn-primary,
.btn-ghost {
  background:rgba(249,180,207,0.45);
  color:var(--ink);
  border:1.5px solid rgba(242,145,189,0.65);
  box-shadow:0 10px 26px -14px rgba(242,145,189,.7);
}
.btn-primary:hover,
.btn-ghost:hover {
  background:rgba(249,180,207,0.7);
  color:var(--ink);
  border-color:var(--logo-pink-deep);
  box-shadow:0 14px 30px -14px rgba(242,145,189,.9);
  transform:none;
}

/* sawdust ring around buttons: pink dust */
.btn::before {
  background:
    radial-gradient(circle, var(--logo-pink-deep) 1.5px, transparent 1.9px) 0 0 / 6px 6px,
    radial-gradient(circle, var(--logo-pink) 1.1px, transparent 1.6px) 3px 4px / 9px 9px,
    radial-gradient(circle, #D9669C 0.9px, transparent 1.4px) 5px 2px / 12px 8px;
}

/* journey step numbers: brown + clay fills -> pink (sage stays) */
.jnum,
.jstep:nth-child(2) .jnum,
.jstep:nth-child(5) .jnum {
  background:var(--logo-pink-deep);
  box-shadow:0 10px 22px -8px rgba(242,145,189,.7);
}
/* journey dotted connector path: pink */
.journey-steps::before {
  background:repeating-linear-gradient(90deg, var(--logo-pink-deep) 0 6px, transparent 6px 14px);
}

/* small wood-brown accents -> pink */
.hc-dot.is-active { background:var(--logo-pink-deep); }
.price-note { border-left-color:var(--logo-pink-deep); }
.gallery::-webkit-scrollbar-thumb:hover { background:var(--logo-pink-deep); }

/* ============================================================
   Softer pink buttons + bigger logo (centered on mobile)
   ============================================================ */
/* washed-out pink fill */
.btn-primary,
.btn-ghost {
  background:rgba(249,180,207,0.2);
  border-color:rgba(242,145,189,0.45);
  box-shadow:0 8px 22px -16px rgba(242,145,189,.5);
}
.btn-primary:hover,
.btn-ghost:hover {
  background:rgba(249,180,207,0.38);
  border-color:rgba(242,145,189,0.7);
  box-shadow:0 12px 26px -16px rgba(242,145,189,.7);
}

/* logo: much bigger */
.brand-badge { width:104px; height:104px; }
.nav.scrolled .brand-badge { width:70px; height:70px; }

/* mobile: badge centered in the bar, hamburger stays right */
@media (max-width:680px) {
  .nav .brand { position:absolute; left:50%; top:.55rem; transform:translateX(-50%); z-index:65; }
  .brand-badge { width:92px; height:92px; }
  .nav.scrolled .brand-badge { width:62px; height:62px; }
  .nav { min-height:74px; }
  .nav-toggle { margin-left:auto; }
  .hero { padding-top:10rem; }
  body.menu-open .nav-links { padding-top:9rem; }
}

/* ============================================================
   Logo: larger + vertically centered (equal space above/below)
   ============================================================ */
.brand-badge { width:128px; height:128px; }
.nav.scrolled .brand-badge { width:84px; height:84px; }
.hero { padding-top:clamp(12rem,17vw,13.5rem); }

@media (max-width:680px) {
  .nav { min-height:130px; }
  .nav.scrolled { min-height:98px; }
  .nav .brand { top:50%; transform:translate(-50%,-50%); }
  .brand-badge { width:106px; height:106px; }
  .nav.scrolled .brand-badge { width:74px; height:74px; }
  .hero { padding-top:11.5rem; }
  body.menu-open .nav-links { padding-top:10.5rem; }
}

/* ============================================================
   Mobile logo: bigger + lowered (sits close to the hero words)
   ============================================================ */
@media (max-width:680px) {
  .brand-badge { width:128px; height:128px; }
  .nav { min-height:132px; }
  .nav .brand { top:auto; bottom:-16px; transform:translateX(-50%); }
  .nav.scrolled { min-height:96px; }
  .nav.scrolled .brand-badge { width:84px; height:84px; }
  .hero { padding-top:10.5rem; }
  body.menu-open .nav-links { padding-top:10.5rem; }
}

/* ============================================================
   Original logo badge (two layers): full original rotates,
   original center (heart + wordmark) stays still on top
   ============================================================ */
.brand-badge { position:relative; display:block; }
.brand-badge img { position:absolute; inset:0; width:100%; height:100%; display:block; }
.badge-core { clip-path:circle(33% at 50% 50%); }

/* ============================================================
   Client Wins: rotating marquee of business names served
   (same style as the hero ticker, tuned for the longer list)
   ============================================================ */
.names-ticker { margin-top:2.2rem; margin-bottom:0; }
.names-ticker .ticker-track { gap:2.6rem; animation-duration:240s; }
.names-ticker .ticker-track span { color:var(--wood-deep); }
.names-ticker .ticker-track span::after { content:"♥"; color:var(--logo-pink-deep); font-size:.62rem; }

/* ============================================================
   Recolor: "Made to last" -> pink ; "Make it yours" -> tan
   (no dark blocks; tan / brown / minimal pink scheme)
   ============================================================ */
.card.feature {
  background:linear-gradient(160deg, #FAD4E2, #F6B9D2);
  color:var(--ink);
  border:1.5px solid rgba(242,145,189,0.55);
}
.card.feature h3 { color:var(--ink); }
.card.feature p { color:var(--ink-soft); }
.card.feature .ic { background:rgba(255,255,255,0.55); color:var(--clay); }

.options { background:var(--kraft); color:var(--ink); }
.options h3 { color:var(--ink); }
.chip { background:rgba(255,255,255,0.62); border:1px solid var(--line); color:var(--ink); }
.chip svg { color:var(--wood); }

/* ============================================================
   Client Journey numbers: 1,3,5 pink · 2,4 tan
   ============================================================ */
.jstep:nth-child(1) .jnum,
.jstep:nth-child(3) .jnum,
.jstep:nth-child(5) .jnum {
  background:var(--logo-pink-deep);
  box-shadow:0 10px 22px -8px rgba(242,145,189,0.7);
}
.jstep:nth-child(2) .jnum,
.jstep:nth-child(4) .jnum {
  background:var(--wood);
  box-shadow:0 10px 22px -8px rgba(169,116,63,0.55);
}

/* ============================================================
   Book-a-call CTA (contact section)
   ============================================================ */
.book-call {
  display:flex; align-items:center; gap:.85rem;
  margin:0; padding:1rem 1.15rem;
  background:rgba(249,180,207,0.16);
  border:1.5px solid rgba(242,145,189,0.5);
  border-radius:var(--r-sm);
  color:var(--ink); text-decoration:none;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.book-call:hover { background:rgba(249,180,207,0.28); transform:translateY(-2px); }
.book-call > svg:first-child { width:30px; height:30px; flex:0 0 auto; color:var(--clay); }
.book-call span { display:flex; flex-direction:column; line-height:1.25; font-size:.94rem; color:var(--ink-soft); }
.book-call span b { color:var(--ink); font-weight:600; }
.book-call .arr { width:20px; height:20px; margin-left:auto; flex:0 0 auto; color:var(--wood); }

/* ============================================================
   Reviews
   ============================================================ */
.reviews-rating {
  display:inline-flex; align-items:center; gap:.55rem;
  margin-top:1rem; text-decoration:none; color:var(--ink);
  background:var(--cream-card); border:1px solid var(--line);
  padding:.5rem .95rem; border-radius:99px; box-shadow:var(--shadow-sm);
  font-size:.96rem;
}
.reviews-rating:hover { border-color:var(--wood); }
.reviews-rating .stars { color:#E0A93B; letter-spacing:2px; font-size:1.02rem; }
.reviews-rating strong { font-weight:700; }

.reviews-reel {
  display:flex; gap:1.1rem; margin-top:2rem;
  overflow-x:auto; padding:.4rem .2rem 1.3rem;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.reviews-reel::-webkit-scrollbar { height:8px; }
.reviews-reel::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; }
.reviews-reel::-webkit-scrollbar-thumb:hover { background:var(--logo-pink-deep); }
.reviews-reel::-webkit-scrollbar-track { background:transparent; }
.review {
  flex:0 0 min(86%, 360px); scroll-snap-align:start;
  background:var(--cream-card); border:1px solid var(--line);
  border-radius:var(--r); padding:1.5rem 1.5rem 1.3rem;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:.7rem;
}
.rv-stars { color:#E0A93B; letter-spacing:2px; font-size:1.05rem; }
.rv-text { font-size:1rem; line-height:1.55; color:var(--ink); margin:0; flex:1 1 auto; }
.rv-by { display:flex; align-items:center; gap:.7rem; margin-top:.3rem; }
.rv-av {
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-family:"Caveat",cursive;
  font-weight:700; font-size:1.25rem; color:#fff;
  background:linear-gradient(150deg, var(--logo-pink-deep), var(--clay));
}
.rv-id { display:flex; flex-direction:column; line-height:1.2; }
.rv-id b { font-weight:600; }
.rv-id small { color:var(--ink-soft); font-size:.8rem; }
.reviews-foot { text-align:center; margin-top:.4rem; }
.reviews-foot a { color:var(--wood-deep); font-weight:600; text-decoration:none; }
.reviews-foot a:hover { text-decoration:underline; }

/* ============================================================
   Support a Small Business button + tip modal
   ============================================================ */
.support-btn {
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.1rem;
  padding:.6rem 1.05rem; border-radius:99px; cursor:pointer;
  background:rgba(249,180,207,0.45); color:var(--ink);
  border:1.5px solid rgba(242,145,189,0.65);
  box-shadow:0 10px 26px -14px rgba(242,145,189,.7);
  font:inherit; font-weight:600; font-size:.92rem;
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.support-btn:hover { transform:translateY(-2px); background:rgba(249,180,207,0.62); }
.support-btn .heart { width:18px; height:18px; color:var(--clay); }

.tip-modal {
  position:fixed; inset:0; z-index:120;
  display:none; align-items:center; justify-content:center;
  background:rgba(42,36,32,.55); backdrop-filter:blur(3px);
  padding:1.2rem;
}
.tip-modal.open { display:flex; }
.tip-card {
  position:relative; width:min(420px, 100%);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:2rem 1.7rem 1.6rem;
  box-shadow:var(--shadow-lg); text-align:center;
  animation:tipIn .25s var(--ease);
}
@keyframes tipIn { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
.tip-card > .heart { width:34px; height:34px; color:var(--logo-pink-deep); }
.tip-card h3 { font-size:1.9rem; margin:.2rem 0 .4rem; }
.tip-card > p { color:var(--ink-soft); font-size:.95rem; line-height:1.5; margin:0 0 1.2rem; }
.tip-close {
  position:absolute; top:.7rem; right:.7rem; width:34px; height:34px;
  display:grid; place-items:center; cursor:pointer;
  background:var(--cream-card); border:1px solid var(--line); border-radius:50%; color:var(--ink-soft);
}
.tip-close:hover { color:var(--ink); border-color:var(--wood); }
.tip-close svg { width:16px; height:16px; }
.tip-options { display:grid; gap:.65rem; }
.tip-opt {
  display:flex; flex-direction:column; gap:.1rem; align-items:center;
  padding:.8rem 1rem; border-radius:var(--r-sm); cursor:pointer;
  background:var(--cream-card); border:1.5px solid var(--line);
  color:var(--ink); text-decoration:none; font:inherit; width:100%;
  transition:transform .15s var(--ease), border-color .15s var(--ease);
}
.tip-opt:hover { transform:translateY(-2px); border-color:var(--logo-pink-deep); }
.tip-opt b { font-size:1.05rem; }
.tip-opt span { color:var(--ink-soft); font-size:.85rem; }
.tip-note { margin:1rem 0 0; font-size:.8rem; color:var(--ink-soft); line-height:1.45; }

/* ============================================================
   Gallery "front & back" overlapped pair card (two-level bar)
   ============================================================ */
.shot.pair { flex:0 0 clamp(300px, 84vw, 440px); }
.shot.pair .shot-media {
  width:100%; aspect-ratio:1 / 0.82;
  overflow:visible; background:transparent; cursor:zoom-in;
}
.pair-media { position:relative; width:100%; height:100%; }
.p-frame {
  position:absolute; width:70%; border:4px solid #fff; border-radius:12px;
  overflow:hidden; box-shadow:var(--shadow-md); background:#fff; cursor:zoom-in;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.p-frame img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
.p-back  { top:0; left:1%; transform:rotate(-3deg); z-index:1; }
.p-front { bottom:0; right:1%; transform:rotate(3deg); z-index:2; }
/* each photo lifts on its own hover, so it reads as individually clickable */
.p-back:hover  { transform:rotate(-3deg) translateY(-5px) scale(1.03); z-index:5; box-shadow:var(--shadow-lg); }
.p-front:hover { transform:rotate(3deg) translateY(-5px) scale(1.03); z-index:5; box-shadow:var(--shadow-lg); }
.shot.pair:hover .p-frame img { transform:none; }
.p-tag {
  position:absolute; top:8px; left:8px; z-index:3;
  font-family:"Inter",sans-serif; font-size:.66rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  color:#fff; background:rgba(42,36,32,.82);
  padding:.18rem .55rem; border-radius:99px;
}
.p-front .p-tag { background:var(--clay); }

/* ============================================================
   Gallery per-cart spec chips + accessories note
   ============================================================ */
.shot-tags { display:flex; flex-wrap:wrap; gap:.32rem; margin-top:.55rem; }
.shot-tags i {
  font-style:normal; font-family:"Inter",sans-serif;
  font-size:.66rem; font-weight:500; line-height:1; white-space:nowrap;
  color:var(--wood-deep); background:rgba(169,116,63,.10);
  border:1px solid rgba(169,116,63,.22);
  padding:.3rem .52rem; border-radius:99px;
}
.reel-note {
  display:flex; align-items:center; gap:.5rem; justify-content:center;
  max-width:none; margin:.4rem auto 0; text-align:center;
  font-size:.86rem; color:var(--ink-soft);
}
.reel-note svg { width:18px; height:18px; flex:0 0 auto; color:var(--wood); }

/* ============================================================
   Heart icon: pink watercolor image replaces the old SVG heart
   (contextual .heart / .title-heart rules still set width/height)
   ============================================================ */
img.heart, img.title-heart, .hicon-eyebrow { object-fit:contain; display:inline-block; }
.eyebrow .hicon-eyebrow { width:16px; height:16px; flex:none; object-fit:contain; }
/* marquee accent after each business name now uses the heart image */
.names-ticker .ticker-track span::after {
  content:""; display:inline-block; width:.9em; height:.9em;
  margin-left:.18em; vertical-align:-0.14em;
  background:url("assets/heart.png") center/contain no-repeat;
}
/* keep heart images from shrinking inside flex headings/badges */
img.heart, img.title-heart, .hicon-eyebrow { flex:none; }

/* ============================================================
   Cart Art slot numbers (reference IDs on each gallery card)
   ============================================================ */
.shot { position:relative; }
.shot-num {
  position:absolute; top:8px; left:8px; z-index:6;
  min-width:25px; height:25px; padding:0 7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink); color:#FFF8EE;
  font-family:"Inter",sans-serif; font-size:.78rem; font-weight:700; line-height:1;
  border-radius:99px; box-shadow:0 2px 8px rgba(42,36,32,.35);
  pointer-events:none;
}
.shot.pair .shot-num { left:50%; transform:translateX(-50%); top:2px; }

/* gallery card subtitle (e.g. "Coffee + Serving Cart" under "Signature Wood-Top") */
.shot-sub {
  font-family:"Inter",sans-serif; font-size:.72rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--wood);
  margin-top:-.15rem;
}

/* Client Wins photos are click-to-zoom (open the lightbox) */
.win-photo { cursor:zoom-in; }

/* ============================================================
   Three-photo "trio" fan card (e.g. front / open / closed angles)
   ============================================================ */
.shot.trio .shot-media { aspect-ratio:1 / 0.95; }
.shot.trio .p-frame { width:58%; }
.shot.trio .p-back  { top:0;    left:0;   transform:rotate(-5deg); z-index:1; }
.shot.trio .p-mid   { top:14%;  left:21%; transform:rotate(0deg);  z-index:2; }
.shot.trio .p-front { bottom:0; right:0;  transform:rotate(5deg);  z-index:3; }
.shot.trio .p-back:hover  { transform:rotate(-5deg) translateY(-5px) scale(1.03); z-index:6; box-shadow:var(--shadow-lg); }
.shot.trio .p-mid:hover   { transform:rotate(0deg)  translateY(-5px) scale(1.03); z-index:6; box-shadow:var(--shadow-lg); }
.shot.trio .p-front:hover { transform:rotate(5deg)  translateY(-5px) scale(1.03); z-index:6; box-shadow:var(--shadow-lg); }

/* ============================================================
   Four-photo "quad" card: two mirrored fans side by side
   (e.g. chevron front/back  |  trim front/back)
   ============================================================ */
.shot.quad { flex:0 0 clamp(520px, 92vw, 740px); }
.shot.quad .shot-media { aspect-ratio:2 / 0.82; overflow:visible; background:transparent; cursor:zoom-in; display:flex; gap:3%; }
.quad-group { position:relative; flex:1 1 48%; }
.quad-group .p-frame { width:82%; }
.quad-group .p-back  { top:0;    left:0;  transform:rotate(-4deg); z-index:1; }
.quad-group .p-front { bottom:0; right:0; transform:rotate(4deg);  z-index:2; }
.quad-group.mirror .p-back  { left:auto; right:0; transform:rotate(4deg); }
.quad-group.mirror .p-front { right:auto; left:0; transform:rotate(-4deg); }
.quad-group .p-back:hover  { transform:rotate(-4deg) translateY(-5px) scale(1.03); z-index:7; box-shadow:var(--shadow-lg); }
.quad-group .p-front:hover { transform:rotate(4deg)  translateY(-5px) scale(1.03); z-index:7; box-shadow:var(--shadow-lg); }
.quad-group.mirror .p-back:hover  { transform:rotate(4deg)  translateY(-5px) scale(1.03); }
.quad-group.mirror .p-front:hover { transform:rotate(-4deg) translateY(-5px) scale(1.03); }

/* ============================================================
   Hero: scattered 3D sticker scrapbook (replaces the carousel)
   ============================================================ */
.sticker-scene { position:relative; width:100%; max-width:1080px; aspect-ratio:3.6; margin:clamp(2.8rem,7vw,6rem) auto clamp(.3rem,1vw,.7rem); perspective:1200px; }
.sticker-stage { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .45s cubic-bezier(.22,.61,.36,1); will-change:transform; }
.sticker {
  position:absolute; display:block; height:auto;
  filter:drop-shadow(0 14px 18px rgba(42,36,32,.26));
  animation:stickerFloat var(--dur,8s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
  transition:transform .4s var(--ease), filter .4s var(--ease);
  will-change:transform; backface-visibility:hidden; transform-style:preserve-3d;
}
.sticker:hover {
  animation-play-state:paused;
  transform:translate3d(0,-10px,var(--z,0px)) rotate(0deg) scale(1.06) !important;
  filter:drop-shadow(0 26px 28px rgba(42,36,32,.38));
  z-index:30;
}
/* lively in-place float: bob + gentle sway + soft scale breathe, per-sticker depth */
@keyframes stickerFloat {
  0%   { transform:translate3d(0,0,var(--z,0px))     rotate(var(--rot,0deg))                  scale(1); }
  20%  { transform:translate3d(4px,-9px,var(--z,0px)) rotate(calc(var(--rot,0deg) + 2.2deg))  scale(1.018); }
  45%  { transform:translate3d(-3px,-15px,var(--z,0px)) rotate(calc(var(--rot,0deg) - 1.4deg)) scale(1.026); }
  70%  { transform:translate3d(3px,-7px,var(--z,0px)) rotate(calc(var(--rot,0deg) + 1.5deg))  scale(1.012); }
  100% { transform:translate3d(0,0,var(--z,0px))     rotate(var(--rot,0deg))                  scale(1); }
}
/* hero row 1 (positions unchanged) */
/* hero row: bigger stickers, equal gaps, vertically centred on one midline */
.sticker.s1 { width:22%; left:8.5%; top:4.6%; --rot:-4deg; --z:0px;   --dur:5.6s; --delay:0s;   z-index:5; }
.sticker.s2 { width:22%; left:39%;  top:10%; --rot:3deg;  --z:-26px; --dur:6.4s; --delay:.5s;  z-index:7; }
.sticker.s3 { width:22%; left:69.5%; top:14.7%; --rot:6deg;  --z:34px;  --dur:5.1s; --delay:.9s;  z-index:6; }

/* decorative sticker bands floating in the gaps between sections */
.sticker-scene.band { max-width:1080px; aspect-ratio:3.6; height:auto; margin:clamp(.4rem,2vw,1.4rem) auto; perspective:1200px; pointer-events:none; }
.sticker-scene.band .sticker { pointer-events:auto; }
/* shared band slots: left / center / right (rotation, depth & timing set per sticker inline) */
.sticker.bL { width:22%; left:8.5%;  top:18%; z-index:5; }
.sticker.bC { width:22%; left:39%; top:6%;  z-index:7; }
.sticker.bR { width:22%; left:69.5%; top:19%; z-index:4; }

/* mini scatter accents (hearts + sparkles) tucked around the main stickers */
.sticker.mini {
  width:var(--w,7%); left:var(--l,0%); top:var(--t,0%);
  filter:drop-shadow(0 5px 7px rgba(42,36,32,.16));
  animation:miniFloat var(--dur,4.4s) ease-in-out infinite;
  animation-delay:var(--delay,0s); pointer-events:none; z-index:3;
}
.sticker.mini.spark {
  animation:miniFloat var(--dur,4.4s) ease-in-out infinite, twinkle var(--tw,3.2s) ease-in-out infinite;
  filter:drop-shadow(0 3px 6px rgba(233,150,184,.45));
}
@keyframes miniFloat {
  0%,100% { transform:translateY(0)    rotate(var(--rot,0deg)) scale(1); }
  50%     { transform:translateY(-7px) rotate(calc(var(--rot,0deg) + 7deg)) scale(1.13); }
}
@keyframes twinkle { 0%,100% { opacity:.5; } 50% { opacity:1; } }

/* circular logo-style badge stickers */
.sticker-badge {
  position:absolute; aspect-ratio:1; border-radius:50%;
  background:var(--cream-card); border:2px solid var(--logo-pink-deep);
  box-shadow:0 12px 20px rgba(42,36,32,.20), inset 0 0 0 5px rgba(249,180,207,.30);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:9%; gap:.05rem; overflow:hidden;
  animation:stickerFloat var(--dur,7s) ease-in-out infinite; animation-delay:var(--delay,0s);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); will-change:transform;
}
.sticker-badge:hover { animation-play-state:paused; transform:translateY(-8px) rotate(0deg) scale(1.06) !important; box-shadow:0 20px 26px rgba(42,36,32,.28), inset 0 0 0 5px rgba(249,180,207,.45); z-index:30; }
.sticker-badge b { font-family:"Caveat",cursive; font-weight:700; line-height:.98; color:var(--ink); font-size:clamp(.7rem,2.3vw,.96rem); }
.sticker-badge span { font-family:"Inter",sans-serif; font-size:clamp(.44rem,1.2vw,.58rem); color:var(--ink-soft); letter-spacing:.03em; margin-top:.18rem; line-height:1.1; }
.sticker-badge .sb-heart { width:22%; height:auto; margin-bottom:.12rem; }
.sticker-badge.sb1 { width:29%; left:36%; top:35%; --rot:-3deg; --dur:7.4s; --delay:.5s; z-index:8; }
.sticker-badge.sb2 { width:26%; left:36%; top:69%; --rot:4deg;  --dur:6.8s; --delay:1.2s; z-index:8; }
@media (prefers-reduced-motion:reduce) { .sticker, .sticker.mini, .sticker.mini.spark, .sticker-badge { animation:none; } .sticker-stage { transition:none; } }

/* ============================================================
   Cart Art — tabbed image-viewer portfolio grid (REDESIGN)
   Scoped to #work; overrides the legacy horizontal reel + fan layout.
   ============================================================ */
/* hide legacy carousel chrome, slot numbers and on-photo badges */
#work .reel-nav,
#work .reel-hint,
#work .shot-num,
#work .p-tag { display:none !important; }

#work.wrap { width:min(1440px, 92vw); max-width:1440px; }
#work .center { max-width:720px; margin-inline:auto; }      /* narrow, readable intro */
#work .filters { max-width:920px; margin-inline:auto; }     /* filters stay centred */
#work .reel-wrap { position:static; margin-top:.5rem; }

/* responsive portfolio grid — vertical scroll, no horizontal reel */
#work .gallery {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(20px,2.4vw,32px);
  overflow:visible;
  padding:0;
  scroll-snap-type:none;
  align-items:start;
}

/* card */
#work .shot {
  flex:none; margin:0; position:relative;
  display:flex; flex-direction:column;
  background:var(--cream-card);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(42,36,32,.04), 0 12px 26px -20px rgba(42,36,32,.4);
  scroll-snap-align:none;
  transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
#work .shot.hide { display:none !important; }   /* filter hide must beat #work .shot (id specificity) */
#work .shot:hover { transform:translateY(-2px); box-shadow:0 2px 4px rgba(42,36,32,.05), 0 18px 32px -20px rgba(42,36,32,.45); }
#work .shot:hover .shot-media img,
#work .shot:hover .p-frame img { transform:none; }

/* image viewport — one consistent 4:3 frame; images FILL it (cover) by default */
#work .shot-media {
  position:relative; width:100%; aspect-ratio:4/3; height:auto;
  background:var(--paper-2); overflow:hidden; cursor:zoom-in; line-height:0;
}
/* blurred backdrop (same photo) fills the frame behind any contained image — no white gutters */
#work .media-backdrop {
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter:blur(22px); transform:scale(1.14); opacity:.24;
}
#work .shot-media > img {
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block; transform:none;
}
#work .shot-media.fit-contain > img { object-fit:contain; }

/* layered frames: one visible at a time, soft crossfade */
#work .p-frame {
  position:absolute; inset:0; width:100%; height:100%;
  transform:none; opacity:0; pointer-events:none;
  transition:opacity .22s var(--ease);
}
#work .p-frame.is-active { opacity:1; pointer-events:auto; z-index:2; }
#work .p-frame img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center; transform:none; }
#work .p-frame.fit-contain img { object-fit:contain; }

/* segmented tab control */
#work .cart-tabs {
  display:flex; gap:.3rem; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  padding:.65rem .9rem 0; margin:0;
  -webkit-mask:linear-gradient(90deg,#000 92%,transparent);
  mask:linear-gradient(90deg,#000 92%,transparent);
}
#work .cart-tabs::-webkit-scrollbar { display:none; }
#work .cart-tab {
  flex:0 0 auto; min-height:36px; padding:.42rem .85rem;
  border-radius:999px; border:1px solid var(--line);
  background:var(--paper-2); color:var(--ink-soft);
  font-family:"Inter",sans-serif; font-size:.74rem; font-weight:600;
  letter-spacing:.02em; cursor:pointer; white-space:nowrap;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
#work .cart-tab:hover { border-color:var(--wood); color:var(--ink); }
#work .cart-tab[aria-pressed="true"] {
  background:rgba(249,180,207,.28); border-color:var(--logo-pink-deep);
  color:var(--ink); font-weight:700; box-shadow:inset 0 0 0 1px rgba(242,145,189,.5);
}
#work .cart-tab:focus-visible { outline:2px solid var(--wood); outline-offset:2px; }

/* metadata */
#work .shot-meta { flex:1 1 auto; display:flex; flex-direction:column; gap:.28rem; padding:1rem 1.15rem 1.2rem; }
#work .shot-sub { order:-1; margin-top:0; margin-bottom:.12rem; }   /* category eyebrow above title */
#work .shot-type { font-size:1.16rem; line-height:1.26; }
#work .shot-desc { margin-top:.15rem; }
#work .shot-tags { margin-top:.55rem; }

/* ----- comparison card: Chevron vs Free-Hand Trim ----- */
#work .shot.quad { grid-column:1 / -1; }
#work .shot.quad .shot-media {
  position:static; aspect-ratio:auto; height:auto; background:transparent;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px);
  overflow:visible; cursor:default; padding:0;
}
#work .quad-group {
  position:relative; aspect-ratio:4/3; width:100%; flex:none;
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; cursor:zoom-in;
}
#work .quad-group .p-frame { width:100%; transform:none; }
#work .quad-group .cart-tabs {
  position:absolute; inset:auto 0 0 0; justify-content:center; padding:.5rem; z-index:4;
  background:linear-gradient(transparent, rgba(252,249,241,.94) 60%);
  -webkit-mask:none; mask:none;
}

@media (max-width:900px) {
  #work .gallery { gap:20px; }
}
@media (max-width:680px) {
  #work .gallery { grid-template-columns:1fr; }
  #work .shot.quad .shot-media { grid-template-columns:1fr; }
  #work .cart-tab { min-height:44px; padding:.55rem 1rem; font-size:.78rem; }
}

@media (prefers-reduced-motion:reduce) {
  #work .p-frame, #work .shot, #work .cart-tab { transition:none; }
}