/* Avenorix v2 — fictional industrial procurement demo.
   Visual-direction tokens take precedence over the generic UIUX palette. */
:root {
  --ink:#08121C; --canvas:#0D1B29; --panel:#172A39; --steel-line:#365163;
  --text:#F7FBFF; --body:#BCCCD8; --muted:#9AAFC0;
  --cyan:#54E3F5; --cyan-deep:#0C6477; --amber:#FFBE79;
  --paper:#ECF2F6; --paper-ink:#102330; --error:#FF8F94;
  --hero-gradient:linear-gradient(90deg,rgba(8,18,28,.94) 0%,rgba(8,18,28,.78) 38%,rgba(8,18,28,.18) 72%,rgba(8,18,28,.36) 100%);
  --machine-light:radial-gradient(ellipse at 72% 42%,rgba(84,227,245,.18),transparent 48%);
  --amber-temper:radial-gradient(circle at 86% 80%,rgba(255,190,121,.10),transparent 32%);
  --section-transition:linear-gradient(180deg,#08121C 0%,#0D1B29 68%,#172A39 100%);
  --cta-fill:linear-gradient(115deg,#54E3F5 0%,#91EEF6 100%);
  --shadow-depth:0 28px 80px rgba(0,0,0,.34);
  --shadow-lift:0 18px 48px rgba(0,0,0,.24);
  --glow:0 0 0 1px rgba(84,227,245,.32),0 0 30px rgba(84,227,245,.16);
  --container:min(calc(100% - 2 * clamp(20px,4vw,72px)),1440px);
  --header-height:76px;
  --font-display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --font-body:'IBM Plex Sans',Arial,sans-serif;
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-padding-top:calc(var(--header-height) + 20px)}
body {margin:0;min-width:320px;background:var(--ink);color:var(--text);font:400 clamp(1rem,1.1vw,1.125rem)/1.65 var(--font-body);-webkit-font-smoothing:antialiased}
body.menu-open {overflow:hidden}
a {color:inherit;text-underline-offset:.22em}
a:hover {text-decoration-color:var(--cyan)}
button,input,select,textarea {font:inherit}
button {cursor:pointer}
a,button,input,select,textarea {touch-action:manipulation}
button:disabled {cursor:not-allowed}
:focus-visible {outline:3px solid var(--amber)!important;outline-offset:3px}
::selection {background:var(--cyan);color:var(--ink)}
img {display:block;max-width:100%;color:transparent;font-size:0}
svg {display:block}
h1,h2,h3,h4,p,figure {margin:0}
h1,h2,h3 {font-family:var(--font-display);font-weight:700;letter-spacing:-.025em}
h1 {font-size:clamp(4rem,8vw,8rem);line-height:.92}
h2 {font-size:clamp(2.7rem,5vw,5.5rem);line-height:1}
h3 {font-size:clamp(1.45rem,2.3vw,2.2rem);line-height:1.1}
p {max-width:66ch}
ul,ol {margin:0;padding:0}
[hidden] {display:none!important}
.container {width:var(--container);margin-inline:auto}
.section {padding-block:clamp(64px,8vw,136px)}
.section-lead {max-width:64ch;margin-top:24px;color:var(--body)}
.eyebrow {font-size:.875rem;font-weight:600;line-height:1.5;letter-spacing:.035em;color:var(--cyan)}
.section-topline {display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:40px}
.section-topline p {color:var(--body);max-width:42ch}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link {position:fixed;top:8px;left:12px;z-index:1000;background:var(--amber);color:var(--ink);padding:10px 16px;border-radius:6px;transform:translateY(-150%)}
.skip-link:focus {transform:translateY(0)}
/* Consistent image placeholders: the gradients are visible when JPGs are absent. */
.media-shell {position:relative;overflow:hidden;isolation:isolate;background:var(--machine-light),var(--amber-temper),repeating-linear-gradient(135deg,transparent 0 35px,rgba(247,251,255,.028) 36px 37px),linear-gradient(125deg,#264759 0%,#102432 46%,#07121B 100%)}
.media-shell::after {content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,transparent 37%,rgba(8,18,28,.78) 100%)}
.media-shell>img {width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:0}
.media-shell>img.is-missing {visibility:hidden}
/* Header and navigation */
.site-header {height:var(--header-height);position:fixed;inset:0 0 auto;z-index:100;background:rgba(13,27,41,.91);border-bottom:1px solid rgba(247,251,255,.13);box-shadow:0 12px 36px rgba(0,0,0,.12);transition:background .18s ease,box-shadow .18s ease}
@supports (backdrop-filter:blur(16px)) {.site-header {background:rgba(13,27,41,.74);backdrop-filter:blur(16px) saturate(135%)} .site-header.is-scrolled {background:rgba(13,27,41,.94)}}
.site-header.is-scrolled {box-shadow:0 12px 36px rgba(0,0,0,.24)}
.header-inner {width:var(--container);height:100%;margin:auto;display:flex;align-items:center;gap:clamp(14px,2.3vw,36px)}
.brand {display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.brand-mark {width:37px;height:37px;flex:none;color:var(--cyan)}
.brand-name {font:700 clamp(1.55rem,2.15vw,2rem)/1 var(--font-display);letter-spacing:.075em;color:var(--text)}
.demo-tag {display:inline-flex;align-items:center;align-self:center;border:1px solid rgba(255,190,121,.58);color:#FFE0BB;background:rgba(8,18,28,.75);border-radius:4px;padding:3px 7px;font-size:.75rem;line-height:1.25;white-space:nowrap;font-weight:600}
.site-nav {margin-left:auto}
.nav-list {display:flex;align-items:center;gap:clamp(13px,2vw,32px);list-style:none}
.nav-link {position:relative;text-decoration:none;color:var(--text);font-size:.91rem;font-weight:500;padding:23px 0;display:inline-block;white-space:nowrap}
.nav-link::after {position:absolute;content:'';bottom:15px;left:0;right:0;height:2px;transform:scaleX(0);transform-origin:left;background:var(--cyan);transition:transform .18s ease}
.nav-link:hover::after,.nav-link:focus-visible::after,.nav-link[aria-current='page']::after {transform:scaleX(1)}
.header-actions {display:flex;align-items:center;gap:10px;flex-shrink:0}
.button {min-height:48px;padding:10px 20px;display:inline-flex;align-items:center;justify-content:center;gap:14px;position:relative;text-align:center;text-decoration:none;font-size:.94rem;line-height:1.25;font-weight:600;white-space:nowrap;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease}
.button:hover {transform:translateY(-2px)}
.button .button-inner {display:inline-flex;align-items:center;gap:12px;pointer-events:none;will-change:auto}
.button .button-arrow {width:18px;height:18px;display:grid;place-items:center;flex:none;transition:transform .2s ease}
.button:hover .button-arrow,.button:focus-visible .button-arrow {transform:translateX(3px)}
.button svg {width:18px;height:18px}
.button-primary {border:1px solid #85EDF6;border-radius:999px;color:var(--ink);background:var(--cta-fill);box-shadow:inset 0 1px rgba(255,255,255,.65),0 10px 32px rgba(84,227,245,.13)}
.button-primary:hover {box-shadow:var(--glow)}
.button-outline {border:1px solid #97B0C0;border-radius:12px;color:var(--text);background:rgba(8,18,28,.38);box-shadow:inset 0 1px rgba(255,255,255,.09)}
.button-outline:hover {background:rgba(84,227,245,.1);border-color:var(--cyan)}
.button-dark {background:var(--ink);border:1px solid var(--ink);color:var(--text);border-radius:999px}
.button-dark:hover {background:#173348}
.header-actions .button {font-size:.84rem;min-height:44px;padding:8px 15px}
.menu-trigger,.menu-close,.mobile-nav-cta,.menu-backdrop {display:none}
/* Hero */
.hero {min-height:min(900px,100svh);min-height:max(680px,min(900px,100svh));position:relative;display:flex;align-items:center;overflow:hidden;padding-block:calc(var(--header-height) + 84px) 100px;isolation:isolate;background:var(--ink)}
.hero-media {position:absolute;inset:0;z-index:-2;background:var(--machine-light),var(--amber-temper),repeating-linear-gradient(145deg,transparent 0 78px,rgba(188,204,216,.055) 79px 80px),linear-gradient(100deg,#08121C 0%,#19394A 75%,#112433 100%)}
.hero-media img {width:100%;height:100%;object-fit:cover;object-position:center}
.hero-media img.is-missing {visibility:hidden}
.hero-media::after {content:'';position:absolute;inset:0;background:var(--hero-gradient)}
.hero-lines {position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.32;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),rgba(188,204,216,.12) 12.5%)}
.hero-content {position:relative;z-index:2}
.hero-copy {width:min(700px,59%)}
.hero-kicker {color:var(--cyan);font-size:.94rem;font-weight:600;margin-bottom:20px}
.hero-line {display:block;overflow:hidden;padding-block:.05em}
.hero-line-inner {display:block}
.hero-description {color:#E5F0F6;max-width:49ch;margin-top:28px;font-size:clamp(1.1rem,1.45vw,1.3rem);line-height:1.6}
.hero-ctas {display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-disclaimer {color:#E0EBF2;font-size:.875rem;line-height:1.5;margin-top:24px;border-left:2px solid var(--amber);padding-left:13px}
.hero-sweep {position:absolute;z-index:1;pointer-events:none;inset:0 auto 0 36%;width:23%;opacity:0;transform:skewX(-19deg) translateX(-130%);background:linear-gradient(90deg,transparent,rgba(84,227,245,.22) 48%,transparent);mix-blend-mode:screen}
.hero-orbit {position:absolute;right:clamp(20px,5vw,88px);bottom:65px;width:clamp(200px,23vw,345px);z-index:2;transform-style:preserve-3d;pointer-events:auto}
.hero-orbit::before {content:'';position:absolute;inset:-12px;border:1px solid rgba(84,227,245,.65);border-radius:50%;transform:rotate(-24deg) scaleX(1.13);box-shadow:0 0 45px rgba(84,227,245,.08)}
.hero-orbit-frame {position:relative;aspect-ratio:1;overflow:hidden;border:1px solid rgba(84,227,245,.36);border-radius:50%;box-shadow:var(--shadow-depth);background:radial-gradient(circle at 55% 35%,#496A76,#101F2D 67%,#08121C)}
.hero-orbit-frame img {width:100%;height:100%;object-fit:cover}
.hero-orbit-caption {position:absolute;right:-8px;bottom:-10px;background:rgba(23,42,57,.93);border:1px solid rgba(84,227,245,.4);padding:7px 12px;border-radius:8px;font-size:.76rem;line-height:1.3;color:var(--text)}
.hero-scroll-note {position:absolute;left:max(clamp(20px,4vw,72px),calc((100vw - 1440px)/2));bottom:25px;display:flex;align-items:center;gap:10px;color:#E0EBF2;font-size:.8rem}
.hero-scroll-note::before {content:'';height:29px;width:1px;background:var(--cyan)}
/* Buyer route */
.buyer-strip {border-block:1px solid var(--steel-line);background:#10212D}
.buyer-steps {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none}
.buyer-steps li {min-width:0}
.buyer-steps a {min-height:108px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;padding:18px clamp(10px,2.3vw,36px);font-weight:600}
.buyer-steps li+li {border-left:1px solid var(--steel-line)}
.buyer-steps .step-num {font-variant-numeric:tabular-nums;color:var(--cyan);font-size:.8rem;margin-right:8px}
.buyer-steps .step-line {height:2px;background:var(--steel-line);width:26px;flex-shrink:0;position:relative}
.buyer-steps .step-line::after {content:'';position:absolute;inset:0;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.buyer-steps a:hover .step-line::after,.buyer-steps a:focus-visible .step-line::after {transform:scaleX(1)}
/* Category grid */
.categories-section {background:var(--section-transition)}
.category-grid {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(190px,15vw);gap:16px}
.category-card {position:relative;display:block;min-width:0;grid-column:span 4;grid-row:span 1;overflow:hidden;border-radius:18px;text-decoration:none;border:1px solid rgba(188,204,216,.23);background:#193445}
.category-card--large {grid-column:span 6;grid-row:span 2}
.category-card--wide {grid-column:span 6}
.category-card:nth-child(3),.category-card:nth-child(4) {grid-column:span 3}
.category-card:nth-child(2),.category-card:nth-child(6) {grid-column:span 6}
.category-card .media-shell {position:absolute;inset:0}
.category-card .media-shell::after {background:linear-gradient(180deg,rgba(8,18,28,.07) 0%,rgba(8,18,28,.9) 100%)}
.category-card .media-shell>img {transition:transform .28s ease}
.category-card:hover .media-shell>img,.category-card:focus-visible .media-shell>img {transform:scale(1.04)}
.category-card::after {position:absolute;inset:0;content:'';pointer-events:none;border:1px solid transparent;border-radius:inherit;transition:border-color .28s ease,box-shadow .28s ease}
.category-card:hover::after,.category-card:focus-visible::after {border-color:var(--cyan);box-shadow:inset 0 0 25px rgba(84,227,245,.15)}
.category-content {position:absolute;inset:auto 24px 24px;display:flex;justify-content:space-between;align-items:end;gap:14px;z-index:2}
.category-content h3 {font-size:clamp(1.7rem,2.7vw,2.75rem)}
.category-card--large .category-content h3 {font-size:clamp(2.9rem,4.7vw,5rem)}
.category-content small {color:#DEECF5;display:block;font-size:.84rem;margin-top:5px}
.category-arrow {min-width:44px;min-height:44px;border:1px solid rgba(247,251,255,.6);border-radius:50%;display:grid;place-items:center;transition:background .2s ease,transform .2s ease}
.category-card:hover .category-arrow,.category-card:focus-visible .category-arrow {background:var(--cyan);color:var(--ink);transform:rotate(-35deg)}
.category-arrow svg {width:18px;height:18px}
/* Sample product */
.spotlight {background:#0A1723;overflow:hidden}
.spotlight-grid {display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(40px,7vw,112px)}
.spotlight-photo {aspect-ratio:1.06;border-radius:24px;box-shadow:var(--shadow-depth);border:1px solid rgba(84,227,245,.26);transform:perspective(1100px) rotateX(0) rotateY(0)}
.spotlight-photo::before {content:'';position:absolute;inset:8% 8%;border:1px solid rgba(84,227,245,.14);border-radius:50%;z-index:1;pointer-events:none}
.spotlight-photo::after {background:radial-gradient(circle at center,transparent 52%,rgba(8,18,28,.45))}
.spotlight-meta {color:var(--cyan);font-size:.88rem;font-variant-numeric:tabular-nums;font-weight:600;margin-bottom:12px}
.spotlight h2 {max-width:10ch}
.spotlight-copy {color:var(--body);margin-block:22px}
.spec-list {margin:22px 0 28px;border-top:1px solid var(--steel-line)}
.spec-row {display:grid;grid-template-columns:40% 60%;gap:8px;padding:11px 0;border-bottom:1px solid var(--steel-line);font-size:.95rem}
.spec-row dt {color:var(--body)}
.spec-row dd {margin:0;color:var(--text);font-weight:600}
.spotlight-actions {display:flex;flex-wrap:wrap;gap:12px}
/* Story / process */
.process-section {background:var(--canvas)}
.process-intro {display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:46px}
.process-intro p {color:var(--body);align-self:end}
.process-progress {height:2px;background:var(--steel-line);margin-bottom:26px}
.process-progress__bar {height:100%;background:var(--cyan);transform-origin:left}
.process-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.process-item {min-width:0}
.process-item img {transition:transform .28s ease}
.process-item:hover img {transform:scale(1.02)}
.process-item .media-shell {aspect-ratio:1.26;border-radius:12px;margin-bottom:19px}
.process-item:nth-child(even) {padding-top:42px}
.process-item span {font-size:.82rem;color:var(--cyan);display:block;margin-bottom:9px}
.process-item p {margin-top:12px;color:var(--body);font-size:.96rem}
.process-item a {display:inline-block;margin-top:16px;color:var(--text);font-size:.9rem;font-weight:600}
/* Measured data: JS adds counts only after validating the dataset. */
.metrics-strip {background:var(--paper);color:var(--paper-ink);padding-block:38px}
.metrics-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.metric {padding:12px 38px;border-left:1px solid #AEC0CD}
.metric:first-child {border-left:0;padding-left:0}
.metric strong {display:block;font:700 clamp(2rem,4.8vw,4.7rem)/1 var(--font-display);letter-spacing:-.025em;min-height:1em}
.metric span {display:block;color:#344C5C;font-size:.92rem;margin-top:12px}
/* Quality / illustrative specs */
.quality-section {background:#152838;overflow:hidden}
.quality-grid {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(36px,6vw,92px)}
.quality-image {aspect-ratio:.89;border-radius:24px;border:1px solid rgba(247,251,255,.16);box-shadow:var(--shadow-lift)}
.quality-image::after {background:linear-gradient(90deg,transparent 45%,rgba(8,18,28,.32))}
.quality-statement p {margin-top:22px;color:var(--body)}
.sample-table {width:100%;margin-top:32px;border-collapse:collapse;text-align:left;font-size:.92rem}
.sample-table th,.sample-table td {padding:12px 8px;border-bottom:1px solid var(--steel-line);vertical-align:top}
.sample-table th {font-weight:500;color:var(--body);width:42%}
.sample-table td {font-weight:600;color:var(--text)}
.illustrative-tag {display:inline-flex;background:#2C4454;color:#FFF0D9;border:1px solid #A78257;border-radius:5px;font-size:.75rem;padding:4px 8px;margin-top:16px}
.measure-line {display:block;height:2px;width:100%;background:var(--cyan);transform-origin:left;margin-bottom:24px}
/* SKU ribbon */
.ribbon-section {background:var(--ink);padding-block:24px;border-block:1px solid var(--steel-line);overflow:hidden}
.ribbon-title {font-size:.84rem;color:var(--body);margin-bottom:12px}
.ribbon-window {overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--steel-line) transparent}
.ribbon-track {width:max-content;display:flex;gap:0}
.ribbon-list {list-style:none;display:flex;align-items:center;flex-wrap:nowrap;gap:0;white-space:nowrap}
.ribbon-list li {display:flex;align-items:center;gap:28px;padding-right:28px;font-size:clamp(1rem,2vw,1.4rem);color:#E9F4FB;letter-spacing:.03em;font-weight:600;flex-shrink:0;font-variant-numeric:tabular-nums}
.ribbon-list li::after {content:'';width:5px;height:5px;background:var(--cyan);border-radius:50%}
.ribbon-window:not(.is-looping) {padding-inline:max(clamp(20px,4vw,72px),calc((100vw - 1440px)/2))}
.ribbon-window.is-looping {overflow:hidden}
.ribbon-window.is-looping .ribbon-track {animation:ribbon-roll 40s linear infinite}
.ribbon-window.is-looping:hover .ribbon-track,.ribbon-window.is-looping:focus-within .ribbon-track,.ribbon-window.is-paused .ribbon-track {animation-play-state:paused}
@keyframes ribbon-roll {to {transform:translateX(-50%)}}
/* Logistics story */
.logistics-section {background:var(--canvas)}
.logistics-frame {min-height:clamp(410px,43vw,620px);display:flex;align-items:end;border-radius:24px;border:1px solid rgba(188,204,216,.15)}
.logistics-frame .media-shell {position:absolute;inset:0}
.logistics-frame .media-shell::after {background:linear-gradient(90deg,rgba(8,18,28,.94),rgba(8,18,28,.57) 59%,rgba(8,18,28,.15))}
.logistics-content {position:relative;z-index:2;padding:clamp(24px,5vw,70px);width:min(100%,760px)}
.logistics-content h2 {max-width:12ch}
.logistics-content p {color:#E3F1F8;margin-block:18px 30px}
.logistics-links {display:flex;align-items:center;flex-wrap:wrap;gap:14px;font-size:.93rem}
.logistics-links a {display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;text-decoration:none;border:1px solid rgba(247,251,255,.5);background:rgba(8,18,28,.65);border-radius:8px;font-weight:600}
.logistics-links a:hover {border-color:var(--cyan);background:#122E3B}
.logistics-links .link-arrow {color:var(--cyan)}
/* RFQ conversion / footer */
.rfq-section {background:linear-gradient(180deg,#102432 0%,#ECF2F6 32%);padding-bottom:clamp(64px,8vw,130px)}
.rfq-panel {display:grid;grid-template-columns:.85fr 1.15fr;overflow:hidden;border-radius:24px;background:var(--paper);color:var(--paper-ink);box-shadow:var(--shadow-depth)}
.rfq-panel-image {min-height:480px}
.rfq-panel-image::after {background:linear-gradient(90deg,transparent 55%,rgba(8,18,28,.23))}
.rfq-panel-copy {padding:clamp(28px,5vw,80px);align-self:center}
.rfq-panel-copy .eyebrow {color:#075A69}
.rfq-panel-copy h2 {max-width:11ch}
.rfq-panel-copy p {color:#344C5C;margin-block:22px;max-width:46ch}
.rfq-panel-copy .button-outline {color:var(--paper-ink);border-color:#647F8F;background:transparent}
.rfq-panel-copy .button-outline:hover {background:#DDE9F0;border-color:#1B5B71}
.rfq-panel-copy .button-primary {border-color:#0E6C7B}
.rfq-panel-copy .button-group {display:flex;flex-wrap:wrap;gap:12px}
.site-footer {background:var(--ink);border-top:1px solid var(--steel-line);padding-block:70px 32px}
.footer-grid {display:grid;grid-template-columns:2fr repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,70px)}
.footer-about p {font-size:.92rem;color:var(--body);max-width:33ch;margin-top:18px}
.footer-col h3 {font:600 1rem/1.4 var(--font-body);margin-bottom:15px}
.footer-col ul {list-style:none}
.footer-col li+li {margin-top:9px}
.footer-col a {color:var(--body);font-size:.91rem;text-decoration:none;display:inline-block;padding-block:8px}
.footer-col a:hover,.footer-col a:focus-visible {color:var(--cyan);text-decoration:underline}
.footer-bottom {display:flex;gap:22px;justify-content:space-between;align-items:start;border-top:1px solid var(--steel-line);margin-top:62px;padding-top:22px;font-size:.87rem;color:var(--body)}
.footer-bottom strong {font-weight:600;color:#FFE0BB}
/* Shared hooks for catalogue, detail, about and RFQ pages shipped next. */
.inner-hero {background:var(--ink);padding-block:calc(var(--header-height) + 90px) 84px;min-height:310px}
.inner-hero h1 {font-size:clamp(3.6rem,6vw,6rem)}
.inner-hero p {margin-top:14px;color:var(--body)}
.paper-page {background:var(--paper);color:var(--paper-ink);min-height:60vh}
.paper-page h2,.paper-page h3 {color:var(--paper-ink)}
.paper-page :focus-visible {outline-color:#7D4B13!important}
.catalogue-controls {display:flex;align-items:end;flex-wrap:wrap;gap:16px;margin-bottom:24px}
.field {display:grid;gap:7px;min-width:0}
.field label {font-weight:600;font-size:.94rem}
.field input,.field select,.field textarea {width:100%;min-height:48px;background:#FFF;border:1px solid #6A8190;color:var(--paper-ink);border-radius:10px;padding:10px 12px}
.field textarea {min-height:140px;resize:vertical}
.field [aria-invalid='true'] {border:2px solid #B42330}
.field-error {font-size:.86rem;color:#A51E2A;min-height:1.3em}
.form-summary {border-left:3px solid #B42330;padding:12px 18px;background:#FDEBEC;color:#73131C;margin-bottom:20px}
.table-scroll {overflow-x:auto}
.catalogue-table {width:100%;border-collapse:collapse;text-align:left;background:#FFF;min-width:680px}
.catalogue-table th,.catalogue-table td {border-bottom:1px solid #CCDAE3;padding:14px;vertical-align:middle;font-size:.92rem}
.catalogue-table th {background:#DDE8EE;color:var(--paper-ink)}
.catalogue-table a {color:#075B70;font-weight:600}
.catalogue-table tr:hover td {background:#F2F8FB}
.catalogue-empty {padding:24px;border:1px solid #BECED8}
.detail-grid {display:grid;grid-template-columns:1.1fr .9fr;gap:48px}
.detail-photo {aspect-ratio:1;border-radius:24px}
.detail-table {width:100%;border-collapse:collapse}
.detail-table th,.detail-table td {text-align:left;border-bottom:1px solid #B7C9D5;padding:12px 8px}
.detail-table th {width:42%;font-weight:500}
/* Responsive */
@media (max-width:1279px) {.header-actions .button-outline {display:none} .hero-copy {width:min(720px,65%)} .hero-orbit {right:24px;width:25vw}}
@media (max-width:1023px) {
  .section {padding-block:80px} .hero {min-height:740px} .hero-copy {width:68%}
  .category-grid {grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:190px;grid-auto-flow:dense}
  .category-card,.category-card:nth-child(2),.category-card:nth-child(3),.category-card:nth-child(4),.category-card:nth-child(6) {grid-column:span 3;grid-row:span 1}
  .category-card.category-card--large {grid-column:span 6;grid-row:span 2}
  .category-card.category-card--wide {grid-column:span 6;grid-row:span 1}
  .process-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .process-item:nth-child(even) {padding-top:0}
  .quality-grid {gap:32px}
  .spotlight-grid {align-items:start}
  .spec-row {grid-template-columns:auto minmax(0,1fr)}
  .footer-grid {grid-template-columns:repeat(4,minmax(0,1fr))}
  .footer-about {grid-column:span 4;margin-bottom:14px}
}
@media (min-width:768px) and (max-width:1023px) {
  :root {--header-height:64px}
  .site-header {height:var(--header-height)}
  .header-inner {justify-content:space-between}
  .brand-mark {width:30px;height:30px}
  .brand-name {font-size:1.43rem;letter-spacing:.045em}
  .demo-tag {font-size:.75rem}
  .header-actions {display:none}
  .menu-trigger {display:none;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:7px 9px;background:transparent;color:var(--text);border:1px solid #86A4B6;border-radius:9px;font-size:.87rem;font-weight:600}
  .js .menu-trigger {display:inline-flex}
  .menu-trigger svg {width:20px;height:20px}
  .site-nav {margin:0;position:static;width:100%;background:var(--canvas)}
  /* Native, fully available navigation if scripts are disabled. */
  html:not(.js) .site-header {height:auto;position:relative}
  html:not(.js) .header-inner {flex-wrap:wrap;padding-bottom:10px}
  html:not(.js) .site-nav {order:3}
  html:not(.js) .nav-list {flex-wrap:wrap;gap:8px 22px}
  html:not(.js) .nav-link {padding:8px 0}
  html:not(.js) .nav-link::after {bottom:4px}
  html.js .site-nav {position:fixed;top:var(--header-height);left:0;right:0;width:100%;max-height:calc(100dvh - var(--header-height));overflow-y:auto;overscroll-behavior:contain;padding:18px max(20px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));border-bottom:1px solid var(--steel-line);background:#101F2D;opacity:0;visibility:hidden;transform:translateY(-14px);pointer-events:none;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .24s ease,visibility 0s linear .32s;z-index:102}
  html.js .site-nav.is-open {opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .24s ease,visibility 0s}
  .nav-list {display:block}
  .nav-list li+li {border-top:1px solid var(--steel-line)}
  .nav-link {display:block;padding:15px 0;font-size:1.16rem}
  .nav-link::after {bottom:10px;right:auto;width:48px}
  .menu-close {display:flex;align-items:center;gap:9px;min-height:44px;margin:0 0 10px auto;background:none;border:1px solid #86A4B6;color:var(--text);border-radius:8px;padding:8px 12px}
  .mobile-nav-cta {display:flex;margin-top:22px;width:100%}
  .menu-backdrop {display:block;position:fixed;inset:var(--header-height) 0 0;z-index:99;background:rgba(0,0,0,.55);opacity:0;transition:opacity .24s ease;border:0;padding:0;width:100%;cursor:pointer}
  .menu-backdrop.is-open {opacity:1}
}
@media (max-width:767px) {
  :root {--header-height:64px}
  body {font-size:1rem}
  h1 {font-size:clamp(3.65rem,13vw,6rem)}
  .section {padding-block:64px}
  .site-header {height:var(--header-height)}
  .header-inner {justify-content:space-between}
  .brand-mark {width:30px;height:30px}
  .brand-name {font-size:1.43rem;letter-spacing:.045em}
  .demo-tag {font-size:.75rem}
  .header-actions {display:none}
  .menu-trigger {display:none;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:7px 9px;background:transparent;color:var(--text);border:1px solid #86A4B6;border-radius:9px;font-size:.87rem;font-weight:600}
  .js .menu-trigger {display:inline-flex}
  .menu-trigger svg {width:20px;height:20px}
  .site-nav {margin:0;position:static;width:100%;background:var(--canvas)}
  /* Native, fully available navigation if scripts are disabled. */
  html:not(.js) .site-header {height:auto;position:relative}
  html:not(.js) .header-inner {flex-wrap:wrap;padding-bottom:10px}
  html:not(.js) .site-nav {order:3}
  html:not(.js) .nav-list {flex-wrap:wrap;gap:8px 22px}
  html:not(.js) .nav-link {padding:8px 0}
  html:not(.js) .nav-link::after {bottom:4px}
  html.js .site-nav {position:fixed;top:var(--header-height);left:0;right:0;width:100%;max-height:calc(100dvh - var(--header-height));overflow-y:auto;overscroll-behavior:contain;padding:18px max(20px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));border-bottom:1px solid var(--steel-line);background:#101F2D;opacity:0;visibility:hidden;transform:translateY(-14px);pointer-events:none;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .24s ease,visibility 0s linear .32s;z-index:102}
  html.js .site-nav.is-open {opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .24s ease,visibility 0s}
  .nav-list {display:block}
  .nav-list li+li {border-top:1px solid var(--steel-line)}
  .nav-link {display:block;padding:15px 0;font-size:1.16rem}
  .nav-link::after {bottom:10px;right:auto;width:48px}
  .menu-close {display:flex;align-items:center;gap:9px;min-height:44px;margin:0 0 10px auto;background:none;border:1px solid #86A4B6;color:var(--text);border-radius:8px;padding:8px 12px}
  .mobile-nav-cta {display:flex;margin-top:22px;width:100%}
  .menu-backdrop {display:block;position:fixed;inset:var(--header-height) 0 0;z-index:99;background:rgba(0,0,0,.55);opacity:0;transition:opacity .24s ease;border:0;padding:0;width:100%;cursor:pointer}
  .menu-backdrop.is-open {opacity:1}
  .hero {min-height:750px;padding-block:calc(var(--header-height) + 68px) 110px;align-items:start}
  .hero-copy {width:100%;max-width:560px}
  .hero-media img {object-position:62% center}
  .hero-media::after {background:linear-gradient(180deg,rgba(8,18,28,.95) 0%,rgba(8,18,28,.87) 51%,rgba(8,18,28,.35) 100%)}
  .hero-lines {opacity:.14}
  .hero-description {max-width:41ch;margin-top:20px}
  .hero-ctas {margin-top:26px}
  .hero-disclaimer {margin-top:18px}
  .hero {flex-direction:column;align-items:stretch}
  .hero-orbit {position:relative;right:auto;bottom:auto;align-self:flex-end;margin:28px 36px 0 0;width:clamp(128px,29vw,190px);opacity:.92}
  .hero-orbit-caption {right:-14px;bottom:-10px;font-size:.67rem}
  .hero-scroll-note {bottom:32px}
  .buyer-steps {grid-template-columns:1fr}
  .buyer-steps li+li {border-left:0;border-top:1px solid var(--steel-line)}
  .buyer-steps a {min-height:72px;padding:13px 8px}
  .category-grid {grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:255px;gap:14px}
  .category-card,.category-card--large,.category-card--wide,.category-card:nth-child(2),.category-card:nth-child(3),.category-card:nth-child(4),.category-card:nth-child(6) {grid-column:span 4;grid-row:span 1}
  .category-card.category-card--large,.category-card.category-card--wide {grid-column:span 4;grid-row:span 1}
  .category-content {inset:auto 22px 20px}
  .category-card--large .category-content h3 {font-size:3rem}
  .section-topline {display:block}
  .section-topline p {margin-top:16px}
  .spotlight-grid,.quality-grid,.process-intro,.rfq-panel,.detail-grid {grid-template-columns:1fr}
  .spotlight h2 {max-width:none}
  .spotlight-photo {aspect-ratio:1.2}
  .quality-image {aspect-ratio:1.35}
  .process-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .process-item .media-shell {aspect-ratio:1.1}
  .metrics-grid {grid-template-columns:1fr 1fr}
  .metric {padding:16px}
  .metric:first-child {padding-left:16px}
  .metric:nth-child(3) {grid-column:span 2;border-left:0;border-top:1px solid #AEC0CD}
  .logistics-frame {min-height:550px}
  .logistics-content {padding:28px}
  .rfq-panel-image {min-height:220px}
  .rfq-panel-copy {padding:30px}
  .footer-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .footer-about {grid-column:span 2}
  .footer-bottom {flex-direction:column}
}
@media (max-width:479px) {
  .brand {gap:5px} .brand-name {font-size:1.3rem} .demo-tag {font-size:.75rem;padding:3px 5px}
  .menu-trigger {gap:4px;font-size:.8rem}
  .hero {min-height:760px;padding-top:calc(var(--header-height) + 57px)}
  .hero-copy h1 {font-size:clamp(3.48rem,14.3vw,4.2rem)}
  .hero-ctas .button {width:100%}
  .hero-orbit {right:auto;bottom:auto;width:136px;margin-right:26px}
  .hero-scroll-note {display:none}
  .process-grid {grid-template-columns:1fr}
  .process-item .media-shell {aspect-ratio:1.7}
  .metrics-grid {grid-template-columns:1fr}
  .metric,.metric:first-child,.metric:nth-child(3) {grid-column:auto;border-left:0;border-top:1px solid #AEC0CD;padding:16px 0}
  .metric:first-child {border-top:0}
  .metric strong {font-size:3.6rem}
  .spotlight-actions .button,.rfq-panel-copy .button {width:100%}
  .logistics-frame {min-height:620px}
  .logistics-links {gap:9px}
  .logistics-links a {font-size:.83rem}
  .footer-grid {grid-template-columns:1fr 1fr}
  .footer-about {grid-column:span 2}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto!important}
  *,*::before,*::after {animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  html.js .site-nav,html.js .site-nav.is-open {transition:none!important}
  .ribbon-window {overflow:visible;width:var(--container);margin-inline:auto}
  .ribbon-window:not(.is-looping) {padding-inline:0}
  .ribbon-track {width:auto}
  .ribbon-list {flex-wrap:wrap;row-gap:10px;white-space:normal}
  .ribbon-window.is-looping .ribbon-track {animation:none!important}
  .hero-sweep {display:none}
  .category-card img,.process-item img,.button {transform:none!important}
}