/* ===== tokens: colours, type, spacing, radii and shadows. Components use these variables ===== */
:root {
  --white: #fff;
  --mist: #f5f9ff;
  --sky-100: #e8f2ff;
  --sky-200: #d2e5ff;
  --sky-300: #aed2fe;
  --sky-400: #81bafe;
  --sky-500: #5da0f2;
  --sky-600: #3680dd;
  --sky-700: #2160b6;
  --hero-top: #4087e5;
  --hero-bottom: #76b2f5;
  --on-sky: var(--white);
  --bloom-1: #81bafe;
  --bloom-2: #5da0f2;
  --hill-back: var(--sky-300);
  --hill-front: var(--white);
  --navy-950: #0a1f38;
  --navy-900: #0f2a4a;
  --navy-800: #1b3b62;
  --ink: var(--navy-900);
  --emph: #2f72e0;
  --ink-muted: #4f647c;
  --ink-subtle: #5d7189;
  --on-navy: var(--white);
  --line: #dbe6f2;
  --line-control: #7890b0;
  --focus: var(--navy-900);
  --focus-halo: #5da0f259;
  --warm-100: #fdf3ea;
  --warm-300: #f5cfab;
  --warm-500: #e8a46c;
  --warm-700: #8a4a1b;
  --success: #1f7a5a;
  --success-soft: #e3f3ec;
  --danger: #b3343f;
  --danger-soft: #fbe8ea;
  --glass-fill: #ffffff8c;
  --glass-fill-strong: #ffffffe6;
  --glass-tint: #d2e5ff8c;
  --glass-border: #ffffffbf;
  --glass-solid: #fffffff0;
  --shine-high: #ffffffd9;
  --shine-mid: #ffffff4d;
  --shine-low: #ffffff0f;
  --btn-light: #ffffffb8;
  --btn-light-glass: #3680dd5c;
  --shadow-glass: 0 8px 32px 0 #0f172a12, 0 0 0 1px #0f172a0f, inset 0 1px 0 0 #ffffffe6;
  --shadow-lift: 0 24px 64px -24px #0f172a38;
  --shadow-button: 0 6px 16px -6px #0f2a4a73;
  --shadow-field: inset 0 1px 2px 0 #0f2a4a0f, 0 1px 2px 0 #0f2a4a0a;
  --blur-sm: 12px;
  --blur-md: 12px;
  --blur-lg: 64px;
  --saturate-glass: 100%;
  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --text-headline: clamp(2.5rem, 1.2rem + 3.5vw, 3.625rem);
  --text-h2: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);
  --text-h3: clamp(1.5rem, 1.35rem + .6vw, 1.75rem);
  --text-title: 1.25rem;
  --text-lede: 1.25rem;
  --text-body: 1rem;
  --text-small: .875rem;
  --text-label: .8125rem;
  --text-compact: .9375rem;
  --text-caption: .75rem;
  --text-figure: 2rem;
  --leading-headline: 1;
  --text-subtitle: 1rem;
  --leading-subtitle: 1.3;
  --tracking-subtitle: 0;
  --leading-h2: 1.2;
  --leading-h3: 1.286;
  --leading-title: 1.4;
  --leading-lede: 1.6;
  --leading-body: 1.625;
  --leading-small: 1.571;
  --tracking-headline: -.02em;
  --tracking-h2: -.025em;
  --tracking-h3: -.015em;
  --tracking-title: -.01em;
  --tracking-label: .01em;
  --tracking-wordmark: -.02em;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --section: var(--space-24);
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 999px;
  --container: 70rem;
  --measure: 40rem;
  --gutter: 1rem;
  --tap: 2.75rem;
  --topbar-logo: 1.75rem;
  --icon-size: 1.5rem;
  --icon-stroke: 1.5;
  --ease: .2s ease;
}

/* palettes: Sky, Dawn and Clear. A section, card or drawing with data-palette takes that palette's --sky-*, --warm-* and --bloom-* colours */
[data-palette=sky] {
  --sky-100: #e8f2ff;
  --sky-200: #d2e5ff;
  --sky-300: #aed2fe;
  --sky-400: #81bafe;
  --sky-500: #5da0f2;
  --sky-600: #3680dd;
  --sky-700: #2160b6;
  --bloom-1: #81bafe;
  --bloom-2: #5da0f2;
  --warm-100: #fdf3ea;
  --warm-300: #f5cfab;
  --warm-500: #e8a46c;
  --warm-700: #8a4a1b;
  --line: #dbe6f2;
  --glass-tint: #d2e5ff8c;
  --focus-halo: #5da0f259;
}

[data-palette=dawn] {
  --sky-100: #f9f0dd;
  --sky-200: #f5e1ba;
  --sky-300: #f1c87c;
  --sky-400: #f3a23c;
  --sky-500: #ed791d;
  --sky-600: #c35a27;
  --sky-700: #944723;
  --bloom-1: #f3a23c;
  --bloom-2: #ed791d;
  --warm-100: #e8f6fc;
  --warm-300: #b4dbed;
  --warm-500: #498eb9;
  --warm-700: #295a7b;
  --line: #eee3cf;
  --glass-tint: #f5e1ba8c;
  --focus-halo: #ed791d59;
}

[data-palette=clear] {
  --sky-100: #f4f1e2;
  --sky-200: #dee7f1;
  --sky-300: #abd6ee;
  --sky-400: #78c1e6;
  --sky-500: #71a4cc;
  --sky-600: #6481a3;
  --sky-700: #456286;
  --bloom-1: #f7f180;
  --bloom-2: #c5e4a0;
  --warm-100: #fbfad3;
  --warm-300: #eadb64;
  --warm-500: #e6ce57;
  --warm-700: #64581e;
  --line: #dde6ed;
  --glass-tint: #dee7f18c;
  --focus-halo: #71a4cc59;
}

/* the gutter and the space between sections grow with the window */
@media (width>=640px) {
  :root {
    --gutter: 1.5rem;
  }
}

@media (width>=768px) {
  :root {
    --section: var(--space-32);
  }
}

@media (width>=1024px) {
  :root {
    --gutter: 2rem;
  }
}

/* more tokens: the glow colours, the soft shadows and the display size */
:root {
  --glow-base: #3f86e6;
  --glow-deep: #2a63d2;
  --glow-mid: #5b9cf0;
  --glow-light: #8fc1fa;
  --glow-lamp: #ffffff80;
  --glow-ray: #ffffff42;
  --glow-grid: #ffffff24;
  --glow-wash: #fff3;
  --glow-wash-edge: #ffffff73;
  --glow-halo: #8fc1fa42;
  --glow-line: #3680dd14;
  --glow-glass-blue: #3f86e629;
  --glow-glass-blue-edge: #3f86e657;
  --shadow-soft: 0 1px 2px #1f46780f, 0 16px 36px -14px #3680dd4d, 0 44px 80px -28px #3680dd57;
  --shadow-soft-blue: 0 24px 48px -18px #2a63d28c;
  --text-display: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
}

/* ===== font: DM Sans, hosted here (assets/fonts, SIL Open Font License in OFL.txt) so no page asks Google for it. One variable file per subset covers the three weights the site uses (400, 500, 700); the latin-ext file only loads for a character outside latin ===== */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===== base: box sizing, the page, headings, lists, images, links, focus, selection, the skip link ===== */
*,:before,:after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-24);
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  *,:before,:after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1,h2,h3,p,ul,ol,figure {
  margin: 0;
}

ul[role=list],ol[role=list] {
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--sky-200);
  color: var(--ink);
}

html {
  scrollbar-color: var(--sky-300) transparent;
}

input,textarea {
  caret-color: var(--navy-900);
}

.visually-hidden {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
}

.skip-link {
  left: var(--space-4);
  z-index: 20;
  background: var(--navy-900);
  color: var(--on-navy);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  position: absolute;
  top: -4rem;
}

.skip-link:focus {
  top: var(--space-4);
  outline-color: var(--white);
}

/* ===== layout and type: the container, icons, the headline, section titles, the emphasised phrase, the subtitle and the lede ===== */
.container {
  width: min(var(--container), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  stroke-width: var(--icon-stroke);
  flex: none;
}

.headline {
  font-size: var(--text-headline);
  font-weight: var(--weight-medium);
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-headline);
  text-align: left;
  text-wrap: balance;
}

.section-title {
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
  max-width: 22ch;
}

.emph {
  color: var(--emph);
}

.sky--deep .emph {
  color: var(--sky-100);
}

.subtitle {
  font-size: var(--text-subtitle);
  font-weight: var(--weight-regular);
  line-height: var(--leading-subtitle);
  letter-spacing: var(--tracking-subtitle);
  font-variation-settings: "opsz" 9;
}

.lede {
  font-size: var(--text-lede);
  line-height: var(--leading-lede);
  max-width: 32rem;
}

/* ===== glass: the one surface, a fill, a 1px edge, a soft lift and a blur ===== */
.glass {
  color: var(--ink);
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(var(--blur-md)) saturate(var(--saturate-glass));
}

.glass--lift {
  box-shadow: var(--shadow-lift), var(--shadow-glass);
}

/* ===== sky: the soft backdrop that gives glass something to blur. Deep Sky (.sky--deep) is the hero band ===== */
.sky {
  isolation: isolate;
  background: linear-gradient(180deg, var(--sky-200) 0%, var(--sky-100) 100%);
  position: relative;
  overflow: hidden;
}

.sky:before,.sky:after {
  content: "";
  z-index: -2;
  filter: blur(var(--blur-lg));
  border-radius: 50%;
  position: absolute;
}

.sky:before {
  aspect-ratio: 1;
  background: var(--sky-300);
  opacity: .75;
  width: 62%;
  top: -30%;
  left: -14%;
}

.sky:after {
  aspect-ratio: 1;
  background: var(--bloom-1);
  opacity: .45;
  width: 48%;
  bottom: -26%;
  right: -10%;
}

.sky--deep {
  background: linear-gradient(180deg, var(--hero-top) 0%, var(--hero-bottom) 100%);
  color: var(--on-sky);
}

.sky--deep:before,.sky--deep:after {
  display: none;
}

/* ===== buttons: .btn, its sizes (.btn-lg, .btn-sm), .btn-primary with its shine and the light that rises on hover, and .btn-glass. The website's site.css and the landing page's have the same button rules: change both ===== */
.btn {
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: 0 var(--space-6);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-compact);
  font-weight: var(--weight-medium);
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background-color var(--ease), box-shadow var(--ease), border-color var(--ease), color var(--ease);
  border: 1px solid #0000;
  line-height: 1.25;
  text-decoration: none;
  display: inline-flex;
  position: relative;
}

.btn-lg {
  min-height: 3.25rem;
  padding-inline: var(--space-8);
  font-size: var(--text-body);
}

.btn-sm {
  min-height: 2.5rem;
  padding-inline: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-small);
}

.btn-primary {
  background: var(--navy-900);
  color: var(--on-navy);
  box-shadow: var(--shadow-button);
}

.btn-primary:before {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(160deg, var(--shine-high) 0%, var(--shine-low) 42%, var(--shine-mid) 100%);
  -webkit-mask-composite: xor;
  padding: 1px;
  position: absolute;
  inset: -1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor,source-over;
  mask: linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}

.btn>* {
  z-index: 1;
  position: relative;
}

.btn-primary:after {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(90% 120% at 50% 132%, var(--btn-light) 0%, transparent 66%);
  opacity: 0;
  transition: opacity .24s;
  position: absolute;
  inset: -1px;
}

.btn-primary:hover:after,.btn-primary:focus-visible:after {
  opacity: 1;
}

.btn-primary:hover {
  background: var(--navy-800);
  box-shadow: var(--shadow-button), inset 0 -1px 0 0 var(--btn-light);
}

.btn-primary:active {
  background: var(--navy-950);
  box-shadow: none;
  transform: translateY(1px);
}

.btn-primary:active:after {
  opacity: 1;
  background: radial-gradient(95% 125% at 50% 142%, var(--white) 0%, transparent 70%);
}

.btn-glass {
  background: var(--glass-fill-strong);
  color: var(--ink);
  border-color: var(--glass-border);
  backdrop-filter: blur(var(--blur-sm)) saturate(var(--saturate-glass));
}

.btn-glass:hover {
  background: var(--glass-solid);
}

.btn-glass:after {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(90% 120% at 50% 132%, var(--btn-light-glass) 0%, transparent 66%);
  opacity: 0;
  transition: opacity .24s;
  position: absolute;
  inset: -1px;
}

.btn-glass:hover:after,.btn-glass:focus-visible:after,.btn-glass:active:after {
  opacity: 1;
}

.btn-glass:active {
  transform: translateY(1px);
}

.sky--deep .btn-glass:not(.demo-pill) {
  --btn-light-glass: var(--btn-light);
}

.btn:disabled {
  background: var(--sky-100);
  color: var(--ink-subtle);
  box-shadow: none;
  cursor: not-allowed;
}

.btn:disabled:before,.btn:disabled:after {
  display: none;
}

/* text links */
.text-link {
  color: var(--sky-700);
  font-weight: var(--weight-medium);
  text-underline-offset: .2em;
  text-decoration-thickness: .08em;
}

.text-link:hover {
  color: var(--navy-900);
  text-decoration-thickness: .14em;
}

/* ===== logo: the supplied artwork, drawn inline ===== */
.logo {
  align-items: center;
  line-height: 0;
  text-decoration: none;
  display: inline-flex;
}

.logo svg {
  width: auto;
  height: 2rem;
  display: block;
}

.site-footer .logo svg {
  height: 1.5rem;
}

.logo svg[data-art] {
  display: none;
}

:root[data-logo=a] .logo svg[data-art=a] {
  display: block;
}

/* the top bar's veil: a blurred layer behind the bar that fades out towards its lower edge */
.site-nav:before {
  content: "";
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(20px)saturate(150%);
  background: linear-gradient(#ffffffe0 0%,#ffffff9e 55%,#fff0 100%);
  position: absolute;
  inset: 0 0 -1.75rem;
  -webkit-mask-image: linear-gradient(#000 0 50%,#0000 100%);
  mask-image: linear-gradient(#000 0 50%,#0000 100%);
}

/* ===== hero: the deep Sky as a rounded panel inside a thin white frame ===== */
:root {
  --frame: clamp(.5rem, .8vw, .75rem);
  --frame-radius: clamp(1.5rem, 3vw, 2.75rem);
}

.hero {
  margin: var(--frame);
  border-radius: var(--frame-radius);
  padding-top: var(--space-16);
  padding-bottom: 0;
}

.hero-inner {
  gap: var(--space-8);
  display: grid;
}

.hero-lede {
  max-width: 26rem;
}

@media (width>=900px) {
  .hero-inner {
    gap: var(--space-12) var(--space-16);
    grid-template-columns: minmax(0,7fr) minmax(0,3fr);
    align-items: start;
  }
}

/* the website's hero (.hero--site): the headline, the two buttons, the lede and the call facts */
.hero--site .hero-inner {
  grid-template-areas: "title""lede""ctas""facts""shot";
}

.hero.hero--site {
  margin-top: 5.5rem;
}

.hero--site .hero-title {
  grid-area: title;
}

.hero--site .hero-lede {
  grid-area: lede;
  max-width: 26rem;
}

.hero--site .hero-ctas {
  gap: var(--space-3);
  flex-direction: column;
  grid-area: ctas;
  display: flex;
}

.hero--site .hero-ctas .btn {
  width: 100%;
}

.hero--site .hero-inner>.call-facts {
  grid-area: facts;
}

.hero--site .hero-demo {
  background: color-mix(in srgb, var(--white) 30%, transparent);
  border-color: color-mix(in srgb, var(--white) 55%, transparent);
}

.hero--site .hero-demo:hover {
  background: color-mix(in srgb, var(--white) 58%, transparent);
}

@media (width>=520px) {
  .hero--site .hero-ctas {
    flex-flow: wrap;
  }
  .hero--site .hero-ctas .btn {
    width: auto;
  }
}

@media (width>=900px) {
  .hero--site .hero-inner {
    gap: var(--space-8) var(--space-16);
    grid-template-columns: minmax(0,7fr) minmax(0,3fr);
    grid-template-areas: "title lede""ctas facts""shot shot";
  }
  .hero--site .hero-lede {
    padding-top: var(--space-3);
  }
}

/* the hero's pillars: the highlights under the buttons, an icon each */
.hero--site[data-pillars] .hero-inner {
  grid-template-areas: "title""lede""ctas""facts""pillars""shot";
}

.hero-pillars {
  margin: var(--space-4) 0 0;
  padding: var(--space-6) 0 0;
  gap: var(--space-6);
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  grid-area: pillars;
  list-style: none;
  display: grid;
}

.hero-pillar-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-lg);
  color: currentColor;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  place-items: center;
  display: grid;
}

.hero-pillar-icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.proof-card-title {
  margin-bottom: var(--space-1);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
  display: block;
}

.hero-pillar-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lede);
  line-height: var(--leading-lede);
  font-weight: var(--weight-medium);
}

.hero-pillars p {
  opacity: .95;
  max-width: 22rem;
  font-size: var(--text-small);
  line-height: var(--leading-small);
  margin: 0;
}

@media (width>=900px) {
  .hero--site[data-pillars] .hero-inner {
    grid-template-areas: "title lede""ctas facts""pillars pillars""shot shot";
  }
  .hero-pillars {
    grid-template-columns: repeat(var(--n,3), minmax(0, 1fr));
    gap: var(--space-8);
  }
}

/* phones: the hero panel */
@media (width<=639px) {
  .hero {
    padding-top: var(--space-12);
  }
}

/* ===== sections: the shared section band, then each section's base layout ===== */
.section {
  padding-block: var(--section);
}

/* a menu link jumps to a section: most of its top padding scrolls under the top bar, so the heading sits close below it */
.section {
  scroll-margin-top: calc(var(--space-8) - var(--section));
}

.section--mist {
  background: var(--mist);
}

/* problem: the pain cards, each a drawing on its own sky with the words under it */
.problem-intro,.squad-copy {
  gap: var(--space-6);
  display: grid;
}

.problem-intro .section-title {
  max-width: 34ch;
}

.problem-intro .lede,.squad-copy .lede {
  color: var(--ink-muted);
  max-width: 38rem;
}

.pains {
  gap: var(--space-6);
  margin: var(--space-12) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.pain {
  border-radius: var(--radius-2xl);
}

.pain-card {
  isolation: isolate;
  border-radius: inherit;
  height: 100%;
  box-shadow: var(--shadow-lift);
  background: radial-gradient(70% 55% at 100% 0%, var(--sky-300) 0%, transparent 70%), radial-gradient(60% 55% at 0% 100%, color-mix(in srgb, var(--bloom-1) 40%, transparent) 0%, transparent 70%), linear-gradient(180deg, var(--sky-200), var(--sky-100));
  grid-template-rows: auto 1fr;
  display: grid;
  position: relative;
  overflow: hidden;
}

.pain-art {
  aspect-ratio: 256/168;
  padding: var(--space-3) var(--space-3) 0;
  grid-row: 1;
}

.pain-art :is(svg,img) {
  width: 100%;
  height: 100%;
  display: block;
}

.pain-body {
  z-index: 1;
  gap: var(--space-3);
  margin: calc(var(--space-12) * -1) var(--space-3) var(--space-3);
  padding: var(--space-6);
  flex-direction: column;
  grid-row: 2;
  display: flex;
  position: relative;
}

.pain-title {
  font-size: var(--text-title);
  font-weight: var(--weight-medium);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  text-wrap: balance;
}

.pain-line {
  color: var(--ink-muted);
}

@media (width>=900px) {
  .pains {
    justify-content: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    display: flex;
  }
  .pains>.pain {
    flex: 0 1 calc((100% - 2 * var(--space-8)) / 3);
  }
  .pain-body {
    padding: var(--space-6) var(--space-6) var(--space-8);
  }
}

/* problem: the cards rise into place once, as the section arrives (script sets data-motion; without it everything is simply there) */
.pains[data-motion] .pain {
  transition: opacity .7s cubic-bezier(.16,1,.3,1),translate .8s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i) * .12s);
}

.pains[data-motion=armed] .pain {
  opacity: 0;
  translate: 0 var(--space-6);
}

.pains[data-motion=in] .pain {
  opacity: 1;
  translate: 0;
}

@media print {
  .pains[data-motion] .pain {
    opacity: 1;
    translate: none;
  }
}

/* why a Squad: the intro and its drawing, then the points on hairlines */
.squad-intro {
  gap: var(--space-8);
  align-items: center;
  display: grid;
}

@media (width>=900px) {
  .squad-intro {
    gap: var(--space-16);
    grid-template-columns: minmax(0,6fr) minmax(0,5fr);
  }
}

.squad-points {
  gap: var(--space-8);
  margin: var(--space-12) 0 0;
  display: grid;
}

.squad-point {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  position: relative;
}

.squad-point:before {
  content: "";
  border-radius: var(--radius-full);
  background: var(--sky-600);
  width: 3rem;
  height: 3px;
  position: absolute;
  top: -2px;
  left: 0;
}

.squad-point-icon {
  margin: var(--space-4) 0;
}

.squad-point-title {
  font-size: var(--text-title);
  font-weight: var(--weight-medium);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

.squad-point-line {
  margin-top: var(--space-2);
  color: var(--ink-muted);
  max-width: 22rem;
}

@media (width>=900px) {
  .squad-points {
    grid-template-columns: repeat(var(--n,3), minmax(0, 1fr));
    gap: var(--space-12);
  }
}

/* how a Squad compares: the table, the Squad's column tinted; on a phone each row becomes its own small list */
.compare-wrap {
  margin-top: var(--space-8);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.compare-table {
  border-collapse: collapse;
  text-align: left;
  width: 100%;
}

.compare-table th,.compare-table td {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--line);
  vertical-align: top;
  font-weight: var(--weight-regular);
}

.compare-table thead th,.compare-table thead td {
  background: var(--mist);
  font-weight: var(--weight-medium);
  border-top: 0;
}

.compare-table tbody th {
  font-weight: var(--weight-medium);
}

.compare-table tbody td {
  color: var(--ink-muted);
}

.compare-table .compare-squad {
  background: var(--sky-100);
  color: var(--ink);
}

.compare-table thead .compare-squad {
  background: var(--sky-200);
}

.compare-table tbody .compare-squad {
  font-weight: var(--weight-medium);
}

.compare-note {
  margin-top: var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

@media (width<=719px) {
  .compare-table thead {
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }
  .compare-table,.compare-table tbody,.compare-table tr,.compare-table th,.compare-table td {
    display: block;
  }
  .compare-table tbody tr {
    padding-block: var(--space-3);
    border-top: 1px solid var(--line);
  }
  .compare-table tbody tr:first-child {
    border-top: 0;
  }
  .compare-table tbody th {
    padding: var(--space-2) var(--space-4);
    border: 0;
  }
  .compare-table tbody td {
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border: 0;
    display: flex;
  }
  .compare-table tbody td:before {
    content: attr(data-label);
    color: var(--ink-muted);
    font-weight: var(--weight-regular);
  }
}

/* problem, layout B: the cards pile up as you scroll, each sticking a little lower than the one before */
[data-section=problem][data-variant=b] {
  --stack-top: 5rem;
  --stack-step: 3.75rem;
}

[data-section=problem][data-variant=b] .pains {
  margin-top: var(--space-8);
  display: block;
}

[data-section=problem][data-variant=b] .pain {
  top: calc(var(--stack-top) + var(--i) * var(--stack-step));
  margin-bottom: var(--space-24);
  transform-origin: 50% 0;
  scale: calc(1 - var(--cover,0) * .04);
  position: sticky;
}

[data-section=problem][data-variant=b] .pain-card {
  box-shadow: var(--shadow-lift), var(--shadow-glass);
  grid-template-rows: auto auto;
}

[data-section=problem][data-variant=b] .pain:last-child {
  margin-bottom: var(--space-16);
}

[data-section=problem][data-variant=b] .pain:after {
  content: "";
  border-radius: inherit;
  background: var(--ink);
  opacity: calc(var(--cover,0) * .06);
  pointer-events: none;
  position: absolute;
  inset: 0;
}

[data-section=problem][data-variant=b] .pains[data-motion] .pain {
  opacity: 1;
  transition: none;
  translate: none;
}

[data-section=problem][data-variant=b] .pain-body {
  margin: var(--space-3) var(--space-3) calc(var(--space-12) * -1);
  grid-row: 1;
}

[data-section=problem][data-variant=b] .pain-art {
  padding: var(--space-3) var(--space-3) 0;
  grid-row: 2;
}

@media (width>=900px) {
  [data-section=problem][data-variant=b] {
    --stack-top: 6rem;
    --stack-step: 4.5rem;
  }
  [data-section=problem][data-variant=b]>.container {
    column-gap: var(--space-16);
    grid-template-columns: minmax(0,4fr) minmax(0,7fr);
    align-items: start;
    display: grid;
  }
  [data-section=problem][data-variant=b] .problem-intro {
    top: var(--stack-top);
    position: sticky;
  }
  [data-section=problem][data-variant=b] .pains {
    margin-top: 0;
  }
  [data-section=problem][data-variant=b] .pain-card {
    grid-template-rows: auto;
    grid-template-columns: minmax(0,6fr) minmax(0,6fr);
    align-items: center;
  }
  [data-section=problem][data-variant=b] .pain-body {
    margin: var(--space-3) calc(var(--space-12) * -1) var(--space-3) var(--space-3);
    padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
    grid-area: 1/1;
  }
  [data-section=problem][data-variant=b] .pain-art {
    margin: 0 -2.5rem 0 calc(var(--space-12) * -1);
    grid-area: 1/2;
    padding: 0;
  }
  [data-section=problem][data-variant=b] .pain-title {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    letter-spacing: var(--tracking-h3);
  }
}

@media print {
  [data-section=problem][data-variant=b] .pain {
    position: static;
    scale: none;
  }
}

/* how we work: the steps on one rail, each with what you hold when you get there, then the two notes under them */
.how-layout {
  flex-direction: column;
  display: flex;
}

.how-aside {
  display: contents;
}

.how-aside .section-title {
  text-align: center;
  --tag-x: auto;
  order: 0;
  align-self: center;
}

.steps-stage {
  order: 1;
}

.steps-foot {
  order: 2;
}

.steps {
  --node: 3rem;
  --rise: calc(var(--space-8) + var(--space-2));
  --rail: 3px;
  --steps-gap: var(--space-8);
  gap: var(--space-8);
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.step {
  padding-left: calc(var(--node) + var(--space-4));
  position: relative;
}

.step-head {
  width: var(--node);
  position: absolute;
  inset: 0 auto 0 0;
}

.step-node {
  z-index: 1;
  width: var(--node);
  height: var(--node);
  border-radius: var(--radius-full);
  background: var(--sky-700);
  color: var(--white);
  box-shadow: 0 0 0 var(--space-2) var(--ring,var(--mist));
  place-items: center;
  display: grid;
  position: relative;
}

.step:last-child .step-node {
  background: var(--white);
  color: var(--sky-700);
  border: 2px dashed var(--sky-600);
}

.step-head:before {
  content: "";
  left: calc(var(--node) / 2 - var(--rail) / 2);
  top: calc(var(--node) / 2);
  bottom: calc(var(--steps-gap) * -1);
  border-left: var(--rail) solid var(--sky-400);
  position: absolute;
}

.step:last-child .step-head:before {
  border-left-style: dashed;
  bottom: 0;
  -webkit-mask-image: linear-gradient(#000 40%,#0000);
  mask-image: linear-gradient(#000 40%,#0000);
}

.step-card {
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.step:last-child .step-card {
  background: var(--glass-fill);
  border-style: dashed;
  border-color: var(--line-control);
  box-shadow: none;
}

.step-body {
  padding: var(--space-6);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.step-name {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}

.step-gets {
  margin-top: var(--space-3);
  color: var(--ink-muted);
}

.steps-foot {
  gap: var(--space-3) var(--space-8);
  margin-top: var(--space-16);
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.steps-stop {
  font-size: var(--text-lede);
  line-height: var(--leading-lede);
}

.how-notes {
  gap: var(--space-4);
  flex-basis: 100%;
  display: grid;
}

.how-note {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
}

.how-note-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lede);
  line-height: var(--leading-lede);
  font-weight: var(--weight-medium);
}

.how-note p {
  color: var(--ink-muted);
  margin: 0;
}

@media (width>=900px) {
  .how-notes {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

/* how we work, layouts A and D on a wide screen: a staircase, each step one rise higher, the rail climbing with it */
@media (width>=900px) {
  [data-section=how]:is([data-variant=a],[data-variant=d]) .steps {
    gap: var(--space-4) var(--steps-gap);
    margin-top: calc(var(--space-12) + var(--up) * var(--rise));
    grid-template-rows: auto 1fr;
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}

@media (width>=900px) {
  [data-section=how]:is([data-variant=a],[data-variant=d]) .step {
    grid-row: span 2;
    grid-template-rows: subgrid;
    transform: translateY(calc(var(--i) * var(--rise) * -1));
    padding-left: 0;
    display: grid;
  }
}

@media (width>=900px) {
  [data-section=how]:is([data-variant=a],[data-variant=d]) .step-head {
    width: auto;
    height: var(--node);
    position: relative;
    inset: auto;
  }
}

@media (width>=900px) {
  [data-section=how]:is([data-variant=a],[data-variant=d]) .step-head:before,[data-section=how]:is([data-variant=a],[data-variant=d]) .step:last-child .step-head:before {
    left: calc(var(--steps-gap) / -2 - var(--rail) / 2);
    right: calc(var(--steps-gap) / -2);
    top: calc(var(--node) / 2 - var(--rail) / 2);
    height: var(--rise);
    border-left: var(--rail) solid var(--sky-400);
    border-top: var(--rail) solid var(--sky-400);
    border-top-left-radius: var(--radius-md);
    bottom: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (width>=900px) {
  [data-section=how]:is([data-variant=a],[data-variant=d]) .step:first-child .step-head:before {
    left: calc(var(--node) / 2);
    border-left: 0;
    border-top-left-radius: 0;
  }
}

@media (width>=900px) {
  [data-section=how]:is([data-variant=a],[data-variant=d]) .step:last-child .step-head:before {
    border-top-style: dashed;
    border-left-style: dashed;
    right: 0;
    -webkit-mask-image: linear-gradient(90deg,#000 0%,#0000 100%);
    mask-image: linear-gradient(90deg,#000 0%,#0000 100%);
  }
}

/* how we work: the steps rise into place once, as the section arrives */
[data-section=how] {
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

.steps-stage {
  --gap: var(--space-8);
  position: relative;
  container-type: inline-size;
}

.steps-stage>.steps {
  z-index: 1;
  position: relative;
}

.steps[data-motion] .step {
  transition: opacity .7s cubic-bezier(.16,1,.3,1),translate .8s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i) * .12s);
}

.steps[data-motion=armed] .step {
  opacity: 0;
  translate: 0 var(--space-8);
}

.steps[data-motion=in] .step {
  opacity: 1;
  translate: 0;
}

.steps[data-motion] .step-body {
  transition: opacity .7s;
  transition-delay: calc(var(--i) * .12s + .35s);
}

.steps[data-motion=armed] .step-body {
  opacity: 0;
}

.steps[data-motion=in] .step-body {
  opacity: 1;
}

@media print {
  .steps[data-motion] .step {
    opacity: 1;
    translate: none;
  }
}

/* ===== call facts: what to expect from the call, three lines with an icon each ===== */
.call-facts ul {
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.call-facts li {
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
  font-size: var(--text-body);
  line-height: 1.4;
  display: flex;
}

.call-facts .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--sky-700);
}

.call-facts--onsky ul {
  gap: var(--space-2);
}

.call-facts--onsky li {
  gap: var(--space-2);
  color: var(--on-sky);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.call-facts--onsky .icon {
  width: 1rem;
  height: 1rem;
  color: var(--on-sky);
  opacity: .85;
}

/* ===== talk (Let's talk): the closing section, its copy and its cards ===== */
.section--talk {
  margin: var(--space-16) var(--space-2) var(--space-6);
  padding-block: var(--space-24);
  border-radius: var(--radius-2xl);
}

@media (width>=768px) {
  .section--talk {
    margin-inline: var(--space-4);
    padding-block: var(--space-32);
  }
}

.talk-copy {
  gap: var(--space-6);
  align-content: start;
  display: grid;
}

.talk-relevant {
  font-size: var(--text-lede);
  line-height: var(--leading-lede);
  max-width: 38rem;
}

.talk-cards {
  gap: var(--space-6);
  margin-top: var(--space-16);
  align-items: start;
  max-width: 40rem;
  display: grid;
}

.talk-card {
  padding: var(--space-6);
}

@media (width>=640px) {
  .talk-card {
    padding: var(--space-12);
  }
}

/* ===== try the demo: the closing action on the second Sky ===== */
.try {
  --try-inset: var(--space-2);
  --bleed: max(var(--gutter), calc((100cqw - var(--container)) / 2));
  isolation: isolate;
  margin: var(--space-16) var(--try-inset) var(--space-6);
  padding: var(--space-24) 0 0;
  border-radius: var(--radius-2xl);
  position: relative;
  overflow: clip;
  container-type: inline-size;
}

@media (width>=768px) {
  .try {
    --try-inset: var(--space-4);
  }
}

@media (width>=1000px) {
  .try {
    padding-bottom: var(--space-32);
  }
}

.try[data-motion] :is(.try-head,.try-text,.try-cta) {
  transition: opacity .9s,translate 1s cubic-bezier(.16,1,.3,1),filter .9s;
  transition-delay: calc(var(--n) * .11s);
}

.try[data-motion=armed] :is(.try-head,.try-text,.try-cta) {
  opacity: 0;
  translate: 0 var(--space-6);
  filter: blur(8px);
}

@media print {
  .try[data-motion] :is(.try-head,.try-text,.try-cta,.try-shot-link) {
    opacity: 1;
    filter: none;
    translate: none;
    scale: none;
  }
}

/* ===== form fields: a soft blue-tinted edge, an inner shade and a clear focus ===== */
.field {
  gap: var(--space-2);
  display: grid;
}

.field label {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  line-height: 1.43;
}

.field input,.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0 var(--space-4);
  font: inherit;
  color: var(--ink);
  background: var(--glass-fill-strong);
  border: 1px solid var(--line-control);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-field);
  transition: border-color var(--ease), background-color var(--ease), box-shadow var(--ease);
  line-height: 1.5;
}

.field textarea {
  min-height: 6rem;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
}

.field input:hover,.field textarea:hover {
  border-color: var(--sky-700);
}

.field input:focus-visible,.field textarea:focus-visible {
  border-color: var(--focus);
  background: var(--white);
  box-shadow: 0 0 0 2px var(--focus), 0 0 0 7px var(--focus-halo);
  outline: none;
}

.form-privacy {
  font-size: var(--text-small);
}

/* ===== footer (base) ===== */
.site-footer {
  padding-bottom: var(--space-8);
}

.footer-brand {
  gap: var(--space-2);
  max-width: 30rem;
  display: grid;
}

.footer-brand p {
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  margin: 0;
}

.site-footer .text-link {
  font-weight: var(--weight-regular);
}

/* the index page of the drafts */
.index {
  gap: var(--space-6);
  padding-block: var(--space-16);
  justify-items: start;
  display: grid;
}

/* ===== booking card: the days, the times, the chosen time and the done state ===== */
.booking {
  display: grid;
}

.booking-step {
  gap: var(--space-4);
  align-content: start;
  display: grid;
}

.booking-step[hidden] {
  display: none;
}

.booking-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}

.booking-title:focus {
  outline: none;
}

.booking-note {
  color: var(--ink-muted);
}

.booking-days {
  gap: var(--space-2);
  margin-top: var(--space-2);
  grid-template-columns: repeat(5,minmax(0,1fr));
  display: grid;
}

.booking-times {
  gap: var(--space-2);
  grid-template-columns: repeat(3,minmax(0,1fr));
  display: grid;
}

.pick {
  min-height: var(--tap);
  padding: var(--space-2);
  font: inherit;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--ink);
  cursor: pointer;
  background: var(--glass-fill-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-field);
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}

.pick:hover {
  background: var(--white);
  border-color: var(--sky-700);
}

.pick[aria-pressed=true] {
  background: var(--navy-900);
  color: var(--on-navy);
  border-color: var(--navy-900);
}

.pick-day {
  padding-block: var(--space-2);
  line-height: 1.25;
  font-weight: var(--weight-regular);
  justify-items: center;
  gap: 0;
  display: grid;
}

.pick-day strong {
  font-size: var(--text-title);
  font-weight: var(--weight-medium);
}

.pick-time {
  min-height: 3rem;
}

.booking-status {
  min-height: 1.5rem;
  font-size: var(--text-small);
  color: var(--ink-muted);
}

/* while the times load, or if they could not (days and times both still empty), the card keeps the room three rows of days (the most the 15-day horizon gives: 11 or 12 weekdays from Monday to Thursday, 10 from Friday to Sunday) and six rows of times take (a day button is three lines at line-height 1.25, padding and a 1px border; a time button 3rem), so nothing below it moves when they arrive. The status line holds that room, with its message at the top; when the Bookings link shows under it, the link holds it instead */
.booking {
  --times-room: calc(3 * (1.25 * (2 * var(--text-small) + var(--text-title)) + 2 * var(--space-2) + 2px) + 2 * var(--space-2) + 6 * 3rem + 5 * var(--space-2) + 1.5rem);
}

.booking-days:empty + .booking-times:empty + .booking-status {
  min-height: var(--times-room);
}

.booking-days:empty + .booking-times:empty + .booking-status:has(+ .booking-fallback:not([hidden])) {
  min-height: 1.5rem;
}

.booking-days:empty + .booking-times:empty + .booking-status + .booking-fallback:not([hidden]) {
  min-height: calc(var(--times-room) - 1.5rem - var(--space-4));
}

.booking-back {
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  font: inherit;
  font-weight: var(--weight-medium);
  color: var(--sky-700);
  cursor: pointer;
  background: 0 0;
  border: 0;
  justify-self: start;
  padding: 0;
  display: inline-flex;
}

.booking-back .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.booking-chosen {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--glass-tint);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  display: flex;
}

.booking-chosen .icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.booking-step .btn {
  justify-self: start;
}

.booking-done {
  padding-block: var(--space-6);
  justify-items: start;
}

.booking-done-mark {
  border-radius: var(--radius-full);
  background: var(--success-soft);
  width: 3.5rem;
  height: 3.5rem;
  color: var(--success);
  place-items: center;
  display: grid;
}

.booking-done-mark .icon {
  stroke-width: 2px;
  width: 1.75rem;
  height: 1.75rem;
}

.booking-when {
  font-size: var(--text-lede);
  line-height: var(--leading-lede);
  font-weight: var(--weight-medium);
}

/* ===== section layouts: talk A (centred); what we build B and how a Squad compares C (a centred heading) ===== */
[data-section=talk][data-variant=a] .talk-copy {
  text-align: center;
  --tag-x: auto;
  justify-items: center;
}

[data-section=talk][data-variant=a] .talk-copy .section-title {
  max-width: 20ch;
}

[data-section=talk][data-variant=a] .talk-relevant {
  max-width: 36rem;
}

[data-section=talk][data-variant=a] .call-facts ul {
  justify-content: center;
  gap: var(--space-2) var(--space-8);
  flex-wrap: wrap;
  display: flex;
}

[data-section=talk][data-variant=a] .talk-cards {
  max-width: 46rem;
  margin: var(--space-12) auto 0;
}

[data-section=what-we-do][data-variant=b] .intro,[data-section=compare][data-variant=c] .intro {
  text-align: center;
  --tag-x: auto;
  justify-items: center;
}

[data-section=what-we-do][data-variant=b] .section-more,[data-section=compare][data-variant=c] :is(.compare-note,.section-more) {
  text-align: center;
}

@media (width>=900px) {
  [data-section=what-we-do][data-variant=b] .builds {
    gap: var(--space-8);
    grid-template-rows: none;
    grid-template-columns: repeat(3,minmax(0,1fr));
    align-items: stretch;
  }
  [data-section=what-we-do][data-variant=b] :is(.build,.build:first-child,.build:not(:first-child)) {
    grid-row: auto;
    grid-template-rows: auto 1fr;
    grid-template-columns: none;
  }
  [data-section=what-we-do][data-variant=b] :is(.build:first-child,.build:not(:first-child)) .build-art {
    aspect-ratio: 256/168;
    min-height: 0;
  }
  [data-section=what-we-do][data-variant=b] .build:not(:first-child) .build-art:before {
    -webkit-mask-image: linear-gradient(#000 45%,#0000 100%);
    mask-image: linear-gradient(#000 45%,#0000 100%);
  }
  [data-section=what-we-do][data-variant=b] :is(.build:first-child,.build:not(:first-child)) .build-body {
    padding: var(--space-6) var(--space-8) var(--space-8);
    align-content: start;
  }
  [data-section=what-we-do][data-variant=b] .build:first-child .build-title {
    font-size: var(--text-title);
    line-height: var(--leading-title);
    letter-spacing: var(--tracking-title);
  }
  [data-section=what-we-do][data-variant=b] .build:nth-child(2) {
    margin-block: var(--space-8);
    order: 1;
  }
  [data-section=what-we-do][data-variant=b] .build:first-child {
    order: 2;
  }
  [data-section=what-we-do][data-variant=b] .build:nth-child(3) {
    margin-block: var(--space-8);
    order: 3;
  }
}

/* ===== top bar: the website's bar, fixed over the page, with its links, its button and the menu toggle ===== */
.site-nav {
  z-index: 50;
  padding-block: var(--space-4);
  position: fixed;
  inset: 0 0 auto;
}

.site-nav:not([data-layout=pilled]):before {
  backdrop-filter: none;
  background: linear-gradient(#fffffff0 0%,#ffffffe6 30%,#ffffffad 55%,#ffffff57 78%,#fff0 100%);
  inset: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

.site-nav-row {
  align-items: center;
  gap: var(--space-4);
  min-height: 2.5rem;
  display: flex;
  position: relative;
}

.site-nav .logo svg {
  height: var(--topbar-logo);
}

.site-nav:not(.is-ready) .btn {
  transition: none;
}

.site-nav .btn-glass {
  border-color: var(--line);
  box-shadow: var(--shadow-field);
}

.nav-links {
  margin-inline: auto;
}

.nav-links ul {
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.nav-link {
  min-height: var(--tap);
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  transition: color var(--ease), background-color var(--ease);
  align-items: center;
  text-decoration: none;
  display: inline-flex;
}

.nav-link:hover {
  color: var(--ink);
  background: var(--sky-100);
}

.nav-actions {
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  display: flex;
}

.nav-links+.nav-actions {
  margin-left: 0;
}

.nav-toggle {
  display: none;
}

/* phones and tablets: the links fold into a menu behind the toggle */
@media (width<=899px) {
  .site-nav .logo svg {
    height: 1.5rem;
  }
  .nav-links+.nav-actions {
    margin-left: auto;
  }
  .nav-toggle {
    width: var(--tap);
    height: var(--tap);
    cursor: pointer;
    color: var(--ink);
    background: var(--glass-fill-strong);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    place-items: center;
    padding: 0;
    display: inline-grid;
  }
  .nav-toggle-close,.site-nav[data-open=true] .nav-toggle-open {
    display: none;
  }
  .site-nav[data-open=true] .nav-toggle-close {
    display: block;
  }
  .nav-links {
    left: auto;
    right: 0;
    width: min(17rem,100%);
    top: calc(100% + var(--space-2));
    padding: var(--space-2);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lift);
    transform-origin: 100% 0;
    animation: nav-sheet .22s var(--ease-out);
    margin: 0;
    display: none;
    position: absolute;
  }
  .site-nav[data-open=true] .nav-links {
    display: block;
  }
  .nav-links ul {
    flex-direction: column;
    gap: 0;
  }
  .nav-link {
    width: 100%;
    min-height: 3.25rem;
    padding-inline: var(--space-4);
    border-radius: var(--radius-md);
    color: var(--ink);
    font-size: var(--text-body);
    justify-content: space-between;
  }
}

/* the sections after the hero alternate white and mist */
.bands>.section {
  --ring: var(--white);
  background: 0 0;
}

.bands>.section:where(#compare,#our-work,#who-we-are):nth-child(n) {
  background: var(--mist);
  --ring: var(--mist);
}

/* section intros: a heading, a lede, and a link under the section */
.intro {
  gap: var(--space-6);
  display: grid;
}

.intro .lede {
  color: var(--ink-muted);
  max-width: 38rem;
}

.section-more {
  margin-top: var(--space-8);
}

/* what we build (How your Squad helps): three cards, each drawing on its own sky (sky, dawn, clear) */
.builds {
  gap: var(--space-6);
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.build {
  background: var(--white);
  grid-template-rows: auto 1fr;
  padding: 0;
  display: grid;
  position: relative;
  overflow: hidden;
}

.build-art {
  aspect-ratio: 256/168;
  position: relative;
  overflow: hidden;
}

.build-art:before {
  content: "";
  background: radial-gradient(70% 90% at 100% 0%, var(--sky-300) 0%, transparent 70%), radial-gradient(60% 70% at 0% 100%, color-mix(in srgb, var(--bloom-1) 45%, transparent) 0%, transparent 70%), linear-gradient(180deg, var(--sky-200), var(--sky-100));
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#000 45%,#0000 100%);
  mask-image: linear-gradient(#000 45%,#0000 100%);
}

.build-art :is(svg,img) {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.build-body {
  gap: var(--space-2);
  padding: var(--space-6);
  align-content: start;
  display: grid;
}

@media (width>=640px) {
  .build-body {
    padding: var(--space-6) var(--space-8) var(--space-8);
  }
}

.build-title {
  font-size: var(--text-title);
  font-weight: var(--weight-medium);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

.build-line {
  color: var(--ink-muted);
  max-width: 26rem;
}

@media (width>=900px) {
  .builds {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  }
  .build:first-child {
    grid-row: 1/span 2;
    grid-template-rows: 1fr auto;
  }
  .build:first-child .build-art {
    aspect-ratio: auto;
    min-height: 19rem;
  }
  .build:first-child .build-body {
    padding: var(--space-6) var(--space-12) var(--space-12);
  }
  .build:first-child .build-title {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    letter-spacing: var(--tracking-h3);
  }
  .build:not(:first-child) {
    grid-template-rows: none;
    grid-template-columns: minmax(0,5fr) minmax(0,6fr);
  }
  .build:not(:first-child) .build-art {
    aspect-ratio: auto;
  }
  .build:not(:first-child) .build-art:before {
    -webkit-mask-image: linear-gradient(90deg,#000 45%,#0000 100%);
    mask-image: linear-gradient(90deg,#000 45%,#0000 100%);
  }
  .build:not(:first-child) .build-body {
    padding: var(--space-6) var(--space-8) var(--space-6) var(--space-2);
    align-content: center;
  }
}

/* a comparison with more options has more columns, so its cells take less side padding */
.compare-table--wide th,.compare-table--wide td {
  padding-inline: var(--space-4);
}

@media (width>=720px) {
  .compare-table--wide tbody th,.compare-table--wide thead td {
    width: 24%;
  }
}

/* our work: a case beside the screen it is drawn from, or several captioned screens in a row */
.cases {
  gap: var(--space-16);
  margin-top: var(--space-16);
  display: grid;
}

.case {
  gap: var(--space-8);
  align-items: center;
  display: grid;
}

.case-title {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
  text-wrap: balance;
}

.case-line {
  margin-top: var(--space-3);
  color: var(--ink-muted);
  max-width: 32rem;
}

.case-jobs {
  gap: var(--space-2);
  margin: var(--space-6) 0 0;
  display: grid;
}

.case-jobs li {
  align-items: center;
  gap: var(--space-3);
  display: flex;
}

.case-jobs .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--sky-700);
}

.case-actions {
  margin-top: var(--space-8);
}

.case-note {
  margin-top: var(--space-4);
  max-width: 30rem;
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.case-stage {
  height: 18rem;
  padding: var(--space-4) 0 0 var(--space-4);
  border-radius: var(--radius-2xl);
  background: radial-gradient(70% 90% at 100% 0%, var(--sky-300) 0%, transparent 70%), radial-gradient(60% 70% at 0% 100%, color-mix(in srgb, var(--bloom-1) 55%, transparent) 0%, transparent 70%), linear-gradient(180deg, var(--sky-200), var(--sky-100));
  position: relative;
  overflow: hidden;
}

.case-stage img {
  border-radius: var(--radius-md) 0 0 0;
  width: 36rem;
  max-width: none;
  height: auto;
  box-shadow: 0 0 0 5px var(--glass-fill), var(--shadow-lift);
  display: block;
}

@media (width>=900px) {
  .case {
    gap: var(--space-16);
    grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  }
  .case-stage {
    height: 30rem;
    padding: var(--space-8) 0 0 var(--space-8);
  }
  .case-stage img {
    width: 58rem;
  }
}

.case:has(.case-shots) {
  gap: var(--space-8);
  grid-template-columns: minmax(0,1fr);
}

.case-shots {
  gap: var(--space-4);
  grid-column: 1/-1;
  grid-template-columns: minmax(0,1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.case-shot {
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-2xl);
  background: linear-gradient(180deg, var(--sky-200), var(--sky-100));
  display: grid;
}

.case-shot img {
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: left top;
  border-radius: var(--radius-lg);
  width: 100%;
  height: auto;
  box-shadow: 0 0 0 4px var(--glass-fill), var(--shadow-lift);
  display: block;
}

.case-shot p {
  padding-inline: var(--space-2);
  font-weight: var(--weight-medium);
  margin: 0;
}

@media (width>=900px) {
  .case-shots {
    gap: var(--space-6);
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

.case-shots:has(.case-shot:only-child) {
  grid-template-columns: minmax(0,1fr);
}

.case-shot:only-child img {
  aspect-ratio: 16/10;
}

@media (width>=900px) {
  [data-section=work][data-variant=b] .case:has(.case-shots) {
    gap: var(--space-16);
    grid-template-columns: minmax(0,4fr) minmax(0,7fr);
    align-items: start;
  }
  [data-section=work][data-variant=b] .case-shots {
    gap: var(--space-6);
    grid-column: auto;
    grid-template-columns: minmax(0,1fr);
  }
  [data-section=work][data-variant=b] .case-copy {
    position: sticky;
    top: 7rem;
  }
}

/* who is behind us: everyone is one list item (photo, name, role, line, links), the lead first */
.people {
  gap: var(--space-8) var(--space-6);
  margin: var(--space-12) 0 0;
  grid-template-columns: minmax(0,1fr);
  padding: 0;
  list-style: none;
  display: grid;
}

.person {
  column-gap: var(--space-4);
  grid-template-columns: 4.5rem minmax(0,1fr);
  align-items: start;
  display: grid;
}

.person-photo {
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: var(--mist);
  width: 4.5rem;
  color: var(--sky-600);
  border: 1.5px dashed var(--line-control);
  place-items: center;
  display: grid;
}

.person-photo--real {
  background: var(--mist);
  border: 0;
  overflow: hidden;
}

.person-photo--real img {
  object-fit: cover;
  object-position: center 20%;
  width: 100%;
  height: 100%;
  display: block;
}

.person-photo .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.person-body {
  gap: var(--space-1);
  align-content: start;
  display: grid;
}

.person-name {
  font-size: var(--text-title);
  font-weight: var(--weight-medium);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

.person-role {
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.person-line {
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  max-width: 30rem;
}

.person-actions {
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-2);
  flex-wrap: wrap;
  display: flex;
}

[data-section=people][data-variant=a] .person--lead {
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  background: radial-gradient(80% 100% at 100% 0%, color-mix(in srgb, var(--sky-300) 70%, transparent) 0%, transparent 70%), linear-gradient(180deg, var(--sky-200), var(--sky-100));
  grid-column: 1/-1;
  grid-template-columns: 5.5rem minmax(0,1fr);
}

[data-section=people][data-variant=a] .person--lead .person-photo {
  background: var(--glass-fill);
  width: 5.5rem;
}

[data-section=people][data-variant=a] .person--lead .person-line {
  color: var(--ink);
}

[data-section=people][data-variant=a] .person--lead .person-role {
  color: var(--ink);
  opacity: .8;
}

@media (width>=520px) {
  [data-section=people][data-variant=a] .people {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (width>=900px) {
  [data-section=people][data-variant=a] .people {
    gap: var(--space-8);
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
  [data-section=people][data-variant=a] .person {
    row-gap: var(--space-3);
    grid-template-columns: minmax(0,1fr);
  }
  [data-section=people][data-variant=a] .person-photo {
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    width: 100%;
  }
  [data-section=people][data-variant=a] .person-photo .icon {
    width: 2rem;
    height: 2rem;
  }
  [data-section=people][data-variant=a] .person--lead {
    column-gap: var(--space-12);
    padding: var(--space-8);
    grid-template-columns: 16rem minmax(0,1fr);
    align-items: center;
  }
  [data-section=people][data-variant=a] .person--lead .person-photo {
    aspect-ratio: 1;
    border-radius: var(--radius-xl);
    width: 16rem;
  }
  [data-section=people][data-variant=a] .person--lead .person-photo .icon {
    width: 3rem;
    height: 3rem;
  }
  [data-section=people][data-variant=a] .person--lead .person-name {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    letter-spacing: var(--tracking-h3);
  }
  [data-section=people][data-variant=a] .person--lead .person-line {
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }
}

/* ===== FAQ: a native accordion on hairlines, the heading beside it on a wide screen ===== */
.faq-layout {
  gap: var(--space-12);
  display: grid;
}

.faq-aside {
  gap: var(--space-6);
  align-content: start;
  justify-items: start;
  display: grid;
}

.faq-aside .lede {
  color: var(--ink-muted);
  max-width: 24rem;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-q {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: 3.5rem;
  padding: var(--space-3) 0;
  cursor: pointer;
  font-size: var(--text-title);
  font-weight: var(--weight-medium);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  list-style: none;
  display: flex;
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--sky-700);
  transition: transform .3s;
}

.faq-item[open] .faq-q .icon {
  transform: rotate(180deg);
}

.faq-a {
  gap: var(--space-2);
  max-width: 40rem;
  padding: 0 0 var(--space-6);
  color: var(--ink-muted);
  display: grid;
}

@media (width>=900px) {
  .faq-layout {
    gap: var(--space-16);
    grid-template-columns: minmax(0,4fr) minmax(0,7fr);
  }
  .faq-aside {
    align-self: start;
    position: sticky;
    top: 7rem;
  }
}

/* talk: the named person under the copy */
.talk-person {
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

/* ===== footer: the wordmark and a line, columns of links, then a bottom line ===== */
.site-footer--full {
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
}

.footer-grid {
  gap: var(--space-8) var(--space-6);
  padding-top: var(--space-12);
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(2,minmax(0,1fr));
  display: grid;
}

.footer-grid .footer-brand {
  grid-column: 1/-1;
  align-content: start;
}

.footer-heading {
  margin: 0 0 var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
}

.footer-col ul {
  gap: 0;
  margin: 0;
  padding: 0;
  display: grid;
}

.footer-col .text-link {
  min-height: var(--tap);
  font-size: var(--text-small);
  align-items: center;
  display: inline-flex;
}

.footer-base {
  justify-content: space-between;
  gap: var(--space-2) var(--space-8);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  flex-wrap: wrap;
  display: flex;
}

.footer-base p {
  margin: 0;
}

.footer-cof {
  align-items: center;
  display: inline-flex;
}

.footer-cof img {
  width: auto;
  height: 16px;
  display: block;
}

.footer-brand .footer-end {
  align-self: end;
  justify-items: start;
  gap: var(--space-3);
  margin-top: var(--space-8);
  display: grid;
}

.footer-grid .footer-brand {
  grid-template-rows: auto auto 1fr;
}

.footer-end p {
  margin: 0;
}

.footer-end .footer-previews {
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  gap: 0 var(--space-2);
}

.footer-end .footer-copy {
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.footer-previews {
  align-items: center;
  gap: 0 var(--space-3);
  flex-wrap: wrap;
  display: flex;
}

@media (width>=900px) {
  .footer-grid {
    grid-template-columns: minmax(0, 2fr) repeat(var(--cols,3), minmax(0, 1fr));
    gap: var(--space-8) var(--space-12);
  }
  .footer-grid .footer-brand {
    grid-column: auto;
  }
}

/* no backdrop-filter, or the visitor asked for less transparency: glass turns near-solid */
@supports not (backdrop-filter:blur(1px)) {
  .glass,.btn-glass {
    background: var(--glass-solid);
  }
}

@media (prefers-reduced-transparency:reduce) {
  .glass,.btn-glass {
    background: var(--glass-solid);
    backdrop-filter: none;
  }
}

/* the tagline under the logo in the top bar, and the principal's quote */
.nav-brand {
  justify-items: start;
  gap: 2px;
  display: grid;
}

.nav-tagline {
  color: var(--ink-muted);
  font-size: var(--text-label);
  line-height: 1.2;
}

.person-quote {
  margin: var(--space-2) 0;
  padding: 0 0 0 var(--space-4);
  border-left: 2px solid var(--sky-600);
  max-width: 40rem;
}

.person-quote p {
  color: var(--ink);
  font-size: var(--text-lede);
  line-height: var(--leading-lede);
  margin: 0;
}

/* ===== 12 October review, second pass: proof of work as a bento of cards, the principal, the two notes under How we work, the footer's links ===== */
.proof {
  gap: var(--space-6);
  margin-top: var(--space-12);
  display: grid;
}

[data-section=people]>.container>.proof:first-child {
  margin-top: 0;
}

.intro--after-proof {
  margin-top: var(--space-16);
}

.proof-title {
  max-width: 30ch;
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  text-wrap: balance;
  margin: 0;
}

.case-jobs[hidden] {
  display: none;
}

.nav-brand {
  width: max-content;
}

.nav-tagline {
  white-space: nowrap;
  line-height: 1;
  font-size: var(--text-caption);
}

.proof-list {
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.proof-card {
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  background: var(--white);
  border: 1px solid var(--line);
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px #0f172a0a,0 12px 28px -18px #0f172a29;
}

.proof-text {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  max-width: 30rem;
}

.proof-card>.proof-text:last-child {
  margin-top: auto;
}

.proof-logos {
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.proof-logos li {
  height: 3rem;
  padding: var(--space-2) var(--space-3);
  justify-content: center;
  align-items: center;
  display: flex;
}

.proof-logos img {
  object-fit: contain;
  width: auto;
  max-width: 6.5rem;
  height: 1.75rem;
  display: block;
}

@media (width>=900px) {
  .proof-list {
    gap: var(--space-6);
    grid-template-columns: repeat(12,minmax(0,1fr));
  }
  .proof-card:first-child {
    grid-column: span 5;
  }
  .proof-card:nth-child(2) {
    grid-column: span 7;
  }
  .proof-card:nth-child(3) {
    grid-column: span 4;
  }
  .proof-card:nth-child(4) {
    grid-column: span 8;
  }
  .proof-card:nth-child(3)>.proof-text:last-child {
    margin-top: 0;
  }
  .proof-card:nth-child(5) {
    grid-column: span 12;
  }
}

/* the principal: a larger portrait, a big quote with a quote mark, the role as a chip */
[data-section=people] .person--lead .person-role {
  width: max-content;
  padding: .125rem var(--space-3);
  border-radius: var(--radius-full);
  color: var(--ink);
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  display: inline-flex;
}

[data-section=people] .person--lead .person-quote {
  margin: var(--space-4) 0 var(--space-2);
  border-left: 0;
  max-width: 44rem;
  padding: 0;
  position: relative;
}

[data-section=people] .person--lead .person-quote:before {
  content: "“";
  height: 2.75rem;
  font-size: 6rem;
  line-height: 1;
  font-weight: var(--weight-medium);
  color: var(--sky-400);
  display: block;
}

[data-section=people] .person--lead .person-quote p {
  letter-spacing: -.01em;
  font-size: clamp(1.25rem,1.05rem + .8vw,1.75rem);
  line-height: 1.4;
  font-weight: var(--weight-medium);
}

[data-section=people][data-variant=a] .person--lead .person-photo--real {
  box-shadow: 0 0 0 6px var(--glass-fill), var(--shadow-lift);
}

@media (width>=900px) {
  [data-section=people][data-variant=a] .person--lead {
    padding: var(--space-12);
    grid-template-columns: 18rem minmax(0,1fr);
  }
  [data-section=people][data-variant=a] .person--lead .person-photo {
    aspect-ratio: 4/5;
    width: 18rem;
  }
  [data-section=people][data-variant=a] .person--lead .person-name {
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    letter-spacing: var(--tracking-h2);
  }
}

/* how we work, the two notes: an icon each on a card that lifts */
.how-note {
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  transition: translate var(--ease), box-shadow var(--ease);
  grid-template-columns: auto minmax(0,1fr);
  align-items: start;
  display: grid;
  position: relative;
}

.how-note:before {
  content: "";
  top: -1px;
  left: var(--space-6);
  border-radius: var(--radius-full);
  background: var(--sky-600);
  width: 3rem;
  height: 3px;
  position: absolute;
}

.how-note:hover {
  box-shadow: var(--shadow-lift), var(--shadow-glass);
  translate: 0 -2px;
}

.how-note-icon {
  border-radius: var(--radius-lg);
  width: 3rem;
  height: 3rem;
  color: var(--sky-700);
  background: linear-gradient(180deg, var(--sky-200), var(--sky-100));
  place-items: center;
  display: grid;
}

.how-note-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.how-note-title {
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

/* the footer's links: no underline; the list fades back around the one under the pointer */
.site-footer .text-link {
  text-decoration: none;
  transition: opacity .25s,color .25s;
}

.footer-col .text-link {
  color: var(--ink-muted);
}

.footer-col .text-link:hover,.footer-col .text-link:focus-visible {
  color: var(--ink);
}

.footer-col ul:has(.text-link:hover) .text-link:not(:hover),.footer-col ul:has(.text-link:focus-visible) .text-link:not(:focus-visible) {
  opacity: .4;
}

.footer-base .text-link:hover {
  opacity: .6;
}

/* ===== 12 October review, third pass: the call facts sit under the hero's buttons, in a row ===== */
@media (width>=900px) {
  .hero--site:not([data-variant=b]) .hero-inner {
    grid-template-areas: "title lede""ctas lede""facts lede""shot shot";
  }
  .hero--site[data-pillars]:not([data-variant=b]) .hero-inner {
    grid-template-areas: "title lede""ctas lede""facts lede""pillars pillars""shot shot";
  }
  .hero--site:not([data-variant=b]) .hero-lede {
    align-self: start;
  }
}

.hero--site:not([data-variant=b]) .hero-inner>.call-facts ul {
  gap: var(--space-2) var(--space-6);
  flex-wrap: wrap;
  display: flex;
}

/* ===== the tag: a small label above a heading, drawn from the heading's data-tag ===== */
[data-tag]:not([data-tag=""]):before {
  content: attr(data-tag) / "";
  width: fit-content;
  min-height: 1.75rem;
  margin: 0 var(--tag-x,0) var(--space-4);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-wrap: nowrap;
  color: var(--ink-muted);
  background: linear-gradient(var(--sky-500), var(--sky-500)) left center / 1.125rem 2px no-repeat;
  align-items: center;
  padding: 0 0 0 1.75rem;
  line-height: 1.4;
  display: flex;
}

:is(.sky--deep,.section--talk,.try) [data-tag]:not([data-tag=""]):before {
  color: color-mix(in srgb, var(--on-sky) 92%, transparent);
}

.sky--deep [data-tag]:not([data-tag=""]):before {
  background-image: linear-gradient(var(--white), var(--white));
}

/* ===== draft v2 (16 October review): the track record strip, the merged bands, the hero without a lede, the principal's background ===== */
.track {
  gap: var(--space-3);
  display: grid;
}

/* why a Squad and the comparison are one argument: the table follows the cards on the same ground */
.bands[data-merged]>#compare {
  background: 0 0;
  padding-top: 0;
}

.bands[data-merged]>#why-a-squad {
  padding-bottom: var(--space-8);
}

/* the hero without a lede: one column, the highlights carry the line */
.hero--site[data-nolede] .hero-title {
  max-width: 22ch;
}

.hero--site[data-nolede][data-pillars] .hero-inner {
  grid-template-areas: "title""ctas""facts""pillars";
}

.hero--site[data-nolede] .hero-pillars {
  border-top: 0;
  padding-top: 0;
}

.hero--site[data-nolede] .hero-pillars p {
  max-width: 16rem;
}

/* the principal: the background (logos of where they worked) sits in their card, under the photo and the name */
.person--lead {
  align-items: start;
}

@media (width>=900px) {
  [data-section=people][data-variant=a] .person--lead {
    align-items: start;
  }
}

.person--lead>.proof {
  margin-top: var(--space-8);
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  grid-column: 1/-1;
}

.person--lead .proof-title {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  font-weight: var(--weight-medium);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.person--lead .proof-list {
  gap: var(--space-3);
  grid-template-columns: minmax(0,1fr);
}

@media (width>=700px) {
  .person--lead .proof-list {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

.person--lead .proof-card {
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  box-shadow: none;
  background: color-mix(in srgb, var(--white) 70%, transparent);
  flex-direction: row;
  grid-column: auto !important;
}

.person--lead .proof-card>.proof-text:last-child {
  margin-top: 0;
}

.person--lead .proof-card-title {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: 0;
  margin-bottom: 0;
}

.person--lead .proof-text {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  color: var(--ink-muted);
}

/* a case with no screens takes one column; the mono rows of logos */
.case:not(:has(.case-shots,.case-stage)) {
  grid-template-columns: minmax(0,1fr);
}

.proof-logos--mono {
  gap: var(--space-4);
}

.proof-logos--mono li {
  height: 2rem;
  padding: 0;
}

.proof-logos--mono img {
  width: auto;
  height: 1.75rem;
}

/* ===== v1, the copy the site uses (main[data-default]): later than the rules above, so it wins ===== */
main[data-default] [data-tag]:before {
  display: none !important;
}

main[data-default] .hero-pillars {
  padding-top: 0;
  border-top: 0 !important;
}

main[data-default] .how-note:before {
  display: none !important;
}

main[data-default] .person-actions {
  gap: var(--space-3) var(--space-3);
}

/* v1: the hero's scene. The headline, the line, the buttons and the facts run down the left; the picture takes the right column */
.hero-side {
  gap: var(--space-6);
  grid-area: lede;
  align-content: start;
  display: grid;
}

.hero-side .hero-lede {
  grid-area: auto;
  padding-top: 0;
}

.hero-scene-wrap {
  max-width: 34rem;
}

.hero--site[data-scene] .hero-side {
  grid-area: side;
}

.hero--site[data-scene][data-pillars] .hero-inner {
  grid-template-areas: "title""lede""side""ctas""facts""pillars""shot";
}

.hero--site[data-scene] .hero-inner>.call-facts {
  margin-top: calc(var(--space-6) * -1);
}

.hero--site[data-scene] .hero-pillars {
  margin-top: var(--space-8);
}

@media (width>=900px) {
  .hero--site[data-scene]:not([data-variant=b]) .hero-inner {
    column-gap: var(--space-8);
    grid-template-columns: minmax(0,7fr) minmax(0,4.4fr);
  }
  .hero--site[data-scene] .hero-side {
    padding-top: var(--space-3);
  }
  .hero--site[data-scene] .hero-pillars {
    margin-top: var(--space-16);
  }
  .hero--site[data-scene][data-pillars]:not([data-variant=b]) .hero-inner {
    grid-template-areas: "title side""lede side""ctas side""facts side""pillars pillars""shot shot";
    row-gap: 0;
  }
  .hero--site[data-scene]:not([data-variant=b]) .hero-lede {
    margin-top: var(--space-6);
    align-self: start;
    max-width: 32rem;
    padding-top: 0;
  }
  .hero--site[data-scene]:not([data-variant=b]) .hero-ctas {
    margin-top: var(--space-8);
    align-self: start;
  }
  .hero--site[data-scene]:not([data-variant=b]) .hero-inner>.call-facts {
    margin-top: var(--space-4);
  }
}

/* v1: readability. Nothing under 14px, more room between lines */
main[data-default] .hero .call-facts li,main[data-default] .hero-pillars p {
  font-size: var(--text-caption);
  line-height: 1.5;
}

main[data-default] .hero-pillar-title {
  font-size: var(--text-small);
  line-height: 1.4;
}

main[data-default] .hero-pillar-icon {
  background: linear-gradient(135deg, var(--white) 0%, var(--sky-200) 100%);
  border: 0;
}

main[data-default] .hero-pillar-icon .icon {
  stroke: url(#pillar-grad);
}

/* v1: the pain cards are one white card, a faded colour surface behind the drawing only */
main[data-default] [data-section=problem] .pain-card {
  background: var(--white);
}

main[data-default] [data-section=problem] .pain-body {
  backdrop-filter: none;
  box-shadow: none;
  padding: var(--space-6) var(--space-6) var(--space-2);
  background: 0 0;
  border: 0;
  margin: 0;
}

main[data-default] [data-section=problem] .pain-body:before,main[data-default] [data-section=problem] .pain-body:after {
  display: none;
}

main[data-default] [data-section=problem] .pain-art {
  padding: var(--space-3) var(--space-3) 0;
  margin: 0;
  position: relative;
}

main[data-default] [data-section=problem] .pain-art:before {
  content: "";
  z-index: 0;
  background: radial-gradient(70% 90% at 100% 0%, var(--sky-300) 0%, transparent 70%), radial-gradient(60% 70% at 0% 100%, color-mix(in srgb, var(--bloom-1) 45%, transparent) 0%, transparent 70%), linear-gradient(180deg, var(--sky-200), var(--sky-100));
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#0000 0%,#000 60%);
  mask-image: linear-gradient(#0000 0%,#000 60%);
}

main[data-default] [data-section=problem] .pain-art :is(svg,img) {
  z-index: 1;
  position: relative;
}

@media (width>=900px) {
  main[data-default] [data-section=problem][data-variant=b] .pain-body {
    padding: var(--space-8) var(--space-4) var(--space-8) var(--space-8);
    margin: 0;
  }
  main[data-default] [data-section=problem][data-variant=b] .pain-art {
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
    aspect-ratio: auto;
    align-self: stretch;
    align-items: center;
    min-width: 0;
    margin: 0;
    display: grid;
  }
  main[data-default] [data-section=problem][data-variant=b] .pain-art :is(svg,img) {
    height: auto;
  }
  main[data-default] [data-section=problem] .pain-art:before {
    -webkit-mask-image: linear-gradient(270deg,#000 40%,#0000 100%);
    mask-image: linear-gradient(270deg,#000 40%,#0000 100%);
  }
}

/* v1: the icon beside each of the Squad's points has a faded colour surface and a gradient line */
main[data-default] [data-section=squad] .squad-point-icon {
  background: linear-gradient(135deg, var(--white) 0%, var(--sky-200) 100%);
  border: 0;
}

main[data-default] [data-section=squad] .squad-point-icon .icon {
  stroke: url(#sq-grad-sky);
}

main[data-default] [data-section=squad] .squad-point-icon[data-palette=dawn] .icon {
  stroke: url(#sq-grad-dawn);
}

main[data-default] [data-section=squad] .squad-point-icon[data-palette=clear] .icon {
  stroke: url(#sq-grad-clear);
}

/* ===== why a Squad, layout C: floating cards. A centred heading, then the points as glass cards in a row, like a cover-flow ===== */
[data-section=squad][data-variant=c] {
  background: radial-gradient(60% 55% at 50% 100%, color-mix(in srgb, var(--warm-300) 45%, transparent) 0%, transparent 70%), radial-gradient(70% 60% at 50% 0%, var(--sky-300) 0%, transparent 72%), linear-gradient(180deg, var(--sky-200), var(--sky-100));
  position: relative;
  overflow: hidden;
}

[data-section=squad][data-variant=c] .squad-intro {
  text-align: center;
  justify-items: center;
  gap: var(--space-8);
  grid-template-columns: minmax(0,1fr);
  display: grid;
}

[data-section=squad][data-variant=c] .squad-copy {
  justify-items: center;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  display: grid;
}

[data-section=squad][data-variant=c] .squad-points {
  height: 21rem;
  margin: var(--space-12) 0 0;
  perspective: 1400px;
  outline-offset: 6px;
  border: 0;
  grid-template-columns: none;
  padding: 0;
  list-style: none;
  display: block;
  position: relative;
}

[data-section=squad][data-variant=c] .squad-point {
  width: min(25rem,78vw);
  min-height: 17rem;
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  gap: var(--space-3);
  cursor: pointer;
  text-align: left;
  backdrop-filter: blur(var(--blur-md));
  box-shadow: var(--shadow-lift), var(--shadow-glass);
  transform: translateX(-50%) translateX(calc(var(--o,0) * 74%)) translateZ(calc(var(--a,0) * -140px)) rotateY(calc(var(--o,0) * -38deg)) scale(calc(1 - var(--a,0) * .06));
  opacity: calc(1 - var(--a,0) * .32);
  z-index: calc(10 - var(--a,0));
  background: linear-gradient(135deg,#fffffff5,#ffffffd6);
  border: 1px solid var(--shine-high);
  flex-direction: column;
  margin: 0;
  transition: transform .6s cubic-bezier(.22,.9,.32,1),opacity .6s;
  display: flex;
  position: absolute;
  top: 0;
  left: 50%;
}

[data-section=squad][data-variant=c] .squad-point[aria-current=false] {
  pointer-events: auto;
}

[data-section=squad][data-variant=c] .squad-point[aria-current=false]:hover {
  opacity: calc(1 - var(--a,0) * .3 + .12);
}

[data-section=squad][data-variant=c] .squad-point:before,[data-section=squad][data-variant=c] .squad-point:after {
  display: none !important;
}

[data-section=squad][data-variant=c] .squad-point-icon {
  width: 3rem;
  height: 3rem;
  margin: 0 0 var(--space-2);
  border-radius: var(--radius-lg);
  align-self: flex-start;
  place-items: center;
  display: grid;
}

[data-section=squad][data-variant=c] .squad-point-title {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}

.squad-nav {
  display: none;
}

[data-section=squad][data-variant=c] .squad-nav {
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  display: flex;
}

.squad-nav-btn {
  border-radius: var(--radius-full);
  width: 2.75rem;
  height: 2.75rem;
  color: var(--sky-700);
  cursor: pointer;
  box-shadow: var(--shadow-lift);
  background: #ffffffb3;
  border: 1px solid var(--shine-high);
  place-items: center;
  transition: background .2s;
  display: grid;
}

.squad-nav-btn:hover {
  background: var(--white);
}

@media (prefers-reduced-motion:reduce) {
  [data-section=squad][data-variant=c] .squad-point {
    transition: none;
  }
}

@media (width<=640px) {
  [data-section=squad][data-variant=c] .squad-point {
    transform: translateX(-50%) translateX(calc(var(--o,0) * 58%)) translateZ(calc(var(--a,0) * -120px)) rotateY(calc(var(--o,0) * -32deg)) scale(calc(1 - var(--a,0) * .08));
  }
}

/* v1: what we build is a row of three equal cards, and what is drawn in each picture dissolves over its last stretch */
@media (width>=900px) {
  main[data-default] [data-section=what-we-do][data-variant=b] .build {
    order: 0 !important;
    margin-block: 0 !important;
  }
  main[data-default] [data-section=what-we-do][data-variant=b] .build:first-child .build-title {
    font-size: var(--text-title);
    line-height: var(--leading-title);
    letter-spacing: var(--tracking-title);
  }
  main[data-default] [data-section=what-we-do][data-variant=b] .build:first-child .build-art:before {
    -webkit-mask-image: linear-gradient(#000 45%,#0000 100%);
    mask-image: linear-gradient(#000 45%,#0000 100%);
  }
}

main[data-default] [data-section=what-we-do] .build-art :is(svg,img) {
  -webkit-mask-image: linear-gradient(#000 68%,#0000 100%);
  mask-image: linear-gradient(#000 68%,#0000 100%);
}

/* ===== how we work, layout D: the staircase of blocks. Each step's circle is a 3D glass block, and the light is handed from block to block, one step at a time ===== */
.step-block,.step-crew,.step-lit {
  display: none;
}

[data-section=how][data-variant=d] .step-node,[data-section=how][data-variant=d] .step:last-child .step-node {
  box-shadow: none;
  color: #0000;
  background: 0 0;
  border: 0;
  overflow: visible;
}

[data-section=how][data-variant=d] .step-node>.icon {
  display: none;
}

[data-section=how][data-variant=d] .step-block {
  z-index: 3;
  width: 5rem;
  height: calc(5rem / var(--r));
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: visible;
  translate: -50% -50%;
}

[data-section=how][data-variant=d] .step-crew {
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  width: 12.5rem;
  height: 8.75rem;
  animation: 12s ease-in-out infinite how-crew;
  animation-delay: calc(var(--i) * 3s);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: visible;
  translate: -50% -52%;
}


@media (prefers-reduced-motion:reduce) {
  [data-section=how][data-variant=d] .step-crew {
    opacity: 0;
    animation: none;
  }
}

[data-section=how][data-variant=d] .step-head:before {
  opacity: .28;
}

@media (prefers-reduced-motion:reduce) {
  [data-section=how][data-variant=d] .step-head:before {
    opacity: .7;
  }
}

@keyframes how-crew {
  0%,26%,to {
    opacity: 0;
    transform: translateY(6px)scale(.96);
  }
  7%,19% {
    opacity: 1;
    transform: translateY(0)scale(1);
  }
}

/* v1: the tinted sections run into each other without a hard edge */
main[data-default] :is(.section--mist,#faq) {
  background-color: #0000;
  background-image: linear-gradient(to bottom, var(--white) 0, var(--mist) 8rem, var(--mist) calc(100% - 8rem), var(--white) 100%);
}

main[data-default] .hero--site {
  position: relative;
}

main[data-default] .hero.hero--site.sky--deep:after {
  content: "";
  aspect-ratio: auto;
  z-index: 0;
  pointer-events: none;
  filter: none;
  opacity: 1;
  background: linear-gradient(to bottom, transparent, var(--white));
  border-radius: 0;
  width: 100%;
  height: 9rem;
  display: block;
  position: absolute;
  inset: auto 0 0;
}

main[data-default] .hero--site>.container {
  z-index: 1;
  position: relative;
}

main[data-default] [data-section=squad][data-variant=c] {
  background-image: linear-gradient(to bottom, var(--white) 0, transparent 7rem, transparent calc(100% - 7rem), var(--white) 100%), radial-gradient(60% 55% at 50% 100%, color-mix(in srgb, var(--warm-300) 45%, transparent) 0%, transparent 70%), radial-gradient(70% 60% at 50% 0%, var(--sky-300) 0%, transparent 72%), linear-gradient(180deg, var(--sky-200), var(--sky-100));
}

/* ===== proof of work, layout B: white cards with a soft shadow, each led by its own visual (logos, a picture, a big number with stars, badges) ===== */
.proof[data-variant=b] .proof-card {
  background: var(--white);
  isolation: isolate;
  border: 0;
  box-shadow: 0 1px 3px #0f2a4a12;
}

.proof[data-variant=b] .proof-list {
  gap: var(--space-3);
}

@media (width>=900px) {
  .proof[data-variant=b] .proof-list {
    gap: var(--space-3);
  }
}

.proof[data-variant=b] .proof-card:before {
  content: "";
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(55% 75% at 100% 0%, color-mix(in srgb, var(--sky-300) 85%, transparent) 0%, transparent 72%), radial-gradient(50% 70% at 0% 100%, color-mix(in srgb, var(--bloom-1) 38%, transparent) 0%, transparent 72%), radial-gradient(45% 60% at 0% 0%, color-mix(in srgb, var(--sky-200) 90%, transparent) 0%, transparent 70%), radial-gradient(50% 65% at 100% 100%, color-mix(in srgb, var(--bloom-2,var(--sky-400)) 30%, transparent) 0%, transparent 72%), linear-gradient(135deg, var(--sky-100), var(--sky-200));
  position: absolute;
  inset: 0;
}

.proof[data-variant=b] .proof-card:nth-child(2),.proof[data-variant=b] .proof-card:nth-child(5) {
  --sky-100: #f9f0dd;
  --sky-200: #f5e1ba;
  --sky-300: #f1c87c;
  --sky-400: #f3a23c;
  --sky-500: #ed791d;
  --sky-600: #c35a27;
  --sky-700: #944723;
  --bloom-1: #f3a23c;
  --bloom-2: #ed791d;
}

.proof[data-variant=b] .proof-card:nth-child(3) {
  --sky-100: #f4f1e2;
  --sky-200: #dee7f1;
  --sky-300: #abd6ee;
  --sky-400: #78c1e6;
  --sky-500: #71a4cc;
  --sky-600: #6481a3;
  --sky-700: #456286;
  --bloom-1: #f7f180;
  --bloom-2: #c5e4a0;
}

.proof[data-variant=b] .proof-card-title {
  color: var(--ink);
}

.proof-stars {
  display: none;
}

.proof[data-variant=b] .proof-card>:is(.proof-bigfig,.proof-stars,.proof-visual) {
  display: block;
}

.proof[data-variant=b] .proof-num {
  display: none;
}

.proof[data-variant=b] .proof-stars {
  margin-top: calc(var(--space-2) * -1);
  font-size: var(--text-title);
  letter-spacing: .18em;
  color: #f5b301;
  order: -2;
}

.proof[data-variant=b] .proof-card>.proof-logos {
  order: -2;
  margin: 0;
}

.proof[data-variant=b] .proof-card>.awards {
  margin: 0 0 var(--space-2);
  order: -3;
}

.proof[data-variant=b] .proof-card>.proof-text {
  order: 0;
  margin-top: 0;
}

.proof[data-variant=b] .proof-card:first-child>.proof-logos {
  order: -3;
}

.proof[data-variant=b] .proof-card:nth-child(5)>.proof-logos {
  order: -2;
}

.proof-logos--uni {
  display: none;
}

.proof[data-variant=b] .proof-card>.proof-logos--uni {
  align-items: center;
  gap: var(--space-6);
  margin: 0 0 var(--space-2);
  order: -3;
  display: flex;
}

.proof[data-variant=b] .proof-logos--uni li {
  height: auto;
  padding: 0;
}

.proof[data-variant=b] .proof-logos--uni img {
  width: auto;
  max-width: none;
  height: 3.25rem;
}

.proof[data-variant=b] .proof-logos--uni li:first-child img {
  height: 1.25rem;
}

/* v1: the two notes under How we work are plain white cards; layout D's last card has a solid edge like the others */
main[data-default] #how-it-starts .how-note {
  backdrop-filter: none;
  background: var(--white);
  border: 0;
  box-shadow: 0 1px 3px #0f2a4a12;
}

[data-section=how][data-variant=d] .step:last-child .step-card {
  background: var(--white);
  border-style: solid;
  border-color: #0000;
  box-shadow: 0 0 0 1px #0f172a0b,0 1px 2px #0f172a0a,0 22px 44px -30px #0f172a29;
}

/* proof of work, layout B: the arrangement of the cards in rows */
.proof[data-variant=b] .proof-card:is(:nth-child(3),:nth-child(5)) .proof-num {
  display: inline;
}

.proof[data-variant=b] .proof-card:is(:nth-child(3),:nth-child(5)) .proof-card-title {
  letter-spacing: -.03em;
  margin-bottom: var(--space-2);
  font-size: clamp(1.875rem,1.5rem + 1.6vw,2.75rem);
  line-height: 1.05;
}

@media (width>=900px) {
  .proof[data-variant=b] .proof-card:nth-child(2) {
    align-items: center;
    column-gap: var(--space-8);
    grid-template-columns: minmax(0,1fr) auto;
    display: grid;
  }
  .proof[data-variant=b] .proof-card:nth-child(2)>.proof-text {
    grid-area: 1/1;
  }
  .proof[data-variant=b] .proof-card:nth-child(2)>.proof-logos--uni {
    grid-area: 1/2;
    margin: 0;
  }
  .proof[data-variant=b] .proof-card:nth-child(4) {
    align-items: center;
    column-gap: var(--space-10,2.5rem);
    grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
    display: grid;
  }
  .proof[data-variant=b] .proof-card:nth-child(4)>.awards {
    grid-area: 1/1;
    margin: 0;
  }
  .proof[data-variant=b] .proof-card:nth-child(4)>.proof-text {
    grid-area: 1/2;
  }
  .proof[data-variant=b] .proof-card:nth-child(4) .awards-row {
    gap: var(--space-4) var(--space-3);
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
  .proof[data-variant=b] .proof-card:nth-child(4) .awards-row--two {
    grid-template-columns: repeat(3,minmax(0,1fr));
    justify-content: center;
    display: grid;
  }
  .proof[data-variant=b] .proof-card:nth-child(5) {
    align-items: center;
    column-gap: var(--space-10,2.5rem);
    grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
    display: grid;
  }
  .proof[data-variant=b] .proof-card:nth-child(5)>.proof-text {
    grid-area: 1/1;
  }
  .proof[data-variant=b] .proof-card:nth-child(5)>.proof-logos {
    justify-content: flex-start;
    gap: var(--space-4) var(--space-6);
    flex-wrap: wrap;
    grid-area: 1/2;
    margin: 0;
  }
}

/* v1: the icons on the two notes under How we work, made like the icons over the hero's points */
main[data-default] #how-it-starts .how-note-icon {
  width: 2.5rem;
  height: 2.5rem;
  box-shadow: none;
  background: linear-gradient(135deg,var(--white) 0%,#d2e5ff 100%);
  border: 0;
}

main[data-default] #how-it-starts .how-note-icon .icon,main[data-default] #how-it-starts .how-note:nth-child(2) .how-note-icon .icon {
  stroke: url(#sq-grad-sky);
  width: 1.25rem;
  height: 1.25rem;
}

/* v1: the principal's card is made like the other cards: white, a faded Sky mesh across it, a smaller photo, quote and name */
main[data-default] [data-section=people] .person--lead {
  backdrop-filter: none;
  background: radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--sky-300) 70%, transparent) 0%, transparent 70%), radial-gradient(55% 80% at 0% 100%, color-mix(in srgb, var(--bloom-1) 28%, transparent) 0%, transparent 70%), linear-gradient(180deg, var(--sky-100), var(--white));
  border: 0;
  box-shadow: 0 1px 3px #0f2a4a12;
}

main[data-default] [data-section=people] .person--lead .person-photo--real {
  box-shadow: 0 0 0 6px var(--white),0 10px 24px -14px #0f2a4a59;
}

main[data-default] [data-section=people] .person--lead .person-role {
  background: var(--white);
  border: 0;
  box-shadow: 0 1px 2px #0f2a4a14;
}

main[data-default] [data-section=people] .person--lead .person-quote:before {
  background: linear-gradient(135deg,#81bafe,#7a5af8);
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
}

main[data-default] [data-section=people] .person--lead .btn-glass {
  background: var(--white);
  border-color: #0000;
  box-shadow: 0 1px 3px #0f2a4a1a;
}

/* v1: the How we work heading is left aligned, like the other section headings */
main[data-default] .how-aside .section-title {
  text-align: left;
  align-self: flex-start;
}

main[data-default] [data-section=people] .person--lead .person-quote p {
  font-size: clamp(1.0625rem,1rem + .4vw,1.3125rem);
  line-height: 1.45;
}

main[data-default] [data-section=people] .person--lead .person-quote:before {
  height: 2rem;
  font-size: 4.25rem;
}

main[data-default] [data-section=people] .person--lead .person-name {
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}

@media (width>=900px) {
  main[data-default] [data-section=people][data-variant=a] .person--lead {
    column-gap: var(--space-8);
    padding: var(--space-8);
    grid-template-columns: 11rem minmax(0,1fr);
  }
  main[data-default] [data-section=people][data-variant=a] .person--lead .person-photo {
    width: 11rem;
  }
}

/* proof of work, layout B: the two university logos, stacked and centred */
.proof[data-variant=b] .proof-card>.proof-logos--uni {
  align-items: center;
  gap: var(--space-4);
  flex-direction: column;
}

/* ===== the booking details, as in the demo's own dialog: two columns of fields, topic chips, a note and the button on one line ===== */
.field-row {
  gap: var(--space-3) var(--space-4);
  grid-template-columns: repeat(2,minmax(0,1fr));
  display: grid;
}

.field-row .field {
  min-width: 0;
}

@media (width<=520px) {
  .field-row {
    grid-template-columns: minmax(0,1fr);
  }
}

.topics {
  border: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.topics legend {
  margin-bottom: var(--space-2);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  padding: 0;
  line-height: 1.43;
}

.topic-list {
  gap: var(--space-2);
  flex-wrap: wrap;
  display: flex;
}

.topic {
  min-height: 2.25rem;
  padding: 0 var(--space-4);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-small);
  cursor: pointer;
  border-radius: 999px;
}

.topic:hover {
  border-color: var(--sky-700);
}

.topic[aria-pressed=true] {
  border-color: var(--navy-900);
  background: color-mix(in srgb, var(--navy-900) 7%, var(--white));
}

.booking-submit {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  display: flex;
}

.booking-submit .form-privacy {
  color: var(--ink-muted);
  margin: 0;
}

.booking-submit .btn {
  justify-self: auto;
}

/* the small label above a case's title, the Squad's supporting line, and the line under the How we work heading */
.case-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--emph);
}

.squad-support {
  margin: var(--space-4) 0 0;
  max-width: 38rem;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink-muted);
}

.how-lede {
  color: var(--ink-muted);
  margin: var(--space-4) 0 0;
}

.lede-link {
  color: var(--emph);
  text-underline-offset: .2em;
  text-decoration: underline .08em;
}

/* the Squad points ring: the cards move by transform, opacity and shadow only */
[data-section=squad][data-variant=c] .squad-point {
  transition-property: transform,opacity,filter,box-shadow;
}

/* while a card rises in on scroll ([data-reveal]) its 10px rise is eased too, with the reveal's own timing (the ring sets the cards' opacity, so they rise without fading) */
[data-section=squad][data-variant=c] .squad-point[data-reveal] {
  transition: transform .6s cubic-bezier(.22,.9,.32,1), opacity .6s, filter .6s cubic-bezier(.22,.9,.32,1), box-shadow .6s, translate .9s var(--ease-out) calc(var(--d,0) * 90ms);
}

/* the problem cards: the figure and its source are a row of their own under the whole card */
@media (width>=900px) {
  main[data-default] [data-section=problem][data-variant=b] .pain-card {
    grid-template-rows: auto auto;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    align-items: stretch;
  }
  main[data-default] [data-section=problem][data-variant=b] .pain-body {
    grid-area: 1/1;
    align-self: center;
  }
  main[data-default] [data-section=problem][data-variant=b] .pain-art {
    grid-area: 1/2/-1;
    grid-template-rows: subgrid;
  }
  main[data-default] [data-section=problem][data-variant=b] .pain-art :is(svg,img) {
    grid-row: 1;
    align-self: center;
  }
}

/* phones and tablets: the hero's facts centred, its pillars with the icon on the left, the Squad cards centred, the lead's photo, name and role grouped */
@media (width<=899px) {
  .hero--site .call-facts,.hero--site .call-facts ul {
    justify-content: center;
  }
  .hero-pillars li {
    column-gap: var(--space-4);
    text-align: left;
    grid-template-columns: auto minmax(0,1fr);
    align-items: start;
    display: grid;
  }
  .hero-pillar-icon {
    grid-row: 1/span 2;
    margin-bottom: 0;
  }
  .hero-pillars li>:not(.hero-pillar-icon) {
    grid-column: 2;
  }
  [data-section=squad][data-variant=c] .squad-point {
    text-align: center;
    align-items: center;
  }
  [data-section=squad][data-variant=c] .squad-point-icon {
    align-self: center;
  }
  [data-section=squad][data-variant=c] .squad-point-line {
    margin-inline: auto;
  }
  [data-section=people][data-variant=a] .person--lead {
    align-items: center;
    row-gap: 0;
  }
  [data-section=people][data-variant=a] .person--lead .person-body {
    display: contents;
  }
  [data-section=people][data-variant=a] .person--lead .person-photo {
    grid-row: 1/span 2;
  }
  [data-section=people][data-variant=a] .person--lead .person-name {
    grid-column: 2;
    align-self: end;
  }
  [data-section=people][data-variant=a] .person--lead .person-role {
    margin-top: var(--space-1);
    grid-column: 2;
    align-self: start;
  }
  [data-section=people][data-variant=a] .person--lead :is(.person-quote,.person-line,.person-actions) {
    grid-column: 1/-1;
    max-width: none;
  }
  [data-section=people][data-variant=a] .person--lead .person-quote {
    margin-top: var(--space-6);
  }
  [data-section=people][data-variant=a] .person--lead .person-line {
    margin-top: var(--space-2);
  }
}

/* the tinted sections fade in from the page's white and out to it, so no section meets the next at a hard edge */
.bands>.section:where(#compare,#our-work,#who-we-are):nth-child(n) {
  background-color: #0000;
  background-image: linear-gradient(to bottom, var(--white) 0, var(--mist) 8rem, var(--mist) calc(100% - 8rem), var(--white) 100%);
}

[data-section=squad][data-variant=c] {
  background-image: linear-gradient(to bottom, var(--white) 0, transparent 7rem, transparent calc(100% - 7rem), var(--white) 100%), radial-gradient(60% 55% at 50% 100%, color-mix(in srgb, var(--warm-300) 45%, transparent) 0%, transparent 70%), radial-gradient(70% 60% at 50% 0%, var(--sky-300) 0%, transparent 72%), linear-gradient(180deg, var(--sky-200), var(--sky-100));
}

/* phones and tablets: the Squad cards behind the centred one no longer show through it */
@media (width<=899px) {
  [data-section=squad][data-variant=c] .squad-point {
    background: linear-gradient(135deg,#fffffffc,#fffffff2);
  }
}

/* the line under the hero's lede that names who the Squad is for, and the note under a case's button */
.hero--site .hero-lede-group {
  grid-area: lede;
}

.hero--site .hero-lede-group .hero-lede {
  grid-area: auto;
}

.hero-industries {
  margin: var(--space-4) 0 0;
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  color: var(--emph);
}

.case-cta-note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-small);
  color: var(--ink-muted);
}

/* emphasis inside text is medium (500), not bold */
strong,b,.lede-link {
  font-weight: var(--weight-medium);
}

/* ===== the Calm look ([data-look=calm] on <html>): matte white surfaces with a hairline and a small grey shadow, quieter buttons ===== */
:root[data-look=calm] {
  --glass-fill: var(--white);
  --glass-fill-strong: var(--white);
  --glass-border: transparent;
  --glass-solid: var(--white);
  --blur-sm: 0px;
  --blur-md: 0px;
  --saturate-glass: 100%;
  --ease: .4s ease;
}

[data-look=calm] :is(.glass,.btn-glass,.chip,.shot-frame) {
  backdrop-filter: none;
}

:root[data-look=calm] {
  --calm-card: 0 0 0 1px #0f172a0b, 0 1px 2px #0f172a0a, 0 22px 44px -30px #0f172a29;
  --calm-card-hover: 0 0 0 1px #0f172a0d, 0 2px 4px #0f172a0a, 0 30px 56px -30px #0f172a3d;
}

[data-look=calm] :is(.glass,.proof-card,.compare-wrap,.case-shot) {
  box-shadow: var(--calm-card);
  border-color: #0000;
}

[data-look=calm] .glass--lift {
  box-shadow: var(--calm-card-hover);
}

[data-look=calm] .pain-body.glass {
  box-shadow: 0 0 0 1px #0f172a0a,0 10px 24px -16px #0f172a33;
}

[data-look=calm] .btn {
  transition: background-color .4s,border-color .4s,color .4s,opacity .4s,box-shadow .4s;
}

[data-look=calm] .btn-glass {
  border-color: color-mix(in srgb, var(--navy-900) 14%, var(--white));
  box-shadow: none;
}

[data-look=calm] .btn-glass:hover,[data-look=calm] .btn-glass:focus-visible {
  background: var(--sky-100);
  border-color: color-mix(in srgb, var(--navy-900) 22%, var(--white));
}

/* Calm: hover on a surface does not move it; its edge and its shadow fade in */
[data-look=calm] :is(.pain-card,.proof-card,.how-note,.step-card,.build,.person--lead,.compare-wrap,.case-shot) {
  transition: box-shadow .6s;
}

/* while one of those surfaces is fading in on scroll ([data-reveal], set and removed by site.js) it keeps the reveal's fade and rise, with the reveal's own timing, next to its shadow */
[data-look=calm] :is(.pain-card,.proof-card,.how-note,.step-card,.build,.person--lead,.compare-wrap,.case-shot)[data-reveal] {
  transition: box-shadow .6s, opacity .8s var(--ease-out) calc(var(--d,0) * 90ms), translate .9s var(--ease-out) calc(var(--d,0) * 90ms);
}

[data-look=calm] :is(.proof-card,.how-note,.step-card,.build):hover,[data-look=calm] .pain:hover .pain-card {
  box-shadow: var(--calm-card-hover);
}

[data-look=calm] :is(.how-note:hover,.shot-link:hover .shot-frame,.try-shot-link:hover .shot-frame,.hero-shot[data-demo] .hero-shot-link:hover .shot-frame) {
  transform: none;
}

[data-look=calm] .text-link {
  transition: color .4s,text-decoration-color .4s;
}

/* Calm: no framed sections. The hero and the closing sections run edge to edge on a soft mesh of the palette that fades into the white */
:root[data-look=calm] {
  --frame: 0px;
  --frame-radius: 0px;
  --cm-mesh: radial-gradient(60% 70% at 8% 4%, color-mix(in srgb, var(--sky-400) 72%, transparent) 0%, transparent 72%), radial-gradient(52% 64% at 94% 10%, color-mix(in srgb, var(--warm-300) 95%, transparent) 0%, transparent 74%), radial-gradient(64% 66% at 70% 96%, color-mix(in srgb, var(--sky-300) 90%, transparent) 0%, transparent 76%), radial-gradient(48% 56% at 14% 92%, color-mix(in srgb, var(--bloom-1) 55%, transparent) 0%, transparent 74%), var(--white);
  --cm-melt: linear-gradient(180deg, var(--white) 0%, transparent 16%, transparent 78%, var(--white) 100%);
}

[data-look=calm] .hero.sky--deep {
  background: var(--cm-mesh);
  color: var(--ink);
  padding-bottom: var(--space-16);
  border-radius: 0;
  margin: 0;
}

[data-look=calm] .hero.hero--site {
  margin-top: 0;
  padding-top: 8.5rem;
}

[data-look=calm] .hero.sky--deep:after {
  content: "";
  z-index: -1;
  background: linear-gradient(180deg, transparent, var(--white));
  height: 9rem;
  display: block;
  position: absolute;
  inset: auto 0 0;
}

[data-look=calm] .sky--deep .emph {
  color: var(--emph);
}

[data-look=calm] .sky--deep .call-facts--onsky li {
  color: var(--ink);
}

[data-look=calm] .sky--deep .call-facts--onsky .icon {
  color: var(--sky-700);
  opacity: 1;
}

[data-look=calm] .hero--site .hero-demo,[data-look=calm] .sky--deep .btn-glass {
  background: color-mix(in srgb, var(--white) 80%, transparent);
  border-color: color-mix(in srgb, var(--navy-900) 14%, var(--white));
}

[data-look=calm] .hero--site .hero-demo:hover,[data-look=calm] .sky--deep .btn-glass:hover {
  background: var(--sky-100);
}

[data-look=calm] .hero--site .hero-demo,[data-look=calm] .sky--deep .btn-glass {
  --btn-light-glass: #3680dd5c;
}

[data-look=calm] .hero-pillars {
  border-top-color: var(--line);
}

[data-look=calm] .hero-pillars p {
  opacity: 1;
  color: var(--ink);
}

[data-look=calm] .hero-pillar-icon {
  color: var(--sky-700);
  background: var(--white);
  border-color: var(--line);
}

[data-look=calm] .sky--deep [data-tag]:not([data-tag=""]):before {
  color: var(--ink-muted);
  background-image: linear-gradient(var(--sky-500), var(--sky-500));
}

[data-look=calm] .section--talk {
  margin: var(--space-16) 0 0;
  background: var(--cm-melt), var(--cm-mesh);
  border-radius: 0;
}

[data-look=calm] .section--talk:before,[data-look=calm] .section--talk:after {
  display: none;
}

[data-look=calm] .try {
  border-radius: 0;
  margin-inline: 0;
}

[data-look=calm] .pain-card {
  box-shadow: var(--calm-card);
  background: radial-gradient(70% 55% at 100% 0%, color-mix(in srgb, var(--sky-300) 55%, transparent) 0%, transparent 70%), radial-gradient(60% 55% at 0% 100%, color-mix(in srgb, var(--bloom-1) 22%, transparent) 0%, transparent 70%), linear-gradient(180deg, var(--sky-100), var(--white));
}

[data-look=calm] :is(.build-art,.step-art):before {
  background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--sky-300) 55%, transparent) 0%, transparent 70%), radial-gradient(60% 70% at 0% 100%, color-mix(in srgb, var(--bloom-1) 22%, transparent) 0%, transparent 70%), linear-gradient(180deg, var(--sky-100), var(--white));
}

[data-look=calm] :is(.squad-point,.how-note):before {
  background: linear-gradient(90deg, var(--sky-500) 0%, color-mix(in srgb, var(--warm-300) 85%, transparent) 55%, transparent 100%);
  width: 100%;
  height: 2px;
  box-shadow: 0 0 16px 2px color-mix(in srgb, var(--sky-400) 38%, transparent);
  left: 0;
}

[data-look=calm] .how-note:before {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  top: 0;
  left: 0;
}

/* ===== the isometric pictures, and which set shows ([data-visual]): the isometric drawings unless the page asks for the original ones ===== */
.iso-scene {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.iso-person {
  animation: 3.4s ease-in-out infinite alternate iso-bob;
}

@keyframes iso-bob {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .iso-person {
    animation: none;
  }
}

:root:not([data-visual=original]) :is(.pain-art,.build-art)[data-iso]>svg:not(.iso-scene),:root:not([data-visual=original]) [data-section=how][data-iso] .step-node>:is(.step-block,.step-crew):not(.step-iso) {
  display: none;
}

/* how we work, layout D, with the isometric pictures: a bigger block, its crew standing behind it, a clearer glow on the active step. The three are images (astro-site 1.21.0) */
/* a global img { max-width: 100% } would hold them to the circle they stand on */
.step-block.step-iso,.step-crew.step-iso {
  max-width: none;
}

:root:not([data-visual=original]) [data-section=how][data-variant=d] .step-block.step-iso {
  width: var(--bw,6.4rem);
  height: auto;
  animation: none;
}

/* the glow is a picture of its own, faded in over the block at rest on the page's clock: opacity is all that moves */
:root:not([data-visual=original]) [data-section=how][data-variant=d] .step-lit.step-iso {
  z-index: 3;
  width: calc(var(--bw,6.4rem) * var(--k));
  max-width: none;
  height: auto;
  pointer-events: none;
  opacity: 0;
  animation: 12s ease-in-out infinite iso-how-glow;
  animation-delay: calc(var(--i) * 3s);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

/* the people stand behind their block (it is drawn over them), their feet about 1rem below its top edge */
:root:not([data-visual=original]) [data-section=how][data-variant=d] .step-crew.step-iso {
  width: 10.5rem;
  height: 7.35rem;
  top: 50%;
  translate: -50% calc(-100% - var(--bw,6.4rem) / 2 / var(--r) + 3rem);
}

:root:not([data-visual=original]) [data-section=how][data-variant=d] .step:first-child .step-crew.step-iso,:root:not([data-visual=original]) [data-section=how][data-variant=d] .step:last-child .step-crew.step-iso {
  translate: -50% calc(-100% - var(--bw,6.4rem) / 2 / var(--r) + 3rem);
}

@media (prefers-reduced-motion:reduce) {
  :root:not([data-visual=original]) [data-section=how][data-variant=d] :is(.step-block.step-iso,.step-lit.step-iso) {
    animation: none;
  }
}

@media (width<900px) {
  :root:not([data-visual=original]) [data-section=how][data-variant=d] .step-crew.step-iso {
    display: none;
  }
}

@media (width>=900px) {
  :root:not([data-visual=original]) [data-section=how][data-variant=d] .step-head .step-node {
    margin-inline: auto;
  }
}

@keyframes iso-how-glow {
  0%,26%,to {
    opacity: 0;
  }
  6%,19% {
    opacity: 1;
  }
}

/* ===== the awards strip in proof of work ===== */
.awards[data-astro-cid-ceso7h56] {
  margin-top: var(--space-2);
  gap: 1.25rem;
  padding: 0;
  display: grid;
}

.awards-row[data-astro-cid-ceso7h56] {
  gap: var(--space-3);
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.awards-row--two[data-astro-cid-ceso7h56] {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  flex-wrap: wrap;
  display: flex;
}

.awards-row[data-astro-cid-ceso7h56] li[data-astro-cid-ceso7h56] {
  justify-items: center;
  display: grid;
}

.awards-row[data-astro-cid-ceso7h56] img[data-astro-cid-ceso7h56] {
  opacity: .7;
  width: 100%;
  max-width: 5.25rem;
  height: auto;
  display: block;
}

.awards-row[data-astro-cid-ceso7h56]:not(.awards-row--two) li[data-astro-cid-ceso7h56]:nth-child(3) img[data-astro-cid-ceso7h56] {
  max-width: 4rem;
}

.awards-row--two[data-astro-cid-ceso7h56] img[data-astro-cid-ceso7h56] {
  width: auto;
  max-width: none;
}

.awards-row--two[data-astro-cid-ceso7h56] img[data-astro-cid-ceso7h56].g {
  height: 1.6rem;
}

.awards-row--two[data-astro-cid-ceso7h56] img[data-astro-cid-ceso7h56].f {
  height: 1.9rem;
}

.awards-row[data-astro-cid-ceso7h56] .rating[data-astro-cid-ceso7h56] img[data-astro-cid-ceso7h56] {
  opacity: 1;
  max-width: 4.5rem;
}

@media (width<=640px) {
  .awards-row--two[data-astro-cid-ceso7h56] {
    justify-content: flex-start;
  }
}

/* ===== motion on the homepage: hover on what can be pressed, the top bar once the page moves, FAQ answers opening, and blocks rising in as they come on screen ===== */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

.btn .icon {
  transition: translate .25s var(--ease-out);
}

.btn:hover .icon {
  translate: 3px;
}

.btn-ext:hover .icon {
  translate: 2px -2px;
}

.build {
  transition: translate .4s var(--ease-out), box-shadow .4s ease;
}

.build:hover {
  box-shadow: var(--shadow-lift), var(--shadow-glass);
  translate: 0 -4px;
}

.build-art :is(svg,img) {
  transition: scale .9s var(--ease-out);
}

.build:hover .build-art :is(svg,img) {
  scale: 1.04;
}

.person-photo {
  transition: border-color .3s ease, scale .4s var(--ease-out);
}

.person:hover .person-photo {
  border-color: var(--sky-600);
  scale: 1.03;
}

.case-stage img {
  transform-origin: 0 0;
  transition: scale .9s var(--ease-out);
}

.case-stage:hover img {
  scale: 1.025;
}

.faq-q {
  transition: color var(--ease);
}

.faq-q:hover {
  color: var(--sky-700);
}

/* the top bar: a little more body once the page has moved, and the section you are in underlined */
.site-nav {
  transition: background-color .3s,box-shadow .3s;
}

.site-nav[data-scrolled=true] {
  box-shadow: 0 10px 30px -22px color-mix(in srgb, var(--navy-900) 45%, transparent);
  background: #ffffffeb;
}

.nav-link {
  position: relative;
}

.nav-link:after {
  content: "";
  left: var(--space-3);
  right: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--sky-600);
  transform-origin: 0;
  height: 2px;
  transition: transform .35s var(--ease-out);
  position: absolute;
  bottom: .4rem;
  transform: scaleX(0);
}

.nav-link[aria-current] {
  color: var(--ink);
}

.nav-link[aria-current]:after {
  transform: scaleX(1);
}

@media (width<=899px) {
  .nav-link:after {
    display: none;
  }
  .nav-link[aria-current] {
    background: var(--sky-100);
  }
}

/* FAQ: the answer opens with the arrow, where the browser can animate it */
@supports selector(::details-content) {
  .faq-list {
    interpolate-size: allow-keywords;
  }
  .faq-item::details-content {
    height: 0;
    transition: height .4s var(--ease-out), content-visibility .4s allow-discrete;
    overflow: clip;
  }
  .faq-item[open]::details-content {
    height: auto;
  }
}

/* reveals: each block rises a little and fades in the first time it comes on screen */
.squad-point:before {
  transform-origin: 0;
  transition: transform .8s var(--ease-out) .35s;
}

.squad-point[data-reveal=armed]:before {
  transform: scaleX(0);
}

.compare-wrap[data-reveal=armed] .compare-squad {
  background-color: #0000;
}

.compare-wrap[data-reveal=in] .compare-squad {
  transition: background-color 1s .6s;
}

[data-reveal] {
  transition: opacity .8s var(--ease-out), translate .9s var(--ease-out);
  transition-delay: calc(var(--d,0) * 90ms);
}

[data-reveal=armed] {
  opacity: 0;
  translate: 0 .625rem;
}

[data-reveal=in] {
  opacity: 1;
  translate: 0;
}

.bands {
  overflow-x: clip;
}

@media (prefers-reduced-motion:no-preference) {
  @keyframes rise-in {
    0% {
      opacity: 0;
      translate: 0 .5rem;
    }
  }
  @keyframes shot-in {
    0% {
      opacity: 0;
      translate: 0 1rem;
    }
  }
  html {
    --hero-rise: rise-in;
    --hero-shot: shot-in;
  }
  .hero--enter .headline {
    animation: var(--hero-rise) .24s var(--ease-out) .02s both;
  }
  .hero--enter .hero-lede {
    animation: var(--hero-rise) .22s var(--ease-out) .06s both;
  }
  .hero--enter .hero-book {
    animation: var(--hero-rise) .22s var(--ease-out) .09s both;
  }
  .hero--enter .hero-demo {
    animation: var(--hero-rise) .22s var(--ease-out) .12s both;
  }
  .hero--enter .call-facts {
    animation: var(--hero-rise) .22s var(--ease-out) .11s both;
  }
  .hero--enter :is(.hero-shot,.hero-visual) {
    animation: var(--hero-shot) .3s var(--ease-out) .1s both;
  }
  @keyframes sky-drift-a {
    to {
      translate: 10% 8%;
      scale: 1.15;
    }
  }
  @keyframes sky-drift-b {
    to {
      translate: -12% -6%;
      scale: 1.2;
    }
  }
  .section--talk:before {
    will-change: translate, scale;
    animation: 26s ease-in-out infinite alternate sky-drift-a;
  }
  .section--talk:after {
    will-change: translate, scale;
    animation: 32s ease-in-out infinite alternate sky-drift-b;
  }
}

@media (prefers-reduced-motion:reduce) {
  [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
  }
}

@media print {
  [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
  }
}

/* ===== the hero's isometric picture (.hero-iso): the people move, and the blocks drop into place in turn ===== */
/* the people (version B): arms turn about their shoulders to and fro, one pair of arms makes the whole figure bounce, and each person stands a little off their place so the four are spaced out */

.hero-iso .c-swing {
  animation: hi-swing var(--t, 1s) ease-in-out infinite alternate;
}

.hero-iso .c-bounce {
  animation: hi-bounce 0.55s ease-in-out infinite alternate;
}

@keyframes hi-swing {
  from {
    transform: rotate(calc(var(--a) - var(--r)));
  }
  to {
    transform: rotate(calc(var(--a) + var(--r)));
  }
}

@keyframes hi-bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-4px);
  }
}

.hero-iso .spread {
  transform: translateX(var(--dx));
}

.hero-iso {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.hero-iso .piece {
  animation-duration: 24s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.hero-iso .person {
  animation: hi-bob 3.4s ease-in-out infinite alternate;
}

.hero-iso .aura-glow, .hero-iso .aura-halo {
  animation: hi-breathe 3.4s ease-in-out infinite alternate;
}

/* off screen (site.js sets data-offscreen) the picture holds still and carries on from there when it is back; the hero entrance is not in .hero-iso, so it always finishes */
[data-section=hero][data-offscreen] .hero-iso * {
  animation-play-state: paused;
}

@keyframes hi-bob {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-3px);
  }
}

@keyframes hi-breathe {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 0.85;
  }
}

@keyframes hi-drop-0-0 {
  0%, 1.333% {
    opacity: 0;
    transform: translateY(-100.3px);
  }
  1.35% {
    opacity: 1;
    transform: translateY(-100.3px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  4.333%, 29.333% {
    opacity: 1;
    transform: translateY(0);
  }
  32.333%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-0-1 {
  0%, 2.667% {
    opacity: 0;
    transform: translateY(-160.3px);
  }
  2.683% {
    opacity: 1;
    transform: translateY(-160.3px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  5.667%, 29.333% {
    opacity: 1;
    transform: translateY(0);
  }
  32.333%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-0-2 {
  0%, 4% {
    opacity: 0;
    transform: translateY(-130.7px);
  }
  4.017% {
    opacity: 1;
    transform: translateY(-130.7px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  7%, 29.333% {
    opacity: 1;
    transform: translateY(0);
  }
  32.333%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-0-3 {
  0%, 5.333% {
    opacity: 0;
    transform: translateY(-97.5px);
  }
  5.35% {
    opacity: 1;
    transform: translateY(-97.5px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  8.333%, 29.333% {
    opacity: 1;
    transform: translateY(0);
  }
  32.333%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-0-4 {
  0%, 6.667% {
    opacity: 0;
    transform: translateY(-46.7px);
  }
  6.683% {
    opacity: 1;
    transform: translateY(-46.7px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  9.667%, 29.333% {
    opacity: 1;
    transform: translateY(0);
  }
  32.333%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-0-5 {
  0%, 8% {
    opacity: 0;
    transform: translateY(-118.7px);
  }
  8.017% {
    opacity: 1;
    transform: translateY(-118.7px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  11%, 29.333% {
    opacity: 1;
    transform: translateY(0);
  }
  32.333%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-1-0 {
  0%, 34.667% {
    opacity: 0;
    transform: translateY(-151.2px);
  }
  34.683% {
    opacity: 1;
    transform: translateY(-151.2px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  37.667%, 62.667% {
    opacity: 1;
    transform: translateY(0);
  }
  65.667%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-1-1 {
  0%, 36% {
    opacity: 0;
    transform: translateY(-97.5px);
  }
  36.017% {
    opacity: 1;
    transform: translateY(-97.5px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  39%, 62.667% {
    opacity: 1;
    transform: translateY(0);
  }
  65.667%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-1-2 {
  0%, 37.333% {
    opacity: 0;
    transform: translateY(-133.5px);
  }
  37.35% {
    opacity: 1;
    transform: translateY(-133.5px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  40.333%, 62.667% {
    opacity: 1;
    transform: translateY(0);
  }
  65.667%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-1-3 {
  0%, 38.667% {
    opacity: 0;
    transform: translateY(-109.5px);
  }
  38.683% {
    opacity: 1;
    transform: translateY(-109.5px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  41.667%, 62.667% {
    opacity: 1;
    transform: translateY(0);
  }
  65.667%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-1-4 {
  0%, 40% {
    opacity: 0;
    transform: translateY(-29.0px);
  }
  40.017% {
    opacity: 1;
    transform: translateY(-29.0px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  43%, 62.667% {
    opacity: 1;
    transform: translateY(0);
  }
  65.667%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-1-5 {
  0%, 41.333% {
    opacity: 0;
    transform: translateY(-41.0px);
  }
  41.35% {
    opacity: 1;
    transform: translateY(-41.0px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  44.333%, 62.667% {
    opacity: 1;
    transform: translateY(0);
  }
  65.667%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-2-0 {
  0%, 68% {
    opacity: 0;
    transform: translateY(-151.2px);
  }
  68.017% {
    opacity: 1;
    transform: translateY(-151.2px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  71%, 96% {
    opacity: 1;
    transform: translateY(0);
  }
  99%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-2-1 {
  0%, 69.333% {
    opacity: 0;
    transform: translateY(-124.3px);
  }
  69.35% {
    opacity: 1;
    transform: translateY(-124.3px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  72.333%, 96% {
    opacity: 1;
    transform: translateY(0);
  }
  99%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-2-2 {
  0%, 70.667% {
    opacity: 0;
    transform: translateY(-58.7px);
  }
  70.683% {
    opacity: 1;
    transform: translateY(-58.7px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  73.667%, 96% {
    opacity: 1;
    transform: translateY(0);
  }
  99%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-2-3 {
  0%, 72% {
    opacity: 0;
    transform: translateY(-133.5px);
  }
  72.017% {
    opacity: 1;
    transform: translateY(-133.5px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  75%, 96% {
    opacity: 1;
    transform: translateY(0);
  }
  99%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-2-4 {
  0%, 73.333% {
    opacity: 0;
    transform: translateY(-19.8px);
  }
  73.35% {
    opacity: 1;
    transform: translateY(-19.8px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  76.333%, 96% {
    opacity: 1;
    transform: translateY(0);
  }
  99%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hi-drop-2-5 {
  0%, 74.667% {
    opacity: 0;
    transform: translateY(-91.8px);
  }
  74.683% {
    opacity: 1;
    transform: translateY(-91.8px);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  77.667%, 96% {
    opacity: 1;
    transform: translateY(0);
  }
  99%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-iso .piece[data-stack="1"], .hero-iso .piece[data-stack="2"] {
    display: none;
  }
  .hero-iso .c-swing, .hero-iso .c-bounce {
    animation: none !important;
    transform: rotate(var(--a));
  }
  .hero-iso .c-bounce {
    transform: none;
  }
  .hero-iso .piece, .hero-iso .person, .hero-iso .aura-glow, .hero-iso .aura-halo {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .hero-iso .aura-glow {
    opacity: 0.55;
  }
  .hero-iso .aura-halo {
    opacity: 0.4;
  }
}

/* Mobile and tablet fixes from Eki's design (astro-site 68826e6, fablane#137), ported by hand from astro-site/src/styles/global.css */

/* phones and tablets, the top bar's menu: a chevron on each link, and the links come in one after another as it opens */
@media (max-width: 899px) {
  .nav-link::before {
    order: 2;
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border: solid var(--sky-600);
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
    opacity: 0.55;
  }
  .nav-link:hover, .nav-link:focus-visible {
    background: var(--sky-100);
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .site-nav[data-open="true"] .nav-links li {
    animation: nav-item 320ms var(--ease-out) both;
    animation-delay: calc(60ms + var(--i, 0) * 45ms);
  }
  .nav-links li:nth-child(2) {
    --i: 1;
  }
  .nav-links li:nth-child(3) {
    --i: 2;
  }
  .nav-links li:nth-child(4) {
    --i: 3;
  }
  .nav-links li:nth-child(5) {
    --i: 4;
  }
  .nav-link::before {
    transition: transform 250ms var(--ease-out), opacity 250ms;
  }
  .nav-link:hover::before, .nav-link:focus-visible::before {
    transform: translateX(4px) rotate(45deg);
    opacity: 1;
  }
  .site-nav .nav-toggle svg {
    transition: transform 300ms var(--ease-out);
  }
  .site-nav[data-open="true"] .nav-toggle-close {
    animation: nav-spin 300ms var(--ease-out);
  }
}

@keyframes nav-item {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes nav-spin {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes nav-sheet {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links {
    animation: none !important;
  }
}

/* phones: the cards sit side by side in a row, one centred and the next ones just peeking in from the edges, so none is stacked on another */

@media (max-width: 640px) {
  [data-section="squad"][data-variant="c"] .squad-point {
    transform: translateX(-50%) translateX(calc(var(--o, 0) * 108%)) scale(calc(1 - var(--a, 0) * 0.04));
    opacity: calc(1 - var(--a, 0) * 0.45);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  [data-section="squad"][data-variant="c"] .squad-point[aria-current="false"] {
    opacity: calc(1 - var(--a, 0) * 0.45);
  }
  [data-section="squad"][data-variant="c"] .squad-points {
    height: 25rem;
  }
  [data-section="squad"][data-variant="c"] .squad-nav {
    position: relative;
    z-index: 20;
  }
}

/* phones and tablets, the problem cards: a tighter card. The title and line lead, the drawing is a shorter band under them, and the figure is its own soft panel with the source under it */

@media (max-width: 899px) {
  main[data-default] [data-section="problem"] .pain-body {
    padding: var(--space-6) var(--space-6) var(--space-3);
    gap: var(--space-2);
  }
  main[data-default] [data-section="problem"] .pain-title {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    letter-spacing: var(--tracking-h3);
  }
  main[data-default] [data-section="problem"] .pain-line {
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }
  [data-section="problem"] .pain-art {
    aspect-ratio: 16 / 9;
    padding: 0;
    overflow: hidden;
  }
  [data-section="problem"] .pain-art :is(svg,img) {
    transform: scale(1.12);
  }
  [data-section="problem"] .pain-stat {
    margin: 0 var(--space-3) var(--space-3);
    padding: var(--space-4);
    gap: var(--space-1);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--sky-100);
  }
  [data-section="problem"] .pain-stat-fig {
    font-size: var(--text-body);
    line-height: 1.35;
    color: var(--ink);
  }
  [data-section="problem"] .pain-source {
    font-size: var(--text-label);
    line-height: 1.4;
  }
}

/* phones and tablets, the problem cards: the drawing is the top of the card, then the words, then the figure; it no longer sits between the words and the figure */

@media (max-width: 899px) {
  main [data-section="problem"] .pains .pain-card {
    grid-template-rows: auto auto auto;
    grid-template-columns: minmax(0, 1fr);
  }
  main [data-section="problem"] .pains .pain-card > .pain-art {
    grid-row: 1;
    grid-column: 1;
    margin: 0;
  }
  main [data-section="problem"] .pains .pain-card > .pain-body {
    grid-row: 2;
    grid-column: 1;
    margin: 0;
  }
  main [data-section="problem"] .pains .pain-card > .pain-stat {
    grid-row: 3;
    grid-column: 1;
  }
}

/* phones and tablets, the problem cards: the drawing is now at the top, so its faded sky fades out downwards into the white under it, not upwards */

@media (max-width: 899px) {
  main[data-default] [data-section="problem"] .pain-art::before {
    -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
  }
}

/* phones and tablets, the problem cards: the drawing keeps its own proportions, so nothing in it is cropped */

@media (max-width: 899px) {
  [data-section="problem"] .pain-art {
    aspect-ratio: 256 / 168;
    overflow: visible;
  }
  [data-section="problem"] .pain-art :is(svg,img) {
    transform: none;
  }
}

/* phones and tablets, the problem cards: the drawing's blurred figures stay inside its own band and no longer spill over the title */

@media (max-width: 899px) {
  [data-section="problem"] .pain-art {
    overflow: hidden;
  }
  [data-section="problem"] .pain-art :is(svg,img) {
    overflow: hidden;
  }
}

/* phones and tablets, the problem cards: some drawings run past the foot of their frame (the text used to cover it), so the band is taller than the frame and the drawing may use it; the band still clips, so nothing reaches the title */

@media (max-width: 899px) {
  [data-section="problem"] .pain-art {
    aspect-ratio: 256 / 212;
  }
  [data-section="problem"] .pain-art :is(svg,img) {
    height: auto;
    aspect-ratio: 256 / 168;
    overflow: visible;
  }
}

/* tablets: the problem cards and the "what we build" cards are a narrower column; the rest of the page keeps its width */

@media (min-width: 560px) and (max-width: 899px) {
  [data-section="problem"] .pains > .pain, .builds > .build {
    max-width: 28rem;
    margin-inline: auto;
  }
  #how-it-starts > .container {
    max-width: 32rem;
    margin-inline: auto;
  }
}

/* phones and tablets, the problem cards: a smaller drawing, centred in a shorter band, so it does not take over the card */

@media (max-width: 899px) {
  [data-section="problem"] .pain-art {
    aspect-ratio: auto;
    height: clamp(14rem, 50vw, 18.5rem);
  }
  [data-section="problem"] .pain-art :is(svg,img) {
    height: 80%;
    width: auto;
    aspect-ratio: 256 / 168;
    margin-inline: auto;
  }
}

/* tablets: once the two hero buttons sit side by side, the facts under them line up with the left edge of the first button (phones stack the buttons, so those stay centred) */

@media (min-width: 560px) and (max-width: 899px) {
  .hero--site .call-facts, .hero--site .call-facts ul {
    justify-content: flex-start;
  }
}