*, *::before, *::after { -webkit-hyphens: none !important; hyphens: none !important; }
/* ──────────────────────────────────────────────────────────
   TEQUILA TRES ESE — stylesheet
   Palette: warm ivory · sandstone · aged copper · agave green
   ────────────────────────────────────────────────────────── */

:root{
  --bg:            #F4EEE2;
  --bg-soft:       #EDE3D0;
  --bg-deep:       #1C1813;
  --paper:         #FBF7EE;
  --ink:           #2A2218;
  --ink-soft:      #584A38;
  --muted:         #8A7B62;
  --line:          #D8C9AC;
  --copper:        #A86A33;
  --copper-deep:   #8A4E1E;
  --agave:         #4A5A3B;
  --agave-deep:    #2F3A24;
  --gold:          #B08542;
  --gold-light:    #E8CD8C;

  --serif:  'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --sans:   'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --maxw: 1280px;
  --pad:  clamp(2rem, 5.5vw, 2.5rem);
  --radius: 2px;

  --ease: cubic-bezier(.2,.6,.2,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Justify all paragraphs — never center body copy. Inter-word spacing keeps
   the gaps even, and text-wrap: pretty avoids leaving a single word on the
   last line. */
p{
  text-align: justify !important;
  text-justify: inter-word;
  text-wrap: pretty;
}
.eyebrow, .step-num, .product-tag, .brand-sub, .footer-sub,
.hero-meta em, .store-note, .footer-bottom,
.scroll-link, figcaption, address, .form-status{
  text-align: left;
  hyphens: manual;
}

/* Foreign-language / Spanish terms in body copy (hacienda, fábrica, jimadores,
   piñas, etc.) — italic + warm copper-brown so they read as brand-styled. */
p em{
  color: var(--copper-deep);
}

/* subtle organic paper grain */
body::before{
  content:"";
  position: fixed; inset:0;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(168,106,51,.05), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(74,90,59,.06), transparent 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .15  0 0 0 0 .12  0 0 0 0 .08  0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: auto, auto, 240px 240px;
  pointer-events:none;
  mix-blend-mode: multiply;
  opacity:.6;
  z-index:1;
}
main, header, section, footer{ position: relative; z-index: 2; }

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

.container{
  width:100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ─────────── TYPOGRAPHY ─────────── */
.display, .display-sm, .display-xs{
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.display{
  font-size: clamp(3.2rem, 10vw, 7.5rem);
  line-height: .98;
  letter-spacing: -.02em;
}
.display-line{ display:block; }
.display-sm{
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  line-height: 1.05;
}
.display-xs{
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.15;
}
.italic, em{ font-style: italic; color: var(--copper-deep); }
.nowrap{ white-space: nowrap; }

.eyebrow{
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
}
.eyebrow::before{
  content:"";
  width: 28px; height: 1px;
  background: var(--copper);
}

.lede{
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 44ch;
  font-style: italic;
}

.section-head{ margin: 0 0 clamp(3rem, 6vw, 5rem); max-width: 52ch; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow{ margin-left:0; }
.section-intro{
  margin-top: 1rem;
  color: var(--ink-soft);
  max-width: 52ch;
}
/* Brand stamp — small mark sitting above a section headline */
.section-stamp{
  display: block;
  height: 74px;        /* +30% from 57 */
  width: auto;
  margin: 0 0 1.25rem;
  opacity: .9;
}
.section-head.center .section-stamp{
  margin-left: auto;
  margin-right: auto;
}
.section-stamp--light{
  opacity: .95;
}
.section-head.center .section-intro{
  margin-left: auto;
  margin-right: auto;
  text-align: center !important;
  hyphens: manual;
}

/* ─────────── HEADER ─────────── */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  padding: 1rem 0;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-scrolled{
  background: rgba(244,238,226,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: .55rem 0;
  box-shadow: 0 1px 0 rgba(42,34,24,.08);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 2rem;
}
.brand{
  display:grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
  align-items: flex-start;
  line-height: 1;
  row-gap: .45rem;
}
.brand-logo{
  height: 51px;          /* +10% from 46 */
  width: auto;
  display: block;
  grid-column: 1;
  grid-row: 1;
  transition: opacity .4s var(--ease);
}
.brand-logo--dark{ opacity: 1; }                 /* shown on light bg (scrolled) */
.brand-logo--light{ opacity: 0; pointer-events: none; }  /* shown on dark hero */
.site-header:not(.is-scrolled) .brand-logo--dark{ opacity: 0; }
.site-header:not(.is-scrolled) .brand-logo--light{ opacity: 1; }
.brand-caption{
  grid-column: 1;
  grid-row: 2;
  font-size: .85rem;
  font-weight: 300;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .65rem;
}
.brand-caption .caption-main{
  font-weight: 600;
  font-size: 1em;
  letter-spacing: .24em;
}
.brand-caption-place{
  grid-column: 1;
  grid-row: 3;
  font-size: .62rem;
  font-weight: 300;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .15rem;
  white-space: nowrap;
}
.site-header:not(.is-scrolled) .brand-caption-place{ color: rgba(251,247,238,.55); }
.brand{
  grid-template-rows: auto auto auto;
}
.site-header:not(.is-scrolled) .brand-caption{ color: rgba(251,247,238,.65); }
.is-scrolled .brand-mark{ color: var(--ink); }
.is-scrolled .brand-sub{ color: var(--muted); }

.hero ~ .site-header, .site-header:not(.is-scrolled){ color: var(--paper); }
.site-header:not(.is-scrolled) .brand-mark{ color: var(--paper); }
.site-header:not(.is-scrolled) .brand-sub{ color: rgba(251,247,238,.7); }
.site-header:not(.is-scrolled) .primary-nav a{ color: var(--paper); }
.site-header:not(.is-scrolled) .lang-btn{ color: var(--paper); }

.primary-nav{
  display:flex; gap: clamp(1rem, 2.5vw, 2rem);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.primary-nav a{
  position: relative;
  padding: .25rem 0;
  transition: opacity .3s var(--ease);
}
.primary-nav a::after{
  content:"";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--copper);
  transition: width .35s var(--ease);
}
.primary-nav a:hover{ opacity: .85; }
.primary-nav a:hover::after{ width: 100%; }

.header-tools{ display:flex; align-items:center; gap: 1rem; }
.lang{
  display:flex; align-items:center; gap:.35rem;
  font-size: .72rem;
  letter-spacing: .18em;
}
.lang-btn{
  padding: .25rem .1rem;
  opacity: .6;
  text-decoration: none;
  color: inherit;
  transition: opacity .3s var(--ease);
}
.lang-btn.is-active{ opacity: 1; }
.lang-btn:hover{ opacity: .9; }

.menu-toggle{
  display:none;
  flex-direction:column;
  gap: 4px;
  width: 28px; height: 22px;
  padding: 4px 0;
}
.menu-toggle span{
  display:block;
  height: 1px; width: 100%;
  background: currentColor;
}

/* ─────────── HERO ─────────── */
.hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display:flex;
  align-items: center;
  padding: 7rem 0 4rem;
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
/* Hero VIDEO — capped at 1372px wide (10% bigger), anchored at horizontal
   30% / vertical 60%. Plays muted once and stops on its last frame. */
.hero-bg{
  position: absolute;
  width: 100%;
  max-width: 1372px;
  height: auto;
  max-height: 100%;
  left: 30%;
  top: 60%;
  transform: translate(-30%, -60%);
  object-fit: contain;
  filter: brightness(1.05) saturate(1) contrast(1.05);
  z-index: -3;
}
.hero{ background-color: #15100c; }
/* Edge-fade overlay — same dark gradients on all four sides as before, plus a
   strong top fade so the video's top edge buries into pure black. */
.hero-edge-fade{
  position: absolute; inset: 0;
  background:
    /* Dark blob in the bottom-right covers the Veo watermark on the video */
    radial-gradient(ellipse 24% 18% at 88% 92%, #15100c 0%, #15100c 30%, transparent 100%),
    linear-gradient(90deg,
      #15100c 0%,
      rgba(21,16,12,.7) 18%,
      transparent 35%,
      transparent 68%,                /* keep bottle area (52-65%) clean */
      rgba(21,16,12,.55) 76%,         /* fade kicks in past the bottles */
      rgba(21,16,12,.85) 86%,
      #15100c 96%),
    linear-gradient(180deg,
      #15100c 0%,
      rgba(21,16,12,.95) 12%,       /* heavy alpha straddles the image top edge */
      rgba(21,16,12,.7) 18%,         /* fades through it smoothly */
      rgba(21,16,12,.35) 23%,
      transparent 30%,                /* clean image from here down */
      transparent 76%,
      rgba(21,16,12,.6) 90%,
      #15100c 100%);
  pointer-events: none;
  z-index: -2;
}
.hero-veil{
  position:absolute; inset:0;
  /* Darken the LEFT half (where copy sits) so text reads clearly,
     leave the right (bottles + cellar light) clean */
  background:
    linear-gradient(90deg, rgba(14,12,9,.65) 0%, rgba(14,12,9,.35) 35%, rgba(14,12,9,.05) 60%, transparent 100%),
    linear-gradient(180deg, rgba(14,12,9,.15) 0%, transparent 25%, rgba(14,12,9,.45) 100%);
  z-index:-2;
}

/* smoke */
.smoke{
  position: absolute;
  left: 0; right: 0; bottom: -10%;
  height: 80%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  display: none; /* drifting smoke plumes — hidden (rendered as visible circles on some screens) */
}
.smoke-plume{
  position: absolute;
  bottom: -20%;
  width: 55vw;
  height: 55vw;
  max-width: 900px; max-height: 900px;
  background:
    radial-gradient(circle at 50% 60%, rgba(220,205,180,.45) 0%, rgba(220,205,180,.18) 30%, transparent 65%);
  filter: blur(40px);
  opacity: 0;
  mix-blend-mode: screen;
  animation: drift 18s linear infinite;
}
.smoke-1{ left: -10%; animation-delay: 0s;  animation-duration: 22s; }
.smoke-2{ left: 20%;  animation-delay: -6s; animation-duration: 26s; opacity:.9; }
.smoke-3{ left: 50%;  animation-delay: -12s; animation-duration: 30s; }
.smoke-4{ left: 70%;  animation-delay: -18s; animation-duration: 24s; }
@keyframes drift{
  0%   { transform: translate3d(-30px, 20%, 0) scale(.9); opacity: 0; }
  20%  { opacity: .55; }
  50%  { transform: translate3d(40px, -10%, 0) scale(1.1); opacity: .45; }
  80%  { opacity: .25; }
  100% { transform: translate3d(100px, -40%, 0) scale(1.25); opacity: 0; }
}

.hero-inner{
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 4rem);
  /* Hero copy — shifted left by ~10% of viewport from the previous setting */
  padding-left: clamp(7rem, 12vw, 12rem);
}
.hero-copy{ align-self: center; }
.hero-trio{
  justify-self: end;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: calc(-1 * clamp(1rem, 3vw, 3rem));
}
.hero-copy{ display:flex; flex-direction:column; gap: 1rem; }
.hero .eyebrow{ color: rgba(251,247,238,.78); }
.hero .eyebrow::before{ background: var(--gold); }
.hero .display{ color: var(--paper); }
.hero .lede{ color: rgba(251,247,238,.85); }

/* Tight title group — "Tequila" · "Tres Ese" · "Orgánico" read as one unit */
.hero-title{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero-place{
  font-family: var(--sans);
  font-size: clamp(.7rem, .85vw, .82rem);
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(176, 133, 66, .8);
  margin: .85rem 0 0;
  padding-left: .15em;
}
.hero-label{
  margin: 1.75rem 0 .15rem;
  font-family: var(--sans);
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
  letter-spacing: .52em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  /* optical alignment with the display's left edge */
  padding-left: .15em;
}
.hero-title .display{ margin: 0; }
.hero-title .display-line{
  display: block;
  line-height: .95;
}
.hero-title .display-line.italic{
  margin-top: -.05em;
  font-size: .46em;
  color: rgba(251,247,238,.88);
  letter-spacing: .02em;
}

.hero-meta{
  display:flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.8rem;
  border-top: 1px solid rgba(251,247,238,.18);
  padding-top: 1.6rem;
  width: 100%;
}
.hero-meta > div{
  display:flex; flex-direction:column; line-height:1.1; gap: .45rem;
  flex: 0 0 auto;
  min-width: 0;
  text-align: left;
}
.hero-meta span{
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--paper);
  white-space: nowrap;
  letter-spacing: -.005em;
}
.hero-meta em{
  white-space: nowrap;
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(251,247,238,.65);
  font-style: normal;
}
.hero-meta em{
  margin-top:.35rem;
  font-style:normal;
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(251,247,238,.6);
}

/* bottle trio — bottles are now in the cellar background image. Keep the grid
   cell so the copy stays on the left, but hide the PNG overlays AND their
   click hot-spots (those don't align with where the bottles are in the photo). */
.hero-trio{
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0rem, .4vw, .5rem);
  min-height: 620px;
  padding: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Invisible click hot-spots positioned directly over the three bottles in
   the cellar photo so taps go to the correct expression section. */
.hero-photo-link{
  position: absolute;
  top: 40%;          /* image lowered to bg-pos 60% — band moves down too */
  bottom: 5%;
  width: 6%;
  z-index: 4;
  cursor: pointer;
  /* Truly invisible — no hover background, no border, no outline */
  background: transparent;
  border: 0;
  text-decoration: none;
}
.hero-photo-link:hover,
.hero-photo-link:focus,
.hero-photo-link:focus-visible{
  background: transparent;
  outline: none;
}
/* Bottle centres — video grown 10% (1247 → 1372), so bottles spread slightly. */
.hero-photo-link--blanco{ left: 52%; }
.hero-photo-link--reposado{ left: 58%; }
.hero-photo-link--anejo{ left: 65%; }
@media (max-width: 960px){
  /* On phones the photo crops/scales differently — disable hot-spots and
     let users tap the nav menu instead. */
  .hero-photo-link{ display: none; }
}
/* Floor shading removed — bottles blend with the wood on their own. */
.hero-bottle{
  position: relative;
  margin: 0;
  padding: 0;
  display:flex; flex-direction:column; align-items:center;
  z-index: 2;
  transition: transform .6s var(--ease);
}
.hero-bottle img{
  height: clamp(460px, 68vh, 720px);
  width: auto;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
  /* Tight edge-lift only — the dark contact pool below grounds the bottle */
  filter:
    brightness(.94)
    contrast(1.04)
    saturate(.92)
    sepia(.06)
    drop-shadow(0 2px 0 rgba(0,0,0,.85))
    drop-shadow(0 4px 4px rgba(0,0,0,.45));
}
.hero-bottle:hover{ transform: translateY(-3px); }
/* On hover, fade the ground-shadow blob so the descriptive caption reads cleanly behind the text — bottle still has drop-shadow filter for grounding */
.hero-bottle:hover::after{ opacity: 0; }
.hero-bottle::after{ transition: opacity .4s var(--ease); }

/* Clickable overlay — each hero bottle jumps to its expression section */
.hero-bottle-link{
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: pointer;
}
.hero-bottle-link:focus-visible{
  outline: 1px solid var(--gold);
  outline-offset: 6px;
}

/* Anisotropic ground shadow — same look as the expression/store bottles */
.hero-bottle::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 60%;
  height: 26px;
  background: radial-gradient(ellipse 50% 50% at 50% 30%,
              rgba(0,0,0,.85) 0%,
              rgba(0,0,0,.45) 28%,
              rgba(0,0,0,.18) 55%,
              transparent 88%);
  filter: blur(7px);
  pointer-events: none;
  z-index: 0;
}

.hero-bottle figcaption{
  margin-top: 1rem;
  display:flex; flex-direction:column; align-items:center;
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--paper);
  letter-spacing: .04em;
  line-height: 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.hero-bottle figcaption em{
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(251,247,238,.7);
  font-style: italic;
  margin-top: .4rem;
  font-family: var(--serif);
}
.hero-bottle:hover figcaption{ opacity: 1; transform: none; }

/* plank — removed. kept as no-op so markup still validates */
.hero-plank{ display:none; }

/* Hero "Discover" — same look as all other scroll-links, pinned centered at the bottom of the hero */
.scroll-link--hero{
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  margin: 0;
  z-index: 3;
}
.scroll-link--hero:hover{
  transform: translateX(-50%) translateY(2px);
}
@keyframes bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(6px); }
}

/* ─────────── STORY ─────────── */
.story{
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--bg-soft);
  position: relative;
}
.story::before{
  content:"";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.story-grid{
  display:grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.story-media{ position: relative; aspect-ratio: 4/5; }
/* Slideshow — all slides in DOM, one .is-active at a time */
.story-slideshow,
.step-media--slideshow{
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #2a2218;
}
.story-slideshow{
  box-shadow: 0 40px 80px -30px rgba(42,34,24,.4);
}
.story-slide,
.step-slide{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  /* Sequenced fade: each slide fades fully OUT to the dark backdrop, then the
     next fades IN. Timed in JS (go()) — this is the per-direction duration. */
  transition: opacity 0.85s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;
  pointer-events: none;
  user-select: none;
  display: block;
}
.story-slide.is-active,
.step-slide.is-active{
  opacity: 1;
}

/* Slow Ken Burns drift on the active slide — gives even a static-looking
   clip a sense of motion (subtle zoom + pan, restarts each time the slide
   becomes active). Applied to both story and process-step slideshows. */
@keyframes storyKenBurns{
  from { transform: scale(1.02) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -1%); }
}
.story-slide.is-active,
.step-slide.is-active{
  animation: storyKenBurns 14s ease-out forwards;
}
@media (prefers-reduced-motion: reduce){
  .story-slide.is-active,
  .step-slide.is-active{ animation: none; }
}

/* Cultivation single stitched video: the source mixes portrait clips that
   were pillarboxed (black side-bars baked into the 1280×720 frame). The
   portrait content lives in the centre ~400px, so zoom past the bars while
   keeping a gentle drift. Overrides the default Ken Burns for this step. */
@keyframes cultZoom{
  from { transform: scale(1.55) translate(0, 0); }
  to   { transform: scale(1.66) translate(-1%, -1%); }
}
.step[data-step="01"] .step-slide.is-active{
  animation: cultZoom 22s ease-out forwards;
}
@media (prefers-reduced-motion: reduce){
  .step[data-step="01"] .step-slide.is-active{
    animation: none;
    transform: scale(1.55);
  }
}

/* Slide indicator dots — subtle, bottom-center */
.story-dots{
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: flex;
  gap: .4rem;
  z-index: 2;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.story-slideshow:hover .story-dots,
.story-slideshow:focus-within .story-dots{
  opacity: .8;
}
.story-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(251,247,238,.4);
  transition: background .3s var(--ease), transform .3s var(--ease);
  cursor: pointer;
  border: 0;
  padding: 0;
}
.story-dot.is-current{
  background: var(--paper);
  transform: scale(1.3);
}

/* Subtle prev/next arrows — hidden until hover, then fade in */
.story-nav-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  background: rgba(14,12,9,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(251,247,238,.18);
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .35s var(--ease), background .25s var(--ease), transform .25s var(--ease);
  z-index: 3;
}
.story-nav-btn--prev{ left: .75rem; }
.story-nav-btn--next{ right: .75rem; }
/* Arrows reveal on hover for ANY slideshow they live inside */
.story-slideshow:hover .story-nav-btn,
.story-slideshow:focus-within .story-nav-btn,
.step-media--slideshow:hover .story-nav-btn,
.step-media--slideshow:focus-within .story-nav-btn{
  opacity: .8;
}
/* On touch / no-hover devices, keep them subtly visible at all times */
@media (hover: none){
  .story-nav-btn{ opacity: .55; }
}
.story-nav-btn:hover{
  opacity: 1 !important;
  background: rgba(14,12,9,.7);
  transform: translateY(-50%) scale(1.06);
}
.story-nav-btn:focus-visible{
  outline: 1px solid var(--gold);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .story-slide{ transition: none; }
}
.story-ornament{
  position:absolute;
  right: -24px; bottom: -24px;
  width: 55%; aspect-ratio: 1;
  border: 1px solid var(--copper);
  pointer-events:none;
}
@media (max-width: 960px){
  /* Hide decorative outlined square on phones — it crowds the body text */
  .story-ornament{ display: none; }
}
.story-copy p{
  color: var(--ink-soft);
  margin: 0 0 1.1rem;
  max-width: 54ch;
}
.story-copy .display-sm{ margin-bottom: 1.5rem; }
.signature{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--copper-deep);
  margin-top: .5rem !important;
  text-align: left !important;
}

/* Organic certification logos — first flush-left to paragraph, last flush-right,
   middle two evenly spaced between */
.cert-logos{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 1rem;
  list-style: none;
  padding: 1.75rem 0 0;
  margin: 2rem 0 0;
  border-top: 1px solid var(--line);
}
.cert-logos li{
  flex: 0 1 auto;            /* size to content — no overlap */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .65rem;
  min-width: 0;
  text-align: center;
}
/* USDA — left-justified so its left edge aligns with the paragraph above */
.cert-logos li:first-child{
  align-items: flex-start;
  text-align: left;
}
.cert-logos li:first-child .cert-mark{ justify-content: flex-start; }
/* Bioagricert is a wide horizontal wordmark — image sized down ~40 % so it doesn't dominate.
   Centered under its label like the middle two. The mark slot keeps 64 px so all four marks
   share the same vertical baseline. */
.cert-logos li:last-child .cert-mark img{ max-height: 38px; }
.cert-mark{
  height: 64px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert-mark img{
  display: block;
  max-height: 64px;
  height: auto;
  width: auto;
  object-fit: contain;
  opacity: .94;
  transition: opacity .3s var(--ease);
}
.cert-logos li:hover .cert-mark img{ opacity: 1; }
/* When the image fails, the mark slot becomes an elegant italic monogram */
.cert-logos li.is-missing .cert-mark{
  border: 1px solid var(--copper);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  min-height: 64px;
  background: var(--paper);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--copper-deep);
  letter-spacing: -.02em;
  font-weight: 500;
  flex: 0 0 auto;
}
.cert-logos li.is-missing .cert-mark::before{
  content: attr(data-mono);
}
.cert-logos li.is-missing .cert-mark img{ display: none; }
.cert-name{
  font-family: var(--serif);
  font-style: italic;
  font-size: .9rem;
  letter-spacing: .02em;
  color: var(--copper-deep);
  text-align: center;
  line-height: 1.3;
  max-width: 22ch;
}
@media (max-width: 640px){
  /* 2 × 2 grid on phones — USDA over JAS, EU over Bioagricert. All centered. */
  .cert-logos{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1rem;
    justify-items: center;
  }
  .cert-logos li{
    flex: initial;
    width: 100%;
    align-items: center;       /* override USDA left-justify on mobile */
    text-align: center;
  }
  .cert-logos li:first-child{ align-items: center; text-align: center; }
  .cert-logos li:first-child .cert-mark{ justify-content: center; }
  .cert-mark{ height: 52px; min-height: 52px; }
  .cert-mark img{ max-height: 52px; }
  .cert-logos li.is-missing .cert-mark{ width: 52px; height: 52px; min-height: 52px; }
}

/* ─────────── PROCESS ─────────── */
.process{
  padding: clamp(6rem, 11vw, 10rem) 0;
  background: var(--bg);
}
.step{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--line);
}
.step:first-of-type{ border-top: 0; padding-top: 0; }
.step.reverse{ direction: rtl; }
.step.reverse > *{ direction: ltr; }

.step-media{
  aspect-ratio: 4/5;
  background:
    linear-gradient(160deg, #c6a979, #7a5a32),
    radial-gradient(circle at 30% 30%, rgba(255,240,200,.15), transparent 50%);
  background-blend-mode: multiply;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(42,34,24,.35);
}
.step-media{
  background-size: cover !important;
  background-position: center !important;
}
.step-media video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
/* (step-layer rules consolidated with .story-slide / .step-slide above) */
.step-media[data-img="cultivation"]{  background-image: url('../images/process-cultivation.jpg'); }
.step-media[data-img="water"]{        background-image: url('../images/process-water.jpg'); }
.step-media[data-img="roast"]{        background-image: url('../images/process-roast.jpg'); }
.step-media[data-img="fermentation"]{ background-image: url('../images/process-fermentation.jpg'); }
.step-media[data-img="distillation"]{ background-image: url('../images/process-distillation.jpg'); }
.step-media[data-img="bottling"]{     background-image: url('../images/process-distillation.jpg'); }
.step-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.25) 100%);
  z-index: 1;
  pointer-events: none;
}

.step-num{
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--copper-deep);
  margin: 0 0 1rem;
}
.step-copy .display-xs{ margin-bottom: 1.25rem; }
.step-copy p{
  color: var(--ink-soft);
  margin: 0 0 1rem;
  max-width: 52ch;
}

/* ─────────── CRAFT FILM ─────────── */
.film{
  background: var(--bg-deep);
  color: var(--paper);
  padding: clamp(1.25rem, 2.5vw, 2rem) 0 clamp(1.75rem, 3.5vw, 2.75rem);
  position: relative;
}
.film .section-stamp{ margin-top: .75rem; margin-bottom: .35rem; }
.film .section-head{ margin-bottom: clamp(2rem, 4vw, 3rem); }
.film::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251,247,238,.18), transparent);
}
.film .eyebrow{ color: rgba(251,247,238,.7); }
.film .eyebrow::before{ background: var(--gold); }
.film .display-sm{ color: var(--paper); }
.film .section-intro{ color: rgba(251,247,238,.7); }

.film-player{
  position: relative;
  margin: 0 auto;
  aspect-ratio: 16/9;
  background: #0e0c09;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(251,247,238,.06);
  cursor: pointer;
  isolation: isolate;
}
.film-player video{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.film-player::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
  z-index: 1;
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
.film-play{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  color: var(--paper);
  z-index: 2;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.film-play-ring{
  display: inline-flex;
  transition: transform .4s var(--ease);
}
.film-play:hover .film-play-ring{ transform: scale(1.06); }
.film-play-label{
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(251,247,238,.85);
}
.film-player.is-playing .film-play{ opacity: 0; pointer-events: none; }
.film-player.is-playing::after{ opacity: 0; }
.film-player.is-playing{ cursor: default; }

/* ─────────── RIBBON ─────────── */
.ribbon{
  background: var(--bg-deep);
  color: var(--paper);
  padding: clamp(3rem, 5vw, 4rem) 0;
}
.ribbon-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  text-align:center;
}
.ribbon-grid > div{
  display:flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  gap:.6rem;
  padding: 0 1rem;
  border-left: 1px solid rgba(251,247,238,.12);
  text-align: center;
}
.ribbon-grid > div:first-child{ border-left: 0; }
.ribbon-grid > div strong,
.ribbon-grid > div span{
  display: block;
  width: 100%;
  text-align: center;
}
.ribbon strong{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--paper);
}
.ribbon-lead strong{
  color: var(--gold);
  font-style: italic;
  font-size: clamp(1.7rem, 2.8vw, 2.35rem);
}
.ribbon span{
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: rgba(251,247,238,.6);
}

/* ─────────── EXPRESSIONS ─────────── */
.expressions{
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--bg);
  position: relative;
}
.expression{
  display: grid;
  grid-template-columns: 5fr 6fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.expression:first-of-type{ border-top: 0; padding-top: 0; }
.expression.reverse{ direction: rtl; }
.expression.reverse > *{ direction: ltr; }

.expression-media{
  position: relative;
  aspect-ratio: 4/5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--bg-soft);
  overflow: hidden;
  /* Bottom padding gives space under the bottle for the shadow to sit
     against (and lifts the visual base off the frame edge). */
  padding: 1rem 0 4.5rem;
}
.expression-media::before{
  content:"";
  position:absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(168,106,51,.06), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.expression-media img{
  position: absolute;
  z-index: 1;
  left: 50%;
  /* Anchor the image's bottom 12% BELOW the frame edge — pushes the visible
     bottle (centered in the square PNG with transparent margins) down so its
     base sits in the frame's lower area, right on top of the shadow. */
  bottom: 2%;          /* raised 10% from -8% */
  transform: translateX(-50%);
  height: 96%;
  width: auto;
  max-width: none;
  max-height: none;
  filter:
    drop-shadow(0 1px 0 rgba(28,18,8,.7))
    drop-shadow(0 2px 2px rgba(28,18,8,.35));   /* shadow only beneath, no side cast */
}
/* Soft contact shadow — narrow ellipse tucked under the bottle base */
.expression-media::after{
  content:"";
  position:absolute;
  left: 50%;            /* centered under the bottle */
  bottom: 3rem;
  transform: translateX(-50%);
  width: 28%;
  height: 8px;
  background:
    radial-gradient(ellipse 50% 100% at 50% 50%,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.25) 40%,
      rgba(0,0,0,.08) 70%,
      transparent 95%);
  filter: blur(4px);
  pointer-events: none;
  z-index: 0;
}

.expression-copy{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.expression-tag{
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--copper-deep);
  margin: 0 0 1rem;
}
/* "Shop Blanco →" links — same family as the expression tag and the
   "Download tech sheet" button: tracked uppercase copper. */
.expression-actions .link-quiet{
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--copper-deep);
  border-bottom: 1px solid var(--line);
  padding-bottom: .35rem;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.expression-actions .link-quiet:hover{
  color: var(--ink);
  border-color: var(--copper);
}
.expression-copy .display-xs{
  margin: 0 auto 1.25rem;
}
.expression-copy > p{
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0 auto 1.75rem;
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  text-wrap: pretty;
}

.tasting{
  margin: 0 auto 1.75rem;
  padding: 1.4rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  border-top: 1px solid var(--line);
  width: min(100%, 460px);
  text-align: left;
}
.tasting > div{
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 1.1rem;
  align-items: baseline;
}
.tasting dt{
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--copper-deep);
  margin: 0;
}
.tasting dd{
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.5;
}
.tasting dt{
  font-size: .76rem;
}

.spec-pills{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0 auto 2rem;
}
.spec-pills li{
  display: inline-flex;
  flex-direction: column;
  gap: .15rem;
  padding: .55rem .85rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  min-width: 0;
  background: var(--paper);
}
.spec-pills span{
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}
.spec-pills strong{
  font-family: var(--serif);
  font-size: .98rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .01em;
}

/* Proof pill — dark tile with ivory label (matches the other pills' background)
   and a large italic gold number. Both designed to read instantly. */
.spec-pills li.proof-pill{
  background: var(--ink);
  border-color: var(--ink);
  padding: .6rem 1.2rem;
}
.spec-pills .proof-pill span{
  color: var(--paper);
  font-weight: 500;
}
.spec-pills .proof-pill strong{
  color: var(--gold-light);
  font-style: italic;
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1;
}

/* Proof callout inside store product meta */
.product-meta .proof{
  font-family: var(--serif);
  font-style: italic;
  color: var(--copper-deep);
  font-size: 1rem;
  letter-spacing: .02em;
}

.expression-actions{
  display:flex;
  align-items:center;
  justify-content: center;
  flex-wrap:wrap;
  gap: 1.25rem 2rem;
}

/* ─────────── COCKTAILS ─────────── */
.cocktails{
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem);
  background: var(--bg-soft);
  position: relative;
}
.cocktails::before{
  content:"";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.cocktail-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.cocktail{
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  margin: 0;
}
.cocktail:hover{
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(42,34,24,.25);
  border-color: var(--copper);
}
.cocktail-media{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  margin: 0;
  background: var(--bg);
}
.cocktail-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}
.cocktail:hover .cocktail-media img{ transform: scale(1.04); }
/* Elegant fallback when the cocktail image isn't loaded yet */
.cocktail-media.is-missing{
  background:
    radial-gradient(circle at 50% 38%, rgba(176,133,66,.18), transparent 65%),
    linear-gradient(180deg, var(--bg-soft), var(--bg));
}
.cocktail-media.is-missing img{ display: none; }   /* hide the broken-image icon */
.cocktail-media.is-missing::before{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 64px; height: 88px;
  transform: translate(-50%, -55%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 88' fill='none' stroke='%238a4e1e' stroke-width='1.2'><path d='M8 14h48l-22 28v32M8 14l5 8h38l5-8M22 74h20'/></svg>") center/contain no-repeat;
  opacity: .35;
}
.cocktail-media.is-missing::after{
  content: "Image coming soon";
  position: absolute;
  left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.cocktail-body{
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.6rem 1.5rem 1.75rem;
  flex: 1;
}
.cocktail-tag{
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--copper-deep);
  margin: 0;
}
.cocktail[data-expression="reposado"] .cocktail-tag{ color: var(--gold); }
.cocktail[data-expression="anejo"] .cocktail-tag{ color: var(--copper); }
.cocktail-name{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.8vw, 1.85rem);
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.cocktail-name em{
  font-style: italic;
  color: var(--copper-deep);
}
.cocktail-tagline{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.3;
}
.cocktail-ingredients{
  list-style: none;
  margin: .25rem 0 0;
  padding: .75rem 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .92rem;
  color: var(--ink-soft);
}
.cocktail-ingredients li{
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: .75rem;
  align-items: baseline;
  text-align: left;
}
.cocktail-ingredients .amount{
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--copper-deep);
  text-align: right;
}
.cocktail-method{
  font-family: var(--serif);
  font-style: italic;
  font-size: .98rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: .5rem 0 0;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
  text-align: left !important;
}

/* Mobile cocktail grid — 3 across × 2 rows on phones too, tightened so the
   six cards stay visible in a compact layout. */
@media (max-width: 960px){
  .cocktail-grid{ grid-template-columns: repeat(3, 1fr); gap: 1.25rem .75rem; }
}
@media (max-width: 540px){
  .cocktail-grid{ grid-template-columns: repeat(3, 1fr); gap: 1rem .5rem; }
  .cocktail-body{ padding: .65rem .55rem .8rem; gap: .35rem; }
  .cocktail-name{ font-size: .85rem; line-height: 1.15; }
  .cocktail-tagline{ font-size: .6rem; letter-spacing: .04em; }
  .cocktail-ingredients{ display: none; }   /* save space — name + photo carry the card */
  .cocktail-actions{ display: none; }
}

/* ─────────── GALLERY ─────────── */
.gallery{
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--bg-soft);
  position: relative;
}
.gallery::before{
  content:"";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.gallery-item{
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--bg);
  box-shadow: 0 12px 32px -16px rgba(42,34,24,.25);
  cursor: zoom-in;
}
.gallery-item:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; }
.gallery-item--wide{
  grid-column: span 2;
  aspect-ratio: 3/2;
}
.gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1), filter .6s var(--ease);
  will-change: transform;
}
.gallery-item:hover img{
  transform: scale(1.04);
  filter: brightness(1.05);
}
.gallery-item::after{
  content:"";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(216,201,172,.25);
  pointer-events: none;
}

@media (max-width: 720px){
  /* Stay at 3 cols on phones — smaller cells, but the 2 wide tiles fill any
     would-be gaps and give a clean 6×3 rectangle (no orphan cells). */
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .gallery-item--wide{ grid-column: span 2; aspect-ratio: 3/2; }
}

/* ─────────── STORE — temporarily hidden until shop is ready ─────────── */
.store,
a[href="#store"]{
  display: none !important;
}
.store{
  padding: clamp(5rem, 10vw, 9rem) 0;
  background: var(--paper);
}
.store-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.product{
  background: var(--bg);
  border: 1px solid var(--line);
  display:flex; flex-direction:column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.product:hover{
  transform: translateY(-4px);
  border-color: var(--copper);
  box-shadow: 0 30px 60px -30px rgba(42,34,24,.25);
}
.product-img{
  position: relative;
  display:flex; align-items:flex-end; justify-content:center;
  padding: 2rem 1rem .5rem;
  background: var(--bg-soft);
  overflow: hidden;
}
/* Anisotropic ground shadow — darker at the top edge, fades downward */
.product-img::after{
  content:"";
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 60%;
  height: 24px;
  background: radial-gradient(ellipse 50% 50% at 50% 30%,
              rgba(0,0,0,.85) 0%,
              rgba(0,0,0,.45) 28%,
              rgba(0,0,0,.18) 55%,
              transparent 88%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}
.product-img img{
  position: relative;
  z-index: 1;
  height: 300px;
  width: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 2px 0 rgba(28,18,8,.85))
    drop-shadow(0 3px 3px rgba(28,18,8,.4));
}
.product-body{
  padding: 1.75rem 1.5rem 2rem;
  display:flex; flex-direction:column; gap: .85rem;
  flex: 1;
}
.product-tag{
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--copper-deep);
  margin: 0;
}
.product h3{
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 400;
  margin: 0;
}
.product-notes{
  font-style: italic;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 1rem;
  margin: 0;
}
.product-meta{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--ink-soft);
}
.price{
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--ink);
}
.store-note{
  text-align: center;
  margin-top: 3rem;
  font-size: .8rem;
  color: var(--muted);
  letter-spacing: .08em;
}

/* ─────────── BUTTONS ─────────── */
.btn{
  display:inline-flex;
  align-items:center; justify-content:center;
  padding: .95rem 1.6rem;
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  border-radius: var(--radius);
}
.btn-outline{
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-outline:hover{
  background: var(--ink);
  color: var(--paper);
}
.btn-solid{
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
.btn-solid:hover{
  background: var(--copper-deep);
  border-color: var(--copper-deep);
}

/* ─────────── CONTACT ─────────── */
.contact{
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: var(--bg-soft);
  position: relative;
}
.contact::before{
  content:"";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.contact-grid{
  display:grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 6vw, 5rem);
}
.contact-copy p{ color: var(--ink-soft); max-width: 46ch; margin: 0 0 1rem; }
.contact-copy address{
  font-style: normal;
  margin-top: 2rem;
  color: var(--ink-soft);
  line-height: 1.8;
}
.contact-copy address a{ color: var(--copper-deep); border-bottom: 1px solid var(--line); }

.contact-form{
  display:flex; flex-direction:column; gap: 1.25rem;
}
.contact-form .row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.contact-form label{
  display:flex; flex-direction:column; gap: .4rem;
}
.contact-form span{
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-form input,
.contact-form textarea{
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: .6rem 0;
  font: inherit;
  color: var(--ink);
  transition: border-color .3s var(--ease);
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline: none;
  border-bottom-color: var(--copper);
}
.contact-form textarea{ resize: vertical; }
.contact-form .btn-solid{ align-self:flex-start; margin-top: .5rem; }
.form-status{
  min-height: 1.2em;
  font-size: .85rem;
  color: var(--copper-deep);
  margin: 0;
}

/* ─────────── FOOTER ─────────── */
.site-footer{
  background: var(--bg-deep);
  color: var(--paper);
  padding: clamp(2rem, 4vw, 3rem) 0 1rem;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(251,247,238,.1);
}
/* Top-align the nav and social with each other — same offset from the row top */
.site-footer nav,
.footer-social{ margin-top: 0; padding-top: 0; }
/* Pull social up so Instagram lines up with Origin in the nav column above */
.footer-social{ margin-top: -.25rem; }
.footer-brand-block{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
}
.footer-logo{
  height: 64px;
  width: auto;
  display: block;
  margin-left: -8px;        /* pull visible glyphs flush-left with the caption */
}
.footer-sub{
  font-size: .9rem;
  font-weight: 300;        /* Orgánico: lighter */
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(251,247,238,.7);
  margin: 0;
}
.footer-sub .caption-main{
  font-size: 1em;          /* same size as Orgánico — overrides the header's 1.45em */
  font-weight: 600;        /* Tequila: bold */
  letter-spacing: .24em;
}
.footer-sub-place{
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(251,247,238,.45);
  margin: .35rem 0 0;
}
.site-footer nav{
  display:flex; flex-direction:column; gap:.6rem;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.site-footer nav a{ color: rgba(251,247,238,.75); transition: color .3s var(--ease); }
.site-footer nav a:hover{ color: var(--paper); }
.footer-social{
  display:flex; flex-direction:column; gap:.6rem;
  align-items: flex-end;
  text-align: right;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.footer-social a{ color: rgba(251,247,238,.75); transition: color .3s var(--ease); }
.footer-social a:hover{ color: var(--copper); }
.footer-qr{
  margin-top: .85rem;
  width: 96px;
  height: 96px;
  background: var(--paper);
  padding: 6px;
  border-radius: 4px;
  display: block;
}
.footer-bottom{
  padding-top: 1.5rem;
  display:flex; justify-content:space-between; align-items:center; gap:.5rem 1.25rem; flex-wrap:wrap;
  font-size: .82rem;
  color: rgba(251,247,238,.7);
  letter-spacing: .08em;
}
.footer-bottom > :first-child{ text-align: left; }
.footer-bottom > :last-child{ text-align: right; }

/* ─────────── IN-FLOW SCROLL CUE ─────────── */
/* Unified style — every arrow uses the same font, size, spacing.
   Contrast adapts to background via the on-dark variant. */
.scroll-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  width: max-content;
  margin: clamp(5rem, 9vw, 8rem) auto clamp(1rem, 2vw, 1.5rem);
  padding: .5rem 1rem .75rem;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--copper-deep);
  transition: color .3s var(--ease), transform .3s var(--ease);
  position: relative;
  z-index: 2;
}
.scroll-link:hover{
  color: var(--ink);
  transform: translateY(2px);
}
.scroll-link svg{
  width: 18px;
  height: 28px;
  animation: bob 3s var(--ease) infinite;
}
.scroll-link--on-dark{ color: rgba(251,247,238,.7); }
.scroll-link--on-dark:hover{ color: var(--paper); }
.scroll-link--up:hover{ transform: translateY(-2px); }
.scroll-link--up svg{ animation-name: bob-up; }
/* Section-specific spacing tweaks */
.story > .scroll-link{ margin-top: clamp(8rem, 13vw, 12rem); }
.film  > .scroll-link{ margin-top: clamp(2.5rem, 5vw, 4rem); margin-bottom: clamp(.25rem, 1vw, .75rem); }
@keyframes bob-up{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* ─────────── LIGHTBOX ─────────── */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(14, 12, 9, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4rem);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.lightbox[hidden]{ display: none; }
.lightbox.is-open{ opacity: 1; }
.lightbox-stage{
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.lightbox-img{
  max-width: 90vw;
  max-height: calc(100vh - 8rem);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.7);
  background: #1c1813;
  transition: opacity .25s var(--ease);
}
.lightbox.is-loading .lightbox-img{ opacity: .35; }
.lightbox-counter{
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(251,247,238,.6);
  font-family: var(--sans);
}
.lightbox-close,
.lightbox-nav{
  position: absolute;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(251,247,238,.2);
  background: rgba(14,12,9,.5);
  border-radius: 999px;
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
  z-index: 2;
}
.lightbox-close{ top: 1.25rem; right: 1.25rem; }
.lightbox-nav--prev{ left: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox-nav--next{ right: 1.25rem; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover,
.lightbox-nav:hover{
  background: var(--ink);
  border-color: var(--copper);
}
.lightbox-nav--prev:hover{ transform: translateY(-50%) translateX(-2px); }
.lightbox-nav--next:hover{ transform: translateY(-50%) translateX(2px); }
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible{ outline: 1px solid var(--gold); outline-offset: 3px; }

/* When lightbox is open, lock body scroll */
body.lightbox-open{ overflow: hidden; }

@media (max-width: 540px){
  .lightbox-close{ width: 40px; height: 40px; top: .75rem; right: .75rem; }
  .lightbox-nav{ width: 40px; height: 40px; }
  .lightbox-nav--prev{ left: .5rem; }
  .lightbox-nav--next{ right: .5rem; }
}

/* ─────────── SCROLL PAGER ─────────── */
.scroll-pager{
  position: fixed;
  right: clamp(.75rem, 2vw, 1.5rem);
  bottom: clamp(.75rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  z-index: 35;
  opacity: .35;
  transition: opacity .35s var(--ease);
}
.scroll-pager:hover,
.scroll-pager:focus-within{ opacity: 1; }
.scroll-pager-btn{
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: rgba(251,247,238,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.scroll-pager-btn:hover{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-1px);
}
.scroll-pager-btn:focus-visible{
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}
.scroll-pager[data-at="top"] [data-dir="up"],
.scroll-pager[data-at="bottom"] [data-dir="down"]{
  opacity: .35;
  pointer-events: none;
}
@media (max-width: 540px){
  .scroll-pager{ display:none; }
}

/* ─────────── REVEAL ANIMATIONS ─────────── */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-in{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
  html{ scroll-behavior: auto; }
  .reveal{ opacity:1; transform:none; }
}

/* ─────────── RESPONSIVE ─────────── */
@media (max-width: 960px){
  .primary-nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
  /* Long place line was pushing the menu off-screen — allow it to wrap on phones,
     and shrink the brand-block so the header-tools always fit on the right. */
  .brand{
    max-width: 60%;
    justify-self: start;       /* anchor brand to left edge of header */
    justify-items: start;      /* anchor each grid item (logo, captions) to left */
    text-align: left;
  }
  .brand-logo,
  .brand-caption,
  .brand-caption-place{ justify-self: start; }
  .brand-caption-place{ white-space: normal; line-height: 1.25; }
  /* TEQUILA · ORGÁNICO caption shown on mobile too — kept on one line under the logo */
  .brand-caption{
    font-size: .55rem;
    letter-spacing: .18em;
    margin-top: .35rem;
    white-space: nowrap;
  }
  .brand-caption .caption-main{ font-size: 1em; letter-spacing: .18em; }
  /* Lower the logo on mobile so it sits a bit below the top edge of the header */
  .brand-logo{ height: 42px; margin-top: .5rem; }
  /* Hero video/poster on phones — fit the WHOLE image so all 3 bottles are
     visible (smaller, but you can see them all). object-position centers it
     vertically and slightly right so the bottles sit in the middle-right. */
  .hero-bg{
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    left: 0;
    top: 0;
    transform: none;
    object-fit: contain;
    object-position: 60% center;
  }
  .hero-veil{
    background:
      linear-gradient(180deg, rgba(14,12,9,.55) 0%, rgba(14,12,9,.25) 30%, rgba(14,12,9,.65) 100%);
  }

  .primary-nav.is-open{
    display:flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    flex-direction: column;
    gap: 1.5rem;
    padding: 6rem 2rem 3rem;
    background: var(--bg);
    color: var(--ink);
    font-size: 1.25rem;
    z-index: 30;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,.2);
  }
  .primary-nav.is-open a{ color: var(--ink); }

  /* Hero on mobile — height locked to a JS-captured pixel value (--hero-h)
     so the image stays the same size when the address bar collapses on
     scroll. Falls back to 100svh when JS hasn't run yet. */
  .hero{
    align-items: flex-start;
    padding: 1.4rem 0 3rem;        /* title raised closer to the logo */
    min-height: var(--hero-h, 100svh);
    height: var(--hero-h, 100svh);
    max-height: var(--hero-h, 100svh);
  }
  /* Background image also locked so cover-scaling doesn't recalculate */
  .hero-bg{
    height: var(--hero-h, 100svh) !important;
    max-height: var(--hero-h, 100svh);
  }
  .hero-inner{
    display: block;
    padding: 0;
    text-align: left;
  }
  /* Big title, lede, place line, in-hero label, and standalone bottle PNGs all hidden on mobile */
  .hero-place,
  .hero .lede,
  .hero-label,
  .hero-title,
  .hero-trio{ display: none !important; }
  /* Claims now run across the top of the hero — three short columns, equally spaced */
  .hero-meta{
    display: flex !important;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
    position: static;
    margin: .75rem 0 0;
    padding: 0 1.25rem;
    border: 0;
    width: 100%;
    text-align: center;
    z-index: 3;
  }
  .hero-meta > div{
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    gap: .2rem;
  }
  .hero-meta span{ font-size: .82rem; font-weight: 500; }
  .hero-meta em{ font-size: .5rem; letter-spacing: .22em; }
  /* Hero photo on mobile — cover, focal point pushed all the way to the right
     so the bottles fill the viewport. */
  .hero-bg{
    object-fit: cover;
    object-position: 92% 60%;       /* eased 2% back to the left */
    transform: none;
  }
  /* Kill any borders inside the hero on mobile (the floating horizontal line) */
  .hero *{ border-top-width: 0 !important; border-bottom-width: 0 !important; }
  /* Hide the Discover arrow at the bottom of the hero on mobile */
  .scroll-link--hero{ display: none !important; }
  /* Stronger top-edge fade to pure black on mobile */
  .hero-edge-fade{
    background:
      linear-gradient(180deg,
        #15100c 0%,
        #15100c 18%,
        rgba(21,16,12,.8) 25%,
        transparent 38%,
        transparent 76%,
        rgba(21,16,12,.6) 92%,
        #15100c 100%);
  }
  .hero-bg{ filter: brightness(.95) saturate(1.05) contrast(1.05); }
  .hero-copy{ display: block; text-align: left; }
  /* Equal left + top breathing room around the title — both 1.25rem so the
     space above and to the left of "TEQUILA / Tres Ese / Orgánico" matches
     visually. */
  .hero-title{
    margin: 1.25rem 0 0;
    padding-left: 1.25rem !important;
    text-align: left;
  }
  /* Hero meta block (when shown anywhere) and any other hero text use the
     same left indent so the whole copy column lines up. */
  .hero-copy > *{ padding-left: 1.25rem; }
  .hero-copy > .hero-title{ padding-left: 1.25rem; }
  .hero .lede{
    grid-area: lede;
    text-align: justify !important;
    text-justify: inter-word;
    text-wrap: pretty;
    max-width: 100%;
    padding-left: 0;
    margin-left: 0;
  }
  /* Override removed — claims now run horizontally across the top */
  .hero-meta{
    margin-top: .75rem;
    align-self: start;
  }
  .hero-meta > div{ flex: initial; }
  /* Bottle trio on the RIGHT column — 3 bottles in a horizontal row */
  .hero-trio{
    grid-area: trio;
    min-height: 0;
    min-width: 0;
    width: 100%;
    margin: 0;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(.15rem, .8vw, .5rem);
    align-self: end;
  }
  .hero-bottle{ width: auto; flex: 0 1 auto; }
  .hero-bottle img{ height: auto; max-height: clamp(180px, 26vh, 260px); width: auto; max-width: 100%; }
  .hero-bottle figcaption{ display: none; }
  .hero-bottle::after{ display: none; }

  /* Mobile section layout — title on top, media in middle, body text below.
     Uses display:contents on the copy wrapper so its children flatten into
     the parent flex order. Single uniform gap keeps spacing consistent. */
  .story-grid,
  .step,
  .expression{
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 3vw, 1.75rem);
    grid-template-columns: 1fr; /* keep for fallback */
  }
  .contact-grid{ grid-template-columns: 1fr; }

  .story-copy,
  .step-copy,
  .expression-copy{
    display: contents;
  }

  /* Title group — order 1 (eyebrow / step-num / expression-tag + heading) */
  .story-copy > .eyebrow,
  .step-copy > .step-num,
  .expression-copy > .expression-tag{
    order: 1;
    margin: 0;
    text-align: center;
    align-self: center;     /* center the inline-flex eyebrow with its decorative line */
  }

  .story-copy > .display-sm,
  .step-copy > .display-xs,
  .expression-copy > .display-xs{
    order: 2;
    margin: 0;
    text-align: center;
    text-wrap: balance;     /* spreads lines so no single-word widow at the end */
  }

  /* Media — order 3 */
  .story-media,
  .step-media,
  .expression-media{
    order: 3;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }
  /* Bottles in Expressions on mobile — square 1024×1024 PNGs filling the
     frame's height; transparent margins overflow horizontally (clipped). */
  .expression-media{
    aspect-ratio: 4/5;
    max-width: 280px;
    padding: 1rem 0 4rem;
    align-items: flex-end;
  }
  .expression-media img{
    height: 96%;
    bottom: 4%;          /* raised 10% from -6% */
  }
  .expression-media::after{
    left: 54%;
    bottom: 2.5rem;
    width: 32%;
    height: 7px;
  }

  /* Reverse rows still come out in the same flat order on mobile */
  .step.reverse,
  .expression.reverse{ direction: ltr; }

  /* Body content — order 4 (everything else inside the copy wrappers) */
  .story-copy > p,
  .story-copy > .signature,
  .story-copy > .cert-logos,
  .step-copy > p,
  .expression-copy > p,
  .expression-copy > .tasting,
  .expression-copy > .spec-pills,
  .expression-copy > .expression-actions{ order: 4; }

  /* Make sure the Familia Tres Ese signature stays left-aligned on mobile too */
  .story-copy > .signature{
    align-self: stretch;
    text-align: left !important;
    width: 100%;
  }

  .tasting > div{ grid-template-columns: 80px 1fr; gap: 1rem; }

  .store-grid{ grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }

  /* Two-row layout on mobile: 3 facts on top, 2 facts below — both rows centered */
  .ribbon-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem 1rem;
  }
  .ribbon-grid > div{
    border-left: 0;
    padding: 0;
    gap: .35rem;
    min-width: 0;
    flex: 0 0 calc(33% - 1rem);
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  .ribbon strong{
    font-size: clamp(.85rem, 2.6vw, 1.2rem);
    line-height: 1.1;
    word-break: break-word;
  }
  .ribbon-lead strong{ font-size: clamp(.95rem, 3vw, 1.35rem); }
  .ribbon span{
    font-size: .5rem;
    letter-spacing: .12em;
    line-height: 1.2;
    word-break: break-word;
  }

  /* On phones: brand on top (full width), then nav + social side by side
     so Origin and Instagram sit on the same row at the top of the grid below. */
  .footer-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand  brand"
      "nav    social";
    gap: 2rem 1.5rem;
  }
  .footer-brand-block{ grid-area: brand; }
  .site-footer nav{ grid-area: nav; }
  .footer-social{ grid-area: social; }
}

@media (max-width: 540px){
  .contact-form .row{ grid-template-columns: 1fr; }
  .hero{ padding: 5.6rem 0 3rem; }
  .scroll-link--hero{ display:none; }
}