/* Snaptiq Labs. The design system lives in CLAUDE.md; the tokens below are copied from it. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-wght-normal.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: 100 1000;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext-wght-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand accents */
  --orange: #E37212;       /* rgb(227 114 18) */
  --orange-300: #E78736;   /* rgb(231 135 54): hover on dark */
  --blue: #0070C0;         /* rgb(0 112 192) */
  --blue-300: #4094D0;     /* rgb(64 148 208): text, links and focus on dark */
  --orange-a12: rgb(227 114 18 / 0.12);  /* tag and selection backgrounds */
  --blue-a16: rgb(0 112 192 / 0.16);

  /* Neutrals */
  --bg: #000000;
  --surface-1: #111111;
  --surface-2: #191919;
  --surface-3: #252525;
  --line: #2B2B2B;
  --text: #FFFFFF;
  --text-2: #B8B8B8;
  --text-muted: #999999;

  /* Type */
  --font-head: "Inter", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --fs-display: clamp(3rem, 6.67vw, 6rem);       /* 96px at 1440 */
  --fs-h1: clamp(1.75rem, 2.9vw, 3.5rem);        /* 42px at 1440 */
  --fs-lead: clamp(1.125rem, 2.5vw, 2.875rem);   /* 36px at 1440 */
  --fs-h2: clamp(1.625rem, 2.6vw, 3rem);         /* 37px at 1440 */
  --fs-body-lg: clamp(1.125rem, 1.5vw, 1.5rem);  /* 22px at 1440 */
  --fs-body: 1rem;
  --fs-ui: 0.9375rem;
  --track-ui: 0.1em;

  /* Shape, space, motion */
  --radius-sheet: 60px;
  --radius-card: 30px;
  --radius-menu: 20px;
  --radius-pill: 999px;
  --gutter: 7vw;
  --section-min-h: 650px;
  --section-pad: 80px;
  --dur: 0.3s;

  /* Site-specific */
  --overlap: 6vw;          /* how far each sheet is pulled over the previous section */
  --header-h: 108px;
  --logo-h: 72px;
  --content-max: 1680px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 1024px) {
  :root {
    --header-h: 80px;
    --logo-h: 48px;
  }
}

@media (max-width: 767px) {
  :root {
    --radius-sheet: 36px;
    --radius-card: 25px;
    --overlap: 40px;
    --section-min-h: 0px;
    --section-pad: 64px;
  }
}

/* Base ---------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

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

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

::selection {
  background: var(--orange);
  color: #000;
}

:focus-visible {
  outline: 2px solid var(--blue-300);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: #000;
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: var(--track-ui);
  text-decoration: none;
  text-transform: uppercase;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Type ---------------------------------------------------------------------- */

h2,
.h2 {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.2;
}

h3,
h4 {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.2;
}

/* Buttons ------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-ui);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--track-ui);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur), color var(--dur);
}

.btn--primary {
  background: var(--orange);
  color: #000;
}

.btn--primary:hover {
  background: var(--orange-300);
}

.btn--secondary {
  background: var(--text);
  color: #000;
}

.btn--secondary:hover {
  background: color-mix(in srgb, var(--text) 82%, var(--bg));
}

.btn--ghost {
  background: transparent;
  color: var(--text);
}

.btn--ghost:hover {
  background: var(--surface-3);
}

/* Header -------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background-color var(--dur);
}

.site-header.is-scrolled,
.site-header.is-open {
  background: var(--bg);
}

.site-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
  padding-inline: var(--gutter);
}

.site-header__logo {
  justify-self: start;
  /* Clear space: at least the height of "labs" on every side. */
  padding-block: 4px;
}

.site-header__logo img {
  width: auto;
  height: var(--logo-h);
}

.site-nav ul {
  display: flex;
  gap: 4px;
}

.site-nav a,
.mobile-menu li a {
  display: block;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--dur), color var(--dur);
}

.site-nav a {
  padding: 10px 18px;
}

.site-nav a:hover {
  background: var(--surface-3);
}

.site-nav a[aria-current="true"] {
  background: var(--text);
  color: #000;
}

.site-header__cta {
  justify-self: end;
}

.menu-toggle {
  display: none;
}

.mobile-menu {
  display: none;
}

@media (max-width: 1024px) {
  .site-header__bar {
    grid-template-columns: 1fr auto;
  }

  .site-nav,
  .site-header__cta {
    display: none;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--text);
    color: #000;
    cursor: pointer;
  }

  .menu-toggle__icon,
  .menu-toggle__icon::before,
  .menu-toggle__icon::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform var(--dur), background-color var(--dur);
  }

  .menu-toggle__icon {
    position: relative;
  }

  .menu-toggle__icon::before,
  .menu-toggle__icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .menu-toggle__icon::before {
    transform: translateY(-6px);
  }

  .menu-toggle__icon::after {
    transform: translateY(6px);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__icon {
    background: transparent;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
    transform: rotate(-45deg);
  }

  .mobile-menu:not([hidden]) {
    display: grid;
    gap: 12px;
    margin: 0 var(--gutter);
    padding: 12px;
    border-radius: var(--radius-menu);
    background: var(--surface-2);
  }

  .mobile-menu li a {
    padding: 16px;
    border-radius: 12px;
  }

  .mobile-menu li a:hover,
  .mobile-menu li a[aria-current="true"] {
    background: var(--surface-3);
  }

  .mobile-menu .btn {
    justify-self: start;
    margin: 4px 16px 12px;
  }
}

/* Hero: the headline and the lead (left-aligned, centred on phones), then the full-width
   robot scene. The copy sits in front of the scene's faded top edge, so the two overlap
   slightly. Black space under the header, and before the first sheet, which slides over
   the black at the bottom. */

.hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(48px, 10vh, 128px)) 0 calc(var(--overlap) + clamp(24px, 4vw, 64px));
}

.hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-inline: var(--gutter);
}

.hero__title {
  font-family: var(--font-head);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1;
  text-wrap: balance;
}

.hero__lead {
  margin-top: 0.35em;
  font-family: var(--font-head);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}

@media (min-width: 768px) {
  /* Each line starts with its "any" phrase (forced by <br>) and must not wrap again. */
  .hero__lead {
    white-space: nowrap;
  }
}

/* Input is orange (the G: gestures), output is blue (the X: any application).
   In running text, OpenG2X always has an orange G and a blue X, like the wordmark.
   --blue passes contrast only as large text; smaller text uses --blue-300. */
.accent-in,
.brand-g {
  color: var(--orange);
}

.accent-out,
.brand-x {
  color: var(--blue-300);
}

main h2 .brand-x {
  color: var(--blue);
}

@media (min-width: 768px) {
  /* The lead is large text from here on. */
  .accent-out,
  .hero__lead .brand-x {
    color: var(--blue);
  }
}

@media (max-width: 767px) {
  .hero {
    text-align: center;
  }

  .hero__copy {
    align-items: center;
  }

  .hero__lead {
    max-width: 20em;
  }
}

/* The scene's top and bottom dissolve into black (the one allowed gradient: black over
   media). On narrow screens it keeps a minimum height and crops the sides around the
   person and the robot. */
.hero__scene {
  margin-top: calc(-1 * clamp(40px, 7vw, 140px));
}

.hero__scene img {
  width: 100%;
  height: auto;
  min-height: 360px;
  object-fit: cover;
  object-position: 45% 50%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 72%, transparent 100%);
}

/* Stacked sheets ------------------------------------------------------------ */

.sheet {
  position: relative;
  min-height: var(--section-min-h);
  margin-top: calc(-1 * var(--overlap));
  padding: var(--section-pad) var(--gutter) calc(var(--section-pad) + var(--overlap));
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  overflow-x: clip;
}

.sheet--surface {
  background: var(--surface-1);
}

.sheet--black {
  background: var(--bg);
}

main > :nth-child(2) { z-index: 1; }
main > :nth-child(3) { z-index: 2; }
main > :nth-child(4) { z-index: 3; }

.section-intro {
  max-width: 44rem;
}

.section-intro p,
.feature__copy p {
  margin-top: 24px;
  color: var(--text-2);
  font-size: var(--fs-body-lg);
  line-height: 1.7;
}

/* Platform ------------------------------------------------------------------ */

.diagram {
  margin-top: clamp(48px, 7vw, 112px);
}

.diagram__svg--tall {
  display: none;
}

@media (max-width: 1024px) {
  .diagram__svg--wide {
    display: none;
  }

  .diagram__svg--tall {
    display: block;
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
  }
}

.dg-label {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dg-label--in {
  fill: var(--orange);
}

.dg-label--out {
  fill: var(--blue-300);
}

.dg-item {
  fill: var(--text);
  font-family: var(--font-body);
  font-size: 20px;
  transition: fill var(--dur);
}

.dg-tag {
  fill: var(--blue-300);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
}

/* The input side's tags are orange, as its lines are: input is orange, output is blue. */
.dg-tag--in {
  fill: var(--orange);
}

.dg-runtime {
  fill: var(--text-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.dg-in-line,
.dg-out-line {
  fill: none;
  stroke-width: 1.5;
  transition: stroke var(--dur), stroke-opacity var(--dur), stroke-width var(--dur), opacity var(--dur);
}

.dg-in-line {
  stroke: var(--orange);
  stroke-opacity: 0.5;
}

.dg-out-line {
  stroke: var(--blue);
  stroke-opacity: 0.6;
}

.dg-in-flow,
.dg-out-flow {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 0.07 0.93;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: opacity var(--dur), stroke-width var(--dur);
}

.dg-in-flow {
  stroke: var(--orange-300);
}

.dg-out-flow {
  stroke: var(--blue-300);
}

.dg-node {
  fill: var(--bg);
  stroke: var(--line);
  stroke-width: 1.5;
}

/* The whole input side lights up on hover or focus and shows a one-line
   explanation: plain text, not a card. The tall diagram (phones and tablets,
   often without hover) always shows it. */
.dg-in {
  outline: none;
}

.dg-in-hit {
  fill: transparent;
}

.dg-in:focus-visible .dg-in-hit {
  stroke: var(--orange-300);
  stroke-width: 2;
}

.dg-explain {
  fill: var(--text-2);
  font-family: var(--font-body);
  font-size: 16px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur), transform var(--dur);
}

.diagram__svg--tall .dg-explain {
  font-size: 14px;
}

.dg-in.is-lit .dg-explain,
.diagram__svg--tall .dg-explain {
  opacity: 1;
  transform: none;
}

.dg-brand-g {
  fill: var(--orange);
}

.dg-brand-x {
  fill: var(--blue-300);
}

.dg-in.is-lit .dg-in-line {
  stroke-opacity: 1;
  stroke-width: 2.5;
}

.dg-in.is-lit .dg-in-flow {
  stroke-width: 3.5;
}

/* Each output lights up with its product line card, and the other way round.
   site.js sets .is-lit on everything that shares the data-line value. */
.dg-out {
  cursor: pointer;
  outline: none;
  transition: opacity var(--dur);
}

.dg-hit {
  fill: transparent;
  transition: fill var(--dur);
}

.dg-out:focus-visible .dg-hit {
  stroke: var(--blue-300);
  stroke-width: 2;
}

.dg-port {
  fill: var(--blue);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--dur);
}

.dg-out.is-lit .dg-hit {
  fill: var(--blue-a16);
}

.dg-out.is-lit .dg-item {
  fill: var(--blue-300);
}

.dg-out.is-lit .dg-port {
  transform: scale(1.75);
}

.dg-out-line.is-lit {
  stroke: var(--blue-300);
  stroke-opacity: 1;
  stroke-width: 2.5;
}

.dg-out-flow.is-lit {
  stroke-width: 3.5;
}

.platform.has-lit :is(.dg-out, .dg-out-line, .card):not(.is-lit) {
  opacity: 0.4;
}

.cards {
  display: grid;
  gap: 20px;
}

.cards--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.platform .cards {
  margin-top: clamp(48px, 7vw, 112px);
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 2.4vw, 40px);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  background: var(--surface-2);
  transition: background-color var(--dur), border-color var(--dur), opacity var(--dur);
}

.card.is-lit {
  border-color: var(--blue);
  background: var(--surface-3);
}

.card h3 {
  font-size: clamp(1.375rem, 1.8vw, 1.75rem);
}

.card__media {
  display: block;
  aspect-ratio: 4 / 3;
  max-height: 240px;
  margin-bottom: 8px;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card p {
  color: var(--text-2);
}

.tag {
  align-self: flex-start;
  margin-bottom: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--blue-a16);
  color: var(--blue-300);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  transition: background-color var(--dur), color var(--dur);
}

.card.is-lit .tag {
  background: var(--blue);
  color: var(--text);
}

@media (max-width: 1024px) {
  .cards--three {
    grid-template-columns: minmax(0, 1fr);
    max-width: 40rem;
  }
}

/* Feature rows -------------------------------------------------------------- */

.feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(32px, 5vw, 96px);
  min-height: var(--section-min-h);
}

.feature__copy {
  max-width: 34rem;
}

.feature__copy .feature__claims {
  margin-top: 28px;
  color: var(--text);
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.5;
}

/* Wearable viewer, under the copy: the module's front (default) and rear, cropped alike,
   unframed on black. Two radio buttons styled as pills switch the views, so it works
   without JavaScript and with the arrow keys. The photo is centred against copy and viewer. */
.viewer {
  position: relative;
  width: min(100%, 360px);
  margin-top: clamp(32px, 4vw, 56px);
}

.viewer__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.viewer__images {
  display: grid;
}

.viewer__image {
  grid-area: 1 / 1;
  transition: opacity var(--dur), visibility var(--dur);
}

.viewer__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 859;
  object-fit: contain;
}

#view-front:checked ~ .viewer__images .viewer__image--rear,
#view-rear:checked ~ .viewer__images .viewer__image--front {
  opacity: 0;
  visibility: hidden;
}

.viewer__switch {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
}

.viewer__switch label {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-ui);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur), color var(--dur);
}

.viewer__switch label:hover {
  background: var(--surface-3);
}

#view-front:checked ~ .viewer__switch [for="view-front"],
#view-rear:checked ~ .viewer__switch [for="view-rear"] {
  background: var(--text);
  color: #000;
}

#view-front:focus-visible ~ .viewer__switch [for="view-front"],
#view-rear:focus-visible ~ .viewer__switch [for="view-rear"] {
  outline: 2px solid var(--blue-300);
  outline-offset: 3px;
}
.feature__media {
  /* Bleed off the right edge of the viewport. */
  margin-right: calc(-1 * var(--gutter));
}

.feature__media img {
  width: 100%;
  height: auto;
}

.feature__media--photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}

.feature__media--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, #000);
  opacity: 0.55;
  pointer-events: none;
}

@media (max-width: 767px) {
  .feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .viewer {
    width: min(80%, 300px);
    margin-inline: auto;
  }

  .feature__media {
    margin-right: 0;
  }

  .feature__media--photo {
    border-radius: var(--radius-card);
  }
}

/* About --------------------------------------------------------------------- */

.people {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

.section-intro + .people {
  margin-top: clamp(48px, 6vw, 96px);
}

.person {
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface-2);
}

.person__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.person__meta {
  display: grid;
  gap: 10px;
  padding: 20px 24px 24px;
}

.person__role,
.partners__title {
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: var(--track-ui);
  line-height: 1;
  text-transform: uppercase;
}

.person__name {
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
}

/* Partner logos keep their own colours, many of them dark, so each sits on a white
   tile in the team grid's columns. */
.partners {
  margin-top: clamp(64px, 8vw, 120px);
}

.partners__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.partners__list img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-menu);
  background: var(--text);
}

@media (max-width: 1199px) {
  :is(.people, .partners__list) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  :is(.people, .partners__list) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .person__meta {
    gap: 8px;
    padding: 14px 16px 18px;
  }

  .person__role {
    font-size: 0.75rem;
  }
}

/* Text pages (the legal notice) ---------------------------------------------- */

.text-page {
  padding: calc(var(--header-h) + clamp(48px, 10vh, 128px)) var(--gutter) calc(var(--overlap) + var(--section-pad));
}

.text-page > * {
  max-width: 44rem;
}

.text-page h1 {
  font-family: var(--font-head);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.1;
}

.text-page h2 {
  margin-top: 48px;
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
}

.text-page :is(p, address, ul) {
  margin-top: 16px;
  color: var(--text-2);
  font-style: normal;
  line-height: 1.7;
}

.text-page ul {
  padding-left: 1.25em;
  list-style: disc;
}

.text-page .text-page__lead {
  color: var(--text-muted);
}

.text-page a {
  color: var(--blue-300);
}

/* Footer -------------------------------------------------------------------- */

.site-footer {
  position: relative;
  z-index: 4;
  margin-top: calc(-1 * var(--overlap));
  padding: var(--section-pad) var(--gutter) 40px;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--surface-2);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
}

.site-footer__brand img {
  width: auto;
  height: var(--logo-h);
}

.site-footer__contact {
  margin-top: 32px;
  color: var(--text);
}

.site-footer__contact a {
  text-decoration: none;
}

.site-footer__contact a:hover {
  color: var(--blue-300);
}

.site-footer__social {
  display: inline-flex;
  margin-top: 24px;
  color: var(--text-muted);
  transition: color var(--dur);
}

.site-footer__social:hover {
  color: var(--text);
}

.site-footer__col h2 {
  font-family: var(--font-head);
  font-size: clamp(1rem, 1.4vw, 1.375rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.site-footer__col ul {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.site-footer__col a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur);
}

.site-footer__col a:hover,
.site-footer__col a[aria-current] {
  color: var(--text);
}

/* The rules either side echo the ones around "labs" in the logo. */
.legal {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: clamp(64px, 8vw, 120px);
  color: var(--text-muted);
  font-family: var(--font-head);
  font-size: clamp(0.75rem, 1.1vw, 1rem);
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.legal::before,
.legal::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

@media (max-width: 767px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

/* Widescreen: the gutter grows so content stays within --content-max, and
   media still bleeds exactly to the viewport edge. */

@media (min-width: 2400px) {
  :root {
    --gutter: max(7vw, (100vw - var(--content-max)) / 2);
  }
}

/* Motion -------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero__title,
  .hero__lead {
    animation: rise 1s var(--ease-out) both;
  }

  .hero__title { animation-delay: 0.2s; }
  .hero__lead { animation-delay: 0.6s; }

  .dg-in-flow,
  .dg-out-flow {
    opacity: 1;
    animation: flow 2.8s linear infinite;
  }

  .dg-in-flow:nth-of-type(3n + 2),
  .dg-out-flow:nth-of-type(3n + 2) { animation-delay: -0.9s; }
  .dg-in-flow:nth-of-type(3n),
  .dg-out-flow:nth-of-type(3n) { animation-delay: -1.8s; }

  .platform.has-lit .dg-out-flow:not(.is-lit) {
    opacity: 0.4;
  }

  /* Entrances for cards and media: site.js adds .is-visible in view, then removes
     both classes so hover transitions run without the stagger delay. */
  .js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s ease, transform 0.9s var(--ease-out);
  }

  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .js :is(.cards, .people) > .reveal:nth-child(2) { transition-delay: 0.3s; }
  .js :is(.cards, .people) > .reveal:nth-child(3) { transition-delay: 0.6s; }
  .js .people > .reveal:nth-child(4) { transition-delay: 0.9s; }
  .js .people > .reveal:nth-child(5) { transition-delay: 1.2s; }

  /* Section copy fades from 20 % to full as it enters, and back as it leaves. */
  @supports (animation-timeline: view()) {
    .scroll-fade {
      animation: scroll-fade linear both;
      animation-timeline: view();
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .dg-explain {
    transform: none;
  }

  .viewer__image {
    transition: none;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes flow {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes scroll-fade {
  entry 0% {
    opacity: 0.2;
  }

  entry 100% {
    opacity: 1;
  }

  exit 0% {
    opacity: 1;
  }

  exit 100% {
    opacity: 0.2;
  }
}