/* ==========================================================================
   Advance Semiconductor — advancesemi.com
   Quartzware, mono-cast silicon parts, technical ceramics, chamber refurb.
   Single stylesheet, no dependencies, no build step.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Surfaces — blue-cast neutrals, chosen to sit under the logo blue */
  --ink:       #0D1318;
  --ink-2:     #16202A;
  --ink-3:     #223140;
  --paper:     #ffffff;
  --mist:      #F1F4F6;   /* cool section band — cleanroom white */
  --mist-2:    #E3E9ED;

  /* Text */
  --text:      #141B22;
  --text-2:    #46535F;
  --muted:     #6B7885;
  --on-ink:    #E8EEF3;
  --on-ink-2:  #9BAEBD;

  /* Lines */
  --line:      #DFE4E8;
  --line-2:    #C9D2D9;
  --line-ink:  rgba(255,255,255,.14);

  /* Material identity — used consistently sitewide.
     These three colours mean something and are not decorative:
       teal  = fused quartz
       steel = silicon
       amber = technical ceramics                                   */
  --quartz:     #217E9B;
  --quartz-lt:  #E2EFF3;
  --silicon:    #5C6B80;
  --silicon-lt: #E8EAEE;
  --ceramic:    #A4562C;
  --ceramic-lt: #F5E8E0;

  /* Brand + state */
  --accent:    #2C5AA0;   /* from the ASI cube mark */
  --accent-h:  #1F4179;
  --accent-lt: #E5EBF5;
  --on-accent: #F1F4F6;   /* off-white label on accent fills — 6.1:1 on --accent */
  --live:      #2F7D55;   /* turn-time / in-stock signals */
  --live-lt:   #E2EFE8;
  --warn:      #9A5A1B;

  /* Type */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
          "Liberation Mono", Menlo, monospace;

  /* Metrics */
  --wrap:   1200px;
  --narrow: 780px;
  --r: 3px;
  --shadow: 0 1px 2px rgba(13,19,24,.05), 0 10px 30px -14px rgba(13,19,24,.20);
}

/* --- Base ----------------------------------------------------------------- */
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: clamp(2.05rem, 5vw, 3.35rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.3rem);  letter-spacing: -.03em; }
h3 { font-size: 1.14rem; letter-spacing: -.015em; }
h4 { font-size: .97rem; }
p  { color: var(--text-2); text-wrap: pretty; }
strong { color: var(--text); font-weight: 600; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-h); text-decoration: underline; text-underline-offset: 3px; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px;
}
.skip:focus { left: 0; }

/* --- Layout helpers ------------------------------------------------------- */
.wrap   { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.narrow { max-width: var(--narrow); }
.section        { padding-block: clamp(56px, 8vw, 100px); }
.section--tight { padding-block: clamp(40px, 5vw, 62px); }
.band-mist { background: var(--mist); border-block: 1px solid var(--line); }
.band-ink  { background: var(--ink); color: var(--on-ink); }
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4 { color: #fff; }
.band-ink p { color: var(--on-ink-2); }
.band-ink a { color: #fff; }

.eyebrow {
  font-family: var(--mono);
  font-size: .71rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; display: inline-block;
  width: 24px; height: 1px; background: var(--accent);
  vertical-align: middle; margin: 0 10px 2px 0;
}
.band-ink .eyebrow, .hero .eyebrow, .pagehead .eyebrow, .cta .eyebrow { color: var(--on-ink-2); }
.band-ink .eyebrow::before, .hero .eyebrow::before,
.pagehead .eyebrow::before, .cta .eyebrow::before { background: var(--quartz); }

.lede { font-size: clamp(1.02rem, 1.6vw, 1.2rem); color: var(--text-2); max-width: 68ch; }
.band-ink .lede, .hero .lede, .pagehead .lede { color: var(--on-ink-2); }

.grid { display: grid; gap: 26px; }
/* Grid and flex children default to min-width:auto, so a wide child (a spec
   table with a min-width) pushes the track past the viewport instead of
   scrolling inside its own wrapper. Let the tracks shrink. */
.grid > *, .split > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } }

.stack > * + * { margin-top: 1em; }
.mt-s { margin-top: 14px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 48px; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: .93rem; font-weight: 600;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-h); color: var(--on-accent); }
.btn--ghost { border-color: var(--line-2); color: var(--text); background: transparent; }
.btn--ghost:hover { border-color: var(--text); color: var(--text); }
.band-ink .btn--ghost, .hero .btn--ghost, .pagehead .btn--ghost, .cta .btn--ghost {
  border-color: rgba(255,255,255,.34); color: #fff;
}
.band-ink .btn--ghost:hover, .hero .btn--ghost:hover,
.pagehead .btn--ghost:hover, .cta .btn--ghost:hover {
  border-color: rgba(255,255,255,.62); background: rgba(255,255,255,.07); color: #fff;
}
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: #E8EEF3; color: var(--ink); }
.btn .arw { transition: transform .16s ease; }
.btn:hover .arw { transform: translateX(3px); }

/* --- Header / nav --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: 20px; min-height: 68px; }

.brand { display: flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none; }
.brand:hover { text-decoration: none; color: var(--text); }
/* The mark is taller than it is wide; contain keeps a square box from
   stretching it if the artwork is ever swapped for another aspect. */
.brand__mark { width: 32px; height: 32px; flex: none; object-fit: contain; }
.brand__name {
  display: block; font-weight: 700; font-size: 1.02rem;
  letter-spacing: -.025em; line-height: 1.1;
}
.brand__sub {
  display: block; font-family: var(--mono);
  font-size: .61rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--muted); line-height: 1.4;
}

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
/* :not(.btn) throughout — these selectors are more specific than .btn--primary,
   so without it they repaint the quote button's label and hover fill. */
.nav > a:not(.btn) {
  padding: 9px 12px; font-size: .89rem; font-weight: 500;
  color: var(--text-2); border-radius: var(--r); white-space: nowrap;
}
.nav > a:not(.btn):hover { color: var(--text); background: var(--mist); text-decoration: none; }
/* Current-page treatment is for the plain nav links only. Excluding .btn keeps
   this from overriding the quote button's own fill — it is more specific than
   .btn--primary, so without :not() it paints accent text on an accent background. */
.nav > a[aria-current="page"]:not(.btn) { color: var(--accent); font-weight: 600; }
.nav .btn { margin-left: 8px; padding: 10px 18px; white-space: nowrap; }

/* Dropdown ------------------------------------------------------------- */
.nav__group { position: relative; }
.nav__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px; font-size: .89rem; font-weight: 500;
  color: var(--text-2); background: none; border: 0; border-radius: var(--r);
}
.nav__trigger:hover { color: var(--text); background: var(--mist); }
.nav__trigger::after {
  content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .16s ease;
}
.nav__group[data-open="true"] .nav__trigger::after { transform: rotate(-135deg) translate(-3px, -3px); }
.nav__group[data-open="true"] .nav__trigger { color: var(--text); background: var(--mist); }

.nav__menu {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 290px; padding: 8px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
}
/* Invisible bridge across the 8px gap between trigger and menu. The menu is a
   descendant of .nav__group, so keeping the pointer over this counts as still
   being inside the group and mouseleave never fires mid-journey. */
.nav__menu::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -9px; height: 9px;
}
.nav__group[data-open="true"] .nav__menu { display: block; }
.nav__menu a {
  display: block; padding: 9px 11px; border-radius: var(--r);
  font-size: .89rem; font-weight: 500; color: var(--text);
}
.nav__menu a:hover { background: var(--mist); text-decoration: none; }
.nav__menu a span {
  display: block; font-size: .78rem; font-weight: 400;
  color: var(--muted); line-height: 1.4; margin-top: 1px;
}

.nav-toggle {
  display: none; margin-left: auto;
  width: 42px; height: 38px; background: none;
  border: 1px solid var(--line-2); border-radius: var(--r);
  position: relative;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 50%; width: 17px; height: 1.5px;
  background: var(--text); transform: translateX(-50%);
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle span { top: 50%; margin-top: -.75px; }
.nav-toggle span::before { top: -6px; left: 0; transform: none; }
.nav-toggle span::after  { top:  6px; left: 0; transform: none; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px 24px 20px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .nav[data-open="true"] { display: flex; }
  .nav > a, .nav__trigger { width: 100%; text-align: left; padding: 11px 4px; }
  .nav .btn { margin: 10px 0 0; justify-content: center; }
  .nav__menu {
    position: static; display: block; min-width: 0;
    border: 0; border-left: 2px solid var(--line); border-radius: 0;
    box-shadow: none; margin: 0 0 6px 6px; padding: 0 0 0 8px;
  }
  .nav__trigger::after { margin-left: auto; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  background: var(--ink);
  color: var(--on-ink);
  padding-block: clamp(64px, 9vw, 128px);
  position: relative; overflow: hidden; isolation: isolate;
}

/* Photograph sits behind the copy. The source is already vignetted to near
   black at its edges, so it blends into --ink without a hard boundary. */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;   /* holds the glowing tube in frame as it crops */
}
/* Scrim: horizontal ramp keeps the copy side legible, vertical ramp settles
   the top edge under the sticky header and grounds the facts strip. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      var(--ink) 0%,
      rgba(13, 19, 24, .94) 26%,
      rgba(13, 19, 24, .62) 52%,
      rgba(13, 19, 24, .18) 78%,
      rgba(13, 19, 24, .30) 100%),
    linear-gradient(180deg,
      rgba(13, 19, 24, .55) 0%,
      rgba(13, 19, 24, 0) 26%,
      rgba(13, 19, 24, 0) 62%,
      rgba(13, 19, 24, .55) 100%);
}
.hero > .wrap { position: relative; z-index: 1; }

.hero h1 { color: #fff; max-width: 17ch; }
.hero__layout { max-width: 38rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Narrower viewports crop the photo hard and the copy covers more of it, so
   the scrim goes flat and heavy rather than directional. */
@media (max-width: 860px) {
  .hero__media img { object-position: 58% 50%; }
  .hero__media::after {
    background:
      linear-gradient(180deg,
        rgba(13, 19, 24, .82) 0%,
        rgba(13, 19, 24, .72) 45%,
        rgba(13, 19, 24, .88) 100%);
  }
}

/* Turn-time bar under the hero copy */
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 10px 34px;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid var(--line-ink);
}
.hero__fact { display: flex; flex-direction: column; gap: 2px; }
.hero__fact b {
  font-family: var(--mono); font-size: 1.18rem; font-weight: 700;
  color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.hero__fact span {
  font-family: var(--mono); font-size: .63rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--on-ink-2);
}

/* --- Page head (inner pages) ---------------------------------------------- */
.pagehead {
  background: var(--ink); color: var(--on-ink);
  padding-block: clamp(46px, 6vw, 78px);
}
.pagehead h1 { color: #fff; max-width: 20ch; }
.pagehead .lede { margin-top: 18px; }

/* Optional photograph behind a page head — same pattern as the hero, reusable
   on any inner page. Add .pagehead--media plus the .pagehead__media block. */
.pagehead--media { position: relative; overflow: hidden; isolation: isolate; }
.pagehead--media { padding-block: clamp(56px, 7vw, 96px); }
.pagehead__media { position: absolute; inset: 0; z-index: 0; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* Mirrors a photograph whose bright side falls under the copy, so the blown
   highlight becomes a soft glow behind the text instead of fighting it. */
.pagehead__media--flip img { transform: scaleX(-1); }
.pagehead__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      var(--ink) 0%,
      rgba(13, 19, 24, .96) 34%,
      rgba(13, 19, 24, .86) 50%,
      rgba(13, 19, 24, .55) 72%,
      rgba(13, 19, 24, .40) 100%),
    linear-gradient(180deg,
      rgba(13, 19, 24, .50) 0%,
      rgba(13, 19, 24, .12) 34%,
      rgba(13, 19, 24, .12) 60%,
      rgba(13, 19, 24, .52) 100%);
}
/* Counterpart to the default ramp, for photographs that are already dark on the
   copy side once mirrored. Lifting the scrim here is what lets the picture read
   as a picture — the default stops would crush it to a black rectangle. */
.pagehead__media--soft::after {
  background:
    linear-gradient(90deg,
      var(--ink) 0%,
      rgba(13, 19, 24, .93) 32%,
      rgba(13, 19, 24, .78) 48%,
      rgba(13, 19, 24, .42) 70%,
      rgba(13, 19, 24, .24) 100%),
    linear-gradient(180deg,
      rgba(13, 19, 24, .48) 0%,
      rgba(13, 19, 24, .10) 34%,
      rgba(13, 19, 24, .10) 60%,
      rgba(13, 19, 24, .50) 100%);
}

.pagehead--media > .wrap { position: relative; z-index: 1; }
.pagehead--media h1, .pagehead--media .lede { max-width: 34rem; }

/* These photographs carry blown highlights, so the directional ramp only works
   once the copy column is comfortably clear of the bright side. Below that,
   go flat and heavy rather than letting a highlight sit under the headline. */
@media (max-width: 1024px) {
  .pagehead__media::after {
    background:
      linear-gradient(180deg,
        rgba(13, 19, 24, .86) 0%,
        rgba(13, 19, 24, .78) 45%,
        rgba(13, 19, 24, .90) 100%);
  }
  .pagehead__media--soft::after {
    background:
      linear-gradient(180deg,
        rgba(13, 19, 24, .84) 0%,
        rgba(13, 19, 24, .76) 45%,
        rgba(13, 19, 24, .88) 100%);
  }
}

.crumbs {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-ink-2); margin-bottom: 16px;
}
.crumbs a { color: var(--on-ink-2); }
.crumbs a:hover { color: #fff; }
.crumbs span { opacity: .5; margin: 0 7px; }

/* --- Section headings ----------------------------------------------------- */
.sec-head { max-width: 70ch; margin-bottom: clamp(30px, 4vw, 48px); }
.sec-head p { margin-top: 14px; }

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
a.card { color: inherit; text-decoration: none; }
a.card:hover {
  text-decoration: none; color: inherit;
  border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow);
}
.card h3 { display: flex; align-items: center; gap: 9px; }
.card p { font-size: .95rem; }
.card__more {
  margin-top: auto; padding-top: 6px;
  font-family: var(--mono); font-size: .71rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}
a.card:hover .card__more { color: var(--accent-h); }

/* Material-keyed cards: the top rule states which material family it is. */
.card--mat { border-top: 3px solid var(--line-2); }
.card--quartz  { border-top-color: var(--quartz); }
.card--silicon { border-top-color: var(--silicon); }
.card--ceramic { border-top-color: var(--ceramic); }
.card--service { border-top-color: var(--accent); }

.band-mist .card { background: var(--paper); }

/* --- Spec tables — the point of the rebuild ------------------------------- */
.spec-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.spec { font-size: .9rem; min-width: 520px; }
.spec caption {
  text-align: left; padding: 16px 18px 14px;
  font-family: var(--mono); font-size: .69rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); background: var(--mist);
}
.spec th, .spec td {
  text-align: left; padding: 12px 18px;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.spec thead th {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
  background: var(--mist); white-space: nowrap;
}
.spec tbody th { font-weight: 600; color: var(--text); white-space: nowrap; }
.spec td { color: var(--text-2); }
.spec tbody tr:last-child th, .spec tbody tr:last-child td { border-bottom: 0; }
.spec tbody tr:hover { background: var(--mist); }
.spec .num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }

/* --- Mono data bits ------------------------------------------------------- */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  padding: .26em .58em; border-radius: 2px;
  background: var(--mist-2); color: var(--text-2);
  white-space: nowrap;
}
.tag--quartz  { background: var(--quartz-lt);  color: var(--quartz); }
.tag--silicon { background: var(--silicon-lt); color: var(--silicon); }
.tag--ceramic { background: var(--ceramic-lt); color: var(--ceramic); }
.tag--live    { background: var(--live-lt);    color: var(--live); }
.tag--accent  { background: var(--accent-lt);  color: var(--accent); }
.band-ink .tag { background: rgba(255,255,255,.11); color: #fff; }

/* Material dot — the legend for the identity colours */
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.dot--quartz  { background: var(--quartz); }
.dot--silicon { background: var(--silicon); }
.dot--ceramic { background: var(--ceramic); }
.dot--service { background: var(--accent); }

/* --- Definition lists (forms, methods, equipment) ------------------------- */
.deflist { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.deflist > div { background: var(--paper); padding: 18px 20px; }
.deflist dt { font-weight: 600; font-size: .97rem; color: var(--text); margin-bottom: 4px; }
.deflist dd { font-size: .92rem; color: var(--text-2); line-height: 1.55; }
@media (min-width: 700px) { .deflist { grid-template-columns: 1fr 1fr; } }

/* --- Plain checklists ----------------------------------------------------- */
.ticks { list-style: none; display: grid; gap: 9px; }
@media (min-width: 700px) { .ticks--2 { grid-template-columns: 1fr 1fr; gap: 9px 32px; } }
.ticks li {
  position: relative; padding-left: 24px;
  font-size: .95rem; color: var(--text-2); line-height: 1.5;
}
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: .52em;
  width: 9px; height: 5px;
  border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg);
}
.band-ink .ticks li { color: var(--on-ink-2); }
.band-ink .ticks li::before { border-color: var(--quartz); }

/* Simple bulleted list where a tick would over-claim */
.dashes { list-style: none; display: grid; gap: 8px; }
@media (min-width: 700px) { .dashes--2 { grid-template-columns: 1fr 1fr; gap: 8px 32px; } }
.dashes li { position: relative; padding-left: 20px; font-size: .95rem; color: var(--text-2); }
.dashes li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: 10px; height: 1px; background: var(--line-2);
}

/* --- Numbered process (genuinely sequential only) ------------------------- */
.steps { counter-reset: step; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.steps > li {
  background: var(--paper); list-style: none;
  padding: 20px 22px 20px 62px; position: relative;
}
.steps > li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 22px; top: 20px;
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.steps h3 { font-size: 1rem; margin-bottom: 3px; }
.steps p { font-size: .93rem; }

/* --- Timeline (dates carry the sequence, so they are the marker) ---------- */
.timeline { list-style: none; display: grid; gap: 0; }
.timeline > li {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 0 28px;
  padding: 22px 0; border-top: 1px solid var(--line);
  position: relative;
}
.timeline > li:last-child { border-bottom: 1px solid var(--line); }
.timeline .year {
  font-family: var(--mono); font-size: 1.02rem; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; line-height: 1.3;
}
.timeline h3 { font-size: 1.04rem; margin-bottom: 4px; }
.timeline p { font-size: .94rem; }
.band-ink .timeline > li { border-color: var(--line-ink); }
.band-ink .timeline .year { color: var(--quartz); }
@media (max-width: 600px) {
  .timeline > li { grid-template-columns: 1fr; gap: 6px; }
}

/* --- Locations ------------------------------------------------------------ */
.places { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (min-width: 780px) { .places { grid-template-columns: repeat(2, 1fr); } }
.place { background: var(--paper); padding: 26px 24px; display: flex; flex-direction: column; gap: 9px; }
.place__role {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
}
.place h3 { font-size: 1.12rem; }
.place p { font-size: .94rem; }
.place ul { list-style: none; display: grid; gap: 7px; margin-top: 4px; }
.place li { font-size: .9rem; color: var(--text-2); padding-left: 16px; position: relative; }
.place li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 8px; height: 1px; background: var(--line-2);
}

/* --- Level ladder (ESD competency) ---------------------------------------- */
.levels { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (min-width: 860px) { .levels { grid-template-columns: repeat(4, 1fr); } }
.level { background: var(--paper); padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.level__no {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
}
.level h3 { font-size: 1.02rem; }
.level ul { list-style: none; display: grid; gap: 6px; margin-top: auto; }
.level li { font-size: .88rem; color: var(--text-2); padding-left: 14px; position: relative; }
.level li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 6px; height: 1px; background: var(--line-2);
}
/* Depth ramp — later levels read as further along the ladder */
.level:nth-child(1) .level__no { color: var(--quartz); }
.level:nth-child(2) .level__no { color: var(--accent); }
.level:nth-child(3) .level__no { color: var(--silicon); }
.level:nth-child(4) .level__no { color: var(--ceramic); }

/* --- Stat strip ----------------------------------------------------------- */
.stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--paper); padding: 24px 22px; display: flex; flex-direction: column; gap: 5px; }
.stat b {
  font-size: clamp(1.5rem, 3vw, 1.95rem); font-weight: 700;
  letter-spacing: -.035em; color: var(--accent); line-height: 1;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.stat span {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.stat p { font-size: .89rem; margin-top: 3px; }
.band-ink .stats { background: var(--line-ink); border-color: var(--line-ink); }
.band-ink .stat { background: var(--ink); }
.band-ink .stat b { color: #fff; }
.band-ink .stat span { color: var(--on-ink-2); }

/* --- Split feature -------------------------------------------------------- */
.split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; } }
.split--wide-l { }
@media (min-width: 880px) { .split--wide-l { grid-template-columns: 1.15fr .85fr; } }

/* --- Callout -------------------------------------------------------------- */
.callout {
  background: var(--accent-lt); border-left: 3px solid var(--accent);
  padding: 20px 22px; border-radius: 0 var(--r) var(--r) 0;
}
.callout p { color: var(--text-2); font-size: .96rem; }
.callout strong { color: var(--text); }
.callout--live { background: var(--live-lt); border-left-color: var(--live); }

/* --- CTA band ------------------------------------------------------------- */
.cta { background: var(--ink-2); color: var(--on-ink); }
.cta h2 { color: #fff; }
.cta__inner { display: grid; gap: 28px; align-items: center; }
@media (min-width: 860px) { .cta__inner { grid-template-columns: 1.3fr .7fr; } }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 860px) { .cta__actions { justify-content: flex-end; } }

/* --- Forms ---------------------------------------------------------------- */
.form { display: grid; gap: 20px; }
@media (min-width: 700px) { .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: .88rem; font-weight: 600; color: var(--text); }
.field label .opt { font-weight: 400; color: var(--muted); }
.field .hint { font-size: .82rem; color: var(--muted); line-height: 1.45; }
.field input, .field textarea, .field select {
  padding: 12px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--paper); color: var(--text); font-size: .95rem;
  transition: border-color .16s ease, box-shadow .16s ease;
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lt);
}
.field textarea { resize: vertical; min-height: 140px; }
.field input[type="file"] { padding: 10px 12px; background: var(--mist); cursor: pointer; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select { border-color: #A6392C; }
.field .err { font-size: .82rem; color: #A6392C; display: none; }
.field[data-invalid="true"] .err { display: block; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formnote {
  font-size: .86rem; color: var(--muted); line-height: 1.55;
  padding-top: 4px;
}

.alert {
  padding: 15px 18px; border-radius: var(--r);
  border: 1px solid; font-size: .93rem; margin-bottom: 26px;
}
.alert--error { background: #F8E9E7; border-color: #E3C4BF; color: #7E2C21; }
.alert--ok    { background: var(--live-lt); border-color: #BBD9C7; color: #245E41; }

/* --- Inset figure --------------------------------------------------------- */
/* For photographs whose source is too small to survive a full-bleed hero.
   Capped so the image is never asked to scale beyond its native width. */
.inset {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--mist);
}
.inset img { width: 100%; height: auto; display: block; }
.inset figcaption {
  font-size: .84rem; line-height: 1.45; color: var(--muted);
  padding: 12px 14px; border-top: 1px solid var(--line);
  background: var(--paper);
}

/* --- Contact details ------------------------------------------------------ */
.contactlist { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.contactlist > div { background: var(--paper); padding: 20px 22px; }
.contactlist dt {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.contactlist dd { font-size: 1rem; color: var(--text); line-height: 1.5; }
.contactlist dd a { font-weight: 500; }
/* browsers italicise <address> by default; keep it reading as plain text */
.contactlist address { font-style: normal; }
.contactlist address + a {
  display: inline-block; margin-top: 8px;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
}

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--on-ink-2); padding-block: 56px 34px; font-size: .9rem; }
.site-footer a { color: var(--on-ink-2); }
.site-footer a:hover { color: #fff; }
.footer__grid { display: grid; gap: 34px; }
@media (min-width: 760px)  { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__sub  { color: var(--on-ink-2); }
.footer__brand p { color: var(--on-ink-2); font-size: .88rem; margin-top: 14px; max-width: 34ch; }
.footer h4 {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; margin-bottom: 14px; font-weight: 600;
}
.footer__col ul { list-style: none; display: grid; gap: 9px; }
.footer__col a { font-size: .89rem; }
.footer__bottom {
  margin-top: 42px; padding-top: 22px;
  border-top: 1px solid var(--line-ink);
  display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .05em;
  color: var(--on-ink-2);
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .cta, .nav-toggle, .hero__media { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .hero, .pagehead { background: #fff !important; color: #000 !important; padding-block: 0 18pt; }
  .hero h1, .pagehead h1 { color: #000 !important; }
  .hero .lede, .pagehead .lede { color: #333 !important; }
  a { color: #000; text-decoration: underline; }
}