/* ==========================================================
   Φρουτόαση — Design System
   Editorial / Mediterranean / Premium B2B
   ========================================================== */

:root {
  /* Color — derived from the actual brand */
  --forest:        #0d3d2e;
  --forest-deep:   #082319;
  --forest-soft:   #1a5340;
  --orange:        #e8552a;
  --orange-bright: #ff7a3d;
  --cream:         #faf6ed;
  --paper:         #f1ead9;
  --paper-deep:    #e8dfc7;
  --ink:           #0e1a14;
  --ink-soft:      #4a5751;
  --ink-mute:      #7d8a83;
  --line:          #d8cfba;
  --line-soft:     #ebe3cf;
  --red-spot:      #c8261e;

  /* Channel-only mirrors of the colours above, for rgba() with alpha.
     Keep these in sync whenever the hex values change. */
  --cream-rgb:     250, 246, 237;
  --forest-rgb:    13, 61, 46;
  --ink-rgb:       14, 26, 20;
  --orange-rgb:    232, 85, 42;
  --orange-bright-rgb: 255, 122, 61;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing & layout */
  --max-w: 1280px;
  --pad-x: clamp(20px, 5vw, 64px);
  --section-pad-y: clamp(72px, 10vw, 128px);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-soft: 0 8px 28px rgba(var(--forest-rgb), 0.08);
  --shadow-med: 0 20px 50px rgba(var(--forest-rgb), 0.12);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ---------- Typography helpers ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  font-weight: 400;
  color: var(--orange);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.eyebrow-light { color: var(--paper); opacity: 0.7; }

/* ==========================================================
   HEADER
   ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px var(--pad-x);
  background: rgba(var(--cream-rgb), 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.brand-logo {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}
.brand-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--forest);
  line-height: 1;
}
.brand-text small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}
.main-nav {
  display: flex;
  gap: 28px;
  flex-wrap: nowrap;
}
.main-nav a {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.18s;
  position: relative;
}
.main-nav a:hover { color: var(--forest); }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s;
}
.main-nav a:hover::after { transform: scaleX(1); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-phone {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  padding: 6px 14px;
  border-left: 1px solid var(--line);
}
.header-phone .phone-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.header-phone strong {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--orange);
  letter-spacing: -0.01em;
}
.lang-toggle {
  background: var(--forest);
  color: var(--cream);
  border: none;
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.18s;
}
.lang-toggle:hover { background: var(--forest-soft); }

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  padding: clamp(40px, 6vw, 64px) var(--pad-x) clamp(48px, 6vw, 80px);
  max-width: var(--max-w);
  margin: 0 auto;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: stretch; /* the carousel takes its height from the copy column */
  padding: clamp(32px, 5vw, 64px) 0;
}
.hero-copy { max-width: 580px; }
.hero-title {
  font-size: clamp(38px, 6vw, 76px);
  font-weight: 500;
  margin: 0 0 28px;
  letter-spacing: -0.025em;
}
.hero-title em {
  font-style: italic;
  color: var(--orange);
  font-weight: 400;
}
.hero-text {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 36px;
  max-width: 520px;
}
.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-align: center;
}
.btn-primary {
  background: var(--forest);
  color: var(--cream);
}
.btn-primary:hover {
  background: var(--orange);
  transform: translateY(-2px);
  box-shadow: var(--shadow-med);
}
.btn-ghost {
  background: transparent;
  color: var(--forest);
  border: 1.5px solid var(--forest);
}
.btn-ghost:hover {
  background: var(--forest);
  color: var(--cream);
}

.hero-visual {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* No aspect-ratio: the frame stretches to whatever the copy column needs, so
     the two halves stay level even when Greek runs longer than English.
     The floor stops it collapsing if the copy is ever short. */
  min-height: 420px;
}
.hero-carousel {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-med);
  background: var(--forest-deep);
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero-slide.is-active {
  opacity: 1;
  /* Ken Burns: a slow push that runs the length of one dwell. */
  animation: heroKenBurns 6s ease-out forwards;
}
@keyframes heroKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.hero-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.hero-dot:hover { border-color: var(--orange); }
.hero-dot.is-active {
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.3);
}
.hero-dot:focus-visible {
  outline: 2px solid var(--orange-bright);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-slide.is-active { animation: none; }
}
.hero-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(var(--cream-rgb), 0.96);
  backdrop-filter: blur(8px);
  padding: 11px 16px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
  animation: pulse 2.4s ease-in-out infinite;
}
.hero-badge span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--forest);
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* Trust bar */
.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: clamp(32px, 5vw, 56px);
}
.trust-item {
  background: var(--cream);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.trust-item strong {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 500;
  line-height: 1;
  color: var(--forest);
  letter-spacing: -0.03em;
}
.trust-item strong sup {
  font-size: 0.5em;
  color: var(--orange);
  vertical-align: super;
}
.trust-item span {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ==========================================================
   SECTION primitives
   ========================================================== */
.section {
  padding: var(--section-pad-y) var(--pad-x);
}
.section-light { background: var(--cream); }
.section-paper { background: var(--paper); }
.section-dark {
  background: var(--forest-deep);
  color: var(--cream);
}
.section-head {
  max-width: 720px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  text-align: center;
}
.section-head h2 {
  font-size: clamp(32px, 4.5vw, 56px);
  margin-bottom: 20px;
}
.section-lead {
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================
   PRODUCTS
   ========================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.product-card {
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-med);
}
.product-image {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--paper);
}
.product-body {
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product-card.featured {
  background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: var(--cream);
  border: none;
}
.product-card.featured h3,
.product-card.featured p { color: var(--cream); }
.featured-body {
  padding: 32px 26px;
  flex: 1;
  justify-content: center;
}
.product-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
}
.product-card h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--forest);
}
.product-card.featured h3 { color: var(--cream); }
.product-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
.product-card.featured p { color: rgba(var(--cream-rgb), 0.78); }
.text-link {
  color: var(--orange);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 8px;
  display: inline-block;
  transition: transform 0.2s;
}
.text-link:hover { transform: translateX(4px); }

/* ==========================================================
   SEASONAL CALENDAR — Signature
   ========================================================== */
/* ==========================================================
   FACILITIES — location cards inside the Contact section
   ========================================================== */
.facilities-block {
  max-width: var(--max-w);
  margin: 0 auto clamp(48px, 6vw, 72px);
}
.facilities-block .eyebrow {
  text-align: left;
  margin-bottom: 20px;
}
.facilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.facility-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.facility-card:hover {
  transform: translateY(-4px);
  border-color: var(--orange);
  box-shadow: var(--shadow-med);
}
.facility-pin {
  color: var(--orange);
  margin-bottom: 16px;
  flex: none;
}
.facility-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--forest);
  margin: 0 0 8px;
}
.facility-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.facility-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  color: var(--forest);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.facility-link:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--cream);
}
.facility-arrow { transition: transform 0.2s; }
.facility-link:hover .facility-arrow { transform: translateX(3px); }

/* ==========================================================
   PROCESS
   ========================================================== */
/* Trimmed vs. other sections so heading + active card + dots clear a 1080p
   viewport without scrolling. */
.process-section {
  overflow: hidden;
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
.process-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;          /* keeps the copy put as slides change height */
  max-width: var(--max-w);
  margin: 0 auto;
}
/* Copy comes first in the DOM (heading before content, and the order mobile
   wants); on wide screens the carousel is pulled into the left column. */
.process-carousel {
  order: -1;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}
.process-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.process-text .eyebrow {
  color: var(--orange-bright);
  opacity: 0.9;
  margin-bottom: 0;
  text-align: left;
}
.process-text > p {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(var(--cream-rgb), 0.85);
  margin: 0;
  max-width: 480px;
}
/* All slides share one grid cell, so the viewport is as tall as the tallest
   slide and nothing reflows when the active one changes. */
.process-viewport {
  display: grid;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--forest-soft);
  border: 1px solid rgba(var(--cream-rgb), 0.10);
  /* Neutral black drop shadow — deliberately palette-independent. */
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.process-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.process-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0s;
}
.process-photo {
  /* Matches the source files (1448x1086), so only the square harvest shot
     gets cropped. Portrait 4/5 made the card too tall for one screen. */
  aspect-ratio: 4 / 3;
  background: var(--forest-soft);
  overflow: hidden;
}
.process-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.process-copy {
  padding: 28px 32px 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.process-num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--cream);
  background: var(--orange);
  border-radius: 100px;
  padding: 5px 14px;
  line-height: 1;
}
.process-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--cream);
  margin: 0;
}
.process-copy p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--paper-deep);
  margin: 0;
}
.process-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}
.process-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--cream-rgb), 0.45);
  background: transparent;
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.process-dot:hover { border-color: var(--orange); }
.process-dot.is-active {
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.25);
}
.process-dot:focus-visible {
  outline: 2px solid var(--orange-bright);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .process-split { grid-template-columns: 1fr; gap: 48px; }
  .process-carousel { order: 0; }   /* text first, then carousel */
}

@media (prefers-reduced-motion: reduce) {
  .process-slide { transition: none; }
}

/* ==========================================================
   ABOUT
   ========================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
}
.about-title {
  font-size: clamp(32px, 4.5vw, 60px);
  font-weight: 500;
  margin: 0 0 28px;
}
.about-title em {
  font-style: italic;
  color: var(--orange-bright);
  font-weight: 400;
}
.about-copy p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(var(--cream-rgb), 0.85);
  margin: 0 0 18px;
}
.about-copy strong {
  color: var(--cream);
  font-weight: 600;
}
.about-image {
  aspect-ratio: 16 / 10;
  background-image: url("photos/photo-family2.jpeg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-med);
}
.about-caption {
  text-align: center;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  color: rgba(var(--cream-rgb), 0.55);
  letter-spacing: 0.04em;
}

/* ==========================================================
   CONTACT
   ========================================================== */
.contact-section { padding-bottom: clamp(80px, 8vw, 120px); }
.contact-channels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--max-w);
  margin: 0 auto clamp(48px, 6vw, 72px);
}
.channel-card {
  padding: 30px 28px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s;
}
.channel-card:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: var(--shadow-med);
}
.channel-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.channel-card strong {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.2;
  word-break: break-word;
  font-weight: 500;
  color: var(--forest);
}
.channel-whatsapp strong { color: var(--orange); }


/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer {
  background: var(--forest-deep);
  color: var(--cream);
  padding: clamp(48px, 6vw, 72px) var(--pad-x) 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.8fr;
  gap: 40px;
  max-width: var(--max-w);
  margin: 0 auto 40px;
}
.footer-qr-col {
  text-align: center;
}
.footer-qr-img {
  width: 100px;
  height: 100px;
  display: block;
  margin: 10px auto 8px;
  border-radius: 8px;
  /* Intentionally pure white, not a palette token: QR codes need maximum
     contrast to scan reliably. Do not swap this for --cream. */
  background: #fff;
  padding: 6px;
}
.footer-qr-col small {
  font-size: 11px;
  color: rgba(var(--cream-rgb), 0.55);
  display: block;
}
.footer-brand p {
  margin: 0 0 8px;
  font-size: 14px;
  color: rgba(var(--cream-rgb), 0.85);
}
.footer-brand strong {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--cream);
}
.footer-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: 16px;
}
.footer-tagline {
  font-size: 12px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-bright) !important;
  margin-top: 12px !important;
}
.footer-col h5 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-bright);
  margin: 0 0 16px;
}
.footer-col p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(var(--cream-rgb), 0.85);
  margin: 0 0 12px;
}
.footer-col p small {
  font-size: 12px;
  color: rgba(var(--cream-rgb), 0.55);
}
.footer-col a:hover { color: var(--orange-bright); }
.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--cream-rgb), 0.1);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(var(--cream-rgb), 0.5);
}

/* ==========================================================
   SCALE STRIP
   ========================================================== */
.scale-title {
  font-size: clamp(32px, 3.8vw, 52px);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.025em;
}
.scale-title em {
  display: block;
  font-style: italic;
  color: var(--orange-bright);
  font-weight: 400;
}
.scale-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 12px;
  padding-top: 28px;
  border-top: 1px solid rgba(var(--cream-rgb), 0.14);
}
.scale-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  color: var(--orange-bright);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.scale-stat span {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.7);
}

/* ==========================================================
   AVAILABLE NOW — Signature widget
   ========================================================== */
.available-now {
  background: var(--paper);
  padding: clamp(56px, 7vw, 96px) var(--pad-x);
  border-top: 1px solid var(--paper-deep);
  border-bottom: 1px solid var(--paper-deep);
}
.available-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
}
.available-head {
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
}
.available-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 6px 16px;
  margin-bottom: 18px;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulse 2.4s ease-in-out infinite;
}
.pulse-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.available-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 500;
  margin: 0 0 16px;
  letter-spacing: -0.025em;
}
.available-title em {
  font-style: italic;
  color: var(--orange);
  font-weight: 400;
  margin-left: 8px;
}
.available-sub {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.6;
}
.available-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.available-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.available-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}
.available-emoji {
  width: 56px;
  height: 56px;
  background: var(--paper);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  border: 2px solid var(--cream);
}
.available-info { flex: 1; min-width: 0; }
.available-info h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--forest);
  margin: 0 0 2px;
}
.available-info span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}

/* ==========================================================
   CERTIFICATIONS STRIP
   ========================================================== */
.certifications {
  background: var(--cream);
  padding: clamp(48px, 6vw, 72px) var(--pad-x);
  border-top: 1px solid var(--line-soft);
}
.cert-wrap {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.cert-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 500;
  color: var(--forest);
  margin: 0 0 32px;
  letter-spacing: -0.02em;
}
.cert-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.cert-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--paper);
  border: 1px solid var(--paper-deep);
  border-radius: 100px;
  padding: 10px 20px 10px 12px;
  transition: all 0.2s;
}
.cert-item:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
}
.cert-mark {
  width: 32px;
  height: 32px;
  background: var(--forest);
  color: var(--cream);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.cert-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--forest);
}
.cert-note {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0;
  font-style: italic;
}

/* ==========================================================
   EXPORT NETWORK — Map
   ========================================================== */
#network.section-dark .network-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 500;
  margin-bottom: 20px;
  letter-spacing: -0.025em;
  color: var(--cream);
}
#network.section-dark .network-title em {
  font-style: italic;
  color: var(--orange-bright);
  font-weight: 400;
}
.network-lead { color: rgba(var(--cream-rgb), 0.78) !important; }
.network-map-wrap {
  max-width: 980px;
  margin: 0 auto;
}
.network-map {
  width: 100%;
  height: auto;
  display: block;
}
/* Map colours are token-driven so a palette swap carries the map with it. */
.network-map .map-hub-halo {
  fill: var(--orange);
  opacity: 0.18;
}
.network-map .map-hub-ring { fill: var(--orange); }
.network-map .map-hub-core { fill: var(--cream); }
.network-map .map-arcs { stroke: var(--orange-bright); }
.network-map .network-pin { fill: var(--orange-bright); }

.network-map .map-source circle:nth-child(2) {
  animation: source-pulse 3s ease-in-out infinite;
  transform-origin: 561px 355px;
}
@keyframes source-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.network-map .map-label-strong {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  fill: var(--cream);
  letter-spacing: 0.04em;
}
.network-map .map-sublabel {
  font-size: 12px;
  fill: rgba(var(--cream-rgb), 0.65);
  letter-spacing: 0.02em;
}
/* 25 destinations will not fit as permanent labels — reveal on hover.
   The .network-countries list below the map is the always-visible version. */
.network-map .map-pin-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  fill: var(--cream);
  paint-order: stroke;
  stroke: var(--forest-deep);
  stroke-width: 4px;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}
.network-map .map-pin circle {
  transition: r 0.2s;
}
.network-map .map-pin:hover circle,
.network-map .map-pin:focus-within circle {
  r: 8;
}
.network-map .map-pin:hover .map-pin-label,
.network-map .map-pin:focus-within .map-pin-label {
  opacity: 1;
}

.network-list-head {
  margin: 40px 0 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.6);
  text-align: center;
}
.network-countries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.network-countries li {
  padding: 7px 14px;
  border: 1px solid rgba(var(--cream-rgb), 0.16);
  border-radius: 999px;
  font-size: 13.5px;
  color: rgba(var(--cream-rgb), 0.85);
  white-space: nowrap;
}
.network-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 48px;
  background: rgba(var(--cream-rgb), 0.1);
  border: 1px solid rgba(var(--cream-rgb), 0.14);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.network-stat {
  background: var(--forest-deep);
  padding: 24px;
  text-align: center;
}
.network-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  color: var(--orange-bright);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.network-stat span {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), 0.75);
}

/* ==========================================================
   NEWSLETTER
   ========================================================== */
.newsletter {
  background: var(--paper);
  padding: clamp(48px, 6vw, 80px) var(--pad-x);
  border-top: 1px solid var(--paper-deep);
}
.newsletter-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.newsletter-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 500;
  color: var(--forest);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.newsletter-copy p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}
.newsletter-form {
  display: flex;
  gap: 12px;
}
.newsletter-form input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 14px 18px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.newsletter-form input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(var(--orange-rgb), 0.12);
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
/* The 6-item nav needs ~1200px to sit between the brand and the phone block.
   Below that it overflowed the header (pre-existing); hide it, as we already do
   on mobile. */
@media (max-width: 1200px) {
  .main-nav { display: none; }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 100%; min-height: 0; }
  .hero-carousel { aspect-ratio: 16 / 10; flex: none; }
  /* The wide mobile frame is short — keep the caption from eating a quarter of it. */
  .hero-badge { bottom: 14px; left: 14px; right: 14px; padding: 10px 14px; gap: 9px; }
  .hero-badge span { font-size: 13px; }
  .hero-badge::before { width: 7px; height: 7px; }
  .trust-bar { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .facilities-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .contact-channels { grid-template-columns: 1fr; }
  .scale-stats { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .available-grid { grid-template-columns: 1fr 1fr; }
  .cert-logos { gap: 14px; }
  .network-stats { grid-template-columns: 1fr; }
  .newsletter-wrap { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}
@media (max-width: 600px) {
  /* Narrow screens: the desktop brand would eat most of a 360px header row. */
  .brand-logo { width: 56px; height: 56px; }
  .brand-text strong { font-size: 26px; }
  .header-phone { display: none; }
  .trust-bar { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .available-grid { grid-template-columns: 1fr; }
  .cert-item { padding: 8px 14px 8px 8px; }
  .cert-name { font-size: 13px; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form input { width: 100%; }
}


/* ==========================================================
   PRODUCTS SUBPAGES — catalog grid + detail page
   ========================================================== */

/* Turn <a class="product-card"> into visually identical link cards */
a.product-card {
  color: inherit;
  text-decoration: none;
  display: block;
  transition: transform .35s ease, box-shadow .35s ease;
}
a.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-med);
}

/* "See all products" CTA under the homepage grid */
.products-cta {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.btn-lg {
  padding: 16px 32px;
  font-size: 15px;
}

/* Catalog page — bigger, 3-across grid */
.section-catalog { padding-top: clamp(96px, 12vw, 160px); }
.product-grid-full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 900px) {
  .product-grid-full { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .product-grid-full { grid-template-columns: 1fr; }
}

/* ---------- Detail page layout ---------- */
.section-detail {
  padding-top: clamp(96px, 12vw, 140px);
}

.detail-topbar {
  max-width: var(--max-w);
  margin: 0 auto 32px;
  padding: 0 var(--pad-x);
}
.detail-back {
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color .2s ease;
}
.detail-back:hover { color: var(--orange); }

.detail-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ---------- Gallery ---------- */
.detail-gallery {
  position: sticky;
  top: 100px;
}
@media (max-width: 900px) {
  .detail-gallery { position: static; }
}

.detail-main-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  background-color: var(--paper-deep);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: background-image .3s ease;
}

.detail-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 16px;
}
.detail-thumb {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.detail-thumb span {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
}
.detail-thumb:hover { transform: scale(1.03); }
.detail-thumb.is-active {
  border-color: var(--orange);
}

/* ---------- Info column ---------- */
.detail-info .eyebrow {
  margin-bottom: 12px;
}
.detail-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.detail-tagline {
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 28px;
}

.detail-meta {
  display: flex;
  gap: 32px;
  padding: 20px 24px;
  background: var(--paper);
  border-radius: var(--radius-md);
  margin-bottom: 36px;
}
.detail-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.detail-meta-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.detail-meta-item strong {
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
}

.detail-block {
  margin-bottom: 32px;
}
.detail-block h3 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 12px;
}
.detail-block p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}

.detail-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.detail-chips li {
  padding: 6px 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--ink);
}

.detail-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.detail-bullets li {
  padding: 10px 0 10px 28px;
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  font-size: 15px;
  color: var(--ink);
}
.detail-bullets li:last-child { border-bottom: none; }
.detail-bullets li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 18px;
  width: 12px;
  height: 2px;
  background: var(--orange);
}

.detail-cta {
  display: inline-block;
  margin-top: 12px;
}

/* ---------- Prev / next nav ---------- */
.detail-nav {
  max-width: var(--max-w);
  margin: 80px auto 0;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.detail-nav-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px;
  background: var(--paper);
  border-radius: var(--radius-md);
  transition: background .2s ease, transform .2s ease;
}
.detail-nav-link:hover {
  background: var(--paper-deep);
  transform: translateY(-2px);
}
.detail-nav-link span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.detail-nav-link strong {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.detail-nav-next {
  text-align: right;
}

/* ---------- Not-found state ---------- */
.detail-notfound {
  max-width: 560px;
  margin: 40px auto 80px;
  padding: 0 var(--pad-x);
  text-align: center;
}
.detail-notfound h1 {
  font-family: var(--font-display);
  font-size: 40px;
  margin-bottom: 12px;
}
.detail-notfound p {
  color: var(--ink-soft);
  font-size: 16px;
  margin-bottom: 28px;
}
.detail-notfound-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 400px) {
  /* .brand no longer shrinks (it must not collide with the nav on desktop), so
     trim it explicitly on the narrowest phones. */
  .brand-logo { width: 50px; height: 50px; }
  .brand-text strong { font-size: 24px; }
  .brand { gap: 10px; }
}

/* ---------- Section rhythm after the Sep 2026 reorder ----------
   About now sits directly above Network and Certifications directly above
   Contact, so each pair would have rendered as one uninterrupted block.
   Both pairs are dark-on-dark / light-on-light by design (the map and the
   About copy both need a dark ground), so they alternate by tone rather
   than by flipping to the opposite palette. */
#about.section-dark { background: var(--forest); }
.certifications { background: var(--paper); }

/* ==========================================================
   SEASONAL SHOWCASE (experiment-calendar-showcase)
   ========================================================== */
.showcase-split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  max-width: var(--max-w);
  margin: 0 auto;
  align-items: start;
}
.showcase-now { min-width: 0; }
/* Cross-fade when the visitor jumps to another month. */
.showcase-now {
  transition: opacity 0.18s ease;
}
.showcase-now.is-swapping { opacity: 0; }

.showcase-eyebrow {
  color: var(--ink-mute);
  text-align: left;
  margin: 0 0 10px;
}
.showcase-month {
  font-family: var(--font-display);
  font-size: clamp(64px, 8vw, 120px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--forest);
  margin: 0;
}
.showcase-month em {
  font-style: italic;
  color: var(--orange);
}
.showcase-count {
  font-size: 18px;
  color: var(--ink-soft);
  margin: 14px 0 0;
}

#showcaseGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
  justify-items: start;
}
.mini-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 140px;
  max-width: 100%;
  text-align: center;
  transition: transform 0.28s ease;
  /* Each card arrives a beat after the one before it. */
  animation: cardFadeIn 0.42s ease both;
  animation-delay: var(--stagger-delay, 0ms);
}
.mini-card-photo {
  width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.28s ease;
}
.mini-card-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--forest);
  line-height: 1.2;
}
.mini-card:hover { transform: translateY(-4px); }
.mini-card:hover .mini-card-photo { box-shadow: var(--shadow-med); }
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.showcase-back {
  margin-top: 32px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--orange);
  cursor: pointer;
  border-bottom: 1px solid rgba(var(--orange-rgb), 0.4);
  transition: color 0.18s, border-color 0.18s;
}
.showcase-back:hover { color: var(--forest); border-bottom-color: var(--forest); }

/* ---------- Coming up ---------- */
.showcase-next { min-width: 0; }
.coming-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.coming-item {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s;
}
.coming-item:hover { border-bottom-color: var(--orange); }
.coming-month {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--forest);
  line-height: 1.1;
}
.coming-arrow {
  color: var(--orange);
  font-size: 15px;
}
.coming-fruits {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.coming-item:focus-visible {
  outline: 2px solid var(--orange-bright);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .showcase-split { grid-template-columns: 1fr; }
  #showcaseGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase-next { margin-top: 8px; }
}
@media (max-width: 500px) {
  #showcaseGrid { grid-template-columns: 1fr; }
  .mini-card { width: 100%; flex-direction: row; text-align: left; gap: 16px; }
  .mini-card-photo { width: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .mini-card { animation: none; }
  .showcase-now { transition: none; }
}