/* Glance Foundry. Finish after palantir.com, colors and small details from the seed proposal. */

@font-face { font-family: "Alliance No.2"; src: url("fonts/AllianceNo2-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alliance No.2"; src: url("fonts/AllianceNo2-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter Variable"; src: url("fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* The alt font, Brass Mono Comfortable (SIL Open Font License 1.1, fonts/BrassMono-OFL.txt). Served from here, so
   Safari, which won't use fonts installed on the visitor's Mac, gets it too */
@font-face { font-family: "Brass Mono Comfortable"; src: url("fonts/BrassMonoComfortable-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }

:root {
  /* Proposal palette */
  --gf-primary: #17232C;
  --copper: #a35826;
  --copper-pale: #f5ede8;
  --paper: #f5f5f1;
  --gf-cool-pale: #EBEFF6;
  --ink: #1F2937;
  --muted: #5B6573;
  --rule: #D4DAE1;
  --panel: #F3F5F8;
  --on-dark: #CCCFD1;
  --on-dark-dim: #93A0AA;
  --on-dark-rule: rgba(255, 255, 255, .16);

  /* Alliance No.2 per the proposal's fontspec: StylisticSet=4, the alternate A I W Y.
     The web fonts leave V out of that set (_build/make_fonts.py). */
  --font-head: "Alliance No.2", "Inter Variable", system-ui, sans-serif;
  --features-head: "ss04";

  /* Inter with every alternate on, minus ss05 (circled), ss06 (squared), and the slashed
     zero (zero, and ss02, which includes it; ss04 is the same set without the slash).
     Where both set a glyph, ss03 (round quotes and commas) overrides ss08 (square quotes). */
  --font-body: "Inter Variable", system-ui, sans-serif;
  --features-body: "cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv07", "cv08", "cv09", "cv10", "cv11", "cv12", "cv13", "cv14", "ss01", "ss03", "ss04", "ss07", "ss08";

  --radius: 2px;
  --header-h: 72px; /* the whole banner. Narrower than one row (see Responsive), its items take a second row and this grows */
  --bar-h: 72px; /* the logo's row */
  --gutter: clamp(16px, 3.4vw, 48px);
  --font-readout: "Datatype", ui-monospace, monospace; /* for numbers the site reads out */
  --font-alt: "Brass Mono Comfortable", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* GF's alt font, for the home statement */
  --gf-cut: 10px; /* the corner taken off every label, like the flat on a wafer */
  --glass-dark: rgba(23, 35, 44, .8); /* labels over the cleanroom. Translucent with a blur, the way Palantir does its controls */
  --glass-light: rgba(255, 255, 255, .2); /* the same on dark backgrounds, at Palantir's exact 20% and 10px */
  --glass-light-hover: rgba(255, 255, 255, .32);
  --glass-blur: blur(10px);
  --wipe-bg: var(--muted); /* the page transition's panel, and its logo */
  --wipe-ink: #fff;
  --wipe-mark-w: 72px;
  --wipe-mark-h: 68px;
  --max: 1400px;
  --content: 86.6%;
  /* A registration mark, like the alignment marks on a photomask: the site's copper accent in place of rules */
  --reg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23a35826' stroke-width='1.1'%3E%3Ccircle cx='7' cy='7' r='3.4'/%3E%3Cpath d='M7 0v14M0 7h14'/%3E%3C/svg%3E");
}

@font-face { font-family: "Datatype"; src: url("fonts/Datatype.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: block; }

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-feature-settings: var(--features-body);
  font-optical-sizing: auto;
  font-synthesis: none;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.nav-open { overflow: hidden; }

/* Every Alliance element gets its feature here. The font shorthand would reset it, so this file uses longhands only. */
h1, h2, h3, h4,
.lockup, .tab__link, .btn, .menu__name,
.mobile-nav summary, .mobile-nav a, .cap__name, .fact__value,
.spec tr:not(.band) td:first-child, .footer__col a,
.statement, .cool-band__tag, .cool-card__name,
.arrow-link, .faq summary, .cleanroom__label,
.cleanroom__focus-name, .cleanroom__back, .machine-back,
.pindex a, .mats__table tbody th, .stage__name, .about-point__name {
  font-family: var(--font-head);
  font-feature-settings: var(--features-head);
}

/* All-caps labels stay in Alliance No.2 without the alternates, like the proposal's small-caps labels. */
.kicker, .pill, .fact__label, .spec th, .band td, .footer__label, .specs dt, .mats__table thead th, .proc__sub {
  font-family: var(--font-head);
  font-feature-settings: normal;
}

h1, h2, h3, h4 { font-weight: 400; color: var(--gf-primary); margin: 0; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: 1.03; letter-spacing: -.012em; }
h2 { font-size: clamp(2rem, 3.5vw, 3.1rem); line-height: 1.08; letter-spacing: -.008em; }
h3 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.18; }
h4 { font-size: 1.0625rem; line-height: 1.25; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 600; color: var(--gf-primary); }

.dim { color: var(--muted); }
.on-dark { color: var(--on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark .dim { color: var(--on-dark-dim); }

:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: var(--on-dark); }
::selection { background: var(--copper); color: #fff; }

/* Every page's content sits in one box, 0.866 of the screen's width, so the margin keeps the same proportion on any screen */
.wrap { width: 86.6%; margin-inline: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px;
  background: #fff; color: var(--gf-primary); border-radius: var(--radius);
}
.skip:focus { top: 12px; }

/* ---------- Lockup: logo stroke to letter stroke = 1.16 : 1 at every size ----------
   Letter stroke: Alliance No.2 Regular lowercase l stem, 86/1000 em.
   Logo stroke: 76.6 units in a mark 832.62 units tall (assets/gf-mark.svg).
   So mark height = 1.16 x 0.086 x (832.62 / 76.6) em. Size a lockup with font-size only. */
.lockup {
  --stem: .086;
  --ratio: 1.16;
  display: inline-flex;
  align-items: center;
  gap: .16em;
  font-size: 1.6875rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  color: #fff;
}
.lockup__mark {
  display: block;
  flex: none;
  height: calc(var(--ratio) * var(--stem) * 832.62 / 76.6 * 1em);
  width: auto;
  aspect-ratio: 876.94 / 832.62;
  transform: translateY(-.0625em); /* centers the mark on the cap height, as in the proposal */
}
.lockup--footer { font-size: 1.75rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--gf-primary);
  border-bottom: 1px solid var(--on-dark-rule);
}
/* The logo sits on the page's furthest-left edge and the menu on its furthest-right, with open space between */
.site-header__bar { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); height: var(--bar-h); padding-inline: var(--gutter); }
/* The menu's items sit in the banner, always in reach. The box in the corner, which opens them as a full-screen panel,
   takes over only where they no longer fit (see Responsive) */
.tabs { display: flex; align-items: center; gap: clamp(4px, .7vw, 12px); height: 100%; margin-left: auto; }
.tab { display: flex; align-items: center; height: 100%; position: static; }
/* A tab lights up as a glass label with the wafer-flat corner, the same shape as every label on the site */
.tab__link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 15px;
  font-size: 1.0625rem;
  font-weight: 400;
  white-space: nowrap;
  color: var(--on-dark);
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
  transition: color .15s, background .15s;
}
.tab--menu .tab__link::after {
  content: "";
  width: 5px; height: 5px;
  margin: -3px 0 0 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
  transition: transform .2s;
}
.tab:hover .tab__link, .tab:focus-within .tab__link { color: #fff; background: rgba(255, 255, 255, .08); }
.tab.is-active .tab__link { color: #fff; background: var(--glass-light); }
.tab--menu:hover .tab__link::after, .tab--menu:focus-within .tab__link::after { transform: translateY(2px) rotate(45deg); }
.site-header__actions { display: flex; align-items: center; gap: 12px; flex: none; }

/* The dropdowns: the whole screen under the banner, white text on the blue, text only, as the menu panel was. A mouse
   opens one by resting on its tab a moment, so passing over the tabs doesn't flash it; the keyboard by focus; a touch by a
   first tap (script.js). Each row is a page's name, and more quietly what's in it. The page you're on is lit white */
.menu {
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  opacity: 0;
  background: var(--gf-primary);
  transition: opacity .16s, visibility 0s .16s;
}
@media (hover: hover) {
  .tab--menu:hover .menu { visibility: visible; opacity: 1; transition: opacity .16s .12s, visibility 0s .12s; }
}
.tab--menu:has(:focus-visible) .menu, .tab--menu.is-open .menu { visibility: visible; opacity: 1; transition: opacity .16s; }
.tab--menu.is-dismissed .menu { visibility: hidden; opacity: 0; transition: none; }
.menu__inner { padding: 8px var(--gutter) 48px; }
.menu__link { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 40px; padding: 16px 0; color: #fff; border-bottom: 1px solid var(--on-dark-rule); transition: padding .2s; }
.menu__name { font-size: 1.625rem; line-height: 1.25; letter-spacing: -.01em; }
.menu__spec { font-size: .9375rem; line-height: 1.4; text-align: right; color: var(--on-dark-dim); transition: color .15s; }
.menu__link:hover { padding-left: 10px; }
.menu__link:hover .menu__spec { color: var(--on-dark); }
.menu__link[aria-current="page"] .menu__name { display: inline-flex; align-items: center; gap: .3em; margin-left: -10px; padding: 0 10px; color: var(--gf-primary); background: #fff; clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px); }
/* The GF mark leads the current page's name in the white: centered in the label, and small enough to leave white all round */
.menu__mark { display: block; flex: none; height: .74em; width: auto; aspect-ratio: 876.94 / 832.62; }

/* The home screen's banner keeps the box in the corner, which opens the whole menu as a full-screen panel, white on the blue */
.site-header--home .site-header__actions { margin-left: auto; }
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 42px; height: 38px;
  padding: 0 11px;
  background: none;
  border: 1px solid var(--on-dark-rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span { display: block; height: 1px; background: #fff; transition: transform .18s; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-nav {
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: 8px var(--gutter) 48px;
  background: var(--gf-primary);
}
.mobile-nav summary, .mobile-nav__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  font-size: 1.625rem;
  font-weight: 400;
  letter-spacing: -.01em;
  color: #fff;
  border-bottom: 1px solid var(--on-dark-rule);
  cursor: pointer;
  list-style: none;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::after { content: "+"; color: var(--on-dark-dim); font-size: 1.25rem; }
.mobile-nav details[open] summary::after { content: "–"; }
.mobile-nav__group div { display: flex; flex-direction: column; padding: 8px 0 14px; border-bottom: 1px solid var(--on-dark-rule); }
.mobile-nav__group div a { padding: 8px 0; font-size: 1.0625rem; color: var(--on-dark); }

.arrow-link {
  display: inline-flex;
  gap: .4em;
  font-size: .9375rem;
  color: var(--copper);
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.arrow-link:hover { border-bottom-color: currentColor; }
.on-dark .arrow-link { color: var(--on-dark); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 46px;
  padding: 0 22px;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn--sm { min-height: 38px; padding: 0 16px; font-size: .875rem; }
.btn--primary { background: var(--paper); color: var(--gf-primary); }
.btn--primary:hover { background: #fff; }
.btn--ghost { border-color: rgba(255, 255, 255, .38); color: #fff; }
.btn--ghost:hover { background: #fff; border-color: #fff; color: var(--gf-primary); }
.btn--line { border-color: var(--gf-primary); color: var(--gf-primary); background: transparent; }
.btn--line:hover { background: var(--gf-primary); color: #fff; }
.btn--dark { background: var(--gf-primary); color: #fff; }
.btn--dark:hover { background: #24343F; }
.btn__plain-arrow { font-family: var(--font-body); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Kickers, pills, section headers ---------- */
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .6875rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.on-dark .kicker { color: var(--on-dark-dim); }
.reg { flex: none; width: 13px; height: 13px; background: var(--reg) center / contain no-repeat; }

.pill {
  display: inline-block;
  padding: 7px 15px;
  font-size: .6875rem;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: #fff;
  border-radius: var(--radius);
}
.pill--warm { color: var(--copper); box-shadow: inset 0 0 0 1px rgba(23, 35, 44, .22); }
.pill--cool { color: var(--gf-primary); box-shadow: inset 0 0 0 1px rgba(23, 35, 44, .22); }

.section { padding-block: clamp(56px, 7.4vw, 108px); }
.section--panel { background: var(--paper); }
.sec-head { max-width: 780px; margin-bottom: clamp(26px, 3.2vw, 40px); }
.sec-head h2 { margin-top: 18px; }
.sec-lead { margin-top: 16px; color: var(--muted); font-size: 1.0625rem; max-width: 66ch; }
.statement {
  max-width: 21em;
  font-size: clamp(1.95rem, 4.5vw, 4.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--gf-primary);
}

/* ---------- The page transition (assets/gf-transition.js) ---------- */
.gf-wipe { position: fixed; inset: 0; z-index: 1000; display: none; background: var(--wipe-bg); }
.gf-wipe.is-on, html.gf-arriving .gf-wipe { display: block; }
html.gf-arriving .gf-wipe:not(.is-on) { animation: gf-wipe-lift 0s 6s forwards; } /* if the script never runs, the page still shows */
@keyframes gf-wipe-lift { to { visibility: hidden; } }
.gf-wipe svg { position: absolute; left: 50%; top: 50%; width: var(--wipe-mark-w); height: var(--wipe-mark-h); transform: translate(-50%, -50%); color: var(--wipe-ink); opacity: 0; }
html.gf-typing .hero__top, html.gf-typing .hero .here, html.gf-typing .hero__main > :not(h1), html.gf-typing .hero__aside { opacity: 0; }
html.gf-typed .hero__top, html.gf-typed .hero .here, html.gf-typed .hero__main > :not(h1), html.gf-typed .hero__aside { opacity: 1; transition: opacity .3s; }

/* ---------- Heroes: flat and dark, with nothing ruled under them ---------- */
.hero, .cta {
  position: relative;
  background: var(--gf-primary);
}
.hero { padding-block: 22px clamp(48px, 6vw, 84px); }
.hero__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: clamp(36px, 5vw, 64px); }
.hero > .wrap > .hero__grid:first-child { margin-top: clamp(40px, 5vw, 72px); }
.machine-back { display: inline-flex; align-items: center; gap: .5em; min-height: 34px; padding: 0 14px 0 14px; font-size: .84375rem; color: #fff; background: var(--glass-light); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px); transition: background .15s; }
.machine-back:hover { background: var(--glass-light-hover); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
}
.hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.hero__grid--solo .hero__main { max-width: 900px; }
.hero h1 { margin-top: 22px; }
.hero__lead { margin: 22px 0 28px; max-width: 58ch; font-size: 1.0625rem; }
.hero__main > :last-child { margin-bottom: 0; }
.hero__aside { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; min-width: 0; }

/* The processes a service page covers, listed in its hero */
.pindex { border-top: 1px solid var(--on-dark-rule); }
.pindex li { border-bottom: 1px solid var(--on-dark-rule); }
.pindex a { display: flex; align-items: baseline; gap: 16px; padding: 12px 2px; font-size: 1.0625rem; line-height: 1.25; color: var(--on-dark); transition: color .15s, padding .2s; }
.pindex a:hover { color: #fff; padding-left: 10px; }
.pindex__n { flex: none; width: 1.6em; font-family: var(--font-readout); font-size: .75rem; color: var(--on-dark-dim); }

/* Fact tiles: the proposal's key-fact design */
.facts { display: grid; gap: 8px; counter-reset: fact; }
.facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Text still to be written stays laid out, so nothing moves as it appears */
.gf-unwritten { color: transparent; }
@media print { .gf-unwritten { color: inherit; } .gf-head { display: none; } }
/* Until gf-readout.js takes them over, headers stay unwritten. If it never runs, they show anyway. */
@keyframes gf-hold { from, to { visibility: hidden; } }
@media (prefers-reduced-motion: no-preference) {
  html.gf-js:not(.gf-read-on) main :is(h1, h2, h3, .fact__value, .glance-number__value) { animation: gf-hold 1.2s; }
}
/* What runs ahead of a value as it prints: Datatype's charts, set on the text's baseline without taking up any room.
   Drawn faint, so the charts read as a pass of light ahead of the text rather than as bold type. */
.gf-head { position: absolute; font-family: var(--font-readout); font-size: 1em; font-weight: 400; font-style: normal; font-feature-settings: normal; font-variant-ligatures: normal; font-variant-numeric: normal; line-height: 1; letter-spacing: 0; text-transform: none; text-align: left; white-space: pre; color: currentColor; opacity: .38; pointer-events: none; }
.gf-head--line { font-weight: 300; }
/* A character cell mid-change on a pinned label: a Datatype chart glyph or a stray letter, drawn faint */
.gf-glyph { font-family: var(--font-readout); font-weight: 400; font-feature-settings: normal; font-variant-ligatures: normal; letter-spacing: 0; opacity: .55; }

/* The fact squares: a cut corner, an index in the readout face, and a registration mark like the ones on a mask */
.fact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px 16px 16px 18px;
  counter-increment: fact;
  background: var(--paper);
  clip-path: polygon(var(--gf-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--gf-cut));
}
.fact::before { content: counter(fact, decimal-leading-zero); position: absolute; right: 12px; top: 12px; font-family: var(--font-readout); font-size: .6875rem; line-height: 1; color: var(--muted); }
.fact::after { content: "+"; position: absolute; right: 12px; bottom: 10px; font-family: var(--font-readout); font-size: .6875rem; line-height: 1; color: var(--copper); }
.fact__label { padding-right: 24px; font-size: .65625rem; line-height: 1.25; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fact__value { font-size: clamp(1.45rem, 2.1vw, 2rem); font-weight: 400; line-height: 1.08; color: var(--gf-primary); }
.fact__note { font-size: .75rem; line-height: 1.4; color: var(--muted); }

/* ---------- Service cards ---------- */
/* A pool of light on a floor of dots receding toward a horizon, with the cards hovering over it and their shadows falling on it */
.coverage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(40px, 5vw, 72px) clamp(72px, 8vw, 120px);
  background:
    url("assets/coverage-floor.svg") center bottom / max(100%, 1100px) auto no-repeat,
    radial-gradient(115% 85% at 50% 46%, #fbfbf8 0%, #ecebe5 50%, #c8c5bb 100%);
}
.group { margin-top: clamp(26px, 3vw, 36px); }
.group:first-child { margin-top: 0; }
.group__head { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 20px; }
.group__sub { font-size: .875rem; color: var(--muted); text-align: center; }
.caps { --cols: 10; --gap: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.cap {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 7px 16px;
  text-align: center;
  background: #fff;
  color: var(--gf-primary);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(23, 35, 44, .06), 0 12px 20px -8px rgba(23, 35, 44, .18), 0 40px 46px -22px rgba(23, 35, 44, .42);
  transition: background .16s, color .16s, border-color .16s, transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s;
  animation: cap-in .5s cubic-bezier(.2, .7, .2, 1) both, cap-float 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * 34ms), calc(var(--i) * -1.37s);
}
@keyframes cap-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes cap-float { 0%, 100% { translate: 0 2px; } 50% { translate: 0 -3px; } }
.cap__name { font-size: .84375rem; font-weight: 400; line-height: 1.22; }
.cap__spec { margin-top: 7px; font-size: .6875rem; line-height: 1.34; color: var(--muted); transition: color .16s; }
.cap:hover { background: var(--gf-primary); border-color: var(--gf-primary); color: #fff; transform: translateY(-6px); box-shadow: 0 1px 2px rgba(23, 35, 44, .06), 0 18px 26px -8px rgba(23, 35, 44, .24), 0 56px 56px -24px rgba(23, 35, 44, .46); }
.cap:hover .cap__spec { color: var(--on-dark); }
/* A machine from the cleanroom, on its own, on each card */
.cap__machine { display: block; align-self: stretch; aspect-ratio: 4 / 3; min-width: 0; margin: 0 0 8px; }
.cap__machine img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- Tables: the proposal's bands and hairlines ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; }
.spec { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .875rem; line-height: 1.5; }
.spec th {
  padding: 13px 16px;
  text-align: left;
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--gf-primary);
  color: #fff;
}
.spec td { padding: 13px 16px; border-top: 1px solid var(--rule); vertical-align: top; color: var(--muted); }
.spec tr:not(.band) td:first-child { font-size: .9375rem; color: var(--gf-primary); }
.spec tbody tr:first-child td { border-top: 0; }
.spec--compare td:last-child { background: var(--copper-pale); }
.spec--compare th:last-child { color: var(--on-dark); }

.faqs { margin-top: 28px; border-top: 1px solid var(--rule); }
.faq { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-size: 1.0625rem;
  color: var(--gf-primary);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--copper); }
.faq[open] summary::after { content: "–"; }
.faq p { padding-bottom: 18px; max-width: 72ch; color: var(--muted); font-size: .9375rem; }

.fig { margin: 0; }
.fig figcaption { margin-top: 10px; font-size: .78125rem; color: var(--muted); }

/* ---------- Home ---------- */
/* A window-high stage, pinned while the scroll room under it runs the zoom. The timeline takes the first 195vh of it; the
   last 15vh is only room for a fast wheel to run into before the flicker holds the scroll (PIN_VH in cleanroom.js). */
.cleanroom { --scroll-length: 210vh; --safe-bottom: calc(100lvh - 100svh + clamp(16px, 2.4vw, 32px)); position: relative; height: calc(100lvh + var(--scroll-length)); margin-top: calc(-1 * var(--header-h)); background: var(--paper); }
/* Landed on the services, by the flicker or a link: no scroll room, so the cleanroom is one window at x1.0 directly
   above them, and scrolling up from the services is ordinary scrolling */
.cleanroom.is-services { --scroll-length: 0px; }
.cleanroom__stage { position: sticky; top: 0; height: 100lvh; overflow: hidden; }
/* The flicker: the canvas holds the window by itself, over the page and under the header, while the page moves
   to the services behind it. Then the grey lifts off them. */
.cleanroom.is-covering .cleanroom__stage { z-index: 40; }
.cleanroom.is-covering canvas { position: fixed; inset: 0; }
/* The services, the section after the cleanroom. When the flicker lands, their top is the top of the window, under the header. */
.coverage--home { min-height: 100lvh; display: grid; align-content: center; padding-block: clamp(48px, 8vh, 96px) clamp(40px, 6vh, 80px); scroll-margin-top: calc(-1 * (var(--header-h) + 20px)); }
/* The Services overview's banner, in the home screen's voice: a statement in big Brass Mono capitals on the paper, centered over
   the cards like their labels, its second half quieter, and the line after it in plain type */
.ov-banner { display: grid; justify-items: center; gap: clamp(16px, 2vw, 24px); margin: 0 auto clamp(44px, 6vw, 88px); text-align: center; }
.ov-banner .kicker { margin: 0; }
.ov-banner__words { max-width: 24ch; font-family: var(--font-alt); font-weight: 400; font-feature-settings: normal; font-variant-ligatures: none; font-size: clamp(1.75rem, 3.6vw, 3.375rem); line-height: 1.04; letter-spacing: -.03em; text-transform: uppercase; color: var(--gf-primary); }
.ov-banner__lead { max-width: 52ch; margin: 0; font-size: 1.0625rem; color: var(--muted); }
.coverage--home:focus { outline: none; } /* it's focused only as where the Services link lands */
.coverage--home > .wrap { width: 90%; }
.coverage--home .caps { --cols: 9; }
/* ---------- The aligner, on its own page, mask-aligner.html (assets/aligner/aligner.js) ----------
   One window-high view, pinned behind everything in the wrapper. It starts as a floor of dots, the one that was once behind
   the home page's services. The run is empty scroll for its story to play out over. */
.aligner { position: relative; isolation: isolate; }
.aligner__view { position: sticky; top: 0; z-index: -1; display: none; height: 100lvh; margin-bottom: -100lvh; pointer-events: none; }
.aligner__view canvas { display: block; width: 100%; height: 100%; }
.aligner__run { display: none; }
.aligner.is-live .aligner__view { display: block; }
.aligner.is-live .aligner__run { display: block; height: 700lvh; }
.aligner.is-live .coverage--home { background: none; }
/* Paper fades into the aligner over a long, eased run, so the floor of dots has no edge at the top */
.aligner.is-live::after { content: ""; position: absolute; inset: -3px 0 auto; /* a few px up, over the canvas's top row */ z-index: -1; height: 45lvh; pointer-events: none;
  background: linear-gradient(rgb(245 245 241), rgb(245 245 241 / .92) 18%, rgb(245 245 241 / .72) 38%, rgb(245 245 241 / .42) 60%, rgb(245 245 241 / .16) 80%, rgb(245 245 241 / 0)); }

/* The paper of the cleanroom carries on into the top of the services, so the two read as one background */
.coverage--home::before { content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: 22%; background: linear-gradient(var(--paper), rgba(245, 245, 241, 0)); pointer-events: none; }

/* Two arrows at the bottom of the opening view skip the zoom. Quiet, floating, and gone once the cleanroom's been explored. */
.cleanroom__skip { position: absolute; left: 50%; bottom: calc(100% - 100lvh + var(--safe-bottom) + 42px); z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; color: var(--gf-primary); background: rgba(245, 245, 241, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(23, 35, 44, .14); opacity: .85; transition: opacity .3s; }
.cleanroom__skip:hover, .cleanroom__skip:focus-visible { opacity: 1; }
.cleanroom__skip svg { width: 18px; height: 17px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cleanroom__skip path:last-child { opacity: .45; transition: opacity .3s; }
.cleanroom__skip:hover path:last-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .cleanroom__skip svg { animation: skip-float 2.6s ease-in-out infinite; } }
@keyframes skip-float { 50% { transform: translateY(4px); } }
.cleanroom.is-focus .cleanroom__skip, .cleanroom.is-logo .cleanroom__skip, .cleanroom.is-flying .cleanroom__skip, .cleanroom.is-fallback .cleanroom__skip { opacity: 0; pointer-events: none; }

/* The statement, written large behind the island in the alt font, all caps, after Anduril's home page. cleanroom.js picks
   its size and place for the window, types it in, and later takes it away. It sits under the canvas, so the island stands
   in front of the words. The heading itself stays in the page for screen readers and the edit mode; what shows is drawn from it. */
.cleanroom__statement { position: absolute; inset: 0 0 auto; height: 100lvh; overflow: hidden; pointer-events: none; color: var(--gf-primary); }
.cleanroom__words { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cleanroom__type { position: absolute; inset: 0; font-family: var(--font-alt); font-weight: 400; font-feature-settings: normal; font-variant-ligatures: none; line-height: 1; white-space: pre; }
.cleanroom__type > span { position: absolute; left: 0; top: 0; }
.cleanroom__mark { position: absolute; left: 0; top: 0; overflow: visible; fill: none; stroke: currentColor; stroke-linejoin: miter; visibility: hidden; }
.cleanroom__mark path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.cleanroom canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100lvh; cursor: grab; }
.cleanroom canvas:active { cursor: grabbing; }
.cleanroom.is-logo canvas { cursor: default; }

/* The captions on the home screen: they fade as soon as the page starts to scroll */
.cleanroom__head { position: absolute; left: var(--gutter); bottom: calc(100% - 100lvh + var(--safe-bottom)); z-index: 1; opacity: var(--intro, 1); pointer-events: none; transition: opacity .25s; }
.cleanroom__hint { max-width: 16em; margin-top: 10px; font-size: .9375rem; line-height: 1.4; color: var(--muted); }
.cleanroom__head .coverage__more { margin-top: 8px; text-align: left; }
.cleanroom__head a { pointer-events: auto; }
.cleanroom.is-scrolled .cleanroom__head, .cleanroom.is-focus .cleanroom__head { visibility: hidden; }
.cleanroom.is-focus .cleanroom__head { opacity: 0; }
.cleanroom__label { position: fixed; left: 0; top: 0; z-index: 62; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 14px; font-size: .84375rem; line-height: 1.2; white-space: pre; background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: #fff; clip-path: polygon(var(--gf-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--gf-cut)); pointer-events: none; }
.cleanroom__label[hidden] { display: none; }
.cleanroom__label::before { content: ""; flex: none; width: 13px; height: 12px; background: currentColor; -webkit-mask: url("assets/gf-mark.svg") center / contain no-repeat; mask: url("assets/gf-mark.svg") center / contain no-repeat; }

/* The view controls: the rotation globe in the top corner, like the view gizmo in a 3D program, and a ruler for the zoom */
.cleanroom__hud { display: contents; }
.cleanroom__hud[hidden] { display: none; }
.cleanroom__orb, .cleanroom__zoom { position: absolute; right: var(--gutter); z-index: 2; transition: opacity .25s; }
.cleanroom.is-logo .cleanroom__orb, .cleanroom.is-logo .cleanroom__zoom, .cleanroom.is-flying .cleanroom__orb, .cleanroom.is-flying .cleanroom__zoom { opacity: 0; pointer-events: none; }
/* The orb is small and sits on top of the zoom ruler in the bottom corner, so the view controls keep to one place */
.cleanroom__orb { bottom: calc(100% - 100lvh + var(--safe-bottom) + 218px); display: block; width: 40px; height: 40px; padding: 0; background: none; border: 0; color: var(--gf-primary); cursor: grab; touch-action: none; }
.cleanroom__orb.is-held { cursor: grabbing; }
.cleanroom__ball { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; transition: scale .18s; }
.cleanroom__orb:hover .cleanroom__ball { scale: 1.05; }
.cleanroom__orb.is-held .cleanroom__ball { scale: .95; }
.cleanroom__ball svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cleanroom__ball circle { fill: rgba(255, 255, 255, .55); stroke: var(--gf-primary); stroke-width: .6; }
.cleanroom__orb-lines { fill: none; stroke: var(--gf-primary); stroke-width: .42; stroke-linecap: round; }
.cleanroom__orb-far { fill: none; stroke: var(--rule); stroke-width: .36; stroke-linecap: round; }
.cleanroom__orb-axis { fill: none; stroke: var(--copper); stroke-width: .6; stroke-linecap: round; }
.cleanroom__zoom { bottom: calc(100% - 100lvh + var(--safe-bottom)); display: grid; justify-items: end; width: 64px; }
.cleanroom__step { position: relative; width: 34px; height: 28px; padding: 0; background: none; border: 0; color: var(--gf-primary); cursor: pointer; }
.cleanroom__step::before, .cleanroom__step[data-zoom="in"]::after { content: ""; position: absolute; right: 0; top: 50%; width: 13px; height: 1.5px; margin-top: -.75px; background: currentColor; transition: width .15s; }
.cleanroom__step[data-zoom="in"]::after { transform: rotate(90deg); }
.cleanroom__step:hover::before { width: 19px; }
.cleanroom__track { position: relative; width: 100%; height: 150px; cursor: ns-resize; touch-action: none; }
.cleanroom__scale { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cleanroom__scale path { fill: none; stroke: var(--gf-primary); stroke-width: 1; }
.cleanroom__thumb { position: absolute; right: 0; bottom: 12px; width: 44px; height: 3px; margin-bottom: -1.5px; background: var(--gf-primary); }
.cleanroom__readout { position: absolute; right: 52px; bottom: 12px; margin-bottom: -.6em; font-family: var(--font-readout); font-size: 1.125rem; line-height: 1.2; white-space: nowrap; color: var(--gf-primary); pointer-events: none; }
.cleanroom__orb:focus-visible, .cleanroom__step:focus-visible, .cleanroom__track:focus-visible, .cleanroom__back:focus-visible { outline: 2px solid var(--gf-primary); outline-offset: 2px; }

/* The start-up count, the first time the home page loads in a visit */
.cleanroom__init { position: absolute; inset: 0 0 auto; height: 100lvh; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 10px; background: var(--paper); color: var(--gf-primary); transition: opacity .35s, visibility .35s; }
.gf-boot { display: grid; gap: clamp(10px, 1.4vw, 18px); width: min(100vw - 2 * var(--gutter), 34rem); font-family: var(--font-readout); font-feature-settings: normal; font-variant-ligatures: normal; color: var(--gf-primary); }
.gf-boot p { margin: 0; }
.gf-boot__cmd { min-height: 1.3em; font-size: .9375rem; line-height: 1.3; color: var(--muted); }
.gf-boot__log { min-height: 7.5em; font-size: .9375rem; line-height: 1.5; white-space: pre; }
.gf-boot__meter { display: flex; align-items: baseline; gap: .28em; font-size: clamp(2.75rem, 6vw, 5rem); line-height: 1.1; white-space: pre; }
.gf-boot__pie, .gf-boot__bars { display: inline-block; }
.gf-boot__bars { margin-left: .2em; font-size: .6em; color: var(--muted); }
html.gf-booted .cleanroom__init, .cleanroom.is-booted .cleanroom__init, .cleanroom.is-fallback .cleanroom__init { visibility: hidden; opacity: 0; }
html.gf-booted:not(.gf-boot-done) .cleanroom__init { transition: none; }

/* With a machine in focus, a caption says what can be done with it */
.cleanroom.is-focus canvas { cursor: zoom-out; }
.cleanroom.is-focus canvas:active { cursor: grabbing; }
.cleanroom__focus { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + clamp(16px, 2.4vw, 32px)); z-index: 3; opacity: 0; pointer-events: none; transition: opacity .25s; }
.cleanroom.is-settled .cleanroom__focus { opacity: 1; }
.cleanroom__focus-card { display: inline-block; padding: 14px 18px 16px; background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); clip-path: polygon(var(--gf-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--gf-cut)); }
.cleanroom__focus-name { font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.15; color: #fff; }
.cleanroom__focus-hint { max-width: 24em; margin-top: 8px; font-size: .9375rem; line-height: 1.4; color: var(--on-dark); }
.cleanroom__back { margin-top: 14px; min-height: 34px; padding: 0 14px; font-size: .84375rem; color: #fff; background: var(--glass-light); border: 0; clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px); cursor: pointer; visibility: hidden; transition: background .15s; }
.cleanroom__back:hover { background: var(--glass-light-hover); }
.cleanroom.is-settled .cleanroom__back { visibility: visible; pointer-events: auto; }

/* A flight goes on from there: the header steps aside, then the page transition carries it into the page */
body:has(.cleanroom.is-flying) .site-header { opacity: 0; pointer-events: none; transition: opacity .25s; }

/* Plain links: for screen readers and keyboards always, and for everyone if the 3D can't load */
.cleanroom__links { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cleanroom__links:focus-within, .cleanroom.is-fallback .cleanroom__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  width: 100%;
  height: auto;
  padding: 20px var(--gutter);
  overflow: visible;
  clip-path: none;
  white-space: normal;
  background: var(--paper);
}
.cleanroom__links:focus-within { position: fixed; left: 0; bottom: 0; z-index: 49; }
.cleanroom.is-fallback .cleanroom__links { position: static; }
.cleanroom.is-fallback { height: auto; margin-top: 0; }
.cleanroom.is-fallback .cleanroom__stage { position: static; height: auto; overflow: visible; }
.cleanroom.is-fallback canvas, .cleanroom.is-fallback .cleanroom__hud, .cleanroom.is-fallback .cleanroom__hint { display: none; }
.cleanroom.is-fallback .cleanroom__head { position: static; padding: clamp(32px, 4.4vw, 60px) var(--gutter) 0; }

/* ---------- The pages after the cleanroom: about GF, the services, cooling, GF Process Studio, membership ----------
   On the cleanroom's paper: the words on the left, and on the right a stage pinned with a figure for each page. Between two
   pages every line of one figure flies into its place in the next, as on the service pages (assets/stage/stage-lines.js).
   A page is a little under a window tall, so the next is close behind the one being read. The first also starts under
   the banner, since the zoom's flicker lands with its top at the top of the window.
   Each is headed the way the statement behind the cleanroom is set: Brass Mono capitals at their own spacing, a cap and a
   third apart (0.717em caps), its second half quieter on a line of its own. Under it, what the page is in plain type, a
   line of small capitals like the words either side of the statement's mark, and where to go.
   The header's size: 10.2% of the words' column fits 17 letters (0.567em each), the longer halves, on a line. Never
   taller than the window allows. */
.briefs { position: relative; background: var(--paper); scroll-margin-top: calc(-1 * (var(--header-h) + 20px)); }
.briefs__layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 72px); }
.briefs__pages { grid-column: 1; grid-row: 1; min-width: 0; container-type: inline-size; }
.briefs .stage { grid-column: 2; grid-row: 1; background: none; }
.briefs .stage__pin { top: var(--header-h); height: calc(100vh - var(--header-h)); }
.briefs .stage__pin::before { display: none; }
.brief { display: grid; align-content: center; min-height: 80svh; padding-block: clamp(20px, 4vh, 44px); }
.brief:first-child { min-height: calc(80svh + var(--header-h)); padding-top: calc(var(--header-h) + clamp(20px, 4vh, 44px)); }
.brief__inner { display: grid; justify-items: start; }
.brief .kicker { margin: 0 0 clamp(18px, 2.8vh, 30px); }
.brief__words { font-family: var(--font-alt); font-weight: 400; font-feature-settings: normal; font-variant-ligatures: none; font-size: min(10.2cqi, 13svh, 6rem); line-height: .93; letter-spacing: 0; text-transform: uppercase; color: var(--gf-primary); }
.brief__words .dim { display: block; }
.brief__lead { max-width: 54ch; margin-top: clamp(22px, 3.6vh, 40px); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.55; text-wrap: pretty; color: var(--muted); }
/* The small capitals: names with a slash between them, kept whole, the slash staying with the name before it */
.brief__line { max-width: min(100%, 100ch); margin-top: clamp(18px, 2.8vh, 28px); font-family: var(--font-alt); font-feature-settings: normal; font-variant-ligatures: none; font-size: clamp(.75rem, .95vw, .875rem); line-height: 2; word-spacing: .25em; text-transform: uppercase; text-wrap: balance; color: var(--muted); }
.brief__line li { display: inline; white-space: nowrap; word-spacing: normal; }
.brief__line li:not(:last-child)::after { content: "/"; margin-left: .82em; opacity: .55; }
.brief__line a { padding-block: 5px; color: var(--gf-primary); border-bottom: 1px solid transparent; transition: border-color .15s; }
.brief__line a:hover { border-bottom-color: currentColor; }
.brief__links { margin-top: clamp(26px, 4.2vh, 46px); }
/* Too narrow for the two columns: the stage is a band pinned under the banner, and the pages pass up under it */
@media (max-width: 899px) {
  .briefs__layout { display: flex; flex-direction: column; width: 100%; }
  .briefs .stage { order: -1; position: sticky; top: var(--header-h); z-index: 2; height: min(32svh, 290px); background: var(--paper); }
  .briefs .stage__pin { position: relative; top: 0; height: 100%; }
  .briefs__pages { width: 86.6%; margin-inline: auto; }
  .brief { min-height: 0; padding-block: clamp(40px, 8svh, 72px); }
  .brief:first-child { min-height: 0; }
}


.cool-band { background: var(--gf-primary); }
.cool-band__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.cool-band h2 { margin-top: 18px; }
.cool-band__tag { margin: 14px 0 16px; font-size: 1.125rem; color: var(--on-dark); }
.cool-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px 20px;
  background: #fff;
  color: var(--ink);
  clip-path: polygon(var(--gf-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--gf-cut));
  transition: background .16s;
}
.cool-card__art { display: block; aspect-ratio: 4 / 3; margin: 0 -8px 4px; }
.cool-card__art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cool-card__name { padding-right: 18px; font-size: 1.1875rem; line-height: 1.18; letter-spacing: -.01em; color: var(--gf-primary); }
.cool-card__spec { font-size: .8125rem; line-height: 1.4; color: var(--muted); }
.cool-card__go { position: absolute; top: 14px; right: 16px; font-family: var(--font-head); font-size: 1.125rem; color: var(--copper); transition: transform .16s; }
.cool-card:hover { background: var(--paper); }
.cool-card:hover .cool-card__go { transform: translateX(3px); }

/* ---------- Quote form and footer ---------- */
.cta { padding-block: clamp(56px, 7vw, 100px); }
.cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); }
.cta h2 { margin: 18px 0 18px; }
.cta__list { margin-top: 22px; border-top: 1px solid var(--on-dark-rule); }
.cta__list li { padding: 10px 0; font-size: .9375rem; border-bottom: 1px solid var(--on-dark-rule); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
.form label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form label span { font-size: .75rem; letter-spacing: .03em; color: var(--on-dark); }
.form__full { grid-column: 1 / -1; }
.form input, .form select, .form textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  font-feature-settings: inherit;
  font-size: .9375rem;
  color: #fff;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--on-dark-rule);
  border-radius: var(--radius);
  transition: border-color .15s, background .15s;
}
.form textarea { resize: vertical; line-height: 1.5; }
.form select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath fill='%23CCCFD1' d='M0 0h10L5 5z'/%3E%3C/svg%3E");
  background-position: right 13px center;
  background-size: 10px 5px;
  background-repeat: no-repeat;
}
.form select option { color: var(--gf-primary); background: #fff; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--on-dark); background-color: rgba(255, 255, 255, .08); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.form__status { font-size: .84375rem; color: var(--on-dark); }

.site-footer { background: var(--gf-primary); border-top: 1px solid var(--on-dark-rule); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(230px, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: 32px clamp(20px, 3vw, 44px);
  padding-block: clamp(44px, 5vw, 68px) clamp(36px, 4vw, 52px);
}
.footer__brand p { margin-top: 12px; font-size: .875rem; }
.footer__brand .footer__contact { margin-top: 18px; color: var(--on-dark-dim); }
.footer__label { min-height: 1.2em; margin-bottom: 12px; font-size: .6875rem; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; color: var(--on-dark-dim); }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; }
.footer__col a { padding: 4px 0; font-size: .875rem; line-height: 1.35; color: var(--on-dark); transition: color .12s; }
.footer__col a:hover { color: #fff; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px 22px;
  font-size: .78125rem;
  color: var(--on-dark-dim);
  border-top: 1px solid var(--on-dark-rule);
}
.footer__bottom a:hover { color: #fff; }

/* ---------- Member login ---------- */
.header-login { display: inline-flex; align-items: center; height: 40px; padding: 0 4px 0 clamp(6px, 1vw, 16px); font-size: 1rem; color: var(--on-dark); white-space: nowrap; }
.header-login:hover { color: #fff; }
.login { min-height: calc(100svh - var(--header-h) - 200px); }
.login__inner { display: grid; justify-items: start; gap: 16px; max-width: 460px; }
.form--light label span { color: var(--muted); }
.form--light input, .form--light textarea { color: var(--gf-primary); background: #fff; border: 1px solid var(--rule); }
.form--light input:focus, .form--light textarea:focus { border-color: var(--gf-primary); }
.form--light .form__status { color: var(--muted); }
.login-form { width: 100%; }

/* ---------- GF Membership ---------- */
.membership-section { scroll-margin-top: var(--header-h); }
.membership-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.membership-copy { display: grid; justify-items: start; gap: 20px; }
.membership-copy > p { max-width: 48ch; font-size: 1.0625rem; line-height: 1.6; }
.membership-copy .membership-note { font-size: .875rem; color: var(--muted); }
.membership-copy .actions { margin-top: 4px; }
.membership-route { padding: clamp(24px, 3vw, 44px); border: 1px solid var(--rule); background: var(--paper); }
.membership-route__label { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.membership-route ol { margin-block: 24px; }
.membership-route li { display: flex; align-items: baseline; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--rule); font-size: 1.125rem; }
.membership-route li span { font-family: var(--font-readout); font-size: .875rem; color: var(--copper); }
.membership-route > p:last-child, .membership-access > p { color: var(--muted); }
.membership-access { border-left: 1px solid var(--rule); padding-left: clamp(24px, 4vw, 64px); }
@media (max-width: 760px) {
  .membership-grid { grid-template-columns: minmax(0, 1fr); }
  .membership-access { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
}

/* ---------- A column of reading text ---------- */
.reading { display: grid; justify-items: start; gap: 16px; max-width: 760px; margin-inline: 6.7%; }
.reading p { font-size: 1.0625rem; line-height: 1.55; }

/* ---------- About ---------- */
.about { display: grid; gap: 26px; }
.about .statement { max-width: 26em; font-size: clamp(1.5rem, 2.7vw, 2.4rem); line-height: 1.22; }
.about-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 12px; }
.about-points li { display: grid; align-content: start; gap: 8px; padding-left: 24px; background: var(--reg) 0 .3em / 13px no-repeat; }
.about-point__name { font-size: 1.1875rem; line-height: 1.2; color: var(--gf-primary); }
.about-point__text { font-size: .9375rem; line-height: 1.5; color: var(--muted); }

/* ---------- Process notes: old typed papers, one under another (assets/papers/papers.js) ---------- */
.papers-section { padding-top: 0; background: var(--gf-primary); overflow-x: clip; }
.papers { display: grid; justify-items: center; gap: clamp(28px, 4vw, 56px); }
/* US letter. Blank paper until the page is drawn; papers.js tilts each one a little */
.paper { width: min(100%, 600px); aspect-ratio: 850 / 1100; background: #e2dfd6; }
.paper img { display: block; width: 100%; height: 100%; }

/* ---------- The flow map: a pipeline, left to right, whose middle repeats ---------- */
.phases { --node: 66px; --node-gap: 10px; --lane: 44px; --flow-ink: var(--gf-primary); --flow-band: var(--paper); --flow-label: var(--gf-primary); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--lane); row-gap: 18px; }
.phases--flow { --lane: 30px; --node: 72px; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto auto; }
.phase { position: relative; display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
.phase__tag { display: inline-flex; align-items: center; gap: 9px; width: fit-content; padding: 6px 12px 6px 13px; font-family: var(--font-head); font-feature-settings: var(--features-head); font-size: .84375rem; line-height: 1.2; color: #fff; background: var(--glass-dark); clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px); }
.phase__n { font-family: var(--font-readout); font-size: .6875rem; color: var(--on-dark-dim); }
.phase__line { margin-top: 10px; font-size: .84375rem; line-height: 1.4; color: var(--muted); }
.phase__nodes { position: relative; display: grid; grid-auto-rows: var(--node); gap: var(--node-gap); align-content: start; }
.phase__node { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 8px 0 4px; background: #fff; border: 1px solid var(--flow-ink); transition: background .15s, color .15s; }
.phase__node:hover { color: #fff; background: var(--gf-primary); }
.phase__machine { flex: none; width: 58px; height: 48px; }
.phase__machine img { display: block; width: 100%; height: 100%; object-fit: contain; }
.phase__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.phase__name { font-family: var(--font-head); font-feature-settings: var(--features-head); font-size: .84375rem; line-height: 1.15; }
.phase__spec { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .65625rem; line-height: 1.25; color: var(--muted); }
.phase__node:hover .phase__spec { color: var(--on-dark); }
/* A stub out of each node and into the next column's nodes, joined by a vertical bus in the lane between */
.phase:not(:last-of-type):not(.phase--end) .phase__node::after, .phase:not(:first-child) .phase__node::before { content: ""; position: absolute; top: 50%; width: calc(var(--lane) / 2); border-top: 1px solid var(--flow-ink); }
.phase:not(:last-of-type):not(.phase--end) .phase__node::after { left: 100%; }
.phase:not(:first-child) .phase__node::before { right: 100%; }
.phase:not(:last-of-type):not(.phase--end) .phase__nodes::after { content: ""; position: absolute; left: calc(100% + var(--lane) / 2); top: calc(var(--node) / 2); height: calc((var(--rows) - 1) * (var(--node) + var(--node-gap))); border-left: 1px solid var(--flow-ink); }
/* The loop: the steps a flow repeats for every layer sit on a paper band, with a return path running back under them */
.phase--loop::before { content: ""; position: absolute; z-index: -1; inset: -14px calc(var(--lane) / -2) -10px; background: var(--flow-band); }
.phases--flow { isolation: isolate; }
.phase--loop:first-of-type::before, .phase--loop + .phase:not(.phase--loop)::before { content: none; }
.phases__loop { position: relative; grid-column: var(--from) / var(--to); grid-row: 3; height: 58px; margin: 0 calc(var(--lane) / -2); background: var(--flow-band); }
.phases__return { display: none; }
.phases__loop::before { content: ""; position: absolute; left: calc((100% - 4 * var(--lane)) / 8 + var(--lane) / 2); right: calc((100% - 4 * var(--lane)) / 8 + var(--lane) / 2); top: -10px; bottom: 22px; border: 1px solid var(--flow-ink); border-top: 0; border-radius: 0 0 14px 14px; }
.phases__loop::after { content: ""; position: absolute; left: calc((100% - 4 * var(--lane)) / 8 + var(--lane) / 2 - 4px); top: -12px; border: 4.5px solid transparent; border-top: 0; border-bottom: 8px solid var(--flow-ink); }
.phases__loop-label { position: absolute; left: 50%; bottom: 22px; transform: translate(-50%, 50%); padding: 2px 12px; font-family: var(--font-readout); font-size: .8125rem; white-space: nowrap; color: var(--flow-label); background: var(--flow-band); }

/* ---------- The same map at the head of each service page: you are here, and every other service a click away ---------- */
/* On the dark hero the boxes are glass and the lines and band go pale. This service's box is lit white, as every box is on
   the Services page, and so is its step's label. Folded behind a bar on narrower screens (script.js) */
.here { margin-bottom: clamp(44px, 4.4vw, 64px); }
.hero__top:has(+ .here) { margin-bottom: clamp(28px, 2.8vw, 40px); }
.here__toggle { display: none; }
.phases--here {
  --node: 64px;
  --node-gap: 8px;
  --flow-ink: color-mix(in srgb, #fff 30%, var(--gf-primary));
  --flow-band: color-mix(in srgb, #fff 5%, var(--gf-primary));
  --flow-label: var(--on-dark);
}
.phases--here .phase__tag { background: var(--glass-light); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.phases--here .phase__line { color: var(--on-dark-dim); }
.phases--here .phase__node { color: #fff; background: color-mix(in srgb, #fff 7%, var(--gf-primary)); }
.phases--here .phase__spec { color: var(--on-dark-dim); }
.phases--here a.phase__node:hover { color: #fff; background: color-mix(in srgb, #fff 17%, var(--gf-primary)); }
.phases--here a.phase__node:hover .phase__spec { color: var(--on-dark); }
.phases--here .phase__node.is-here { color: var(--gf-primary); background: #fff; border-color: #fff; }
.phases--here .phase__node.is-here .phase__spec { color: var(--muted); }
.phases--here .phase.is-here .phase__tag { color: var(--gf-primary); background: #fff; }
.phases--here .phase.is-here .phase__n { color: var(--muted); }
/* The GF mark in the map's bottom-right corner, in the empty space under Finish */
.phases__mark { grid-column: -2 / -1; grid-row: 3; align-self: end; justify-self: end; display: block; height: 46px; width: auto; aspect-ratio: 876.94 / 832.62; color: #fff; }
.phases__mark svg { display: block; width: 100%; height: 100%; }

/* ---------- Service pages: the processes on the left, the stage on the right ---------- */
.procs-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .86fr); background: #fff; }
.procs { grid-column: 1; grid-row: 1; min-width: 0; padding: clamp(8px, 2vw, 24px) clamp(28px, 4vw, 64px) clamp(56px, 6vw, 96px) max(var(--gutter), calc((100vw - var(--max)) / 2)); }
.stage { grid-column: 2; grid-row: 1; position: relative; background: var(--paper); }
.stage__pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow: hidden; }
/* A pool of light for the model to stand in, as on the service cards. Its floor of dots is drawn in 3D, so it turns with the model. */
.stage__pin::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 52% at 50% 50%, #fefefc 0%, var(--paper) 58%, #e6e4dd 100%); }
.stage__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.stage__label {
  position: absolute;
  left: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  display: grid;
  gap: 4px;
  max-width: calc(100% - 2 * clamp(16px, 2vw, 28px));
  padding: 12px 18px 14px 16px;
  color: #fff;
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  clip-path: polygon(var(--gf-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--gf-cut));
  overflow: hidden;
  transition: opacity .3s;
}
.stage__label:has(.stage__name:empty) { opacity: 0; }
.stage__n { font-family: var(--font-readout); font-size: .75rem; line-height: 1; color: var(--on-dark-dim); }
.stage__name { font-size: 1.125rem; line-height: 1.2; white-space: nowrap; overflow: hidden; }
.stage__readout { min-height: 1.3em; font-family: var(--font-readout); font-size: .875rem; line-height: 1.3; color: var(--on-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage__readout:empty { display: none; }

.proc { padding-block: clamp(40px, 5vw, 72px); scroll-margin-top: calc(var(--header-h) + 8px); }
.proc + .proc { border-top: 1px solid var(--rule); }
.proc__head { display: grid; gap: 12px; margin-bottom: 28px; }
.proc__n { font-family: var(--font-readout); font-size: .875rem; line-height: 1; color: var(--copper); }
.proc__head h2 { font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1.1; }
.proc__summary { max-width: 62ch; font-size: 1.0625rem; line-height: 1.55; color: var(--muted); }
.proc__pending { font-size: .9375rem; color: var(--muted); }

.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin: 0; border-top: 1px solid var(--gf-primary); }
.specs__row { display: grid; grid-template-columns: minmax(96px, .62fr) minmax(0, 1.38fr); gap: 14px; padding: 12px 0 13px; border-bottom: 1px solid var(--rule); }
.specs dt { padding-top: 4px; font-size: .65625rem; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.specs dd { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--gf-primary); }

/* Materials, each with its thickness window on a log scale shared down the table */
.mats { margin-top: 30px; overflow-x: auto; }
.mats__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .875rem; line-height: 1.45; }
.mats__table thead th { padding: 0 16px 10px 0; text-align: left; font-size: .65625rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); vertical-align: bottom; border-bottom: 1px solid var(--gf-primary); }
.mats__table tbody th { width: 72px; padding: 11px 16px 11px 0; text-align: left; font-size: 1rem; font-weight: 400; line-height: 1.3; color: var(--gf-primary); vertical-align: top; border-bottom: 1px solid var(--rule); }
.mats__table td { padding: 11px 16px 11px 0; vertical-align: top; border-bottom: 1px solid var(--rule); }
.mats__table td:last-child, .mats__table th:last-child { padding-right: 0; }
.mats__axis-head { width: 40%; }
.mats__label { display: block; }
.mats__axis { position: relative; display: block; height: 1.1em; margin-top: 8px; }
.mats__axis span { position: absolute; left: calc(var(--x) * 100%); transform: translateX(-50%); font-family: var(--font-readout); font-size: .6875rem; letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--muted); }
.mats__axis span:first-child { transform: none; }
.mats__axis span:last-child { transform: translateX(-100%); }
.mats__track { position: relative; display: block; height: 10px; margin: 5px 0 7px; border-bottom: 1px solid var(--rule); }
.tbar { position: absolute; left: calc(var(--a) * 100%); right: calc((1 - var(--b)) * 100%); bottom: -2px; height: 5px; background: var(--gf-primary); transform-origin: left; }
.tbar::before, .tbar::after { content: ""; position: absolute; bottom: 0; width: 1.5px; height: 12px; background: var(--copper); }
.tbar::before { left: 0; }
.tbar::after { right: 0; }
.mats__nums { display: block; font-variant-numeric: tabular-nums; color: var(--gf-primary); }
.mats__note { font-size: .8125rem; color: var(--muted); }
.mats__role { display: block; color: var(--gf-primary); }
html.gf-scrub .tbar { transform: scaleX(var(--p, 0)); }
}

.proc__limits { margin-top: 30px; }
.proc__sub { margin-bottom: 12px; font-size: .65625rem; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.limits { display: grid; gap: 10px; }
.limits li { max-width: 68ch; padding-left: 24px; font-size: .9375rem; line-height: 1.5; background: var(--reg) 0 .32em / 13px no-repeat; }
.proc__pairs { margin-top: 24px; font-size: .875rem; color: var(--muted); }
.proc__pairs a { color: var(--gf-primary); border-bottom: 1px solid var(--rule); transition: border-color .15s; }
.proc__pairs a:hover { border-bottom-color: currentColor; }

/* Citations: small copper numbers that lead to the page's list of sources */
.cite { margin-left: 2px; font-family: var(--font-readout); font-size: .6875em; line-height: 0; letter-spacing: 0; vertical-align: super; color: var(--copper); white-space: nowrap; }
.cite a:hover { text-decoration: underline; }
.cite__sep { margin-right: 1px; }
.refs-section { padding-block: clamp(44px, 5vw, 72px); background: var(--paper); }
.refs { display: grid; gap: 9px; max-width: 1040px; margin-top: 22px; font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.refs li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; scroll-margin-top: calc(var(--header-h) + 24px); }
.refs__n { font-family: var(--font-readout); color: var(--copper); }
.refs a { color: var(--gf-primary); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 2px; }
.refs a:hover { text-decoration-color: currentColor; }

/* ---------- Liquid Cooling articles: a reading column, with figures that run wider ---------- */
.hero--article .hero__grid { align-items: end; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; margin: 0; }
.stat { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--on-dark-rule); }
.stat__label { order: 2; font-size: .8125rem; line-height: 1.4; color: var(--on-dark-dim); }
.stat__value { order: 1; margin: 0; font-family: var(--font-head); font-feature-settings: var(--features-head); font-size: clamp(1.5rem, 2.6vw, 2.35rem); line-height: 1; white-space: nowrap; color: #fff; }
.stat__value .cite { font-size: .4em; }

.article { --text: min(820px, 86.6%); --wide: 86.6%; padding-block: clamp(24px, 4vw, 56px) clamp(48px, 6vw, 88px); }
.art-sec { display: grid; grid-template-columns: [full-start] 1fr [wide-start] minmax(0, calc((var(--wide) - var(--text)) / 2)) [text-start] var(--text) [text-end] minmax(0, calc((var(--wide) - var(--text)) / 2)) [wide-end] 1fr [full-end]; padding-block: clamp(36px, 5vw, 72px); scroll-margin-top: calc(var(--header-h) + 8px); }
.art-sec + .art-sec { border-top: 1px solid var(--rule); }
.art-sec > * { grid-column: text; }
.art-head { margin-bottom: 26px; }
.art-head h2 { margin-top: 16px; }
.art-p { font-size: 1.0625rem; line-height: 1.68; color: var(--ink); }
.art-p + .art-p { margin-top: 1.05em; }
.art-p + :not(.art-p), :not(.art-p) + .art-p { margin-top: 30px; }
.art-list { display: grid; gap: 10px; }
.art-list li { padding-left: 24px; font-size: 1rem; line-height: 1.6; background: var(--reg) 0 .38em / 13px no-repeat; }
.art-callout { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 6px 22px; padding: 20px 22px; background: var(--paper); clip-path: polygon(var(--gf-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--gf-cut)); }
.art-callout__value { font-family: var(--font-head); font-feature-settings: var(--features-head); font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1; color: var(--copper); white-space: nowrap; }
.art-callout p { font-size: .9375rem; line-height: 1.5; color: var(--ink); }
.art-table { grid-column: wide; }
.art-caption, .art-fig figcaption { margin-top: 12px; max-width: 760px; font-size: .84375rem; line-height: 1.5; color: var(--muted); }
.spec--article { min-width: 680px; }
.spec--article td { color: var(--ink); }
.spec--article td:first-child { white-space: nowrap; }

.art-fig { margin: 0; }
.art-fig--wide { grid-column: wide; }
.art-fig__art { position: relative; }
.art-fig__art > svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Uppercased labels keep the micro sign as it is */
.nocase { text-transform: none; }

/* Charts and drawings: ink, copper, and numbers in Datatype */
.chart, .dr { font-feature-settings: var(--features-body); }
.chart text, .dr text { font-family: var(--font-body); font-size: 13px; fill: var(--muted); }
.chart .chart__num, .dr .dr-num { font-family: var(--font-readout); font-size: 12px; fill: var(--gf-primary); }
.chart .chart__unit, .chart .chart__group { font-family: var(--font-head); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; fill: var(--muted); }
.chart .chart__row, .chart .chart__label--series, .dr .dr-name { font-family: var(--font-head); font-feature-settings: var(--features-head); font-size: 14px; fill: var(--gf-primary); }
.chart .chart__label--series.is-key, .dr .dr-copper { fill: var(--copper); }
.chart .chart__label--point { font-size: 11.5px; fill: var(--muted); }
.chart .chart__date { fill: var(--muted); }
.dr .dr-title { font-size: 16px; }
.dr .dr-small { font-size: 12px; }
.dr .dr-small2 { font-size: 13px; }
.chart__axis, .chart__tick { stroke: var(--gf-primary); stroke-width: 1; }
.chart__tick { stroke-width: .8; }
.chart__track { stroke: var(--rule); stroke-width: 1; }
.chart__line { fill: none; stroke: var(--gf-primary); stroke-width: 1.6; stroke-linejoin: round; }
.chart__line.is-key { stroke: var(--copper); stroke-width: 2.2; }
.chart__dot { fill: #fff; stroke: var(--gf-primary); stroke-width: 1.4; }
.chart__dot.is-key { stroke: var(--copper); }
.chart__band { fill: var(--copper); fill-opacity: .12; stroke: var(--copper); stroke-opacity: .5; stroke-dasharray: 3 4; }
.chart__bar { fill: var(--gf-primary); }
.chart__bar.is-open { fill: #fff; stroke: var(--gf-primary); stroke-width: 1.2; stroke-dasharray: 4 3; }
.chart__bar--private { fill: var(--copper); }
.chart__bar--acquisition { fill: #fff; stroke: var(--gf-primary); stroke-width: 1.4; }
.chart__range rect { fill: var(--gf-primary); }
.chart__cap { stroke: var(--copper); stroke-width: 1.5; }
[data-tip] { cursor: default; }
.chart [data-tip]:hover, .dr [data-tip]:hover { filter: brightness(1.15); }
.chart circle[data-tip]:hover { stroke-width: 2.6; }

/* Charts draw with the scroll: --p runs 0 to 1 as a chart comes up the screen (assets/gf-article.js), and stops when the scroll does */
html.gf-scrub .chart__line { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
html.gf-scrub :is(.chart__dot, .chart__label--point, .chart__num--value) { opacity: clamp(0, calc(var(--p, 0) * 14 - var(--n, 0) * .6 - 2), 1); }
html.gf-scrub :is(.chart__bar, .chart__range) { transform: scaleX(clamp(0, calc(var(--p, 0) * 1.8 - var(--n, 0) * .06), 1)); transform-box: fill-box; transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .dr-flow { animation: dr-flow 1.6s linear infinite; }
  .dr-flow--left { animation-direction: reverse; }
  .dr-rise { animation: dr-rise 2.4s ease-in-out infinite; }
  .dr-flux { animation: dr-flow 1.2s linear infinite; }
}
@keyframes dr-flow { to { stroke-dashoffset: -24; } }
@keyframes dr-rise { 0%, 100% { opacity: .2; transform: translateY(4px); } 50% { opacity: 1; transform: none; } }

/* The hover readout for charts and drawings: a glass label, as over the cleanroom */
.gf-tip { position: fixed; left: 0; top: 0; z-index: 70; max-width: 320px; padding: 8px 12px 9px 14px; font-size: .8125rem; line-height: 1.35; color: #fff; background: var(--glass-dark); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); pointer-events: none; }
.gf-tip[hidden] { display: none; }

/* A timeline: years in the readout face, grouped into eras */
.tl { display: grid; }
.tl__era { margin: 26px 0 4px; }
.tl__era:first-child { margin-top: 0; }
.tl__era span { display: inline-block; padding: 5px 12px 5px 13px; font-family: var(--font-head); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--glass-dark); clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px); }
.tl__item { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 18px; padding: 14px 0 15px; border-bottom: 1px solid var(--rule); }
.tl__year { font-family: var(--font-readout); font-size: 1rem; line-height: 1.5; color: var(--copper); }
.tl__title { font-family: var(--font-head); font-feature-settings: var(--features-head); font-size: 1.0625rem; line-height: 1.3; color: var(--gf-primary); }
.tl__text { margin-top: 4px; font-size: .9375rem; line-height: 1.55; color: var(--muted); }

/* Process steps: the list scrolls, and the cross-section beside it changes to match the step in view */
.steps { grid-column: wide; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); margin-top: 8px; }
.steps__list { counter-reset: step; }
.step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 22px 0 24px; border-bottom: 1px solid var(--rule); }
.step:first-child { border-top: 1px solid var(--rule); }
.steps.is-live .step { opacity: var(--o, .45); }
.step__n { font-family: var(--font-readout); font-size: .875rem; line-height: 1.6; color: var(--copper); }
.step__name { font-size: 1.1875rem; line-height: 1.25; }
.step__text { margin-top: 8px; font-size: .9375rem; line-height: 1.6; color: var(--ink); }
.step__params { margin-top: 8px; font-family: var(--font-readout); font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.steps__figure { position: relative; }
.steps__pin { position: sticky; top: calc(var(--header-h) + 24px); display: grid; align-content: center; min-height: min(560px, 100vh - var(--header-h) - 48px); padding: 16px 0; }
.steps__frame { grid-area: 1 / 1; opacity: 0; }
.steps:not(.is-live) .steps__frame:first-child { opacity: 1; }
.steps__frame svg { display: block; width: 100%; height: auto; }
.steps__label { grid-area: 2 / 1; margin-top: 8px; font-family: var(--font-readout); font-size: .875rem; color: var(--gf-primary); }

/* Clickable process steps keep the selected cross-section until another step is chosen. */
.steps[data-interaction="click"] .steps__list { display: grid; align-content: start; gap: 10px; }
.steps[data-interaction="click"] .step { display: block; padding: 0; border: 0; opacity: 1; }
.step__select { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; width: 100%; padding: 20px; border: 1px solid var(--rule); border-left: 4px solid transparent; background: var(--paper); color: var(--gf-primary); text-align: left; font-family: inherit; font-size: inherit; line-height: inherit; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.step__select .step__name, .step__select .step__text, .step__select .step__params { display: block; }
.step__select .step__name { font-family: var(--font-head); font-feature-settings: var(--features-head); }
.step__select:hover { background: #eae8e2; border-left-color: var(--copper); }
.step__select:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.steps[data-interaction="click"] .step.is-active .step__select { background: var(--gf-primary); border-color: var(--gf-primary); border-left-color: var(--copper); color: #fff; }
.steps[data-interaction="click"] .step.is-active .step__name { font-weight: 600; }
.steps[data-interaction="click"] .step.is-active .step__text { color: #fff; }
.steps[data-interaction="click"] .step.is-active .step__params { color: var(--on-dark); }
.steps[data-interaction="click"] .step.is-active .step__n { color: #edb88f; }

/* The slider on the wet-etch drawing */
.dr-slider { width: 100%; accent-color: var(--copper); }

/* The 3D cold plate */
.coldplate { position: relative; aspect-ratio: 16 / 9; background: var(--paper); clip-path: polygon(var(--gf-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--gf-cut)); }
.coldplate::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, #fefefc 0%, var(--paper) 60%, #e6e4dd 100%); }
.coldplate__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.coldplate__canvas:active { cursor: grabbing; }
.coldplate__hint { position: absolute; right: 16px; bottom: 12px; font-family: var(--font-readout); font-size: .75rem; color: var(--muted); pointer-events: none; }

@media (max-width: 999px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps__figure { order: -1; position: sticky; top: var(--header-h); z-index: 4; background: #fff; }
  .steps__pin { position: relative; top: 0; min-height: 0; padding: 8px 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .art-callout { grid-template-columns: minmax(0, 1fr); }
  .tl__item { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; }
}

/* ---------- Service pages: a pinned card per process, its details scrolling beside it ---------- */
/* Clipped, so the sticky traces canvas (100vh tall, taking no space) can't hang over the sections after the cards */
.svc-body { position: relative; overflow: clip; background: var(--paper); padding-block: clamp(28px, 3.4vw, 52px) clamp(56px, 6vw, 96px); }
/* The background: one surface behind everything, with traces that move with the scroll (assets/gf-traces.js) */
.svc-bg { position: sticky; top: 0; z-index: 0; height: 100vh; margin-bottom: -100vh; pointer-events: none; }
.svc-bg canvas { display: block; width: 100%; height: 100%; }
/* The objects: one layer over the page that draws each card's object in its slot (assets/stage/stage-cards.js) */
.svc-objects { position: fixed; inset: 0; z-index: 30; width: 100vw; height: 100vh; pointer-events: none; visibility: hidden; }
.svc-rows { position: relative; z-index: 1; display: grid; gap: clamp(24px, 3vw, 44px); }

.prow {
  --pin: calc(var(--header-h) + 24px);
  --card-h: min(calc(100vh - var(--pin) - 24px), 720px);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
  min-height: calc(var(--card-h) + 45vh);
  scroll-margin-top: var(--pin);
}
/* No card behind a process: its content sits straight on the page background (the aerogel was removed on request) */
.pcard {
  position: sticky;
  top: var(--pin);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: var(--card-h);
  padding: clamp(22px, 2.4vw, 36px);
}
.pcard__head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: baseline; }
.pcard__n { font-family: var(--font-readout); font-size: 1.125rem; line-height: 1; color: var(--copper); white-space: nowrap; }
.pcard__of { color: var(--muted); }
.pcard__title { font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1.02; letter-spacing: -.012em; }
.pcard__summary { grid-column: 2; margin-top: 12px; max-width: 46ch; font-size: 1.0625rem; line-height: 1.45; color: var(--muted); }
.pcard__body { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(16px, 2vw, 32px); min-height: 0; margin-top: clamp(14px, 1.8vw, 26px); }
.pcard__object { position: relative; min-height: 0; }
.pcard__facts { display: grid; align-content: center; gap: 14px; min-width: 0; }
/* Values in boxes, readable from across the room */
.gboxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.gbox { display: grid; align-content: space-between; gap: 10px; min-height: 96px; padding: 14px 16px 15px; background: rgba(255, 255, 255, .52); box-shadow: inset 0 0 0 1px rgba(23, 35, 44, .16); clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); }
.gbox dt { font-family: var(--font-head); font-size: .6875rem; line-height: 1.25; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gbox dd { margin: 0; font-family: var(--font-head); font-feature-settings: var(--features-head); font-size: clamp(1.2rem, 1.7vw, 1.7rem); font-weight: 500; line-height: 1.1; color: var(--gf-primary); }
.gbox dd .cite { font-size: .45em; }
.gchips { display: flex; flex-wrap: wrap; gap: 6px; }
.gchips li { padding: 6px 11px 7px; font-family: var(--font-head); font-feature-settings: var(--features-head); font-size: .9375rem; line-height: 1.1; color: var(--gf-primary); background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(23, 35, 44, .14); }
.gnotes { display: grid; gap: 7px; }
.gnotes li { padding-left: 22px; font-size: .9375rem; line-height: 1.4; color: var(--ink); background: var(--reg) 0 .28em / 12px no-repeat; }

/* The side column: what scrolls past while the card holds */
.pside { display: grid; gap: 22px; align-content: start; padding: 6px 0 24px; min-width: 0; }
.pside__block { padding: 18px 20px 20px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(23, 35, 44, .1); }
.pside__title { margin-bottom: 12px; font-size: .6875rem; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-feature-settings: normal; }
.pside .mats { margin-top: 0; }
.pside .mats__table { min-width: 0; }
.pside .mats__note { font-size: .78125rem; }
.pairs { display: grid; gap: 6px; }
.pair { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; font-family: var(--font-head); font-feature-settings: var(--features-head); font-size: 1rem; color: var(--gf-primary); background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(23, 35, 44, .14); transition: background .15s, color .15s; }
.pair:hover { color: #fff; background: var(--gf-primary); }
.pside__more { padding: 0 20px; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(23, 35, 44, .1); }
.pside__more summary { display: flex; justify-content: space-between; padding: 14px 0; font-family: var(--font-head); font-size: .9375rem; color: var(--gf-primary); cursor: pointer; list-style: none; }
.pside__more summary::-webkit-details-marker { display: none; }
.pside__more summary::after { content: "+"; color: var(--copper); }
.pside__more[open] summary::after { content: "–"; }
.pside__more[open] { padding-bottom: 18px; }
.specs--one { grid-template-columns: minmax(0, 1fr); }
.pside__more .limits { margin-top: 16px; }

@media (max-width: 1099px) {
  .prow { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pcard { position: relative; top: 0; height: auto; }
  .pcard__body { grid-template-columns: minmax(0, 1fr); }
  .pcard__object { height: min(56vw, 320px); }
}
@media (max-width: 560px) {
  .pcard__head { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .pcard__summary { grid-column: 1; }
  .gbox { min-height: 0; }
}

/* Cards on the left, the explosion pinned on the right */
.svc-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 40px); background: none; }
.svc-layout .procs { grid-column: 1; grid-row: 1; padding: 0; }
.svc-layout .proc { padding: 0; border: 0; }
.svc-layout .prow { display: block; min-height: calc(var(--card-h) + 50vh); }
.svc-layout .stage { grid-column: 2; grid-row: 1; background: none; }
.svc-layout .stage__pin { top: calc(var(--header-h) + 24px); height: min(calc(100vh - var(--header-h) - 48px), 720px); }
.svc-layout .stage__pin::before, .svc-layout .stage__label { display: none; }
.pcard__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pcard__side { display: grid; gap: 14px; align-content: start; min-height: 0; overflow: auto; scrollbar-width: thin; }
.pcard__block { padding: 14px 16px 16px; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(23, 35, 44, .1); }
.pcard__block .mats { margin-top: 0; }
.pcard__block .mats__table { min-width: 0; }
.pcard__block .mats__note { font-size: .78125rem; }
.mats__nums.is-open { color: var(--muted); }
/* A small table of options in a card, such as lift-off's resist stacks */
.ptable { width: 100%; border-collapse: collapse; font-size: .8125rem; line-height: 1.35; }
.ptable thead th { padding: 0 10px 8px 0; text-align: left; font-family: var(--font-head); font-feature-settings: normal; font-size: .625rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); vertical-align: bottom; border-bottom: 1px solid var(--gf-primary); }
.ptable tbody th { padding: 9px 10px 10px 0; text-align: left; font-family: var(--font-head); font-feature-settings: var(--features-head); font-size: .9375rem; font-weight: 400; line-height: 1.25; color: var(--gf-primary); vertical-align: top; border-bottom: 1px solid var(--rule); }
.ptable td { padding: 9px 10px 10px 0; vertical-align: top; color: var(--ink); border-bottom: 1px solid var(--rule); }
.ptable td:last-child, .ptable th:last-child { padding-right: 0; }
.ptable td { white-space: nowrap; }
/* Chemistry descriptions wrap so the full table stays in the document flow. */
.ptable--chemistry { table-layout: fixed; }
.ptable--chemistry thead th:first-child { width: 21%; }
.ptable--chemistry thead th:nth-child(2) { width: 34%; }
.ptable--chemistry td, .ptable--chemistry tbody th { white-space: normal; overflow-wrap: anywhere; }
.ptable--chemistry tbody th { font-size: .875rem; }
.ptable__note { margin-bottom: 14px; font-size: .78125rem; line-height: 1.45; color: var(--muted); }
/* Long service tables use one page scroll, with no pinned cards or nested scrolling. */
.svc-body .svc-layout { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); }
.svc-body .prow { min-height: 0; }
.svc-body .pcard { position: relative; top: auto; height: auto; grid-template-rows: auto auto; }
.svc-body .pcard__body { grid-template-columns: minmax(0, 1fr); }
.svc-body .pcard__facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; align-content: start; gap: 16px 24px; }
.svc-body .gnotes { grid-column: 1 / -1; }
.svc-body .pcard__side { overflow: visible; min-width: 0; }
.svc-body .ptable { table-layout: fixed; }
.svc-body .ptable th, .svc-body .ptable td { white-space: normal; overflow-wrap: anywhere; }
.svc-body[data-stage="etching"] .ptable--chemistry thead th:first-child { width: 24%; }
.svc-body[data-stage="etching"] .ptable--chemistry thead th:nth-child(2) { width: 32%; }
.svc-body .mats { overflow: visible; min-width: 0; }
.svc-body .mats__table { min-width: 0; table-layout: fixed; }
.svc-body .mats__table th:first-child { width: 20%; }
.svc-body .mats__table th,
.svc-body .mats__table td { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .svc-body .pcard__facts { grid-template-columns: minmax(0, 1fr); }
  .svc-body .pcard { padding-inline: 0; }
  .svc-body .pcard__block { padding-inline: 12px; }
  .svc-body .ptable:not(.ptable--chemistry),
  .svc-body .ptable:not(.ptable--chemistry) tbody { display: block; width: 100%; }
  .svc-body .ptable:not(.ptable--chemistry) thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .svc-body .ptable:not(.ptable--chemistry) tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .svc-body .ptable:not(.ptable--chemistry) tbody th { display: block; padding: 0 0 8px; border: 0; }
  .svc-body .ptable:not(.ptable--chemistry) td { display: grid; grid-template-columns: minmax(80px, .65fr) minmax(0, 1.35fr); gap: 12px; padding: 5px 0; border: 0; }
  .svc-body .ptable:not(.ptable--chemistry) td::before { content: attr(data-label); color: var(--muted); }
}
/* A service of one process has nothing to hand off to, so its card doesn't hold for a scroll */
.svc-layout .prow:only-child { min-height: 0; }

/* ---------- Under the deposition cards: every material by method, and the methods side by side ---------- */
.mx-wrap { border: 0; border-radius: 0; background: none; }
.mx { width: 100%; min-width: 880px; border-collapse: collapse; font-size: .875rem; line-height: 1.35; }
.mx thead th { padding: 0 12px 10px 0; text-align: left; font-family: var(--font-head); font-feature-settings: normal; font-size: .6875rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); vertical-align: bottom; border-bottom: 1px solid var(--gf-primary); }
.mx thead a { color: inherit; transition: color .15s; }
.mx thead a:hover { color: var(--gf-primary); }
.mx tbody th, .mx td { padding: 10px 14px 11px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.mx tbody th { position: sticky; left: 0; z-index: 1; width: 200px; font-weight: 400; background: #fff; }
.mx tbody .mx__group th { position: static; width: auto; padding: 26px 0 9px; font-family: var(--font-head); font-feature-settings: normal; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gf-primary); }
.mx tbody .mx__group th span { position: sticky; left: 0; } /* stays in view when the table scrolls sideways */
.mx tbody tr:first-child th { padding-top: 16px; }
.mx__sym { display: block; font-family: var(--font-head); font-feature-settings: var(--features-head); font-size: 1rem; line-height: 1.25; color: var(--gf-primary); }
.mx__name { display: block; margin-top: 2px; font-size: .78125rem; color: var(--muted); }
.mx__nums { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gf-primary); }
.mx__nums.is-open { color: var(--muted); }
.mx__track { position: relative; display: block; height: 8px; margin-top: 7px; border-bottom: 1px solid var(--rule); }
.mx__key { margin-top: 14px; font-size: .8125rem; color: var(--muted); }
.spec--methods { min-width: 760px; }
.spec--methods td:first-child, .spec--methods th, .spec--methods td:nth-child(n + 4) { white-space: nowrap; }
.spec--methods a { color: inherit; border-bottom: 1px solid var(--rule); transition: border-color .15s; }
.spec--methods a:hover { border-bottom-color: currentColor; }

/* The deposition comparisons also stay in the page flow at every width. */
.dep-sec .table-wrap { overflow: visible; min-width: 0; }
.dep-sec .mx, .dep-sec .spec--methods { min-width: 0; table-layout: fixed; }
.dep-sec .mx tbody th { position: static; width: auto; }
.dep-sec .mx thead th:first-child { width: 18%; }
.dep-sec .mx th, .dep-sec .mx td,
.dep-sec .spec--methods th, .dep-sec .spec--methods td { white-space: normal; overflow-wrap: anywhere; }
.dep-sec .mx__nums { white-space: normal; }

@media (max-width: 1099px) {
  .dep-sec .mx, .dep-sec .spec--methods,
  .dep-sec .mx tbody, .dep-sec .spec--methods tbody { display: block; width: 100%; }
  .dep-sec .mx thead, .dep-sec .spec--methods thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .dep-sec .mx tbody tr, .dep-sec .spec--methods tbody tr { display: block; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
  .dep-sec .mx tbody th { display: block; width: auto; min-width: 0; padding: 0 0 8px; border: 0; background: none; }
  .dep-sec .mx tbody .mx__group { padding: 24px 16px 8px; }
  .dep-sec .mx tbody .mx__group th { padding: 0; }
  .dep-sec .mx__group span { position: static; }
  .dep-sec .mx td, .dep-sec .spec--methods td { display: grid; grid-template-columns: minmax(84px, .6fr) minmax(0, 1.4fr); column-gap: 14px; padding: 8px 0; border: 0; }
  .dep-sec .mx td:empty { display: none; }
  .dep-sec .mx td::before, .dep-sec .spec--methods td[data-label]::before { content: attr(data-label); font-size: .75rem; color: var(--muted); }
  .dep-sec .mx__track { grid-column: 2; }
  .dep-sec .spec--methods td:first-child { display: block; padding-bottom: 10px; font-family: var(--font-head); font-size: 1rem; color: var(--gf-primary); }
  .dep-sec .spec--methods td:first-child::before { content: none; }
}

@media (max-width: 760px) {
  .svc-body .mats__table thead tr,
  .svc-body .mats__table tbody tr { grid-template-columns: minmax(0, 90px) minmax(0, 1fr); }
  .svc-body .mats__table th:first-child { width: auto; }
  .svc-body .mats__axis:has(> span:nth-child(6)) { height: 2.3em; }
  .svc-body .mats__axis:has(> span:nth-child(6)) span:nth-child(even) { top: 1.2em; }
}

@media (max-width: 1099px) {
  .svc-layout { display: flex; flex-direction: column; }
  .svc-layout .stage { order: -1; position: sticky; top: var(--header-h); z-index: 5; height: min(30vh, 280px); }
  .svc-layout .stage__pin { position: relative; top: 0; height: 100%; }
  .svc-layout .prow { min-height: 0; margin-bottom: 20px; }
  .pcard__side { overflow: visible; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1299px) { .caps { --cols: 5; } }

/* Narrower than one row, the menu's items take a second row under the logo, so every one is still always in the banner.
   Member login stays beside the logo. --header-h is both rows, for whatever sticks under the banner */
@media (max-width: 979px) {
  :root:has(.site-header--tabs) { --header-h: 116px; }
  .site-header__bar { flex-wrap: wrap; row-gap: 0; height: auto; }
  .lockup, .site-header__actions { height: var(--bar-h); }
  .site-header__actions { order: 1; margin-left: auto; }
  .tabs { order: 2; flex: 0 0 100%; height: 44px; margin-left: -12px; gap: 2px; }
  .tab__link { height: 34px; padding: 0 12px; font-size: 1rem; }
}

@media (max-width: 1180px) {
  .footer__top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 1099px) {
  .hero__grid, .cool-band__grid, .cta__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__aside { justify-content: flex-start; }
  .caps, .coverage--home .caps { --cols: 4; }
  .phases, .phases--flow { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 26px; }
  .phase { grid-row: auto; grid-template-rows: auto; gap: 12px; }
  .phase__nodes { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .phase .phase__node::after, .phase .phase__node::before, .phase .phase__nodes::after { display: none; }
  .phase--loop::before { inset: -12px calc(var(--gutter) * -1); }
  .phases__loop { grid-column: 1; grid-row: auto; height: auto; margin: 0; background: none; }
  .phases__loop::before, .phases__loop::after { display: none; }
  .phases__loop-label { position: static; display: inline-block; transform: none; padding: 0; background: none; }
  .phases__loop-label::before { content: "↺ "; }
  /* The map at the head of a service page folds behind a bar naming this step, with this service lit white as in the map */
  .here__toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 9px 16px 9px 15px; font: inherit; font-size: .9375rem; line-height: 1.2; color: var(--on-dark); text-align: left; background: var(--glass-light); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 0; clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px); cursor: pointer; transition: background .15s; }
  .here__toggle:hover { background: var(--glass-light-hover); }
  .here__now { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
  .here__name { padding: 4px 9px 5px; font-family: var(--font-head); font-feature-settings: var(--features-head); color: var(--gf-primary); background: #fff; }
  .here__all { display: inline-flex; flex: none; align-items: center; gap: 10px; margin-left: auto; font-size: .8125rem; color: var(--on-dark-dim); white-space: nowrap; }
  .here__all::after { content: "+"; font-size: 1.25rem; line-height: 1; color: #fff; }
  .here.is-open .here__all::after { content: "–"; }
  html.gf-js .here:not(.is-open) .here__map { display: none; }
  .here__map { margin-top: 30px; }
  /* The mark shares the last row with the loop's note, at its right */
  .phases--here .phases__loop, .phases--here .phases__mark { grid-row: 7; }
  .phases__mark { grid-column: 1; align-self: center; height: 34px; }
}
@media (max-width: 560px) {
  .here__all { font-size: 0; gap: 0; } /* just the plus */
}

/* Narrower than the two columns need: the stage pins to the top as a band, and the processes scroll under it */
@media (max-width: 999px) {
  .procs-layout { display: block; }
  .stage { position: sticky; top: var(--header-h); z-index: 5; height: min(32vh, 300px); }
  .stage__pin { position: relative; top: 0; height: 100%; }
  .stage__label { min-width: 0; padding: 9px 14px 10px 13px; }
  .stage__name { font-size: 1rem; }
  .procs { padding: 8px var(--gutter) 56px; }
  .proc { scroll-margin-top: calc(var(--header-h) + min(32vh, 300px) + 8px); }
}

@media (max-width: 760px) {
  :root { --bar-h: 60px; --header-h: 60px; }
  :root:has(.site-header--tabs) { --header-h: 100px; }
  .site-header--home .header-login { display: none; } /* on a phone the home screen's panel has it */
  /* The four items spread from the logo's edge to Member login's, their words lined up with both */
  .tabs { height: 40px; margin-inline: -7px; justify-content: space-between; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .tab__link { height: 32px; padding: 0 7px; font-size: .875rem; }
  .tab--menu .tab__link::after { margin-left: 5px; }
  .header-login { font-size: .9375rem; }
  /* In the dropdowns, what's in each page goes under its name */
  .menu__link { flex-direction: column; align-items: flex-start; padding: 13px 0 14px; }
  .menu__name { font-size: 1.375rem; }
  .menu__spec { text-align: left; font-size: .875rem; }
  .cleanroom__track { height: 96px; }
  .cleanroom__orb { bottom: calc(100% - 100lvh + var(--safe-bottom) + 164px); }
  .cleanroom__focus-hint { font-size: .875rem; }
  .lockup { font-size: 1.3125rem; }
  .lockup--footer { font-size: 1.5rem; }
  .site-header__actions .btn { display: none; }
  .caps, .coverage--home .caps { --cols: 3; }
  .cool-cards, .about-points { grid-template-columns: minmax(0, 1fr); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .stage__readout { display: none; }
  /* Materials: the bar beside the symbol, the note under both */
  .mats { overflow: visible; }
  .mats__table { min-width: 0; }
  .mats__table thead tr, .mats__table tbody tr { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; }
  .mats__table thead th:first-child { display: none; }
  .mats__table thead th:last-child { display: none; }
  .mats__axis-head { grid-column: 2; width: auto; }
  .mats__table tbody tr { padding: 10px 0 12px; border-bottom: 1px solid var(--rule); }
  .mats__table tbody th, .mats__table td { padding: 0; border: 0; }
  .mats__table td.mats__note { grid-column: 1 / -1; margin-top: 4px; }
  /* The materials table scrolls sideways under a narrower column of names */
  .mx tbody th { width: 116px; min-width: 116px; padding-right: 10px; }
}

@media (max-width: 460px) {
  .caps, .coverage--home .caps { --cols: 2; }
  .facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { padding: 12px 12px 13px; }
  .fact__value { font-size: 1.3125rem; }
}

/* Phones: the banner's items go by their short names (Services, Cooling, Membership, Studio) so all four fit one row */
@media (max-width: 520px) {
  .tab__extra { display: none; }
}

/* The narrowest phones: the banner's items a size smaller, without the dropdowns' chevrons, so all four still fit */
@media (max-width: 350px) {
  .tab__link { padding: 0 6px; font-size: .8125rem; }
  .tabs { margin-inline: -6px; }
  .tab--menu .tab__link::after { display: none; }
  .lockup { font-size: 1.1875rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cleanroom { height: auto; }
  .cleanroom__stage { position: relative; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

html:not(.gf-js) .cleanroom, .cleanroom.is-fallback { height: auto; }
html:not(.gf-js) .cleanroom__stage, .cleanroom.is-fallback .cleanroom__stage { position: relative; height: auto; }
html:not(.gf-js) .cleanroom canvas, .cleanroom.is-fallback canvas { display: none; }
html:not(.gf-js) .cleanroom__head, .cleanroom.is-fallback .cleanroom__head { display: none; }
/* Without the 3D, the statement is a plain heading in the same type */
html:not(.gf-js) .cleanroom__statement, .cleanroom.is-fallback .cleanroom__statement { position: static; height: auto; overflow: visible; padding: clamp(28px, 4.4vw, 60px) var(--gutter) 0; }
html:not(.gf-js) .cleanroom__statement { padding-top: calc(var(--header-h) + clamp(28px, 4.4vw, 60px)); }
html:not(.gf-js) .cleanroom__words, .cleanroom.is-fallback .cleanroom__words { position: static; width: auto; height: auto; max-width: 30ch; overflow: visible; clip-path: none; white-space: normal; font-family: var(--font-alt); font-size: clamp(1.625rem, 4.2vw, 3.75rem); line-height: 1.04; letter-spacing: -.03em; text-transform: uppercase; }
html:not(.gf-js) .cleanroom__type, .cleanroom.is-fallback .cleanroom__type { display: none; }