/* ============================================================
   IntuigenceAI design system
   Monochrome ink/paper, hairline rules, radius 0, mono kickers.
   Type: Suisse Intl (Instrument Sans ships) · Labels: Diatype Mono (Fragment Mono ships)
   Callout serif: Source Serif 4 italic · Accent: #FF4F17
   ============================================================ */

:root {
  --ink: #101114;
  --ink-2: #43464d;
  --ink-3: #6d7078;
  --paper: #ffffff;
  --paper-2: #f5f4f1;
  --hair: rgba(16, 17, 20, 0.16);
  --hair-soft: rgba(16, 17, 20, 0.09);
  --dk: #0b0c0e;
  --dk-2: #131417;
  --dk-ink: #f2f1ee;
  --dk-ink-2: #b9bab6;
  --dk-hair: rgba(242, 241, 238, 0.18);
  --org: #ff4f17;
  --org-soft: #ff8055;
  --pastel-1: #f0ecdf; /* plant support */
  --pastel-2: #e4ebe7; /* chemical */
  --pastel-3: #e3e8ed; /* mechanical */
  --pastel-4: #e8e6ef; /* electrical */
  --pastel-5: #efe8df; /* maintenance */
  --pastel-6: #e6e9e3; /* epc */
  /* Suisse Intl / ABC Diatype Mono are the licensed targets; they activate
     automatically if installed or later self-hosted. Inter / Fragment Mono
     ship as the free fallbacks. */
  --sans: "Geist", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --disp: "Space Grotesk", "Geist", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist", "Inter", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --wrap: 1720px;
  --gut: clamp(20px, 3.2vw, 56px);
  --annh: 46px; /* height of the announcement strip; reserved permanently */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.mono {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.skip {
  position: fixed; left: 8px; top: -48px; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; font-size: 13px; transition: top .15s;
}
.skip:focus { top: 8px; }

/* ---------------------------------------------------------- type scale */
h1, h2, h3 { font-family: var(--disp); font-weight: 400; letter-spacing: -0.02em; }
h1 { font-size: clamp(38px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08; }
h3 { font-size: clamp(18px, 2vw, 22px); line-height: 1.25; }
.doc p { max-width: 68ch; }

/* ---------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em; line-height: 1;
  padding: 15px 26px;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  transition: background .18s, color .18s, border-color .18s;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn.small { padding: 12px 20px; font-size: 14px; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.light { background: var(--dk-ink); color: var(--dk); border-color: var(--dk-ink); }
.btn.light:hover { background: transparent; color: var(--dk-ink); }
.btn.lighto { background: transparent; color: var(--dk-ink); border-color: var(--dk-hair); }
.btn.lighto:hover { border-color: var(--dk-ink); }

.tlink { font-weight: 500; font-size: 15px; border-bottom: 1px solid var(--hair); padding-bottom: 2px; transition: border-color .18s; }
.tlink:hover { border-color: var(--org); }

/* ---------------------------------------------------------- announcement */
/* full-width brand strip pinned to the very top, OUT of document flow. The
   page reserves its height permanently (see .nav margin-top), so dismissing
   it never reflows anything and the hero video stays full-bleed either way. */
.annbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 95;
  background: var(--org); color: #ffffff;
}
.annbar.gone { display: none; }
.annbar .wrap { display: flex; align-items: center; gap: 16px; }
.annbar a {
  display: block; min-width: 0;
  padding: 13px 0; font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em;
  color: #ffffff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.annbar a:hover { color: #ffffff; }
.annbar .ul { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, 0.6); }
.annbar a:hover .ul { text-decoration-color: #ffffff; }
.ann-x {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.85); line-height: 1;
  font-size: 14px; transition: color .15s, background .15s;
}
.ann-x:hover { color: #ffffff; background: rgba(255, 255, 255, 0.16); }

/* ---------------------------------------------------------- nav */
.nav {
  position: sticky; top: 0; z-index: 90;
  background: var(--paper);
  border-bottom: 0;
  /* permanent reserve for the announcement strip: kept whether the strip is
     shown or dismissed, so nothing on the page ever shifts */
  margin-top: var(--annh);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; }
.wordmark .mark { width: 20px; height: auto; }
.wordmark span {
  font-family: var(--disp); font-size: 17px; font-weight: 500; letter-spacing: 0.015em;
}
.wordmark b { font-weight: 600; }
.navside { display: flex; align-items: center; gap: 18px; }

.burger { display: inline-flex; align-items: center; gap: 10px; padding: 10px 2px; }
.burger-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
.burger-ic { display: inline-flex; flex-direction: column; gap: 5px; width: 22px; }
.burger-ic i { display: block; height: 1.5px; background: currentColor; transition: transform .25s, opacity .25s; }
body.menu-open .burger-ic i:first-child { transform: translateY(3.25px) rotate(45deg); }
body.menu-open .burger-ic i:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* over-dark hero: transparent sticky nav, hero pulled up underneath it */
body.overdark .nav {
  background: transparent; border-bottom-color: transparent;
  color: var(--dk-ink);
}
body.overdark .nav .btn.small { background: var(--dk-ink); color: var(--dk); border-color: var(--dk-ink); }
body.overdark .nav .btn.small:hover { background: transparent; color: var(--dk-ink); }
body.overdark.scrolled .nav, body.overdark.menu-open .nav {
  background: var(--dk);
}
/* pull the hero up behind BOTH the transparent nav and the reserved strip,
   so the video is full-bleed from y=0 with the strip shown or dismissed */
body.overdark .hero { margin-top: calc(-64px - var(--annh)); }

/* ---------------------------------------------------------- menu */
.menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--dk); color: var(--dk-ink);
  overflow-y: auto;
  padding-top: 152px; padding-bottom: 48px;
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
body.menu-open .menu { opacity: 1; pointer-events: auto; }
body.menu-open { overflow: hidden; }
body.menu-open .nav { background: var(--dk); color: var(--dk-ink); }
body.menu-open .nav .btn.small { background: var(--dk-ink); color: var(--dk); border-color: var(--dk-ink); }

.menu-grid { display: grid; grid-template-columns: 1.15fr 2fr; gap: clamp(32px, 6vw, 96px); }
.menu-eyebrow { color: var(--dk-ink-2); margin-bottom: 18px; }
.menu-primary ul { display: flex; flex-direction: column; }
.menu-primary > ul a {
  display: grid; grid-template-columns: 44px 1fr; align-items: baseline;
  font-family: var(--disp); font-size: clamp(23px, 2.5vw, 31px); font-weight: 400; letter-spacing: -0.02em;
  padding: 10px 0; border-top: 1px solid var(--dk-hair);
  transition: color .15s;
}
.menu-primary li:last-child a { border-bottom: 1px solid var(--dk-hair); }
.menu-primary > ul a:hover { color: var(--org-soft); }
.menu-primary .num { color: var(--dk-ink-2); font-size: 11px; }
.menu-primary em {
  grid-column: 2; font-family: var(--sans); font-style: normal;
  font-size: 13px; color: var(--dk-ink-2); letter-spacing: 0;
}
.menu-all { margin-top: 22px; font-size: 14px; color: var(--dk-ink-2); }
.menu-all a:hover { color: var(--dk-ink); }

.menu-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px clamp(20px, 3vw, 48px); align-content: start; }
.menu-groups ul { display: flex; flex-direction: column; gap: 9px; }
.menu-groups a { font-size: 14.5px; color: var(--dk-ink-2); transition: color .15s; }
.menu-groups a:hover { color: var(--dk-ink); }

.menu-foot {
  margin-top: clamp(40px, 7vh, 80px); padding-top: 28px;
  border-top: 1px solid var(--dk-hair);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.menu-foot .mono { color: var(--dk-ink-2); }
.menu-foot .mono a:hover { color: var(--dk-ink); }

/* ---------------------------------------------------------- sections */
section { padding-block: clamp(48px, 6vw, 84px); }
section.tight { padding-block: clamp(30px, 4vw, 52px); }
section.dark { background: var(--dk); color: var(--dk-ink); }
section.shade { background: var(--paper-2); }

.kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: clamp(14px, 2vw, 24px);
}
.kicker::before { content: ""; width: 6px; height: 6px; background: var(--org); flex: 0 0 auto; }
.dark .kicker { color: var(--dk-ink-2); }

.sechead { max-width: 880px; }
.sechead h2 { margin-bottom: 14px; }
.sechead .lead { font-size: clamp(15px, 1.4vw, 17px); color: var(--ink-2); }
.dark .sechead .lead { color: var(--dk-ink-2); }

/* ---------------------------------------------------------- hero */
.hero {
  position: relative;
  /* full-bleed landing: exactly the viewport at any window size (svh keeps it
     honest on mobile, where browser chrome makes 100vh overshoot) */
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  background: var(--dk); color: var(--dk-ink);
  overflow: hidden; border-top: 0;
  padding-block: 0;
}
.hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* autoplay refused (iOS Low Power): swap the untappable player for the still */
.hero-media.noplay video { display: none; }
.hero-media.noplay { background: var(--dk) url("media/hero-poster.jpg") center / cover no-repeat; }
/* Flat 30% scrim removed: the ::after gradient alone carries headline
   contrast, and the extra flat layer only muddied the video. */
.hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to top, rgba(6,7,8,0.88) 0%, rgba(6,7,8,0.32) 46%, rgba(6,7,8,0.42) 100%);
}
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-top: 170px; padding-bottom: clamp(22px, 3.5vh, 38px); }
.hero .toplabel { margin-bottom: clamp(22px, 4vh, 40px); color: var(--dk-ink-2); }
.hero .toplabel a:hover { color: var(--dk-ink); }
.hero .sub { font-size: clamp(13px, 1vw, 14px); line-height: 1.55; color: var(--dk-ink-2); margin-bottom: 22px; }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: clamp(28px, 5vh, 48px); }
.hero .standing {
  border-top: 1px solid var(--dk-hair); padding-top: 13px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--dk-ink-2); line-height: 1.9; max-width: none;
}

/* ---------------------------------------------------------- page hero (interior) */
.pagehead { padding-block: clamp(44px, 6vw, 72px) clamp(26px, 4vw, 44px); border-top: 0; }
.pagehead h1 { font-size: clamp(32px, 4.4vw, 54px); max-width: 18ch; margin-bottom: 20px; }
.pagehead .sub { font-size: clamp(15px, 1.4vw, 17px); color: var(--ink-2); max-width: 58ch; }
.pagehead.dark .sub { color: var(--dk-ink-2); }

/* ---------------------------------------------------------- intuigents carousel */
.workforce .featbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: clamp(26px, 3.5vw, 44px); margin-bottom: 22px; flex-wrap: wrap;
}
.chipstrip { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  position: relative; overflow: hidden;
  font-family: var(--sans); font-size: 15px; font-weight: 450; letter-spacing: 0;
  padding: 10px 18px; border: 0; background: var(--paper-2);
  color: var(--ink-3); transition: color .16s, background .16s; white-space: nowrap;
}
.chip > span { position: relative; z-index: 1; }
.chip::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 79, 23, 0.13);
  transform: scaleX(0); transform-origin: left center;
}
.chip:hover { color: var(--ink); background: #ecebe7; }
.chip[aria-selected="true"] { color: var(--ink); }
.chip.filling::before { animation: chipfill var(--chip-dur, 6s) linear forwards; }
@keyframes chipfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .chip.filling::before { animation: none; } }
.carctl { display: flex; gap: 8px; }
.carctl button {
  width: 40px; height: 40px; border: 1px solid var(--hair);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .16s;
}
.carctl svg { width: 13px; height: 13px; display: block; }
.carctl button:hover { border-color: var(--ink); }

.slides {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; gap: 0;
  border: 1px solid var(--hair);
}
.slides::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 100%; scroll-snap-align: start;
  display: grid; grid-template-columns: 1fr minmax(260px, 380px);
  min-height: 0;
}
.slide-visual {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  padding: 26px 36px 0; overflow: hidden;
  order: 2;
}
.slide-visual img { position: relative; }
.slide-visual img { width: min(290px, 100%); height: auto; }
.slide-visual .idx {
  position: absolute; top: 16px; right: 18px; z-index: 1;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; color: var(--ink-3);
}
.slide-copy { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; justify-content: center; order: 1; }
.slide-copy .mono { color: var(--ink-3); margin-bottom: 18px; }
.slide-copy h3 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; margin-bottom: 16px; max-width: 16ch; }
.slide-copy p { color: var(--ink-2); font-size: 15.5px; max-width: 52ch; margin-bottom: 26px; }
.slide-copy .tlink { align-self: flex-start; }

/* ---------------------------------------------------------- stats */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border: 1px solid var(--dk-hair); border-right: 0;
  margin-top: clamp(36px, 5vw, 64px);
}
.stats > div { padding: 22px 22px 18px; border-right: 1px solid var(--dk-hair); position: relative; transition: background .25s; }
.stats > div::before { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 100%; background: currentColor; opacity: .4; transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.25,.6,.25,1) calc(var(--i, 0) * 110ms + .15s); }
.in .stats > div::before { transform: scaleX(1); }
.dark .stats > div:hover { background: rgba(242, 241, 238, 0.045); }
section:not(.dark) .stats > div:hover { background: var(--paper-2); }
.stats b { display: block; font-family: var(--disp); font-size: clamp(34px, 3.4vw, 50px); font-weight: 400; letter-spacing: -0.025em; line-height: 1; margin-bottom: 12px; }
.stats span { font-size: 13px; line-height: 1.5; color: var(--dk-ink-2); display: block; max-width: 24ch; }
section:not(.dark) .stats { border-color: var(--hair); }
section:not(.dark) .stats > div { border-color: var(--hair); }
section:not(.dark) .stats span { color: var(--ink-2); }

/* ---------------------------------------------------------- serif callout */
.callout { padding-block: clamp(44px, 6vw, 84px); }
.callout p {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(21px, 2.8vw, 36px); line-height: 1.28; letter-spacing: -0.01em;
  max-width: 30ch;
}
.callout p.mono {
  font-family: var(--mono); font-style: normal; font-size: 11px;
  letter-spacing: 0.05em; margin-top: 30px; color: var(--ink-3); max-width: none;
}

/* ---------------------------------------------------------- product grid */
.prodgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--hair); border-right: 0; border-bottom: 0;
  margin-top: clamp(36px, 5vw, 60px);
}
.prodcard {
  border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 0;
  transition: background .18s;
}
.prodcard:hover { background: var(--paper-2); }
.prodcard .pmedia {
  aspect-ratio: 16/10; margin-bottom: 22px; position: relative; overflow: hidden;
  background: var(--dk);
  display: flex; align-items: center; justify-content: center;
}
.prodcard .pmedia .mark { width: 15%; color: var(--dk-ink); opacity: .9; }
.prodcard .pmedia.grid-motif { background: radial-gradient(circle at 30% 40%, #1c1e22 0%, var(--dk) 70%); }
.prodcard .pmedia::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--dk-hair) 1px, transparent 1px), linear-gradient(90deg, var(--dk-hair) 1px, transparent 1px);
  background-size: 28px 28px; opacity: .35;
}
.prodcard .pmedia .plabel {
  position: absolute; left: 14px; top: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--dk-ink-2);
}
.prodcard h3 { font-size: 19px; margin-bottom: 8px; display: flex; align-items: baseline; gap: 10px; }
.prodcard h3 .mono { color: var(--ink-3); font-size: 10px; }
.prodcard p { font-size: 14px; color: var(--ink-2); }
.prodcard .tlink { margin-top: 16px; font-size: 13.5px; align-self: flex-start; }

/* ---------------------------------------------------------- numbered steps */
.steps { border-top: 1px solid var(--hair); margin-top: clamp(32px, 5vw, 56px); counter-reset: step; }
.step {
  display: grid; grid-template-columns: 90px 260px 1fr; gap: 24px; align-items: baseline;
  padding: 19px 0; border-bottom: 1px solid var(--hair);
}
.step .mono { color: var(--ink-3); }
.step h3 { font-size: 18px; }
.step p { color: var(--ink-2); font-size: 15px; max-width: 60ch; }
.dark .steps, .dark .step { border-color: var(--dk-hair); }
.dark .step p { color: var(--dk-ink-2); }
.dark .step .mono { color: var(--dk-ink-2); }

/* ---------------------------------------------------------- tables */
/* tables scroll inside their own box on narrow screens rather than being
   clipped by the page (row headers are nowrap, so they can't fully reflow) */
.tbl-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.doc table { width: 100%; border-collapse: collapse; margin-top: clamp(28px, 4vw, 48px); font-size: 14.5px; }
.doc th, .doc td { text-align: left; padding: 16px 18px; border: 1px solid var(--hair); vertical-align: top; }
.doc thead th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.doc tbody th { font-weight: 600; font-size: 14px; white-space: nowrap; }
.doc td { color: var(--ink-2); }
.tablewrap { overflow-x: auto; }

/* ---------------------------------------------------------- quote */
blockquote p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(21px, 2.6vw, 32px); line-height: 1.3; max-width: 26ch;
}
blockquote cite {
  display: block; margin-top: 26px; font-style: normal;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3);
}
.dark blockquote cite { color: var(--dk-ink-2); }

/* ---------------------------------------------------------- news list */
.newslist { border-top: 1px solid var(--hair); margin-top: clamp(28px, 4vw, 48px); }
.newsrow {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--hair);
  transition: background .15s;
}
.newsrow:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.newsrow .mono { color: var(--ink-3); }
.newsrow h3 { font-size: clamp(16px, 1.6vw, 19px); font-weight: 400; max-width: 48ch; }

/* ---------------------------------------------------------- CTA band */
.ctaband { text-align: left; }
.ctaband h2 { max-width: 16ch; margin-bottom: 30px; }
.ctaband .row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------------------------------------------------------- media panels */
.panel { position: relative; overflow: hidden; background: var(--dk); }
.panel img { width: 100%; height: 100%; object-fit: cover; }
.panel.tall { aspect-ratio: 16/8; }
figure.panel figcaption {
  position: absolute; left: 16px; bottom: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--dk-ink); background: rgba(11,12,14,.55); padding: 6px 10px;
}

/* ---------------------------------------------------------- two-col feature rows */
.featrows { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 64px); margin-top: clamp(30px, 4vw, 52px); }
.featrow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.featrow:nth-child(even) .frmedia { order: 2; }
.featrow h3 { font-size: clamp(21px, 2.3vw, 28px); margin-bottom: 12px; }
.featrow p { color: var(--ink-2); font-size: 15.5px; }
.featrow .mono { display: block; color: var(--ink-3); margin-bottom: 14px; }
.frmedia { border: 1px solid var(--hair); }

/* ---------------------------------------------------------- brand panel */
.brandpanel {
  position: relative; aspect-ratio: 16/9; background: radial-gradient(circle at 32% 42%, #1d1f24 0%, var(--dk) 72%);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.brandpanel::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--dk-hair) 1px, transparent 1px), linear-gradient(90deg, var(--dk-hair) 1px, transparent 1px);
  background-size: 30px 30px; opacity: .35;
}
.brandpanel .mark { width: 14%; color: var(--dk-ink); }
.brandpanel .plabel {
  position: absolute; left: 16px; top: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--dk-ink-2);
}

/* ---------------------------------------------------------- def box */
.defbox {
  border: 1px solid var(--hair); border-left: 3px solid var(--org);
  padding: 26px 30px; margin-block: 34px; max-width: 760px;
  font-size: 16px; line-height: 1.6;
}
.defbox strong { font-family: var(--disp); font-weight: 500; }

/* ---------------------------------------------------------- prose helpers */
.prose { max-width: 760px; }
.prose > * + * { margin-top: 18px; }
.prose h2 { font-size: clamp(21px, 2.4vw, 28px); margin-top: clamp(36px, 5vw, 56px); }
.prose h3 { font-size: 17px; margin-top: 30px; font-weight: 500; }
.prose ul { list-style: none; }
.prose ul li { padding-left: 22px; position: relative; margin-top: 10px; color: var(--ink-2); }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }
.prose ol { padding-left: 20px; }
.prose ol li { margin-top: 10px; color: var(--ink-2); }
.prose a { border-bottom: 1px solid var(--hair); transition: border-color .15s; }
.prose a:hover { border-color: var(--org); }
.prose strong { color: var(--ink); }
.prose .lead { font-size: 18px; color: var(--ink-2); }

.linkrow { display: flex; gap: 26px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 44px); }

/* two-col split for "what AI does / what stays human" */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--hair); margin-top: clamp(32px, 5vw, 56px); }
.split > div { padding: 30px 32px; }
.split > div + div { border-left: 1px solid var(--hair); }
.split h3 { font-size: 16px; font-weight: 500; margin-bottom: 16px; display: flex; gap: 10px; align-items: baseline; }
.split h3 .mono { color: var(--ink-3); font-size: 10px; }
.split ul li { padding-left: 22px; position: relative; margin-top: 10px; color: var(--ink-2); font-size: 14.5px; }
.split ul li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }

/* ---------------------------------------------------------- dark-section variants */
.dark .defbox { border-color: var(--dk-hair); border-left-color: var(--org); }
.dark .tlink { border-bottom-color: var(--dk-hair); }
.dark .tlink:hover { border-bottom-color: var(--org-soft); }
.dark .prose p, .dark .prose ul li, .dark .prose ol li { color: var(--dk-ink-2); }
.dark .prose strong, .dark .prose h2, .dark .prose h3 { color: var(--dk-ink); }
.dark .prose a { border-bottom-color: var(--dk-hair); }
.dark .split, .dark .split > div + div { border-color: var(--dk-hair); }
.dark .split ul li { color: var(--dk-ink-2); }
.dark th, .dark td { border-color: var(--dk-hair); }
.dark td { color: var(--dk-ink-2); }
.dark thead th { color: var(--dk-ink-2); }
.dark .newslist, .dark .newsrow { border-color: var(--dk-hair); }
.dark .newsrow .mono { color: var(--dk-ink-2); }
.dark .btn.ghost { color: var(--dk-ink); border-color: var(--dk-hair); }
.dark .btn.ghost:hover { background: var(--dk-ink); color: var(--dk); }
.shade .prodcard:hover { background: var(--paper); }

/* ---------------------------------------------------------- forms */
form.demo { max-width: 640px; margin-top: clamp(30px, 4vw, 48px); display: grid; gap: 20px; }
.field label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: transparent; border: 1px solid var(--hair); padding: 14px 16px;
  border-radius: 0; transition: border-color .15s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); }
.field textarea { min-height: 140px; resize: vertical; }
.honey { position: absolute; left: -9999px; }
form .msg { font-size: 14px; min-height: 20px; }
form .msg.ok { color: #1a7f37; }
form .msg.err { color: #b42318; }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ---------------------------------------------------------- demo layout */
.demo-layout { display: grid; grid-template-columns: minmax(0, 640px) 1fr; gap: clamp(32px, 6vw, 96px); }
@media (max-width: 900px) { .demo-layout { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- footer */
.foot { background: var(--dk); color: var(--dk-ink); padding-block: clamp(36px, 5vw, 56px) 22px; }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; flex-wrap: wrap; margin-bottom: clamp(26px, 3.5vw, 40px); }
.foot-cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-cta p { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--dk-ink-2); }
.foot-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; padding-block: 26px; border-top: 1px solid var(--dk-hair); }
.foot-cols h4 { color: var(--dk-ink-2); margin-bottom: 11px; font-weight: 400; }
.foot-cols ul { display: flex; flex-direction: column; gap: 6px; }
.foot-cols a { font-size: 13.5px; color: var(--dk-ink-2); transition: color .15s; }
.foot-cols a:hover { color: var(--dk-ink); }
.foot-base { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--dk-hair); }
.foot-base .mono { color: var(--dk-ink-2); font-size: 10px; display: flex; gap: 28px; flex-wrap: wrap; }
.foot-base a:hover { color: var(--dk-ink); }

/* ---------------------------------------------------------- reveal */
@media (prefers-reduced-motion: no-preference) {
  body.fx .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  body.fx .rv.in { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- responsive */
@media (max-width: 1080px) {
  .menu-grid { grid-template-columns: 1fr; }
  .menu-groups { grid-template-columns: repeat(2, 1fr); }
  .foot-cols { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); border-right: 1px solid var(--dk-hair); }
  section:not(.dark) .stats { border-right-color: var(--hair); }
  .stats > div { border-bottom: 1px solid var(--dk-hair); border-right: 0; }
  .prodgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .slide { grid-template-columns: 1fr; }
  .slide-visual { order: 0; padding: 24px 20px 0; min-height: 0; }
  .slide-visual img { width: min(200px, 58%); }
  .slide-copy { border-left: 0; border-top: 1px solid var(--hair); }
  .step { grid-template-columns: 56px 1fr; }
  .step p { grid-column: 2; }
  .featrow { grid-template-columns: 1fr; }
  .featrow:nth-child(even) .frmedia { order: 0; }
  .split { grid-template-columns: 1fr; }
  .split > div + div { border-left: 0; border-top: 1px solid var(--hair); }
  .form-grid2 { grid-template-columns: 1fr; }
  .newsrow { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 640px) {
  .prodgrid { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
  .hero .wrap { padding-top: 140px; }
  .burger-label { display: none; }
  .menu-groups { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------- glass nav */
.nav {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
}
body.overdark .nav { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.overdark.scrolled .nav {
  background: rgba(11, 12, 14, 0.64);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}
body.menu-open .nav { background: var(--dk); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------------------------------------------------------- text rise reveal */
.fxm { display: block; overflow: hidden; }
.fxi { display: block; transform: translateY(108%); transition: transform .8s cubic-bezier(.22, .61, .21, 1) .06s; }
.in .fxi { transform: none; }
body:not(.fx) .fxi { transform: none; }
body.fx .prodcard, body.fx .stats > div, body.fx .step {
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}
body.fx .in .prodcard, body.fx .in .stats > div, body.fx .in .step { opacity: 1; transform: none; }

/* ---------------------------------------------------------- testimonials */
.quotes { margin-top: clamp(30px, 4vw, 48px); max-width: 980px; }
.qtrack { position: relative; }
.qslide { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.qslide.is-on { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.qslide blockquote p { max-width: 34ch; }
.qslide figcaption { margin-top: 24px; color: var(--ink-3); }
.qctl { display: flex; align-items: center; gap: 18px; margin-top: clamp(26px, 3vw, 40px); }
.qctl button {
  width: 40px; height: 40px; border: 1px solid var(--hair);
  display: inline-flex; align-items: center; justify-content: center; transition: all .16s;
}
.qctl button:hover { border-color: var(--ink); }
.qctl svg { width: 13px; height: 13px; display: block; }
.qctl .mono { color: var(--ink-3); }

/* ---------------------------------------------------------- focus dim (v4) */
@media (hover: hover) {
  .prodgrid:hover .prodcard:not(:hover) { opacity: .5; }
  .prodcard { transition: background .18s, opacity .3s; }
  .doc tbody:hover tr:not(:hover) td, .doc tbody:hover tr:not(:hover) th { opacity: .45; }
  .doc tbody td, .doc tbody th { transition: opacity .25s, background .2s; }
  .doc tbody tr:hover td, .doc tbody tr:hover th { background: var(--paper-2); }
  .dark tbody tr:hover td, .dark tbody tr:hover th { background: rgba(242, 241, 238, 0.05); }
}
body.fx tbody tr { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i, 0) * 80ms); }
body.fx .in tbody tr { opacity: 1; transform: none; }

.avatarpanel { display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(circle at 32% 30%, #23262c 0%, #0e0f11 74%); }
.avatarpanel::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--dk-hair) 1px, transparent 1px), linear-gradient(90deg, var(--dk-hair) 1px, transparent 1px);
  background-size: 30px 30px; opacity: .3;
}
.avatarpanel img { position: relative; }

/* cycling step list */
[data-steps] .step { cursor: default; }
[data-steps] .step h3, [data-steps] .step p, [data-steps] .step .mono { transition: color .45s; }
[data-steps] .step:not(.on) h3 { color: rgba(242, 241, 238, 0.38); }
[data-steps] .step:not(.on) p { color: rgba(242, 241, 238, 0.28); }
[data-steps] .step:not(.on) .mono { color: rgba(242, 241, 238, 0.32); }
[data-steps] .step.on h3 { color: var(--dk-ink); }
[data-steps] .step.on p { color: var(--dk-ink-2); }
[data-steps] .step.on .mono { color: var(--dk-ink); }

/* ---------------------------------------------------------- v5 */
/* When the Dinamo web license lands, drop the woff2 files into assets/fonts/
   and uncomment:
@font-face { font-family: "ABC Diatype"; src: url("fonts/ABCDiatype-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ABC Diatype"; src: url("fonts/ABCDiatype-Medium.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "ABC Diatype Mono"; src: url("fonts/ABCDiatypeMono-Regular.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
*/

/* proof strip under the hero */
.proofbar-wrap { padding-block: clamp(22px, 2.6vw, 34px); background: var(--paper-2); }
.proofbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.proofbar .mono { color: var(--ink-3); margin-bottom: 5px; }
.proofbar p:not(.mono) { font-size: 13px; line-height: 1.45; color: var(--ink-2); max-width: 30ch; }
@media (max-width: 900px) { .proofbar { grid-template-columns: 1fr 1fr; } }

/* split layout: text left, live component right */
.duo { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: clamp(30px, 5vw, 84px); align-items: start; }
.duo .steps { margin-top: 0; }
@media (max-width: 980px) { .duo { grid-template-columns: 1fr; } }

/* cycling step underline, synced to the 3.8s cycle */
[data-steps] .step { position: relative; }
[data-steps] .step.on::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: rgba(242, 241, 238, 0.35); transform-origin: left center;
  animation: stepfill 6s linear;
}
@media (prefers-reduced-motion: reduce) { [data-steps] .step.on::after { animation: none; } }
@keyframes stepfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* the category: interactive comparison */
.verses { display: grid; grid-template-columns: minmax(240px, 4fr) 8fr; gap: clamp(28px, 4vw, 72px); margin-top: clamp(26px, 3.5vw, 44px); align-items: start; }
.verses-list { display: flex; flex-direction: column; }
.verses-list button {
  text-align: left; font-family: var(--disp); font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -0.01em;
  padding: 13px 0; border-bottom: 1px solid var(--hair); color: var(--ink-3);
  transition: color .25s; cursor: pointer;
}
.verses-list button:first-child { border-top: 1px solid var(--hair); }
.verses-list button.on { color: var(--ink); }
.verses-panels { position: relative; }
.vpanel {
  position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease; pointer-events: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 56px);
}
.vpanel.on { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.vpanel .vlabel { color: var(--ink-3); margin-bottom: 10px; }
.vpanel p:not(.vlabel) { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.45; color: var(--ink-2); max-width: 34ch; }
.vpanel > div:last-child p:not(.vlabel) { color: var(--ink); }
@media (max-width: 900px) { .verses { grid-template-columns: 1fr; } .vpanel { grid-template-columns: 1fr; gap: 18px; } }

/* ---------------------------------------------------------- v6 */
.hero .sub .brand { color: var(--org-soft); }

/* second announcement */
.ann-2nd { margin-left: auto; }
@media (max-width: 860px) {
  /* one message at a time, shown in full: two truncated halves read as broken.
     JS alternates them via .alt. Specificity must beat `.annbar a`. */
  .annbar .wrap { gap: 8px; padding-inline: 16px; }
  /* 12.5px + the tighter gutter is what makes the longer Summit line fit
     inside 375px without an ellipsis */
  .annbar a.ann-1st, .annbar a.ann-2nd { flex: 1 1 auto; min-width: 0; margin-left: 0; font-size: 12.5px; }
  .annbar a.ann-2nd { display: none; }
  .annbar.alt a.ann-1st { display: none; }
  .annbar.alt a.ann-2nd { display: block; }
  .annbar .ann-pre { display: none; }   /* drop the lead-in so the line fits */
}
/* Phones: keep only the essential half of each message. Shrinking type far
   enough to fit the full strings made them unreadable at 320px. */
@media (max-width: 480px) {
  .annbar .ann-post { display: none; }
  .annbar a.ann-1st, .annbar a.ann-2nd { font-size: 13px; }
}

/* news rows with media */
.newsrow.media { grid-template-columns: 150px 190px 1fr; align-items: center; }
.newsrow.media .nthumb { grid-row: 1 / -1; }
.nthumb { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--dk); position: relative; }
.nthumb > img { width: 100%; height: 100%; object-fit: cover; }
.nthumb.dark { background: radial-gradient(circle at 32% 30%, #23262c 0%, #0e0f11 74%); display: flex; align-items: flex-end; justify-content: center; }
.nthumb.dark img.nava { width: 42%; height: auto; object-fit: contain; }
.nthumb.dark img.nmark { width: 20%; height: auto; align-self: center; }
@media (max-width: 820px) { .newsrow.media { grid-template-columns: 110px 1fr; } }

/* proof strip wordmarks */
.plogo { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; min-height: 17px; }
.plogo .mslogo { width: 13px; height: 13px; fill: var(--ink-3); }
.proofbar .mono { min-height: 17px; display: flex; align-items: center; }

/* ---------------------------------------------------------- v7 */
.hero-bottom { display: flex; align-items: center; gap: 28px; }
.hero-side .sub { margin-bottom: 18px; }
.hero-side .cta-row { margin-bottom: 0; }
@media (max-width: 800px) { .hero-bottom { flex-direction: column; gap: 16px; } }

.plogo .mslogo4, .qslide .mslogo4 { width: 14px; height: 14px; flex: 0 0 auto; }
.plogo .ielogo { height: 22px; width: auto; }
.qslide figcaption { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qslide .ielogo { height: 15px; width: auto; }

.menu-promo { display: block; }
.menu-promo .mpimg { display: block; aspect-ratio: 16/9; overflow: hidden; margin-bottom: 10px; background: var(--dk-2); }
.menu-promo .mpimg img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.menu-promo:hover .mpimg img { opacity: .82; }
.menu-promo .mono { color: var(--dk-ink-2); display: block; margin-bottom: 4px; }
.menu-promo .mpt { display: block; font-size: 14.5px; line-height: 1.35; color: var(--dk-ink); max-width: 26ch; }

/* ---------------------------------------------------------- v8 */
/* hero: sub and CTA share one row */

/* problem band closing line */
.probclose { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.45; color: var(--dk-ink-2); max-width: 52ch; margin-top: clamp(28px, 4vw, 44px); }

/* product motifs */
.pmedia .motif { width: 40%; max-width: 130px; stroke: var(--dk-ink-2); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; position: relative; }

/* testimonials: people, display-sized */
.qwho { display: flex; align-items: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.qface { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.qmeta { display: flex; flex-direction: column; gap: 2px; }
.qmeta strong { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.qmeta span { font-size: 12.5px; color: var(--ink-3); }
.qco { display: flex; align-items: center; margin-left: 8px; padding-left: 18px; border-left: 1px solid var(--hair); }
.qco .mslogo4 { width: 20px; height: 20px; }
.qco .ielogo { height: 22px; width: auto; }

/* dark-section featrow (about page) */
.dark .featrow p { color: var(--dk-ink-2); }
.dark .frmedia { border-color: var(--dk-hair); }
.dark .featrow .mono { color: var(--dk-ink-2); }

/* ceraweek photo slot: swaps to <img> when the photo lands */
.cera-slot { aspect-ratio: 16/8; background: radial-gradient(circle at 32% 30%, #23262c 0%, #0e0f11 74%); display: flex; align-items: center; justify-content: center; }
.cera-slot img.mark-c { width: 10%; opacity: .8; }

/* ---------------------------------------------------------- v9 */

.workforce .sechead .lead { max-width: 62ch; }

/* testimonials: quote left, person right */
@media (min-width: 901px) {
  .qslide { display: grid; grid-template-columns: minmax(0, 8fr) minmax(230px, 3fr); gap: clamp(30px, 4vw, 70px); align-items: center; }
  .qslide blockquote p { max-width: 40ch; }
  .qwho { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 0; }
  .qface { width: 64px; height: 64px; }
  .qco { margin-left: 0; padding-left: 0; border-left: 0; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--hair); }
}

/* ceraweek figures */
.cera-fig { margin: 0; }
.cera-fig img { width: 100%; height: auto; display: block; }
.cera-fig + .prose, .prose .cera-fig { margin-top: clamp(28px, 4vw, 44px); }

/* ---------------------------------------------------------- v10 */
.menu-promos { display: flex; flex-direction: column; gap: 24px; }
.qco .cotext { font-size: 14px; font-weight: 500; color: var(--ink-2); letter-spacing: 0.01em; }

/* ---------------------------------------------------------- v11 */
.cera-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); }
.cera-pair figure { margin: 0; }
.cera-pair img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.cera-pair.tall img { aspect-ratio: 4 / 5; }
.cera-pair figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); max-width: 56ch; }
@media (max-width: 760px) { .cera-pair { grid-template-columns: 1fr; } }
/* one photo beside prose */
.cera-solo { display: grid; grid-template-columns: minmax(320px, 1fr) 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.cera-solo figure { margin: 0; }
.cera-solo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.cera-solo figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); max-width: 56ch; }
/* three photos in a row */
.cera-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.cera-trio figure { margin: 0; }
.cera-trio img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.cera-trio figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
@media (max-width: 760px) { .cera-solo, .cera-trio { grid-template-columns: 1fr; } }
.qco .colg.celanese { height: 16px; width: auto; }
.qco .colg.aramco { height: 30px; width: auto; }

/* ---------------------------------------------------------- v12 */
/* rotating centered hero headlines */
.hero-center {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.hslide {
  position: absolute; left: 50%; top: 37%; transform: translateX(-50%);
  width: min(96vw, 1360px); padding: 0 20px; text-align: center;
  opacity: 0; transition: opacity .9s ease;
}
.hslide.on { opacity: 1; }
.hslide h1, .hslide .ht {
  font-family: var(--disp); font-size: clamp(36px, 4.3vw, 68px);
  font-weight: 400; letter-spacing: -0.025em; line-height: 1.08;
}
.hslide .hsub { margin: 16px auto 0; font-size: clamp(14px, 1.2vw, 17px); color: var(--dk-ink-2); }

/* large-scale product list */
.biglist { border-top: 1px solid var(--hair); }
.bigrow { display: grid; grid-template-columns: 1fr auto; padding: clamp(20px, 2.8vw, 38px) 0; border-bottom: 1px solid var(--hair); align-items: start; }
.bigrow .bigname {
  grid-column: 1; font-family: var(--disp);
  font-size: clamp(52px, 7.4vw, 116px); font-weight: 400;
  letter-spacing: -0.035em; line-height: 1; transition: color .25s;
}
.bigrow .bidx { grid-column: 2; grid-row: 1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--ink-3); padding-top: 10px; }
.bigrow p { grid-column: 1 / -1; margin-top: 12px; color: var(--ink-2); font-size: 15px; max-width: 62ch; transition: color .25s; }
@media (hover: hover) {
  .biglist:hover .bigrow:not(:hover) .bigname { color: var(--ink-3); }
  .biglist:hover .bigrow:not(:hover) p { color: var(--ink-3); }
}

/* ---------------------------------------------------------- v14 */
/* rotating headlines are real, selectable text (hero-center passes clicks
   through; re-enable them on the visible slide only) */
.hslide.on { pointer-events: auto; }
/* the home hero's .wrap (padding-top 170px) overlaps the headline on short
   viewports and steals its clicks; pass them through except on real content */
.hero:has(.hero-center) .wrap { pointer-events: none; }
.hero:has(.hero-center) .hero-bottom { pointer-events: auto; }

/* ---------------------------------------------------------- v15 */
/* descender room in the headline-rise mask (fxm's overflow:hidden was
   clipping the bottom of g/y/p everywhere) */
.fxm { padding-bottom: 0.18em; margin-bottom: -0.18em; }
.fxi { transform: translateY(130%); }

/* slower hero crossfade */
/* headlines must not cross-fade into each other: the old slide fades out
   fully, then a beat of clear screen, then the next fades in (see site.js) */
.hslide { transition: opacity .6s ease; }

/* large-scale section titles */
h2 { font-size: clamp(28px, 3.6vw, 48px); }

/* footer contact pills */
.foot-base .foot-pills, .menu-foot .foot-pills { display: flex; gap: 12px; flex-wrap: wrap; }
.foot-pills a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 0 24px;
  border: 1px solid var(--dk-hair); border-radius: 60px;
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--dk-ink);
  transition: background .18s, color .18s, border-color .18s;
}
.foot-pills a:hover { background: var(--dk-ink); color: var(--dk); border-color: var(--dk-ink); }

/* workforce lead: brand word + moved hero line */
.sechead .brand { color: var(--org); }
.sechead .lead + .lead { margin-top: 10px; }

/* ---------------------------------------------------------- v16 */
/* roster note under the workforce carousel: label + text row */
.featnote {
  display: grid; grid-template-columns: minmax(140px, 220px) 1fr;
  gap: clamp(16px, 3vw, 48px); align-items: baseline;
  border-top: 1px solid var(--hair);
  margin-top: clamp(16px, 2vw, 26px); padding-top: 14px;
}
.featnote .mono { color: var(--ink-3); }
.featnote p + p { color: var(--ink-2); font-size: 15px; max-width: 78ch; }
@media (max-width: 760px) { .featnote { grid-template-columns: 1fr; gap: 8px; } }

/* quieter hero CTA, sits lower */
.hero-bottom .btn.lighto {
  color: var(--dk-ink-2); border-color: rgba(242, 241, 238, 0.22);
  font-size: 13px; font-weight: 400; padding: 12px 20px;
}
.hero-bottom .btn.lighto:hover { color: var(--dk-ink); border-color: var(--dk-ink); background: transparent; }
.hero-bottom .cta-row { margin-bottom: 10px; }

/* footer base: center the copyright line against the pill buttons */
.foot-base { align-items: center; }

/* product pageheads: giant wordmark + display tagline */
.pagehead .prodmark {
  font-size: clamp(58px, 8.6vw, 132px); line-height: 1;
  letter-spacing: -0.035em; max-width: none; margin-bottom: 22px;
}
.pagehead .prodtag {
  font-family: var(--disp); font-size: clamp(22px, 2.5vw, 32px);
  letter-spacing: -0.02em; line-height: 1.15; color: var(--ink);
  max-width: 26ch; margin-bottom: 18px;
}

/* keep kicker-to-roster in one screen after the anchor jump */
/* Land the jump at the section's top edge: its padding then sits under the
   sticky nav, so the kicker arrives just below the nav and the section still
   reads in one screen, without stealing the padding other sections have. */
#workforce { scroll-margin-top: 0; }

.workforce .featnote { margin-top: 14px; }

/* ---------------------------------------------------------- v18 */
/* roster line: plain full-width sentence, no label */
.featnote { display: block; }
.featnote p { color: var(--ink-2); font-size: 16px; max-width: 74ch; }

/* compress the workforce section so kicker-to-roster fits one screen
   even on short laptop windows (~700px effective height) */

.workforce .kicker { margin-bottom: 14px; }
.workforce .sechead h2 { margin-bottom: 8px; }
.workforce .featbar { margin-top: 20px; margin-bottom: 14px; }
.workforce .slide-copy { padding-top: 26px; padding-bottom: 26px; }
.workforce .slide-copy p { margin-bottom: 18px; }
.workforce .featnote { margin-top: 10px; padding-top: 12px; }

/* ---------------------------------------------------------- v19 */
/* roster line in the site's serif callout voice */
.featnote p {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5;
  color: var(--ink-2); max-width: 64ch;
}

/* ---------------------------------------------------------- v20 */
/* hero CTA: a whisper of brand orange on the workforce button */
.hero-bottom .btn.lighto { border-color: rgba(255, 128, 85, 0.45); }
.hero-bottom .btn.lighto:hover { color: var(--dk-ink); border-color: var(--org-soft); background: rgba(255, 79, 23, 0.12); }
/* tighter workforce slides: copy drives the height, panel hugs the avatar */
.workforce .slide-copy { padding-top: 22px; padding-bottom: 22px; }
.workforce .slide-copy h3 { margin-bottom: 12px; }
.workforce .slide-copy p { margin-bottom: 16px; }

/* Short laptops (~720px): recover the last ~25px of internal spacing so the
   roster line still lands above the fold when the anchor jump arrives. Only
   the section's own rhythm is touched, never the padding it shares with the
   other sections. */
@media (max-height: 780px) {
  .workforce .featbar { margin-top: 14px; margin-bottom: 10px; }
  .workforce .featnote { margin-top: 6px; padding-top: 8px; }
  .workforce .slide-copy { padding-top: 18px; padding-bottom: 18px; }
}

/* Testimonials were the only block on the page capped at 980px, so their right
   edge aligned with nothing while every other block runs to the content edge.
   Span the full width and anchor the attribution to that same right edge; the
   quote keeps a readable measure rather than stretching across the page. */
.quotes { max-width: none; }
@media (min-width: 901px) {
  .qslide { grid-template-columns: minmax(0, 1fr) minmax(230px, 300px); gap: clamp(40px, 5vw, 90px); }
  .qslide blockquote p { max-width: 54ch; }
}