/* ==========================================================================
   AIR DigiLife — Core stylesheet
   Palette derived from the brand mark: indigo #393185
   Type: Avenir (with Nunito Sans as the loaded fallback) + IBM Plex Mono
         for catalogue codes and specification data.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --indigo:        #393185;   /* sampled directly from the logo */
  --indigo-deep:   #221C55;
  --indigo-bright: #5B4FE0;
  --indigo-wash:   #EEEDF7;
  --indigo-mist:   #F7F7FC;

  /* Ink */
  --ink:    #16151F;
  --ink-2:  #56556A;
  --ink-3:  #8B8AA0;

  /* Surface */
  --paper:  #FFFFFF;
  --mist:   #F4F4F9;
  --line:   #E4E3EE;
  --line-2: #D3D2E3;

  /* Signals */
  --green:  #0E7C4A;   /* Made in India */
  --amber:  #B4740E;
  --red:    #B4231E;

  /* Type */
  --font-sans: "Avenir Next", "Avenir", "Nunito Sans", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Rhythm */
  --shell:   1240px;
  --gutter:  clamp(20px, 5vw, 56px);
  --section: clamp(64px, 9vw, 128px);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 160ms;
  --mid:  280ms;

  /* Elevation — kept flat and technical, never soft/blurry */
  --lift: 0 1px 2px rgba(34, 28, 85, 0.05), 0 12px 28px -18px rgba(34, 28, 85, 0.35);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--indigo); text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 800;
  color: var(--ink);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2.5px solid var(--indigo-bright);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--indigo); color: #fff; }

/* --------------------------------------------------------------------------
   3. UTILITIES
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--mist { background: var(--mist); }
.section--tight-top { padding-top: clamp(28px, 4vw, 48px); }
.section--tight-bottom { padding-bottom: clamp(28px, 4vw, 48px); }
.section--wash { background: var(--indigo-mist); }

.section--ink {
  background: var(--indigo-deep);
  color: #fff;
}
.section--ink h2, .section--ink h3 { color: #fff; }

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  background: var(--indigo);
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  transition: top var(--fast) var(--ease);
}
.skip-link:focus { top: 16px; }

.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;
}

/* Eyebrow: the mono utility face marks anything machine-ish —
   catalogue codes, section indices, spec labels. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--indigo);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
  max-width: 120px;
}
.eyebrow--center { justify-content: center; }
.eyebrow--brand { text-transform: none; letter-spacing: .06em; font-size: 13px; }
.eyebrow--center::after { display: none; }
.section--ink .eyebrow { color: #A9A2F0; }
.section--ink .eyebrow::after { background: rgba(255,255,255,.22); }

.lede {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 62ch;
}
.section--ink .lede { color: rgba(255,255,255,.78); }

.h-xl { font-size: clamp(38px, 6.4vw, 76px); }
.h-lg { font-size: clamp(30px, 4.4vw, 50px); }
.h-md { font-size: clamp(23px, 2.8vw, 32px); }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1.5px solid transparent;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: center;
  transition: background var(--fast) var(--ease),
              color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              transform var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--indigo); color: #fff; }
.btn--primary:hover { background: var(--indigo-deep); }

.btn--ghost {
  background: transparent;
  color: var(--indigo);
  border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--indigo); background: var(--indigo-wash); }

.btn--light { background: #fff; color: var(--indigo-deep); }
.btn--light:hover { background: var(--indigo-wash); }

.btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.1); }

.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

/* Text link with a moving underline */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--indigo);
}
.link-arrow svg { transition: transform var(--fast) var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. LOADER — deliberately brief. Fades the moment the page is ready and is
   skipped entirely on every subsequent page in the session.
   -------------------------------------------------------------------------- */
#adl-loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--paper);
  display: grid;
  place-items: center;
  transition: opacity 260ms var(--ease), visibility 260ms var(--ease);
}
#adl-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-mark { width: min(230px, 54vw); }
.loader-bar {
  margin-top: 20px;
  height: 2px;
  width: min(230px, 54vw);
  background: var(--line);
  overflow: hidden;
  border-radius: 2px;
}
.loader-bar span {
  display: block;
  height: 100%;
  width: 40%;
  background: var(--indigo);
  animation: sweep 900ms var(--ease) infinite;
}
@keyframes sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}

.brand { display: flex; align-items: center; }
.brand img { height: 30px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; }

.nav a {
  position: relative;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  border-radius: 3px;
  transition: color var(--fast) var(--ease);
}
.nav a:hover { color: var(--indigo); }
.nav a[aria-current="page"] { color: var(--indigo); }
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  background: var(--indigo);
}

.header-cta { display: flex; align-items: center; gap: 10px; }
.header-cta .btn { padding: 11px 20px; font-size: 14px; white-space: nowrap; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--ink);
  position: relative;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 1.5px;
  background: var(--ink);
  transition: transform var(--fast) var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.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: 520px) {
  .header-inner { gap: 12px; }
  .header-cta .btn--primary { padding: 11px 14px; font-size: 13.5px; }
  .brand img { height: 26px; }
}

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .header-cta .btn--ghost { display: none; }
  .nav {
    position: fixed;
    top: 76px; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    padding: 10px var(--gutter) 24px;
    gap: 0;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: all var(--mid) var(--ease);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav a {
    padding: 15px 0;
    font-size: 17px;
    border-bottom: 1px solid var(--line);
  }
  .nav a[aria-current="page"]::after { display: none; }
}

/* --------------------------------------------------------------------------
   7. HERO — the thesis: a statement paired with the live catalogue index
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(56px, 8vw, 104px) clamp(56px, 8vw, 104px);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, var(--indigo-mist), var(--paper) 62%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(36px, 6vw, 76px);
  align-items: start;
}

.hero h1 { font-size: clamp(38px, 5.6vw, 68px); font-weight: 800; }
.hero h1 em {
  font-style: normal;
  color: var(--indigo);
}
.hero .lede { margin-top: 26px; }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.hero-proof span { display: flex; align-items: center; gap: 8px; }
.hero-proof span::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  flex: none;
}

/* The index — signature element */
.index-card {
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--paper);
  box-shadow: var(--lift);
  overflow: hidden;
}
.index-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--indigo-mist);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo);
}
.index-head b { font-weight: 500; color: var(--ink-3); }

.index-list a {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  font-size: 15.5px;
  transition: background var(--fast) var(--ease),
              padding-left var(--fast) var(--ease);
}
.index-list a:last-child { border-bottom: 0; }
.index-list a:hover { background: var(--indigo-wash); padding-left: 26px; }
.index-list .idx {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--indigo);
  letter-spacing: .06em;
}
.index-list .tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   8. PRODUCT CARDS
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px;
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px 26px 24px;
  transition: border-color var(--mid) var(--ease),
              transform var(--mid) var(--ease),
              box-shadow var(--mid) var(--ease);
}
.pcard:hover {
  border-color: var(--line-2);
  transform: translateY(-3px);
  box-shadow: var(--lift);
}

/* Engineered corner bracket — a drawing convention, not decoration */
.pcard::before {
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: 30px; height: 30px;
  border-top: 2px solid var(--indigo);
  border-right: 2px solid var(--indigo);
  border-top-right-radius: 4px;
  opacity: 0;
  transition: opacity var(--mid) var(--ease);
}
.pcard:hover::before { opacity: 1; }

.pcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pcard-code { color: var(--indigo); }
.pcard-brand { color: var(--ink-3); text-transform: none; letter-spacing: .03em; }

.pcard h3 { font-size: 22px; margin-bottom: 8px; }
.pcard .pcard-tag {
  font-size: 14.5px;
  color: var(--indigo);
  font-weight: 600;
  margin-bottom: 12px;
}
.pcard p.pcard-sum {
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 20px;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.chip {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 5px 9px;
  border-radius: 3px;
  background: var(--mist);
  color: var(--ink-2);
  border: 1px solid var(--line);
}

.pcard-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* "Add to enquiry" toggle — connects the catalogue to the form */
.add-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid var(--line-2);
  border-radius: 3px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.add-btn:hover { border-color: var(--indigo); color: var(--indigo); }
.add-btn .tick { display: none; }
.add-btn[aria-pressed="true"] {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}
.add-btn[aria-pressed="true"] .tick { display: block; }
.add-btn[aria-pressed="true"] .plus { display: none; }

/* --------------------------------------------------------------------------
   9. ENQUIRY TRAY — persistent selection carried into the contact form
   -------------------------------------------------------------------------- */
.tray {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 130%);
  z-index: 80;
  width: min(660px, calc(100vw - 32px));
  background: var(--indigo-deep);
  color: #fff;
  border-radius: 5px;
  padding: 14px 16px 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 18px 50px -12px rgba(34,28,85,.55);
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--mid) var(--ease), visibility var(--mid) var(--ease);
}
.tray.is-up {
  transform: translate(-50%, 0);
  visibility: visible;
  pointer-events: auto;
}
.tray-text { flex: 1; min-width: 0; }
.tray-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #A9A2F0;
  display: block;
}
.tray-names {
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tray .btn { padding: 11px 18px; font-size: 14px; white-space: nowrap; }
.tray-clear {
  background: none;
  border: 0;
  color: rgba(255,255,255,.6);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 6px;
}
.tray-clear:hover { color: #fff; }

@media (max-width: 620px) {
  .tray { flex-wrap: wrap; gap: 10px; padding: 14px; }
  .tray-text { flex-basis: 100%; }
  .tray .btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   10. FEATURE / VALUE GRID
   -------------------------------------------------------------------------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.value {
  background: var(--paper);
  padding: 34px 30px;
}
.value-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--indigo);
  display: block;
  margin-bottom: 14px;
}
.value h3 { font-size: 19px; margin-bottom: 10px; }
.value p { font-size: 15.5px; color: var(--ink-2); line-height: 1.6; }

/* Stats strip */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  padding: 40px 0 0;
  border-top: 1px solid rgba(255,255,255,.16);
  margin-top: 44px;
}
.stat b {
  display: block;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.1;
}
.stat span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-top: 8px;
  display: block;
}

/* --------------------------------------------------------------------------
   11. PRODUCT DETAIL PAGE
   -------------------------------------------------------------------------- */
.crumb {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 28px;
}
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--indigo); }
.crumb span { margin: 0 8px; }

.detail-head {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
  padding-block: 40px clamp(48px, 7vw, 80px);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) { .detail-head { grid-template-columns: 1fr; } }

.detail-side {
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 26px;
  background: var(--indigo-mist);
}
.detail-side h4 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--indigo);
  font-weight: 500;
  margin-bottom: 16px;
}

.tick-list li {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.tick-list li:last-child { border-bottom: 0; }
.tick-list li::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin-top: 9px;
  background: var(--indigo);
  transform: rotate(45deg);
}

/* Spec table */
.detail-specs { padding-block: clamp(44px, 6vw, 72px); }
.spec-block { margin-bottom: 40px; }
.spec-block h3 { font-size: 22px; margin-bottom: 6px; }
.spec-block > p { color: var(--ink-2); font-size: 15.5px; margin-bottom: 18px; }

.spec-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  font-size: 15px;
}
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table tr:last-child { border-bottom: 0; }
.spec-table tr:nth-child(odd) { background: var(--mist); }
.spec-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
  padding: 13px 18px;
  width: 34%;
  vertical-align: top;
  border-right: 1px solid var(--line);
}
.spec-table td { padding: 13px 18px; color: var(--ink); vertical-align: top; }
@media (max-width: 560px) {
  .spec-table th { width: 42%; font-size: 11px; padding: 11px 12px; }
  .spec-table td { padding: 11px 12px; font-size: 14.5px; }
}

.awaiting {
  border: 1px dashed var(--line-2);
  border-radius: 4px;
  padding: 40px 32px;
  text-align: center;
  background: var(--mist);
}
.awaiting h3 { font-size: 21px; margin-bottom: 10px; }
.awaiting p { color: var(--ink-2); max-width: 52ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */
.form-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 940px) {
  .form-layout { grid-template-columns: 1fr; }
  .form-aside { order: -1; }
}

.form-card {
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: clamp(26px, 4vw, 44px);
  background: var(--paper);
  box-shadow: var(--lift);
}

fieldset { border: 0; padding: 0; margin: 0 0 34px; }
fieldset:last-of-type { margin-bottom: 26px; }

legend {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--indigo);
  padding: 0 0 18px;
  width: 100%;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 7px;
  color: var(--ink);
}
.field .req { color: var(--red); font-weight: 400; }
.field .hint {
  display: block;
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 3px;
}

.input {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--line-2);
  border-radius: 3px;
  background: var(--paper);
  font-size: 15.5px;
  transition: border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.input::placeholder { color: var(--ink-3); }
.input:hover { border-color: var(--ink-3); }
.input:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px var(--indigo-wash);
}
textarea.input { min-height: 128px; resize: vertical; line-height: 1.6; }
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2356556A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}

.input.is-invalid { border-color: var(--red); }
.err {
  display: none;
  color: var(--red);
  font-size: 13px;
  margin-top: 6px;
  font-weight: 600;
}
.err.is-shown { display: block; }

/* Product checkbox grid */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

/* `label.check` rather than `.check` — it has to outrank `.field label`
   above, which would otherwise force these back to display:block. */
label.check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 15px;
  border: 1.5px solid var(--line);
  border-radius: 3px;
  font-weight: 400;
  font-size: 15px;
  cursor: pointer;
  transition: border-color var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
label.check:hover { border-color: var(--line-2); background: var(--mist); }
.check input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.check .box {
  flex: none;
  width: 19px; height: 19px;
  margin-top: 1px;
  border: 1.5px solid var(--line-2);
  border-radius: 3px;
  display: grid;
  place-items: center;
  background: var(--paper);
  transition: all var(--fast) var(--ease);
}
.check .box svg { opacity: 0; transition: opacity var(--fast) var(--ease); }
.check input:checked ~ .box { background: var(--indigo); border-color: var(--indigo); }
.check input:checked ~ .box svg { opacity: 1; }
.check input:checked ~ .check-text .check-name { color: var(--indigo); }
label.check:has(input:checked) { border-color: var(--indigo); background: var(--indigo-wash); }
.check input:focus-visible ~ .box { outline: 2.5px solid var(--indigo-bright); outline-offset: 2px; }

.check-text { min-width: 0; }
.check-name { display: block; font-weight: 700; font-size: 15px; line-height: 1.35; }
.check-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--ink-3);
  margin-top: 4px;
}

/* Radio pills */
.pill-row { display: flex; flex-wrap: wrap; gap: 9px; }
label.pill { position: relative; display: block; margin: 0; font-weight: 400; }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill span {
  display: block;
  padding: 10px 17px;
  border: 1.5px solid var(--line);
  border-radius: 3px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.pill span:hover { border-color: var(--line-2); background: var(--mist); }
.pill input:checked + span {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
}
.pill input:focus-visible + span { outline: 2.5px solid var(--indigo-bright); outline-offset: 2px; }

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 24px;
}
.consent input { margin-top: 3px; accent-color: var(--indigo); width: 17px; height: 17px; flex: none; }

.form-status {
  display: none;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 600;
  border: 1.5px solid;
}
.form-status.is-shown { display: block; }
.form-status--err { color: var(--red); border-color: var(--red); background: #FDF2F2; }

/* Success panel replaces the form */
.form-done { display: none; text-align: center; padding: 30px 10px; }
.form-done.is-shown { display: block; }
.form-done .seal {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--indigo-wash);
  display: grid; place-items: center;
  margin: 0 auto 22px;
}
.form-done h3 { font-size: 26px; margin-bottom: 12px; }
.form-done p { color: var(--ink-2); max-width: 46ch; margin-inline: auto; }

/* Aside contact block */
.info-card {
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
}
.info-card .info-head {
  background: var(--indigo-deep);
  color: #fff;
  padding: 24px 26px;
}
.info-card .info-head h3 { color: #fff; font-size: 20px; margin-bottom: 6px; }
.info-card .info-head p { font-size: 14.5px; color: rgba(255,255,255,.74); }

.info-row {
  padding: 18px 26px;
  border-bottom: 1px solid var(--line);
}
.info-row:last-child { border-bottom: 0; }
.info-row .k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 5px;
}
.info-row .v { font-size: 16px; font-weight: 700; color: var(--ink); }
.info-row a.v:hover { color: var(--indigo); }

/* --------------------------------------------------------------------------
   13. PARTNER PAGE EXTRAS
   -------------------------------------------------------------------------- */
.step-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.step { background: var(--paper); padding: 28px 24px; }
.step b {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--indigo);
  display: block;
  margin-bottom: 12px;
  font-weight: 500;
}
.step h3 { font-size: 17.5px; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--ink-2); line-height: 1.55; }

/* --------------------------------------------------------------------------
   14. ABOUT / LEADERSHIP
   -------------------------------------------------------------------------- */
.leader {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 34px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 34px;
  background: var(--paper);
}
@media (max-width: 700px) { .leader { grid-template-columns: 1fr; gap: 22px; } }

.leader-photo {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--indigo-wash);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 500;
  color: var(--indigo);
  letter-spacing: .04em;
}
.leader h3 { font-size: 24px; margin-bottom: 4px; }
.leader .role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 16px;
}
.social-row { display: flex; gap: 10px; margin-top: 20px; }
.social-row a {
  width: 38px; height: 38px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  transition: all var(--fast) var(--ease);
}
.social-row a:hover { border-color: var(--indigo); color: var(--indigo); background: var(--indigo-wash); }

/* Timeline-free two-column prose */
.prose-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.prose-two h3 { font-size: 21px; margin-bottom: 12px; }
.prose-two p { color: var(--ink-2); font-size: 16px; }

/* --------------------------------------------------------------------------
   15. CTA BAND + FOOTER
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--indigo-deep);
  color: #fff;
  padding-block: clamp(52px, 7vw, 88px);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.76); max-width: 56ch; margin-top: 14px; }

.site-footer {
  background: var(--ink);
  color: rgba(255,255,255,.66);
  padding-block: 62px 0;
  font-size: 15px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer img { height: 27px; width: auto; margin-bottom: 20px; }
.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.44);
  font-weight: 500;
  margin-bottom: 16px;
}
.site-footer a { color: rgba(255,255,255,.66); }
.site-footer a:hover { color: #fff; }
.footer-links li { margin-bottom: 10px; font-size: 15px; }
.footer-note {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 24px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  font-size: 13.5px;
  color: rgba(255,255,255,.44);
}

/* --------------------------------------------------------------------------
   16. SCROLL REVEAL + REDUCED MOTION
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Print */
@media print {
  .site-header, .tray, .cta-band, #adl-loader, .site-footer { display: none !important; }
  body { font-size: 12pt; }
}

/* ==========================================================================
   17. MEDIA LAYER — added with the real photography and brand icons
   ========================================================================== */

/* --- Card media band ------------------------------------------------------
   Every card gets a band of the same height so the grid stays even. Lines
   with real photography show it; the rest get a drawn plate carrying the
   catalogue code, which is honest about there being no photo yet. */
.pcard { padding: 0; overflow: hidden; }
.pcard-body { padding: 24px 26px 24px; display: flex; flex-direction: column; flex: 1; }

.pcard-media {
  position: relative;
  height: 190px;
  background: var(--indigo-mist);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  flex: none;
}
.pcard-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.pcard:hover .pcard-media img { transform: scale(1.04); }

/* Drawn plate for lines awaiting photography */
.pcard-plate {
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, var(--indigo-wash) 0%, var(--indigo-mist) 100%);
}
.pcard-plate::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .5;
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 78%);
}
.pcard-plate span {
  position: relative;
  font-family: var(--font-mono);
  font-size: 46px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--indigo);
  opacity: .34;
}

.pcard-badge {
  position: absolute;
  left: 14px; top: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(255,255,255,.94);
  color: var(--indigo);
  padding: 5px 10px;
  border-radius: 3px;
  border: 1px solid var(--line);
}

/* --- Icons in the value grid --------------------------------------------- */
.value-icon {
  width: 54px; height: 54px;
  object-fit: contain;
  margin-bottom: 18px;
}
.value--icon .value-num { display: none; }

/* --- Hero device panel ---------------------------------------------------- */
.hero-stack { display: grid; gap: 18px; }

.device-panel {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: linear-gradient(140deg, #E8F0F2 0%, var(--indigo-wash) 100%);
  box-shadow: var(--lift);
  aspect-ratio: 16 / 10;
}
.device-panel img { width: 100%; height: 100%; object-fit: cover; }
.device-tag {
  position: absolute;
  left: 16px; bottom: 16px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--indigo);
}

/* --- Showcase / gallery --------------------------------------------------- */
.showcase {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 820px) { .showcase { grid-template-columns: 1fr; } }

.shot {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--indigo-mist);
  min-height: 220px;
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 18px 14px;
  background: linear-gradient(transparent, rgba(22,21,31,.72));
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
}
.shot-col { display: grid; gap: 22px; }

/* --- Detail page gallery -------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 44px;
}
.gallery-grid .shot { min-height: 260px; }

.detail-hero {
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: linear-gradient(140deg, #E8F0F2, var(--indigo-wash));
  aspect-ratio: 4 / 3;
  margin-bottom: 22px;
}
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }

/* --- Brand strip ---------------------------------------------------------- */
.brand-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 56px;
  padding: 30px 0;
  border-block: 1px solid var(--line);
}
.brand-strip img { height: 38px; width: auto; opacity: .82; }
.brand-strip .wordmark {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-2);
}
.brand-strip .wordmark small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 3px;
}

/* --- Leadership portrait -------------------------------------------------- */
.leader-photo--img {
  padding: 0;
  overflow: hidden;
  background: var(--indigo-wash);
  border: 1px solid var(--line);
}
.leader-photo--img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Detail side column now stacks a photo above the highlights */
.detail-side-col { display: grid; gap: 22px; align-content: start; }

/* Six values divide evenly into three columns — auto-fit was leaving a
   dead cell on wide screens. */
@media (min-width: 900px) {
  .value-grid { grid-template-columns: repeat(3, 1fr); }
}
.value-icon { width: 60px; height: 60px; }

/* Stacked CTAs read as one column on phones rather than two ragged widths */
@media (max-width: 520px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .pcard-media { height: 200px; }
  .brand-strip { gap: 18px 32px; padding: 24px 0; }
}

/* The AiNUC lockup includes its tagline, so it needs more height than a
   plain wordmark would to stay legible. */
.brand-strip img { height: 78px; }

.brand-strip--dark {
  border-block: 1px solid rgba(255,255,255,.16);
  margin-top: 44px;
  justify-content: flex-start;
  gap: 26px 78px;
  padding: 34px 0;
}
.brand-strip--dark .wordmark { color: rgba(255,255,255,.9); }
.brand-strip--dark .wordmark small { color: rgba(255,255,255,.5); }
.brand-strip--dark img { opacity: 1; }

/* The stats strip already draws a top rule; the lockup above it supplies one */
.brand-strip--dark + .stat-strip { border-top: 0; margin-top: 36px; padding-top: 0; }

@media (max-width: 520px) {
  .brand-strip img { height: 58px; }
  .brand-strip--dark { gap: 20px 36px; }
}

/* ==========================================================================
   18. DESIGN REFRESH
   The first pass was clean but flat: white everywhere, hairline boxes, and
   placeholder plates on seven of nine cards. This layer adds tonal depth,
   a dark hero, and drawn glyphs so every card carries an image.
   ========================================================================== */

:root {
  --accent:      #3DD6C0;   /* used only on dark ground, sparingly */
  --indigo-mid:  #3B2E8F;
  --shade-sm: 0 1px 2px rgba(34,28,85,.04), 0 6px 16px -10px rgba(34,28,85,.30);
  --shade-md: 0 2px 4px rgba(34,28,85,.05), 0 18px 40px -22px rgba(34,28,85,.45);
  --shade-lg: 0 30px 70px -30px rgba(34,28,85,.55);
}

/* --- 18.1 Dark hero ------------------------------------------------------- */
.hero {
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(91,79,224,.42), transparent 58%),
    radial-gradient(90% 70% at 4% 96%, rgba(61,214,192,.14), transparent 60%),
    linear-gradient(158deg, var(--indigo-deep) 0%, #2A2266 48%, #1B1646 100%);
  border-bottom: 0;
  color: #fff;
  position: relative;
  overflow: hidden;
  padding-block: clamp(60px, 8vw, 116px);
}
/* Faint engineering grid, masked so it fades out before the edges */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 25%, transparent 82%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 25%, transparent 82%);
  pointer-events: none;
}
.hero .shell { position: relative; z-index: 1; }
.hero h1 { color: #fff; letter-spacing: -0.03em; }
.hero h1 em { color: #A99CFF; }
.hero .lede { color: rgba(255,255,255,.76); }
.hero .eyebrow { color: var(--accent); }
.hero .eyebrow::after { background: rgba(255,255,255,.24); }

.hero .btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.04);
}
.hero .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.hero .btn--primary { background: #fff; color: var(--indigo-deep); }
.hero .btn--primary:hover { background: var(--indigo-wash); }

.hero-proof {
  border-top-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.62);
}
.hero-proof span::before { background: var(--accent); }

/* Index card, restyled for dark ground */
.hero .index-card {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shade-lg);
  border-radius: 6px;
}
.hero .index-head {
  background: rgba(255,255,255,.06);
  border-bottom-color: rgba(255,255,255,.14);
  color: var(--accent);
}
.hero .index-head b { color: rgba(255,255,255,.45); }
.hero .index-list a { color: rgba(255,255,255,.9); border-bottom-color: rgba(255,255,255,.09); }
.hero .index-list a:hover { background: rgba(255,255,255,.09); }
.hero .index-list .idx { color: var(--accent); }
.hero .index-list .tag { color: rgba(255,255,255,.45); }

.hero .device-panel {
  border-color: rgba(255,255,255,.18);
  box-shadow: var(--shade-lg);
  border-radius: 6px;
}
.hero .device-tag {
  background: rgba(27,22,70,.86);
  border-color: rgba(255,255,255,.2);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* --- 18.2 Section intros fill the width instead of trailing off ---------- */
.intro {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.intro > h2 { max-width: none; }
.intro > .lede { margin-top: 0; padding-bottom: 4px; }
@media (max-width: 820px) {
  .intro { grid-template-columns: 1fr; align-items: start; gap: 18px; }
}

/* --- 18.3 Cards: softer, deeper, glyph plates --------------------------- */
.pcard {
  border-radius: 7px;
  border-color: var(--line);
  box-shadow: var(--shade-sm);
}
.pcard:hover { box-shadow: var(--shade-md); transform: translateY(-4px); }

.pcard-media { height: 176px; }

.pcard-plate {
  background:
    radial-gradient(90% 120% at 22% 8%, rgba(91,79,224,.16), transparent 62%),
    linear-gradient(150deg, #EFEEF9 0%, #E4F3F1 100%);
}
.pcard-plate::before { background-size: 30px 30px; opacity: .42; }
.pcard-plate span { display: none; }

.plate-glyph {
  position: relative;
  width: 78px; height: 78px;
  color: var(--indigo);
  opacity: .92;
  transition: transform 400ms var(--ease);
}
.pcard:hover .plate-glyph { transform: translateY(-3px) scale(1.05); }
.plate-glyph svg { width: 100%; height: 100%; display: block; }

.pcard-badge {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(57,49,133,.16);
  font-weight: 500;
}

/* --- 18.4 Value cards get tone and a tinted icon well -------------------- */
.value-grid { border-radius: 7px; box-shadow: var(--shade-sm); }
.value { transition: background var(--mid) var(--ease); position: relative; }
.value:hover { background: var(--indigo-mist); }
.value--icon .value-icon {
  width: 46px; height: 46px;
  padding: 9px;
  box-sizing: content-box;
  background: linear-gradient(140deg, var(--indigo-wash), #E4F3F1);
  border-radius: 8px;
  border: 1px solid var(--line);
}

/* --- 18.5 Dark sections get the same depth as the hero ------------------ */
.section--ink, .cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(110% 90% at 82% 4%, rgba(91,79,224,.32), transparent 60%),
    linear-gradient(160deg, var(--indigo-deep), #1B1646);
}
.section--ink .eyebrow, .cta-band .eyebrow { color: var(--accent); }
.stat b {
  background: linear-gradient(120deg, #fff 30%, #B9AEFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- 18.6 Showcase and gallery ------------------------------------------ */
.shot { border-radius: 7px; box-shadow: var(--shade-sm); }
.shot::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(34,28,85,.06);
  border-radius: 7px;
  pointer-events: none;
}
.device-panel, .detail-hero, .index-card, .form-card, .info-card, .leader { border-radius: 7px; }

/* --- 18.7 Buttons and inputs -------------------------------------------- */
.btn { border-radius: 4px; }
.btn--primary { box-shadow: 0 8px 20px -12px rgba(57,49,133,.9); }
.input, label.check, label.pill span, .add-btn { border-radius: 4px; }
.form-card { box-shadow: var(--shade-md); }

/* --- 18.8 Step rail --------------------------------------------------- */
.step-rail { border-radius: 7px; box-shadow: var(--shade-sm); }
.step { transition: background var(--mid) var(--ease); }
.step:hover { background: var(--indigo-mist); }

/* .pcard-media img (0,1,1) was overriding .plate-glyph (0,1,0) and stretching
   the glyph to fill the band. Raise the specificity to match. */
.pcard-media .plate-glyph {
  width: 76px;
  height: 76px;
  object-fit: contain;
}

/* --- 18.9 Header floats over a dark hero, solidifies on scroll ----------- */
body.has-dark-hero .site-header {
  position: fixed;
  left: 0; right: 0; top: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background var(--mid) var(--ease),
              border-color var(--mid) var(--ease),
              box-shadow var(--mid) var(--ease);
}
body.has-dark-hero .hero { padding-top: calc(76px + clamp(60px, 8vw, 116px)); }

body.has-dark-hero .site-header .nav a { color: rgba(255,255,255,.82); }
body.has-dark-hero .site-header .nav a:hover,
body.has-dark-hero .site-header .nav a[aria-current="page"] { color: #fff; }
body.has-dark-hero .site-header .nav a[aria-current="page"]::after { background: var(--accent); }
body.has-dark-hero .site-header .btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,.34);
}
body.has-dark-hero .site-header .btn--ghost:hover { background: rgba(255,255,255,.12); }
body.has-dark-hero .site-header .btn--primary { background: #fff; color: var(--indigo-deep); }
body.has-dark-hero .site-header .btn--primary:hover { background: var(--indigo-wash); }
body.has-dark-hero .site-header .nav-toggle { border-color: rgba(255,255,255,.34); }
body.has-dark-hero .site-header .nav-toggle span,
body.has-dark-hero .site-header .nav-toggle span::before,
body.has-dark-hero .site-header .nav-toggle span::after { background: #fff; }

/* Swap to the white wordmark while the bar is transparent */
body.has-dark-hero .brand img { content: url("../img/ainuc-white.png"); }

/* Once scrolled past the hero, everything returns to the solid treatment */
body.has-dark-hero .site-header.is-stuck {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px -14px rgba(34,28,85,.5);
}
body.has-dark-hero .site-header.is-stuck .brand img { content: url("../img/ainuc-blue.png"); }
body.has-dark-hero .site-header.is-stuck .nav a { color: var(--ink-2); }
body.has-dark-hero .site-header.is-stuck .nav a:hover,
body.has-dark-hero .site-header.is-stuck .nav a[aria-current="page"] { color: var(--indigo); }
body.has-dark-hero .site-header.is-stuck .nav a[aria-current="page"]::after { background: var(--indigo); }
body.has-dark-hero .site-header.is-stuck .btn--ghost { color: var(--indigo); border-color: var(--line-2); }
body.has-dark-hero .site-header.is-stuck .btn--primary { background: var(--indigo); color: #fff; }
body.has-dark-hero .site-header.is-stuck .nav-toggle { border-color: var(--line-2); }
body.has-dark-hero .site-header.is-stuck .nav-toggle span,
body.has-dark-hero .site-header.is-stuck .nav-toggle span::before,
body.has-dark-hero .site-header.is-stuck .nav-toggle span::after { background: var(--ink); }

/* The open mobile menu needs a solid ground. Driven by an explicit class
   from site.js rather than :has(), which proved unreliable here. */
@media (max-width: 980px) {
  body.has-dark-hero .site-header.nav-open {
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom-color: var(--line);
  }
  body.has-dark-hero .site-header.nav-open .brand img { content: url("../img/ainuc-blue.png"); }
  body.has-dark-hero .site-header.nav-open .nav a { color: var(--ink); }
  body.has-dark-hero .site-header.nav-open .nav a:hover,
  body.has-dark-hero .site-header.nav-open .nav a[aria-current="page"] { color: var(--indigo); }
  body.has-dark-hero .site-header.nav-open .nav-toggle { border-color: var(--line-2); }
  body.has-dark-hero .site-header.nav-open .nav-toggle span::before,
  body.has-dark-hero .site-header.nav-open .nav-toggle span::after { background: var(--ink); }
  /* The middle bar must stay hidden while expanded, or the X gains a third
     stroke through its centre. */
  body.has-dark-hero .site-header.nav-open .nav-toggle[aria-expanded="true"] span {
    background: transparent;
  }
  body.has-dark-hero .site-header.nav-open .btn--primary { background: var(--indigo); color: #fff; }
}

/* ==========================================================================
   19. PRODUCT EXPLORER (home page)
   A stage plus a numbered rail, instead of nine identical cards competing
   for the same attention.
   ========================================================================== */
.explorer {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 26px;
  align-items: start;
}
@media (max-width: 960px) { .explorer { grid-template-columns: 1fr; } }

/* --- stage --------------------------------------------------------------- */
.explorer-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shade-md);
  overflow: hidden;
  min-height: 460px;
}
@media (max-width: 700px) { .explorer-stage { grid-template-columns: 1fr; min-height: 0; } }

.stage-visual {
  position: relative;
  background: linear-gradient(150deg, #EFEEF9, #E4F3F1);
  overflow: hidden;
}
.stage-visual > img { width: 100%; height: 100%; object-fit: cover; }
.stage-visual .pcard-plate { position: absolute; inset: 0; }
.stage-visual .plate-glyph { width: 108px; height: 108px; object-fit: contain; }
@media (max-width: 700px) { .stage-visual { aspect-ratio: 16/10; } }

.stage-code {
  position: absolute;
  left: 16px; top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--indigo);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(57,49,133,.16);
  border-radius: 3px;
  padding: 5px 10px;
}

.stage-body {
  padding: clamp(24px, 3vw, 38px);
  display: flex;
  flex-direction: column;
}
.stage-brand {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.stage-body h3 { font-size: clamp(22px, 2.4vw, 29px); margin-bottom: 12px; }
.stage-hook {
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 700;
  color: var(--indigo);
  line-height: 1.35;
  margin-bottom: 14px;
}
.stage-sum { font-size: 15.5px; color: var(--ink-2); line-height: 1.62; margin-bottom: 18px; }
.stage-actions {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.stage-actions .add-btn { padding: 13px 18px; font-size: 14px; }

/* Entrance on each swap — content only, so the frame never jumps */
.explorer-stage .stage-body > *,
.explorer-stage .stage-visual > * { opacity: 0; }
.explorer-stage.is-in .stage-visual > * { animation: stageIn 420ms var(--ease) forwards; }
.explorer-stage.is-in .stage-body > * { animation: stageIn 380ms var(--ease) forwards; }
.explorer-stage.is-in .stage-body > *:nth-child(1) { animation-delay: 30ms; }
.explorer-stage.is-in .stage-body > *:nth-child(2) { animation-delay: 60ms; }
.explorer-stage.is-in .stage-body > *:nth-child(3) { animation-delay: 90ms; }
.explorer-stage.is-in .stage-body > *:nth-child(4) { animation-delay: 120ms; }
.explorer-stage.is-in .stage-body > *:nth-child(5) { animation-delay: 150ms; }
.explorer-stage.is-in .stage-body > *:nth-child(6) { animation-delay: 180ms; }
@keyframes stageIn {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* --- rail ---------------------------------------------------------------- */
.explorer-rail {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shade-sm);
  counter-reset: none;
}
.explorer-rail li { border-bottom: 1px solid var(--line); }
.explorer-rail li:last-child { border-bottom: 0; }

.rail-item {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background var(--fast) var(--ease), padding-left var(--fast) var(--ease);
}
.rail-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--indigo);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--mid) var(--ease);
}
.rail-item:hover { background: var(--indigo-mist); }
.rail-item[aria-selected="true"] { background: var(--indigo-wash); padding-left: 24px; }
.rail-item[aria-selected="true"]::before { transform: scaleY(1); }

.rail-idx {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  transition: color var(--fast) var(--ease);
}
.rail-item[aria-selected="true"] .rail-idx { color: var(--indigo); }
.rail-name { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.rail-item[aria-selected="true"] .rail-name { color: var(--indigo); }
.rail-brand {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* On phones the rail scrolls horizontally so the stage stays in view */
@media (max-width: 700px) {
  .explorer-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }
  .explorer-rail li { border-bottom: 0; border-right: 1px solid var(--line); flex: none; }
  .rail-item {
    grid-template-columns: auto;
    gap: 4px;
    padding: 13px 16px;
    scroll-snap-align: start;
    min-width: 156px;
  }
  .rail-item[aria-selected="true"] { padding-left: 16px; }
  .rail-item::before { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 3px;
                       transform: scaleX(0); }
  .rail-item[aria-selected="true"]::before { transform: scaleX(1); }
  .rail-brand { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .explorer-stage .stage-body > *,
  .explorer-stage .stage-visual > * { opacity: 1; animation: none !important; }
}

/* With the index card gone, the hero photo takes the full column */
.device-panel--tall { aspect-ratio: 4 / 3.4; }
@media (max-width: 900px) { .device-panel--tall { aspect-ratio: 16 / 10; } }

/* The global list reset only covered ul; this rail is an ol and was showing
   browser numbering next to its own catalogue codes. */
.explorer-rail { list-style: none; margin: 0; padding: 0; }
.explorer-rail li { margin: 0; }

/* Keep the two stage actions on one line at normal widths */
.stage-actions .btn, .stage-actions .add-btn { white-space: nowrap; }
.stage-actions .btn { padding: 13px 20px; }

/* The glyph was floating small in a large stage panel */
.stage-visual .plate-glyph { width: 168px; height: 168px; }
.stage-visual .pcard-plate::before { background-size: 38px 38px; opacity: .38; }

/* Rail rows breathe to sit closer to the stage height */
@media (min-width: 961px) {
  .rail-item { padding-block: 18px; }
}

/* ==========================================================================
   20. PRODUCTS DROPDOWN
   ========================================================================== */
.nav-drop { position: relative; }

.nav-drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-drop-trigger .caret { transition: transform var(--fast) var(--ease); opacity: .7; }
.nav-drop.is-open .nav-drop-trigger .caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, -6px);
  width: min(640px, calc(100vw - 40px));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shade-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--fast) var(--ease),
              transform var(--fast) var(--ease),
              visibility var(--fast) var(--ease);
  z-index: 95;
}
/* Bridges the gap so the pointer can travel from trigger to menu */
.nav-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -16px;
  height: 16px;
}
.nav-drop.is-open .nav-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-menu-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 26px;
  padding: 22px 24px 20px;
}
.nav-col h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.nav-col ul { margin: 0; padding: 0; list-style: none; }

.nav-menu a.nav-link {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav-menu a.nav-link:hover { background: var(--indigo-wash); color: var(--indigo); }
.nav-menu a.nav-link .n {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
}
.nav-menu a.nav-link:hover .n { color: var(--indigo); }
.nav-menu a.nav-link .b {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 2px;
}

.nav-all {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--indigo);
}
.nav-all:hover { text-decoration: underline; }

/* Dark-hero header: the panel itself stays light for legibility */
body.has-dark-hero .site-header:not(.is-stuck):not(.nav-open) .nav-menu a.nav-link { color: var(--ink); }

/* Mobile: the dropdown becomes an inline expanding block, not a floating panel */
@media (max-width: 980px) {
  .nav-drop { display: block; }
  .nav-drop-trigger {
    justify-content: space-between;
    width: 100%;
    padding: 15px 0;
    font-size: 17px;
    border-bottom: 1px solid var(--line);
  }
  .nav-menu {
    position: static;
    transform: none;
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-drop.is-open .nav-menu { display: block; transform: none; }
  .nav-menu::before { display: none; }
  .nav-menu-inner { grid-template-columns: 1fr; padding: 12px 0 16px; gap: 16px; }
  .nav-menu a.nav-link { padding: 11px 8px; font-size: 15.5px; }
}

/* ==========================================================================
   21. CATEGORY SPLIT — hardware vs software
   ========================================================================== */
.cat-group + .cat-group { margin-top: clamp(56px, 7vw, 88px); }

.cat-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 8px 20px;
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 2px solid var(--indigo);
}
.cat-head h2 { font-size: clamp(24px, 3vw, 34px); }
.cat-head p { color: var(--ink-2); font-size: 15.5px; margin: 0; }
.cat-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--indigo);
  background: var(--indigo-wash);
  border-radius: 3px;
  padding: 5px 10px;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .cat-head { grid-template-columns: 1fr auto; }
  .cat-head p { grid-column: 1 / -1; }
}

/* Explorer filter tabs */
.explorer-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.filt {
  padding: 9px 18px;
  border: 1.5px solid var(--line-2);
  border-radius: 40px;
  background: var(--paper);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.filt:hover { border-color: var(--indigo); color: var(--indigo); }
.filt.is-on { background: var(--indigo); border-color: var(--indigo); color: #fff; }

/* ==========================================================================
   22. FUSION UEM DEVICE ROW
   ========================================================================== */
.device-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: var(--shade-sm);
  margin-top: 8px;
}
.device-chip {
  background: var(--paper);
  padding: 22px 10px 18px;
  text-align: center;
  transition: background var(--mid) var(--ease);
}
.device-chip:hover { background: var(--indigo-mist); }
.device-chip img {
  width: 58px; height: 58px;
  margin: 0 auto 10px;
  object-fit: contain;
  opacity: .82;
}
.device-chip span {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-2);
  line-height: 1.35;
}

/* The Illumineye mark is supplied on white, so it sits in a light plate
   rather than being knocked out against the indigo. */
.brand-strip .brand-illumineye {
  height: 46px;
  background: #fff;
  border-radius: 4px;
  padding: 7px 12px;
  box-sizing: content-box;
}

/* Screenshots must be shown whole — cropping a UI shot destroys the point
   of it. Photographs still fill their cell. */
.gallery-grid { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.gallery-grid .shot { min-height: 0; aspect-ratio: 16 / 10; }
.shot--contain {
  background: linear-gradient(140deg, var(--indigo-wash), var(--indigo-mist));
  padding: 14px;
}
.shot--contain img {
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 6px 18px -10px rgba(34,28,85,.5);
}
.shot--contain figcaption { padding: 26px 16px 12px; }

/* ==========================================================================
   23. SERIES & MODEL EXPLORER (product lines with many configurations)
   ========================================================================== */
.series-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.series-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1.5px solid var(--line-2);
  border-radius: 40px;
  background: var(--paper);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.series-tab span {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--mist);
  color: var(--ink-3);
}
.series-tab:hover { border-color: var(--indigo); color: var(--indigo); }
.series-tab.is-on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.series-tab.is-on span { background: rgba(255,255,255,.2); color: #fff; }

.series-blurb {
  color: var(--ink-2);
  font-size: 15.5px;
  max-width: 78ch;
  margin: 0 0 26px;
}

.model-layout {
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) { .model-layout { grid-template-columns: 1fr; } }

.model-rail {
  list-style: none;
  margin: 0; padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shade-sm);
  position: sticky;
  top: 96px;
}
@media (max-width: 900px) {
  .model-rail {
    position: static;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .model-rail li { flex: none; border-right: 1px solid var(--line); }
  .model-item { min-width: 190px; scroll-snap-align: start; }
}
.model-rail li { border-bottom: 1px solid var(--line); }
.model-rail li:last-child { border-bottom: 0; }

.model-item {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
  padding: 14px 16px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background var(--fast) var(--ease), padding-left var(--fast) var(--ease);
}
.model-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--indigo);
  transform: scaleY(0);
  transition: transform var(--mid) var(--ease);
}
.model-item:hover { background: var(--indigo-mist); }
.model-item[aria-selected="true"] { background: var(--indigo-wash); padding-left: 22px; }
.model-item[aria-selected="true"]::before { transform: scaleY(1); }
.mi-n { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding-top: 2px; }
.model-item[aria-selected="true"] .mi-n { color: var(--indigo); }
.mi-name { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.model-item[aria-selected="true"] .mi-name { color: var(--indigo); }

.model-stage {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  box-shadow: var(--shade-sm);
  overflow: hidden;
}
.model-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) { .model-head { grid-template-columns: 1fr; } }

.model-shot {
  background:
    radial-gradient(85% 85% at 50% 30%, #fff, transparent 70%),
    linear-gradient(150deg, var(--indigo-wash), #E4F3F1);
  display: grid;
  place-items: center;
  padding: 26px;
  min-height: 260px;
}
.model-shot img { max-width: 100%; max-height: 250px; object-fit: contain; }

.model-intro { padding: clamp(22px, 3vw, 32px); }
.mbadges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.mbadge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  padding: 5px 10px;
  border-radius: 3px;
  background: var(--indigo);
  color: #fff;
}
.model-intro h3 { font-size: clamp(19px, 2.1vw, 25px); margin-bottom: 18px; }

.qk-row { display: grid; gap: 10px; margin-bottom: 22px; }
.qk {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.qk-k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.qk-v { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }

.model-stage .spec-table { border: 0; border-radius: 0; }
.model-stage .btn { font-size: 14px; padding: 12px 20px; }

.model-stage > * { opacity: 0; }
.model-stage.is-in > * { animation: stageIn 380ms var(--ease) forwards; }
.model-stage.is-in > *:nth-child(2) { animation-delay: 70ms; }
@media (prefers-reduced-motion: reduce) {
  .model-stage > * { opacity: 1; animation: none !important; }
}

/* Detail hero honours a contain fit for cutouts on a tinted plate */
.detail-hero--contain {
  display: grid;
  place-items: center;
  padding: 22px;
}
.detail-hero--contain img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* ==========================================================================
   24. INFOGRAPHIC PLATES + LIGHTBOX
   Dense brochure slides need width to be legible, a caption that doesn't
   sit on top of the artwork, and a way to open them full size.
   ========================================================================== */
.gallery-grid { grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }

.shot--contain {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  cursor: zoom-in;
  padding: 0;
  background: var(--paper);
  border-color: var(--line);
}
.shot--contain img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: linear-gradient(140deg, var(--indigo-wash), var(--indigo-mist));
  border-radius: 0;
  box-shadow: none;
}
/* Caption below the plate, not over it */
.shot--contain figcaption {
  position: static;
  background: none;
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.45;
  padding: 13px 16px 15px;
  border-top: 1px solid var(--line);
}
.shot--contain::after { border-radius: 7px; }
.shot--contain:hover { box-shadow: var(--shade-md); }

.zoom-hint {
  position: absolute;
  right: 12px; top: 12px;
  z-index: 2;
  width: 30px; height: 30px;
  border-radius: 4px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--indigo);
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}
.shot--contain:hover .zoom-hint { opacity: 1; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(16,14,32,.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mid) var(--ease), visibility var(--mid) var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 84vh;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
}
.lightbox figcaption {
  color: rgba(255,255,255,.82);
  font-size: 14.5px;
  text-align: center;
  margin-top: 16px;
  max-width: 70ch;
}
.lightbox-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 44px; height: 44px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lightbox-close:hover { background: rgba(255,255,255,.18); }

/* ==========================================================================
   25. SERIES FEATURE STRIP (headline capabilities from the brochure cover)
   ========================================================================== */
.feat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: var(--shade-sm);
  margin-bottom: 26px;
}
.feat {
  background: var(--paper);
  padding: 18px 10px 16px;
  text-align: center;
  transition: background var(--mid) var(--ease);
}
.feat:hover { background: var(--indigo-mist); }
.feat img {
  width: 44px; height: 44px;
  margin: 0 auto 9px;
  object-fit: contain;
  opacity: .85;
}
.feat span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .03em;
  line-height: 1.4;
  color: var(--ink-2);
}

/* A lone series tab tells the reader nothing — hide the row entirely */
.series-tabs.is-hidden { display: none; }

/* ==========================================================================
   26. HERO VISUAL (abstract, no product)
   ========================================================================== */
.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(8px, 2vw, 24px);
}
.hero-visual img { width: 100%; height: auto; }
.hero-visual-tag {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(27,22,70,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 40px;
  padding: 7px 16px;
}
@media (max-width: 520px) {
  .hero-visual-tag { font-size: 9.5px; letter-spacing: .08em; padding: 6px 11px; }
}

/* ==========================================================================
   27. MULTI-SELECT (territory)
   ========================================================================== */
.ms { position: relative; }

.ms-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ms-chips:not(:empty) { margin-bottom: 10px; }
.ms-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px 6px 12px;
  border-radius: 40px;
  background: var(--indigo-wash);
  border: 1px solid var(--indigo);
  color: var(--indigo);
  font-size: 13.5px;
  font-weight: 600;
}
.ms-chip button {
  border: 0;
  background: var(--indigo);
  color: #fff;
  width: 18px; height: 18px;
  border-radius: 50%;
  line-height: 1;
  font-size: 13px;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.ms-chip button:hover { background: var(--indigo-deep); }

.ms-control { position: relative; }
.ms-search { width: 100%; }
.ms-search:disabled { background: var(--mist); cursor: not-allowed; }

.ms-list {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  z-index: 40;
  max-height: 260px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  box-shadow: var(--shade-md);
  padding: 6px;
}
.ms-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border: 0;
  border-radius: 4px;
  background: none;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
}
.ms-opt:hover { background: var(--indigo-wash); color: var(--indigo); }
.ms-empty { padding: 12px; color: var(--ink-3); font-size: 14px; margin: 0; }

[data-multiselect].is-locked .ms-search { color: var(--ink-3); }

/* Partner benefits list no longer carries index numbers */
.info-row .v:only-child { display: block; }

/* Menu links are now a single label — the old two-column grid (index +
   name/brand) was squeezing them into a narrow track and wrapping them. */
.nav-menu a.nav-link {
  display: block;
  grid-template-columns: none;
  white-space: nowrap;
}
.nav-menu-inner { gap: 8px 34px; padding: 22px 26px 20px; }
.nav-menu { width: min(560px, calc(100vw - 40px)); }
@media (max-width: 980px) {
  .nav-menu a.nav-link { white-space: normal; }
}

/* ==========================================================================
   28. PRODUCT CAROUSELS (catalogue page)
   Native scroll-snap so touch and trackpad gestures keep working; arrows and
   dots are additions on top rather than a replacement for scrolling.
   ========================================================================== */
.cat-head {
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 20px;
}
.cat-head > div { min-width: 0; }
.cat-head p { margin-top: 6px; }

.carousel-nav { display: flex; gap: 8px; }
.cnav {
  width: 42px; height: 42px;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  background: var(--paper);
  color: var(--indigo);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--fast) var(--ease);
}
.cnav:hover:not(:disabled) {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
  transform: translateY(-1px);
}
.cnav:disabled { opacity: .3; cursor: default; }

.carousel { position: relative; }

.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 22px) / 3);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 8px;
  margin: -4px -4px -8px;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > .pcard { scroll-snap-align: start; }
.carousel-track:focus-visible { outline: 2.5px solid var(--indigo-bright); outline-offset: 4px; }

@media (max-width: 1100px) { .carousel-track { grid-auto-columns: calc((100% - 22px) / 2); } }
@media (max-width: 720px)  { .carousel-track { grid-auto-columns: 84%; } }

/* Cards inside a carousel are equal height and never squashed */
.carousel-track .pcard { height: 100%; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.cdot {
  width: 30px; height: 4px;
  border: 0;
  border-radius: 4px;
  background: var(--line-2);
  cursor: pointer;
  padding: 0;
  transition: background var(--fast) var(--ease), width var(--fast) var(--ease);
}
.cdot:hover { background: var(--ink-3); }
.cdot.is-on { background: var(--indigo); width: 44px; }

/* The card header row is gone, so the title leads */
.pcard-body { padding-top: 26px; }

@media (max-width: 720px) {
  .cat-head { grid-template-columns: 1fr; }
  .carousel-nav { display: none; }
}

/* ==========================================================================
   29. FIXES — rail layout and in-focus sizing
   ========================================================================== */

/* The rail lost its index and brand spans, but the three-column grid stayed,
   squeezing the name into a 34px track and wrapping it one word per line. */
.rail-item {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 16px 18px;
}
.rail-name { font-size: 15.5px; }
@media (max-width: 700px) {
  .rail-item { grid-template-columns: auto; }
}

/* --- In focus: smaller, and images shown whole ------------------------- */
.showcase {
  grid-template-columns: 1.15fr 1fr;
  gap: 18px;
  max-width: 980px;
}
.showcase .shot {
  min-height: 0;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, #EFF4F6, var(--indigo-mist));
}
.showcase .shot-col { gap: 18px; }
.showcase .shot-col .shot { aspect-ratio: 16 / 10; }

/* Photography carries its own backdrop, so let it fill the frame. Contain
   would letterbox and expose the photo's own edge inside our plate. */
.showcase .shot img {
  object-fit: cover;
  object-position: center;
}
.showcase figcaption {
  background: linear-gradient(transparent, rgba(22,21,31,.55));
  font-size: 11px;
  padding: 24px 14px 11px;
}

@media (max-width: 820px) {
  .showcase { grid-template-columns: 1fr; max-width: none; }
  .showcase .shot { aspect-ratio: 16 / 10; }
}

/* Explorer stage: product photography is shot on its own backdrop, so
   contain it inside the plate instead of cropping the device at the edge. */
.stage-visual > img {
  object-fit: cover;
  object-position: center;
}
.stage-visual {
  background:
    radial-gradient(80% 80% at 50% 34%, #FFFFFF, transparent 72%),
    linear-gradient(150deg, #EFF4F6, var(--indigo-mist));
}
.explorer-stage { min-height: 420px; }

/* ==========================================================================
   30. PRODUCTS MEGA MENU
   ========================================================================== */
.nav-menu { width: min(920px, calc(100vw - 40px)); }

.mega {
  display: grid;
  grid-template-columns: 296px 1fr;
  min-height: 372px;
}

/* --- left rail ---------------------------------------------------------- */
.mega-rail {
  border-right: 1px solid var(--line);
  background: var(--indigo-mist);
  padding: 18px 14px;
  border-radius: 8px 0 0 0;
}
.mega-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 6px 10px 8px;
}
.mega-eyebrow + .mega-sols { margin-bottom: 4px; }
.mega-cats, .mega-sols { list-style: none; margin: 0 0 14px; padding: 0; }
.mega-sols { margin-bottom: 0; }

.mega-cat, .mega-sols a {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  padding: 9px 12px;
  border: 0;
  border-radius: 5px;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.mc-name {
  grid-column: 1;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.mc-also {
  grid-column: 1;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.35;
}
.mega-cat svg { grid-column: 2; grid-row: 1 / span 2; color: var(--ink-3); opacity: 0; transition: opacity var(--fast) var(--ease); }

.mega-cat:hover, .mega-sols a:hover { background: rgba(255,255,255,.85); }
.mega-cat:hover .mc-name, .mega-sols a:hover .mc-name { color: var(--indigo); }
.mega-cat.is-on { background: var(--paper); box-shadow: var(--shade-sm); }
.mega-cat.is-on .mc-name { color: var(--indigo); }
.mega-cat.is-on svg { opacity: 1; color: var(--indigo); }

/* --- right panel -------------------------------------------------------- */
.mega-panel { padding: 24px 26px; }

.mega-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.mega-head h4 { font-size: 19px; margin-bottom: 5px; }
.mega-head p { font-size: 13.5px; color: var(--ink-2); margin: 0; max-width: 46ch; }
.mega-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--indigo);
  white-space: nowrap;
  padding: 7px 12px;
  border: 1.5px solid var(--line-2);
  border-radius: 40px;
  transition: all var(--fast) var(--ease);
}
.mega-all:hover { border-color: var(--indigo); background: var(--indigo-wash); }

.mega-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 22px;
}
.mega-tier h5 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 9px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--indigo-wash);
}
.mega-tier ul { list-style: none; margin: 0; padding: 0; }
.mega-tier li { margin-bottom: 2px; }
.mega-tier a {
  display: block;
  padding: 6px 9px;
  margin-left: -9px;
  border-radius: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.mega-tier a:hover { background: var(--indigo-wash); color: var(--indigo); }

.mega-panel > * { opacity: 0; }
.mega-panel.is-in > * { animation: stageIn 300ms var(--ease) forwards; }
.mega-panel.is-in > *:nth-child(2) { animation-delay: 50ms; }
@media (prefers-reduced-motion: reduce) {
  .mega-panel > * { opacity: 1; animation: none !important; }
}

/* --- footer ------------------------------------------------------------- */
.mega-foot {
  display: flex;
  gap: 26px;
  padding: 13px 26px;
  border-top: 1px solid var(--line);
  background: var(--mist);
  border-radius: 0 0 8px 8px;
}
.mega-foot a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--indigo);
}
.mega-foot a:hover { text-decoration: underline; }

/* --- mobile: rail and panel stack into one scrolling list --------------- */
@media (max-width: 980px) {
  .mega { grid-template-columns: 1fr; min-height: 0; }
  .mega-rail {
    border-right: 0;
    border-radius: 0;
    background: transparent;
    padding: 8px 0 0;
  }
  .mega-cat, .mega-sols a { padding: 12px 10px; }
  .mega-cat.is-on { box-shadow: none; background: var(--indigo-wash); }
  .mega-panel { padding: 4px 10px 12px; border-top: 1px solid var(--line); }
  .mega-head { flex-direction: column; gap: 10px; }
  .mega-tiers { grid-template-columns: 1fr 1fr; }
  .mega-foot { flex-direction: column; gap: 12px; padding: 14px 10px; background: transparent; }
}

/* The dark-hero header turns nav links white. The mega panel sits inside
   .nav but is always a light surface, so its text must stay dark. */
.site-header .nav-menu a,
body.has-dark-hero .site-header .nav-menu a,
body.has-dark-hero .site-header.is-stuck .nav-menu a { color: var(--ink); }

.site-header .nav-menu .mega-tier a,
body.has-dark-hero .site-header .nav-menu .mega-tier a { color: var(--ink); }
.site-header .nav-menu .mega-tier a:hover,
body.has-dark-hero .site-header .nav-menu .mega-tier a:hover { color: var(--indigo); }

.site-header .nav-menu .mega-all,
.site-header .nav-menu .mega-foot a,
body.has-dark-hero .site-header .nav-menu .mega-all,
body.has-dark-hero .site-header .nav-menu .mega-foot a { color: var(--indigo); }

.site-header .nav-menu .mc-name,
body.has-dark-hero .site-header .nav-menu .mc-name { color: var(--ink); }
.site-header .nav-menu .mc-also,
body.has-dark-hero .site-header .nav-menu .mc-also { color: var(--ink-3); }
.site-header .nav-menu .mega-cat.is-on .mc-name,
.site-header .nav-menu .mega-cat:hover .mc-name,
.site-header .nav-menu .mega-sols a:hover .mc-name,
body.has-dark-hero .site-header .nav-menu .mega-cat.is-on .mc-name,
body.has-dark-hero .site-header .nav-menu .mega-cat:hover .mc-name,
body.has-dark-hero .site-header .nav-menu .mega-sols a:hover .mc-name { color: var(--indigo); }

/* These live inside .nav, so the underline-on-current rule must not apply */
.nav-menu a::after { display: none !important; }

/* ==========================================================================
   30. PRODUCTS MEGA-MENU (authoritative layout)
   Overrides the earlier narrow dropdown sizing.
   ========================================================================== */
.nav-menu.is-mega {
  width: min(1000px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
}

.mega {
  display: grid;
  grid-template-columns: 286px 1fr;
  align-items: stretch;
}

/* --- category rail ------------------------------------------------------ */
.mega-rail {
  background: var(--indigo-mist);
  border-right: 1px solid var(--line);
  padding: 18px 14px 16px;
}
.mega-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 8px;
  padding: 0 10px;
}
.mega-eyebrow + .mega-cats { margin-bottom: 18px; }
.mega-cats, .mega-sols { list-style: none; margin: 0 0 4px; padding: 0; }
.mega-cats li, .mega-sols li { margin: 0; }

.mega-cat,
.mega-sols a {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-radius: 5px;
  background: none;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.mega-cat svg { opacity: 0; transform: translateX(-4px); transition: all var(--fast) var(--ease); color: var(--indigo); }
.mega-cat:hover, .mega-sols a:hover { background: rgba(255,255,255,.75); }
.mega-cat.is-on { background: var(--paper); box-shadow: var(--shade-sm); }
.mega-cat.is-on svg { opacity: 1; transform: none; }

.mc-name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.mega-cat.is-on .mc-name, .mega-sols a:hover .mc-name { color: var(--indigo); }
.mc-also {
  grid-column: 1 / -1;
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .02em;
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.35;
}

/* --- detail panel ------------------------------------------------------- */
.mega-panel { padding: 22px 26px 24px; min-height: 268px; }

.mega-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.mega-head h4 { font-size: 20px; margin: 0 0 4px; }
.mega-head p { margin: 0; font-size: 13.5px; color: var(--ink-2); max-width: 46ch; line-height: 1.5; }

.mega-all {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--indigo);
  border: 1.5px solid var(--line-2);
  border-radius: 40px;
  padding: 8px 15px;
  white-space: nowrap;
  transition: all var(--fast) var(--ease);
}
.mega-all:hover { background: var(--indigo); border-color: var(--indigo); color: #fff; }

.mega-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px 26px;
}
.mega-tier h5 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.mega-tier ul { list-style: none; margin: 0; padding: 0; }
.mega-tier li { margin: 0; }
.mega-tier a {
  display: block;
  padding: 6px 8px;
  margin-left: -8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.mega-tier a:hover { background: var(--indigo-wash); color: var(--indigo); }

/* entrance on category swap */
.mega-panel > * { opacity: 0; }
.mega-panel.is-in > * { animation: stageIn 300ms var(--ease) forwards; }
.mega-panel.is-in > *:nth-child(2) { animation-delay: 60ms; }
@media (prefers-reduced-motion: reduce) {
  .mega-panel > * { opacity: 1; animation: none !important; }
}

/* --- footer ------------------------------------------------------------- */
.mega-foot {
  display: flex;
  gap: 26px;
  padding: 13px 26px;
  border-top: 1px solid var(--line);
  background: var(--mist);
}
.mega-foot a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--indigo);
}
.mega-foot a:hover { text-decoration: underline; }

/* --- mobile: rail and panel stack, panel opens under the tapped item ---- */
@media (max-width: 980px) {
  .nav-menu.is-mega { width: 100%; overflow: visible; }
  .mega { grid-template-columns: 1fr; }
  .mega-rail { border-right: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 8px 0 12px; }
  .mega-panel { padding: 16px 0 18px; min-height: 0; }
  .mega-head { flex-direction: column; gap: 12px; }
  .mega-tiers { grid-template-columns: 1fr 1fr; }
  .mega-foot { padding: 14px 0; background: transparent; flex-wrap: wrap; gap: 14px 22px; }
  .mega-cat, .mega-sols a { padding: 12px 10px; }
}
@media (max-width: 520px) {
  .mega-tiers { grid-template-columns: 1fr; }
}


/* The mega panel is far wider than its trigger, so anchor it to the header
   row rather than the Products link — centring on the trigger pushed it off
   the left edge of the viewport. */
@media (min-width: 981px) {
  .site-header .header-inner { position: relative; }
  .nav-drop { position: static; }
  .nav-menu.is-mega {
    left: 0;
    right: auto;
    transform: translateY(-6px);
    top: calc(100% + 6px);
  }
  .nav-drop.is-open .nav-menu.is-mega { transform: none; }
  .nav-menu.is-mega::before { left: 0; right: 0; top: -18px; height: 18px; }
}

/* Panel height should follow the rail, not stretch to a fixed minimum */
@media (min-width: 981px) {
  .mega { align-items: start; }
  .mega-panel { min-height: 0; }
  .mega-rail { min-height: 100%; }
}

/* The panel's ::before bridge spanned its full 1000px width, which would sit
   over the other nav links and swallow their clicks. Closing is handled by a
   short timer in site.js instead. */
.nav-menu.is-mega::before { display: none; }

/* Tighten the gap the pointer has to cross */
@media (min-width: 981px) {
  .nav-menu.is-mega { top: calc(100% - 8px); }
}

/* ==========================================================================
   31. MEGA-MENU — thumbnail, data sheet button, nested solutions
   ========================================================================== */
.mega-head { align-items: flex-start; }
.mega-headtext { flex: 1; min-width: 0; }

.mega-thumb {
  flex: none;
  width: 116px;
  height: 84px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, var(--indigo-wash), #E4F3F1);
  display: grid;
  place-items: center;
}
.mega-thumb img { width: 100%; height: 100%; object-fit: cover; }

.mega-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.mega-ds {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--indigo);
  border: 1.5px solid var(--indigo);
  border-radius: 40px;
  padding: 8px 15px;
  white-space: nowrap;
  transition: all var(--fast) var(--ease);
}
.mega-ds:hover { background: var(--indigo); color: #fff; }

/* nested solution items */
.mega-subs { list-style: none; margin: 2px 0 6px; padding: 0 0 0 12px; }
.mega-subs li { position: relative; }
.mega-subs a {
  display: block;
  padding: 7px 12px 7px 14px;
  border-radius: 5px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  transition: all var(--fast) var(--ease);
}
.mega-subs a::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--line-2);
}
.mega-subs a:hover { background: rgba(255,255,255,.75); color: var(--indigo); }

/* Industrial PC has five ranges — let the panel scroll rather than grow */
.mega-tiers { max-height: 340px; overflow-y: auto; padding-right: 4px; }
.mega-tiers::-webkit-scrollbar { width: 6px; }
.mega-tiers::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }

@media (max-width: 980px) {
  .mega-thumb { width: 84px; height: 62px; }
  .mega-head { flex-direction: row; }
  .mega-tiers { max-height: none; overflow: visible; }
}

/* ==========================================================================
   32. PERSISTENT MAKE IN INDIA BADGE
   Fixed to the left margin, outside the 1240px content column, so it never
   sits over text. Below that width it drops to a small corner mark.
   ========================================================================== */
.mii-badge {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 70;
  width: 84px;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 50%;
  background: rgba(34, 28, 85, .55);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: .85;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.mii-badge:hover { opacity: 1; transform: translateY(-50%) scale(1.04); }
.mii-badge img { width: 100%; height: auto; display: block; }

/* On light sections the white mark needs a solid ground to read against */
.mii-badge { box-shadow: 0 10px 30px -14px rgba(34,28,85,.6); }

/* Below the point where the content column would collide, move it to the
   bottom-left corner and shrink it. */
@media (max-width: 1480px) {
  .mii-badge {
    top: auto;
    bottom: 20px;
    left: 20px;
    transform: none;
    width: 62px;
    padding: 8px;
  }
  .mii-badge:hover { transform: scale(1.04); }
}
@media (max-width: 620px) {
  .mii-badge { width: 48px; padding: 6px; bottom: 14px; left: 14px; }
}
/* Keep clear of the enquiry tray when it is up */
.tray.is-up ~ .mii-badge,
body:has(.tray.is-up) .mii-badge { bottom: 96px; }

@media print { .mii-badge { display: none; } }

/* ==========================================================================
   33. HERO CAROUSEL
   Copy and visual cross-fade together. Slides are stacked so the hero never
   changes height as it advances.
   ========================================================================== */
.hero-copy { display: grid; }
.hero-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease), visibility 520ms;
  pointer-events: none;
}
.hero-slide.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.hero-visual { display: grid; position: relative; }
.hero-frame {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(.97);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease), visibility 620ms;
}
.hero-frame.is-on { opacity: 1; visibility: visible; transform: none; }
.hero-frame img { width: 100%; height: auto; }

.hero-frame .hero-visual-tag {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.hdot {
  width: 26px; height: 4px;
  border: 0;
  border-radius: 4px;
  background: rgba(255,255,255,.28);
  cursor: pointer;
  padding: 0;
  transition: background var(--fast) var(--ease), width var(--fast) var(--ease);
}
.hdot:hover { background: rgba(255,255,255,.55); }
.hdot.is-on { background: var(--accent); width: 40px; }

@media (max-width: 900px) {
  .hero-dots { bottom: -22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-frame { transition: none; }
}

/* ==========================================================================
   34. APPLICATIONS BAND (replaces the old "In focus" showcase)
   ========================================================================== */
.use-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shade-sm);
}
.use {
  background: var(--paper);
  padding: 30px 26px 26px;
  transition: background var(--mid) var(--ease);
}
.use:hover { background: var(--indigo-mist); }
.use img {
  width: 44px; height: 44px;
  margin-bottom: 16px;
  opacity: .9;
}
.use h3 { font-size: 18px; margin-bottom: 9px; }
.use p { font-size: 15px; color: var(--ink-2); line-height: 1.6; margin-bottom: 14px; }
.use-tags {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--indigo);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   35. VARIANTS BAND ON PRODUCT PAGES
   ========================================================================== */
.variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shade-sm);
}
.variant { background: var(--paper); padding: 24px 22px; }
.variant-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--indigo);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.variant ul { list-style: none; margin: 0; padding: 0; }
.variant li {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
}
.variant li:last-child { border-bottom: 0; }

.stage-variants {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-2);
  margin: 0 0 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.stage-variants span {
  display: block;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 5px;
}

.btn--ds { display: inline-flex; align-items: center; gap: 8px; }

/* Model stage: tagline, description and action row */
.model-tagline {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--indigo);
  line-height: 1.4;
  margin: 0 0 12px;
}
.model-summary {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.62;
  margin: 0 0 18px;
}
.model-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.model-actions .btn { font-size: 13.5px; padding: 11px 18px; }
.model-shot { align-content: center; }

/* ==========================================================================
   36. MENU ITEM THUMBNAILS
   ========================================================================== */
.mega-tier a {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
}
.mi-thumb {
  width: 38px; height: 30px;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--indigo-wash), #E4F3F1);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  flex: none;
}
.mi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mi-label { font-size: 13.5px; line-height: 1.3; }

.mega-tier a:hover .mi-thumb { border-color: var(--indigo); }

/* Wider tier columns now that each row carries a thumbnail */
.mega-tiers { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.nav-menu.is-mega { width: min(1080px, calc(100vw - 32px)); }

/* Hot-linked manufacturer photography: if it can't load, show the plate
   rather than a broken-image icon. */
.model-shot.is-empty img { display: none; }
.model-shot.is-empty::after {
  content: "";
  width: 64px; height: 64px;
  border-radius: 8px;
  border: 2px dashed var(--line-2);
}

/* ==========================================================================
   37. IMAGE FITTING — product photography is contained, never cropped
   Product shots come on their own backdrop, so filling the frame magnified
   the device and cut its edges off. Every product image now sits *inside*
   its frame on a tinted plate, at its true proportions.
   ========================================================================== */

/* --- catalogue cards ---------------------------------------------------- */
.pcard-media {
  height: 200px;
  background:
    radial-gradient(72% 72% at 50% 38%, #FFFFFF, transparent 70%),
    linear-gradient(150deg, #EFF4F6, var(--indigo-mist));
  display: grid;
  place-items: center;
}
.pcard-media img {
  width: auto;
  height: auto;
  max-width: calc(100% - 34px);
  max-height: calc(100% - 30px);
  object-fit: contain;
}
.pcard:hover .pcard-media img { transform: scale(1.03); }

/* --- home explorer stage ------------------------------------------------ */
.stage-visual { display: grid; place-items: center; padding: 26px; }
.stage-visual > img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
}
.stage-visual .pcard-plate { position: absolute; inset: 0; }

/* --- detail page hero --------------------------------------------------- */
.detail-hero {
  display: grid;
  place-items: center;
  padding: 20px;
  aspect-ratio: 4 / 3;
}
.detail-hero img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}

/* --- model stage on series pages ---------------------------------------- */
.model-shot { padding: 24px; }
.model-shot img { max-width: 100%; max-height: 230px; object-fit: contain; }

/* --- menu thumbnails ---------------------------------------------------- */
.mega-thumb img,
.mi-thumb img {
  width: auto; height: auto;
  max-width: calc(100% - 8px);
  max-height: calc(100% - 6px);
  object-fit: contain;
}
.mega-thumb, .mi-thumb { padding: 3px; }

/* --- gallery: photographs of people and rooms still fill their frame,
       product shots are contained ---------------------------------------- */
.gallery-grid .shot:not(.shot--contain) {
  background: linear-gradient(150deg, #EFF4F6, var(--indigo-mist));
  display: grid;
  place-items: center;
}
.gallery-grid .shot:not(.shot--contain) img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Percentage max-height on a centred grid item wasn't resolving against the
   frame, so tall cutouts still overflowed. Constrain in absolute units. */
.pcard-media { height: 220px; }
.pcard-media img { max-width: 78%; max-height: 176px; }

.stage-visual > img { max-height: 300px; max-width: 86%; }
.detail-hero img { max-height: 300px; max-width: 88%; }
.model-shot img { max-height: 220px; max-width: 86%; }

.mega-thumb img { max-width: 104px; max-height: 74px; }
.mi-thumb img   { max-width: 32px;  max-height: 24px; }

@media (max-width: 720px) {
  .pcard-media { height: 200px; }
  .pcard-media img { max-height: 158px; }
  .stage-visual > img { max-height: 220px; }
}

/* ==========================================================================
   38. HERO — softer ground, larger visual
   The blue grid read as graph paper. Replaced with layered aurora washes and
   a very faint vertical rule set, and the visual column gets more room.
   ========================================================================== */
.hero {
  background:
    radial-gradient(58% 62% at 78% 8%,  rgba(109, 92, 240, .55), transparent 62%),
    radial-gradient(46% 55% at 12% 84%, rgba(61, 214, 192, .16), transparent 64%),
    radial-gradient(70% 80% at 50% 120%, rgba(20, 16, 52, .85), transparent 70%),
    linear-gradient(165deg, #2C2470 0%, #241E5C 45%, #191446 100%);
}
/* Replace the grid with a few soft vertical rules, barely there */
.hero::before {
  background-image: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 160px 100%;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 62%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 62%, transparent);
  opacity: .8;
}

/* give the visual real presence */
.hero-grid { grid-template-columns: 1fr 1.02fr; align-items: center; }
.hero-visual { padding: 0; }
.hero-visual img { width: 100%; max-width: 620px; margin-inline: auto; }
@media (min-width: 1300px) {
  .hero-visual img { max-width: 700px; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual img { max-width: 520px; }
}

/* ==========================================================================
   39. MAKE IN INDIA BADGE — right-hand side
   ========================================================================== */
.mii-badge { left: auto; right: 18px; }
@media (max-width: 1480px) {
  .mii-badge { left: auto; right: 20px; bottom: 20px; }
}
@media (max-width: 620px) {
  .mii-badge { left: auto; right: 14px; bottom: 14px; }
}

/* place-items:center on the hero visual stopped the frames from stretching,
   so each slide collapsed to its intrinsic width. Let them fill the column. */
.hero-visual { justify-items: stretch; align-items: center; }
.hero-frame { width: 100%; }

/* ==========================================================================
   40. TOUCH TARGETS
   Carousel dots and menu rows were only a few pixels tall. Give them a
   transparent hit area big enough to tap without enlarging the visual mark.
   ========================================================================== */
.hdot, .cdot {
  position: relative;
  background-clip: padding-box;
}
.hdot::after, .cdot::after {
  content: "";
  position: absolute;
  left: -6px; right: -6px;
  top: -16px; bottom: -16px;
}
.mega-tier a { min-height: 40px; }
.mega-subs a { min-height: 38px; display: flex; align-items: center; }
.mega-sols a { min-height: 44px; }
.brand { padding-block: 6px; }

/* If the remote badge image is slow or blocked, its alt text was spilling
   across the page. Contain it. */
.mii-badge { overflow: hidden; font-size: 0; line-height: 0; }

/* ==========================================================================
   41. MENU LINK COLOURS — final word
   The dark-hero header rules colour every nav link white. The mega panel is
   a light surface sitting inside that header, so its links must opt out —
   nested items (Asset Management) were rendering white on near-white.
   ========================================================================== */
.site-header .nav-menu .mega-subs a,
body.has-dark-hero .site-header .nav-menu .mega-subs a,
body.has-dark-hero .site-header.is-stuck .nav-menu .mega-subs a {
  color: var(--ink-2);
}
.site-header .nav-menu .mega-subs a:hover,
body.has-dark-hero .site-header .nav-menu .mega-subs a:hover,
body.has-dark-hero .site-header.is-stuck .nav-menu .mega-subs a:hover {
  color: var(--indigo);
  background: var(--indigo-wash);
}
/* Same guarantee for the tier items and the panel's own links */
.site-header .nav-menu .mega-tier a,
body.has-dark-hero .site-header .nav-menu .mega-tier a { color: var(--ink); }
.site-header .nav-menu .mega-tier a:hover,
body.has-dark-hero .site-header .nav-menu .mega-tier a:hover {
  color: var(--indigo);
  background: var(--indigo-wash);
}
.site-header .nav-menu .mega-all,
body.has-dark-hero .site-header .nav-menu .mega-all { color: var(--indigo); }
.site-header .nav-menu .mega-all:hover,
body.has-dark-hero .site-header .nav-menu .mega-all:hover { color: #fff; }
.site-header .nav-menu .mega-foot a,
body.has-dark-hero .site-header .nav-menu .mega-foot a { color: var(--indigo); }

/* ==========================================================================
   42. PHOTOGRAPHIC HERO
   Full-bleed image carousel with the copy set over it. Every photograph gets
   the same treatment — desaturate slightly, push it toward the brand indigo,
   then lay a directional scrim under the text — so a mixed set of stock
   images still reads as one consistent piece.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(760px, 88vh);
  display: grid;
  align-items: center;
  padding-block: clamp(90px, 12vw, 150px) clamp(64px, 8vw, 96px);
  background: var(--indigo-deep);
  overflow: hidden;
}
.hero::before { display: none; }

/* --- image layer -------------------------------------------------------- */
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1000ms var(--ease);
}
.hero-shot.is-on { opacity: 1; }
.hero-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the unifying grade: slightly cooler, slightly flatter, so photographs
     from different sources sit together */
  filter: saturate(.72) contrast(1.04) brightness(.86);
  transform: scale(1.06);
  transition: transform 7s linear;
}
.hero-shot.is-on img { transform: scale(1); }

/* --- scrim -------------------------------------------------------------- */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(20,16,52,.94) 0%, rgba(24,19,64,.86) 34%, rgba(26,21,70,.42) 62%, rgba(26,21,70,.18) 100%),
    radial-gradient(70% 60% at 82% 12%, rgba(109,92,240,.34), transparent 66%),
    linear-gradient(180deg, rgba(16,13,42,.62) 0%, transparent 26%, transparent 62%, rgba(14,11,36,.72) 100%);
}

/* --- copy --------------------------------------------------------------- */
.hero-inner { position: relative; z-index: 1; }
.hero-copy { display: grid; max-width: 60ch; }
.hero-copy .hero-slide { grid-area: 1 / 1; }
.hero h1 {
  font-size: clamp(36px, 5.2vw, 64px);
  text-shadow: 0 2px 30px rgba(10, 8, 30, .45);
}
.hero .lede {
  max-width: 58ch;
  color: rgba(255,255,255,.86);
  text-shadow: 0 1px 18px rgba(10, 8, 30, .5);
}
.hero .btn-row { margin-top: 32px; }
.hero-proof { border-top-color: rgba(255,255,255,.22); max-width: 640px; }

/* --- controls ----------------------------------------------------------- */
.hero-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}
.hero-arrow {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.06);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all var(--fast) var(--ease);
}
.hero-arrow:hover { background: rgba(255,255,255,.18); border-color: #fff; }
.hero-dots { position: static; transform: none; display: flex; gap: 8px; }

@media (max-width: 900px) {
  .hero { min-height: 0; padding-block: 120px 60px; }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(18,14,48,.86) 0%, rgba(20,16,54,.78) 45%, rgba(14,11,36,.92) 100%),
      radial-gradient(80% 50% at 70% 6%, rgba(109,92,240,.3), transparent 70%);
  }
  .hero-copy { max-width: none; }
  .hero-controls { margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shot img { transition: none; transform: none; }
  .hero-shot { transition: none; }
}

/* Keep the hero controls clear of the Make in India badge on small screens */
@media (max-width: 620px) {
  .hero-controls { padding-right: 74px; }
}

/* ==========================================================================
   43. HERO — less crop, sharper image, badge to the bottom
   The Ken Burns push was magnifying an already-cropped photo. Removed, and
   the hero is shorter and wider so portrait sources lose less of the frame.
   ========================================================================== */
.hero {
  min-height: min(620px, 76vh);
  padding-block: clamp(84px, 10vw, 128px) clamp(56px, 7vw, 84px);
}
.hero-shot img {
  filter: saturate(.78) contrast(1.03) brightness(.88);
  transform: none;                 /* no zoom — the photo shows at true scale */
  transition: none;
}
.hero-shot.is-on img { transform: none; }

/* The copy block is fixed now, so it no longer needs to be a stack */
.hero-copy { display: block; max-width: 58ch; }

@media (max-width: 900px) {
  .hero { min-height: 0; padding-block: 112px 52px; }
}

/* --- Make in India: bottom of the screen, clear of the content ---------- */
.mii-badge {
  top: auto;
  bottom: 22px;
  right: 22px;
  left: auto;
  transform: none;
  width: 72px;
  padding: 9px;
}
.mii-badge:hover { transform: scale(1.05); }
@media (max-width: 1480px) {
  .mii-badge { bottom: 22px; right: 22px; width: 64px; }
}
@media (max-width: 620px) {
  .mii-badge { bottom: 14px; right: 14px; width: 50px; padding: 7px; }
}
body:has(.tray.is-up) .mii-badge { bottom: 96px; }

/* Hero controls sit bottom-left, so they no longer clash with the badge */
@media (max-width: 620px) { .hero-controls { padding-right: 0; } }

/* Thirteen dots at full width became a long ladder — compact them. */
.hero-dots .hdot { width: 14px; }
.hero-dots .hdot.is-on { width: 30px; }
@media (max-width: 620px) {
  .hero-dots { flex-wrap: wrap; max-width: 190px; gap: 6px; }
  .hero-dots .hdot { width: 12px; }
  .hero-dots .hdot.is-on { width: 24px; }
}

/* On narrow phones the badge and the hero arrows can land on the same spot.
   Keep the control row clear of it. */
@media (max-width: 620px) {
  .hero-controls { padding-right: 72px; }
  .hero-dots { max-width: 150px; }
}

/* ==========================================================================
   44. HERO — single-subject photographs
   Slides can be nudged right so the subject clears the headline. The image is
   scaled up a touch first, so a shift never exposes a bare edge, and the left
   strip it vacates falls under the opaque part of the scrim.
   ========================================================================== */
.hero-shot img {
  transform-origin: center;
  will-change: transform;
}
/* The base zoom that gives `shift` room to work without showing an edge */
.hero-shot { overflow: hidden; }
.hero-shot img { transform: scale(1.12); }

/* Deepen the left of the scrim so the copy always has a solid ground and any
   vacated strip is invisible */
.hero-scrim {
  background:
    linear-gradient(100deg, rgba(18,14,48,.97) 0%, rgba(20,16,56,.93) 30%, rgba(24,19,64,.55) 58%, rgba(26,21,70,.20) 100%),
    radial-gradient(70% 60% at 84% 12%, rgba(109,92,240,.30), transparent 66%),
    linear-gradient(180deg, rgba(16,13,42,.66) 0%, transparent 24%, transparent 60%, rgba(14,11,36,.78) 100%);
}

/* Four images — dots return to a comfortable size */
.hero-dots .hdot { width: 26px; }
.hero-dots .hdot.is-on { width: 40px; }
@media (max-width: 620px) {
  .hero-dots { max-width: none; flex-wrap: nowrap; }
  .hero-dots .hdot { width: 20px; }
  .hero-dots .hdot.is-on { width: 32px; }
}

/* ==========================================================================
   45. HERO — the photograph gets its own panel
   A single-subject photo behind full-bleed text will always risk a collision.
   The image now occupies the right of the hero and dissolves into the
   background on its left, so the copy has clean ground and the subject sits
   in open space. On phones it returns to full-bleed behind a heavier overlay.
   ========================================================================== */
@media (min-width: 901px) {
  .hero-media {
    left: 32%;
    right: 0;
    top: 0;
    bottom: 0;
    /* dissolve the left edge into the hero ground */
    mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
  }
  /* the panel carries the image, so the scrim only needs to soften it */
  .hero-scrim {
    background:
      linear-gradient(100deg, rgba(18,14,48,.92) 0%, rgba(20,16,56,.72) 34%, rgba(24,19,64,.30) 56%, rgba(26,21,70,.12) 100%),
      radial-gradient(60% 55% at 88% 10%, rgba(109,92,240,.26), transparent 68%),
      linear-gradient(180deg, rgba(16,13,42,.55) 0%, transparent 22%, transparent 64%, rgba(14,11,36,.72) 100%);
  }
  .hero-copy { max-width: 42ch; }
  .hero .lede { max-width: 44ch; }
}

/* No base zoom now — the panel means a shift is rarely needed, and the photo
   shows at its natural crop. */
.hero-shot img { transform: scale(1); }

@media (max-width: 900px) {
  .hero-media {
    left: 0; right: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(18,14,48,.90) 0%, rgba(20,16,54,.82) 42%, rgba(14,11,36,.94) 100%),
      radial-gradient(80% 50% at 72% 6%, rgba(109,92,240,.28), transparent 70%);
  }
}

/* The eyebrow is a flex row whose trailing rule stretches; cap it so it stays
   within the copy column rather than running under the image panel. */
.hero .eyebrow { max-width: 42ch; }
@media (max-width: 900px) { .hero .eyebrow { max-width: none; } }

/* Hold every hero element inside the copy column, and start the image panel
   further right, so nothing sits under the photograph at any width. */
@media (min-width: 901px) {
  .hero-media {
    left: 38%;
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
  }
  .hero-copy, .hero .lede, .hero .eyebrow, .hero-proof { max-width: 40ch; }
  .hero .btn-row { max-width: 40ch; }
  .hero-controls { max-width: 40ch; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .hero-copy, .hero .lede, .hero .eyebrow, .hero-proof,
  .hero .btn-row, .hero-controls { max-width: 34ch; }
}

/* ==========================================================================
   46. HERO — undo the squeeze, return to full-bleed
   Capping every element to a 40ch column to avoid the image was the wrong
   trade: it crushed the headline and body text. The image goes back to
   full-bleed behind the copy, and framing is handled per slide instead.
   ========================================================================== */
@media (min-width: 901px) {
  /* no more side panel */
  .hero-media {
    left: 0; right: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }
  /* release every cap added for the panel layout */
  .hero-copy      { max-width: 62ch; }
  .hero .lede     { max-width: 60ch; }
  .hero .eyebrow  { max-width: none; }
  .hero-proof     { max-width: 700px; }
  .hero .btn-row  { max-width: none; }
  .hero-controls  { max-width: none; }

  .hero-scrim {
    background:
      linear-gradient(100deg, rgba(18,14,48,.95) 0%, rgba(20,16,56,.88) 32%, rgba(24,19,64,.50) 60%, rgba(26,21,70,.20) 100%),
      radial-gradient(64% 58% at 86% 10%, rgba(109,92,240,.26), transparent 68%),
      linear-gradient(180deg, rgba(16,13,42,.60) 0%, transparent 24%, transparent 62%, rgba(14,11,36,.76) 100%);
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .hero-copy, .hero .lede, .hero .eyebrow, .hero-proof,
  .hero .btn-row, .hero-controls { max-width: none; }
  .hero-copy { max-width: 56ch; }
}

/* Headline back to full size */
.hero h1 { font-size: clamp(38px, 5.4vw, 66px); }

/* ==========================================================================
   47. MEGA-MENU — no category thumbnail, larger SKU images
   ========================================================================== */
.mega-thumb { display: none; }

.mega-head { align-items: flex-start; gap: 20px; }
.mega-head h4 { margin: 0 0 5px; }
.mega-head h4 a { color: var(--ink); transition: color var(--fast) var(--ease); }
.mega-head h4 a:hover { color: var(--indigo); }
.site-header .nav-menu .mega-head h4 a,
body.has-dark-hero .site-header .nav-menu .mega-head h4 a { color: var(--ink); }
.site-header .nav-menu .mega-head h4 a:hover,
body.has-dark-hero .site-header .nav-menu .mega-head h4 a:hover { color: var(--indigo); }

/* Default: compact rows for long lists */
.mi-thumb { width: 44px; height: 34px; }
.mi-thumb img { max-width: 38px; max-height: 28px; }
.mega-tier a { grid-template-columns: 44px 1fr; }

/* Roomy: categories with six items or fewer get proper product pictures */
.mega-tiers.is-roomy .mega-tier a {
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px;
  text-align: center;
  min-height: 0;
}
.mega-tiers.is-roomy .mi-thumb {
  width: 100%;
  height: 82px;
  border-radius: 6px;
}
.mega-tiers.is-roomy .mi-thumb img { max-width: 92%; max-height: 70px; }
.mega-tiers.is-roomy .mi-label { font-size: 13px; font-weight: 700; }
.mega-tiers.is-roomy .mega-tier ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}

/* ==========================================================================
   48. SOLUTIONS PANEL — software gets its own presentation
   No product photograph to lead with, so the panel leads with capability and
   a screenshot of the console instead of a grid of SKU pictures.
   ========================================================================== */
.sol-brand {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--indigo);
  border-radius: 3px;
  padding: 4px 9px;
  margin-bottom: 8px;
}
.sol-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 26px;
  align-items: start;
}
@media (max-width: 1100px) { .sol-body { grid-template-columns: 1fr; } }

.sol-caps h5, .sol-sub h5 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.sol-caps ul { list-style: none; margin: 0; padding: 0; }
.sol-caps li {
  position: relative;
  padding: 7px 0 7px 20px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.45;
}
.sol-caps li::before {
  content: "";
  position: absolute;
  left: 2px; top: 14px;
  width: 6px; height: 6px;
  background: var(--indigo);
  transform: rotate(45deg);
}

.sol-sub { margin-top: 20px; }
.sol-sub a {
  display: block;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--indigo-mist);
  transition: all var(--fast) var(--ease);
}
.sol-sub a:hover { border-color: var(--indigo); background: var(--indigo-wash); }
.sol-sub b { display: block; font-size: 14.5px; color: var(--ink); }
.sol-sub a:hover b { color: var(--indigo); }
.sol-sub span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }

.sol-shot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--indigo-wash), var(--indigo-mist));
  padding: 10px;
}
.sol-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 8px 22px -12px rgba(34,28,85,.55);
}

/* ==========================================================================
   49. VARIANT SELECTOR — top of every product page
   Pick a tier, the models beneath change. Sticky on scroll so the choice
   stays reachable while reading the specification.
   ========================================================================== */
.variant-bar {
  background: var(--indigo-mist);
  border-block: 1px solid var(--line);
  padding-block: 26px 34px;
}
.vb-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-bottom: 22px;
}
.vb-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vb-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.vb-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1.5px solid var(--line-2);
  border-radius: 40px;
  background: var(--paper);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.vb-tab:hover { border-color: var(--indigo); color: var(--indigo); }
.vb-tab.is-on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.vb-count {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--mist);
  color: var(--ink-3);
  border-radius: 20px;
  padding: 2px 7px;
}
.vb-tab.is-on .vb-count { background: rgba(255,255,255,.22); color: #fff; }

.vb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}
.vcard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  box-shadow: var(--shade-sm);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.vcard:hover { border-color: var(--line-2); transform: translateY(-2px); }
.vcard-media {
  height: 116px;
  border-radius: 6px;
  background:
    radial-gradient(70% 70% at 50% 38%, #FFFFFF, transparent 72%),
    linear-gradient(150deg, #EFF4F6, var(--indigo-mist));
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}
.vcard-media img { max-width: 84%; max-height: 96px; object-fit: contain; }
.vcard h3 { font-size: 15px; margin-bottom: 12px; line-height: 1.35; }
.vcard-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vlink {
  font-size: 13px;
  font-weight: 700;
  color: var(--indigo);
  border: 1.5px solid var(--line-2);
  border-radius: 40px;
  padding: 7px 14px;
  transition: all var(--fast) var(--ease);
}
.vlink:hover { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.vds {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--indigo);
}
.vds:hover { text-decoration: underline; }
.vds.is-off { color: var(--ink-3); cursor: default; opacity: .65; }

.vb-panel > * { opacity: 0; }
.vb-panel.is-in > * { animation: stageIn 340ms var(--ease) forwards; }
@media (prefers-reduced-motion: reduce) { .vb-panel > * { opacity: 1; animation: none !important; } }

/* ==========================================================================
   50. PARALLAX, LARGER BADGE, 1440x627 FIT
   ========================================================================== */
.hero-media { will-change: transform; }
.hero-inner { will-change: transform, opacity; }

/* A 1440x627 window is short and wide. Cap the hero so it never pushes the
   next section off-screen, and let the copy sit tighter. */
@media (min-width: 1200px) and (max-height: 760px) {
  .hero { min-height: 0; padding-block: 104px 44px; }
  .hero h1 { font-size: clamp(34px, 3.6vw, 50px); }
  .hero .lede { font-size: 16px; }
  .hero .btn-row { margin-top: 24px; }
  .hero-proof { margin-top: 26px; padding-top: 20px; }
  .hero-controls { margin-top: 24px; }
  .section { padding-block: clamp(52px, 6vw, 84px); }
}

/* The Make in India mark, larger */
.mii-badge { width: 104px; padding: 12px; }
@media (max-width: 1480px) { .mii-badge { width: 88px; } }
@media (max-width: 620px)  { .mii-badge { width: 64px; padding: 8px; } }

/* --- About: the Make in India feature band ----------------------------- */
.section--mii {
  background:
    radial-gradient(64% 60% at 84% 8%, rgba(109,92,240,.34), transparent 66%),
    linear-gradient(160deg, var(--indigo-deep), #1B1646);
  color: #fff;
}
.section--mii h2, .section--mii h3 { color: #fff; }
.section--mii .eyebrow { color: var(--accent); }
.section--mii .lede { color: rgba(255,255,255,.8); }
.section--mii h2 em { font-style: normal; color: #A99CFF; }

.mii-feature {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) { .mii-feature { grid-template-columns: 1fr; } }

.mii-mark {
  display: grid;
  place-items: center;
  padding: 28px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.mii-mark img { width: 100%; height: auto; max-width: 240px; }
.mii-mark.is-empty { display: none; }

.mii-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 34px;
  margin-top: 36px;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.18);
}
@media (max-width: 700px) { .mii-points { grid-template-columns: 1fr; } }
.mii-points h3 { font-size: 17px; margin-bottom: 8px; }
.mii-points p { font-size: 15px; color: rgba(255,255,255,.72); line-height: 1.6; margin: 0; }

/* Optional-field label */
.opt { font-weight: 400; color: var(--ink-3); font-size: 13px; }

/* ==========================================================================
   51. HOME EXPLORER — same language as the menu
   The rail, the panel head and the item grid now match the mega-menu, so
   moving from the header into the page feels like one system.
   ========================================================================== */
.explorer-rail {
  background: var(--indigo-mist);
  border-color: var(--line);
  padding: 12px 10px;
}
.explorer-rail li { border-bottom: 0; }
.rail-item {
  border-radius: 6px;
  padding: 12px 14px;
}
.rail-item::before { display: none; }
.rail-item:hover { background: rgba(255,255,255,.75); }
.rail-item[aria-selected="true"] {
  background: var(--paper);
  box-shadow: var(--shade-sm);
  padding-left: 14px;
}
.rail-name { font-size: 14.5px; font-weight: 700; }

/* the stage picks up the menu panel's head treatment */
.stage-brand {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--indigo);
  border-radius: 3px;
  padding: 4px 9px;
  display: inline-block;
}
.stage-body h3 a { color: inherit; }
.stage-hook {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--indigo);
}
.explorer-stage { border-radius: 8px; }
.explorer-rail { border-radius: 8px; }

/* variant chips echo the menu's tier headings */
.stage-variants {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
}
.stage-variants span { color: var(--indigo); }

/* filter pills match the variant selector's pills */
.filt { padding: 10px 18px; }

/* If the remote Make in India mark can't load, the text should reclaim its
   column rather than staying squeezed beside an empty track. */
.mii-feature:has(.mii-mark.is-empty) { grid-template-columns: 1fr; }
.mii-mark img { min-height: 120px; }

/* ==========================================================================
   52. CATALOGUE SELECTOR — SKUs and their CPU options, top of the page
   ========================================================================== */
.variant-bar[data-catalog] { padding-block: 22px 40px; }
.vb-head > div { width: 100%; }
.vb-label { display: block; margin-bottom: 12px; }

.cstage {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--shade-md);
}
@media (max-width: 900px) { .cstage { grid-template-columns: 1fr; } }

.cshot-main {
  height: 300px;
  border-radius: 8px;
  background:
    radial-gradient(70% 70% at 50% 38%, #FFFFFF, transparent 72%),
    linear-gradient(150deg, #EFF4F6, var(--indigo-mist));
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid var(--line);
}
.cshot-main img { max-width: 88%; max-height: 260px; object-fit: contain; }

.cshot-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.cshot {
  width: 74px; height: 58px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--indigo-mist);
  padding: 5px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--fast) var(--ease);
}
.cshot img { max-width: 100%; max-height: 46px; object-fit: contain; }
.cshot:hover { border-color: var(--line-2); }
.cshot.is-on { border-color: var(--indigo); }

.cstage-body h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 6px; }
.cstage-tag { font-size: 16px; font-weight: 700; color: var(--indigo); margin-bottom: 12px; }
.cstage-sum { font-size: 15px; color: var(--ink-2); line-height: 1.62; margin-bottom: 18px; }

.cpu-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px 0 18px;
  margin-bottom: 4px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cpu-label {
  flex: 0 0 100%;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.cpu-tab {
  padding: 10px 16px;
  border: 1.5px solid var(--line-2);
  border-radius: 40px;
  background: var(--paper);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.cpu-tab:hover { border-color: var(--indigo); color: var(--indigo); }
.cpu-tab.is-on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.cpu-single { font-size: 15px; font-weight: 700; color: var(--ink); }

.cstage-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.cstage-specs { margin-top: 26px; }
.cstage-specs h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 14px;
}
.cstage-specs .spec-table { background: var(--paper); }

.vb-stage > * { opacity: 0; }
.vb-stage.is-in > * { animation: stageIn 340ms var(--ease) forwards; }
.vb-stage.is-in > *:nth-child(2) { animation-delay: 70ms; }
@media (prefers-reduced-motion: reduce) { .vb-stage > * { opacity: 1; animation: none !important; } }

/* SKU tabs: the CPU-count chip needed breathing room from the model code */
.vb-tab { gap: 10px; }
.vb-tab .vb-count { margin-left: 2px; }

/* ==========================================================================
   53. MENU CARDS — proportion and finish
   The roomy grid was stretching cards to fill the row, which left wide, thin
   pictures. Cards now hold a fixed 4:3 plate and sit in a track that doesn't
   stretch, so two items look like two cards rather than two banners.
   ========================================================================== */
.mega-tiers.is-roomy .mega-tier ul {
  grid-template-columns: repeat(auto-fill, minmax(150px, 168px));
  justify-content: start;
  gap: 12px;
}
.mega-tiers.is-roomy .mega-tier a {
  padding: 12px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  text-align: left;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.mega-tiers.is-roomy .mega-tier a:hover {
  border-color: var(--indigo);
  transform: translateY(-2px);
  box-shadow: var(--shade-sm);
  background: var(--paper);
}
.mega-tiers.is-roomy .mi-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  border: 0;
  border-radius: 6px;
  background:
    radial-gradient(72% 72% at 50% 40%, #FFFFFF, transparent 72%),
    linear-gradient(150deg, #EFF4F6, var(--indigo-mist));
  margin-bottom: 10px;
  padding: 8px;
}
.mega-tiers.is-roomy .mi-thumb img { max-width: 92%; max-height: 84%; }

/* label plus supporting model code */
.mi-text { display: block; min-width: 0; }
.mi-label { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.mi-note {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--ink-3);
  margin-top: 3px;
}
.mega-tier a:hover .mi-note { color: var(--indigo); }

/* compact rows keep the two-line label too */
.mega-tiers:not(.is-roomy) .mega-tier a { align-items: center; }

/* the panel no longer needs to scroll for six items */
.mega-tiers.is-roomy { max-height: none; }

/* A message the visitor didn't type gets a quiet marker so it's clearly
   editable rather than looking like a locked field. */
.input.is-prefilled {
  border-color: var(--indigo);
  background: var(--indigo-wash);
}

/* ==========================================================================
   54. PRODUCT PAGE — the "why" band
   The selector already showed the name, the picture and the tagline. This
   block adds only what it didn't: the reasoning and where the line is used.
   ========================================================================== */
.detail-why { padding-block: clamp(48px, 6vw, 78px); }
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } }
.why-grid h2 { margin-bottom: 14px; }
.why-grid .lede { margin: 0; }

.why-list {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  padding: 8px 22px 22px;
  box-shadow: var(--shade-sm);
}
.why-row {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
}
.why-row svg { color: var(--indigo); margin-top: 6px; }
.why-row:last-of-type { border-bottom: 0; }

.why-apps {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.why-apps span {
  flex: 0 0 100%;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.why-apps em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 40px;
  padding: 5px 12px;
}

/* ==========================================================================
   55. FINISHING PASS
   Small corrections that add up: consistent radii, quieter dividers, better
   optical alignment, and states that respond rather than sit still.
   ========================================================================== */

/* Cards and panels settle on one radius rather than four near-misses */
.pcard, .vcard, .cstage, .why-list, .explorer-stage, .explorer-rail,
.info-card, .use-grid, .variant-grid, .sol-shot { border-radius: 10px; }

/* Spec tables: quieter rules, tabular figures, and a readable measure */
.spec-table th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  vertical-align: top;
  width: 34%;
}
.spec-table td { font-variant-numeric: tabular-nums; }
.spec-table tr:hover td, .spec-table tr:hover th { background: var(--indigo-wash); }
.spec-table tr { transition: background var(--fast) var(--ease); }

/* Buttons lift consistently */
.btn { transition: transform var(--fast) var(--ease), background var(--fast) var(--ease),
                   border-color var(--fast) var(--ease), color var(--fast) var(--ease),
                   box-shadow var(--fast) var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Focus is visible everywhere, in the brand colour */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2.5px solid var(--indigo-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Section rhythm: a hairline between light sections instead of a hard edge */
.section + .section:not(.section--ink):not(.section--mii):not(.section--mist) {
  border-top: 1px solid var(--line);
}

/* Selector bar: sits under the header cleanly on scroll */
.variant-bar[data-catalog] { border-top: 0; }
.vb-tab:active { transform: translateY(1px); }

/* Thumbnails signal they're clickable */
.cshot { position: relative; }
.cshot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 0 var(--indigo);
  transition: box-shadow var(--fast) var(--ease);
}
.cshot.is-on::after { box-shadow: inset 0 0 0 2px var(--indigo); }

/* Crumb: quieter, and the current page reads as text not a link */
.crumb { padding-block: 18px; font-size: 12.5px; }

/* Long spec values wrap rather than stretching the table */
.spec-table td { max-width: 62ch; }

/* Footer: tighten the link columns */
.site-footer a { transition: color var(--fast) var(--ease); }

/* ==========================================================================
   56. MENU FIXES
   The roomy cards inherited a -8px left margin from the old compact list
   style, and the tier grid clips its overflow — so the first card in every
   row was being sliced. Reset the margin and stop the clipping.
   ========================================================================== */
.mega-tiers.is-roomy .mega-tier a { margin-left: 0; }
.mega-tiers.is-roomy { overflow: visible; max-height: none; }
.mega-tiers:not(.is-roomy) { overflow-y: auto; overflow-x: visible; padding-left: 8px; margin-left: -8px; }

/* Nested solution item with its product photograph */
.sol-sub a { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.sub-thumb {
  width: 64px; height: 48px;
  border-radius: 5px;
  background:
    radial-gradient(72% 72% at 50% 40%, #FFFFFF, transparent 72%),
    linear-gradient(150deg, #EFF4F6, var(--indigo-mist));
  border: 1px solid var(--line);
  display: grid; place-items: center; padding: 4px;
}
.sub-thumb img { max-width: 100%; max-height: 38px; object-fit: contain; }
.sub-text { min-width: 0; }

/* Add-to-enquiry: a state, not just a click */
.btn.is-added {
  background: var(--teal-deep, #1F8F7F);
  border-color: var(--teal-deep, #1F8F7F);
  color: #fff;
}
.btn.is-added .plus { transform: rotate(45deg); }
.btn .plus { transition: transform var(--fast) var(--ease); }
.cstage-actions .btn { display: inline-flex; align-items: center; gap: 8px; }

/* ==========================================================================
   57. CATALOGUE CARDS — same language as the menu
   A card now says how many models sit behind it and shows them, so the
   products page reads as a continuation of the dropdown rather than a
   different system.
   ========================================================================== */
.pcard-count {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--indigo);
  background: var(--indigo-wash);
  border-radius: 40px;
  padding: 5px 11px;
  margin-bottom: 12px;
}

.pcard-skus {
  display: flex;
  gap: 8px;
  margin: 16px 0 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.pcard-sku {
  display: grid;
  gap: 5px;
  width: 62px;
  text-align: center;
}
.pcard-sku img {
  width: 62px; height: 46px;
  object-fit: contain;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background:
    radial-gradient(72% 72% at 50% 40%, #FFFFFF, transparent 72%),
    linear-gradient(150deg, #EFF4F6, var(--indigo-mist));
}
.pcard-sku em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .02em;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcard:hover .pcard-sku img { border-color: var(--line-2); }

/* Home explorer: the same model strip the menu and catalogue use */
.stage-models { padding-top: 16px; margin-bottom: 18px; border-top: 1px solid var(--line); }
.stage-models-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--indigo);
  background: var(--indigo-wash);
  border-radius: 40px;
  padding: 5px 11px;
  margin-bottom: 12px;
}
.stage-sku-row { display: flex; gap: 9px; flex-wrap: wrap; }
.stage-sku { display: grid; gap: 5px; width: 66px; text-align: center; }
.stage-sku img {
  width: 66px; height: 48px;
  object-fit: contain;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background:
    radial-gradient(72% 72% at 50% 40%, #FFFFFF, transparent 72%),
    linear-gradient(150deg, #EFF4F6, var(--indigo-mist));
}
.stage-sku em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================================
   58. MENU PANEL LAYOUT
   Industrial PC has four ranges; showing them as four columns means Medical
   Panel PC is visible without scrolling. Compact lists also get tighter rows
   so a long range fits the panel.
   ========================================================================== */
.nav-menu.is-mega { width: min(1140px, calc(100vw - 28px)); }

.mega-tiers:not(.is-roomy) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 18px;
  max-height: none;
  overflow: visible;
}
@media (max-width: 1080px) {
  .mega-tiers:not(.is-roomy) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .mega-tiers:not(.is-roomy) { grid-template-columns: 1fr; }
}

/* tighter rows: thumbnail, name, and the claim on one line */
.mega-tiers:not(.is-roomy) .mega-tier a {
  grid-template-columns: 34px 1fr;
  gap: 9px;
  padding: 5px 6px;
  min-height: 34px;
}
.mega-tiers:not(.is-roomy) .mi-thumb { width: 34px; height: 26px; padding: 2px; }
.mega-tiers:not(.is-roomy) .mi-thumb img { max-width: 30px; max-height: 22px; }
.mega-tiers:not(.is-roomy) .mi-label { font-size: 12.5px; }
.mega-tiers:not(.is-roomy) .mi-note {
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mega-tier h5 { margin-bottom: 6px; padding-bottom: 6px; }
.mega-tier + .mega-tier { margin-top: 0; }

/* A long range (Shuttle's twelve all-in-ones) scrolls inside its own column
   rather than stretching the whole panel. */
.mega-tier { min-width: 0; }
.mega-tier ul { max-height: 232px; overflow-y: auto; padding-right: 4px; }
.mega-tier ul::-webkit-scrollbar { width: 5px; }
.mega-tier ul::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; }
.mega-tiers.is-roomy .mega-tier ul { max-height: none; overflow: visible; }

/* --- Solutions: the included item was squeezed into a narrow column ------ */
.sol-body { grid-template-columns: 1fr 280px; gap: 30px; }
.sol-sub { margin-top: 22px; }
.sol-sub a { grid-template-columns: 76px 1fr; gap: 14px; padding: 13px 15px; }
.sub-thumb { width: 76px; height: 56px; }
.sub-thumb img { max-height: 46px; }
.sol-sub b { font-size: 15px; }
.sol-sub span { font-size: 13px; line-height: 1.45; }
@media (max-width: 1100px) { .sol-body { grid-template-columns: 1fr; } }

/* Columns were cutting the last row mid-item — give them room for the
   longest range, and fade the edge when a column really does scroll. */
.mega-tier ul { max-height: 300px; }
.mega-tier { position: relative; }

/* The Included card inherited the four-column tier grid, crushing Asset
   Management into a narrow track. Give it the full width of its column. */
.sol-sub { display: block; }
.sol-sub a {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  width: 100%;
}
.sol-sub .sub-text { min-width: 0; }
.sol-sub b { display: block; white-space: normal; }
.sol-sub .sub-text span { display: block; white-space: normal; }
.sol-caps, .sol-sub { min-width: 0; }

/* When an included item has no thumbnail its text was landing in the image
   column. Only reserve that column when a thumbnail is actually present. */
.sol-sub a { grid-template-columns: minmax(0, 1fr); }
.sol-sub a:has(.sub-thumb) { grid-template-columns: 76px minmax(0, 1fr); }

/* ==========================================================================
   59. MENU — fit the viewport, and stop the rail/panel mismatch
   At 1440x627 the panel ran 84px below the fold and the rail stood 208px
   taller than the content beside it. The menu now caps to the space actually
   available and the two columns share a height.
   ========================================================================== */
.nav-menu.is-mega {
  max-height: calc(100vh - 104px);
  display: flex;
  flex-direction: column;
}
.mega {
  min-height: 0;
  align-items: stretch;
}
.mega-rail {
  overflow-y: auto;
  scrollbar-width: thin;
}
.mega-rail::-webkit-scrollbar { width: 5px; }
.mega-rail::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; }

.mega-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}
.mega-panel::-webkit-scrollbar { width: 6px; }
.mega-panel::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }

/* the tier columns size to their content now that the panel scrolls */
.mega-tier ul { max-height: none; overflow: visible; }
.mega-tiers { max-height: none; overflow: visible; }

/* footer stays put at the bottom of the menu */
.mega-foot { flex: none; }

/* ==========================================================================
   60. APPLICATIONS BAND — photography with a consistent grade
   Each card leads with a photograph carrying the same treatment as the hero,
   with the line glyph sitting over it so the brand mark stays present. If a
   photo can't load the card falls back to the glyph on a tinted plate.
   ========================================================================== */
.use { padding: 0 0 26px; }
.use-photo {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 20px;
  background: linear-gradient(150deg, var(--indigo-wash), var(--indigo-mist));
}
.use-photo > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.03) brightness(.92);
  transition: transform 600ms var(--ease), filter var(--mid) var(--ease);
}
.use:hover .use-photo > img:first-child { transform: scale(1.04); filter: saturate(.86) brightness(.96); }
.use-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27,22,70,.10) 0%, rgba(27,22,70,.55) 100%);
}
.use-photo.is-empty > img:first-child { display: none; }
.use-photo.is-empty::after { background: none; }

.use-glyph {
  position: absolute;
  left: 18px; bottom: 14px;
  z-index: 1;
  width: 40px; height: 40px;
  padding: 7px;
  border-radius: 8px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 6px 18px -8px rgba(27,22,70,.5);
}
.use-photo.is-empty .use-glyph {
  position: static;
  margin: 26px auto;
  display: block;
  width: 56px; height: 56px;
  box-shadow: none;
  background: none;
}

.use h3, .use p, .use-tags { padding-inline: 26px; }
.use-tags { margin-top: 4px; }

/* Cards align: the tag row sits on the baseline regardless of copy length */
.use-grid { align-items: stretch; }
.use {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}
.use-tags { align-self: end; margin-top: 16px; }

/* The grid rows weren't shared between cards — subgrid ties them together so
   headings, copy and tags all sit on the same baselines. */
@supports (grid-template-rows: subgrid) {
  .use-grid { grid-auto-rows: 1fr; }
  .use { grid-row: span 4; grid-template-rows: subgrid; }
}
@supports not (grid-template-rows: subgrid) {
  .use { display: flex; flex-direction: column; }
  .use p { flex: 1; }
}

/* Subgrid fought the auto-fit columns. Flex is the dependable answer here:
   the copy takes the slack and the tag row sits on the bottom edge. */
.use-grid > .use {
  display: flex !important;
  flex-direction: column;
  grid-row: auto;
  grid-template-rows: none;
}
.use-grid > .use > p { flex: 1 1 auto; }
.use-grid > .use > .use-tags { margin-top: auto; }

/* ==========================================================================
   61. UNIFORMITY PASS
   One scale for section rhythm, one for card padding, one eyebrow treatment,
   one hover behaviour. Small inconsistencies read as sloppiness even when no
   single one is noticeable.
   ========================================================================== */
:root {
  --pad-card: clamp(20px, 2.4vw, 26px);
  --gap-grid: 20px;
}

/* every eyebrow behaves identically */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* card padding is one value */
.pcard-body, .vcard, .info-card, .use h3, .use p, .use-tags { --_p: var(--pad-card); }
.pcard-body { padding: 24px var(--pad-card) var(--pad-card); }
.use h3, .use p, .use-tags { padding-inline: var(--pad-card); }

/* grids share a gutter */
.use-grid, .variant-grid, .vb-grid, .card-grid { gap: 1px; }
.carousel-track { gap: var(--gap-grid); }

/* every interactive surface lifts the same way */
.pcard, .vcard, .use, .sol-sub a, .mega-tiers.is-roomy .mega-tier a {
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}

/* headings share their scale */
.h-md { font-size: clamp(22px, 2.6vw, 32px); }
.h-lg { font-size: clamp(27px, 3.4vw, 42px); }

/* links share one arrow motion */
.link-arrow svg, .mega-foot a svg, .why-row svg { transition: transform var(--fast) var(--ease); }
.link-arrow:hover svg, .mega-foot a:hover svg { transform: translateX(3px); }

/* one divider colour, one radius on media */
.spec-table, .cshot-main, .cstage, .sol-shot, .use-photo { border-color: var(--line); }

/* forms line up with cards */
.input { border-radius: 7px; }

/* ==========================================================================
   62. MODEL NAMING AND PROCESSING-POWER SELECTOR
   The buyer picks a build, not a part number. The order code stays visible
   because procurement needs it.
   ========================================================================== */
.cstage-code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-3);
  margin: -6px 0 16px;
}
.cstage-code span {
  display: inline-block;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 8px;
  padding-right: 8px;
  border-right: 1px solid var(--line);
}

.cpu-row { display: block; padding: 18px 0; }
.cpu-label { display: block; margin-bottom: 10px; }
.cpu-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.cpu-tab, .cpu-single {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 10px 16px;
  border: 1.5px solid var(--line-2);
  border-radius: 9px;
  background: var(--paper);
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.cpu-single { cursor: default; }
.cpu-tab b, .cpu-single b { font-size: 14.5px; color: var(--ink); }
.cpu-tab span, .cpu-single span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .03em;
  color: var(--ink-3);
}
.cpu-tab:hover { border-color: var(--indigo); }
.cpu-tab.is-on { background: var(--indigo); border-color: var(--indigo); }
.cpu-tab.is-on b { color: #fff; }
.cpu-tab.is-on span { color: rgba(255,255,255,.75); }

.cpu-fit {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 14px 0 0;
}
.cpu-ask {
  font-size: 13px;
  color: var(--ink-3);
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.cpu-ask a { color: var(--indigo); font-weight: 700; }
.cpu-ask a:hover { text-decoration: underline; }

/* A long range uses the spare width beside it rather than a single tall list */
.mega-tier.is-wide { grid-column: span 3; }
.mega-tier.is-wide ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 18px;
}
@media (max-width: 1080px) {
  .mega-tier.is-wide { grid-column: span 2; }
  .mega-tier.is-wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .mega-tier.is-wide { grid-column: span 1; }
  .mega-tier.is-wide ul { grid-template-columns: 1fr; }
}

/* Product photography in the applications band: contained on a tinted plate
   rather than cropped, and no dark scrim — these are products, not scenes. */
.use-photo.is-product {
  display: grid;
  place-items: center;
  padding: 22px 22px 30px;
  background:
    radial-gradient(70% 70% at 50% 40%, #FFFFFF, transparent 72%),
    linear-gradient(150deg, #EFF4F6, var(--indigo-mist));
}
.use-photo.is-product > img:first-child {
  width: auto; height: auto;
  max-width: 78%; max-height: 132px;
  object-fit: contain;
  filter: none;
}
.use:hover .use-photo.is-product > img:first-child { transform: scale(1.03); filter: none; }
.use-photo.is-product::after { background: none; }
.use-photo.is-product .use-glyph {
  left: 18px; bottom: 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--line);
}

/* ==========================================================================
   63. LEADERSHIP — two directors, one grid
   ========================================================================== */
.leader-grid { display: grid; gap: clamp(28px, 4vw, 48px); }
.leader {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 800px) { .leader { grid-template-columns: 1fr; } }
.leader-photo {
  border-radius: 10px;
  overflow: hidden;
  background: var(--mist);
  border: 1px solid var(--line);
}
.leader-photo img { width: 100%; height: auto; display: block; filter: grayscale(1); }
.leader-text h3 { font-size: clamp(21px, 2.4vw, 27px); margin-bottom: 4px; }
.leader-text .role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 16px;
}
.leader-text p + p { margin-top: 12px; }

/* ==========================================================================
   64. MEGA-MENU — brand group, category, model
   Three columns: who makes it, what it is, which model.
   ========================================================================== */
.mega { grid-template-columns: 224px 254px 1fr; }
.mega--sol { grid-template-columns: 286px 1fr; }
@media (max-width: 1080px) { .mega { grid-template-columns: 1fr; } }

.mega-groups {
  background: var(--indigo-wash);
  border-right: 1px solid var(--line);
  padding: 18px 12px;
}
.mega-group {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 10px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border: 0;
  border-radius: 7px;
  background: none;
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}
.mega-group svg { opacity: 0; color: var(--indigo); transition: opacity var(--fast) var(--ease); }
.mega-group:hover { background: rgba(255,255,255,.7); }
.mega-group.is-on { background: var(--paper); box-shadow: var(--shade-sm); }
.mega-group.is-on svg { opacity: 1; }
.mg-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.mega-group.is-on .mg-name { color: var(--indigo); }
.mg-note {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-3);
}

.mega-rail { background: var(--indigo-mist); padding: 18px 12px; }
.mega-cats { list-style: none; margin: 0; padding: 0; }

/* the nav now has two dropdowns — keep them the same width */
.nav-menu.is-mega.is-sol { width: min(880px, calc(100vw - 28px)); }

@media (max-width: 1080px) {
  .mega-groups { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ==========================================================================
   65. AiNUC BRAND PRESENCE
   The brand was only in the footer strip. It now sits on every product page
   and beside the catalogue heading.
   ========================================================================== */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 12px;
  border: 1px solid var(--line);
  border-radius: 40px;
  background: var(--paper);
  box-shadow: var(--shade-sm);
  margin-bottom: 18px;
}
.brand-lockup img { height: 24px; width: auto; display: block; }
.brand-lockup span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

/* The new AIR mark is a compact wordmark — give it room to read */
.brand img { height: 32px; width: auto; }
.site-footer .footer-grid > div:first-child img { height: 38px; width: auto; margin-bottom: 18px; }
@media (max-width: 620px) { .brand img { height: 27px; } }

/* Portraits are pre-converted to monochrome, so no filter is needed */
.leader-photo img { filter: none; }

/* The leader card sat inside an older two-column grid that squeezed the text
   into a narrow track. Give it the full row. */
.leader-grid { grid-template-columns: 1fr; }
.leader {
  grid-template-columns: 300px minmax(0, 1fr);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--shade-sm);
}
.leader-text { min-width: 0; max-width: 78ch; }
.leader-text p { font-size: 15.5px; line-height: 1.68; color: var(--ink-2); }
.leader-photo { align-self: start; }
@media (max-width: 800px) {
  .leader { grid-template-columns: 1fr; }
  .leader-photo { max-width: 280px; }
}

/* ==========================================================================
   66. HERO — slides must overlay, not stack
   A later `display:block` on .hero-copy (added when the copy was fixed)
   overrode the overlay grid, so all three slides rendered one below another
   and the hero grew to 1400px. Restore the stack.
   ========================================================================== */
.hero-copy {
  display: grid !important;
  grid-template-areas: "slide";
  max-width: 62ch;
}
.hero-copy > .hero-slide {
  grid-area: slide;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease), visibility 520ms;
  pointer-events: none;
}
.hero-copy > .hero-slide.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.hero { min-height: min(620px, 78vh); }

/* ==========================================================================
   67. FORM CHECKBOX — an actual box
   A bare input with a label beside it didn't read as something to tick.
   ========================================================================== */
.consent {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  cursor: pointer;
  margin: 8px 0 22px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  margin: 0;
  border: 1.8px solid var(--line-2);
  border-radius: 5px;
  background: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.consent input[type="checkbox"]::after {
  content: "";
  width: 11px; height: 6px;
  border-left: 2.2px solid #fff;
  border-bottom: 2.2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px) scale(.6);
  opacity: 0;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.consent input[type="checkbox"]:hover { border-color: var(--indigo); }
.consent input[type="checkbox"]:checked {
  background: var(--indigo);
  border-color: var(--indigo);
}
.consent input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: rotate(-45deg) translate(1px, -1px) scale(1);
}
.consent input[type="checkbox"]:focus-visible {
  outline: 2.5px solid var(--indigo-bright);
  outline-offset: 2px;
}

/* ==========================================================================
   68. FORM LAYOUT — stop fields colliding
   ========================================================================== */
.form-card { display: flex; flex-direction: column; }
.field { display: block; margin-bottom: 20px; min-width: 0; }
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0 20px;
  align-items: start;
}
.field > label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 7px;
}
.field .hint {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 3px;
}
.field .input { width: 100%; }
.field .err { display: none; }
.field .err.is-shown,
.field .input.is-invalid + .err { display: block; margin-top: 6px; }
.form-card .eyebrow { margin-bottom: 18px; }
.form-card > .btn { margin-top: 6px; }
.form-note { margin-top: 12px; font-size: 13px; color: var(--ink-3); }

/* the support and contact forms sit beside their info column cleanly */
.form-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(24px, 4vw, 46px);
  align-items: start;
}
@media (max-width: 900px) { .form-shell { grid-template-columns: 1fr; } }
.form-aside { display: grid; gap: 18px; }

/* Leadership cards: the text column was collapsing inside the older grid */
.leader-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.leader {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(20px, 2.6vw, 30px);
  box-shadow: var(--shade-sm);
}
.leader > * { min-width: 0; }
.leader-photo { width: 100%; max-width: 280px; }
.leader-text { max-width: 74ch; }
@media (max-width: 820px) {
  .leader { grid-template-columns: minmax(0, 1fr); }
  .leader-photo { max-width: 240px; }
}

/* ==========================================================================
   69. FINAL POLISH
   ========================================================================== */

/* `hidden` must always win — the Made in India badge set display:grid,
   which overrode [hidden] and left a broken-image circle on screen when the
   remote mark failed to load. */
[hidden] { display: none !important; }

/* AiNUC mark on the dark brand band */
.brand-strip--dark img[alt="AiNUC"] { height: 40px; width: auto; }

/* Application cards: the tag row was offset in the last card */
.use-grid > .use > .use-tags {
  display: block;
  width: auto;
  margin-top: auto;
  padding: 14px var(--pad-card) 0;
  border-top: 1px solid var(--line);
  text-align: left;
}

/* Where-they-run photographs: one consistent grade and crop */
.use-photo:not(.is-product) > img:first-child {
  object-fit: cover;
  object-position: center;
  filter: saturate(.9) contrast(1.02);
}
.series-about { max-width: 76ch; }
.series-about h2 { margin-bottom: 14px; }
.series-about .why-apps { border-top: 1px solid var(--line); margin-top: 22px; }

/* In a flex column, align-self:end means "right". Stretch the tag row. */
.use-grid > .use > .use-tags { align-self: stretch; }

/* Support lives in the header buttons on desktop; on phones those collapse,
   so the link appears inside the menu instead. */
.nav-mobile-only { display: none; }
@media (max-width: 980px) { .nav-mobile-only { display: block; } }

/* Brand-group button: chevron sits on the name's line, note underneath */
.mega-group { grid-template-columns: 1fr 16px; grid-template-rows: auto auto; }
.mega-group .mg-name { grid-column: 1; grid-row: 1; }
.mega-group .mg-note { grid-column: 1; grid-row: 2; }
.mega-group svg { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* ==========================================================================
   80. PRODUCTS MENU — five entries, flat where a line stands alone
   Ai Cloud Endpoint, Ai NUC PC and Ai OPS are single lines, so they open
   their models beside the list with no middle rail. Shuttle and MicroTouch
   each carry several lines and keep the three-column layout.
   ========================================================================== */
.mega.is-flat { grid-template-columns: 224px 1fr; }
.mega.is-flat .mega-rail { display: none; }
@media (max-width: 1080px) { .mega.is-flat { grid-template-columns: 1fr; } }

/* A quiet rule between our own lines and the partner brands */
.mega-group.is-direct + .mega-group:not(.is-direct) {
  margin-top: 10px;
}
.mega-group.is-direct + .mega-group:not(.is-direct)::before {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: -6px;
  border-top: 1px solid var(--line);
}

.mega-headlinks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex-shrink: 0; }
.mega-ext {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 40px;
  padding: 8px 14px;
  white-space: nowrap;
  transition: all var(--fast) var(--ease);
}
.mega-ext:hover { border-color: var(--indigo); color: var(--indigo); }
.site-header .nav-menu .mega-ext,
body.has-dark-hero .site-header .nav-menu .mega-ext { color: var(--ink-2); }
.site-header .nav-menu .mega-ext:hover,
body.has-dark-hero .site-header .nav-menu .mega-ext:hover { color: var(--indigo); }
.mega-demo { background: var(--indigo); color: #fff !important; }
.mega-demo:hover { background: var(--indigo-deep, #2a2468); }

/* ==========================================================================
   81. PRODUCT CARD — brand mark beside the title
   The AiNUC mark sits on the title line, pushed to the opposite edge, rather
   than floating in a pill above the model tabs.
   ========================================================================== */
.cstage-titlerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.cstage-titlerow h2 { margin-bottom: 0; }
.cstage-brand {
  height: 28px;
  width: auto;
  flex-shrink: 0;
  display: block;
}
@media (max-width: 520px) { .cstage-brand { height: 22px; } }

/* ==========================================================================
   82. SOLUTION PAGES — demo first, walkthrough, runs-on
   ========================================================================== */
.detail-brand { display: block; height: 40px; width: auto; margin-bottom: 18px; }
.btn--demo, .btn--ext { display: inline-flex; align-items: center; gap: 8px; }
.btn--ext .ext { opacity: .7; }

.sol-steps { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(24px, 4vw, 40px); }
.sol-steps > h2 { margin-bottom: 28px; }
.step-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .step-cards { grid-template-columns: 1fr; } }
.step-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
  box-shadow: var(--shade-sm);
  display: flex;
  flex-direction: column;
}
.step-card figure {
  margin: 0;
  aspect-ratio: 16 / 10;
  background: var(--indigo-wash);
  overflow: hidden;
}
.step-card figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.step-card-body { padding: 20px 22px 24px; }
.step-k {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 10px;
}
.step-k b {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--indigo);
  color: #fff;
  font-size: 10.5px;
  letter-spacing: 0;
}
.step-card h3 { font-size: 18px; margin: 0 0 8px; }
.step-card p { font-size: 14.5px; color: var(--ink-2); margin: 0; line-height: 1.55; }
.sol-uses { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 18px; }

.runs-on {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 24px;
  margin: 8px 0 clamp(40px, 6vw, 64px);
  padding: 18px 24px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--indigo-wash);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.runs-on:hover { border-color: var(--indigo); box-shadow: var(--shade-sm); }
.runs-on-img {
  display: grid; place-items: center;
  width: 120px; aspect-ratio: 4 / 3;
  background: var(--paper);
  border-radius: 10px;
  overflow: hidden;
}
.runs-on-img img { width: 90%; height: 90%; object-fit: contain; }
.runs-on-text { display: grid; gap: 4px; }
.runs-on-text .eyebrow { margin: 0; }
.runs-on-text b { font-size: 18px; }
.runs-on-text > span:last-child { font-size: 14.5px; color: var(--ink-2); }
.runs-on-go {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; color: var(--indigo); white-space: nowrap;
}
@media (max-width: 700px) {
  .runs-on { grid-template-columns: 84px 1fr; }
  .runs-on-img { width: 84px; }
  .runs-on-go { grid-column: 1 / -1; }
}

.why-pair {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 6px 0 4px;
  font-weight: 700; font-size: 14px; color: var(--indigo);
}

/* ==========================================================================
   83. ABOUT — hero with ecosystem infographic
   Short copy and four figures on the left; on the right, AIR DigiLife at the
   centre of its range: software on the inner ring, hardware on the outer.
   ========================================================================== */
.about-hero { padding-bottom: clamp(24px, 4vw, 48px); overflow: hidden; }
.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 960px) { .about-hero-grid { grid-template-columns: 1fr; } }

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 34px 0 0;
  max-width: 460px;
}
.about-stats > div {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shade-sm);
}
.about-stats dt {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--indigo);
  letter-spacing: -.02em;
}
.about-stats dd { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.35; }

.eco { margin: 0; width: 100%; max-width: 560px; justify-self: center; }
.eco-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  container-type: inline-size;
}
.eco-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eco-ring { fill: none; stroke: var(--indigo); stroke-width: .25; stroke-dasharray: .9 1.1; opacity: .55; }
.eco-ring--inner { stroke-dasharray: none; opacity: .28; stroke-width: .35; }
.eco-spokes line { stroke: var(--indigo); stroke-width: .18; opacity: .22; }
@media (prefers-reduced-motion: no-preference) {
  .eco-ring--outer { transform-origin: 50px 50px; animation: ecoSpin 80s linear infinite; }
}
@keyframes ecoSpin { to { transform: rotate(360deg); } }

.eco-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 30%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 18px 50px rgba(57,49,133,.20), 0 0 0 8px rgba(57,49,133,.06);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  z-index: 2;
}
.eco-core img { width: 62%; height: auto; margin: 0 auto; }
.eco-core span {
  font-family: var(--font-mono);
  font-size: clamp(7px, 1.7cqw, 10px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  max-width: 90%;
  margin: 0 auto;
}

.eco-node {
  --r: 40cqw;
  position: absolute;
  left: 50%; top: 50%;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 22cqw;
  --half: 6cqw;
  /* anchor on the icon's centre, so the dot — not the label — sits on the ring */
  transform: rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a))) translate(-50%, calc(-1 * var(--half)));
  text-decoration: none;
  z-index: 3;
}
.eco-node--inner { --r: 23cqw; --half: 5cqw; width: 17cqw; }
.eco-dot {
  display: grid;
  place-items: center;
  width: 12cqw; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shade-sm);
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.eco-dot img { width: 58%; height: auto; }
.eco-node--inner .eco-dot { width: 10cqw; background: var(--indigo); border-color: var(--indigo); }
.eco-node--inner .eco-dot img { filter: brightness(0) invert(1); }
.eco-node:hover .eco-dot { transform: scale(1.08); border-color: var(--indigo); }
.eco-label {
  font-size: clamp(9.5px, 2.3cqw, 13px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  text-align: center;
  background: rgba(255,255,255,.88);
  padding: 2px 6px;
  border-radius: 6px;
}
.eco-node--inner .eco-label { color: var(--indigo); }
.eco-node:hover .eco-label { color: var(--indigo); }

.eco-key {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: clamp(30px, 7cqw, 40px);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eco-key span { display: inline-flex; align-items: center; gap: 8px; }
.eco-key i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.eco-key .k-outer { background: var(--paper); border: 1px solid var(--ink-3); }
.eco-key .k-inner { background: var(--indigo); }

.prose-two .about-parent, .about-parent {
  margin-top: 16px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
  font-size: 14px;
  color: var(--ink-3);
}

/* Solutions panel: actions sit under the description, not beside it */
.mega--sol .mega-head { flex-direction: column; align-items: flex-start; gap: 14px; }
.mega--sol .mega-head p { max-width: 60ch; }
.mega-headlinks .mega-ds, .mega-headlinks .mega-ext { font-size: 13px; padding: 8px 15px; }


/* ==========================================================================
   84. BRAND — AiNUC is the face, AIR DigiLife is the company
   The mark in the header, loader and footer is AiNUC. The legal entity is
   named in the footer, where compliance information belongs.
   ========================================================================== */
.brand img { height: 26px; }
@media (max-width: 980px) { .brand img { height: 23px; } }
.loader-mark { width: min(200px, 48vw); }
.footer-mark { height: 62px; width: auto; margin-bottom: 18px; }

.footer-legal {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.fl-entity { font-size: 14px; color: rgba(255,255,255,.78); margin: 0 0 14px; }
.fl-entity b { color: #fff; font-weight: 700; }
.fl-rows { display: flex; flex-wrap: wrap; gap: 8px 44px; margin: 0; }
.fl-rows > div { display: flex; gap: 10px; align-items: baseline; max-width: 60ch; }
.fl-rows dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
}
.fl-rows dd { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.72); line-height: 1.5; }
@media (max-width: 620px) {
  .fl-rows { gap: 12px; }
  .fl-rows > div { flex-direction: column; gap: 2px; }
}


/* ==========================================================================
   85. REDUCED MOTION — the hero still advances
   A machine with animation effects turned off gets the same slides without
   the cross-fade or the slow zoom: each one appears in place.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-shot, .hero-shot img, .hero-slide, .hero-copy > .hero-slide {
    transition: none !important;
    animation: none !important;
  }
  .hero-shot img { transform: none !important; }
  .hero-copy > .hero-slide { transform: none; }
  /* Anything that fades in on scroll must end up visible, animation or not */
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   86. LEADERSHIP — a card without a photograph
   A monogram plate stands in for a portrait, so the row stays even.
   ========================================================================== */
.leader-mono {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(70% 70% at 50% 30%, #FFFFFF, transparent 70%),
    linear-gradient(150deg, var(--indigo-wash), var(--indigo-mist));
}
.leader-mono span {
  font-size: clamp(46px, 7vw, 68px);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--indigo);
  opacity: .55;
}
@media (max-width: 800px) { .leader-mono { max-width: 280px; aspect-ratio: 16 / 9; } }


/* ==========================================================================
   87. SPAM TRAP
   Off-screen rather than display:none — some bots skip hidden inputs, but
   they fill this one. Kept out of the tab order and away from screen
   readers by aria-hidden and tabindex on the markup.
   ========================================================================== */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ==========================================================================
   88. TURNSTILE
   The widget sits above the submit button. It renders nothing at all when
   no site key is set, so the space collapses.
   ========================================================================== */
.ts-slot:not(:empty) { margin: 4px 0 18px; min-height: 65px; }
.ts-slot + .err { margin: -12px 0 16px; }