/* Acai Bunny concept preview, Webnexis.
   Archetype A18 Mascot Counter. Palette family 04 Mid-century Kitchen,
   hexes sampled from the client's own logo file.
   Only transform and opacity are animated. Every transition names its
   properties; the blanket shorthand is never used. */

/* ============ tokens ============ */
:root {
  --ground: #FBF3DF;
  --surface: #FFFBF0;
  --ink: #2C3D1C;
  --ink-soft: #5A6B47;
  --leaf: #4B6A2A;
  --leaf-dark: #3A5420;
  /* The logo green, sampled from the ACAI BUNNY wordmark in their own
     logo file. This is now the primary brand green: it fills buttons and
     large areas. It is far too light to carry text on cream (2.1:1), so
     --leaf and --leaf-dark are the legible green ramp beneath it. */
  --leaf-bright: #90B46C;
  --sage: #90B46C;
  --sage-pale: #E3EED6;
  --caramel: #E49C48;
  --caramel-deep: #A85F14;
  --caramel-pale: #FAE6C8;
  --grape: #4B6A2A;
  --blush: #E4B4CC;
  --lilac: #CFE0BC;
  --rule: #E6D9BC;

  --bun-cream: #FCF0D8;
  --bun-line: #7A4B8C;
  --bun-lilac: #D8C0E4;
  --bun-blush: #E4B4CC;
  --bun-bowl: #E49C48;
  --bun-bowl-2: #CC8430;
  --bun-acai: #6B2A78;
  --bun-leaf: #90B46C;

  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --s1: 6px;
  --s2: 12px;
  --s3: 20px;
  --s4: 32px;
  --s5: 52px;
  --s6: 84px;
  --s7: 120px;

  --wrap: 1180px;
  --ease: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);

  --shadow-card:
    0 1px 2px rgba(44, 61, 28, 0.05),
    0 8px 20px -8px rgba(44, 61, 28, 0.14),
    0 24px 48px -32px rgba(75, 106, 42, 0.22);
  --shadow-lift:
    0 2px 4px rgba(44, 61, 28, 0.06),
    0 14px 30px -10px rgba(44, 61, 28, 0.18),
    0 34px 60px -34px rgba(75, 106, 42, 0.28);
}

/* ============ reset and base ============ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Warm paper depth: two soft radial washes plus an SVG grain layer,
   so the cream ground is not a flat fill. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 12% -6%, rgba(144, 180, 108, 0.20), transparent 70%),
    radial-gradient(760px 560px at 92% 6%, rgba(228, 156, 72, 0.18), transparent 72%),
    radial-gradient(1000px 800px at 50% 110%, rgba(228, 180, 204, 0.16), transparent 70%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

main, header, footer, .preview-banner { position: relative; z-index: 1; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0;
}

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

a { color: var(--leaf); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--leaf-dark); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--caramel-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

img { max-width: 100%; display: block; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute;
  left: var(--s3);
  top: -60px;
  z-index: 200;
  background: var(--leaf);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  transition: top 180ms var(--ease-soft);
}
.skip:focus { top: var(--s3); color: #fff; }

/* ============ badge (the ear-notched pill) ============ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  /* --caramel-deep on --caramel-pale measures 3.99:1 at 13px, just under AA.
     A darker brown on the same ground clears it at 6.2:1. */
  color: #7D460E;
  background: var(--caramel-pale);
  border: 1.5px solid var(--caramel);
  padding: 6px 16px 6px 12px;
  margin: 0 0 var(--s3);
  border-radius: 999px 999px 999px 6px;
}
.badge::before {
  content: "";
  width: 9px;
  height: 14px;
  flex: none;
  background: var(--caramel);
  border-radius: 60% 60% 40% 40% / 75% 75% 25% 25%;
  transform: rotate(-16deg);
}

/* ============ underline swash ============ */
/* nowrap keeps the hand-drawn underline running under the whole phrase instead
   of breaking across lines. On a narrow screen that is the wrong trade: a long
   phrase like "opposite San Churros" cannot wrap and pushes the page sideways,
   which is what put 19px of horizontal overflow on find-us. Below 700px the
   phrase wraps and the swash underlines the last line, which still reads. */
.swash { position: relative; white-space: nowrap; }
@media (max-width: 700px) {
  .swash { white-space: normal; }
}
.swash::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.16em;
  height: 0.24em;
  background: no-repeat center / 100% 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 46 5, 88 16, 132 9 C 178 2, 216 15, 258 8 C 274 5, 288 9, 297 6' fill='none' stroke='%2390B46C' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ============ buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease-soft), background-color 160ms linear, color 160ms linear, border-color 160ms linear;
}
/* The button is the biggest patch of green on the site, so it is the one that
   has to BE the logo green rather than a darker cousin of it. Cream-white text
   on #90B46C is only 2.35:1 and fails outright, so the label is deep green
   instead: 4.8:1, passes AA, and reads much closer to the logo than white did.
   Hover goes lighter rather than darker, which lifts contrast to 5.7:1. */
.btn-primary {
  background: var(--leaf-bright);
  color: var(--ink);
  box-shadow: 0 2px 0 var(--leaf), 0 10px 22px -12px rgba(58, 84, 32, 0.7);
}
.btn-primary:hover { background: #A2C57E; color: var(--ink); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--leaf); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--ground); transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(1px); }
.btn-caramel {
  background: var(--caramel-deep);
  color: #fff;
  box-shadow: 0 2px 0 #7d460e, 0 10px 22px -12px rgba(125, 70, 14, 0.7);
}
.btn-caramel:hover { background: #8d4f0f; color: #fff; transform: translateY(-2px); }
.btn-caramel:active { transform: translateY(1px); }

/* ============ nav ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 243, 223, 0.94);
  border-bottom: 1.5px solid var(--rule);
}
@supports (backdrop-filter: blur(8px)) {
  .nav { backdrop-filter: blur(8px); }
}
.nav-in {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 82px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
/* Their own logo art, pulled from acaibunny.com.au by download-logo.mjs.
   The nav carries the bunny mark on its own because the full lockup is
   portrait and its wordmark goes illegible at nav height. The full lockup
   with their wordmark runs in the hero and the footer. */
.brand img { height: 54px; width: auto; flex: none; }
.brand b {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
}
.brandtext { display: block; }
.brand .brandtext > span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--leaf);
}
.navlinks { display: flex; align-items: center; gap: 4px; }
.navlinks a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: background-color 150ms linear, color 150ms linear;
}
.navlinks a:hover { background: var(--sage-pale); color: var(--ink); }
.navlinks a[aria-current="page"] { background: var(--sage-pale); color: var(--leaf-dark); }
.nav .btn { min-height: 44px; padding: 10px 20px; font-size: 15px; }

/* There are deliberately two Order buttons in the nav markup: one inside the
   link list so it lands inside the burger panel on a phone, and one outside it
   so it stays visible beside the links on desktop. Exactly one must ever show.
   The mobile rule below hides the outer one; this hides the inner one on
   desktop, which was missing and put two identical green buttons side by side
   on every page. */
@media (min-width: 960px) {
  .navlinks .btn { display: none; }
}

.burger {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink);
  transition: background-color 150ms linear, color 150ms linear;
}
.burger:hover { background: var(--ink); color: var(--ground); }
.burger i {
  position: relative;
  width: 20px;
  height: 2px;
  background: currentColor;
  display: block;
  transition: transform 200ms var(--ease-soft), opacity 120ms linear;
}
.burger i::before, .burger i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 200ms var(--ease-soft);
}
.burger i::before { top: -6px; }
.burger i::after { top: 6px; }
.burger[aria-expanded="true"] i { transform: rotate(45deg); }
.burger[aria-expanded="true"] i::before { transform: translateY(6px) rotate(-90deg); }
.burger[aria-expanded="true"] i::after { opacity: 0; transform: scaleX(0); }

@media (max-width: 1040px) {
  .brand .brandtext { display: none; }
}

@media (max-width: 959px) {
  .brand .brandtext { display: block; }
  .navlinks {
    position: fixed;
    inset: 82px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* Solid fill, never translucent. Page text must not ghost through. */
    background: var(--ground);
    border-bottom: 2px solid var(--rule);
    padding: var(--s2) 20px var(--s4);
    box-shadow: 0 24px 40px -24px rgba(44, 61, 28, 0.4);
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: transform 200ms var(--ease-soft), opacity 160ms linear, visibility 0s linear 200ms;
  }
  .navlinks.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 220ms var(--ease), opacity 160ms linear, visibility 0s linear 0s;
  }
  .navlinks a {
    min-height: 52px;
    padding: 0 16px;
    font-size: 18px;
    border-radius: 10px;
    border-bottom: 1px solid var(--rule);
  }
  .navlinks .btn { margin-top: var(--s2); width: 100%; }
  .burger { display: inline-flex; }
  .nav-in > .btn { display: none; }
}

/* ============ sections ============ */
.sec { padding: var(--s7) 0; }
.sec-sm { padding: var(--s6) 0; }
.sec-head { max-width: 720px; margin-bottom: var(--s5); }
.sec-head h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin-bottom: var(--s3); }
.sec-head p { color: var(--ink-soft); font-size: 18px; max-width: 60ch; }

.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--ease-soft), transform 620ms var(--ease-soft);
}


/* ============ hero ============ */
.hero { padding: var(--s6) 0 var(--s5); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--s5);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.5rem);
  margin-bottom: var(--s3);
  max-width: 15ch;
}
.hero-sub { font-size: 19px; color: var(--ink-soft); max-width: 46ch; }
/* Hero H1 = brand name. Small tag sits directly beneath, replacing the old
   caramel badge. Reads as a wordmark + tagline lockup, not a sales badge. */
.hero h1 { line-height: 0.95; }
.hero .hero-tag {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--caramel-deep);
  margin: 8px 0 var(--s3);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.hero-micro {
  margin-top: var(--s3);
  font-size: 14px;
  font-weight: 600;
  color: var(--caramel-deep);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-micro .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--leaf);
  flex: none;
}

/* the mascot stage: NO bubble any more. The bunny SVG floats free in the right
   column of the hero, sized to fit and positioned so it never overlaps the
   heading text on the left. */
.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 380px;
}
.stage-open { padding: 20px; }
.stage .mascot {
  width: 100%;
  max-width: 380px;
  height: auto;
  /* NO drop-shadow filter here. filter: drop-shadow() creates a compositing
     layer that isolates the image, which breaks mix-blend-mode: multiply. The
     hop animation stays; the shadow was cosmetic and not worth the trade. */
  animation: bunny-hop 3.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 50% 100%;
  mix-blend-mode: multiply;
  position: relative;
  z-index: 3;
}
.stage.hopping .mascot { animation: bunny-hop 700ms cubic-bezier(0.5, 0, 0.5, 1) 1; }
/* Hide the SVG fallback whenever the real image is available. Only shows when
   body.no-logo is set (site.js flips this class if the img 404s). */
.mascot-fallback { display: none; }
body.no-logo .stage img.mascot { display: none; }
body.no-logo .mascot-fallback { display: block; }

/* Desktop only: bunny nudges to the LEFT into the heading column so it visibly
   sits on top of the last word of the H1, floating above the copy. Keeps the
   mockup playful and asserts the mascot as the hero. */
@media (min-width: 900px) {
  .stage { overflow: visible; margin-left: -80px; }
  .stage .mascot { margin-top: -40px; }
  .stage .stage-quip { z-index: 4; }
}
@media (prefers-reduced-motion: reduce) { .stage .mascot { animation: none; } }
.stage-disc {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 34%, rgba(255, 251, 240, 0.95), rgba(227, 238, 214, 0.9) 58%, rgba(144, 180, 108, 0.35) 100%);
  border: 2px solid var(--sage);
  box-shadow: var(--shadow-card);
}
.stage-disc::after {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1.5px dashed rgba(122, 75, 140, 0.28);
}
/* Logo files are JPEGs on white ground. Puppeteer knockout step runs on the
   client's Mac when download-assets.mjs succeeds, and produces true-transparent
   PNGs. If that step failed (no puppeteer available), the fallback is the raw
   JPEG with white background. mix-blend-mode: multiply erases the white against
   the cream site ground for both cases, so the logo blends whether or not the
   knockout ran. */
/* Multiply only where the ground is light. In the footer the ground is deep
   green, and multiply against a dark colour crushes the whole mark to near
   black, which is why the footer bunny was unreadable. logo.png is a real
   transparent PNG (knocked out at build time), so the footer needs no blend
   mode at all. The two cream contexts keep it so the raw-JPEG fallback, which
   still has a white box behind it, disappears into the page. */
.brand img, .stage-logo { mix-blend-mode: multiply; }
.foot-brand img { mix-blend-mode: normal; }
.stage-logo { position: relative; width: 78%; height: auto; object-fit: contain; }

/* Stage fallback: inline SVG bunny that only appears when body.no-logo is set
   (their real logo hasn't been downloaded yet via download-assets.mjs). Prevents
   the empty bubble from stacking over the copy on mobile, and keeps the hero
   feeling alive with a hopping bunny even in the pre-asset state. */
.stage-fallback { display: none; }
.stage-fallback-note { display: none; }
.no-logo .stage-fallback {
  display: block;
  position: relative;
  width: 62%;
  height: auto;
  color: var(--plum, #7A4B8C);
  filter: drop-shadow(0 4px 14px rgba(122, 75, 140, 0.25));
  animation: bunny-hop 2.6s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 50% 100%;
}
@keyframes bunny-hop {
  0%,   60%, 100% { transform: translateY(0) scaleY(1); }
  70%             { transform: translateY(0) scaleY(0.88); }
  80%             { transform: translateY(-22px) scaleY(1.04); }
  90%             { transform: translateY(-6px) scaleY(0.96); }
}
.no-logo .stage-fallback-note {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  font-size: 12.5px;
  color: var(--ink-soft);
  background: rgba(255, 251, 240, 0.94);
  border: 1px dashed var(--sage, #9CB380);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.no-logo .stage-fallback-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(122, 75, 140, 0.10);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11.5px;
}
@media (prefers-reduced-motion: reduce) {
  .no-logo .stage-fallback { animation: none; }
}

/* ============ aesthetic uplift (2026-09-02) ============
   Six moves layered over the existing structure so the site stops reading as a
   template and starts reading as Acai Bunny's own. Nothing in the HTML has to
   move; these are all decorative overlays and hover-state upgrades. */

/* Ambient corner orbs removed on Costa's note. They read as competing bubbles
   against the hero disc and the existing scalloped rhythm. */

/* 2. Scalloped section divider. Mid-century kitchen tile motif in sage. Adds
   visual rhythm between sections instead of the current flat page-scroll. */
.sec + .sec, .sec + .sec-sm, .sec-sm + .sec, .sec-sm + .sec-sm { position: relative; }
.sec + .sec::before, .sec + .sec-sm::before,
.sec-sm + .sec::before, .sec-sm + .sec-sm::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 22px;
  background: no-repeat top center / auto 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 22 Q 10 0 20 22 T 40 22 T 60 22 T 80 22 T 100 22 T 120 22 L 120 0 L 0 0 Z' fill='%23FBF3DF'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* 3. Sticker-tag callout that overlays the hero, gives the page a real signature
   element. Rotated hand-lettered feel, sits over the stage bubble corner. */
.stage { position: relative; }
.stage::after {
  content: "Made in front of you ✨";
  position: absolute;
  top: -8px;
  right: -6px;
  z-index: 3;
  background: var(--grape);
  color: var(--surface);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 8px 16px;
  border-radius: 20px 20px 20px 4px;
  transform: rotate(6deg);
  box-shadow: 0 6px 18px -6px rgba(75, 106, 42, 0.45);
  white-space: nowrap;
}
@media (max-width: 900px) { .stage::after { right: auto; left: 50%; transform: translateX(-50%) rotate(-3deg); top: -12px; } }

/* 4. Path cards get a top-edge accent stripe (sage, caramel, grape), a spring
   scale on hover, and a bunny paw watermark corner peeking through. Same
   three-tile grid, more character. */
.paths .path { position: relative; overflow: hidden; }
.paths .path::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--sage);
  transition: background 200ms linear;
}
.paths .path:nth-child(1)::before { background: linear-gradient(90deg, var(--sage), var(--leaf)); }
.paths .path:nth-child(2)::before { background: linear-gradient(90deg, var(--caramel), var(--caramel-deep)); }
.paths .path:nth-child(3)::before { background: linear-gradient(90deg, var(--grape), #8FB562); }
.paths .path::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 130px;
  height: 130px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cellipse cx='7.5' cy='4' rx='2.6' ry='3.4' fill='%23E3EED6'/%3E%3Cellipse cx='16.5' cy='4' rx='2.6' ry='3.4' fill='%23E3EED6'/%3E%3Cellipse cx='2.8' cy='13' rx='2.6' ry='3.4' fill='%23E3EED6'/%3E%3Cellipse cx='21.2' cy='13' rx='2.6' ry='3.4' fill='%23E3EED6'/%3E%3Cpath d='M12.4 11.6 C17.6 11.6 20.2 15.8 20.2 19 C20.2 23 16.2 25.2 12.4 25.2 C8.6 25.2 4.8 23 4.8 19 C4.8 15.8 7.2 11.6 12.4 11.6 Z' fill='%23E3EED6'/%3E%3C/svg%3E");
  opacity: 0.55;
  transform: rotate(-12deg);
  transition: transform 300ms var(--ease);
  pointer-events: none;
}
.paths .path:hover { transform: translateY(-6px) scale(1.02); border-color: var(--grape); }
.paths .path:hover::after { transform: rotate(4deg) scale(1.1); }

/* 5. Primary CTA sheen: subtle diagonal shimmer sweeps across on hover.
   Playful without going full-glass. */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.28) 50%, transparent 80%);
  transform: skewX(-16deg);
  transition: left 480ms var(--ease-soft);
  z-index: -1;
}
.btn-primary:hover::after { left: 130%; }

/* 6. Hero headline gets a splashy caramel highlight block behind the swash word,
   like a mid-century sign painter's marker line. Complements the SVG underline
   rather than replacing it. */
.hero h1 .swash {
  background: linear-gradient(180deg, transparent 55%, rgba(228, 156, 72, 0.28) 55%, rgba(228, 156, 72, 0.28) 85%, transparent 85%);
  padding: 0 4px;
  border-radius: 3px;
}

/* ============ deeper aesthetic layer (round 2) ============ */

/* 7. Woden postmark rubber-stamp in the hero. Rotated, textured, weathered
   plum ink. Sits in the hero background as a subtle place-of-origin mark. */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  bottom: -30px;
  right: -60px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  border: 8px double var(--grape);
  opacity: 0.09;
  transform: rotate(-14deg);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: "WODEN · CANBERRA · EST 2024 · WODEN · CANBERRA · EST 2024";
  position: absolute;
  bottom: 100px;
  right: -20px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  color: var(--grape);
  opacity: 0.14;
  transform: rotate(-14deg);
  font-family: var(--body);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.18em;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  pointer-events: none;
  z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) { .hero::before, .hero::after { display: none; } }

/* 8. Testimonial pull-quote: just adds a giant hanging plum quote mark on top
   of the existing dark .press card defined later in this file. Do NOT restyle
   background or blockquote colour here, it will collide and produce dark text
   on a dark card. */
.press { position: relative; overflow: hidden; }
.press::before {
  content: "\201C";
  position: absolute;
  top: -46px;
  left: -6px;
  font-family: var(--display);
  font-size: 180px;
  line-height: 1;
  color: var(--sage);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}
.press blockquote, .press cite { position: relative; z-index: 1; }

/* 9. Instagram wall: staggered offset layout so tiles read as a corkboard,
   not a grid. Different pattern from Xtreme Acai's polaroid tilts. */
.ig-grid.rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); align-items: start; }
.ig-grid.rail .ig-card:nth-child(1) { margin-top: 0; }
.ig-grid.rail .ig-card:nth-child(2) { margin-top: var(--s4); }
.ig-grid.rail .ig-card:nth-child(3) { margin-top: 0; }
.ig-card {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--sage-pale);
  border: 2px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease-soft);
}
.ig-card::after {
  content: "@loveacaibunny";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  transform: rotate(-3deg);
}
.ig-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
@media (max-width: 720px) {
  .ig-grid.rail { grid-template-columns: 1fr; }
  .ig-grid.rail .ig-card { margin-top: 0; }
}

/* 10. "Today's special" floating chalkboard chip. Bottom-right sticker with a
   day-of-week ribbon. Only shows on the home page hero area. */
.today-chip {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 40;
  background: #22301A;
  color: var(--sage-pale);
  padding: 12px 18px 14px;
  border-radius: 14px;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.35);
  transform: rotate(-2deg);
  max-width: 220px;
  font-family: var(--body);
  border: 2px solid var(--caramel);
  animation: chalk-in 800ms 1.6s var(--ease) both;
}
.today-chip::before {
  content: "TODAY";
  display: block;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--caramel);
  margin-bottom: 4px;
}
.today-chip strong { font-family: var(--display); font-size: 22px; line-height: 1.1; display: block; color: var(--surface); }
.today-chip span { display: block; font-size: 12.5px; line-height: 1.35; margin-top: 6px; color: var(--sage-pale); opacity: 0.86; }
.today-chip::after {
  content: "";
  position: absolute;
  top: -6px;
  right: 22px;
  width: 24px;
  height: 12px;
  background: var(--caramel);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 60%, 0 100%);
}
@keyframes chalk-in {
  from { opacity: 0; transform: rotate(-2deg) translateY(20px) scale(0.9); }
  to   { opacity: 1; transform: rotate(-2deg) translateY(0) scale(1); }
}
@media (max-width: 640px) { .today-chip { bottom: 78px; right: 12px; max-width: 180px; padding: 10px 14px 12px; } .today-chip strong { font-size: 18px; } }

/* 11. Footer flourish: bunny-paw trail across the top edge, plus a warmer plum
   glow from the top so the footer reads as its own room. */
.foot { position: relative; overflow: hidden; }
.foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--caramel) 0 20px,
    transparent 20px 42px,
    var(--sage) 42px 62px,
    transparent 62px 84px,
    var(--grape) 84px 104px,
    transparent 104px 126px
  );
  opacity: 0.65;
}
.foot::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 500px;
  height: 60px;
  background: radial-gradient(ellipse at center top, rgba(168, 196, 137, 0.14), transparent 70%);
  pointer-events: none;
}

/* Playful button paw removed on Costa's note (no paws anywhere). */
.btn-caramel { position: relative; }

/* ============ bunny + acai personality layer (round 3) ============ */

/* 13. Sprinkled acai berries: five small SVG dots as background decoration on
   section corners. Not the big drifting orbs (deleted): these are static
   sprinkles that read as ingredients scattered on the page, not floating clouds. */
.sec, .sec-sm { position: relative; }
.sec::after, .sec-sm::after {
  content: "";
  position: absolute;
  right: 3%;
  top: 15%;
  width: 44px;
  height: 44px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='16' cy='14' r='5.5' fill='%234B6A2A' opacity='0.55'/%3E%3Ccircle cx='40' cy='20' r='4.5' fill='%238FB562' opacity='0.5'/%3E%3Ccircle cx='30' cy='38' r='6' fill='%234B6A2A' opacity='0.6'/%3E%3Ccircle cx='48' cy='44' r='4' fill='%23E4708C' opacity='0.55'/%3E%3Ccircle cx='10' cy='42' r='3.5' fill='%238FB562' opacity='0.55'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
.sec > *, .sec-sm > * { position: relative; z-index: 1; }
.sec:nth-of-type(even)::after, .sec-sm:nth-of-type(even)::after {
  right: auto; left: 3%; top: 10%;
  transform: rotate(20deg);
}

/* Paw trail removed on Costa's note. */

/* Bunny hop-on-scroll: whenever the user scrolls, the mascot in the hero (real
   logo image OR the SVG fallback) does a quick hop. Site.js toggles .hopping
   on the .stage on each scroll event, debounced by 700ms. Uses the same
   bunny-hop keyframes already defined for the fallback. */
.stage-logo, .stage-fallback { transform-origin: 50% 100%; }
.stage.hopping .stage-logo,
.stage.hopping .stage-fallback {
  animation: bunny-hop 700ms cubic-bezier(0.5, 0, 0.5, 1) 1;
}
@media (prefers-reduced-motion: reduce) {
  .stage.hopping .stage-logo, .stage.hopping .stage-fallback { animation: none; }
}

/* 15. Hero speech bubble from the mascot: caramel bubble tail from the stage,
   reading "Try the Mother Bowl". Only appears once the logo has loaded (so
   there's a bunny to speak from), otherwise the fallback hopping SVG holds
   the space silently. */
.stage { position: relative; }
.stage .stage-quip {
  position: absolute;
  bottom: 6%;
  left: -12%;
  background: var(--caramel);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 18px 18px 4px 18px;
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.2;
  max-width: 180px;
  transform: rotate(-4deg);
  box-shadow: 0 6px 16px -6px rgba(168, 95, 20, 0.35);
  z-index: 4;
  display: none;
}
body:not(.no-logo) .stage .stage-quip { display: block; }
.stage .stage-quip::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 8px;
  width: 0; height: 0;
  border-left: 12px solid var(--caramel);
  border-top: 4px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(-8deg);
}
@media (max-width: 900px) { .stage .stage-quip { left: 4%; bottom: -14%; } }

/* ============ reviews / socials page ============ */

/* Rating panel + press quote side by side. Big grape number on cream card, press
   pull quote to the right using the existing .press styling. Stacks on mobile. */
.rating-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s4); align-items: stretch; }
@media (max-width: 780px) { .rating-grid { grid-template-columns: 1fr; } }
.rating-card {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--rule);
  border-radius: 22px;
  padding: var(--s4);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.rating-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -30px;
  width: 160px;
  height: 176px;
  color: var(--sage-pale);
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cellipse cx='7.5' cy='4' rx='2.6' ry='3.4' fill='%23E3EED6'/%3E%3Cellipse cx='16.5' cy='4' rx='2.6' ry='3.4' fill='%23E3EED6'/%3E%3Cellipse cx='2.8' cy='13' rx='2.6' ry='3.4' fill='%23E3EED6'/%3E%3Cellipse cx='21.2' cy='13' rx='2.6' ry='3.4' fill='%23E3EED6'/%3E%3Cpath d='M12.4 11.6 C17.6 11.6 20.2 15.8 20.2 19 C20.2 23 16.2 25.2 12.4 25.2 C8.6 25.2 4.8 23 4.8 19 C4.8 15.8 7.2 11.6 12.4 11.6 Z' fill='%23E3EED6'/%3E%3C/svg%3E");
  opacity: 0.55;
  transform: rotate(-10deg);
  pointer-events: none;
}
.rating-eyebrow {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--caramel-deep);
  margin: 0 0 var(--s2);
}
.rating-num {
  font-family: var(--display);
  font-size: clamp(4rem, 8vw, 6.5rem);
  line-height: 0.9;
  color: var(--grape);
  margin: 0 0 var(--s1);
  font-variant-numeric: tabular-nums;
}
.rating-num span { font-size: 0.35em; color: var(--ink-soft); font-weight: 400; letter-spacing: 0.02em; }
.rating-sub { font-size: 15px; color: var(--ink-soft); margin: 0 0 var(--s3); max-width: 34ch; }
/* Caramel stars were 2.22:1 on the card ground. The deeper brown reads as the
   same colour family and clears the 3:1 large-text minimum at 4.9:1. */
.rating-stars { display: flex; gap: 6px; color: #B8681A; font-size: 26px; line-height: 1; margin-bottom: var(--s3); }
.rating-note { font-size: 12.5px; color: var(--ink-soft); font-style: italic; margin: 0; max-width: 40ch; }

/* Scrapbook wall of index-card quotes with washi tape strips. Different from
   Xtreme Acai's polaroid corkboard: hard-edged cards, tape not pins, colour
   varies per card, tape sits centred at top and rotates slightly with the tilt.
   Signature moment for the Reviews page. */
.scrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s4) var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s3);
}
.scrap-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: var(--s4) var(--s3) var(--s3);
  box-shadow:
    0 1px 2px rgba(44, 61, 28, 0.06),
    0 12px 28px -10px rgba(44, 61, 28, 0.16);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease-soft);
}
.scrap-tilt-l { transform: rotate(-1.4deg); }
.scrap-tilt-r { transform: rotate(1.6deg); }
.scrap-card:hover, .scrap-card:focus-within {
  transform: rotate(0deg) translateY(-4px);
  box-shadow:
    0 4px 8px rgba(44, 61, 28, 0.10),
    0 24px 44px -12px rgba(44, 61, 28, 0.24);
  z-index: 2;
}
.scrap-card p {
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--s3);
}
.scrap-card footer { display: flex; align-items: baseline; gap: 10px; padding-top: var(--s2); border-top: 1px dashed var(--rule); }
.scrap-card footer b { font-family: var(--body); font-weight: 800; color: var(--grape); font-size: 14px; letter-spacing: 0.02em; }
.scrap-card footer span { font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--caramel-deep); }

/* Washi tape: absolutely positioned, top-centre, rotated opposite to card tilt,
   colour varies per instance. Adds tactile scrapbook feel. */
.tape {
  position: absolute;
  top: -14px;
  left: 50%;
  width: 92px;
  height: 24px;
  transform: translateX(-50%) rotate(-4deg);
  opacity: 0.75;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(44, 61, 28, 0.14);
}
.tape-caramel { background: repeating-linear-gradient(45deg, var(--caramel) 0 8px, var(--caramel-pale) 8px 16px); }
.tape-sage    { background: repeating-linear-gradient(45deg, var(--sage) 0 8px, var(--sage-pale) 8px 16px); }
.tape-lilac   { background: repeating-linear-gradient(45deg, var(--lilac) 0 8px, #EDF4E2 8px 16px); }
.scrap-tilt-r .tape { transform: translateX(-50%) rotate(6deg); }
@media (prefers-reduced-motion: reduce) { .scrap-tilt-l, .scrap-tilt-r { transform: none; } .scrap-card:hover { transform: translateY(-4px); } }

.scrap-note {
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
  margin: var(--s4) 0 0;
}

/* Follow strip: a caramel band with copy and a CTA. Small breather between the
   IG grid and the footer. */
.follow-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  background: linear-gradient(120deg, var(--caramel-pale), var(--sage-pale));
  border: 2px solid var(--rule);
  border-radius: 20px;
  padding: var(--s3) var(--s4);
  flex-wrap: wrap;
  box-shadow: var(--shadow-card);
}
.follow-strip p { margin: 0; font-size: 16px; color: var(--ink); max-width: 60ch; }
.follow-strip a:not(.btn) { color: var(--grape); font-weight: 800; text-decoration: none; }
.follow-strip a:not(.btn):hover { color: var(--leaf-dark); }
.follow-strip .follow-lead { flex-basis: 100%; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 var(--s2); }
.follow-strip .follow-lead b { color: var(--ink); }

/* Social chip row: each platform is a rounded chip with the actual brand icon in
   its brand tint so you can pick them out at a glance. Chips flow to a scroll
   rail on phones. */
.social-row {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1 1 auto;
}
.social-row li { margin: 0; }
.social-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 12px;
  background: #fff;
  border: 2px solid var(--rule);
  border-radius: 999px;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  min-height: 44px;
}
.social-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(44, 61, 28, 0.14); }
.social-chip:focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; }
.social-ico {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #fff;
  flex: none;
}
.social-ico svg { display: block; }
.social-txt { display: inline-flex; flex-direction: column; line-height: 1.15; }
.social-txt b { font-family: var(--body); font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: 0.02em; }
.social-txt span { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.social-ig .social-ico { background: linear-gradient(45deg, #F58529, #DD2A7B 45%, #8134AF 75%, #515BD4); }
.social-tt .social-ico { background: #010101; position: relative; }
.social-tt .social-ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 2px 0 0 #25F4EE, inset -2px 0 0 #FE2C55; opacity: 0.9; pointer-events: none; }
.social-fb .social-ico { background: #1877F2; }
.social-ue .social-ico { background: #06C167; }
.social-chip:hover { border-color: var(--grape); }
.follow-strip .follow-cta { flex: 0 0 auto; }

@media (max-width: 720px) {
  .follow-strip { padding: var(--s3); }
  .social-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(var(--s3) * -1);
    padding: 4px var(--s3) 8px;
    scrollbar-width: none;
  }
  .social-row::-webkit-scrollbar { display: none; }
  .social-row li { scroll-snap-align: start; }
  .social-chip { white-space: nowrap; }
  .follow-strip .follow-cta { width: 100%; text-align: center; }
}

/* Swipe hint (used on IG rail) if not already styled. */
.swipe-hint { font-size: 12.5px; color: var(--ink-soft); font-style: italic; margin: 0 0 var(--s2); text-align: right; }

/* ============ Postcard-fan carousel (Acai Bunny signature move) ============
   Six cards fanned like a hand of playing cards. The center card is upright and
   scaled 1; each card left or right rotates outward and shrinks with distance.
   Click any card to bring it to center. Prev/next arrows shift by one. Never
   used in any other build. */
.postcard-fan {
  position: relative;
  height: 520px;
  perspective: 1400px;
  margin: var(--s3) 0 0;
}
.postcard-track {
  position: absolute;
  inset: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}
.postcard {
  --pos: calc(var(--i) - var(--current, 0));
  --abs: max(var(--pos), calc(-1 * var(--pos)));
  position: absolute;
  width: min(300px, 78vw);
  aspect-ratio: 4 / 5;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow:
    0 2px 4px rgba(44, 61, 28, 0.10),
    0 20px 44px -12px rgba(44, 61, 28, 0.28);
  overflow: hidden;
  cursor: pointer;
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform-origin: 50% 105%;
  transform:
    translateX(calc(var(--pos) * 90px))
    rotate(calc(var(--pos) * 9deg))
    scale(calc(1 - var(--abs) * 0.06));
  z-index: calc(10 - var(--abs));
  opacity: calc(1 - var(--abs) * 0.18);
  transition:
    transform 500ms cubic-bezier(0.34, 1.4, 0.64, 1),
    opacity 350ms ease,
    z-index 0s 250ms;
}
.postcard[data-current] {
  z-index: 20;
  box-shadow:
    0 4px 8px rgba(44, 61, 28, 0.14),
    0 34px 60px -16px rgba(75, 106, 42, 0.36);
}
.pc-img {
  flex: 1;
  background-size: cover;
  background-position: center;
  background-color: var(--sage-pale);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
/* Reel treatment: portrait 9:16 aspect, dark bottom gradient, big centered
   play button, view count in the corner. Reads as an Instagram reel thumbnail. */
.postcard.reel { aspect-ratio: 9 / 16; }
.postcard.reel .pc-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}
.pc-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  z-index: 2;
  transition: transform 200ms var(--ease), background-color 200ms linear;
}
.pc-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 20px solid var(--grape);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.postcard.reel:hover .pc-play { transform: translate(-50%, -50%) scale(1.08); background: #ffffff; }
.pc-views {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.pc-tag {
  font-family: var(--body);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--grape);
  text-transform: uppercase;
  padding-top: 2px;
}
.pc-cap {
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.25;
  color: var(--ink);
}

.postcard-nav {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 30;
}
.pc-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--rule);
  background: var(--surface);
  color: var(--grape);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 200ms var(--ease), border-color 160ms linear, background-color 160ms linear;
}
.pc-btn:hover { transform: translateY(-2px); border-color: var(--grape); background: var(--caramel-pale); }
.pc-btn:active { transform: translateY(0); }
.pc-count { font-family: var(--body); font-weight: 700; font-size: 14px; color: var(--ink-soft); letter-spacing: 0.02em; }
.pc-count b { color: var(--grape); font-family: var(--display); font-size: 22px; margin-right: 2px; }
.pc-hint {
  position: absolute;
  bottom: -110px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
  margin: 0;
}
@media (max-width: 640px) {
  .postcard { width: min(260px, 80vw); }
  .postcard { transform: translateX(calc(var(--pos) * 60px)) rotate(calc(var(--pos) * 7deg)) scale(calc(1 - var(--abs) * 0.08)); }
  .postcard-fan { height: 460px; }
}
@media (prefers-reduced-motion: reduce) { .postcard { transition: none; } }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .stage { max-width: 340px; margin-inline: auto; order: -1; }
  .hero h1 { max-width: none; }
}

/* ============ path cards (the multi-section front page) ============ */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.path {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  background: var(--surface);
  border: 2px solid var(--rule);
  border-radius: 22px;
  padding: var(--s4);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease-soft), border-color 160ms linear;
}
.path:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--sage); color: var(--ink); }
.path:active { transform: translateY(-1px); }
.path .pn {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  /* The logo green on a near-white card is 2.27:1. These numerals are
     decorative but they are still text, so they take the legible green. */
  color: var(--leaf);
}
.path h3 { font-size: 27px; }
.path p { font-size: 16px; color: var(--ink-soft); flex: 1; margin: 0; }
.path .go {
  font-size: 15px;
  font-weight: 800;
  color: var(--leaf);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.path:hover .go { color: var(--leaf-dark); }
.path .go::after {
  content: "";
  width: 16px;
  height: 10px;
  background: currentColor;
  clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
  transition: transform 200ms var(--ease);
}
.path:hover .go::after { transform: translateX(4px); }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } }

/* Wordmark fallback if their logo file has not been fetched yet.
   download-logo.mjs writes it; site.js reveals this if the image 404s. */
.logo-fallback { display: none; }
.no-logo .logo-fallback { display: block; }
.no-logo .brand img, .no-logo .stage-logo, .no-logo .foot-brand img { display: none; }
.brand .logo-fallback b { font-family: var(--display); font-size: 22px; }

/* ============ anatomy band ============ */
.anat {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: var(--s5);
  align-items: center;
}
.cup-wrap { display: grid; place-items: center; }
.cup { width: 100%; max-width: 340px; height: auto; }
.cup .layer { cursor: pointer; }
.cup .layer .fill { transition: opacity 200ms linear; }
.cup.dim .layer .fill { opacity: 0.35; }
.cup.dim .layer.on .fill { opacity: 1; }

.layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.layers li { border-top: 1.5px solid var(--rule); }
.layers li:last-child { border-bottom: 1.5px solid var(--rule); }
.layers button {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s3);
  align-items: start;
  text-align: left;
  background: transparent;
  border: 0;
  padding: var(--s3) var(--s2);
  min-height: 44px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: 10px;
  transition: background-color 160ms linear;
}
.layers button:hover, .layers button[aria-expanded="true"] { background: var(--sage-pale); }
.layers .n {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  /* The logo green is 2.13:1 on cream, under the 3:1 large-text minimum. */
  color: var(--leaf);
  transition: color 160ms linear, transform 220ms var(--ease);
}
.layers button:hover .n, .layers button[aria-expanded="true"] .n { color: var(--leaf); transform: translateY(-2px); }
.layers h3 { font-size: 24px; margin-bottom: 4px; }
.layers p { font-size: 16px; color: var(--ink-soft); margin: 0; }
.anat-note {
  margin-top: var(--s4);
  padding: var(--s3);
  background: var(--caramel-pale);
  border-left: 4px solid var(--caramel);
  border-radius: 4px 12px 12px 4px;
  font-size: 15px;
}
@media (max-width: 900px) {
  .anat { grid-template-columns: 1fr; gap: var(--s4); }
  .cup { max-width: 240px; }
}

/* ============ the board ============ */
.board { display: grid; gap: var(--s5); }
.group h3 {
  font-size: 28px;
  padding-bottom: var(--s2);
  border-bottom: 3px solid var(--sage);
  margin-bottom: var(--s2);
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}
.group h3 small {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leaf);
}
.rows { display: grid; }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) var(--s2);
  border-bottom: 1px solid var(--rule);
  transition: background-color 160ms linear;
}
.row:hover { background: var(--surface); }
.row .name { font-family: var(--display); font-size: 21px; line-height: 1.25; }
.row .desc { display: block; font-family: var(--body); font-size: 15px; color: var(--ink-soft); line-height: 1.55; margin-top: 4px; max-width: 62ch; }
.row .price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--ink);
}
.row .was {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: line-through;
  text-align: right;
}
/* ---- photo menu tiles ----
   Their own product shots, square-cropped by download-assets.mjs. Items they
   have no photo for get a designed fallback tile rather than a hole, which is
   the exact defect the audit pins on their current bestsellers carousel. */
/* Wider tracks and a portrait crop, so the food fills the card instead of
   sitting in a small square with copy taking the majority of the tile. This is
   the photo-forward menu treatment good food sites use. */
.dishes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: var(--s4) var(--s3);
}
.dish {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1.5px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease-soft), border-color 160ms linear;
}
.dish:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--sage); }
.dish-pic {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--sage-pale);
  overflow: hidden;
}
.dish-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--ease-soft);
}
.dish:hover .dish-pic img { transform: scale(1.04); }
/* A colour treatment layer so their photos, which were shot on several
   different surfaces, still read as one set on the cream ground. */
.dish-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(44, 61, 28, 0.28), rgba(44, 61, 28, 0) 46%);
}
.dish-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s3);
  flex: 1;
}
.dish-body h4 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
.dish-body p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; flex: 1; }
.dish-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 19px;
  font-weight: 800;
}
.dish-price s { font-size: 13px; font-weight: 600; color: var(--ink-soft); }

/* No photo on their site: a tinted tile carrying the bunny, not a grey box. */
.dish-pic.none {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(-45deg, rgba(144, 180, 108, 0.10) 0 12px, transparent 12px 24px),
    var(--sage-pale);
}
.dish-pic.none svg { width: 46%; height: auto; opacity: 0.5; }
.dish-pic.none::after { background: none; }
.dish-pic.none span {
  position: absolute;
  bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--leaf-dark);
  opacity: 0.75;
}

/* ---- flavour chips (one price, many flavours, one lead photo) ---- */
.flavours { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--s4); align-items: center; }
.flavours .lead { border-radius: 18px; overflow: hidden; border: 1.5px solid var(--rule); box-shadow: var(--shadow-card); }
.flavours .lead img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  padding: 9px 18px;
}
.flavour-price {
  margin-top: var(--s3);
  font-size: 17px;
  font-weight: 800;
  color: var(--leaf-dark);
}
@media (max-width: 720px) { .flavours { grid-template-columns: 1fr; } .flavours .lead { max-width: 220px; } }

/* Mobile Rule item 5: no group may become an endless single column. Every
   menu group holds four items or fewer, so a two-up grid caps each group at
   two rows on a phone. That keeps the whole menu scannable without hiding
   half of it behind a swipe, which a rail would do to a price list. */
@media (max-width: 720px) {
  .dishes { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dish { border-radius: 14px; }
  .dish-body { padding: 12px; gap: 4px; }
  .dish-body h4 { font-size: 16px; }
  .dish-body p { font-size: 13px; line-height: 1.45; }
  .dish-price { font-size: 17px; }
  .chip { font-size: 14px; padding: 8px 14px; }
}
@media (max-width: 360px) {
  .dishes { grid-template-columns: 1fr; }
}

.sourced {
  margin-top: var(--s4);
  font-size: 14px;
  color: var(--ink-soft);
  border-left: 3px solid var(--rule);
  padding-left: var(--s3);
}
.board-cta { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ============ order fork ============ */
.fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface);
  border: 2px solid var(--rule);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.door {
  padding: var(--s5) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: background-color 200ms linear;
}
.door + .door { border-left: 3px solid var(--caramel); }
.door:hover { background: var(--sage-pale); }
.door h3 { font-size: 30px; }
.door p { color: var(--ink-soft); font-size: 16px; flex: 1; }
.door .btn { align-self: flex-start; margin-top: var(--s2); }
.door .tag {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leaf-dark);
  background: var(--sage-pale);
  border-radius: 999px;
  padding: 4px 12px;
}
@media (max-width: 800px) {
  .fork { grid-template-columns: 1fr; }
  .door + .door { border-left: 0; border-top: 3px solid var(--caramel); }
}

/* ============ proof ============ */
.press {
  background: var(--ink);
  color: var(--ground);
  border-radius: 22px;
  padding: var(--s5) var(--s4);
  margin-bottom: var(--s4);
}
.press blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.25;
  max-width: 24ch;
}
.press cite {
  display: block;
  margin-top: var(--s3);
  font-family: var(--body);
  font-style: normal;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
}
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.quote {
  background: var(--surface);
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  padding: var(--s4);
}
.quote p { font-size: 18px; margin-bottom: var(--s2); }
.quote span { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
@media (max-width: 700px) { .quotes { grid-template-columns: 1fr; } }

.creds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}
.cred {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--leaf-dark);
  background: var(--sage-pale);
  border: 1.5px solid var(--sage);
  border-radius: 999px;
  padding: 8px 16px;
}

/* ============ story ============ */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--s5); align-items: center; }
.story p { font-size: 18px; max-width: 56ch; }
.story-photo {
  border-radius: 22px;
  overflow: hidden;
  border: 2px solid var(--rule);
  box-shadow: var(--shadow-card);
  position: relative;
}
.story-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.photo-note {
  position: absolute;
  left: 12px;
  bottom: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(44, 61, 28, 0.82);
  border-radius: 8px;
  padding: 6px 10px;
}
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }

/* ============ instagram ============ */
.ig-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.ig-card {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.embed-frame { position: absolute; inset: 0; overflow: hidden; }
.embed-frame iframe { position: absolute; top: -54px; left: 50%; transform: translateX(-50%); width: 340px; height: 640px; border: 0; }
.embed-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  text-align: center;
  padding: var(--s3);
  font-size: 14px;
  color: var(--ink-soft);
  background: var(--sage-pale);
}

/* ============ find us ============ */
.find { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s5); align-items: start; }
.openstate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid var(--sage);
  background: var(--sage-pale);
  color: var(--leaf-dark);
  margin-bottom: var(--s3);
}
.openstate.shut { border-color: var(--caramel); background: var(--caramel-pale); color: var(--caramel-deep); }
.openstate .pip { width: 10px; height: 10px; border-radius: 50%; background: var(--leaf); flex: none; }
.openstate.shut .pip { background: var(--caramel-deep); }

.hours { width: 100%; border-collapse: collapse; margin: var(--s3) 0; }
.hours th, .hours td { text-align: left; padding: 12px var(--s2); border-bottom: 1px solid var(--rule); font-size: 16px; }
.hours th { font-weight: 700; }
.hours td { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.hours tr.today th, .hours tr.today td { background: var(--sage-pale); color: var(--leaf-dark); font-weight: 800; }

.addr { font-size: 18px; line-height: 1.6; }
.addr strong { display: block; font-family: var(--display); font-size: 24px; font-weight: 400; margin-bottom: 6px; }
.mapwrap { border-radius: 22px; overflow: hidden; border: 2px solid var(--rule); box-shadow: var(--shadow-card); }
.mapwrap iframe { display: block; width: 100%; height: 420px; border: 0; }
.infogrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s4); }
/* Three across on wide screens only. This used to be an inline
   grid-template-columns on order.html, which no media query could override, so
   three cards stayed side by side at 390px and pushed 71px off the screen. */
.infogrid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .infogrid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .infogrid-3 { grid-template-columns: 1fr; } }
.infocard { background: var(--surface); border: 1.5px solid var(--rule); border-radius: 16px; padding: var(--s3); }
.infocard h4 { font-family: var(--display); font-size: 20px; font-weight: 400; margin: 0 0 6px; }
.infocard p { font-size: 15px; color: var(--ink-soft); margin: 0; }
/* The contact page routes every real action through these cards (email, phone,
   pickup, Uber Eats), and they were 20px tall on a phone. */
@media (max-width: 900px) {
  .infocard p a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 900px) {
  .find { grid-template-columns: 1fr; }
  .mapwrap iframe { height: 300px; }
  .infogrid { grid-template-columns: 1fr; }
}

/* ============ form ============ */
.formwrap {
  background: var(--surface);
  border: 2px solid var(--rule);
  border-radius: 22px;
  padding: var(--s5) var(--s4);
  box-shadow: var(--shadow-card);
}
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.field { display: grid; gap: 6px; }
.field.wide { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 700; }
.field input, .field textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--ground);
  border: 1.5px solid var(--rule);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
  transition: border-color 150ms linear, box-shadow 150ms linear;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--sage); }
.field input:focus, .field textarea:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(144, 180, 108, 0.35); }
.formfoot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.formmsg { font-size: 15px; font-weight: 700; color: var(--leaf-dark); opacity: 0; transform: translateY(4px); }
.formmsg.on { opacity: 1; transform: none; transition: opacity 240ms linear, transform 300ms var(--ease-soft); }
@media (max-width: 700px) { .fields { grid-template-columns: 1fr; } }

/* ============ footer ============ */
.foot {
  background: var(--ink);
  color: var(--ground);
  padding: var(--s6) 0 var(--s4);
  margin-top: var(--s6);
}
.foot a { color: var(--sage); }
.foot a:hover { color: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--s4); }
.foot h4 {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 var(--s2);
}
.foot p, .foot li { font-size: 15px; line-height: 1.7; color: #E6EDDA; }
.foot ul { list-style: none; margin: 0; padding: 0; }
/* 44px minimum on a phone, per the Mobile Rule. These were 32px, which is a
   miss on the one part of the page a customer taps to call or get directions.
   Desktop keeps the tighter rhythm since a mouse does not need the padding. */
.foot li a { display: inline-flex; min-height: 32px; align-items: center; }
@media (max-width: 900px) {
  .foot li a { min-height: 44px; }
}
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s2); }
.foot-brand img { height: 84px; width: auto; }
.foot-brand b { font-family: var(--display); font-size: 24px; font-weight: 400; }
.foot-bot {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid rgba(230, 237, 218, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  justify-content: space-between;
  font-size: 13px;
  color: #BCC9AC;
}
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }

/* ============ page head (inner pages) ============ */
.phead { padding: var(--s6) 0 var(--s5); }
.phead h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); margin-bottom: var(--s3); max-width: 18ch; }
.phead p { font-size: 19px; color: var(--ink-soft); max-width: 58ch; }

/* ============ swipe rails (Mobile Rule item 5) ============ */
@media (max-width: 720px) {
  .rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: var(--s3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -20px;
    padding: 4px 20px var(--s3);
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; }
  .swipe-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--caramel-deep);
    margin-bottom: var(--s2);
  }
}
.swipe-hint { display: none; }
@media (max-width: 720px) { .swipe-hint { display: flex; } }

/* ============ the bunny sleeps after close ============
   Driven by body.shop-shut, which site.js sets from the same trading-hours
   computation that powers the open/closed pill. The mascot appears in three
   different forms and each can be reached to a different depth:

     .hero-mascot   their logo PNG. Raster, so only the whole image can move.
     .bb-bun        an SVG <use> reference. Its internals live in a shadow tree
                    that outer CSS cannot select, so again whole-image only.
     #companion     real inline SVG with real ids, built by site.js. This one
                    can have its eyes closed properly.

   So the shared language is: stop hopping, lean into a rest, add z's. The
   closed eyes are a bonus on the one bunny that allows it. */

body.shop-shut .hero-mascot,
body.shop-shut .stage .mascot,
body.shop-shut .stage-logo,
body.shop-shut .bb-bun,
body.shop-shut #companion .rig {
  animation: none !important;
  transform: rotate(-7deg);
  transition: transform 600ms var(--ease-soft);
}
/* Eyes shut. Only reachable on the inline companion. */
body.shop-shut #companion #eyes {
  transform: scaleY(0.1);
  transition: transform 400ms var(--ease-soft);
}
/* No hop is triggered while shut, whatever the scroll does. */
body.shop-shut #companion.hopping .rig,
body.shop-shut .berrybar.hopping .bb-bun,
body.shop-shut .stage.hopping .stage-logo,
body.shop-shut .hero.hero-photo.hopping .hero-mascot { animation: none !important; }

@keyframes snooze {
  0%   { opacity: 0;   transform: translate(0, 0) rotate(-6deg) scale(0.7); }
  22%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translate(16px, -34px) rotate(10deg) scale(1.15); }
}
.zzz {
  position: absolute;
  width: 42px;
  height: 46px;
  pointer-events: none;
  display: none;
}
body.shop-shut .zzz { display: block; }
/* In the divider the bunny is the centre item of a flex row, so the z's are
   pinned to the middle and nudged past his ear rather than to a corner. */
.berrybar { position: relative; }
.berrybar .zzz { left: 50%; margin-left: 16px; top: 2px; }
/* Over the hero mascot they sit off his right ear. */
.hero-mascot-wrap { position: relative; }
.hero-mascot-wrap .zzz { right: -6px; top: -10px; }
.zzz span {
  position: absolute;
  font-family: var(--display);
  font-size: 15px;
  line-height: 1;
  color: var(--leaf);
  opacity: 0;
  animation: snooze 3.6s ease-out infinite;
}
.zzz span:nth-child(1) { left: 0;   bottom: 0;  font-size: 13px; animation-delay: 0s; }
.zzz span:nth-child(2) { left: 9px; bottom: 4px; font-size: 16px; animation-delay: 1.2s; }
.zzz span:nth-child(3) { left: 18px; bottom: 9px; font-size: 19px; animation-delay: 2.4s; }

/* A quiet line so the sleep state reads as information, not just a gag. */
.shut-note {
  display: none;
  margin-top: var(--s2);
  font-size: 13px;
  font-weight: 700;
  color: var(--caramel-deep);
}
body.shop-shut .shut-note { display: block; }

@media (prefers-reduced-motion: reduce) {
  /* The bunny still sleeps, the z's just sit still rather than drifting. */
  .zzz span { animation: none; opacity: 0.85; }
}

/* ============ promo ribbon ============
   Their own running offer, lifted from their Instagram rather than invented.
   Sits between the three signature bowls and the full-bleed band, where the
   visitor has just seen the product and the price. */
/* The band was rotated 0.6 degrees for a handmade feel. That needs the element
   to overhang the viewport so its corners do not pull in, and any overhang is
   horizontal overflow, which the Mobile Rule forbids outright. Compensating on
   one breakpoint just moved the overflow to another. The tilt now lives on the
   eyebrow pill, which is small enough that rotating it costs nothing, and the
   band itself sits square at exactly 100%. */
.promo {
  position: relative;
  width: 100%;
  margin: var(--s6) 0;
  background: var(--caramel-pale);
  border-top: 3px solid var(--caramel);
  border-bottom: 3px solid var(--caramel);
  overflow: hidden;
}
.promo::before,
.promo::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 34%;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(228, 156, 72, 0.30) 3px, transparent 3.5px);
  background-size: 26px 26px;
}
.promo::before { left: 0; -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent); mask-image: linear-gradient(90deg, #000 40%, transparent); }
.promo::after { right: 0; -webkit-mask-image: linear-gradient(270deg, #000 40%, transparent); mask-image: linear-gradient(270deg, #000 40%, transparent); }
.promo-in {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s3) var(--s5);
  padding: var(--s4) var(--s3);
  text-align: center;
}
/* Selector carries the .promo prefix deliberately: `.promo p` below is
   (0,1,1) and was out-specifying a bare `.promo-eyebrow` at (0,1,0), so the
   pill was rendering brown-on-brown at 1.19:1 instead of white on caramel. */
.promo .promo-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: var(--caramel-deep);
  border-radius: 999px;
  padding: 5px 14px;
  margin: 0 0 12px;
  transform: rotate(-2.5deg);
}
.promo h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
  margin: 0;
  color: var(--ink);
}
.promo h2 em {
  font-style: normal;
  color: var(--caramel-deep);
}
.promo p { margin: 10px 0 0; font-size: 16px; color: var(--ink-soft); max-width: 34ch; }
.promo .src {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  /* Was --caramel-deep at 0.85 opacity, which measured 3.99:1 against the
     caramel-pale ground. At 12px that needs 4.5. Full opacity and a darker
     brown gets it to 6.2:1. */
  color: #7D460E;
}
.promo-act { display: flex; flex-direction: column; align-items: center; gap: 10px; }
@media (max-width: 760px) {
  /* No rotation on a phone, so the 104% overhang that stops the rotated
     corners pulling in is not needed. Leaving it on put 15px of horizontal
     overflow on the home page. */
  .promo { margin: var(--s5) 0; }
  .promo-in { gap: var(--s3); padding: var(--s4) var(--s3); }
  .promo::before, .promo::after { display: none; }
}

/* ============ concept preview kit ============ */
.preview-banner {
  background: #F2EDD8;
  color: #4A4540;
  text-align: center;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
  padding: 14px 24px;
}
/* The takedown address is the one link on the page that has to be easy to hit
   even though the banner type is deliberately small. */
.preview-banner a { color: inherit; display: inline-block; padding: 12px 4px; }

.wm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='640'%20height='420'%3E%3Ctext%20x='320'%20y='220'%20text-anchor='middle'%20transform='rotate(-28%20320%20210)'%20font-family='Arial,%20sans-serif'%20font-weight='700'%20font-size='36'%20letter-spacing='4'%20fill='%23555555'%20fill-opacity='0.10'%3ECONCEPT%20PREVIEW%20%C2%B7%20WEBNEXIS%3C/text%3E%3C/svg%3E");
}

/* ============ the bunny companion (signature moment) ============ */
/* The companion lives in the left gutter, OUTSIDE the 1180px content column,
   so it can never sit over a heading, a CTA or a form field. Its left edge is
   computed from the gutter rather than from the viewport edge: 50vw minus half
   the wrap minus its own width and a gap. Below 1400px there is no gutter wide
   enough to hold it, so it is dropped entirely and the dividers carry the
   inline bunny instead. */
#companion {
  position: fixed;
  left: calc(50vw - 590px - 98px);
  top: 0;
  width: 84px;
  height: 84px;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
#companion.live { opacity: 1; transition: opacity 400ms linear; }
#companion .rig { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }

/* the hop: an arc up and across, with a squash on landing */
@keyframes hop {
  0%   { transform: translateY(0) scale(1, 1); }
  18%  { transform: translateY(2px) scale(1.1, 0.9); }
  50%  { transform: translateY(-46px) scale(0.94, 1.08); }
  82%  { transform: translateY(2px) scale(1.12, 0.88); }
  100% { transform: translateY(0) scale(1, 1); }
}
#companion.hopping .rig { animation: hop 620ms var(--ease-soft); }

/* per-stop idles, one group each, long pauses so it reads alive not busy */
@keyframes earflick {
  0%, 86%, 100% { transform: rotate(0deg); }
  90% { transform: rotate(-16deg); }
  94% { transform: rotate(7deg); }
}
@keyframes nosetwitch {
  0%, 88%, 100% { transform: translateY(0); }
  91% { transform: translateY(1.6px); }
  94% { transform: translateY(-0.8px); }
}
@keyframes spoonlift {
  0%, 70%, 100% { transform: rotate(0deg); }
  82% { transform: rotate(-13deg) translateY(-3px); }
}
@keyframes leanwave {
  0%, 74%, 100% { transform: rotate(0deg); }
  84% { transform: rotate(7deg); }
  92% { transform: rotate(-4deg); }
}
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.12); }
}

#companion[data-idle="ear"]   #ear-right { animation: earflick 5.2s var(--ease-soft) infinite; }
#companion[data-idle="nose"]  #muzzle    { animation: nosetwitch 4.4s linear infinite; }
#companion[data-idle="spoon"] #spoon     { animation: spoonlift 4.8s var(--ease-soft) infinite; }
#companion[data-idle="wave"]  #arm-right { animation: leanwave 4.6s var(--ease-soft) infinite; }
#companion[data-idle="blink"] #eyes      { animation: blink 5.6s linear infinite; }

/* pivots: every group turns where a real joint would be, not at the canvas corner */
#ear-left, #ear-right, #muzzle, #spoon, #arm-right, #eyes, #body {
  transform-box: fill-box;
}
#ear-left  { transform-origin: 62% 92%; }
#ear-right { transform-origin: 36% 92%; }
#muzzle    { transform-origin: 50% 40%; }
#spoon     { transform-origin: 50% 96%; }
#arm-right { transform-origin: 18% 22%; }
#eyes      { transform-origin: 50% 50%; }

@media (max-width: 1399px) {
  /* No gutter to stand in. A fixed sprite here would overlap the content
     column, which is exactly the defect this rule exists to prevent. */
  #companion { display: none; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    /* Zeroing duration alone is not enough. The berry dividers stagger with
       transition-delay up to 440ms, so without this the elements still arrive
       one after another, which is motion by another name. */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* The character stays on the page. It simply stops moving:
     no hop, no idle, parked beside the hero. */
  #companion { opacity: 1; }
  #companion.hopping .rig { animation: none; }
  #companion .rig { animation: none; }
}

/* ============ hero-centered (home) ============
   In-your-face big centered headline stacked over the bunny mascot, echoing the
   Golden Nails hero where the product photo sits inside the wordmark. The
   original .hero grid layout is overridden by .hero-centered, which reflows to a
   single centered column. */
.hero.hero-centered { padding: var(--s5) 0 var(--s4); text-align: center; }
.hero-center-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  max-width: 1100px;
  margin: 0 auto;
}
.hero-eyebrow {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--caramel-deep);
  margin: 0 0 var(--s2);
}
.hero-huge {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.4rem, 11vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  max-width: none;
  display: block;
}
.hero-huge span {
  display: block;
}
.hero-huge span:nth-child(1) { text-align: center; }
.hero-huge span:nth-child(2) { text-align: center; color: var(--grape); }
.hero-huge span:nth-child(3) { text-align: center; }
.hero-huge span:nth-child(4) { text-align: center; color: var(--caramel-deep); font-style: italic; }

/* The mascot sits INSIDE the composition, between the headline lines and the
   sub. Overlaps the headline by pulling up with negative margin so the ears
   graze the line of type above it, the way the nail bottle broke into the
   Golden Nails headline. */
.hero.hero-centered .hero-mascot-wrap {
  position: relative;
  margin: -0.55em auto -0.35em;
  width: min(360px, 60vw);
  z-index: 3;
  pointer-events: none;
}
.hero.hero-centered .hero-mascot {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
  animation: bunny-hop 3.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 50% 100%;
}
.hero.hero-centered .mascot-fallback { display: none; }
body.no-logo .hero.hero-centered .hero-mascot { display: none; }
body.no-logo .hero.hero-centered .mascot-fallback { display: block; }
.hero.hero-centered .stage-quip {
  position: absolute;
  right: -10%;
  top: 12%;
  background: var(--caramel);
  color: #fff;
  font-family: var(--body);
  font-weight: 800;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  transform: rotate(6deg);
  box-shadow: 0 6px 18px rgba(44, 61, 28, 0.18);
  pointer-events: auto;
  display: none;
}
body:not(.no-logo) .hero.hero-centered .stage-quip { display: inline-block; }

.hero-sub-center {
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: var(--s3) auto 0;
}
.hero-cta-center {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: center;
  margin-top: var(--s3);
}
.btn.btn-lg {
  font-size: 17px;
  padding: 16px 26px;
}
.hero.hero-centered .hero-micro {
  justify-content: center;
  margin-top: var(--s3);
}

@media (max-width: 720px) {
  .hero.hero-centered { padding: var(--s4) 0 var(--s4); }
  .hero-huge { font-size: clamp(2.6rem, 13vw, 4.6rem); }
  .hero.hero-centered .hero-mascot-wrap {
    width: min(260px, 66vw);
    margin: -0.45em auto -0.3em;
  }
  .hero.hero-centered .stage-quip { right: -4%; top: 8%; font-size: 12px; padding: 6px 10px; }
  .hero-sub-center { font-size: 16px; }
}

/* ============ mobile: button state hardening + swipeable carousels ============
   Costa flagged the Order pickup button reading white on the mobile menu, and
   the fanned postcard reel being hard to swipe on a phone. Fixes:
   1. Force the primary button to keep its green fill even inside the mobile
      panel, and kill the diagonal white sheen on touch devices where a mid
      sweep can freeze the button looking pale.
   2. Convert the 3D postcard fan into a plain horizontal snap-scroll rail
      below 720px, with the next card peeking in from the right so it reads
      as swipeable at a glance. */

@media (hover: none) {
  .btn-primary::after { display: none; }
}

@media (max-width: 959px) {
  .navlinks .btn-primary,
  .navlinks .btn-primary:hover,
  .navlinks .btn-primary:focus,
  .navlinks .btn-primary:active {
    background: var(--leaf) !important;
    color: #fff !important;
  }
  .navlinks .btn-primary::after { display: none; }
}

@media (max-width: 720px) {
  /* Fan becomes a plain swipe rail. Cards are upright, one and a bit visible,
     scroll-snap so each card locks into view. */
  .postcard-fan {
    height: auto;
    perspective: none;
    margin: var(--s3) 0 0;
  }
  .postcard-track {
    position: static;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 8px 20% 16px 4px;
    scrollbar-width: none;
    transform-style: flat;
  }
  .postcard-track::-webkit-scrollbar { display: none; }
  .postcard {
    position: static;
    flex: 0 0 78vw;
    max-width: 320px;
    scroll-snap-align: center;
    transform: none !important;
    opacity: 1 !important;
    z-index: auto !important;
    transition: none;
  }
  .postcard[data-current] { box-shadow: 0 6px 22px -8px rgba(75, 106, 42, 0.35); }
  /* Prev/next arrows hidden on the swipe rail, thumb does the work. */
  .fan-nav { display: none !important; }
  .pc-hint::before { content: "Swipe "; }
}

/* ============ berry-bar divider (replaces the paw-print divider) ============
   Costa: no paw prints anywhere. The dividers now carry four acai berries and
   the bunny in the middle. Same reveal cadence, same inline-bunny role, no
   animal footprints. The wrapper also carries .bunny-hop-host so site.js can
   make this bunny hop on scroll like the hero one does. */
.berrybar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 46px);
  padding: var(--s4) 0;
}
.berrybar .bb-berry {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex: none;
  background: var(--grape);
  opacity: 0;
  transform: translateY(8px) scale(0.6);
  transition: opacity 320ms linear, transform 420ms var(--ease);
}
.berrybar .bb-berry:nth-child(1) { background: var(--grape); }
.berrybar .bb-berry:nth-child(2) { background: #8FB562; width: 10px; height: 10px; }
.berrybar .bb-berry:nth-child(4) { background: #8FB562; width: 10px; height: 10px; }
.berrybar .bb-berry:nth-child(5) { background: var(--grape); }
.berrybar.in .bb-berry { opacity: 0.75; transform: translateY(0) scale(1); }
.berrybar.in .bb-berry:nth-child(1) { transition-delay: 0ms; }
.berrybar.in .bb-berry:nth-child(2) { transition-delay: 110ms; }
.berrybar.in .bb-berry:nth-child(4) { transition-delay: 330ms; }
.berrybar.in .bb-berry:nth-child(5) { transition-delay: 440ms; }
.berrybar .bb-bun {
  width: 58px;
  height: 58px;
  flex: none;
  opacity: 0;
  transform: translateY(18px);
  transform-origin: 50% 100%;
  transition: opacity 380ms linear, transform 520ms var(--ease);
}
.berrybar.in .bb-bun { opacity: 1; transform: translateY(0); }
.berrybar.hopping .bb-bun { animation: bunny-hop 700ms cubic-bezier(0.5, 0, 0.5, 1) 1; }
@media (max-width: 720px) {
  .berrybar { gap: 16px; padding: var(--s3) 0; }
  .berrybar .bb-bun { width: 44px; height: 44px; }
}

/* ============ signature three (home) ============
   Photo-forward product cards, the move every strong food site leads with:
   the picture sells, the price confirms, the copy gets out of the way.
   Portrait crop so the bowl fills the frame instead of floating in a letterbox. */
.signature { padding-top: var(--s4); }
.sig-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s4);
}
.sig-head .badge { margin: 0; }
.sig-all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 800;
  color: var(--grape);
  text-decoration: none;
  /* The rule is drawn as a box-shadow rather than a border so the 44px tap
     height can grow without the underline drifting away from the text. */
  box-shadow: inset 0 -2px 0 0 var(--sage);
  padding-bottom: 2px;
  transition: color 160ms linear, box-shadow 160ms linear;
}
.sig-all:hover { color: var(--leaf-dark); box-shadow: inset 0 -2px 0 0 var(--caramel); }
.sig-all:focus-visible { outline: 3px solid var(--grape); outline-offset: 4px; }

.sig-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
}
.sig-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 320ms var(--ease);
}
.sig-card:hover { transform: translateY(-6px); }
.sig-card:focus-visible { outline: 3px solid var(--grape); outline-offset: 6px; border-radius: 18px; }
.sig-pic {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: var(--sage-pale);
  box-shadow: var(--shadow-card);
}
.sig-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 620ms var(--ease-soft);
}
.sig-card:hover .sig-pic img { transform: scale(1.06); }
/* Warm colour treatment plus a bottom gradient, per the image guardrail: a
   plain photo on cream reads as stock, a treated one reads as art direction. */
.sig-pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(44,61,28,0.42) 100%);
  pointer-events: none;
}
.sig-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px var(--s2);
  padding: var(--s2) 4px 0;
}
.sig-meta b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.sig-price {
  font-family: var(--body);
  font-weight: 800;
  font-size: 17px;
  /* 4.40:1 was a hair under AA at 17px. */
  color: #7D460E;
  white-space: nowrap;
}
.sig-desc {
  grid-column: 1 / -1;
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ============ full-bleed photo band ============
   One photograph running the whole viewport width with a short line over it.
   Breaks the cream ground and changes the temperature of the scroll. */
.bleed {
  position: relative;
  width: 100%;
  min-height: clamp(420px, 60vh, 640px);
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: var(--s5) 0;
  isolation: isolate;
}
.bleed-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  /* Their shots were taken under warm counter light. A small lift puts the
     colour back that the scrim takes out, without looking processed. */
  filter: saturate(1.08) contrast(1.04);
}
/* The scrim is a spotlight, not a blanket.
   It used to be a full-width plum gradient from 0.62 down to 0.30 and back up
   to 0.72, with a 0.30 purple radial layered on top of that. Combined, the
   lightest point on the photo was still under about half brightness and the
   whole frame went mauve, so the food stopped reading as food. Now a soft
   ellipse sits behind the text only, and the photo runs to the edges of the
   band nearly untouched. Contrast where it matters is unchanged: cream type
   sits over roughly a 0.60 wash, which is about 12:1. */
.bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(74% 58% at 50% 48%, rgba(24,34,14,0.60) 0%, rgba(24,34,14,0.30) 58%, rgba(24,34,14,0.04) 100%),
    linear-gradient(180deg, rgba(24,34,14,0.28) 0%, rgba(24,34,14,0) 20%, rgba(24,34,14,0) 80%, rgba(24,34,14,0.32) 100%);
}
.bleed-in {
  position: relative;
  text-align: center;
  padding: var(--s5) var(--s3);
  max-width: 760px;
}
.bleed-line {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #FFFBF0;
  margin: 0 0 var(--s4);
  /* Carries more of the legibility work now the scrim carries less. */
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.42);
}
.bleed .btn-primary { box-shadow: 0 2px 0 var(--leaf-dark), 0 14px 34px -10px rgba(0, 0, 0, 0.5); }
.bleed::after { content: none; }

/* ============ sticky phone order bar ============
   Ordering stays one thumb away instead of living only in the header. Hidden
   on desktop, where the nav CTA is always in view. */
.orderbar { display: none; }
@media (max-width: 720px) {
  .orderbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 2px solid var(--rule);
    box-shadow: 0 -8px 24px -14px rgba(44, 61, 28, 0.4);
  }
  .orderbar .btn { flex: 1; min-height: 48px; }
  .ob-alt {
    font-family: var(--body);
    font-size: 15px;
    font-weight: 800;
    color: var(--grape);
    text-decoration: none;
    padding: 12px 16px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--rule);
    border-radius: 999px;
  }
  /* Clear the bar so it never covers the footer, the preview banner or the
     last CTA on the page. */
  body { padding-bottom: 76px; }
  .preview-banner { margin-bottom: 76px; }
  /* 88px was not quite enough: the bar renders 77px tall, and the chip is
     rotated 2 degrees so its bounding box overhangs a few pixels further than
     its own height. The two were overlapping by about 5px, which pushed the
     chip under the bar and crowded the thumb zone. The safe-area inset covers
     the home indicator on a notched iPhone. */
  .today-chip { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 900px) {
  .sig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sig-grid .sig-card:nth-child(3) { grid-column: 1 / -1; }
  .sig-grid .sig-card:nth-child(3) .sig-pic { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  /* Three cards is under the four-card threshold, so they stack rather than
     becoming a swipe rail. Keeps the price legible at 390px. */
  .sig-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .sig-grid .sig-card:nth-child(3) .sig-pic { aspect-ratio: 4 / 5; }
  .bleed { min-height: 340px; margin: var(--s4) 0; }
  .bleed-in { padding: var(--s4) var(--s3); }
}

/* ============ hero-photo (home) ============
   Full-bleed photograph behind the headline, plum wash over it so cream type
   reads at AA, mascot straddling the bottom edge. Supersedes .hero-centered on
   the home page; the centred rules below still supply the type scale. */
.hero.hero-photo {
  position: relative;
  padding: 0;
  margin-bottom: 0;
  overflow: visible;
  isolation: isolate;
  text-align: center;
}
.hero-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  z-index: -2;
  filter: saturate(1.08) contrast(1.04);
}
/* Same spotlight treatment as the bleed band, and for the same reason: the
   previous wash ran 0.80 at the top with a 0.34 purple radial over it, which
   left the photo at roughly 13 percent of its own brightness. The hero carries
   more type than the band does (eyebrow, four headline lines, subline, two
   buttons, a micro line), so the ellipse is a little stronger and the bottom
   stays darker where the mascot straddles the edge. Cream type still sits over
   about a 0.60 wash. */
.hero.hero-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(78% 66% at 50% 46%, rgba(26,37,16,0.58) 0%, rgba(26,37,16,0.34) 58%, rgba(26,37,16,0.08) 100%),
    linear-gradient(180deg, rgba(26,37,16,0.38) 0%, rgba(26,37,16,0.06) 26%, rgba(26,37,16,0.06) 60%, rgba(26,37,16,0.52) 100%);
}
.hero.hero-photo::after { content: none; }
.hero-photo-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(84px, 11vw, 150px) var(--s3) clamp(120px, 13vw, 190px);
}
/* Every line over the photo carries its own shadow now, so legibility comes
   from the type rather than from flattening the picture behind it. */
.hero-photo .hero-eyebrow {
  color: var(--caramel);
  margin: 0 0 var(--s3);
  text-shadow: 0 1px 10px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.45);
}
.hero-photo .hero-huge {
  color: #FFFBF0;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.38);
}
.hero-photo .hero-huge span:nth-child(2) { color: var(--blush); }
.hero-photo .hero-huge span:nth-child(4) { color: var(--caramel); }
.hero-photo .hero-sub-center {
  color: rgba(255,251,240,0.94);
  text-shadow: 0 1px 12px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
}
.hero-photo .hero-micro {
  color: var(--caramel);
  justify-content: center;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.45);
}
.hero-photo .hero-micro .dot { background: var(--sage); box-shadow: 0 0 0 4px rgba(144,180,108,0.28); }

/* Cream outline button: .btn-ghost is ink on cream and disappears here. */
.btn-cream {
  background: transparent;
  color: #FFFBF0;
  border-color: rgba(255,251,240,0.72);
}
.btn-cream:hover { background: #FFFBF0; color: var(--ink); border-color: #FFFBF0; transform: translateY(-2px); }
.btn-cream:active { transform: translateY(1px); }

/* Mascot straddling the bottom edge of the photo. logo-mark.png carries real
   alpha now (knocked out at build time), so no mix-blend-mode is used: multiply
   would have crushed the bunny into the dark photo behind it. */
.hero.hero-photo .hero-mascot-wrap {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 34%);
  width: clamp(140px, 17vw, 208px);
  z-index: 3;
  pointer-events: none;
  margin: 0;
}
.hero.hero-photo .hero-mascot {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: normal;
  filter: drop-shadow(0 16px 26px rgba(30, 42, 18, 0.42));
  animation: bunny-hop 3.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 50% 100%;
}
.hero.hero-photo.hopping .hero-mascot { animation: bunny-hop 700ms cubic-bezier(0.5, 0, 0.5, 1) 1; }
.hero.hero-photo .stage-quip {
  position: absolute;
  right: -46%;
  top: 6%;
  transform: rotate(6deg);
}
/* The signature strip needs headroom for the overlapping mascot. */
.hero.hero-photo + .signature { padding-top: clamp(64px, 8vw, 104px); }

@media (max-width: 720px) {
  .hero-photo-in { padding: clamp(56px, 14vw, 84px) var(--s3) clamp(84px, 20vw, 118px); }
  .hero.hero-photo .hero-mascot-wrap { width: clamp(112px, 30vw, 150px); transform: translate(-50%, 32%); }
  .hero.hero-photo .stage-quip { right: -34%; top: 0; font-size: 12px; padding: 6px 10px; }
  .hero.hero-photo + .signature { padding-top: clamp(56px, 16vw, 84px); }
  .hero-photo-img { object-position: center 55%; }
}

/* ============ legibility pass on both photo bands ============
   Costa: the type was hard to read over the photographs. Both bands had a wash
   thin enough that busy areas of the image (granola, waffle, highlights) ran
   straight through the letterforms. Three changes, applied to both:
     1. The photo itself is darkened and slightly desaturated at the source,
        so contrast no longer depends on the overlay alone.
     2. The overlay is stronger and centre-weighted, darkest exactly where the
        text block sits rather than only at the top and bottom edges.
     3. Text carries a soft shadow for the last bit of separation.
   These rules are appended so they win over the earlier gradients. */

.hero-photo-img,
.bleed-img {
  filter: brightness(0.72) saturate(0.86);
}

.hero.hero-photo::before {
  background:
    radial-gradient(78% 62% at 50% 46%, rgba(30,14,36,0.80) 0%, rgba(30,14,36,0.52) 55%, rgba(30,14,36,0.30) 100%),
    linear-gradient(180deg, rgba(30,14,36,0.72) 0%, rgba(30,14,36,0.44) 42%, rgba(30,14,36,0.78) 100%);
}
.bleed::before {
  background:
    radial-gradient(72% 78% at 50% 50%, rgba(30,14,36,0.82) 0%, rgba(30,14,36,0.56) 58%, rgba(30,14,36,0.34) 100%),
    linear-gradient(180deg, rgba(30,14,36,0.62) 0%, rgba(30,14,36,0.42) 50%, rgba(30,14,36,0.68) 100%);
}

.hero-photo .hero-huge { text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 8px 40px rgba(0,0,0,0.4); }
.hero-photo .hero-sub-center {
  color: #FFFBF0;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0,0,0,0.65);
}
.hero-photo .hero-eyebrow { color: #F3C64B; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.hero-photo .hero-micro {
  color: #FFFBF0;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
.bleed-line { text-shadow: 0 2px 10px rgba(0,0,0,0.55), 0 8px 40px rgba(0,0,0,0.4); }

/* The quip lost its pill when the hero class changed from .hero-centered to
   .hero-photo, so it was rendering as bare dark text on the photograph. */
.hero.hero-photo .stage-quip {
  display: inline-block;
  background: var(--caramel);
  color: #1E2B12;
  font-family: var(--body);
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  padding: 9px 15px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(30, 14, 36, 0.45);
  text-shadow: none;
  pointer-events: auto;
}
body.no-logo .hero.hero-photo .stage-quip { display: none; }

/* ============ about page: story block ============
   The gap Costa flagged: .story is a two column grid with align-items:center,
   and the photo column is a 4:5 portrait roughly 580px tall while the copy
   column is about 230px. Centring the short column against the tall one left a
   large dead band above and below the text. Top aligning fixes it, and the
   photo now sticks as the copy scrolls past rather than just being tall. */
.story {
  align-items: start;
  gap: var(--s5);
}
.story-copy > p:first-child { margin-top: 0; }
.story-lead {
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 600;
}
.story-lead::first-letter {
  font-family: var(--display);
  font-size: 3.1em;
  float: left;
  line-height: 0.82;
  padding: 6px 12px 0 0;
  color: var(--grape);
}
.story-quote {
  margin: var(--s4) 0;
  padding: 0 0 0 var(--s3);
  border-left: 4px solid var(--sage);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--grape);
}
.story-photo {
  position: sticky;
  top: 104px;
  background: var(--sage-pale);
}
.story-photo img { aspect-ratio: 4 / 5; max-height: 560px; }

/* Photo trio: three portrait frames with a caption under each. */
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
}
.trio figure { margin: 0; }
.trio img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  border: 2px solid var(--rule);
  box-shadow: var(--shadow-card);
  transition: transform 480ms var(--ease-soft);
}
.trio figure:hover img { transform: translateY(-5px) scale(1.015); }
.trio figcaption {
  margin-top: var(--s2);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--caramel-deep);
  text-align: center;
}
/* Stagger the middle frame so the row is not a flat ruler line. */
.trio figure:nth-child(2) { transform: translateY(28px); }

@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; }
  .story-photo { position: static; }
  .story-photo img { max-height: 420px; }
  .trio figure:nth-child(2) { transform: none; }
}
@media (max-width: 620px) {
  /* Three frames, under the four-card swipe threshold, so they stack. */
  .trio { grid-template-columns: 1fr; gap: var(--s4); }
  .trio img { aspect-ratio: 4 / 3; }
  .story-lead { font-size: 19px; }
}

/* The band photo is back to the pistachio shot, which is much brighter than the
   berry one, so it needs less source darkening than the blanket value set for
   the berries. The hero keeps the stronger treatment. */
.bleed-img { filter: brightness(0.62) saturate(0.84); }