/* ═══════════════════════════════════════════════════════════════════
   BUTCHERS BLOCK ADVISORY — shared stylesheet
   Serves index.html, butchers.html, backoffice.html and requirements.html.

   Two rules worth knowing before editing:

   1. NOTHING FUNCTIONAL BELOW 13px. Every label, tag, nav item and stat
      caption on this site is read by chefs and buyers on a phone, often in
      a kitchen. The old sheet put ~20 different elements at 0.68rem
      (10.88px) and that alone accounted for over half the site's design
      findings. --fs-label is the floor. Do not add a smaller value.

   2. THE bh- AND bo- BLOCKS ARE SHARED. butchers.html and backoffice.html
      were built from one skeleton with two prefixes. They are declared
      together here so a change lands on both. Their page <style> blocks
      now only hold what is genuinely unique to that page.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colour ─────────────────────────────────────────────────────────
     Editorial ivory + near-black theme, matched to the Lovable reference
     build (colours pulled from its computed styles, converted oklch→hex).
     --green/--green2/--green3 keep their historical names (page ground /
     raised surface / border) — renaming them would mean touching inline
     styles across every page for no functional gain. --black is BOTH the
     near-black text colour and, again, a background: it anchors the hero
     and footer as dark bands, same as the reference. --gold is the
     AA-safe (darker) brass for text on the light ivory ground; --gold2 is
     a step darker still; --gold-onblack is the lighter brass the
     reference uses for labels sitting on the dark bands — only safe
     against --black, never against ivory.                             */
  --green:   #f8f4ec;   /* page ground — warm ivory                    */
  --green2:  #f1ece0;   /* raised / secondary surface — warm light tan */
  --green3:  #ddd4c2;   /* borders, dividers — soft warm grey          */
  --black:   #1d1713;   /* near-black — headings, hero/footer bands    */
  --red:     #862628;   /* primary action — deep butcher red           */
  --red2:    #6c1e1f;   /* action, pressed                             */
  --gold:       #825e24; /* brass accent, AA-safe on --green and --green2 */
  --gold-deep:  #6f5020; /* brass for text on --green3 surfaces          */
  --gold2:      #7e5a22; /* accent, one step darker                     */
  --gold-onblack: #b79156; /* brass accent, AA-safe as text on --black  */
  --cream:   #241d17;   /* primary text — near-black warm brown        */
  --bone:    #4a4038;   /* secondary text — warm dark grey             */
  --muted:   #5f5346;   /* tertiary text — warm mid grey               */
  --dim:     #756856;   /* quietest text that still clears AA          */
  --white:   #fff;
  --card:    #fefbf6;   /* card surface on ivory — warm off-white, not pure white */
  --ink:     #23302300; /* transparent utility, see .prose            */

  /* On the red CTA button / the black bands, white below 82% opacity
     drops under 4.5:1.                                                */
  --on-red:        rgba(255,255,255,.92);
  --on-red-quiet:  rgba(255,255,255,.82);

  /* ── Type ───────────────────────────────────────────────────────── */
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body:    'Work Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'Work Sans', system-ui, -apple-system, sans-serif;

  /* Sizes below match the reference build's actual Tailwind scale
     (text-sm/base/lg/xl/2xl/3xl/4xl/6xl) exactly, except --fs-label:
     the reference's micro-labels run to 11px, but this project's own
     rule is a hard 13px floor for functional text read by chefs on a
     phone — kept, not matched, on purpose. */
  --fs-label: 0.8125rem;   /* 13px — the floor for functional text     */
  --fs-sm:    0.875rem;    /* 14px — dense card copy (text-sm)         */
  --fs-body:  1rem;        /* 16px — reading size (text-base)          */
  --fs-lead:  1.125rem;    /* 18px — standfirsts (text-lg)             */
  --fs-h4:    1.25rem;     /* 20px (text-xl)                           */
  --fs-h3:    1.5rem;      /* 24px (text-2xl)                          */
  --fs-h2:    clamp(1.875rem, 1.2rem + 1.8vw, 2.25rem);  /* 30px→36px (text-3xl→text-4xl) */
  --fs-h1:    clamp(2.25rem, 1rem + 4vw, 3.75rem);        /* 36px→60px (text-4xl→text-6xl) */
  --fs-stat:  1.875rem;    /* 30px (text-3xl), fixed like the reference */

  /* Wide tracking on long strings slows reading. 0.08em is enough to
     letterspace a short uppercase label without breaking word shape. */
  --track-label: 0.08em;

  --lh-tight: 1.15;
  --lh-head:  1.22;
  --lh-body:  1.7;

  /* ── Space ──────────────────────────────────────────────────────── */
  --gutter:  clamp(20px, 4vw, 40px);
  --section: 64px;   /* matches the Lovable reference's fixed py-16 section rhythm */
  --wrap:    1200px;
  --wrap-nr: 1120px;

  /* ── Shape + motion ─────────────────────────────────────────────── */
  /* Square corners throughout, matching the reference build. */
  --r-sm: 0px;
  --r:    0px;
  --r-lg: 0px;
  /* No overshoot. Bounce and elastic easing read as dated and, on a
     trade site, as unserious. */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

html {
  scroll-behavior: smooth;
  /* Sticky nav is 70px; anchors would otherwise land under it. */
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--green);
  color: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto }

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

/* Anyone tabbing in gets a way past the nav. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--white);
  padding: 12px 20px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ═══ TYPE PRIMITIVES ═══════════════════════════════════════════════ */

/* Instrument Serif ships one weight (400) plus a true italic — the
   reference build leans on size and italic for hierarchy, not weight. */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-head); text-wrap: balance }

/* The label style. One definition, used everywhere a small uppercase
   caption is wanted. Short strings only — see .all-caps guidance below. */
.label,
.eyebrow,
.nav-link,
.form-sub,
.form-promise,
.sc-tag,
.pb-label,
.testi-who,
.footer-col h2, .footer-col h3, .footer-col h4,
.footer-copy,
.src-label,
.proof-item,
.bh-stat-l, .bo-stat-l,
.bh-unit-c .u, .bo-unit-c .u,
.bh-feat-c h3, .bh-feat-c h4, .bo-feat-c h3, .bo-feat-c h4,
.bh-t thead th, .bo-t thead th,
.bh-feat-more, .bo-more-btn,
.nav-phone-label,
.logo-text .t2,
.footer-brand .t2 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.45;
}

/* Uppercase removes ascender/descender shape, which is what we read words
   by. Fine for a two-word nav item, punishing for a sentence.

   Only the genuinely short, fixed labels above keep their uppercase: nav
   items, the logo strapline, the group label. Everything whose text is
   written by whoever edits the page — stat captions, sector tags, table
   headers, quote attributions — reverts to sentence case here, because
   those strings grow. "Schools · Care homes · Public sector" set in caps
   at 13px is not a label any more, it is a sentence being shouted. */
.form-promise,
.footer-copy,
.src-label,
.sc-tag,
.pb-label,
.proof-item,
.testi-who,
.bh-stat-l, .bo-stat-l,
.bh-t thead th, .bo-t thead th,
.bh-feat-c h3, .bh-feat-c h4, .bo-feat-c h3, .bo-feat-c h4,
.bh-feat-more, .bo-more-btn { text-transform: none; letter-spacing: .02em }

/* These stay uppercase: short by construction, and the caps is what makes
   them read as chrome rather than content.

   .form-sub and the two .t2 straplines are deliberately NOT on this list.
   They hold sentences ("We'll be in touch within one working day"), and a
   sentence in 13px caps is the thing that made this site read as shouty. */
.nav-link,
.nav-group-label,
.nav-phone-label,
.footer-col h2, .footer-col h3, .footer-col h4,
.bh-unit-c .u, .bo-unit-c .u { text-transform: uppercase }

.form-sub,
.logo-text .t2,
.footer-brand .t2 { text-transform: none; letter-spacing: .01em }

/* Prose measure. Above ~75 characters the eye loses the line return. */
.prose,
.body-copy,
.hero-sub,
.supplier-intro,
.req-intro,
.bh-sub, .bo-sub,
.bh-arrowline, .bo-arrowline { max-width: 68ch }

.body-copy { font-size: var(--fs-body); color: var(--muted) }
.body-copy p + p { margin-top: 1em }

.section-h {
  font-size: var(--fs-h2);
  color: var(--black);
  margin-bottom: 20px;
  letter-spacing: -0.015em;
}
.section-h em { font-style: normal; color: inherit }

/* A standfirst under a heading. Replaces the old .eyebrow labels that sat
   above every h2 — a tracked uppercase micro-label stacked on a heading is
   the most repeated generated-UI tell there is, and it was on this site 26
   times. The heading carries the meaning; this carries the detail. */
.standfirst {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--muted);
  max-width: 60ch;
  margin-bottom: 8px;
}
.standfirst.centred { margin-left: auto; margin-right: auto; text-align: center }

.centred { text-align: center }

/* ═══ ANNOUNCE BAR ══════════════════════════════════════════════════ */

.urgency-bar {
  background: var(--black);
  color: var(--on-red);
  text-align: center;
  padding: 12px var(--gutter);
  font-size: var(--fs-label);
  letter-spacing: .02em;
  line-height: 1.5;
}
.urgency-bar strong { color: var(--gold-onblack); font-weight: 600 }

/* ═══ NAV ═══════════════════════════════════════════════════════════ */

.nav-wrap {
  position: sticky; top: 0; z-index: 500;
  background: rgba(248,244,236,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--green3);
  box-shadow: 0 1px 0 rgba(29,23,19,.03);
}
/* Wider than --wrap on purpose. The bar carries a logo lockup, a phone
   number, a labelled link group and a CTA; at 1200px that came to 1241px
   of content in a 1120px box and pushed a scrollbar onto the whole page.
   Adding Marketing & Media to the nav-group later pushed the true content
   width past 1400px on index.html/requirements.html — past what min-width:0
   shrinking on the logo could absorb without truncating it to 2-3 letters.
   Fixed by raising both this and the collapse breakpoint below, instead of
   letting the logo keep eating the deficit. Raised again, 1440→1560, when
   the Montserrat switch widened the same logo/nav text enough to reproduce
   the identical squeeze at the old number. */
.nav {
  max-width: 1560px; margin: 0 auto;
  padding: 0 var(--gutter); min-height: 70px;
  display: flex; align-items: center; gap: 10px;
}
/* min-width:0 stays as a fallback so a future overflow degrades to a
   truncated logo (ugly, still clickable) rather than a layout break — but
   the breakpoint below is what's meant to keep this from firing at desktop
   widths. If the logo is visibly shrinking again, that budget has been
   exceeded again; raise the two breakpoints or trim nav content, don't
   just widen .nav further without checking the actual overflow. */
.nav-logo {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  margin-right: auto; min-width: 0;
}
.logo-mark {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; display: block;
  box-shadow: 0 0 0 1px rgba(138,101,40,.45);
}
.footer-logo {
  width: 96px; height: 96px; border-radius: 50%; display: block; margin-bottom: 16px;
  box-shadow: 0 0 0 1px rgba(138,101,40,.35);
}
.logo-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0 }
.logo-text .t1, .logo-text .t2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.logo-text .t1 { font-family: var(--font-display); font-size: 1rem; font-weight: 400; color: var(--black) }
/* Sentence case now, so it takes sentence tracking. Wide tracking is for
   the uppercase chrome only. */
.logo-text .t2 { color: var(--gold); letter-spacing: .01em }

.nav-phone-wrap { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0 }
.nav-phone-label { color: var(--muted) }
/* Playfair Display's numerals are old-style figures — uneven baseline,
   a "0" that reads like a lowercase "o" at a glance. Fine for headings,
   bad for a phone number someone's trying to scan or dial. DM Mono's
   digits are lining and tabular, which is what a phone number wants. */
.nav-phone {
  font-family: var(--font-mono); font-size: 1.25rem; font-weight: 500;
  color: var(--black); text-decoration: none; white-space: nowrap;
  letter-spacing: .01em;
}
.nav-phone:hover { color: var(--gold) }

.nav-link {
  color: var(--cream); text-decoration: none; white-space: nowrap;
  padding: 8px 2px; position: relative;
}
.nav-link:hover { color: var(--gold) }

/* The two supplier-facing links used to flash red at 1.14× scale six times
   on load to get noticed. They now sit in a marked group instead: a
   permanent gold rule and a heading that says who they are for. Attention
   without a page that appears to be malfunctioning — and it still works
   for anyone who has reduced motion turned on, which the flash did not. */
.nav-group {
  display: flex; align-items: center; gap: 10px;
  padding-left: 12px; border-left: 1px solid var(--green3);
}
.nav-group-label {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold2); white-space: nowrap;
  text-decoration: none;
}
.nav-group-label:hover { color: var(--gold) }
.nav-attn { color: var(--gold) }
.nav-attn::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav-attn:hover::after, .nav-attn:focus-visible::after { transform: scaleX(1) }

.nav-cta {
  padding: 12px 18px; background: var(--red); color: var(--white);
  border-radius: var(--r-sm);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background .2s var(--ease); flex-shrink: 0;
}
.nav-cta:hover { background: var(--red2) }

.nav-login {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 12px; border: 1px solid var(--green3); border-radius: var(--r-sm);
  color: var(--cream); text-decoration: none; white-space: nowrap;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; flex-shrink: 0;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.nav-login svg { flex-shrink: 0 }
.nav-login:hover { border-color: var(--gold); color: var(--gold) }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex-shrink: 0;
  background: none; border: 1px solid var(--green3); border-radius: var(--r-sm);
  color: var(--cream); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.nav-toggle:hover, .nav-toggle:focus-visible { border-color: var(--gold); color: var(--gold) }

@media (max-width: 1560px) {
  /* The number stays; the caption above it is the part that can go. */
  .nav-phone-label { display: none }
}
@media (max-width: 1560px) {
  /* Matches .nav's own max-width above. Below this, the full desktop bar
     (logo + phone + link group + login + CTA) no longer fits without
     squeezing the logo — collapse to the toggle instead of letting that
     happen. Common laptop widths (1280, 1366) fall in here on purpose. */
  .nav-link, .nav-cta, .nav-group, .nav-login { display: none }
  .nav-toggle { display: flex }
  /* The toggle is now the only control, so it sits hard right. */
  .nav-phone-wrap { margin-left: auto }
}
@media (max-width: 560px) {
  /* The name earns the space at phone width; the strapline does not. */
  .logo-text .t2 { display: none }
}
@media (max-width: 400px) {
  .nav-phone-wrap { display: none }
}

.nav-mobile-menu {
  display: none; flex-direction: column;
  background: var(--green); border-top: 1px solid var(--green3);
  padding: 8px var(--gutter) 20px;
}
.nav-mobile-menu.open { display: flex }
.nav-mobile-menu .nav-login {
  display: flex; justify-content: center; margin-bottom: 10px;
}
.nav-mobile-menu a.nav-link {
  display: block; padding: 15px 2px;
  border-bottom: 1px solid rgba(29,23,19,.08);
}
.nav-mobile-menu a.nav-link:last-of-type { border-bottom: none }
.nav-mobile-menu .nav-cta { display: block; text-align: center; margin-top: 14px }
.nav-mobile-menu .nav-group {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0; padding-left: 0; border-left: none;
  border-top: 1px solid var(--green3); margin-top: 10px; padding-top: 10px;
}
.nav-mobile-menu .nav-group-label { padding: 10px 2px 2px }

/* ═══ BUTTONS ═══════════════════════════════════════════════════════ */

.btn-red-inline, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 48px; padding: 14px 28px;
  border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn-red-inline { background: var(--red); color: var(--white); border: 1px solid var(--red) }
.btn-red-inline:hover { background: var(--red2); border-color: var(--red2) }
.btn-ghost { background: none; color: var(--gold); border: 1px solid rgba(138,101,40,.5) }
.btn-ghost:hover { border-color: var(--gold); background: rgba(138,101,40,.08) }
/* On the dark hero bands, the ghost button is white-on-white-border
   (matching the reference), not brass. */
.hero .btn-ghost, .bh-hero .btn-ghost, .bo-hero .btn-ghost {
  color: var(--white); border-color: rgba(255,255,255,.25);
}
.hero .btn-ghost:hover, .bh-hero .btn-ghost:hover, .bo-hero .btn-ghost:hover {
  border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.1);
}

/* ═══ HERO ══════════════════════════════════════════════════════════ */

/* Full-bleed: the photo and overlay must reach the browser edge on wide
   screens, not stop at the content's own max-width. The old version put
   max-width directly on .hero, which also boxed in the absolutely
   positioned .hero-bg/.hero-overlay sitting inside it — matching the
   reference means keeping .hero itself unconstrained and moving the
   max-width onto .hero-inner instead. */
.hero {
  position: relative;
  overflow: hidden;
}
.hero-inner {
  display: grid; grid-template-columns: minmax(0,1fr);
  max-width: 1360px; margin: 0 auto;
  align-items: center;
  padding: clamp(56px, 7vw, 96px) var(--gutter);
  position: relative; z-index: 5;
}
.hero-bg {
  position: absolute; inset: 0;
  background-image: url('smithfield.jpg');
  background-size: cover; background-position: center 38%;
  /* Reference treatment: the photo at roughly 35% opacity over solid
     ink, not a filtered/crushed image under a heavy gradient — flatter
     and noticeably lighter than a darkened-and-gradiented photo. */
  filter: saturate(.9);
}
.hero-overlay {
  position: absolute; inset: 0;
  background: rgba(29,23,19,.62);
}
.hero-left { position: relative; z-index: 5; max-width: 780px }

.hero-h1 {
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 22px;
}
.hero-h1 em { font-style: normal; color: inherit; font-weight: 400 }

.hero-lead {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.4;
  color: var(--white);
  margin-bottom: 18px;
}
.hero-lead em { font-style: normal; color: inherit }

.hero-sub {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: rgba(255,255,255,.75);
  margin-bottom: 16px;
  max-width: 62ch;
}
.hero-sub:last-of-type { margin-bottom: 28px }
.hero-sub strong { color: var(--white); font-weight: 600 }

.hero-proof {
  display: flex; align-items: center; gap: 10px 26px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid rgba(183,145,86,.25);
}
.proof-item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.7) }
.proof-item svg { width: 15px; height: 15px; color: var(--gold-onblack); flex-shrink: 0 }
/* .hero-proof is reused as a chip row on light ivory sections (standards
   and sectors teasers) as well as inside the dark hero — this modifier
   swaps it back to dark-on-light for those. */
.hero-proof.on-light { border-top-color: var(--green3) }
.hero-proof.on-light .proof-item { color: var(--muted) }
.hero-proof.on-light .proof-item svg { color: var(--gold) }

/* Staggered entrance.

   Note the fill mode: `backwards`, with no opacity:0 in the base rule. The
   element's resting state is visible, and the animation borrows its hidden
   start from the keyframe. Written the other way round (opacity:0 in the
   rule plus `forwards`) the hero is invisible until an animation finishes,
   so anything that stops animations from running — a paused tab, a
   prerender, a browser that ignores the property — leaves a blank hero
   above the fold. Decoration must never gate the content. */
.hero-left > * { animation: up .7s var(--ease) backwards }
.hero-h1        { animation-delay: .05s }
.hero-lead      { animation-delay: .12s }
.hero-sub       { animation-delay: .16s }
.hero-actions   { animation-delay: .26s }
.hero-proof     { animation-delay: .34s }
@keyframes up { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes slideIn { from { opacity: 0; transform: translateX(16px) } to { opacity: 1; transform: none } }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px }

/* ── Hero form ── */
.hero-form-wrap {
  position: relative; z-index: 5;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--green3);
  border-radius: var(--r);
  padding: 32px 30px;
  box-shadow: 0 16px 40px rgba(29,23,19,.1);
  animation: slideIn .7s .3s var(--ease) backwards;   /* see the note above */
}
.form-heading {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 400;
  color: var(--black); line-height: 1.25; margin-bottom: 4px;
}
.form-sub { color: var(--gold); margin-bottom: 22px }
.form-field { margin-bottom: 14px }
.form-field label,
.rf-field label {
  display: block; font-family: var(--font-mono);
  font-size: var(--fs-label); letter-spacing: .04em;
  color: var(--bone); margin-bottom: 6px;
}
.form-field input, .form-field select,
.rf-field input, .rf-field select, .rf-field textarea {
  width: 100%; min-height: 48px; padding: 13px 15px;
  background: rgba(29,23,19,.04);
  border: 1px solid rgba(29,23,19,.16);
  border-radius: var(--r-sm);
  color: var(--cream);
  font-family: var(--font-body); font-size: var(--fs-body);
  outline: none; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.form-field input:focus, .form-field select:focus,
.rf-field input:focus, .rf-field select:focus, .rf-field textarea:focus {
  border-color: var(--gold); background: rgba(29,23,19,.06);
}
.form-field input::placeholder,
.rf-field input::placeholder, .rf-field textarea::placeholder { color: rgba(29,23,19,.4) }
/* A select showing its own placeholder needs to clear AA too. */
.form-field select:invalid, .rf-field select:invalid { color: rgba(29,23,19,.45) }
.form-field select option, .rf-field select option { background: var(--green2); color: var(--cream) }
.rf-field textarea { resize: vertical; min-height: 120px; line-height: 1.6 }

.submit-btn {
  width: 100%; min-height: 54px; padding: 16px;
  background: var(--red); color: var(--white);
  border: none; border-radius: var(--r-sm); cursor: pointer;
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 700;
  letter-spacing: .01em;
  transition: background .2s var(--ease); margin-top: 6px;
}
.submit-btn:hover:not(:disabled) { background: var(--red2) }
.submit-btn:disabled { opacity: .65; cursor: progress }

.form-promise { margin-top: 12px; text-align: center; color: var(--muted); font-size: var(--fs-label) }

.form-success {
  display: none; margin-top: 16px; padding: 16px 18px;
  background: rgba(90,150,70,.14); border: 1px solid rgba(90,150,70,.4);
  border-radius: var(--r-sm);
  color: #3f6b32; font-size: var(--fs-sm); line-height: 1.6; text-align: center;
}
.form-error {
  display: none; margin-top: 12px; padding: 14px 16px;
  background: rgba(134,38,40,.1); border: 1px solid rgba(134,38,40,.35);
  border-radius: var(--r-sm);
  color: var(--red2); font-size: var(--fs-sm); line-height: 1.6;
}

/* ═══ PROOF BAR ═════════════════════════════════════════════════════ */

.proof-bar { background: var(--green2); border-block: 1px solid var(--green3) }
.proof-bar-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.pb-item { padding: 30px 24px; text-align: center }
.pb-item + .pb-item { border-left: 1px solid rgba(138,101,40,.18) }
.pb-num { font-family: var(--font-display); font-size: var(--fs-stat); font-weight: 400; color: var(--black); line-height: 1.05 }
/* Smaller variant for a pb-num holding a short phrase rather than a single
   stat: "Any cut. Any spec." doesn't fit the full stat size in a 4-up grid
   without wrapping mid-word. */
.pb-num-tight { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.15rem) }
.pb-label { color: var(--gold); margin-top: 8px }
.pb-note { display: block; font-family: var(--font-body); font-size: var(--fs-label); text-transform: none; letter-spacing: 0; color: var(--muted); margin-top: 4px }

/* ═══ SECTION SHELLS ════════════════════════════════════════════════ */

.section { padding: var(--section) var(--gutter) }
/* A bare paragraph dropped straight into a section wrapper inherits the
   wrapper width — 900px here, which is ~109 characters a line. Past about
   80 the eye starts losing its place on the return sweep. Cards, tables and
   grid tracks are already narrow enough to be unaffected. */
.section-inner > p { max-width: 68ch }
.section-inner.centred > p, .centred > p { margin-inline: auto }
.section-inner { max-width: var(--wrap); margin: 0 auto }
.section-head { max-width: 720px; margin-bottom: 48px }
.section-head.centred { margin-inline: auto }

.problem-section {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--section) var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px); align-items: start;
}
.pain-list, .solution-points { list-style: none; margin-top: 24px }
.pain-list li, .solution-points li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid rgba(29,23,19,.08);
  font-size: var(--fs-body); line-height: 1.55; color: var(--bone);
}
.pain-list li:last-child, .solution-points li:last-child { border-bottom: none }
.pain-list svg, .solution-points svg { width: 21px; height: 21px; flex-shrink: 0; margin-top: 2px }
.pain-list svg { color: var(--red); opacity: .95 }
.solution-points svg { color: var(--gold) }

.solution-box {
  background: var(--green2);
  border: 1px solid var(--green3);
  border-radius: var(--r);
  padding: clamp(28px, 3vw, 40px);
}
.solution-box .section-h { font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.3rem) }

/* ═══ SOURCING ══════════════════════════════════════════════════════ */

/* Full bleed. Its two halves use the vertical .r reveal rather than the
   sideways .rl/.rr pair, because a horizontal transform on a full-bleed
   child pushes past the right edge until it animates in. Solving it with
   overflow:hidden here would clip the absolutely-positioned caption. */
.sourcing-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px }
.src-img { overflow: hidden; position: relative; min-height: 340px }
.src-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.85) saturate(.9) }
.src-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(29,23,19,.92));
  padding: 28px 24px 18px; color: var(--white);
}
/* --green3 is the darkest light surface, so the standard brass drops to
   3.6:1 on it. Rebinding the token here fixes every var(--gold) inside
   without touching a single call site. */
.src-text, .supplier-cta-inner { --gold: var(--gold-deep) }

.src-text {
  background: var(--green3);
  padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px);
  display: flex; flex-direction: column; justify-content: center;
}

/* ═══ CARD GRIDS ════════════════════════════════════════════════════ */

.supplier-section { background: var(--green2); padding: var(--section) var(--gutter) }
.supplier-inner { max-width: var(--wrap); margin: 0 auto }
.supplier-intro { color: var(--muted); margin-inline: auto; text-align: center }
.supplier-grid, .sectors-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 16px; margin-top: 44px;
}
.supplier-card {
  background: rgba(255,255,255,.55);
  border: 1px solid var(--green3);
  border-radius: var(--r);
  padding: 30px 28px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.supplier-card:hover { border-color: rgba(138,101,40,.45); background: rgba(255,255,255,.85) }
/* The icon sits on the heading's line, not stacked in a rounded tile above
   it. A bordered square with a glyph in it, centred over a card heading, is
   the single most recognisable generated-UI signature there is, and the
   first version of this rebuild walked straight into it on all six cards. */
.sc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px }
.sc-badge { display: flex; align-items: center; color: var(--gold); flex-shrink: 0 }
.sc-badge svg { width: 26px; height: 26px; display: block }
.sc-badge.salsa {
  padding: 4px 10px; border-radius: var(--r-sm);
  background: rgba(134,38,40,.12); border: 1px solid rgba(134,38,40,.4);
  color: var(--red2); font-family: var(--font-mono); font-size: var(--fs-label);
  font-weight: 700; letter-spacing: .06em;
}
.supplier-card h2, .supplier-card h3 { font-size: var(--fs-h3); color: var(--black); margin: 0 }
.supplier-card p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.65; margin-bottom: 16px }
.sc-tag { color: var(--gold2) }

.price-callout {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.8rem);
  color: var(--gold);
  letter-spacing: .01em;
  max-width: 60ch;
  margin: 0 0 12px;
}

.supplier-cta { margin-top: 40px }
.supplier-cta-inner {
  background: var(--green3); border: 1px solid rgba(138,101,40,.25);
  border-radius: var(--r);
  padding: 28px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.sct-text { color: var(--bone); line-height: 1.6; flex: 1; min-width: 260px; max-width: 62ch }
.sct-text strong { color: var(--black); font-weight: 600; display: block; margin-bottom: 4px }

/* ── Sectors (light band) ── */
.sectors-section { background: var(--green2); color: var(--black); padding: var(--section) var(--gutter) }
.sectors-inner { max-width: var(--wrap); margin: 0 auto }
.sectors-section .section-h { color: var(--black) }
.sectors-section .section-h em { font-style: normal; color: inherit }
.sectors-section .standfirst { color: var(--muted) }
.sc-card {
  background: var(--card);
  border: 1px solid rgba(29,23,19,.12);
  border-radius: var(--r);
  padding: 30px 28px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.sc-card:hover { border-color: rgba(29,23,19,.26); box-shadow: 0 6px 20px rgba(29,23,19,.08) }
.sc-card svg { width: 26px; height: 26px; color: var(--red); margin-bottom: 14px; display: block }
.sc-card h2, .sc-card h3 { font-size: var(--fs-h3); color: var(--black); margin-bottom: 10px }
.sc-card p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.65 }
.sc-card .sc-tag { color: var(--gold2); display: block; margin-top: 14px }

/* ═══ HOW IT WORKS ══════════════════════════════════════════════════ */

.how-section { padding: var(--section) var(--gutter); background: var(--green2) }
.how-inner { max-width: var(--wrap); margin: 0 auto }
.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 32px 24px; position: relative; margin-top: 48px;
}
.step { text-align: left; padding: 22px 8px 0 0; border-top: 2px solid var(--black) }
.step-num {
  font-family: var(--font-display); font-size: 2.75rem; font-weight: 400;
  line-height: 1; color: var(--black); margin-bottom: 14px;
}
.step-title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 400; color: var(--black); margin-bottom: 10px }
.step-body { font-size: var(--fs-sm); color: var(--muted); line-height: 1.65 }

.panel {
  margin-top: 48px; padding: 34px 30px;
  border: 1px solid var(--green3); border-radius: var(--r);
  background: var(--card);
}
.panel .panel-title { color: var(--black); font-size: var(--fs-h3); font-weight: 400; font-family: var(--font-display); margin-bottom: 10px; line-height: var(--lh-head) }
/* On the login pages this is the page title, so it carries the h1 and
   needs the size gap that makes a type hierarchy read as one. */
.panel .panel-title.page-title { font-size: var(--fs-h2) }
.panel p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; max-width: 56ch; margin: 0 0 22px }

/* ═══ HAIRLINE GRID ══════════════════════════════════════════════════
   The reference build's card technique: a grid with a 1px gap filled by
   the border colour, so adjoining cards share a single hairline divider
   instead of each carrying its own border/shadow. No icons — heading
   size and weight do the work instead. */
.hairline-grid {
  display: grid; gap: 1px;
  background: var(--green3); border: 1px solid var(--green3);
  margin-top: 32px;
}
.hairline-grid > * { background: var(--card); padding: 28px }
.hairline-grid h3 { font-size: var(--fs-h3); color: var(--black); margin-bottom: 10px }
.hairline-grid p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.65 }
@media (min-width: 640px) {
  .hairline-grid-2, .hairline-grid-4 { grid-template-columns: 1fr 1fr }
}
@media (min-width: 1024px) {
  .hairline-grid-3 { grid-template-columns: repeat(3, 1fr) }
  .hairline-grid-4 { grid-template-columns: repeat(4, 1fr) }
}

/* ═══ PROOF / TRUST (replaces the old testimonial grid) ═════════════ */

.trust-section { padding: var(--section) var(--gutter); background: var(--green) }
.trust-inner { max-width: var(--wrap); margin: 0 auto }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; margin-top: 44px }
.trust-card {
  background: var(--green2); border: 1px solid var(--green3);
  border-radius: var(--r); padding: 30px 28px;
}
.trust-card svg { width: 26px; height: 26px; color: var(--gold); margin-bottom: 14px; display: block }
.trust-card h3 { font-size: var(--fs-h4); color: var(--black); margin-bottom: 10px }
.trust-card p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.65 }

/* Kept for butchers.html, which still uses the class for its customer list */
.testi-section { padding: var(--section) var(--gutter); background: var(--green) }
.testi-inner { max-width: var(--wrap); margin: 0 auto }
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; margin-top: 44px }
.testi-card { background: var(--green2); border: 1px solid var(--green3); border-radius: var(--r); padding: 30px 28px }
.testi-q { font-family: var(--font-display); font-style: italic; font-size: var(--fs-body); line-height: 1.65; color: var(--bone) }
.testi-who { margin-top: 18px; color: var(--gold) }
.testi-venue { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px }

/* ═══ BOTTOM CTA ════════════════════════════════════════════════════ */

.cta-section {
  background: var(--green);
  padding: var(--section) var(--gutter);
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 5vw, 72px); align-items: center;
}
.cta-left { max-width: 600px }
.cta-left .big-q {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3rem);
  font-weight: 400; line-height: 1.18; color: var(--black);
}
.cta-left .big-q em { font-style: normal; color: inherit }
.cta-bullets { list-style: none; margin-top: 26px }
.cta-bullets li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid var(--green3);
  font-size: var(--fs-body); color: var(--cream); line-height: 1.5;
  max-width: 62ch;
}
.cta-bullets li:last-child { border-bottom: none }
.cta-bullets svg { width: 19px; height: 19px; color: var(--red); flex-shrink: 0; margin-top: 3px }

.cta-form {
  background: var(--card);
  border: 1px solid var(--green3);
  padding: 34px 30px;
}
.cta-form .form-heading { font-size: 1.35rem; color: var(--black) }
.cta-form .form-sub { color: var(--gold) }
.cta-form .form-field label { color: var(--muted) }
.cta-form .form-field input,
.cta-form .form-field select {
  background: rgba(29,23,19,.04); border-color: rgba(29,23,19,.16); color: var(--cream);
}
.cta-form .form-field input:focus,
.cta-form .form-field select:focus { border-color: var(--gold); background: rgba(29,23,19,.06) }
.cta-form .form-field input::placeholder { color: rgba(29,23,19,.4) }
.cta-form .form-field select:invalid { color: rgba(29,23,19,.45) }
.cta-form .form-field select option { background: var(--green2); color: var(--cream) }
.cta-form .form-promise { color: var(--muted) }
.cta-form .form-promise strong { color: var(--black) }

/* ═══ FOOTER ════════════════════════════════════════════════════════ */

footer { background: var(--black); padding: 56px var(--gutter) 36px }
.footer-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px; align-items: start;
}
.footer-brand .t1 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; color: var(--white) }
.footer-brand .t2 { color: var(--gold-onblack); margin-top: 4px }
.footer-about { font-size: var(--fs-sm); color: rgba(255,255,255,.65); line-height: 1.7; margin-top: 14px; max-width: 46ch }
.footer-col h2, .footer-col h3, .footer-col h4 { color: var(--gold-onblack); margin-bottom: 16px }
.footer-col ul { list-style: none }
.footer-col ul li { margin-bottom: 10px }
.footer-col ul li a, .footer-col p a { font-size: var(--fs-sm); color: rgba(255,255,255,.65); text-decoration: none; transition: color .2s var(--ease) }
.footer-col ul li a:hover, .footer-col p a:hover { color: var(--white); text-decoration: underline }
.footer-col p { font-size: var(--fs-sm); color: rgba(255,255,255,.65); line-height: 1.8 }
.footer-bottom {
  max-width: var(--wrap); margin: 36px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.footer-copy { color: rgba(255,255,255,.55); font-size: var(--fs-label) }

/* ═══ SCROLL REVEAL ═════════════════════════════════════════════════ */

.r, .rl, .rr { opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease) }
.r  { transform: translateY(18px) }
.rl { transform: translateX(-18px) }
.rr { transform: translateX(18px) }
.r.v, .rl.v, .rr.v { opacity: 1; transform: none }
/* If the observer never runs (no JS, or an error), content must not stay
   invisible. .js is set on <html> by the page script before paint. */
html:not(.js) .r, html:not(.js) .rl, html:not(.js) .rr { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) {
  .r, .rl, .rr { opacity: 1; transform: none }
}

/* ═══ SHARED PAGE SKELETON — butchers.html + backoffice.html ════════
   These were duplicated in both pages' <style> blocks with bh-/bo-
   prefixes. Declared together so a change lands on both.            */

.bh-hero, .bo-hero { position: relative; padding: clamp(64px,7vw,96px) var(--gutter); background: var(--black); overflow: hidden }
.bh-hero-bg, .bo-hero-bg {
  position: absolute; inset: 0;
  background-image: url('hero.jpg'); background-size: cover; background-position: center;
  filter: saturate(.9);
}
/* Same treatment as the homepage hero: the photo at full strength with a
   flat dark tint over it for text contrast, rather than fading the image
   itself down to near-invisible. */
.bh-hero::after, .bo-hero::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(29,23,19,.62);
}
.bh-hero-inner, .bo-hero-inner { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto }
.bh-h1, .bo-h1 {
  font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 400;
  line-height: var(--lh-tight); letter-spacing: -.02em; color: var(--white); margin-bottom: 20px;
  max-width: 700px;
}
.bh-h1 em, .bo-h1 em { font-style: normal; color: inherit }
/* .bh-sub/.bo-sub is reused as a general subtitle throughout the light
   page body, not just in the dark hero — default it dark, and lighten
   only the instances that actually sit on the hero photo (.on-dark). */
.bh-sub, .bo-sub { font-size: var(--fs-lead); line-height: 1.65; color: var(--bone); margin: 0 0 30px; max-width: 600px }
.bh-sub.on-dark, .bo-sub.on-dark { color: rgba(255,255,255,.75) }
.bh-actions, .bo-actions { display: flex; gap: 12px; flex-wrap: wrap }

.bh-strip, .bo-strip { background: var(--green); padding: 30px var(--gutter); border-block: 1px solid var(--green3) }
.bh-strip-inner, .bo-strip-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 24px;
}
.bh-stat-n, .bo-stat-n {
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; color: var(--gold);
  min-height: 2.2rem; display: flex; align-items: center;
}
.bh-stat-l, .bo-stat-l { color: var(--muted); margin-top: 6px }

.bh-sec, .bo-sec { padding: var(--section) var(--gutter) }
.bh-inner, .bo-inner { max-width: var(--wrap-nr); margin: 0 auto }
.bh-grid, .bo-grid { display: grid; grid-template-columns: 1fr; gap: 16px }
@media (min-width: 640px) { .bh-grid, .bo-grid { grid-template-columns: 1fr 1fr } }
@media (min-width: 1024px) { .bh-grid, .bo-grid { grid-template-columns: repeat(4, 1fr) } }
.bh-card, .bo-card { background: var(--green2); border: 1px solid var(--green3); border-radius: var(--r); padding: 28px 26px }
.bh-card h3, .bo-card h3 { color: var(--black); font-size: var(--fs-h4); margin-bottom: 10px }
.bh-card p, .bo-card p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.65 }
.bh-card .ic, .bo-card .ic { color: var(--gold); margin-bottom: 14px; display: block }
.bh-card .ic svg, .bo-card .ic svg { width: 25px; height: 25px }

.bh-split, .bo-split, .split-2 {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(32px,4vw,56px); align-items: start;
}
@media (max-width: 860px) { .bh-split, .bo-split, .split-2 { grid-template-columns: minmax(0,1fr) } }

.bh-list, .bo-list { list-style: none; margin-top: 18px }
.bh-list li, .bo-list li {
  position: relative; padding-left: 30px; margin-bottom: 14px;
  color: var(--bone); font-size: var(--fs-body); line-height: 1.6;
}
.bh-list li::before, .bo-list li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 700 }

.bh-deal, .bo-deal {
  border: 1px solid rgba(138,101,40,.5); border-radius: var(--r-lg);
  padding: 36px 32px; text-align: center; background: rgba(138,101,40,.07);
  max-width: 820px; margin: 0 auto;
}
.bh-form-wrap, .bo-form-wrap { max-width: 560px; margin: 0 auto }
.bh-faq, .bo-faq { border-top: 1px solid var(--green3); padding-top: 22px; margin-top: 22px }
.bh-faq h3, .bh-faq h4, .bo-faq h3, .bo-faq h4 { color: var(--gold); font-size: var(--fs-h4); margin-bottom: 8px }
.bh-faq p, .bo-faq p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.7 }

.bh-chan, .bo-pain { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 14px }
.bh-chan-c, .bo-pain-c { background: var(--green2); border: 1px solid var(--green3); border-radius: var(--r); padding: 24px 22px }
.bh-chan-c .ic, .bo-pain-c .ic { color: var(--gold); margin-bottom: 12px; display: block }
.bh-chan-c .ic svg, .bo-pain-c .ic svg { width: 23px; height: 23px }
.bh-chan-c h3, .bh-chan-c h4, .bo-pain-c h3, .bo-pain-c h4 { color: var(--black); font-size: var(--fs-h4); margin-bottom: 8px }
.bh-chan-c p, .bo-pain-c p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6 }
.bh-chan-c.last { border-style: dashed; border-color: rgba(138,101,40,.55); background: rgba(138,101,40,.05) }

.bh-arrowline, .bo-arrowline { text-align: center; margin: 32px auto 0; color: var(--bone); font-size: var(--fs-body); line-height: 1.7 }
.bh-arrowline strong, .bo-arrowline strong { color: var(--gold) }

.bh-unit, .bo-unit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; margin-top: 28px }
.bh-unit-c, .bo-unit-c { border: 1px solid var(--green3); border-radius: var(--r); padding: 26px 24px; background: var(--green2) }
.bh-unit-c .u, .bo-unit-c .u { color: var(--gold); margin-bottom: 12px; display: block }
.bh-unit-c h3, .bh-unit-c h4, .bo-unit-c h3, .bo-unit-c h4 { color: var(--black); font-size: var(--fs-h4); margin-bottom: 10px }
.bh-unit-c p, .bo-unit-c p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.65 }

/* The frame belongs on the table, not on the scroll wrapper. A bordered
   wrapper with a table pressed flat against it reads as a box someone
   forgot to pad, and the cells already carry their own 16px inset. */
.bh-tw, .bo-tw { overflow-x: auto; margin-top: 32px }
.bh-t, .bo-t {
  width: 100%; border-collapse: collapse; min-width: 640px;
  border: 1px solid var(--green3); border-radius: var(--r);
}
.bh-t th, .bh-t td, .bo-t th, .bo-t td {
  padding: 16px 18px; text-align: left;
  border-bottom: 1px solid var(--green3); font-size: var(--fs-sm);
}
.bh-t thead th, .bo-t thead th { color: var(--muted); background: var(--green2) }
.bh-t thead th:last-child, .bo-t thead th:last-child { color: var(--gold) }
.bh-t td:first-child, .bo-t td:first-child { color: var(--bone) }
.bh-t td:nth-child(2), .bo-t td:nth-child(2), .bo-t td:nth-child(3) { color: var(--dim) }
.bh-t td:last-child, .bo-t td:last-child { color: var(--black) }
.bh-t tbody tr:last-child td, .bo-t tbody tr:last-child td { border-bottom: none }

.bh-feat, .bo-feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 14px; margin-top: 32px }
.bh-feat-c, .bo-feat-c { background: var(--green2); border: 1px solid var(--green3); border-radius: var(--r); padding: 24px 22px }
/* These are section headings inside the card, not micro-labels, so they get
   a heading's size back rather than the 13px label size. */
.bh-feat-c h3, .bh-feat-c h4, .bo-feat-c h3, .bo-feat-c h4 {
  color: var(--gold); margin-bottom: 14px;
  font-size: var(--fs-h4); letter-spacing: .01em;
}
.bh-feat-c ul, .bo-feat-c ul { list-style: none }
.bh-feat-c li, .bo-feat-c li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  color: var(--muted); font-size: var(--fs-sm); line-height: 1.55;
}
.bh-feat-c li::before, .bo-feat-c li::before { content: '✓'; position: absolute; left: 0; color: var(--gold) }
.bh-feat-c li.bh-feat-extra { display: none }
.bh-feat-c.expanded li.bh-feat-extra { display: block }

.bh-feat-more, .bo-more-btn {
  background: none; color: var(--gold); cursor: pointer;
  min-height: 44px; letter-spacing: .02em;   /* sentence case, so sentence tracking */
}
.bh-feat-more { border: none; padding: 4px 2px; text-decoration: underline; text-underline-offset: 4px }
.bh-feat-c.expanded .bh-feat-more { display: none }
.bo-more-btn { border: 1px solid var(--green3); border-radius: var(--r-sm); padding: 12px 26px }
.bo-more-btn:hover, .bo-more-btn:focus-visible { border-color: var(--gold) }

.bo-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(225px, 100%), 1fr)); gap: 16px; margin-top: 30px; counter-reset: s }
.bo-step { border: 1px solid var(--green3); border-radius: var(--r); padding: 26px 24px; background: var(--green2) }
.bo-step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .08em;
  color: var(--gold); display: block; margin-bottom: 12px;
}
.bo-step h3, .bo-step h4 { color: var(--black); font-size: var(--fs-h4); margin-bottom: 9px }
.bo-step p { color: var(--muted); font-size: var(--fs-sm); line-height: 1.62 }

.bo-pain-c.extra, .bo-feat-c li.extra { display: none }
.bo-pain.expanded .bo-pain-c.extra { display: block }
#bo-feat-grid.expanded .bo-feat-c li.extra { display: block }

/* ═══ RESPONSIVE ════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .hero-form-wrap { max-width: 520px }
  .footer-inner { grid-template-columns: 1fr 1fr }
}
@media (max-width: 860px) {
  .proof-bar-inner { grid-template-columns: 1fr 1fr }
  .pb-item:nth-child(odd) { border-left: none }
  .pb-item:nth-child(n+3) { border-top: 1px solid rgba(138,101,40,.15) }
  .problem-section { grid-template-columns: 1fr }
  .sourcing-section { grid-template-columns: 1fr }
  .cta-section { grid-template-columns: 1fr }
  .supplier-cta-inner { flex-direction: column; align-items: flex-start }
}
@media (max-width: 620px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px }
  .btn-red-inline, .btn-ghost { width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch }
  .bh-actions, .bo-actions { flex-direction: column; align-items: stretch }
  /* bh-h1/bo-h1 are two sentences in one heading, split with a <br>. At this
     width the first sentence wraps onto a second line of its own, so the
     line-wrap boundary and the sentence boundary land in different places —
     the gap above the second sentence is exactly the same line-height as
     every other gap, but it reads as an accidental extra-large space.
     Forcing it onto its own block with a small deliberate margin makes that
     gap read as intentional instead, regardless of how many lines the first
     sentence wraps to. */
  .bh-h1 em, .bo-h1 em { display: block; margin-top: 0.18em }
}
@media (max-width: 420px) {
  .proof-bar-inner { grid-template-columns: 1fr }
  .pb-item { border-left: none !important }
  .pb-item + .pb-item { border-top: 1px solid rgba(138,101,40,.15) }
}

/* ═══ CHAT WIDGET ═══════════════════════════════════════════════════
   Deliberately not a circular bubble — that shape is as generic a
   "third-party chat widget" tell as the numbered-circle steps were,
   and this site already rejected rounded corners everywhere else.
   Built by assets/chat.js; markup lives entirely in JS so a page opts
   in with one <script> tag and nothing else. */

#chat-toggle {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 60;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border: none; border-radius: var(--r);
  background: var(--red); color: var(--on-red);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; box-shadow: 0 8px 24px rgba(29,23,19,.28);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
#chat-toggle:hover { background: var(--red2) }
#chat-toggle:active { transform: translateY(1px) }
#chat-toggle svg { width: 18px; height: 18px; flex-shrink: 0 }
#chat-toggle[aria-expanded="true"] { display: none }

#chat-panel {
  position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 60;
  width: min(360px, calc(100vw - 2 * var(--gutter)));
  max-height: min(560px, calc(100vh - 2 * var(--gutter)));
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--green3); border-radius: var(--r);
  box-shadow: 0 16px 48px rgba(29,23,19,.32);
  overflow: hidden;
}
#chat-panel[hidden] { display: none }

.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--black); color: var(--white); flex-shrink: 0;
}
.chat-head-title { font-family: var(--font-display); font-size: 1.15rem }
.chat-head-sub { font-family: var(--font-body); font-size: 0.7rem; color: var(--gold-onblack);
  letter-spacing: var(--track-label); text-transform: uppercase; margin-top: 2px }
.chat-close {
  background: none; border: none; color: var(--white); opacity: .75; cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: 4px; margin: -4px;
}
.chat-close:hover { opacity: 1 }

.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font-body); font-size: var(--fs-sm); line-height: 1.55;
}
.chat-msg { max-width: 88%; padding: 9px 12px; border-radius: var(--r) }
.chat-msg.user { align-self: flex-end; background: var(--red); color: var(--on-red) }
.chat-msg.bot { align-self: flex-start; background: var(--green2); color: var(--cream); border: 1px solid var(--green3) }
.chat-msg.error { align-self: flex-start; background: var(--card); color: var(--muted); border: 1px solid var(--green3); font-style: italic }
.chat-msg.typing { align-self: flex-start; background: var(--green2); border: 1px solid var(--green3); color: var(--muted) }

.chat-quick {
  padding: 0 16px 10px; font-size: var(--fs-label); color: var(--muted); flex-shrink: 0;
}
.chat-quick a { color: var(--gold); font-weight: 600 }

.chat-form {
  display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--green3); flex-shrink: 0;
}
.chat-form input {
  flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--green3);
  border-radius: var(--r); background: var(--white); font-family: var(--font-body); font-size: var(--fs-sm);
  color: var(--cream); outline: none;
}
.chat-form input:focus { border-color: var(--red) }
.chat-form button {
  padding: 9px 14px; border: none; border-radius: var(--r); background: var(--red); color: var(--on-red);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.chat-form button:hover { background: var(--red2) }
.chat-form button:disabled { opacity: .5; cursor: default }

@media (max-width: 480px) {
  #chat-panel { right: 12px; bottom: 12px; left: 12px; width: auto }
  #chat-toggle { right: 12px; bottom: 12px }
}