/* ==========================================================================
   InfraSpec Optics — Design System
   Infrared Optics for Spectroscopy & Sensing
   Visual language: industrial FTIR bench, ruled grating, raster scan.
   Not the Quantum Optx cyan / prism / orbit family.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
table { border-collapse: collapse; }

/* --- Tokens ----------------------------------------------------------------
   Photonics bench: cool white, navy ink, ice-blue accent.
   Light is default. Dark is navy (not black), opt-in via iso-theme-v2.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  --bg:            #f4f7fa;
  --bg-raised:     #ffffff;
  --panel:         #ffffff;
  --panel-2:       #eef2f6;
  --line:          #d5dee8;
  --line-soft:     #e8eef4;

  --ink:           #0b1f33;
  --ink-2:         #3d5166;
  --ink-3:         #5c738a;
  --ink-4:         #8a9aab;

  --cyan:          #3aa3e0;
  --blue:          #0b1f33;
  --violet:        #0077b6;
  --ir:            #00a3e0;
  --amber:         #0077b6;
  --green:         #2f7d32;

  --cyan-vivid:    #00a3e0;
  --violet-vivid:  #0077b6;
  --blue-vivid:    #005f92;
  --green-vivid:   #2f7d32;
  --amber-vivid:   #00a3e0;
  --ir-vivid:      #00a3e0;

  --tint:          rgba(0, 119, 182, .06);
  --tint-2:        rgba(0, 119, 182, .10);
  --tint-3:        rgba(0, 119, 182, .16);
  --accent-tint:   rgba(0, 163, 224, .14);
  --accent-line:   rgba(0, 119, 182, .42);
  --btn-sheen:     rgba(255, 255, 255, .22);
  --grid-line:     rgba(11, 31, 51, .05);
  --header-bg:     rgba(244, 247, 250, .94);
  --header-bg-on:  rgba(255, 255, 255, .98);
  --beam:          #00a3e0;
  --bar-stripe:    rgba(255, 255, 255, .35);
  --marker:        #0b1f33;

  --aurora-1:      rgba(0, 163, 224, .10);
  --aurora-2:      rgba(0, 119, 182, .05);
  --aurora-3:      rgba(11, 31, 51, .03);

  --grad-1: #0b1f33; --grad-2: #005f92; --grad-3: #0077b6; --grad-4: #00a3e0;
  --btn-1: #1a8fd0; --btn-2: #0077b6; --btn-3: #005f92;
  --footer-wash: rgba(238, 242, 246, .85);
  --hard-shadow: transparent;

  --accent:        #0077b6;
  /* logo cyan used for Spec / mark */
  --accent-ink:    #ffffff;

  --display: "Outfit", "Segoe UI", sans-serif;
  --font: "Outfit", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(2.2rem, 5vw, 4.2rem);
  --radius: 2px;
  --radius-lg: 4px;

  --max: 1180px;
  --max-narrow: 780px;

  --ring: 0 0 0 1px var(--line);
  --shadow: 0 18px 44px -22px rgba(11, 31, 51, .16);
  --glow: none;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #0a1628;
  --bg-raised:     #102033;
  --panel:         #15263c;
  --panel-2:       #1b2e46;
  --line:          #2c4a68;
  --line-soft:     #1e334c;

  --ink:           #f4f8fc;
  --ink-2:         #c5d4e4;
  --ink-3:         #8aa0b8;
  --ink-4:         #6a829a;

  --cyan:          #3db8e8;
  --blue:          #7ec8e8;
  --violet:        #3db8e8;
  --ir:            #3db8e8;
  --amber:         #3db8e8;
  --green:         #6aa86e;

  --cyan-vivid:    #5ecfff;
  --violet-vivid:  #3db8e8;
  --blue-vivid:    #2aa0d0;
  --green-vivid:   #6aa86e;
  --amber-vivid:   #5ecfff;
  --ir-vivid:      #3db8e8;

  --tint:          rgba(61, 184, 232, .10);
  --tint-2:        rgba(61, 184, 232, .16);
  --tint-3:        rgba(61, 184, 232, .24);
  --accent-tint:   rgba(61, 184, 232, .20);
  --accent-line:   rgba(61, 184, 232, .45);
  --btn-sheen:     rgba(255, 255, 255, .16);
  --grid-line:     rgba(255, 255, 255, .06);
  --header-bg:     rgba(10, 22, 40, .92);
  --header-bg-on:  rgba(10, 22, 40, .97);
  --beam:          #3db8e8;
  --bar-stripe:    rgba(0, 0, 0, .22);
  --marker:        #f4f8fc;

  --aurora-1:      rgba(61, 184, 232, .14);
  --aurora-2:      rgba(0, 119, 182, .08);
  --aurora-3:      rgba(10, 22, 40, .10);

  --grad-1: #f4f8fc; --grad-2: #5ecfff; --grad-3: #3db8e8; --grad-4: #0077b6;
  --btn-1: #3db8e8; --btn-2: #2aa0d0; --btn-3: #0077b6;
  --footer-wash: rgba(10, 22, 40, .5);

  --accent:        #3db8e8;
  --accent-ink:    #0a1628;
  --shadow: 0 22px 50px -24px rgba(0, 20, 40, .55);
  --glow: 0 0 40px -6px rgba(61, 184, 232, .35);
}

/* --- Base ----------------------------------------------------------------- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.65;
  overflow-x: hidden;
}

/* Quiet vignette — no neon bar, no full-page raster */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(900px 480px at 80% -10%, var(--aurora-1), transparent 70%);
}
body::after { display: none; }
body > * { position: relative; z-index: 1; }

/* Horizontal scan raster — not a square lattice */
.grid-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--grid-line) 0 1px,
    transparent 1px 16px
  );
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}

/* --- Typography ----------------------------------------------------------- */
h1, h2 {
  font-family: var(--display);
  line-height: 1.02;
  letter-spacing: .01em;
  font-weight: 700;
  text-transform: none;
  text-wrap: balance;
}
.article h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: 0;
  font-weight: 600;
  font-family: var(--display);
}
h3, h4 {
  font-family: var(--font);
  line-height: 1.25;
  letter-spacing: -.01em;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-size: 1.15rem; }
/* Semantic h3 that should *look* like an h4 — keeps the heading outline
   unbroken for screen readers without changing the visual hierarchy. */
h3.h4 { font-size: 1.12rem; letter-spacing: -.012em; }
p  { text-wrap: pretty; }

.lede { font-size: clamp(1.2rem, 2.2vw, 1.42rem); color: var(--ink-2); line-height: 1.6; }
.muted { color: var(--ink-3); }
.small { font-size: 1rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--cyan);
}

.grad {
  color: var(--cyan);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

/* --- Layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.narrow { max-width: var(--max-narrow); }
.section { padding-block: var(--section); position: relative; }
.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head p { margin-top: 1.1rem; }

.rule {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

.cols { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--header-bg);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
  transition: background .3s;
}
.site-header.is-stuck { background: var(--header-bg-on); }
.nav { display: flex; align-items: center; gap: 1.5rem; height: 72px; }

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.brand-mark {
  width: 46px; height: 46px; flex-shrink: 0;
  color: var(--ink);
}
:root[data-theme="dark"] .brand-mark { color: #fff; }
.brand-logo {
  height: auto; width: min(260px, 100%);
  max-width: 280px;
  object-fit: contain; display: block;
  background: #1c1c1c;
  border-radius: 8px;
  padding: 10px 12px;
}
@media (min-width: 1000px) {
  .brand-mark { width: 52px; height: 52px; }
  .nav { height: 80px; }
}
.brand-name {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 1.35rem;
  text-transform: none;
  color: var(--ink);
}
.brand-name span { color: #3aa3e0; font-style: normal; }

.nav-links { display: none; align-items: center; gap: .35rem; margin-left: auto; }
@media (min-width: 1000px) { .nav-links { display: flex; } }
.nav-links a {
  text-decoration: none;
  font-family: var(--font);
  font-size: 1rem;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--ink-2);
  padding: .4rem .62rem;
  border-radius: 3px;
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--ink); background: var(--tint-2); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-cta { margin-left: .55rem; }

/* Theme toggle — sun and moon swap on [aria-pressed] */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink-3);
  margin-left: .4rem;
  transition: color .2s, border-color .2s, background .2s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-4); background: var(--tint); }
/* Icon = destination: sun when in night (go to day), moon when in day (go to night) */
.theme-toggle .i-sun { display: none; }
.theme-toggle .i-moon { display: block; }
.theme-toggle[aria-pressed="true"] .i-sun { display: block; }
.theme-toggle[aria-pressed="true"] .i-moon { display: none; }
.nav-links .theme-toggle { margin-left: .55rem; }
/* On mobile it sits next to the hamburger rather than inside the drawer */
.nav > .theme-toggle { margin-left: auto; }
@media (min-width: 1000px) { .nav > .theme-toggle { display: none; } }
@media (max-width: 999px)  { .nav-links .theme-toggle { display: none; } }

.nav-toggle {
  margin-left: .4rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink-2);
}
@media (min-width: 1000px) { .nav-toggle { display: none; } }

.drawer {
  display: none;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-raised);
  padding: .75rem var(--pad) 1.5rem;
}
.drawer.is-open { display: block; }
@media (min-width: 1000px) { .drawer, .drawer.is-open { display: none; } }
.drawer a {
  display: block;
  padding: .8rem .25rem;
  text-decoration: none;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-soft);
  font-size: 1rem;
}
.drawer a:last-of-type { border-bottom: 0; }
.drawer .btn { margin-top: 1rem; width: 100%; justify-content: center; }

/* --- Buttons — quiet OEM, not poster blocks ------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.28rem;
  border-radius: 3px;
  font-family: var(--font);
  font-size: 1.05rem; font-weight: 600;
  text-decoration: none;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background .2s, border-color .2s, color .2s;
}
.btn:active { transform: none; }
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: none;
  letter-spacing: .03em;
}
.btn-primary:hover {
  background: var(--btn-3);
  border-color: var(--btn-3);
  transform: none;
  box-shadow: none;
}
.btn-ghost {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}
.btn-ghost:hover {
  background: var(--tint-2);
  border-color: var(--ink-4);
  transform: none;
  box-shadow: none;
}
.btn-sm { padding: .52rem 1.05rem; font-size: .95rem; letter-spacing: .01em; }
.btn .arw { transition: transform .22s; }
.btn:hover .arw { transform: translateX(3px); }

/* --- Hero — copy + one photo. No schematic overlay. ---------------------- */
.hero { position: relative; padding-block: clamp(2.4rem, 5vw, 4.2rem) clamp(2.6rem, 5.5vw, 4.6rem); overflow: hidden; }
.hero-iso {
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.hero-iso .grid-field,
.hero-iso .iso-scan { display: none; }
.hero-inner { position: relative; z-index: 2; }
.hero h1 { margin-bottom: 1.1rem; }
.hero .lede { max-width: 42ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.8rem; }

.hero-photo {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.hero-photo figcaption {
  font-family: var(--mono);
  font-size: .86rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: .7rem 1rem .85rem;
  border-top: 1px solid var(--line-soft);
}

@media (min-width: 900px) {
  .hero-iso .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0;
  margin-top: clamp(3.25rem, 7vw, 5rem);
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.hero-stats div {
  background: transparent;
  padding: 1.1rem 1.25rem 1.1rem 1.1rem;
  border-left: 2px solid var(--line);
}
.hero-stats b {
  display: block;
  font-family: var(--font);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: .3rem;
}
.hero-stats span {
  font-family: var(--font);
  font-size: .95rem;
  color: var(--ink-3);
  letter-spacing: 0;
  text-transform: none;
}

/* --- Cards ---------------------------------------------------------------- */
.card {
  position: relative;
  background: linear-gradient(168deg, var(--panel), var(--bg-raised));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.6vw, 1.85rem);
  transition: border-color .3s, transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.card:hover { border-color: var(--line); transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: .7rem; }
.card p { color: var(--ink-2); font-size: 1.08rem; }

a.card { text-decoration: none; display: block; }
a.card::after {
  content: "→";
  position: absolute; top: 1.35rem; right: 1.45rem;
  color: var(--ink-4);
  transition: color .25s, transform .25s;
}
a.card:hover::after { color: var(--cyan); transform: translateX(3px); }

.card-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 0;
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  color: var(--cyan);
  margin-bottom: 1.1rem;
}
.card-num {
  font-family: var(--mono);
  font-size: .88rem;
  letter-spacing: .17em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin-bottom: .85rem;
  display: block;
}

/* Material card accent stripe */
.card[data-accent]::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--stripe, var(--cyan)), transparent 72%);
  opacity: .85;
}

/* --- Spec list / table ---------------------------------------------------- */
.specs { list-style: none; padding: 0; display: grid; gap: 0; }
.specs li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem;
  padding: .72rem 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: .9rem;
}
.specs li:last-child { border-bottom: 0; }
.specs dt, .specs .k { color: var(--ink-3); }
.specs dd, .specs .v { font-family: var(--mono); color: var(--ink); text-align: right; font-size: 1.02rem; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--radius); }
table.data { width: 100%; min-width: 660px; font-size: 1.04rem; }
table.data th, table.data td { padding: .88rem 1.05rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.data thead th {
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: .88rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--tint); }
table.data td { color: var(--ink-2); }
table.data td:first-child { color: var(--ink); font-weight: 550; white-space: nowrap; }
table.data .num { font-family: var(--mono); color: var(--ink); }

/* --- Chips / badges ------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font-family: var(--mono);
  font-size: 1.06rem;
  letter-spacing: .06em;
  padding: .34rem .68rem;
  border-radius: 0;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--tint);
}
.chip.on { border-color: var(--accent-line); color: var(--cyan); background: var(--accent-tint); }

/* --- Steps / process ------------------------------------------------------ */
.steps { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: s; }
.steps li {
  counter-increment: s;
  position: relative;
  padding: 1.5rem 0 1.5rem 4.25rem;
  border-bottom: 1px solid var(--line-soft);
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 1.5rem;
  font-family: var(--mono);
  font-size: .98rem;
  color: var(--cyan);
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: 0;
  background: var(--accent-tint);
}
.steps h4 { margin-bottom: .35rem; }
.steps p { color: var(--ink-3); font-size: 1.06rem; }

/* --- Panels / callouts ---------------------------------------------------- */
.panel {
  background: linear-gradient(160deg, var(--panel), var(--bg-raised));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.panel-accent {
  border-color: var(--accent-line);
  background:
    radial-gradient(700px 300px at 10% 0%, var(--accent-tint), transparent 62%),
    linear-gradient(160deg, var(--panel), var(--bg-raised));
}

.note {
  border-left: 2px solid var(--cyan);
  padding: .3rem 0 .3rem 1.15rem;
  color: var(--ink-2);
  font-size: 1.06rem;
}

/* --- Certifications --------------------------------------------------------
   Two states. The finished state is the default and is what ships once a
   certificate is in hand. Adding .is-pending to a .cert marks it as not yet
   held: dashed frame, muted, and a PENDING chip — so an unverified claim can
   never be mistaken for a real one while the section is being filled in.
   To publish one: replace the placeholder values and delete `is-pending`.
   -------------------------------------------------------------------------- */
.cert {
  position: relative;
  display: grid;
  gap: .85rem;
  padding: clamp(1.35rem, 2.6vw, 1.75rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(168deg, var(--panel), var(--bg-raised));
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.cert:hover { border-color: var(--line); transform: translateY(-2px); box-shadow: var(--shadow); }

.cert-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cert-standard {
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
}
.cert-scope { font-size: 1.02rem; color: var(--ink-3); margin-top: .2rem; }

.cert-seal {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  background: var(--accent-tint);
  color: var(--cyan);
}

.cert-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: .75rem 1.1rem;
  padding-top: .85rem;
  border-top: 1px dashed var(--line-soft);
}
.cert-meta > div { display: grid; gap: .15rem; }
.cert-meta span {
  font-family: var(--mono);
  font-size: .80rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.cert-meta b {
  font-family: var(--mono);
  font-size: .98rem;
  font-weight: 500;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.cert-doc {
  font-size: .98rem;
  text-decoration: none;
  color: var(--cyan);
  display: inline-flex; align-items: center; gap: .4rem;
}
.cert-doc:hover { text-decoration: underline; }

/* --- Pending state --- */
.cert.is-pending {
  border-style: dashed;
  border-color: var(--line);
  background: none;
}
.cert.is-pending:hover { transform: none; box-shadow: none; }
.cert.is-pending .cert-standard,
.cert.is-pending .cert-meta b { color: var(--ink-3); }
.cert.is-pending .cert-seal { border-color: var(--line); background: none; color: var(--ink-4); }
.cert.is-pending .cert-meta b { font-style: italic; }
.cert.is-pending .cert-doc { display: none; }
.cert-pending-chip {
  position: absolute; top: 1rem; right: 1.1rem;
  font-family: var(--mono);
  font-size: .95rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 999px;
  padding: .18rem .5rem;
}
.cert:not(.is-pending) .cert-pending-chip { display: none; }
.cert:not(.is-pending) .cert-head { padding-right: 0; }
.cert.is-pending .cert-head { padding-right: 5.5rem; }

/* --- Photography ----------------------------------------------------------
   Photos sit in a fixed-ratio frame so a replacement image of any size drops
   in without shifting the layout. Swap the file, keep the markup.
   -------------------------------------------------------------------------- */
.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: var(--panel-2);
  aspect-ratio: 3 / 2;
}
.photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.photo-zoom:hover img { transform: scale(1.035); }
.photo-tall { aspect-ratio: 4 / 5; }
.photo-wide { aspect-ratio: 16 / 9; }

/* Caption bar over the bottom of a photo */
.photo-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.15rem .85rem;
  font-family: var(--mono);
  font-size: .86rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #f2f6fd;
  background: linear-gradient(to top, rgba(6, 12, 24, .82), transparent);
}

/* Photo + copy side by side */
.media {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .media { grid-template-columns: 1fr 1fr; }
  .media-flip > .photo { order: 2; }
}

/* --- Figures -------------------------------------------------------------- */
figure { margin: 0; }
figcaption {
  margin-top: .95rem;
  font-size: .96rem;
  color: var(--ink-4);
  font-family: var(--mono);
  letter-spacing: .015em;
}
.figure-frame {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--panel), var(--bg));
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
  overflow-x: auto;
}

/* --- Forms ---------------------------------------------------------------- */
.form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: 1.02rem; color: var(--ink-2); }
.field .req { color: var(--cyan); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: .78rem .95rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.form-row { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, transparent, var(--footer-wash));
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  margin-top: clamp(3rem, 8vw, 6rem);
}
.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  margin-bottom: 3rem;
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; } }
/* Footer column labels are navigation labels, not document headings — plain
   text keeps them out of the heading outline. */
.footer-grid .footer-label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 1.05rem;
  font-weight: 500;
}
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.footer-grid a { text-decoration: none; color: var(--ink-2); font-size: .9rem; transition: color .2s; }
.footer-grid a:hover { color: var(--cyan); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: center;
  padding-top: 1.85rem;
  border-top: 1px solid var(--line-soft);
  font-size: .98rem;
  color: var(--ink-4);
}
.footer-bottom a { color: var(--ink-3); text-decoration: none; }
.footer-bottom a:hover { color: var(--cyan); }
.footer-disclaimer {
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line-soft);
  font-size: .95rem;
  color: var(--ink-3);
  max-width: 82ch;
  line-height: 1.55;
}
.footer-disclaimer a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.footer-disclaimer a:hover { color: var(--cyan); }

/* --- CTA band ------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius-lg);
  padding: clamp(2.25rem, 5vw, 3.75rem);
  text-align: left;
  background: var(--panel);
}
.cta-band h2 { margin-bottom: 1rem; }
.cta-band .eyebrow.jc-center,
.cta-band .hero-actions.jc-center { justify-content: flex-start; }
.cta-band p { color: var(--ink-2); max-width: 56ch; margin-inline: 0; }
.cta-band .hero-actions { justify-content: flex-start; }

/* --- Accessibility -------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px;
  top: .5rem;
  background: var(--cyan); color: var(--accent-ink);
  padding: .7rem 1.15rem; border-radius: 8px; z-index: 999;
  font-weight: 600; text-decoration: none;
}
.skip:focus { left: .5rem; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.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;
}

/* --- Reveal on scroll ----------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* --- FTIR bench motion (no orbit, no prism fan) --------------------------- */
@keyframes iso-scan {
  0%   { top: -4%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 104%; opacity: 0; }
}
@keyframes iso-piston {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(16px); }
}
@keyframes iso-phase { to { stroke-dashoffset: -220; } }
@keyframes iso-pulse {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}
.iso-scan {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 3; overflow: hidden;
}
.iso-scan::before {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: none;
  opacity: .45;
  animation: iso-scan 8s linear infinite;
}
.iso-m2 { animation: iso-piston 3.1s ease-in-out infinite; }
.iso-igram { stroke-dasharray: 8 10; animation: iso-phase 1.7s linear infinite; }
.iso-pulse { animation: iso-pulse 2.4s ease-in-out infinite; }
.iso-beam { animation: iso-pulse 2.8s ease-in-out infinite; }
.iso-bench {
  position: relative;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--line);
  padding: .85rem .7rem .55rem;
}
.iso-cap {
  margin-top: .85rem;
  font-family: var(--mono);
  font-size: .86rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ==========================================================================
   SPECTRAL EXPLORER — interactive wavelength / material selector
   ========================================================================== */
.explorer { padding: clamp(1.5rem, 3.5vw, 2.75rem); }

/* --- Readout -------------------------------------------------------------- */
.ex-readout {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  grid-template-columns: 1fr;
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 780px) { .ex-readout { grid-template-columns: auto 1fr; } }

.ex-lambda { display: flex; align-items: baseline; gap: .4rem; }
.ex-val {
  font-family: var(--mono);
  font-size: clamp(2.6rem, 7vw, 4rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color .35s;
}
.ex-unit { font-family: var(--mono); font-size: 1.15rem; color: var(--ink-3); }

.ex-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 1rem 1.25rem;
}
.ex-meta > div { display: grid; gap: .18rem; }
.ex-meta span {
  font-family: var(--mono);
  font-size: .98rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.ex-meta b {
  font-family: var(--mono);
  font-size: .965rem;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ex-meta b.hl { color: var(--ink); }

/* --- Spectrum bar --------------------------------------------------------- */
.ex-spectrum { position: relative; }

.ex-bandrow {
  display: flex;
  font-family: var(--mono);
  font-size: .80rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: .5rem;
}
.ex-bandrow i { font-style: normal; text-align: center; overflow: hidden; white-space: nowrap; border-left: 1px solid var(--line-soft); }
.ex-bandrow i:first-child { border-left: 0; }

.ex-bar {
  position: relative;
  height: 62px;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  /* UV → visible rainbow → NIR → SWIR → MWIR → LWIR → FIR */
  background: linear-gradient(90deg,
    #12061f   0%,
    #2c0a52  12%,
    #4c1d95 21.6%,
    #7c3aed 21.6%,
    #2563eb 24.8%,
    #06b6d4 26.4%,
    #22c55e 27.8%,
    #eab308 29.5%,
    #f97316 30.5%,
    #ef4444 31.6%,
    #b91c1c 33.0%,
    #7f1d1d 35.1%,
    #641b18 46.0%,
    #4a1a1f 60.3%,
    #351a2c 78.7%,
    #241a3a 90.4%,
    #14142b 100%);
}
/* fine vertical striations for a "sensor" feel */
.ex-bar::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, var(--bar-stripe) 0 1px, transparent 1px 14px);
  pointer-events: none;
}
/* Bracket marking the visible band — deliberately dimmer than the marker
   so the bright white line always reads as "you are here". */
.ex-visible-tag {
  position: absolute;
  left: 21.6%; width: 13.5%;
  top: 0; bottom: 0;
  border-left: 1px dashed var(--marker);
  border-right: 1px dashed var(--marker);
  pointer-events: none;
}

.ex-marker {
  position: absolute;
  top: -9px; bottom: -9px;
  left: 82.8%;              /* CO₂ line — JS moves it from here */
  width: 2px;
  background: var(--marker);
  box-shadow: 0 0 14px 2px var(--marker), 0 0 30px 6px var(--accent-line);
  transform: translateX(-1px);
  transition: left .12s linear;
  pointer-events: none;
  z-index: 3;
}
.ex-marker::before {
  content: "";
  position: absolute; top: -6px; left: 50%;
  width: 11px; height: 11px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--marker);
  border-radius: 2px;
}

.ex-range {
  -webkit-appearance: none; appearance: none;
  position: absolute;
  left: 0; right: 0;
  top: 0; height: 62px;
  width: 100%;
  background: transparent;
  cursor: ew-resize;
  margin: 0;
  z-index: 4;
}
.ex-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 62px;
  background: transparent;
  border: 0;
  cursor: ew-resize;
}
.ex-range::-moz-range-thumb {
  width: 30px; height: 62px;
  background: transparent; border: 0;
  cursor: ew-resize;
}
.ex-range:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 10px; }

.ex-ticks {
  position: relative;
  height: 20px;
  margin-top: .45rem;
  font-family: var(--mono);
  font-size: .98rem;
  color: var(--ink-4);
}
.ex-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

.ex-hint {
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.ex-hint svg { flex-shrink: 0; }

/* --- Laser presets -------------------------------------------------------- */
.ex-presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.ex-presets button {
  font-family: var(--mono);
  font-size: .88rem;
  letter-spacing: .04em;
  padding: .42rem .8rem;
  border-radius: 0;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--tint);
  transition: border-color .2s, color .2s, background .2s, transform .15s;
}
.ex-presets button:hover { color: var(--ink); border-color: var(--line); transform: translateY(-1px); }
.ex-presets button[aria-pressed="true"] {
  border-color: var(--accent-line);
  color: var(--cyan);
  background: var(--accent-tint);
}

/* --- Material result grid ------------------------------------------------- */
.ex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 218px), 1fr));
  gap: .7rem;
  margin-top: 1.9rem;
}
.ex-mat {
  position: relative;
  display: grid;
  gap: .3rem;
  padding: .95rem 1.05rem;
  border: 1px solid var(--line-soft);
  border-radius: 0;
  background: var(--tint);
  opacity: .3;
  filter: saturate(.25);
  transition: opacity .38s, filter .38s, border-color .38s, background .38s, transform .3s;
}
.ex-mat.on {
  opacity: 1;
  filter: none;
  border-color: var(--accent-line);
  background: linear-gradient(160deg, var(--accent-tint), var(--tint));
  transform: translateY(-2px);
}
.ex-mat.on.reflect { border-color: var(--amber-vivid); background: linear-gradient(160deg, var(--accent-tint), var(--tint)); }
.ex-mat-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.ex-mat-sym { font-family: var(--mono); font-size: .95rem; color: var(--ink); font-weight: 500; }
.ex-mat-name { font-size: 1.06rem; color: var(--ink-3); }
.ex-mat-range { font-family: var(--mono); font-size: .88rem; color: var(--ink-4); }
.ex-mat .tagr {
  font-family: var(--mono); font-size: .95rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--amber);
}
.ex-mat.on .ex-mat-range { color: var(--cyan); }
.ex-mat.on.reflect .ex-mat-range { color: var(--amber); }

/* Per-material transmission mini-bar */
.ex-mat-bar {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: var(--line-soft);
  margin-top: .3rem;
  overflow: hidden;
}
.ex-mat-bar i {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  opacity: .55;
  border-radius: 2px;
}
.ex-mat.on .ex-mat-bar i { opacity: 1; }

.ex-empty {
  grid-column: 1 / -1;
  padding: 1.25rem;
  border: 1px dashed var(--line);
  border-radius: 11px;
  color: var(--ink-3);
  font-size: .9rem;
  text-align: center;
}

.orbit-hero, .fan, .prism-body, .anim-orbit, .ray-ir { animation: none; }

/* ==========================================================================
   LAYOUT UTILITIES
   These exist so the markup carries zero inline style attributes, which lets
   the production CSP stay at `style-src 'self'` with no 'unsafe-inline'.
   Declared last so they win over the component rules above.
   ========================================================================== */
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }
.pt-sm { padding-top: 2rem; }
.pt-md { padding-top: clamp(2rem, 5vw, 4rem); }
.jc-center { justify-content: center; }
.ai-start { align-items: start; }
.ta-left { text-align: left; }
.mb-1r { margin-bottom: 1rem; }
.mw-34 { max-width: 34ch; }
.mw-66 { max-width: 66ch; }
.mw-68 { max-width: 68ch; }
.mw-48c { max-width: 48ch; margin-inline: auto; }
.mw-52c { max-width: 52ch; margin-inline: auto; }
.divider-top { border-top: 1px solid var(--line-soft); padding-top: 1.15rem; }
.fig-hero { max-width: 640px; margin-inline: auto; }
.fig-404 { max-width: 300px; margin: 0 auto 2rem; }
.icon-center { margin: 0 auto 1.5rem; }
.orbit-hero { transform-origin: 300px 240px; }

/* Card accent stripes (consumed by .card[data-accent]::before) */
.st-green  { --stripe: var(--green-vivid); }
.st-cyan   { --stripe: var(--cyan-vivid); }
.st-blue   { --stripe: var(--blue-vivid); }
.st-amber  { --stripe: var(--amber-vivid); }
.st-violet { --stripe: var(--violet-vivid); }
.st-rose   { --stripe: var(--ir-vivid); }

/* Spectral band label widths — must match the log scale in spectrum.js */
.bw-uv   { width: 21.59%; }
.bw-vis  { width: 13.47%; }
.bw-nir  { width: 10.95%; }
.bw-swir { width: 14.28%; }
.bw-mwir { width: 18.37%; }
.bw-lwir { width: 11.77%; }
.bw-fir  { width: 9.57%; }

/* Axis tick positions on the spectrum bar */
.tk-02 { left: 9.57%; }
.tk-05 { left: 26.73%; }
.tk-1  { left: 39.71%; }
.tk-2  { left: 52.69%; }
.tk-5  { left: 69.86%; }
.tk-10 { left: 82.84%; }
.tk-20 { left: 95.82%; }

/* --- Utilities ------------------------------------------------------------ */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .6rem; }
.mt-2 { margin-top: 1.25rem; }
.mt-3 { margin-top: 2rem; }
.mt-4 { margin-top: 3rem; }
.center { text-align: center; }
.mono { font-family: var(--mono); }

/* Footer email — the one contact detail that should never be hunted for */
.footer-email {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 1px;
}
.footer-email:hover { border-bottom-color: var(--cyan); }

/* --- Cookie consent banner ------------------------------------------------ */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  padding: .9rem 0 calc(.9rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg-raised);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 40px -20px rgba(60, 10, 90, .45);
}
.cookie-banner[hidden] { display: none !important; }
.cookie-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}
.cookie-banner p {
  margin: 0;
  color: var(--ink-2);
  font-size: .9rem;
  line-height: 1.5;
  max-width: 62ch;
}
.cookie-banner a { color: var(--cyan); font-weight: 600; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .55rem; }

/* --- Breadcrumbs ---------------------------------------------------------- */
.crumbs {
  font-family: var(--mono);
  font-size: .90rem;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin-bottom: 1.25rem;
  display: flex; flex-wrap: wrap; gap: .35rem .55rem; align-items: center;
}
.crumbs a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--cyan); border-bottom-color: var(--accent-line); }
.crumbs .sep { color: var(--ink-4); }

/* --- FAQ (details/summary) ------------------------------------------------ */
.faq-list { display: grid; gap: .7rem; max-width: var(--max-narrow); }
.faq-list details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 0;
  overflow: hidden;
}
.faq-list summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.15rem;
  font-weight: 600;
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--cyan);
  flex-shrink: 0;
}
.faq-list details[open] summary::after { content: "–"; }
.faq-list details[open] summary { border-bottom: 1px solid var(--line-soft); }
.faq-list details p {
  padding: .85rem 1.15rem 1.15rem;
  color: var(--ink-2);
  font-size: .95rem;
  line-height: 1.65;
}
.faq-list details a { color: var(--cyan); font-weight: 600; }

/* --- Engineering notes / blog --------------------------------------------- */
.blog-list { display: grid; gap: 1rem; }
@media (min-width: 800px) {
  .blog-list { grid-template-columns: 1fr 1fr; }
}
.blog-card {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.35rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  height: 100%;
  overflow: hidden;
}
.blog-card img.blog-thumb {
  display: block;
  width: calc(100% + 2.7rem);
  max-width: none;
  height: 148px;
  object-fit: cover;
  margin: -1.25rem -1.35rem 1rem;
}
.blog-card:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.blog-card .blog-meta {
  font-family: var(--mono);
  font-size: .86rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: .55rem;
}
.blog-card h2, .blog-card h3 {
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 .55rem;
  color: var(--ink);
}
.blog-card p { color: var(--ink-2); font-size: 1.06rem; flex: 1; margin: 0; }
.blog-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.blog-tags span {
  font-family: var(--mono);
  font-size: .80rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid var(--accent-line);
  padding: .28rem .55rem;
  border-radius: 999px;
  background: var(--accent-tint);
}

.article { max-width: var(--max-narrow); margin-inline: auto; }
.article-hero {
  margin: 1.15rem 0 1.85rem;
  border: 1px solid var(--line);
  background: var(--panel-2);
  overflow: hidden;
}
.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  height: auto;
}
.article-hero figcaption {
  margin: 0;
  padding: .75rem 1rem 1rem;
  font-size: .95rem;
  color: var(--ink-3);
}
.article-body h3 { margin: 1.55rem 0 .45rem; color: var(--ink); }
.article-body .note { margin: 1.35rem 0; }
.article .blog-meta {
  font-family: var(--mono);
  font-size: .90rem;
  color: var(--ink-4);
  letter-spacing: .04em;
  margin-bottom: .75rem;
}
.article .lede { margin-top: .75rem; }
.article-body { margin-top: 1.75rem; }
.article-body p {
  color: var(--ink-2);
  line-height: 1.72;
  margin: 0 0 1.05rem;
}
.article-body h2 {
  font-size: 1.2rem;
  margin: 2rem 0 .7rem;
  color: var(--ink);
}
.article-body ul {
  color: var(--ink-2);
  margin: 0 0 1.05rem 1.2rem;
  line-height: 1.65;
}
.article-body li { margin: .35rem 0; }
.article-body a { color: var(--cyan); font-weight: 600; }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body table {
  width: 100%;
  margin: 1.4rem 0 1.8rem;
  font-size: 1.06rem;
  border-collapse: collapse;
}
.article-body th, .article-body td {
  text-align: left;
  vertical-align: top;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--line-soft);
}
.article-body th {
  font-family: var(--mono);
  font-size: .86rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--accent-line);
}

.article-cta {
  margin: 2.25rem 0 0;
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--accent-line);
  background: var(--accent-tint);
}
.article-cta p { color: var(--ink-2); margin: .4rem 0 1rem; font-size: .95rem; }
.article-cta .hero-actions { margin-top: 0; }

/* Illustrative transmission band chart (token-based; not a datasheet) */
.band-chart {
  margin: 1.25rem 0 1.75rem;
  padding: 1rem 1.1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.band-chart-label {
  font-family: var(--mono);
  font-size: .86rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .65rem;
}
.band-chart-track {
  position: relative;
  height: 2rem;
  border-radius: 8px;
  background: var(--tint-2);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.band-chart-win {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 6px;
  opacity: .85;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: .80rem;
  color: var(--accent-ink);
  padding: 0 .35rem;
  white-space: nowrap;
  overflow: hidden;
}
/* Wavelength-coded fills (deliberate literals — same exception as prism/IR rays) */
.band-win-uv   { background: #8b5cf6; color: #fff; }
.band-win-vis  { background: #22c55e; color: #052e16; }
.band-win-nir  { background: #f59e0b; color: #1c1003; }
.band-win-mwir { background: #f97316; color: #1c0a02; }
.band-win-lwir { background: #ef4444; color: #fff; }
.band-win-broad { background: linear-gradient(90deg, #06b6d4, #a855f7, #f59e0b); color: #04121a; }
.band-chart-axis {
  display: flex; justify-content: space-between;
  margin-top: .45rem;
  font-family: var(--mono);
  font-size: .80rem;
  color: var(--ink-4);
}
.band-chart-note {
  margin-top: .55rem;
  font-size: .95rem;
  color: var(--ink-3);
}

/* Position helpers for band windows (log-ish visual, illustrative only) */
.bw-pos-uv   { left: 4%;  width: 18%; }
.bw-pos-vis  { left: 20%; width: 14%; }
.bw-pos-nir  { left: 32%; width: 16%; }
.bw-pos-si   { left: 38%; width: 28%; }
.bw-pos-ge   { left: 48%; width: 32%; }
.bw-pos-znse { left: 28%; width: 58%; }
.bw-pos-zns  { left: 24%; width: 52%; }
.bw-pos-chal { left: 30%; width: 48%; }
.bw-pos-caf2 { left: 6%;  width: 55%; }
.bw-pos-sio2 { left: 8%;  width: 36%; }
.bw-pos-sys  { left: 6%;  width: 80%; }

.ml-btn { margin-left: .55rem; }
.gap-hero { gap: .65rem; }

.site-footer .brand-logo { height: 46px; max-width: 210px; }
.file-drop {
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; background: var(--panel-2);
}
.file-drop input[type=file] { width: 100%; margin-top: .45rem; }
.quote-checklist { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .55rem; }
.quote-checklist li {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: 1.06rem; color: var(--ink-2);
}
.quote-checklist li::before { content: "✓"; color: var(--cyan); font-weight: 700; flex-shrink: 0; }
.trust-row {
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
  align-items: center; margin-top: 1.25rem;
}
.trust-pill {
  font-family: var(--mono); font-size: .86rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 0;
  padding: .4rem .75rem; background: var(--panel);
}
.media-stack { display: grid; gap: 1rem; }
@media (min-width: 800px) {
  .media-stack { grid-template-columns: 1fr 1fr; }
}