@font-face {
  font-family: Inter;
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("/fonts/inter-latin-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
:root {
  --bg: #111110;
  --text: #eeedea;
  --muted: #888885;
  --line: #353533;
  --paper: #f4f4f1;
  --font: Inter, Arial, Helvetica, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --hero-radius: 26px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-padding-top: 30px;
}
@media (prefers-reduced-motion: no-preference) {
  html.smooth-scroll {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  color: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: wait;
}
img {
  max-width: 100%;
  display: block;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  font-weight: 400;
}
h2 {
  font-size: clamp(30px, 3.7vw, 54px);
  line-height: 1.07;
  letter-spacing: -0.065em;
}
::selection {
  background: var(--paper);
  color: var(--bg);
}
:focus-visible {
  outline: 2px solid #aaa;
  outline-offset: 6px;
}
[hidden] {
  display: none !important;
}
.site-shell {
  max-width: 1504px;
  margin: auto;
  padding: 0 32px;
}
.site-header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 5;
}
.wordmark {
  font-size: 20px;
  letter-spacing: -1px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wordmark-star {
  font-size: 12px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 23px;
}
.site-nav a {
  font-size: 11px;
  color: #bbb;
  transition: color 0.2s;
}
.site-nav a:hover {
  color: #fff;
}
.header-contact,
.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--paper);
  color: var(--bg);
  border-radius: 30px;
  padding: 9px 17px;
  font-size: 11px;
  line-height: 1.5;
  transition: background 0.25s;
}
.header-contact:hover,
.pill-button:hover {
  background: #d7d7d1;
}
.header-contact span {
  font-size: 15px;
}
.menu-toggle {
  display: none;
  border: 0;
  background: none;
  padding: 10px;
  width: 42px;
  height: 42px;
}
.menu-toggle span {
  display: block;
  background: var(--text);
  height: 1px;
  margin: 6px 0;
}
.skip-link {
  position: fixed;
  left: 20px;
  top: -80px;
  background: var(--paper);
  color: #111;
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus {
  top: 12px;
}
.hero {
  height: clamp(510px, 58vw, 780px);
  position: relative;
  overflow: hidden;
  background: #f7f7f7;
  border-radius: var(--hero-radius);
  color: #171716;
}
/* The artwork and everything drawn over it share one frame (on phones it
   carries the fade, applied once to all of them) */
.hero-art-frame {
  position: absolute;
  inset: 0;
}
.hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-title-group {
  position: absolute;
  top: 38px;
  left: 48px;
}
.hero h1 {
  font-size: clamp(72px, 8.3vw, 128px);
  line-height: 1.01;
  letter-spacing: -0.085em;
}
.hero-symbols {
  display: flex;
  align-items: center;
  margin-top: 8px;
}
.asterisk {
  width: 65px;
  height: 65px;
  display: grid;
  place-items: center;
  background: #131312;
  color: #f7f7f7;
  border-radius: 50%;
  font-size: 57px;
  line-height: 1;
}
.hero-capabilities {
  position: absolute;
  bottom: 35px;
  left: 48px;
}
.hero-capabilities p {
  font-size: 11px;
  margin-bottom: 12px;
  color: #73736f;
}
.chip-row {
  display: flex;
  gap: 5px;
  margin-bottom: 5px;
}
.chip-row a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #585855;
  border-radius: 22px;
  padding: 3px 11px 3px 7px;
  background: #f5f5f2c9;
  font-size: 15px;
  line-height: 1.35;
  transition: background 0.2s;
}
.chip-row a span {
  font-size: 11px;
}
.chip-row a:hover {
  background: #111;
  color: white;
}
.hero-index {
  position: absolute;
  bottom: 28px;
  right: 30px;
  z-index: 1;
  writing-mode: vertical-rl;
  font-size: 9px;
  letter-spacing: 0.08em;
  /* A paper tag, like the chips, so it reads over ink of any tone */
  padding: 12px 5px;
  border-radius: 99px;
  background: #f5f5f2db;
  color: #5c5c58;
}
.manifesto {
  padding: 68px 0 0;
}
.manifesto > p {
  font-size: clamp(26px, 3.7vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.065em;
  max-width: 1280px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
}
.manifesto > .text-link {
  margin-top: 26px;
}
.tiny-arrow {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  background: #eeedea;
  color: #111;
  font-size: 13px;
  border-radius: 3px;
}
.section-space {
  margin-top: 120px;
}
.approach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 38px;
  margin-top: 42px;
}
.approach-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 19px;
}
.approach-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  transform-origin: left;
}
.approach-label h3 {
  font-size: 12px;
  letter-spacing: -0.03em;
}
.outline-icon {
  font-size: 21px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid #999;
  border-radius: 3px;
  line-height: 1;
}
.approach-grid h4 {
  font-size: 13px;
  margin-bottom: 9px;
}
.approach-grid p {
  font-size: 11px;
  line-height: 1.6;
  color: #93938f;
  max-width: 260px;
}
.section-rule {
  height: 2px;
  background: #292927;
  margin-top: 40px;
}
.section-rule span {
  display: block;
  width: 44%;
  height: 2px;
  background: #afafaa;
  transform-origin: left;
}
.section-rule.is-linked span {
  width: 100%;
  transform: scaleX(var(--progress, 0.44));
}
.section-intro {
  margin-bottom: 26px;
}
.section-intro p {
  font-size: 11px;
  line-height: 1.5;
  color: #92928e;
  margin-top: 15px;
}
.work-accordion {
  display: flex;
  height: 700px;
  gap: 8px;
}
.work-panel {
  position: relative;
  flex: 0 0 10%;
  background: #181817;
  min-width: 0;
  transition:
    flex 0.7s var(--ease),
    background-color 0.3s;
  overflow: hidden;
}
.work-panel.is-active {
  flex: 1;
  background: #31312f;
  padding: 20px;
}
.work-toggle {
  position: absolute;
  z-index: 3;
  inset: 0;
  border: 0;
  background: none;
  text-align: left;
  padding: 30px;
  color: #ddd;
}
.work-plus {
  position: absolute;
  right: 30px;
  top: 25px;
  font-size: 26px;
  color: #aaa;
  font-weight: 400;
}
.work-number {
  font-size: 10px;
  opacity: 0;
}
.work-vertical-title {
  position: absolute;
  bottom: 38px;
  left: 50%;
  font-size: 32px;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  line-height: 1;
  letter-spacing: -0.06em;
}
.is-active .work-toggle {
  inset: 0 0 auto;
  height: 58px;
  width: 100%;
  pointer-events: none;
}
.is-active .work-toggle .work-number,
.is-active .work-toggle .work-vertical-title,
.is-active .work-toggle .work-plus {
  display: none;
}
.work-content {
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #e5e6e1;
}
.work-art {
  --art-scale: 1.12;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
  transform: scale(var(--art-scale)) rotate(180deg);
}
.work-eyebrow {
  position: absolute;
  top: 22px;
  left: 24px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #111;
  background: #efefeaac;
  padding: 4px 7px;
}
.work-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(240px, 27vw, 420px);
  padding: 30px;
  background: #e9eae4eb;
  color: #252523;
  backdrop-filter: blur(10px);
}
.eyebrow {
  display: block;
  font-size: 9px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: #a3a39d;
}
.work-caption .eyebrow {
  color: #6c6c66;
}
.work-caption h3 {
  font-size: 30px;
  letter-spacing: -0.06em;
  line-height: 1.07;
  margin: 14px 0;
}
.work-caption p {
  font-size: 11px;
  color: #73736b;
  line-height: 1.5;
}
.work-caption .text-link {
  margin-top: 22px;
}
.work-caption .tiny-arrow {
  background: #262624;
  color: #eee;
}
.design-study {
  height: 100%;
  background: #d6d6ce;
  color: #111;
  position: relative;
  overflow: hidden;
  padding: 30px;
}
.design-word {
  font-size: clamp(90px, 12vw, 180px);
  letter-spacing: -0.09em;
  line-height: 1;
}
.design-asterisk {
  font-size: 360px;
  position: absolute;
  top: 95px;
  left: 30px;
  line-height: 1;
}
.design-bottom {
  font-size: 11px;
  letter-spacing: 0.07em;
  position: absolute;
  bottom: 30px;
  left: 30px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.engineering-study {
  height: 100%;
  background: #252524;
  color: #ddd;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 55px;
  position: relative;
}
.system-node {
  white-space: nowrap;
  font-size: 16px;
  border: 1px solid #aaa;
  border-radius: 40px;
  padding: 13px 25px;
  z-index: 1;
}
.system-line {
  height: 60px;
  width: 1px;
  background: #777;
  margin-left: 45px;
}
.system-node-end {
  background: #d6d6cf;
  color: #111;
}
.engineering-cross {
  position: absolute;
  font-size: 400px;
  font-weight: 400;
  line-height: 1;
  right: -20px;
  top: -80px;
  color: #333330;
}
.services-section {
  margin-top: 84px;
}
.service-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-item {
  background: #161615;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 30px;
}
.service-toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 155px;
  width: 100%;
  padding: 32px;
  border: 0;
  background: none;
  text-align: left;
  position: relative;
  z-index: 2;
  font-size: clamp(24px, 3.2vw, 45px);
  letter-spacing: -0.055em;
  line-height: 1.1;
}
.service-number {
  font-size: 11px;
  letter-spacing: 0;
  color: #aaa;
  align-self: center;
}
.service-toggle:focus-visible,
.work-toggle:focus-visible {
  outline-offset: -6px;
}
.service-toggle-sign {
  position: relative;
  margin-left: auto;
  width: 22px;
  height: 22px;
  flex: none;
}
.service-toggle-sign::before,
.service-toggle-sign::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  background: #aaa;
}
.service-toggle-sign::after {
  transform: rotate(90deg);
}
.service-item.is-open .service-toggle-sign::after {
  transform: rotate(180deg);
}
@media (min-width: 701px) {
  .service-item.is-open .service-toggle-sign {
    translate: 0 46px;
    filter: drop-shadow(0 0 3px rgb(0 0 0 / 0.55));
  }
}
.service-list.is-jumping *,
.service-list.is-jumping *::before,
.service-list.is-jumping *::after {
  transition: none !important;
}
.service-content {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
}
.service-item.is-open .service-content {
  grid-template-rows: 1fr;
  visibility: visible;
}
.service-clip {
  min-height: 0;
  overflow: hidden;
}
.service-body {
  padding: 0 32px 35px 73px;
  min-height: 152px;
}
.service-body:has(.service-diagram),
.service-body:has(.service-creative-art) {
  min-height: 180px;
}
.service-copy {
  width: 39%;
  position: relative;
  z-index: 1;
}
.service-copy p {
  font-size: 12px;
  line-height: 1.6;
  color: #a9a9a3;
}
.service-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 15px;
  margin-top: 18px;
}
.service-links a {
  --underline: #777;
  font-size: 10px;
  padding-bottom: 2px;
}
.service-links a,
.page-main .text-link,
a.contact-detail-value {
  border-bottom: 1px solid transparent;
  background: linear-gradient(
      90deg,
      var(--underline) 33.333%,
      transparent 33.333% 66.667%,
      var(--underline) 66.667%
    )
    100% 100% / 300% 1px no-repeat border-box;
}
.service-links a:hover,
.page-main .text-link:hover,
a.contact-detail-value:hover {
  background-position: 0% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .service-links a,
  .page-main .text-link,
  a.contact-detail-value {
    transition: background-position 0.8s var(--ease);
  }
}
.service-links a:hover {
  --underline: #fff;
  color: #fff;
}
.service-art {
  position: absolute;
  width: 65%;
  height: 100%;
  top: 0;
  right: 0;
  pointer-events: none;
}
.service-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}
.service-art {
  overflow: hidden;
}
.sheen {
  position: absolute;
  left: 0;
  top: 0;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgb(255 255 255 / 0.6),
    rgb(255 255 255 / 0)
  );
  mix-blend-mode: overlay;
  opacity: 0;
  transform: translate(55%, -35%);
  will-change: transform;
}
.service-art.is-lit .sheen {
  opacity: 1;
}
.service-art,
.service-diagram,
.service-creative-art {
  opacity: 0;
  visibility: hidden;
}
.service-item.is-open .service-art,
.service-item.is-open .service-diagram,
.service-item.is-open .service-creative-art {
  opacity: 1;
  visibility: visible;
}
.service-item.is-open {
  background: #333332;
}
.service-item.is-open .service-toggle {
  min-height: 118px;
}
.service-diagram {
  position: absolute;
  right: 45px;
  top: 138px;
  width: 43%;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: center;
}
.service-diagram span {
  border: 1px solid #92928d;
  font-size: 10px;
  border-radius: 35px;
  padding: 18px;
}
.service-diagram i {
  font-style: normal;
  font-size: 25px;
}
.service-creative-art {
  position: absolute;
  right: 100px;
  top: 38px;
  line-height: 1;
  font-size: 180px;
  letter-spacing: -0.1em;
  color: #b9b9b0;
}
.service-creative-art span {
  font-size: 140px;
}
.project-banner {
  height: 350px;
  margin-top: 125px;
  position: relative;
  overflow: hidden;
}
.project-banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  transform: scale(1.4) rotate(180deg);
  filter: brightness(0.44);
}
.project-banner:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1112;
}
.project-banner-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.project-banner-content .eyebrow {
  font-size: 9px;
  color: #ccc;
}
.project-banner.reveal h2 {
  white-space: nowrap;
}
.project-banner h2 {
  font-size: clamp(40px, 5.4vw, 78px);
  letter-spacing: -0.065em;
  margin: 10px 0;
}
.project-banner-content > p {
  font-size: 9px;
  letter-spacing: 0.09em;
  color: #c1c1bb;
}
.project-banner .pill-button {
  margin-top: 24px;
  text-transform: uppercase;
  padding: 7px 9px 7px 14px;
  font-size: 9px;
  gap: 16px;
}
.button-arrow {
  background: #171716;
  color: #eee;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.connect-section {
  max-width: 490px;
  margin: 135px auto 155px;
  padding: 0 10px;
}
.connect-section h2 {
  font-size: 38px;
  letter-spacing: -0.07em;
  text-align: center;
  margin-bottom: 45px;
}
.form-field {
  position: relative;
  border-bottom: 1px solid #363633;
  padding: 0 0 7px;
  margin-bottom: 29px;
}
.form-field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: #ddd;
  transform: scaleX(0);
  transform-origin: left;
}
.form-field:focus-within::after {
  transform: scaleX(1);
}
.form-field:focus-within label {
  color: #eee;
}
.form-field label {
  display: block;
  font-size: 9px;
  color: #aaa;
  letter-spacing: 0.025em;
}
.form-field label span {
  color: #71716d;
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  border: 0;
  outline: none;
  border-radius: 0;
  background: transparent;
  color: #eee;
  padding: 9px 0 2px;
  font-size: 14px;
  min-height: 35px;
  resize: vertical;
  box-shadow: none;
}
.form-field select {
  color: #aaa;
  cursor: pointer;
}
.form-field option {
  background: #222;
  color: #eee;
}
.form-submit {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 6px 0;
  margin-left: auto;
  font-size: 10px;
}
.form-submit .tiny-arrow {
  border-radius: 50%;
}
.form-status {
  font-size: 12px;
  color: #ddd;
  line-height: 1.6;
}
.form-status:not(:empty) {
  margin-bottom: 20px;
}
.form-status a {
  border-bottom: 1px solid;
}
.form-submit:disabled {
  opacity: 0.5;
}
.form-privacy {
  font-size: 9px;
  color: #777;
  margin-top: 20px;
  text-align: right;
}
.form-privacy a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer {
  padding-bottom: 22px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 35px;
  padding-bottom: 44px;
}
.footer-email {
  display: block;
  font-size: clamp(26px, 3.4vw, 50px);
  letter-spacing: -0.075em;
  line-height: 1.1;
  margin-top: 34px;
}
.footer-email > span {
  font-size: 30px;
  display: none;
}
.footer-links {
  display: flex;
  gap: 65px;
  flex-shrink: 0;
  font-size: 10px;
  color: #93938d;
  line-height: 2;
}
.footer-links > div {
  display: flex;
  flex-direction: column;
}
.footer-links a:hover {
  color: white;
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  font-size: 9px;
  color: #777;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.page-main {
  padding-top: 75px;
}
.page-main h1 {
  font-size: clamp(48px, 7vw, 100px);
  letter-spacing: -0.075em;
  line-height: 1.04;
}
.page-main p {
  color: #aaa;
}
.success-title {
  font-size: 26px;
  letter-spacing: -0.04em;
  margin-bottom: 14px;
}
.form-success {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.form-success p {
  font-size: 13px;
  color: #aaa;
}
.form-success a {
  margin-top: 22px;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (min-width: 1500px) {
  .hero {
    height: 800px;
  }
}
@media (max-width: 1050px) {
  .site-shell {
    padding: 0 24px;
  }
  .hero {
    height: 620px;
  }
  .hero-title-group {
    left: 35px;
    top: 35px;
  }
  .hero-capabilities {
    left: 35px;
  }
  .hero h1 {
    font-size: 100px;
  }
  .hero-art {
    object-position: 45% center;
  }
  .hero-index {
    display: none;
  }
  .approach-grid {
    gap: 24px;
  }
  .work-accordion {
    height: 570px;
  }
  .work-panel.is-active {
    padding: 14px;
  }
  .work-toggle {
    padding: 20px;
  }
  .work-plus {
    right: 21px;
  }
  .work-vertical-title {
    font-size: 25px;
  }
  .work-caption {
    padding: 25px;
    width: clamp(215px, 27vw, 420px);
  }
  .service-copy {
    width: 46%;
  }
  .service-body {
    padding-left: 62px;
  }
  .service-toggle {
    padding-left: 26px;
  }
  .service-art {
    width: 59%;
  }
  .footer-links {
    gap: 25px;
  }
  .section-space {
    margin-top: 95px;
  }
  .service-creative-art {
    right: 40px;
    font-size: 145px;
  }
  .service-creative-art span {
    font-size: 110px;
  }
}
@media (max-width: 700px) {
  .site-shell {
    padding: 0 18px;
  }
  .site-header {
    height: 65px;
  }
  .wordmark {
    font-size: 18px;
  }
  .header-contact {
    margin-left: auto;
    margin-right: 12px;
    padding: 7px 12px;
    font-size: 10px;
  }
  .menu-toggle {
    display: block;
  }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 59px;
    background: #1d1d1a;
    border: 1px solid #444;
    padding: 25px;
    flex-direction: column;
    align-items: flex-start;
    gap: 23px;
  }
  .site-nav.active {
    display: flex;
  }
  .site-nav a {
    font-size: 16px;
  }
  .hero {
    --hero-radius: 20px;
    height: 650px;
  }
  /* The whole artwork as a band between the title and the caption, its
     ink against the card's right edge, fading in and out at top and bottom */
  .hero-art-frame {
    inset: auto;
    top: 210px;
    right: 0;
    width: 412px;
    height: 275px;
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      #000 28%,
      #000 80%,
      transparent 100%
    );
  }
  .hero-title-group {
    left: 26px;
    top: 28px;
  }
  .hero h1 {
    font-size: 87px;
    letter-spacing: -0.085em;
  }
  .asterisk {
    width: 49px;
    height: 49px;
    font-size: 43px;
  }
  .hero-capabilities {
    bottom: 28px;
    left: 25px;
  }
  .hero-capabilities p {
    font-size: 10px;
    max-width: 180px;
  }
  .chip-row a {
    background: #f4f4f1e8;
    padding: 3px 8px 3px 6px;
    gap: 5px;
  }
  .chip-row a span {
    font-size: 10px;
  }
  .manifesto {
    padding-top: 38px;
  }
  .manifesto > p {
    font-size: 29px;
    line-height: 1.13;
  }
  .desktop-break {
    display: none;
  }
  .manifesto > .text-link {
    margin-top: 23px;
  }
  .section-space {
    margin-top: 80px;
  }
  h2 {
    font-size: 36px;
  }
  .approach-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px 22px;
    margin-top: 30px;
  }
  .approach-label {
    gap: 9px;
    padding-bottom: 13px;
    margin-bottom: 14px;
  }
  .approach-label h3 {
    font-size: 10px;
  }
  .outline-icon {
    width: 23px;
    height: 23px;
    font-size: 17px;
  }
  .approach-grid h4 {
    font-size: 12px;
  }
  .approach-grid p {
    font-size: 11px;
  }
  .section-rule {
    margin-top: 30px;
  }
  .section-intro p {
    font-size: 11px;
    max-width: 290px;
  }
  .section-intro {
    margin-bottom: 22px;
  }
  .work-accordion {
    height: 540px;
    gap: 5px;
  }
  .work-panel {
    flex-basis: 11%;
  }
  .work-panel.is-active {
    padding: 9px;
  }
  .work-caption {
    min-width: 0;
    width: 100%;
    padding: 23px;
    background: #e9eae4f2;
  }
  .work-caption h3 {
    font-size: 27px;
    margin: 9px 0;
  }
  .work-caption p {
    max-width: 220px;
  }
  .work-caption .text-link {
    margin-top: 14px;
  }
  .work-plus {
    right: 50%;
    transform: translateX(50%);
    top: 17px;
    font-size: 22px;
  }
  .work-vertical-title {
    font-size: 21px;
    bottom: 27px;
  }
  .work-eyebrow {
    left: 14px;
    top: 15px;
    font-size: 7px;
    max-width: 90%;
    padding: 3px 4px;
  }
  .work-art {
    --art-scale: 1.15;
    object-position: 75% center;
    height: 100%;
  }
  .design-word {
    font-size: 65px;
  }
  .design-study {
    padding: 14px;
  }
  .design-asterisk {
    font-size: 210px;
    top: 90px;
    left: 5px;
  }
  .engineering-study {
    padding: 15px;
    justify-content: flex-start;
    padding-top: 75px;
  }
  .system-node {
    font-size: 11px;
    padding: 9px 14px;
  }
  .system-line {
    height: 30px;
    margin-left: 25px;
  }
  .engineering-cross {
    font-size: 200px;
    right: 0;
    top: 0;
  }
  .services-section {
    margin-top: 70px;
  }
  .service-toggle {
    min-height: 125px;
    font-size: 24px;
    padding: 22px 17px;
    gap: 12px;
  }
  .service-number {
    font-size: 9px;
  }
  .service-item.is-open .service-toggle {
    min-height: 98px;
  }
  .service-toggle-sign {
    width: 18px;
    height: 18px;
  }
  .service-body {
    padding: 0 24px 25px 47px;
    min-height: 310px;
  }
  .service-copy {
    width: 100%;
    max-width: none;
  }
  .service-copy p {
    font-size: 11px;
    max-width: 300px;
  }
  .service-body {
    position: relative;
  }
  .service-art {
    width: 100%;
    height: 175px;
    top: auto;
    bottom: 0;
  }
  .service-art img {
    object-position: 80% center;
  }
  .service-body:has(.service-diagram),
  .service-body:has(.service-creative-art) {
    min-height: 300px;
  }
  .service-diagram {
    width: 90%;
    right: 5%;
    top: auto;
    bottom: 35px;
    gap: 9px;
  }
  .service-diagram span {
    font-size: 8px;
    padding: 13px 10px;
  }
  .service-diagram i {
    font-size: 18px;
  }
  .service-creative-art {
    top: auto;
    bottom: 0;
    right: 40px;
    font-size: 115px;
  }
  .service-creative-art span {
    font-size: 100px;
  }
  .project-banner {
    height: 275px;
    margin-top: 80px;
  }
  .project-banner h2 {
    font-size: min(44px, 13vw);
  }
  .project-banner-content .eyebrow {
    font-size: 8px;
  }
  .project-banner-content > p {
    font-size: 7px;
  }
  .connect-section {
    margin: 80px auto 100px;
    padding: 0 19px;
  }
  .connect-section h2 {
    font-size: 33px;
    margin-bottom: 40px;
  }
  .footer-top {
    display: block;
    padding-bottom: 30px;
  }
  .footer-email {
    font-size: clamp(23px, 6vw, 39px);
    margin-top: 20px;
    letter-spacing: -0.065em;
  }
  .footer-links {
    margin-top: 32px;
    justify-content: space-between;
    max-width: 320px;
  }
  .footer-bottom {
    font-size: 8px;
    gap: 10px;
  }
  .footer-bottom > span:nth-child(2) {
    display: none;
  }
  .page-main {
    padding-top: 45px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
  }
}

.inline-star {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  flex-shrink: 0;
}
.inline-arrow {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  vertical-align: -0.07em;
  flex-shrink: 0;
}
.wordmark-star {
  display: inline-flex;
  color: inherit;
}
.wordmark-star .inline-star {
  width: 10px;
  height: 10px;
}
.asterisk .inline-star {
  width: 43px;
  height: 43px;
}
.chip-row .inline-star {
  width: 12px;
  height: 12px;
}
.design-asterisk .inline-star {
  width: 1em;
  height: 1em;
}
.service-links a .inline-arrow {
  margin-left: 3px;
}
.hero-title-group,
.hero-capabilities {
  z-index: 1;
}
/* The live ink (hero-ink.js) sits over the still it continues from */
.hero-live {
  opacity: 0;
  pointer-events: none;
  /* Its bitmap matches its box; never rescale it like the photo */
  object-fit: fill;
  transition: opacity 1.2s var(--ease);
}
.hero-live.is-ready {
  opacity: 1;
}
html:not(.intro-seen) .hero-art.hero-live {
  animation: none;
}
/* Once it has faded in, the stills beneath it are hidden. Print shows the
   still. */
@media screen {
  .hero.has-live img.hero-art {
    visibility: hidden;
  }
}
@media print {
  .hero-live {
    display: none;
  }
}
@media (max-width: 700px) {
  .asterisk .inline-star {
    width: 32px;
    height: 32px;
  }
}

/* ── Motion ───────────────────────────────────────────────
   One curve (--ease), short distances, reveals play once.
   Everything that moves sits behind prefers-reduced-motion. */

/* Structure that motion relies on (safe without motion) */
.ln {
  display: block;
}
.ln > span {
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .ln {
    overflow: hidden;
    padding: 0 0.1em 0.14em 0;
    margin: 0 -0.1em -0.14em 0;
  }
}
.hero-capabilities > :nth-child(2) {
  --i: 1;
}
.hero-capabilities > :nth-child(3) {
  --i: 2;
}
.hero-capabilities > :nth-child(4) {
  --i: 3;
}
.hero-capabilities > :nth-child(5) {
  --i: 4;
}
.engineering-study > :nth-child(2) {
  --i: 1;
}
.engineering-study > :nth-child(3) {
  --i: 2;
}
.engineering-study > :nth-child(4) {
  --i: 3;
}
.engineering-study > :nth-child(5) {
  --i: 4;
}
.engineering-study > :nth-child(6) {
  --i: 5;
}
.arrow-swap {
  display: inline-grid;
  overflow: hidden;
  vertical-align: -0.07em;
  flex: none;
}
.arrow-swap > svg {
  grid-area: 1 / 1;
  margin: 0 !important;
  vertical-align: top;
}
.service-links a .arrow-swap {
  margin-left: 3px;
}
.arrow-swap--contact {
  margin-left: 5px;
  vertical-align: -1px;
}
.footer-email > .roll {
  display: inline-block;
  overflow: hidden;
  flex-shrink: 0;
  font-size: inherit;
  white-space: nowrap;
  vertical-align: top;
}
.roll .ch {
  display: inline-block;
  position: relative;
}
.roll .ch::after {
  content: attr(data-ch);
  position: absolute;
  left: 0;
  top: 100%;
}
.send-star {
  display: none;
}
.is-sending .send-star {
  display: block;
}
.form-submit .send-star {
  width: 11px;
  height: 11px;
}
.contact-send .send-star {
  width: 16px;
  height: 16px;
}
.form-submit.is-sending .tiny-arrow > :not(.send-star),
.contact-send.is-sending > :not(.send-star):not(#contact-button-label) {
  display: none;
}

@keyframes rise {
  from {
    translate: 0 115%;
  }
}
@keyframes fade-up {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes draw-x {
  from {
    transform: scaleX(0);
  }
}
@keyframes draw-y {
  from {
    transform: scaleY(0);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes develop {
  from {
    opacity: 0.1;
    scale: 1.08;
  }
}
@keyframes arrive {
  from {
    opacity: 0.1;
    translate: 0 12px;
  }
}
@keyframes hero-open {
  from {
    scale: 0.965;
  }
}
@keyframes hero-focus {
  from {
    opacity: 0.1;
    scale: 1.08;
  }
}
@keyframes hero-soft {
  from {
    scale: 1.08;
  }
}
@keyframes undim {
  to {
    color: var(--text);
  }
}
@keyframes sheen-drift {
  0% {
    transform: translate(-5%, -35%);
  }
  50% {
    transform: translate(60%, 5%);
  }
  100% {
    transform: translate(15%, 35%);
  }
}
@keyframes ast-in {
  from {
    opacity: 0;
    transform: rotate(-135deg) scale(0.4);
  }
}
@keyframes work-settle {
  from {
    scale: 1.125;
  }
}
@keyframes banner-drift {
  from {
    transform: scale(1.52) rotate(180deg);
  }
}
@keyframes tailor {
  from {
    letter-spacing: 0.16em;
    opacity: 0;
  }
  12% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
@keyframes tailor-sm {
  from {
    letter-spacing: 0.06em;
    opacity: 0;
  }
  12% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
@keyframes tailor-xs {
  from {
    letter-spacing: 0em;
    opacity: 0;
  }
  12% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
@keyframes vt-out {
  to {
    opacity: 0;
  }
}
@keyframes vt-in {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* 11 · page to page */
  @view-transition {
    navigation: auto;
  }
  .site-header {
    view-transition-name: site-header;
  }
  ::view-transition-old(root) {
    animation: 0.2s var(--ease) both vt-out;
  }
  ::view-transition-new(root) {
    animation: 0.6s var(--ease) 0.08s both vt-in;
  }
  /* When the header is on screen on both pages it simply stays put. When it
     only exists on one side it fades with the page. */
  ::view-transition-group(site-header) {
    animation: none;
  }
  ::view-transition-old(site-header) {
    display: none;
  }
  ::view-transition-new(site-header) {
    animation: none;
  }
  ::view-transition-old(site-header):only-child {
    display: block;
    animation: 0.2s var(--ease) both vt-out;
  }
  ::view-transition-new(site-header):only-child {
    animation: 0.6s var(--ease) 0.08s both vt-in;
  }

  /* 01 · focus pull (first visit per session) */
  html:not(.intro-seen) .hero {
    animation: hero-open 1.4s var(--ease) backwards;
  }
  html:not(.intro-seen) .hero-art {
    animation: hero-focus 1.8s var(--ease) backwards;
  }
  html:not(.intro-seen) .hero-art-soft {
    animation: hero-soft 1.8s var(--ease) backwards;
  }
  html:not(.intro-seen) .hero h1 .ln > span {
    animation: rise 1s var(--ease) 0.25s backwards;
  }
  html:not(.intro-seen) .hero h1 .ln:nth-child(2) > span {
    animation-delay: 0.34s;
  }
  html:not(.intro-seen) .hero .asterisk {
    animation: ast-in 1.1s var(--ease) 0.5s backwards;
  }
  html:not(.intro-seen) .hero-capabilities > * {
    animation: fade-up 0.7s var(--ease) backwards;
    animation-delay: calc(0.7s + var(--i, 0) * 60ms);
  }
  html:not(.intro-seen) .hero-index {
    animation: fade-in 1s ease 0.9s backwards;
  }

  /* Subpage arrivals */
  .page-intro h1 .ln > span,
  .contact-hero h1 .ln > span {
    animation: rise 1s var(--ease) 0.1s backwards;
  }
  .page-intro h1 .ln:nth-child(2) > span,
  .contact-hero h1 .ln:nth-child(2) > span {
    animation-delay: 0.19s;
  }
  .page-intro > .eyebrow,
  .contact-hero .contact-eyebrow {
    animation: arrive 0.8s var(--ease) backwards;
  }
  .page-intro .intro-bottom,
  .contact-grid {
    animation: arrive 0.9s var(--ease) 0.35s backwards;
  }
  .about-art img,
  .work-page .exploration:first-of-type .exploration-visual > img {
    animation: develop 1.6s var(--ease) 0.25s backwards;
  }

  /* 02 · the asterisk turns */
  .wordmark svg,
  .chip-row a svg {
    transition: transform 0.7s var(--ease);
  }

  /* 03 · light passes over the manifesto */
  html.js .manifesto > p {
    color: #62625e;
  }
  html.js .manifesto > p:not(.is-sweep) {
    animation: undim 0.6s ease 4s forwards;
  }
  .manifesto p.is-sweep .w {
    transition: color 0.5s var(--ease);
  }
  .manifesto p.is-sweep .w.is-lit {
    color: var(--text);
  }

  /* 04 · reveals */
  .reveal:not(.is-in) .ln > span {
    translate: 0 115%;
  }
  .reveal.is-in .ln > span {
    animation: rise 1s var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
  .reveal[data-reveal]:not(.is-in),
  .reveal[data-stagger]:not(.is-in) > * {
    opacity: 0;
    translate: 0 12px;
  }
  .reveal[data-reveal].is-in {
    animation: fade-up 0.9s var(--ease) backwards;
    animation-delay: var(--delay, 0.18s);
  }
  .reveal[data-stagger].is-in > * {
    animation: fade-up 0.8s var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 80ms);
  }
  .reveal[data-develop]:not(.is-in) img {
    opacity: 0.1;
    scale: 1.08;
  }
  .reveal[data-develop].is-in img {
    animation: develop 1.6s var(--ease) backwards;
  }

  /* 05 · approach lines draw, rule tracks scroll */
  .approach-grid.reveal:not(.is-in) .approach-label::after,
  .about-principles.reveal:not(.is-in) .about-principle::before {
    transform: scaleX(0);
  }
  .approach-grid.reveal.is-in .approach-label::after,
  .about-principles.reveal.is-in .about-principle::before {
    animation: draw-x 1s var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 120ms);
  }
  .approach-grid.reveal:not(.is-in) .approach-label > *,
  .approach-grid.reveal:not(.is-in) article > :not(.approach-label),
  .about-principles.reveal:not(.is-in) .about-principle > * {
    opacity: 0;
    translate: 0 10px;
  }
  .approach-grid.reveal.is-in .approach-label > *,
  .approach-grid.reveal.is-in article > :not(.approach-label),
  .about-principles.reveal.is-in .about-principle > * {
    animation: fade-up 0.8s var(--ease) backwards;
    animation-delay: calc(180ms + var(--i, 0) * 120ms);
  }

  /* 06 · work panels settle */
  .work-plus {
    transition: rotate 0.6s var(--ease);
  }
  .work-vertical-title {
    transition: translate 0.6s var(--ease);
  }
  .work-accordion.reveal:not(.is-in) .is-active .work-art {
    scale: 1.125;
  }
  .work-accordion.reveal.is-in .is-active .work-art,
  .work-accordion.is-switched .is-active .work-art {
    animation: work-settle 1.6s var(--ease) backwards;
  }
  .work-accordion.is-switched .is-active .work-caption {
    animation: fade-up 0.7s var(--ease) 0.45s backwards;
  }
  .work-accordion.is-switched .is-active .work-eyebrow {
    animation: fade-up 0.7s var(--ease) 0.35s backwards;
  }
  .work-accordion.is-switched .is-active .design-word {
    animation: fade-up 0.9s var(--ease) 0.1s backwards;
  }
  .work-accordion.is-switched .is-active .design-asterisk {
    animation: ast-in 1.4s var(--ease) 0.15s backwards;
  }
  .work-accordion.is-switched .is-active .design-bottom {
    animation: fade-in 0.8s ease 0.4s backwards;
  }
  .work-accordion.is-switched .is-active .engineering-study > * {
    animation: fade-up 0.6s var(--ease) backwards;
    animation-delay: calc(0.2s + var(--i, 0) * 120ms);
  }
  .work-accordion.is-switched .is-active .engineering-study > .system-line {
    animation-name: draw-y;
    transform-origin: top;
  }

  /* 07 · services ease open, chrome catches the light */
  .service-item {
    transition: background-color 0.5s var(--ease);
  }
  .service-toggle {
    transition: min-height 0.6s var(--ease);
  }
  .service-toggle-sign {
    transition: translate 0.55s var(--ease);
  }
  .service-toggle-sign::after {
    transition: transform 0.55s var(--ease);
  }
  .service-content {
    transition:
      grid-template-rows 0.6s var(--ease),
      visibility 0s linear 0.6s;
  }
  .service-item.is-open .service-content {
    transition:
      grid-template-rows 0.6s var(--ease),
      visibility 0s;
  }
  .service-art,
  .service-diagram,
  .service-creative-art {
    transition:
      opacity 0.3s,
      visibility 0s linear 0.3s;
  }
  .service-item.is-open .service-art,
  .service-item.is-open .service-diagram,
  .service-item.is-open .service-creative-art {
    transition:
      opacity 0.8s var(--ease) 0.1s,
      visibility 0s;
  }
  .service-item.is-open .service-copy {
    animation: fade-up 0.7s var(--ease) 0.12s backwards;
  }
  .sheen {
    transition: opacity 0.6s;
  }
  .service-art.is-lit.is-drifting .sheen {
    animation: sheen-drift 20s ease-in-out infinite alternate;
  }

  /* 08 · tailor made */
  .project-banner.reveal:not(.is-in) > img {
    transform: scale(1.52) rotate(180deg);
  }
  .project-banner.reveal:not(.is-in) .project-banner-content > * {
    opacity: 0;
  }
  .project-banner.reveal.is-in > img {
    animation: banner-drift 3s var(--ease) backwards;
  }
  .project-banner.reveal.is-in .eyebrow {
    animation: fade-up 0.8s var(--ease) backwards;
  }
  .project-banner.reveal.is-in h2 {
    animation: tailor 1.7s var(--ease) 0.15s backwards;
  }
  .project-banner.reveal.is-in .project-banner-content > p {
    animation: fade-up 0.8s var(--ease) 0.7s backwards;
  }
  .project-banner.reveal.is-in .pill-button {
    animation: fade-up 0.8s var(--ease) 0.85s backwards;
  }

  /* 09 · arrows leave and return */
  .arrow-swap > svg {
    transition: transform 0.45s var(--ease);
  }
  .arrow-swap > svg + svg {
    transform: translate(-115%, 115%);
  }
  .arrow-swap--up > svg + svg {
    transform: translateY(115%);
  }
  a:focus-visible .arrow-swap > svg:first-child,
  button:focus-visible .arrow-swap > svg:first-child {
    transform: translate(115%, -115%);
  }
  a:focus-visible .arrow-swap--up > svg:first-child {
    transform: translateY(-115%);
  }
  a:focus-visible .arrow-swap > svg + svg,
  button:focus-visible .arrow-swap > svg + svg {
    transform: none;
  }

  /* 10 · forms pay attention */
  .form-field::after,
  .contact-field::after {
    transition: transform 0.6s var(--ease);
  }
  .form-field label,
  .contact-field label {
    transition: color 0.3s;
  }
  .is-sending .send-star {
    animation: spin 1.1s linear infinite;
  }
  .form-success .ln > span {
    animation: rise 1s var(--ease) backwards;
  }
  .form-success p,
  .form-success a {
    animation: fade-up 0.8s var(--ease) 0.25s backwards;
  }
  .contact-success:not([hidden]) .ln > span {
    animation: rise 1s var(--ease) 0.1s backwards;
  }
  .contact-success:not([hidden]) .ln:nth-child(2) > span {
    animation-delay: 0.19s;
  }
  .contact-success:not([hidden]) > :not(h2) {
    animation: fade-up 0.8s var(--ease) 0.3s backwards;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 700px) {
  .project-banner.reveal.is-in h2 {
    animation-name: tailor-sm;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 380px) {
  .project-banner.reveal.is-in h2 {
    animation-name: tailor-xs;
  }
}

/* Hover-only details: skipped on touch screens */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .work-panel:not(.is-active):hover {
    background: #20201f;
  }
  .work-panel:not(.is-active):hover .work-plus {
    rotate: 90deg;
  }
  .work-panel:not(.is-active):hover .work-vertical-title {
    translate: 0 -6px;
  }
  a:hover .arrow-swap > svg:first-child,
  button:hover .arrow-swap > svg:first-child {
    transform: translate(115%, -115%);
  }
  a:hover .arrow-swap--up > svg:first-child {
    transform: translateY(-115%);
  }
  a:hover .arrow-swap > svg + svg,
  button:hover .arrow-swap > svg + svg {
    transform: none;
  }

  /* 12 · the sign-off rolls */
  .roll .ch {
    transition: transform 0.6s var(--ease);
    transition-delay: calc(var(--i, 0) * 14ms);
  }
  .footer-email:hover .roll .ch,
  .footer-email:focus-visible .roll .ch {
    transform: translateY(-100%);
  }
  .support-page .footer-email > .footer-email-arrow {
    display: none;
  }
  .footer-email > .footer-email-arrow {
    display: inline-grid;
    overflow: hidden;
    width: 0.62em;
    height: 0.62em;
    margin-left: 0.18em;
    font-size: inherit;
    vertical-align: 0.08em;
  }
  .footer-email-arrow svg {
    width: 100%;
    height: 100%;
    transform: translate(-115%, 115%);
    transition: transform 0.6s var(--ease) 0.12s;
  }
  .footer-email:hover .footer-email-arrow svg,
  .footer-email:focus-visible .footer-email-arrow svg {
    transform: none;
  }
}

/* Windows High Contrast: CSS-drawn marks use the system text colour */
@media (forced-colors: active) {
  .service-toggle-sign::before,
  .service-toggle-sign::after,
  .form-field::after,
  .contact-page .contact-field::after {
    forced-color-adjust: none;
    background: CanvasText;
  }
}