/* ==========================================================================
   MibaStar — shared stylesheet
   Brand colors and font are taken directly from the client's brand kit:
   #441b13 (brown), #00ae8c (teal), #8cc63f (lime), font: Rubik.
   Category colors are sampled from the client's own category icon set.
   ========================================================================== */

@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/rubik-variable.woff2") format("woff2");
}

:root {
  /* primary brand palette (exact hex from brand guide) */
  --brown: #441b13;
  --teal: #00ae8c;
  --lime: #8cc63f;
  --eco-green: color-mix(in srgb, var(--lime) 70%, #142408 30%);
  --eco-green-a11y: color-mix(in srgb, var(--lime) 55%, #142408 45%); /* 4.8:1 on white, vs 3.5:1 for --eco-green */

  /* accessible teal — WCAG AA requires 4.5:1 for text/UI, but --teal on
     white is only 2.8:1. Use these wherever teal sits behind or as text
     (links, buttons, chips, focus rings); keep --teal for icons and large
     decorative fills, where contrast rules don't apply. */
  --teal-a11y: #008369; /* 4.75:1 on white */
  --teal-a11y-hover: #00715a;

  /* category colors (sampled from the client's own category icons) */
  --c-bakery: #607040;
  --c-chilled: #2f7896;
  --c-heat: #d97a2b;
  --c-heat-a11y: #a35a1f; /* 5.2:1 on white, vs 3.1:1 for --c-heat; same "text/UI vs decorative" split as teal above */
  --c-portions: #b64034;
  --c-coffee: #5a3b2e;

  /* neutrals */
  --paper: #fdf8ef;
  --paper-alt: #f6ebd8;
  --ink: var(--brown);
  --ink-soft: #7a6a63;
  --line: #e7e0da;

  --font: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max: 1200px;
  --edge: clamp(1.25rem, 4vw, 3rem);
  --radius: 6px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--teal-a11y);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  margin: 0 0 0.6em;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

ul { margin: 0; padding: 0; list-style: none; }

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--edge);
}

section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section-alt { background: var(--paper-alt); }

.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-a11y);
  margin-bottom: 0.6rem;
  display: block;
}

.lede {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
}

.btn-primary {
  background: var(--teal-a11y);
  color: #ffffff;
  box-shadow: 0 6px 20px -4px rgba(0, 174, 140, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary:hover {
  background: var(--teal-a11y-hover);
  box-shadow: 0 8px 24px -4px rgba(0, 174, 140, 0.65);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--ink);
}
.btn-outline:hover { background: var(--paper-alt); }

.btn-outline-light {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--brown);
}
.btn-outline-light:hover { background: var(--paper-alt); border-color: var(--paper-alt); }

/* ---------------- header ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5.25rem;
}

.brand img {
  height: 3.9rem;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.nav a {
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
}
.nav a:hover { color: var(--teal-a11y); text-decoration: none; }
.nav a.btn-primary, .nav a.btn-primary:hover { color: #ffffff; }

.nav-item { position: relative; }

.nav-item > .nav-link {
  font: inherit;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.nav-item > .nav-link:hover { color: var(--teal-a11y); text-decoration: none; }
.nav-item > .nav-link svg { width: 0.85rem; height: 0.85rem; transition: transform .2s ease; }

.dropdown {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px -12px rgba(68,27,19,0.25);
  min-width: 15rem;
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-item:hover > .nav-link svg { transform: rotate(180deg); }

.dropdown a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: 4px;
  font-size: 0.9rem;
  color: var(--ink);
}
.dropdown a:hover { background: var(--paper-alt); text-decoration: none; }
.dropdown .dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex-shrink: 0; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.6rem;
}
.nav-toggle svg { width: 1.6rem; height: 1.6rem; color: var(--ink); }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------------- hero ---------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
.hero-grid {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  gap: clamp(2rem, 4vw, 4rem);
}
.hero-grid > div:first-child {
  /* wide enough for "Premium Packaging." on one line at the largest h1 size */
  max-width: 33rem;
}
@media (min-width: 961px) {
  .hero--full .lede {
    max-width: min(33rem, 43vw - 24px, 530px - 3.1vw);
  }
}
.hero-media {
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-media img {
  width: auto;
  height: 76%;
  transform: translateX(10%);
  max-width: 85%;
  object-fit: contain;
  object-position: center;
}
/* Keep each sentence of the hero headline on its own line: the spans are
   atomic inline-level boxes, so the line breaks fall between sentences
   instead of mid-phrase ("Advanced / Tech. Natural / Soul. Premium ...").
   On very narrow screens a span that still doesn't fit wraps inside itself. */
.hero-title > span { display: inline-block; }

.hero .cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

/* hero--photo: full-bleed background variant (image spans the whole
   section width, copy sits on a soft white scrim over it) — trying this
   as a bigger alternative to the boxed hero-media image above. Mirrors
   the .solution-hero full-bleed .media pattern used on product pages. */
.hero--photo {
  position: relative;
  overflow: hidden;
  z-index: 0;
}
.hero--photo .wrap {
  position: relative;
  z-index: 1;
  min-height: clamp(20rem, 34vw, 30rem);
  display: flex;
  align-items: center;
}
.hero--photo .hero-copy { max-width: 30rem; }
.hero--photo .media {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  margin-left: -50vw;
  z-index: -1;
}
.hero--photo .media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.hero--photo .media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.95) 38%, rgba(255,255,255,0.5) 62%, rgba(255,255,255,0) 85%);
}

/* Full-bleed homepage hero: on desktop the section is locked to exactly one
   screen (viewport minus the sticky header), so object-fit: cover trims the
   photo's empty top and bottom bands instead of pushing the next section
   below the fold.
   The photo is 100vw under cover-fit, so the pack cluster's left edge always
   lands at ~47% of the viewport. The copy, though, hangs off the centred
   1200px wrap, so its right edge tracks vw/2 — it outruns the packs and the
   lede ends up printed over the cheese pouch. Hold the lede clear of that
   47% line (see the .hero .lede rule above): the first term is the natural
   column width, the second covers viewports below --max (copy pinned near
   the left edge), the third those above it (copy drifting right with the
   centred wrap). They meet at 1200px. The h1 is left alone — it stays on
   one line and clears the packs on its own up to ~1900px. */
@media (min-width: 961px) {
  .hero--full {
    height: calc(100vh - 5.25rem - 1px);
    height: calc(100svh - 5.25rem - 1px);
    min-height: 26rem;
    padding-block: 0;
  }
  .hero--full .hero-grid { height: 100%; min-height: 0; }
}
@media (max-width: 960px) {
  .hero--full .hero-grid { display: block; }
  .hero--full .hero-grid > div:first-child { max-width: none; }
  .hero--full .hero-media {
    position: relative;
    inset: auto;
    left: auto;
    width: auto;
    margin-left: 0;
    aspect-ratio: 1 / 1;
    z-index: 0;
    margin-top: 1.75rem;
  }
  /* home-hero-v3.png has a lot of built-in empty margin around the product
     cluster (it was composed for the wide desktop crop) — cover-crop in on
     the product itself instead of showing the whole image shrunk down with
     most of the box empty. On a square box, object-fit:cover always shows
     the image's full 1080px height (no vertical slack), so object-position
     only moves the crop window horizontally — 100% pins that window to the
     image's right edge, which is as close as it can get to centering the
     product cluster (it sits close enough to the right edge itself that
     the ideal centered window would run past the source's edge). */
  .hero--full .hero-media img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 100% center;
    transform: none;
  }
}

/* ---------------- solutions intro (home strip) ---------------- */
.solutions-intro {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
.solutions-intro .lede {
  margin-inline: auto;
}

/* ---------------- solution cards (home strip + hub grid) ---------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* home strip: symmetrical layout — flex + centered wrap instead of a
   left-stuck last row, and larger category icons per card */
#solutions-strip .card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#solutions-strip .solution-card {
  flex: 1 1 150px;
  max-width: calc(20% - 1.2rem);
  min-width: 0;
}
#solutions-strip .cat-icon {
  width: 3.25rem;
  height: 3.25rem;
}
.solution-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.solution-card:hover {
  box-shadow: 0 16px 34px -18px rgba(68,27,19,0.3);
  transform: translateY(-3px);
}
.solution-card .thumb {
  aspect-ratio: 1 / 1;
  background: var(--paper-alt);
  overflow: hidden;
}
.solution-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.solution-card .body {
  padding: 1.25rem 1.35rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.solution-card .cat-icon {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.75rem;
}
.solution-card h3 { margin-bottom: 0.4rem; font-size: 1.15rem; }
.solution-card p.desc {
  color: var(--ink-soft);
  font-size: 0.92rem;
  flex: 1;
}
.solution-card .learn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 0.75rem;
}
.solution-card .learn svg { width: 0.9rem; height: 0.9rem; transition: transform .18s ease; }
.solution-card:hover .learn svg { transform: translateX(3px); }
/* stretched link: the whole card is clickable, the "Learn more" label stays visible */
.solution-card .learn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.solution-card .learn:focus-visible::after {
  outline: 2px solid var(--teal-a11y);
  outline-offset: -3px;
  border-radius: var(--radius);
}

.solution-card.wide {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.solution-card.wide .thumb { aspect-ratio: auto; height: 100%; }
.solution-card.wide .body { justify-content: center; }


/* eco tag chip, colored per category via inline style/data attr */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 100px;
  color: #fff;
  align-self: flex-start;
  margin-bottom: 0.6rem;
}

/* ---------------- sustainability badges ---------------- */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.eco-badge {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: #fff;
  text-align: center;
}
.eco-badge svg { width: 2.25rem; height: 2.25rem; color: var(--teal); margin-bottom: 0.75rem; }
/* the recycle badge ships as flat white artwork; masking it lets the badge
   pick up the same icon color as its line-drawn siblings */
.eco-badge .badge-art {
  display: inline-block;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.75rem;
  background-color: var(--teal);
  -webkit-mask: url("../icons/recycle-badge.png") no-repeat center / contain;
  mask: url("../icons/recycle-badge.png") no-repeat center / contain;
}
.eco-badge h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.eco-badge p { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

.pillar-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.pillar {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.pillar-badge {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal);
  margin-bottom: 0.85rem;
}
.pillar-badge svg, .pillar-badge img { width: 1.6rem; height: 1.6rem; color: #fff; object-fit: contain; }
.pillar .step {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal-a11y);
}
.pillar h3 { margin-top: 0.4rem; }
.pillar p { color: var(--ink-soft); margin: 0; font-size: 0.92rem; }

/* connects the three pillars into a left-to-right progression; rotates back
   to a downward chevron on narrow screens once the row stacks vertically */
.pillar-arrow { display: flex; align-items: center; justify-content: center; color: var(--teal-a11y); opacity: 0.4; }
.pillar-arrow svg { width: 1.5rem; height: 1.5rem; transform: rotate(-90deg); }

.material-row {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.material-row .mat { flex: 1 1 180px; text-align: center; }
.material-row .swatch {
  height: 5.25rem;
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.material-row .swatch svg, .material-row .swatch img { width: 2.6rem; height: 2.6rem; color: #fff; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); }

/* closing line for the materials section — sits full-width under the
   text + photo split rather than as a caption inside the photo column */
.materials-note {
  margin-top: 2.25rem;
  text-align: center;
  font-size: clamp(1.05rem, 2.4vw, 1.6rem);
  color: var(--ink-soft);
}

/* ---------------- sustainability page: gentle green theme ----------------
   Softer, earthier accent than the site-wide teal — swaps in a muted sage
   green plus a pale mist background, scoped to this page only so the rest
   of the site keeps its standard brand palette. */
.sustainability-page {
  --sus-green: #ebfaee;
  --sus-green-text: color-mix(in srgb, var(--sus-green) 55%, #14260f 45%);
  --sus-mist: #f3f8f1;
  --sus-line: #dfe9da;
}
.sustainability-page .hero {
  background: radial-gradient(120% 140% at 78% 12%, #f8fbf5 0%, var(--paper) 45%, var(--sus-mist) 100%);
}
.sustainability-page .hero::after {
  background-color: var(--sus-green);
  -webkit-mask: url("../decor/leaf-branch-mono.svg") no-repeat center / contain;
          mask: url("../decor/leaf-branch-mono.svg") no-repeat center / contain;
  width: min(30rem, 62vw);
  height: min(30rem, 62vw);
  top: -8%;
  right: -6%;
  transform: rotate(6deg);
}
.sustainability-page .section-alt { background: var(--sus-mist); }
.sustainability-page .eyebrow { color: var(--sus-green-text); }
.sustainability-page .eco-badge,
.sustainability-page .pillar {
  border-color: var(--sus-line);
}
.sustainability-page .eco-badge svg,
.sustainability-page .pillar .step,
.sustainability-page .pillar-arrow,
.sustainability-page .feature-grid svg {
  color: var(--sus-green-text);
}
.sustainability-page .pillar-badge { background: var(--sus-green-text); }
.sustainability-page .eco-badge .badge-art { background-color: var(--sus-green-text); }

/* ---------------- technology showcase (photo + spec chips, zigzag) ---------------- */
.tech-feature-row {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vw, 4.5rem);
  margin-top: 2.5rem;
}
.tech-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.tech-feature.reverse .tech-feature-media { order: 2; }
.tech-feature-media { position: relative; }
.tech-feature-media .frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 48px -22px rgba(20, 10, 5, 0.4);
}
.tech-feature-media .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tech-feature-media .badge-icon {
  position: absolute;
  left: -1.1rem;
  bottom: -1.1rem;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sus-green-text);
  box-shadow: 0 8px 20px rgba(20, 38, 15, 0.35);
}
.tech-feature.reverse .tech-feature-media .badge-icon { left: auto; right: -1.1rem; }
.tech-feature-media .badge-icon svg { width: 1.75rem; height: 1.75rem; color: #fff; }
.tech-feature-index {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sus-green-text);
  margin-bottom: 0.5rem;
}
.tech-feature-body h3 { font-size: 1.35rem; margin-bottom: 0.6rem; }
.spec-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem 0.4rem 0.6rem;
  border-radius: 100px;
  background: var(--sus-green);
  color: var(--sus-green-text);
}
.spec-chip svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }

/* ---------------- process / tech icon row ---------------- */
.process-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 2.5rem;
  margin-top: 2.5rem;
}
.process-row .proc { text-align: center; }
.process-row svg { width: 2.25rem; height: 2.25rem; color: var(--teal); margin-bottom: 0.75rem; }
.process-row h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.process-row p { font-size: 0.88rem; color: var(--ink-soft); margin: 0; }

/* ---------------- news ---------------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.news-card {
  border-top: 3px solid var(--teal);
  padding-top: 1rem;
}
.news-card .date {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.news-card img {
  aspect-ratio: 4/3;
  object-fit: contain;
  background: var(--paper-alt);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
/* ---------------- news: featured + sidebar (news.html) ---------------- */
.news-featured {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 3rem;
  align-items: start;
}
.feature-article .thumb {
  aspect-ratio: 16/9;
  background: var(--paper-alt);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.feature-article .thumb img { width: 100%; height: 100%; object-fit: contain; }
.feature-article p { color: var(--ink-soft); max-width: 65ch; }
.feature-article p:last-of-type { margin-bottom: 0; }

.news-sidebar {
  position: sticky;
  top: calc(5.25rem + 2rem);
}
.news-sidebar h2 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.news-sidebar .side-item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.9rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.news-sidebar .side-item:last-child { border-bottom: none; padding-bottom: 0; }
.news-sidebar .side-item .thumb {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-alt);
}
.news-sidebar .side-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-sidebar .side-item .cat {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--teal-a11y);
  margin-bottom: 0.25rem;
}
.news-sidebar .side-item h3 { margin: 0; font-size: 0.92rem; line-height: 1.35; color: var(--ink); }
.news-sidebar .side-item:hover h3 { color: var(--teal-a11y); }

.news-more { margin-top: 1rem; }
.news-more .more-item {
  padding-block: 2.75rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 6rem;
}
.news-more .more-item .thumb {
  aspect-ratio: 16/9;
  background: var(--paper-alt);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.news-more .more-item .thumb img { width: 100%; height: 100%; object-fit: contain; }
.news-more .more-item p { color: var(--ink-soft); max-width: 65ch; }
.news-more .more-item p:last-of-type { margin-bottom: 0; }

/* ---------------- news carousel (home) ---------------- */
.news-carousel { position: relative; }
.news-carousel .news-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin: 0 -0.25rem;
  padding: 0 0.25rem 0.5rem;
}
.news-carousel .news-track::-webkit-scrollbar { display: none; }
.news-carousel .news-track .news-card {
  flex: 0 0 380px;
  scroll-snap-align: start;
}
.news-carousel .arrow {
  position: absolute;
  top: 30%;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -12px rgba(68,27,19,0.35);
  transition: background .18s ease, opacity .18s ease;
}
.news-carousel .arrow:hover { background: var(--paper-alt); }
.news-carousel .arrow.prev { left: -1.375rem; }
.news-carousel .arrow.next { right: -1.375rem; }
.news-carousel .arrow svg { width: 1.1rem; height: 1.1rem; color: var(--ink); }
.news-carousel .arrow:disabled { opacity: 0.3; cursor: default; }
.news-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
@media (max-width: 960px) {
  .news-carousel .news-track .news-card { flex-basis: min(320px, 78vw); }
}
@media (max-width: 680px) {
  .news-carousel .news-track .news-card { flex-basis: 82%; }
  .news-carousel .arrow.prev { left: 0.25rem; }
  .news-carousel .arrow.next { right: 0.25rem; }
}

/* ---------------- solution detail page ---------------- */
.solution-hero {
  --hero-color: var(--teal);
  position: relative;
  overflow: hidden;
  z-index: 0;
  color: #fff;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background:
    repeating-radial-gradient(circle at 78% 38%, rgba(255,255,255,0.09) 0, rgba(255,255,255,0.09) 1.5px, transparent 1.5px, transparent 32px),
    radial-gradient(120% 130% at 78% 30%,
      color-mix(in srgb, var(--hero-color) 60%, #ffffff 40%) 0%,
      var(--hero-color) 42%,
      color-mix(in srgb, var(--hero-color) 65%, #000000 35%) 100%);
}
.solution-hero .wrap {
  position: relative;
  z-index: 1;
  min-height: clamp(16rem, 30vw, 26rem);
  display: flex;
  align-items: center;
}
.solution-hero .wrap > div:first-child { max-width: 30rem; }
.solution-hero h1 { color: #fff; font-weight: 800; font-size: clamp(2.25rem, 4.6vw, 3.35rem); line-height: 1.22; margin-bottom: 0.5rem; }
.solution-hero .hero-slogan { display: block; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(255,255,255,0.68); margin-bottom: 1.1rem; }
.solution-hero .lede { color: rgba(255,255,255,0.85); font-size: 1.05rem; max-width: 46ch; margin-bottom: 1.85rem; }
.solution-hero .tag-chip {
  background: #ffffff !important;
  color: var(--hero-color);
  font-size: 0.75rem;
  padding: 0.42rem 0.9rem;
  margin-bottom: 1.1rem;
}
.solution-hero .btn-primary {
  background: #ffffff;
  color: var(--hero-color);
  border-radius: 100px;
  padding: 0.95rem 2rem;
  font-size: 1rem;
  box-shadow: 0 6px 22px -4px rgba(0, 0, 0, 0.45);
}
.solution-hero .btn-primary:hover {
  background: var(--paper-alt);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -4px rgba(0, 0, 0, 0.5);
}

/* image breaks out of the max-width wrap to bleed the full viewport width */
.solution-hero .media {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  margin-left: -50vw;
  z-index: -1;
  min-height: 0;
}
.solution-hero .media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 82% center;
  transform: scale(1.22);
  transform-origin: right center;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.35));
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 54%, #000 74%, #000 100%);
          mask-image: linear-gradient(100deg, transparent 0%, transparent 54%, #000 74%, #000 100%);
}
/* fully pre-composed hero photos (background + product already laid out just
   right in the source image) — show as-is, no extra zoom/fade needed. The
   section is locked to a slightly shorter-than-native ratio (source photos
   are 1920x1080; this crops ~80px off the top or bottom, whichever side of
   each photo has empty background rather than product — see the
   --crop-top/--crop-bottom modifiers below) so the banner reads a bit more
   compact without ever trimming the product itself. */
.solution-hero--flat .media img {
  object-fit: cover;
  object-position: center;
  transform: none;
  -webkit-mask-image: none;
          mask-image: none;
}
@media (min-width: 961px) {
  .solution-hero--flat { aspect-ratio: 1920 / 1000; padding-block: 0; }
  .solution-hero--flat .wrap { height: 100%; min-height: 0; }
}
/* crop direction per page: crop-top keeps the bottom of the photo (product
   sits low/central), crop-bottom keeps the top (product sits high/central). */
.solution-hero--crop-top .media img { object-position: center bottom; }
.solution-hero--crop-bottom .media img { object-position: center top; }

/* chilled hero: source photo has a lot of empty water/background on the
   left — zoom and recenter on the product cluster instead of the default
   crop so the packs read bigger, the dead space shrinks, and the cluster
   clears the copy column. object-position has no horizontal slack to work
   with here (the image's native ratio already matches the box width under
   cover-fit), so the rightward shift comes from the scale/translateX pair
   instead — translateX alone would just crop the right-hand pack. */
.solution-hero--focus-product .media img {
  object-position: 62% 36%;
  transform: scale(1.28) translateX(7%);
}
/* Under cover-fit the photo always fills the box width, so the zoomed pack
   cluster starts at a fixed ~46% of the viewport no matter how wide the
   screen is. The copy column, though, is a flat 30rem, and below --max the
   wrap stops centring — so the two collide on smaller laptops (~1250px and
   down) and the lede runs onto the cheese pack. Taper the column across that
   band; it reaches the full 30rem again by ~1220px, so wider screens render
   exactly as before. */
@media (min-width: 961px) {
  .solution-hero--focus-product .wrap > div:first-child {
    max-width: min(30rem, 42vw - 2rem);
  }
}

/* ---------------- two-product split (bakery / chilled / portions) ---------------- */
.product-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.product-split .item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  background: #fff;
}
.product-split .item h3 { margin-bottom: 0.75rem; }
.product-split .item p { font-size: 0.95rem; color: var(--ink-soft); }
.product-split .item p:last-child { margin-bottom: 0; }
.product-split .item b { color: var(--ink); }
.product-split .item .thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-alt);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
  padding: 1rem;
  box-sizing: border-box;
}
.product-split .item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* wet sachet product shot is a transparent cutout — give it a soft tinted
   backdrop (instead of the flat neutral box) and less padding so it reads
   bigger, since object-fit: contain leaves dead space around the diagonal
   packet shape otherwise. */
.product-split .item .thumb--tinted {
  background: radial-gradient(130% 140% at 28% 18%,
    color-mix(in srgb, var(--accent, var(--c-portions)) 22%, #fff 78%) 0%,
    var(--paper-alt) 68%);
  padding: 0.4rem;
}
.product-split .item .thumb--tinted img { transform: translateX(var(--thumb-shift-x, 0)) scale(var(--thumb-scale, 1.22)); }
.product-split .item .item-icon {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--c-bakery);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.product-split .item .item-icon svg,
.product-split .item .item-icon img {
  width: 1.6rem;
  height: 1.6rem;
  color: #fff;
  object-fit: contain;
}

/* ---------------- text + supporting photo side-by-side ---------------- */
.text-photo-split {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 2rem;
  align-items: center;
}
.text-photo-split .thumb { margin: 0; }

.note-box {
  border-left: 3px solid var(--teal);
  background: var(--paper-alt);
  padding: 1rem 1.25rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.note-box b { color: var(--ink); }

.note-box--callout {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.note-box--callout svg { width: 3.75rem; height: 3.75rem; color: var(--teal); flex-shrink: 0; }
.note-box--callout p { margin: 0; }

/* ---------------- product film (HTML5 video block) ---------------- */
/* No autoplay: these are 1-minute narrated brand films, so playback stays
   user-initiated (also keeps the page usable on mobile data). preload="none"
   means only the poster is fetched until someone presses play. */
.video-frame { margin: 0; }
.video-frame video {
  display: block;
  width: 100%;
  /* the width/height attributes on <video> map to presentational height,
     which would otherwise beat aspect-ratio and letterbox the film */
  height: auto;
  aspect-ratio: 16 / 9;
  background: #1c0f0a;
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -22px rgba(20, 10, 5, 0.4);
}
.video-frame figcaption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.85rem;
}
/* centred variant: the film is the whole section, not a column beside copy */
.video-frame--wide {
  max-width: 880px;
  margin-top: 2rem;
  margin-inline: auto;
}
.video-frame--wide figcaption { text-align: center; }

/* text + film side by side: the film needs more room than a still photo
   does, so this widens the media column of .text-photo-split (1.8fr/1fr). */
.text-photo-split--media-wide { grid-template-columns: 1.35fr 1fr; }

/* ---------------- highlight list (icon + heading + full paragraph) ---------------- */
.highlight-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.highlight-list .item svg { width: 2rem; height: 2rem; color: var(--teal); margin-bottom: 0.6rem; }
.highlight-list .item .icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--accent, var(--c-heat));
  margin-bottom: 0.9rem;
}
.highlight-list .item .icon-badge svg { width: 1.9rem; height: 1.9rem; color: #fff; margin-bottom: 0; }
.highlight-list .item h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.highlight-list .item p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.feature-grid .feature { text-align: center; }
.feature-grid svg { width: 2rem; height: 2rem; color: var(--teal); margin-bottom: 0.6rem; }
.feature-grid h3 { font-size: 0.95rem; margin-bottom: 0.25rem; }
.feature-grid p { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

.feature-grid--badged svg {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.7rem;
  box-sizing: content-box;
  margin-bottom: 0.9rem;
  background: rgba(0, 174, 140, 0.12);
  border-radius: 50%;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
}
.spec-table th {
  width: 32%;
  color: var(--ink-soft);
  font-weight: 600;
}
.spec-table tr:nth-child(odd) { background: var(--paper-alt); }
.spec-table thead th { width: auto; color: var(--ink); font-weight: 700; background: transparent; border-bottom-width: 2px; }
.spec-table thead tr { background: transparent !important; }

.machine-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.machine-row--center { justify-content: center; }
.machine-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1.15rem 0.5rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.machine-pill svg {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0.45rem;
  box-sizing: content-box;
  color: var(--teal);
  background: rgba(0, 174, 140, 0.12);
  border-radius: 50%;
  flex-shrink: 0;
}

.machine-row--tight { gap: 0.6rem; }
.machine-row--tight .machine-pill { padding: 0.45rem 0.9rem 0.45rem 0.4rem; font-size: 0.88rem; gap: 0.5rem; }
.machine-row--tight .machine-pill svg { width: 1.4rem; height: 1.4rem; padding: 0.45rem; }

.format-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 340px;
  height: 5.5rem;
  padding: 0.5rem 0.9rem;
  background: var(--paper);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-top: 2px solid var(--teal-a11y);
  border-radius: 0 0 8px 8px;
}
.format-pill svg {
  width: 2.8rem;
  height: 2.8rem;
  color: var(--teal-a11y);
  flex-shrink: 0;
}
.format-pill-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  text-align: center;
}
.format-pill-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.format-pill-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}

.format-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.75rem 1.25rem;
  background: var(--paper);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-top: 2px solid var(--teal-a11y);
  border-radius: 0 0 8px 8px;
}
.format-box-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.format-box-items {
  display: flex;
  align-items: center;
}
.format-box-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
  padding: 0 1.5rem;
}
.format-box-item + .format-box-item {
  border-left: 1px solid var(--line);
}
.format-box-item svg {
  width: 2.2rem;
  height: 2.2rem;
  color: var(--teal-a11y);
  flex-shrink: 0;
}
.format-box-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}

.cta-band {
  background: var(--brown);
  color: #fff;
  text-align: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.75); max-width: 55ch; margin: 0 auto 1.5rem; }

/* ---------------- forms ---------------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-grid .full { grid-column: span 2; }
label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.req {
  color: var(--c-portions);
  font-weight: 700;
}
.form-required-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}
input, textarea, select {
  width: 100%;
  font: inherit;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--teal-a11y);
  outline-offset: 1px;
}
textarea { resize: vertical; min-height: 6rem; }
.form-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 0.75rem;
}
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 1.1rem;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-soft);
  cursor: pointer;
}
.form-consent input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  accent-color: var(--teal-a11y);
  cursor: pointer;
}

/* ---------------- phone field: country-code picker ---------------- */
.phone-field {
  position: relative;
  display: flex;
  gap: 0.5rem;
}
.country-select {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  width: auto;
  padding: 0.75rem 0.65rem;
  cursor: pointer;
  font: inherit;
}
.country-select:hover { border-color: var(--teal-a11y); }
.country-select-flag { font-size: 1.15rem; line-height: 1; }
.country-select-dial { font-weight: 600; }
.country-select-caret { opacity: 0.55; flex-shrink: 0; }
.phone-field .phone-number-input { flex: 1; min-width: 0; }
.country-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 300px;
  max-width: min(90vw, 320px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 36px -10px rgba(0,0,0,0.28);
  overflow: hidden;
}
.country-search {
  border: none !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
}
.country-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  max-height: 250px;
  overflow-y: auto;
}
.country-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font-size: 0.88rem;
}
.country-list li:hover,
.country-list li[aria-selected="true"] { background: var(--paper-alt); }
.country-list .name { flex: 1; }
.country-list .dial { color: var(--ink-soft); font-size: 0.82rem; }
.country-list .empty { color: var(--ink-soft); cursor: default; }
.country-list .empty:hover { background: transparent; }
.form-success {
  display: none;
  background: #eef8f5;
  border: 1px solid var(--teal-a11y);
  color: #045c49;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-top: 1rem;
}
.form-success.show { display: block; }
.form-error {
  display: none;
  background: #fdecec;
  border: 1px solid #d64545;
  color: #8a1f1f;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-top: 1rem;
}
.form-error.show { display: block; }

/* Cloudflare Turnstile widget, injected by main.js just above the submit
   button. min-height reserves the widget row so the form does not jump when
   the challenge finishes loading. */
.turnstile-holder {
  margin-top: 1.25rem;
  min-height: 65px;
}
.footer-form .turnstile-holder { margin-top: 0.15rem; }
/* The widget will not render below 300px wide; scale it down on the narrowest
   phones rather than letting it push the page into horizontal scroll. */
@media (max-width: 360px) {
  .turnstile-holder {
    transform: scale(0.88);
    transform-origin: left top;
    min-height: 58px;
  }
}

.contact-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.contact-details .item { border-top: 3px solid var(--teal); padding-top: 0.85rem; }
.contact-details h3 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 0.35rem; }

/* ---------------- footer ---------------- */
.site-footer {
  background: var(--brown);
  color: rgba(255,255,255,0.85);
  padding-block: 3.5rem 1.75rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.3fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer-brand img { height: 3rem; margin-bottom: 0.9rem; }
.footer-brand p { color: rgba(255,255,255,0.7); font-size: 0.92rem; max-width: 26ch; }
.footer-brand-logos {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 0.9rem;
}
.footer-brand-logos img { margin-bottom: 0; }
.footer-brand img.footer-cert {
  height: 2.5rem;
  margin: 0;
}
.cert-logos { display: flex; align-items: center; gap: 2rem; margin-top: 1.75rem; }
.cert-logos img { height: 4.25rem; width: auto; }
.cert-logos img.cert-tall { height: 6.5rem; }
.cert-note { margin-top: 0.9rem; font-size: 0.85rem; color: var(--ink-soft); }
.footer-col h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.85rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a { color: #fff; font-size: 0.92rem; }
.footer-col a:hover { color: var(--lime); text-decoration: none; }
.social-link { display: inline-flex; align-items: center; gap: 0.5rem; }
.social-link svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }

.footer-form input, .footer-form textarea {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.footer-form input::placeholder, .footer-form textarea::placeholder { color: rgba(255,255,255,0.5); }
.footer-form { display: flex; flex-direction: column; gap: 0.6rem; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1.5rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}
.footer-bottom a { color: rgba(255,255,255,0.7); }

/* ---------------- misc ---------------- */
.anchor-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.anchor-btn svg { width: 0.9rem; height: 0.9rem; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--teal-a11y);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 1000;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------------- responsive ---------------- */
@media (max-width: 960px) {
  .hero--photo .wrap { display: block; padding-block: 1.5rem; }
  .hero--photo .hero-copy { max-width: none; }
  .hero--photo .media {
    position: relative;
    top: auto; left: auto; margin-left: 0;
    width: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    z-index: 0;
    margin-top: 1.75rem;
    border-radius: var(--radius);
    overflow: hidden;
  }
  .hero--photo .media::after {
    background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 25%);
  }
  .solution-hero .wrap { display: block; padding-block: 1.5rem; }
  .solution-hero .wrap > div:first-child { max-width: none; }
  .solution-hero .media {
    position: relative;
    top: auto; left: auto; margin-left: 0;
    width: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    z-index: 0;
    margin-top: 1.75rem;
  }
  .solution-hero .media img {
    position: relative;
    object-position: 100% center;
    transform: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 42%, #000 62%, #000 100%);
            mask-image: linear-gradient(to right, transparent 0%, transparent 42%, #000 62%, #000 100%);
    filter: none;
  }
  /* fully pre-composed --flat photos: keep their native 16:9 frame instead of
     the 4:3/right-anchored crop above (that treatment was tuned for the old
     cutout-product photos), so nothing gets cropped at any screen size. */
  .solution-hero--flat .media { aspect-ratio: 1920 / 1000; }
  .solution-hero--flat .media img {
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .solution-hero--focus-product .media img { object-position: 62% 42%; transform: scale(1.18); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-card.wide { grid-column: span 2; grid-template-columns: 1fr; }
  .badge-grid, .feature-grid, .news-grid, .contact-details { grid-template-columns: repeat(2, 1fr); }
  .pillar-row { grid-template-columns: 1fr; }
  .pillar-arrow svg { transform: none; }
  .tech-feature { grid-template-columns: 1fr; }
  .tech-feature.reverse .tech-feature-media { order: 0; }
  .tech-feature-media .badge-icon { left: auto; right: 1rem; bottom: -1.1rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .process-row { grid-template-columns: 1fr; }
  #solutions-strip .solution-card { flex-basis: 280px; max-width: calc(50% - 0.75rem); }
}
@media (max-width: 680px) {
  .nav { position: fixed; top: 5.25rem; right: 0; bottom: 0; left: 0; height: calc(100vh - 5.25rem); background: #fff; flex-direction: column; align-items: flex-start; padding: 1.5rem var(--edge); gap: 1.25rem; transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; }
  .nav.open { transform: translateX(0); }
  .nav-toggle { display: block; }
  .dropdown,
  .nav-item:hover .dropdown,
  .nav-item:focus-within .dropdown {
    position: static; transform: none; box-shadow: none; border: 0; opacity: 1; visibility: visible; display: none; min-width: 0; width: 100%; margin-top: 0.5rem;
  }
  .nav-item.open .dropdown { display: block; }
  .card-grid, .badge-grid, .feature-grid, .news-grid, .contact-details, .footer-grid, .product-split, .highlight-list, .text-photo-split { grid-template-columns: 1fr; }
  .solution-card.wide { grid-column: span 1; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: span 1; }
  #solutions-strip .solution-card { max-width: 100%; }
  .news-featured { grid-template-columns: 1fr; }
  .news-sidebar { position: static; top: auto; }

  /* spec-table: a 3-column table (feature + two solutions) can't fit a
     375px screen without shrinking cells past readability, so below this
     breakpoint it restacks into per-row cards instead of scrolling
     sideways with no visible affordance. */
  .spec-table thead {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td {
    display: block;
    width: 100%;
  }
  .spec-table tr {
    padding-block: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .spec-table tr:nth-child(odd) { background: none; }
  .spec-table th[scope="row"] {
    padding: 0 0 0.5rem;
    border-bottom: 0;
    font-size: 1rem;
  }
  .spec-table td {
    padding: 0.4rem 0 0.4rem 1rem;
    border-bottom: 0;
    border-left: 2px solid var(--line);
  }
  .spec-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--teal-a11y);
    margin-bottom: 0.2rem;
  }
}

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

/* ==========================================================================
   Decorative background: soft radial glow + brand-mark bleed
   The actual brand mark, vector-traced from assets/logo/mark-color.png
   (mark-mono.svg, via potrace — crisp at any size, unlike a raster mask)
   is used as a CSS mask, tinted flat and bled oversized off one corner
   of the hero/footer,
   sitting on a subtle radial gradient rather than a flat fill — the same
   "product shot on a branded glow" language already used in the category
   hero photography (see assets/images/bakery-hero.jpg).
   ========================================================================== */
.hero {
  background: radial-gradient(120% 140% at 78% 12%, #fffdf9 0%, var(--paper) 45%, var(--paper-alt) 100%);
}

/* one continuous gradient across the CTA band + footer — each half meets
   the other at exactly var(--brown), so the seam between the two
   sections disappears instead of showing a hard edge */
.cta-band {
  background: linear-gradient(180deg, #5c2c1e 0%, var(--brown) 100%);
}

.site-footer {
  background: linear-gradient(180deg, var(--brown) 0%, #2f110a 100%);
}

/* oversized brand-mark echo bleeding off a corner */
.hero,
.site-footer {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: -14%;
  width: min(34rem, 70vw);
  height: min(34rem, 70vw);
  background-color: #fae9d2;
  -webkit-mask: url("../logo/mark-mono.svg") no-repeat center / contain;
          mask: url("../logo/mark-mono.svg") no-repeat center / contain;
  opacity: 1;
  pointer-events: none;
}

.site-footer::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -2rem;
  left: -2rem;
  width: min(18rem, 42vw);
  height: min(18rem, 42vw);
  background-color: #ffffff;
  -webkit-mask: url("../logo/mark-mono.svg") no-repeat center / contain;
          mask: url("../logo/mark-mono.svg") no-repeat center / contain;
  opacity: 0.14;
  pointer-events: none;
}