/* ==========================================================================
   Upendo Honey — stylesheet
   Hand-written, no build step. Edit this file directly and upload it.

   Structure:
     1. Tokens
     2. Base
     3. Header / navigation
     4. Hero
     5. Layout primitives
     6. Components
     7. Footer
     8. Responsive
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------
   Brand palette carried over from the original build. */
:root {
  --ink:    #1a120d;
  --earth:  #564036;   /* body text, headings on light grounds */
  --clay:   #8a492b;
  --brown:  #8f4e32;
  --gold:   #c8871a;
  --gold-text: #564036;  /* secondary labels: eyebrows, places — same brown as body */
  --honey:  #f0b23f;
  --sand:   #f0d19a;
  --cream:  #f5ece0;
  --paper:  #f5ece0;   /* one off-white ground for the whole site */
  --rule:   rgb(58 42 32 / 0.14);
  --muted:  rgb(86 64 54 / 0.8);
  --linen:  #f5ece0;
  --tan:    #e6d6b5;
  --forest: #435335;
  --leaf:   #72835a;

  --body: 'Lato', -apple-system, 'Segoe UI', Arial, sans-serif;
  --display: 'Montserrat', -apple-system, 'Segoe UI', Arial, sans-serif;

  --measure: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);

  /* One warm grade for every content photo (not logos, icons or the map).
     Tune it here. The comb background image has the same grade baked in. */
  --photo-warmth: sepia(.12) saturate(1.08);
  /* One overlay for every honeycomb background: brand brown at 80%. */
  --comb-overlay: rgb(86 64 54 / 0.8);
  --on-comb: rgb(255 255 255 / 0.88);

  --radius: 2px;
  --shadow: 0 18px 44px rgb(32 22 18 / 0.13);
}

/* 2. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--earth);
  font-family: var(--body);
  font-size: 1.075rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  color: var(--earth);
  line-height: 1.12;
  text-wrap: balance;
}

/* Hierarchy comes from size and weight, not from shouting. Uppercase is
   reserved for eyebrows and buttons only. */
h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); font-weight: 300; line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.022em; }
h3 { font-size: clamp(1.22rem, 1.8vw, 1.6rem); font-weight: 500; line-height: 1.22; letter-spacing: -0.008em; }
h4 { font-size: 1.0625rem; font-weight: 700; }

p { margin: 0 0 1.15em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* 3. Header --------------------------------------------------------------- */
/* The wireframe shows a solid brown bar with small white uppercase links.
   The brand is kept on the left as a home link — the wireframe bar has none,
   but a header with no route home is worse than the small deviation. */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  background: linear-gradient(rgb(26 18 13 / 0.55), rgb(26 18 13 / 0));
}
/* Pages without a hero photo (404) keep a solid bar, or white links vanish. */
body:not(:has(.hero)) .site-header { position: sticky; background: var(--clay); }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--measure); margin-inline: auto;
  padding: 0.75rem var(--gutter);
  position: relative;
}

.brand { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.brand img { width: 2.4rem; height: 2.4rem; object-fit: contain; }
.brand span {
  font-family: var(--display); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.06em; color: #fff; text-transform: uppercase;
}

/* Navigation links: the dropdown is opened by the menu icon below. */
.nav { display: flex; align-items: center; gap: clamp(0.6rem, 1.4vw, 1.35rem); }

.nav a {
  font-family: var(--display); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: rgb(255 255 255 / 0.88);
  padding: 0.45rem 0; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s; white-space: nowrap;
}
.nav a:hover { color: #fff; border-bottom-color: var(--honey); }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--honey); }

/* Compact disclosure at every viewport width. <details> keeps it working
   without JavaScript, and prevents the growing page list from crowding the
   header. */
.nav-toggle { display: block; flex-shrink: 0; }
.nav-toggle > summary {
  list-style: none; cursor: pointer; display: grid; gap: 5px;
  width: 2rem; padding: 0.55rem 0.15rem;
}
.nav-toggle > summary::-webkit-details-marker { display: none; }
.nav-toggle > summary span { display: block; height: 2px; background: #fff; border-radius: 2px; }
.nav {
  position: absolute; top: 100%; right: var(--gutter); left: var(--gutter);
  flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0;
  background: rgb(26 18 13 / 0.9); border: 1px solid rgb(255 255 255 / 0.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding: 0.5rem; display: none;
}
.nav-toggle[open] + .nav { display: flex; }
.nav a { padding: 0.7rem 0.75rem; text-align: center; }
.nav a:hover, .nav a[aria-current="page"] { background: rgb(255 255 255 / 0.1); }

/* 4. Hero ----------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(30rem, 72vh, 44rem);
  display: grid; place-items: center;
  text-align: center; color: #fff;
  padding: calc(clamp(3.5rem, 8vw, 6rem) + 3rem) var(--gutter) clamp(3.5rem, 8vw, 6rem);
}
.hero > img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(26 18 13 / 0.34) 0%, rgb(26 18 13 / 0.58) 60%, rgb(26 18 13 / 0.72) 100%);
}
.hero h1, .hero p { color: #fff; }
.hero__lede {
  max-width: 42ch; margin: 1.15rem auto 0;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5;
  color: rgb(255 255 255 / 0.93);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 2rem; }

/* Home hero: one photo that drifts slower than the page (script in
   index.html, transform only). The image is taller than the hero so the drift
   never exposes an edge. Without the script, or with reduced motion, it
   simply stays still. */
.hero--parallax > img { inset: -15% 0 auto; height: 130%; will-change: transform; }

/* Compact hero for interior pages — the wireframe uses a short banner with
   just the page title centred over a photo. */
.hero--page { min-height: clamp(17rem, 38vh, 26rem); }
.hero--page h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-weight: 300; letter-spacing: 0.01em; }

/* Brand lockup: mark and wordmark side by side, gold rule beneath both.
   The wordmark is LIGHT and letterspaced in the wireframe, not bold. */
.lockup {
  display: inline-grid; grid-auto-flow: column; align-items: center;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  position: relative; padding-bottom: 0; max-width: 100%;
}
.lockup__mark { width: clamp(2.6rem, 6vw, 4.8rem); height: auto; }
.lockup__word {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.85rem, 5.8vw, 4.4rem); line-height: 1;
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
  white-space: nowrap;
}
.hero .lockup__tag {
  margin: 0.35rem auto 0; color: rgb(255 255 255 / 0.94); max-width: 52ch;
  font-weight: 400; font-size: clamp(0.9rem, 1.5vw, 1.15rem);
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5;
}

/* Certification logos, sitting directly under the home intro text. Each sits
   in the same white circle so logos with white and transparent grounds look
   like one set. */
.certlogos { list-style: none; margin: 1.75rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.certlogos a {
  display: flex; align-items: center; justify-content: center; width: 4.75rem; height: 4.75rem;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--rule); overflow: hidden;
}
/* Logos are mixed shapes (tall B Corp, wide FSSC): cap both sides so each
   sits inside the circle, never across its edge. */
.certlogos img { max-width: 68%; max-height: 62%; width: auto; height: auto; }

/* Impact: brown copy panel beside the contour map, per the wireframe. */
.impact-split { display: grid; grid-template-columns: 1fr 1fr; }
.impact-split__copy {
  background: var(--earth); color: #fff;
  padding: clamp(2rem, 4.5vw, 3.75rem) clamp(1.5rem, 3.5vw, 3rem);
  align-content: center; display: grid;
}
.impact-split__copy h2, .impact-split__copy .eyebrow { color: #fff; }
.impact-split__copy p { color: rgb(255 255 255 / 0.9); }
.impact-split__photo { position: relative; min-height: clamp(16rem, 30vw, 24rem); background: var(--cream); }
.impact-split__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Mission / vision / why — large label left, copy right. */
.creed { display: grid; gap: 0; }
.creed__row {
  display: grid; grid-template-columns: minmax(8rem, 15rem) 1fr;
  gap: clamp(1rem, 3vw, 3rem); align-items: baseline;
  padding: clamp(1.25rem, 2.5vw, 2rem) 0; border-top: 1px solid var(--rule);
}
.creed__label {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  text-transform: uppercase; color: var(--clay); letter-spacing: -0.015em;
}

.creed--mission .creed__row { align-items: center; }
.creed--mission .creed__row > p { margin: 0; }
.creed--mission .creed__row > p:not(.creed__label) { font-size: 1.2rem; }

/* 5. Layout --------------------------------------------------------------- */
.section { padding-block: var(--section); }
.shell { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

/* The products opener contains only a short introduction, so it should not
   carry the full spacing intended for sections with several content blocks. */
.products-intro { padding-block: clamp(3rem, 6vw, 5rem) clamp(1rem, 2vw, 1.5rem); }
.products-intro + .section { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.products-intro .section-head { margin-bottom: 0; }

/* Compact spacing on the pages called out in the review. */
.main--tight .section { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.main--tight .section-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.main--tight .feature + .feature { margin-top: clamp(2rem, 4vw, 3.5rem); }
.beekeepers-page > .hero + .section .section-head { margin-bottom: 0; }
.quality-testing { margin-bottom: 2rem; }

.section--cream { background: var(--cream); }
.section--linen { background: var(--linen); }
.section--tan   { background: var(--tan); }
.section--ink   { background: var(--ink); color: rgb(255 255 255 / 0.86); }
.section--ink h2, .section--ink h3 { color: #fff; }

/* Photographic section backgrounds. Every honeycomb ground (section, band,
   footer call to action) uses the same photo under the same overlay, with
   light text on top. */
.section--comb, .section--honey {
  background:
    linear-gradient(var(--comb-overlay), var(--comb-overlay)),
    url("images/honeycomb-dry.webp") center / cover;
  color: var(--on-comb);
}
.section--comb h2, .section--comb h3, .section--honey h2, .section--honey h3 { color: #fff; }
.section--comb .eyebrow, .section--honey .eyebrow { color: var(--honey); border-top-color: rgb(255 255 255 / 0.24); }
.section--comb .section-head p:not(.eyebrow), .section--honey .section-head p:not(.eyebrow) { color: var(--on-comb); }
.section--comb .creed__row { border-top-color: rgb(255 255 255 / 0.24); }
.section--comb .creed__label { color: var(--honey); }
.section--comb .card__body { border-top-color: rgb(255 255 255 / 0.24); }
.section--comb .card__body p { color: var(--on-comb); }
.section--honey .badge { color: var(--honey); border-color: rgb(240 178 63 / 0.55); }
.section--contour {
  background:
    linear-gradient(rgb(32 22 18 / 0.9), rgb(32 22 18 / 0.9)),
    url("images/contour-map-2026.webp") center / cover;
  color: rgb(255 255 255 / 0.86);
}
.section--contour h2, .section--contour h3 { color: #fff; }
.section--contour .eyebrow { color: var(--honey); }
.section--contour .stat__label { color: rgb(255 255 255 / 0.76); }

/* Full-width honey band used as a divider between major sections. */
.band {
  position: relative; isolation: isolate;
  display: grid; place-items: center; text-align: center;
  min-height: 12rem; padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
  color: #fff;
}
.band > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--comb-overlay); }
.band p { max-width: 46ch; font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 300; font-family: var(--display); line-height: 1.35; color: #fff; }
.band h2 { color: #fff; margin-bottom: 0.6rem; }

.eyebrow {
  font-family: var(--display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-text);
  margin: 0 0 1rem; padding-top: 0.85rem; border-top: 1px solid var(--rule);
  display: inline-block;
}
.section--ink .eyebrow, .section--contour .eyebrow, .impact-split__copy .eyebrow { border-top-color: rgb(255 255 255 / 0.24); }
.section-head--center .eyebrow { border-top: none; padding-top: 0; }
.section--ink .eyebrow, .section--contour .eyebrow, .impact-split__copy .eyebrow { color: var(--honey); }

/* One alignment per block. Headings and body share it — no centred heading
   sitting on top of left-aligned prose. */
.section-head { max-width: 48rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
/* :not(.eyebrow) matters. This rule is for the lede BELOW the heading; the
   eyebrow above it is also a <p>, and without the exclusion this selector
   outweighs .eyebrow and renders it as 18px muted body text. */
.section-head p:not(.eyebrow) { font-size: 1.15rem; color: var(--muted); margin-top: 1.1rem; }
/* --contour is a dark section too. Without it listed here the rule above
   paints --muted (dark ink) onto the dark contour ground. */
.section--ink .section-head p:not(.eyebrow),
.section--contour .section-head p:not(.eyebrow) { color: rgb(255 255 255 / 0.86); }
.section-head--center { max-width: 54rem; margin-inline: auto; text-align: center; }
/* Every <p> is capped at 68ch for readability. In a centred head that cap
   makes the paragraph narrower than the block, and without auto margins it
   anchors left - so text-align:center centres the words inside a box that is
   itself off-centre. Needed on every p here, not just .lede. */
.section-head--center p { margin-inline: auto; }
.section-head--center .lede { max-width: 44rem; }

.lede { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.5; }

/* 6. Components ----------------------------------------------------------- */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.1rem; padding: 0 1.85rem;
  font-family: var(--display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  border-radius: 2px; border: 1px solid transparent; cursor: pointer;
  transition: transform .14s, background .14s, color .14s, border-color .14s;
}

.btn--primary { background: var(--honey); color: var(--ink); }
.btn--primary:hover { background: var(--gold); }
.btn--ghost { border-color: rgb(255 255 255 / 0.55); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--dark { background: var(--clay); color: #fff; }
.btn--dark:hover { background: var(--brown); }
.button-center { display: flex; justify-content: center; margin-top: 2rem; }

/* Text link with an arrow, for in-flow calls to action */
.link-more {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay);
  border-bottom: 1px solid var(--gold); padding-bottom: 0.3rem;
}
.link-more::after { content: "→"; transition: transform .16s; }
.link-more:hover::after { transform: translateX(4px); }

/* Alternating feature rows. Rows flip automatically, so the page does not
   march down the screen with every image on the same side. */
.feature {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.feature + .feature { margin-top: clamp(3.5rem, 7vw, 6.5rem); }
/* nth-of-type, not nth-child — the section heading is a sibling and would
   otherwise throw the count off and leave every image on the same side. */
.feature:nth-of-type(even) .feature__body { order: -1; }
.feature--top { align-items: start; }
.feature__media { position: relative; overflow: hidden; aspect-ratio: 5 / 4; background: var(--cream); }
.feature--portrait .feature__media { aspect-ratio: 4 / 5; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
/* One heading size for every feature block, whether marked up h2 or h3. */
.feature__body h2, .feature__body h3 {
  font-size: clamp(1.45rem, 2.3vw, 2rem); font-weight: 400; line-height: 1.2;
  letter-spacing: -0.012em; margin-bottom: 0.8rem;
}

/* Card grid */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card { display: flex; flex-direction: column; }
.card__media { aspect-ratio: 4 / 3; background: var(--cream); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.15rem 0 0; border-top: 1px solid var(--rule); margin-top: 1.15rem; }
.card__body h3 { margin-bottom: 0.4rem; }
.card__body p { color: var(--earth); }

/* Tile navigation — image tiles with a readable label */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.tile {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 4 / 3;
  display: grid; align-content: end; padding: 1.5rem;
  color: #fff;
}
.tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(32 22 18 / 0.12) 40%, rgb(32 22 18 / 0.78));
  transition: background .25s;
}
.tiles--framed { gap: clamp(0.75rem, 1.6vw, 1.25rem); margin-top: clamp(3rem, 6vw, 5rem); }
.tile img.is-face { object-position: 50% 8%; }  /* portrait source: keep the face in frame */
.tile:hover img { transform: scale(1.05); }
.tile:hover::after, .tile:focus-visible::after { background: rgb(86 64 54 / 0.82); }
.tile h3 { color: #fff; font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.tile span {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; font-family: var(--display); color: var(--honey);
}
.tile span::after { content: "→"; }

/* Statistics */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 3vw, 2.5rem); }
.stat { border-top: 1px solid rgb(255 255 255 / 0.22); padding-top: 1.25rem; }
.section--cream .stat, .section--comb .stat, .section--linen .stat { border-top-color: var(--rule); }
.stat__value {
  font-family: var(--display); font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  font-weight: 300; color: var(--honey); line-height: 1; letter-spacing: -0.03em;
}
.section--cream .stat__value, .section--comb .stat__value, .section--linen .stat__value { color: var(--clay); }
.stat__label { margin-top: 0.5rem; font-size: 0.95rem; color: rgb(255 255 255 / 0.76); }
.section--linen .stat__label, .section--cream .stat__label { color: rgb(58 42 32 / 0.78); }

/* Numbered process steps */
.steps { counter-reset: step; display: grid; gap: 0; }
.steps--2 { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 5vw, 4rem); }
.step { counter-increment: step; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-size: 0.95rem; font-weight: 700;
  color: var(--gold); letter-spacing: 0.06em;
}
.step h3 { margin: 0.5rem 0 0.4rem; }
.step p { color: var(--earth); }

/* Pull quote / story */
.quote { border-left: 2px solid var(--gold); padding: 0.3rem 0 0.3rem 1.5rem; }
.quote p { font-size: 1.1rem; font-style: italic; }
.quote cite { display: block; margin-top: 0.7rem; font-style: normal; font-weight: 700; font-size: 0.9rem; color: var(--earth); }

/* Certification row */
.badges { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.badge {
  font-family: var(--display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.6rem 1rem; border: 1px solid var(--rule); color: var(--clay);
}
.section--ink .badge { color: var(--honey); border-color: rgb(240 178 63 / 0.55); }

/* Beekeeper profiles. Portrait, name, place, then the bio. The photo is a
   real person rather than a stock shot, so it gets the top of the card. */
.profiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
/* Ten profiles over three columns leaves one alone on the last row. Put it in
   the middle column so it reads as the end of a set rather than a gap.
   Must stay inside the three-column breakpoint: at one or two columns,
   grid-column:2 would conjure an implicit extra column and break the grid. */
@media (min-width: 901px) {
  .profiles > .profile:last-child:nth-child(3n + 1) { grid-column: 2; }
}
.profile__media {
  aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream); border-radius: var(--radius);
}
.profile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile h3 { margin: 1rem 0 0; font-size: 1.25rem; }
.profile__place {
  margin-top: 0.3rem; font-family: var(--display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text);
}
.profile p:not(.profile__place) { margin-top: 0.7rem; font-size: 0.95rem; }
.profile blockquote { margin: 0.9rem 0 0; padding-left: 1rem; border-left: 2px solid var(--gold); }
.profile blockquote p { font-style: italic; font-size: 0.95rem; }

/* Letters written by beekeepers to the people who buy their honey. */
.letters { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.letter { border-top: 2px solid var(--ink); padding-top: 1.2rem; }
.letter p { font-size: 1.05rem; font-style: italic; line-height: 1.55; }
.letter cite {
  display: block; margin-top: 0.8rem; font-style: normal; font-weight: 700;
  font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--clay);
}

@media (max-width: 900px) {
  .profiles { grid-template-columns: repeat(2, 1fr); }
  .letters { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .profiles { grid-template-columns: 1fr; }
}

/* Inquiry panel.
   There is no form: a posted form needs a script on the server, and this
   site is static files dropped in over FTP. The address does the work. */
.inquire { border-top: 2px solid var(--ink); padding-top: 1.6rem; }
.inquire__label {
  font-family: var(--display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text);
}
.inquire__addr {
  margin-top: 0.5rem; font-family: var(--display); font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 1.95rem); letter-spacing: -0.02em; line-height: 1.15;
}
.inquire__addr a { color: var(--earth); text-decoration: none; border-bottom: 1px solid var(--gold); }
.inquire__addr a:hover { color: var(--clay); }
.inquire__hint { margin-top: 1.5rem; font-size: 0.95rem; color: var(--muted); }
.inquire__list { margin-top: 0.7rem; display: grid; gap: 0.5rem; list-style: none; }
.inquire__list li { position: relative; padding-left: 1.1rem; font-size: 0.95rem; }
.inquire__list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; background: var(--gold);
}
.inquire .btn { margin-top: 1.8rem; }

/* Warm grade on content photography only. The comb background and bands carry
   it baked into the file; logos, icons and the map are left alone. */
.hero > img, .feature__media img, .card__media img, .tile img, .pillar img,
.stepstrip img, .profile__media img, .product__media img, .panorama,
.impact-split__photo img { filter: var(--photo-warmth); }

/* 7. Footer --------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgb(255 255 255 / 0.72); }
.site-footer a { color: rgb(255 255 255 / 0.72); }
.site-footer a:hover { color: var(--honey); }
/* .site-footer a is more specific than .btn--primary and was overriding the
   button's text colour, leaving it unreadable on the honey fill. */
.site-footer .btn--primary { color: var(--ink); }
.site-footer .btn--primary:hover { color: #fff; }

.footer__cta {
  position: relative; isolation: isolate; color: #fff;
  background:
    linear-gradient(var(--comb-overlay), var(--comb-overlay)),
    url("images/honeycomb-dry.webp") center / cover;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.footer__cta .shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.footer__cta h2 { color: #fff; max-width: 20ch; }

.footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
/* Scale is matched to importance — the address block is not 0.9rem next to a
   2.6rem heading the way it was in the previous build. */
.footer__grid .footer__heading {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--honey); margin-bottom: 0.9rem;
}
.footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.97rem; }
.footer__brand p { font-size: 1rem; max-width: 34ch; }
.footer__brand .brand span { color: #fff; }
.footer__legal {
  border-top: 1px solid rgb(255 255 255 / 0.13);
  padding-block: 1.25rem; font-size: 0.85rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
}

/* 8. Responsive ----------------------------------------------------------- */
@media (max-width: 60rem) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 48rem) {
  .feature, .feature:nth-of-type(even),
  .product, .product:nth-of-type(even),
  .grid--2, .grid--3, .grid--4,
  .tiles, .steps--2, .form__row, .impact-split { grid-template-columns: 1fr; }
  .product:nth-of-type(even) .product__body { order: 0; }
  .creed__row { grid-template-columns: 1fr; gap: 0.35rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  /* Stacked: always image then text, so every row reads the same way. */
  .feature:nth-of-type(even) .feature__body { order: 0; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__cta .shell { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* 9. Wireframe-specific components -----------------------------------------
   Photo treatment follows the wireframe: images are contained blocks with
   space around them, sitting beside text. Full-width photography is reserved
   for hero banners and panorama bands. Product shots get a light panel and
   extra padding so they read as product, not lifestyle. */

/* Native disclosure controls: three photos above one full-width panel. */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.impact-pillar { display: contents; }
.impact-pillar::details-content { display: contents; }
.impact-pillar > summary { grid-row: 1; list-style: none; }
.impact-pillar > summary::-webkit-details-marker { display: none; }
.impact-pillar:nth-child(1) > summary { grid-column: 1; }
.impact-pillar:nth-child(2) > summary { grid-column: 2; }
.impact-pillar:nth-child(3) > summary { grid-column: 3; }
.impact-pillar > .section { grid-row: 2; grid-column: 1 / -1; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.impact-pillar:not([open]) > .section { display: none; }
.pillar {
  position: relative; isolation: isolate; width: 100%;
  min-height: 0; aspect-ratio: 1 / 1;
  display: grid; align-content: end;
  padding: clamp(1.5rem, 3vw, 2.25rem); color: #fff;
  border: 0; font: inherit; text-align: left; cursor: pointer; background: #514b15;
}
.pillar img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.pillar img.is-face { object-position: center top; }
.pillar::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgb(81 75 21 / 0.3), rgb(81 75 21 / 0.86));
}
.pillar:focus-visible { outline-offset: -6px; }
.pillar__title {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--display); line-height: 1.12; letter-spacing: -0.008em;
  font-size: clamp(1.15rem, 2vw, 1.7rem); font-weight: 400;
  padding-bottom: 0.4rem; border-bottom: 2px solid transparent;
}
.pillar__title::after { content: "\2193"; font-size: 0.85em; transition: transform .2s; }
.impact-pillar[open] .pillar__title { border-bottom-color: var(--honey); }
.impact-pillar[open] .pillar__title::after { transform: rotate(180deg); }

/* Full-width panorama band */
.panorama { width: 100%; height: clamp(11rem, 24vw, 20rem); object-fit: cover; display: block; }

/* Product rows — contained shot on a light panel, alternating sides */
.product {
  display: grid; grid-template-columns: minmax(0, 0.8fr) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.product + .product {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid rgb(138 73 43 / 0.18);
}
.product:nth-of-type(even) { grid-template-columns: 6fr 5fr; }
.product:nth-of-type(even) .product__body { order: -1; }
.product__media { background: var(--linen); padding: clamp(1.25rem, 3vw, 2.5rem); }
.product__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.card__media img.is-packaged { object-fit: contain; background: #fff; }
.product__body h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 300; letter-spacing: -0.015em; margin-bottom: 0.8rem; }

/* Horizontal strip of process steps */
.stepstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgb(138 73 43 / 0.16); }
.stepstrip > a { display: block; background: var(--paper); padding: 1.1rem 1.15rem 1.3rem; transition: background .15s; }
.stepstrip > a:hover, .stepstrip > a:focus-visible { background: var(--tan); }
.stepstrip img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; margin-bottom: 0.8rem; }
.stepstrip strong { font-family: var(--display); color: var(--gold-text); font-size: 0.82rem; letter-spacing: 0.09em; }
.stepstrip h3 { font-size: 0.98rem; margin: 0.35rem 0 0.35rem; }
.stepstrip p { font-size: 0.95rem; line-height: 1.5; color: var(--earth); }

/* Fact list to sit beside a photo */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.facts li { position: relative; padding-left: 1.5rem; }
.facts li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 0.5rem; height: 0.5rem; background: var(--gold); border-radius: 50%;
}

/* .section--honey (Food safety) is defined with .section--comb above. */

@media (max-width: 60rem) {
  .stepstrip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 48rem) {
  .pillars, .product, .stepstrip { grid-template-columns: 1fr; }
  .impact-pillar:nth-child(n) > summary, .impact-pillar > .section { grid-row: auto; grid-column: 1; }
  .product:nth-of-type(even) .product__body { order: 0; }
}

/* 10. Beekeeper locator map -------------------------------------------------
   The locator is an embedded Google My Maps iframe. Keep the frame responsive
   and make the external map obvious in the page source and privacy policy. */
/* Map palette — a dark terrain read, close to satellite imagery: deep miombo
   canopy against drier khaki country, water in cold blue. Sitting on the dark
   --contour section, it reads as a photograph rather than a diagram. */
.map-frame {
  background: #20261d; border: 1px solid rgb(255 255 255 / 0.14);
  padding: clamp(0.5rem, 1.4vw, 0.9rem); display: grid; place-items: center;
  border-radius: var(--radius);
}
.map-frame--google {
  --my-maps-header: 60px;
  display: block;
  height: min(68vw, 620px);
  min-height: 420px;
  padding: 0;
  overflow: hidden;
  background: #fff;
}
.map-frame--google .map-embed {
  display: block;
  width: 100%;
  height: calc(100% + var(--my-maps-header));
  transform: translateY(calc(-1 * var(--my-maps-header)));
  border: 0;
}
.map-source { margin: 1rem 0 0; color: rgb(253 250 245 / 0.86); font-size: .92rem; }
.map-source a { color: inherit; }
.home-map-section .map-frame--google { margin-top: 2.5rem; }
.home-map-section .map-source { color: var(--muted); }
.map { width: 100%; max-width: 44rem; height: auto; display: block; }

.map__sea      { fill: #20261d; }                    /* beyond the border */
.map__land     { fill: url(#elev); }
.map__woodland { fill: #2c4423; opacity: 0.95; }     /* the miombo belt */
.map__relief   { opacity: 0.26; mix-blend-mode: soft-light; }
.map__border   { fill: none; stroke: rgb(233 226 200 / 0.30); stroke-width: 2;
                 stroke-linejoin: round; stroke-dasharray: 7 5; }
.map__lake     { fill: #23415c; stroke: rgb(150 195 225 / 0.35); stroke-width: 1.2; }

/* Pins ------------------------------------------------------------------- */
.map__pin, .map__pinlabel, .map__dot { transform-box: fill-box; transform-origin: 50% 100%; }
.map__shadow   { fill: rgb(0 0 0 / 0.45); }
.map__teardrop { fill: #c9412f; stroke: rgb(253 250 245 / 0.92); stroke-width: 2.5; }
.map__bead     { fill: var(--paper); }
.map__pin--hq .map__teardrop { fill: var(--gold); }

/* Collection points from the KML export: many, so shown as dots rather than
   labelled pins. The extent of the network is what these communicate. */
.map__dot { fill: var(--honey); opacity: 0.92; }
.map__dot circle { stroke: rgb(12 18 12 / 0.55); stroke-width: 1.4; }

.map__label {
  font-family: var(--display); font-size: 25px; font-weight: 600;
  fill: #fdfaf5;
  /* Dark halo rather than light: the ground under these labels is now forest. */
  paint-order: stroke; stroke: rgb(12 18 12 / 0.85); stroke-width: 5px;
}
.map__label--sm { font-size: 21px; font-weight: 500; fill: rgb(253 250 245 / 0.94); }

/* Orientation only - set well back from the pin labels so they never compete. */
.map__country {
  font-family: var(--display); font-size: 26px; font-weight: 500;
  letter-spacing: 0.34em; fill: rgb(253 250 245 / 0.22); text-anchor: middle;
}
.map__water {
  font-family: var(--display); font-size: 17px; font-weight: 500;
  letter-spacing: 0.22em; fill: rgb(160 200 230 / 0.65); text-anchor: middle;
}

@media (prefers-reduced-motion: no-preference) {
  .map__pin, .map__pinlabel, .map__dot { animation: pin-drop .62s cubic-bezier(.22,.9,.3,1.06) var(--d, 0s) backwards; }
  @keyframes pin-drop {
    0%   { transform: translateY(-46px) scale(.55); opacity: 0; }
    55%  { opacity: 1; }
    72%  { transform: translateY(3px) scale(1.04); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
  }
}

/* Scale bar and north arrow ---------------------------------------------- */
.map__scale-bg { fill: rgb(12 18 12 / 0.62); }
.map__scale-fill { fill: var(--ink); }
.map__scale-void { fill: rgb(253 250 245 / 0.95); }
.map__scale-line { stroke: var(--ink); stroke-width: 1.5; }
.map__scale-text {
  font-family: var(--display); font-size: 17px; font-weight: 600;
  fill: #fdfaf5; text-anchor: middle;
}
.map__north-arrow { fill: var(--ink); }
.map__north-text  {
  font-family: var(--display); font-size: 19px; font-weight: 700;
  fill: var(--ink); text-anchor: middle;
}

.map-legend {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem;
  margin-top: 1.5rem; font-size: 0.92rem; color: var(--muted);
}
/* The legend lives on the dark contour section, where --muted (dark ink) is
   invisible - it measured 1.19:1. The automated sweep cannot see this because
   that section paints its ground with a gradient, not a background-color. */
.section--contour .map-legend { color: rgb(253 250 245 / 0.86); }
.map-legend span { display: inline-flex; align-items: center; gap: 0.55rem; }
.map-legend i { width: 0.7rem; height: 0.7rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--clay); }
.map-legend i { background: #c9412f; }
.map-legend i.is-hq { background: var(--gold); }
.map-legend i.is-bcoe { background: #c9412f; }
.map-legend i.is-site { border-radius: 50%; transform: none; background: var(--honey); }

/* 11. Labelled certification circles and a plain partner list. */
.certlogos--labelled { justify-content: center; border-top: 0; margin: 0; padding: 0; gap: 2rem; }
.certlogos--labelled li { display: grid; justify-items: center; gap: 0.35rem; min-width: 7rem; text-align: center; }
.certlogos--labelled span, .partners span { font-family: var(--display); font-weight: 600; font-size: 0.95rem; }
.certlogos--labelled small, .partners small { color: var(--muted); font-size: 0.85rem; }
.partners { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 3rem; list-style: none; margin: 2.5rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid var(--rule); }
.partners li { display: grid; justify-items: center; gap: 0.35rem; }

/* 12. Placeholders ----------------------------------------------------------
   Copy or photos still owed by Upendo. grep for "placeholder" before launch. */
.placeholder {
  border: 1px dashed var(--clay); padding: 1rem 1.25rem; margin-top: 1.25rem;
  font-size: 0.95rem; color: var(--clay); background: rgb(255 255 255 / 0.35);
}

/* Header crops: keep the subject in frame (faces, the comb frame). */
.hero--parallax > img { object-position: 30% center; }
.hero--faces > img { object-position: center 18%; }

/* Plain closing statement on a page that ends in the honeycomb footer band. */
.closing-line { padding-block: clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.closing-line p {
  margin-inline: auto; max-width: 46ch; font-family: var(--display); font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.35;
}