:root {
  --paper: #f1efe2;     /* warm off-white page background */
  --ink: #000000;       /* labels, rules, type */
  --ink-soft: #1d1d1d;  /* dark panels */
  --stone: #dbdac8;     /* tinted bands and tiles */
  --acid: #d3fb43;      /* accent */
  --ink-muted: #6b6a60; /* secondary labels and metadata */
  --line: #d2d0c3;      /* grid rules, as in the reference layout */
  --logo-side: #5c5b52; /* extruded edge of the hero logo, warm to sit on --paper */
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: "Manrope", system-ui, sans-serif;
  --gutter: clamp(16px, 3vw, 40px);
  --rule: 1px solid var(--ink);
  --module-gap: 6px;    /* space between modules that sit against each other */
}

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

html,
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
}

/* Nav and hero share the first screen; the hero takes whatever height is left. */
.screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
}

.site-header {
  flex: none;
  border-bottom: var(--rule);
  background: var(--paper);
}

.nav {
  display: flex;
  align-items: center;
  padding: 16px var(--gutter);
}

.nav__links {
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.nav__links a {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(16px, 1.8vw, 28px);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  text-underline-offset: 4px;
}

.nav__links a:hover {
  text-decoration: underline;
}

.nav__logo {
  display: block;
  line-height: 0;
}

.nav__logo-mark {
  display: block;
  height: 32px;
  width: auto;
  aspect-ratio: 101.14 / 84.36;
  fill: var(--ink);
}

/* ---------------------------------------------------------------------------
   Mobile menu (menu.js): below 600px the links fold into a hamburger of two
   thin rounded bars. It opens a full-screen drawer that repeats
   the header bar, wipes down from the top, and lists the links large with mono
   index numbers on hairline rows.
   --------------------------------------------------------------------------- */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  /* A 44px tap target that still only takes the logo's 32px of header height. */
  width: 44px;
  height: 44px;
  margin: -6px -9px -6px auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.nav__toggle-bar {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

/* The drawer's close button starts as the hamburger and folds into a cross. */
.menu-open .nav__toggle.is-close .nav__toggle-bar {
  transition-delay: 0.2s;
}

.menu-open .nav__toggle.is-close .nav__toggle-bar:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.menu-open .nav__toggle.is-close .nav__toggle-bar:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  background: var(--paper);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s 0.5s;
}

.menu-open {
  overflow: hidden;
}

.menu-open .menu {
  visibility: visible;
  clip-path: inset(0);
  transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s;
}

.menu__bar {
  flex: none;
  border-bottom: var(--rule);
}

.menu__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__links li {
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.menu-open .menu__links li {
  opacity: 1;
  transform: none;
}

.menu-open .menu__links li:nth-child(1) { transition-delay: 0.18s; }
.menu-open .menu__links li:nth-child(2) { transition-delay: 0.24s; }
.menu-open .menu__links li:nth-child(3) { transition-delay: 0.3s; }
.menu-open .menu__links li:nth-child(4) { transition-delay: 0.36s; }

.menu__link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 22px var(--gutter);
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(40px, 12vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.menu__link:hover,
.menu__link:active,
.menu__link:focus-visible {
  background: var(--acid);
  outline: none;
}

.menu__num {
  min-width: 3ch;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

@media (max-width: 599px) {
  .nav__links {
    display: none;
  }

  .nav__toggle,
  .menu {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu,
  .menu-open .menu,
  .menu__links li,
  .nav__toggle-bar {
    transition: none;
  }
}

.hero {
  position: relative;
  flex: 1;
  min-height: 0;
  /* Not used for layout; hero.js reads it as the gutter for the modules. */
  padding-inline: var(--gutter);
  overflow: hidden;
  background: var(--paper);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* hero.js sizes and places this block on the code grid, then reveals it. */
.hero__modules {
  position: absolute;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--module-gap);
  visibility: hidden;
}

.hero.is-ready .hero__modules {
  visibility: visible;
}

/* Scroll hint: a faint track down the cleared middle column, with a black segment
   that keeps sliding down it. hero.js places it. */
.hero__scroll-hint {
  position: absolute;
  width: 1px;
  overflow: hidden;
  background: var(--line);
  transform: translateX(-50%);
  visibility: hidden;
}

.hero.is-ready .hero__scroll-hint {
  visibility: visible;
}

.hero__scroll-hint[hidden] {
  display: none;
}

.hero__scroll-hint::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--ink);
  animation: scroll-hint 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scroll-hint {
  from { top: 0; transform: translateY(-100%); }
  to { top: 100%; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-hint::after {
    animation: none;
    top: 30%;
  }
}

.hero__feature {
  grid-row: span 2;
  padding: 12px 14px;
  overflow: hidden;
}

.hero__about {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  /* hero.js sets the size so the copy fills the box without overflowing. */
  font-size: 15px;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

/* Below 900px the modules go full width: copy box on top, dark boxes side by side. */
@media (max-width: 899px) {
  .hero__modules {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr;
  }

  .hero__feature {
    grid-row: auto;
    grid-column: span 2;
  }
}

.module--accent {
  background: var(--acid);
}

.module--dark {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  background: var(--ink-soft);
  color: var(--paper);
  /* Contents scale with the box so they fill it at every size. */
  container-type: size;
}

/* A whole module that acts as one link; it flips to the accent on hover. */
.module--link {
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.module--link:hover,
.module--link:focus-visible {
  background: var(--acid);
  color: var(--ink);
}

/* Learn more: text and arrow share the bottom line, with the arrow's foot on the
   text's baseline. The label stays on one line and takes the smallest of three
   sizes: its cap, a share of the box's height, and whatever fits the box's width.
   The width fit uses --cta-em, the label plus gap and arrow measured in em (set on
   each link, since every label is a different length), so a label only starts
   shrinking once the box is too narrow to hold it at full size. */
.module--link {
  --cta-max: 84px;
  --cta-height: 86cqb;
  --cta-size: min(var(--cta-max), var(--cta-height), calc((100cqi - 8px) / var(--cta-em, 6)));
  flex-direction: row;
  align-items: last baseline;
  gap: 8px;
}

.module__cta {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--cta-size);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* A block with no text has no baseline, so its bottom edge lines up with the text's. */
.module__arrow {
  display: block;
  flex: none;
  font-size: var(--cta-size);
  transition: transform 0.2s;
}

.module__arrow svg {
  display: block;
  /* Roughly Manrope's cap height, so the arrow matches the letters. */
  width: 0.72em;
  height: 0.72em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
}

.module--link:hover .module__arrow,
.module--link:focus-visible .module__arrow {
  transform: translateX(4px);
}

.profiles {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8cqi;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profiles__link {
  display: block;
  color: var(--paper);
  transition: color 0.2s;
}

.profiles__link:hover,
.profiles__link:focus-visible {
  color: var(--acid);
}

.profiles__link svg {
  display: block;
  /* Three logos plus their gaps fit the box width with room to spare. */
  width: clamp(24px, min(22cqi, 62cqb), 64px);
  height: auto;
  aspect-ratio: 1;
  fill: currentColor;
}

:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Sections: a framed column with visible grid rules, opened by a black label bar.
   --------------------------------------------------------------------------- */
.section {
  padding-block: clamp(96px, 12vw, 176px);
}

.frame {
  margin-inline: var(--gutter);
  border-inline: 1px solid var(--line);
}

/* Label bar. */
.section__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section__label {
  margin: 0;
  font: inherit;
}

.section__intro {
  padding: clamp(32px, 4vw, 56px) clamp(20px, 2.5vw, 36px);
}

.section__lede {
  margin: 0;
  max-width: 30em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* Service rows: name and tools | description. */
.services {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service {
  display: grid;
  grid-template-columns: 2fr 1fr;
  border-top: 1px solid var(--line);
}

.service__main {
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.5vw, 36px);
}

/* Material Symbols: light outlined icons that sit alongside the type. */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}

/* Icon sits on the title's line, to its left, at the title's size. */
.service__heading {
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-size: clamp(32px, 3.8vw, 54px);
}

.service__icon {
  flex: none;
  font-size: 1em;
}

.service__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(32px, 3.8vw, 54px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* The smallest phones: "AUTOMATIONS" is one long word, so step the titles down
   to keep it inside the frame. */
@media (max-width: 359px) {
  .service__heading,
  .service__title {
    font-size: 27px;
  }
}

/* Description sits in the right-hand column, across the rule from the name. */
.service__text {
  margin: 0;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.5vw, 36px);
  border-left: 1px solid var(--line);
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--stone);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Closing strip: the hero's acid and black modules again, hugging each other. */
.section__cta {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--module-gap);
  padding: var(--module-gap);
  border-block: 1px solid var(--line);
}

.section__cta-text {
  margin: 0;
  padding: clamp(20px, 2.5vw, 36px);
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.section__cta-link {
  min-height: 160px;
}

/* Hover: black rises from the bottom of a cell to fill it, and its contents invert. */
.service__main,
.service__text {
  position: relative;
  isolation: isolate;
  transition: color 0.35s ease;
}

.service__main::before,
.service__text::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.service__main:hover,
.service__text:hover {
  color: var(--paper);
}

.service__main:hover::before,
.service__text:hover::before {
  transform: scaleY(1);
}

.tags li {
  transition: background-color 0.35s ease, color 0.35s ease;
}

.service__main:hover .tags li {
  background: var(--ink-soft);
  color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--logo-side);
}

@media (prefers-reduced-motion: reduce) {
  .service__main,
  .service__text,
  .service__main::before,
  .service__text::before,
  .tags li {
    transition: none;
  }
}

@media (max-width: 899px) {
  .service,
  .section__cta {
    grid-template-columns: 1fr;
  }

  .service__text {
    padding-top: 0;
    border-left: 0;
  }

  .section__cta-link {
    min-height: 96px;
  }
}

/* ---------------------------------------------------------------------------
   Work: breaks the framed-section pattern with a full-bleed dark band. A large
   line of copy sits over a single row of the top actors, traced from the store
   icons, which rest in the paper colour and flip to the accent on hover.
   --------------------------------------------------------------------------- */
.showcase {
  margin-top: clamp(96px, 12vw, 176px);
  background: var(--ink-soft);
  color: var(--paper);
  /* The hover labels are hidden with clip-path, which still counts toward the
     page's width; clip them here so they can never make the page scroll sideways. */
  overflow-x: hidden;
  overflow-x: clip;
}

.showcase__inner {
  display: grid;
  gap: clamp(64px, 9vw, 144px);
  padding: clamp(80px, 10vw, 160px) var(--gutter);
}

.showcase__lede {
  margin: 0;
  max-width: 22em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.actors {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The link carries the scroll reveal's transform and opacity, so the hover
   motion lives on the icon and its label instead. */
.actors__link {
  position: relative;
  display: block;
  line-height: 0;
  color: var(--paper);
}

.actors__link svg {
  display: block;
  height: clamp(48px, 9.5vw, 152px);
  width: auto;
  aspect-ratio: 1;
  fill: currentColor;
  transition: color 0.3s ease, opacity 0.3s ease,
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover: the icon turns acid, lifts and grows a little, the rest of the row
   dims, and the actor's name types up underneath. */
.actors__link:hover svg,
.actors__link:focus-visible svg {
  color: var(--acid);
  transform: translateY(-8px) scale(1.08);
}

.actors:has(.actors__link:hover, .actors__link:focus-visible)
  .actors__link:not(:hover, :focus-visible) svg {
  opacity: 0.3;
}

.actors__link::after {
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--acid);
  clip-path: inset(0 100% 0 0);
  transform: translateX(-50%);
  transition: clip-path 0.4s steps(12, end);
}

.actors__link:hover::after,
.actors__link:focus-visible::after {
  clip-path: inset(0 0 0 0);
}

/* End icons keep their label inside the band. */
.actors li:first-child .actors__link::after {
  left: 0;
  transform: none;
}

.actors li:last-child .actors__link::after {
  left: auto;
  right: 0;
  transform: none;
}

/* Narrow screens: two rows of four, each icon centred in its column. */
@media (max-width: 599px) {
  .actors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    row-gap: 40px;
  }

  .actors__link svg {
    height: clamp(52px, 16vw, 88px);
  }

  /* Labels hang from the outer edge of each row's first and last icon, and stay
     centred on the two in the middle. */
  .actors li .actors__link::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .actors li:nth-child(4n + 1) .actors__link::after {
    left: 0;
    transform: none;
  }

  .actors li:nth-child(4n) .actors__link::after {
    left: auto;
    right: 0;
    transform: none;
  }
}

/* Wordmark between sections, spanning the same width as the section frames. */
.wordmark {
  margin-inline: var(--gutter);
}

.wordmark img,
.wordmark svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Tagline under the hero, set in Manrope; tagline.js crops the viewBox to the letters
   so they run edge to edge like the wordmark. */
.wordmark--tagline {
  display: grid;
  /* tagline.js sets the text's column to its aspect ratio; the second number is the
     drawing's, so both share a height. */
  grid-template-columns: var(--tagline-ratio, 9fr) 1.27fr;
  gap: clamp(12px, 2vw, 32px);
  align-items: end;
  padding-top: clamp(96px, 12vw, 176px);
}

.wordmark--tagline text {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 100px;
  letter-spacing: -0.05em;
  fill: var(--ink);
}

/* Data: asymmetric blocks on a six-column grid, hugging each other with the module
   gap. Auto-placement packs them as: big block + two stacked, then 2 + 4, then 3 + 3. */
.stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(190px, auto);
  gap: var(--module-gap);
  padding: var(--module-gap);
  border-block: 1px solid var(--line);
}

.stat {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(16px, 2vw, 28px);
  /* The number scales with the block's width. */
  container-type: inline-size;
}

.stat--wide { grid-column: span 4; }
.stat--half { grid-column: span 3; }
.stat--tall { grid-row: span 2; }

.stat--accent { background: var(--acid); }
.stat--stone { background: var(--stone); }
.stat--outline { box-shadow: inset 0 0 0 1px var(--line); }

.stat--dark {
  background: var(--ink-soft);
  color: var(--paper);
}

.stat__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.stat__icon {
  flex: none;
  font-size: 48px;
}

.stat__label {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stat__value {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(48px, 22cqi, 220px);
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.stat__text {
  margin: 16px 0 0;
  max-width: 26em;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
}

@media (max-width: 899px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(150px, auto);
  }

  /* Full width on phones, except the pair that sits beside the big block on desktop. */
  .stat,
  .stat--wide,
  .stat--half {
    grid-column: span 2;
  }

  .stat--pair {
    grid-column: span 1;
  }

  .stat--tall {
    grid-row: auto;
  }
}

/* Splash (splash.js): the logo over the studio's name, which doubles as the loading
   bar. Unsettled letters churn in the muted ink and turn solid as they settle. Only
   shown under html.is-loading, which also holds the page still until it fades. */
.splash {
  display: none;
}

.is-loading {
  overflow: hidden;
}

.is-loading .splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  background: var(--paper);
  transition: opacity 0.6s ease;
}

.splash.is-done {
  opacity: 0;
  pointer-events: none;
}

.splash__mark {
  display: block;
  width: 64px;
  height: auto;
  aspect-ratio: 101.14 / 84.36;
  fill: var(--ink);
}

.splash__name {
  margin: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

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

.splash__letter.is-settled {
  color: var(--ink);
}

/* Text scramble (scramble.js): while a letter is scrambling, its real glyph keeps its
   place but is invisible, and a code character is drawn centred over it. */
.scramble-word {
  white-space: nowrap;
}

.scramble-char {
  position: relative;
}

.scramble-char.is-scrambling {
  -webkit-text-fill-color: transparent;
}

.scramble-char.is-scrambling::after {
  content: attr(data-glyph);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.9em;
  text-transform: uppercase;
  -webkit-text-fill-color: currentColor;
}

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

/* ---------------------------------------------------------------------------
   Contact: a bug-report form — spec-sheet rows with mono labels and hairline
   rules, topic chips, and a dark module for a submit button.
   --------------------------------------------------------------------------- */
.footer {
  padding-block: clamp(96px, 12vw, 176px) 0;
}

/* The email is a long string; it needs a smaller cap than the short module CTAs. */
.footer__cta-link {
  --cta-max: 56px;
  --cta-height: 30cqb;
  min-height: 200px;
}

/* Netlify honeypot: out of sight, out of tab order, still in the markup. */
.report__bot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Report rows: mono label | field, divided by the same rules as the services. */
.report__row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  border-top: 1px solid var(--line);
  transition: background-color 0.3s ease;
}

/* The row under focus tints like paper being marked up. */
.report__row:focus-within {
  background: var(--stone);
}

.report__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.5vw, 36px);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.report__label label {
  cursor: pointer;
}

.report__label-text {
  margin: 0;
}

.report__req {
  color: var(--ink-muted);
  font-size: 11px;
}

.report__field {
  min-width: 0;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.5vw, 36px);
  border-left: 1px solid var(--line);
}

/* Borderless fields: the row's rules are the form's chrome. */
.report__input {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  outline: none;
}

.report__input::placeholder {
  color: var(--ink-muted);
}

.report__textarea {
  min-height: 160px;
  resize: vertical;
}

/* Topic chips: the tag pills from the service rows, now as radios. */
.report__chips {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 6px;
}

.report__chip {
  position: relative;
}

.report__chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.report__chip span {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--stone);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.report__chip:hover span {
  background: var(--ink);
  color: var(--paper);
}

.report__chip input:checked + span {
  background: var(--acid);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

.report__chip input:focus-visible + span {
  outline: 2px solid var(--acid);
  outline-offset: 2px;
}

/* Closing row: availability note beside the submit module. */
.report__row--submit {
  border-bottom: 1px solid var(--line);
}

.report__row--submit:focus-within {
  background: transparent;
}

.report__note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.5vw, 36px);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.report__note-text {
  margin: 0;
  color: var(--ink-muted);
  font-size: 11px;
}

/* The button is a module: it fills the field cell edge to edge and flips to
   the accent on hover like every other dark module on the page. */
.report__field--flush {
  display: flex;
  padding: 0;
}

.report__submit {
  flex: 1;
  min-height: clamp(160px, 22vw, 240px);
  border: 0;
  cursor: pointer;
  font: inherit;
}

/* ---------------------------------------------------------------------------
   Footer: the acid-and-dark CTA pair, link columns on hairline rows, and the
   full-width black colophon bar flush with the page end.
   --------------------------------------------------------------------------- */
.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.footer__col {
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.5vw, 36px);
}

.footer__col + .footer__col {
  border-left: 1px solid var(--line);
}

.footer__heading {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__list li {
  border-top: 1px solid var(--line);
}

.footer__list li:first-child {
  border-top: 0;
}

/* Row links: black rises from the bottom of the row and the text inverts. */
.footer__link {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.35s ease;
}

.footer__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--paper);
}

.footer__link:hover::before,
.footer__link:focus-visible::before {
  transform: scaleY(1);
}

.footer__icon {
  flex: none;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* Coordinates: metadata rows in mono, label muted against value. */
.footer__meta {
  margin: 0;
}

.footer__meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer__meta-row:first-child {
  border-top: 0;
}

.footer__meta dt {
  color: var(--ink-muted);
}

.footer__meta dd {
  margin: 0;
  text-align: right;
}

/* Availability: a small acid square that breathes, like a live indicator. */
.footer__status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  background: var(--acid);
  box-shadow: 0 0 0 1px var(--ink);
  animation: status-pulse 2.2s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Colophon: the black bar that closes the page, mirroring the header's rule. */
.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(48px, 6vw, 96px);
  padding: 14px var(--gutter);
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer__copy,
.footer__tagline {
  margin: 0;
}

.footer__mark {
  flex: none;
  height: 20px;
  width: auto;
  aspect-ratio: 101.14 / 84.36;
  fill: var(--acid);
}

.footer__top {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--paper);
  text-decoration: none;
  transition: color 0.2s;
}

.footer__top:hover,
.footer__top:focus-visible {
  color: var(--acid);
}

.footer__top-arrow {
  display: block;
}

.footer__top-arrow svg {
  display: block;
  width: 0.9em;
  height: 0.9em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  transition: transform 0.2s;
}

.footer__top:hover .footer__top-arrow svg,
.footer__top:focus-visible .footer__top-arrow svg {
  transform: translateY(-3px);
}

/* Scroll reveal (footer.js): blocks rise into place once, staggered per row.
   The hidden state only applies once JS has claimed the animation, so the
   footer is fully visible without JS and under reduced motion. */
[data-reveal].reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .report__row,
  .report__chip span,
  .actors__link svg,
  .actors__link::after,
  .footer__link,
  .footer__link::before,
  .footer__top,
  .footer__top-arrow svg,
  .footer__status::before {
    animation: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (max-width: 899px) {
  .report__row {
    grid-template-columns: 1fr;
  }

  .report__label {
    padding-bottom: 12px;
  }

  .report__field {
    border-left: 0;
    padding-top: 0;
  }

  .report__field--flush {
    padding: 0;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__col + .footer__col {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .footer__bar {
    flex-wrap: wrap;
  }
}