/*
 * Bluexkye site styles.
 * Layout: left-aligned 12-column grid, 1240px max. The logo's dome is the brand's one large curve:
 * a day sky in the light theme and a night sky in the dark theme. Real product screenshots,
 * technology logos and photography carry the page; type and hairlines hold it together.
 */

:root {
  --paper: #fbfcfe;
  --surface: #f1f5fa;
  --surface-2: #e6edf6;
  --line: #dbe3ee;
  --line-strong: #c0ccdc;
  --ink: #0e1726;
  --ink-2: #455166;
  --ink-3: #63708a;
  --blue: #0062e3;
  --blue-hover: #0a4fbf;
  --blue-soft: #e5efff;
  --on-blue: #ffffff;
  --focus: #1787f6;
  --header-bg: rgb(251 252 254 / 0.84);
  --card: #ffffff;
  --shadow: 0 1px 2px rgb(14 23 38 / 0.05), 0 24px 48px -24px rgb(14 23 38 / 0.28);
  --logo-filter: brightness(0) saturate(100%);
  --logo-opacity: 0.72;
  --error: #c62f2f;

  --day: 1;
  --night: 0;

  --font-sans: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-hero: clamp(2.7rem, 1.2rem + 4.8vw, 5.5rem);
  --fs-h2: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --fs-h3: clamp(1.2rem, 1.08rem + 0.45vw, 1.45rem);
  --fs-lede: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  --space-section: clamp(4.5rem, 2.6rem + 6vw, 8.5rem);
  --gutter-l: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px));
  --gutter-r: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right, 0px));
  --max: 1240px;
  --header-h: 68px;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-sine: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --dur-1: 140ms;
  --dur-2: 220ms;
  /* Light is the default; dark only when the visitor picks it (data-theme="dark", set by site.js). */
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #070d1a;
  --surface: #0c1526;
  --surface-2: #142038;
  --line: #1b2840;
  --line-strong: #2b3b58;
  --ink: #e8eef8;
  --ink-2: #a9b5c9;
  --ink-3: #8793aa;
  --blue: #4da8ff;
  --blue-hover: #8cc7ff;
  --blue-soft: #10264d;
  --on-blue: #06101f;
  --focus: #8cc7ff;
  --header-bg: rgb(7 13 26 / 0.82);
  --card: #0d1729;
  --shadow: 0 24px 48px -24px rgb(0 0 0 / 0.7);
  --logo-filter: brightness(0) invert(1);
  --logo-opacity: 0.8;
  --error: #ff9b9b;
  --day: 0;
  --night: 1;
  color-scheme: dark;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--paper);
}

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

fieldset {
  padding: 0;
  border: 0;
  min-width: 0;
}

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

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

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

::selection {
  background: color-mix(in oklab, var(--blue) 24%, transparent);
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip {
  position: absolute;
  left: var(--gutter-l);
  top: -100px;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: calc(env(safe-area-inset-top, 0px) + 10px);
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter-l) + var(--gutter-r));
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

/* Phosphor icons (256 grid) and technology logos (24 grid), both inked with currentColor. */
.ic,
.lg {
  width: 1.2em;
  height: 1.2em;
  flex: none;
  fill: currentColor;
}

:root:not(.js) .js-only {
  display: none !important;
}

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

h1,
h2 {
  font-stretch: 125%;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-hero);
  font-weight: 720;
  letter-spacing: -0.045em;
  line-height: 0.94;
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
  font-stretch: 112%;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---------- Controls ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 0 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: var(--on-blue);
  font-size: 1rem;
  font-weight: 600;
  font-stretch: 105%;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.btn .ic {
  width: 1.1em;
  height: 1.1em;
  transition: transform var(--dur-2) var(--ease-out);
}

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

.btn:hover .ic {
  transform: translateX(3px);
}

.btn:active {
  transform: scale(0.97);
}

.btn-sm {
  min-height: 40px;
  padding: 0 1.1rem;
  font-size: var(--fs-sm);
}

.btn-lg {
  min-height: 54px;
  padding: 0 1.6rem;
  font-size: 1.05rem;
}

/* Secondary action: outline only. */
.btn-ghost {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
}

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

.btn-ghost .ic {
  color: var(--blue);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.text-link .ic {
  width: 1em;
  height: 1em;
  transition: translate var(--dur-2) var(--ease-out);
}

.text-link:hover .ic {
  translate: 3px 0;
}

.text-link:hover .ic:has(use[href="#ph-arrow-up-right"]) {
  translate: 2px -2px;
}

.text-link:hover {
  text-decoration-color: currentColor;
  color: var(--blue);
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}

.icon-btn:hover {
  border-color: var(--line-strong);
  background: var(--surface);
}

.icon-btn .ic {
  width: 20px;
  height: 20px;
}

.i-sun {
  display: none;
}

:root[data-theme="dark"] .i-sun {
  display: block;
}

:root[data-theme="dark"] .i-moon {
  display: none;
}

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

.header-sentinel {
  position: absolute;
  top: 0;
  height: 1px;
  width: 1px;
}

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-out);
}

.scrolled .site-header,
.nav-open .site-header {
  border-bottom-color: var(--line);
}

/* Reading progress along the header's bottom edge (scroll-driven; stays hidden where unsupported). */
.scroll-progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #00b2e3, var(--blue));
  transform-origin: 0 50%;
  scale: 0 1;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .scroll-progress {
      animation: progress linear both;
      animation-timeline: scroll(root);
    }
  }
}

@keyframes progress {
  to {
    scale: 1 1;
  }
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  color: var(--ink);
  border-radius: 6px;
}

.lockup {
  height: 28px;
  width: auto;
}

.nav {
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav-list a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 0.75rem;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 550;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}

.nav-list a:not(.btn):hover {
  color: var(--ink);
  background: var(--surface);
}

.nav-cta,
.nav-meta {
  display: none;
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-toggle {
  display: none;
}

/* Hamburger: two lines that slide together, then turn into an X (and back, in reverse). */
.burger {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
}

.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: translate 200ms var(--ease-out) 150ms, rotate 220ms var(--ease-out);
}

.burger span:first-child {
  top: 1px;
}

.burger span:last-child {
  bottom: 1px;
}

.nav-open .burger span {
  transition: translate 200ms var(--ease-out), rotate 260ms var(--ease-out) 150ms;
}

.nav-open .burger span:first-child {
  translate: 0 4px;
  rotate: 45deg;
}

.nav-open .burger span:last-child {
  translate: 0 -4px;
  rotate: -45deg;
}

@media (max-width: 999px) {
  .lockup {
    height: 26px;
  }

  .nav-toggle {
    display: inline-grid;
  }

  .header-cta {
    display: none;
  }

  .header-tools {
    margin-left: auto;
  }

  /* Menu panel: fills the screen under the header and unrolls downwards. */
  .js .nav {
    position: absolute;
    inset: 100% 0 auto;
    height: calc(100dvh - var(--header-h) - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 0.75rem var(--gutter-r) calc(2rem + env(safe-area-inset-bottom, 0px)) var(--gutter-l);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 380ms var(--ease-out), visibility 0s linear 380ms;
  }

  .nav-open .nav {
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transition: clip-path 520ms var(--ease-out), visibility 0s;
  }

  /* The page behind the open menu stays put. */
  .nav-open {
    overflow: hidden;
  }

  .js .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .js .nav-list a:not(.btn) {
    display: flex;
    justify-content: space-between;
    min-height: 64px;
    padding: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem);
    font-stretch: 118%;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--ink);
  }

  .js .nav-list a:not(.btn):hover {
    background: transparent;
    color: var(--blue);
  }

  .js .nav-list a:not(.btn)::after {
    content: "";
    width: 0.4em;
    height: 0.4em;
    margin-right: 0.3em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    rotate: 45deg;
    opacity: 0.35;
    transition: opacity var(--dur-1) var(--ease-out), translate var(--dur-2) var(--ease-out);
  }

  .js .nav-list a:not(.btn):hover::after {
    opacity: 1;
    translate: 3px 0;
  }

  .js .nav-cta {
    display: block;
    margin-top: 1.5rem;
  }

  /* Direct contact at the bottom of the menu. */
  .js .nav-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin-top: auto;
    padding-top: 2rem;
    font-size: var(--fs-sm);
  }

  .js .nav-meta a {
    color: var(--ink-2);
    text-decoration: none;
  }

  .js .nav-meta a:hover {
    color: var(--blue);
  }

  .nav-cta .btn {
    width: 100%;
    min-height: 54px;
  }

  :root:not(.js) .header-bar {
    flex-wrap: wrap;
    height: auto;
    padding-block: 0.75rem;
  }

  :root:not(.js) .nav {
    order: 3;
    width: 100%;
    margin: 0;
  }

  :root:not(.js) .nav-list {
    flex-wrap: wrap;
  }
}

/* Menu links rise in one after another as the menu opens. */
@media (max-width: 999px) and (prefers-reduced-motion: no-preference) {
  .js .nav-list > li {
    opacity: 0;
    translate: 0 14px;
    transition: opacity 180ms var(--ease-out), translate 180ms var(--ease-out);
  }

  .nav-open .nav-list > li {
    opacity: 1;
    translate: 0 0;
    transition: opacity 450ms var(--ease-out), translate 550ms var(--ease-out);
    transition-delay: calc(var(--k, 0) * 45ms + 120ms);
  }

  .nav-list > li:nth-child(2) { --k: 1; }
  .nav-list > li:nth-child(3) { --k: 2; }
  .nav-list > li:nth-child(4) { --k: 3; }
  .nav-list > li:nth-child(5) { --k: 4; }
  .nav-list > li:nth-child(6) { --k: 5; }

  .js .nav-meta {
    opacity: 0;
    transition: opacity 180ms var(--ease-out);
  }

  .nav-open .nav-meta {
    opacity: 1;
    transition: opacity 500ms var(--ease-out) 420ms;
  }
}

/* ---------- Hero ---------- */

.hero {
  padding-top: clamp(2.5rem, 1rem + 5vw, 5.5rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  gap: clamp(3rem, 2rem + 3vw, 4rem);
}

.hero .lede {
  margin-top: clamp(1.25rem, 0.9rem + 1vw, 1.9rem);
  max-width: 30rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-top: 2.1rem;
}

/* Product screens in front of the dome. */
.hero-visual {
  position: relative;
  container-type: inline-size;
  align-self: end;
  width: min(100%, 540px);
  aspect-ratio: 85.6 / 66;
  justify-self: center;
}

.dome {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: auto;
}

.dome :is(.sky-day, .sky-night, .sky-sun, .sky-moon, .sky-stars, .sky-glow) {
  transition: opacity 400ms var(--ease-out);
}

.sky-day,
.sky-sun {
  opacity: var(--day);
}

.sky-night,
.sky-moon,
.sky-stars {
  opacity: var(--night);
}

.sky-glow {
  opacity: calc(0.35 + var(--day) * 0.65);
}

/* Hero sky: orbit rings and the tools we build with, floating like stars. */
.rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rings path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 0.22;
  stroke-dasharray: 0.7 1.3;
}

.orbit {
  position: absolute;
  inset: 0;
}

.badge {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: 12cqi;
  height: 12cqi;
  margin: -6cqi 0 0 -6cqi;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--brand);
}

.badge .lg {
  width: 48%;
  height: 48%;
}

.b1 { --x: 1.5%; --y: 49%; }
.b2 { --x: 19%; --y: 22%; }
.b3 { --x: 45%; --y: 9.5%; }
.b4 { --x: 73%; --y: 16%; }
.b5 { --x: 96%; --y: 44%; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 0.85em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: clamp(10px, 2.2cqi, 13px);
  font-weight: 600;
  white-space: nowrap;
}

.chip :is(.lg, .ic) {
  width: 1.35em;
  height: 1.35em;
  color: var(--blue);
}

.hv-chip {
  position: absolute;
}

.hv-chip-a {
  left: 3%;
  bottom: 4%;
}

.hv-chip-b {
  left: 33%;
  bottom: 13%;
}

.hv-chip-c {
  right: 2%;
  bottom: 2%;
}

/* Desktop: the hero and the logo marquee fill the window together, so the marquee's
   bottom line sits on the bottom edge of the screen. Inside the hero, the copy and
   the dome share one centre line: the top badge sits level with the headline and
   the dome ends level with the buttons. */
@media (min-width: 960px) {
  .first-screen {
    display: flex;
    flex-direction: column;
    /* 1px for the header's bottom border; capped so very tall screens don't get an empty hero */
    min-height: min(calc(100vh - var(--header-h) - 1px), 1200px);
    min-height: min(calc(100svh - var(--header-h) - 1px), 1200px);
  }

  .hero {
    display: grid;
    flex: 1 0 auto;
    align-content: center;
    padding-block: clamp(1.5rem, 6vh, 4rem);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
    align-items: center;
  }

  /* The dome sits on the copy's centre line, a little taller than the copy,
     right-aligned with the header's edge. */
  .hero-visual {
    width: min(100%, 560px);
    align-self: center;
    justify-self: end;
  }
}

/* ---------- Motion: hero entrance, floating chips, scroll reveals ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Text and the dome slide in without fading, so they are readable on any frame. */
  .js .hero-in {
    animation: lift 900ms var(--ease-out) both;
    animation-delay: calc(var(--d, 0) * 110ms + 320ms);
  }

  .js .dome {
    animation: lift 1100ms var(--ease-out) both;
  }

  .badge,
  .hv-chip {
    animation: bob var(--bob, 7s) var(--ease-sine) infinite;
  }

  .anim-ready .badge,
  .anim-ready .hv-chip {
    animation: pop 700ms var(--ease-out) both, bob var(--bob, 7s) var(--ease-sine) infinite;
    animation-delay: calc(var(--d, 0) * 70ms + 200ms), calc(var(--d, 0) * 70ms + 900ms);
  }

  .b1 { --d: 1; --bob: 7.5s; }
  .b2 { --d: 2; --bob: 6.5s; }
  .b3 { --d: 3; --bob: 8s; }
  .b4 { --d: 4; --bob: 7s; }
  .b5 { --d: 5; --bob: 6.8s; }
  .hv-chip-a { --d: 6; --bob: 7.2s; }
  .hv-chip-b { --d: 7; --bob: 6.6s; }
  .hv-chip-c { --d: 8; --bob: 7.9s; }

  .rings path,
  .sky-ring {
    animation: orbit 60s linear infinite;
  }

  .reveal-on [data-reveal] {
    opacity: 0;
    translate: 0 22px;
    transition: opacity 800ms var(--ease-out), translate 800ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  .reveal-on [data-reveal].is-in {
    opacity: 1;
    translate: 0 0;
  }

  /* Split headlines (site.js): the hero's words rise on load, a section heading's words as it scrolls in. */
  .split-hero .w-in {
    animation: word-up 1000ms var(--ease-out) both;
    animation-delay: calc(var(--w, 0) * 80ms + 60ms);
  }

  .reveal-on [data-reveal] .w-in {
    translate: 0 115%;
    transition: translate 900ms var(--ease-out);
    transition-delay: calc(var(--w, 0) * 55ms + var(--i, 0) * 70ms);
  }

  .reveal-on [data-reveal].is-in .w-in {
    translate: 0 0;
  }
}

/* Words of a split headline: each is a mask, padded so ascenders, descenders and tight tracking aren't clipped. */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.14em 0.06em 0.22em;
  margin: -0.14em -0.06em -0.22em;
}

.w-in {
  display: inline-block;
}

@keyframes word-up {
  from {
    translate: 0 115%;
  }
}

@keyframes lift {
  from {
    translate: 0 24px;
  }
}

@keyframes bob {
  50% {
    translate: 0 -6px;
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes orbit {
  to {
    stroke-dashoffset: -40;
  }
}

/* ---------- Logo marquee ---------- */

.marquee {
  overflow: hidden;
  padding-block: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
}

.marquee-list {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  padding-right: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.marquee-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink-3);
  font-size: 1.05rem;
  font-stretch: 110%;
  font-weight: 650;
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-out);
}

.marquee-list li:hover {
  color: var(--ink);
}

.marquee-list .lg {
  width: 1.6rem;
  height: 1.6rem;
}

@media (prefers-reduced-motion: no-preference) {
  .marquee-track {
    animation: marquee 48s linear infinite;
  }

  .marquee:hover .marquee-track {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee-track {
    width: auto;
    padding-inline: var(--gutter-l) var(--gutter-r);
  }

  .marquee-list {
    flex-wrap: wrap;
    justify-content: center;
  }

  .marquee-list[aria-hidden="true"] {
    display: none;
  }
}

/* Reduced motion on a phone: one row to swipe rather than a tall block of logos. */
@media (prefers-reduced-motion: reduce) and (max-width: 699px) {
  .marquee-track {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .marquee-list {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

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

.marquee-list .lg-wide {
  width: 3rem;
  height: 2rem;
}

/* ---------- Sections ---------- */

.section {
  padding-block: var(--space-section);
}

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

.section-head {
  display: grid;
  gap: 1rem 3rem;
  margin-bottom: clamp(2.5rem, 1.6rem + 3vw, 4rem);
}

.section-head p {
  max-width: 30rem;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-2);
}

@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
}

/* ---------- Services ---------- */

.services {
  display: grid;
  gap: 1rem;
}

@media (min-width: 700px) {
  .services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.service {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 0.6rem;
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  transition: border-color var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
}

@media (hover: hover) {
  .service:hover {
    border-color: color-mix(in oklab, var(--blue) 40%, var(--line));
    translate: 0 -4px;
  }
}

.service-icon,
.step-icon,
.why-icon,
.engage-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--blue-soft);
  color: var(--blue);
}

.service-icon .ic,
.step-icon .ic,
.why-icon .ic,
.engage-icon .ic {
  width: 28px;
  height: 28px;
}

.service-icon {
  margin-bottom: 0.9rem;
}

.service-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--blue);
}

.service > p:not(.service-label) {
  color: var(--ink-2);
}

.service-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
}

.service-logos .lg {
  width: 22px;
  height: 22px;
  transition: color var(--dur-2) var(--ease-out);
}

.service:hover .service-logos {
  color: var(--ink);
}

/* ---------- Work ---------- */

.work-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 760px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.work-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
  gap: 1rem;
  overflow: hidden;
  padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}

.work-name {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 36px;
}

.work-name-sep {
  width: 1px;
  height: 22px;
  background: var(--line-strong);
}

.work-logo {
  width: auto;
  height: 28px;
  filter: var(--logo-filter);
  opacity: var(--logo-opacity);
}

.work-line {
  max-width: 34rem;
  color: var(--ink-2);
}

.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.work-tags li {
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 550;
  color: var(--ink-2);
}

.work-link {
  justify-self: start;
}

@media (prefers-reduced-motion: no-preference) {
  .work-card {
    transition: translate var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  }

  .work-card:hover {
    translate: 0 -4px;
    border-color: var(--line-strong);
  }
}

/* ---------- Statement: one line beside a framed photo ---------- */

.statement-grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  align-items: center;
}

@media (min-width: 960px) {
  .statement-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.statement-copy {
  display: grid;
  justify-items: start;
  gap: 1.75rem;
}

.statement-text {
  font-size: var(--fs-h2);
  font-stretch: 125%;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

/* A class, not a bare span: site.js wraps every word in spans. */
.statement-text .accent {
  color: var(--blue);
}

.statement-photo {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-lg);
  background: var(--surface);
}

.statement-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .statement-photo img {
      animation: band-zoom linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes band-zoom {
  from {
    scale: 1.12;
  }

  to {
    scale: 1;
  }
}

/* ---------- Technologies (tabs) ---------- */

.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tab {
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.tab:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.tab[aria-selected="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* Sliding pill behind the selected tab (added by site.js when motion is allowed). */
.tab-list {
  position: relative;
  isolation: isolate;
}

.tab-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--ink);
  pointer-events: none;
  transition: translate 450ms var(--ease-out), width 450ms var(--ease-out), height 450ms var(--ease-out);
}

.tab-pill.no-anim {
  transition: none;
}

.has-pill .tab[aria-selected="true"] {
  border-color: transparent;
  background: transparent;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--line);
}

@media (min-width: 700px) {
  .tech-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1040px) {
  .tech-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.tech-grid li {
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) 1rem;
  background: var(--card);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
  transition: color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.tech-grid li:hover {
  background: var(--surface);
  color: var(--ink);
}

.tech-grid .lg {
  width: 40px;
  height: 40px;
  color: var(--ink);
}

/* Wordmark logos such as AWS: same height as the square ones, wider box. */
.tech-grid .lg-wide {
  width: 64px;
}

@media (prefers-reduced-motion: no-preference) {
  .tab-panel:not([hidden]) {
    animation: panel-in 500ms var(--ease-out);
  }

  /* The logos of a newly shown tab pop in one after another. */
  .tab-panel:not([hidden]) .tech-grid .lg {
    animation: logo-in 600ms var(--ease-out) both;
    animation-delay: calc(var(--n, 0) * 50ms + 60ms);
  }

  .tech-grid li:nth-child(2) { --n: 1; }
  .tech-grid li:nth-child(3) { --n: 2; }
  .tech-grid li:nth-child(4) { --n: 3; }
  .tech-grid li:nth-child(5) { --n: 4; }
  .tech-grid li:nth-child(6) { --n: 5; }
}

@keyframes logo-in {
  from {
    opacity: 0;
    scale: 0.6;
  }
}

@keyframes panel-in {
  from {
    opacity: 0;
    translate: 0 10px;
  }
}

/* ---------- Process ---------- */

.process-grid,
.why-grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  align-items: center;
}

@media (min-width: 960px) {
  .process-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  }

  .why-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  }
}

.process-copy,
.why-copy {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.steps,
.why-list {
  display: grid;
  gap: 1.75rem;
}

.step,
.why-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.step {
  position: relative;
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 60px;
  bottom: -1.5rem;
  width: 1.5px;
  background: linear-gradient(var(--blue), transparent);
  opacity: 0.4;
}

.step h3,
.why-list h3 {
  margin-top: 0.2rem;
}

.step p,
.why-list p {
  margin-top: 0.35rem;
  color: var(--ink-2);
  max-width: 30rem;
}

.process-photo,
.why-photo {
  overflow: hidden;
  border-radius: var(--r-lg);
}

.process-photo img,
.why-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (min-width: 960px) {
  .process-photo {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

@media (max-width: 959px) {
  .process-photo img,
  .why-photo img {
    aspect-ratio: 16 / 10;
  }
}

/* ---------- Industries ---------- */

.industry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 900px) {
  .industry-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.industry-grid li {
  display: grid;
  gap: 1.25rem;
  align-content: space-between;
  min-height: 150px;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
  font-size: 1.05rem;
  font-stretch: 110%;
  font-weight: 650;
  letter-spacing: -0.01em;
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
}

.industry-grid .ic {
  width: 34px;
  height: 34px;
  color: var(--blue);
}

@media (hover: hover) {
  .industry-grid li:hover {
    border-color: color-mix(in oklab, var(--blue) 40%, var(--line));
    background: var(--surface);
    translate: 0 -3px;
  }
}

/* ---------- Ways to work ---------- */

.engage-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 900px) {
  .engage-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.engage-card {
  position: relative;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  overflow: hidden;
  padding: 0 clamp(1.5rem, 1rem + 2vw, 2.25rem) clamp(1.5rem, 1rem + 2vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}

.engage-photo {
  width: calc(100% + 2 * clamp(1.5rem, 1rem + 2vw, 2.25rem));
  max-width: none;
  margin-inline: calc(-1 * clamp(1.5rem, 1rem + 2vw, 2.25rem));
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: scale 900ms var(--ease-out);
}

.engage-card:hover .engage-photo {
  scale: 1.04;
}

.engage-icon {
  margin-top: -26px;
  margin-bottom: 0.5rem;
  position: relative;
  box-shadow: 0 0 0 4px var(--card);
}

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

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  gap: 3rem clamp(2rem, 1rem + 4vw, 5rem);
}

@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

.contact-copy {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

.contact h2 {
  font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);
}

.contact .lede {
  max-width: 28rem;
}

/* Direct lines: one clickable row each, icon tile on the left and an arrow on the right. */
.contact-direct {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.contact-direct a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.contact-direct a:hover {
  border-color: var(--line-strong);
  background: var(--surface);
}

.contact-icon {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue);
}

.contact-icon .ic {
  width: 22px;
  height: 22px;
}

.contact-label {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.contact-value {
  grid-column: 2;
  font-size: 1.05rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.contact-go {
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  transition: color var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
}

.contact-direct a:hover .contact-go {
  color: var(--blue);
  translate: 2px -2px;
}

.contact-form {
  display: grid;
  gap: 1.15rem 1.25rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}

@media (min-width: 640px) {
  .contact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-wide {
    grid-column: 1 / -1;
  }
}

.field {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.field label,
.field legend {
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.field legend {
  margin-bottom: 0.5rem;
}

.field input:not([type="checkbox"]),
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}

.field textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.5;
}

/* The message box grows with what's typed, where the browser supports it. */
@supports (field-sizing: content) {
  .field textarea {
    field-sizing: content;
    max-height: 18rem;
  }
}

.field ::placeholder {
  color: var(--ink-3);
  opacity: 1;
}

.field-opt {
  margin-left: 0.35em;
  font-size: var(--fs-xs);
  font-weight: 450;
  color: var(--ink-3);
}

.field input:not([type="checkbox"]):hover,
.field textarea:hover {
  border-color: var(--line-strong);
}

.field input:not([type="checkbox"]):focus,
.field textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-color: transparent;
  background: var(--card);
}

.field [aria-invalid="true"] {
  border-color: var(--error) !important;
}

.field-error {
  font-size: var(--fs-sm);
  color: var(--error);
}

/* An even grid of options: two per row on phones, three from 640px. */
.kind-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .kind-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.kind {
  position: relative;
  cursor: pointer;
}

.kind input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.kind span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 550;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.kind:hover span {
  border-color: var(--line-strong);
  color: var(--ink);
}

/* Selected looks like the selected technology tab, with a tick. */
.kind input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.kind input:checked + span::before {
  content: "";
  width: 0.55em;
  height: 0.3em;
  margin-right: 0.55em;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  rotate: -45deg;
  translate: 0 -0.12em;
}

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

.field-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 0.25rem;
}

.form-status {
  flex: 1 1 16rem;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.form-note {
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

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

.site-footer {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) clamp(2rem, 1.5rem + 2vw, 3rem);
}

.footer-word {
  width: 100%;
  height: auto;
  color: var(--ink);
}

/* The wordmark rises into place as the footer scrolls in. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .footer-word {
      animation: word-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
}

@keyframes word-rise {
  from {
    opacity: 0;
    translate: 0 30%;
  }
}

.footer-line {
  margin-top: 1.5rem;
  font-size: var(--fs-lede);
  font-stretch: 112%;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* Four link columns and a wider office column on desktop; the office spans both columns on phones. */
@media (min-width: 900px) {
  .footer-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr);
  }
}

.footer-cols > .footer-office {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .footer-cols > .footer-office {
    grid-column: auto;
  }
}

.footer-cols > div {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  min-width: 0;
}

.footer-h {
  font-size: var(--fs-sm);
  font-stretch: 100%;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ink);
}

.footer-list {
  display: grid;
  gap: 0.5rem;
  overflow-wrap: anywhere;
}

.footer-list a {
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}

.footer-list a:hover {
  color: var(--blue);
}

/* Block-level flex (not inline-flex) so icon rows keep the same rhythm as text-only rows. */
.with-icons a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
}

.with-icons .ic {
  width: 1.25em;
  height: 1.25em;
}

.footer-address {
  font-style: normal;
  line-height: 1.65;
}

.footer-map {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}

.footer-map:hover {
  color: var(--blue);
}

.footer-map .ic {
  width: 1.15em;
  height: 1.15em;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.footer-top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}

.footer-top:hover {
  color: var(--blue);
}

.footer-top .ic {
  width: 1em;
  height: 1em;
  rotate: -90deg;
}

.legal {
  margin-top: 0.75rem;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* ---------- Small screens ---------- */

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

  .hv-chip-b {
    left: auto;
    right: 2%;
    bottom: 6%;
  }

  /* Services: icon and label share a row, so each card is shorter. */
  .service {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: none;
    column-gap: 0.9rem;
    align-items: center;
    padding: 1.25rem;
  }

  .service-icon {
    margin-bottom: 0;
  }

  .service > :not(.service-icon, .service-label) {
    grid-column: 1 / -1;
  }

  /* Industries: compact tiles. */
  .industry-grid li {
    min-height: 0;
    gap: 0.75rem;
    padding: 1.1rem;
  }

  .form-foot .btn {
    width: 100%;
  }
}

/* Tabs scroll sideways instead of wrapping onto three rows. */
@media (max-width: 699px) {
  .tab-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(var(--gutter-l) * -1) calc(var(--gutter-r) * -1);
    padding-inline: var(--gutter-l) var(--gutter-r);
    scroll-padding-inline: var(--gutter-l) var(--gutter-r);
    scrollbar-width: none;
  }

  .tab-list::-webkit-scrollbar {
    display: none;
  }

  .tab {
    flex: none;
  }
}

/* Touch screens: text links get a full-size tap area. */
@media (pointer: coarse) {
  .text-link,
  .footer-map,
  .footer-top {
    min-height: 44px;
  }
}

/* ---------- Theme switch ---------- */

.no-transition,
.no-transition *,
.no-transition *::before,
.no-transition *::after {
  transition: none !important;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  .btn,
  .kind span,
  .service,
  .work-card,
  .tab {
    border: 1px solid CanvasText;
  }
}