/* Fortalan, direction C revised: Colour fields.
   Each direction owns one flat colour (yellow, sky, rose). One light grotesk, one heading size.
   The only drawn device is the three-tread stair under every three-step story.
   Home: a black landing (What we build), then one full-screen colour field per example.
   Lists on the canvas are ruled: horizontal ink rules of one weight, never boxes.
   Mock data only: every case on the site is a fictional customer. */

@font-face {
  font-family: "Albert Sans";
  src: url("fonts/AlbertSans-Variable.woff2?v=e289e91274") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("fonts/AlbertSans-Italic-Variable.woff2?v=f7f6e4054b") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: light;
  --ground: #FFFFFF;
  --text: #14161B;
  --text-2: #3F434C;

  /* The direction colours. Fields keep them in both themes; pages read these names. */
  --chat: #E4BA41;           /* yellow (Y2, Fran's pick): chatbots */
  --auto: #93B6DE;          /* sky: custom AI automations */
  --voice: #E69AAB;         /* rose: voice agents */

  /* The black field: the home landing, black in both themes. */
  --black: #000000;
  --on-black: #FFFFFF;
  --on-black-2: #C9CCBD;

  --ink: #14161B;
  --on-ink: #FFFFFF;        /* text on an ink block on a field (the AI in the diagrams), the same in both themes */
  --on-field: #14161B;
  --on-field-2: #2B2E35;
  --stair: #14161B;
  --button-bg: #14161B;
  --button-text: #FFFFFF;
  --focus: #14161B;

  /* Large screens: one unit for every size on the page. It is 1px up to 1440x900 (and at every tablet and phone
     size), and past that it grows with the smaller of the two ratios, so the whole design scales up as one and the
     full-screen fields stay full: about 1.16px at 1920x1080, 1.18px at 2000x1100, 1.48px at 2560x1440, 1.5px at most. */
  --u: clamp(1px, min(0.2px + 100vw / 1800, 0.2px + 100vh / 1125), 1.5px);

  --margin: calc(48 * var(--u));
  --gutter: calc(24 * var(--u));
  --riser: calc(24 * var(--u));
  --field-pad: calc(64 * var(--u));
  --after-field: calc(120 * var(--u));
  --header-h: calc(84 * var(--u));

  /* Rules: the lists on the canvas sit between horizontal rules, so nothing floats (Fran: "structure this bit more
     with lines"). One weight, in ink: --text, 18.10:1 on the light canvas and 17.10:1 on the dark one. Never boxes. */
  --rule-w: 1px;
  --rule: var(--text);

  /* The video frame on a colour field (Fran: "a tiny bit better"). --frame-w is the ink around the picture,
     --frame-r the outer radius; the picture's own corners are --frame-r minus --frame-w.
     Fran's pick: variant 2, a 12 px radius and a 1 px ink hairline. */
  --frame-w: 1px;
  --frame-r: calc(12 * var(--u));
  --frame-bg: var(--ink);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #1A1D12;
    --text: #FFFFFF;
    --text-2: #C9CCBD;
    --button-bg: #FFFFFF;
    --button-text: #14161B;
    --focus: #FFFFFF;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #1A1D12;
  --text: #FFFFFF;
  --text-2: #C9CCBD;
  --button-bg: #FFFFFF;
  --button-text: #14161B;
  --focus: #FFFFFF;
}

/* the black field: the same in both themes, like the colour fields */
.on-black {
  color-scheme: dark;
  --text: var(--on-black);
  --text-2: var(--on-black-2);
  --button-bg: #FFFFFF;
  --button-text: #14161B;
  --focus: #FFFFFF;
  background: var(--black);
  color: var(--on-black);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: "Albert Sans", sans-serif;
  font-size: calc(18 * var(--u));
  line-height: calc(28 * var(--u));
  font-weight: 400;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p, ul, ol, dl, dd, figure, h1, h2, h3 { margin: 0; }
ul, ol { padding: 0; }
img, video, svg { display: block; }
a { color: inherit; text-decoration-thickness: calc(2 * var(--u)); text-underline-offset: calc(5 * var(--u)); }
strong { font-weight: 600; }
button { font: inherit; color: inherit; }
::selection { background: var(--chat); color: var(--ink); }
.field ::selection, .band ::selection, .poc ::selection { background: var(--ink); color: #FFFFFF; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.field :focus-visible, .band :focus-visible, .poc :focus-visible, .sheet-dirs a:focus-visible { outline-color: var(--ink); }
/* a menu row fills the width between other rows and the black header, so its ring sits inside it */
.sheet-dirs a:focus-visible { outline-offset: -6px; }

.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* the skip link always opens over the black header, so it takes the black field's colours in both themes */
.skip {
  position: absolute; left: 16px; top: -120px; z-index: 20;
  padding: 14px 18px;
  background: var(--on-black); color: var(--ink);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 16px; }
.skip:focus-visible { outline-color: var(--on-black); }

.wrap { max-width: calc(1440 * var(--u)); margin: 0 auto; padding-left: var(--margin); padding-right: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* one heading size, everywhere: hierarchy comes from fields and space */
.display {
  font-weight: 300;
  font-size: calc(68 * var(--u));
  line-height: calc(74 * var(--u));
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h3 { font-weight: 600; font-size: calc(22 * var(--u)); line-height: calc(30 * var(--u)); }
.lede { font-size: calc(20 * var(--u)); line-height: calc(30 * var(--u)); color: var(--text-2); text-wrap: pretty; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: calc(52 * var(--u)); padding: 0 calc(26 * var(--u));
  background: var(--button-bg); color: var(--button-text);
  font-weight: 600; font-size: calc(17 * var(--u)); line-height: calc(22 * var(--u));
  text-decoration: none;
  border: 0; border-radius: 0;
  cursor: pointer;
}
.btn:hover { text-decoration: underline; text-decoration-thickness: calc(2 * var(--u)); text-underline-offset: calc(5 * var(--u)); }

/* a text link that says what happens, in ink on a field */
.go {
  display: inline-block;
  font-weight: 600; font-size: calc(17 * var(--u)); line-height: calc(22 * var(--u)); color: var(--ink);
  text-decoration: underline; text-decoration-thickness: calc(2 * var(--u)); text-underline-offset: calc(6 * var(--u));
}
.go:hover { text-decoration-thickness: calc(4 * var(--u)); }

/* ------------------------------------------------------------------ header */
.site-header { background: var(--ground); position: relative; z-index: 5; }
.site-header.on-black { background: var(--black); }
.header-row { display: flex; align-items: center; height: var(--header-h); }
.brand {
  font-weight: 600; font-size: calc(26 * var(--u)); line-height: calc(32 * var(--u)); letter-spacing: -0.01em;
  color: var(--text); text-decoration: none;
  margin-right: calc(56 * var(--u));
}
/* The logo: exactly one spot in the header ([data-wordmark="header"]) and one in the footer ([data-wordmark="footer"]),
   both in index.html. tools/pages_build.py writes the logo into both from brand/v4/logo/svg (LOGO there names the
   candidate; Fran's final pick is c5, Tile) and copies them into every other page. Each spot holds the drawing, which is
   aria-hidden, and the name as .sr text, so the header link and the footer line are named Fortalan.
   Header: the colour version on the black header, 25 px tall (in --u, so it grows with large screens), 24 px on
   phones. Its bars take the direction tokens.
   Footer: the one-colour version in --text, on the canvas in both themes, 24 px tall (22 px on phones) so the cuts
   between the crossbar's three parts stay open. The header link keeps a 44 px tall target around the logo. */
.site-header .brand { display: inline-flex; align-items: center; min-height: calc(44 * var(--u)); }
.wordmark { display: block; }
.wordmark > svg, .wordmark > img { display: block; width: auto; height: calc(25 * var(--u)); }
.brand-foot .wordmark > svg, .brand-foot .wordmark > img { height: calc(24 * var(--u)); }
.logo .lg-chat { fill: var(--chat); }
.logo .lg-auto { fill: var(--auto); }
.logo .lg-voice { fill: var(--voice); }
/* forced colours (high contrast): the header logo's white letters would sit on the forced background, so the
   whole drawing takes the text colour there */
@media (forced-colors: active) { .logo path { fill: CanvasText; } }
.nav { flex: 1; display: flex; align-items: center; justify-content: space-between; column-gap: calc(40 * var(--u)); }
.nav ul { list-style: none; display: flex; align-items: center; gap: calc(28 * var(--u)); }
.nav a {
  position: relative; display: inline-block;
  padding: calc(10 * var(--u)) 0;
  font-weight: 500; font-size: calc(17 * var(--u)); line-height: calc(22 * var(--u));
  color: var(--text); text-decoration: none;
}
/* the decorative colour key under each direction; the label names the link */
.nav-dir::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(3 * var(--u));
  height: calc(4 * var(--u)); background: var(--c);
  transition: height 120ms ease-out;
}
.nav-dir:hover::after { height: calc(8 * var(--u)); }
.nav-dir[aria-current="page"] { background: var(--c); color: var(--ink); padding-left: calc(10 * var(--u)); padding-right: calc(10 * var(--u)); }
.nav-dir[aria-current="page"]::after { background: var(--ink); height: calc(2 * var(--u)); bottom: 0; }
.nav-link:hover, .theme-toggle:hover { text-decoration: underline; text-decoration-thickness: calc(2 * var(--u)); text-underline-offset: calc(6 * var(--u)); }
.theme-toggle {
  margin-left: calc(36 * var(--u)); padding: calc(10 * var(--u)) 0;
  background: none; border: 0; cursor: pointer;
  font-weight: 500; font-size: calc(17 * var(--u)); line-height: calc(22 * var(--u)); color: var(--text);
}
/* the one action in the header, kept quiet: an underlined line of text, not a block */
.header-cta {
  margin-left: calc(32 * var(--u)); padding: calc(10 * var(--u)) 0; white-space: nowrap;
  font-weight: 600; font-size: calc(17 * var(--u)); line-height: calc(22 * var(--u)); color: var(--text);
  text-decoration: underline; text-decoration-thickness: calc(2 * var(--u)); text-underline-offset: calc(6 * var(--u));
}
.header-cta:hover { text-decoration-thickness: calc(4 * var(--u)); }
.menu-toggle { display: none; }
.sheet { display: none; }
/* 1200 to 1279 px: the full nav only just fits ("Case studies" is longer than "Work" was), so its spaces close up a
   little, and the two groups stay further apart than the items inside each (15 px against 28 px before, at 1200) */
@media (min-width: 1200px) and (max-width: 1279px) {
  .brand { margin-right: 40px; }
  .nav ul { gap: 22px; }
  .header-row > .theme-toggle { margin-left: 28px; }
  .header-cta { margin-left: 24px; }
}

@media (max-width: 1199px) {
  .nav, .header-row > .theme-toggle { display: none; }
  .header-cta { margin-left: auto; }
  .menu-toggle {
    display: inline-flex; align-items: center; margin-left: 24px;
    min-height: 44px; min-width: 52px; justify-content: flex-end; padding: 0;
    background: none; border: 0; cursor: pointer;
    font-weight: 600; font-size: 17px; line-height: 22px; color: var(--text);
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
  }
  .sheet:not([hidden]) { display: block; padding-bottom: 32px; }
  .sheet-dirs { list-style: none; }
  .sheet-dirs a {
    display: block; padding: 18px var(--margin);
    background: var(--c); color: var(--ink);
    font-weight: 600; font-size: 20px; line-height: 28px; text-decoration: none;
  }
  .sheet-dirs a:hover { text-decoration: underline; }
  .sheet-links { list-style: none; margin-top: 16px; }
  .sheet-links a { display: block; padding: 12px 0; font-weight: 500; font-size: 20px; line-height: 28px; text-decoration: none; }
  .sheet-links a:hover { text-decoration: underline; }
  .sheet-theme { margin: 8px 0 0; padding: 12px 0; font-size: 20px; line-height: 28px; }
}

/* ------------------------------------------------------------------ the landing: What we build, on the black field */
.landing {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: grid; align-content: center;
  padding: calc(32 * var(--u)) 0 calc(72 * var(--u));
}
.landing-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  align-items: end;
}
.landing-head h1 { grid-column: 1 / span 6; }
.landing-head .lede { grid-column: 7 / span 5; padding-bottom: calc(6 * var(--u)); }

/* three rows, each one link to its example; the colour bar is the nav's key, grown */
.dirs { list-style: none; margin-top: calc(56 * var(--u)); display: grid; row-gap: calc(10 * var(--u)); }
.dir {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  align-items: end;
  padding: calc(12 * var(--u)) 0 calc(14 * var(--u));
  color: var(--on-black); text-decoration: none;
}
.dir-name {
  grid-column: 1 / span 8; justify-self: start;
  position: relative; padding-bottom: calc(16 * var(--u));
  font-weight: 300; font-size: calc(68 * var(--u)); line-height: calc(74 * var(--u)); letter-spacing: -0.02em;
}
.dir-name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(8 * var(--u)); background: var(--c);
  transition: height 120ms ease-out;
}
.dir:hover .dir-name::after, .dir:focus-visible .dir-name::after { height: calc(14 * var(--u)); }
.dir-text { grid-column: 9 / span 4; display: grid; row-gap: calc(8 * var(--u)); padding-bottom: calc(6 * var(--u)); }
.dir-line { font-size: calc(18 * var(--u)); line-height: calc(26 * var(--u)); text-wrap: pretty; }
.dir-case {
  justify-self: start;
  font-weight: 600; font-size: calc(17 * var(--u)); line-height: calc(24 * var(--u)); text-wrap: pretty;
  text-decoration: underline; text-decoration-thickness: calc(2 * var(--u)); text-underline-offset: calc(5 * var(--u));
}
.dir:hover .dir-case { text-decoration-thickness: calc(4 * var(--u)); }
.dir:focus-visible { outline-offset: 6px; }

/* ------------------------------------------------------------------ the examples: one full-screen colour field each */
.poc {
  background: var(--c); color: var(--on-field);
  min-height: 100vh; min-height: 100svh;
  display: grid; align-content: center;
}
.poc-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  padding-top: var(--field-pad); padding-bottom: var(--field-pad);
}
.poc-head, .poc-media, .poc-foot { grid-column: 1 / -1; min-width: 0; }
.poc-head .display { margin-bottom: calc(14 * var(--u)); }
.scn { font-weight: 600; font-size: calc(17 * var(--u)); line-height: calc(24 * var(--u)); margin-bottom: calc(10 * var(--u)); }
.sentence {
  font-size: calc(26 * var(--u)); line-height: calc(36 * var(--u)); letter-spacing: -0.005em;
  text-wrap: pretty;
}
.poc-head .sentence { max-width: 34em; }
.poc-media { margin-top: calc(40 * var(--u)); }
.poc-media .vid { margin-top: calc(32 * var(--u)); }
.poc-foot { margin-top: calc(20 * var(--u)); display: grid; gap: calc(16 * var(--u)); }
.poc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(14 * var(--u)) calc(28 * var(--u)); }
.poc .note { max-width: 40em; }

/* C's story block, kept for the direction pages: a 12-column panel on a field */
.panel-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  padding-top: var(--field-pad); padding-bottom: var(--field-pad);
}
.panel-grid .scn { grid-column: 1 / -1; }
.panel-grid .sentence { grid-column: 1 / span 9; }

/* the stair: three treads, two risers, ink only; step 1 is the lowest */
.stairs { grid-column: 1 / -1; position: relative; margin-top: calc(44 * var(--u)); }
.poc .stairs { margin-top: 0; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.steps > li { margin-bottom: calc((21 * var(--u)) + (var(--n) - 1) * var(--riser)); padding-right: calc(20 * var(--u)); }
.stair { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(54 * var(--u)); overflow: visible; pointer-events: none; }
.stair path { fill: none; stroke: var(--stair); stroke-linecap: butt; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.stair-track { stroke-width: 2px; }
.stair-progress { stroke-width: 6px; }
.js .stair-progress { stroke-dasharray: 0 100000; }
.no-js .stair-progress { display: none; }

.step {
  display: block; width: 100%;
  margin: 0; padding: 0; border: 0; background: none;
  text-align: left; cursor: pointer;
}
.step-n { display: block; font-weight: 300; font-size: calc(26 * var(--u)); line-height: calc(32 * var(--u)); letter-spacing: -0.01em; margin-bottom: calc(6 * var(--u)); }
.step-t { display: grid; font-size: calc(17 * var(--u)); line-height: calc(25 * var(--u)); text-wrap: pretty; }
.step-t > span { grid-area: 1 / 1; }
.step-t-x { visibility: hidden; font-weight: 600; }
.js .step { color: var(--on-field-2); }
.js .step[aria-current="step"] { color: var(--on-field); }
.js .step[aria-current="step"] .step-n,
.js .step[aria-current="step"] .step-t-v { font-weight: 600; }
.step:hover .step-t-v { text-decoration: underline; text-decoration-thickness: calc(2 * var(--u)); text-underline-offset: calc(4 * var(--u)); }

/* The video on a field, in a subtle frame (--frame-w, --frame-r, --frame-bg; variants at the top).
   The frame is padding in ink on a content box: the outer edge keeps the column's width, so the stair above
   lines up with it, and the picture keeps its own aspect ratio inside, so nothing is cropped. The picture's
   corners follow the outer radius minus the frame. Posters, play states and the phone cuts share it.
   The case pages place it in .frame, next to the play button and the note. */
.vid {
  box-sizing: content-box;
  width: calc(100% - 2 * var(--frame-w)); height: auto;
  padding: var(--frame-w);
  aspect-ratio: 16 / 10; object-fit: cover;
  background: var(--frame-bg);
  border-radius: var(--frame-r);
}
.frame {
  grid-column: 1 / -1; margin-top: calc(40 * var(--u));
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr;
  column-gap: var(--gutter);
}
.frame .vid { grid-column: 1 / span 9; grid-row: 1 / span 2; }
.frame .playpause { grid-column: 10 / span 3; grid-row: 1; justify-self: start; align-self: start; }
.frame .note { grid-column: 10 / span 3; grid-row: 2; align-self: end; }
.playpause {
  min-height: calc(48 * var(--u)); min-width: calc(96 * var(--u)); padding: 0 calc(22 * var(--u));
  background: var(--ink); color: #FFFFFF;
  border: 0; border-radius: 0; cursor: pointer;
  font-weight: 600; font-size: calc(17 * var(--u)); line-height: calc(22 * var(--u));
}
.playpause:hover { text-decoration: underline; text-decoration-thickness: calc(2 * var(--u)); text-underline-offset: calc(5 * var(--u)); }
.no-js .playpause { display: none; }
.note { font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: var(--on-field-2); text-wrap: pretty; }

/* a flat colour field or band, for the case pages: the colour comes from --c, or from data-field */
.field, .band { background: var(--c); color: var(--on-field); }
.field[data-field="chat"] { --c: var(--chat); }
.field[data-field="auto"] { --c: var(--auto); }
.field[data-field="voice"] { --c: var(--voice); }

/* ------------------------------------------------------------------ how we work (Demo, Pilot, Live) */
.how { padding-top: var(--after-field); }
.how-head h2 { grid-column: 1 / -1; }
.how-lede { grid-column: 1 / span 5; margin-top: calc(28 * var(--u)); }
.how-head .statement { grid-column: 7 / span 6; margin-top: calc(28 * var(--u)); padding-top: calc(1 * var(--u)); }
.stairs-how { margin-top: calc(80 * var(--u)); }
.stops > li { padding-right: calc(40 * var(--u)); }
.stops h3 { margin-bottom: calc(8 * var(--u)); }
.stops p { font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); text-wrap: pretty; }
/* each stop's two parts sit between rules; the last one stands on the stop's tread */
.parts { margin-top: calc(20 * var(--u)); display: grid; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }
.parts > div { border-top: var(--rule-w) solid var(--rule); padding: calc(10 * var(--u)) 0 calc(14 * var(--u)); }
.parts > div:last-child { padding-bottom: 0; }
.parts dt { font-weight: 600; }
.parts dd { color: var(--text-2); }
.stair-quiet path { stroke: var(--text); }

.tests { margin-top: calc(96 * var(--u)); }
.tests-copy { grid-column: 1 / span 4; }
.tests-copy h3 { margin-bottom: calc(12 * var(--u)); }
.tests-copy p { font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); color: var(--text-2); }
.tests-copy p + p { margin-top: calc(12 * var(--u)); color: var(--text); }
.tests-run { grid-column: 6 / span 7; }
.run { width: 100%; border-collapse: collapse; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }
.run th {
  text-align: left; vertical-align: bottom;
  padding: 0 calc(20 * var(--u)) calc(10 * var(--u)) 0;
  font-weight: 600; font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: var(--text-2);
  border-bottom: var(--rule-w) solid var(--rule);
}
.run td { vertical-align: top; padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u)) 0; border-bottom: var(--rule-w) solid var(--rule); }
.run th:last-child, .run td:last-child { padding-right: 0; }
.run td:first-child { color: var(--text-2); white-space: nowrap; }
.run caption { caption-side: bottom; text-align: left; padding-top: calc(16 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: var(--text-2); }

/* ------------------------------------------------------------------ case studies (the .work classes), one row between rules */
.work { padding-top: calc(128 * var(--u)); }
.work-head { align-items: end; }
.work-head h2 { grid-column: 1 / span 4; }
.work-head .lede { grid-column: 5 / span 6; padding-bottom: calc(6 * var(--u)); }
.work-list { list-style: none; margin-top: calc(56 * var(--u)); border-bottom: var(--rule-w) solid var(--rule); }
.work-row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  padding: calc(22 * var(--u)) 0 calc(26 * var(--u));
  border-top: var(--rule-w) solid var(--rule);
}
.work-dir { grid-column: 1 / span 4; grid-row: 1; align-self: start; display: flex; align-items: center; gap: calc(10 * var(--u)); font-weight: 600; font-size: calc(17 * var(--u)); line-height: calc(30 * var(--u)); }
.sq { flex: none; width: calc(12 * var(--u)); height: calc(12 * var(--u)); background: var(--c); }
/* the sector sits right under the direction, also when the title takes two lines */
.work-sector { grid-column: 1 / span 4; grid-row: 1 / span 2; align-self: start; margin-top: calc(30 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); color: var(--text-2); padding-left: calc(22 * var(--u)); }
.work-row h3 { grid-column: 5 / span 8; grid-row: 1; }
.work-facts { grid-column: 5 / span 8; grid-row: 2; list-style: none; margin-top: calc(4 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); color: var(--text-2); }
.work-facts li + li { margin-top: calc(4 * var(--u)); }
.work-status { grid-column: 10 / span 3; grid-row: 1; font-size: calc(17 * var(--u)); line-height: calc(30 * var(--u)); }
.work-note { margin-top: calc(40 * var(--u)); max-width: 46em; font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: var(--text-2); }

/* ------------------------------------------------------------------ about */
.about { padding-top: calc(128 * var(--u)); }
.about-head { grid-column: 1 / span 4; }
.about-head .lede { margin-top: calc(20 * var(--u)); }
.about-body { grid-column: 6 / span 7; padding-top: calc(10 * var(--u)); }
.statement-big { font-size: calc(26 * var(--u)); line-height: calc(36 * var(--u)); letter-spacing: -0.005em; text-wrap: pretty; }
.statement-big strong { font-weight: 500; }
.about-name .review-flag { margin-bottom: calc(6 * var(--u)); }
/* the founder's note and the facts start on one line: each column under its rule */
.about-pair { margin-top: calc(56 * var(--u)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(32 * var(--u)) calc(48 * var(--u)); }
.founder { border-top: var(--rule-w) solid var(--rule); padding-top: calc(12 * var(--u)); }
.founder p { font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); }
.founder p + p { margin-top: calc(12 * var(--u)); }
.review-flag { font-weight: 600; font-size: calc(15 * var(--u)) !important; line-height: calc(22 * var(--u)) !important; color: var(--text-2); }
.sig { font-weight: 600; }
.facts { display: grid; font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); border-bottom: var(--rule-w) solid var(--rule); }
.facts > div { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: calc(16 * var(--u)); padding: calc(12 * var(--u)) 0; border-top: var(--rule-w) solid var(--rule); }
.facts dt { font-weight: 600; }
.facts dd { color: var(--text-2); }
.rules { margin-top: calc(72 * var(--u)); }
.rules h3 { margin-bottom: calc(16 * var(--u)); }
/* a ruled grid: every rule between rules, in the same two columns as the note and the facts */
.rules-list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(48 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); }
.rules-list > li { border-top: var(--rule-w) solid var(--rule); padding: calc(12 * var(--u)) 0 calc(14 * var(--u)); }
.rules-list > li:nth-last-child(-n+2) { border-bottom: var(--rule-w) solid var(--rule); }

/* ------------------------------------------------------------------ contact */
.contact { padding-top: calc(128 * var(--u)); padding-bottom: calc(128 * var(--u)); }
.contact-head { grid-column: 1 / span 5; }
.contact-head .lede { margin-top: calc(20 * var(--u)); }
.contact-direct { margin-top: calc(48 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); }
.contact-direct p + p { margin-top: calc(8 * var(--u)); }
.mini { font-weight: 600; }
.contact-direct .email { margin-top: calc(2 * var(--u)); margin-bottom: calc(14 * var(--u)); font-size: calc(26 * var(--u)); line-height: calc(36 * var(--u)); letter-spacing: -0.005em; }
/* the address is a placeholder until the domain is registered; its review flag sits right under it */
.contact-direct .email:has(+ .review-flag) { margin-bottom: calc(2 * var(--u)); }
.contact-direct .review-flag { margin-bottom: calc(14 * var(--u)); }
.form { grid-column: 7 / span 6; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(24 * var(--u)); align-content: start; padding-top: calc(10 * var(--u)); }
.form-req { grid-column: 1 / -1; font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: var(--text-2); }
.field-row { display: grid; gap: calc(8 * var(--u)); align-content: start; }
.field-wide { grid-column: 1 / -1; }
.field-row label { font-weight: 600; font-size: calc(17 * var(--u)); line-height: calc(22 * var(--u)); }
.opt { font-weight: 400; color: var(--text-2); }
.form input, .form textarea {
  width: 100%; min-height: calc(52 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u));
  font: inherit; font-size: calc(18 * var(--u)); line-height: calc(24 * var(--u)); color: var(--text);
  background: var(--ground);
  border: 2px solid var(--text); border-radius: 0;
}
.form textarea { min-height: calc(128 * var(--u)); resize: vertical; }
.form input::placeholder { color: var(--text-2); opacity: 1; }
.hint { font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: var(--text-2); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: calc(16 * var(--u)) calc(24 * var(--u)); margin-top: calc(8 * var(--u)); }
.form-note { font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: var(--text-2); }
.form-status { font-weight: 600; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }
.form-status:empty { display: none; }

/* ------------------------------------------------------------------ footer */
.site-footer { padding: calc(64 * var(--u)) 0 calc(56 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }
.footer-grid { row-gap: calc(40 * var(--u)); }
.footer-brand { grid-column: 1 / span 4; color: var(--text-2); }
.footer-brand .brand-foot { color: var(--text); margin: 0 0 calc(14 * var(--u)); }
.footer-grid > nav:nth-child(2) { grid-column: 6 / span 3; }
.footer-grid > nav:nth-child(3) { grid-column: 9 / span 4; }
.footer-nav ul { list-style: none; display: grid; gap: calc(8 * var(--u)); }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-legal { grid-column: 1 / -1; display: grid; gap: calc(4 * var(--u)); font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: var(--text-2); }
.legal-line { color: var(--text); }

/* ================================================================== desktop: the examples fit one screen
   No CSS scroll snapping: y proximity pulled short wheel and trackpad scrolls back to the field they started from.
   main.js (settleOnField) carries a scroll that ends just short of a field on to it, only ever forwards. */
@media (min-width: 1200px) and (min-height: 640px) {
  .poc-grid {
    grid-template-rows: auto minmax(0, 1fr);
    padding-top: calc(40 * var(--u)); padding-bottom: calc(40 * var(--u));
  }
  .poc-head { grid-column: 1 / span 4; grid-row: 1; }
  .poc-head .sentence { max-width: none; }
  /* main.js sets --vid-w so that the steps and the video fit the screen; the steps take the video's width */
  .poc-media { grid-column: 5 / span 8; grid-row: 1 / span 2; margin-top: 0; width: var(--vid-w, 100%); justify-self: end; }
  .poc-media .vid { margin-top: calc(24 * var(--u)); }
  .poc-foot { grid-column: 1 / span 4; grid-row: 2; align-self: end; margin-top: calc(32 * var(--u)); padding-right: calc(8 * var(--u)); }
}

/* 1200 to 1279 px: the one heading size steps down a little, so the longest word of a four-column heading
   ("automations" on the home's example) stays inside its columns, clear of step 1 beside it */
@media (min-width: 1200px) and (max-width: 1279px) {
  .display, .dir-name { font-size: 60px; line-height: 66px; }
}

/* ================================================================== tablet: 720 to 1199 px */
@media (max-width: 1199px) {
  :root { --margin: 32px; --field-pad: 40px; --after-field: 96px; }
  .display { font-size: 56px; line-height: 62px; }
  .dir-name { font-size: 56px; line-height: 62px; }
  .landing-head h1, .landing-head .lede { grid-column: 1 / -1; }
  .landing-head .lede { margin-top: 16px; max-width: 34em; }
  .dirs { margin-top: 40px; }
  .dir-name { grid-column: 1 / -1; margin-bottom: 14px; }
  .dir-text { grid-column: 1 / span 9; padding-bottom: 0; }
  .poc-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 24px; }
  .poc-foot .poc-actions { justify-content: flex-end; }
}

/* below 1024 px the stair turns on its side and everything stacks */
@media (max-width: 1023px) {
  .sentence { max-width: 34em; }
  .panel-grid .sentence { grid-column: 1 / -1; }
  .stairs { margin-top: 32px; }
  .poc-media { margin-top: 32px; }
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 22px; align-items: start; max-width: 40em; }
  .steps > li { margin-bottom: 0; padding-right: 0; padding-left: calc(30px + (var(--n) - 1) * 12px); }
  .stair { top: 0; bottom: auto; width: 36px; height: 100%; }
  .step { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; }
  .step-n, .steps > li > .step-n { font-size: 20px; line-height: 25px; margin: 0; }
  .no-js .steps > li { padding-left: 0; }
  .no-js .stair { display: none; }
  .poc-media .vid { margin-top: 28px; }

  .frame { margin-top: 32px; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 14px; }
  .frame .vid { grid-column: 1 / -1; grid-row: 1; }
  .frame .note { grid-column: 1; grid-row: 2; align-self: center; }
  .frame .playpause { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; }

  .how-lede, .how-head .statement { grid-column: 1 / -1; max-width: 40em; }
  .how-lede { margin-top: 20px; }
  .how-head .statement { margin-top: 16px; }
  .stairs-how { margin-top: 48px; }
  .stops { row-gap: 40px; }
  .stops > li { padding-right: 0; }
  .tests-copy, .tests-run { grid-column: 1 / -1; }
  .tests-run { margin-top: 32px; }

  .work-head h2, .work-head .lede { grid-column: 1 / -1; }
  .work-head .lede { margin-top: 20px; max-width: 34em; }
  .work-dir, .work-sector { grid-column: 1 / span 3; }
  .work-row h3, .work-facts { grid-column: 4 / -1; }
  .work-status { grid-column: 4 / -1; grid-row: 3; margin-top: 8px; line-height: 26px; }

  .about-head, .about-body { grid-column: 1 / -1; }
  .about-body { margin-top: 48px; padding-top: 0; }
  .contact-head, .form { grid-column: 1 / -1; }
  .form { margin-top: 48px; padding-top: 0; }

  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > nav:nth-child(2) { grid-column: 1 / span 6; }
  .footer-grid > nav:nth-child(3) { grid-column: 7 / span 6; }
}

/* ================================================================== phone: below 720 px */
@media (max-width: 719px) {
  :root { --margin: 16px; --gutter: 16px; --riser: 16px; --field-pad: 28px; --after-field: 72px; --header-h: 68px; }
  body { font-size: 17px; line-height: 26px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .display { font-size: 40px; line-height: 46px; }
  h3 { font-size: 20px; line-height: 28px; }
  .lede { font-size: 18px; line-height: 28px; }
  .brand { font-size: 24px; line-height: 30px; margin-right: 16px; }
  .site-header .wordmark > svg, .site-header .wordmark > img { height: 24px; }
  .brand-foot .wordmark > svg, .brand-foot .wordmark > img { height: 22px; }
  .header-cta { font-size: 16px; }
  .menu-toggle { margin-left: 18px; }

  /* the black field fills exactly one screen under the header, so one swipe reaches the first colour field */
  .landing { min-height: 0; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h));
    padding: 12px 0 28px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .landing .display { font-size: clamp(32px, 5.4svh, 40px); line-height: 1.12; }
  .landing-head .lede { font-size: 16px; line-height: 24px; }
  .landing .dir-line { display: none; }
  .landing-head .lede { margin-top: 12px; }
  .dirs { margin-top: clamp(16px, 4svh, 36px); row-gap: clamp(4px, 1.6svh, 14px); }
  .dir { padding: 10px 0 12px; }
  .dir-name { font-size: clamp(28px, 4.6svh, 36px); line-height: 1.15; padding-bottom: 8px; margin-bottom: 8px; }
  .dir-name::after { height: 6px; }
  .dir:hover .dir-name::after, .dir:focus-visible .dir-name::after { height: 10px; }
  .dir-text { grid-column: 1 / -1; row-gap: 6px; }
  .dir-line { font-size: 17px; line-height: 25px; }
  .dir-case { font-size: 16px; }

  .panel-grid { grid-template-columns: minmax(0, 1fr); padding-bottom: 32px; }
  .stairs { margin-top: 26px; }
  .frame { margin-top: 26px; }
  .poc { align-content: start; }
  .poc-head .display { margin-bottom: 10px; }
  .sentence { font-size: 21px; line-height: 30px; }
  .poc-media { margin-top: 26px; }
  .steps { row-gap: 18px; }
  .steps > li { padding-left: calc(26px + (var(--n) - 1) * 12px); }
  .step { grid-template-columns: 22px minmax(0, 1fr); }
  /* on a phone the video comes first, right under the sentence, and the steps follow it */
  .poc-media { display: flex; flex-direction: column; }
  .poc-media .vid { order: -1; margin-top: 0; margin-bottom: 26px; aspect-ratio: 4 / 5; }
  .poc-media .stairs { margin-top: 0; }
  .poc-foot { grid-template-columns: minmax(0, 1fr); }
  .poc-foot .poc-actions { justify-content: space-between; }
  .frame .vid { aspect-ratio: 4 / 5; }

  .stairs-how { margin-top: 40px; }
  .stops { row-gap: 32px; }
  .tests { margin-top: 72px; }

  .run thead { display: none; }
  .run { display: flex; flex-direction: column; }
  .run tbody, .run tr, .run td { display: block; width: 100%; }
  .run td:first-child { white-space: normal; }
  .run tr { padding: 14px 0; border-top: var(--rule-w) solid var(--rule); }
  .run tbody tr:last-child { border-bottom: var(--rule-w) solid var(--rule); }
  .run td { padding: 0; border-bottom: 0; }
  .run td[data-label="Check"] { font-weight: 600; color: var(--text); }
  .run td[data-label="Case"] { font-size: 15px; line-height: 22px; }
  .run td[data-label="Result"]::before { content: "Result: "; color: var(--text-2); }
  .run caption { display: block; order: 2; }

  .work { padding-top: 96px; }
  .work-list { margin-top: 32px; }
  .work-row { grid-template-columns: minmax(0, 1fr); padding: 20px 0 22px; }
  .work-dir, .work-sector, .work-row h3, .work-facts, .work-status { grid-column: 1; grid-row: auto; }
  .work-sector { padding-left: 22px; margin-top: 0; margin-bottom: 8px; }
  .work-status { margin-top: 8px; }

  .about { padding-top: 96px; }
  .statement-big { font-size: 21px; line-height: 30px; }
  .about-pair { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .rules { margin-top: 56px; }
  .rules-list { grid-template-columns: minmax(0, 1fr); }
  .rules-list > li { padding: 11px 0 12px; }
  .rules-list > li:nth-last-child(2) { border-bottom: 0; }

  .contact { padding-top: 96px; padding-bottom: 96px; }
  .contact-direct { margin-top: 32px; }
  .contact-direct .email { font-size: 22px; line-height: 30px; }
  .form { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 40px; }

  .footer-grid > nav:nth-child(2), .footer-grid > nav:nth-child(3) { grid-column: 1 / -1; }
}

/* short phones (iPhone SE and the like): the landing still fits one screen */
@media (max-width: 719px) and (max-height: 620px) {
  .landing { padding: 8px 0 16px; }
  .landing .display { font-size: 30px; }
  .landing-head .lede { font-size: 15px; line-height: 22px; margin-top: 8px; }
  .dirs { margin-top: 14px; row-gap: 0; }
  .dir { padding: 6px 0 8px; }
  .dir-name { font-size: 26px; padding-bottom: 6px; margin-bottom: 6px; }
  .dir-case { font-size: 15px; }
}

/* ------------------------------------------------------------------ reduced motion: everything instant */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

/* ------------------------------------------------------------------ production (build_site.py)
   The CSP allows styles from this site only ('self'), so the pages carry no style attributes: the build turns the
   mockup's style="--c: ..." and style="--n: ..." into these classes. */
.c-chat { --c: var(--chat); }
.c-auto { --c: var(--auto); }
.c-voice { --c: var(--voice); }
.n-1 { --n: 1; }
.n-2 { --n: 2; }
.n-3 { --n: 3; }
/* without JavaScript the theme follows the system and the menu cannot open, so their buttons are not shown */
.no-js [data-theme-toggle], .no-js .menu-toggle { display: none; }