/* ══════════════════════════════════════════════════════════════════════
   pharma.css — the Sigma-Audley pharmaceutical frontend, merged into the
   shop engine.

   EVERYTHING is scoped under .ph so it can never clobber the engine's
   global.css / home.css or the identity layer. The engine owns the hero,
   trending grid, cart/checkout modals, warehouse modal and FAQ — those are
   untouched, because their IDs and classes are a live JS contract.

   Colours are taken from the shop's own identity ramp so this reads as one
   site, not a graft: crimson #CC2631 primary, warm-paper surfaces, ink text.
   All pairs clear WCAG AA (contrast-audit.js exit 0).
   ══════════════════════════════════════════════════════════════════════ */

.ph {
  --ph-ink:      #201314;
  --ph-ink-2:    #3a2224;
  --ph-slate:    #4d3a3b;
  --ph-steel:    #6b5455;
  --ph-mist:     #90585b;
  --ph-line:     #e4dcdc;
  --ph-line-2:   #cfc2c2;
  --ph-line-d:   rgba(255,255,255,.13);
  --ph-paper:    #f7eeee;
  --ph-paper-2:  #fcf8f8;
  --ph-white:    #fffdfd;
  --ph-cr:       #CC2631;
  --ph-cr-d:     #a0141f;
  --ph-cr-l:     #e8a9ad;
  --ph-ok:       #1E9E6A;
  --ph-ez:       cubic-bezier(.22,1,.36,1);

  --ph-sans:  'Public Sans', 'Archivo', -apple-system, sans-serif;
  --ph-disp:  'Archivo', 'Public Sans', sans-serif;
  --ph-serif: 'Spectral', Georgia, serif;
  --ph-mono:  'JetBrains Mono', ui-monospace, monospace;
}

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

/* ── shared section shell ─────────────────────────────────────────── */
.ph-sec { padding: clamp(48px, 7vw, 96px) 0; position: relative; }
.ph-sec--alt  { background: var(--ph-paper); }
.ph-sec--dark { background: var(--ph-ink); color: var(--ph-paper-2); }
.ph-wrap { max-width: 1320px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

.ph-kicker {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--ph-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ph-cr); margin-bottom: 18px;
}
.ph-kicker i { width: 26px; height: 2px; background: var(--ph-cr); flex: none; font-style: normal; }
.ph-sec--dark .ph-kicker { color: var(--ph-cr-l); }
.ph-sec--dark .ph-kicker i { background: var(--ph-cr-l); }

.ph-h2 {
  font-family: var(--ph-disp); font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem); line-height: 1.08;
  letter-spacing: -.035em; margin: 0 0 14px;
}
.ph-h2 em {
  font-family: var(--ph-serif); font-style: italic; font-weight: 400;
  color: var(--ph-cr); letter-spacing: -.02em;
}
/* The engine sets a global dark `h2 { color: var(--ink) }` that beats plain
   inheritance, so headings inside a dark panel rendered ink-on-ink (1:1 —
   literally invisible). State both directions explicitly. */
.ph-h2, .ph-cap h3, .ph-train h3, .ph-oemc h3, .ph-feat h4 { color: var(--ph-ink); }
.ph-sec--dark .ph-h2,
.ph-sec--dark h2, .ph-sec--dark h3, .ph-sec--dark h4 { color: #ffffff; }
.ph-sec--dark .ph-h2 em { color: var(--ph-cr-l); }
/* the CoA + register cards sit ON the dark section but are light cards */
.ph-sec--dark .ph-coa td, .ph-sec--dark .ph-coa th,
.ph-sec--dark .ph-panel b, .ph-sec--dark .ph-panel__meta b { color: var(--ph-ink); }
.ph-sec--dark .ph-panel__ft b.ok { color: var(--ph-ok); }
.ph-sec--dark .ph-coa td.hi { color: var(--ph-cr); }
.ph-sec--dark .ph-coa td.tick { color: var(--ph-ok); }
.ph-sub { color: var(--ph-steel); font-size: 1.02rem; line-height: 1.65; max-width: 62ch; margin: 0; }
.ph-sec--dark .ph-sub { color: #c8b8b9; }

.ph-head { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: clamp(20px,4vw,64px); align-items: end; margin-bottom: clamp(28px,4vw,52px); }
@media (max-width: 900px) { .ph-head { grid-template-columns: 1fr; gap: 14px; align-items: start; } }

/* ── 01 capabilities ──────────────────────────────────────────────── */
.ph-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ph-line); border: 1px solid var(--ph-line); border-radius: 4px; overflow: hidden; }
@media (max-width: 1000px) { .ph-caps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ph-caps { grid-template-columns: 1fr; } }
.ph-cap { background: var(--ph-white); padding: clamp(20px,2.4vw,32px); position: relative; transition: background .4s; }
.ph-cap::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ph-cr); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ph-ez); }
.ph-cap:hover { background: var(--ph-paper-2); }
.ph-cap:hover::after { transform: scaleX(1); }
.ph-cap__n { font-family: var(--ph-mono); font-size: .62rem; color: var(--ph-mist); position: absolute; top: clamp(20px,2.4vw,32px); right: clamp(20px,2.4vw,32px); }
.ph-cap svg { width: 34px; height: 34px; fill: none; stroke: var(--ph-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; transition: stroke .4s; }
.ph-cap:hover svg { stroke: var(--ph-cr); }
.ph-cap h3 { font-family: var(--ph-disp); font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 9px; }
.ph-cap p { color: var(--ph-steel); font-size: .92rem; line-height: 1.6; margin: 0; }
.ph-cap ul { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ph-line); display: grid; gap: 6px; }
.ph-cap li { font-family: var(--ph-mono); font-size: .6rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ph-steel); display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.ph-cap li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--ph-cr); flex: none; margin-top: .45em; }

/* ── 02 analytical release panel (chromatogram) ───────────────────── */
.ph-qwrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(20px,3vw,40px); align-items: start; }
@media (max-width: 1000px) { .ph-qwrap { grid-template-columns: 1fr; } }

.ph-panel { background: var(--ph-white); border: 1px solid var(--ph-line); border-radius: 4px; overflow: hidden; box-shadow: 0 20px 54px rgba(0,0,0,.34); color: var(--ph-ink); }
.ph-panel__hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 18px; background: var(--ph-ink); }
.ph-panel__hd span { font-family: var(--ph-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: #c8b8b9; }
.ph-tag-pass { background: var(--ph-ok); color: #fff !important; padding: 4px 9px; border-radius: 2px; font-size: .56rem !important; font-weight: 600; }
.ph-panel__meta { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--ph-line); }
.ph-panel__meta > div { padding: 12px 18px; border-right: 1px solid var(--ph-line); }
.ph-panel__meta > div:last-child { border-right: 0; }
.ph-panel__meta span { display: block; font-family: var(--ph-mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ph-mist); margin-bottom: 5px; }
.ph-panel__meta b { font-family: var(--ph-sans); font-size: .86rem; font-weight: 700; letter-spacing: -.01em; }
@media (max-width: 460px) { .ph-panel__meta { grid-template-columns: 1fr 1fr; } .ph-panel__meta > div:nth-child(2) { border-right: 0; } }

.ph-chrom { padding: 16px 18px 6px; background: linear-gradient(180deg, var(--ph-paper-2), var(--ph-white)); }
.ph-chrom svg { width: 100%; height: clamp(130px, 16vw, 180px); display: block; }
.ph-chrom .g line { stroke: var(--ph-line); stroke-width: 1; stroke-dasharray: 3 4; }
.ph-chrom .trace { fill: none; stroke: var(--ph-cr); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ph-chrom .fill { fill: rgba(204,38,49,.10); }
.ph-chrom .mark line { stroke: var(--ph-line-2); stroke-width: 1; stroke-dasharray: 2 3; }
.ph-chrom .mark rect { fill: var(--ph-white); stroke: var(--ph-line); stroke-width: 1; }
.ph-chrom .mark text { font-family: var(--ph-mono); font-size: 8.6px; font-weight: 500; fill: var(--ph-slate); }
.ph-chrom__ax { display: flex; justify-content: space-between; font-family: var(--ph-mono); font-size: .55rem; letter-spacing: .08em; color: var(--ph-mist); border-top: 1px solid var(--ph-line); padding: 8px 2px 10px; }

.ph-panel__ft { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--ph-line); }
.ph-panel__ft > div { padding: 13px 18px; border-right: 1px solid var(--ph-line); }
.ph-panel__ft > div:last-child { border-right: 0; }
.ph-panel__ft span { display: block; font-family: var(--ph-mono); font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ph-mist); margin-bottom: 6px; }
.ph-panel__ft b { font-family: var(--ph-disp); font-size: clamp(1rem,1.5vw,1.3rem); font-weight: 800; letter-spacing: -.03em; }
.ph-panel__ft b.ok { color: var(--ph-ok); }
.ph-panel__note { font-family: var(--ph-mono); font-size: .55rem; letter-spacing: .07em; color: #a8999a; text-align: right; margin: 10px 0 0; }

/* ── certificate of analysis ──────────────────────────────────────── */
.ph-coa { background: var(--ph-white); color: var(--ph-ink); border-radius: 4px; overflow: hidden; position: relative; box-shadow: 0 20px 54px rgba(0,0,0,.34); }
.ph-coa::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--ph-cr), var(--ph-cr-d)); }
.ph-coa__hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 20px clamp(16px,2vw,24px) 14px; border-bottom: 1px solid var(--ph-line); }
.ph-coa__hd img { height: 14px; width: auto; margin-bottom: 9px; display: block; }
.ph-coa__hd p { font-family: var(--ph-mono); font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ph-steel); margin: 0; }
.ph-stamp { border: 2px solid var(--ph-ok); color: var(--ph-ok); border-radius: 3px; padding: 5px 12px; font-family: var(--ph-mono); font-size: .64rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; transform: rotate(-4deg); flex: none; }
.ph-coa__meta { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--ph-line); margin: 0; }
.ph-coa__meta > div { padding: 10px clamp(16px,2vw,24px); border-right: 1px solid var(--ph-line); border-bottom: 1px solid var(--ph-line); }
.ph-coa__meta > div:nth-child(3n) { border-right: 0; }
.ph-coa__meta > div:nth-last-child(-n+3) { border-bottom: 0; }
.ph-coa__meta dt { font-family: var(--ph-mono); font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ph-mist); margin-bottom: 4px; }
.ph-coa__meta dd { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: -.012em; }
@media (max-width: 640px) { .ph-coa__meta { grid-template-columns: repeat(2,1fr); } .ph-coa__meta > div:nth-child(3n) { border-right: 1px solid var(--ph-line); } .ph-coa__meta > div:nth-child(2n) { border-right: 0; } }
.ph-coa table { width: 100%; border-collapse: collapse; }
.ph-coa th { text-align: left; padding: 9px clamp(16px,2vw,24px); background: var(--ph-paper); font-family: var(--ph-mono); font-size: .52rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ph-steel); }
.ph-coa td { padding: 8px clamp(16px,2vw,24px); border-bottom: 1px solid var(--ph-line); font-size: .8rem; }
.ph-coa td:first-child { font-weight: 700; letter-spacing: -.015em; }
.ph-coa td.m { font-family: var(--ph-mono); font-size: .68rem; color: var(--ph-slate); }
.ph-coa td.hi { color: var(--ph-cr); font-weight: 700; }
.ph-coa td.tick { color: var(--ph-ok); font-weight: 700; text-align: center; width: 34px; }
.ph-coa__sig { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; padding: 12px clamp(16px,2vw,24px); background: var(--ph-paper-2); font-family: var(--ph-mono); font-size: .52rem; letter-spacing: .09em; color: #a8999a; margin: 0; }
@media (max-width: 560px) { .ph-coa th:nth-child(2), .ph-coa td:nth-child(2) { display: none; } }

/* ── stats + bars ─────────────────────────────────────────────────── */
.ph-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--ph-line-d); border: 1px solid var(--ph-line-d); margin-bottom: clamp(16px,2vw,24px); }
@media (max-width: 520px) { .ph-stats { grid-template-columns: 1fr; } }
.ph-stat { background: var(--ph-ink); padding: clamp(16px,2vw,24px); }
.ph-stat b { display: block; font-family: var(--ph-disp); font-size: clamp(1.6rem,3.2vw,2.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #fff; }
.ph-stat span { display: block; margin-top: 10px; font-family: var(--ph-mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: #c8b8b9; line-height: 1.55; }

.ph-bars, .ph-meth { border: 1px solid var(--ph-line-d); padding: clamp(18px,2.2vw,26px); }
.ph-lbl { font-family: var(--ph-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ph-cr-l); margin: 0 0 16px; }
.ph-bar { display: grid; grid-template-columns: 136px 1fr 44px; gap: 12px; align-items: center; padding: 8px 0; }
.ph-bar span { font-family: var(--ph-mono); font-size: .57rem; letter-spacing: .07em; color: #c8b8b9; }
.ph-bar i { display: block; height: 7px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; border-radius: 1px; }
.ph-bar i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: linear-gradient(90deg, var(--ph-cr-d), #e8656e); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ph-ez); }
.ph-bar i.rej::after { background: linear-gradient(90deg,#5b4647,#7d6465); }
.ph-bars.in .ph-bar i::after { transform: scaleX(1); }
.ph-bars.in .ph-bar:nth-child(3) i::after { transition-delay: .08s; }
.ph-bars.in .ph-bar:nth-child(4) i::after { transition-delay: .16s; }
.ph-bars.in .ph-bar:nth-child(5) i::after { transition-delay: .24s; }
.ph-bar em { font-style: normal; text-align: right; font-family: var(--ph-mono); font-size: .62rem; color: #fff; }
@media (max-width: 560px) { .ph-bar { grid-template-columns: 108px 1fr 40px; gap: 9px; } }

.ph-meth { margin-top: clamp(16px,2vw,24px); }
.ph-meth ul { list-style: none; margin: 0; padding: 0; }
.ph-meth li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding: 10px 0; border-bottom: 1px solid var(--ph-line-d); }
.ph-meth li b { font-size: .89rem; font-weight: 700; letter-spacing: -.015em; color: #fff; }
.ph-meth li span { font-family: var(--ph-mono); font-size: .56rem; letter-spacing: .07em; color: #c8b8b9; text-align: right; }
.ph-meth__fine { margin: 18px 0 0; padding-left: 14px; border-left: 2px solid var(--ph-cr); color: #c8b8b9; font-size: .83rem; line-height: 1.65; }

/* ── product register ─────────────────────────────────────────────── */
.ph-reg { background: var(--ph-white); border: 1px solid var(--ph-line); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 4px rgba(32,19,20,.04), 0 10px 26px rgba(32,19,20,.07); }
.ph-reg__bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--ph-line); }
.ph-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-chip { background: transparent; border: 1px solid var(--ph-line-2); border-radius: 100px; padding: 7px 14px; font-family: var(--ph-sans); font-size: .76rem; font-weight: 600; color: var(--ph-steel); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: .28s var(--ph-ez); }
.ph-chip:hover { border-color: var(--ph-ink); color: var(--ph-ink); }
.ph-chip.on { background: var(--ph-ink); border-color: var(--ph-ink); color: #fff; }
.ph-search { position: relative; display: flex; align-items: center; flex: 0 1 300px; min-width: min(260px,100%); }
.ph-search svg { position: absolute; left: 11px; width: 15px; height: 15px; fill: none; stroke: var(--ph-mist); stroke-width: 1.7; stroke-linecap: round; }
.ph-search input { width: 100%; padding: 10px 12px 10px 34px; border: 1px solid var(--ph-line-2); border-radius: 2px; font-family: var(--ph-sans); font-size: .84rem; background: var(--ph-paper-2); color: var(--ph-ink); outline: none; transition: .28s; }
.ph-search input:focus { border-color: var(--ph-cr); background: var(--ph-white); box-shadow: 0 0 0 3px rgba(204,38,49,.10); }
.ph-reg__scroll { overflow-x: auto; max-height: min(520px, 70vh); overflow-y: auto; }
.ph-reg table { width: 100%; border-collapse: collapse; min-width: 760px; }
.ph-reg th { position: sticky; top: 0; z-index: 2; background: var(--ph-paper); text-align: left; padding: 11px 16px; font-family: var(--ph-mono); font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ph-steel); border-bottom: 1px solid var(--ph-line-2); white-space: nowrap; }
.ph-reg th[data-sort] { cursor: pointer; user-select: none; }
.ph-reg th[data-sort]:hover { color: var(--ph-cr); }
.ph-reg th[data-sort]::after { content: '⇅'; margin-left: 6px; opacity: .35; }
.ph-reg th.asc::after  { content: '↑'; opacity: 1; color: var(--ph-cr); }
.ph-reg th.desc::after { content: '↓'; opacity: 1; color: var(--ph-cr); }
.ph-reg td { padding: 11px 16px; border-bottom: 1px solid var(--ph-line); font-size: .85rem; white-space: nowrap; }
.ph-reg tbody tr { transition: background .2s; }
.ph-reg tbody tr:hover { background: rgba(204,38,49,.05); }
/* the engine styles every <a> red + underlined; the register's name cell is a
   link but must read as table text until hovered */
.ph-reg a.nm { display: block; color: var(--ph-ink); text-decoration: none; font-weight: 700; letter-spacing: -.016em; }
.ph-reg a.nm:hover { color: var(--ph-cr); text-decoration: none; }
.ph-reg a.nm small { display: block; font-weight: 400; font-size: .68rem; color: var(--ph-mist); margin-top: 2px; letter-spacing: 0; text-decoration: none; }
.ph-reg a.nm:hover small { color: var(--ph-mist); }
/* column budget — without this the nowrap name cell eats the row and pushes
   Price + Availability out of view */
.ph-reg th:nth-child(1), .ph-reg td:nth-child(1) { width: 42%; white-space: normal; }
.ph-reg th:nth-child(2), .ph-reg td:nth-child(2) { width: 12%; }
.ph-reg th:nth-child(3), .ph-reg td:nth-child(3) { width: 20%; }
.ph-reg th:nth-child(4), .ph-reg td:nth-child(4) { width: 12%; }
.ph-reg th:nth-child(5), .ph-reg td:nth-child(5) { width: 14%; }
.ph-reg .m { font-family: var(--ph-mono); font-size: .72rem; color: var(--ph-slate); }
.ph-reg .num { text-align: right; }
.ph-pill { display: inline-block; padding: 3px 8px; border: 1px solid var(--ph-line-2); border-radius: 2px; font-family: var(--ph-mono); font-size: .55rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ph-steel); }
.ph-av { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ph-mono); font-size: .58rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ph-ok); }
.ph-av::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ph-ok); }
.ph-reg__ft { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--ph-line); background: var(--ph-paper-2); font-family: var(--ph-mono); font-size: .58rem; letter-spacing: .08em; color: var(--ph-steel); }
.ph-reg__ft a { color: var(--ph-cr); text-decoration: none; border-bottom: 1px solid transparent; }
.ph-reg__ft a:hover { border-color: var(--ph-cr); }
.ph-empty { padding: 34px 16px; text-align: center; color: var(--ph-mist); }

/* ── facility schematic ───────────────────────────────────────────── */
.ph-mwrap { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: clamp(20px,3vw,44px); align-items: start; }
@media (max-width: 1000px) { .ph-mwrap { grid-template-columns: 1fr; } }
.ph-plan { border: 1px solid var(--ph-line); background: var(--ph-paper-2); padding: clamp(14px,2vw,22px); border-radius: 4px; }
.ph-plan svg { width: 100%; height: auto; display: block; }
.ph-plan rect { fill: var(--ph-white); stroke: var(--ph-line-2); stroke-width: 1; transition: fill .32s, stroke .32s; }
.ph-plan text { font-family: var(--ph-mono); font-size: 7.6px; letter-spacing: .12em; fill: var(--ph-steel); transition: fill .32s; }
.ph-plan text.s { font-size: 6.2px; fill: var(--ph-mist); }
.ph-zone { cursor: pointer; outline: none; }
.ph-zone:hover rect, .ph-zone.on rect, .ph-zone:focus-visible rect { fill: rgba(204,38,49,.09); stroke: var(--ph-cr); stroke-width: 1.6; }
.ph-zone:hover text, .ph-zone.on text, .ph-zone:focus-visible text { fill: var(--ph-cr); }
.ph-plan__out { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--ph-line); font-family: var(--ph-mono); font-size: .66rem; letter-spacing: .05em; color: var(--ph-slate); line-height: 1.6; min-height: 3.2em; }

.ph-spec { border-top: 1px solid var(--ph-line); margin: 0; }
.ph-spec > div { display: grid; grid-template-columns: 168px 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--ph-line); align-items: baseline; }
.ph-spec dt { font-family: var(--ph-mono); font-size: .57rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ph-mist); }
.ph-spec dd { margin: 0; font-size: .92rem; }
@media (max-width: 560px) { .ph-spec > div { grid-template-columns: 1fr; gap: 4px; } }

/* ── process train ────────────────────────────────────────────────── */
.ph-train { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--ph-line); border: 1px solid var(--ph-line); position: relative; border-radius: 4px; overflow: hidden; }
.ph-train li { background: var(--ph-white); padding: clamp(18px,2.2vw,28px); }
.ph-train li > span { display: block; font-family: var(--ph-mono); font-size: .57rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ph-cr); margin-bottom: 38px; }
.ph-train h3 { font-family: var(--ph-disp); font-size: 1rem; font-weight: 700; letter-spacing: -.022em; margin: 0 0 7px; }
.ph-train p { color: var(--ph-steel); font-size: .85rem; line-height: 1.56; margin: 0; }
.ph-train__line { position: absolute; left: 0; right: 0; top: calc(clamp(18px,2.2vw,28px) + 30px); height: 1px; background: linear-gradient(90deg, var(--ph-line-2), var(--ph-line-2) 72%, transparent); pointer-events: none; padding: 0 !important; }
.ph-train__line i { position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--ph-cr); box-shadow: 0 0 0 4px rgba(204,38,49,.16); animation: phFlow 6s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes phFlow { 0% { left: 0; opacity: 0 } 6% { opacity: 1 } 94% { opacity: 1 } 100% { left: 100%; opacity: 0 } }
@media (max-width: 1000px) { .ph-train { grid-template-columns: repeat(2,1fr); } .ph-train li > span { margin-bottom: 12px; } .ph-train__line { display: none; } }
@media (max-width: 600px)  { .ph-train { grid-template-columns: 1fr; } }

/* ── OEM ──────────────────────────────────────────────────────────── */
.ph-oem { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: clamp(20px,3vw,44px); align-items: start; }
@media (max-width: 1000px) { .ph-oem { grid-template-columns: 1fr; } }
.ph-oem__l { display: grid; gap: 1px; background: var(--ph-line); border: 1px solid var(--ph-line); border-radius: 4px; overflow: hidden; }
.ph-oemc { background: var(--ph-white); padding: clamp(18px,2.2vw,28px); display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; transition: background .35s; }
.ph-oemc:hover { background: var(--ph-paper); }
.ph-oemc > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--ph-line-2); border-radius: 50%; font-family: var(--ph-mono); font-size: .72rem; font-weight: 700; color: var(--ph-cr); transition: .35s var(--ph-ez); }
.ph-oemc:hover > span { background: var(--ph-cr); border-color: var(--ph-cr); color: #fff; }
.ph-oemc h3 { font-family: var(--ph-disp); font-size: 1rem; font-weight: 700; letter-spacing: -.022em; margin: 0 0 6px; }
.ph-oemc p { color: var(--ph-steel); font-size: .9rem; line-height: 1.6; margin: 0; }
@media (max-width: 520px) { .ph-oemc { grid-template-columns: 1fr; gap: 12px; } }
.ph-oem__r { background: var(--ph-white); border: 1px solid var(--ph-line); border-radius: 4px; padding: clamp(18px,2.4vw,30px); }
.ph-oem__r .ph-lbl { color: var(--ph-cr); }
.ph-terms { margin: 0 0 20px; }
.ph-terms > div { padding: 12px 0; border-bottom: 1px solid var(--ph-line); }
.ph-terms dt { font-size: .87rem; font-weight: 700; letter-spacing: -.018em; margin-bottom: 3px; }
.ph-terms dd { margin: 0; color: var(--ph-steel); font-size: .85rem; line-height: 1.55; }

/* ── supply board ─────────────────────────────────────────────────── */
.ph-board { border: 1px solid var(--ph-line); background: var(--ph-white); border-radius: 4px; overflow: hidden; }
.ph-board__hd, .ph-board__r { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) 170px; gap: 14px; padding: 13px clamp(14px,2vw,22px); align-items: center; }
.ph-board__hd { background: var(--ph-ink); }
.ph-board__hd span { font-family: var(--ph-mono); font-size: .55rem; letter-spacing: .11em; text-transform: uppercase; color: #c8b8b9; }
.ph-board__r { border-bottom: 1px solid var(--ph-line); transition: background .22s; }
.ph-board__r:last-child { border-bottom: 0; }
.ph-board__r:hover { background: var(--ph-paper-2); }
.ph-board__r > span:first-child { font-size: .92rem; font-weight: 700; letter-spacing: -.018em; }
.ph-board__r .m { font-family: var(--ph-mono); font-size: .68rem; color: var(--ph-steel); }
.ph-st { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ph-mono); font-size: .57rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ph-steel); }
.ph-st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ph-line-2); flex: none; }
.ph-st.ok { color: var(--ph-ok); }
.ph-st.ok::before { background: var(--ph-ok); }
@media (max-width: 860px) {
  .ph-board__hd { display: none; }
  .ph-board__r { grid-template-columns: 1fr auto; gap: 5px 12px; padding-top: 15px; padding-bottom: 15px; }
  .ph-board__r > span:first-child { grid-column: 1/-1; margin-bottom: 2px; }
}
.ph-feat { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--ph-line); border: 1px solid var(--ph-line); border-top: 0; margin-top: -1px; }
@media (max-width: 900px) { .ph-feat { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .ph-feat { grid-template-columns: 1fr; } }
.ph-feat > div { background: var(--ph-white); padding: clamp(16px,2vw,26px); }
.ph-feat svg { width: 23px; height: 23px; fill: none; stroke: var(--ph-cr); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.ph-feat h4 { font-family: var(--ph-disp); font-size: .93rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
.ph-feat p { color: var(--ph-steel); font-size: .83rem; line-height: 1.55; margin: 0; }

/* ── reveal ───────────────────────────────────────────────────────── */
.ph-rv { opacity: 0; transform: translateY(18px); transition: opacity .75s var(--ph-ez), transform .75s var(--ph-ez); transition-delay: var(--d, 0s); }
.ph-rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ph-rv { opacity: 1; transform: none; transition: none; }
  .ph-train__line i { animation: none; }
  .ph-bar i::after { transform: scaleX(1); }
  .ph * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── real brand wordmark in the header/footer ─────────────────────────
   The scaffolder generated a square "SSA" emblem; the real Sigma-Audley logo is
   a wide crimson wordmark, so it needs natural aspect ratio, no square frame,
   and none of the engine's logo chrome (border/background/padding) which drew a
   visible box around it. The English-only cut is used at header size — the full
   lockup's 西格玛·奥德利 line is illegible below ~200px wide. */
.logo-img.logo-wordmark {
  width: auto !important;
  height: 34px !important;
  max-width: 210px;
  object-fit: contain;
  display: block;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.footer-logo-img.logo-wordmark {
  width: auto !important; height: 30px !important; max-width: 230px;
  object-fit: contain; background: none !important; border: 0 !important;
  border-radius: 0 !important; padding: 0 !important;
}
@media (max-width: 640px) { .logo-img.logo-wordmark { height: 27px !important; max-width: 160px; } }
.logo { gap: 10px; }

/* Header fit — the legal-name subtitle is DROPPED, at every width.
   `.container` is capped at max-width:1200px, so the header never gets more
   room than that. Measured intrinsic widths against the cap:
       wordmark 210 + subtitle 333 + nav 674 + actions 212 + 3x16 gap = 1477
   — 277px over budget at ANY viewport size. That overflow made the subtitle
   paint across "Home/Products" and pushed "Test Reports / Verified On" over
   the warehouse button. Dropping it brings the header to 1128px (~72px spare).
   Nothing is lost: the wordmark already reads "Sigma−Audley", and the full
   legal name remains the logo img's alt text (so screen readers and crawlers
   keep it), plus it is on /about and in the footer.
   This rule lives here because pharma.css loads LAST — in global.css it would
   be overridden by the `.logo-text { display: flex }` this block used to set. */
.logo-text { display: none; }

/* Nav spacing — sized against the WIDEST warehouse label, then nudged left.
   The warehouse button is 86px on "China" but 140px on "United States", and CSS
   cannot respond to which one is set, so the nav has to fit the worst case
   unconditionally. Measured budget inside the 1136px .container content box:

     avail 1136 - wordmark 210 - actions 266 ("United States") = 660 for nav+gaps
     nav intrinsic was 674 (links 646 + 7x4px gap) + 32px header gaps = 706
       -> 46px over with "United States", and still 4px over with "China"
          (the "China" overflow was invisible, which is why it read as fine)

   Shrinking .nav-link padding 11px -> 7px saves 8x8 = 64px and the inter-link
   gap 4px -> 3px saves 7px, giving nav 603px. With the 16px header gaps plus a
   12px right margin that totals 1123px — fits with ~13px slack, and the margin
   buys the trailing "Verified On" a 28px gap from the warehouse button instead
   of colliding with it.
   NB: measure the LAST LINK's right edge, not .nav-desktop's — .nav-links
   overflows its own box when compressed, so the box edge reports a gap that
   isn't there. That false negative hid this overlap twice. */
.nav-links { gap: 3px; }
.nav-desktop .nav-link { padding-left: 7px; padding-right: 7px; }
/* keep the active-underline inset aligned with the new padding (it was pinned
   to var(--space-3) = 12px, which would now sit inside the text) */
.nav-desktop .nav-link::after { left: 7px; right: 7px; }
.nav-desktop { margin-right: 12px; }