/* ==========================================================================
   THE HOUSE OF AMORATO — design tokens
   Background: warm near-black · Accents: two golds · Rose for CSR section
   Display: Cinzel (crest/eyebrows) + Cormorant Garamond (headlines)
   Body: EB Garamond
   Signature: the open-door arch, used as frame / mask / divider throughout
   ========================================================================== */

:root{
  --ink:        #0A0906;
  --ink-2:      #14110c;
  --panel:      #1b1712;
  --line:       rgba(232, 196, 104, 0.18);
  --cream:      #F4EFE6;
  --cream-dim:  #cfc6b3;
  --gold:       #C9A227;
  --gold-hi:    #E8C468;
  --gold-deep:  #8A6D1F;
  --rose:       #D68FA0;
  --rose-deep:  #9c4f63;
  --wine:       #5c0f1c;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-crest: 'Cinzel', var(--font-display);
  --font-body: 'EB Garamond', Georgia, serif;

  --container: 1180px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.68,0,1);
}

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

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; margin: 0 0 .5em; color: var(--cream); }
p{ margin: 0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: var(--font-body); }
:focus-visible{ outline: 2px solid var(--gold-hi); outline-offset: 3px; }

.eyebrow{
  font-family: var(--font-crest);
  font-size: 12px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .9em;
}
.eyebrow--light{ color: var(--gold-hi); }
.eyebrow--center{ text-align:center; }

.section-title{
  font-size: clamp(28px, 4vw, 44px);
  text-align: left;
  margin-bottom: .4em;
}
.services .section-title,
.wine .section-title,
.merch .section-title,
.gallery .section-title{ text-align:center; }
.section-title--light{ color: var(--cream); text-align:center; }
.section-lede{
  max-width: 620px;
  margin: 0 auto 3em;
  text-align:center;
  color: var(--cream-dim);
  font-size: 19px;
}
.section-lede--light{ color: rgba(244,239,230,0.75); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding: 14px 28px;
  font-family: var(--font-crest);
  font-size: 12.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s;
}
.btn--gold{ background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #1b1200; }
.btn--gold:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(201,162,39,.25); }
.btn--outline{ border-color: var(--gold); color: var(--gold-hi); background: transparent; }
.btn--outline:hover{ background: rgba(201,162,39,.1); transform: translateY(-2px); }
.btn--ghost{ color: var(--cream-dim); border:1px solid rgba(244,239,230,.25); }
.btn--ghost:hover{ color: var(--cream); border-color: var(--cream-dim); }
.btn--small{ padding: 9px 18px; font-size: 11px; }

/* ==========================================================================
   AGE GATE
   ========================================================================== */
.age-gate{
  position: fixed; inset:0; z-index: 200;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 100% at 50% 0%, #1c160c 0%, #0A0906 65%);
  padding: 20px;
}
.age-gate[hidden]{ display:none; }
.age-gate__panel{
  max-width: 420px;
  width:100%;
  text-align:center;
  padding: 44px 32px 36px;
  border: 1px solid var(--line);
  background: var(--panel);
}
.door-crest--sm{ width: 100px; margin: 0 auto 18px; }
.door-crest__img{ width:100%; height:auto; display:block; }
.age-gate__panel h2{ font-size: 26px; }
.age-gate__copy{ color: var(--cream-dim); }
.age-gate__actions{ display:flex; gap: 14px; justify-content:center; margin: 22px 0 16px; flex-wrap: wrap; }
.age-gate__fine{ font-size: 12.5px; color: rgba(244,239,230,.5); line-height:1.5; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px clamp(20px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(10,9,6,.85), transparent);
  backdrop-filter: blur(2px);
}
.nav.is-scrolled{ background: rgba(10,9,6,.92); border-bottom: 1px solid var(--line); }
.nav__mark{ display:flex; align-items:center; gap:10px; }
.nav__mark-crest{ width: 44px; height:auto; }
.nav__mark-text{ font-family: var(--font-crest); font-size: 10.5px; letter-spacing: 2px; line-height:1.35; color: var(--cream-dim); }
.nav__mark-text strong{ color: var(--gold-hi); }
.nav__links{ display:flex; gap: 28px; }
.nav__links a{
  font-family: var(--font-crest); font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--cream-dim); position:relative; padding-bottom:4px;
}
.nav__links a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background: var(--gold-hi); transition: right .3s var(--ease); }
.nav__links a:hover{ color: var(--cream); }
.nav__links a:hover::after{ right:0; }
.nav__cta{ display:inline-flex; }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.nav__burger span{ width:24px; height:1.5px; background: var(--cream); }

/* ==========================================================================
   HERO — door-shaped window onto a rotating banner
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background: var(--ink);
}
.hero__frames{ position:absolute; inset:0; }
.hero__frame{
  position:absolute; inset:0;
  background-size: cover; background-position: center;
  background-color: #241b12; /* placeholder tone until real photography is added */
  opacity:0;
  transform: scale(1);
  transition: opacity 1.6s ease;
  clip-path: path('M 0 0 H 2000 V 2000 H 0 Z');
}
.hero__frame.is-active{
  opacity: 1;
  animation: heroKenBurns 8s ease-out forwards;
}
@keyframes heroKenBurns{
  from{ transform: scale(1); }
  to{ transform: scale(1.08); }
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(10,9,6,0) 0%, rgba(10,9,6,.55) 60%, rgba(10,9,6,.94) 100%),
    linear-gradient(180deg, rgba(10,9,6,.55) 0%, rgba(10,9,6,.25) 35%, rgba(10,9,6,.85) 100%);
}
.hero__logo{
  position:absolute; top: 6.5%; left:50%; transform: translateX(-50%);
  width: clamp(120px, 13vw, 190px); opacity:.98;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.6));
}
.hero__logo::before{
  content:''; position:absolute; inset: -30%;
  background: radial-gradient(circle, rgba(232,196,104,.22) 0%, rgba(232,196,104,0) 70%);
  z-index:-1;
}
.hero__logo-img{
  width:100%; height:auto; display:block; position:relative;
  animation: crestZoom 8s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
}
@keyframes crestZoom{
  from{ transform: scale(1.08); }
  to{ transform: scale(1); }
}
.hero__content{
  position:relative; z-index:2; text-align:center;
  max-width: 720px; padding: 0 20px; margin-top: clamp(170px, 26vh, 280px);
}
.hero__title{
  font-size: clamp(40px, 7vw, 78px);
  line-height: 1.04;
  letter-spacing: .5px;
}
.hero__sub{ color: var(--cream-dim); font-size: 18px; max-width: 540px; margin: 0 auto 1.6em; }
.hero__cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero__dots{ position:absolute; bottom: 70px; left:50%; transform:translateX(-50%); display:flex; gap:9px; z-index:2; }
.hero__dots button{ width:8px; height:8px; border-radius:50%; border:1px solid var(--gold); background:transparent; padding:0; }
.hero__dots button.is-active{ background: var(--gold-hi); }
.hero__caption{
  position:absolute; bottom: 96px; left:50%; transform:translateX(-50%); z-index:2;
  font-family: var(--font-crest); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--cream-dim); margin:0; text-align:center;
}
.hero__scroll{
  position:absolute; bottom: 26px; left:50%; transform:translateX(-50%);
  font-family: var(--font-crest); font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color: var(--cream-dim); display:flex; flex-direction:column; align-items:center; gap:6px; z-index:2;
}
.hero__scroll span{ width:1px; height:26px; background: linear-gradient(var(--gold-hi), transparent); animation: scrolldrop 1.8s infinite; }
@keyframes scrolldrop{ 0%{ opacity:0; transform: translateY(-6px);} 40%{opacity:1;} 100%{ opacity:0; transform: translateY(10px);} }

/* ==========================================================================
   PROMO FEATURE (main promo film, right below hero)
   ========================================================================== */
.promo-feature{
  background: linear-gradient(180deg, var(--ink), var(--ink-2));
  padding: 100px 24px 110px;
  border-bottom: 1px solid var(--line);
}
.promo-feature__inner{ max-width: 920px; margin: 0 auto; text-align:center; }
.promo-feature__player{ cursor:pointer; margin-top: 46px; }
.promo-feature__thumb.video-card__thumb{
  aspect-ratio: 16/9; border: 1px solid var(--gold-deep);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.promo-feature__play.video-card__play{
  width: 84px; height:84px; font-size: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  transition: transform .25s var(--ease);
}
.promo-feature__player:hover .promo-feature__play{ transform: scale(1.08); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials{ max-width: var(--container); margin: 0 auto; padding: 110px 24px 40px; }
.testimonials__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 50px; }
.testimonial-card{
  margin:0; padding: 34px 30px; border: 1px solid var(--line); background: var(--panel);
  position:relative;
}
.testimonial-card::before{
  content:'\201C'; position:absolute; top: 6px; left: 18px;
  font-family: var(--font-display); font-size: 60px; color: var(--gold-deep); opacity:.5; line-height:1;
}
.testimonial-card blockquote{ margin: 20px 0 16px; font-style: italic; color: var(--cream-dim); font-size: 17px; }
.testimonial-card figcaption{ font-family: var(--font-crest); font-size: 11.5px; letter-spacing: 1.5px; color: var(--gold-hi); }
.testimonials__note{ text-align:center; color: rgba(244,239,230,.4); font-size: 12.5px; margin-top: 40px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ background: var(--ink-2); padding: 110px 24px; border-top: 1px solid var(--line); }
.faq__list{ max-width: 760px; margin: 50px auto 0; display:flex; flex-direction:column; gap: 14px; }
.faq__item{ border: 1px solid var(--line); background: var(--ink); padding: 6px 26px; }
.faq__item summary{
  padding: 18px 0; cursor:pointer; font-family: var(--font-display); font-size: 19px; color: var(--cream);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap: 16px;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:'+'; font-family: var(--font-crest); font-size: 20px; color: var(--gold-hi); flex-shrink:0; }
.faq__item[open] summary::after{ content:'\2212'; }
.faq__item p{ color: var(--cream-dim); padding-bottom: 20px; margin:0; }

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.newsletter{ max-width: var(--container); margin: 0 auto; padding: 110px 24px 40px; text-align:center; }
.newsletter__form{
  max-width: 460px; margin: 40px auto 0; display:flex; gap: 12px; flex-wrap:wrap; justify-content:center;
}
.newsletter__form input{
  flex: 1 1 260px; background: var(--panel); border: 1px solid var(--line); color: var(--cream);
  padding: 14px 16px; font-size:16px;
}

/* ==========================================================================
   STORY
   ========================================================================== */
.story{
  max-width: var(--container); margin: 0 auto;
  padding: 130px 24px 100px;
  display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 70px; align-items:center;
}
.story__arch-frame{ position:relative; }
.story__crest{
  position:absolute; top:-40px; left:-30px; width:90px; height:auto; opacity:.9; z-index:2;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
  animation: crestZoom 8s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
}
.story__crest-photo{
  clip-path: path('M20 300 V100 A140 140 0 0 1 300 100 V300 Z');
  aspect-ratio: 320/300; object-fit: cover; width:100%;
  background: linear-gradient(160deg, #2a2013, #14110c);
  border: 1px solid var(--line);
}
.story__text p{ color: var(--cream-dim); }
.story__motto{
  font-family: var(--font-crest); color: var(--gold-hi);
  letter-spacing: 3px; font-size: 15px; margin-top: 1.4em;
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services{ max-width: var(--container); margin: 0 auto; padding: 40px 24px 110px; }
.services__grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.service-card{
  background: var(--ink); padding: 34px 30px; position:relative;
  transition: background .3s;
}
.service-card:hover{ background: var(--panel); }
.service-card__mark{
  font-family: var(--font-crest); color: var(--gold-deep); font-size: 13px; letter-spacing:1px;
}
.service-card h3{ font-size: 22px; margin: .5em 0 .35em; }
.service-card p{ color: var(--cream-dim); font-size: 15.5px; margin:0; }

/* ==========================================================================
   SHOP / WINE
   ========================================================================== */
.wine{ max-width: var(--container); margin: 0 auto; padding: 40px 24px 110px; }
.wine__grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items:center; margin-top: 50px; }
.wine__image img{ border:1px solid var(--line); }
.spec-table{ width:100%; border-collapse: collapse; margin-bottom: 24px; }
.spec-table th, .spec-table td{ text-align:left; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight:400; }
.spec-table th{ color: var(--gold); width: 40%; font-family: var(--font-crest); font-size: 11px; letter-spacing:1.5px; text-transform:uppercase; }
.spec-table td{ color: var(--cream-dim); }
.wine__note{ color: var(--cream-dim); font-style: italic; }
.wine__actions{ display:flex; align-items:center; gap: 16px; flex-wrap:wrap; margin: 20px 0; }
.qty{ display:flex; align-items:center; gap:8px; font-family: var(--font-crest); font-size: 11px; letter-spacing:1.5px; text-transform:uppercase; color: var(--cream-dim); }
.qty input{ width: 60px; background: var(--panel); border: 1px solid var(--line); color: var(--cream); padding: 8px; }
.wine__legal{ font-size: 12.5px; color: rgba(244,239,230,.5); }
.wine__flagship-title{ font-size: 30px; margin-bottom: .5em; }

.collection__grid{
  max-width: var(--container); margin: 70px auto 0;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.product-card__meta{ font-family: var(--font-crest); font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: .5em; }
.product-card__blurb{ color: var(--cream-dim); font-size: 14.5px; margin-bottom: 14px; }
.collection__note{ text-align:center; color: rgba(244,239,230,.4); font-size: 12.5px; margin-top: 40px; max-width: 640px; margin-left:auto; margin-right:auto; }
.collection__note code{ color: var(--gold-hi); font-family: monospace; }

/* ==========================================================================
   PHILOSOPHY
   ========================================================================== */
.philosophy{
  position:relative; overflow:hidden;
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  padding: 120px 24px;
  text-align:center;
}
.philosophy__arch{ position:absolute; top:-40px; left:50%; transform:translateX(-50%); width: 420px; color: var(--gold); opacity:.06; }
.philosophy__arch-svg{ width:100%; height:auto; }
.philosophy__grid{
  position:relative; max-width: var(--container); margin: 60px auto 0;
  display:grid; grid-template-columns: repeat(3,1fr); gap: 50px;
}
.pillar__mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border:1px solid var(--gold); border-radius:50%;
  font-family: var(--font-crest); font-size:20px; color: var(--gold-hi); margin-bottom: 18px;
}
.pillar h3{ font-size: 24px; }
.pillar p{ color: var(--cream-dim); font-size: 15.5px; }

/* ==========================================================================
   MERCH
   ========================================================================== */
.merch{ max-width: var(--container); margin: 0 auto; padding: 40px 24px 60px; }
.merch__grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 50px; }
.product-card{ text-align:center; }
.product-card__image{ border: 1px solid var(--line); margin-bottom: 16px; aspect-ratio: 1/1; overflow:hidden; background: var(--panel); }
.product-card__image img{ width:100%; height:100%; object-fit:cover; }
.product-card h3{ font-size: 19px; margin-bottom:.3em; }
.product-card__price{ color: var(--gold-hi); font-family: var(--font-crest); font-size: 13px; letter-spacing:1px; margin-bottom: 14px; }
.product-card__price span{ color: var(--cream-dim); font-family: var(--font-body); font-style: italic; }

.cart-bar{
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 85;
  max-width: 92vw; width: 480px;
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
  padding: 14px 22px;
  background: var(--panel); border: 1px solid var(--gold-deep);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.cart-bar span{ font-family: var(--font-crest); font-size: 12px; letter-spacing:1px; color: var(--cream-dim); }

/* ==========================================================================
   IMPACT / GIRL CHILD
   ========================================================================== */
.impact{ background: var(--ink-2); padding: 110px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.impact__grid{ max-width: var(--container); margin:0 auto; display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items:center; }
.impact__image img{ border: 1px solid rgba(214,143,160,.35); aspect-ratio: 4/5; object-fit:cover; background: linear-gradient(160deg, #2a1620, #14110c); }
.impact .eyebrow{ color: var(--rose); }
.impact__text p{ color: var(--cream-dim); }

/* ==========================================================================
   VIDEO CHANNEL
   ========================================================================== */
.channel{ background: var(--ink); padding: 120px 24px; }
.channel__grid{
  max-width: var(--container); margin: 0 auto; display:grid;
  grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.video-card{ cursor:pointer; }
.video-card__thumb{ position:relative; aspect-ratio: 16/10; overflow:hidden; border:1px solid var(--line); background: var(--panel); }
.video-card__thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.video-card:hover .video-card__thumb img{ transform: scale(1.06); }
.video-card__play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size: 15px; color: #1b1200;
  background: rgba(232,196,104,.9);
  width: 54px; height:54px; border-radius:50%; margin:auto;
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
}
.video-card h3{ font-size: 19px; margin: 16px 0 .3em; }
.video-card p{ color: var(--cream-dim); font-size: 14.5px; margin:0; }
.channel__note{ text-align:center; color: rgba(244,239,230,.4); font-size: 13px; margin-top: 50px; }

.video-modal{ position:fixed; inset:0; z-index: 300; display:flex; align-items:center; justify-content:center; padding: 24px; }
.video-modal[hidden]{ display:none; }
.video-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.88); }
.video-modal__panel{ position:relative; width:100%; max-width: 900px; }
.video-modal__frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.video-modal__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-modal__close{
  position:absolute; top:-42px; right:0; background:none; border:none; color: var(--cream);
  font-size: 30px; line-height:1;
}

/* ==========================================================================
   CHECKOUT DETAILS MODAL
   ========================================================================== */
.checkout-modal{ position:fixed; inset:0; z-index: 310; display:flex; align-items:center; justify-content:center; padding: 24px; }
.checkout-modal[hidden]{ display:none; }
.checkout-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.88); }
.checkout-modal__panel{
  position:relative; width:100%; max-width: 480px; max-height: 90vh; overflow-y:auto;
  background: var(--panel); border: 1px solid var(--gold-deep); padding: 40px 34px 34px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.checkout-modal__panel h2{ font-size: 26px; margin-bottom: .3em; }
.checkout-modal__sub{ color: var(--cream-dim); font-size: 14.5px; margin-bottom: 1.6em; }
.checkout-modal__close{
  position:absolute; top:14px; right:16px; background:none; border:none; color: var(--cream-dim);
  font-size: 26px; line-height:1;
}
.checkout-form{ display:flex; flex-direction:column; gap: 12px; }
.checkout-form__row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkout-form input{
  background: var(--ink); border: 1px solid var(--line); color: var(--cream);
  padding: 12px 14px; font-size:15px; width:100%;
}
.checkout-form button{ margin-top: 8px; }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery{ max-width: var(--container); margin: 0 auto; padding: 110px 24px 70px; }
.gallery__grid{
  display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; grid-auto-flow: dense; gap: 14px; margin-top: 50px;
}
.gallery__item{ margin:0; overflow:hidden; border:1px solid var(--line); }
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.gallery__item:hover img{ transform: scale(1.07); }
.gallery__item--tall{ grid-row: span 2; }
.gallery__note{ text-align:center; color: var(--cream-dim); margin-top: 40px; }
.gallery__social{ display:flex; justify-content:center; gap: 14px; }
.social-pill{
  border:1px solid var(--line); padding: 8px 20px; font-family: var(--font-crest);
  font-size: 11px; letter-spacing:1.5px; text-transform:uppercase; color: var(--cream-dim);
}
.social-pill:hover{ color: var(--gold-hi); border-color: var(--gold); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ position:relative; overflow:hidden; background: var(--ink-2); padding: 130px 24px 110px; text-align:center; }
.contact__arch{ position:absolute; bottom:-60px; left:50%; transform:translateX(-50%); width: 360px; color: var(--gold); opacity:.06; }
.contact__arch-svg{ width:100%; }
.contact__sub{ max-width: 540px; margin: 0 auto 2.4em; color: var(--cream-dim); }
.contact__form{
  position:relative; max-width: 480px; margin: 0 auto; display:flex; flex-direction:column; gap: 14px;
}
.contact__form input, .contact__form select, .contact__form textarea{
  background: var(--panel); border: 1px solid var(--line); color: var(--cream);
  padding: 14px 16px; font-size:16px;
}
.contact__form button{ margin-top: 8px; }
.form-status{ margin-top: 18px; font-size: 14px; color: var(--gold-hi); min-height: 1.4em; }

/* ==========================================================================
   WHATSAPP FAB
   ========================================================================== */
.whatsapp-btn{
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 58px; height:58px; border-radius:50%;
  background: #25D366; color: #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
  transition: transform .25s var(--ease);
}
.whatsapp-btn:hover{ transform: scale(1.08); }
.whatsapp-btn__icon{ width: 30px; height:30px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background: var(--ink); border-top: 1px solid var(--line); padding: 80px 24px 30px; }
.footer__grid{
  max-width: var(--container); margin:0 auto 50px; display:grid;
  grid-template-columns: 1.3fr repeat(3, 0.9fr); gap: 40px;
}
.footer__brand{ position:relative; }
.footer__crest{ width: 64px; height:auto; margin-bottom: 14px; filter: drop-shadow(0 0 18px rgba(232,196,104,.12)); }
.footer__brand p{ margin:0 0 .5em; }
.footer__motto{ color: var(--cream-dim); font-style: italic; font-size: 14.5px; }
.footer__links h4{ font-family: var(--font-crest); font-size: 12px; letter-spacing:2px; text-transform:uppercase; color: var(--gold); margin-bottom: 16px; }
.footer__links{ display:flex; flex-direction:column; gap: 10px; }
.footer__links a{ color: var(--cream-dim); font-size: 15px; }
.footer__links a:hover{ color: var(--gold-hi); }
.footer__legal-links{
  max-width: var(--container); margin: 0 auto; padding-top: 26px; border-top: 1px solid var(--line);
  text-align:center; font-size: 12.5px;
}
.footer__legal-links a{ color: var(--cream-dim); }
.footer__legal-links a:hover{ color: var(--gold-hi); }
.footer__legal{
  max-width: var(--container); margin: 0 auto; padding-top: 12px;
  color: rgba(244,239,230,.4); font-size: 12.5px; text-align:center;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 980px){
  .story, .wine__grid, .impact__grid{ grid-template-columns: 1fr; gap: 40px; }
  .services__grid{ grid-template-columns: repeat(2,1fr); }
  .philosophy__grid{ grid-template-columns: 1fr; gap: 40px; }
  .merch__grid{ grid-template-columns: repeat(2,1fr); }
  .collection__grid{ grid-template-columns: repeat(2,1fr); }
  .channel__grid{ grid-template-columns: repeat(2,1fr); }
  .testimonials__grid{ grid-template-columns: 1fr; }
  .gallery__grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery__item--tall{ grid-row: span 2; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .cart-bar{ width: calc(100% - 90px); left: 20px; transform:none; bottom: 90px; }
  .checkout-form__row{ grid-template-columns: 1fr; }
  .nav__links{
    position: fixed; top: 0; right: 0; height: 100vh; width: 78%; max-width: 320px;
    background: var(--ink-2); border-left: 1px solid var(--line);
    flex-direction: column; align-items:flex-start; justify-content:center;
    gap: 22px; padding: 40px; transform: translateX(100%); transition: transform .35s var(--ease);
  }
  .nav__links.is-open{ transform: translateX(0); }
  .nav__burger{ display:flex; }
  .nav__cta{ display:none; }
  .services__grid, .merch__grid, .channel__grid{ grid-template-columns: 1fr; }
  .collection__grid{ grid-template-columns: 1fr; }
  .gallery__grid{ grid-template-columns: 1fr; grid-auto-rows: auto; }
  .gallery__item--tall{ grid-row: auto; }
  .gallery__item{ aspect-ratio: 4/3; }
  .footer__grid{ grid-template-columns: 1fr; }
}