/* ==========================================================================
   Zenith Nutra Products — public stylesheet
   Palette: golden dark brown + blackish dark navy
   ========================================================================== */

:root {
  --navy-950:#070E1A;
  --navy-900:#0A1424;
  --navy-850:#0C1A2E;
  --navy-800:#0F1E36;
  --navy-700:#172C4B;
  --navy-600:#223B62;

  --gold-200:#EFDCB4;
  --gold-300:#E3C88B;
  --gold-400:#D4AF6A;
  --gold-500:#C19A4B;
  --gold-600:#A67C33;

  --brown-900:#241809;
  --brown-800:#3A2812;
  --brown-700:#55381C;

  --cream-50:#FBF9F5;
  --cream-100:#F5F1E9;
  --cream-200:#EAE3D6;
  --cream-300:#DBD1BE;

  --ink:#141C28;
  --body:#39434F;
  --muted:#6B7686;

  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;

  --wrap:1180px;
  --radius:3px;
  --shadow-sm:0 1px 2px rgba(10,20,36,.06),0 2px 8px rgba(10,20,36,.05);
  --shadow-md:0 4px 12px rgba(10,20,36,.08),0 12px 32px rgba(10,20,36,.07);
  --shadow-lg:0 12px 40px rgba(10,20,36,.14);
  --t:200ms cubic-bezier(.4,0,.2,1);
}

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

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

body {
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  color:var(--body);
  background:var(--cream-50);
  -webkit-font-smoothing:antialiased;
  /* Long unbroken tokens (SKUs, CAS numbers, email addresses) must not force
     the page wider than the viewport on a narrow phone. */
  overflow-wrap:break-word;
}

/* Nothing may exceed the viewport width; wide content scrolls inside itself. */
img { max-width:100%; height:auto; display:block; }
svg,video,iframe,table { max-width:100%; }
pre { max-width:100%; overflow-x:auto; }

a { color:var(--brown-700); text-decoration:none; transition:color var(--t); }
a:hover { color:var(--gold-600); }

h1,h2,h3,h4 { font-family:var(--serif); color:var(--ink); font-weight:600; line-height:1.22; margin:0 0 .55em; letter-spacing:-.011em; }
h1 { font-size:clamp(2.1rem,4.4vw,3.35rem); }
h2 { font-size:clamp(1.6rem,2.9vw,2.3rem); }
h3 { font-size:clamp(1.18rem,1.9vw,1.45rem); }
h4 { font-size:1.06rem; }
p  { margin:0 0 1.15em; }

ul,ol { margin:0 0 1.15em; padding-left:1.35em; }
li { margin-bottom:.42em; }

hr { border:0; border-top:1px solid var(--cream-200); margin:2.5rem 0; }

::selection { background:var(--gold-300); color:var(--navy-900); }

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

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.wrap-narrow { max-width:800px; margin:0 auto; padding:0 24px; }

.skip-link {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold-500); color:var(--navy-900); padding:12px 20px; font-weight:600;
}
.skip-link:focus { left:0; }

/* ---------- Utility ---------- */
.eyebrow {
  font-family:var(--sans); font-size:.7rem; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase; color:var(--gold-600);
  margin:0 0 .9rem; display:block;
}
.eyebrow-light { color:var(--gold-400); }
.lede { font-size:1.14rem; line-height:1.68; color:var(--body); }
.muted { color:var(--muted); }
.center { text-align:center; }
.mt0{margin-top:0}.mb0{margin-bottom:0}

.rule-gold {
  width:56px; height:2px; background:var(--gold-500); border:0; margin:0 0 1.6rem;
}
.center .rule-gold { margin-left:auto; margin-right:auto; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-block; font-family:var(--sans); font-size:.86rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; padding:15px 32px;
  border:1px solid transparent; border-radius:var(--radius); cursor:pointer;
  transition:all var(--t); text-align:center; line-height:1.2;
}
.btn-primary { background:var(--gold-500); color:var(--navy-900); border-color:var(--gold-500); }
.btn-primary:hover { background:var(--gold-400); border-color:var(--gold-400); color:var(--navy-900); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-outline { background:transparent; color:var(--gold-300); border-color:rgba(212,175,106,.5); }
.btn-outline:hover { background:rgba(212,175,106,.1); border-color:var(--gold-400); color:var(--gold-200); }
.btn-dark { background:var(--navy-800); color:var(--cream-100); border-color:var(--navy-800); }
.btn-dark:hover { background:var(--navy-700); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-ghost { background:transparent; color:var(--brown-700); border-color:var(--cream-300); }
.btn-ghost:hover { border-color:var(--gold-500); color:var(--gold-600); background:#fff; }
.btn-sm { padding:10px 20px; font-size:.76rem; }
.btn-block { display:block; width:100%; }

/* ---------- Header ---------- */
.site-header {
  background:var(--navy-900);
  border-bottom:1px solid rgba(212,175,106,.18);
  position:sticky; top:0; z-index:100;
}
.topbar {
  background:var(--navy-950); color:#9DAABF;
  font-size:.78rem; letter-spacing:.02em;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.topbar .wrap { display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:38px; flex-wrap:wrap; }
.topbar a { color:#B9C5D8; }
.topbar a:hover { color:var(--gold-400); }
.topbar-certs { color:var(--gold-500); font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:.68rem; }

.header-inner { display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:78px; }

/* The brand block, not the nav, absorbs any shortfall: the nav never shrinks and its
   items never wrap, so the row always reads as one line. If the header is ever short
   of space the strapline ellipsises instead. */
.brand { display:flex; align-items:center; gap:13px; flex-shrink:1; min-width:0; }
/* The logo artwork is dark navy and black on a light ground, so on the navy header and
   footer it sits on a cream plate rather than directly on the background. */
.brand-logo {
  width:46px; height:46px; flex-shrink:0;
  padding:5px; border-radius:5px;
  background:var(--cream-100);
  object-fit:contain;
  box-shadow:0 0 0 1px rgba(212,175,106,.28);
}
.brand-text { display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.brand-name { font-family:var(--serif); font-size:1.24rem; font-weight:600; color:var(--cream-100); letter-spacing:.005em; }
.brand-tag { font-size:.63rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-500); margin-top:3px; }
.brand-name, .brand-tag { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.main-nav { display:flex; flex-wrap:nowrap; flex-shrink:0; align-items:stretch; gap:2px; min-height:44px; }
.main-nav a {
  color:#C6D1E2; font-size:.87rem; font-weight:500; padding:10px 14px;
  letter-spacing:.02em; border-radius:var(--radius); position:relative;
}
/* Top-level items must share one box. The dropdown wrapper is a span, so its link
   was an inline box whose vertical padding did not count towards layout: it came out
   shorter than its sibling links, its hover panel and current-page underline sat at a
   different height, and the panel anchored above the bottom of the row. Every item is
   now a stretched flex box of identical height, so the row reads as one line. */
.main-nav > a, .has-drop > a {
  display:flex; align-items:center; padding:0 10px; line-height:1.2;
  white-space:nowrap;
}
.main-nav a:hover, .main-nav a[aria-current] { color:var(--gold-300); }
.main-nav a[aria-current]::after {
  content:''; position:absolute; left:10px; right:10px; bottom:6px;
  height:1.5px; background:var(--gold-500);
}
.nav-cta { margin-left:10px; align-self:center; }

/* Dropdown */
.has-drop { position:relative; display:flex; align-items:stretch; }
.drop {
  position:absolute; top:100%; left:0; min-width:280px;
  background:var(--navy-850); border:1px solid rgba(212,175,106,.2);
  box-shadow:var(--shadow-lg); padding:8px; border-radius:var(--radius);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:all var(--t); z-index:120;
  max-height:min(70vh, 560px); overflow-y:auto;
}
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity:1; visibility:visible; transform:translateY(0); }
.drop a { display:block; padding:10px 14px; font-size:.85rem; color:#C6D1E2; border-radius:2px; }
.drop a:hover { background:rgba(212,175,106,.1); color:var(--gold-300); }
.drop a small { display:block; font-size:.72rem; color:#7C8AA0; margin-top:2px; }

/* Capability menu — nine services is too long for one column, so they sit in two,
   grouped under the same three pillars the overview page uses. */
/* Anchored to the item's right edge, not its left: the capability menu sits mid-row
   with four items after it, so a left-anchored 600px panel runs past the viewport on
   a 1100–1300px screen. Columns are 288px, which clears the longest service name
   ("Global Sourcing & Supply Programmes", 264px) without wrapping. */
.drop-wide {
  display:grid; grid-template-columns:1fr 1fr; gap:2px 8px;
  min-width:600px; max-width:calc(100vw - 40px);
  left:auto; right:0;
}
.drop-lead { grid-column:1 / -1; }
.drop-group { display:block; padding-top:6px; }
.drop-head {
  display:block; padding:6px 14px 4px; font-size:.66rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--gold-500);
}
.drop-group a { padding:7px 14px; }

.nav-toggle {
  display:none; background:none; border:1px solid rgba(212,175,106,.35);
  color:var(--gold-400); font-size:1.35rem; line-height:1; padding:8px 13px;
  border-radius:var(--radius); cursor:pointer;
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(ellipse at 12% 0%, rgba(85,56,28,.55) 0%, transparent 55%),
    radial-gradient(ellipse at 88% 90%, rgba(193,154,75,.14) 0%, transparent 50%),
    linear-gradient(165deg,var(--navy-900) 0%,var(--navy-950) 60%,var(--brown-900) 145%);
  color:var(--cream-100);
  padding:clamp(64px,9vw,118px) 0 clamp(56px,8vw,100px);
  position:relative; overflow:hidden;
}
.hero::after {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(212,175,106,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(212,175,106,.055) 1px,transparent 1px);
  background-size:64px 64px; pointer-events:none;
}
.hero .wrap { position:relative; z-index:2; }
.hero-grid { display:grid; grid-template-columns:1.12fr .88fr; gap:60px; align-items:center; }
.hero h1 { color:var(--cream-50); margin-bottom:.42em; }
.hero h1 em { font-style:normal; color:var(--gold-400); }
.hero-sub { font-size:1.13rem; line-height:1.72; color:#BFCADB; max-width:60ch; margin-bottom:2rem; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:2.4rem; }
.hero-stats { display:flex; gap:38px; flex-wrap:wrap; padding-top:1.8rem; border-top:1px solid rgba(212,175,106,.22); }
.hero-stat strong { display:block; font-family:var(--serif); font-size:1.85rem; color:var(--gold-400); line-height:1.1; }
.hero-stat span { font-size:.75rem; letter-spacing:.13em; text-transform:uppercase; color:#8C9AB1; }
.hero-visual { position:relative; }
.hero-visual img { border:1px solid rgba(212,175,106,.3); box-shadow:var(--shadow-lg); border-radius:var(--radius); }

/* Hero with a full-bleed photograph behind the copy (Settings → Hero image) */
.hero-photo { min-height:clamp(520px,64vh,680px); display:flex; align-items:center; }
.hero-photo .hero-media { position:absolute; inset:0; z-index:0; }
.hero-photo picture { display:block; width:100%; height:100%; }
.hero-photo .hero-bg { width:100%; height:100%; object-fit:cover; object-position:center center; display:block; }
.hero-photo .hero-scrim { position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,14,26,.93) 0%, rgba(7,14,26,.86) 30%, rgba(7,14,26,.58) 50%, rgba(7,14,26,.22) 68%, rgba(7,14,26,.06) 100%),
    linear-gradient(180deg, rgba(7,14,26,0) 55%, rgba(7,14,26,.35) 100%); }
.hero-photo::after { display:none; }
.hero-photo .wrap { width:100%; }
.hero-photo .hero-grid { grid-template-columns:1fr; }
.hero-photo .hero-copy { max-width:660px; }
.hero-photo h1 { text-shadow:0 2px 18px rgba(0,0,0,.35); }
@media (max-width:820px) {
  .hero-photo { display:flex; flex-direction:column; min-height:0; padding:0; }
  .hero-photo .hero-media { position:static; order:1; height:auto; }
  .hero-photo picture { height:auto; }
  .hero-photo .hero-bg { height:auto; aspect-ratio:16/10; object-position:center; }
  .hero-photo .hero-scrim { display:none; }
  .hero-photo .wrap { order:2; padding-top:2rem; padding-bottom:2.4rem; }
  .hero-photo .hero-copy { max-width:none; }
  .hero-photo h1 { text-shadow:none; }
}

/* ---------- Sections ---------- */
.section { padding:clamp(56px,7.5vw,96px) 0; }
.section-tight { padding:clamp(40px,5vw,64px) 0; }
.section-cream { background:var(--cream-100); }
.section-dark { background:var(--navy-900); color:#BFCADB; }
.section-dark h1,.section-dark h2,.section-dark h3 { color:var(--cream-50); }
.section-dark .lede { color:#BFCADB; }

.section-head { max-width:760px; margin-bottom:3rem; }
.section-head.center { margin-left:auto; margin-right:auto; }

/* ---------- Cards grid ---------- */
.grid { display:grid; gap:26px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }

.card {
  background:#fff; border:1px solid var(--cream-200); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  position:relative;
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--gold-500); transform:scaleX(0); transform-origin:left;
  transition:transform 260ms cubic-bezier(.4,0,.2,1); z-index:3;
}
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--cream-300); }
.card:hover::before { transform:scaleX(1); }
.card-media { position:relative; background:var(--navy-900); aspect-ratio:4/3; overflow:hidden; }
.card-media img { width:100%; height:100%; object-fit:cover; transition:transform 420ms cubic-bezier(.4,0,.2,1); }
.card:hover .card-media img { transform:scale(1.035); }
.card-body { padding:22px 24px 26px; flex:1; display:flex; flex-direction:column; }
.card-cat { font-size:.67rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-600); font-weight:700; margin-bottom:.55rem; }
.card h3 { font-size:1.13rem; margin-bottom:.5rem; line-height:1.32; }
.card h3 a { color:var(--ink); }
.card:hover h3 a { color:var(--brown-700); }
.card p { font-size:.9rem; line-height:1.62; color:var(--muted); margin-bottom:1rem; }
.card-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; border-top:1px solid var(--cream-200); }
.card-meta { font-size:.74rem; color:var(--muted); letter-spacing:.04em; }
.card-link { font-size:.79rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--brown-700); }
.card-link::after { content:' →'; transition:transform var(--t); display:inline-block; }
.card:hover .card-link::after { transform:translateX(3px); }

.badge-corner {
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--gold-500); color:var(--navy-900);
  font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 11px; border-radius:2px;
}

/* ---------- Category tiles ---------- */
.cat-tile {
  position:relative; display:block; overflow:hidden; border-radius:var(--radius);
  background:var(--navy-900); min-height:270px; color:#fff;
  border:1px solid rgba(212,175,106,.22);
}
.cat-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; transition:transform 480ms,opacity var(--t); }
.cat-tile:hover img { transform:scale(1.05); opacity:.62; }
.cat-tile-body {
  position:relative; z-index:2; padding:30px 28px; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end; min-height:270px;
  background:linear-gradient(to top,rgba(7,14,26,.94) 12%,rgba(7,14,26,.55) 55%,rgba(7,14,26,.2) 100%);
}
.cat-tile h3 { color:var(--cream-50); margin-bottom:.35rem; font-size:1.3rem; }
.cat-tile p { color:#B8C4D6; font-size:.87rem; margin-bottom:.9rem; line-height:1.55; }
.cat-tile .card-link { color:var(--gold-400); }
.cat-tile-count { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-500); margin-bottom:.5rem; }

/* ---------- USP strip ---------- */
.usp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--cream-200); background:#fff; }
.usp { padding:34px 30px; border-right:1px solid var(--cream-200); }
.usp:last-child { border-right:0; }
.usp-num { font-family:var(--serif); font-size:.95rem; color:var(--gold-500); margin-bottom:.85rem; letter-spacing:.1em; }
.usp h3 { font-size:1.03rem; margin-bottom:.5rem; }
.usp p { font-size:.87rem; color:var(--muted); margin:0; line-height:1.62; }

/* ---------- Product detail ---------- */
.breadcrumbs { font-size:.79rem; color:var(--muted); padding:20px 0; letter-spacing:.02em; }
.breadcrumbs a { color:var(--muted); }
.breadcrumbs a:hover { color:var(--gold-600); }
.breadcrumbs span { margin:0 8px; opacity:.5; }

.product-hero { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; padding-bottom:24px; }
.product-gallery { position:sticky; top:110px; }
.product-main-img { border:1px solid var(--cream-200); border-radius:var(--radius); overflow:hidden; background:var(--navy-900); }
.product-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
.product-thumbs figure { margin:0; border:1px solid var(--cream-200); border-radius:var(--radius); overflow:hidden; background:var(--navy-900); }
.product-thumbs figcaption {
  font-size:.66rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  padding:7px 9px; background:#fff; text-align:center; border-top:1px solid var(--cream-200);
}

.product-title { margin-bottom:.4em; }
.product-short { font-size:1.08rem; line-height:1.68; color:var(--body); margin-bottom:1.6rem; }
.product-quickfacts {
  border:1px solid var(--cream-200); background:#fff; border-radius:var(--radius);
  padding:6px 22px; margin-bottom:1.7rem;
}
.qf-row { display:flex; gap:18px; padding:12px 0; border-bottom:1px solid var(--cream-100); font-size:.9rem; }
.qf-row:last-child { border-bottom:0; }
.qf-row dt { flex:0 0 168px; color:var(--muted); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600; }
.qf-row dd { margin:0; color:var(--ink); flex:1; }

.product-actions { display:flex; gap:13px; flex-wrap:wrap; margin-bottom:1.5rem; }
.cert-chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip {
  font-size:.72rem; letter-spacing:.05em; padding:5px 12px;
  background:var(--cream-100); border:1px solid var(--cream-200);
  border-radius:100px; color:var(--brown-700);
}

/* Spec table */
.spec-table { border:1px solid var(--cream-200); background:#fff; border-radius:var(--radius); overflow:hidden; }
.spec-row { display:flex; border-bottom:1px solid var(--cream-100); }
.spec-row:last-child { border-bottom:0; }
.spec-row:nth-child(odd) { background:var(--cream-50); }
.spec-row dt { flex:0 0 44%; padding:13px 20px; font-weight:600; color:var(--ink); font-size:.89rem; }
.spec-row dd { flex:1; margin:0; padding:13px 20px; color:var(--body); font-size:.89rem; border-left:1px solid var(--cream-100); }

.prose h2 { margin-top:2.2rem; font-size:1.5rem; }
.prose h3 { margin-top:1.7rem; }
.prose > *:first-child { margin-top:0; }
.prose ul li::marker { color:var(--gold-500); }

.tabs-panels { margin-top:2.6rem; }
.panel { margin-bottom:2.8rem; }
.panel > h2 {
  font-size:1.36rem; padding-bottom:.55rem; margin-bottom:1.2rem;
  border-bottom:1px solid var(--cream-200); position:relative;
}
.panel > h2::after { content:''; position:absolute; bottom:-1px; left:0; width:54px; height:2px; background:var(--gold-500); }

.app-list { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
.app-list li { padding-left:26px; position:relative; font-size:.93rem; margin:0; }
.app-list li::before {
  content:''; position:absolute; left:0; top:.62em; width:9px; height:9px;
  border:1.5px solid var(--gold-500); transform:rotate(45deg);
}

/* Key facts (AEO block) */
.key-facts {
  background:linear-gradient(150deg,var(--navy-900),var(--navy-850));
  border:1px solid rgba(212,175,106,.28); border-radius:var(--radius);
  padding:26px 30px; margin:2rem 0; color:#C6D1E2;
}
.key-facts .kf-title {
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-400); margin-bottom:1rem; font-family:var(--sans); font-weight:700;
}
.key-facts dl { margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:14px 30px; }
.key-facts dt { font-size:.71rem; letter-spacing:.11em; text-transform:uppercase; color:#8798AF; margin-bottom:3px; }
.key-facts dd { margin:0; color:var(--cream-100); font-size:.93rem; line-height:1.5; }

/* ---------- FAQ ---------- */
.faq-list { border-top:1px solid var(--cream-200); }
.faq-item { border-bottom:1px solid var(--cream-200); }
.faq-item summary {
  cursor:pointer; padding:20px 44px 20px 0; position:relative; list-style:none;
  font-family:var(--serif); font-size:1.08rem; color:var(--ink); font-weight:600; line-height:1.4;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:'+'; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:1.5rem; color:var(--gold-500); font-family:var(--sans); font-weight:300; transition:transform var(--t);
}
.faq-item[open] summary::after { content:'−'; }
.faq-item summary:hover { color:var(--brown-700); }
.faq-answer { padding:0 44px 22px 0; color:var(--body); font-size:.96rem; }
.faq-answer p:last-child { margin-bottom:0; }
.faq-topic { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-600); font-weight:700; display:block; margin-bottom:.3rem; }

/* ---------- Service cards ---------- */
.oem-hero {
  background:linear-gradient(150deg,var(--brown-900) 0%,var(--navy-900) 48%,var(--navy-950) 100%);
  color:var(--cream-100); padding:clamp(56px,7vw,92px) 0;
}
.oem-hero h1 { color:var(--cream-50); }
.oem-hero .lede { color:#BFCADB; }

.oem-card {
  background:#fff; border:1px solid var(--cream-200); border-radius:var(--radius);
  padding:30px 28px; transition:all var(--t); height:100%;
  display:flex; flex-direction:column;
}
.oem-card:hover { border-color:var(--gold-500); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.oem-icon {
  width:46px; height:46px; border:1.5px solid var(--gold-500); border-radius:50%;
  display:grid; place-items:center; margin-bottom:1.1rem;
  color:var(--gold-600); font-size:1.15rem;
  background:linear-gradient(140deg,var(--cream-100),#fff);
}
.oem-card h3,
.oem-card h4 { font-size:1.1rem; margin-bottom:.5rem; }
.oem-card p { font-size:.89rem; color:var(--muted); line-height:1.62; margin-bottom:1rem; }
.oem-card .card-link { margin-top:auto; }

/* ---------- Capability pillars (contract manufacturing overview) ---------- */
.pillar-spaced { margin-top:3.6rem; padding-top:3.2rem; border-top:1px solid var(--cream-200); }
.pillar-head { display:flex; gap:20px; align-items:flex-start; margin-bottom:1.8rem; max-width:860px; }
.pillar-num {
  flex:0 0 auto; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(140deg,var(--cream-100),#fff);
  border:1.5px solid var(--gold-500); color:var(--gold-600);
  font-family:var(--serif); font-size:1.3rem; line-height:1;
}
.pillar-title { font-size:1.42rem; margin-bottom:.45rem; }
.pillar-summary { font-size:.94rem; color:var(--muted); line-height:1.68; margin:0; }


.step-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; counter-reset:step; }
.step { position:relative; padding-top:20px; }
.step::before {
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--serif); font-size:2.3rem; color:rgba(193,154,75,.32);
  line-height:1; display:block; margin-bottom:.5rem;
}
.step h3 { font-size:1.03rem; margin-bottom:.4rem; }
.step p { font-size:.87rem; color:var(--muted); margin:0; line-height:1.6; }
.section-dark .step p { color:#9DAABF; }
.section-dark .step::before { color:rgba(212,175,106,.38); }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(85,56,28,.5) 0%, transparent 60%),
    linear-gradient(120deg,var(--navy-900),var(--navy-950));
  color:var(--cream-100); padding:clamp(48px,6vw,78px) 0; text-align:center;
  border-top:1px solid rgba(212,175,106,.2);
}
.cta-band h2 { color:var(--cream-50); }
.cta-band p { color:#BFCADB; max-width:62ch; margin-left:auto; margin-right:auto; font-size:1.06rem; }
.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:1.8rem; }

/* ---------- Forms ---------- */
.form-card {
  background:#fff; border:1px solid var(--cream-200); border-radius:var(--radius);
  padding:34px 34px 38px; box-shadow:var(--shadow-sm);
}
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.field { display:flex; flex-direction:column; margin-bottom:18px; }
.field-full { grid-column:1/-1; }
label { font-size:.79rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:7px; }
label .req { color:#B4442F; }
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],select,textarea {
  font-family:var(--sans); font-size:.96rem; color:var(--ink);
  padding:12px 14px; border:1px solid var(--cream-300); border-radius:var(--radius);
  background:#fff; transition:border-color var(--t),box-shadow var(--t); width:100%;
}
input:focus,select:focus,textarea:focus {
  outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(193,154,75,.15);
}
textarea { resize:vertical; min-height:130px; line-height:1.6; }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7686' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
.field-hint { font-size:.79rem; color:var(--muted); margin-top:6px; }

.flash { padding:14px 18px; border-radius:var(--radius); margin-bottom:22px; font-size:.93rem; border:1px solid; }
.flash-success { background:#F0F7F0; border-color:#C5DFC5; color:#2C5F2E; }
.flash-error { background:#FCF1EF; border-color:#EBCCC6; color:#96382A; }

/* ---------- Contact info ---------- */
.info-list { list-style:none; padding:0; margin:0; }
.info-list li { padding:16px 0; border-bottom:1px solid var(--cream-200); display:flex; gap:16px; }
.info-list li:last-child { border-bottom:0; }
.info-label { flex:0 0 108px; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:700; padding-top:2px; }
.info-value { flex:1; color:var(--ink); }

/* ---------- Filters / listing ---------- */
.filter-bar {
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:20px 0 30px; border-bottom:1px solid var(--cream-200); margin-bottom:34px;
}
.filter-chip {
  font-size:.82rem; padding:9px 18px; border:1px solid var(--cream-300);
  border-radius:100px; color:var(--body); background:#fff; transition:all var(--t);
}
.filter-chip:hover { border-color:var(--gold-500); color:var(--brown-700); }
.filter-chip.active { background:var(--navy-900); border-color:var(--navy-900); color:var(--gold-300); font-weight:600; }
.result-count { margin-left:auto; font-size:.84rem; color:var(--muted); }

.search-form { display:flex; gap:10px; max-width:520px; }
.search-form input { flex:1; }

/* ---------- Article ---------- */
.article-header { padding:52px 0 34px; border-bottom:1px solid var(--cream-200); margin-bottom:38px; }
.article-meta { font-size:.8rem; color:var(--muted); letter-spacing:.05em; }
.article-body { font-size:1.05rem; line-height:1.78; }
.article-body h2 { margin-top:2.4rem; }
.article-body img { border-radius:var(--radius); margin:2rem 0; }

/* ---------- Pagination ---------- */
.pagination { display:flex; gap:7px; justify-content:center; margin-top:48px; flex-wrap:wrap; }
.pagination a,.pagination span {
  min-width:42px; height:42px; display:grid; place-items:center; padding:0 12px;
  border:1px solid var(--cream-300); border-radius:var(--radius); font-size:.88rem; color:var(--body); background:#fff;
}
.pagination a:hover { border-color:var(--gold-500); color:var(--brown-700); }
.pagination .current { background:var(--navy-900); border-color:var(--navy-900); color:var(--gold-300); font-weight:600; }

/* ---------- Footer ---------- */
.site-footer { background:var(--navy-950); color:#93A2B8; padding:66px 0 0; font-size:.9rem; }
.footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:48px; }
.site-footer h4 {
  color:var(--gold-400); font-family:var(--sans); font-size:.73rem;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.15rem; font-weight:700;
}
.site-footer a { color:#93A2B8; }
.site-footer a:hover { color:var(--gold-300); }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { margin-bottom:.62em; }
.footer-about p { color:#8394AC; line-height:1.68; font-size:.88rem; }
.footer-brand { display:flex; align-items:center; gap:12px; margin-bottom:1.2rem; }
.footer-certs {
  font-size:.75rem; color:var(--gold-600); letter-spacing:.03em;
  padding-top:1rem; border-top:1px solid rgba(255,255,255,.07); margin-top:1.2rem;
}
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08); padding:22px 0 30px;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:.81rem; color:#6E7D93;
}
.footer-bottom a { color:#6E7D93; }
.footer-legal { display:flex; gap:20px; flex-wrap:wrap; }

/* ---------- 404 ---------- */
.error-page { text-align:center; padding:clamp(70px,10vw,130px) 0; }
.error-code { font-family:var(--serif); font-size:clamp(4.5rem,13vw,8.5rem); color:var(--gold-500); line-height:1; opacity:.35; margin-bottom:.1em; }

/* ---------- Responsive ---------- */
/* The header row does not fit below ~1240px once the brand strapline is counted:
   brand block plus eight nav items plus the quote button measures ~1150px against a
   1180px wrap, and the strapline alone is ~310px of that. Drop it first — the brand
   name carries the identity — then hand over to the drawer at 1100px, before the nav
   has to shrink. Without these two steps the nav items shrink, the longest labels
   wrap onto a second line, and the row stops reading as one line. */
@media (max-width:1240px) {
  .brand-tag { display:none; }
}

@media (max-width:1100px) {
  .nav-toggle { display:block; min-width:46px; min-height:46px; padding:0 12px; }
  .main-nav {
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--navy-850); border-top:1px solid rgba(212,175,106,.2);
    flex-direction:column; align-items:stretch; padding:12px; gap:2px;
    box-shadow:var(--shadow-lg); max-height:76vh; overflow-y:auto;
  }
  .main-nav.open { display:flex; }
  .main-nav a { padding:14px 16px; }          /* >=44px touch target */
  .main-nav a[aria-current]::after { display:none; }

  /* The desktop dropdown becomes an inline block in the mobile drawer, so its
     desktop min-width would push the drawer wider than a small phone. The wrapper
     must also drop out of flex here, or the panel would sit beside its link
     instead of under it, and the drawer already scrolls so the panel must not. */
  .has-drop { display:block; }
  .drop { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; background:rgba(0,0,0,.22); margin:2px 0 6px; border:0; min-width:0; max-height:none; overflow:visible; }
  .drop-wide { display:block; min-width:0; max-width:none; }
  .drop-group { padding-top:2px; }
  .nav-cta { margin:8px 0 0; align-self:stretch; }
}

@media (max-width:1000px) {
  .hero-grid { grid-template-columns:1fr; gap:44px; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .usp-grid { grid-template-columns:repeat(2,1fr); }
  .usp:nth-child(2) { border-right:0; }
  .usp:nth-child(1),.usp:nth-child(2) { border-bottom:1px solid var(--cream-200); }
  .step-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:repeat(2,1fr); gap:36px; }
  .product-hero { grid-template-columns:1fr; gap:36px; }
  .product-gallery { position:static; }
}

@media (max-width:820px) {
  body { font-size:16px; }
  /* The drawer and its dropdown rules now live in the 1100px block above, which is
     where the desktop nav actually runs out of room. */

  /* iOS Safari zooms the whole page when a focused input is under 16px. */
  input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],select,textarea {
    font-size:16px;
  }

  /* "Bulk Ingredients & Contract Manufacturing" is far too long to sit beside the
     logo here — it is already hidden from 1240px down, so nothing to restyle. */
  .header-inner { gap:14px; }

  .breadcrumbs { padding:14px 0; }
  .filter-bar { padding:16px 0 22px; margin-bottom:26px; }
  .result-count { margin-left:0; width:100%; }

  /* Hamburger must clear the 44px minimum touch target. */
  .nav-toggle { min-width:46px; min-height:46px; padding:0 12px; }
  .grid-3,.grid-2 { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .app-list { grid-template-columns:1fr; }
  .key-facts dl { grid-template-columns:1fr; }
  .topbar .wrap { justify-content:center; text-align:center; }
  .qf-row { flex-direction:column; gap:3px; }
  .qf-row dt { flex:none; }
  .spec-row { flex-direction:column; }
  .spec-row dt { flex:none; padding-bottom:2px; }
  .spec-row dd { border-left:0; padding-top:0; }
}

@media (max-width:640px) {
  .pillar-head { gap:14px; }
  .pillar-num { width:38px; height:38px; font-size:1.1rem; }
  .pillar-title { font-size:1.2rem; }
}

@media (max-width:560px) {
  .grid-4 { grid-template-columns:1fr; }
  .usp-grid { grid-template-columns:1fr; }
  .usp { border-right:0; border-bottom:1px solid var(--cream-200); }
  .step-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .product-thumbs { grid-template-columns:repeat(2,1fr); }
  .hero-stats { gap:24px; }
  .btn { padding:14px 24px; font-size:.8rem; }

  /* Stacked full-width CTAs are easier to hit than side-by-side pills. */
  .hero-actions,.cta-actions,.product-actions,.form-actions {
    display:flex; flex-direction:column; align-items:stretch; gap:12px;
  }
  .hero-actions .btn,.cta-actions .btn,.product-actions .btn,.form-actions .btn { width:100%; }

  .brand-name { font-size:1.12rem; }
  .brand-logo { width:40px; height:40px; padding:4px; }

  .search-form { flex-wrap:wrap; }
  .search-form input { flex:1 1 100%; }
  .search-form .btn { width:100%; }

  .usp { padding:26px 22px; }
  .oem-card { padding:26px 22px; }
  .card-body { padding:18px 20px 22px; }
  .key-facts { padding:22px 20px; }
}

/* ---------- Small phones (iPhone SE, older Androids) ---------- */
@media (max-width:400px) {
  .wrap,.wrap-narrow { padding:0 16px; }
  h1 { font-size:clamp(1.78rem,7.4vw,2.1rem); }
  h2 { font-size:clamp(1.38rem,5.6vw,1.6rem); }
  .lede { font-size:1.03rem; }
  .section { padding:44px 0; }
  .section-tight { padding:32px 0; }

  .topbar .wrap { gap:4px; padding-top:6px; padding-bottom:6px; }
  .topbar-certs { font-size:.62rem; letter-spacing:.07em; }

  .hero-stats { gap:18px 26px; padding-top:1.3rem; }
  .hero-stat strong { font-size:1.5rem; }
  .hero-stat span { font-size:.68rem; letter-spacing:.09em; }

  .btn { padding:14px 18px; font-size:.76rem; letter-spacing:.05em; }
  .filter-chip { padding:9px 14px; font-size:.78rem; }

  .oem-card,.usp { padding:22px 18px; }
  .card-body { padding:16px 17px 20px; }
  .key-facts { padding:20px 17px; }
  .cta-band { padding:52px 0; }

  .product-thumbs { grid-template-columns:repeat(2,1fr); gap:9px; }
  .breadcrumbs { font-size:.74rem; }
  .breadcrumbs span { margin:0 5px; }
}

@media print {
  .site-header,.site-footer,.cta-band,.hero-actions,.product-actions { display:none; }
  body { background:#fff; color:#000; font-size:12pt; }
}