:root {
    --ink: #1d1a17;
    --cream: #fff8e6;
    --yellow: #f6c445;
    --lilac: #c9b6f2;
    --pink: #f7b8c8;
    --green: #bfe3b4;
    --blue: #8ec9f0;
    --peach: #ffd9a8;
    --scene-ms: 3400ms;
    --nav-h: 76px;
    --gutter: clamp(16px, 2.8vw, 40px);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }
  body {
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    color: var(--ink);
    background: var(--cream);
  }

  /* ---------- Top nav: logo left, tabs right ---------- */
  .nav {
    position: fixed; inset: 0 0 auto 0; z-index: 10;
    height: var(--nav-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--gutter);
    transition: background-color .2s, box-shadow .2s;
  }
  .nav.solid { background: var(--cream); box-shadow: 0 3px 0 var(--ink); }
  .logo {
    display: flex; align-items: center; gap: 10px;
    color: var(--ink); text-decoration: none;
    font-weight: 800; font-size: 30px; letter-spacing: -0.015em;
  }
  .logo svg { width: 34px; height: 34px; }
  .tabs { display: flex; align-items: center; gap: 34px; list-style: none; }
  .tabs a {
    color: var(--ink); text-decoration: none;
    font-weight: 500; font-size: 17px;
    padding: 6px 0; border-bottom: 2px solid transparent;
    transition: border-color .15s;
  }
  .tabs a:hover { border-color: var(--ink); }
  .tabs .cart {
    border: 2px solid var(--ink); border-radius: 999px;
    padding: 6px 16px; font-weight: 800;
  }
  .tabs .cart:hover { background: var(--ink); color: #fff; }
  .menu-btn { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after {
    content: ""; display: block; width: 24px; height: 2.5px; background: var(--ink);
    border-radius: 2px; position: relative; margin: auto;
  }
  .menu-btn span::before { position: absolute; top: -7px; }
  .menu-btn span::after  { position: absolute; top: 7px; }

  /* ---------- Hero montage ---------- */
  /* To swap in real footage later: replace .montage contents with
     <video src="montage.mp4" autoplay muted loop playsinline></video> */
  .hero {
    position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; /* svh = the visible area even while the phone's browser toolbars are showing */
    background: #f6c445; transition: background-color .6s ease;
    padding-top: var(--nav-h);
  }
  .montage { position: absolute; inset: var(--nav-h) var(--gutter) 0 40%; }

  /* hero line: same spot every scene, only the words change */
  .headline {
    position: absolute; left: calc(var(--gutter) + 2.5vw); bottom: 76px; z-index: 5;
    width: min(38vw, 620px); display: grid; pointer-events: none;
    font-weight: 800; letter-spacing: -0.015em; line-height: 1.05;
    font-size: clamp(36px, 4.6vw, 74px);
  }
  .headline .hl { grid-area: 1 / 1; align-self: start; visibility: hidden; }
  .headline .hl.on { visibility: visible; }
  /* the mask needs room on every side or descenders (g, y, p) and glyph edges get clipped */
  .headline .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .08em .26em; margin: -.12em -.08em -.26em; }
  .headline .w > span { display: inline-block; transform: translateY(150%); }
  .headline .hl.on .w > span { animation: rise .6s cubic-bezier(.2,.9,.3,1) forwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
  @keyframes rise { to { transform: translateY(0); } }
  .scene {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; transition: opacity .5s ease;
  }
  .scene.active { opacity: 1; }

  svg .s { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
  svg .f { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
  svg .cap { font-family: "Caveat", cursive; font-weight: 700; font-size: 44px; fill: var(--ink); text-anchor: middle; }
  svg .t { transform-box: fill-box; transform-origin: center; }

  /* draw-on strokes (pathLength=1 on each) */
  .scene .d { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .scene.active .d { animation: draw .9s ease-out forwards; animation-delay: var(--delay, 0s); }
  @keyframes draw { to { stroke-dashoffset: 0; } }

  .scene .pop { transform: scale(0); }
  .scene.active .pop { animation: pop .45s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay: var(--delay, 0s); }
  @keyframes pop { to { transform: scale(1); } }

  .scene .fade { opacity: 0; }
  .scene.active .fade { animation: fadein .5s ease forwards; animation-delay: var(--delay, 0s); }
  @keyframes fadein { to { opacity: 1; } }

  /* scene 1 — dates */
  .scene.active .hop { animation: hop 1.1s ease-in-out .9s 2; }
  @keyframes hop {
    0%,100% { transform: translateY(0) rotate(0); }
    50%     { transform: translateY(-110px) rotate(25deg); }
  }

  /* scene 2 — chips */
  .scene.active .wiggle { animation: wiggle .5s ease-in-out 1s 3; transform-origin: 50% 100%; }
  @keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
  .scene .chip { opacity: 0; }
  .scene.active .chip { animation: chip 1.6s ease-in forwards; animation-delay: var(--delay, 0s); }
  @keyframes chip {
    0%   { opacity: 0; transform: translate(0,0) rotate(0) scale(.4); }
    12%  { opacity: 1; }
    50%  { transform: translate(calc(var(--dx) * .7), -150px) rotate(180deg) scale(1); }
    100% { opacity: 1; transform: translate(var(--dx), 270px) rotate(380deg) scale(1); }
  }

  /* scene 3 — berries */
  .scene .berry { opacity: 0; }
  .scene.active .berry { animation: drop .9s cubic-bezier(.4,0,.6,1) forwards; animation-delay: var(--delay, 0s); }
  @keyframes drop {
    0%   { opacity: 0; transform: translateY(-420px); }
    10%  { opacity: 1; }
    70%  { transform: translateY(0); }
    85%  { transform: translateY(-26px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .scene.active .spoon { animation: stir 1.2s ease-in-out 1.6s 2; transform-origin: 50% 100%; }
  @keyframes stir { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }

  /* scene 4 — syrup */
  .scene .stream { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .scene.active .stream { animation: draw 1s ease-in .7s forwards; }
  .scene .puddle { transform: scale(0); }
  .scene.active .puddle { animation: pop .9s ease-out 1.5s forwards; }
  .scene.active .tilt { animation: tilt .6s ease-out forwards; transform-origin: 50% 50%; }
  .scene .tilt { transform: rotate(0); }
  @keyframes tilt { to { transform: rotate(-38deg); } }

  /* scene 5 — gift */
  .scene.active .lid { animation: lid 1s cubic-bezier(.3,1.4,.5,1) .6s forwards; }
  @keyframes lid { to { transform: translate(-60px,-150px) rotate(-22deg); } }
  .scene .out { transform: translateY(60px) scale(0); }
  .scene.active .out { animation: out .7s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay: var(--delay, 1s); }
  @keyframes out { to { transform: translateY(0) scale(1); } }

  /* ---------- progress dots ---------- */
  .dots {
    position: absolute; left: calc(var(--gutter) + 2.5vw); bottom: 36px; /* lines up with the hero line */
    display: flex; gap: 10px; z-index: 5;
  }
  .dots i {
    position: relative; display: block; width: 36px; height: 6px; border-radius: 3px;
    background: rgba(29,26,23,.2); overflow: hidden;
  }
  .dots i::after {
    content: ""; position: absolute; inset: 0; background: var(--ink);
    transform: scaleX(0); transform-origin: left;
  }
  .dots i.done::after { transform: scaleX(1); }
  .dots i.on::after { animation: fill var(--scene-ms) linear forwards; }
  @keyframes fill { to { transform: scaleX(1); } }

  /* ---------- shared section bits ---------- */
  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
  .section { padding: 110px 0; position: relative; }
  .h2 {
    font-weight: 800; letter-spacing: -0.02em; line-height: 1.05;
    font-size: clamp(44px, 7vw, 92px);
  }
  .hand { font-family: "Caveat", cursive; font-weight: 700; }
  .pill {
    display: inline-block; border: 3px solid var(--ink); border-radius: 999px;
    padding: 10px 22px; font: 800 16px "Bricolage Grotesque", sans-serif;
    color: var(--ink); background: var(--cream); text-decoration: none; cursor: pointer;
    transition: transform .12s, background-color .12s, color .12s;
  }
  .pill:hover { background: var(--ink); color: var(--cream); transform: translateY(-2px) rotate(-1deg); }
  .art svg { width: 100%; height: 100%; display: block; overflow: visible; }

  /* ---------- 1. best sellers carousel ---------- */
  .best { background: var(--cream); }
  .best-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
  .best-head .hand { font-size: 24px; margin-bottom: 8px; }
  .arrows { display: flex; gap: 12px; flex: none; }
  .arrows button {
    width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--ink);
    background: var(--cream); font-size: 26px; font-weight: 800; cursor: pointer; color: var(--ink);
    transition: background-color .12s, color .12s, opacity .12s;
  }
  .arrows button:hover:not(:disabled) { background: var(--ink); color: var(--cream); }
  .arrows button:disabled { opacity: .3; cursor: default; }
  .track {
    --edge: max(32px, calc((100vw - 1280px) / 2 + 32px));
    display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 26px var(--edge) 14px; scroll-padding-inline: var(--edge);
    scrollbar-width: none;
  }
  .track::-webkit-scrollbar { display: none; }
  .card { flex: none; width: clamp(260px, 27vw, 340px); scroll-snap-align: start; }
  .card .art {
    position: relative; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 28px;
    padding: 12%; transition: transform .2s;
  }
  .card:hover .art { transform: rotate(-1.5deg) translateY(-4px); }
  .card:hover .art svg { transform: rotate(4deg) scale(1.05); }
  .card .art svg { transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
  .sticker {
    position: absolute; top: -14px; right: -10px; z-index: 2;
    background: var(--ink); color: var(--cream); border-radius: 999px;
    font: 800 13px "Bricolage Grotesque", sans-serif; padding: 8px 14px; transform: rotate(6deg);
  }
  .card h3 { font-size: 22px; font-weight: 800; letter-spacing: 0; line-height: 1.2; margin-top: 16px; }
  .card .size { font-size: 15px; opacity: .65; margin-top: 2px; }
  .card .row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
  .card .price { font-size: 22px; font-weight: 800; }
  .card .pill { padding: 8px 18px; font-size: 15px; }

  /* ---------- 2. shop all ---------- */
  .shop { background: var(--ink); color: var(--cream); }
  .shop-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
  .shop-head .hand { font-size: 30px; color: var(--yellow); margin-bottom: 10px; }
  .shop-head .pill { background: var(--yellow); }
  .shop-head .pill:hover { background: var(--cream); color: var(--ink); }
  .cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .cat {
    position: relative; aspect-ratio: 1 / 1.1; border-radius: 28px; border: 3px solid var(--cream);
    padding: 22px; color: var(--ink); text-decoration: none; display: flex; flex-direction: column;
    justify-content: space-between; overflow: hidden; transition: transform .2s;
  }
  .cat:hover { transform: translateY(-6px) rotate(-1deg); }
  .cat .art { flex: 1; min-height: 0; padding: 4% 14%; }
  .cat .art svg { transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
  .cat:hover .art svg { transform: rotate(-6deg) scale(1.08); }
  .cat b { font-size: 22px; font-weight: 800; letter-spacing: 0; line-height: 1.15; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
  .cat b span { font-size: 26px; transition: transform .15s; }
  .cat:hover b span { transform: translateX(5px); }
  .cat.all { background: var(--cream); justify-content: center; align-items: flex-start; gap: 14px; }
  .cat.all .hand { font-size: 34px; line-height: 1; }
  .cat.all b { font-size: 36px; display: block; }

  /* ---------- 3. hand-drawn story ---------- */
  .story { background: var(--cream); overflow: hidden; }
  .story-head { text-align: center; margin-bottom: 70px; }
  .story-head .hand { font-size: 32px; }
  .story-body { position: relative; }
  .story-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .story-path path { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
  .beat {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12%;
    align-items: center; margin-bottom: 90px;
    opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .7s ease;
  }
  .beat:last-child { margin-bottom: 0; }
  .beat.in { opacity: 1; transform: none; }
  .beat:nth-child(odd) .blob { order: 1; }
  .beat:nth-child(even) .blob { order: 2; }
  .beat:nth-child(even) .copy { order: 1; text-align: right; }
  .blob {
    aspect-ratio: 1.15; border: 3px solid var(--ink); background: var(--c);
    border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%;
    padding: 8%; transition: border-radius 1s ease, transform .3s;
  }
  .beat:nth-child(even) .blob { border-radius: 44% 56% 40% 60% / 56% 42% 58% 44%; }
  .beat:hover .blob { transform: rotate(-2deg) scale(1.02); }
  .copy .hand { font-size: 30px; color: #8a4b1f; }
  .copy h3 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.12; margin: 4px 0 14px; }
  .copy p { font-size: 18px; line-height: 1.5; max-width: 30ch; opacity: .8; }
  .beat:nth-child(even) .copy p { margin-left: auto; }

  /* ---------- 4. products in use ---------- */
  .inuse { background: var(--yellow); }
  .inuse-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
  .inuse-head .hand { font-size: 30px; margin-bottom: 10px; }
  .inuse-head .actions { display: flex; align-items: center; gap: 20px; }
  .inuse .track { padding-top: 14px; padding-bottom: 22px; }
  .use { flex: none; width: clamp(270px, 30vw, 400px); scroll-snap-align: start; }
  .use { border: 3px solid var(--ink); border-radius: 28px; overflow: hidden; background: var(--cream); transition: transform .2s; }
  .use:nth-child(3n+1):hover { transform: rotate(-1.5deg); }
  .use:nth-child(3n+2):hover { transform: translateY(-6px); }
  .use:nth-child(3n):hover { transform: rotate(1.5deg); }
  .use svg { display: block; width: 100%; height: auto; }

  @media (max-width: 960px) {
    .cats { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 760px) {
    .wrap { padding: 0 16px; }
    .section { padding: 72px 0; }
    .track { --edge: 16px; }
    .arrows button { width: 46px; height: 46px; }
    .cats { gap: 12px; }
    .cat { padding: 14px; border-radius: 20px; }
    .cat b { font-size: 17px; }
    .cat.all b { font-size: 26px; }
    .use { width: 78vw; }
    .inuse-head .actions .pill { display: none; }
    .story-path { display: none; }
    .beat { grid-template-columns: 1fr; gap: 20px; margin-bottom: 64px; }
    .beat .blob, .beat:nth-child(even) .blob { order: 0; }
    .beat .copy, .beat:nth-child(even) .copy { order: 1; text-align: left; }
    .beat:nth-child(even) .copy p { margin-left: 0; }
  }

  /* ---------- 5. stores ---------- */
  .stores { background: var(--lilac); }
  .stores-head { margin-bottom: 56px; }
  .stores-head .hand { font-size: 30px; margin-bottom: 10px; }
  .store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
  .store {
    background: var(--cream); border: 3px solid var(--ink); border-radius: 28px; padding: 18px 18px 24px;
    box-shadow: 8px 8px 0 var(--ink); transition: transform .2s, box-shadow .2s;
  }
  .store:hover { transform: translate(-3px, -6px); box-shadow: 12px 14px 0 var(--ink); }
  .store .art {
    position: relative; aspect-ratio: 1.25; border: 3px solid var(--ink); border-radius: 20px;
    background: var(--c); padding: 6% 10% 0; display: flex; align-items: flex-end; overflow: hidden;
  }
  .shopsvg { width: 100%; height: auto; display: block; overflow: visible; }
  .shopsvg .t { transform-box: fill-box; }

  /* the shopfront builds itself when the card scrolls into view */
  .shopsvg .sb { transform-origin: 50% 100%; transform: scaleY(0); }
  .shopsvg .sa { transform-origin: 50% 0%; transform: translateY(-90px); opacity: 0; }
  .shopsvg .sw { transform-origin: 50% 50%; transform: scale(0); }
  .shopsvg .sd { transform-origin: 0% 50%; }
  .shopsvg .sf { transform-origin: 0% 100%; transform: scale(0); }
  .store.in .sb { animation: s-rise .55s cubic-bezier(.2,.9,.3,1) forwards; animation-delay: calc(var(--i, 0) * 150ms); }
  .store.in .sa { animation: s-drop .7s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay: calc(var(--i, 0) * 150ms + 450ms); }
  .store.in .sw { animation: s-pop .45s cubic-bezier(.3,1.8,.5,1) forwards; animation-delay: calc(var(--i, 0) * 150ms + 900ms); }
  .store.in .sw.b { animation-delay: calc(var(--i, 0) * 150ms + 1050ms); }
  .store.in .sd { animation: s-open .6s cubic-bezier(.3,1.4,.5,1) forwards; animation-delay: calc(var(--i, 0) * 150ms + 1250ms); }
  .store.in .sf { animation: s-pop .5s cubic-bezier(.3,1.8,.5,1) forwards; animation-delay: calc(var(--i, 0) * 150ms + 1500ms); }
  @keyframes s-rise { to { transform: scaleY(1); } }
  @keyframes s-drop { to { transform: translateY(0); opacity: 1; } }
  @keyframes s-pop  { to { transform: scale(1); } }
  @keyframes s-open { to { transform: scaleX(.22); } }
  .store:hover .shopsvg { animation: wobble .6s ease; transform-origin: 50% 100%; }
  @keyframes wobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-2deg) scale(1.03); } 75% { transform: rotate(2deg) scale(1.03); } }
  .store h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.12; margin: 20px 0 6px; }
  .store .area { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
  .store address { font-style: normal; font-size: 17px; line-height: 1.45; margin: 10px 0 14px; opacity: .85; }
  .store-open { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; margin-bottom: 18px; }
  .store-open::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: #2fa84f; border: 2px solid var(--ink); }
  .store .links { display: flex; flex-wrap: wrap; gap: 10px; }
  .store .pill { padding: 8px 18px; font-size: 15px; }

  @media (max-width: 960px) { .store-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) { .store-grid { grid-template-columns: 1fr; gap: 26px; } .store { box-shadow: 6px 6px 0 var(--ink); } }

  /* ---------- footer ---------- */
  .ticker { background: var(--yellow); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); overflow: hidden; white-space: nowrap; }
  .ticker-inner { display: inline-flex; animation: tick 34s linear infinite; }
  .ticker:hover .ticker-inner { animation-play-state: paused; }
  .ticker span { font-weight: 800; font-size: 22px; padding: 16px 0; }
  .ticker span::after { content: "✦"; margin: 0 28px; }
  @keyframes tick { to { transform: translateX(-50%); } }

  .footer { background: var(--ink); color: var(--cream); padding: 88px 0 0; overflow: hidden; }
  .foot-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 48px; }
  .foot-lead h2 { font-size: clamp(34px, 4vw, 54px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.08; }
  .foot-lead p { margin-top: 14px; font-size: 18px; opacity: .75; max-width: 30ch; line-height: 1.45; }
  .news { position: relative; margin-top: 30px; max-width: 420px; }
  .news::before {
    content: ""; position: absolute; inset: 0; border-radius: 999px; transform: translate(5px, 5px);
    background: conic-gradient(var(--yellow) 25%, transparent 0 50%, var(--yellow) 0 75%, transparent 0) 0 0 / 7px 7px;
  }
  .news form { position: relative; z-index: 1; display: flex; background: var(--cream); border: 3px solid var(--cream); border-radius: 999px; overflow: hidden; }
  .news input { flex: 1; min-width: 0; border: 0; background: none; padding: 15px 20px; font: 500 17px "Bricolage Grotesque", sans-serif; color: var(--ink); outline: none; }
  .news input::placeholder { color: rgba(29,26,23,.55); }
  .news button { border: 0; border-left: 3px solid var(--ink); background: var(--yellow); color: var(--ink); padding: 0 22px; font: 800 16px "Bricolage Grotesque", sans-serif; cursor: pointer; }
  .news button:hover { background: var(--pink); }
  .news-msg { margin-top: 18px; min-height: 1.4em; font-family: "Caveat", cursive; font-weight: 700; font-size: 26px; color: var(--yellow); }
  .foot-col h4 { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--yellow); margin-bottom: 18px; }
  .foot-col ul { list-style: none; }
  .foot-col a { display: inline-block; color: var(--cream); text-decoration: none; font-size: 19px; padding: 6px 0; background: linear-gradient(var(--yellow), var(--yellow)) 0 100% / 0 2px no-repeat; transition: background-size .2s; }
  .foot-col a:hover { background-size: 100% 2px; }
  .foot-trust { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 64px; padding-top: 36px; border-top: 2px dashed rgba(255,248,230,.3); }
  .foot-trust span { border: 2px solid rgba(255,248,230,.5); border-radius: 999px; padding: 9px 18px; font-size: 16px; font-weight: 500; }
  .foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 28px; padding: 26px 0; font-size: 15px; opacity: .8; }
  .foot-bottom a { color: var(--cream); }
  .foot-bottom .top { background: none; border: 2px solid var(--cream); border-radius: 999px; color: var(--cream); padding: 7px 16px; font: 800 14px "Bricolage Grotesque", sans-serif; cursor: pointer; }
  .foot-bottom .top:hover { background: var(--cream); color: var(--ink); }
  .bigmark { position: relative; padding: 10px 0 0; text-align: center; line-height: .9; }
  .bigmark b {
    display: block; font-weight: 800; font-size: 23.5vw; letter-spacing: -0.02em; line-height: 1;
    color: var(--yellow); padding-bottom: .16em; user-select: none;
  }
  .bigmark .bob { position: absolute; width: 11vw; max-width: 160px; animation: bob 3.2s ease-in-out infinite; }
  .bigmark .bob svg { width: 100%; height: auto; display: block; }
  .bigmark .b1 { left: 8%; top: -3%; }
  .bigmark .b2 { right: 10%; top: -9%; animation-delay: -1s; }
  .bigmark .b3 { left: 52%; top: -12%; animation-delay: -2s; }
  @keyframes bob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-16px) rotate(6deg); } }

  @media (max-width: 960px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-lead { grid-column: 1 / -1; } }
  @media (max-width: 760px) {
    .footer { padding-top: 64px; }
    .ticker span { font-size: 18px; padding: 13px 0; }
    .foot-top { gap: 36px 20px; }
    .foot-col a { font-size: 18px; }
    .foot-trust { margin-top: 44px; }
    .bigmark .bob { width: 15vw; }
  }

  /* ---------- small screens ---------- */
  @media (max-width: 760px) {
    .logo { font-size: 26px; }
    .menu-btn { display: block; }
    .tabs { display: none; }
    svg .cap { font-size: 40px; }
    .montage { inset: var(--nav-h) 0 38% 0; }
    .headline { left: var(--gutter); right: calc(var(--gutter) + 28px); width: auto; bottom: clamp(96px, 20svh, 150px); font-size: clamp(28px, 8vw, 38px); }
    .dots { left: var(--gutter); bottom: 30px; }
    .dots i { width: 28px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .scene *, .dots i::after { animation: none !important; }
    .headline .w > span { animation: none !important; transform: none; }
    .shopsvg .t { animation: none !important; opacity: 1; transform: none; }
    .ticker-inner, .bigmark .bob { animation: none !important; }
    .shopsvg .sd { transform: scaleX(.22); }
    .scene .d, .scene .stream { stroke-dashoffset: 0; }
    .scene .pop, .scene .puddle, .scene .out { transform: none; }
    .scene .fade, .scene .chip, .scene .berry { opacity: 1; }
  }

.card a.art { display: block; color: inherit; text-decoration: none; }
.card h3 a { color: inherit; text-decoration: none; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 2px no-repeat; transition: background-size .2s; }
.card h3 a:hover { background-size: 100% 2px; }

/* ================= product page ================= */
.pdp { background: var(--cream); padding-top: calc(var(--nav-h) + 26px); }
.crumbs { font-size: 15px; opacity: .75; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.crumbs a { color: var(--ink); }
.pdp-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; margin-top: 26px; padding-bottom: 96px; }

.gallery { position: sticky; top: calc(var(--nav-h) + 24px); }
.stage {
  position: relative; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 32px;
  background: var(--c); overflow: hidden; box-shadow: 8px 8px 0 var(--ink);
}
.stage svg { width: 100%; height: 100%; display: block; }
.stage .view { animation: viewin .5s cubic-bezier(.3,1.4,.5,1); transform-origin: 50% 60%; }
@keyframes viewin { from { opacity: 0; transform: scale(.88) rotate(-3deg); } }
.stage .float { animation: float 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 90%; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
.stage .photo-tag {
  position: absolute; left: 16px; bottom: 14px; font: 700 22px "Caveat", cursive;
  background: var(--cream); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 14px;
}
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.thumbs button {
  aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 20px; background: var(--c);
  padding: 0; cursor: pointer; overflow: hidden; transition: transform .15s, box-shadow .15s;
}
.thumbs button svg { width: 100%; height: 100%; display: block; }
.thumbs button:hover { transform: translateY(-3px); }
.thumbs button.on { box-shadow: 5px 5px 0 var(--ink); transform: translate(-2px, -2px); }

.buy .hand { font-size: 30px; color: #8a4b1f; }
.buy h1 { font-size: clamp(36px, 4.4vw, 62px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.08; margin: 4px 0 12px; }
.p-sub { font-size: 19px; line-height: 1.5; opacity: .8; max-width: 38ch; }
.price-row { display: flex; align-items: baseline; gap: 14px; margin: 22px 0 6px; }
.price-row b { font-size: 36px; font-weight: 800; }
.price-row s { font-size: 21px; opacity: .5; }
.price-row small { font-size: 15px; opacity: .65; }
.field { margin-top: 26px; }
.field > label, .field > .lbl { display: block; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }
.sizes { display: flex; flex-wrap: wrap; gap: 10px; }
.sizes button {
  border: 3px solid var(--ink); border-radius: 999px; background: var(--cream); color: var(--ink);
  padding: 10px 22px; font: 800 17px "Bricolage Grotesque", sans-serif; cursor: pointer; transition: transform .12s, background-color .12s, color .12s;
}
.sizes button:hover { transform: translateY(-2px); }
.sizes button.on { background: var(--ink); color: var(--cream); }
.qty { display: inline-flex; align-items: center; border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; }
.qty button { width: 48px; height: 46px; border: 0; background: none; font: 800 24px "Bricolage Grotesque", sans-serif; cursor: pointer; color: var(--ink); }
.qty button:hover { background: var(--yellow); }
.qty output { min-width: 48px; text-align: center; font-weight: 800; font-size: 19px; }
.cta { position: relative; margin: 34px 0 10px; }
.cta::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px; transform: translate(6px, 6px);
  background: conic-gradient(var(--ink) 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0) 0 0 / 7px 7px;
}
.cta button {
  position: relative; z-index: 1; width: 100%; border: 3px solid var(--ink); border-radius: 999px;
  background: var(--yellow); color: var(--ink); padding: 20px 14px; cursor: pointer;
  font: 800 19px "Bricolage Grotesque", sans-serif; letter-spacing: .03em; text-transform: uppercase;
  transition: transform .12s, background-color .12s;
}
.cta button:hover { background: var(--pink); transform: translate(-2px, -2px); }
.cta button:active { transform: translate(3px, 3px); }
.perks { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 30px 0 8px; }
.perks li { font-size: 16px; display: flex; gap: 10px; align-items: flex-start; line-height: 1.35; }
.perks li::before { content: "✦"; color: #e0613f; }
.acc { margin-top: 26px; border-top: 2px dashed var(--ink); }
.acc details { border-bottom: 2px dashed var(--ink); }
.acc summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0; font-size: 22px; font-weight: 800;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-size: 30px; line-height: 1; }
.acc details[open] summary::after { content: "—"; }
.acc .body { padding: 0 0 22px; font-size: 17px; line-height: 1.6; opacity: .85; max-width: 52ch; }

/* nutrition */
.nutri { background: var(--green); border-top: 3px solid var(--ink); }
.nutri-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.nutri .hand { font-size: 30px; margin-bottom: 10px; }
.nutri-copy p { font-size: 19px; line-height: 1.55; margin-top: 20px; max-width: 36ch; opacity: .85; }
.facts { background: var(--cream); border: 3px solid var(--ink); border-radius: 24px; padding: 22px 26px 18px; box-shadow: 8px 8px 0 var(--ink); max-width: 480px; justify-self: end; width: 100%; }
.facts h3 { font-size: 40px; font-weight: 800; line-height: 1; border-bottom: 10px solid var(--ink); padding-bottom: 10px; letter-spacing: -0.01em; }
.facts .serv { display: flex; justify-content: space-between; font-weight: 800; font-size: 17px; padding: 10px 0; border-bottom: 5px solid var(--ink); }
.facts table { width: 100%; border-collapse: collapse; }
.facts th, .facts td { text-align: left; padding: 10px 0; font-size: 18px; border-bottom: 2px solid var(--ink); }
.facts td { text-align: right; font-weight: 800; }
.facts th { font-weight: 500; }
.facts tr.sub th { padding-left: 20px; font-size: 16px; opacity: .85; }
.facts .note { font-family: "Caveat", cursive; font-weight: 700; font-size: 22px; margin-top: 12px; }

/* reels */
.reels { background: var(--ink); color: var(--cream); }
.reels-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.reels-head .hand { font-size: 30px; color: var(--yellow); margin-bottom: 10px; }
.reels .arrows button { border-color: var(--cream); background: none; color: var(--cream); }
.reels .arrows button:hover:not(:disabled) { background: var(--cream); color: var(--ink); }
.reel { flex: none; width: clamp(220px, 21vw, 280px); scroll-snap-align: start; }
.reel-box {
  position: relative; aspect-ratio: 9 / 16; border-radius: 26px; border: 3px solid var(--cream);
  background: var(--c); color: var(--ink); overflow: hidden; cursor: pointer; padding: 0; width: 100%; display: block; text-align: left;
  transition: transform .2s;
}
.reel-box:hover { transform: translateY(-6px) rotate(-1deg); }
.reel-box svg.face { position: absolute; inset: 0; width: 100%; height: 100%; }
.reel-top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; align-items: center; gap: 10px; z-index: 2; }
.reel-top .av { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--cream); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.reel-top b { font-size: 15px; background: var(--cream); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 11px; }
.reel-play {
  position: absolute; left: 50%; top: 46%; width: 64px; height: 64px; margin: -32px 0 0 -32px; z-index: 2;
  background: var(--cream); border: 3px solid var(--ink); border-radius: 50%; display: grid; place-items: center;
  transition: transform .2s, opacity .2s;
}
.reel-play::after { content: ""; border-left: 20px solid var(--ink); border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 5px; }
.reel-box:hover .reel-play { transform: scale(1.12); }
.reel-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 14px 18px; z-index: 2; background: linear-gradient(transparent, rgba(255,248,230,.0)); }
.reel-foot .tag { display: inline-block; font: 700 25px "Caveat", cursive; background: var(--cream); border: 2px solid var(--ink); border-radius: 14px; padding: 0 12px; transform: rotate(-2deg); }
.reel-foot .meta { display: flex; gap: 14px; margin-top: 10px; font-weight: 800; font-size: 14px; }
.reel-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: rgba(29,26,23,.2); z-index: 3; }
.reel-bar i { display: block; height: 100%; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.reel-box.playing .reel-play { opacity: 0; transform: scale(.4); }
.reel-box.playing .reel-bar i { animation: reelbar 8s linear forwards; }
.reel-box.playing svg.face .mouth { animation: chew .35s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.reel-box.playing .heart { animation: heartup 1.6s ease-out infinite; }
@keyframes reelbar { to { transform: scaleX(1); } }
@keyframes chew { 50% { transform: scaleY(.45); } }
.heart { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes heartup { 0% { opacity: 0; transform: translateY(20px) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-80px) scale(1.2); } }
.reel p { font-size: 15px; margin-top: 12px; opacity: .8; line-height: 1.4; }

/* more products */
.more { background: var(--pink); }

/* sticky buy bar (phones) */
.sticky { display: none; }

@media (max-width: 960px) {
  .pdp-grid, .nutri-grid { grid-template-columns: 1fr; gap: 40px; }
  .gallery { position: static; }
  .facts { justify-self: stretch; max-width: none; }
}
@media (max-width: 760px) {
  .pdp { padding-top: calc(var(--nav-h) + 14px); }
  .pdp-grid { padding-bottom: 64px; }
  .perks { grid-template-columns: 1fr; }
  .reel { width: 64vw; }
  .reels .arrows { display: none; }
  .sticky {
    display: flex; align-items: center; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--cream); border-top: 3px solid var(--ink); padding: 12px var(--gutter);
    transform: translateY(110%); transition: transform .25s;
  }
  .sticky.show { transform: none; }
  .sticky div { flex: 1; min-width: 0; font-weight: 800; line-height: 1.2; }
  .sticky div span { display: block; font-weight: 500; font-size: 14px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sticky button { border: 3px solid var(--ink); border-radius: 999px; background: var(--yellow); color: var(--ink); padding: 12px 22px; font: 800 16px "Bricolage Grotesque", sans-serif; cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) {
  .stage .view, .stage .float, .reel-box.playing .reel-bar i, .reel-box.playing .heart, .reel-box.playing svg.face .mouth { animation: none !important; }
}

/* ================= collection page ================= */
.shop-page { background: var(--cream); padding-top: var(--nav-h); }
.coll-hero { background: var(--c, var(--yellow)); border-bottom: 3px solid var(--ink); transition: background-color .4s; }
.coll-hero-in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; padding-top: 34px; padding-bottom: 46px; min-height: 340px; }
.coll-copy .hand { font-size: 30px; margin-top: 18px; }
.coll-copy h1 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(46px, 7.4vw, 104px); margin: 2px 0 14px; }
.coll-copy p { font-size: 20px; line-height: 1.5; max-width: 34ch; opacity: .85; }
.coll-art svg { width: 100%; height: auto; max-height: 300px; display: block; overflow: visible; }
.coll-art .bg { transform-box: fill-box; transform-origin: 50% 90%; animation: float 4.6s ease-in-out infinite; }
.coll-art .bg:nth-child(2) { animation-delay: -1.5s; }
.coll-art .bg:nth-child(3) { animation-delay: -3s; }
.coll-art .bg:nth-child(4) { animation-delay: -2.2s; }

.filterbar { position: sticky; top: var(--nav-h); z-index: 9; background: var(--cream); border-bottom: 3px solid var(--ink); }
.fb-in { display: flex; align-items: center; gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.chips { display: flex; gap: 10px; overflow-x: auto; flex: 0 1 auto; min-width: 0; scrollbar-width: none; padding: 4px 2px; }
.chips::-webkit-scrollbar { display: none; }
.chips button {
  flex: none; border: 3px solid var(--ink); border-radius: 999px; background: var(--cream); color: var(--ink);
  padding: 8px 18px; font: 800 16px "Bricolage Grotesque", sans-serif; cursor: pointer; white-space: nowrap;
  transition: transform .12s, background-color .12s, color .12s;
}
.chips button:hover { transform: translateY(-2px); }
.chips button.on { background: var(--ink); color: var(--cream); }

.sort {
  flex: 1 1 200px; min-width: 200px; appearance: none; border: 3px solid var(--ink); border-radius: 999px; cursor: pointer;
  background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231d1a17' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 18px center;
  padding: 8px 44px 8px 20px; font: 800 16px "Bricolage Grotesque", sans-serif; color: var(--ink);
}

.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; padding: 48px 0 110px; }
.pgrid .card { width: auto; animation: cardin .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes cardin { from { opacity: 0; transform: translateY(28px) scale(.95); } }
.pgrid .card .art { padding: 14%; }

@media (max-width: 1100px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .coll-hero-in { grid-template-columns: 1fr; min-height: 0; gap: 0; padding-top: 16px; padding-bottom: 18px; }
  .coll-art, .coll-copy .hand, .coll-copy p, .coll-copy .crumbs { display: none; }
  .coll-copy h1 { font-size: clamp(40px, 12vw, 56px); margin: 0; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; padding-top: 32px; }
}
@media (max-width: 760px) {
  .fb-in { flex-wrap: wrap; gap: 10px; }
  .chips { flex-basis: 100%; }
  .sort { flex-basis: 100%; }
  .pgrid .card h3 { font-size: 18px; }
  .pgrid .card .price { font-size: 18px; }
  .pgrid .card .pill { padding: 7px 14px; font-size: 14px; }
  .pgrid .card .art { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .pgrid .card, .coll-art .bg { animation: none !important; } }

/* ================= cart page + toast ================= */
.cart-page { background: var(--cream); padding-top: calc(var(--nav-h) + 26px); }
.cart-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin: 14px 0 28px; }
.cart-head .hand { font-size: 30px; }
.ship { border: 3px solid var(--ink); border-radius: 20px; background: var(--yellow); padding: 16px 22px 20px; margin-bottom: 30px; }
.ship p { font-size: 18px; font-weight: 500; margin-bottom: 12px; }
.ship p b { font-weight: 800; }
.ship-bar { height: 14px; border: 3px solid var(--ink); border-radius: 999px; background: var(--cream); overflow: hidden; }
.ship-bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .6s cubic-bezier(.3,1.2,.5,1); }
.cart-grid { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; padding-bottom: 90px; }
.lines { border-top: 2px dashed var(--ink); }
.line {
  display: grid; grid-template-columns: 104px 1fr auto auto; gap: 8px 22px; align-items: center;
  padding: 22px 0; border-bottom: 2px dashed var(--ink);
}
.cart-grid:not(.seen) .line { animation: cardin .5s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.line .thumb { width: 104px; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 20px; padding: 12%; display: block; }
.line .thumb svg { width: 100%; height: 100%; display: block; }
.line h3 { font-size: 21px; font-weight: 800; line-height: 1.2; }
.line h3 a { color: inherit; text-decoration: none; }
.line h3 a:hover { text-decoration: underline; }
.line .meta { font-size: 15px; opacity: .7; margin-top: 4px; }
.line .meta s { opacity: .8; margin-left: 6px; }
.line .qty-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.line .qty { border-width: 2.5px; }
.line .qty button { width: 38px; height: 36px; font-size: 20px; }
.line .qty output { min-width: 34px; font-size: 17px; }
.line .rm { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); font: 500 14px "Bricolage Grotesque", sans-serif; text-decoration: underline; opacity: .7; }
.line .rm:hover { opacity: 1; }
.line .total { font-size: 21px; font-weight: 800; min-width: 84px; text-align: right; }

.summary { position: sticky; top: calc(var(--nav-h) + 24px); background: var(--cream); border: 3px solid var(--ink); border-radius: 26px; padding: 26px 26px 22px; box-shadow: 8px 8px 0 var(--ink); }
.summary h2 { font-size: 26px; font-weight: 800; margin-bottom: 14px; }
.summary dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; font-size: 18px; border-bottom: 2px dashed var(--ink); }
.summary dd { font-weight: 800; text-align: right; }
.summary dl > div.total { border-bottom: 0; font-size: 24px; font-weight: 800; padding-top: 16px; }
.summary .fine { font-size: 14px; opacity: .7; margin: 4px 0 4px; line-height: 1.4; }
.summary .cta { margin: 22px 0 14px; }
.summary .cta-link {
  position: relative; z-index: 1; display: block; text-align: center; text-decoration: none; border: 3px solid var(--ink);
  border-radius: 999px; background: var(--yellow); color: var(--ink); padding: 19px 14px;
  font: 800 19px "Bricolage Grotesque", sans-serif; letter-spacing: .04em; text-transform: uppercase; transition: transform .12s, background-color .12s;
}
.summary .cta-link:hover { background: var(--pink); transform: translate(-2px, -2px); }
.summary .keep { display: block; text-align: center; color: var(--ink); font-weight: 500; font-size: 16px; }
.summary .perks { grid-template-columns: 1fr; margin: 18px 0 0; }

.empty { text-align: center; padding: 30px 0 100px; }
.empty svg { width: 220px; height: auto; margin: 0 auto 10px; display: block; animation: float 4.2s ease-in-out infinite; }
.empty h2 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -0.01em; }
.empty p { font-size: 19px; opacity: .75; margin: 10px 0 26px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 140%);
  background: var(--ink); color: var(--cream); border-radius: 999px; padding: 14px 24px; font-weight: 800; font-size: 16px;
  display: flex; gap: 16px; align-items: center; white-space: nowrap; transition: transform .35s cubic-bezier(.3,1.5,.5,1); box-shadow: 0 6px 0 rgba(0,0,0,.2);
}
.toast.show { transform: translate(-50%, 0); }
.toast a { color: var(--yellow); }

@media (max-width: 960px) { .cart-grid { grid-template-columns: 1fr; gap: 36px; } .summary { position: static; } }
@media (max-width: 640px) {
  .line { grid-template-columns: 78px 1fr; grid-template-areas: "t i" "t q"; gap: 10px 16px; align-items: start; }
  .line .thumb { grid-area: t; width: 78px; border-radius: 16px; }
  .line .info { grid-area: i; }
  .line .qty-wrap { grid-area: q; flex-direction: row; justify-content: space-between; width: 100%; }
  .line .total { display: none; }
  .line .info .mobile-total { display: block; }
  .toast { bottom: 16px; max-width: calc(100vw - 24px); }
}
.line .info .mobile-total { display: none; font-weight: 800; font-size: 19px; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .cart-grid .line, .empty svg { animation: none !important; } .ship-bar i, .toast { transition: none; } }

/* ================= checkout ================= */
.co-page { background: var(--cream); padding-top: calc(var(--nav-h) + 26px); min-height: 100vh; }
.co-grid { display: grid; grid-template-columns: 1fr 420px; gap: 56px; align-items: start; padding: 18px 0 90px; }
.co-form .h2 { margin-bottom: 26px; }
.co-card { border: 3px solid var(--ink); border-radius: 26px; background: #fff; padding: 26px 28px 28px; margin-bottom: 24px; }
.co-card > h2 { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 800; margin-bottom: 20px; }
.co-card > h2 span { width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); display: grid; place-items: center; font-size: 18px; }
.f { margin-bottom: 16px; }
.f label { display: block; font-size: 15px; font-weight: 800; margin-bottom: 7px; }
.f label small { font-weight: 500; opacity: .6; }
.f input, .f select, .phone {
  width: 100%; border: 3px solid var(--ink); border-radius: 14px; background: var(--cream); color: var(--ink);
  padding: 13px 16px; font: 500 17px "Bricolage Grotesque", sans-serif; outline: none; transition: box-shadow .12s, background-color .12s;
}
.f select { appearance: none; padding-right: 44px; background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231d1a17' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center; }
.f input:focus, .f select:focus, .phone:focus-within { background: #fff; box-shadow: 4px 4px 0 var(--yellow), 4px 4px 0 3px var(--ink); }
.phone { display: flex; align-items: center; gap: 12px; padding: 0 16px 0 0; }
.phone span { padding: 13px 0 13px 16px; font-weight: 800; border-right: 3px solid var(--ink); padding-right: 12px; }
.phone input { border: 0; box-shadow: none !important; background: none; padding: 13px 0; border-radius: 0; }
.f em { display: none; font-style: normal; font-size: 14px; font-weight: 800; color: #d9381e; margin-top: 6px; }
.f.bad input, .f.bad select, .f.bad .phone { border-color: #d9381e; background: #fff1ee; }
.f.bad em { display: block; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--ink); flex: none; }
.pay { display: grid; gap: 12px; margin-bottom: 26px; }
.opt { display: flex; align-items: center; gap: 14px; border: 3px solid var(--ink); border-radius: 18px; padding: 16px 18px; cursor: pointer; background: var(--cream); transition: background-color .12s, transform .12s; }
.opt:hover { transform: translateY(-2px); }
.opt.on { background: var(--yellow); }
.opt input { width: 22px; height: 22px; accent-color: var(--ink); flex: none; }
.opt .t b { display: block; font-size: 18px; }
.opt .t small { font-size: 14px; opacity: .75; }
.co-submit {
  width: 100%; border: 3px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--cream); padding: 20px 14px;
  font: 800 19px "Bricolage Grotesque", sans-serif; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; box-shadow: 6px 6px 0 var(--yellow), 6px 6px 0 3px var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.co-submit:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--yellow), 8px 8px 0 3px var(--ink); }
.co-submit:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--yellow), 2px 2px 0 3px var(--ink); }
.co-submit:disabled { opacity: .6; cursor: wait; }
.co-card .fine { font-size: 14px; opacity: .65; text-align: center; margin-top: 18px; }

.co-sum { position: sticky; top: calc(var(--nav-h) + 24px); background: var(--green); border: 3px solid var(--ink); border-radius: 26px; box-shadow: 8px 8px 0 var(--ink); overflow: hidden; }
.sum-toggle { display: none; }
.sum-body { padding: 26px; }
.sum-lines { display: grid; gap: 16px; margin-bottom: 20px; max-height: 340px; overflow: auto; padding: 8px 8px 0 0; }
.sl { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; }
.sl .th { position: relative; width: 64px; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 16px; padding: 10%; }
.sl .th svg { width: 100%; height: 100%; display: block; }
.sl .th b { position: absolute; top: -9px; right: -9px; min-width: 24px; height: 24px; border-radius: 12px; background: var(--ink); color: var(--cream); font-size: 13px; display: grid; place-items: center; padding: 0 6px; }
.sl .n { font-weight: 800; font-size: 16px; line-height: 1.2; }
.sl .s { font-size: 14px; opacity: .7; margin-top: 2px; }
.sl .p { font-weight: 800; font-size: 16px; }
.co-sum dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; font-size: 17px; border-top: 2px dashed var(--ink); }
.co-sum dd { font-weight: 800; }
.co-sum dl > div.total { font-size: 24px; font-weight: 800; padding-top: 16px; border-top: 3px solid var(--ink); margin-top: 6px; }
.co-sum .keep { display: block; text-align: center; margin-top: 14px; color: var(--ink); font-size: 15px; }

.co-done { text-align: center; padding: 20px 0 110px; max-width: 640px; margin: 0 auto; }
.co-done svg { width: 240px; height: auto; display: block; margin: 0 auto 6px; overflow: visible; }
.co-done .box { transform-box: fill-box; transform-origin: 50% 100%; animation: boxin .7s cubic-bezier(.3,1.6,.5,1) both; }
.co-done .badge { transform-box: fill-box; transform-origin: 50% 50%; animation: s-pop .5s cubic-bezier(.3,1.8,.5,1) .5s both; }
.co-done .tick { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .5s ease-out .95s forwards; }
.co-done .confetti { transform-box: fill-box; transform-origin: 50% 50%; animation: s-pop .5s cubic-bezier(.3,1.8,.5,1) 1.1s both; }
@keyframes boxin { from { opacity: 0; transform: translateY(40px) scale(.7); } }
.co-done .hand { font-size: 32px; color: #2f8a3f; }
.co-done h2 { font-size: clamp(36px, 5.6vw, 64px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.08; margin: 4px 0 12px; }
.co-done p { font-size: 19px; line-height: 1.5; opacity: .8; }
.done-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; text-align: left; margin: 30px 0; border: 3px solid var(--ink); border-radius: 24px; background: #fff; box-shadow: 8px 8px 0 var(--ink); overflow: hidden; }
.done-card > div { padding: 18px 22px; border-bottom: 2px dashed var(--ink); }
.done-card > div:nth-child(odd):not(.wide) { border-right: 2px dashed var(--ink); }
.done-card > div.wide { grid-column: 1 / -1; border-bottom: 0; }
.done-card small { display: block; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; opacity: .6; margin-bottom: 4px; }
.done-card b { font-size: 19px; line-height: 1.35; }
.done-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.slim { background: var(--ink); color: var(--cream); padding: 22px 0; font-size: 15px; }
.slim .wrap { display: flex; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap; }
.slim a { color: var(--cream); margin-left: 22px; }
.slim nav a:first-child { margin-left: 0; }

@media (max-width: 960px) {
  .co-grid { grid-template-columns: 1fr; gap: 24px; }
  .co-sum { position: static; order: -1; box-shadow: 5px 5px 0 var(--ink); }
  .sum-toggle { display: flex; width: 100%; align-items: center; gap: 12px; background: none; border: 0; padding: 18px 22px; cursor: pointer; color: var(--ink); font: 800 18px "Bricolage Grotesque", sans-serif; text-align: left; }
  .sum-toggle b { margin-left: auto; font-size: 20px; }
  .sum-toggle i { font-style: normal; transition: transform .2s; }
  .sum-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
  .sum-body { display: none; padding-top: 6px; border-top: 3px solid var(--ink); }
  .co-sum.open .sum-body { display: block; }
}
@media (max-width: 640px) {
  .co-card { padding: 22px 18px 24px; border-radius: 22px; }
  .row2 { grid-template-columns: 1fr; gap: 0; }
  .done-card { grid-template-columns: 1fr; }
  .done-card > div:nth-child(odd):not(.wide) { border-right: 0; }
  .slim a { margin-left: 14px; }
}
@media (prefers-reduced-motion: reduce) { .co-done .box, .co-done .badge, .co-done .confetti, .co-done .tick { animation: none !important; stroke-dashoffset: 0; } }

/* product cards: every card and its info block is the same size, whatever the name length */
.card { display: flex; flex-direction: column; }
.card h3 { min-height: 2.4em; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .size { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .row { margin-top: auto; padding-top: 12px; }

.pgrid .card { min-width: 0; }


/* ================= phone menu (full screen) ================= */
.drawer { display: none; }
@media (max-width: 760px) {
  .drawer {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 50;
    background: var(--yellow); color: var(--ink);
    visibility: hidden; pointer-events: none;
    clip-path: circle(0 at calc(100% - var(--gutter) - 20px) 38px);          /* grows out of the hamburger */
    transition: clip-path .6s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .6s;
  }
  .drawer.open {
    visibility: visible; pointer-events: auto;
    clip-path: circle(160% at calc(100% - var(--gutter) - 20px) 38px);
    transition: clip-path .6s cubic-bezier(.7, 0, .2, 1), visibility 0s;
  }
  .drawer .rv { opacity: 0; transform: translateY(24px); }
  .drawer.open .rv {
    opacity: 1; transform: none;
    transition: opacity .5s ease, transform .55s cubic-bezier(.3, 1.3, .5, 1);
    transition-delay: calc(.3s + var(--d, 0) * 55ms);
  }

  /* top bar mirrors the page nav: logo left, X exactly where the hamburger was */
  .dr-bar { flex: none; display: flex; align-items: center; gap: 12px; height: var(--nav-h); padding: 0 var(--gutter); border-bottom: 3px solid var(--ink); }
  .dr-bar .logo { margin-right: auto; }
  .dr-cart { display: inline-flex; align-items: center; gap: 8px; border: 3px solid var(--ink); border-radius: 999px; padding: 4px 14px; color: var(--ink); text-decoration: none; font: 800 16px "Bricolage Grotesque", sans-serif; }
  .dr-close { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; padding: 0; }
  .dr-close svg { width: 26px; height: 26px; display: block; }

  .dr-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 26px var(--gutter) 0; }
  .dr-label { font: 700 30px "Caveat", cursive; margin-bottom: 14px; }

  /* two featured products */
  .dr-feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .dr-card { display: block; color: var(--ink); text-decoration: none; min-width: 0; }
  .dr-card .pic { position: relative; display: block; aspect-ratio: 1; background: var(--c); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 5px 5px 0 var(--ink); }
  .dr-card:nth-child(1) .pic { transform: rotate(-2deg); }
  .dr-card:nth-child(2) .pic { transform: rotate(2deg); }
  .dr-card .pic svg { position: absolute; inset: 12%; width: 76%; height: 76%; }
  .dr-card b { display: block; margin-top: 16px; font-size: 19px; line-height: 1.15; }
  .dr-card small { display: block; margin-top: 3px; font-size: 15px; opacity: .7; }

  .dr-cta { position: relative; margin: 30px 0 18px; }
  .dr-cta::before {
    content: ""; position: absolute; inset: 0; border-radius: 999px; transform: translate(6px, 6px);
    background: conic-gradient(var(--ink) 25%, transparent 0 50%, var(--ink) 0 75%, transparent 0) 0 0 / 7px 7px;
  }
  .dr-cta a { position: relative; z-index: 1; display: block; text-align: center; text-decoration: none; background: var(--cream); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 18px 12px; font: 800 18px "Bricolage Grotesque", sans-serif; letter-spacing: .04em; text-transform: uppercase; }

  /* categories, each with its sketch */
  .dr-cats { list-style: none; }
  .dr-cats a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; color: var(--ink); text-decoration: none; font-size: 27px; font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; border-bottom: 2px dashed rgba(29,26,23,.35); }
  .dr-cats svg { width: 48px; height: 48px; flex: none; transition: transform .3s cubic-bezier(.3, 1.7, .5, 1); }
  .dr-cats a:active svg { transform: rotate(-12deg) scale(1.2); }
  .dr-cats a:active { background: rgba(255,248,230,.6); }

  .dr-links { list-style: none; margin-top: 28px; border-top: 3px solid var(--ink); }
  .dr-links li { border-bottom: 2px dashed var(--ink); }
  .dr-links a { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; color: var(--ink); text-decoration: none; font-size: 32px; font-weight: 800; letter-spacing: -0.015em; }
  .dr-links a span { font-size: 26px; }

  .dr-store { display: flex; align-items: center; gap: 18px; margin-top: 30px; padding: 16px 20px; color: var(--ink); text-decoration: none; background: var(--cream); border: 3px solid var(--ink); border-radius: 24px; box-shadow: 6px 6px 0 var(--ink); }
  .dr-store svg { width: 80px; height: auto; flex: none; overflow: visible; }
  .dr-store b { display: block; font-size: 21px; line-height: 1.15; }
  .dr-store small { display: block; margin-top: 4px; font-size: 15px; font-weight: 800; opacity: .7; }

  .dr-social { display: flex; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
  .dr-social .hand { font-size: 32px; margin-right: 4px; }
  .dr-social .pill { padding: 9px 20px; }

  .dr-ticker { margin: 34px calc(var(--gutter) * -1) 0; background: var(--ink); color: var(--cream); overflow: hidden; white-space: nowrap; }
  .dr-ticker .ticker-inner { display: inline-flex; animation: tick 40s linear infinite; }
  .dr-ticker span { font-weight: 800; font-size: 17px; padding: 15px 0; }
  .dr-ticker span::after { content: "✦"; margin: 0 24px; color: var(--yellow); }
}
@media (max-width: 760px) {
  /* the footer's big wordmark, in ink, with the same bobbing sketches */
  .drawer .bigmark { margin-top: 18px; padding-top: 62px; }
  .drawer .bigmark b { color: var(--ink); font-size: 24.5vw; }
  .drawer .bigmark .bob { width: 15vw; }
  .drawer .bigmark .b1 { left: 6%; top: 4px; }
  .drawer .bigmark .b2 { right: 8%; top: -2px; }
  .drawer .bigmark .b3 { left: 46%; top: -8px; }
  .drawer .bigmark + .dr-ticker { margin-top: 14px; }
  .dr-store b { text-wrap: balance; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer.open { transition: none; }
  .drawer .rv { opacity: 1; transform: none; transition: none; }
  .dr-ticker .ticker-inner { animation: none; }
}

/* cart icon next to the menu button on phones (and inside the open menu) */
.nav-cart { display: none; }
.cart-badge {
  position: absolute; top: 1px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--ink); color: var(--cream); font: 800 12px/19px "Bricolage Grotesque", sans-serif; text-align: center;
}
.cart-badge[hidden] { display: none; }
@media (max-width: 760px) {
  .nav-cart { position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; margin-right: 16px; }
  .nav-cart svg { width: 28px; height: 30px; display: block; }
  .dr-cart { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 0; margin-right: 16px; }
  .dr-cart svg { width: 28px; height: 30px; display: block; }
}

/* card buttons never wrap */
.card .pill { white-space: nowrap; text-align: center; }
.card .price { white-space: nowrap; }

/* ================= about page ================= */
.about-page { background: var(--cream); padding-top: var(--nav-h); }
.ab-hero { background: var(--lilac); border-bottom: 3px solid var(--ink); }
.ab-hero-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding-top: 34px; padding-bottom: 60px; min-height: 460px; }
.ab-hero .hand { font-size: 32px; margin-top: 22px; }
.ab-hero h1 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.04; font-size: clamp(44px, 6.6vw, 98px); margin: 4px 0 18px; }
.ab-hero p { font-size: 21px; line-height: 1.5; max-width: 32ch; opacity: .85; }
.ab-art svg { width: 100%; height: auto; max-height: 340px; display: block; overflow: visible; }
.ab-art .bg { transform-box: fill-box; transform-origin: 50% 90%; animation: float 4.6s ease-in-out infinite; }
.ab-art .bg:nth-child(2) { animation-delay: -1.5s; }
.ab-art .bg:nth-child(3) { animation-delay: -3s; }
.ab-art .bg:nth-child(4) { animation-delay: -2.2s; }

.ab-mission { padding: 110px 0 100px; text-align: center; }
.ab-mission .hand { font-size: 32px; margin-bottom: 14px; }
.ab-mission .big { font-size: clamp(32px, 5vw, 64px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; max-width: 18ch; margin: 0 auto; }
.ab-badges { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 44px; }
.ab-badges span { background: var(--c); border: 3px solid var(--ink); border-radius: 999px; padding: 12px 26px; font-weight: 800; font-size: 20px; box-shadow: 5px 5px 0 var(--ink); transform: rotate(var(--r)); transition: transform .2s; }
.ab-badges span:hover { transform: rotate(0) translateY(-4px); }

.ab-story { border-top: 3px solid var(--ink); }
.ab-pantry { border-top: 3px solid var(--cream); }
.ab-cta { background: var(--yellow); border-top: 3px solid var(--ink); padding: 100px 0 110px; text-align: center; }
.ab-cta .hand { font-size: 32px; margin-bottom: 12px; }
.ab-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.ab-cta .pill { padding: 14px 28px; font-size: 18px; }

@media (max-width: 860px) {
  .ab-hero-in { grid-template-columns: 1fr; min-height: 0; gap: 20px; padding-bottom: 36px; }
  .ab-art { max-width: 320px; }
  .ab-mission { padding: 72px 0; }
  .ab-cta { padding: 72px 0 80px; }
}
@media (prefers-reduced-motion: reduce) { .ab-art .bg { animation: none !important; } }

/* ================= gifting page ================= */
.gf-hero { background: var(--blue); }
.gf-hero-cta { margin-top: 28px; }
.gf-hero-cta .pill { padding: 13px 26px; font-size: 17px; }
.gf-art svg { max-height: 360px; }
.gf-art .out { transform: translateY(60px) scale(0); animation: out .7s cubic-bezier(.3, 1.5, .5, 1) forwards; animation-delay: var(--delay, 1s); }
.gf-art .lid { animation: lid 1s cubic-bezier(.3, 1.4, .5, 1) .6s forwards; }
.gf-art .sparkle { opacity: 0; animation: fadein .5s ease 1.9s forwards; }
.gf-art .t { transform-box: fill-box; transform-origin: center; }
.gf-packs { background: var(--cream); }
.gf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 44px; }
.gf-head .hand { font-size: 30px; margin-bottom: 10px; }
.gf-packs .pgrid { padding: 0; }
.gf-ideas-sec { background: var(--ink); color: var(--cream); }
.gf-ideas-sec .hand { color: var(--yellow); }
.gf-ideas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.idea {
  background: var(--c); border: 3px solid var(--cream); border-radius: 28px; padding: 22px; color: var(--ink); text-decoration: none;
  display: flex; flex-direction: column; box-shadow: 6px 6px 0 var(--yellow); transition: transform .2s, box-shadow .2s;
}
.idea:nth-child(odd) { transform: rotate(-1.2deg); }
.idea:nth-child(even) { transform: rotate(1.2deg); }
.idea:hover { transform: translateY(-6px) rotate(0); box-shadow: 9px 12px 0 var(--yellow); }
.idea .who { font: 700 28px "Caveat", cursive; line-height: 1; }
.idea svg { width: 70%; aspect-ratio: 1; margin: 12px auto; display: block; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.idea:hover svg { transform: rotate(-6deg) scale(1.08); }
.idea b { font-size: 20px; line-height: 1.2; }
.idea small { font-size: 15px; font-weight: 800; opacity: .7; margin-top: 6px; }
.gf-bulk { background: var(--yellow); color: var(--ink); padding: 100px 0; text-align: center; border-bottom: 3px solid var(--ink); }
.gf-bulk .hand { font-size: 32px; margin-bottom: 12px; }
.gf-bulk p { font-size: 20px; line-height: 1.5; max-width: 34ch; margin: 22px auto 30px; opacity: .85; }
.gf-bulk .pill { padding: 14px 28px; font-size: 18px; }
.gf-faq { background: var(--cream); }
.gf-faq .acc { max-width: 780px; }
.gf-faq .acc a { color: var(--ink); }
@media (max-width: 1000px) { .gf-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gf-ideas { grid-template-columns: 1fr; } .idea { display: grid; grid-template-columns: 92px 1fr; grid-template-areas: "who who" "ico name" "ico price"; column-gap: 16px; align-items: center; }
  .idea .who { grid-area: who; margin-bottom: 6px; }
  .idea svg { grid-area: ico; width: 92px; margin: 0; }
  .idea b { grid-area: name; align-self: end; }
  .idea small { grid-area: price; align-self: start; } .gf-bulk { padding: 72px 0; } }
@media (prefers-reduced-motion: reduce) { .gf-art .out, .gf-art .lid, .gf-art .sparkle { animation: none !important; opacity: 1; transform: none; } .gf-art .lid { transform: translate(-60px, -150px) rotate(-22deg); } }
@media (max-width: 860px) { .gf-art { margin-top: 44px; } }

/* card pictures: square box, sketch pinned inside (Safari/WebKit ignored the old padding + height:100% combo) */
.card .art { position: relative; aspect-ratio: 1 / 1; padding: 0; flex: none; width: 100%; }
.card .art svg { position: absolute; inset: 12%; width: 76%; height: 76%; }
.pgrid .card .art svg { inset: 14%; width: 72%; height: 72%; }

@media (max-width: 760px) { .best-head .hand { font-size: 20px; } }

/* ================= contact page ================= */
.ct-hero { background: var(--pink); }
.ct-art svg { max-height: 320px; }
.ct-art .trail { stroke-dashoffset: 1; animation: ctdash 2.2s ease-out .3s forwards; stroke-dasharray: 3 14; }
@keyframes ctdash { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.ct-art .plane { transform-box: fill-box; transform-origin: 50% 50%; animation: planefly 4.5s ease-in-out infinite; }
@keyframes planefly { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-6px,-14px) rotate(-4deg); } }
.ct-art .spark { opacity: 0; animation: fadein .5s ease 1.6s forwards; }
.ct-ways { background: var(--cream); }
.ct-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.ct-card {
  background: var(--c); border: 3px solid var(--ink); border-radius: 28px; padding: 28px 26px 26px; color: var(--ink); text-decoration: none;
  display: flex; flex-direction: column; box-shadow: 7px 7px 0 var(--ink); transition: transform .2s, box-shadow .2s;
}
.ct-card:hover { transform: translate(-3px, -6px); box-shadow: 11px 13px 0 var(--ink); }
.ct-card svg { width: 84px; height: 84px; margin-bottom: 18px; transition: transform .3s cubic-bezier(.3, 1.7, .5, 1); }
.ct-card:hover svg { transform: rotate(-8deg) scale(1.1); }
.ct-card h3 { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; }
.ct-card p { font-size: 17px; opacity: .8; margin: 6px 0 16px; line-height: 1.4; }
.ct-card b { font-size: 22px; }
.ct-card .go { margin-top: auto; padding-top: 22px; font-weight: 800; font-size: 16px; }
.ct-note { background: var(--yellow); border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.ct-note-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.ct-copy .hand { font-size: 30px; margin-bottom: 10px; }
.ct-copy p { font-size: 20px; line-height: 1.5; max-width: 30ch; margin-top: 22px; opacity: .85; }
.ct-form { margin: 0; box-shadow: 8px 8px 0 var(--ink); }
.ct-form textarea { width: 100%; border: 3px solid var(--ink); border-radius: 14px; background: var(--cream); color: var(--ink); padding: 13px 16px; font: 500 17px "Bricolage Grotesque", sans-serif; outline: none; resize: vertical; transition: box-shadow .12s, background-color .12s; }
.ct-form textarea:focus { background: #fff; box-shadow: 4px 4px 0 var(--yellow), 4px 4px 0 3px var(--ink); }
.f.bad textarea { border-color: #d9381e; background: #fff1ee; }
.ct-form .co-submit { margin-top: 6px; }
@media (max-width: 960px) { .ct-cards { grid-template-columns: 1fr; } .ct-note-in { grid-template-columns: 1fr; gap: 36px; } }
@media (prefers-reduced-motion: reduce) { .ct-art .trail, .ct-art .plane, .ct-art .spark { animation: none !important; opacity: 1; stroke-dashoffset: 0; } }

/* ================= locations, account, policy, 404 ================= */
.lc-hero { background: var(--green); }
.lc-stores .gf-head { margin-bottom: 40px; }
.ac-hero { background: var(--yellow); }
.ac-body { background: var(--cream); }
.ac-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.ac-card { margin: 0; box-shadow: 8px 8px 0 var(--ink); }
.ac-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; margin-bottom: 26px; }
.ac-tabs button { border: 0; background: var(--cream); color: var(--ink); padding: 13px 10px; font: 800 17px "Bricolage Grotesque", sans-serif; cursor: pointer; }
.ac-tabs button + button { border-left: 3px solid var(--ink); }
.ac-tabs button.on { background: var(--ink); color: var(--cream); }
.ac-form[hidden], .ac-note[hidden] { display: none; }
.ac-note { background: var(--green); border: 3px solid var(--ink); border-radius: 20px; padding: 22px; }
.ac-note b { font-size: 21px; }
.ac-note p { margin: 8px 0 18px; font-size: 17px; line-height: 1.5; }
.ac-side { display: grid; gap: 24px; }
.ac-box { background: var(--c); border: 3px solid var(--ink); border-radius: 26px; padding: 26px; box-shadow: 6px 6px 0 var(--ink); }
.ac-box h3 { font-size: 26px; font-weight: 800; }
.ac-box p { font-size: 17px; line-height: 1.5; margin: 8px 0 18px; opacity: .85; }

.pol-hero { background: var(--lilac); border-bottom: 3px solid var(--ink); padding: 34px 0 56px; }
.pol-hero .hand { font-size: 30px; margin-top: 18px; }
.pol-hero h1 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(40px, 6vw, 84px); margin-top: 4px; }
.pol { background: var(--cream); padding: 70px 0 100px; }
.pol-in { display: grid; grid-template-columns: 240px 1fr; gap: 64px; align-items: start; }
.pol-toc { position: sticky; top: calc(var(--nav-h) + 24px); }
.pol-toc b { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; }
.pol-toc ul { list-style: none; margin-top: 14px; border-left: 3px solid var(--ink); }
.pol-toc a { display: block; padding: 8px 0 8px 16px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 17px; }
.pol-toc a:hover { font-weight: 800; }
.pol-body { max-width: 720px; }
.pol-draft { background: var(--yellow); border: 3px solid var(--ink); border-radius: 18px; padding: 16px 20px; margin-bottom: 40px; font-size: 16px; line-height: 1.5; }
.pol-draft a { color: var(--ink); }
.pol-body section { margin-bottom: 38px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.pol-body h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 10px; }
.pol-body p { font-size: 18px; line-height: 1.65; opacity: .88; }
.pol-body a { color: var(--ink); }
.pol-body em { background: #fff1b3; padding: 0 5px; border-radius: 4px; font-style: normal; }

.nf { background: var(--pink); min-height: 76vh; padding: calc(var(--nav-h) + 20px) 0 80px; text-align: center; display: grid; place-items: center; border-bottom: 3px solid var(--ink); }
.nf svg { width: min(420px, 80vw); height: auto; display: block; margin: 0 auto 4px; overflow: visible; }
.nf-plane { transform-box: fill-box; transform-origin: 50% 50%; animation: planefly 4.5s ease-in-out infinite; }
.nf-trail { animation: ctdash 2.2s ease-out forwards; }
.nf .hand { font-size: 34px; }
.nf h1 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(40px, 7vw, 92px); margin: 4px 0 14px; }
.nf p { font-size: 20px; line-height: 1.5; max-width: 32ch; margin: 0 auto; opacity: .85; }
.nf .ab-cta-btns { margin-top: 30px; }

@media (max-width: 960px) { .ac-grid { grid-template-columns: 1fr; gap: 36px; } .pol-in { grid-template-columns: 1fr; gap: 28px; } .pol-toc { position: static; } }
@media (prefers-reduced-motion: reduce) { .nf-plane, .nf-trail { animation: none !important; } }
.stores-more { margin-top: 44px; text-align: center; }
.stores-more .pill { padding: 14px 28px; font-size: 18px; }