/* ============================================
   ABRAZO ANDINO — stylesheet
   ============================================ */

/* ============ BRAND FONTS ============ */
@font-face{
  font-family: 'Sapiens';
  src: url('fonts/Sapiens-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Fenwick';
  src: url('fonts/Fenwick-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Fenwick';
  src: url('fonts/Fenwick-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Garamond Premier Pro';
  src: url('fonts/GaramondPremierPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Garamond Premier Pro';
  src: url('fonts/GaramondPremierPro-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: 'Helvetica Neue';
  src: url('fonts/HelveticaNeue-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Anek Devanagari Expanded';
  src: url('fonts/AnekDevanagari-ExpandedMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root{
  --black: #060606;
  --near-black: #121110;
  --wine-dark: #3e0707;
  --wine-deep: #3e0707;
  --wine-accent: #3e0707;
  --cream: #f4efe9;
  --white: #ffffff;
  --grey-text: rgba(255,255,255,0.85);
  --font-head: 'Sapiens', sans-serif;
  --font-nav: 'Fenwick', sans-serif;
  --font-body: 'Garamond Premier Pro', serif;
  --container-w: 1760px;
}

*{ box-sizing: border-box; margin:0; padding:0; }

html{
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body{
  font-family: var(--font-body);
  background: var(--black);
  color: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }

a{ color: inherit; text-decoration: none; }

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

.eyebrow{
  font-family: var(--font-nav);
  font-size: clamp(14px, 1.46vw, 28px);
  font-weight: 300;
  margin-bottom: clamp(6px, 0.52vw, 10px);
  color: var(--cream);
}

h1, h2{
  font-family: var(--font-head);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.08;
}

h1{ font-size: clamp(34px, 5vw, 58.6px); }
h2{ font-size: clamp(28px, 4vw, 42px); line-height: 1.2; }

p{ font-size: 16px; color: var(--white); }

/* ============ HEADER ============ */
.site-header{
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding-top: clamp(40px, 4.17vw, 80px);
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo{
  display: block;
  margin-left: clamp(0px, calc(196.085px - 10.2128vw), 48px);
}

.main-nav{
  display: flex;
  gap: clamp(16px, 2.08vw, 40px);
}

.main-nav a{
  font-family: var(--font-nav);
  font-size: clamp(12px, calc(-5.277px + 1.1915vw), 17.6px);
  line-height: 1;
  color: var(--white);
  opacity: 0.9;
  transition: opacity .2s ease;
}
.main-nav a:hover{ opacity: 1; }
.playlist-link{ display: none; }
.lang-es{ display: none; }

.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
    z-index: 301;
}
.nav-toggle span{
  display:block;
  height: 2px;
  width: 100%;
  background: var(--white);
    flex-shrink: 0;
}

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: url('images/hero-bg.jpg') 38% 2% / cover no-repeat;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.hero-overlay{
  position: absolute;
  inset: 0;
}

.hero-inner{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.hero-text h1 img{
  display: block;
}

.hero-text{
  max-width: 560px;
  text-align: left;
  padding-top: clamp(48px, 15.35vw, 232px);
  transform: translateX(clamp(-89px, calc(415.511px - 26.2766vw), 34.5px));
}

.hero-copy{
  margin-top: clamp(12px, 5vw, 27px);
  max-width: 560px;
  font-size: clamp(18px, 1.51vw, 29px);
  line-height: 1.2;
}
.hero-copy em{
  font-family: var(--font-body);
  font-style: italic;
  color: var(--cream);
}

/* ============ TRANSITION STRIP ============ */
.transition-strip{
  height: 26vw;
  max-height: 380px;
  min-height: 112vh;
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
}

/* ============ SYMBOL SECTION ============ */
.symbol-section{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.symbol-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

.symbol-overlay-top{
  position: absolute;
  inset: 0;
  /* background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 30%, rgba(0, 0, 0, 0.05) 55%, rgba(0, 0, 0, 0) 70%); */
}

.symbol-inner{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding: 0 clamp(40px, calc(-52.553px + 6.383vw), 70px);
  gap: clamp(20px, calc(-41.702px + 4.2553vw), 40px);
  flex-wrap: wrap;
}

.symbol-text{
  padding-top: clamp(72px, 10vw, 192px);
  max-width: clamp(380px, calc(-175.319px + 42vw), 620px);
}

.symbol-text .eyebrow{
  font-family: 'Anek Devanagari Expanded', sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.46vw, 28px);
  line-height: 1;
  margin-bottom: 0;
  color: var(--white);
}

.symbol-text h2{
  font-family: var(--font-nav);
  font-weight: 700;
  margin-top: clamp(7px, 0.61vw, 9px);
  font-size: clamp(42px, calc(-63.4px + 7.26vw), 76px);
  line-height: 1.2;
}

.symbol-desc{
  padding-top: clamp(182px, calc(-25.7px + 14.32vw), 249px);
  max-width: 608px;
  margin-right: clamp(0px, calc(245.106px - 12.766vw), 60px);
}

.symbol-desc p{
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(20px, calc(-1.596px + 1.4894vw), 27px);
  line-height: 1.3;
}

.no-split{ white-space: nowrap; }

.symbol-desc .symbol-quote{
  margin: clamp(10px, 1.04vw, 20px) 0 0;
  font-size: clamp(20px, calc(-1.596px + 1.4894vw), 27px);
  line-height: 1.3;
}

/* ============ SPLIT GALLERY ============ */
.split-gallery{
  display: flex;
  width: 100%;
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.split-img{
  flex: 1 1 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.split-img:nth-child(2){
  background-position: center 42%;
}

/* ============ WINE SECTION ============ */
.wine-section{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.wine-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right;
  background-repeat: no-repeat;
}
.wine-overlay{
  position: absolute; inset:0;
}
.wine-section .container{
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(72px, 10vw, 192px) clamp(24px, 3.39vw, 65px) clamp(72px, 9.5vw, 183px);
}

.wine-section > .container > .eyebrow{
  font-family: 'Anek Devanagari Expanded', sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.46vw, 28px);
  line-height: 1;
  margin-bottom: 0;
  color: var(--white);
}

.wine-section h2{
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.2;
  margin-top: clamp(16px, 1.61vw, 31px);
  margin-bottom: 0;
}
.wine-section h2 .pipe-sep{
  font-family: var(--font-head);
  font-weight: 400;
}

.wine-copy{
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin-top: clamp(24px, 4.06vw, 78px);
  margin-bottom: 0;
  max-width: clamp(460px, calc(-588.936px + 72.3404vw), 800px);
  font-size: clamp(19px, calc(-4.4465px + 1.617vw), 26.6px);
  line-height: 1.3;
}

.wine-section .details-inner{
  margin-top: clamp(28px, 4.22vw, 81px);
}

/* ============ DETAILS SECTION ============ */
.details-section{
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.details-bg{
  position: absolute; inset:0;
  background-size: cover;
  background-position: center 35%;
}
.details-overlay{
  position: absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 35%, rgba(0,0,0,0.1) 65%, rgba(0,0,0,0.05) 100%);
}
.details-inner{
  position: relative;
  z-index: 2;
}
.details-text{ max-width: clamp(460px, calc(274.893px + 12.766vw), 520px); }
.details-text .eyebrow{
  font-size: clamp(19px, calc(-4.4465px + 1.617vw), 26.6px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0;
}
.details-specs{
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin: clamp(20px, 2.45vw, 47px) 0 0;
  font-size: clamp(19px, calc(-4.4465px + 1.617vw), 26.6px);
  color: var(--white);
  line-height: 1.3;
}
.specs-divider{ display: none; }
.details-copy{
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin-top: clamp(24px, 2.81vw, 54px);
  font-size: clamp(19px, calc(-4.4465px + 1.617vw), 26.6px);
  line-height: 1.3;
  max-width: 560px;
}

/* ============ LOCATION SECTION ============ */
.location-section{
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-bottom: 30px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.location-bg{
  position: absolute; inset:0;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}
.location-map{
  margin-top: clamp(50px, 6.25vw, 120px);
  margin-left: 0;
  max-width: clamp(650px, calc(-47.234px + 48.0851vw), 876px);
  width: 100%;
}
.location-map img{
  display: block;
  width: 100%;
  height: auto;
}
.location-lujan{
  position: absolute;
  z-index: 2;
  top: clamp(110px, calc(48.128px + 4.6809vw), 143px);
  right: 127px;
  width: 517px;
  max-width: 35%;
}
.location-lujan img{
  display: block;
  width: 100%;
  height: auto;
}
.location-argentina{ display: none; }
.location-argentina img{
  display: block;
  width: 100%;
  height: auto;
}
.location-world{ display: none; }
.location-compass{ display: none; }
.location-compass img{
  display: block;
  width: 100%;
  height: auto;
}
.location-overlay{
  position: absolute; inset: 0;
}
.location-inner{
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(72px, 10vw, 192px) clamp(24px, 3.39vw, 65px) clamp(50px, 5.29vw, 101.5px);
}
.location-text{ max-width: clamp(470px, calc(-23.617px + 34.0426vw), 630px); }
.location-text .eyebrow{
  font-family: 'Anek Devanagari Expanded', sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.46vw, 28px);
  line-height: 1;
  margin-bottom: 0;
  color: var(--white);
}
.location-text h2{
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.2;
  margin-top: clamp(16px, 1.61vw, 31px);
  margin-bottom: 0;
}
.pipe-sep{
  font-family: var(--font-head);
  font-weight: 400;
  display: inline-block;
}
.location-text p:where(:not(.eyebrow)){
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(18px, calc(-4px + 1.455vw), 24px);
  line-height: 1.3;
  margin-top: clamp(12px, 1.5vw, 28px);
  margin-bottom: 0;
}
.location-text p + p{
  margin-top: clamp(18px, 2vw, 36px);
}

/* ============ SPOTIFY BANNER ============ */
.spotify-banner{
  background: #000000;
  padding: clamp(48px, 5.76vw, 110.5px) 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.spotify-inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.spotify-col-side{
  min-width: 0;
}
.spotify-col-center{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(30px, 4vw, 90px);
}
.spotify-left{
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 4.2vw, 70px);
}
.spotify-icon{
  width: clamp(96px, calc(65.149px + 2.1277vw), 106px);
  height: clamp(96px, calc(65.149px + 2.1277vw), 106px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.spotify-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.spotify-title{
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: clamp(28.6px, calc(-2.251px + 2.1277vw), 38.6px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.spotify-sub{
  font-family: 'Anek Devanagari Expanded', sans-serif;
  font-size: clamp(20px, calc(-14px + 2.45vw), 32px);
  line-height: 1;
  font-weight: 500;
  color: var(--white);
  margin-top: clamp(12px, 1.04vw, 20px);
  text-transform: uppercase;
}
.btn-outline{
  font-family: var(--font-nav);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 40px;
  padding: clamp(11px, calc(-24px + 2.45vw), 11px) clamp(32px, calc(-1px + 2.45vw), 44px);
  font-size: clamp(12px, calc(-22px + 2.45vw), 24px);
  font-weight: 700;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.btn-outline:hover{
  background: var(--white);
  color: var(--black);
}

/* ============ STORY SECTION ============ */
.wine-band{
  background: #3f0808;
}
.story-section{
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding: 0 0 clamp(50px, 5.21vw, 100px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.story-inner{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(30px, 3.13vw, 60px);
  flex-wrap: wrap;
  width: 100%;
  padding: 0 clamp(24px, 3.13vw, 60px);
}
.story-text{ max-width: 760px; padding-top: clamp(49px, 8.94vw, 125px); flex-shrink: 0; }
.story-text h2{ font-family: var(--font-nav); font-weight: 700; font-size: clamp(38px, calc(-55.787px + 6.4681vw), 68.4px); line-height: 1.2; margin-top: 0; margin-bottom: 0; }
.story-text p{ font-family: 'Helvetica Neue', sans-serif; font-weight: 400; margin-top: clamp(24px, 2.81vw, 54px); font-size: clamp(22px, calc(-18px + 2.76vw), 35px); line-height: 1.3; }
.story-text p:first-of-type{ margin-top: clamp(28px, 3.02vw, 58px); }
.mobile-break{ display: none; }

.story-photo-wrap{
  flex: 1 1 320px;
  display: flex;
  justify-content: flex-end;
  padding-top: clamp(50px, 5.94vw, 114px);
}
.polaroid{
  position: relative;
  max-width: clamp(700px, calc(638.3px + 4.26vw), 720px);
  width: 100%;
  transform: translateX(-15px);
}
.polaroid-photo{
  width: 100%;
  aspect-ratio: 734/825;
  background-size: cover;
  background-position: center;
}
.wax-seal{
  position: absolute;
  top: -18px;
  right: -18px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8a2332, #5a1420 70%, #3a0c14 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-nav);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
  transform: rotate(8deg);
}

/* ============ FOOTER ============ */
.site-footer{
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.footer-top{
  text-align: center;
  padding: clamp(50px, 6.5vw, 90px) clamp(20px, 2.08vw, 40px) clamp(50px, 5.5vw, 100px);
}
.footer-logo{
  font-family: var(--font-head);
  font-weight: 400;
  font-size: clamp(30px, 3.1vw, 58px);
  line-height: 1;
  letter-spacing: 3px;
  margin: 0;
}
.footer-heading{
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: clamp(18px, 1.55vw, 30px);
  line-height: 1;
  margin: clamp(40px, 4.5vw, 90px) 0 0;
}
.footer-sub{
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 400;
  color: var(--white);
  font-size: clamp(18px, 1.55vw, 30px);
  line-height: 1;
  margin: clamp(18px, 1.82vw, 35px) 0 0;
}
.footer-contacts{
  display: flex;
  justify-content: center;
  gap: clamp(20px, 4vw, 90px);
  flex-wrap: wrap;
  margin-top: clamp(50px, 5.83vw, 112px);
}
.contact-label{
  font-family: var(--font-nav);
  font-size: clamp(14px, 1.6vw, 26.6px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0;
}
.contact-pill{
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 400;
  display: inline-block;
  border: 1.9px solid var(--white);
  border-radius: 30px;
  padding: clamp(8px, 1vw, 14px) clamp(14px, 1.8vw, 24px);
  font-size: clamp(15px, 1.7vw, 26.6px);
  line-height: 1;
  margin-top: clamp(16px, 1.67vw, 32px);
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}
.contact-pill:hover{
  background: var(--white);
  color: var(--wine-deep);
}
.footer-bottom{
  background: var(--black);
  padding: clamp(50px, 4.25vw, 120px) 0;
}
.footer-bottom-inner{
  font-family: var(--font-nav);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(40px, 21.35vw, 410px);
  font-size: clamp(14px, 1.24vw, 23.8px);
  line-height: 1;
  font-weight: 700;
  color: var(--grey-text);
}

/* ============================================
   DESKTOP (min 901px) — design 1920x1080
   Header scales with the viewport width (vw).
   Hero text is tied to the background photo via --u
   (1% of the rendered photo width), so it keeps its
   place next to the bottle on any screen proportion.
   ============================================ */
@media (min-width: 901px){
  .site-header{ padding-top: 4vw; }
  .header-inner{ max-width: none; padding: 0 3.5vw 0 4.75vw; }
  .logo{ margin-left: 0; width: 15.53vw; }
  .main-nav{ gap: 3vw; }
  .main-nav a{ font-size: 0.917vw; font-weight: 300; }
  .main-nav .lang-link{ font-weight: 700; }
  .lang-en{ display: none; }
  .lang-es{ display: inline; }

  .hero{ display: block; height: 100vh; min-height: 0; container-type: size; }
  .hero-inner{ position: static; max-width: none; padding: 0; }
  .hero-text{
    --u: max(1cqw, 1.7778cqh);
    position: absolute;
    z-index: 2;
    left: calc((100cqw - 100 * var(--u)) * 0.38 + 64.115 * var(--u));
    top: calc((100cqh - 56.25 * var(--u)) * 0.02 + 23.82 * var(--u));
    max-width: none;
    padding-top: 0;
    transform: none;
  }
  .hero-text h1 img{ width: 24.73vw; }
  .hero-copy{ max-width: none; margin-top: calc(1.17 * var(--u)); font-size: calc(1.495 * var(--u)); line-height: 1.19; }

  /* Symbol — text tied to the photo (cover, center top) */
  .symbol-section{ display: block; height: 100vh; min-height: 0; container-type: size; }
  .symbol-inner{ --u: max(1cqw, 1.7778cqh); position: static; display: block; max-width: none; padding: 0; }
  .symbol-text,
  .symbol-desc{ position: absolute; z-index: 2; padding-top: 0; margin: 0; max-width: none; }
  .symbol-text{ left: max((100cqw - 100 * var(--u)) * 0.5 + 7.04 * var(--u), 7.04cqw); top: calc(13.2 * var(--u)); }
  .symbol-text .eyebrow{ position: absolute; left: 0; bottom: 100%; margin: 0 0 calc(0.4 * var(--u)); font-size: calc(1.458 * var(--u)); line-height: 1; white-space: nowrap; }
  .symbol-text h2{ margin-top: 0; font-size: calc(3.568 * var(--u)); line-height: 1.17; }
  .symbol-desc{ left: min((100cqw - 100 * var(--u)) * 0.5 + 60.68 * var(--u), 92.96cqw - 31 * var(--u)); top: calc(13.885 * var(--u)); width: calc(31 * var(--u)); }
  .symbol-desc p,
  .symbol-desc .symbol-quote{ font-size: calc(1.39 * var(--u)); line-height: 1.36; }
  .symbol-desc .symbol-quote{ margin-top: 0.77em; }

  /* Wine — photo is anchored right; text column sits on the dark left side */
  .wine-section{ display: block; height: 56.25vw; min-height: 0; container-type: size; }
  .wine-section .container{
    --u: max(1cqw, 1.7778cqh);
    position: absolute;
    left: max((100cqw - 100 * var(--u)) + 7.04 * var(--u), 7.04cqw);
    top: calc(11.2 * max(1vw, 1.7778vh)); /* same top margin as Location */
    width: calc(40 * var(--u));
    max-width: none;
    padding: 0;
    transform: none;
  }
  .wine-section > .container > .eyebrow{ font-size: calc(1.458 * var(--u)); line-height: 1; }
  .wine-section h2{ margin-top: calc(0.4 * var(--u)); font-size: calc(2.01 * var(--u)); line-height: 1.37; }
  .wine-copy,
  .details-specs,
  .details-copy{ font-size: calc(1.39 * var(--u)); line-height: 1.37; }
  .wine-copy{ margin-top: calc(3.04 * var(--u)); max-width: none; }
  .wine-section .details-inner{ margin-top: calc(3.5 * var(--u)); }
  .details-text{ max-width: none; }
  .details-text .eyebrow{ font-size: calc(1.385 * var(--u)); line-height: 1; }
  .details-specs{ margin-top: calc(1.89 * var(--u)); }
  .details-copy{ margin-top: calc(1.93 * var(--u)); max-width: calc(25 * var(--u)); }

  /* Location — photo cover at center 40%; maps and text tied to it,
     never closer to the screen edge than their design margin */
  .location-section{ display: block; height: max(100vh, 56.25vw); min-height: 0; padding: 0; container-type: size; }
  .location-section > *{
    --u: max(1cqw, 1.7778cqh);
    --ox: calc((100cqw - 100 * var(--u)) * 0.5);
    --oy: calc((100cqh - 56.25 * var(--u)) * 0.4);
  }
  .location-inner{ position: static; max-width: none; padding: 0; transform: none; }
  .location-text{
    position: absolute;
    z-index: 2;
    left: max(var(--ox) + 7.04 * var(--u), 7.04cqw);
    top: max(var(--oy) + 11.2 * var(--u), 11.2cqh);
    width: calc(32 * var(--u));
    max-width: none;
  }
  .location-text .eyebrow{ font-size: calc(1.458 * var(--u)); line-height: 1; }
  .location-text h2{ margin-top: calc(0.72 * var(--u)); font-size: calc(2.01 * var(--u)); line-height: 1.37; }
  .location-text p:where(:not(.eyebrow)){ margin-top: calc(1.05 * var(--u)); font-size: calc(1.39 * var(--u)); line-height: 1.37; }
  .location-text p + p{ margin-top: 1.33em; }
  .location-map{
    position: absolute;
    z-index: 2;
    left: max(var(--ox) + 6 * var(--u), 6cqw);
    bottom: max((100cqh - 56.25 * var(--u)) * 0.6 + 4.4 * var(--u), 4.4cqh);
    width: calc(45.625 * var(--u));
    max-width: none;
    margin: 0;
  }
  .location-lujan{
    top: max(var(--oy) + 7.9 * var(--u), 7.9cqh);
    right: max(var(--ox) + 4.635 * var(--u), 4.635cqw);
    width: calc(28.75 * var(--u));
    max-width: none;
  }

  /* Spotify banner — no photo, everything scales with the screen width
     (1vw = 19.2px of the 1920 design) */
  .spotify-banner{ position: relative; height: 15vw; padding: 0; }
  .spotify-inner,
  .spotify-col-center,
  .spotify-left{ display: contents; }
  .spotify-col-side{ display: none; }
  .spotify-icon{ position: absolute; left: 15.78vw; top: calc(50% - 2.735vw); width: 5.52vw; height: 5.52vw; }
  .spotify-copy{ position: absolute; left: 25.3vw; top: calc(50% - 2.055vw); }
  .spotify-title{ font-size: 2.01vw; line-height: 1; }
  html:lang(es) .spotify-title{ font-size: 1.75vw; }
  .spotify-sub{ margin-top: 1.1vw; font-size: 1.458vw; line-height: 1; }
  .btn-outline{
    position: absolute;
    left: 66.93vw;
    top: calc(50% - 2.425vw);
    width: 17.29vw;
    height: 2.81vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0.1vw solid var(--white);
    font-size: 1.094vw;
    line-height: 1;
  }

  /* Born from — no photo background, everything scales with the width */
  .story-section{ position: relative; display: block; min-height: 48.33vw; padding: 0; }
  .story-inner{ display: block; max-width: none; padding: 0 0 4.5vw 7.235vw; }
  .story-text{ max-width: none; padding-top: 6.95vw; }
  .story-text h2{ font-size: 3.542vw; line-height: 1.153; }
  .story-text p{ margin-top: 2.29vw; font-size: 1.615vw; line-height: 1.364; }
  .story-text p:first-of-type{ margin-top: 1.82vw; }
  .story-photo-wrap{ position: absolute; left: 54.375vw; top: 5.99vw; width: 35.156vw; padding: 0; display: block; }
  .polaroid{ width: 100%; max-width: none; transform: none; }
  .polaroid-photo{ height: 40.94vw; aspect-ratio: auto; background-size: contain; background-repeat: no-repeat; }

  .pipe-sep{ transform: scaleY(1.5); }

  /* Contact / footer — no photo, everything scales with the width */
  .footer-top{ padding: 6.353vw 0 6.2vw; }
  .footer-logo{ margin: 0; font-size: 2.637vw; line-height: 1; letter-spacing: 0.103em; }
  .footer-heading{ margin-top: 4.07vw; font-size: 1.385vw; }
  .footer-sub{ margin-top: 1.54vw; font-size: 1.385vw; }
  .footer-contacts{ display: grid; grid-template-columns: 25.1vw 24.4vw 23.6vw; justify-content: center; justify-items: center; margin-top: 5.7vw; gap: 0; position: relative; left: -0.755vw; }
  .contact-label{ font-size: 1.385vw; }
  .contact-pill{ min-width: 16.56vw; margin-top: 1.54vw; padding: 0.713vw 1.93vw; border-width: 0.1vw; font-size: 1.385vw; }
  .footer-bottom{ height: 8.5vw; padding: 4.97vw 0 0; }
  .footer-bottom-inner{ max-width: none; gap: 21.3vw; }
  .footer-bottom-inner p{ font-size: 1.24vw; }
}

/* ============================================
   RESPONSIVE — MOBILE / TABLET (max 900px)
   ============================================ */
@media (max-width: 900px){
  .container{ padding: 0 7.25vw; }

  /* Header + nav */
  .site-header{ padding-top: 10vw; }
  .logo{ margin-left: 0; width: clamp(125px, 41.65vw, 207px); }
  .main-nav{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100%;
    background: #000;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 185px 24px 40px;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 150;
  }
  .main-nav.open{ transform: translateX(0); }
  .main-nav a{
    width: min(302px, 100%);
    padding: 28px 0;
    border-bottom: 1px solid rgba(255,255,255,0.8);
    font-size: 20.54px;
    line-height: 1;
    text-align: center;
  }
  .main-nav .playlist-link{ display: block; }
  .main-nav .lang-link{ border-bottom: 0; font-weight: 700; font-size: clamp(18px, 4.5vw, 36px); }
  .lang-en{ display: none; }
  .lang-es{ display: inline; }
  .nav-toggle{
    position: fixed;
    display: flex;
    top: 8vw;
    right: 4vw;
    width: 32px;
    height: 32px;
    gap: 5px;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 301;
  }
  .nav-toggle span{ position: static; display: block; width: 32px; height: 2px; transform: none; }
  .nav-toggle.open{ top: 7.25vw; right: 7.25vw; width: 48px; height: 48px; gap: 0; }
  .nav-toggle.open span{ position: absolute; width: 48px; }
  .nav-toggle.open span:first-child{ transform: rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ display: none; }
  .nav-toggle.open span:last-child{ transform: rotate(-45deg); }

  /* Hero */
  .hero{
    min-height: 100svh;
    background-image: url('images/aa_web_dai-30.jpg');
    background-size: cover;
    background-position: 25% center;
    align-items: flex-end;
  }
  .hero-inner{ justify-content: flex-start; padding-bottom: 12vw; }
  .hero-text{ max-width: 100%; padding-top: 0; transform: none; }
  .hero-text h1 img{ width: clamp(180px, 56.9vw, 290px); }
  .hero-copy{ transform: none; margin-top: 4vw; font-size: clamp(16px, 2.75vw, 23px); line-height: 1.3; }

  /* Symbol */
  .symbol-section{ min-height: 0; aspect-ratio: 751 / 1335; }
  .symbol-bg{ background-image: url('images/aa_web_dai-31.jpg') !important; }
  .symbol-overlay-top{ background: none; }
  .symbol-inner{ flex-direction: column; align-items: flex-start; padding: 11.5vw 7.25vw 0; gap: 14px; }
  .symbol-text{ padding-top: 0; max-width: 100%; }
  .symbol-text .eyebrow{ font-size: clamp(11.2px, 2.9vw, 23px); }
  .symbol-text h2{ font-size: clamp(20.7px, 5.2vw, 42px); margin-top: 5vw; }
  .symbol-desc{ padding-top: 0; max-width: 100%; margin-right: 0; }
  .symbol-desc p,
  .symbol-desc .symbol-quote{ font-size: clamp(13px, 3.4vw, 27px); line-height: 1.28; }
  .symbol-desc p{ max-width: 21.85em; margin-top: 1.5vw; }
  .symbol-desc .symbol-quote{ margin-top: 2.7vw; margin-left: 0; }
  .symbol-break{ display: none; }
  .no-split{ white-space: normal; }

  /* Split gallery */
  .split-gallery{ position: relative; height: 100vh; min-height: 100vh; }
  .split-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: splitGalleryFade 8s infinite;
  }
  .split-img:nth-child(1){ animation-delay: 0s; }
  .split-img:nth-child(2){ animation-delay: 4s; }
  @keyframes splitGalleryFade{
    0%{ opacity: 0; }
    6%{ opacity: 1; }
    44%{ opacity: 1; }
    50%{ opacity: 0; }
    100%{ opacity: 0; }
  }

  /* Wine + details */
  .wine-section{ min-height: 182.76vw; background: #050400; }
  .wine-bg{
    background-image: url('images/aa_web_dai-32.jpg') !important;
    background-size: cover;
    background-position: center top;
    top: 5vw;
  }
  .wine-section .container{ padding: 11.5vw 7.25vw 8vw; align-self: stretch; }
  .wine-section > .container > .eyebrow,
  .details-text .eyebrow{ font-size: clamp(11.2px, 2.9vw, 23px); }
  .wine-section h2{ font-size: clamp(20.7px, 5.2vw, 42px); line-height: 1.2; margin-top: 5vw; }
  .wine-copy{ font-size: clamp(13px, 3.4vw, 27px); line-height: 1.3; margin-top: 4vw; max-width: 23.46em; }
  .wine-section .details-inner{ margin-top: 7vw; position: static; }
  .details-text{ max-width: 100%; }
  .details-specs{ font-size: clamp(13px, 3.4vw, 27px); line-height: 1.3; margin-top: 4vw; }
  .specs-divider{ display: inline; }
  .specs-break{ display: none; }
  .details-copy{
    font-size: clamp(13px, 3.4vw, 27px);
    line-height: 1.3;
    max-width: 21.54em;
    position: absolute;
    left: 10vw;
    bottom: 10.7vw;
  }

  /* Pipe separator in wine + location titles */
  .wine-section h2 .pipe-sep,
  .location-text h2 .pipe-sep{
    display: inline-block;
    position: relative;
    color: transparent;
    margin: 0 3px;
  }
  .wine-section h2 .pipe-sep::before,
  .location-text h2 .pipe-sep::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 0.68em;
    background: var(--white);
  }

  /* Location — maps flow below the text in a grid, so they sit low on
     tall phones but can never ride up over the text on short ones */
  .location-section{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    min-height: 100svh;
    padding-bottom: 0;
  }
  .location-bg{ background-position: 37% 5%; }
  .location-inner{ grid-column: 1 / -1; grid-row: 1; padding: 11.5vw 7.25vw 8vw; position: static; }
  .location-text{ max-width: 100%; position: relative; z-index: 2; }
  .location-text .eyebrow{ font-size: clamp(11.2px, 2.9vw, 23px); margin-top: 12px; }
  .location-text h2{ font-size: clamp(20.7px, 5.2vw, 42px); line-height: 1.2; margin-top: 5vw; }
  .location-text p:where(:not(.eyebrow)){ font-size: clamp(13px, 3.4vw, 27px); line-height: 1.3; margin-top: 4vw; }
  .location-text p + p{ margin-top: 5vw; }
  .location-map{ display: none; }
  .location-lujan,
  .location-argentina,
  .location-world,
  .location-compass{
    display: block;
    position: relative;
    z-index: 2;
    inset: auto;
    max-width: none;
  }
  .location-lujan{
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    width: clamp(162px, 40.57vw, 325px);
    margin: 0 9vw 4vw 0;
  }
  .location-lujan img{
    content: url('images/materialmobile-35.png');
    height: clamp(273px, 68.23vw, 546px);
    object-fit: contain;
  }
  .location-argentina{
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: start;
    width: clamp(121px, 30.25vw, 242px);
    margin: 0 0 13vw 8vw;
  }
  .location-argentina img{ height: clamp(176px, 44vw, 352px); object-fit: contain; }
  .location-world{
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    justify-self: start;
    width: 51.7vw;
    margin-bottom: 6vh;
  }
  .location-world img{
    display: block;
    width: clamp(244px, 61.05vw, 488px);
    max-width: none;
    height: clamp(133px, 33.28vw, 266px);
    object-fit: contain;
    margin-left: 10vw;
  }
  .location-compass{
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    justify-self: end;
    width: clamp(45px, 11.25vw, 90px);
    margin: 0 7vw 4.5vh 0;
  }
  .location-compass img{ height: clamp(48px, 12vw, 96px); object-fit: contain; }

  /* Spotify banner */
  .spotify-banner{ padding: 12vw 7.25vw; }
  .spotify-inner{ grid-template-columns: 1fr; }
  .spotify-col-side{ display: none; }
  .spotify-col-center{ flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  .spotify-left{ flex-direction: column; align-items: center; text-align: center; }
  .spotify-icon{ width: clamp(58px, 11.8vw, 96px); height: clamp(58px, 11.8vw, 96px); }
  .spotify-title{ white-space: normal; font-size: clamp(18.4px, 4.6vw, 40px); line-height: 1.08; }
  .spotify-sub{ font-size: clamp(11.2px, 2.9vw, 23px); margin-top: 5vw; }
  .btn-outline{ font-size: clamp(10.24px, 2.6vw, 21px); padding: 1.5vw 5vw; }

  /* Story */
  .story-section{ min-height: auto; padding-bottom: 0; }
  .story-inner{ flex-direction: column; padding: 0 7.25vw; }
  .story-text{ padding-top: 11.5vw; max-width: 100%; flex-shrink: 1; }
  .story-text h2{ font-size: clamp(24px, 6vw, 46px); line-height: 1.2; }
  .story-text p{ font-size: clamp(13px, 3.4vw, 27px); line-height: 1.3; margin-top: 3.5vw; max-width: 23.15em; }
  .story-text p:first-of-type{ margin-top: 5vw; }
  .story-text p + p{ margin-top: 1.6em; }
  .desktop-break{ display: none; }
  .mobile-break{ display: inline; }
  .story-photo-wrap{ padding-top: 10vw; width: 100%; justify-content: center; }
  .polaroid{ width: clamp(260px, 65vw, 520px); max-width: 100%; transform: none; }
  .polaroid-photo{ height: clamp(292px, 73.4vw, 584px); aspect-ratio: auto; background-size: contain; background-repeat: no-repeat; }

  /* Footer / contact */
  .footer-top{ padding: 12vw 7.25vw 6vw; }
  .footer-logo{ font-size: clamp(18.92px, 4.73vw, 40px); letter-spacing: normal; }
  .footer-heading{ font-size: clamp(9.46px, 2.37vw, 23px); margin-top: 32px; }
  .footer-sub{ font-size: clamp(9.46px, 2.37vw, 20px); line-height: 1.5; margin-top: 12px; }
  .footer-contacts{ flex-direction: column; align-items: center; flex-wrap: nowrap; gap: 30px; margin-top: 32px; }
  .contact-label{ font-size: clamp(10.79px, 2.7vw, 18px); }
  .contact-pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(10.79px, 2.7vw, 20px);
    padding: 0.417em 1.668em 0.602em;
    margin-top: 12px;
  }
  .footer-bottom{ padding: clamp(20px, 5vw, 40px) 0; }
  .footer-bottom-inner{ gap: 24px; }
  .footer-bottom-inner,
  .footer-bottom-inner p{ font-size: clamp(7.02px, 1.76vw, 14px); }
}

@media (max-width: 560px){
  .footer-bottom-inner{ flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px; }
}

/* ============================================
   RESPONSIVE — SHORT VIEWPORTS (e.g. iPhone SE)
   ============================================ */
@media (max-width: 900px) and (max-height: 720px){
  .symbol-inner{ padding-top: 11vw; }
  .symbol-text .eyebrow{ margin-bottom: 0; }
  .symbol-text h2{ margin-top: 4vw; }
  .symbol-desc p,
  .symbol-desc .symbol-quote{ line-height: 1.2; }

  .location-inner{ padding-top: 10vw; }
  .location-text .eyebrow{ margin-bottom: 0; }
  .location-text p:where(:not(.eyebrow)){ margin-top: 3vw; line-height: 1.2; }
  .location-text p + p{ margin-top: 2vw; max-width: 24.27em; }
  .location-world{ margin-bottom: 3vh; }
  .location-compass{ margin-bottom: 2.5vh; }
}

/* ============ TABLET LOCATION ============ */
@media (min-width: 561px) and (max-width: 900px){
  .location-section{ overflow: hidden; }
  .location-bg{ background-position: center center; }
  .location-inner{ position: relative; padding: 10vw 7.25vw 0; }
  .location-text{ max-width: 84%; z-index: 5; }
  .location-text h2{ line-height: 1.15; margin-top: 4vw; }
  .location-text p:where(:not(.eyebrow)){ line-height: 1.3; margin-top: 4vw; }
  .location-text p + p{ margin-top: 5vw; }
  .location-lujan,
  .location-argentina,
  .location-world,
  .location-compass{ position: absolute; margin: 0; }
  .location-lujan{ top: 57%; right: 14%; width: 24%; z-index: 2; }
  .location-lujan img{ height: auto; }
  .location-argentina{ top: 59%; left: 22%; width: 20%; z-index: 2; }
  .location-argentina img{ height: auto; }
  .location-world{ bottom: 2%; left: 22%; width: 27%; z-index: 2; }
  .location-world img{ width: 100%; margin-left: 0; height: auto; }
  .location-compass{ bottom: 4%; right: 8%; width: 8%; z-index: 2; }
  .location-compass img{ height: auto; }
  .location-lujan,
  .location-argentina,
  .location-world,
  .location-compass{ transform: translateX(-6vw); }
}