/* =========================================================
   ALL JUICE Co. — fluid templates
   Single stylesheet, mobile-first.
   ========================================================= */

:root {
  /* Brand palette — sampled from the PSD designs */
  --c-bg:           #ffffff;
  --c-ink:          #1c1c1c;
  --c-ink-soft:     #4a4a4a;
  --c-muted:        #8a8a8a;
  --c-line:         #e6e6e6;

  --c-green:        #77a950;   /* "Pillars" / description band (sampled) */
  --c-green-deep:   #5b8c39;

  --c-aljuice:      #b73e5f;   /* AlJuice pink */
  --c-aljuice-soft: #d97a8f;

  --c-alphonso-1:   #e08a2c;   /* Alphonso gradient start */
  --c-alphonso-2:   #b7331f;   /* Alphonso gradient end   */

  --c-stmaarten-1:  #ebb442;   /* St Maarten yellow (sampled) */
  --c-stmaarten-2:  #df835c;   /* St Maarten orange (sampled) */
  --c-stmaarten-sky:#7cc5dc;

  --c-footer:       #0a0a0a;
  --c-footer-ink:   #f4f4f4;

  /* Layout */
  --container:      1280px;
  --gutter:         clamp(16px, 4vw, 48px);
  --radius:         6px;

  /* Type scale — calibrated against the PSD desktop render proportions.
     (PSD is 300dpi/print so its raw pt values don't translate 1:1 to screen,
     but the visual proportions of the comp give us these web targets.) */
  /* Type scale aligned to PSD point sizes (12, 14, 18, 20, 24, 32, 35, 43, 47, 51, 56) */
  --fs-xs:   0.75rem;                                   /* 12px — legal */
  --fs-sm:   0.875rem;                                  /* 14px — body / nav / footer caps */
  --fs-base: 1rem;                                      /* 16px — body alt / variant label */
  --fs-md:   1.125rem;                                  /* 18px — secondary heading */
  --fs-lg:   1.25rem;                                   /* 20px — pillar heading */
  --fs-xl:   clamp(1.5rem, 1.1rem + 1.2vw, 1.875rem);   /* 24-30px — section h2 (PSD 24-32pt) */
  --fs-hero: clamp(1.75rem, 1.2rem + 1.8vw, 2.6875rem); /* 28-43px — display heading */

  --ff-sans:    "Red Hat Text", "Helvetica Neue", "Inter", "Arial", system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: relative;
  z-index: 50;
  background: transparent;
  color: #fff;       /* white nav across the site (transparent over hero) */
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 88px;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.brand-mark img {
  display: block;
  height: clamp(28px, 2.4vw, 38px);
  width: auto;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  padding: 0;
  color: #fff;
}
.nav-toggle__icon { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.nav-toggle__icon rect { fill: #fff; }
.nav-toggle__icon--close { display: none; }
.site-header[data-open="true"] .nav-toggle__icon--menu { display: none; }
.site-header[data-open="true"] .nav-toggle__icon--close { display: block; }
.primary-nav {
  display: none;
}
.primary-nav > ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
.primary-nav a {
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.9;
  transition: opacity .15s ease;
}
.primary-nav a:hover { opacity: 1; }
/* Sub-nav (brand pages under "Our Brands") — only shown in the mobile overlay. */
.primary-nav__sub { display: none; }

.primary-nav .socials {
  display: flex; gap: 0.65rem;
  padding-left: 1rem;
}
.primary-nav .socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  transition: opacity .15s ease, transform .15s ease;
}
.primary-nav .socials a:hover { opacity: 0.9; transform: translateY(-1px); }
.social-ico img { width: 100%; height: 100%; display: block; object-fit: contain; }

/* Mobile fullscreen overlay menu */
.site-header[data-open="true"] {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
}
.site-header[data-open="true"] .brand-mark,
.site-header[data-open="true"] .nav-toggle {
  position: relative;
  z-index: 65;
}
.site-header[data-open="true"] .primary-nav {
  display: flex;
  position: fixed;
  inset: 0;
  background: url('../assets/images/home/bg_mobile_nav.jpg') center/cover;
  z-index: 60;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  padding: 6rem 1.5rem 2rem;
}
.site-header[data-open="true"] .primary-nav > ul {
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
  width: 100%;
}
.site-header[data-open="true"] .primary-nav a {
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: #fff;
  opacity: 1;
  display: block;
  text-align: left;
}
.site-header[data-open="true"] .primary-nav__sub {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0 0 0 1.25rem;
  gap: 0.85rem;
}
.site-header[data-open="true"] .primary-nav__sub a {
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
  display: block;
  text-align: left;
}
.site-header[data-open="true"] .primary-nav .socials {
  display: flex;
  justify-content: flex-start;
  padding: 1.25rem 0;
  border-bottom: 2px solid #fff;
  gap: 1rem;
  margin-top: 1rem;
}
.site-header[data-open="true"] .primary-nav .socials a {
  width: 32px; height: 32px;
}

@media (min-width: 860px) {
  .nav-toggle { display: none; }
  .primary-nav { display: block !important; position: static !important; padding: 0 !important; }
}

/* ---------- Hero (homepage + brand pages) ----------
   Layered hero: a wide background image anchored to the bottom-center,
   with a transparent product cutout floating over it (also bottom-center).
   The hero is at least 100vh tall so the product is never clipped.
   As the viewport grows, more of the bg's left/right/top is exposed —
   the bg sits at native size; on larger viewports a brand-coloured fallback
   shows around it. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: #1d2a17;
  margin-top: -88px;       /* lift hero behind sticky transparent nav */
  height: 100vh;
  height: 100svh;          /* full viewport height, mobile-safe */
  min-height: 320px;       /* shrinks with short viewports — keep arrow + product visible */
  display: block;
}
html[data-ss="1"] .hero { height: 100vh; min-height: 720px; }
html[data-ss="1"] .hero__product { max-height: calc(100vh - 160px); }
/* Narrow + tall viewports (phones in portrait): a 100vh hero stretches the
   bg/product into a long awkward column — cap it at 60vh instead, and hide
   the scroll cue since the hero's already short enough that the next section
   is obviously below. */
@media (max-aspect-ratio: 3/4) {
  .hero {
    height: 60vh;
    height: 60svh;
  }
  .hero .scroll-cue { display: none; }
}
.hero__bg,
.hero__product {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  display: block;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: none;
  object-fit: cover;
  object-position: center bottom;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 0;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.15) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero__product {
  z-index: 2;
  width: auto;
  height: auto;
  max-width: min(96vw, 1800px);
  /* Reserve ~200px of vertical chrome (88 nav + breathing room) so the
     product never crashes into the nav on short viewports. */
  max-height: calc(100vh - 200px);
  /* Cartons sit on the wooden surface at the bottom of the bokeh — keep
     the bottom margin small so the product is anchored low. */
  margin-bottom: clamp(1rem, 6vh, 4rem);
}
/* Larger viewports: scale the product up so it doesn't look small in the
   wide hero. Bottom margin stays small — product remains on the surface. */
@media (min-width: 1920px) and (min-height: 700px) {
  .hero__product {
    height: 640px;
    width: auto;
    max-height: none;
  }
}
@media (min-width: 2400px) and (min-height: 900px) {
  .hero__product {
    height: 800px;
  }
}
/* per-page brand-coloured fallback that shows around the bg on very wide viewports */
.hero--aljuice    { background-color: #2d3826; }
.hero--alphonso   { background-color: #2a2418; }
.hero--stmaarten  { background-color: #15324a; }
/* St. Maarten: drop the bottom margin on the cartons so they sit lower in
   the hero, increasing the gap between the logo (in the bg image) and the
   carton overlay. */
.hero--stmaarten .hero__product { margin-bottom: 0; }
.hero--homepage   { background-color: #1f2c18; }

/* Brand pages: the hero <section> carries its own background-image (set inline
   from brand config) — anchor it to the bottom of the section, scale by the
   viewport height so the image grows/shrinks with the window height, and keep
   the same breathing room from the viewport floor as the product cutout. */
.hero[style*="background-image"] {
  background-repeat: no-repeat;
  background-size: auto 100%;       /* image height = viewport height */
  background-position: center bottom;
  padding-bottom: clamp(2rem, 12vh, 9rem);
}
/* Alphonso bg sits a touch lower than other brands — shift down 60px while
   stretching the image height to keep the top edge flush against the section. */
.hero--alphonso[style*="background-image"] {
  background-position: center calc(100% + 60px);
  background-size: auto calc(100% + 60px);
}
.hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: end center;
  min-height: clamp(420px, 64vh, 720px);
  padding-block: clamp(2rem, 6vw, 5rem);
}
.hero__cartons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: clamp(0.5rem, 2vw, 1.5rem);
  width: 100%;
  align-items: end;
}
.hero__cartons.cols-3 { grid-template-columns: repeat(3, 1fr); }
.hero__cartons.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin-inline: auto; }
/* Carton slots hold spacing for product cutouts.
   Drop an <img class="carton"> inside (or set background-image) to fill them. */
.carton-slot {
  aspect-ratio: 3 / 5;
  border-radius: var(--radius);
  background: transparent;
  display: grid; place-items: center;
  font-size: 0;            /* hide the placeholder label until populated */
  color: transparent;
  padding: 0.5rem;
}
.carton-slot > img,
.carton-slot > .carton {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Floating scroll cue, anchored 50px from the bottom of the hero */
.hero .scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 6vh, 50px);
  transform: translateX(-50%);
  display: block;
  width: clamp(48px, 7vw, 96px);
  height: auto;
  z-index: 4;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.25));
  animation: scroll-cue-bob 2.4s ease-in-out infinite;
  transition: transform .15s ease, filter .15s ease;
}
.hero .scroll-cue:hover {
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.35)) brightness(1.05);
}
.hero .scroll-cue img {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes scroll-cue-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .scroll-cue { animation: none; }
}

/* ---------- Back-to-top button ----------
   Same arrow asset as the header scroll-cue (96px), rotated 180°, sized a
   third smaller (64px), pinned to the bottom-right with 20px gutter. */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  z-index: 60;
  display: block;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.back-to-top[hidden] { display: none; }
.back-to-top img {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(180deg);
  pointer-events: none;
}
.back-to-top:hover { transform: translateY(-2px); }

/* ---------- About AlJuiceCo. ---------- */
.about {
  position: relative;
  background-color: #f6f7f6;
  background-image: url('../assets/images/home/home_about_bg.jpg');
  background-size: cover;
  background-position: center;
  padding-block: clamp(2.5rem, 7vw, 5rem);
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.about .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 33.333%;
  margin-inline: auto;
  text-align: left;
  /* Initial state — JS drives opacity+transform tied to scroll position
     (see updateAboutFade in footer.php). Until JS runs we hide so there's
     no flash of unfaded content. */
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}
@media (max-width: 859px) {
  .about { min-height: 0; }
  .about .container { max-width: 100%; }
}
/* Medium widths: 2/3 — the 1/3 default starts to look too narrow once the
   layout has the room. */
@media (min-width: 860px) and (max-width: 1279px) {
  .about .container { max-width: 66.666%; }
}
@media (min-width: 1280px) {
  .about .container { max-width: 40%; }
}
@media (min-width: 1600px) {
  .about .container { max-width: 44%; }
}
.about.is-visible .container {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .about .container { opacity: 1; transform: none; transition: none; }
}
.about__title {
  font-family: var(--ff-sans);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-md);
  margin-bottom: 0.35rem;
  color: #000;
}
.about p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: 70ch;
  color: #000;
}
.about p:last-child { margin-bottom: 0; }

/* ---------- Pillars / description band ---------- */
.band {
  background: var(--c-green);
  color: #fff;
  padding-block: clamp(1.25rem, 2.5vw, 2rem);
}
.band--split { padding-block: 0; }
.band--split .band__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}
.band--split .band__copy {
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
}
.band--split .band__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 220px;
}
.band--split .band__media > div {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 240px;
}
@media (min-width: 860px) {
  .band--split .band__grid { grid-template-columns: 3fr 2fr; }
}

.band h2 {
  font-family: var(--ff-sans);
  font-size: var(--fs-xl);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1.5rem;
}
.band p {
  font-size: var(--fs-md);
  max-width: 60ch;
  margin: 0 auto;
}
/* ---------- Pillars: stacked panels with fade-in on scroll ---------- */
.pillars-section {
  background: var(--c-green);
  color: #fff;
  position: relative;
}
.pillars-section__heading {
  text-align: center;
  padding: clamp(2rem, 5vw, 3rem) var(--gutter) 0;
  margin: 0;
}
.pillars-section__heading h2 {
  font-family: var(--ff-sans);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-md);
  line-height: 1.2;
  margin: 0;
}

/* Default (mobile / no-JS): pillars are a normal vertical stack */
.pillar-stack {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--gutter) clamp(2rem, 5vw, 3rem);
}
.pillar-stack > div { width: 100%; }

.pillar-panel {
  display: grid;
  gap: 1rem;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.pillar-panel__eyebrow { display: none; }
.pillar-panel__media {
  width: 100%;
  aspect-ratio: 952 / 765;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  transform: rotate(1.5deg);
}
.pillar-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pillar-panel__copy h3 {
  font-family: "Red Hat Text", "Helvetica Neue", "Arial", sans-serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.125rem;
  margin: 0 0 0.5rem;
}
.pillar-panel__copy p {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 70ch;
}

/* Mobile / fallback: panels are simply visible (no scroll-driven effects). */
.pillar-panel { opacity: 1; }

/* Desktop: matt-morris-style pinned crossfade. Each .crossfade-* wrapper
   takes one viewport-height of scroll; the panel inside flips to
   position: fixed while .active so it stays pinned full-viewport while its
   wrapper passes through, with opacity driven by scroll progress
   (25% buffer + 50% fade + 25% buffer). Z-stacking is FROM > BOTH(first)
   > BOTH(second) > TO so as each upper panel fades it reveals the next.
   Falls back to the mobile vertical stack on shorter viewports. */
@media (min-width: 860px) and (min-height: 600px) {
  .pillar-stack {
    display: block;
    padding: 0;
    position: relative;
  }
  .pillar-stack > .crossfade-from,
  .pillar-stack > .crossfade-both,
  .pillar-stack > .crossfade-to {
    position: relative;
    height: 100vh;
    width: 100%;
  }
  /* Sticky section heading: stays put while the pinned pillar panels
     crossfade beneath it. */
  .pillars-section__heading {
    display: block;
    position: sticky;
    top: 80px;
    z-index: 10;
    pointer-events: none;
    padding: clamp(1.5rem, 4vh, 2.25rem) var(--gutter) 0;
    text-align: center;
    transition: opacity .35s ease;
    margin: 0;
  }
  .pillars-section__heading.is-released { opacity: 0; }

  .pillar-stack .pillar-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    background: var(--c-green);
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    justify-items: center;
    text-align: center;
    gap: clamp(1rem, 2vh, 1.5rem);
    /* Top padding clears the sticky heading area. */
    padding: clamp(150px, 18vh, 200px) clamp(1.5rem, 5vw, 3rem) clamp(2rem, 6vh, 4rem);
    box-sizing: border-box;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .pillar-stack .pillar-panel__media {
    /* cap the polaroid so it doesn't dominate on tall viewports. */
    width: min(560px, 80vw, calc(55vh * 952 / 765));
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    line-height: 0;
    overflow: visible;
  }
  .pillar-stack .pillar-panel__media img {
    display: block;
    width: 100%;
    aspect-ratio: 952 / 765;
    object-fit: cover;
    height: auto;
  }
  .pillar-stack .pillar-panel__copy {
    padding: 0;
    max-width: 60ch;
  }

  /* Pinning + stacking. (scoped to .pillar-stack so the same crossfade
     classes can be reused for the hero/about transition.) */
  .pillar-stack .pillar-panel { visibility: hidden; }

  .pillar-stack .crossfade-from .pillar-panel { position: absolute; visibility: visible; }
  .pillar-stack .crossfade-from.active .pillar-panel { position: fixed; }
  .pillar-stack .crossfade-from.post .pillar-panel { visibility: hidden; }
  .pillar-stack > .crossfade-from { z-index: 4; }

  .pillar-stack .crossfade-both .pillar-panel { position: fixed; }
  .pillar-stack .crossfade-both.active .pillar-panel { visibility: visible; }
  .pillar-stack > .crossfade-both.active { z-index: 3; }
  .pillar-stack > .crossfade-both.active + .crossfade-both.active { z-index: 2; }

  .pillar-stack .crossfade-to .pillar-panel { position: fixed; }
  .pillar-stack .crossfade-to.active .pillar-panel,
  .pillar-stack .crossfade-to.post   .pillar-panel { visibility: visible; }
  .pillar-stack .crossfade-to.post .pillar-panel { position: absolute; }
  .pillar-stack > .crossfade-to.active { z-index: 1; }

  /* Neutralize the mobile fade-in class on desktop (JS drives opacity). */
  .pillar-panel.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* Hero -> About crossfade. The hero pins fixed-full-viewport while its
   wrapper scrolls past, fading from opacity 1 → 0; the about wrapper is
   pinned underneath so it's revealed as the hero fades out. After the
   transition the about returns to absolute positioning inside its wrapper
   and scrolls normally into the pillars below. */
@media (min-width: 860px) and (min-height: 600px) {
  .crossfade-hero {
    position: relative;
    height: 100vh;
    width: 100%;
    margin-top: -88px;
    z-index: 2;
  }
  .crossfade-hero > .hero {
    position: absolute;
    inset: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
  .crossfade-hero.active > .hero,
  .crossfade-hero.post > .hero {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 100vh;
  }
  .crossfade-hero.post { z-index: -1; }

  .crossfade-about {
    position: relative;
    height: 100vh;
    width: 100%;
  }
  .crossfade-about > .about {
    position: absolute;
    inset: 0;
    margin: 0;
    min-height: 0;
    height: 100%;
    width: 100%;
  }
  .crossfade-about.pre { z-index: -1; }
  .crossfade-about.pre > .about,
  .crossfade-about.active > .about { position: fixed; }
  .crossfade-about.post > .about { position: absolute; }
}

/* ---------- Brand panels (homepage "Our Brands") ---------- */
.section-title {
  font-family: var(--ff-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  font-size: var(--fs-xl);
  padding-block: clamp(2rem, 5vw, 3rem);
}

.brands {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .brands { grid-template-columns: repeat(3, 1fr); } }

/* "OUR BRANDS" floats over the top of the first panel — 1rem, white, caps */
.brands__title {
  position: absolute;
  top: clamp(1.25rem, 2.5vw, 2rem);
  left: clamp(0.85rem, 1.75vw, 1.5rem);
  margin: 0;
  z-index: 5;
  font-family: var(--ff-sans);
  font-size: var(--fs-md);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fff;
  pointer-events: none;
}

.brand-panel {
  position: relative;
  isolation: isolate;
  /* Stack logo + cartons; the cartons set their own natural height, and the
     logo sits above with a fixed gap so the logo→cartons distance stays
     constant across viewport widths. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  padding-inline: clamp(0.4rem, 1vw, 0.85rem);
  padding-top: clamp(0.875rem, 3vw, 3rem);
  padding-bottom: clamp(0.5rem, 1vw, 1rem);
  /* fluid floor — at wide viewports the tile reads at PSD-comp proportions,
     at narrow widths it shrinks with the content rather than padding above */
  min-height: clamp(160px, 24vw, 440px);
  color: #fff;
  text-align: center;
  overflow: hidden;
  transition: filter .2s ease;
}
@media (max-width: 371px) {
  /* Very narrow viewports: bump the brand panel top padding so the floating
     "OUR BRANDS" label doesn't overlap the brand logo below it. */
  .brand-panel {
    padding-top: calc(0.875rem + 10px);
  }
}
@media (max-width: 599px) {
  /* Single-column: switch logo + cartons to width-driven sizing so the
     logo always renders at exactly 1.2× the cartons' width. Set a tall
     min-height tuned to St. Maarten's natural carton aspect so all three
     brand panels render at the same height (St. Maarten cartons are taller
     than AlJuice/Alphonso, so this floor matches the tallest). */
  .brand-panel {
    --carton-w: 60%;
    grid-template-rows: auto auto;
    row-gap: clamp(0.75rem, 2vw, 1.25rem);
    padding-block: clamp(1.25rem, 4vw, 2rem);
    min-height: clamp(360px, 100vw, 500px);
  }
  .brand-panel__logo {
    height: auto;
    width: calc(var(--carton-w) * 1.2);
    max-width: 96%;
  }
  .brand-panel__cartons {
    height: auto;
  }
  .brand-panel__cartons img {
    height: auto;
  }
}
.brand-panel:hover { filter: brightness(1.05); }
.brand-panel--aljuice    { background: var(--c-aljuice); }
.brand-panel--alphonso   { background: linear-gradient(135deg, var(--c-alphonso-1), var(--c-alphonso-2)); }
.brand-panel--stmaarten  { background: linear-gradient(180deg, var(--c-stmaarten-sky) 0%, var(--c-stmaarten-1) 70%, var(--c-stmaarten-2) 100%); }

.brand-panel__bg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: -2;
}
/* (no overlay vignette — PSD panels render clean) */

/* Width pact between logo and cartons:
   the cartons render at --carton-w of the panel width, and the logo extends
   10% past the cartons on either side (so logo width = 1.2 × cartons).
   Panels with fewer cartons get a narrower band so per-carton size matches. */
.brand-panel { --carton-w: 90%; --carton-count: 3; }
.brand-panel--stmaarten { --carton-count: 2; }
/* 90% × (count / 3) — 3-carton panels render at 90% width, 2-carton at 60% */
.brand-panel { --carton-w: calc(90% * (var(--carton-count) / 3)); }

.brand-panel__logo {
  width: calc(var(--carton-w) * 1.2);
  max-width: 96%;
  height: auto;
}

.brand-panel__cartons {
  width: var(--carton-w);
  display: block;
}
/* St. Maarten carton image renders 13px narrower so the per-carton width
   visually matches the AlJuice/Alphonso panels. */
.brand-panel--stmaarten .brand-panel__cartons {
  width: calc(var(--carton-w) - 13px);
}
.brand-panel__cartons img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Variant grid (brand pages) ---------- */
/* ---------- Brand-page description band ----------
   Mobile : copy spans full width, the two fruit cells sit 50/50 below.
   Desktop: 4fr 1fr 1fr — copy 2/3, two fruit cells 1/6 each. */
.brand-desc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--c-green);
  color: #fff;
  min-height: clamp(220px, 22vw, 320px);
}
.brand-desc__copy { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .brand-desc { grid-template-columns: 4fr 1fr 1fr; }
  .brand-desc__copy { grid-column: auto; }
  /* St. Maarten only: 50% copy, 25% / 25% fruit cells. */
  body.brand-stmaarten .brand-desc { grid-template-columns: 2fr 1fr 1fr; }
}
.brand-desc__copy {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.75rem) clamp(1.25rem, 3vw, 2.5rem);
}
.brand-desc__copy p {
  font-size: 1.1875rem;
  max-width: 70ch;
  line-height: 1.55;
  text-align: left;
  margin: 0;
}
.brand-desc__media {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 200px;
}

/* ---------- Variants grid (brand pages) ---------- */
.variants {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .variants.cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px) { .variants.cols-2 { grid-template-columns: repeat(2, 1fr); } }

.variant {
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2rem);
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;        /* vertically center carton + label */
  gap: clamp(1rem, 2vw, 1.5rem);
}
.variant figure {
  margin: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.variant figure img {
  width: auto;
  max-width: 70%;
  height: auto;
  max-height: clamp(220px, 26vw, 380px);
  object-fit: contain;
}
.variant h3 {
  font-family: var(--ff-sans);
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}
/* Papaya carton has extra transparent space on its right edge — nudge the
   image left to visually center it in its tile. */
.variant--papaya figure img { transform: translateX(8px); }

/* ---------- Contact form ---------- */
.contact {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5rem);
  background: #f0f0f0;
}
.contact__bg { display: none; }
.contact__card {
  background: transparent;
  padding: 0;
  width: 100%;
  max-width: 33.333%;
  margin: 0 auto;
}
@media (max-width: 859px) {
  .contact__card { max-width: 100%; }
}
.contact h2 {
  font-family: var(--ff-sans);
  font-size: var(--fs-md);
  line-height: 1.2;
  font-weight: 900;
  text-transform: uppercase;
  text-align: left;
  margin-bottom: 0.35rem;
}
.contact p {
  font-family: var(--ff-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  text-align: left;
  color: var(--c-ink);
  margin-bottom: 1rem;
}
.contact form {
  display: grid;
  gap: 0.85rem;
}
.contact input,
.contact textarea {
  width: 100%;
  font: inherit;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: #fafafa;
  color: var(--c-ink);
}
.contact textarea { min-height: 120px; resize: vertical; }
.contact input:focus,
.contact textarea:focus {
  outline: 2px solid var(--c-green);
  outline-offset: 1px;
  background: #fff;
}
.contact button {
  justify-self: end;
  background: var(--c-green);
  color: #fff;
  border: 0;
  padding: 0.7rem 1.6rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--fs-sm);
  transition: background .15s ease;
}
.contact button:hover { background: var(--c-green-deep); }

/* Honeypot — present in the DOM, hidden from sighted users + AT. */
.contact__hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Captcha row — image + reload button above, answer input below. */
.contact__captcha {
  display: grid;
  gap: 0.5rem;
}
.contact__captcha-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.contact__captcha-img {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 64px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: #eef2ec;
  user-select: none;
  -webkit-user-select: none;
}
.contact .contact__captcha-reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  background: var(--c-green);
  border: 1px solid var(--c-green);
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  padding: 0;
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
  font-weight: inherit;
  justify-self: auto;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.contact .contact__captcha-reload:hover {
  background: transparent;
  color: var(--c-green-deep);
  border-color: var(--c-line);
}
.contact .contact__captcha-reload svg {
  display: block;
}

/* Inline error notice + success thank-you copy. */
.contact__error {
  font-family: var(--ff-sans);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #b03030;
  background: #fdecec;
  border: 1px solid #f1b5b5;
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.85rem;
}
.contact__thanks {
  font-family: var(--ff-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-ink);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--c-footer);
  color: var(--c-footer-ink);
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2rem, 3vw, 2.5rem);
}
.site-footer__grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: stretch;
  text-align: left;
}
@media (min-width: 720px) {
  .site-footer__grid {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    min-height: clamp(220px, 22vw, 280px);
  }
  /* logo + nav stay clustered together with a fixed gap, regardless of viewport */
  .site-footer__grid > :nth-child(1),
  .site-footer__grid > :nth-child(2) { flex: 0 0 auto; }
  .site-footer__grid > :nth-child(2) { margin-left: clamp(2rem, 4vw, 3.5rem); }
  /* socials cluster pushed to the right edge */
  .site-footer__grid > :nth-child(3) { margin-left: auto; }
}
.site-footer .brand-mark {
  color: #fff;
  font-size: clamp(1.4rem, 1rem + 1.2vw, 1.9rem);
  letter-spacing: 0.03em;
  display: inline-block;
}
.site-footer__links h4 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  margin-bottom: 0.85rem;
  font-weight: 400;
  text-align: left;
}
.site-footer__links ul {
  list-style: none;
  margin: 0 0 1.25rem; padding: 0;
  display: grid;
  gap: 0.5rem;
  text-align: left;
  padding-left: 1.25rem;        /* indent brand list under "OUR BRANDS" */
}
.site-footer__links ul li a {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-sm);
  font-weight: 400;
}
.site-footer__links--top {
  /* peer items beside the brands list: ABOUT US, CONTACT US */
  display: grid;
  gap: 0.85rem;
  margin-top: 0.25rem;
}
.site-footer__links--top a {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-sm);
  color: #fff;
  font-weight: 400;
}
.site-footer a { color: #cfcfcf; }
.site-footer a:hover { color: #fff; }

.site-footer__socials {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}
@media (min-width: 720px) {
  .site-footer__socials { align-items: flex-end; }
}
.site-footer__socials-row {
  display: flex;
  gap: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid #fff;
}
.site-footer__socials-row a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  transition: opacity .15s ease;
}
.site-footer__socials-row a:hover { opacity: 0.85; }

.site-footer__legal {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  font-size: var(--fs-xs);
  color: #cfcfcf;
  text-align: left;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}