/* =========================================================
   SpiceIsh NYC — Design System
   Modern food-startup aesthetic: white canvas, matte black
   packaging, metallic gold accents. Mobile-first.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* Color */
  --color-white:   #FFFFFF;
  --color-cream:   #F7F3EC;
  --color-cream-2: #F1ECE2;
  --color-black:   #131110;
  --color-ink:     #1A1816;
  --color-charcoal:#4A453F;
  --color-line:    #E7E1D6;

  --color-gold:       #C9A35C;
  --color-gold-deep:  #9C7A3C;
  --color-gold-pale:  #F1DDA8;
  --gold-gradient: linear-gradient(180deg, #F1DDA8 0%, #C9A35C 45%, #9C7A3C 100%);
  --gold-gradient-h: linear-gradient(90deg, #9C7A3C 0%, #C9A35C 50%, #9C7A3C 100%);

  /* Type */
  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-label: 'Space Mono', 'Courier New', monospace;

  /* Layout */
  --container: 1220px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: .2s;
  --t-med: .45s;
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-white);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

:focus-visible{
  outline: 2px solid var(--color-gold-deep);
  outline-offset: 3px;
}

/* =========================================================
   Type scale
   ========================================================= */
.display-xl{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.display-lg{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.display-md{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.18;
}
.body-lg{
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  color: var(--color-charcoal);
}
.body-md{
  font-size: 1rem;
  color: var(--color-charcoal);
}

.label-tag{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  padding: .45em 1em;
  border: 1px solid var(--color-gold);
  border-radius: 999px;
}
.label-tag::before{
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background: var(--gold-gradient);
  flex-shrink:0;
}

.eyebrow{
  display:block;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-gold-deep);
  margin-bottom: 1rem;
}

/* =========================================================
   Layout helpers
   ========================================================= */
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section{
  padding: clamp(64px, 10vw, 128px) 0;
}
.section--tight{ padding: clamp(48px, 7vw, 88px) 0; }
.section--cream{ background: var(--color-cream); }
.section--black{ background: var(--color-black); color: var(--color-white); }
.section--black .body-lg{ color: #C9C4BC; }
.section--black .eyebrow{ color: var(--color-gold); }

.section-head{
  max-width: 720px;
  margin-bottom: clamp(32px, 5vw, 64px);
}
.section-head.center{
  margin-left:auto; margin-right:auto; text-align:center;
}

.divider{
  height:1px;
  width:100%;
  background: var(--color-line);
  border:0;
  margin:0;
}
.section--black .divider{ background: #2B2825; }

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  font-family: var(--font-label);
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding: 1.05em 2em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: scale(.97); }

.btn--primary{
  background: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}
.btn--primary:hover{ background:#000; }

.btn--gold{
  background: var(--gold-gradient-h);
  color: var(--color-black);
}
.btn--gold:hover{ filter:brightness(1.06); }

.btn--outline{
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn--outline:hover{ background: var(--color-ink); color: var(--color-white); }

.section--black .btn--outline{
  color: var(--color-white);
  border-color: #4A463F;
}
.section--black .btn--outline:hover{ background: var(--color-white); color: var(--color-black); }

.btn--block{ width:100%; }
.btn--sm{ padding: .8em 1.5em; font-size:.72rem; }
.btn[disabled]{ opacity:.55; cursor:default; transform:none !important; }

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header{
  position: sticky;
  top:0;
  z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  gap: 16px;
}
.nav__logo{ color: var(--color-ink); flex-shrink:0; }
.nav__logo svg{ height: 28px; width:auto; }

.nav__links{
  display:none;
  align-items:center;
  gap: clamp(20px, 3vw, 40px);
  font-family: var(--font-label);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-right:auto;
  margin-left: clamp(24px, 4vw, 64px);
}
.nav__links a{
  position:relative;
  padding-bottom:4px;
  transition: color var(--t-fast) var(--ease);
}
.nav__links a:hover{ color: var(--color-gold-deep); }
.nav__links a.is-active{ color: var(--color-gold-deep); }
.nav__links a.is-active::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-2px;
  height:2px; background: var(--gold-gradient-h);
}

.nav__right{
  display:flex;
  align-items:center;
  margin-left:auto;
}

.nav__cta{ display:none; }

.nav__cart{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border:1px solid var(--color-line);
  border-radius:999px;
  background:transparent;
  margin-left: 10px;
  transition: border-color var(--t-fast) var(--ease);
  flex-shrink:0;
}
.nav__cart:hover{ border-color: var(--color-gold); }
.nav__cart svg{ width:18px; height:18px; color: var(--color-ink); }
.nav__cart-count{
  position:absolute;
  top:-6px; right:-6px;
  min-width:18px; height:18px;
  border-radius:999px;
  background: var(--gold-gradient-h);
  color: var(--color-black);
  font-family: var(--font-label);
  font-weight:700;
  font-size:.65rem;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 4px;
  opacity:0;
  transform: scale(.6);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav__cart-count.is-visible{ opacity:1; transform: scale(1); }

.nav__toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px; height:40px;
  border:1px solid var(--color-line);
  border-radius:999px;
  background:transparent;
  align-items:center;
  margin-left:10px;
  flex-shrink:0;
}
.nav__toggle span{
  display:block; width:18px; height:2px; background: var(--color-ink);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav__toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2){ opacity:0; }
.nav__toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.nav__mobile{
  display:none;
  flex-direction:column;
  padding: 8px var(--gutter) 28px;
  font-family: var(--font-label);
  font-weight:700;
  font-size: .95rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-top:1px solid var(--color-line);
}
.nav__mobile.is-open{ display:flex; }
.nav__mobile a{
  padding: 14px 0;
  border-bottom:1px solid var(--color-line);
}
.nav__mobile a:last-of-type{ border-bottom:0; }
.nav__mobile .btn{ margin-top:18px; }

@media (min-width: 880px){
  .nav__links{ display:flex; }
  .nav__cta{ display:inline-flex; }
  .nav__toggle{ display:none; }
  .nav__mobile{ display:none !important; }
}

/* =========================================================
   Cart drawer
   ========================================================= */
.cart-overlay{
  position:fixed; inset:0;
  background: rgba(19,17,16,.45);
  opacity:0;
  visibility:hidden;
  transition: opacity var(--t-med) var(--ease), visibility var(--t-med) var(--ease);
  z-index: 200;
}
.cart-overlay.is-open{ opacity:1; visibility:visible; }

.cart-drawer{
  position:fixed;
  top:0; right:0;
  height:100%;
  width: min(420px, 100%);
  background: var(--color-white);
  z-index: 201;
  display:flex;
  flex-direction:column;
  transform: translateX(100%);
  transition: transform var(--t-med) var(--ease);
  box-shadow: -20px 0 60px rgba(19,17,16,.18);
}
.cart-drawer.is-open{ transform: translateX(0); }

.cart-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--color-line);
}
.cart-drawer__head h3{ font-family: var(--font-display); font-weight:800; font-size:1.2rem; }
.cart-drawer__close{
  width:36px; height:36px;
  border-radius:999px;
  border:1px solid var(--color-line);
  background:transparent;
  font-size:1.1rem;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.cart-drawer__items{
  flex-grow:1;
  overflow-y:auto;
  padding: 8px var(--gutter);
}
.cart-drawer__empty{
  color: var(--color-charcoal);
  padding: 40px 0;
  text-align:center;
  font-size:.95rem;
}
.cart-item{
  display:flex;
  gap:14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-line);
}
.cart-item__image{
  width:56px; flex-shrink:0;
  background: var(--color-cream);
  border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  padding:6px;
}
.cart-item__body{ flex-grow:1; min-width:0; }
.cart-item__name{ font-family: var(--font-display); font-weight:700; font-size:.95rem; margin-bottom:2px; }
.cart-item__price{ font-family: var(--font-label); font-size:.82rem; color: var(--color-charcoal); }
.cart-item__row{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:10px;
}
.cart-item__qty{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-label);
  font-size:.85rem;
}
.cart-item__qty button{
  width:24px; height:24px;
  border-radius:50%;
  border:1px solid var(--color-line);
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem;
  line-height:1;
}
.cart-item__remove{
  font-family: var(--font-label);
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--color-charcoal);
  text-decoration:underline;
  background:none; border:none; padding:0;
}
.cart-drawer__footer{
  padding: 20px var(--gutter) 28px;
  border-top: 1px solid var(--color-line);
}
.cart-drawer__subtotal{
  display:flex; justify-content:space-between;
  font-family: var(--font-label);
  font-weight:700;
  margin-bottom: 14px;
}
.cart-drawer__note{
  margin-top: 14px;
  font-size:.85rem;
  color: var(--color-charcoal);
  text-align:center;
  line-height:1.5;
}
.cart-drawer__note.is-success{ color: var(--color-gold-deep); }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  padding: clamp(40px, 8vw, 90px) 0 clamp(60px, 9vw, 110px);
  overflow:hidden;
}
.hero__grid{
  display:grid;
  gap: clamp(40px, 6vw, 80px);
  align-items:center;
}
.hero__copy .label-tag{ margin-bottom: 1.75rem; }
.hero__copy h1{ margin-bottom: 1.5rem; }
.hero__copy p{ max-width: 46ch; margin-bottom: 2.25rem; }
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
}

/* Bottle stage / "carousel" */
.bottle-stage{
  position:relative;
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bottle-stage__ring{
  position:absolute;
  inset: 6%;
  border-radius:50%;
  border: 1.5px dashed var(--color-gold);
  opacity:.55;
  animation: spin 50s linear infinite;
}
.bottle-stage__ring::before,
.bottle-stage__ring::after{
  content:'';
  position:absolute;
  width:10px; height:10px;
  border-radius:50%;
  background: var(--gold-gradient);
}
.bottle-stage__ring::before{ top:-5px; left:50%; transform:translateX(-50%); }
.bottle-stage__ring::after{ bottom:-5px; left:50%; transform:translateX(-50%); }

.bottle-stage__glow{
  position:absolute;
  inset: 14%;
  border-radius:50%;
  background: radial-gradient(circle at 50% 45%, rgba(201,163,92,.16), transparent 70%);
}

.bottle-stage__items{
  position:relative;
  width: 58%;
  aspect-ratio: 200/420;
}
.bottle-stage__item{
  position:absolute;
  inset:0;
  opacity:0;
  transform: scale(.92) rotate(-4deg);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  filter: drop-shadow(0 30px 40px rgba(19,17,16,.18));
}
.bottle-stage__item.is-active{
  opacity:1;
  transform: scale(1) rotate(0deg);
}

.bottle-stage__dots{
  position:absolute;
  bottom: -8px;
  left:50%;
  transform: translate(-50%, 100%);
  display:flex;
  gap:10px;
}
.bottle-stage__dots button{
  width:9px; height:9px;
  border-radius:50%;
  border:1px solid var(--color-gold-deep);
  background: transparent;
  padding:0;
  transition: background var(--t-fast) var(--ease);
}
.bottle-stage__dots button.is-active{ background: var(--gold-gradient); }

@keyframes spin{ to{ transform: rotate(360deg); } }

@media (min-width: 920px){
  .hero__grid{ grid-template-columns: 1.05fr 1fr; }
}

/* =========================================================
   Product grid / cards
   ========================================================= */
.product-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
}
.product-card{
  display:flex;
  flex-direction:column;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.4vw, 30px);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.product-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -24px rgba(19,17,16,.25);
  border-color: var(--color-gold);
}
.product-card__image{
  aspect-ratio: 200/300;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 1.5rem;
}
.product-card__image img{ height:100%; width:auto; }
.product-card__name{
  font-family: var(--font-display);
  font-weight:800;
  font-size:1.25rem;
  margin-bottom:.5rem;
}
.product-card__desc{
  color: var(--color-charcoal);
  font-size:.95rem;
  margin-bottom:1.25rem;
  flex-grow:1;
}
.product-card__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:1.1rem;
  border-top:1px solid var(--color-line);
}
.product-card__price{
  font-family: var(--font-label);
  font-weight:700;
  font-size:1.05rem;
}
.product-card__price span{
  display:block;
  font-size:.62rem;
  letter-spacing:.2em;
  color: var(--color-charcoal);
  font-weight:700;
  margin-top:2px;
}

/* =========================================================
   Bundle banner
   ========================================================= */
.bundle{
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 64px);
  display:grid;
  gap: clamp(28px, 4vw, 60px);
  align-items:center;
  position:relative;
  overflow:hidden;
}
.bundle::before{
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 85% 15%, rgba(201,163,92,.18), transparent 55%);
  pointer-events:none;
}
.bundle__copy{ position:relative; }
.bundle__copy .eyebrow{ color: var(--color-gold); }
.bundle__copy p{ color:#C9C4BC; max-width:48ch; margin-bottom:1.75rem; }
.bundle__price{
  display:flex;
  align-items:baseline;
  gap:.6rem;
  margin-bottom:1.75rem;
  font-family: var(--font-display);
}
.bundle__price .amount{ font-weight:800; font-size:clamp(2.2rem,4vw,3rem); }
.bundle__price .was{
  font-family: var(--font-label);
  font-size:.9rem;
  text-decoration: line-through;
  color:#8A857C;
}
.bundle__actions{ display:flex; gap:12px; flex-wrap:wrap; position:relative; }
.bundle__visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bundle__visual img{
  width: 19%;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.45));
  transition: transform var(--t-med) var(--ease);
}
.bundle__visual img:nth-child(2){ transform: translateY(-6%) translateX(6%); margin-left:-4%; }
.bundle__visual img:nth-child(4){ transform: translateY(-6%) translateX(-6%); margin-left:-4%; }
.bundle__visual img:nth-child(3){ width:23%; z-index:2; transform: translateY(-12%); margin-left:-4%; margin-right:-4%; }
.bundle__visual img:nth-child(5){ margin-left:-4%; }

@media (min-width: 860px){
  .bundle{ grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   How it works
   ========================================================= */
.steps{
  display:grid;
  gap: clamp(28px, 3vw, 40px);
}
.step{
  display:flex;
  flex-direction:column;
  gap: 1rem;
}
.step__num{
  font-family: var(--font-label);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.2em;
  color: var(--color-gold-deep);
}
.step__icon{
  width:56px; height:56px;
  border-radius:50%;
  border:1px solid var(--color-gold);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:.5rem;
}
.step__icon svg{ width:24px; height:24px; }
.step h3{
  font-family: var(--font-display);
  font-weight:800;
  font-size:1.35rem;
}
.step p{ color: var(--color-charcoal); }

@media (min-width:780px){
  .steps{ grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   Coming soon
   ========================================================= */
.soon-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(18px, 2.5vw, 28px);
}
.soon-card{
  border:1px dashed var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.4vw, 28px);
  text-align:center;
  transition: border-color var(--t-med) var(--ease);
}
.soon-card:hover{ border-color: var(--color-gold); }
.soon-card__image{
  aspect-ratio: 200/300;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.25rem;
  filter: grayscale(1) opacity(.55);
  transition: filter var(--t-med) var(--ease);
}
.soon-card:hover .soon-card__image{ filter: grayscale(.4) opacity(.85); }
.soon-card__image img{ height:100%; width:auto; }
.soon-card__name{
  font-family: var(--font-display);
  font-weight:800;
  font-size:1.1rem;
  margin-bottom:.35rem;
}
.soon-card__tag{
  display:inline-block;
  font-family: var(--font-label);
  font-size:.68rem;
  letter-spacing:.2em;
  color: var(--color-gold-deep);
  margin-bottom: .9rem;
}

/* =========================================================
   Founder story
   ========================================================= */
.founder{
  display:grid;
  gap: clamp(32px, 5vw, 72px);
  align-items:center;
}
.founder__portrait{
  position:relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #1F1D1A 0%, #0E0D0C 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.founder__portrait img{ width:34%; opacity:.9; }
.founder__portrait::after{
  content:'';
  position:absolute; inset:0;
  border: 1px solid rgba(201,163,92,.35);
  border-radius: var(--radius-lg);
}
.founder__quote{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height:1.5;
  margin: 1.5rem 0;
}
.founder__quote::before{ content:'\201C'; color: var(--color-gold); }
.founder__quote::after{ content:'\201D'; color: var(--color-gold); }
.founder__sign{
  font-family: var(--font-label);
  font-size:.8rem;
  letter-spacing:.2em;
  color: var(--color-gold);
}

@media (min-width: 880px){
  .founder{ grid-template-columns: .85fr 1.15fr; }
}

/* =========================================================
   Email signup
   ========================================================= */
.signup{
  text-align:center;
  max-width: 640px;
  margin: 0 auto;
}
.signup__form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top: 2rem;
}
.signup__form input{
  width:100%;
  padding: 1.1em 1.4em;
  border-radius:999px;
  border:1px solid var(--color-line);
  background: var(--color-white);
  font-size:1rem;
}
.signup__form input:focus{ border-color: var(--color-gold); }
.signup__note{
  font-family: var(--font-label);
  font-size:.7rem;
  letter-spacing:.15em;
  color: var(--color-charcoal);
  margin-top:1rem;
}
.signup__success{
  display:none;
  margin-top:1.25rem;
  font-family: var(--font-label);
  font-size:.85rem;
  letter-spacing:.08em;
  color: var(--color-gold-deep);
}
.signup__success.is-visible{ display:block; }

@media (min-width: 600px){
  .signup__form{ flex-direction:row; }
  .signup__form .btn{ flex-shrink:0; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background: var(--color-black);
  color: var(--color-white);
  padding: clamp(48px, 6vw, 80px) 0 28px;
}
.footer__grid{
  display:grid;
  gap: 40px;
  margin-bottom: 48px;
}
.footer__brand svg{ height:30px; width:auto; color: var(--color-white); margin-bottom:1rem; }
.footer__brand p{ color:#9C978F; max-width:32ch; font-size:.95rem; }
.footer__col h4{
  font-family: var(--font-label);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--color-gold);
  margin-bottom:1.1rem;
}
.footer__col ul{ display:flex; flex-direction:column; gap:.7rem; }
.footer__col a{ color:#C9C4BC; font-size:.95rem; transition: color var(--t-fast) var(--ease); }
.footer__col a:hover{ color: var(--color-gold); }
.footer__bottom{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  padding-top: 28px;
  border-top: 1px solid #2B2825;
  font-family: var(--font-label);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#7A766E;
}

@media (min-width: 720px){
  .footer__grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* =========================================================
   Page hero (non-home pages)
   ========================================================= */
.page-hero{
  padding: clamp(56px, 9vw, 110px) 0 clamp(40px, 6vw, 64px);
  text-align:center;
}
.page-hero p{ max-width:56ch; margin: 1.25rem auto 0; }

/* =========================================================
   Generic content blocks (About / Recipes / Contact)
   ========================================================= */
.split{
  display:grid;
  gap: clamp(32px, 5vw, 72px);
  align-items:center;
}
@media (min-width: 880px){
  .split{ grid-template-columns: 1fr 1fr; }
  .split--reverse > *:first-child{ order:2; }
}

.value-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: clamp(20px,2.5vw,32px);
}
.value-card{
  border:1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: clamp(22px,2.5vw,30px);
}
.value-card .step__icon{ margin-bottom: 1.25rem; }
.value-card h3{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; margin-bottom:.5rem; }
.value-card p{ color:var(--color-charcoal); font-size:.95rem; }

/* Recipe cards */
.recipe-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: clamp(20px,2.5vw,32px);
}
.recipe-card{
  border:1px solid var(--color-line);
  border-radius: var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.recipe-card__media{
  aspect-ratio: 4/3;
  background: var(--color-cream);
  display:flex;
  align-items:center;
  justify-content:center;
}
.recipe-card__media img{ height:62%; width:auto; }
.recipe-card__body{ padding: clamp(18px,2vw,26px); display:flex; flex-direction:column; gap:.6rem; flex-grow:1;}
.recipe-card__tag{
  font-family: var(--font-label);
  font-size:.68rem;
  letter-spacing:.2em;
  color: var(--color-gold-deep);
}
.recipe-card__title{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; }
.recipe-card__desc{ color:var(--color-charcoal); font-size:.92rem; flex-grow:1; }
.recipe-card__meta{
  display:flex; gap:14px;
  font-family: var(--font-label);
  font-size:.7rem;
  letter-spacing:.12em;
  color: var(--color-charcoal);
  text-transform:uppercase;
  padding-top:.6rem;
  border-top:1px solid var(--color-line);
}

/* Contact */
.contact-form{ display:flex; flex-direction:column; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-family: var(--font-label);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--color-charcoal);
}
.field input, .field textarea{
  padding: .95em 1.1em;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  background: var(--color-white);
  resize: vertical;
}
.field input:focus, .field textarea:focus{ border-color: var(--color-gold); }

.contact-info{ display:flex; flex-direction:column; gap: 1.75rem; }
.contact-info__item h4{
  font-family: var(--font-label);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--color-gold-deep);
  margin-bottom:.4rem;
}
.contact-info__item p{ color: var(--color-charcoal); }
.contact-success{
  display:none;
  margin-top:1rem;
  font-family: var(--font-label);
  font-size:.85rem;
  letter-spacing:.06em;
  color: var(--color-gold-deep);
}
.contact-success.is-visible{ display:block; }

/* =========================================================
   Misc utilities
   ========================================================= */
.mt-0{ margin-top:0 !important; }
.text-center{ text-align:center; }
.gold-text{ color: var(--color-gold-deep); }
.muted{ color: var(--color-charcoal); }

.fade-up{
  opacity:0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.fade-up.is-visible{ opacity:1; transform: translateY(0); }