/* SIP landing page v2 — Amrit Palace system: spiced parchment gallery.
   Warm beige canvas, whisper-weight serif at 300, ghost buttons, sharp 0px
   cards, saffron as the sole accent, no shadows/gradients. */

:root {
  /* Colors — Douze-derived palette */
  --color-parchment: #f6f2e9;   /* cream canvas (Douze secondary background) */
  --color-linen: #ffffff;       /* white band / elevated surface */
  --color-warm-stone: #e2dbc9;  /* hairline on cream */
  --color-walnut: #8a7a6d;      /* captions */
  --color-espresso: #6b5c52;    /* secondary body text */
  --color-onyx-warm: #301816;   /* primary text + dark surfaces (Douze heading color) */
  --color-midnight-roast: #301816; /* hero / quote / footer dark */
  --color-saffron-glow: #f4a765;   /* apricot accent */
  --color-chili: #f26554;          /* blood-orange — sun disc */
  --color-sand: #cfc5b2;           /* secondary text on dark */

  /* Typography */
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-caption: 13px;
  --leading-caption: 1.3;
  --tracking-caption: -0.143px;
  --text-body: 15px;
  --leading-body: 1.4;
  --tracking-body: -0.15px;
  --text-body-lg: 26px;
  --leading-body-lg: 1.2;
  --text-subheading: 42px;
  --leading-subheading: 1;
  --tracking-subheading: -1.68px;
  --text-heading-sm: 50px;
  --leading-heading-sm: 0.9;
  --tracking-heading-sm: -1.5px;
  --text-heading: 65px;
  --leading-heading: 0.85;
  --tracking-heading: -2.6px;
  --text-heading-lg: 69px;
  --leading-heading-lg: 0.9;
  --tracking-heading-lg: -2.76px;
  --text-display: 115px;
  --leading-display: 0.8;
  --tracking-display: -4.6px;

  --font-weight-light: 300;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-17: 17px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-42: 42px;
  --spacing-92: 92px;
  --spacing-206: 206px;

  /* Layout */
  --page-max-width: 1400px;
  --card-padding: 28px;

  /* Radius */
  --radius-sm: 3px;
  --radius-cards: 0px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-onyx-warm);
  background: var(--color-parchment);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .section-title, .product-name, .benefit h3, .footer-brand, .can-brand {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-light);
  text-transform: uppercase;
}

.wrap {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 32px;
}

a { color: inherit; }

/* ── announcement ── */
.announce {
  background: var(--color-parchment);
  border-bottom: 1px solid var(--color-warm-stone);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-walnut);
  text-align: center;
  padding: 12px 24px 6px;
}

/* ── header (floats over dark hero) ── */
.site-header {
  border-bottom: 1px solid rgba(246, 242, 233, 0.25);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 80px;
}

.brand {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--color-parchment);
  text-decoration: none;
}

.nav { display: flex; gap: 28px; margin-left: auto; }

.nav a {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.14px;
  text-transform: uppercase;
  color: var(--color-parchment);
  text-decoration: none;
}

.nav a:hover { color: var(--color-saffron-glow); }

.lang { display: flex; }

.lang-btn {
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  padding: 8px 12px;
  border: 1px solid var(--color-warm-stone);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-parchment);
  cursor: pointer;
}

.lang-btn + .lang-btn { border-left: 0; }

.lang-btn.is-active {
  background: var(--color-saffron-glow);
  border-color: var(--color-saffron-glow);
  color: var(--color-onyx-warm);
}

/* ── dark hero ── */
.hero {
  background: var(--color-midnight-roast);
  color: var(--color-parchment);
  padding-bottom: 120px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
  padding-top: 64px;
}

.meta {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-sand);
  margin: 0 0 16px;
}

.wordmark {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-medium);
  font-size: clamp(72px, 15vw, 199px);
  line-height: 0.8;
  letter-spacing: -0.016em;
  text-transform: uppercase;
  color: var(--color-parchment);
  margin: 0 0 40px;
}

.hero h1,
.hero-h1 {
  font-size: clamp(40px, 6.5vw, 69px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--color-parchment);
  margin: 0 0 24px;
  max-width: 16em;
}

.sub {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-sand);
  max-width: 40em;
  margin: 0 0 48px;
}

.hero-accent {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-light);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-parchment);
  margin: 0 0 32px;
}

.price {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  font-size: 28px;
  letter-spacing: -0.28px;
  color: var(--color-parchment);
  margin: 0 0 4px;
}

.pack {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caption);
  color: var(--color-sand);
  margin: 0 0 48px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* ghost outlined button (dark surface) */
.btn {
  display: inline-block;
  font: inherit;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: -0.14px;
  color: var(--color-parchment);
  background: transparent;
  border: 1px solid var(--color-parchment);
  border-radius: var(--radius-sm);
  padding: 16px 26px;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover { background: var(--color-parchment); color: var(--color-midnight-roast); }

.ghost {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: -0.14px;
  color: var(--color-parchment);
  text-decoration: none;
}

.ghost:hover { text-decoration: underline; }

/* can — flat, parchment tones */
.hero-inner {
  position: relative;
}

.hero-slider {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 42.5%;
  display: flex;
  justify-content: center;
}

.hero-slides {
  position: relative;
  width: 253px;
  height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.45s var(--ease, ease);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* slider controls */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: var(--color-parchment);
  background: transparent;
  border: 1px solid rgba(246, 242, 233, 0.35);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.slider-btn:hover {
  background: var(--color-parchment);
  color: var(--color-midnight-roast);
  border-color: var(--color-parchment);
}

.slider-prev { left: -8px; }
.slider-next { right: -8px; }

/* soft golden-hour anchor behind the can: one warm radial, not a texture */
.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 167, 101, 0.38), rgba(244, 167, 101, 0.12) 45%, transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}

.can {
  position: relative;
  z-index: 1;
  width: 120px;
  height: 232px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-warm-stone);
  background: var(--can-fill, var(--color-parchment));
  color: var(--can-text, var(--color-onyx-warm));
}

.tone-parchment { --can-fill: var(--color-parchment); --can-text: var(--color-onyx-warm); }
.tone-bone   { --can-fill: #ffffff;                   --can-text: var(--color-onyx-warm); }
.tone-stone  { --can-fill: #c9bfae;                   --can-text: var(--color-onyx-warm); }
.tone-cocoa  { --can-fill: var(--color-onyx-warm);    --can-text: var(--color-parchment); }

.can-lid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  background: var(--color-onyx-warm);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.tone-bone .can-lid { background: var(--color-espresso); }

.can-body {
  position: absolute;
  inset: 30px 18px 18px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.can-brand {
  font-size: 20px;
  letter-spacing: 0.1em;
}

.can-flavour {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.85;
}

/* product renders (transparent AI cutouts) */
.hero-can {
  position: relative;
  z-index: 1;
  width: 253px;
  height: 560px;
  object-fit: contain;
}

.product-can {
  width: 180px;
  height: 400px;
  object-fit: contain;
}

/* ── clean-label marquee ── */
.badges {
  background: var(--color-parchment);
  border-top: 1px solid var(--color-warm-stone);
  border-bottom: 1px solid var(--color-warm-stone);
  padding: 14px 0;
  overflow: hidden;
}

/* ── vision statement band (v2.5) ── */
.vision {
  background: var(--color-parchment);
  padding: 96px 0;
}

.vision-inner {
  max-width: 760px;
  text-align: center;
}

.vision-text {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-light);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--color-onyx-warm);
  margin: 0;
}

.vision-text em { font-style: italic; }

.marquee { overflow: hidden; }

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 27s linear infinite;
}

.badge-item {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-walnut);
  white-space: nowrap;
  margin-right: 24px;
}

.badge-sep { color: var(--color-saffron-glow); margin-right: 24px; }

@keyframes marquee {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* ── quote band ── */
.quote {
  background: var(--color-midnight-roast);
  color: var(--color-parchment);
  padding: 140px 0;
}

.quote-inner { text-align: center; }

.quote-main {
  font-size: clamp(56px, 9vw, 115px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-parchment);
  margin: 0 0 24px;
}

.quote-accent {
  font-size: clamp(24px, 3.5vw, 42px);
  letter-spacing: -0.03em;
  color: var(--color-sand);
  margin: 0;
}

/* ── sections ── */
section { padding: 120px 0 160px; }

.section-title {
  font-size: clamp(42px, 6vw, 69px);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  color: var(--color-onyx-warm);
  margin: 0 0 24px;
  text-align: left;
}

.section-title em,
.hero-accent, .quote-accent {
  font-style: italic;
}

.section-lede {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-espresso);
  max-width: 52ch;
  margin: 0 0 64px;
  text-align: left;
}

/* benefits — flat editorial cards */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.benefit {
  border-top: 1px solid var(--color-warm-stone);
  padding-top: var(--spacing-24);
}

.benefit .num {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-walnut);
  margin-bottom: 48px;
}

.benefit h3 {
  font-size: 26px;
  line-height: var(--leading-heading-sm);
  letter-spacing: -1.04px;
  color: var(--color-onyx-warm);
  margin: 0 0 12px;
}

.benefit p {
  font-size: var(--text-body);
  color: var(--color-espresso);
  margin: 0;
  max-width: 28em;
}

/* flavours — product cards on linen band */
.flavours { background: var(--color-linen); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.product {
  background: var(--color-parchment);
  border: 1px solid var(--color-warm-stone);
  border-radius: var(--radius-cards);
}

.product-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 12px;
  border-bottom: 1px solid var(--color-warm-stone);
}

.product-panel {
  padding: var(--card-padding);
}

.product-name {
  font-size: 26px;
  line-height: var(--leading-heading-sm);
  letter-spacing: -1.04px;
  color: var(--color-onyx-warm);
  margin: 0 0 12px;
}

.product-desc {
  font-size: var(--text-body);
  color: var(--color-espresso);
  margin: 0 0 16px;
}

.product-kcal {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-walnut);
  margin: 0;
}

/* signup */
.signup-inner { max-width: 720px; }

.signup .price {
  color: var(--color-onyx-warm);
  margin-top: 28px;
}

form {
  background: var(--color-linen);
  border: 1px solid var(--color-warm-stone);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  text-align: left;
}

.field-label {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-walnut);
  margin: 12px 0 8px;
}

.field-row { display: flex; gap: 12px; }

input[type="email"], select {
  font: inherit;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  padding: 14px 16px;
  border: 1px solid var(--color-onyx-warm);
  border-radius: var(--radius-sm);
  background: var(--color-linen);
  color: var(--color-onyx-warm);
}

input[type="email"] { flex: 1; }
input[type="email"]::placeholder { color: var(--color-walnut); }

select { width: 100%; }

/* ghost button on light canvas */
form .btn {
  color: var(--color-onyx-warm);
  border-color: var(--color-onyx-warm);
}

form .btn:hover { background: var(--color-onyx-warm); color: var(--color-parchment); }

.form-status { margin: 16px 0 0; font-size: var(--text-body); font-weight: var(--font-weight-medium); }

.form-status.ok { color: var(--color-saffron-glow); }
.form-status.err { color: var(--color-onyx-warm); }

/* ── hero waitlist form (v2.5: form lives in the hero, dark glass) ── */
.hero-join {
  max-width: 520px;
}

.hero-join .price { margin-bottom: 0; }
.hero-join .pack { margin: 0 0 24px; }

/* 30% signup incentive (v2.5) */
.incentive {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-parchment);
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid rgba(244, 167, 101, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(244, 167, 101, 0.08);
}

.incentive strong {
  color: var(--color-saffron-glow);
  font-weight: var(--font-weight-bold);
}

.hero-form {
  background: rgba(246, 242, 233, 0.05);
  border: 1px solid rgba(246, 242, 233, 0.25);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  text-align: left;
}

.hero-form .field-label { color: var(--color-sand); }

.hero-form input[type="email"],
.hero-form select {
  border-color: rgba(246, 242, 233, 0.4);
  background: rgba(246, 242, 233, 0.06);
  color: var(--color-parchment);
}

.hero-form input[type="email"]::placeholder { color: var(--color-sand); }

.hero-form select option { color: var(--color-onyx-warm); }

/* ghost button on dark surface */
.hero-form form .btn,
.hero-form .btn {
  color: var(--color-parchment);
  border-color: var(--color-parchment);
}

.hero-form .btn:hover { background: var(--color-parchment); color: var(--color-midnight-roast); }

.hero-form .form-status.err { color: #f0a48f; }

/* ── sticky mobile CTA (v2.5) ── */
.sticky-cta {
  display: none;
}

/* ── cookie consent banner (ePrivacy) ── */
.cookie-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  z-index: 120;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  width: calc(100% - 32px);
  padding: 18px 20px;
  background: var(--color-midnight-roast);
  color: var(--color-parchment);
  border: 1px solid var(--color-warm-stone);
  border-radius: var(--radius-cards);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
}

.cookie-banner a {
  color: var(--color-saffron-glow);
  text-decoration: underline;
}

.cookie-text {
  flex: 1 1 400px;
  margin: 0;
}

.cookie-actions { flex: 0 0 auto; }

.cookie-actions .btn {
  color: var(--color-parchment);
  border-color: var(--color-parchment);
  background: transparent;
}

.cookie-actions .btn:hover {
  background: var(--color-parchment);
  color: var(--color-midnight-roast);
}

/* ── consent checkbox ── */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-sand);
  cursor: pointer;
}

.hero-form .consent {
  color: var(--color-sand);
}

.consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-saffron-glow);
  cursor: pointer;
}

.consent a {
  color: var(--color-saffron-glow);
  text-decoration: underline;
}

/* footer — dark */
.site-footer {
  background: var(--color-midnight-roast);
  color: var(--color-sand);
  padding: 120px 0 48px;
  font-size: var(--text-body);
}

.footer-brand {
  font-size: var(--text-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--color-parchment);
  margin: 0 0 16px;
}

.footer-note { color: var(--color-walnut); }

.footer-legal {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-sand);
  margin: 12px 0 0;
}

.footer-legal a {
  color: var(--color-saffron-glow);
  text-decoration: underline;
}

/* ── privacy page (v2.5) ── */
.privacy { background: var(--color-parchment); }

.lang-switch {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-sand);
  margin: 0 0 32px;
}

.lang-switch a {
  color: var(--color-saffron-glow);
  text-decoration: underline;
}

.privacy-inner {
  max-width: 760px;
  margin: 0 auto;
}

.privacy-h2 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-light);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -1.28px;
  text-transform: uppercase;
  color: var(--color-onyx-warm);
  margin: 0 0 16px;
}

.privacy p {
  color: var(--color-espresso);
  margin: 0 0 28px;
  max-width: 65ch;
}

.privacy a { color: var(--color-saffron-glow); text-decoration: underline; }

.privacy code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--color-linen);
  border: 1px solid var(--color-warm-stone);
  border-radius: 3px;
  padding: 1px 5px;
}

.privacy .privacy-inner h2:first-of-type { margin-top: 0; }

/* ── responsive ── */
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  /* mobile: can flows between the subline and the price.
     Reset ALL desktop positioning props so nothing leaks and overlaps. */
  .hero-slider {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: auto;
    margin: 24px 0 8px;
  }
  .hero-slides { width: 200px; height: 440px; }
  .product-grid, .benefit-grid { grid-template-columns: 1fr; }
  .field-row { flex-direction: column; }
  .nav { gap: 16px; }
  section { padding: 96px 0 120px; }
  .hero { padding-bottom: 96px; }
  .hero-can { width: 200px; height: 440px; }
  .product-can { width: 160px; height: 355px; }
  .hero-glow { width: 300px; height: 300px; }
  .hero-join { max-width: 100%; }
  .hero-form { padding: 20px; }
  .sticky-cta {
    display: block;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 100;
    text-align: center;
    font-family: var(--font-sans);
    font-size: var(--text-caption);
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.14px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-parchment);
    background: var(--color-midnight-roast);
    border: 1px solid var(--color-parchment);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  }
  .sticky-cta:hover { background: var(--color-parchment); color: var(--color-midnight-roast); }
  .site-footer { padding-bottom: 120px; }
  /* keep the cookie banner above the sticky CTA on small screens */
  .cookie-banner { bottom: 88px; }
}

@media (max-width: 560px) {
  .header-inner { flex-wrap: wrap; gap: 8px; }
  .nav { order: 3; width: 100%; justify-content: space-between; margin-left: 0; }
  .wordmark { font-size: 88px; }
  .hero-can { width: 160px; height: 355px; }
  .hero-slides { width: 160px; height: 355px; }
  .product-can { width: 140px; height: 310px; }
  .hero-glow { width: 240px; height: 240px; }
}