/* ==========================================================================
   TUNDRA — design tokens
   Cold Luxury palette: off-black base, brushed steel neutrals, one cobalt
   accent. Dark theme is a deliberate, permanent art direction for this
   brand (the whole concept is condensation on a can in near-dark), not an
   omitted light mode.
   ========================================================================== */

@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@800,700,500&f[]=general-sans@600,500,400&display=swap');

:root {
  --bg: #0a0d11;
  --bg-raised: #10151b;
  --surface: #151b22;
  --surface-2: #1b232c;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  --text: #f2f5f7;
  --text-dim: #a7b0ba;
  --text-faint: #6b7480;

  --accent: #3567d6;        /* text/button-safe cobalt, WCAG AA on white/black */
  --accent-bright: #5b8bf0; /* decorative only: glows, gradients, highlights */
  --accent-ice: #8fd3ff;    /* decorative only: condensation/rim-light tint */

  --radius-card: 20px;
  --radius-btn: 999px;
  --radius-input: 10px;

  --font-display: 'Cabinet Grotesk', 'General Sans', system-ui, sans-serif;
  --font-body: 'General Sans', system-ui, -apple-system, sans-serif;

  --container: 1280px;
  --nav-h: 76px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, canvas, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 768px) {
  .container { padding: 0 40px; }
}

/* Fixed cinematic grain — pointer-events-none, never on a scrolling element */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Typography
   ========================================================================== */

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.08;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--text-dim);
  max-width: 46ch;
  line-height: 1.5;
}

.body-dim { color: var(--text-dim); line-height: 1.7; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, border-color 0.2s ease;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-bright); }

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent-bright); background: rgba(91, 139, 240, 0.08); }

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgba(10, 13, 17, 0.85), rgba(10, 13, 17, 0));
  backdrop-filter: blur(6px);
}
.nav.is-solid { background: rgba(10, 13, 17, 0.88); border-bottom: 1px solid var(--line); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.02em;
}
.brand-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.nav-links {
  display: none;
  align-items: center;
  gap: 34px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-dim);
}
.nav-links a { transition: color 0.2s ease; }
.nav-links a:hover, .nav-links a.is-active { color: var(--text); }

@media (min-width: 1024px) {
  .nav-links { display: flex; }
}

.nav-cta { display: none; }
@media (min-width: 1024px) { .nav-cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  font-size: 20px;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 49;
  background: var(--bg);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mobile-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-menu a {
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
}
@media (min-width: 1024px) { .mobile-menu { display: none; } }

/* ==========================================================================
   Hero (home)
   ========================================================================== */

/* The can is pinned (sticky) for the full height of .hero-pin: 100dvh
   visible + 100dvh of rotation scroll-through + 80dvh reserved for the
   can-only exit zoom (see can-scene.js). Deliberately dvh, matching
   .hero below and matching window.innerHeight (what can-scene.js's
   scroll-position math actually reads) - static vh and dvh genuinely
   diverge on Safari because of its dynamically show/hiding address bar,
   which threw off the rotate/exit thresholds enough to make the hero
   render in what looked like a mid-transition state even at the top of
   the page. Kept sticky through the exit range deliberately — that's
   the only way to scrub a genuine fill-the-screen zoom to scroll
   position, and it's also what makes "can't reach the next section
   until the zoom finishes" automatic: the pin (and the scroll distance
   needed to get past it) doesn't release until the zoom's own progress
   hits 1, regardless of scroll speed. Rotation and exit are both driven
   purely by reading scroll position each animation frame — no scroll/
   wheel/pointer listener of any kind, so nothing here can ever capture
   input away from normal page scrolling. */
.hero-pin {
  position: relative;
  height: 280dvh;
}

.hero {
  /* .hero is a <section>, and the generic `section { padding: 96px 0; }`
     rule further down was silently applying here too (no property
     conflict since this rule never mentioned padding, so nothing
     overrode it) - which quietly ate 192px of the sticky element's
     786px height, leaving .hero-inner's height:100% only 594px to
     resolve against instead of the full viewport. Explicit 0 here. */
  padding: 0;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  .hero-pin { height: auto; }
  .hero { position: relative; height: auto; min-height: 100dvh; }
}

/* Text anchored near the top for the whole pin; the can occupies the
   remaining space below it and is centered within that space — a
   vertical stack, not the two of them centered together as one block. */
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding-top: calc(var(--nav-h) + 32px);
}

.hero-copy {
  flex: 0 0 auto;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.hero-copy .eyebrow { margin-bottom: 18px; }
.hero-copy h1 { margin-bottom: 20px; }
.hero-copy .lede { margin: 0 auto 34px; }

/* Text is always the first flex child (DOM order + flex-direction:column),
   so it stays above the can at every aspect ratio — that ordering never
   changes. The risk on a short/landscape viewport (phone landscape,
   ~375-430px tall) is different: h1's clamp() sizes are driven by vw, not
   vh, so hero-copy's own height barely shrinks even when the viewport
   does, which could squeeze .hero-stage-wrap toward zero. This tightens
   the text block specifically when height is scarce, so the can always
   keeps real room below it rather than being crushed. */
@media (max-height: 700px) {
  .hero-copy h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); margin-bottom: 12px; }
  .hero-copy .lede { font-size: 0.95rem; margin-bottom: 16px; }
  .hero-copy .eyebrow { margin-bottom: 10px; }
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Plain HTML, layered over the canvas via z-index/stacking, never
   rendered inside the Three.js scene — its position/opacity are pure
   CSS, independent of the can's geometry, camera, or rotation. Floor on
   min-height so the can keeps real, visible space even on a short
   viewport rather than being squeezed toward zero by the text above it. */
.hero-stage-wrap {
  flex: 1 1 auto;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-stage {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 720px;
  will-change: width, height, top, left, opacity;
  /* Passive visual only — must never intercept wheel/touch input, which
     would fight the scroll-driven rotation and block page scroll under
     the cursor. */
  pointer-events: none;
}

.hero-stage canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.hero-scroll-note {
  position: absolute;
  bottom: 28px;
  left: 24px;
  z-index: 2;
  font-size: 13px;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 768px) { .hero-scroll-note { left: 40px; } }

/* ==========================================================================
   Interior page header (non-hero pages)
   ========================================================================== */

.page-header {
  padding: calc(var(--nav-h) + 72px) 0 56px;
  border-bottom: 1px solid var(--line);
}
.page-header .eyebrow { margin-bottom: 16px; }
.page-header h1 { margin-bottom: 18px; }
.page-header .lede { max-width: 60ch; }

/* ==========================================================================
   Sections & layout patterns
   ========================================================================== */

section { padding: 96px 0; }
@media (max-width: 767px) { section { padding: 64px 0; } }

.section-head { max-width: 620px; margin-bottom: 56px; }
.section-head h2 { margin-bottom: 16px; }

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: 64px; }
  .split.split-reverse > *:first-child { order: 2; }
}

.split-media {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface);
}
.split-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.55) contrast(1.08) brightness(0.92); }
.split-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(53, 103, 214, 0.5), rgba(10, 13, 17, 0.35));
  mix-blend-mode: color;
  pointer-events: none;
}

/* Card grid */
.grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) { .grid-cards.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .grid-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 30px;
}
.card .icon-badge { margin-bottom: 20px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-dim); font-size: 14.5px; line-height: 1.6; }

.icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(53, 103, 214, 0.14);
  color: var(--accent-bright);
  font-size: 20px;
}

/* Bento (feature) grid — used once, cell count matches content */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; }
  .bento .bento-lg { grid-column: span 2; grid-row: span 2; }
  .bento .bento-sm { grid-column: span 2; grid-row: span 1; }
}
.bento-tile {
  position: relative;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--surface);
}
.bento-tile.tone-accent {
  background: linear-gradient(155deg, #17335f, #0e1a30);
  border-color: rgba(91, 139, 240, 0.3);
}
.bento-tile.tone-photo {
  background-size: cover;
  background-position: center;
  background-blend-mode: color;
}
.bento-tile.tone-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,13,17,0.88), rgba(10,13,17,0.25));
}
.bento-tile.tone-photo > * { position: relative; z-index: 1; }
.bento-tile h3 { margin-bottom: 6px; }
.bento-tile p { color: var(--text-dim); font-size: 14px; }

/* Stat row */
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (min-width: 768px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat-row .stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--text);
}
.stat-row .stat-label { color: var(--text-faint); font-size: 13.5px; margin-top: 6px; }

/* Spec groups (nutrition) — grouped chunks, not a striped table */
.spec-group { margin-bottom: 40px; }
.spec-group:last-child { margin-bottom: 0; }
.spec-group-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.spec-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (min-width: 768px) { .spec-tiles { grid-template-columns: repeat(4, 1fr); } }
.spec-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}
.spec-tile .spec-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
}
.spec-tile .spec-name { color: var(--text-faint); font-size: 12.5px; margin-top: 4px; }

.ingredient-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ingredient-pill {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13.5px;
  color: var(--text-dim);
}

/* Supplier / partner cards */
.supplier-card { display: flex; flex-direction: column; gap: 4px; }
.supplier-card .supplier-region {
  color: var(--text-faint);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Legal accordion */
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 0;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
}
.accordion-trigger .ph { transition: transform 0.25s ease; font-size: 18px; color: var(--text-faint); }
.accordion-item.is-open .accordion-trigger .ph { transform: rotate(45deg); }
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.accordion-panel-inner { padding-bottom: 26px; color: var(--text-dim); line-height: 1.75; max-width: 70ch; }
.accordion-panel-inner p + p { margin-top: 14px; }

/* Trio panel — one card, three internal columns (avoids the generic
   three-identical-cards pattern for genuinely tripartite content) */
.trio-grid {
  display: grid;
  grid-template-columns: 1fr;
}
.trio-grid > div { padding: 32px; }
@media (min-width: 768px) {
  .trio-grid { grid-template-columns: repeat(3, 1fr); }
  .trio-grid > div:not(:first-child) { border-left: 1px solid var(--line); }
}
@media (max-width: 767px) {
  .trio-grid > div:not(:first-child) { border-top: 1px solid var(--line); }
}
.trio-grid .icon-badge { margin-bottom: 16px; }
.trio-grid h3 { margin-bottom: 8px; }
.trio-grid p { color: var(--text-dim); font-size: 14.5px; line-height: 1.6; }

/* Contact / address */
.info-row {
  display: flex;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.info-row .ph { font-size: 20px; color: var(--accent-bright); margin-top: 2px; }
.info-row h3 { margin-bottom: 4px; }
.map-card {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  position: relative;
  background: var(--surface);
}
.map-card svg { width: 100%; height: 100%; }

/* Quote */
.quote-block {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.quote-block p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.4;
  color: var(--text);
}
.quote-block .attribution { margin-top: 20px; color: var(--text-faint); font-size: 14px; }

/* CTA band */
.cta-band {
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, #17335f, #0c1220);
  border: 1px solid rgba(91, 139, 240, 0.25);
  padding: 64px 40px;
  text-align: center;
}
.cta-band h2 { margin-bottom: 14px; }
.cta-band .lede { margin: 0 auto 32px; text-align: center; }
.cta-band .hero-ctas { justify-content: center; }

/* Footer */
footer {
  border-top: 1px solid var(--line);
  padding: 72px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand p { color: var(--text-dim); font-size: 14px; margin-top: 14px; max-width: 32ch; }
.footer-col-title { font-size: 13px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 18px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; font-size: 14.5px; color: var(--text-dim); }
.footer-links a:hover { color: var(--text); }
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--text-dim); font-size: 16px;
}
.footer-social a:hover { color: var(--text); border-color: var(--accent-bright); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 13px;
}

/* Reveal-on-scroll utility */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}