/* ============================================================
   Kamkav Farm V3 — shared styles
   Visual language: Kamkav Farm Design System
   (mahogany · terracotta · gold · cream / Newsreader · Hanken Grotesk · IBM Plex Mono)
   ============================================================ */
:root {
  /* This site has one fixed light palette, no dark variant — without this,
     some mobile browsers (Brave, Samsung Internet, forced-dark on Android)
     auto-invert/recolor the page, mangling the mahogany/cream palette into
     a muddy dark scheme and sometimes glitching masked/scroll-snap layouts. */
  color-scheme: light;
  /* palette — DS tokens (legacy var names kept as aliases) */
  --brown-950: #2e1309;            /* deep mahogany — footer, story */
  --brown-900: #3b1a0f;            /* mahogany — the anchor */
  --brown-800: #4c2a15;
  --brown-700: #5c3a1e;            /* chocolate — secondary text */
  --terracotta: #a0522d;           /* the accent */
  --cream: #f5f0eb;
  --cream-2: #ece4d8;
  --warm-white: #fdfcfa;
  --ink: #3b1a0f;
  --ink-soft: #6b543f;
  --gold: #c8a96e;                 /* light gold — labels, hairlines */
  --gold-soft: #dcc496;
  --wa: #25d366;
  --wa-dark: #1da851;
  --hairline: rgba(59, 26, 15, 0.08);
  --hairline-gold: rgba(200, 169, 110, 0.3);
  --radius: 12px;
  --radius-img: 4px;
  --shadow: 0 2px 12px rgba(59, 26, 15, 0.08);
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.625;
  font-size: 15.5px;
  -webkit-font-smoothing: antialiased;
}
/* height:auto is load-bearing: every <img> now carries width/height attributes
   (they reserve space and stop layout shift), and without this the literal
   height attribute wins over the scaled width, stretching the photo. */
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
::selection { background: rgba(200, 169, 110, 0.35); }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(160, 82, 45, 0.15), 0 0 0 1.5px var(--terracotta);
  border-radius: 4px;
}

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 40px); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); }

/* eyebrow label — gold, wide tracking, 40px hairline rule */
.kicker {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 600; margin-bottom: 1rem;
}
.kicker::after { content: ""; width: 40px; height: 1px; background: var(--gold); opacity: 0.7; }
/* on dark sections the eyebrow goes gold */
.buyfast .kicker, .story .kicker, .hero .kicker, .page-hero .kicker { color: var(--gold); }

.section { padding: clamp(80px, 11vw, 116px) 0; }
.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head p { color: var(--ink-soft); margin-top: 0.9rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 600; font-size: 0.93rem; letter-spacing: 0.01em; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: scale(1.02); }
.btn:active { transform: scale(0.98); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-dark); box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3); }
.btn-outline { border-color: rgba(253, 252, 250, 0.55); color: var(--warm-white); background: transparent; }
.btn-outline:hover { border-color: var(--gold); }
.btn-outline-dark { border-color: var(--terracotta); color: var(--terracotta); background: transparent; }
.btn-outline-dark:hover { border-color: #8b4513; color: #8b4513; }
.btn svg { flex: none; }

/* text links grow an underline from the left */
.tier-more a, .card a, .inline-links a:not(.btn) {
  text-decoration: none; background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: left bottom;
  transition: background-size 0.3s ease; padding-bottom: 2px;
}
.tier-more a:hover, .card a:hover, .inline-links a:not(.btn):hover { background-size: 100% 1px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(59, 26, 15, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--cream);
  border-bottom: 1px solid var(--hairline-gold);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 42px; height: 42px; border-radius: 50%; }
.brand span { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.02em; color: var(--warm-white); }
.nav { display: flex; gap: 30px; align-items: center; }
.nav a { text-decoration: none; font-size: 0.88rem; font-weight: 500; opacity: 0.85; position: relative; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
}
.nav a:not(.btn):hover { opacity: 1; }
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav .btn { padding: 10px 22px; font-size: 0.84rem; }
.nav-toggle { display: none; background: none; border: 0; color: var(--cream); font-size: 1.6rem; }

/* ---------- hero ---------- */
.hero { position: relative; color: var(--warm-white); min-height: 88vh; display: flex; align-items: center; overflow: hidden; }
/* The photo and its scrim are two layers, not one `background` shorthand, so
   the responsive image tiers and the scrim can be overridden independently. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--hero-img, url("../assets/hero-pods-1600.jpg")) center / cover no-repeat;
}
/* AVIF/WEBP image-set() backgrounds intentionally not used here — they
   silently fail to paint (blank background, no error) in some browser
   configurations while the plain JPG url() below always works. */
@media (max-width: 1200px) { .hero::before { background-image: var(--hero-img-md, url("../assets/hero-pods-1100.jpg")); } }
@media (max-width: 760px)  { .hero::before { background-image: var(--hero-img-sm, url("../assets/hero-pods-700.jpg")); } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(42, 17, 6, 0.85) 0%, rgba(42, 17, 6, 0.45) 55%, rgba(42, 17, 6, 0.22) 100%);
}
.hero .wrap { position: relative; z-index: 2; padding-top: 80px; padding-bottom: 80px; }
.hero h1 { font-size: clamp(2.8rem, 7vw, 5rem); max-width: 14ch; letter-spacing: -0.025em; }
.hero .sub { max-width: 54ch; margin: 1.5rem 0 2.4rem; font-size: 1.08rem; font-weight: 300; opacity: 0.95; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.trust-strip {
  margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: 10px 28px;
  font-size: 0.84rem; max-width: 760px;
  padding: 16px 22px; border-radius: 10px;
  background: rgba(20, 9, 4, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* Hanging indent, not flex: a flex row can't keep the dot aligned to the
   first line's cap-height once text wraps to 2 lines, because the dot and
   the text are separate flex items with no shared baseline. Absolutely
   positioning the dot against the li's own top-left, with the text padded
   clear of it, pins it to the first line exactly like a native list marker
   regardless of how many lines wrap. */
.trust-strip li { list-style: none; position: relative; padding-left: 15px; }
.trust-strip li::before { content: "·"; position: absolute; left: 0; top: -0.2em; color: var(--gold); font-weight: 700; font-size: 1.3em; line-height: 1; }
.trust-strip li:first-child::before { content: none; }
.trust-strip li:first-child { padding-left: 0; }
@media (max-width: 640px) {
  /* Wrapping a mixed-length flex row produces a ragged, unpredictable number
     of items per line. One item per line with a bullet on every line
     (including the first) reads as a clean, consistent list instead. */
  .trust-strip { flex-direction: column; align-items: flex-start; gap: 10px; }
  .trust-strip li:first-child::before { content: "·"; }
  .trust-strip li:first-child { padding-left: 15px; }
}

/* ---------- buy-fast strip ---------- */
.buyfast { background: var(--brown-900); color: var(--cream); }
.buyfast h2 { color: var(--warm-white); }
.buyfast-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 72px); align-items: start; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(253, 252, 250, 0.08); border: 1px solid var(--hairline-gold);
  color: var(--gold-soft); border-radius: 100px; padding: 7px 16px;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

.tier-teaser { width: 100%; border-collapse: collapse; margin-top: 1.4rem; font-size: 0.95rem; }
.tier-teaser th {
  text-align: left; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); padding: 0 14px 10px; font-weight: 600;
}
.tier-teaser td { padding: 15px 14px; border-top: 1px solid var(--hairline-gold); transition: background 0.25s ease; }
.tier-teaser tbody tr:hover td { background: rgba(200, 169, 110, 0.06); }
.tier-teaser .hl td { background: rgba(160, 82, 45, 0.14); }
.tier-teaser .hl td:first-child { border-left: 3px solid var(--terracotta); }
.tier-teaser .hl:hover td { background: rgba(160, 82, 45, 0.2); }
.tier-teaser .price { font-family: var(--font-display); font-size: 1.3rem; white-space: nowrap; color: var(--warm-white); }
.tier-note { font-size: 0.8rem; opacity: 0.65; margin-top: 1rem; }
.tier-more { font-size: 0.88rem; margin-top: 0.8rem; }
.tier-more a { color: var(--gold-soft); font-weight: 500; }

.steps { display: grid; gap: 24px; margin-top: 1.4rem; }
.step { display: flex; gap: 20px; }
.step .n {
  flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.85rem;
}
.step h3 { font-size: 1.05rem; margin-bottom: 4px; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.step p { font-size: 0.92rem; opacity: 0.78; font-weight: 300; }
.buyfast .btn-row { margin-top: 2.4rem; }

/* ---------- product block ---------- */
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 72px); align-items: center; }
.product-grid figure { border-radius: var(--radius-img); overflow: hidden; }
.product-grid figure img { transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
/* The text column has no width limit of its own — fine at two columns, but
   once the grid collapses to one column below 900px (see responsive rules)
   it stretches to the full .wrap width, well past a comfortable line length. */
.product-grid p { max-width: 62ch; }
.spec-table { width: 100%; border-collapse: collapse; margin: 1.7rem 0; font-size: 0.94rem; }
.spec-table td { padding: 12px 4px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.spec-table td:first-child { color: var(--ink-soft); width: 36%; font-size: 0.85rem; }
.spec-table td:last-child { font-weight: 500; color: var(--brown-700); }
.inline-links { display: flex; gap: 14px 28px; flex-wrap: wrap; align-items: center; }

/* ---------- spec box grid (data-first alternative to a photo) ---------- */
.spec-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden; margin: 1.8rem 0 2.2rem;
}
.spec-box { background: var(--warm-white); padding: 22px 24px; }
.spec-box .spec-label {
  display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--terracotta); margin-bottom: 9px;
}
.spec-box .spec-value { display: block; font-weight: 500; color: var(--brown-700); font-size: 0.96rem; line-height: 1.5; }
.spec-box .spec-value a { color: var(--terracotta); }

/* ---------- proof ---------- */
.proof { background: var(--cream-2); }

/* Six Steps sits directly below Partners, and both are horizontally-
   scrolling card rows on the same cream background — with nothing between
   them they read as one repeated widget rather than two sections. A tinted
   background + a thin top rule gives it its own visual "room". */
.process-section { background: var(--cream-2); border-top: 1px solid var(--hairline-gold); }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.card {
  background: var(--warm-white); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 32px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { font-size: 1.35rem; }
.card p { font-size: 0.92rem; color: var(--ink-soft); max-width: 58ch; }
.card .card-sub { font-family: var(--font-mono); font-size: 0.76rem; color: var(--terracotta); margin-top: -6px; }
.card .card-img { border-radius: var(--radius-img); overflow: hidden; margin: -6px 0 4px; aspect-ratio: 16/10; }
.card .card-img img { width: 100%; height: 100%; object-fit: cover; }
.card a:not(.btn) { color: var(--terracotta); font-weight: 600; font-size: 0.9rem; }
.card-wa { border-top: 3px solid transparent; }

/* ---------- enquiry form (contact.html) ---------- */
/* Monday.com embeds don't resize to their content, so the height is fixed to
   fit the whole form without an inner scrollbar. */
#enquiry .section-head { text-align: center; margin-left: auto; margin-right: auto; }
#enquiry .kicker { justify-content: center; }
#enquiry .kicker::before { content: ""; width: 40px; height: 1px; background: var(--gold); opacity: 0.7; }
.enquiry-frame {
  max-width: 760px; margin: 0 auto; background: var(--warm-white); border: 1px solid var(--hairline);
  border-radius: var(--radius); overflow: hidden;
}
.enquiry-frame iframe { display: block; width: 100%; height: 1720px; border: 0; }
@media (max-width: 640px) { .enquiry-frame iframe { height: 1900px; } }

/* ---------- cacao history (origin.html) ---------- */
.history-map { margin: 0 0 32px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); }
.history-map img { width: 100%; height: auto; display: block; }
.history-routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.route-card {
  background: var(--warm-white); border: 1px solid var(--hairline); border-radius: var(--radius);
  border-top: 3px solid var(--route-color, var(--terracotta));
  padding: 26px 24px;
}
.route-card h3 { font-size: 1.05rem; margin: 6px 0 10px; }
.route-card p { font-size: 0.9rem; color: var(--ink-soft); }
.route-card .route-label {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--route-color, var(--terracotta)); font-weight: 600;
}
/* Colors matched to the source map's own route legend (blue/red/green),
   so each card cross-references its line on the map above it. */
.route-card--spanish { --route-color: #2f6fb0; }
.route-card--dutch { --route-color: #b03a2f; }
.route-card--malaysian { --route-color: #2f8f5b; }
@media (max-width: 900px) {
  .history-routes { grid-template-columns: 1fr; }
}
.card-wa:hover { border-top-color: var(--wa); }
.quote-card { border-left: 3px solid var(--gold); }
.quote-card blockquote { font-family: var(--font-display); font-size: 1.15rem; font-style: italic; color: var(--brown-700); line-height: 1.45; }
.quote-card cite { font-size: 0.82rem; color: var(--ink-soft); font-style: normal; }
.quote-note { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.7rem; }
.placeholder-tag {
  display: inline-block; background: #fdf3d7; color: #8a6d1a; font-size: 0.72rem;
  padding: 2px 10px; border-radius: var(--radius-img); font-weight: 600; letter-spacing: 0.04em;
}

/* ---------- partners marquee ----------
   A single scrollable row rather than a fixed grid, so this scales to any
   number of partners without ever needing a layout change. Auto-advances
   gently (JS nudges scrollLeft), but it's a real scroll container underneath
   — swipe it on touch, click-drag it with a mouse, or use a trackpad/wheel
   to move faster or go back. Any of those pauses the auto-advance; it
   resumes a couple of seconds after you let go. Content is always in the
   DOM and directly scrollable even if JS never runs. */
.partners-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.partners-head .kicker { justify-content: center; }
.partners-row { display: flex; align-items: center; gap: 14px; }
.partners-marquee {
  position: relative; overflow-x: auto; overflow-y: hidden; flex: 1; min-width: 0;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.partners-marquee::-webkit-scrollbar { display: none; }
.partners-marquee.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.partners-track { display: flex; width: max-content; gap: 20px; }
.partner-card {
  flex: none; width: 240px; background: var(--warm-white); border-top: 1px solid var(--hairline-gold);
  border-radius: var(--radius-img); padding: 24px 22px 20px; user-select: none;
}
.partner-card .p-country {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 12px;
  display: flex; align-items: center; gap: 7px;
}
.partner-card .p-flag {
  flex: none; width: 20px; height: 14px; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--hairline-gold); overflow: hidden;
}
.partner-card h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--brown-900); margin-bottom: 6px; }
.partner-card .p-city { font-family: var(--font-mono); font-size: 0.76rem; color: var(--terracotta); }
@media (max-width: 640px) {
  .partner-card { width: 200px; padding: 20px 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Auto-advance is skipped entirely in JS for this preference. The
     duplicated set exists only to make that auto-advance loop seamlessly,
     so hide it here — manual scrolling then shows each partner once. */
  .partner-card.is-dup { display: none; }
}

/* ---------- shared round arrow button (steps + partners) ---------- */
.steps-arrow {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hairline-gold); background: var(--warm-white); color: var(--brown-900);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.steps-arrow:hover { background: var(--terracotta); color: var(--warm-white); border-color: var(--terracotta); }
.steps-arrow:disabled { opacity: 0.35; cursor: default; background: var(--warm-white); color: var(--brown-900); border-color: var(--hairline-gold); }
/* Below 640px, hide every carousel's flanking arrow buttons — not just for
   space, but because leaving them in the flex row shrinks the track's own
   visible width, while .step-card is sized in vw against the FULL viewport.
   That mismatch left the card wider than the space it had to scroll in, so
   its right edge sat permanently just past the visible edge, even at rest.
   Native swipe is already the primary mobile interaction, same as Partners. */
@media (max-width: 640px) { .partners-prev, .partners-next, .steps-prev, .steps-next { display: none; } }

/* ---------- six steps carousel (icons, not photos — see spec-grid note) ---------- */
.steps-carousel { display: flex; align-items: center; gap: 14px; }
.steps-track {
  display: flex; gap: 20px; flex: 1; min-width: 0;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 4px 2px;
}
.steps-track::-webkit-scrollbar { display: none; }
.step-card {
  flex: none; scroll-snap-align: start;
  width: 210px; background: var(--brown-900); border-radius: var(--radius);
  padding: 26px 22px; display: flex; flex-direction: column; gap: 8px;
}
.step-card .step-icon { width: 36px; height: 36px; color: var(--gold-soft); margin-bottom: 6px; }
.step-card .step-icon svg { width: 100%; height: 100%; display: block; }
/* Shared step-number treatment (process.html's 7 full-detail steps use this
   directly; .step-card overrides the size for its own smaller carousel
   card). Previously repeated as an identical inline style 7 times. */
.num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--terracotta); letter-spacing: 0.08em; }
.step-card .num { font-size: 0.7rem; }
.step-card h3 { font-size: 0.98rem; font-family: var(--font-body); font-weight: 600; color: var(--warm-white); margin: 2px 0 2px; letter-spacing: 0; }
.step-card p { font-size: 0.82rem; color: rgba(245, 240, 235, 0.72); line-height: 1.5; margin: 0; }
@media (max-width: 640px) { .step-card { width: 76vw; } }

/* ---------- story ---------- */
.story { background: var(--brown-950); color: var(--cream); }
.story h2 { color: var(--warm-white); }
.story-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 72px); align-items: center; }
.story-grid figure { border-radius: var(--radius-img); overflow: hidden; }
.story p { opacity: 0.85; margin: 1.3rem 0 2.4rem; max-width: 52ch; font-weight: 300; }
/* At the paragraph's own weight (300), the browser's default "bolder" for
   <strong> resolves to 400 — visually identical, so the emphasis silently
   disappears. Pin it to an explicit loaded weight instead. */
.story p strong { font-weight: 700; }

/* ---------- final CTA ---------- */
.final-cta { text-align: center; border-top: 1px solid var(--hairline); }
.final-cta .kicker { justify-content: center; }
.final-cta .kicker::before { content: ""; width: 40px; height: 1px; background: var(--gold); opacity: 0.7; }
.final-cta h2 { font-size: clamp(2.4rem, 5.5vw, 3.6rem); }
.final-cta p { color: var(--ink-soft); max-width: 52ch; margin: 1.1rem auto 2.4rem; }
.final-cta .btn-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.response-note {
  margin-top: 1.8rem; font-size: 0.85rem; color: var(--ink-soft);
  text-align: center;
}
@media (min-width: 641px) { .response-note { white-space: nowrap; } }
/* A plain inline dot, not a flex item — flex + align-items:center would
   center it against the full height of a wrapped 2-line paragraph on
   narrow screens, leaving it floating beside the block instead of
   sitting next to "Typically" on the first line. */
.response-note::before { content: "●"; color: #22c55e; font-size: 0.6rem; margin-right: 8px; }

/* ---------- footer ---------- */
.site-footer { background: var(--brown-950); color: rgba(245, 240, 235, 0.7); font-size: 0.88rem; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px;
  padding: 64px 0 44px;
}
.site-footer h4 { color: var(--gold); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; font-weight: 600; }
.site-footer ul { list-style: none; display: grid; gap: 9px; }
.site-footer a { text-decoration: none; transition: color 0.2s ease; }
.site-footer a:hover { color: var(--warm-white); }
.footer-bottom {
  border-top: 1px solid var(--hairline-gold);
  /* Extra bottom padding clears the fixed quote pill — kept on the footer
     itself (not body) so the brown background actually extends into that
     space, instead of exposing the page's cream background as a gap. */
  padding: 22px 0 calc(22px + 112px); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 0.8rem; opacity: 0.75;
}

/* ---------- mailto: copy-fallback toast ---------- */
/* A mailto: link only works if the visiting device has a mail app
   configured — very often not the case, and when it fails there's no error,
   just nothing happening. This toast confirms the address was copied to the
   clipboard regardless, so there's always a working fallback. */
.copy-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px);
  background: var(--brown-900); color: var(--warm-white); padding: 10px 20px;
  border-radius: 100px; font-size: 0.82rem; box-shadow: 0 6px 24px rgba(46, 19, 9, 0.35);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 200; max-width: 90vw; text-align: center;
}
.copy-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 640px) { .copy-toast { bottom: 84px; } }

/* ---------- persistent quote pill (single floating CTA, all viewports) ---------- */
.quote-pill {
  position: fixed; z-index: 60; left: 50%; bottom: 28px; transform: translateX(-50%);
  max-width: 540px; width: calc(100% - 32px);
  display: flex; align-items: center; gap: 12px;
  background: var(--warm-white); color: var(--brown-900); text-decoration: none;
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 8px 8px 8px 18px;
  box-shadow: 0 6px 28px rgba(26, 21, 18, 0.18);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.quote-pill-icon { flex: none; color: var(--wa); }
.quote-pill-label { flex: 1; font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
.quote-pill-send {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--wa); display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
}
.quote-pill:hover .quote-pill-send { transform: scale(1.06); }
.quote-pill:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
/* main.js toggles this while .final-cta is in view, so the pill never sits
   on top of the page's own closing call to action. */
.quote-pill.is-hidden { opacity: 0; transform: translateX(-50%) translateY(12px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .quote-pill { transition: none; } }
@media (max-width: 640px) {
  .quote-pill {
    left: 16px; right: 16px; transform: none; max-width: none; width: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .quote-pill.is-hidden { transform: translateY(12px); }
  .quote-pill-label { font-size: 0.88rem; }
}

/* ---------- page hero (cacao-beans) ---------- */
.page-hero { position: relative; color: var(--warm-white); padding: 130px 0 90px; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--hero-img, url("../assets/pricing-hero-1344.jpg")) center / cover no-repeat;
}
/* AVIF/WEBP image-set() backgrounds intentionally not used here — they
   silently fail to paint (blank background, no error) in some browser
   configurations while the plain JPG url() below always works. */
@media (max-width: 1200px) { .page-hero::before { background-image: var(--hero-img-md, url("../assets/pricing-hero-1100.jpg")); } }
@media (max-width: 760px)  { .page-hero::before { background-image: var(--hero-img-sm, url("../assets/pricing-hero-700.jpg")); } }
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(42, 17, 6, 0.88) 0%, rgba(42, 17, 6, 0.55) 60%, rgba(42, 17, 6, 0.32) 100%);
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(2.5rem, 5.5vw, 3.9rem); max-width: 18ch; }
.page-hero .badge + h1 { margin-top: 1.4rem; }
.page-hero .sub { max-width: 56ch; margin-top: 1.3rem; opacity: 0.92; font-weight: 300; }
.page-hero .hero-ctas { margin-top: 2.4rem; }

/* ---------- pricing table ---------- */
/* 5 columns don't fit a phone screen — scroll horizontally rather than
   truncate/hide the last column. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pricing-table { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); }
@media (max-width: 640px) {
  .pricing-table th, .pricing-table td { padding: 13px 12px; font-size: 0.86rem; }
}
.pricing-table thead { background: var(--brown-900); color: var(--cream); }
.pricing-table th { text-align: left; padding: 17px 18px; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold-soft); }
.pricing-table td { padding: 18px; background: var(--warm-white); border-top: 1px solid var(--hairline); transition: background 0.25s ease; }
.pricing-table td:first-child { font-family: var(--font-mono); font-size: 0.82rem; color: var(--gold); }
.pricing-table tbody tr:hover td { background: rgba(160, 82, 45, 0.07); }
.pricing-table tr.hl td { background: rgba(160, 82, 45, 0.05); }
.pricing-table tr.hl td:first-child { border-left: 3px solid var(--terracotta); color: var(--terracotta); }
.pricing-table tr.hl:hover td { background: rgba(160, 82, 45, 0.09); }
.pricing-table .price { font-family: var(--font-display); font-size: 1.25rem; color: var(--brown-900); }
/* USD/Bag is a secondary figure buyers still scan numerically — before this
   it had no distinct treatment at all, reading as plain body text next to
   the hero USD/MT price. Mono (matching the tier number) marks it as data
   without competing with the hero price's emphasis. */
.pricing-table td[data-tier-bag] { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-soft); }
.fine-print { font-size: 0.82rem; color: var(--ink-soft); margin-top: 1.4rem; display: grid; gap: 6px; max-width: 72ch; }

/* ---------- calculator ---------- */
.calc {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px;
  background: var(--warm-white); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
  margin-top: 3rem;
}
.calc label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--terracotta); }
.calc-input-row { display: flex; gap: 14px; margin-top: 14px; align-items: stretch; }
.calc input[type="number"] {
  font-size: 1.7rem; font-family: var(--font-display); width: 150px;
  padding: 10px 18px; border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--cream); color: var(--brown-900);
  transition: border-color 0.2s ease;
}
.calc input[type="number"]:focus { border-color: var(--terracotta); }
.unit-toggle { display: flex; border: 1px solid var(--hairline); border-radius: 100px; overflow: hidden; }
.unit-toggle button {
  border: 0; background: transparent; padding: 0 24px; font-weight: 600;
  cursor: pointer; font-size: 0.85rem; color: var(--ink-soft); font-family: var(--font-body);
  transition: background 0.2s ease, color 0.2s ease;
}
.unit-toggle button.active { background: var(--brown-900); color: var(--cream); }
.calc .equiv { font-size: 0.85rem; color: var(--ink-soft); margin-top: 12px; font-family: var(--font-mono); }
.calc-result {
  background: var(--brown-900); color: var(--cream); border-radius: var(--radius);
  padding: 32px; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 10px;
  border: 1px solid var(--hairline-gold);
}
.calc-result .label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.calc-result .total { font-family: var(--font-display); font-size: clamp(2.3rem, 4vw, 3.2rem); color: var(--warm-white); font-variant-numeric: tabular-nums; }
.calc-result .tier-badge {
  align-self: center; background: rgba(200, 169, 110, 0.12); border: 1px solid var(--hairline-gold);
  color: var(--gold-soft); padding: 6px 16px; border-radius: 100px; font-size: 0.8rem; font-weight: 500;
}

/* ---------- FAQ ---------- */
.faq details {
  background: var(--warm-white); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 20px 26px; margin-bottom: 12px;
  transition: border-color 0.25s ease;
}
.faq details:hover { border-color: rgba(160, 82, 45, 0.3); }
.faq details[open] { border-left: 3px solid var(--terracotta); }
.faq summary { font-weight: 600; cursor: pointer; font-size: 1rem; list-style: none; position: relative; padding-right: 30px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-size: 1.4rem; color: var(--terracotta); font-weight: 400;
  transition: transform 0.3s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin-top: 12px; color: var(--ink-soft); font-size: 0.94rem; max-width: 68ch; }

/* Scroll-triggered fade-in removed — it depended on JS timing that proved
   unreliable in real use (content stayed invisible if the reveal script
   didn't fire). Content is now visible immediately, always. */

/* ---------- narrow-viewport hero scrim ----------
   The 100deg scrims above fade to 0.22 (.hero) / 0.32 (.page-hero) at their
   right edge. On a wide box the headline is capped at 14ch and sits in the
   strong end, so contrast holds. On a narrow box the text runs the full width
   into the weak end while `cover` crops to pale sky — measured 2.02:1 on the
   h1 at 375px, against a 3:1 requirement. A vertical scrim keeps every line
   above threshold at every width; min alpha 0.68 measures ~8.9:1. */
@media (max-width: 900px) {
  .hero::after {
    background: linear-gradient(180deg,
      rgba(42, 17, 6, 0.88) 0%,
      rgba(42, 17, 6, 0.74) 38%,
      rgba(42, 17, 6, 0.68) 68%,
      rgba(42, 17, 6, 0.82) 100%);
  }
  .page-hero::after {
    background: linear-gradient(180deg,
      rgba(42, 17, 6, 0.88) 0%,
      rgba(42, 17, 6, 0.74) 40%,
      rgba(42, 17, 6, 0.70) 72%,
      rgba(42, 17, 6, 0.84) 100%);
  }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .buyfast-grid, .product-grid, .story-grid, .calc { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; }
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* .product-grid alternates figure/text source order for a left-right zigzag
     on desktop's two-column layout — collapsed to one column here, that
     alternation reads as an inconsistent photo-then-text / text-then-photo
     rhythm from block to block. Pin the photo first every time. */
  .product-grid figure { order: -1; }
}
/* Nav switches to the hamburger menu earlier than the general mobile
   breakpoint below — with 6 links + logo + WhatsApp button, the full
   nav starts wrapping and overlapping the logo between ~860-920px. */
@media (max-width: 900px) {
  .nav { display: none; }
  .nav.open {
    display: flex; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--brown-950); flex-direction: column; padding: 24px; gap: 18px;
    border-bottom: 1px solid var(--hairline-gold);
  }
  .nav-toggle { display: block; }
}
@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .hero { min-height: 76vh; }
  .spec-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}