/* Flores de Aguatá — values transcribed from the Claude Design artboards.
   Desktop = "Flores de Aguata.dc.html", mobile (<768px) = "...Mobile.dc.html". */

/* Fonts are self-hosted on purpose: loading them from Fontshare's CDN sent
   every visitor's IP to a third party before they interacted with anything.
   Only the weights actually used are shipped. See static/fonts/NOTICE.md. */
@font-face {
  font-family: "Gambetta";
  src: url("/fonts/gambetta-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gambetta";
  src: url("/fonts/gambetta-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gambetta";
  src: url("/fonts/gambetta-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/satoshi-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/satoshi-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --cream: #F2EDE3;
  --cream-lt: #F7F3EA;
  --ink: #14140F;
  --green: #1E3B2C;
  --green-mid: #3A5F48;
  --green-hover: #2A5138;
  --dot: #8FBFA0;
  --pad: clamp(24px, 4.6vw, 104px);
  --header-h: 112px;
  --serif: "Gambetta", Georgia, serif;
  --sans: "Satoshi", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-decoration: none; }
/* clear the sticky header when jumping to an anchor */
section[id] { scroll-margin-top: 92px; }
/* The desktop header is ~113px; mission and gallery have no top padding. */
@media (min-width: 768px) { section[id] { scroll-margin-top: 128px; } }
#map { scroll-margin-top: 134px; }
#top { scroll-margin-top: 0; }
::selection { background: var(--green); color: var(--cream); }
img { display: block; max-width: 100%; }

@keyframes aguataRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --- image slots ------------------------------------------------------- */
/* A slot is a fixed-ratio box. With a photo it holds an img; without one it
   shows the art-direction note, so the layout is complete before shoot day. */
.slot {
  position: relative;
  overflow: hidden;
  background: rgba(30, 59, 44, 0.09);
  border-radius: 4px;
  width: 100%;
  height: 100%;
}
/* Hidden only once site.js is running, so no-JS visitors still see photos. */
html.js .slot {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
html.js .slot.in-view, html.js .hero__media .slot { opacity: 1; transform: none; }
.slot picture { display: contents; }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px dashed rgba(30, 59, 44, 0.28);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-align: center;
  color: rgba(20, 20, 15, 0.42);
}
/* A photo that opens full screen is a real button filling its slot. */
.slot__zoom {
  display: block; width: 100%; height: 100%; padding: 0;
  border: none; background: none; cursor: zoom-in;
}
.lightbox {
  width: min(92vw, 1180px); max-width: none; max-height: 92vh;
  padding: 0; border: none; background: none; overflow: visible;
}
.lightbox::backdrop { background: rgba(20, 20, 15, 0.88); }
.lightbox img {
  display: block; width: 100%; max-height: calc(100svh - 120px); object-fit: contain;
  border-radius: 4px; touch-action: pan-y;
}
/* Arrows and counter sit under the photo, so they never cover it. */
.lightbox__nav {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 20px;
  color: var(--cream); font-size: 15px;
}
.lightbox__nav[hidden] { display: none; }
.lightbox__arrow {
  width: 44px; height: 44px; padding: 0 0 4px;
  border: 1px solid rgba(242, 237, 227, 0.5); border-radius: 999px;
  background: rgba(20, 20, 15, 0.6); color: var(--cream);
  font-size: 28px; line-height: 1; cursor: pointer;
}
.lightbox__arrow:hover { background: var(--ink); }
.lightbox__count { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.lightbox__close {
  position: absolute; top: 12px; right: 12px;
  width: 44px; height: 44px; padding: 0;
  border: none; border-radius: 999px;
  background: rgba(20, 20, 15, 0.6); color: var(--cream);
  font-size: 26px; line-height: 1; cursor: pointer;
}
.lightbox__close:hover { background: var(--ink); }

.on-dark .slot { background: rgba(242, 237, 227, 0.08); }
.on-dark .slot--empty { border-color: rgba(242, 237, 227, 0.26); color: rgba(242, 237, 227, 0.5); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slot { opacity: 1; transform: none; transition: none; }
  .hero__body { animation: none; }
  .gallery__dots button::after { transition: none; }
  .nav--mobile { animation: none; }
}

/* --- header ------------------------------------------------------------ */
/* Header and the mobile menu stick as one unit, so the menu never needs to
   know the header's height (the artboard hardcoded top: 69px). */
.topbar { position: sticky; top: 0; z-index: 50; }
.header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px var(--pad);
  background: rgba(242, 237, 227, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(30, 59, 44, 0.14);
}
/* The client's artwork, as delivered: grey, uncorrected, full lockup. It is
   the same 255x168 file in all four places, so anything past about 160px
   wide is running past its own resolution. */
.logo { display: flex; align-items: center; gap: 14px; line-height: 1; }
.logo__mark { flex: none; width: auto; height: 64px; }
.logo__text { display: flex; flex-direction: column; gap: 2px; }
.logo__name {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(26px, 1.8vw, 32px); letter-spacing: -0.005em; color: var(--green);
}
.logo__place {
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(20, 20, 15, 0.65);
}
.nav {
  display: flex; align-items: center; gap: clamp(20px, 2.4vw, 50px);
  font-size: clamp(16px, 1.15vw, 19px); letter-spacing: 0.01em;
}
.nav a { color: var(--ink); white-space: nowrap; }
.nav a:hover { color: var(--green); }
.header__right { display: flex; align-items: center; gap: 14px; }
.langs {
  display: flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid rgba(30, 59, 44, 0.2); border-radius: 999px;
  font-size: 13px; letter-spacing: 0.08em;
}
.langs a {
  padding: 5px 12px; border-radius: 999px;
  color: rgba(20, 20, 15, 0.65);
}
.langs a[aria-current="true"] { background: var(--green); color: var(--cream); }
.menu-btn { display: none; }
.nav--mobile { display: none; }

/* --- buttons ----------------------------------------------------------- */
.btn { font-weight: 500; transition: transform 120ms ease-out; }
.btn:active { transform: scale(0.97); }
.btn--wa-header {
  padding: 12px 22px; border-radius: 999px;
  background: var(--green); color: var(--cream); font-size: 15.5px;
}
.btn--wa-header:hover { background: var(--ink); color: var(--cream); }
.btn--solid {
  padding: 14px 26px; border-radius: 999px;
  background: var(--cream); color: var(--green); font-size: 14px;
}
.btn--solid:hover { background: #fff; }
.btn--ghost {
  padding: 14px 26px; border-radius: 999px;
  border: 1px solid rgba(242, 237, 227, 0.5); color: var(--cream); font-size: 14px;
}
.btn--ghost:hover { border-color: var(--cream); color: var(--cream); }

/* Skip link: off-screen until focused, then above the sticky header. */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 10px 16px; background: var(--green); color: var(--cream); border-radius: 2px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* --- focus ------------------------------------------------------------- */
/* Keyboard focus only — :focus-visible, so a mouse click never draws a ring.
   The colour flips with the surface rather than being set per element: the
   dark sections redefine --focus-ring and everything inside them inherits it.
   `outline` follows each element's own border-radius, so the pills get pill
   rings for free. */
:root { --focus-ring: var(--green); }
.hero, .on-dark, .lightbox { --focus-ring: var(--cream-lt); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* These two are fixed, so they float over both the cream and the dark
   sections and no single colour holds. A dark ring with a cream one just
   outside it stays visible on either. */
.float-wa:focus-visible {
  outline: none;
  box-shadow:
    0 14px 40px rgba(20, 20, 15, 0.32),
    0 0 0 3px var(--ink), 0 0 0 5px var(--cream-lt);
}
.sticky-bar a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--cream-lt);
}

/* --- hero -------------------------------------------------------------- */
/* Same intent as the artboard (full-viewport, 620–1100px) but as a min-height,
   so a short viewport grows the hero instead of clipping the CTAs.
   Nothing is laid over the photograph: the type sits in a narrow column at
   the left edge and earns its contrast from a shadow, so the rest of the
   frame stays uncovered picture. Under 768px that trade stops working —
   the column is the full width there — and the hero takes a scrim back. */
/* The sticky header is in flow above the hero, so a 100vh hero pushes its own
   last line past the fold. Fill what the header leaves instead. */
.hero {
  position: relative;
  min-height: clamp(620px, calc(100svh - var(--header-h)), 1100px);
  display: flex; align-items: flex-end;
}
.hero__media { position: absolute; inset: 0; background: var(--ink); }
.hero__media .slot { border-radius: 0; }
/* The photo's right side is what stays in frame as the window narrows. */
.hero__media img { object-position: right center; }
/* A fade from the left edge, where the copy sits, to clear on the right: the
   text gets a dark ground to read against and the rest of the frame stays
   photograph. Under 768px it is replaced by the bottom-up scrim. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right,
    rgba(20, 20, 15, 0.62) 0%, rgba(20, 20, 15, 0.5) 30%,
    rgba(20, 20, 15, 0.22) 55%, rgba(20, 20, 15, 0) 78%);
}
/* No scrim lifts this one, so the art-direction note takes the on-dark ink,
   and it sits at the top of the frame rather than dead centre — centred, it
   lands on the copy at phone widths. Placeholder state only. */
.hero__media .slot--empty {
  align-items: flex-start; padding-top: clamp(28px, 6vw, 64px);
  border-color: rgba(242, 237, 227, 0.26); color: rgba(242, 237, 227, 0.5);
}
.hero__body {
  position: relative; z-index: 1;
  /* Wide enough that "Colombian Andes" gets its own line rather than a
     one-word rag, and no wider — the rest of the frame is the picture. */
  width: 100%; max-width: calc(720px + var(--pad));
  padding: 0 var(--pad) clamp(40px, 5.5vw, 92px);
  text-shadow: 0 2px 28px rgba(20, 20, 15, 0.72);
  animation: aguataRise 0.9s ease both;
}
/* The logo opens the column above the headline, in the negative
   (logo-light.png) because the grey original disappears into a dark
   photograph. The drop-shadow matches .hero__body's text-shadow, which an
   <img> does not inherit. */
.hero__logo {
  display: block; width: clamp(220px, 24vw, 340px); max-width: 100%; height: auto;
  margin-bottom: clamp(20px, 2.2vw, 30px);
  filter: drop-shadow(0 2px 28px rgba(20, 20, 15, 0.72));
}
.kicker {
  margin: 0 0 18px; font-size: 10.5px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--green-mid);
}
/* The two subjects carry the display weight; the sentence around them drops
   back, so "roses" and "Colombian Andes" read before the line does. <em> is
   what build.js renders the copy's *asterisks* as. */
.hero h1 {
  margin: 0; font-family: var(--serif); font-weight: 300;
  font-size: clamp(38px, 4.6vw, 84px); line-height: 1.02;
  letter-spacing: -0.026em; color: var(--cream-lt); text-wrap: pretty;
}
.hero h1 em { font-style: normal; font-weight: 500; color: var(--cream-lt); white-space: nowrap; }
.hero__sub {
  margin: 22px 0 0; max-width: 38ch;
  font-size: clamp(16px, 1.2vw, 19px); line-height: 1.56;
  color: rgba(247, 243, 234, 0.84);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* The altitude line is a stamp on a hairline at the foot of the column,
   not an eyebrow above the headline. */
.hero__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid rgba(242, 237, 227, 0.24);
}
.hero__place {
  font-size: 10.5px; letter-spacing: 0.26em;
  text-transform: uppercase; color: rgba(242, 237, 227, 0.74);
}
.hero__cue path { stroke: rgba(242, 237, 227, 0.45); stroke-width: 1; }

/* --- section headings -------------------------------------------------- */
.h2 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(29px, 3.4vw, 66px); line-height: 1.08;
  letter-spacing: -0.018em; text-wrap: pretty;
}

/* --- the farm ---------------------------------------------------------- */
/* Left column reads head → prose; right column holds the wide shot above the
   two thumbs. DOM order is the mobile order; areas rebuild the two-column
   desktop artboard without duplicating markup. */
.farm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "head  wide"
    "prose wide"
    ".     thumbs";
  column-gap: clamp(40px, 4.5vw, 110px);
  padding: clamp(76px, 8vw, 168px) var(--pad) clamp(68px, 7vw, 144px);
  align-items: start;
}
.farm__head { grid-area: head; }
.farm__wide { grid-area: wide; }
.farm__prose { grid-area: prose; }
.farm__thumbs { grid-area: thumbs; }
.farm__thumbs { display: flex; align-items: flex-start; gap: 14px; margin-top: 14px; }
.farm .kicker { margin-bottom: 26px; }
.farm .h2 { max-width: 16ch; }
.farm__prose {
  display: flex; flex-direction: column; gap: 22px; margin-top: 32px;
  max-width: 60ch; font-size: clamp(17px, 1.1vw, 20px); line-height: 1.68;
  color: rgba(20, 20, 15, 0.78);
}
.farm__prose p { margin: 0; }
/* The photo's own 3:2, so nothing is cropped off it. */
.farm__wide { aspect-ratio: 3 / 2; }
/* Flex-grow is the aspect (2:3 vs 3:2 → 4:9), so both photos come out the
   same height and neither is cropped. */
.farm__thumb { min-width: 0; }
.farm__thumb--tall { flex: 4 1 0; }
.farm__thumb--wide { flex: 9 1 0; }
.farm__thumb .slot, .farm__thumb img { height: auto; display: block; }
.farm__thumb .slot--empty { aspect-ratio: 3 / 2; }

/* --- mission & vision -------------------------------------------------- */
.mv {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(40px, 4.5vw, 110px); row-gap: 48px;
  padding: 0 var(--pad) clamp(68px, 7vw, 144px);
}
.mv__head { grid-column: 1 / -1; }
.mv .kicker { margin-bottom: 26px; }
.mv .h2 { max-width: 16ch; }
.mv__block p, .mv__close p {
  margin: 0; max-width: 60ch; font-size: clamp(17px, 1.1vw, 20px); line-height: 1.68;
  color: rgba(20, 20, 15, 0.78);
}
.mv__block p + p, .mv__close p + p { margin-top: 1em; }
.mv__close { grid-column: 1 / -1; border-top: 1px solid rgba(20, 20, 15, 0.18); padding-top: 40px; }
.mv__close .h2 { margin-bottom: 14px; }
.mv__close .mv__motto {
  max-width: 40ch; margin: 0 0 32px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(24px, 2vw, 34px); line-height: 1.15; color: var(--ink);
}
.mv__block { border-top: 1px solid rgba(20, 20, 15, 0.18); padding-top: 28px; }
.mv__title { margin: 0 0 16px; font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2vw, 34px); line-height: 1.15; }

/* --- varieties --------------------------------------------------------- */
.varieties {
  background: var(--green); color: var(--cream);
  padding: clamp(76px, 8vw, 160px) var(--pad) clamp(80px, 8vw, 168px);
}
.varieties__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding-bottom: 34px;
  border-bottom: 1px solid rgba(242, 237, 227, 0.22);
}
.varieties .kicker { margin-bottom: 22px; color: rgba(242, 237, 227, 0.6); }
.varieties__intro {
  margin: 0; max-width: 42ch; font-size: clamp(15.5px, 1vw, 18px);
  line-height: 1.62; color: rgba(242, 237, 227, 0.72);
}
.varieties__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start; gap: clamp(22px, 1.8vw, 34px) clamp(14px, 1.2vw, 22px);
  margin-top: 44px;
}
/* The bouquet holds the upper left, the single stem overlaps its lower corner
   and hangs past it, and the name and description read in the gap the two
   leave. The stem is out of flow, so the card's height comes from the text
   column: it starts in the gap and grows downward past the frame. Every
   percentage is the artboard's 320x540 composition, so it holds at any
   column width. */
.variety { display: flex; flex-direction: column; min-width: 0; }
.variety__media { position: relative; width: 87.5%; aspect-ratio: 14 / 19; }
.variety__bouquet { position: absolute; inset: 0; }
.variety__stem {
  position: absolute; left: 51.79%; top: 69.21%; width: 62.5%;
  aspect-ratio: 175 / 257;
  box-shadow: -14px 0 30px -18px rgba(10, 18, 13, 0.55);
}
.variety__media .slot { border-radius: 3px; }
/* A thin white mat around each photo, at the client's request. */
.variety__media .slot:not(.slot--empty) { border: 4px solid #fff; background: #fff; }
/* The float is the stem's footprint, not a visible thing: it holds the name
   and the first lines inside the gap, and lets the rest of the description
   run the full width once it clears the photo's bottom edge. */
.variety__text { margin-top: 6.25%; }
.variety__text::before {
  content: ""; float: right; width: 58.75%; padding-top: calc(37.5% + 6px);
}
/* Held to the gap's own width, so a name wider than the gap (Jacaranda) spills
   a few pixels into the gutter instead of dropping below the stem photo. */
.variety h3 {
  width: 41.25%;
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 1.55vw, 29px); letter-spacing: 0.002em;
}
.variety dl { margin: 10px 0 0; display: grid; gap: 7px; }
.variety dt {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(242, 237, 227, 0.65);
}
.variety dd {
  margin: 1px 0 0; font-size: clamp(14px, 0.95vw, 16.5px);
  line-height: 1.4; color: rgba(242, 237, 227, 0.78);
}

/* The logo carries the name, so the text wordmark steps aside before the nav
   runs into it. */
@media (min-width: 768px) and (max-width: 1100px) {
  .header .logo__text { display: none; }
  .nav { gap: 14px; font-size: 15px; }
}

/* Two columns until the cards are wide enough for the name to fit its gap.
   At four columns below ~1080px a card drops under 230px, and "Freedom" or
   "Jacaranda" runs under the stem photo. */
@media (min-width: 768px) and (max-width: 1080px) {
  .varieties__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- growing ----------------------------------------------------------- */
.growing { padding: clamp(76px, 8vw, 160px) var(--pad); }
.growing .kicker { margin-bottom: 26px; }
.growing .h2 {
  margin-bottom: 56px; font-size: clamp(28px, 3.1vw, 58px);
  line-height: 1.1; letter-spacing: -0.016em; max-width: 21ch;
}
.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: 1px; background: rgba(30, 59, 44, 0.16);
  border-top: 1px solid rgba(30, 59, 44, 0.16);
  border-bottom: 1px solid rgba(30, 59, 44, 0.16);
}
.step {
  background: var(--cream);
  padding: clamp(30px, 3.2vw, 42px) clamp(24px, 2.6vw, 34px) clamp(34px, 3.6vw, 46px);
}
.step h3 {
  margin: 0 0 12px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 1.5vw, 28px); letter-spacing: -0.008em;
}
.step p {
  margin: 0; font-size: clamp(15.5px, 1vw, 18px);
  line-height: 1.66; color: rgba(20, 20, 15, 0.72);
}

/* --- gallery ----------------------------------------------------------- */
.gallery { padding: 0 var(--pad) clamp(76px, 8vw, 160px); }
.gallery__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 26px;
}
.gallery__head h2 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 2.6vw, 50px); letter-spacing: -0.016em;
}
.gallery__place {
  margin: 0; font-size: 10.5px; letter-spacing: 0.26em;
  text-transform: uppercase; color: rgba(20, 20, 15, 0.65);
}
/* Masonry: three columns, each photo at its own ratio, read down the columns
   in filename order (portraits 01 and 08 sit at the top of columns 1 and 3). */
.gallery__grid { columns: 3; column-gap: 14px; }
.gallery__grid > div { break-inside: avoid; margin-bottom: 14px; }
.gallery__grid .slot { border-radius: 3px; height: auto; }
.gallery__grid .slot__zoom { height: auto; }
.gallery__grid img { height: auto; display: block; }
.g-tall .slot--empty { aspect-ratio: 2 / 3; }
.g-wide .slot--empty { aspect-ratio: 3 / 2; }
.g-span2 .slot--empty { aspect-ratio: 2 / 1; }
.gallery__nav { display: none; }

/* --- map --------------------------------------------------------------- */
.map { padding: 0 var(--pad) clamp(76px, 8vw, 160px); }
.map__head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; margin-bottom: 26px;
}
.map__head h2 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 2.6vw, 50px); letter-spacing: -0.016em;
}
.map__sub { margin: 0; font-size: 16px; color: rgba(20, 20, 15, 0.6); }
.map__frame { aspect-ratio: 2 / 1; max-width: max(320px, calc((100svh - 340px) * 2)); border-radius: 3px; overflow: hidden; background: #ece7dc; }
.map__frame .slot { height: 100%; border-radius: 0; }
.map__frame img { display: block; }
.map__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 18px; }
.map__load {
  font: inherit; font-size: 15px; padding: 12px 22px; cursor: pointer;
  background: var(--green); color: var(--cream-lt); border: 1px solid var(--green); border-radius: 2px;
}
.map__load:hover { background: var(--green-hover); }
.map__note { margin: 0; font-size: 13.5px; color: rgba(20, 20, 15, 0.6); flex: 1 1 240px; }
.map__dir { font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.map__frame[data-live] ~ .map__actions .map__load,
.map__frame[data-live] ~ .map__actions .map__note { display: none; }
.pin { display: block; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--green); border: 3px solid var(--cream-lt); box-shadow: 0 0 0 1px rgba(20, 20, 15, 0.25); }
.pin--town { background: var(--ink); width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.pin-label {
  position: absolute; bottom: 16px; left: 0; transform: translateX(-50%); white-space: nowrap;
  font: 15px/1 var(--serif); color: var(--ink); background: var(--cream-lt); padding: 7px 10px; border-radius: 4px;
}
.leaflet-container { font-family: var(--sans); }

.contact {
  background: var(--ink); color: var(--cream);
  padding: clamp(76px, 8vw, 160px) var(--pad) clamp(150px, 10vw, 190px);
}
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(40px, 4.5vw, 110px); align-items: end;
}
.contact .h2 {
  font-size: clamp(31px, 3.9vw, 74px); line-height: 1.04;
  letter-spacing: -0.022em; max-width: 22ch;
}
.contact__p {
  margin: 26px 0 0; max-width: 50ch; font-size: clamp(17px, 1.1vw, 20px);
  line-height: 1.64; color: rgba(242, 237, 227, 0.74);
}
.contact__actions { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1080px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } }
.action {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 34px 40px; border-radius: 8px; flex-wrap: wrap; row-gap: 8px;
  border: 1px solid rgba(242, 237, 227, 0.28);
  color: var(--cream); font-size: clamp(19px, 1.5vw, 24px); font-weight: 500;
  transition: transform 120ms ease-out;
}
.action:hover { border-color: var(--cream); color: var(--cream); }
.action:active { transform: scale(0.97); }
.action--wa { background: var(--green); border-color: var(--green); }
.action--wa:hover { background: var(--green-hover); border-color: var(--green-hover); }
.action span { font-size: clamp(16px, 1.2vw, 19px); font-weight: 400; color: rgba(242, 237, 227, 0.92); overflow-wrap: anywhere; }
.footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: 80px; padding-top: 26px;
  border-top: 1px solid rgba(242, 237, 227, 0.16);
  font-size: 12.5px; color: rgba(242, 237, 227, 0.55);
}
.footer__logo { width: 160px; height: auto; }

/* --- floating WhatsApp (desktop) --------------------------------------- */
.float-wa {
  position: fixed; right: 32px; bottom: 32px; z-index: 60;
  display: flex; align-items: center; gap: 16px;
  padding: 26px 40px; border-radius: 999px;
  background: var(--green); color: var(--cream);
  font-size: 24px; font-weight: 500;
  box-shadow: 0 14px 40px rgba(20, 20, 15, 0.32);
  transition: transform 120ms ease-out;
}
.float-wa:hover { background: var(--ink); color: var(--cream); }
.float-wa:active { transform: scale(0.97); }
.float-wa__dot { width: 14px; height: 14px; border-radius: 999px; background: var(--dot); }
.sticky-bar { display: none; }

/* --- 404 --------------------------------------------------------------- */
/* Not in the artboards. Built from the site's own scale and palette. */
.notfound {
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: clamp(28px, 4vw, 56px) var(--pad) clamp(48px, 6vw, 88px);
}
.notfound .logo { display: inline-flex; align-self: flex-start; }
.notfound__code {
  margin: clamp(56px, 12vh, 140px) 0 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(80px, 16vw, 220px); line-height: 0.9;
  letter-spacing: -0.03em; color: var(--green);
  font-variant-numeric: tabular-nums;
}
.notfound__langs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 72px);
  /* auto pushes the slack above the divider, so the links sit low on the page
     instead of leaving a dead band under them */
  margin-top: auto; padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid rgba(30, 59, 44, 0.16);
}
.notfound__title {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.2vw, 38px); line-height: 1.12;
  letter-spacing: -0.014em; text-wrap: pretty;
}
.notfound__body {
  margin: 14px 0 26px; max-width: 40ch;
  font-size: clamp(15.5px, 1vw, 18px); line-height: 1.62;
  color: rgba(20, 20, 15, 0.72);
}
.notfound__link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 999px;
  background: var(--green); color: var(--cream);
  font-size: 15px; font-weight: 500;
  transition: transform 120ms ease-out;
}
.notfound__link::after { content: "\2192"; }
.notfound__link:hover { background: var(--ink); color: var(--cream); }
.notfound__link:active { transform: scale(0.97); }

/* ======================================================================= */
/* MOBILE — transcribed from the mobile artboard                           */
/* ======================================================================= */
@media (max-width: 767px) {
  .header { padding: 14px 20px; gap: 12px; }
  /* The logo and the text wordmark cannot both fit beside the language switch
     and the menu button. The logo wins here because it carries the name
     itself; the text returns above 768px. */
  .logo__mark { height: 52px; }
  .logo__text { display: none; }
  .nav { display: none; }
  .menu-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 11px;
    border: none; background: transparent; cursor: pointer;
  }
  .menu-btn span { display: block; height: 1.5px; background: var(--green); }
  .btn--wa-header { display: none; }

  .nav--mobile {
    display: none; flex-direction: column;
    padding: 6px 20px 18px; background: var(--cream);
    border-bottom: 1px solid rgba(30, 59, 44, 0.14);
    animation: aguataRise 0.28s ease both;
  }
  .nav--mobile[data-open="true"] { display: flex; }
  .nav--mobile a {
    padding: 14px 0; font-size: 18px; color: var(--ink);
    border-bottom: 1px solid rgba(30, 59, 44, 0.12);
    transition: opacity 120ms ease-out;
  }
  .nav--mobile a:last-child { border-bottom: none; }
  .nav--mobile a:active { opacity: 0.6; }

  .hero { min-height: 88svh; }
  /* The text column is the full width here, so there is no uncovered half of
     the photograph left to protect — the shadow alone cannot carry 40px type
     over an unknown image, and the scrim comes back. */
  .hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top,
      rgba(20,20,15,0.88) 0%, rgba(20,20,15,0.66) 32%,
      rgba(20,20,15,0.3) 68%, rgba(20,20,15,0.1) 100%);
  }
  /* Clear the 77px fixed .sticky-bar, which otherwise sits on the foot of
     the column — it covered the CTAs before the meta line existed. */
  .hero__body { padding: 0 20px 117px; max-width: none; text-shadow: none; }
  .kicker { font-size: 9.5px; letter-spacing: 0.24em; margin-bottom: 14px; }
  .hero h1 { font-size: 40px; line-height: 1.04; letter-spacing: -0.02em; }
  .hero h1 em { white-space: normal; }
  .hero__sub { margin-top: 18px; font-size: 16px; line-height: 1.55; max-width: none; }
  .hero__ctas { flex-direction: column; flex-wrap: nowrap; gap: 10px; margin-top: 26px; }
  .hero__meta { margin-top: 26px; padding-top: 14px; }
  .hero__logo { margin-bottom: 18px; }
  /* 0.2em, not the artboard's 0.24em: spelled out, the Spanish stamp
     ("2.620 metros s.n.m.") wraps to two lines at 375px and stops reading
     as a stamp. The English one fits either way. */
  .hero__place { font-size: 9.5px; letter-spacing: 0.2em; }
  .hero__cue { display: none; }
  .btn--solid, .btn--ghost {
    display: flex; align-items: center; justify-content: center;
    height: 52px; padding: 0 20px; font-size: 15.5px;
  }

  .h2 { font-size: 31px; line-height: 1.1; letter-spacing: -0.016em; }

  /* DOM order is already the artboard order: head, wide, prose, thumbs. */
  .farm { display: block; padding: 56px 20px 52px; }
  .farm .kicker { margin-bottom: 18px; }
  .farm .h2 { max-width: none; }
  .farm__prose { margin-top: 24px; gap: 18px; font-size: 16.5px; line-height: 1.62; max-width: none; }
  .farm__wide { margin-top: 26px; }
  .farm__thumbs { gap: 10px; margin-top: 24px; }

  .varieties { padding: 56px 20px 60px; }
  .varieties__head { display: block; padding-bottom: 0; border-bottom: none; }
  .varieties .kicker { margin-bottom: 18px; }
  .varieties__intro { margin-top: 14px; font-size: 15.5px; line-height: 1.58; max-width: none; }
  /* One column under 768px: at half the phone's width the name has no gap
     left to sit in, and the two photos stop reading as one composition. */
  .varieties__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px; margin-top: 32px; padding-top: 28px;
    border-top: 1px solid rgba(242, 237, 227, 0.22);
  }
  .variety h3 { font-size: 26px; }
  .variety dl { margin-top: 8px; }
  .variety dd { font-size: 14px; }

  .mv { display: block; padding: 0 20px 52px; }
  .mv .kicker { margin-bottom: 18px; }
  .mv .h2 { max-width: none; }
  .mv__block { margin-top: 30px; padding-top: 22px; }
  .mv__block p, .mv__close p { font-size: 16.5px; line-height: 1.62; }
  .mv__close { margin-top: 30px; padding-top: 28px; }
  .mv__close .mv__motto { margin-bottom: 22px; }
  .growing { padding: 56px 20px 52px; }
  .growing .kicker { margin-bottom: 18px; }
  .growing .h2 { margin-bottom: 30px; font-size: 30px; line-height: 1.12; max-width: none; }
  .steps { display: flex; flex-direction: column; }
  .step { padding: 26px 0 30px; }
  .step h3 { margin-bottom: 10px; font-size: 22px; }
  .step p { font-size: 15.5px; line-height: 1.62; }

  .map { padding: 0 20px 52px; }
  .map__head { margin-bottom: 16px; }
  .map__head h2 { font-size: 28px; }
  .map__sub { font-size: 14.5px; }
  .pin-label { font-size: 12px; padding: 5px 7px; bottom: 20px; }
  .gallery { padding: 0 20px 52px; }
  .gallery__head { margin-bottom: 16px; }
  .gallery__head h2 { font-size: 28px; }
  .gallery__place { font-size: 9px; letter-spacing: 0.2em; }
  .gallery__grid {
    columns: auto; display: flex; gap: 10px; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 -20px; padding: 0 20px;
  }
  .gallery__grid::-webkit-scrollbar { display: none; }
  /* Every slide is a square; landscape fills the width, portrait the height,
     both centred, so the track height never jumps between photos. */
  .gallery__grid > div {
    flex: 0 0 100%; aspect-ratio: 1; margin: 0;
    display: flex; align-items: center; justify-content: center;
    scroll-snap-align: center;
  }
  .g-tall .slot { width: auto; height: 100%; aspect-ratio: 2 / 3; }
  .g-tall .slot__zoom, .g-tall img { height: 100%; width: 100%; }
  .g-span2 .slot--empty, .g-wide .slot--empty, .g-tall .slot--empty { width: 100%; aspect-ratio: auto; height: 100%; }
  .gallery__nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-top: 16px;
  }
  /* The active dot grows on a transform rather than on width, so the row
     never reflows: the other dots hold still while it expands, instead of
     shuffling sideways on every swipe. The pill overflows its 7px slot into
     the gap, which is why the gap is 4px, the same as the dot. Each button is
     the dot plus its gap (8px) and may shrink to 6px, so the row narrows instead
     of crushing the counter once there are too many photos for 375px (39 now).
     The button keeps its radius so the focus ring stays round. */
  .gallery__dots { display: flex; align-items: center; min-width: 0; }
  .gallery__dots button {
    position: relative; flex: 0 1 8px; min-width: 6px;
    height: 4px; padding: 0; border: none; border-radius: 999px;
    background: none; cursor: pointer;
  }
  .gallery__dots button:last-child { flex-basis: 4px; min-width: 4px; }
  .gallery__dots button::before { content: ""; position: absolute; inset: -10px -2px; }
  .gallery__dots button::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
    border-radius: 999px; background: rgba(30, 59, 44, 0.25);
    transition: transform 160ms ease-out, background 160ms ease-out;
  }
  .gallery__dots button[aria-current="true"]::after {
    transform: scaleX(3); background: var(--green);
  }
  .gallery__counter {
    flex: none; white-space: nowrap;
    margin: 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(20, 20, 15, 0.65); font-variant-numeric: tabular-nums;
  }

  .contact { padding: 56px 20px 120px; }
  .contact__grid { display: block; }
  .contact .h2 { font-size: 33px; line-height: 1.08; letter-spacing: -0.02em; max-width: none; }
  .contact__p { margin: 18px 0 30px; font-size: 16.5px; line-height: 1.6; max-width: none; }
  .contact__actions { gap: 12px; }
  .action {
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 3px; padding: 17px 20px;
  }
  .action span { font-size: 12.5px; }
  .footer {
    flex-direction: column; align-items: flex-start;
    gap: 8px; margin-top: 48px; padding-top: 22px; font-size: 12px;
  }

  .float-wa { display: none; }
  .sticky-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(242, 237, 227, 0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(30, 59, 44, 0.16);
    max-width: 520px; margin: 0 auto;
  }
  .sticky-bar a { transition: transform 120ms ease-out; }
  .sticky-bar a:active { transform: scale(0.97); }
  .sticky-bar__wa {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 52px; border-radius: 999px;
    background: var(--green); color: var(--cream); font-size: 16px; font-weight: 500;
  }
  .sticky-bar__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--dot); }
  .sticky-bar__call {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 999px;
    border: 1px solid rgba(30, 59, 44, 0.3); color: var(--green); font-size: 19px;
  }
}