@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
/* Roles come from docs/design/BRIEF-website.md. The accent marks the selected service and nothing else.
   Section "Material" of the brief defines the pane: a clear veil, an ink hairline, a frosted end, no blur. */
:root {
  --paper: #fafafa;
  --ink: #0a0a0a;
  --structure: #7a7a7a;
  --label: #737373;
  --rule: #d8d8d8;
  --accent: #ff4f00;
  --accent-text: #c73e00;
  --veil: color-mix(in srgb, var(--paper) 86%, transparent); /* a clear pane: at 80% the lead's solid button passed under as a grey chip with readable white text */
  --pad: clamp(20px, 5vw, 80px);
  --strip: 57px;
  --box: clamp(300px, 40vh, 380px);
}

body { margin: 0; background: var(--paper); }
a { color: var(--ink); }
a:hover { color: var(--accent-text); }

.page {
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  overflow-x: clip;
}
.page p { margin: 0; }
.page button { font: inherit; color: inherit; }
.page :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dim { color: var(--label); }

/* top strip */
.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 32px;
  padding: 6px var(--pad);
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
}
/* a phone sets the name and the ticks on one row and the links on the next */
.strip nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 min(32px, 5.5vw); order: 2; flex-basis: 100%; } /* the four links hold one row at 320 */
.strip .count { order: 1; margin-left: auto; }
.strip a, .strip .cell { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.strip .cell { gap: 12px; }
.strip .logo { display: block; flex: none; }
.strip .logo-name { font: 600 17px/1 'IBM Plex Sans', sans-serif; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.strip a.plain { text-decoration: none; }
/* the strip's button is an outline, so the filled one in the lead stays the page's one solid button above the form */
/* it shows where the strip stays on screen; a phone's strip scrolls away, and the lead's button sits in the first screen there */
.strip a.book { display: none; white-space: nowrap; min-height: 36px; box-sizing: border-box; padding: 0 14px; border: 1px solid var(--ink); text-decoration: none; }
.strip a.book:hover { background: var(--ink); color: var(--paper); }
.ticks { display: flex; gap: 4px; }
.ticks span { width: 9px; height: 9px; box-sizing: border-box; border: 1px solid var(--ink); }
.ticks span.on { background: var(--ink); }

/* headline */
.top { padding: clamp(36px, 5.5vw, 80px) var(--pad) 0; }
.page .eyebrow { margin-bottom: clamp(16px, 2vw, 28px); }
h1 {
  margin: 0;
  font-size: clamp(52px, 8.6vw, 124px);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* text column and drawing */
.cols { margin-top: clamp(28px, 3.5vw, 52px); }
.blk { padding-left: var(--pad); padding-right: var(--pad); }
.lead { padding-bottom: clamp(32px, 5vw, 72px); }
.lead p { max-width: 400px; }
.lead .go { display: inline-flex; align-items: center; margin-top: 20px; text-decoration: none; }
.sec { padding-top: clamp(40px, 6vw, 96px); padding-bottom: clamp(40px, 6vw, 96px); border-top: 1px solid var(--ink); }
.page .label { margin-bottom: 16px; }
h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.legend { max-width: 400px; }

/* services */
.groups { margin-top: clamp(24px, 3vw, 40px); }
.group-head { padding: 10px 0; border-top: 1px solid var(--ink); }
.group-head ~ .group-head { margin-top: 28px; }
.row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.svc { border-top: 1px solid var(--rule); }
.svc:last-child { border-bottom: 1px solid var(--rule); }
/* The selected service opens its sentence. Every sentence gets the same room, so the list keeps one height
   whichever row is open and nothing under the list moves when the pointer crosses the drawing. */
.desc { --lines: 2; display: grid; grid-template-rows: 0fr; visibility: hidden; font-size: 15px; line-height: 1.5; transition: grid-template-rows 180ms ease, visibility 0s 180ms; }
.desc p { box-sizing: content-box; min-height: 0; overflow: hidden; max-width: 440px; text-wrap: pretty; } /* no single word on a sentence's last line */
.desc p::after { content: ""; display: block; height: 14px; }
.svc:has(> .row[aria-pressed="true"]) .desc { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 180ms ease; }
.svc:has(> .row[aria-pressed="true"]) .desc p { min-height: calc(var(--lines) * 1lh + 14px); }
.no-gl .desc { grid-template-rows: 1fr; visibility: visible; } /* without the drawing no row can be picked, so every sentence shows */
.no-gl .svc:has(> .row[aria-pressed="true"]) .desc p { min-height: 0; } /* and no row holds extra room */
@media (max-width: 519px) { .desc { --lines: 3; } }
@media (max-width: 359px) { .desc { --lines: 4; } }
.row .mark { flex: none; width: 9px; height: 9px; margin-left: auto; background: var(--accent); visibility: hidden; }
.row .name { text-wrap: balance; } /* a name that wraps on a phone leaves no single word on its last line */
.row[aria-pressed="true"] .name { font-weight: 500; }
.row[aria-pressed="true"] .mark { visibility: visible; }

/* sectors, as a list in the text column */
.sector-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  column-gap: 24px;
  margin-top: clamp(20px, 3vw, 40px);
}
.srow {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 52px;
  padding: 8px 0;
  border: 0;
  border-top: 1px solid var(--ink);
  background: none;
  text-align: left;
  cursor: pointer;
}
.srow .name { font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.srow .mark { flex: none; width: 11px; height: 11px; margin-left: auto; box-sizing: border-box; border: 2px solid var(--ink); background: var(--sheet); visibility: hidden; } /* the picked sheet in small: its outline and its color at full strength */
.srow[aria-pressed="true"] .mark { visibility: visible; }

/* cases, each under the name of its service: a title opens three ruled rows, and one case is open at a time */
.case .label { display: flex; align-items: center; gap: 16px; margin: clamp(28px, 4vw, 48px) 0 10px; color: var(--label); }
.label + .case .label { margin-top: clamp(24px, 3vw, 40px); } /* the first service sits under the section label, with no heading between them */
/* the accent marks the selected service here as on its row in the list */
.case .label .mark { flex: none; width: 9px; height: 9px; margin-left: auto; background: var(--accent); visibility: hidden; }
.case .label.on { color: var(--ink); }
.case .label.on .mark { visibility: visible; }
.case details { border-top: 1px solid var(--ink); }
.case.end details { border-bottom: 1px solid var(--ink); }
.case summary { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; list-style: none; cursor: pointer; }
.case summary::-webkit-details-marker { display: none; }
.case summary:hover { box-shadow: inset 0 1px 0 var(--ink); } /* the pointer thickens the title's rule, as focus does in the form; orange stays with the service mark */
.case h3 { margin: 0; max-width: 440px; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
/* a closed case carries a plus and an open one a minus, each drawn from hairlines */
.case .sign { position: relative; flex: none; width: 11px; height: 11px; margin: 8px 0 0 auto; }
.case .sign::before, .case .sign::after { content: ""; position: absolute; left: 0; top: 5px; width: 11px; height: 1px; background: var(--ink); }
.case .sign::after { transform: rotate(90deg); }
.case details[open] .sign::after { display: none; }
.facts { margin: 0; padding-bottom: 8px; font-size: 15px; }
.fact { padding: 12px 0; border-top: 1px solid var(--rule); }
.fact dt { margin-bottom: 6px; color: var(--label); }
.fact dd { margin: 0; }

/* drawing: the still shows until the scene runs */
.scene { position: relative; min-width: 0; }
.scene canvas, .scene .lbl, .scene .readout { display: none; }
.scene .still { display: block; width: 100%; height: auto; }

.gl .scene {
  position: sticky;
  top: 0;
  z-index: 3;
  height: var(--box);
  overflow: hidden;
  background: var(--paper);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.gl .scene .still { display: none; }
.gl #services, .gl #sectors, .gl #case { scroll-margin-top: var(--box); }
.gl .scene canvas { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; touch-action: pan-y; }
.gl .scene .lbl { display: block; position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; }

.gl .scene .call { width: 138px; white-space: normal; text-wrap: balance; text-align: right; font-size: 14px; font-weight: 500; line-height: 1.25; pointer-events: none; }
.lane { color: var(--label); pointer-events: none; }
.lane.on { color: var(--ink); }
.page .sheet {
  min-height: 24px;
  padding: 2px 0 2px 8px;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
}
.has-sector .sheet { color: var(--label); }
.has-sector .sheet[aria-pressed="true"] { color: var(--ink); }

.gl .scene .readout {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: baseline;
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: 0;
  font-size: 13px;
  line-height: 1.3;
}
.names-on-drawing .scene .readout { display: none; }
.readout .val { overflow-wrap: anywhere; }

/* contact: a form and a title block on one row pitch, so their rules line up */
/* the video's section: its frame is a pane's, an ink hairline with square corners, and the browser draws the controls */
.video { position: relative; z-index: 4; padding: clamp(40px, 6vw, 96px) var(--pad); border-top: 1px solid var(--ink); background: var(--paper); }
.video video { display: block; box-sizing: border-box; width: 100%; max-width: 960px; height: auto; aspect-ratio: 16 / 9; margin-top: clamp(20px, 3vw, 40px); border: 1px solid var(--ink); background: var(--paper); }
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(40px, 6vw, 96px) var(--pad) clamp(28px, 4vw, 56px);
  border-top: 1px solid var(--ink);
  position: relative;
  z-index: 4;
  background: var(--paper);
}
.form { max-width: 640px; margin-top: clamp(24px, 3vw, 44px); border-top: 1px solid var(--ink); }
.field { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--ink); }
.field .k { padding-top: 12px; color: var(--label); }
.field input, .field select, .field textarea {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: var(--ink);
}
.field textarea { display: block; height: 136px; padding: 8px 0 12px; resize: none; }
/* the select drops the browser's own box, which indents its text, and draws its mark from two gradients */
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 28px;
  background:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 9px) 50% / 5px 5px no-repeat,
    linear-gradient(135deg, var(--ink) 50%, transparent 50%) calc(100% - 4px) 50% / 5px 5px no-repeat;
  cursor: pointer;
}
.field select:has(option[value=""]:checked) { color: var(--label); }
.field .opt { margin-left: 8px; font-size: 11px; }
/* the picker: one row per choice on the form's pitch, with the strip's square as its box */
.opts { display: grid; }
/* 13 px of padding around a 23 px line gives the 49 px row, and the box sits on the first line when a label wraps */
.opts label { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid var(--rule); line-height: 23px; cursor: pointer; }
.opts label:first-child { border-top: 0; }
.field .opts input {
  flex: none;
  width: 13px;
  height: 13px;
  margin: 5px 0 0;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--ink);
  cursor: pointer;
}
.field .opts input:checked { background: var(--ink); }
.page .field .opts input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* focus thickens the row's rule and turns its label to ink */
.field:focus-within { box-shadow: inset 0 -3px 0 var(--ink); }
.field.picks:focus-within { box-shadow: none; } /* the picker marks the focused box itself */
.field:focus-within .k { color: var(--ink); }
.page .field :focus-visible { outline: none; }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.nb { white-space: nowrap; }
/* a link to a section glides there, so the drawing turns on the way; a reader who asks for less motion gets the jump */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .desc, .svc:has(> .row[aria-pressed="true"]) .desc { transition: none; } }
.page .go {
  min-height: 48px;
  white-space: nowrap;
  padding: 0 32px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.page .go:hover { background: var(--accent-text); border-color: var(--accent-text); }
.page .go:disabled { background: var(--label); border-color: var(--label); cursor: default; }
.status { font-size: 15px; }
.page .note { margin-top: 20px; }
@media (min-width: 600px) {
  .field { grid-template-columns: 148px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .fact { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
  .strip nav { order: 0; flex-basis: auto; margin-left: auto; }
  .strip .count { order: 0; margin-left: 0; }
  .fact dt { margin-bottom: 0; }
  .field .k { display: flex; align-items: center; height: 49px; padding-top: 0; }
  .field input, .field select { height: 49px; }
  .field textarea { height: 149px; padding: 12px 0; }
}

@media (min-width: 900px) {
  /* the bar stays on screen here, so it is a pane: the page passes under it and shows through, except under the frosted end that holds the name */
  .strip { position: sticky; top: 0; z-index: 5; height: var(--strip); box-sizing: border-box; flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; background: var(--veil); }
  .strip .frost { align-self: stretch; margin-left: calc(-1 * var(--pad)); padding: 0 16px 0 var(--pad); background: var(--paper); border-right: 1px solid var(--rule); }
  .strip nav { flex-wrap: nowrap; }
  .strip a.book { display: flex; }
  .cols {
    display: grid;
    grid-template-columns: minmax(320px, 480px) minmax(0, 1fr);
    column-gap: clamp(24px, 3vw, 48px);
    padding-left: var(--pad);
  }
  .blk { grid-column: 1; padding-left: 0; padding-right: 0; }
  .lead { grid-row: 1; }
  #services { grid-row: 2; }
  #sectors { grid-row: 3; }
  #case { grid-row: 4; }
  .scene { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
  .gl .scene {
    top: var(--strip);
    height: min(calc(100vh - var(--strip)), 880px);
    overflow: visible;
    background: none;
    border: 0;
  }
  .gl .scene .readout { left: 40px; max-width: 560px; font-size: 14px; }
  .gl #services, .gl #sectors, .gl #case, #services, #sectors, #case, #video, #contact { scroll-margin-top: var(--strip); }
  .gl #case { box-sizing: border-box; min-height: min(calc(100vh - var(--strip)), 880px); } /* the last text is as tall as the drawing, so the drawing stays whole beside it */
}