/* ============================================================
   Hmm, Kay! styles
   EDIT: brand colours and fonts live in the :root block below.
   Contrast notes (AA): cocoa text on cream, banana, mango and butterscotch passes.
   Strawberry is only used for fills, big text or dark ink (--straw-ink) on light backgrounds.
============================================================= */
:root {
  --banana: #FFD84D;
  --cream: #FFF7E8;
  --cocoa: #3A2A22;
  --mango: #FF9A2E;
  --straw: #E8505B;
  --butter: #E0A040;
  --straw-ink: #B02E3A;
  --banana-soft: #FFEFB8;
  --cocoa-soft: rgba(58, 42, 34, .72);
  --line: 3px solid var(--cocoa);
  --shadow: 5px 7px 0 rgba(58, 42, 34, .2);
  --radius: 24px;
  --font-head: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-script: "Bukhari Script", "Fredoka", cursive;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--cocoa);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.1; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 5.5vw, 3.1rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(1160px, 100% - 2rem); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--cocoa); color: var(--cream); padding: .6rem 1rem; border-radius: 12px; }
.skip:focus { left: 8px; }

:focus-visible { outline: 4px solid var(--cocoa); outline-offset: 3px; border-radius: 8px; box-shadow: 0 0 0 7px var(--banana); }

/* ---------- script font (Bukhari Script) ---------- */
@font-face { font-family: "Bukhari Script"; src: url("assets/fonts/BukhariScript.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 600 1.05rem/1 var(--font-head);
  padding: .95rem 1.5rem;
  background: var(--banana); color: var(--cocoa);
  border: var(--line); border-radius: 999px;
  box-shadow: 3px 4px 0 rgba(58, 42, 34, .85);
  text-decoration: none; cursor: pointer;
  transition: transform .25s var(--spring), box-shadow .25s ease, background-color .2s ease;
}
.btn:hover { transform: translateY(-3px) scale(1.05) rotate(-1deg); box-shadow: 4px 8px 0 rgba(58, 42, 34, .85); }
.btn:active { transform: translateY(1px) scale(.98); box-shadow: 1px 2px 0 rgba(58, 42, 34, .85); }
.btn-ghost { background: #fff; }
.btn-sm { padding: .65rem 1.1rem; font-size: .95rem; }
.btn-block { width: 100%; font-size: 1.2rem; padding: 1.1rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 247, 232, .94);
  backdrop-filter: blur(8px);
  border-bottom: 3px solid var(--cocoa);
}
.bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand img { border-radius: 50%; }
.brand-name { font: 700 1.5rem/1 var(--font-head); }
.nav { display: flex; align-items: center; gap: .3rem; }
.nav a:not(.btn) { padding: .5rem .8rem; border-radius: 999px; text-decoration: none; font-weight: 500; transition: background-color .2s; }
.nav a:not(.btn):hover { background: var(--banana); }
.nav-cta { margin-left: .5rem; }
.menu-toggle { display: none; width: 48px; height: 48px; border: var(--line); border-radius: 14px; background: var(--banana); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.menu-toggle span { display: block; width: 22px; height: 3px; background: var(--cocoa); border-radius: 2px; transition: transform .25s, opacity .2s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.progress { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none; }
.p-bar { position: absolute; inset: 0; background: var(--straw); transform-origin: left; transform: scaleX(var(--p, 0)); }
.p-hmm, .p-kay { position: absolute; top: 6px; font: 600 .7rem/1 var(--font-head); padding: .25rem .5rem; border-radius: 999px; border: 2px solid var(--cocoa); opacity: 0; transition: opacity .3s; }
.p-hmm { left: 8px; background: #FFF4B8; font-family: var(--font-script); font-weight: 400; font-size: .9rem; }
.p-kay { right: 8px; background: var(--banana); }
.site-header:not(.is-scrolled) .p-hmm { opacity: 0; }

/* ---------- shared: sky, clouds, sparkles ---------- */
.sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.drift { position: absolute; background: url("assets/cloud.svg") center/contain no-repeat; opacity: .95; filter: drop-shadow(0 8px 0 rgba(224,160,64,.18)); animation: drift linear infinite; }
.d1 { width: 220px; height: 110px; top: 8%; left: -240px; animation-duration: 70s; }
.d2 { width: 150px; height: 75px; top: 42%; left: -170px; animation-duration: 90s; animation-delay: -35s; opacity: .7; }
.d3 { width: 300px; height: 150px; top: 20%; left: -320px; animation-duration: 110s; animation-delay: -60s; opacity: .6; }
.d4 { width: 180px; height: 90px; top: 70%; left: -200px; animation-duration: 80s; animation-delay: -20s; opacity: .75; }
@keyframes drift { to { transform: translateX(calc(100vw + 400px)); } }

.dots { display: inline-flex; align-items: flex-end; gap: 5px; margin-right: 8px; }
.dots i { display: block; border-radius: 50%; background: #FFF4B8; border: 2px solid var(--cocoa); }
.dots i:nth-child(1) { width: 8px; height: 8px; }
.dots i:nth-child(2) { width: 12px; height: 12px; margin-bottom: 4px; }
.dots i:nth-child(3) { width: 17px; height: 17px; margin-bottom: 9px; }
.eyebrow { display: inline-flex; align-items: flex-end; margin: 0 0 1rem; }
.pill-hmm, .pill-kay {
  display: inline-block; font: 600 1rem/1 var(--font-head); padding: .55rem 1rem; border: 2.5px solid var(--cocoa); position: relative;
}
.pill-hmm { letter-spacing: .05em; background: #FFF4B8; border-radius: 999px; font-family: var(--font-script); font-weight: 400; font-size: 1.25rem; padding: .4rem 1rem .5rem; box-shadow: 2px 3px 0 rgba(58,42,34,.25); }
.pill-kay { background: var(--banana); border-radius: 14px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; box-shadow: 2px 3px 0 rgba(58,42,34,.25); }
.pill-kay::after { content: ""; position: absolute; left: 14px; bottom: -9px; width: 12px; height: 12px; background: var(--banana); border-right: 2.5px solid var(--cocoa); border-bottom: 2.5px solid var(--cocoa); transform: rotate(45deg) skew(10deg, 10deg); }

/* ---------- sections and cloud dividers ---------- */
.section { position: relative; background: var(--bg); padding: clamp(4rem, 9vw, 7rem) 0; }
.section > .wrap { position: relative; z-index: 1; }
.divider-top { position: absolute; left: 0; right: 0; top: 0; height: clamp(30px, 5vw, 56px); width: 100%; color: var(--bg); transform: translateY(-99%); z-index: 1; }
.sec-head { max-width: 46rem; margin: 0 auto 3rem; text-align: center; }
.sec-head.left { text-align: left; margin: 0; }
.sec-sub { font-size: 1.15rem; color: var(--cocoa); }
.fine { text-align: center; font-size: .95rem; margin-top: 2.5rem; }
.fine-left { font-size: .92rem; margin: .75rem 0 1rem; }
.kicker { font: 600 .85rem/1 var(--font-head); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .6rem; }

/* ---------- reveal on scroll (only when JS is on) ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s var(--spring); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero { position: relative; background: linear-gradient(180deg, #FFFBF1 0%, #FFF3CC 55%, #FFE590 100%); padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(5rem, 9vw, 8rem); overflow: hidden; }
.hero-grid { position: relative; z-index: 1; display: grid; gap: 2.5rem; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .95rem; background: #fff; border: 2.5px solid var(--cocoa); border-radius: 999px; padding: .4rem 1rem .4rem .8rem; margin-bottom: 1.2rem; box-shadow: 2px 3px 0 rgba(58,42,34,.25); }
.badge-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--mango); border: 2px solid var(--cocoa); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.35); } }
.hero h1 { font-size: clamp(3rem, 10vw, 5.6rem); font-weight: 700; margin-bottom: .3em; }
.hmm-word { display: inline-block; font-family: var(--font-script); font-style: normal; font-weight: 400; font-size: 1.05em; line-height: .8; white-space: nowrap; color: #6a5a50; letter-spacing: .06em; transform: rotate(-4deg); padding: 0 .12em 0 .06em; }
.kay-word { display: inline-block; background: var(--banana); border: 4px solid var(--cocoa); border-radius: 22px; padding: 0 .25em .04em; transform: rotate(2deg); box-shadow: 5px 6px 0 rgba(58,42,34,.85); text-transform: uppercase; letter-spacing: .01em; }
.lead { font-size: clamp(1.1rem, 2.4vw, 1.3rem); max-width: 34rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.6rem 0 1.2rem; }
.tagline { font: 600 1.3rem/1.2 var(--font-head); color: var(--straw-ink); }

.hero-art { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; max-width: 600px; margin-inline: auto; width: 100%; }
.art-col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 380px; }
.art-dream { position: relative; width: 100%; aspect-ratio: 3 / 2; background: url("assets/thought-cloud.svg") center/100% 100% no-repeat; display: grid; place-items: center; animation: bob 6s ease-in-out infinite; }
.art-dream .blank { width: 20%; margin-top: -14%; filter: drop-shadow(0 3px 0 rgba(58,42,34,.15)); }
.art-note { position: absolute; bottom: 12%; font: italic 600 .78rem/1.1 var(--font-head); text-align: center; width: 62%; }
.trail { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0 -4px; transform: translateX(-30%); }
.trail i { display: block; border-radius: 50%; background: #FFF4B8; border: 2.5px solid var(--cocoa); }
.trail i:nth-child(1) { width: 18px; height: 18px; }
.trail i:nth-child(2) { width: 12px; height: 12px; transform: translateX(-6px); }
.trail i:nth-child(3) { width: 8px; height: 8px; transform: translateX(-12px); }
.art-seat { position: relative; width: 84%; aspect-ratio: 3 / 1.5; background: url("assets/thought-cloud.svg") center/100% 100% no-repeat; margin-top: 1.4rem; }
.mascot { position: absolute; }
.mascot.mini { width: 46%; left: 27%; bottom: 20%; filter: drop-shadow(0 4px 0 rgba(58,42,34,.12)); animation: bob 5s ease-in-out infinite reverse; }
.art-right { gap: .5rem; }
.art-reveal { position: relative; width: 70%; background: var(--banana); border: var(--line); border-radius: 26px; padding: .8rem; box-shadow: 4px 6px 0 rgba(58,42,34,.85); margin-bottom: 1rem; animation: bob 6s ease-in-out infinite .6s; }
.art-reveal::after { content: ""; position: absolute; left: 36%; bottom: -14px; width: 24px; height: 24px; background: var(--banana); border-right: var(--line); border-bottom: var(--line); transform: rotate(45deg) skew(8deg, 8deg); border-radius: 0 0 8px 0; }
.finished { width: 56%; margin-inline: auto; filter: drop-shadow(0 3px 0 rgba(58,42,34,.2)); }
.spark { position: absolute; width: 24px; height: 24px; background: url("assets/sparkle.svg") center/contain no-repeat; animation: twinkle 2.4s ease-in-out infinite; }
.spark.s1 { top: -12px; right: -8px; }
.spark.s2 { top: 30%; left: -14px; width: 18px; height: 18px; animation-delay: .8s; }
.spark.s3 { bottom: 12%; right: -12px; width: 16px; height: 16px; animation-delay: 1.4s; }
@keyframes twinkle { 50% { transform: scale(.5) rotate(25deg); opacity: .5; } }
.bowl { position: relative; width: 108%; max-width: 340px; aspect-ratio: 320 / 240; }
.bowl img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.bowl .b-dog { left: 29%; width: 42%; top: auto; bottom: 42%; z-index: 1; filter: drop-shadow(0 4px 0 rgba(58,42,34,.12)); }
.bowl .b-front { z-index: 2; }
.contact-bowl { width: min(280px, 70%); margin-top: 1.2rem; animation: bob 5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }

.art-mid { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); width: 0; z-index: 3; pointer-events: none; }
.chip-hmm, .chip-kay { position: absolute; white-space: nowrap; font-family: var(--font-head); }
.chip-hmm { right: -4px; top: -14px; background: #FFF4B8; border: 3px solid var(--cocoa); border-radius: 999px; padding: .55rem 1rem; font: 400 1.7rem/1 var(--font-script); box-shadow: 3px 4px 0 rgba(58,42,34,.25); transform: rotate(-6deg); }
.chip-kay { left: -6px; top: 34px; background: var(--banana); border: 3px solid var(--cocoa); border-radius: 16px; padding: .55rem 1.1rem; font-weight: 700; font-size: 1.5rem; line-height: 1; box-shadow: 3px 4px 0 rgba(58,42,34,.85); transform: rotate(5deg); animation: pop 3s var(--spring) infinite; }
@keyframes pop { 0%, 80%, 100% { scale: 1; } 90% { scale: 1.12; } }

/* ---------- journey ---------- */
.steps { display: grid; gap: 3.4rem 1.4rem; counter-reset: s; }
.step { position: relative; display: flex; flex-direction: column; }
.step-num { position: absolute; z-index: 3; top: -16px; right: -6px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--straw); color: #fff; font: 700 1.3rem/1 var(--font-head); border: var(--line); border-radius: 50%; box-shadow: 2px 3px 0 rgba(58,42,34,.4); }
.step-hmm { position: relative; z-index: 2; background: #FFF4B8; border: var(--line); border-radius: 40px 40px 40px 12px; padding: 1.1rem 1.2rem; font: italic 500 1.1rem/1.3 var(--font-head); margin: 0 1rem -14px 0; box-shadow: var(--shadow); }
.step-hmm .t { letter-spacing: .05em; font-family: var(--font-script); font-weight: 400; font-size: 1.4em; line-height: .9; }
.step-kay { position: relative; background: var(--banana); border: var(--line); border-radius: 20px; padding: 1.6rem 1.3rem 1.3rem; box-shadow: var(--shadow); flex: 1; }
.step-kay::after { content: ""; position: absolute; right: 28px; bottom: -14px; width: 22px; height: 22px; background: var(--banana); border-right: var(--line); border-bottom: var(--line); transform: rotate(45deg); border-radius: 0 0 8px 0; }
.step-kay h3 { margin-bottom: .3em; }
.step-kay p { margin: 0; font-size: 1rem; }
.step-pal { position: absolute; z-index: 1; top: -78px; width: 80px; height: auto; left: 12px; }
.pal-small { left: auto; right: 50px; top: -64px; width: 88px; }

/* ---------- menu ---------- */
.menu-grid { display: grid; gap: 1.6rem; }
.dish > article { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--tone, #fff); border: var(--line); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); transition: transform .3s var(--spring); }
.dish:hover > article { transform: translateY(-5px) rotate(-.6deg); }
.tone-cream { --tone: #fff; }
.tone-banana { --tone: var(--banana); }
.tone-mango { --tone: var(--mango); }
.tone-straw { --tone: #FFC9CD; }
.tone-butter { --tone: #F3CE8A; }
.dish-icon { width: 72px; height: 72px; margin-bottom: .6rem; }
.dish-icon.big { width: 110px; height: 82px; }
.dish h3 { font-size: 1.7rem; }
.dish-sum { font-weight: 500; }
.ticks { margin: 0 0 1.4rem; flex: 1; }
.ticks li { position: relative; padding-left: 1.7rem; margin-bottom: .5rem; font-size: 1rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; border: 2.5px solid var(--cocoa); box-shadow: inset 0 0 0 2.5px var(--banana); }
.dish .btn { align-self: flex-start; }
.ribbon { position: absolute; top: -14px; right: 18px; margin: 0; background: var(--straw-ink); color: #fff; font: 600 .85rem/1 var(--font-head); padding: .5rem .9rem; border: 2.5px solid var(--cocoa); border-radius: 999px; transform: rotate(3deg); }
.ribbon-later { background: var(--cocoa); }
.note-card { margin-top: 2.5rem; background: #fff; border: 3px dashed var(--cocoa); border-radius: var(--radius); padding: 1.6rem; display: flex; gap: 1.5rem; align-items: center; }
.note-text h3 { margin-bottom: .3em; }
.note-list { margin: .5rem 0 1.2rem; }
.note-list li { margin-bottom: .5rem; }
.note-text .btn { margin: 0 .5rem .5rem 0; }

/* ---------- imagine it ---------- */
.imagine { background: linear-gradient(180deg, var(--cream) 0%, var(--banana-soft) 55%, var(--banana) 120%); }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: 2rem; }
.filter { font: 600 1rem/1 var(--font-head); padding: .7rem 1.2rem; background: #fff; border: var(--line); border-radius: 999px; cursor: pointer; color: var(--cocoa); transition: transform .25s var(--spring), background-color .2s; }
.filter:hover { transform: translateY(-2px) scale(1.04); }
.filter.is-on { background: var(--cocoa); color: var(--cream); }
.gallery { display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: start; }
.work { position: relative; }
.work[hidden] { display: none; }
.work-meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .8rem .3rem 0; }
.work-meta h3 { font-size: 1.1rem; margin: 0; }
.tag { font: 600 .8rem/1 var(--font-head); background: #fff; border: 2px solid var(--cocoa); border-radius: 999px; padding: .35rem .7rem; }
.work-open { position: absolute; inset: 0; background: transparent; border: 0; cursor: zoom-in; border-radius: var(--radius); }
.work:has(.work-open:focus-visible) .piece { outline: 4px solid var(--cocoa); outline-offset: 4px; box-shadow: 0 0 0 8px var(--banana); }
.sample-note { text-align: center; font-weight: 700; margin-top: 2.4rem; }

/* the piece: a portfolio card built as a daydream */
.piece {
  --tone: var(--banana); --ink: var(--cocoa); --soft: #FFF4B8;
  position: relative; overflow: hidden; border: var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  background: linear-gradient(180deg, var(--cream) 0%, var(--banana-soft) 100%);
  transition: transform .35s var(--spring);
  container-type: inline-size;
}
.piece.tone-banana { --tone: var(--banana); }
.piece.tone-mango { --tone: var(--mango); }
.piece.tone-straw { --tone: var(--straw); --soft: #FFC9CD; }
.piece.tone-butter { --tone: var(--butter); --soft: #F3CE8A; }
.piece.tone-cocoa { --tone: var(--cocoa); --ink: var(--cream); --soft: #8B7468; }
.work:hover .piece { transform: translateY(-4px); }
.ratio-1x1 { aspect-ratio: 1 / 1; }
/* every card is a square so the grid stays tidy, whatever the format inside */
.ratio-4x5, .ratio-4x3, .ratio-9x16 { aspect-ratio: 1 / 1; }
.piece .sky { z-index: 0; background:
  url("assets/sparkle.svg") 12% 14% / 5cqw no-repeat,
  url("assets/sparkle.svg") 86% 40% / 4cqw no-repeat,
  url("assets/sparkle.svg") 70% 8% / 3cqw no-repeat,
  url("assets/sparkle.svg") 24% 62% / 3.5cqw no-repeat,
  url("assets/sparkle.svg") 92% 86% / 5cqw no-repeat;
  animation: twinkle-bg 3.4s ease-in-out infinite; }
@keyframes twinkle-bg { 50% { opacity: .55; } }
.piece::before, .piece::after { content: ""; position: absolute; z-index: 0; background: url("assets/cloud.svg") center/contain no-repeat; opacity: .8; animation: drift-in 38s linear infinite; }
.piece::before { width: 38%; aspect-ratio: 2/1; top: 4%; left: -40%; }
.piece::after { width: 26%; aspect-ratio: 2/1; bottom: 14%; left: -30%; animation-duration: 55s; animation-delay: -20s; opacity: .6; }
@keyframes drift-in { to { transform: translateX(460%); } }

.mock { position: absolute; inset: 7%; z-index: 1; }

/* the daydream cloud */
.dd { position: absolute; z-index: 5; width: 54%; transition: transform .5s var(--spring); }
.dd-mid { left: 23%; top: 14%; }
.dd-tl { left: 4%; top: 5%; }
.dd-tr { right: 4%; top: 5%; }
.dd-bl { left: 4%; bottom: 14%; }
.dd-cloud { position: relative; aspect-ratio: 3 / 2; background: url("assets/thought-cloud.svg") center/100% 100% no-repeat; display: grid; place-items: center; align-content: center; }
.dd-product { width: 24%; margin-top: -4%; transition: transform .5s var(--spring); filter: drop-shadow(0 2px 0 rgba(58,42,34,.12)); }
.dd-label { font: 600 clamp(.6rem, 4.3cqw, .95rem)/1.05 var(--font-head); text-align: center; max-width: 60%; margin-top: 2%; color: var(--cocoa); }
.dd-tag { position: absolute; top: 4%; left: 6%; z-index: 2; display: grid; }
.dd-tag b { grid-area: 1 / 1; font-family: var(--font-head); font-size: clamp(.6rem, 4cqw, .9rem); line-height: 1; padding: .35em .7em; border: 2px solid var(--cocoa); transition: transform .35s var(--spring), opacity .2s; }
.dd-tag .hmm { letter-spacing: .05em; background: #fff; border-radius: 999px; font-family: var(--font-script); font-size: clamp(.8rem, 5.2cqw, 1.15rem); font-weight: 400; color: var(--cocoa); }
.dd-tag .kay { background: var(--banana); border-radius: 8px; font-weight: 700; text-transform: uppercase; transform: scale(0) rotate(-12deg); opacity: 0; color: var(--cocoa); }
.dd-dots { position: absolute; display: flex; flex-direction: column; gap: 4px; bottom: -22%; }
.dots-l .dd-dots { left: 12%; align-items: flex-start; }
.dots-r .dd-dots { right: 12%; align-items: flex-end; }
.dd-dots i { display: block; border-radius: 50%; background: #FFF4B8; border: 2px solid var(--cocoa); }
.dd-dots i:nth-child(1) { width: 4cqw; height: 4cqw; min-width: 8px; min-height: 8px; }
.dd-dots i:nth-child(2) { width: 3cqw; height: 3cqw; min-width: 6px; min-height: 6px; margin: 0 .5cqw; }
.dd-dots i:nth-child(3) { width: 2cqw; height: 2cqw; min-width: 5px; min-height: 5px; margin: 0 1cqw; }

.src { position: absolute; z-index: 4; bottom: 3%; }
.src-mini, .src-small { width: 21%; filter: drop-shadow(0 3px 0 rgba(58,42,34,.15)); }
.src-mini { left: 4%; } .src-small { right: 4%; }
.src-frame { left: 6%; bottom: 4%; width: 14%; aspect-ratio: 3 / 4; border: 3px dashed var(--cocoa); border-radius: 10px; background: rgba(255,255,255,.6); }
.src-frame::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 1.4rem/1 var(--font-head); color: var(--cocoa); }

/* hover / focus: cloud floats up, product tilts, hmm becomes KAY! */
.work:hover .dd, .work:focus-within .dd, .is-kay .dd { transform: translateY(-9%); }
.work:hover .dd-product, .work:focus-within .dd-product, .is-kay .dd-product { transform: rotate(-12deg) scale(1.1); }
.work:hover .dd-tag .hmm, .work:focus-within .dd-tag .hmm, .is-kay .dd-tag .hmm { transform: scale(0); opacity: 0; }
.work:hover .dd-tag .kay, .work:focus-within .dd-tag .kay, .is-kay .dd-tag .kay { transform: scale(1) rotate(-6deg); opacity: 1; }

/* mock: instagram feed */
.mock-feed { background: #fff; border: 3px solid var(--cocoa); border-radius: 14px; padding: 4% 4% 0; overflow: hidden; }
.feed-head { display: flex; align-items: center; gap: .5em; font: 600 clamp(.6rem, 4cqw, .85rem)/1 var(--font-head); margin-bottom: 4%; }
.feed-head span { margin-left: auto; background: var(--tone); color: var(--ink); padding: .3em .8em; border-radius: 999px; border: 2px solid var(--cocoa); }
.avatar { display: inline-block; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--tone); border: 2px solid var(--cocoa); flex: none; }
.feed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2%; }
.feed-grid .t { aspect-ratio: 1.3; border-radius: 4px; border: 2px solid var(--cocoa); }
.c-banana { background: var(--banana); } .c-mango { background: var(--mango); } .c-straw { background: var(--straw); }
.c-butter { background: var(--butter); } .c-cocoa { background: var(--cocoa); } .c-cream { background: var(--cream); }

/* mock: post */
.mock-post { background: var(--tone); color: var(--ink); border: 3px solid var(--cocoa); border-radius: 14px; padding: 6%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; inset: 6%; }
.piece.tone-straw .mock-post { color: var(--cocoa); background: #FFC9CD; }
.post-kicker { font: 700 clamp(.6rem, 3.6cqw, .8rem)/1 var(--font-head); text-transform: uppercase; letter-spacing: .1em; background: var(--cocoa); color: var(--cream); padding: .4em .8em; border-radius: 999px; margin-bottom: 4%; }
.post-head { font: 700 clamp(1.1rem, 9cqw, 2rem)/1 var(--font-head); max-width: 70%; margin-bottom: 3%; }
.post-sub { font-size: clamp(.6rem, 3.6cqw, .85rem); max-width: 58%; line-height: 1.3; margin-bottom: 4%; }
.post-cta { font: 600 clamp(.65rem, 4cqw, .9rem)/1 var(--font-head); background: #fff; color: var(--cocoa); border: 2.5px solid var(--cocoa); border-radius: 999px; padding: .55em 1.1em; }
.post-deco { position: absolute; right: 4%; bottom: 4%; width: 36%; }
.mock-post.alt .post-deco { display: none; }

/* mock: carousel */
.mock-carousel { display: flex; align-items: flex-end; }
.slides { display: flex; gap: 3%; width: 100%; height: 50%; margin-bottom: 18%; }
.slide { flex: 1; border: 3px solid var(--cocoa); border-radius: 14px; padding: 6% 7%; display: flex; flex-direction: column; justify-content: flex-end; gap: .2em; font-family: var(--font-head); }
.slide b { font-size: clamp(.9rem, 7cqw, 1.5rem); line-height: 1; }
.slide span { font-weight: 500; font-size: clamp(.6rem, 4cqw, .9rem); }
.s-a { background: var(--tone); color: var(--ink); } .s-b { background: #fff; } .s-c { background: var(--cream); }
.mock-carousel.dark .s-b { background: var(--banana); } .mock-carousel.dark .s-c { background: var(--mango); }
.mock-carousel.dark .s-a { color: var(--cream); }
.arrow { position: absolute; bottom: 36%; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; background: #fff; color: var(--cocoa); border: 2.5px solid var(--cocoa); border-radius: 50%; font: 700 1.6rem/1 var(--font-head); padding-bottom: .2rem; z-index: 3; }
.arrow-l { left: -4%; } .arrow-r { right: -4%; }
.count { position: absolute; right: 2%; top: 33%; background: var(--cocoa); color: var(--cream); font: 600 .75rem/1 var(--font-head); padding: .35em .7em; border-radius: 999px; }

/* mock: story */
.mock-story { inset: 4% 22%; background: var(--tone); color: var(--ink); border: 3px solid var(--cocoa); border-radius: 22px; padding: 5%; display: flex; flex-direction: column; overflow: hidden; }
.piece.tone-straw .mock-story { color: var(--cocoa); background: #FFC9CD; }
.mock-story.light { color: var(--cocoa); }
.story-bars { display: flex; gap: 4px; margin-bottom: 6%; }
.story-bars i { flex: 1; height: 4px; border-radius: 2px; background: rgba(58,42,34,.25); }
.story-bars i.on { background: var(--cocoa); }
.story-head { display: flex; align-items: center; gap: .5em; font: 600 clamp(.55rem, 3.4cqw, .8rem)/1 var(--font-head); }
.story-head span { opacity: .75; font-weight: 400; }
.story-head-text { font: 700 clamp(1rem, 6.5cqw, 1.6rem)/1 var(--font-head); margin: auto 0 4%; text-align: center; max-width: 80%; align-self: center; }
.poll { background: #fff; color: var(--cocoa); border: 2.5px solid var(--cocoa); border-radius: 14px; padding: 4%; display: grid; grid-template-columns: 1fr 1fr; gap: 4%; margin-bottom: 4%; }
.poll b { grid-column: 1 / -1; text-align: center; font: 600 clamp(.6rem, 3.6cqw, .85rem)/1.1 var(--font-head); }
.opt { text-align: center; font: 600 clamp(.55rem, 3.2cqw, .8rem)/1 var(--font-head); background: var(--banana-soft); border: 2px solid var(--cocoa); border-radius: 999px; padding: .5em 0; }
.sticker { align-self: center; background: var(--banana); color: var(--cocoa); border: 2.5px solid var(--cocoa); border-radius: 999px; padding: .5em 1em; font: 700 clamp(.55rem, 3.4cqw, .8rem)/1 var(--font-head); transform: rotate(-4deg); margin-bottom: 4%; }
.countdown { display: flex; justify-content: center; gap: 6%; margin: 2% 0 8%; }
.countdown b { width: 24%; aspect-ratio: 1; display: grid; place-items: center; background: #fff; border: 2.5px solid var(--cocoa); border-radius: 12px; font: 700 clamp(1rem, 6.5cqw, 1.6rem)/1 var(--font-head); }

/* mock: facebook ad */
.mock-fbad { background: #fff; border: 3px solid var(--cocoa); border-radius: 14px; padding: 4%; display: flex; flex-direction: column; gap: 3%; inset: 5% 5% 20% 5%; }
.fb-head { display: flex; align-items: center; gap: .6em; font: 600 clamp(.6rem, 3.8cqw, .85rem)/1.1 var(--font-head); }
.fb-head small { display: block; font: 400 .85em/1 var(--font-body); opacity: .75; }
.fb-text { font-size: clamp(.55rem, 3.4cqw, .8rem); line-height: 1.3; margin: 0; }
.fb-image { flex: 1; border: 2.5px solid var(--cocoa); border-radius: 8px; background: linear-gradient(135deg, var(--tone), var(--banana-soft)); }
.fb-foot { display: flex; align-items: center; justify-content: space-between; background: var(--cream); border: 2px solid var(--cocoa); border-radius: 8px; padding: 3%; font: 600 clamp(.55rem, 3.4cqw, .8rem)/1.1 var(--font-head); }
.fb-foot small { display: block; font: 400 .8em/1.2 var(--font-body); opacity: .75; }
.fb-foot span { background: var(--banana); border: 2px solid var(--cocoa); border-radius: 6px; padding: .5em .8em; white-space: nowrap; }

/* mock: banner ad */
.mock-banner { inset: 26% 5% 22% 5%; background: var(--tone); border: 3px solid var(--cocoa); border-radius: 14px; padding: 6%; color: var(--cocoa); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.banner-head { font: 700 clamp(1.1rem, 8cqw, 1.9rem)/1 var(--font-head); max-width: 55%; margin-bottom: 3%; }
.banner-sub { font-size: clamp(.6rem, 3.6cqw, .85rem); max-width: 50%; margin-bottom: 4%; line-height: 1.3; }
.banner-cta { background: var(--cocoa); color: var(--cream); font: 600 clamp(.6rem, 3.8cqw, .9rem)/1 var(--font-head); padding: .6em 1.2em; border-radius: 999px; }
.banner-deco { position: absolute; right: 3%; bottom: 3%; width: 38%; }

/* mock: packaging line-up */
.mock-pack { inset: 0; }
.shelf { position: absolute; left: 8%; right: 8%; bottom: 28%; height: 34%; display: flex; align-items: flex-end; justify-content: space-around; border-bottom: 4px solid var(--cocoa); padding-bottom: 0; }
.shelf::after { content: ""; position: absolute; left: -3%; right: -3%; bottom: -14px; height: 10px; background: rgba(58,42,34,.15); border-radius: 50%; }
.pk { display: block; position: relative; width: 22%; height: 92%; border: 3px solid var(--cocoa); }
.pk::before { content: ""; position: absolute; left: 14%; right: 14%; top: 34%; height: 34%; background: var(--cream); border: 2.5px solid var(--cocoa); border-radius: 40% 40% 40% 40% / 50%; }
.pk-pouch { border-radius: 8px 8px 14px 14px; }
.pk-pouch::after { content: ""; position: absolute; left: -3px; right: -3px; top: 0; height: 12%; background: rgba(58,42,34,.18); border-bottom: 3px solid var(--cocoa); }
.pk-jar { border-radius: 10px 10px 16px 16px; height: 70%; margin-top: auto; }
.pk-jar::after { content: ""; position: absolute; left: -3px; right: -3px; top: -22%; height: 22%; background: var(--cocoa); border: 3px solid var(--cocoa); border-radius: 8px 8px 0 0; }
.pk-box { border-radius: 4px; }
.pk-box::after { content: ""; position: absolute; right: -3px; top: -3px; width: 18%; height: calc(100% + 6px); background: rgba(58,42,34,.22); border: 3px solid var(--cocoa); }
.burst { position: absolute; right: 8%; bottom: 8%; background: var(--straw-ink); color: #fff; font: 700 clamp(.6rem, 4cqw, .9rem)/1 var(--font-head); padding: .6em .9em; border: 2.5px solid var(--cocoa); border-radius: 999px; transform: rotate(-8deg); }

/* ---------- viewer (larger view) ---------- */
.viewer { border: var(--line); border-radius: 28px; padding: 0; background: var(--cream); color: var(--cocoa); width: min(920px, calc(100% - 1.5rem)); max-height: calc(100dvh - 1.5rem); box-shadow: 8px 10px 0 rgba(58,42,34,.3); overflow: auto; }
.viewer::backdrop { background: rgba(58, 42, 34, .6); backdrop-filter: blur(3px); }
.viewer-inner { display: grid; gap: 1.5rem; padding: 1.5rem; position: relative; }
.viewer-stage { width: min(100%, 440px); margin-inline: auto; }
.viewer-stage .work-meta { display: none; }
.viewer-stage .piece { cursor: default; }
.viewer-side { align-self: center; }
.viewer-side h3 { font-size: 1.9rem; }
.viewer-close { position: absolute; top: .8rem; right: .8rem; z-index: 10; width: 44px; height: 44px; border-radius: 50%; border: var(--line); background: var(--banana); font: 700 1.8rem/1 var(--font-head); cursor: pointer; display: grid; place-items: center; padding: 0 0 .25rem; }

/* ---------- about ---------- */
.about-grid { display: grid; gap: 3rem; align-items: center; }
.about-copy h3 { margin-top: 1.5rem; }
.name-note { background: #fff; border: var(--line); border-radius: 18px; padding: 1rem 1.2rem; box-shadow: var(--shadow); font-size: 1.1rem; }
.about-team { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.team-card { margin: 0; background: #fff; border: var(--line); border-radius: var(--radius); padding: 1.2rem 1rem; text-align: center; box-shadow: var(--shadow); }
.team-mini { transform: rotate(-2deg); } .team-small { transform: rotate(2deg); margin-top: 1.5rem; }
.team-card img { width: 78%; max-height: 210px; object-fit: contain; margin: 0 auto .6rem; }
.team-card figcaption { display: grid; gap: .3rem; justify-items: center; }
.team-card strong { font: 600 1.4rem/1 var(--font-head); margin-top: .5rem; }
.team-card small { font-size: .9rem; }

/* ---------- founding ---------- */
.founding-card { display: grid; gap: 1.5rem; align-items: center; background: var(--banana); border: var(--line); border-radius: 36px; padding: clamp(1.5rem, 5vw, 3rem); box-shadow: 8px 10px 0 rgba(58,42,34,.2); position: relative; }
.founding-art { width: min(220px, 60%); margin-inline: auto; animation: bob 5s ease-in-out infinite; }
.founding-text h2 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); }
.founding-text p { max-width: 38rem; }

/* ---------- faq ---------- */
.faq-grid { display: grid; gap: 2.5rem; }
.faq-mini { width: 130px; margin-top: 1rem; }
.faq-list { display: grid; gap: .9rem; }
details { background: #fff; border: var(--line); border-radius: 20px; box-shadow: 3px 4px 0 rgba(58,42,34,.2); overflow: hidden; }
summary { cursor: pointer; list-style: none; padding: 1.1rem 3.4rem 1.1rem 1.3rem; font: 600 1.15rem/1.3 var(--font-head); position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; translate: 0 -50%; width: 2rem; height: 2rem; border-radius: 50%; background: var(--banana); border: 2.5px solid var(--cocoa); display: grid; place-items: center; font: 700 1.3rem/1 var(--font-head); padding-bottom: .15rem; transition: rotate .3s var(--spring); }
details[open] summary::after { content: "\00d7"; rotate: 90deg; background: var(--straw); color: #fff; }
details[open] summary { background: var(--banana-soft); }
.answer { padding: 1rem 1.3rem 1.3rem; }
.answer p { margin: 0; }

/* ---------- contact ---------- */
.contact { overflow: hidden; }
.contact-grid { display: grid; gap: 2.5rem; align-items: start; }
.contact-list { display: grid; gap: .8rem; margin: 1.4rem 0; }
.contact-list li { display: flex; align-items: center; gap: .8rem; font-weight: 500; font-size: 1.1rem; }
.contact-list a { font-weight: 700; }
.ci { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; background: #fff; border: var(--line); border-radius: 50%; font: 700 1.2rem/1 var(--font-head); flex: none; }
.form-card { position: relative; background: #fff; border: var(--line); border-radius: 28px; padding: clamp(1.3rem, 4vw, 2rem); box-shadow: 8px 10px 0 rgba(58,42,34,.25); display: grid; gap: 1rem; }
.field-row { display: grid; gap: 1rem; }
.field label { display: block; font: 600 1rem/1.2 var(--font-head); margin-bottom: .4rem; }
.req { color: var(--straw-ink); }
input[type="text"], input[type="email"], select, textarea {
  width: 100%; font: 400 1rem/1.4 var(--font-body); color: var(--cocoa);
  background: var(--cream); border: 2.5px solid var(--cocoa); border-radius: 14px; padding: .8rem 1rem;
  transition: box-shadow .2s, background-color .2s;
}
textarea { resize: vertical; min-height: 7rem; }
input:focus, select:focus, textarea:focus { outline: none; background: #fff; box-shadow: 0 0 0 4px var(--banana), 0 0 0 7px var(--cocoa); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--straw-ink); background: #FFF0F1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0; min-height: 1.4em; font-weight: 700; color: var(--straw-ink); }
.form-success { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--banana); border-radius: 25px; padding: 2rem; }
.form-success[hidden] { display: none; }
.form-success img { width: 150px; animation: bob 3s ease-in-out infinite; }
.success-title { font: 700 clamp(1.6rem, 5vw, 2.3rem)/1.1 var(--font-head); margin: .6rem 0; }

/* ---------- footer ---------- */
.site-footer { position: relative; background: var(--cocoa); color: var(--cream); padding: 4.5rem 0 1.5rem; --bg: var(--cocoa); }
.foot-grid { display: grid; gap: 1.8rem; justify-items: start; }
.foot-brand { display: flex; align-items: center; gap: 1rem; }
.foot-brand img { border-radius: 50%; border: 3px solid var(--cream); }
.foot-tag { font: 600 1.25rem/1.2 var(--font-head); margin: 0; }
.foot-nav { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.foot-nav a, .foot-mail a { color: var(--cream); font-weight: 500; }
.foot-nav a:hover, .foot-mail a:hover { color: var(--banana); }
.foot-mail { margin: 0; }
.copy { margin: 2.2rem auto 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,247,232,.25); text-align: center; font-size: .9rem; width: min(1160px, 100% - 2rem); }
.site-footer :focus-visible { outline-color: var(--banana); box-shadow: none; }

/* ============ responsive ============ */
@media (max-width: 880px) {
  .menu-toggle { display: flex; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: var(--cream); border-bottom: 3px solid var(--cocoa); padding: .8rem 1rem 1.2rem; gap: .2rem; display: none; }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: .9rem 1rem; font-size: 1.1rem; }
  .nav-cta { margin: .5rem 0 0; }
  .art-col { min-height: 300px; }
}
@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: 1fr 1fr; }
  .founding-card { grid-template-columns: 220px 1fr; }
  .founding-art { margin: 0; }
  .viewer-inner { grid-template-columns: 1.1fr 1fr; }
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1fr 1.05fr; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .menu-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .about-grid { grid-template-columns: 1.1fr .9fr; }
  .faq-grid { grid-template-columns: .8fr 1.2fr; }
  .contact-grid { grid-template-columns: .9fr 1.1fr; }
  .foot-grid { grid-template-columns: 1.3fr 1.2fr auto; align-items: center; }
}
@media (max-width: 480px) {
  .note-card { flex-direction: column; align-items: flex-start; }
  .chip-hmm { font-size: 1.3rem; } .chip-kay { font-size: 1.2rem; }
  .art-note { font-size: .65rem; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .btn:hover, .dish:hover > article, .work:hover .piece, .filter:hover { transform: none; }
  .drift { display: none; }
}

/* per-card placement helpers */
.src-ml { top: 8%; bottom: auto; width: 12%; }
.dd-top { left: 23%; top: 3%; }
.burst.l { right: auto; left: 8%; }

/* ---------- cloudier hero ---------- */
.hero .d1 { top: 4%; width: 300px; height: 150px; }
.hero .d2 { top: 36%; width: 220px; height: 110px; opacity: .9; }
.hero .d3 { top: 14%; width: 420px; height: 210px; opacity: .8; }
.hero .d4 { top: 58%; width: 260px; height: 130px; }
.d5 { width: 200px; height: 100px; top: 26%; left: -220px; animation-duration: 60s; animation-delay: -10s; }
.d6 { width: 340px; height: 170px; top: 46%; left: -360px; animation-duration: 95s; animation-delay: -50s; opacity: .85; }
.hero-art::before { display: none; content: ""; position: absolute; inset: -6% -10% 4% -10%; background: url("assets/cloud.svg") center/100% 100% no-repeat; opacity: .9; filter: drop-shadow(0 10px 0 rgba(224,160,64,.16)); z-index: -1; }
.cloud-bank { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(110px, 16vw, 190px); z-index: 0; pointer-events: none; }
.cloud-bank .back { fill: #fff; opacity: .65; }
.cloud-bank .front { fill: #fff; }

/* ---------- hero: just the moving clouds ---------- */
.hero { min-height: min(86vh, 760px); display: flex; align-items: center; }
.hero-grid { grid-template-columns: 1fr !important; justify-items: center; text-align: center; width: min(1160px, 100% - 2rem); }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero .lead { margin-inline: auto; max-width: 38rem; }
.hero .cta-row { justify-content: center; }
.hero .drift { animation-name: drift; }
.hero .d1 { top: 6%; width: 340px; height: 170px; animation-duration: 55s; }
.hero .d2 { top: 62%; width: 260px; height: 130px; animation-duration: 70s; animation-delay: -30s; }
.hero .d3 { top: 18%; width: 460px; height: 230px; animation-duration: 90s; animation-delay: -55s; opacity: .85; }
.hero .d4 { top: 44%; width: 300px; height: 150px; animation-duration: 65s; animation-delay: -15s; }
.hero .d5 { top: 2%; width: 220px; height: 110px; animation-duration: 48s; animation-delay: -25s; }
.d7 { width: 380px; height: 190px; top: 52%; left: -400px; animation-duration: 100s; animation-delay: -70s; opacity: .8; }
.d8 { width: 240px; height: 120px; top: 30%; left: -260px; animation-duration: 58s; animation-delay: -42s; }
.hero .drift { box-shadow: none; }

/* ---------- falling bananas: scroll-linked transition (positions are set by script.js) ---------- */
.banana-drop { position: fixed; inset: 0; z-index: 45; overflow: hidden; pointer-events: none; visibility: hidden; }
.banana-drop.go { visibility: visible; }
.banana-drop .bn { position: absolute; top: 0; left: var(--x); width: calc(var(--s) * 1.35); height: auto; opacity: 0; will-change: transform; filter: drop-shadow(0 6px 0 rgba(58,42,34,.14)); }
@media (prefers-reduced-motion: reduce) { .banana-drop { display: none; } }

/* ---------- about additions ---------- */
.love-note { font: 600 1.25rem/1.3 var(--font-head); color: var(--straw-ink); }
.work-with { margin-top: 1.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
.chips li { background: #fff; border: var(--line); border-radius: 999px; padding: .45rem 1rem; font: 600 1rem/1 var(--font-head); box-shadow: 2px 3px 0 rgba(58,42,34,.2); }
.sub-h { margin-top: 1.2rem; font-size: 1.2rem; }

/* ---------- floating clouds and treats (decorative) ---------- */
.decos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.deco { position: absolute; width: var(--w, 160px); height: auto; max-width: none; }
.deco.cloud { animation: deco-drift var(--t, 26s) ease-in-out infinite alternate; }
.deco.treat { transform: rotate(var(--r, 0deg)); animation: deco-bob var(--t, 6s) ease-in-out infinite alternate; filter: drop-shadow(0 5px 0 rgba(58, 42, 34, .1)); }
@keyframes deco-drift { from { transform: translateX(-26px); } to { transform: translateX(38px); } }
@keyframes deco-bob { from { transform: translateY(0) rotate(var(--r, 0deg)); } to { transform: translateY(-12px) rotate(calc(var(--r, 0deg) + 4deg)); } }
.site-footer .decos { z-index: 0; }
.site-footer .foot-grid, .site-footer .copy { position: relative; z-index: 1; }
@media (max-width: 820px) {
  .deco { width: calc(var(--w, 160px) * .62); }
  .deco.hide-sm { display: none; }
}
.copy-ico { display: inline-block; vertical-align: middle; height: 30px; width: auto; margin: 0 .35rem; }