/* ==========================================================================
   AEIM Pte. Ltd. — A Polymatech Group Company
   Core stylesheet
   --------------------------------------------------------------------------
   Token system
     Colour     Polymatech crimson, near-black, neutral greys, white
     Type       Archivo (display) / Public Sans (body) / IBM Plex Mono (data)
     Signature  Fiducial registration marks — the alignment crosses used in
                die placement and PCB assembly. Used as section markers and
                card corner accents. Nowhere decorative; they mark alignment.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Colour — sampled directly from the AEIM printed identity
     (business card, Archivo/Inter, CMYK print artwork) and from the
     Polymatech logo master. These are the real brand inks, not approximations. */
  --aeim-red:      #C8102C;   /* AEIM red, screen value from the AEIM web banner */
  --aeim-red-deep: #A41C24;   /* CMYK/print value of the same red — used for hover */
  --poly-red:      #E20001;   /* Polymatech product-brand red */
  --gold:          #C88428;   /* AEIM gold, screen value from the banner */
  --gold-tint:     #FBF4E4;
  --coral:         #F04054;   /* waveform highlight */
  --ink:           #0B1226;   /* AEIM deep ground, from the banner */
  --ink-card:      #18203C;   /* AEIM navy from the printed card */
  --ink-2:         #2E3A5C;
  --ink-3:         #6C7894;   /* slate secondary text */
  --grey:          #F3F4F7;
  --grey-2:        #E6E8EE;
  --line:          #D9DCE5;
  --line-dark:     #2E3A5C;
  --white:         #FFFFFF;

  /* Legacy aliases so existing rules keep working */
  --crimson:       var(--aeim-red);
  --crimson-deep:  var(--aeim-red-deep);
  --crimson-tint:  #FBEDEE;

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale */
  --step--1: clamp(0.80rem, 0.78rem + 0.10vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --step-1:  clamp(1.13rem, 1.05rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.70vw, 1.95rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.40vw, 2.85rem);
  --step-4:  clamp(2.30rem, 1.75rem + 2.60vw, 4.20rem);

  /* Layout */
  --wrap: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
  --band: clamp(56px, 8vw, 112px);
  --radius: 3px;
}

/* --- 2. Reset ----------------------------------------------------------- */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.012em; }
h4 { font-size: var(--step-0); letter-spacing: 0; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

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

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

/* --- 3. Layout helpers -------------------------------------------------- */

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }
.band--tight { padding-block: clamp(36px, 5vw, 64px); }
.band--grey { background: var(--grey); }
.band--ink  { background: var(--ink); color: var(--white); }
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--white); }
.band--ink p { color: #C3C8CE; }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.band--ink .lede { color: #C8CDD3; }
.measure { max-width: 68ch; }
.center { text-align: center; }

.cols { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 860px) {
  .cols--2 { grid-template-columns: repeat(2, 1fr); }
  .cols--3 { grid-template-columns: repeat(3, 1fr); }
  .cols--4 { grid-template-columns: repeat(4, 1fr); }
  .cols--sidebar { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
}
@media (min-width: 560px) and (max-width: 859px) {
  .cols--3, .cols--4 { grid-template-columns: repeat(2, 1fr); }
}

/* --- 4. Signature: fiducial registration marks -------------------------- */
/* A fiducial is the alignment target a pick-and-place machine reads before
   it sets a die. Here it marks where a section registers on the page.      */

.fiducial {
  --fid: 13px;
  width: var(--fid); height: var(--fid);
  flex: 0 0 auto;
  position: relative;
}
.fiducial::before,
.fiducial::after {
  content: ""; position: absolute; background: var(--crimson);
}
.fiducial::before { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); }
.fiducial::after  { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 18px;
}
.center .eyebrow { justify-content: center; }

/* --- 5. Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--body); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.01em;
  padding: 14px 26px; border: 1px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn--primary { background: var(--crimson); color: var(--white); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--crimson-deep); }
.btn--dark { background: var(--ink); color: var(--white); }
.btn--dark:hover, .btn--dark:focus-visible { background: var(--crimson); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--ink); background: var(--white); }
.band--ink .btn--ghost { color: var(--white); border-color: #464C55; }
.band--ink .btn--ghost:hover { border-color: var(--white); background: transparent; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.center .btn-row { justify-content: center; }

/* --- 6. Header ---------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 76px;
}
.brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
.brand { flex-direction: column; align-items: flex-start; gap: 2px; }
.brand__mark {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: 0.04em; color: var(--aeim-red); line-height: 1;
}
.brand__sub {
  font-family: var(--body); font-weight: 700; font-size: 9px;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap; line-height: 1;
}
/* descriptor is shown at every width — see section 33 */

.nav { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); }
.nav a {
  font-size: var(--step--1); font-weight: 600; text-decoration: none;
  color: var(--ink-2); padding: 6px 0; position: relative; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--crimson); transform: scaleX(0);
  transform-origin: left; transition: transform 180ms ease;
}
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 12px; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0;
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1099px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .nav {
    position: fixed; inset: 76px 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 24px;
    max-height: calc(100dvh - 76px); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  }
  .nav[data-open="true"] { transform: none; opacity: 1; visibility: visible; }
  .nav a { padding: 15px 0; border-bottom: 1px solid var(--grey-2); font-size: var(--step-0); }
  .nav a::after { display: none; }
  .nav .btn { margin-top: 18px; }
}

/* --- 7. Hero ------------------------------------------------------------ */

.hero {
  background: var(--ink); color: var(--white);
  position: relative; overflow: hidden;
  padding-block: clamp(64px, 10vw, 132px);
}
/* Registration grid: the coordinate field a placement machine works against */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(ellipse 90% 70% at 22% 40%, #000 25%, transparent 78%);
  pointer-events: none;
}
.hero > .wrap { position: relative; }
.hero h1 { color: var(--white); max-width: 17ch; }
.hero .lede { color: #C3C8CE; margin-top: 22px; }
.hero .eyebrow { color: #FF7C90; }
.hero .fiducial::before, .hero .fiducial::after { background: #FF7C90; }

.hero-figure {
  position: relative; border: 1px solid var(--line-dark);
  background: #06070A; border-radius: var(--radius); overflow: hidden;
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }

/* --- 8. Announcement (removable HIMSS component) ------------------------ */

.announce {
  background: var(--ink);
  color: var(--white);
  border-top: 3px solid var(--crimson);
}
.announce__inner {
  display: grid; gap: clamp(24px, 4vw, 56px); align-items: center;
  padding-block: clamp(32px, 4.5vw, 56px);
}
@media (min-width: 880px) {
  .announce__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.announce__figure {
  background: #000; border: 1px solid var(--line-dark); border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 3 / 2;
}
.announce__figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.announce h2 { color: var(--white); font-size: var(--step-2); margin-bottom: 14px; }
.announce p { color: #C3C8CE; }
.announce .eyebrow { color: #FF7C90; }
.announce .fiducial::before, .announce .fiducial::after { background: #FF7C90; }

.announce__meta {
  font-family: var(--mono); font-size: var(--step--1); line-height: 1.9;
  margin: 0 0 16px; padding: 0; list-style: none; color: var(--white);
}
.announce__meta li { display: flex; gap: 14px; }
.announce__meta .k {
  color: #8B939C; min-width: 66px; font-size: 0.85em;
  letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0.3em;
}
.announce__meta b { color: #FF7C90; font-weight: 500; }

/* --- 9. Cards ----------------------------------------------------------- */

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(22px, 2.4vw, 32px);
  text-decoration: none; color: inherit;
  transition: border-color 180ms ease, transform 180ms ease;
}
.band--grey .card { background: var(--white); }
a.card:hover, a.card:focus-visible { border-color: var(--ink); transform: translateY(-2px); }
/* Fiducial in the top-right corner: the registration point for the card */
.card::after {
  content: ""; position: absolute; top: 16px; right: 16px;
  width: 11px; height: 11px; opacity: 0.55;
  background:
    linear-gradient(var(--crimson), var(--crimson)) center/100% 1px no-repeat,
    linear-gradient(var(--crimson), var(--crimson)) center/1px 100% no-repeat;
}
.card h3 { margin-bottom: 8px; padding-right: 22px; }
.card p { color: var(--ink-3); font-size: var(--step--1); line-height: 1.6; }
.card__index {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--ink-3); margin-bottom: 14px; text-transform: uppercase;
}
.card__more {
  margin-top: auto; padding-top: 18px;
  font-size: var(--step--1); font-weight: 700; color: var(--crimson);
}
.card__figure {
  margin: -1px -1px 20px; border-bottom: 1px solid var(--line);
  background: var(--grey); aspect-ratio: 4 / 3; overflow: hidden;
}
.card__figure img { width: 100%; height: 100%; object-fit: cover; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding: 0; list-style: none; }
.tags li {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 2px; padding: 4px 8px;
}

/* --- 10. Wavelength scale (specialised LED portfolio) -------------------- */
/* The axis is real: UVC through UVA into visible and infrared, in nm.      */

.spectrum { margin: 40px 0 8px; }
.spectrum__bar {
  height: 10px; border-radius: 2px;
  background: linear-gradient(to right,
    #4B0082 0%, #6A0DAD 12%, #4B3BC8 22%, #2E5FD8 30%,
    #3E9E6E 44%, #C9C23C 58%, #D9812F 70%, #B3402C 82%, #6E1F18 100%);
}
.spectrum__ticks {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em;
  color: var(--ink-3); margin-top: 8px;
}
.band--ink .spectrum__ticks { color: #8B939C; }

/* --- 11. Specification / definition lists ------------------------------- */

.spec { border-top: 1px solid var(--line); margin: 24px 0 0; }
.spec > div {
  display: grid; gap: 4px 24px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) { .spec > div { grid-template-columns: 200px 1fr; } }
.spec dt {
  font-family: var(--mono); font-size: var(--step--1);
  letter-spacing: 0.05em; color: var(--ink-3);
}
.spec dd { margin: 0; }
.band--ink .spec, .band--ink .spec > div { border-color: var(--line-dark); }

/* --- 12. Numbered process (order carries meaning here) ------------------- */

.flow { list-style: none; margin: 0; padding: 0; counter-reset: flow; }
.flow > li {
  counter-increment: flow; position: relative;
  padding: 22px 0 22px 62px; border-bottom: 1px solid var(--line);
}
.flow > li::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute; left: 0; top: 24px;
  font-family: var(--mono); font-size: var(--step--1);
  color: var(--crimson); letter-spacing: 0.06em;
}
.flow h3 { font-size: var(--step-0); margin-bottom: 4px; }
.flow p { color: var(--ink-3); font-size: var(--step--1); }

/* --- 13. Notices -------------------------------------------------------- */

.notice {
  border-left: 3px solid var(--crimson);
  background: var(--crimson-tint);
  padding: 18px 22px; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step--1); color: var(--ink-2);
}
.notice strong { color: var(--ink); }
.band--ink .notice { background: #1A1D22; color: #C3C8CE; }
.band--ink .notice strong { color: var(--white); }

/* --- 14. Placeholder frames --------------------------------------------- */

.ph {
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, var(--grey), var(--grey) 11px, var(--grey-2) 11px, var(--grey-2) 22px);
  border: 1px dashed #B9BEC5; border-radius: var(--radius);
  aspect-ratio: 4 / 3; padding: 20px; text-align: center;
}
.ph span {
  font-family: var(--mono); font-size: 11px; line-height: 1.7;
  letter-spacing: 0.05em; color: #6B7178; max-width: 34ch;
}
.ph--wide { aspect-ratio: 16 / 9; }
.ph--portrait { aspect-ratio: 3 / 4; }
.ph--square { aspect-ratio: 1 / 1; }

/* --- 15. Map ------------------------------------------------------------ */

.map { background: var(--grey); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(16px, 3vw, 34px); }
.map svg { width: 100%; height: auto; }
.map .land { fill: #D3D7DC; }
.map .pin { fill: var(--crimson); }
.map .pin-ring { fill: none; stroke: var(--crimson); stroke-width: 1.4; opacity: 0.45; }

/* --- 16. Form ----------------------------------------------------------- */

.form { display: grid; gap: 18px; }
@media (min-width: 720px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } }
.field { display: grid; gap: 7px; }
.field label { font-size: var(--step--1); font-weight: 700; }
.field .req { color: var(--crimson); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: var(--step-0); color: var(--ink);
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; width: 100%;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--crimson); outline-offset: 1px; border-color: var(--crimson);
}
.field--error input, .field--error select, .field--error textarea { border-color: var(--crimson); }
.field__error { font-size: var(--step--1); color: var(--crimson); min-height: 0; }
.field--consent { grid-template-columns: auto 1fr; align-items: start; gap: 10px; }
.field--consent input { width: 18px; height: 18px; margin-top: 3px; }
.field--consent label { font-weight: 400; font-size: var(--step--1); color: var(--ink-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  display: none; border-left: 3px solid var(--crimson);
  background: var(--crimson-tint); padding: 18px 22px; font-size: var(--step--1);
}
.form-status[data-state="ok"] { display: block; border-color: #1B7F4B; background: #EFF7F1; }
.form-status[data-state="error"] { display: block; }

/* --- 17. Footer --------------------------------------------------------- */

.site-footer { background: var(--ink); color: #A8AFB7; padding-block: clamp(48px, 6vw, 80px) 28px; }
.site-footer h4 {
  color: var(--white); font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 16px;
}
.site-footer a { color: #A8AFB7; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--white); }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: var(--step--1); }
.footer-brand .brand__mark { color: var(--white); font-size: 1.5rem; }
.footer-brand p { font-size: var(--step--1); margin-top: 14px; max-width: 34ch; }
.footer-bottom {
  border-top: 1px solid var(--line-dark); margin-top: 44px; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: var(--step--1);
}

/* --- 18. Page header (interior pages) ----------------------------------- */

.page-head { background: var(--grey); border-bottom: 1px solid var(--line); padding-block: clamp(44px, 6vw, 84px); }
.page-head h1 { max-width: 20ch; }
.breadcrumb {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px;
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--crimson); }

/* --- 19. Motion --------------------------------------------------------- */

.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 560ms ease, transform 560ms cubic-bezier(0.22,0.8,0.3,1); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* --- 20. Utilities ------------------------------------------------------ */

.stack > * + * { margin-top: 18px; }
.mt-l { margin-top: clamp(28px, 4vw, 48px); }
.rule { border: 0; border-top: 1px solid var(--line); margin: clamp(36px, 5vw, 64px) 0; }
.band--ink .rule { border-color: var(--line-dark); }
.small { font-size: var(--step--1); color: var(--ink-3); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
@media print { .site-header, .nav-toggle, .announce { display: none; } }


/* --- 21. Brand waveform ---------------------------------------------------
   Lifted from the reverse of the AEIM business card: two offset lines in
   coral and gold. It already reads as a spectral trace, which is why it
   belongs on a company that sells wavelengths. Used as a section divider. */

.waveform { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 0 26px; }
.center .waveform { margin-inline: auto; }
.waveform .w-coral { stroke: var(--coral); }
.waveform .w-gold  { stroke: var(--gold); }

.brand-logo { height: 30px; width: auto; }
.footer-logo { height: 26px; width: auto; margin-bottom: 18px; }


/* --- 22. Brand spectrum rule ----------------------------------------------
   Taken from the bottom edge of the AEIM web banner: a continuous sweep from
   red through gold into green. Sampled at ten points across the supplied
   artwork, so the gradient below is the banner's own, not an approximation. */

.brand-rule {
  height: 4px; border: 0; margin: 0;
  background: linear-gradient(to right,
    #C81D2D 0%, #C83D2C 11%, #C85E2A 22%, #C97E28 33%, #C59D28 44%,
    #9C952D 55%, #728833 66%, #497C39 77%, #1F703F 88%, #0E6B43 100%);
}

/* --- 23. Hero using the supplied banner artwork -------------------------- */

.hero {
  background-color: #0B1226;
  background-image: image-set(
    url("../assets/img/brand/hero-art-1600.webp") type("image/webp"),
    url("../assets/img/brand/hero-art-1600.jpg") type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 118%;
}
.hero::before {                      /* keep the coordinate grid only on the type side */
  mask-image: radial-gradient(ellipse 70% 80% at 14% 45%, #000 20%, transparent 74%);
}
.hero::after {                       /* protect legibility where type meets artwork */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right, #0B1226 34%, rgba(11,18,38,0.72) 56%, rgba(11,18,38,0) 78%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .hero { background-size: cover; background-position: 78% center; }
  .hero::after { background: linear-gradient(to bottom, rgba(11,18,38,0.86), rgba(11,18,38,0.94)); }
}
.hero .eyebrow { color: var(--gold); }
.hero .fiducial::before, .hero .fiducial::after { background: var(--gold); }

/* --- 24. Spectral band swatch -------------------------------------------
   Used where a product family has no photograph yet. It is plainly a
   graphic device, not a substitute product image: the band it shows is
   the wavelength region the family occupies. */

.swatch {
  position: relative; aspect-ratio: 4 / 3;
  margin: -1px -1px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-end; padding: 16px;
  overflow: hidden;
}
.swatch__label {
  position: relative; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.swatch--uvc { background: linear-gradient(140deg,#2A0A52,#4B1F8F 55%,#1A0636); }
.swatch--uvb { background: linear-gradient(140deg,#3A1580,#6A34C4 55%,#241056); }
.swatch--uva { background: linear-gradient(140deg,#4B2BC4,#8A6BE8 55%,#2E1A7A); }
.swatch--ir  { background: linear-gradient(140deg,#5B1414,#9E2A22 55%,#2E0A0A); }
.swatch--mem { background: linear-gradient(140deg,#16203E,#2E3F6E 55%,#0C1226); }
.swatch--oem { background: linear-gradient(140deg,#123A33,#1F6B54 55%,#0A241F); }
.swatch::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 80% at 70% 25%, #000 10%, transparent 72%);
}

/* --- 25. Diagram blocks -------------------------------------------------- */

.figure-panel {
  background: var(--grey); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(20px,3vw,36px);
}
.band--ink .figure-panel { background: #141B33; border-color: var(--line-dark); }
.figure-panel svg { width: 100%; height: auto; display: block; }
.figure-panel figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 16px;
}
.band--ink .figure-panel figcaption { color: #8B93A8; }

/* --- 26. Metric type (used instead of photography) ----------------------- */

.metrics { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
.metric { background: var(--white); padding: 26px 22px; }
.band--ink .metrics { background: var(--line-dark); border-color: var(--line-dark); }
.band--ink .metric { background: #141B33; }
.metric__value {
  font-family: var(--display); font-weight: 700; font-size: clamp(26px,3.4vw,40px);
  line-height: 1; letter-spacing: -0.02em; color: var(--aeim-red); margin-bottom: 8px;
}
.metric__label { font-size: var(--step--1); color: var(--ink-3); }
.band--ink .metric__label { color: #8B93A8; }

/* --- 27. News ------------------------------------------------------------ */

.news-card { display: flex; flex-direction: column; }
.news-card__date {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--aeim-red); margin-bottom: 10px;
}
.article { max-width: 74ch; }
.article h2 { margin-top: 1.4em; }
.article figure { margin: 32px 0; }
.article figure img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
.article figcaption { font-size: var(--step--1); color: var(--ink-3); margin-top: 10px; }
.gallery { display: grid; gap: 16px; margin: 32px 0; }
@media (min-width: 620px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery figure { margin: 0; }

/* --- 28. Button contrast fixes -------------------------------------------
   Two faults found on the live staging build:

   1. Ghost buttons take `color: var(--ink)` for light sections. The override
      existed only for `.band--ink`, so ghost buttons inside `.announce` and
      `.hero` — both dark — rendered dark navy text on a dark navy ground and
      were effectively invisible.

   2. `.nav a` (specificity 0,2,0) overrode `.btn--primary` (0,1,0), so the
      header call-to-action lost its white text against the crimson fill.
   ------------------------------------------------------------------------ */

.announce .btn--ghost,
.hero .btn--ghost {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.34);
}
.announce .btn--ghost:hover, .announce .btn--ghost:focus-visible,
.hero .btn--ghost:hover,     .hero .btn--ghost:focus-visible {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.08);
}

/* Buttons inside the nav must keep their own colours, not inherit link colour */
.nav a.btn--primary { color: var(--white); }
.nav a.btn--primary:hover, .nav a.btn--primary:focus-visible { color: var(--white); }
.nav a.btn { text-decoration: none; }
.nav a.btn::after { display: none; }

/* --- 29. Header fit and button contrast ----------------------------------
   Faults found on the staging build:

   1. The call-to-action was rendered twice on desktop — once inside <nav>
      (needed for the mobile menu) and again as .header-cta. Roughly 230px of
      duplicate width, which pushed the header past the right margin.
   2. Ghost buttons inside .announce and .hero had no white-text override.
   3. `.nav a` outscored `.btn--primary` on specificity, stripping the white
      text from the header CTA.
   ------------------------------------------------------------------------ */

/* Explicit colour rules — these must win wherever the button appears */
.nav a.btn--primary,
.header-cta,
a.btn--primary.header-cta {
  color: #fff;
}
.nav a.btn--primary:hover,  .header-cta:hover,
.nav a.btn--primary:focus-visible, .header-cta:focus-visible {
  color: #fff;
  background: var(--aeim-red-deep);
}
.header-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.announce .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}
.announce .btn--ghost:hover,
.announce .btn--ghost:focus-visible {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
.announce .btn--ghost:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* One CTA on desktop. The nav copy exists only for the mobile menu. */
@media (min-width: 1100px) {
  .nav .btn { display: none; }
}

/* Header sizing: everything scales with viewport so nothing clips */
.header-inner { gap: clamp(14px, 1.8vw, 30px); flex-wrap: nowrap; }
.brand { flex: 0 0 auto; }

.nav { gap: clamp(10px, 1.15vw, 22px); min-width: 0; }

.header-cta {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 12px clamp(14px, 1.3vw, 24px);
  font-size: clamp(0.74rem, 0.82vw, 0.86rem);
}

/* Desktop navigation begins at 1100px. Below that the hamburger takes over.
   Final sizing for the 1100px-and-up row is set in section 33. */
@media (max-width: 1099px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }
}

/* --- 30. Header fit, measured ---------------------------------------------
   The header container is allowed to run wider than the 1280px body grid so
   the nine navigation items, the brand lockup and the call to action share a
   single row. All type and spacing for that row is set in section 33; the
   earlier per-breakpoint sizing that lived here has been removed because it
   contradicted section 33 in the overlapping range.
   ------------------------------------------------------------------------ */

.site-header .wrap { max-width: 1440px; }

/* --- 31. Overflow elimination and responsive corrections -------------------

   Causes found, then fixed at source:

   a) Grid and flex children default to `min-width: auto`, so a long word or a
      wide child refuses to shrink and pushes the row past the viewport. Only
      one `min-width: 0` existed in the whole stylesheet.
   b) The CDSCO registration number POLYMA-Kanch-TN/M/IVD/021765 is a
      28-character token in a 200px specification column.
   c) The header navigation was compressed rather than switched to the mobile
      menu at widths where nine items plus a call to action cannot sit
      comfortably.

   `overflow-x: clip` is applied last, as a backstop, not as the fix.
   ------------------------------------------------------------------------ */

html, body { max-width: 100%; overflow-x: clip; }
.wrap { max-width: min(var(--wrap), 100%); }

/* (a) Nothing may refuse to shrink */
.cols > *, .cols--sidebar > *, .cols--2 > *, .cols--3 > *, .cols--4 > *,
.card, .metric, .metrics > *, figure, picture, .header-inner > *,
.announce__inner > *, .spec > div > *, .flow > li, .article > * {
  min-width: 0;
}

/* (b) Long identifiers wrap instead of pushing the layout */
.spec dd, .card p, .article p, .lede, .notice, .coords, .announce__meta {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.spec dd { hyphens: auto; }

/* Media never exceeds its container */
img, svg, picture, video { max-width: 100%; }
img, svg { height: auto; }
.map svg, .figure-panel svg { width: 100%; height: auto; }

/* Tag lists and spectrum scales wrap rather than overflow */
.tags { max-width: 100%; }
.spectrum__ticks { flex-wrap: wrap; gap: 4px 10px; }
.announce__meta li { flex-wrap: wrap; }

/* --- Header: switch to the mobile menu before the row gets tight ---------- */

.nav a.btn--primary,
.header-cta {
  color: #fff !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav a.btn--primary:hover, .header-cta:hover,
.nav a.btn--primary:focus-visible, .header-cta:focus-visible { color: #fff !important; }

/* The 1500/1501px pair that stood here forced the hamburger on every display
   narrower than 1501px, which is most laptops. It is superseded in full by
   section 33, which switches at 1100px. */

/* --- Product figure: show the whole device, never upscale it ------------- */

.product-figure { margin: 0; }
.product-figure img {
  display: block;
  width: 100%;
  max-height: 700px;
  object-fit: contain;
  object-position: center;
  margin-inline: auto;
  background: #000;
  border-radius: var(--radius);
}
@media (max-width: 900px) {
  .product-figure img { max-height: 460px; }
}

/* --- 32. Hero stacking correction -----------------------------------------
   `.hero::after` is generated as the last child of .hero, so with both it and
   `.hero > .wrap` positioned at `z-index: auto`, DOM order decided the paint
   order and the legibility gradient covered the type. Its solid section runs
   to 34% of the width, which is exactly where the headline was disappearing.

   Explicit layers, background to front: grid, gradient, content.
   ------------------------------------------------------------------------ */

.hero { isolation: isolate; }
.hero::before { z-index: 0; }
.hero::after  { z-index: 1; }
.hero > .wrap { position: relative; z-index: 2; }

/* --- 33. Header: full navigation on laptop and desktop, descriptor always --

   Requirement: all nine links plus the call to action on laptop and desktop;
   hamburger on tablet and mobile only; "A POLYMATECH GROUP COMPANY" visible
   at every width.

   Measured: the row needs roughly 1120px of content width. Two changes make
   that fit from 1280px up — the header uses a narrower gutter than the body,
   and navigation type is set slightly tighter than body copy, which is normal
   for a nine-item bar. The brand lockup is stacked, so the descriptor costs
   almost no horizontal room.
   ------------------------------------------------------------------------ */

.site-header .wrap {
  max-width: 100%;
  padding-inline: clamp(16px, 1.6vw, 40px);
}

/* The descriptor is part of the lockup and is never hidden */
.brand__sub {
  display: block !important;
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  line-height: 1.1;
  font-size: clamp(7.5px, 0.62vw, 9.5px);
}
.brand { flex-direction: column; align-items: flex-start; gap: 3px; flex: 0 0 auto; }
.brand__mark { font-size: clamp(1.25rem, 1.4vw, 1.5rem); }

/* ---- Laptop and desktop: full horizontal navigation, from 1100px up ----

   Sizing was measured against the actual Public Sans metrics rather than
   estimated. At the 1100px floor the row needs 977px of the 1050px available,
   leaving 73px clear — comfortably above the 32px the runtime measurement in
   section 34 requires before it collapses the row.

   Type and spacing are continuous clamps rather than stepped bands, so the
   1100–1300px range tightens progressively instead of jumping at a
   breakpoint. Every value bottoms out at its floor by 1100px and reaches its
   cap by roughly 1500px.                                                   */

@media (min-width: 1100px) {
  .nav-toggle { display: none !important; }
  .nav { display: flex !important; position: static; flex-direction: row; align-items: center;
         background: none; border: 0; padding: 0; max-height: none; overflow: visible;
         transform: none; opacity: 1; visibility: visible;
         gap: clamp(9px, calc(1.1vw - 2.5px), 20px); }
  .nav a { padding: 6px 0; border: 0; white-space: nowrap; letter-spacing: -0.003em;
           font-size: clamp(0.69rem, calc(0.72vw + 0.19rem), 0.84rem); }
  .nav a::after { display: block; }
  .nav .btn { display: none; }          /* the in-menu copy is for mobile only */
  .header-cta { display: inline-flex !important; }
  .header-inner { gap: clamp(14px, 1.3vw, 26px); min-height: 74px; flex-wrap: nowrap; }
  .header-cta { padding: 11px clamp(12px, 1.1vw, 22px);
                font-size: clamp(0.70rem, calc(0.50vw + 0.36rem), 0.82rem); }
  .brand__sub { font-size: clamp(7.5px, 0.6vw, 9.5px); }
}

/* ---- Tablet and mobile: hamburger, below 1100px ---- */
@media (max-width: 1099px) {
  .nav-toggle { display: inline-flex !important; }
  .header-cta { display: none !important; }
  .nav .btn { display: inline-flex; margin-top: 18px; justify-content: center; }
  .brand__sub { font-size: 8px; letter-spacing: 0.14em; }
}

/* --- 34. Runtime header fit ------------------------------------------------
   The breakpoint above is a safe floor, not the whole answer: the true width
   of the row depends on the rendered font, which cannot be known in advance.
   js/main.js measures the actual laid-out width of the brand, navigation and
   call to action on load and on resize, and adds `.is-compact` whenever the
   row would come within 32px of the available space.

   These rules mirror the mobile header but are not inside a media query, so
   they apply at any width the measurement asks for. Specificity (0,3,0) beats
   the desktop rules above, so they win regardless of source order.
   ------------------------------------------------------------------------ */

.site-header.is-compact .nav-toggle { display: inline-flex !important; }
.site-header.is-compact .header-cta { display: none !important; }

.site-header.is-compact .nav {
  position: fixed; inset: 74px 0 auto 0;
  display: flex !important; flex-direction: row; flex-wrap: wrap;
  flex-direction: column; align-items: stretch; gap: 0;
  background: var(--white); border-bottom: 1px solid var(--line);
  padding: 8px var(--gutter) 24px;
  max-height: calc(100dvh - 74px); overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
.site-header.is-compact .nav[data-open="true"] {
  transform: none; opacity: 1; visibility: visible;
}
.site-header.is-compact .nav a {
  padding: 15px 0; border: 0; border-bottom: 1px solid var(--grey-2);
  font-size: var(--step-0); white-space: normal;
}
.site-header.is-compact .nav a::after { display: none; }
.site-header.is-compact .nav .btn {
  display: inline-flex; margin-top: 18px; justify-content: center;
}

/* No-JS safety: without the measurement the 1100px floor governs, and that
   floor was verified against the real Public Sans metrics with 73px of clear
   space in hand at the narrowest supported width. Nothing is hidden while
   waiting, so the header is usable either way. */

/* --- 35. World map --------------------------------------------------------
   The map is a separate SVG so it stays out of the HTML and is cached and
   gzipped on its own. Markers are positioned elements over it, using
   percentages derived from the map's own projection, so they scale with it.
   ------------------------------------------------------------------------ */

.worldmap { position: relative; width: 100%; }
.worldmap__img { display: block; width: 100%; height: auto; }

.worldmap__pin {
  position: absolute;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  /* Anchor the DOT on the coordinate, not the centre of dot-plus-label.
     Centring the whole pin displaced each dot west by half its label width —
     up to 92px at 1200px display, which put Watsonville in the Pacific. */
  transform: translate(-5.5px, -50%);
}
.worldmap__pin--left {
  flex-direction: row-reverse;
  transform: translate(calc(-100% + 5.5px), -50%);
}
.worldmap__dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--aeim-red); flex: 0 0 auto; position: relative;
}
.worldmap__dot::after {
  content: ""; position: absolute; inset: -8px;
  border: 1px solid var(--aeim-red); border-radius: 50%; opacity: 0.45;
}
.worldmap__label {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--ink);
  background: rgba(243, 244, 247, 0.82); padding: 2px 5px; border-radius: 2px;
}

@media (max-width: 900px) {
  .worldmap__label { font-size: 9.5px; padding: 1px 3px; }
  .worldmap__dot { width: 8px; height: 8px; }
  .worldmap__dot::after { inset: -5px; }
  .worldmap__pin { transform: translate(-4px, -50%); }
  .worldmap__pin--left { transform: translate(calc(-100% + 4px), -50%); }
}
@media (max-width: 560px) {
  .worldmap__label { display: none; }   /* dots only; the cards below name them */
}

/* Centred metric columns — each value and its label share one column */
.metrics--centred .metric { text-align: center; }
.metrics--centred .metric__label { margin-inline: auto; max-width: 28ch; }