/* =========================================================
   GET YOUR OWN! — STANDALONE WEBSITE
   Brand palette from the August 2026 brand system
   ========================================================= */

:root {
  --chocolate: #351B14;
  --chocolate-2: #1d0d09;
  --cream: #FFF0CD;
  --red: #D52132;
  --paper: #FAF7F0;
  --ink: #2a1510;
  --muted: #766a66;
  --line: rgba(53,27,20,.16);
  --display: "Barlow Condensed", Impact, sans-serif;
  --body: "Inter", Arial, sans-serif;
  --shell: min(1180px, calc(100vw - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--chocolate);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: var(--shell); margin-inline: auto; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 12px; top: -100px; z-index: 9999;
  background: var(--cream); color: var(--chocolate);
  padding: 12px 16px; font-weight: 800;
}
.skip-link:focus { top: 12px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(29,13,9,.94);
  color: var(--cream);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,240,205,.12);
}
.header-inner {
  min-height: 88px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px;
}
.brand {
  display: inline-flex; flex-direction: column; line-height: .78;
  width: 142px; flex: 0 0 auto;
  font-family: var(--display);
}
.brand-small {
  font: 800 12px/1 var(--body);
  letter-spacing: .08em;
  margin: 0 0 3px 11px;
}
.brand-own {
  font-size: 49px; font-weight: 900; font-style: italic;
  letter-spacing: -.035em;
}
.brand-own span { color: var(--red); }
.brand-sub {
  font: 800 9px/1 var(--body);
  letter-spacing: .12em;
  margin: 5px 0 0 10px;
}
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a {
  font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  opacity: .86; transition: opacity .2s ease, color .2s ease;
}
.main-nav a:hover, .main-nav a:focus-visible { opacity: 1; color: #fff; }
.nav-cta {
  padding: 13px 18px;
  background: var(--red);
  color: #fff;
  opacity: 1 !important;
}
.menu-button {
  display: none; width: 44px; height: 44px; border: 1px solid rgba(255,240,205,.22);
  background: transparent; padding: 10px;
}
.menu-button span:not(.sr-only) { display:block; height:2px; background:var(--cream); margin:5px 0; }

/* Global typography */
.eyebrow {
  margin: 0 0 16px;
  font-size: 12px; line-height: 1;
  font-weight: 800; letter-spacing: .15em;
}
.eyebrow.red { color: var(--red); }
.eyebrow.cream { color: var(--cream); }
h1,h2,h3,p { margin-top: 0; }
h1,h2 {
  font-family: var(--display);
  font-weight: 900; font-style: italic;
  letter-spacing: -.045em; text-transform: uppercase;
}
h2 { font-size: clamp(55px, 7vw, 96px); line-height: .82; margin-bottom: 28px; }
h2 em, h1 em { color: var(--red); font-style: inherit; }
.section { padding: 118px 0; }
.section-heading { max-width: 730px; margin-bottom: 54px; }
.section-heading > p:last-child {
  max-width: 620px; font-size: 18px; line-height: 1.65; color: var(--muted);
}

/* Hero */
.hero {
  position: relative; overflow: hidden;
  min-height: calc(100svh - 88px);
  display: grid; align-items: center;
  background:
    radial-gradient(circle at 79% 43%, rgba(213,33,50,.15), transparent 32%),
    var(--chocolate-2);
  color: var(--cream);
}
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.22;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                    linear-gradient(90deg,rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 38px 38px;
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.02fr .98fr; align-items: center;
  min-height: calc(100svh - 88px); gap: 50px;
  padding-top: 60px; padding-bottom: 60px;
}
.hero-copy { max-width: 690px; }
.hero h1 {
  font-size: clamp(86px, 10vw, 154px); line-height: .73;
  margin: 0 0 34px;
}
.hero-lede {
  max-width: 585px;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6; color: rgba(255,240,205,.75);
}
.hero-actions { display:flex; flex-wrap:wrap; gap: 12px; margin-top: 30px; }
.button {
  display:inline-flex; align-items:center; justify-content:center;
  min-height: 52px; padding: 0 24px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .045em; font-size: 13px;
  border: 1px solid transparent;
}
.button-primary { background: var(--red); color: #fff; }
.button-primary:hover { background: #f12739; }
.button-ghost { border-color: rgba(255,240,205,.3); color: var(--cream); }
.button-ghost:hover { border-color: var(--cream); }
.hero-points {
  display:flex; flex-wrap:wrap; gap: 12px 26px;
  list-style:none; padding: 0; margin: 34px 0 0;
  font-size: 11px; text-transform:uppercase; letter-spacing:.08em; font-weight:800;
  color: rgba(255,240,205,.58);
}
.hero-points li::before { content:"•"; color:var(--red); margin-right:9px; }

.hero-product {
  position: relative; display:grid; place-items:center; min-height: 640px;
}
.hero-product img {
  position: relative; z-index: 3;
  width: min(340px, 75%);
  filter: drop-shadow(0 40px 28px rgba(0,0,0,.42));
  transform: rotate(2deg);
}
.hero-orbit {
  position:absolute; border:1px solid rgba(255,240,205,.14); border-radius:50%;
}
.hero-orbit-a { width: 500px; height: 500px; }
.hero-orbit-b { width: 390px; height: 390px; border-color: rgba(213,33,50,.35); }
.hero-sticker {
  position:absolute; z-index:4; right: 2%; top: 9%;
  width: 125px; height:125px; border-radius:50%;
  display:grid; place-content:center; text-align:center;
  background: var(--cream); color:var(--chocolate);
  font: 900 italic 25px/.9 var(--display); transform: rotate(10deg);
}
.hero-sticker small {
  display:block; margin-top:8px;
  font:800 8px/1 var(--body); letter-spacing:.08em;
}

/* Ticker */
.ticker {
  overflow:hidden; background:var(--red); color:#fff; padding:14px 0;
  font:900 italic 24px/1 var(--display); letter-spacing:.03em;
}
.ticker-track { width:max-content; display:flex; gap:28px; align-items:center; animation:ticker 28s linear infinite; }
.ticker i { color:var(--cream); font-style:normal; }
@keyframes ticker { to { transform:translateX(-50%); } }

/* Flavours */
.section-light { background: var(--paper); }
.flavour-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.flavour-card {
  background:#fff; border:1px solid var(--line); overflow:hidden;
  position:relative; min-width:0;
}
.flavour-card::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:8px; background:var(--accent);
}
.card-image {
  min-height: 420px; display:grid; place-items:center; padding:35px;
  background:#f4ede4; overflow:hidden;
}
.card-image img {
  width: 205px; max-height: 355px;
  filter:drop-shadow(0 22px 17px rgba(53,27,20,.18));
  transition: transform .35s ease;
}
.flavour-card:hover .card-image img { transform: scale(1.035) rotate(-1deg); }
.card-body { padding: 28px 28px 34px; }
.number { font:800 11px/1 var(--body); color:var(--accent); letter-spacing:.08em; }
.flavour-card h3 {
  margin: 12px 0 9px;
  min-height: 56px;
  font: 900 italic 29px/.95 var(--display); text-transform:uppercase;
}
.flavour-card p {
  font-size:11px; line-height:1.45; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
}
.flavour-button {
  border:0; border-bottom: 1px solid var(--accent);
  background:transparent; padding: 0 0 5px; margin-top:10px;
  color:var(--chocolate); font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
}

/* Split */
.split-section { background: var(--cream); overflow:hidden; }
.split-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap:70px; align-items:center; }
.split-copy > p:not(.eyebrow) { max-width:570px; font-size:18px; line-height:1.65; color:#6c5a53; }
.rules { margin-top:42px; border-top:1px solid rgba(53,27,20,.25); }
.rules div {
  display:grid; grid-template-columns:60px 1fr; align-items:center;
  min-height:72px; border-bottom:1px solid rgba(53,27,20,.25);
}
.rules strong { color:var(--red); font:900 italic 30px/1 var(--display); }
.rules span { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }

.can-stage {
  min-height:650px; position:relative; display:grid; place-items:center;
  background:var(--chocolate); overflow:hidden;
}
.can-stage::before {
  content:""; position:absolute; width:500px; height:500px; border-radius:50%;
  border:1px solid rgba(255,240,205,.15);
}
.can-stage img { position:relative; z-index:2; width:290px; filter:drop-shadow(0 25px 24px rgba(0,0,0,.35)); }
.annotation {
  position:absolute; z-index:4; color:var(--cream);
  font:800 10px/1 var(--body); letter-spacing:.12em;
}
.annotation::after { content:""; display:inline-block; width:90px; height:1px; background:currentColor; vertical-align:middle; margin-left:10px; opacity:.5; }
.annotation-one { left:8%; top:28%; }
.annotation-two { right:6%; top:50%; }
.annotation-two::after { display:none; }
.annotation-two::before { content:""; display:inline-block; width:90px; height:1px; background:currentColor; vertical-align:middle; margin-right:10px; opacity:.5; }
.annotation-three { left:6%; bottom:28%; }

/* Red steps */
.section-red { background:var(--red); color:#fff; }
.section-red h2 { color:#fff; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.3); border-left:1px solid rgba(255,255,255,.3); }
.step { min-height:280px; padding:30px; border-right:1px solid rgba(255,255,255,.3); border-bottom:1px solid rgba(255,255,255,.3); }
.step > span { color:var(--cream); font:900 italic 54px/1 var(--display); }
.step h3 { font:900 italic 38px/1 var(--display); text-transform:uppercase; margin:70px 0 12px; }
.step p { font-size:13px; line-height:1.6; color:rgba(255,255,255,.75); }

/* About */
.about-section { background:var(--chocolate-2); color:var(--cream); overflow:hidden; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:85px; }
.about-big { display:flex; flex-direction:column; font-family:var(--display); line-height:.72; transform:rotate(-4deg); }
.about-big > span { font:800 24px/1 var(--body); letter-spacing:.07em; margin-left:35px; margin-bottom:17px; }
.about-big strong { font-size:clamp(130px,19vw,255px); font-style:italic; letter-spacing:-.06em; }
.about-big strong span { color:var(--red); }
.about-copy p:not(.eyebrow) { font-size:17px; line-height:1.7; color:rgba(255,240,205,.72); }

/* CTA */
.cta-section { background:var(--paper); padding:120px 0; text-align:center; }
.cta-inner { max-width:900px; }
.cta-section h2 { font-size:clamp(72px,10vw,135px); }
.cta-section > div > p:not(.eyebrow) { color:var(--muted); font-size:16px; }
.signup-form {
  display:grid; grid-template-columns:1fr auto; max-width:650px; margin:34px auto 0;
  border:2px solid var(--chocolate); background:#fff;
}
.signup-form input {
  min-height:60px; border:0; outline:0; padding:0 20px; background:transparent;
  font-weight:800; letter-spacing:.04em;
}
.signup-form button {
  border:0; background:var(--chocolate); color:var(--cream);
  padding:0 26px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
}
.form-note { margin-top:12px !important; font-size:11px !important; }

/* Footer */
.site-footer { background:var(--chocolate); color:var(--cream); padding:70px 0 32px; }
.footer-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:35px; align-items:start;
}
.footer-copy strong { font:900 italic 36px/1 var(--display); }
.footer-copy p { color:rgba(255,240,205,.6); margin-top:8px; }
.footer-links { display:flex; justify-content:flex-end; gap:20px; font-size:12px; font-weight:800; text-transform:uppercase; }
.copyright { grid-column:1/-1; border-top:1px solid rgba(255,240,205,.15); padding-top:22px; margin:35px 0 0; font-size:10px; color:rgba(255,240,205,.45); }

/* Reveal */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity:1; transform:none; }

/* Responsive */
@media (max-width: 980px) {
  .main-nav {
    position:absolute; top:88px; left:0; right:0; background:var(--chocolate-2);
    display:none; flex-direction:column; align-items:stretch; gap:0; padding:15px 20px 25px;
    border-top:1px solid rgba(255,240,205,.12);
  }
  .main-nav.open { display:flex; }
  .main-nav a { padding:16px 8px; border-bottom:1px solid rgba(255,240,205,.1); }
  .nav-cta { margin-top:10px; text-align:center; border-bottom:0 !important; }
  .menu-button { display:block; }

  .hero-grid { grid-template-columns:1fr; padding-top:80px; }
  .hero-product { min-height:520px; }
  .flavour-grid { grid-template-columns:repeat(2,1fr); }
  .split-grid, .about-grid { grid-template-columns:1fr; }
  .can-stage { min-height:580px; }
  .steps { grid-template-columns:repeat(2,1fr); }
  .about-big { text-align:center; align-items:center; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-links { justify-content:flex-start; }
}

@media (max-width: 620px) {
  :root { --shell: min(100% - 26px, 1180px); }
  .header-inner { min-height:78px; }
  .main-nav { top:78px; }
  .brand { transform:scale(.88); transform-origin:left center; }
  .hero { min-height:auto; }
  .hero-grid { min-height:auto; padding-top:70px; padding-bottom:55px; }
  .hero h1 { font-size:clamp(72px,25vw,115px); }
  .hero-product { min-height:450px; }
  .hero-orbit-a { width:370px; height:370px; }
  .hero-orbit-b { width:290px; height:290px; }
  .hero-sticker { width:100px; height:100px; right:0; top:5%; font-size:21px; }

  .section { padding:85px 0; }
  h2 { font-size:clamp(52px,18vw,76px); }
  .flavour-grid { grid-template-columns:1fr; }
  .card-image { min-height:390px; }
  .split-grid { gap:35px; }
  .can-stage { min-height:500px; }
  .steps { grid-template-columns:1fr; }
  .step { min-height:220px; }
  .step h3 { margin-top:35px; }
  .about-big strong { font-size:40vw; }
  .cta-section { padding:90px 0; }
  .signup-form { grid-template-columns:1fr; border:0; gap:8px; background:transparent; }
  .signup-form input { border:2px solid var(--chocolate); background:#fff; }
  .signup-form button { min-height:58px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-links { flex-wrap:wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal { opacity:1; transform:none; }
}