:root {
  --bg: #fbf7ee;          /* bright clean cream */
  --bg-2: #f3ebda;        /* soft deeper cream panel */
  --ink: #241d15;         /* warm near-black */
  --ink-dim: rgba(36, 29, 21, 0.66);
  --accent: #1b4dd1;      /* vivid Levain cobalt — the pop */
  --accent-deep: #1039a8; /* deep cobalt */
  --btn-blue: #1b4dd1;    /* button surface */
  --chip: #e7d9c0;        /* soft warm border */
  --honey: #eaa23e;       /* single warm secondary pop */
  --honey-deep: #cd8322;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", system-ui, sans-serif;
  overflow-x: hidden;
}

em {
  font-style: italic;
  color: var(--accent);
}

/* ---------- Fixed nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 36px;
  background: rgba(242, 232, 213, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--chip);
}
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  font-family: "Clash Display", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2e49b8;
  text-decoration: none;
}
.brand-2 { color: #2e49b8; }
.logo-badge {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(248, 244, 238, 0.2), 0 4px 14px rgba(94, 62, 30, 0.15);
}
.logo-badge.big {
  width: 180px;
  height: 180px;
  margin: 0 auto 26px;
  display: block;
  border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(248, 244, 238, 0.18), 0 24px 70px rgba(94, 62, 30, 0.18);
}
.tagline {
  font-family: "Dancing Script", cursive;
  font-size: 1.55rem;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.nav-links { display: flex; gap: 30px; }
.nav-links a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.25s;
}
.nav-links a:hover { color: var(--accent); }
.nav-cta {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--btn-blue);
  padding: 10px 22px;
  border-radius: 999px;
  transition: transform 0.25s, background 0.25s, color 0.25s;
}
.nav-cta:hover { background: var(--ink); color: var(--bg); transform: translateY(-1px); }

/* ---------- Cinematic scrub sections ---------- */
.cinematic { position: relative; height: 520vh; }
.sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #140b07; /* hero footage stays dark; settle-fade blends into the cream page */
}
.sticky canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(75% 55% at 50% 50%, rgba(8, 4, 1, 0.38) 0%, transparent 55%),
    radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(8, 4, 1, 0.75) 100%),
    linear-gradient(180deg, rgba(8, 4, 1, 0.6) 0%, transparent 24%, transparent 70%, rgba(8, 4, 1, 0.82) 100%);
}
.settle-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 28vh;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg));
}

/* ---------- Overlay copy ---------- */
.overlay { position: absolute; inset: 0; z-index: 10; text-align: center; }
.reveal-line {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 92vw;
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 7.5vw, 6.4rem);
  letter-spacing: -0.015em;
  line-height: 1.04;
  opacity: 0;
  color: #ffffff;
  text-shadow:
    0 2px 6px rgba(8, 4, 1, 0.95),
    0 4px 18px rgba(8, 4, 1, 0.95),
    0 12px 55px rgba(8, 4, 1, 0.92),
    0 0 130px rgba(8, 4, 1, 0.85);
  will-change: opacity, transform;
}
.reveal-line em { color: #93aaff; }
.brand-line {
  font-family: "Clash Display", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 5.2rem);
  letter-spacing: 0.08em;
  color: #F8F4EE;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.brand-line span { color: #5b7ce6; }

/* ---------- Craft spin section ---------- */
.spin { height: 460vh; }
.info-line {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.45;
  text-align: left;
  width: min(40ch, 42vw);
  border-top: 3px solid var(--accent);
  padding: 24px 28px 28px;
  background: linear-gradient(180deg, rgba(10, 5, 2, 0.72), rgba(10, 5, 2, 0.58));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 24px 70px rgba(94, 62, 30, 0.18);
}
.info-line h3 {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: clamp(2.1rem, 3.8vw, 3.6rem);
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(5, 2, 0, 0.9);
}
.info-line p {
  margin-top: 14px;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 700;
  color: rgba(255, 252, 247, 0.96);
  text-shadow: 0 2px 10px rgba(5, 2, 0, 0.9);
}
.pos-l { left: 23%; }
.pos-r { left: 77%; }
@media (max-width: 760px) {
  .pos-l, .pos-r { left: 50%; top: 72%; width: min(38ch, 84vw); text-align: center; }
  .info-line { border-top: none; border-radius: 20px; padding: 20px 22px 24px; }
  .info-line::before { content: ""; display: block; width: 48px; height: 2px; background: var(--accent); margin: 0 auto 14px; }
}

/* ---------- Corners / progress / hint ---------- */
.corner {
  position: absolute;
  z-index: 12;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: rgba(255, 250, 242, 0.82);
  text-shadow: 0 2px 10px rgba(8, 4, 1, 0.9);
}
.bl { bottom: 64px; left: 36px; }
.br { bottom: 64px; right: 36px; }
.progress {
  position: absolute;
  left: 36px; right: 36px; bottom: 44px;
  height: 2px;
  background: rgba(247, 236, 221, 0.12);
  z-index: 12;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  box-shadow: 0 0 14px rgba(91, 124, 230, 0.7);
}
.scroll-hint {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  color: rgba(255, 250, 242, 0.85);
  text-shadow: 0 2px 10px rgba(8, 4, 1, 0.9);
  animation: bob 1.8s ease-in-out infinite;
  transition: opacity 0.4s;
}
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ---------- Content sections ---------- */
.story, .inside, .menu, .order, .quotes, .occasions, .favorites {
  position: relative;
  padding: 12vh 9vw;
  background: var(--bg);
  overflow: hidden;
}
/* subtle grain + warm wash on every content section */
.story::before, .inside::before, .menu::before, .order::before, .quotes::before, .occasions::before, .favorites::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.05;
}
.story > *, .inside > *, .menu > *, .order > *, .quotes > *, .occasions > *, .favorites > * { position: relative; }

.kicker {
  font-family: "Clash Display", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  color: var(--accent);
  margin-bottom: 28px;
}
.story h2, .inside h2, .menu h2, .order h2, .quotes h2, .occasions h2, .favorites h2 {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: clamp(3rem, 7.5vw, 7.2rem);
  letter-spacing: -0.025em;
  line-height: 1.02;
  max-width: 16ch;
}
.lede {
  margin-top: 36px;
  max-width: 46ch;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.8;
  color: var(--ink-dim);
}
.lede strong { color: var(--ink); font-weight: 800; }

/* story — editorial split */
.story {
  background: radial-gradient(90% 70% at 80% 10%, rgba(91, 124, 230, 0.06), transparent 60%), var(--bg);
}
.story-body { max-width: 56ch; }
.creed {
  font-family: "Fraunces", serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* stats with warm glow */
.stats {
  margin-top: 14vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 36px;
}
.stat {
  position: relative;
  border-top: 1px solid var(--chip);
  padding-top: 30px;
}
.stat::before {
  content: "";
  position: absolute;
  top: 8px; left: -24px;
  width: 200px; height: 140px;
  background: radial-gradient(closest-side, rgba(91, 124, 230, 0.16), transparent);
  pointer-events: none;
}
.stat-num {
  position: relative;
  display: block;
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: clamp(3.4rem, 6.5vw, 5.6rem);
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-label {
  display: block;
  margin-top: 14px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ingredients */
.inside {
  background: radial-gradient(80% 60% at 15% 0%, rgba(91, 124, 230, 0.05), transparent 55%), var(--bg-2);
}
.grid {
  margin-top: 10vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.card {
  background: rgba(20, 11, 7, 0.6);
  border: 1px solid var(--chip);
  border-radius: 22px;
  overflow: hidden;
  transition: border-color 0.35s, box-shadow 0.35s;
  will-change: transform;
}
.card:hover {
  border-color: var(--accent-deep);
  box-shadow: 0 24px 60px rgba(94, 62, 30, 0.16);
}
.card-img {
  height: 210px;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover .card-img { transform: scale(1.05); }
.card-body { padding: 28px 30px 32px; }
.card h3 {
  font-family: "Fraunces", serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.card p { margin-top: 10px; color: var(--ink-dim); line-height: 1.7; font-size: 1rem; }

/* floating cocoa / flour particles */
.particles { position: absolute; inset: 0; pointer-events: none; }
.particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: drift linear infinite;
}
@keyframes drift {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: var(--po, 0.4); }
  90%  { opacity: var(--po, 0.4); }
  100% { transform: translate(var(--dx, 30px), -52vh); opacity: 0; }
}

/* menu / flavors */
.menu {
  background: radial-gradient(90% 70% at 85% 100%, rgba(91, 124, 230, 0.05), transparent 60%), var(--bg);
}
.flavors {
  margin-top: 10vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.flavor {
  background: var(--bg-2);
  border: 1px solid var(--chip);
  border-radius: 22px;
  overflow: hidden;
  transition: border-color 0.35s, box-shadow 0.35s;
  will-change: transform;
}
.flavor:hover {
  border-color: var(--accent-deep);
  box-shadow: 0 24px 60px rgba(94, 62, 30, 0.16);
}
.flavor-img {
  height: 250px;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.flavor:hover .flavor-img { transform: scale(1.06); }
.flavor-body { padding: 28px 28px 34px; }
.flavor-body h3 {
  font-family: "Fraunces", serif;
  font-weight: 800;
  font-size: 1.55rem;
  letter-spacing: -0.01em;
}
.flavor-body p {
  margin-top: 10px;
  color: var(--ink-dim);
  font-size: 0.98rem;
  line-height: 1.65;
}

/* order / footer */
.order {
  text-align: center;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(91, 124, 230, 0.08), transparent 65%),
    var(--bg);
}
.order h2 { margin: 0 auto; }
.order .lede { margin-left: auto; margin-right: auto; }
.big-cta {
  display: inline-block;
  margin-top: 42px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--btn-blue);
  padding: 20px 52px;
  border-radius: 999px;
  box-shadow: 0 12px 50px rgba(91, 124, 230, 0.35);
  transition: transform 0.25s, background 0.25s, color 0.25s;
}
.big-cta:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); }

/* quotes / social proof */
.quotes {
  padding-top: 12vh;
  padding-bottom: 11vh;
  background:
    radial-gradient(70% 55% at 18% 0%, rgba(91, 124, 230, 0.11), transparent 62%),
    radial-gradient(80% 65% at 90% 70%, rgba(190, 140, 85, 0.14), transparent 68%),
    var(--bg-2);
}
.quote-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 42ch);
  gap: 6vw;
  align-items: end;
  margin-bottom: 5vh;
}
.quote-head .kicker { grid-column: 1 / -1; margin-bottom: -2vh; }
.quote-head h2 { max-width: 11ch; }
.quote-head .lede { margin-top: 0; max-width: 38ch; }
.quote-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.8fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 28px;
  perspective: 1200px;
}
.quote-card-lg { grid-row: 1 / 3; }
.quote-stage .quote-card:not(.quote-card-lg) { min-height: 240px; }
@media (max-width: 980px) {
  .quote-stage { grid-template-columns: 1fr; grid-template-rows: none; }
  .quote-card-lg { grid-row: auto; }
  .quote-card, .quote-card-lg { min-height: 300px; }
}
.quote-card {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid rgba(91, 124, 230, 0.24);
  border-radius: 28px;
  background: linear-gradient(135deg, #faf2e2, #ecdfc4);
  box-shadow: 0 30px 90px rgba(94, 62, 30, 0.16);
  transform: translateZ(0);
}
.quote-card::before {
  content: """;
  position: absolute;
  right: 28px;
  top: -36px;
  font-family: "Fraunces", serif;
  font-size: clamp(9rem, 16vw, 18rem);
  line-height: 1;
  color: rgba(91, 124, 230, 0.13);
  pointer-events: none;
}
.quote-card::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% 20%;
  height: 72%;
  background: radial-gradient(closest-side, rgba(91, 124, 230, 0.2), transparent);
  pointer-events: none;
}
.quote-card-lg {
  min-height: 540px;
  background: linear-gradient(145deg, #faf2e2, #e7d8b9);
  animation: quoteLift 7s ease-in-out infinite;
}
.quote-card:not(.quote-card-lg) { animation: quoteLift 8s ease-in-out infinite; }
.quote-card:nth-child(2) { animation-delay: -2.4s; }
.quote-copy {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 4vw, 56px);
  width: 100%;
}
.quote-copy span {
  display: block;
  margin-bottom: 22px;
  font-family: "Clash Display", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--accent);
}
.quote-copy blockquote {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: clamp(2.35rem, 5.2vw, 6.2rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--accent-deep);
  text-wrap: balance;
}
.quote-card:not(.quote-card-lg) .quote-copy blockquote {
  font-size: clamp(1.9rem, 3vw, 3.4rem);
  line-height: 1.02;
}
.quote-ticker {
  margin: 8vh -9vw 0;
  overflow: hidden;
  border-block: 1px solid var(--accent-deep);
  background: var(--btn-blue);
}
.quote-ticker-track {
  display: flex;
  width: max-content;
  gap: 52px;
  padding: 22px 0;
  animation: tickerMove 30s linear infinite;
}
.quote-ticker span {
  font-family: "Clash Display", sans-serif;
  font-size: clamp(1rem, 2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.94);
  white-space: nowrap;
}
@keyframes quoteLift {
  0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
  50% { transform: translateY(-10px) rotateX(1.2deg) rotateY(-1deg); }
}
@keyframes tickerMove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.site-footer {
  background: var(--bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 28px 36px;
  border-top: 1px solid var(--chip);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--ink-dim);
}

/* ---------- Scroll reveals ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
/* while hovered, transform follows the cursor instantly; releases ease back via the .reveal transition */
.tilt:hover { transition-property: opacity, border-color, box-shadow; }

/* ---------- Mobile ---------- */
@media (max-width: 1150px) {
  .nav { gap: 14px; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 0.72rem; letter-spacing: 0.1em; white-space: nowrap; }
  .nav-cta { white-space: nowrap; }
  .brand span { white-space: nowrap; }
}
@media (max-width: 640px) {
  .nav { padding: 14px 18px; }
  .nav-links { display: none; }
  .corner { font-size: 0.58rem; letter-spacing: 0.2em; }
  .bl { left: 18px; }
  .br { right: 18px; }
  .progress { left: 18px; right: 18px; }
  .story, .inside, .menu, .order, .quotes, .occasions, .favorites { padding: 12vh 7vw; }
  .quote-head, .quote-stage { grid-template-columns: 1fr; }
  .quote-head { gap: 26px; margin-bottom: 7vh; }
  .quote-head .kicker { margin-bottom: 0; }
  .quote-card-lg { min-height: 420px; }
  .quote-card { min-height: 260px; border-radius: 22px; }
  .quote-copy { padding: 30px 26px; }
  .quote-ticker { margin-left: -7vw; margin-right: -7vw; }
  footer { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .quote-card, .quote-card-lg, .quote-ticker-track { animation: none; }
}

/* ============================================================
   ORDER PAGE
   ============================================================ */
.order-page-body { background: var(--bg); }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-page-body { background: var(--bg); }
.about-hero,
.origin-band,
.about-proof,
.standard-split,
.about-timeline,
.about-close {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.about-hero::before,
.origin-band::before,
.standard-split::before,
.about-timeline::before,
.about-close::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.045;
}
.about-hero > *,
.origin-band > *,
.about-proof > *,
.standard-split > *,
.about-timeline > *,
.about-close > * { position: relative; }
.about-hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
  gap: 6vw;
  align-items: center;
  padding: 150px 7vw 12vh;
  background:
    radial-gradient(78% 62% at 80% 20%, rgba(91, 124, 230, 0.12), transparent 62%),
    var(--bg);
}
.about-hero h1,
.origin-note h2,
.standard-copy h2,
.about-timeline h2,
.about-close h2 {
  font-family: "Fraunces", serif;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.about-hero h1 {
  max-width: 11ch;
  font-size: clamp(4rem, 9vw, 9rem);
}
.about-hero .lede {
  max-width: 48ch;
  margin-top: 16px;
  line-height: 1.6;
}
.about-hero-media {
  align-self: center;
  border: 1px solid rgba(91, 124, 230, 0.22);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 34px 110px rgba(94, 62, 30, 0.17);
  transform: rotate(1.5deg);
}
.about-hero-media img,
.standard-image img {
  width: 100%;
  height: auto;
  display: block;
}
.origin-band {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.72fr);
  gap: 7vw;
  padding: 18vh 8vw;
  background:
    radial-gradient(70% 50% at 10% 10%, rgba(91, 124, 230, 0.08), transparent 62%),
    var(--bg-2);
}
.origin-mark {
  display: block;
  margin-bottom: 24px;
  font-family: "Clash Display", sans-serif;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--accent);
}
.origin-note h2 {
  max-width: 12ch;
  font-size: clamp(2.9rem, 6.2vw, 6.4rem);
}
.origin-copy {
  align-self: end;
  display: grid;
  gap: 28px;
}
.origin-copy p {
  color: var(--ink-dim);
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.9;
}
.about-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 12vh 8vw;
  background: var(--bg);
}
.about-proof-card {
  position: relative;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(91, 124, 230, 0.22);
  border-radius: 24px;
  background: linear-gradient(145deg, #faf2e2, #eadec6);
}
.about-proof-card::before {
  content: "";
  position: absolute;
  left: -70px;
  bottom: -90px;
  width: 260px;
  height: 220px;
  background: radial-gradient(closest-side, rgba(91, 124, 230, 0.2), transparent);
}
.about-proof-card .stat-num,
.about-proof-word {
  position: relative;
  display: block;
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: clamp(3.2rem, 6.2vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--accent);
}
.about-proof-card p {
  position: relative;
  margin-top: 18px;
  color: var(--ink-dim);
  line-height: 1.7;
}
.standard-split {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1fr);
  gap: 7vw;
  align-items: center;
  padding: 18vh 8vw;
  background:
    radial-gradient(80% 65% at 100% 80%, rgba(91, 124, 230, 0.07), transparent 62%),
    var(--bg-2);
}

/* real-photo gallery */
.about-gallery {
  padding: 18vh 8vw;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(91, 124, 230, 0.07), transparent 60%),
    var(--bg);
}
.about-gallery h2 {
  font-family: "Fraunces", serif;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.98;
  max-width: 14ch;
  font-size: clamp(3rem, 6.8vw, 7rem);
}
.gallery-grid {
  margin-top: 8vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.gallery-grid figure {
  margin: 0;
  border: 1px solid rgba(91, 124, 230, 0.2);
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 24px 70px rgba(94, 62, 30, 0.15);
}
.gallery-grid figure:first-child {
  grid-column: span 2;
}
.gallery-grid img {
  width: 100%;
  height: 320px;
  display: block;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-grid figure:hover img { transform: scale(1.04); }
.gallery-grid figcaption {
  padding: 18px 24px 22px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}
@media (max-width: 720px) {
  .gallery-grid figure:first-child { grid-column: auto; }
  .gallery-grid img { height: 240px; }
}
.standard-image {
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(91, 124, 230, 0.2);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(94, 62, 30, 0.15);
}
.standard-copy h2,
.about-timeline h2,
.about-close h2 {
  max-width: 14ch;
  font-size: clamp(3rem, 6.8vw, 7rem);
}
.about-list {
  display: grid;
  gap: 18px;
  margin-top: 46px;
  list-style: none;
}
.about-list li {
  padding: 22px 0;
  border-top: 1px solid var(--chip);
}
.about-list span {
  display: block;
  font-family: "Fraunces", serif;
  font-weight: 800;
  font-size: 1.35rem;
}
.about-list p {
  margin-top: 8px;
  color: var(--ink-dim);
  line-height: 1.7;
}
.about-timeline {
  padding: 18vh 8vw;
  background: var(--bg);
}
.timeline {
  margin-top: 10vh;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--chip);
  border: 1px solid var(--chip);
  border-radius: 24px;
  overflow: hidden;
}
.timeline-item {
  min-height: 300px;
  padding: 30px;
  background: rgba(31, 18, 10, 0.76);
}
.timeline-item span {
  display: block;
  font-family: "Clash Display", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d9b98a; /* tan headers on the chocolate boxes */
}
.timeline-item p {
  margin-top: 64px;
  font-size: 1.16rem;
  color: rgba(255, 252, 247, 0.94); /* white text on the chocolate boxes */
  line-height: 1.7;
}
.about-close {
  min-height: 90vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16vh 8vw;
  background:
    radial-gradient(70% 56% at 50% 20%, rgba(91, 124, 230, 0.12), transparent 64%),
    var(--bg-2);
}
.about-close h2 { margin: 0 auto; }
.about-close .lede { margin-left: auto; margin-right: auto; }

.order-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 150px 5vw 12vh;
}
.order-head { margin-bottom: 54px; }
.order-title {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: clamp(2.8rem, 6vw, 5.4rem);
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 34px;
  list-style: none;
}
.step-chip {
  font-family: "Clash Display", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(51, 38, 26, 0.4);
  border-bottom: 2px solid transparent;
  padding-bottom: 6px;
  transition: color 0.3s, border-color 0.3s;
}
.step-chip.active { color: var(--accent); border-color: var(--accent); }

.order-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 52px;
  align-items: start;
}
.step { display: none; }
.step.active { display: block; animation: stepIn 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes stepIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.step-title {
  font-family: "Fraunces", serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  letter-spacing: -0.01em;
  margin-bottom: 30px;
}

/* box cards */
.box-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; }
.box-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--chip);
  border-radius: 20px;
  padding: 30px 26px;
  color: var(--ink);
  cursor: pointer;
  font-family: "Manrope", sans-serif;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.box-card:hover { transform: translateY(-3px); border-color: var(--accent-deep); }
.box-card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 18px 50px rgba(94, 62, 30, 0.15); }
.box-badge {
  position: absolute;
  top: -11px; left: 24px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  background: var(--btn-blue);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
}
.box-name { font-family: "Fraunces", serif; font-weight: 800; font-size: 1.45rem; }
.box-count { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.box-price { font-family: "Fraunces", serif; font-weight: 900; font-size: 2rem; color: var(--accent); margin-top: 8px; }
.box-note { font-size: 0.9rem; color: var(--ink-dim); }

/* catering branch */
.catering-entry {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  margin-top: 26px;
  padding: 30px;
  border: 1px solid rgba(91, 124, 230, 0.26);
  border-radius: 22px;
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(91, 124, 230, 0.14), transparent 58%),
    rgba(31, 18, 10, 0.82);
  box-shadow: 0 24px 70px rgba(5, 2, 0, 0.24);
}
.catering-entry .box-badge { position: static; display: inline-block; margin-bottom: 14px; }
.catering-entry h3 {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  letter-spacing: -0.02em;
}
.catering-entry p {
  margin-top: 8px;
  max-width: 48ch;
  color: var(--ink-dim);
  line-height: 1.65;
}
.catering-open { white-space: nowrap; }
.catering-flow {
  margin-top: 28px;
  padding: 30px;
  border: 1px solid var(--chip);
  border-radius: 22px;
  background: rgba(20, 11, 7, 0.72);
}
.catering-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 28px;
}
.catering-progress span {
  font-family: "Clash Display", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(247, 236, 221, 0.34);
  text-transform: uppercase;
}
.catering-progress span.active { color: var(--accent); }
.catering-step { display: none; }
.catering-step.active { display: block; animation: stepIn 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.catering-step h3 {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: clamp(1.65rem, 3vw, 2.45rem);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.catering-form { display: grid; gap: 18px; }
.catering-choice {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}
.catering-flavors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  margin: 22px 0;
  transition: opacity 0.25s, filter 0.25s;
}
.catering-flavors.disabled {
  opacity: 0.42;
  filter: saturate(0.7);
  pointer-events: none;
}
.catering-flavors.needs-flavors {
  padding: 12px;
  border: 1px solid #d96a4a;
  border-radius: 18px;
}
.catering-flavor {
  position: relative;
  min-height: 145px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid var(--chip);
  border-radius: 16px;
  cursor: pointer;
  background: var(--bg-2);
}
.catering-flavor input { position: absolute; inset: 12px auto auto 12px; accent-color: var(--accent); z-index: 2; }
.catering-flavor span {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.72;
  transition: transform 0.4s, opacity 0.25s;
}
.catering-flavor b {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 42px 14px 14px;
  background: linear-gradient(180deg, transparent, rgba(8, 4, 1, 0.88));
  font-size: 0.9rem;
}
.catering-flavor:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.catering-flavor:has(input:checked) span,
.catering-flavor:hover span {
  opacity: 0.96;
  transform: scale(1.05);
}
.allergy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 12px;
  margin: 22px 0;
  border: 0;
}
.allergy-grid legend {
  margin-bottom: 14px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.allergy-grid label {
  border: 1px solid var(--chip);
  border-radius: 999px;
  padding: 12px 14px;
  color: var(--ink-dim);
  cursor: pointer;
}
.allergy-grid input { accent-color: var(--accent); margin-right: 8px; }
.catering-review b { color: var(--ink); }
.catering-confirm {
  text-align: center;
  padding: 4vh 0 2vh;
}
.catering-confirm h3 span { color: var(--accent); }
.catering-confirm p {
  max-width: 48ch;
  margin: 0 auto 18px;
  color: var(--ink-dim);
  line-height: 1.7;
}

/* builder */
.fill-status { margin: -12px 0 26px; color: var(--ink-dim); font-size: 1rem; }
.fill-status b { color: var(--accent); font-size: 1.15rem; }
.link-btn {
  background: none; border: none; cursor: pointer;
  color: var(--accent); font-weight: 700; font-size: 0.9rem;
  text-decoration: underline; text-underline-offset: 3px;
  margin-left: 14px; font-family: "Manrope", sans-serif;
}
.builder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.builder-item {
  background: var(--bg-2);
  border: 1px solid var(--chip);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color 0.3s;
}
.builder-item.has { border-color: var(--accent-deep); }
.builder-img { height: 110px; background-size: cover; background-position: center; }
.builder-name { font-weight: 800; font-size: 0.92rem; padding: 12px 14px 4px; }
.stepper { display: flex; align-items: center; gap: 14px; padding: 8px 14px 14px; }
.stepper b { min-width: 18px; text-align: center; font-size: 1.05rem; color: var(--accent); }
.stepper button {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--accent-deep);
  background: none;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.stepper button:hover:not(:disabled) { background: var(--btn-blue); color: #fff; }
.stepper button:disabled { opacity: 0.3; cursor: default; }

/* form */
.ship-form { display: grid; gap: 18px; max-width: 640px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-row.three { grid-template-columns: 2fr 1fr 1fr; }
.field { display: grid; gap: 8px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.field input, .field textarea {
  background: var(--bg-2);
  border: 1px solid var(--chip);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  transition: border-color 0.25s;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.55; text-transform: none; letter-spacing: 0; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field input.invalid { border-color: #d96a4a; }
.ship-options { border: none; display: grid; gap: 12px; margin-top: 8px; }
.ship-options legend { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 12px; }
.ship-option {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-2);
  border: 1px solid var(--chip);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.25s;
}
.ship-option:has(input:checked) { border-color: var(--accent); }
.ship-option input { accent-color: var(--accent); }
.ship-option b { display: block; font-size: 1rem; }
.ship-option small { color: var(--ink-dim); font-size: 0.85rem; }

/* review */
.review-card {
  background: var(--bg-2);
  border: 1px solid var(--chip);
  border-radius: 20px;
  padding: 32px 34px;
  display: grid;
  gap: 14px;
  max-width: 640px;
  line-height: 1.65;
}
.review-card h4 { font-family: "Fraunces", serif; font-size: 1.2rem; }
.review-card p, .review-card li { color: var(--ink-dim); }
.review-flavors { list-style: none; display: grid; gap: 4px; }
.review-flavors b { color: var(--accent); }
.review-ship { border-top: 1px solid var(--chip); padding-top: 14px; }
.payment-note {
  max-width: 640px;
  margin-top: 18px;
  color: var(--ink-dim);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* nav buttons */
.step-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; }
.btn-next, .btn-back {
  font-family: "Manrope", sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.25s, background 0.25s, opacity 0.25s;
}
.btn-next {
  background: var(--btn-blue);
  color: #fff;
  border: none;
  padding: 16px 36px;
}
.btn-next:hover:not(:disabled) { background: var(--ink); color: var(--bg); transform: translateY(-2px); }
.btn-next:disabled { opacity: 0.35; cursor: default; }
.btn-back { background: none; border: none; color: var(--ink-dim); padding: 16px 0; }
.btn-back:hover { color: var(--ink); }

/* summary rail */
.order-aside { position: sticky; top: 120px; }
.sum-card {
  background: var(--bg-2);
  border: 1px solid var(--chip);
  border-radius: 20px;
  padding: 28px 28px 30px;
}
.sum-card h3 { font-family: "Fraunces", serif; font-size: 1.3rem; margin-bottom: 18px; }
.sum-line { display: flex; justify-content: space-between; padding: 7px 0; color: var(--ink-dim); font-size: 0.95rem; }
.sum-line.head { color: var(--ink); font-weight: 800; font-size: 1.05rem; border-bottom: 1px solid var(--chip); margin-bottom: 6px; }
.sum-line.total { color: var(--ink); font-weight: 800; font-size: 1.15rem; border-top: 1px solid var(--chip); margin-top: 8px; padding-top: 14px; }
.sum-line.total span:last-child { color: var(--accent); }
.sum-empty { color: var(--ink-dim); font-size: 0.92rem; font-style: italic; }
.sum-totals { margin-top: 10px; }

/* confirmation */
.confirm { text-align: center; padding-top: 4vh; }
.confirm .step-title { margin-bottom: 12px; }
.confirm #order-no { color: var(--accent); }
.confirm-copy { color: var(--ink-dim); font-size: 1.1rem; }
.confirm-copy b { color: var(--ink); }
.big-tagline { font-size: 2rem; margin: 26px 0 36px; }
.confirm .big-cta { margin-top: 0; }

@media (max-width: 960px) {
  .about-hero,
  .origin-band,
  .standard-split {
    grid-template-columns: 1fr;
  }
  .about-hero-media { min-height: 54vh; transform: none; }
  .about-proof { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .order-layout { grid-template-columns: 1fr; }
  .order-aside { position: static; order: -1; }
  .catering-entry { flex-direction: column; align-items: flex-start; }
  .catering-open { width: 100%; text-align: center; }
}
@media (max-width: 640px) {
  .order-wrap { padding-top: 120px; }
  .about-hero { padding: 124px 7vw 10vh; }
  .about-hero h1 { font-size: clamp(3.3rem, 16vw, 5.4rem); }
  .origin-band,
  .standard-split,
  .about-timeline,
  .about-close { padding: 12vh 7vw; }
  .about-proof { padding: 9vh 7vw; }
  .origin-note h2,
  .standard-copy h2,
  .about-timeline h2,
  .about-close h2 { font-size: clamp(2.75rem, 13vw, 4.8rem); }
  .timeline { grid-template-columns: 1fr; }
  .timeline-item { min-height: 230px; }
  .timeline-item p { margin-top: 48px; }
  .field-row, .field-row.three { grid-template-columns: 1fr; }
  .logo-badge { width: 36px; height: 36px; }
  .catering-entry, .catering-flow { padding: 22px; border-radius: 18px; }
  .catering-flavors { grid-template-columns: 1fr; }
  .allergy-grid { grid-template-columns: 1fr; }
}

/* ---------- Occasions (Corporate / Events / Catering) ---------- */
.occasion-grid {
  margin-top: 4vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
.occasion-card {
  background: var(--bg-2);
  border: 1px solid var(--chip);
  border-radius: 22px;
  overflow: hidden;
  transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s;
}
.occasion-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-deep);
  box-shadow: 0 24px 60px rgba(94, 62, 30, 0.16);
}
.occasion-img {
  height: 250px;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.occasion-card:hover .occasion-img { transform: scale(1.05); }
.occasion-body { padding: 28px 30px 32px; }
.occasion-body h3 {
  font-family: "Fraunces", serif;
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
}
.occasion-body p {
  margin-top: 12px;
  color: var(--ink-dim);
  font-size: 0.98rem;
  line-height: 1.7;
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
}
.card-link span { transition: transform 0.25s; }
.card-link:hover span { transform: translateX(4px); }

/* ---------- Fan favorites ---------- */
.fav-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}
.fav-grid {
  margin-top: 4vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}
.fav-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--chip);
  border-radius: 22px;
  overflow: hidden;
  transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s;
}
.fav-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-deep);
  box-shadow: 0 24px 60px rgba(94, 62, 30, 0.16);
}
.fav-img {
  height: 230px;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fav-card:hover .fav-img { transform: scale(1.05); }
.fav-card h3 {
  font-family: "Fraunces", serif;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  padding: 22px 24px 26px;
}
.fav-badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--btn-blue);
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(94, 62, 30, 0.15);
}
.fav-card-cta {
  background: var(--btn-blue);
  border-color: var(--accent-deep);
}
.fav-card-cta h3 { color: #fff; padding-bottom: 4px; }
.fav-card-cta .card-link { color: #dbe4ff; margin: 10px 24px 26px; }

/* ---------- Story split (Every Cookie Has a Beginning) ---------- */
.story-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
  gap: 6vw;
  align-items: center;
}
.story-media {
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--chip);
  box-shadow: 0 30px 80px rgba(94, 62, 30, 0.18);
}
.story-media img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  .story-split { grid-template-columns: 1fr; }
}

/* ---------- Cookie collection banner + text flavor cards ---------- */
.collection-banner {
  margin: 4vh 0 0;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--chip);
  box-shadow: 0 30px 80px rgba(94, 62, 30, 0.18);
  background: #faf2e2;
}
.collection-banner img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  display: block;
}
.collection-banner figcaption {
  padding: 18px 26px;
  font-family: "Clash Display", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.flavors-text { margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.flavor-line {
  background: linear-gradient(135deg, #faf2e2, #ecdfc4);
  border: 1px solid var(--chip);
  border-radius: 18px;
  padding: 26px 26px 28px;
  transition: border-color 0.35s, box-shadow 0.35s;
  will-change: transform;
}
.flavor-line:hover { border-color: var(--accent); box-shadow: 0 18px 50px rgba(94, 62, 30, 0.16); }
.flavor-line h3 {
  font-family: "Fraunces", serif;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--accent-deep);
}
.flavor-line p { margin-top: 8px; color: var(--ink-dim); font-size: 0.95rem; line-height: 1.6; }

/* ---------- Photo marquee (In the Wild) ---------- */
.moments {
  position: relative;
  padding: 18vh 0 20vh;
  background: var(--bg-2);
  overflow: hidden;
}
.moments .kicker, .moments h2 { padding: 0 9vw; }
.moments h2 {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: clamp(3rem, 7.5vw, 7.2rem);
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.photo-marquee { margin-top: 7vh; overflow: hidden; }
.photo-marquee-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: photoScroll 55s linear infinite;
}
.photo-marquee:hover .photo-marquee-track { animation-play-state: paused; }
.photo-marquee-track figure {
  margin: 0;
  width: 340px;
  flex: none;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--chip);
  background: #fff;
  box-shadow: 0 18px 50px rgba(94, 62, 30, 0.14);
}
.photo-marquee-track img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}
.photo-marquee-track figcaption {
  padding: 12px 18px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
@keyframes photoScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .photo-marquee-track figure { width: 240px; }
  .photo-marquee-track img { height: 180px; }
}

/* ---------- Builder info button + food info modal ---------- */
.builder-item { position: relative; }
.info-btn {
  position: absolute;
  top: 10px; right: 10px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: none;
  color: var(--accent);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.info-btn:hover { background: var(--accent); color: #fff; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(30, 20, 10, 0.45);
  backdrop-filter: blur(4px);
}
.modal-backdrop[hidden] { display: none; }
.info-modal {
  position: relative;
  width: min(480px, 92vw);
  background: #faf4e6;
  border: 1px solid var(--chip);
  border-radius: 22px;
  padding: 34px 34px 30px;
  box-shadow: 0 40px 120px rgba(30, 20, 10, 0.35);
  animation: stepIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-close {
  position: absolute;
  top: 14px; right: 16px;
  border: none;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-dim);
  cursor: pointer;
}
.modal-close:hover { color: var(--ink); }
.info-kicker {
  font-family: "Clash Display", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--accent);
}
.info-modal h4 {
  font-family: "Fraunces", serif;
  font-weight: 800;
  font-size: 1.6rem;
  margin: 8px 0 18px;
}
.info-modal h5 {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 16px 0 8px;
}
.allergen-list { display: flex; flex-wrap: wrap; gap: 8px; }
.allergen-pill {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: #f6e3d2;
  border: 1px solid #e5c3a4;
  color: #8a4b1f;
}
.info-ingredients { color: var(--ink-dim); line-height: 1.7; font-size: 0.95rem; }
.info-notice {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fdeeee;
  border: 1px solid #efc7c7;
  color: #8a2f2f;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---------- Transparent nav over the hero scrub ---------- */
.nav { transition: background 0.45s, border-color 0.45s; }
.nav-clear {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-clear .brand,
.nav-clear .brand-2 { color: #F8F4EE; text-shadow: 0 2px 12px rgba(8, 4, 1, 0.7); }
.nav-clear .nav-links a { color: rgba(248, 244, 238, 0.88); text-shadow: 0 2px 10px rgba(8, 4, 1, 0.7); }
.nav-clear .nav-links a:hover { color: #ffffff; }

/* ---------- Packaging collage ---------- */
.moments {
  position: relative;
  padding: 11vh 9vw 12vh;
  background: var(--bg-2);
  overflow: hidden;
}
.moments h2 {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: clamp(3rem, 7.5vw, 7.2rem);
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.moments-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}
.collage {
  margin-top: 4vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.collage figure {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--chip);
  box-shadow: 0 22px 60px rgba(94, 62, 30, 0.16);
}
.collage img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.collage figure:hover img { transform: scale(1.04); }
@media (max-width: 760px) {
  .collage { grid-template-columns: 1fr; }
  .collage img { height: 240px; }
}

/* ---------- Journey CTA ---------- */
.journey {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1fr);
  gap: 6vw;
  align-items: center;
  padding: 11vh 9vw;
  background: var(--bg);
}
.journey-media {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--chip);
  box-shadow: 0 26px 70px rgba(94, 62, 30, 0.18);
}
.journey-media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.journey-copy h2 {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  letter-spacing: -0.025em;
  line-height: 1.02;
}
.journey-copy .lede { max-width: 46ch; }
.journey .big-cta { margin-top: 30px; }
@media (max-width: 860px) {
  .journey { grid-template-columns: 1fr; }
  .journey-media img { min-height: 240px; }
}

/* ---------- Footer logo ---------- */
.footer-logo {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(94, 62, 30, 0.18);
}

/* ============================================================
   VIBRANCY PASS — warm accent + warm/cool section rhythm
   ============================================================ */
:root {
  --warm: #e0913f;          /* caramel amber pop */
  --warm-deep: #c9722a;
  --tint-warm: #f6e8cf;     /* warm cream section base */
  --tint-cool: #e8e9f6;     /* soft blue section base */
  --tint-cool-2: #e2e4f4;   /* deeper blue tint */
}

/* Alternating section backgrounds for rhythm (later rules win) */
.occasions {
  background:
    radial-gradient(70% 55% at 12% 8%, rgba(224, 145, 63, 0.16), transparent 60%),
    radial-gradient(70% 60% at 92% 90%, rgba(91, 124, 230, 0.10), transparent 62%),
    var(--tint-warm);
}
.journey {
  background:
    radial-gradient(80% 70% at 15% 10%, rgba(91, 124, 230, 0.16), transparent 62%),
    var(--tint-cool);
}
.favorites {
  background:
    radial-gradient(75% 60% at 85% 5%, rgba(224, 145, 63, 0.15), transparent 60%),
    var(--tint-warm);
}
.quotes {
  background:
    radial-gradient(70% 55% at 18% 0%, rgba(91, 124, 230, 0.16), transparent 62%),
    radial-gradient(60% 55% at 90% 80%, rgba(224, 145, 63, 0.10), transparent 66%),
    var(--tint-cool-2);
}
.story {
  background:
    radial-gradient(85% 70% at 82% 12%, rgba(224, 145, 63, 0.15), transparent 60%),
    var(--tint-warm);
}
.menu {
  background:
    radial-gradient(90% 70% at 85% 100%, rgba(224, 145, 63, 0.16), transparent 62%),
    radial-gradient(60% 50% at 5% 0%, rgba(91, 124, 230, 0.08), transparent 60%),
    var(--tint-warm);
}
.order {
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(224, 145, 63, 0.18), transparent 62%),
    radial-gradient(60% 50% at 50% 100%, rgba(91, 124, 230, 0.10), transparent 60%),
    var(--bg);
}
.moments {
  background:
    radial-gradient(70% 55% at 90% 8%, rgba(224, 145, 63, 0.12), transparent 62%),
    var(--bg-2);
}

/* Warm color pops */
.fav-badge {
  background: linear-gradient(135deg, var(--warm), var(--warm-deep));
  box-shadow: 0 6px 18px rgba(201, 114, 42, 0.35);
}
.kicker { color: var(--warm-deep); }         /* warm eyebrow labels */
.card-link { color: var(--warm-deep); }       /* warm "Shop All →" links */
.card-link:hover span { color: var(--warm); }
.big-cta { box-shadow: 0 14px 40px rgba(224, 145, 63, 0.28), 0 6px 16px rgba(46, 73, 184, 0.22); }
.story-media, .journey-media, .collage figure, .collection-banner {
  box-shadow: 0 26px 70px rgba(201, 114, 42, 0.16);
}
/* warm top rule on flavor cards for a subtle accent */
.flavor-line { border-top: 3px solid var(--warm); }

/* ============================================================
   VIBRANCY PASS 2 — all-warm rhythm, no cool tints
   (golden hour: cream → apricot → terracotta accents)
   ============================================================ */
:root {
  --pop: #d96b43;           /* terracotta pop */
  --pop-deep: #b9542f;
  --tint-apricot: #f6dfc0;  /* golden apricot */
  --tint-blush: #f5dcc8;    /* warm blush */
}

/* Journey: golden-hour warmth instead of blue */
.journey {
  background:
    radial-gradient(80% 70% at 12% 8%, rgba(224, 145, 63, 0.22), transparent 60%),
    radial-gradient(65% 60% at 92% 92%, rgba(217, 107, 67, 0.14), transparent 62%),
    var(--tint-apricot);
}

/* Quotes: warm blush instead of blue tint */
.quotes {
  background:
    radial-gradient(70% 55% at 18% 0%, rgba(224, 145, 63, 0.18), transparent 62%),
    radial-gradient(60% 55% at 90% 85%, rgba(217, 107, 67, 0.12), transparent 66%),
    var(--tint-blush);
}

/* Order CTA: punchier golden center */
.order {
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(224, 145, 63, 0.26), transparent 64%),
    radial-gradient(55% 45% at 50% 100%, rgba(217, 107, 67, 0.12), transparent 60%),
    var(--tint-apricot);
}

/* Occasions richer */
.occasions {
  background:
    radial-gradient(70% 55% at 12% 8%, rgba(224, 145, 63, 0.20), transparent 60%),
    radial-gradient(60% 55% at 92% 90%, rgba(217, 107, 67, 0.10), transparent 62%),
    var(--tint-warm);
}

/* Tri-color rules on menu cards: caramel / terracotta / blue */
.flavor-line:nth-child(3n+2) { border-top-color: var(--pop); }
.flavor-line:nth-child(3n)   { border-top-color: var(--accent); }

/* Terracotta pops */
.fav-badge { background: linear-gradient(135deg, var(--warm), var(--pop-deep)); }
.box-badge { background: linear-gradient(135deg, var(--warm), var(--pop-deep)); }
.occasion-card:hover, .fav-card:hover, .flavor-line:hover { border-color: var(--warm-deep); }
.tagline { color: var(--pop-deep); }

/* Ticker: deep blue → royal gradient for energy (band stays blue on purpose) */
.quote-ticker { background: linear-gradient(90deg, #22378f, #2e49b8 40%, #3b57cf 70%, #22378f); }

/* Section headings: warm em on the two most repeated lines stays blue,
   but give kickers a touch more punch */
.kicker { color: var(--pop-deep); letter-spacing: 0.42em; }

/* ============================================================
   IMAGE FIT PASS — stop cropping product/packaging photos
   ============================================================ */
/* Card image frames: show the full photo, letterbox on warm cream */
.occasion-img, .fav-img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #f8f1e2;
  height: 300px;
}
.fav-card-cta .fav-img { background-color: rgba(255, 255, 255, 0.12); }

/* Collage: full photos, no crop */
.collage figure { background: #f8f1e2; }
.collage img {
  height: 360px;
  object-fit: contain;
}

/* Collection banner: never crop the spread */
.collection-banner img {
  max-height: none;
  height: auto;
  object-fit: unset;
}

/* Story + journey media: natural aspect ratio, no crop */
.story-media img,
.journey-media img {
  height: auto;
  min-height: 0;
  object-fit: unset;
}
.journey-media, .story-media { align-self: center; }

/* ============================================================
   REFINED LEVAIN PALETTE — bright cream + consistent cobalt pop
   (final consolidation; overrides earlier warm-tint passes)
   ============================================================ */

/* Consistent section rhythm: alternate cream shades,
   same subtle cobalt wash throughout — refined, not monotone */
.occasions {
  background: radial-gradient(75% 60% at 15% 8%, rgba(27, 77, 209, 0.07), transparent 62%), var(--bg-2);
}
.order {
  background:
    radial-gradient(72% 58% at 50% 0%, rgba(27, 77, 209, 0.12), transparent 64%),
    radial-gradient(55% 45% at 50% 100%, rgba(234, 162, 62, 0.10), transparent 60%),
    var(--bg);
}
.journey {
  background: radial-gradient(80% 68% at 88% 12%, rgba(27, 77, 209, 0.08), transparent 62%), var(--bg-2);
}
.favorites {
  background: radial-gradient(72% 58% at 85% 6%, rgba(27, 77, 209, 0.07), transparent 62%), var(--bg);
}
.moments {
  background: radial-gradient(70% 55% at 12% 8%, rgba(27, 77, 209, 0.07), transparent 62%), var(--bg-2);
}
.quotes {
  background:
    radial-gradient(70% 55% at 18% 0%, rgba(27, 77, 209, 0.10), transparent 62%),
    radial-gradient(60% 55% at 90% 85%, rgba(27, 77, 209, 0.06), transparent 66%),
    var(--bg);
}
.story {
  background: radial-gradient(82% 68% at 82% 12%, rgba(27, 77, 209, 0.07), transparent 62%), var(--bg-2);
}
.menu {
  background: radial-gradient(85% 68% at 85% 100%, rgba(27, 77, 209, 0.08), transparent 62%), var(--bg);
}

/* Cobalt is the consistent pop: kickers, links, borders */
.kicker { color: var(--accent); letter-spacing: 0.42em; }
.card-link { color: var(--accent); }
.card-link:hover span { color: var(--accent-deep); }
.tagline { color: var(--accent); }
.flavor-line { border-top: 3px solid var(--accent); }
.flavor-line:nth-child(3n+2) { border-top-color: var(--accent); }
.flavor-line:nth-child(3n)   { border-top-color: var(--accent); }
.occasion-card:hover, .fav-card:hover, .flavor-line:hover,
.card:hover, .flavor:hover { border-color: var(--accent); }

/* One warm secondary pop: honey badges (stand out against cobalt) */
.fav-badge, .box-badge {
  background: linear-gradient(135deg, var(--honey), var(--honey-deep));
  box-shadow: 0 6px 18px rgba(205, 131, 34, 0.32);
}

/* Brighter, snappier CTA shadow (cobalt-forward) */
.big-cta { box-shadow: 0 14px 40px rgba(27, 77, 209, 0.30), 0 6px 16px rgba(27, 77, 209, 0.20); }
.big-cta:hover { background: var(--accent-deep); color: #fff; }
.nav-cta:hover { background: var(--accent-deep); color: #fff; }

/* Stat numbers + em accents ride the vivid cobalt automatically via --accent */

/* ---------- Surprise Me button + shipping status ---------- */
.surprise-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 560px;
  margin: 0 0 26px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #fff, #f3ebda);
  border: 2px dashed var(--accent);
  border-radius: 18px;
  cursor: pointer;
  text-align: left;
  font-family: "Manrope", sans-serif;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.surprise-btn:hover { box-shadow: 0 12px 34px rgba(27, 77, 209, 0.16); }
.surprise-btn .surprise-dice { font-size: 1.9rem; line-height: 1; }
.surprise-btn b {
  display: block;
  font-family: "Fraunces", serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent-deep);
}
.surprise-btn small {
  display: block;
  margin-top: 3px;
  font-size: 0.88rem;
  color: var(--ink-dim);
}
.surprise-btn.on {
  border-style: solid;
  border-color: var(--accent);
  background: linear-gradient(135deg, #eef2ff, #e2e9ff);
  box-shadow: 0 12px 34px rgba(27, 77, 209, 0.22);
}
#builder.surprised { opacity: 0.45; }
.ship-status {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-dim);
  margin-bottom: 12px;
}
#ship-options-list { display: grid; gap: 12px; }

/* ---------- Contact page ---------- */
.contact-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 150px 6vw 10vh;
}
.contact-hero h1 {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: clamp(3rem, 7vw, 6rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 6px;
}
.contact-hero .lede { max-width: 52ch; }
.contact-cards {
  margin-top: 7vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 24px;
}
.contact-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(135deg, #ffffff, #f3ebda);
  border: 1px solid var(--chip);
  border-radius: 22px;
  padding: 38px 34px 36px;
  min-height: 250px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.contact-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 22px 60px rgba(27, 77, 209, 0.14);
}
.contact-icon { font-size: 1.9rem; display: block; }
.contact-card h3 {
  font-family: "Clash Display", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.contact-value {
  font-family: "Fraunces", serif;
  font-weight: 800;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: break-word;
}
.contact-note { margin-top: 10px; color: var(--ink-dim); font-size: 0.95rem; line-height: 1.65; }
.contact-cta {
  margin-top: 10vh;
  text-align: center;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(27, 77, 209, 0.08), transparent 62%),
    var(--bg-2);
  border: 1px solid var(--chip);
  border-radius: 26px;
  padding: 8vh 6vw;
}
.contact-cta h2 {
  font-family: "Fraunces", serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  letter-spacing: -0.02em;
}
.contact-cta .lede { margin: 14px auto 0; }

/* Shipping note on the order form */
.ship-note-box {
  background: #eef2ff;
  border: 1px solid #c9d6ff;
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--accent-deep);
}

/* ---------- USPS address verification status ---------- */
.address-status { margin-top: 2px; font-size: 0.9rem; font-weight: 700; min-height: 1.2em; }
.address-status.ok { color: #1c7c3c; }
.address-status.bad { color: #a33121; }