/* ─────────────────────────────────────────────────────────────────────────
   CloutInn, layout, shapes, effects

   Order: reset · base · bands · shapes · utilities · buttons · header ·
   hero · ticker · marquee · cards · folder · steps · carousel · work ·
   stats · split · faq · forms · cta · footer · page head · motion ·
   breakpoints.

   The page is light. `.band--light` is the default; `.band--dark` is an
   accent used sparingly for punch. Each sets the local --card, --edge and
   --txt variables, and every component reads those, so a card is never the
   same colour as the thing behind it.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Reset ─────────────────────────────────────────────────────────────── */

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

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

body, h1, h2, h3, h4, p, ul, ol, figure, fieldset, legend { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* ── Base ──────────────────────────────────────────────────────────────── */

body {
  min-height: 100vh;
  background: var(--white);
  color: var(--on-light);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--blue); color: #fff; }

/* ── Bands ─────────────────────────────────────────────────────────────── */

.band {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
}

.band--dark {
  --card: var(--black-3);
  --card-2: var(--black-2);
  --edge: var(--line-dark);
  --edge-2: var(--line-dark-2);
  --txt: var(--on-dark);
  --txt-2: var(--on-dark-2);
  background: var(--black);
  color: var(--on-dark);
}

.band--light {
  --card: var(--white);
  --card-2: var(--off);
  --edge: var(--line-light);
  --edge-2: #c6d0e4;
  --txt: var(--on-light);
  --txt-2: var(--on-light-2);
  background: var(--off);
  color: var(--on-light);
}

.band--white { background: var(--white); }
.band--blue {
  --card: rgba(255, 255, 255, 0.12);
  --edge: rgba(255, 255, 255, 0.25);
  --txt: #fff;
  --txt-2: rgba(255, 255, 255, 0.78);
  background: var(--blue);
  color: #fff;
}

.band--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }
.band--flush { padding-block: 0; }

/* ── Shapes ────────────────────────────────────────────────────────────────
   Nothing on this site is a plain rectangle. Three shape families, used
   consistently so it reads as a system rather than novelty. */

/* Folder: a real one. A blue tab on top, a sheet of paper poking out of the
   mouth, and a stacked edge underneath so it has thickness rather than being
   a rectangle with a bump. It opens slightly when you point at it. */
.folder {
  position: relative;
  margin-top: 34px;
  border-radius: 3px var(--r-lg) var(--r-lg) var(--r-lg);
  transform-style: preserve-3d;
  box-shadow:
    0 4px 0 -1px var(--card-2),
    0 6px 0 -1px var(--edge-2),
    var(--sh-md);
}

/* The tab, with a lit top face so it reads as a folded edge. */
.folder::before {
  content: "";
  position: absolute;
  top: -25px;
  left: -1px;
  width: 38%;
  min-width: 104px;
  height: 26px;
  border-radius: 10px 12px 0 0;
  background: linear-gradient(170deg, var(--blue-hot) 0%, var(--blue) 55%, var(--blue-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* The sheet inside, showing above the front panel. */
.folder::after {
  content: "";
  position: absolute;
  left: 44%;
  right: 6%;
  top: -11px;
  height: 22px;
  z-index: -1;
  border-radius: 6px 6px 0 0;
  background: var(--card-2);
  border: 1px solid var(--edge-2);
  border-bottom: 0;
  transition: transform var(--mid) var(--ease-out);
}

.folder:hover::after { transform: translateY(-7px); }

/* Notch: one corner cut away at 45 degrees, with a lit top edge for depth. */
.notch {
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), var(--sh-sm);
}

.band--dark .notch { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09); }
.notch--bl { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch))); }

/* Arch: a big soft top, square feet. */
.arch { border-radius: 120px 120px var(--r-lg) var(--r-lg); }

/* Lozenge: opposite corners rounded hard, lifted off the page. */
.lozenge {
  border-radius: var(--r-xl) var(--r-sm) var(--r-xl) var(--r-sm);
  box-shadow: var(--sh-md);
}

/* ── Utilities ─────────────────────────────────────────────────────────── */

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--narrow); margin-inline: auto; }
.center { text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-deep);
}

.band--dark .eyebrow { color: var(--blue-bright); }
.band--blue .eyebrow { color: #fff; }

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 0 0 var(--blue-glow);
  animation: pulse 2.4s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--blue-glow); }
  70% { box-shadow: 0 0 0 12px rgba(5, 93, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(5, 93, 255, 0); }
}

.title { font-size: var(--t-h2); color: var(--txt); }
.title--big { font-size: var(--t-display); }
.lead { margin-top: var(--s-4); font-size: var(--t-lead); color: var(--txt-2); }
.head { max-width: 40rem; }
.head--center { margin-inline: auto; text-align: center; }
.head .title { margin-top: var(--s-4); }

.hl { color: var(--blue); }
.band--dark .hl { color: var(--blue-bright); }

.stroke-text {
  -webkit-text-stroke: 1.5px var(--blue-bright);
  color: transparent;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0;
  z-index: 300;
  padding: 0.8rem 1.2rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  transform: translateY(-140%);
  transition: transform var(--fast) var(--ease);
}

.skip-link:focus-visible { transform: translateY(0); }

/* Ambient light source. Moves on its own, no scrolling required. */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  will-change: transform;
}

.orb--blue { background: radial-gradient(circle, rgba(5, 93, 255, 0.55), transparent 70%); }
.orb--cyan { background: radial-gradient(circle, rgba(127, 168, 255, 0.5), transparent 70%); }

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(6vw, 3vh, 0) scale(1.15); }
  66% { transform: translate3d(-3vw, 6vh, 0) scale(0.92); }
}

@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50% { transform: translate3d(-7vw, -4vh, 0) scale(0.9); }
}

.orb--a { animation: drift-a 22s ease-in-out infinite; }
.orb--b { animation: drift-b 28s ease-in-out infinite; }

/* Grid, with a light that sweeps across it continuously. */
.grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(5, 6, 10, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(5, 6, 10, 0.06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(110% 80% at 50% 0%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(110% 80% at 50% 0%, #000 20%, transparent 72%);
}

.scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 40%, rgba(5, 93, 255, 0.14) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: scan 7s linear infinite;
}

@keyframes scan {
  from { background-position: 200% 0; }
  to { background-position: -60% 0; }
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0.85rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  transition: transform var(--fast) var(--ease-spring), box-shadow var(--mid) var(--ease),
    background-color var(--fast) var(--ease), color var(--fast) var(--ease),
    border-color var(--fast) var(--ease);
}

.btn > * { position: relative; z-index: 1; }
.btn svg { width: 17px; height: 17px; flex: none; transition: transform var(--mid) var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

/* A light sweeps across the button on hover. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  background-size: 250% 100%;
  background-position: 200% 0;
  transition: background-position 0.7s var(--ease);
}

.btn:hover::after { background-position: -60% 0; }

.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--sh-blue); }
.btn--primary:hover { background: var(--blue-deep); box-shadow: var(--sh-blue-lg); }

.btn--light { background: #fff; color: var(--black); box-shadow: var(--sh-md); }
.btn--light:hover { box-shadow: var(--sh-lg); }

.btn--outline-dark { border-color: var(--line-dark-2); color: #fff; }
.btn--outline-dark:hover { border-color: var(--blue-bright); background: rgba(5, 93, 255, 0.16); }

.btn--outline-light { border-color: #c6d0e4; color: var(--on-light); background: #fff; }
.btn--outline-light:hover { border-color: var(--blue); color: var(--blue); }

.btn--sm { min-height: 40px; padding: 0.5rem 1.1rem; font-size: var(--t-micro); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn-row--center { justify-content: center; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--blue-deep);
}

.band--dark .link { color: var(--blue-bright); }
.link svg { width: 16px; height: 16px; transition: transform var(--mid) var(--ease); }
.link:hover svg { transform: translateX(4px); }

/* ── Header ────────────────────────────────────────────────────────────── */

.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid transparent;
  color: var(--on-light);
  transition: border-color var(--mid) var(--ease), background-color var(--mid) var(--ease);
}

.header[data-stuck="true"] { border-bottom-color: var(--line-light); background: rgba(255, 255, 255, 0.95); box-shadow: 0 6px 24px rgba(5, 6, 10, 0.06); }

.progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--blue-bright));
  transition: width 0.1s linear;
}

.header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: var(--header-h); }
.logo { display: flex; align-items: center; gap: 0.55rem; }
.logo__mark { width: auto; height: 40px; flex: none; border-radius: 22%; }
/* The cloud is the artwork itself, not a tile, so no corner rounding and
   more height to make up for all the transparent space around it. */
.logo__mark--cloud { height: 50px; border-radius: 0; }
.logo__text { font-family: var(--font-logo); font-size: 1.35rem; font-weight: 500; letter-spacing: 0.015em; color: var(--black); }

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

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--on-light-2);
  transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.nav__link:hover { color: var(--black); background: var(--off); }
.nav__link[aria-current="page"] { color: var(--black); font-weight: 600; }

.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: translateX(-50%);
}

.nav__caret { width: 13px; height: 13px; transition: transform var(--fast) var(--ease); }
.nav__group { position: relative; }

.nav__panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 20;
  width: min(44rem, 88vw);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem;
  padding: var(--s-3);
  border: 1px solid var(--line-light);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease), visibility var(--mid);
}

.nav__group:hover .nav__panel,
.nav__group:focus-within .nav__panel,
.nav__panel[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.nav__group:hover .nav__caret { transform: rotate(180deg); }

/* Ten services read better as three shortish columns than two long ones.
   The width is capped in rem rather than vw: at the narrowest viewport that
   still shows the nav there are 704px to the right of the Services button,
   and 47rem fits inside that with room to spare. Cells are tighter here than
   in the single-column menus, which is why this needs its own class. */
.nav__panel--wide {
  width: min(44rem, 90vw);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nav__panel--wide .nav__item { gap: 0.55rem; padding: 0.6rem; }

.nav__panel--wide .nav__item-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.nav__panel--wide .nav__item-icon svg { width: 17px; height: 17px; }

/* The More menu hangs off the right edge so it cannot run off the viewport.
   Two columns, because no menu on this site should be more than four rows
   deep and a fifth entry would have made it five. */
.nav__panel--one {
  width: min(34rem, 88vw);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  left: auto;
  right: 0;
}

.nav__panel--one .nav__item { gap: 0.55rem; padding: 0.6rem; }

.nav__panel--one .nav__item-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.nav__panel--one .nav__item-icon svg { width: 17px; height: 17px; }

.nav__item { display: flex; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); transition: background-color var(--fast) var(--ease); }
.nav__item:hover { background: var(--blue-tint); }

.nav__item-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--blue-wash);
  color: var(--blue-deep);
}

.nav__item-icon svg { width: 19px; height: 19px; }
.nav__item-title { display: block; font-family: var(--font-display); font-size: var(--t-small); font-weight: 600; color: var(--black); }
.nav__item-text { display: block; margin-top: 2px; font-size: var(--t-micro); color: var(--on-light-2); line-height: 1.45; }

.header__actions { display: flex; align-items: center; gap: var(--s-3); }
.header__cta { display: none; }

.burger { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-light); border-radius: var(--r-sm); background: var(--white); }
.burger__bars, .burger__bars::before, .burger__bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--black); transition: transform var(--mid) var(--ease); }
.burger__bars::before, .burger__bars::after { content: ""; position: relative; }
.burger__bars::before { top: -6px; }
.burger__bars::after { top: 4px; }
.burger[aria-expanded="true"] .burger__bars { background: transparent; }
.burger[aria-expanded="true"] .burger__bars::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars::after { transform: translateY(-4px) rotate(-45deg); }

.drawer { display: none; max-height: calc(100vh - var(--header-h)); overflow-y: auto; background: var(--white); border-top: 1px solid var(--line-light); }
.drawer[data-open="true"] { display: block; }
.drawer__list { padding-block: var(--s-4) var(--s-5); }
.drawer__link { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--line-light); font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--black); }
.drawer__link[aria-current="page"] { color: var(--blue-deep); }
.drawer__sub { padding: 0.6rem 0 0.6rem 1rem; font-size: var(--t-small); color: var(--on-light-2); }
.drawer__cta { margin-top: var(--s-5); }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--white);
  color: var(--on-light);
  padding-block: clamp(3rem, 6vw, 6rem) 0;
}
.hero__orb-a { top: -18rem; left: -12rem; width: 46rem; height: 46rem; opacity: 0.55; }
.hero__orb-b { top: 4rem; right: -16rem; width: 38rem; height: 38rem; opacity: 0.42; }
.hero__inner { position: relative; display: grid; gap: var(--s-8); align-items: center; }

.hero__title { margin-top: var(--s-5); font-size: var(--t-mega); }
.hero__lead { max-width: 32rem; margin-top: var(--s-5); font-size: var(--t-lead); color: var(--on-light-2); }
.hero__actions { margin-top: var(--s-6); }

.hero__facts { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line-light); }
.fact__value { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em; color: var(--black); }
.fact__label { font-size: var(--t-micro); color: var(--on-light-2); }

/* Hero art: image panels that float continuously, no scroll needed. */
.float-set { position: relative; aspect-ratio: 1 / 1.02; }

.float {
  position: absolute;
  overflow: hidden;
  border: 1px solid var(--line-light);
  box-shadow: var(--sh-lg);
  background: var(--white);
  will-change: transform;
}

.float img { width: 100%; height: 100%; object-fit: cover; }
.float--1 { top: 0; left: 0; width: 60%; aspect-ratio: 4 / 3; border-radius: var(--r-xl) var(--r-sm) var(--r-xl) var(--r-sm); animation: bob 9s ease-in-out infinite; }
.float--2 { top: 26%; right: 0; width: 42%; aspect-ratio: 1 / 1; border-radius: var(--r-sm) var(--r-xl) var(--r-sm) var(--r-xl); animation: bob 11s ease-in-out infinite reverse; }
.float--3 { bottom: 0; left: 6%; width: 48%; aspect-ratio: 16 / 10; border-radius: var(--r-lg); animation: bob 13s ease-in-out infinite; }

@keyframes bob {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -18px, 0); }
}

.float__tag {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(5, 6, 10, 0.75);
  backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 600;
  color: #fff;
}

/* ── Ticker ────────────────────────────────────────────────────────────── */

.ticker {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-4);
  background: var(--blue);
  color: #fff;
  border-block: 1px solid rgba(255, 255, 255, 0.16);
}

.ticker--tilt { transform: rotate(-1.4deg) scale(1.04); }
.ticker__track { display: flex; width: max-content; gap: var(--s-6); animation: slide 30s linear infinite; }
.ticker__track--rev { animation-direction: reverse; }
.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.ticker__item::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.7); }

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Dark ticker variant for light bands */
.ticker--dark { background: var(--black); border-color: var(--line-dark); }

/* ── Cards ─────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: var(--s-5); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background: var(--card);
  border: 1px solid var(--edge);
  color: var(--txt);
  transition: transform var(--mid) var(--ease-out), box-shadow var(--mid) var(--ease),
    border-color var(--mid) var(--ease), background-color var(--mid) var(--ease);
}

.band--light .card { background: var(--white); box-shadow: var(--sh-sm); }
.card:hover { transform: translateY(-6px); border-color: var(--blue); }
.band--light .card:hover { box-shadow: var(--sh-lg); }
.band--dark .card:hover { background: var(--black-4); box-shadow: var(--sh-blue); }

.card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px 6px 16px 6px;
  background: var(--blue);
  color: #fff;
  box-shadow: var(--sh-blue);
}

.card__icon svg { width: 25px; height: 25px; }
.card__title { margin-top: var(--s-5); font-size: var(--t-h3); color: var(--txt); }
.card__text { margin-top: var(--s-3); font-size: var(--t-small); color: var(--txt-2); }
.card__foot { margin-top: auto; padding-top: var(--s-5); }
.card__media { margin: calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-5); aspect-ratio: 16 / 9; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease-out); }
.card:hover .card__media img { transform: scale(1.06); }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--s-4); }

.chip {
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--edge-2);
  border-radius: var(--r-pill);
  font-size: var(--t-label);
  font-weight: 500;
  color: var(--txt-2);
}

.ticks { display: grid; gap: 0.6rem; }
.ticks li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--t-small); color: var(--txt-2); }
.ticks svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--blue-deep); }
.band--dark .ticks svg { color: var(--blue-bright); }

/* ── Steps ─────────────────────────────────────────────────────────────── */

.steps { display: grid; gap: var(--s-5); }

.step {
  position: relative;
  padding: var(--s-6);
  background: var(--card);
  border: 1px solid var(--edge);
  transition: transform var(--mid) var(--ease-out), border-color var(--mid) var(--ease);
}

.step:hover { transform: translateY(-6px); border-color: var(--blue); }
.band--light .step { box-shadow: var(--sh-sm); }

.step__num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  -webkit-text-stroke: 1.5px var(--blue);
  color: transparent;
}

.band--dark .step__num { -webkit-text-stroke-color: var(--blue-bright); }
.step__title { margin-top: var(--s-4); font-size: var(--t-h3); color: var(--txt); }
.step__text { margin-top: var(--s-2); font-size: var(--t-small); color: var(--txt-2); }
.step__tag { display: inline-block; margin-top: var(--s-4); padding: 0.2rem 0.65rem; border-radius: var(--r-pill); background: var(--blue-wash); color: var(--blue-deep); font-size: var(--t-label); font-weight: 600; }
.band--dark .step__tag { background: rgba(5, 93, 255, 0.22); color: var(--blue-bright); }

/* ── Carousel ──────────────────────────────────────────────────────────────
   Advances on its own; pauses on hover and on focus. Arrows and dots give
   keyboard users the same control. */

.carousel { position: relative; }

.carousel__viewport {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: var(--s-2) var(--s-5);
}

.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 86%; scroll-snap-align: center; }
.carousel__nav { display: flex; align-items: center; justify-content: center; gap: var(--s-3); }

.carousel__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--edge-2);
  border-radius: 50%;
  color: var(--txt);
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.carousel__btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.carousel__btn svg { width: 18px; height: 18px; }
.carousel__dots { display: flex; gap: 0.4rem; }

.carousel__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--edge-2);
  transition: width var(--mid) var(--ease), background-color var(--mid) var(--ease);
}

.carousel__dot[aria-selected="true"] { width: 26px; border-radius: var(--r-pill); background: var(--blue); }

/* ── Work ──────────────────────────────────────────────────────────────────
   One cut corner rather than mismatched round ones, a full-bleed image, and a
   blue rule under it that runs the full width as you point at the card. */

.work {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 34px));
  transition: transform var(--mid) var(--ease-out), border-color var(--mid) var(--ease),
    box-shadow var(--mid) var(--ease);
}

.band--light .work { box-shadow: var(--sh-sm); }
.work:hover { transform: translateY(-8px); border-color: var(--blue); }
.band--light .work:hover { box-shadow: var(--sh-lg); }

.work__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--card-2);
}

.work__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease-out); }
.work:hover .work__media img { transform: scale(1.06); }

/* The rule sits under the image and fills across on hover. */
.work__media::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--blue);
  transition: width var(--slow) var(--ease-out);
}

.work:hover .work__media::after { width: 100%; }

.work__flag {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: rgba(5, 6, 10, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.work__flag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-bright);
}

.work__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-5) var(--s-5) var(--s-6); }

.work__kind {
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-deep);
}

.band--dark .work__kind { color: var(--blue-bright); }
.work__title { margin-top: var(--s-2); font-size: var(--t-h3); color: var(--txt); }
.work__text { margin-top: var(--s-2); font-size: var(--t-small); color: var(--txt-2); }
.work .chips { margin-top: auto; padding-top: var(--s-4); }

/* ── Stats ─────────────────────────────────────────────────────────────── */

.stats { display: grid; gap: var(--s-5); }

.stat { padding: var(--s-5); background: var(--card); border: 1px solid var(--edge); }
.stat__value { font-family: var(--font-display); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: var(--blue-deep); }
.band--dark .stat__value { color: var(--blue-bright); }
.stat__label { margin-top: var(--s-3); font-size: var(--t-small); color: var(--txt-2); }

/* ── Split ─────────────────────────────────────────────────────────────── */

.split { display: grid; gap: var(--s-7); align-items: center; }
.split + .split { margin-top: var(--s-8); }
.split__media { position: relative; overflow: hidden; border: 1px solid var(--edge-2); box-shadow: var(--sh-md); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq { display: grid; gap: var(--s-3); }
.faq__item { background: var(--card); border: 1px solid var(--edge); border-radius: var(--r-md); transition: border-color var(--fast) var(--ease); }
.faq__item[open] { border-color: var(--blue); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--txt);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }
.faq__sign { position: relative; flex: none; width: 20px; height: 20px; }

.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-deep);
  transform: translate(-50%, -50%);
  transition: transform var(--mid) var(--ease);
}

.band--dark .faq__sign::before, .band--dark .faq__sign::after { background: var(--blue-bright); }
.faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { padding: 0 var(--s-5) var(--s-5); font-size: var(--t-small); color: var(--txt-2); }

/* ── Forms ─────────────────────────────────────────────────────────────── */

.form { display: grid; gap: var(--s-4); }
.form__row { display: grid; gap: var(--s-4); }
.field { display: grid; gap: 0.35rem; }
.field__label { font-size: var(--t-small); font-weight: 500; color: var(--txt); }
.field__opt { color: var(--txt-2); font-weight: 400; }
.field__hint { font-size: var(--t-micro); color: var(--txt-2); }

.field__input, .field__area, .field__select {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--edge-2);
  border-radius: var(--r-sm);
  background: var(--card-2);
  color: var(--txt);
  font-size: var(--t-small);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.field__input:focus, .field__area:focus, .field__select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(5, 93, 255, 0.22);
}

.field__area { min-height: 8.5rem; resize: vertical; }

.pickers { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.picker { position: relative; }
.picker__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.picker__label {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--edge-2);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  color: var(--txt);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.picker__label:hover { border-color: var(--blue); }
.picker__input:checked + .picker__label { background: var(--blue); border-color: var(--blue); color: #fff; }
.picker__input:focus-visible + .picker__label { outline: 3px solid var(--blue-bright); outline-offset: 3px; }

.form__status { display: none; padding: var(--s-4); border: 1px solid var(--blue); border-radius: var(--r-md); background: var(--blue-wash); font-size: var(--t-small); color: var(--txt); }
.form__status[data-shown="true"] { display: block; }

.contact-row { display: flex; gap: var(--s-4); align-items: flex-start; }
.contact-row__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px 5px 14px 5px; background: var(--blue); color: #fff; }
.contact-row__icon svg { width: 20px; height: 20px; }
.contact-row__label { font-size: var(--t-micro); color: var(--txt-2); }
.contact-row__value { font-family: var(--font-display); font-weight: 600; color: var(--txt); }

/* ── CTA ───────────────────────────────────────────────────────────────── */

.cta { position: relative; overflow: hidden; background: var(--black); color: #fff; padding-block: var(--section-y); text-align: center; }

.cta__inner { position: relative; max-width: 44rem; margin-inline: auto; }
.cta__title { font-size: var(--t-display); }
.cta__text { margin-top: var(--s-4); font-size: var(--t-lead); color: var(--on-dark-2); }
.cta__actions { margin-top: var(--s-6); }
.cta__fine { margin-top: var(--s-5); font-size: var(--t-micro); color: var(--on-dark-3); }

/* ── Next ──────────────────────────────────────────────────────────────── */

.next { display: grid; gap: var(--s-4); }

.next__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--r-md) var(--r-md) var(--r-md) 0;
  transition: transform var(--mid) var(--ease-out), border-color var(--fast) var(--ease);
}

.next__card:hover { transform: translateX(6px); border-color: var(--blue); }
.next__label { font-size: var(--t-micro); color: var(--txt-2); }
.next__title { font-family: var(--font-display); font-weight: 600; color: var(--txt); }
.next__card svg { flex: none; width: 20px; height: 20px; color: var(--blue-deep); }
.band--dark .next__card svg { color: var(--blue-bright); }

/* ── Footer ────────────────────────────────────────────────────────────── */

.footer { background: var(--black); color: #fff; padding-block: var(--s-8) var(--s-6); border-top: 1px solid var(--line-dark); }
.footer__top { display: grid; gap: var(--s-7); }
.footer__blurb { max-width: 22rem; margin-top: var(--s-4); font-size: var(--t-small); color: var(--on-dark-2); }
.footer__cta { margin-top: var(--s-5); }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.footer__heading { font-family: var(--font-display); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-3); }
.footer__list { display: grid; gap: 0.6rem; margin-top: var(--s-4); font-size: var(--t-small); color: var(--on-dark-2); }
.footer__list a:hover { color: var(--blue-bright); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line-dark); font-size: var(--t-micro); color: var(--on-dark-3); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer__legal a:hover { color: var(--blue-bright); }

/* ── Page head ─────────────────────────────────────────────────────────── */

.page-head {
  position: relative;
  overflow: hidden;
  background: var(--white);
  color: var(--on-light);
  border-bottom: 1px solid var(--line-light);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.page-head__orb { top: -20rem; right: -10rem; width: 36rem; height: 36rem; opacity: 0.45; }
.page-head__inner { position: relative; max-width: 46rem; }
.page-head__title { margin-top: var(--s-4); font-size: var(--t-h1); }
.page-head__text { margin-top: var(--s-4); font-size: var(--t-lead); color: var(--on-light-2); }
.page-head__actions { margin-top: var(--s-6); }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: var(--t-micro); color: var(--on-light-2); }
.crumbs a:hover { color: var(--blue-deep); }

/* ── Opening reveal ────────────────────────────────────────────────────────
   The first thing anyone sees: the logo assembles itself against a blue that
   is never flat, then the proposition arrives underneath. Only the decorative
   parts (the seed line, the shine) start hidden, the logo, the words and the
   buttons are all visible without JavaScript. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.intro {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: min(90vh, 800px);
  padding-block: clamp(3rem, 9vh, 6rem);
  color: #fff;
  text-align: center;
  background:
    radial-gradient(120% 90% at 12% 6%, #3b83ff 0%, transparent 55%),
    radial-gradient(90% 80% at 88% 94%, #0038c4 0%, transparent 60%),
    linear-gradient(155deg, #0a66ff 0%, #055dff 42%, #0140b0 100%);
}

@supports (min-height: 90svh) {
  .intro { min-height: min(90svh, 800px); }
}

.intro__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(78% 68% at 50% 48%, #000 8%, transparent 72%);
  -webkit-mask-image: radial-gradient(78% 68% at 50% 48%, #000 8%, transparent 72%);
}

.orb--white { background: radial-gradient(circle, rgba(255, 255, 255, 0.45), transparent 70%); }
.intro__orb-a { top: -22rem; left: -14rem; width: 46rem; height: 46rem; opacity: 0.5; }
.intro__orb-b { bottom: -24rem; right: -12rem; width: 40rem; height: 40rem; opacity: 0.4; }

.scanline--white {
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%);
  background-size: 250% 100%;
}

.intro__inner { position: relative; }

.intro__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: clamp(0.5rem, 3vh, 2rem);
}

/* The line the logo grows out of. Decorative, so it may start hidden. */
.intro__seed {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(64vw, 34rem);
  height: 2px;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, #fff, transparent);
  opacity: 0;
  pointer-events: none;
}

.intro__lockup {
  /* One height drives both halves, and the gap is the same fraction of it
     that separates them in the original artwork (44px across a 697px tall
     lockup), so the reassembled logo matches the supplied file exactly. */
  --lockup-h: clamp(3.2rem, 11vw, 6.5rem);
  display: flex;
  align-items: center;
  gap: calc(var(--lockup-h) * 0.063);
}

.intro__mask { display: block; overflow: hidden; }

.intro__word,
.intro__cloud {
  height: var(--lockup-h);
  width: auto;
}

.intro__shine {
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 26%;
  transform: skewX(-14deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  filter: blur(7px);
  opacity: 0;
  pointer-events: none;
}

.intro__tagline {
  max-width: 40rem;
  margin: clamp(1.25rem, 4vh, 2.25rem) auto 0;
  font-size: var(--t-lead);
  color: rgba(255, 255, 255, 0.88);
}

.intro__actions { margin-top: var(--s-6); }

.intro__scroll {
  display: grid;
  place-items: center;
  margin: clamp(1.75rem, 5vh, 3rem) auto 0;
}

/* A mouse only makes sense where there is a mouse. Touch devices get a
   swipe-up cue instead. */
.hint { display: none; }

@media (hover: hover) and (pointer: fine) {
  .hint--mouse { display: block; }
}

@media not all and (hover: hover) and (pointer: fine) {
  .hint--swipe { display: grid; }
}

.hint--mouse {
  position: relative;
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--r-pill);
}

.intro__scroll-dot {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: #fff;
  transform: translateX(-50%);
  animation: scroll-hint 2.1s ease-in-out infinite;
}

@keyframes scroll-hint {
  0%, 100% { transform: translate(-50%, 0); opacity: 1; }
  50% { transform: translate(-50%, 13px); opacity: 0.3; }
}

/* Touch: a thumb travelling up, with two chevrons riding after it. */
.hint--swipe {
  justify-items: center;
  gap: 0.4rem;
}

.hint__hand {
  display: block;
  color: #fff;
  animation: swipe-up 2.2s ease-in-out infinite;
}

.hint__hand svg { width: 30px; height: 30px; }

.hint__chevrons {
  display: grid;
  gap: 2px;
  opacity: 0.75;
}

.hint__chevrons span {
  display: block;
  width: 11px;
  height: 11px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(45deg);
  animation: chev 1.8s ease-in-out infinite;
}

.hint__chevrons span:nth-child(2) { animation-delay: 0.18s; }

@keyframes swipe-up {
  0%, 100% { transform: translateY(4px); opacity: 0.65; }
  50% { transform: translateY(-4px); opacity: 1; }
}

@keyframes chev {
  0%, 100% { opacity: 0.25; transform: rotate(45deg) translate(0, 0); }
  50% { opacity: 1; transform: rotate(45deg) translate(2px, -2px); }
}

/* ── Page openers ──────────────────────────────────────────────────────────
   One shell, a different piece of moving artwork per page. */

.opener {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line-light);
  background: var(--white);
  --op-txt: var(--on-light);
  --op-txt-2: var(--on-light-2);
}

.opener--dark {
  background: linear-gradient(160deg, #0d1018 0%, var(--black) 62%);
  border-bottom-color: var(--line-dark);
  --op-txt: #fff;
  --op-txt-2: var(--on-dark-2);
}

.opener--blue {
  background:
    radial-gradient(110% 90% at 12% 8%, #3b83ff 0%, transparent 55%),
    linear-gradient(155deg, #0a66ff 0%, var(--blue) 45%, #0140b0 100%);
  border-bottom-color: transparent;
  --op-txt: #fff;
  --op-txt-2: rgba(255, 255, 255, 0.82);
}

.opener__inner { position: relative; display: grid; gap: var(--s-6); align-items: center; }
.opener__copy { max-width: 34rem; }
.opener__title { font-size: var(--t-h1); color: var(--op-txt); }
.opener__text { margin-top: var(--s-4); font-size: var(--t-lead); color: var(--op-txt-2); }
.opener__actions { margin-top: var(--s-6); }
.opener__art { position: relative; min-height: 15rem; }

/* On a blue ground the brand blue disappears, so the accent colour and the
   primary button both have to change hands. */
.opener--dark .hl { color: var(--blue-bright); }

.opener--blue .hl {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
}

.opener--blue .btn--primary {
  background: #fff;
  color: var(--blue);
  box-shadow: var(--sh-md);
}

.opener--blue .btn--primary:hover { background: var(--blue-wash); box-shadow: var(--sh-lg); }

.opener--dark .btn--outline-light,
.opener--blue .btn--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.opener--dark .btn--outline-light:hover,
.opener--blue .btn--outline-light:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ── Art: three panels, breathing ─────────────────────────────────────── */
.art-panels { position: relative; height: 17rem; }

.art-panels__card {
  position: absolute;
  width: 54%;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line-light);
  box-shadow: var(--sh-lg);
  animation: bob 7s ease-in-out infinite;
}

.art-panels__card:nth-child(1) { top: 0; left: 0; animation-delay: 0s; }
.art-panels__card:nth-child(2) { top: 22%; left: 24%; animation-delay: 1.1s; background: var(--blue); border-color: transparent; }
.art-panels__card:nth-child(3) { top: 46%; left: 46%; animation-delay: 2.2s; background: var(--black); border-color: transparent; }

.art-panels__bar { display: block; height: 8px; border-radius: 4px; background: var(--blue-wash); }
.art-panels__bar + .art-panels__bar { margin-top: 7px; width: 62%; }
.art-panels__card:nth-child(2) .art-panels__bar,
.art-panels__card:nth-child(3) .art-panels__bar { background: rgba(255, 255, 255, 0.45); }
.art-panels__dot { display: block; width: 26px; height: 26px; border-radius: 9px 3px 9px 3px; background: var(--blue); margin-bottom: var(--s-3); }
.art-panels__card:nth-child(2) .art-panels__dot,
.art-panels__card:nth-child(3) .art-panels__dot { background: #fff; }

/* ── Art: a browser that keeps loading ────────────────────────────────── */
.art-browser {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line-light);
  box-shadow: var(--sh-lg);
}

.art-browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding-inline: 0.8rem;
  background: var(--off);
  border-bottom: 1px solid var(--line-light);
}

.art-browser__dot { width: 8px; height: 8px; border-radius: 50%; background: #c6d0e4; }
.art-browser__dot:first-child { background: var(--blue); }
.art-browser__url { flex: 1; height: 16px; margin-left: 6px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line-light); }

.art-browser__load {
  display: block;
  height: 3px;
  background: var(--blue);
  transform-origin: 0 50%;
  animation: load 3.4s ease-in-out infinite;
}

@keyframes load {
  0% { transform: scaleX(0); opacity: 1; }
  70% { transform: scaleX(1); opacity: 1; }
  90%, 100% { transform: scaleX(1); opacity: 0; }
}

.art-browser__body { padding: var(--s-4); display: grid; gap: var(--s-3); }
.art-browser__hero { height: 72px; border-radius: var(--r-sm); background: linear-gradient(120deg, var(--blue), #7fa8ff); }
.art-browser__line { height: 9px; border-radius: 5px; background: var(--off-2); animation: fade-in-out 3.4s ease-in-out infinite; }
.art-browser__line:nth-of-type(2) { width: 72%; animation-delay: 0.2s; }
.art-browser__line:nth-of-type(3) { width: 48%; animation-delay: 0.4s; }
.art-browser__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.art-browser__tile { height: 44px; border-radius: var(--r-sm); background: var(--off); border: 1px solid var(--line-light); animation: fade-in-out 3.4s ease-in-out infinite; }
.art-browser__tile:nth-child(2) { animation-delay: 0.15s; }
.art-browser__tile:nth-child(3) { animation-delay: 0.3s; }

@keyframes fade-in-out {
  0%, 12% { opacity: 0.25; }
  45%, 100% { opacity: 1; }
}

/* ── Art: a phone syncing ─────────────────────────────────────────────── */
.art-phone { position: relative; display: grid; place-items: center; height: 18rem; }

.art-phone__body {
  width: 9.5rem;
  height: 17rem;
  padding: 8px;
  border-radius: 26px;
  background: var(--black);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--sh-lg), 0 0 70px rgba(5, 93, 255, 0.3);
}

.opener--blue .art-phone__body { border-color: rgba(255, 255, 255, 0.3); }

.art-phone__screen { height: 100%; border-radius: 19px; background: #0d1018; padding: 0.75rem 0.6rem; display: grid; gap: 7px; align-content: start; }
.art-phone__top { height: 30px; border-radius: 8px; background: linear-gradient(120deg, var(--blue), #7fa8ff); }
.art-phone__row { height: 22px; border-radius: 7px; background: rgba(255, 255, 255, 0.1); animation: row-in 3.2s ease-in-out infinite; }
.art-phone__row:nth-child(3) { animation-delay: 0.25s; }
.art-phone__row:nth-child(4) { animation-delay: 0.5s; }
.art-phone__row:nth-child(5) { animation-delay: 0.75s; }

@keyframes row-in {
  0%, 10% { opacity: 0; transform: translateX(14px); }
  40%, 100% { opacity: 1; transform: none; }
}

.art-phone__ring {
  position: absolute;
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  border: 1.5px dashed rgba(5, 93, 255, 0.35);
  animation: spin 18s linear infinite;
}

.art-phone__ring--2 { width: 19rem; height: 19rem; border-color: rgba(5, 93, 255, 0.18); animation-duration: 26s; animation-direction: reverse; }
.opener--dark .art-phone__ring { border-color: rgba(127, 168, 255, 0.35); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Art: brand swatches ──────────────────────────────────────────────── */
.art-brand { display: grid; gap: var(--s-4); place-items: center; }

.art-brand__aa {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--op-txt);
  animation: weight-shift 6s ease-in-out infinite;
}

@keyframes weight-shift {
  0%, 100% { letter-spacing: -0.05em; opacity: 1; }
  50% { letter-spacing: 0.02em; opacity: 0.85; }
}

.art-brand__chips { display: flex; gap: 0.6rem; }

.art-brand__chip {
  width: 3rem;
  height: 3rem;
  border-radius: 14px 4px 14px 4px;
  box-shadow: var(--sh-sm);
  animation: chip-rise 3.6s ease-in-out infinite;
}

.art-brand__chip:nth-child(1) { background: var(--blue); }
.art-brand__chip:nth-child(2) { background: #7fa8ff; animation-delay: 0.18s; }
.art-brand__chip:nth-child(3) { background: var(--black); animation-delay: 0.36s; }
.art-brand__chip:nth-child(4) { background: var(--white); border: 1px solid var(--line-light); animation-delay: 0.54s; }
.art-brand__chip:nth-child(5) { background: var(--blue-deep); animation-delay: 0.72s; }

@keyframes chip-rise {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ── Art: a reel of work ──────────────────────────────────────────────── */
.art-reel { display: grid; gap: var(--s-4); overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.art-reel__row { display: flex; gap: var(--s-4); width: max-content; animation: slide 26s linear infinite; }
.art-reel__row--rev { animation-direction: reverse; animation-duration: 32s; }
.art-reel__row img { width: 13rem; border-radius: var(--r-md); border: 1px solid var(--line-light); box-shadow: var(--sh-sm); }

/* ── Art: the process rail ────────────────────────────────────────────── */
.art-rail { position: relative; display: grid; gap: var(--s-5); }
.art-rail__track { position: relative; height: 3px; border-radius: 3px; background: var(--off-2); overflow: hidden; }
.opener--dark .art-rail__track { background: rgba(255, 255, 255, 0.12); }
.art-rail__fill { position: absolute; inset: 0; width: 40%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--blue), transparent); animation: rail 4s ease-in-out infinite; }

@keyframes rail {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.art-rail__nodes { display: flex; justify-content: space-between; }

.art-rail__node {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 14px 4px 14px 4px;
  background: var(--white);
  border: 1px solid var(--line-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-micro);
  color: var(--blue);
  box-shadow: var(--sh-sm);
  animation: node-pop 4s ease-in-out infinite;
}

.art-rail__node:nth-child(2) { animation-delay: 0.33s; }
.art-rail__node:nth-child(3) { animation-delay: 0.66s; }
.art-rail__node:nth-child(4) { animation-delay: 1s; }
.art-rail__node:nth-child(5) { animation-delay: 1.33s; }
.art-rail__node:nth-child(6) { animation-delay: 1.66s; }

@keyframes node-pop {
  0%, 60%, 100% { transform: translateY(0); box-shadow: var(--sh-sm); }
  25% { transform: translateY(-8px); box-shadow: var(--sh-blue); }
}

/* ── Art: two halves locking together ─────────────────────────────────── */
.art-merge { position: relative; display: grid; place-items: center; height: 15rem; }
.art-merge__half { position: absolute; width: 45%; height: 8.5rem; border-radius: var(--r-lg); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: var(--t-small); box-shadow: var(--sh-md); }
.art-merge__half--a { background: var(--blue); color: #fff; animation: merge-a 5s ease-in-out infinite; }
.art-merge__half--b { background: var(--black); color: #fff; animation: merge-b 5s ease-in-out infinite; }

/* Each half is 45% of the container, so the closest they can travel without
   one covering the other's label is 50% of their own width. */
@keyframes merge-a {
  0%, 100% { transform: translateX(-76%) rotate(-4deg); }
  50% { transform: translateX(-52%) rotate(0deg); }
}

@keyframes merge-b {
  0%, 100% { transform: translateX(76%) rotate(4deg); }
  50% { transform: translateX(52%) rotate(0deg); }
}

/* ── Art: a stack of questions ────────────────────────────────────────── */
.art-stack { position: relative; height: 14rem; display: grid; place-items: center; }

.art-stack__card {
  position: absolute;
  width: 74%;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line-light);
  box-shadow: var(--sh-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-small);
  color: var(--on-light);
}

.art-stack__card:nth-child(1) { transform: translateY(38px) scale(0.9); opacity: 0.5; }
.art-stack__card:nth-child(2) { transform: translateY(19px) scale(0.95); opacity: 0.75; }
.art-stack__card:nth-child(3) { animation: card-lift 4.5s ease-in-out infinite; }

@keyframes card-lift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-1.5deg); }
}

.art-stack__mark { float: right; color: var(--blue); }

/* ── Art: a message going out ─────────────────────────────────────────── */
.art-send { position: relative; display: grid; place-items: center; height: 15rem; }

.art-send__pulse {
  position: absolute;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  border: 2px solid var(--blue);
  opacity: 0;
  animation: pulse-out 3s ease-out infinite;
}

.art-send__pulse:nth-child(2) { animation-delay: 1s; }
.art-send__pulse:nth-child(3) { animation-delay: 2s; }

@keyframes pulse-out {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}

.art-send__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 22px 6px 22px 6px;
  background: var(--blue);
  color: #fff;
  box-shadow: var(--sh-blue-lg);
  animation: bob 5s ease-in-out infinite;
}

.art-send__icon svg { width: 2.4rem; height: 2.4rem; }

/* ── Art: a quiet document ────────────────────────────────────────────── */
.art-doc { position: relative; display: grid; place-items: center; height: 13rem; }

.art-doc__sheet {
  width: 11rem;
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line-light);
  box-shadow: var(--sh-md);
  display: grid;
  gap: 8px;
  animation: bob 8s ease-in-out infinite;
}

.art-doc__line { height: 7px; border-radius: 4px; background: var(--off-2); }
.art-doc__line:nth-child(2) { width: 78%; }
.art-doc__line:nth-child(4) { width: 60%; }

.art-doc__lock {
  position: absolute;
  right: 18%;
  bottom: 12%;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 14px 4px 14px 4px;
  background: var(--blue);
  color: #fff;
  box-shadow: var(--sh-blue);
  animation: bob 6s ease-in-out infinite reverse;
}

.art-doc__lock svg { width: 1.4rem; height: 1.4rem; }

/* ── Art: 404 ─────────────────────────────────────────────────────────── */
.art-404 {
  font-family: var(--font-display);
  font-size: clamp(5rem, 20vw, 12rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  color: #fff;
  text-shadow: 3px 0 var(--blue), -3px 0 rgba(255, 255, 255, 0.25);
  animation: glitch 4s steps(1) infinite;
}

@keyframes glitch {
  0%, 88%, 100% { text-shadow: 3px 0 var(--blue), -3px 0 rgba(255, 255, 255, 0.25); transform: none; }
  90% { text-shadow: -8px 0 var(--blue), 6px 0 rgba(255, 255, 255, 0.4); transform: translateX(3px); }
  93% { text-shadow: 7px 0 var(--blue), -5px 0 rgba(255, 255, 255, 0.3); transform: translateX(-2px); }
  96% { text-shadow: 3px 0 var(--blue), -3px 0 rgba(255, 255, 255, 0.25); transform: none; }
}

/* ── Art: a code editor, writing itself ──────────────────────────────── */
.art-code {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0d1018;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--sh-lg), 0 0 70px rgba(5, 93, 255, 0.22);
}

.art-code__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding-inline: 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.art-code__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.art-code__dot:first-child { background: var(--blue); }
.art-code__body { padding: var(--s-4) var(--s-4) var(--s-5); display: grid; gap: 9px; }

.art-code__row { display: flex; align-items: center; gap: 10px; animation: code-in 4s ease-in-out infinite; }
.art-code__row:nth-child(2) { animation-delay: 0.2s; }
.art-code__row:nth-child(3) { animation-delay: 0.4s; }
.art-code__row:nth-child(4) { animation-delay: 0.6s; }
.art-code__row:nth-child(5) { animation-delay: 0.8s; }
.art-code__row:nth-child(6) { animation-delay: 1s; }

.art-code__n { width: 12px; font-family: var(--font-mono, monospace); font-size: 11px; color: rgba(255, 255, 255, 0.25); }
.art-code__tok { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); }
.art-code__tok--blue { background: var(--blue); }
.art-code__tok--pale { background: #7fa8ff; }

@keyframes code-in {
  0%, 8% { opacity: 0; transform: translateX(-10px); }
  30%, 100% { opacity: 1; transform: none; }
}

.art-code__caret {
  width: 8px;
  height: 14px;
  background: var(--blue);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ── Art: printed pieces, fanned ─────────────────────────────────────── */
.art-poster { position: relative; height: 17rem; display: grid; place-items: center; }

.art-poster__sheet {
  position: absolute;
  width: 8.5rem;
  height: 11.5rem;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  display: grid;
  place-items: center;
  animation: fan 7s ease-in-out infinite;
}

.art-poster__sheet:nth-child(1) { background: var(--white); animation-delay: 0s; }
.art-poster__sheet:nth-child(2) { background: var(--blue); animation-delay: 0.6s; }
.art-poster__sheet:nth-child(3) { background: var(--black); animation-delay: 1.2s; }

.art-poster__sheet:nth-child(1) .art-poster__mark { border-color: var(--blue); }
.art-poster__sheet:nth-child(2) .art-poster__mark { border-color: #fff; }
.art-poster__sheet:nth-child(3) .art-poster__mark { border-color: #7fa8ff; }

.art-poster__mark { width: 3.4rem; height: 3.4rem; border: 3px solid; border-radius: 50% 6px 50% 6px; }

@keyframes fan {
  0%, 100% { transform: translateX(-4.6rem) rotate(-11deg); }
  33% { transform: translateX(0) rotate(0deg); }
  66% { transform: translateX(4.6rem) rotate(11deg); }
}

/* ── Art: wireframe resolving into interface ─────────────────────────── */
.art-screens { position: relative; height: 16rem; display: grid; place-items: center; }

.art-screens__panel {
  position: absolute;
  width: 15rem;
  padding: var(--s-4);
  border-radius: var(--r-md);
  display: grid;
  gap: 8px;
  box-shadow: var(--sh-lg);
}

.art-screens__panel--wire {
  background: var(--white);
  border: 1.5px dashed var(--edge-2, #c6d0e4);
  transform: translate(-2.2rem, -1.4rem) rotate(-4deg);
}

.art-screens__panel--ui {
  background: var(--white);
  border: 1px solid var(--line-light);
  transform: translate(2.2rem, 1.4rem) rotate(3deg);
  animation: ui-lift 5s ease-in-out infinite;
}

@keyframes ui-lift {
  0%, 100% { transform: translate(2.2rem, 1.4rem) rotate(3deg); }
  50% { transform: translate(2.2rem, 0.6rem) rotate(1.5deg); }
}

.art-screens__band { height: 40px; border-radius: 8px; }
.art-screens__panel--wire .art-screens__band { background: #eef2f9; }
.art-screens__panel--ui .art-screens__band { background: linear-gradient(120deg, var(--blue), #7fa8ff); }
.art-screens__bar { height: 8px; border-radius: 4px; background: #eef2f9; }
.art-screens__bar--short { width: 58%; }
.art-screens__panel--ui .art-screens__bar { background: #dbe4f5; }
.art-screens__btn { height: 22px; width: 62px; border-radius: var(--r-pill); background: var(--black); }
.art-screens__panel--wire .art-screens__btn { background: #eef2f9; border: 1.5px dashed #c6d0e4; }

.art-screens__cursor {
  position: absolute;
  right: 22%;
  bottom: 18%;
  width: 16px;
  height: 16px;
  border-radius: 50% 2px 50% 50%;
  background: var(--blue);
  box-shadow: 0 0 0 6px rgba(5, 93, 255, 0.2);
  animation: cursor-move 5s ease-in-out infinite;
}

@keyframes cursor-move {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2.5rem, -2rem); }
}

/* ── Art: numbers going up ───────────────────────────────────────────── */
.art-chart {
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line-light);
  box-shadow: var(--sh-lg);
}

.art-chart__head { display: flex; align-items: baseline; justify-content: space-between; }
.art-chart__value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.04em; color: var(--on-light); }
.art-chart__tag { font-size: var(--t-micro); font-weight: 600; color: var(--blue); }

.art-chart__bars { display: flex; align-items: flex-end; gap: 8px; height: 8.5rem; margin-top: var(--s-4); }

.art-chart__bar {
  flex: 1;
  border-radius: 6px 6px 3px 3px;
  background: #dbe4f5;
  transform-origin: 50% 100%;
  animation: bar-grow 3.6s ease-in-out infinite;
}

.art-chart__bar:nth-child(1) { height: 38%; animation-delay: 0s; }
.art-chart__bar:nth-child(2) { height: 56%; animation-delay: 0.12s; }
.art-chart__bar:nth-child(3) { height: 44%; animation-delay: 0.24s; }
.art-chart__bar:nth-child(4) { height: 72%; animation-delay: 0.36s; background: var(--blue); }
.art-chart__bar:nth-child(5) { height: 60%; animation-delay: 0.48s; }
.art-chart__bar:nth-child(6) { height: 88%; animation-delay: 0.6s; background: var(--blue); }
.art-chart__bar:nth-child(7) { height: 100%; animation-delay: 0.72s; background: var(--black); }

@keyframes bar-grow {
  0%, 10% { transform: scaleY(0.25); opacity: 0.5; }
  45%, 100% { transform: scaleY(1); opacity: 1; }
}

/* ── Art: systems talking to each other ──────────────────────────────── */
.art-net { position: relative; height: 16rem; display: grid; place-items: center; }

.art-net__hub {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 20px 6px 20px 6px;
  background: var(--blue);
  color: #fff;
  box-shadow: var(--sh-blue-lg);
}

.art-net__hub svg { width: 2rem; height: 2rem; }

.art-net__ring {
  position: absolute;
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
  animation: spin 24s linear infinite;
}

.opener:not(.opener--dark):not(.opener--blue) .art-net__ring { border-color: rgba(5, 93, 255, 0.25); }

.art-net__node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px 4px 12px 4px;
  background: var(--white);
  border: 1px solid var(--line-light);
  color: var(--blue);
  box-shadow: var(--sh-md);
  animation: node-pulse 3.2s ease-in-out infinite;
}

.art-net__node svg { width: 1.3rem; height: 1.3rem; }

/* Positioned by explicit class, not nth-of-type, the ring and hub are
   sibling spans too, so counting by type drops a node. */
.art-net__node--t { top: 4%; left: 50%; margin-left: -1.5rem; }
.art-net__node--r { right: 10%; top: 42%; animation-delay: 0.8s; }
.art-net__node--b { bottom: 4%; left: 50%; margin-left: -1.5rem; animation-delay: 1.6s; }
.art-net__node--l { left: 10%; top: 42%; animation-delay: 2.4s; }

@keyframes node-pulse {
  0%, 100% { transform: translateY(0); box-shadow: var(--sh-md); }
  50% { transform: translateY(-7px); box-shadow: var(--sh-blue); }
}

/* ── Signs you need this ──────────────────────────────────────────────────
   A short checklist on the blue band. Recognising yourself in one of these
   is what turns a reader into an enquiry. */

.signs { display: grid; gap: var(--s-3); }

.sign {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md) 4px var(--r-md) 4px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: var(--t-small);
  color: #fff;
}

.sign svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #fff; }

/* Numbered approach cards. */
.approach__n {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  -webkit-text-stroke: 1.5px var(--blue-bright);
  color: transparent;
}

/* ── Product card ─────────────────────────────────────────────────────── */

.product {
  display: grid;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--r-xl) var(--r-xl) var(--r-xl) 0;
  box-shadow: var(--sh-md);
  transition: transform var(--mid) var(--ease-out), box-shadow var(--mid) var(--ease),
    border-color var(--mid) var(--ease);
}

.product:hover { transform: translateY(-6px); border-color: var(--blue); box-shadow: var(--sh-lg); }
.product__media { position: relative; overflow: hidden; background: var(--card-2); }
.product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease-out); }
.product:hover .product__media img { transform: scale(1.05); }

.product__flag {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.product__body { padding: var(--s-6); }
.product__kind { font-family: var(--font-display); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-deep); }
.product__title { margin-top: var(--s-2); font-size: var(--t-h2); color: var(--txt); }
.product__tag { margin-top: var(--s-2); font-family: var(--font-display); font-size: var(--t-lead); color: var(--blue-deep); }
.product__text { margin-top: var(--s-4); color: var(--txt-2); }
.product .chips { margin-top: var(--s-5); }

/* ── Empty state ──────────────────────────────────────────────────────── */

.empty {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--s-5);
  border: 1.5px dashed var(--edge-2);
  border-radius: var(--r-xl) var(--r-sm) var(--r-xl) var(--r-sm);
  background: var(--card);
  text-align: center;
}

.empty__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--s-5);
  border-radius: 20px 6px 20px 6px;
  background: var(--blue);
  color: #fff;
  box-shadow: var(--sh-blue);
}

.empty__icon svg { width: 28px; height: 28px; }
.empty__title { font-size: var(--t-h3); color: var(--txt); }
.empty__text { max-width: 34rem; margin: var(--s-3) auto 0; color: var(--txt-2); }

/* ── Founder ──────────────────────────────────────────────────────────── */

.founder__portrait { overflow: hidden; background: var(--black-3); aspect-ratio: 5 / 6; }
.founder__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

.founder__hello { font-family: var(--font-display); font-size: var(--t-lead); color: var(--blue-bright); }
.founder__title { margin-top: 0.25rem; }
.founder__roles { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

.founder__role {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border-radius: var(--r-md) 4px var(--r-md) 4px;
  background: var(--card-2);
  border: 1px solid var(--edge-2);
  font-size: var(--t-tiny);
  color: var(--txt-2);
}

.founder__role strong { font-family: var(--font-display); color: var(--txt); }

/* A logo, not a photograph: show all of it, on its own ground. */
.shot-logo { background: #000; }
.shot-logo img { object-fit: contain; padding: 6%; }

/* ── Consent ──────────────────────────────────────────────────────────────
   Nothing is stored before the visitor answers, so the banner does not block
   the page. Accept and Reject are the same size and weight; a reject that is
   harder to find than an accept is not consent. */

.consent {
  display: none;
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 250;
  max-width: 62rem;
  margin-inline: auto;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-dark-2);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 4px;
  background: var(--black-2);
  color: #fff;
  box-shadow: var(--sh-lg);
}

.consent[data-shown="true"] { display: block; animation: consent-in 0.45s var(--ease-out) both; }

@keyframes consent-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

.consent__title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-small); }
.consent__text { margin-top: 2px; font-size: var(--t-tiny); color: var(--on-dark-2); }
.consent__text a { color: var(--blue-bright); text-decoration: underline; }
.consent__actions { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
.consent__actions .btn { flex: 1 1 auto; min-height: 42px; font-size: var(--t-tiny); }

/* Wide and short once there is room: message on the left, both answers on
   the right, so it never becomes a wall across the page. */
@media (min-width: 48rem) {
  .consent { display: none; align-items: center; gap: var(--s-6); }
  .consent[data-shown="true"] { display: flex; }
  .consent__body { flex: 1; }
  .consent__actions { flex: none; margin-top: 0; }
  .consent__actions .btn { flex: none; min-width: 7.5rem; }
}

/* ── Inline signup ────────────────────────────────────────────────────── */

.signup { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.signup__field { flex: 1 1 14rem; min-width: 0; }

.signup__input {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--edge-2);
  border-radius: var(--r-sm);
  background: var(--card-2);
  color: var(--txt);
  font-size: var(--t-small);
}

.signup__input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(5, 93, 255, 0.22);
}

.signup__note { width: 100%; margin-top: var(--s-3); font-size: var(--t-micro); color: var(--txt-2); }

/* Spam trap. Kept out of sight and out of the tab order. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Dark grounds ──────────────────────────────────────────────────────────
   Texture rather than a coloured glow. Electric blue is reserved for things
   you can act on, so it has no business lighting a backdrop. Five grounds so
   consecutive dark bands read as different rooms, not one long slab. */

.band--dark, .cta, .opener--dark { background-color: var(--black); }

/* Content sits above whatever the ground is doing. */
.band > .shell, .cta__inner, .opener__inner { position: relative; z-index: 1; }

.tex { position: relative; }

.tex::before,
.tex::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 1. Mesh — a fine dot field, fading out downward. */
.tex--mesh::before {
  background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(125% 95% at 50% 0%, #000 18%, transparent 76%);
  -webkit-mask-image: radial-gradient(125% 95% at 50% 0%, #000 18%, transparent 76%);
}

/* 2. Rule — diagonal hairlines, like a drawing board. */
.tex--rule::before {
  background-image: repeating-linear-gradient(114deg,
    rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 26px);
  mask-image: linear-gradient(180deg, #000 10%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 88%);
}

/* 3. Rings — concentric contours rising from the bottom edge. */
.tex--rings::before {
  inset: -40% -12% -20%;
  background-image: repeating-radial-gradient(circle at 50% 100%,
    rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 68px);
  mask-image: linear-gradient(180deg, transparent, #000 55%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%);
}

/* 4. Shaft — plain white light entering from one corner. */
.tex--shaft::before {
  background:
    radial-gradient(58% 46% at 10% -8%, rgba(255, 255, 255, 0.13), transparent 72%),
    radial-gradient(46% 40% at 92% 108%, rgba(255, 255, 255, 0.07), transparent 72%);
}

/* 5. Grain — a soft vignette over fine noise. */
.tex--grain::before {
  background:
    radial-gradient(100% 70% at 50% 0%, rgba(255, 255, 255, 0.08), transparent 68%);
}

.tex--grain::after {
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* A base lift so pure black never looks completely dead. */
.tex--mesh, .tex--rule, .tex--rings, .tex--shaft, .tex--grain {
  background-image: linear-gradient(180deg, #0c0f18 0%, var(--black) 58%);
}

/* ── Language switcher ────────────────────────────────────────────────── */

.lang__btn { gap: 0.4rem; padding-inline: 0.6rem; }
.lang__flag { width: 20px; height: 14px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(5, 6, 10, 0.12); }
.lang__code { font-family: var(--font-display); font-weight: 600; font-size: var(--t-micro); letter-spacing: 0.04em; }
.nav__panel--lang { width: 13rem; grid-template-columns: 1fr; left: auto; right: 0; }
.lang__flagwrap { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--off); }
.lang__opt[aria-current="true"] { background: var(--blue-tint); }
.lang__opt[aria-current="true"] .nav__item-title { color: var(--blue-deep); }

/* ── Motion ────────────────────────────────────────────────────────────── */

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

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ticker__track, .orb, .float, .scanline, .intro__scroll-dot,
  .hint__hand, .hint__chevrons span,
  .art-panels__card, .art-browser__load, .art-browser__line, .art-browser__tile,
  .art-phone__row, .art-phone__ring, .art-brand__aa, .art-brand__chip,
  .art-reel__row, .art-rail__fill, .art-rail__node, .art-merge__half,
  .art-stack__card, .art-send__pulse, .art-send__icon, .art-doc__sheet,
  .art-doc__lock, .art-404, .art-code__row, .art-code__caret,
  .art-poster__sheet, .art-screens__panel--ui, .art-screens__cursor,
  .art-chart__bar, .art-net__ring, .art-net__node { animation: none !important; }
  .intro__seed, .intro__shine { display: none; }
  .btn:hover, .card:hover, .step:hover, .work:hover, .next__card:hover { transform: none; }
}

/* ── Breakpoints ───────────────────────────────────────────────────────── */

@media (min-width: 36rem) {
  .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carousel__slide { flex-basis: 58%; }
}

@media (min-width: 48rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product { grid-template-columns: 0.95fr 1.05fr; }
  .signs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .header__cta { display: inline-flex; }
  .next--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .carousel__slide { flex-basis: 42%; }
}

@media (min-width: 62rem) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: 1.1fr 1.5fr; }
  .contact-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--s-8); align-items: start; }
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; }
  /* minmax(0,...) so a wide max-content child, the work reel, cannot
     blow the column out and squeeze the heading. */
  .opener__inner { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: var(--s-8); }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
  .split--flip .split__media { order: -1; }
  .carousel__slide { flex-basis: 38%; }

  .nav { display: flex; }
  .burger { display: none; }
  .drawer[data-open="true"] { display: none; }
}

/* ── Team: opener artwork ────────────────────────────────────────────────
   Four portrait cards dealing themselves out of a stack, forever. Ambient,
   trigger-free, like the rest of the openers. */

.art-crew {
  position: relative;
  width: min(100%, 26rem);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

.art-crew__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48%;
  aspect-ratio: 5 / 6;
  margin: -30% 0 0 -24%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6%;
  padding: 8%;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--black-3), var(--black));
  border: 1px solid var(--line-dark-2);
  box-shadow: var(--sh-lg);
  animation: crew-deal 9s var(--ease-out) infinite;
}

.art-crew__card i {
  display: block;
  width: 34%;
  aspect-ratio: 1 / 1;
  margin-bottom: auto;
  border-radius: var(--r-pill);
  background: linear-gradient(140deg, var(--blue-hot), var(--blue-deep));
  box-shadow: var(--sh-blue);
}

.art-crew__card b {
  display: block;
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.24);
}

.art-crew__card b:last-child { width: 58%; background: var(--blue); }

.art-crew__card--1 { animation-delay: 0s; }
.art-crew__card--2 { animation-delay: -2.25s; }
.art-crew__card--3 { animation-delay: -4.5s; }
.art-crew__card--4 { animation-delay: -6.75s; }

@keyframes crew-deal {
  0%   { transform: translate3d(0, 46%, 0) rotate(9deg) scale(0.86); opacity: 0; z-index: 1; }
  12%  { opacity: 1; }
  30%  { transform: translate3d(0, 8%, 0) rotate(3deg) scale(0.94); z-index: 2; }
  55%  { transform: translate3d(0, -6%, 0) rotate(-2deg) scale(1); z-index: 4; }
  80%  { transform: translate3d(0, -22%, 0) rotate(-7deg) scale(0.94); opacity: 1; z-index: 3; }
  100% { transform: translate3d(0, -34%, 0) rotate(-11deg) scale(0.88); opacity: 0; z-index: 1; }
}

/* ── About: the crew rail ────────────────────────────────────────────────
   A genuine scroll container. One member fills the frame and the top of the
   next portrait shows underneath, so it reads as a stack rather than a grid.
   With scripts blocked you scroll or keyboard through it exactly the same;
   the arrows and pips below only save you the gesture. */

.crew { position: relative; margin-top: var(--s-7); }

.crew__stage {
  --crew-h: 30rem;
  --crew-peek: 6.5rem;
  position: relative;
  max-height: calc(var(--crew-h) + var(--crew-peek));
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  border-radius: var(--r-lg);
}

.crew__stage::-webkit-scrollbar { width: 0; height: 0; }
.crew__stage:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 6px; }

.crew__member {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  gap: var(--s-6);
  align-content: start;
  min-height: var(--crew-h);
  padding-bottom: var(--s-6);
}

.crew__portrait {
  position: relative;
  overflow: hidden;
  height: var(--crew-h);
  background: var(--black-3);
  border: 1px solid var(--line-dark-2);
  box-shadow: var(--sh-lg);
}

.crew__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.crew__body { align-self: center; }

.crew__hello {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  color: var(--blue-bright);
}

.crew__name { font-size: var(--t-h2); color: #fff; margin-top: var(--s-1); }
.crew__text { margin-top: var(--s-4); font-size: var(--t-small); color: var(--on-dark-2); }
.crew__chips { margin-top: var(--s-5); }
.crew__actions { margin-top: var(--s-5); }
.crew__foot { margin-top: var(--s-6); justify-content: center; }

/* The bottom of the frame fades, so the peeking portrait reads as "more
   below" rather than as a second, half-broken card. */
.crew__frame { position: relative; }

.crew__frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7rem;
  background: linear-gradient(to top, var(--black) 22%, rgba(5, 6, 10, 0.82) 58%, transparent);
  pointer-events: none;
}

.crew__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

.crew__arrow {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-dark-2);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  cursor: pointer;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}

.crew__arrow svg { width: 22px; height: 22px; }
.crew__arrow:hover { background: var(--blue); border-color: var(--blue); box-shadow: var(--sh-blue); }
.crew__arrow[data-crew-prev]:hover { transform: translateY(-3px); }
.crew__arrow[data-crew-next]:hover { transform: translateY(3px); }
.crew__arrow[disabled] { opacity: 0.35; cursor: default; transform: none; background: none; }
.crew__arrow[disabled]:hover { background: none; border-color: var(--line-dark-2); box-shadow: none; }

.crew__pips { display: flex; gap: 0.5rem; }

.crew__pip {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--on-dark-3);
  cursor: pointer;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.crew__pip:hover { background: var(--blue-bright); }
.crew__pip[aria-current="true"] { background: var(--blue); transform: scale(1.5); }

@media (min-width: 60rem) {
  .crew__member { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: var(--s-7); }
}

/* On a phone a nested scroller fights the page, so the stack simply becomes a
   list. Everything is still there, in the same order, and the arrows step out
   of the way rather than lying about what they do. */
@media (max-width: 59.99rem) {
  .crew__stage {
    max-height: none;
    overflow: visible;
    scroll-snap-type: none;
  }
  .crew__stage { --crew-h: 22rem; }
  .crew__member { padding-bottom: var(--s-8); }
  .crew__controls, .crew__frame::after { display: none; }
}

/* ── Team page: one section per person ───────────────────────────────── */

.member__portrait {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 6;
  max-height: 34rem;
  background: var(--black-3);
  border: 1px solid var(--edge-2, var(--line-light));
  box-shadow: var(--sh-lg);
}

.member__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}

.member__hello {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  color: var(--blue);
}

.band--dark .member__hello { color: var(--blue-bright); }

/* The name follows the greeting directly, so it drops the usual gap. */
.member__hello + .title { margin-top: var(--s-1); }

.member__craft {
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  color: var(--blue);
}

.band--dark .member__craft { color: var(--blue-bright); }
.member__ticks { margin-top: var(--s-6); }
.member__actions { margin-top: var(--s-6); }

@media (min-width: 60rem) {
  .split--flip .member__portrait { order: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .art-crew__card,
  .art-crew__card { animation: none; }
  .art-crew__card--1 { transform: translate3d(0, -6%, 0) rotate(-2deg); }
  .art-crew__card--2 { transform: translate3d(0, 8%, 0) rotate(3deg); opacity: .6; }
  .art-crew__card--3 { transform: translate3d(0, -20%, 0) rotate(-7deg); opacity: .4; }
  .art-crew__card--4 { transform: translate3d(0, 22%, 0) rotate(8deg); opacity: .25; }
}

/* ── SEO opener: results climbing, with an AI answer above them ──────────
   The rows swap places on a loop, so the page is always mid-climb. Ambient,
   nothing triggers it. */

.art-rank {
  display: grid;
  gap: var(--s-4);
  width: min(100%, 27rem);
  margin-inline: auto;
}

.art-rank__ai {
  display: grid;
  gap: 0.55rem;
  padding: var(--s-5);
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 6px;
  background: linear-gradient(150deg, var(--blue), var(--blue-deep));
  box-shadow: var(--sh-blue-lg);
}

.art-rank__spark {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 0.2rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.art-rank__spark svg { width: 18px; height: 18px; }

.art-rank__ai .art-rank__line {
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.55);
  transform-origin: left;
  animation: rank-type 3.4s var(--ease) infinite;
}

.art-rank__ai .art-rank__line:last-child {
  width: 62%;
  animation-delay: 0.5s;
}

@keyframes rank-type {
  0%, 8%   { transform: scaleX(0.05); opacity: 0.5; }
  40%, 78% { transform: scaleX(1); opacity: 1; }
  100%     { transform: scaleX(1); opacity: 0.5; }
}

.art-rank__list { display: grid; gap: 0.6rem; }

.art-rank__row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0.85rem var(--s-4);
  border-radius: var(--r-md);
  background: var(--card, #fff);
  border: 1px solid var(--edge, var(--line-light));
  box-shadow: var(--sh-sm);
  animation: rank-climb 7s var(--ease-out) infinite;
}

.art-rank__row i {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--r-sm);
  background: var(--off-2);
  color: var(--on-light-2);
  font: 600 var(--t-micro) / 1 var(--font-display);
  font-style: normal;
}

.art-rank__row b {
  height: 8px;
  flex: 1;
  border-radius: var(--r-pill);
  background: var(--off-2);
}

/* The highlight travels up the list, bottom row to top, and rests there:
   a climb without any of the rows actually moving house. */
.art-rank__row--4 { animation-delay: 0s; }
.art-rank__row--3 { animation-delay: 0.4s; }
.art-rank__row--2 { animation-delay: 0.8s; }
.art-rank__row--1 { animation-delay: 1.2s; }

@keyframes rank-climb {
  0%, 100% { transform: translate3d(0, 0, 0); }
  14%      { transform: translate3d(4%, 0, 0);
             border-color: var(--blue);
             box-shadow: var(--sh-blue); }
  34%      { transform: translate3d(0, 0, 0); }
}

/* Top spot holds the blue a beat longer, so the climb has somewhere to land. */
.art-rank__row--1 { animation-name: rank-win; }

@keyframes rank-win {
  0%       { transform: translate3d(0, 0, 0); }
  10%      { transform: translate3d(5%, 0, 0) scale(1.02);
             border-color: var(--blue); box-shadow: var(--sh-blue); }
  62%      { transform: translate3d(0, 0, 0) scale(1);
             border-color: var(--blue); box-shadow: var(--sh-blue); }
  100%     { transform: translate3d(0, 0, 0) scale(1); }
}

.art-rank__row--1 i { background: var(--blue); color: #fff; }

/* ── AI opener: signal passing through three layers ──────────────────── */

.art-model {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  align-items: center;
  gap: var(--s-6);
  width: min(100%, 27rem);
  padding: var(--s-6) var(--s-5);
  margin-inline: auto;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--black-3), var(--black));
  border: 1px solid var(--line-dark-2);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}

/* The pulse that sweeps left to right, the way a value moves through. */
.art-model__wave {
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(5, 93, 255, 0.3), transparent);
  animation: model-pulse 3.6s var(--ease) infinite;
  pointer-events: none;
}

@keyframes model-pulse {
  0%   { transform: translate3d(-100%, 0, 0); }
  100% { transform: translate3d(260%, 0, 0); }
}

.art-model__layer {
  position: relative;
  display: grid;
  gap: var(--s-4);
  justify-items: center;
}

.art-model__layer span {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--r-pill);
  background: var(--blue-bright);
  box-shadow: 0 0 0 6px rgba(5, 93, 255, 0.1);
  animation: model-fire 3.6s var(--ease) infinite;
}

.art-model__layer:nth-child(2) span { animation-delay: 0.25s; }
.art-model__layer--mid span { animation-delay: 0.55s; background: var(--blue); }
.art-model__layer:nth-child(4) span { animation-delay: 0.85s; }

/* The edges between layers, drawn as a faint grid behind the nodes. */
.art-model__layer::before {
  content: "";
  position: absolute;
  inset: 12% -52% 12% 58%;
  background:
    repeating-linear-gradient(22deg, rgba(127, 168, 255, 0.16) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-22deg, rgba(127, 168, 255, 0.16) 0 1px, transparent 1px 26px);
  pointer-events: none;
}

.art-model__layer:last-of-type::before { display: none; }

@keyframes model-fire {
  0%, 70%, 100% { opacity: 0.35; transform: scale(0.85); }
  22%           { opacity: 1; transform: scale(1.12); }
}

.art-model__out {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--r-pill);
  background: var(--blue);
  color: #fff;
  box-shadow: var(--sh-blue);
  animation: model-out 3.6s var(--ease) infinite;
}

.art-model__out svg { width: 20px; height: 20px; }

@keyframes model-out {
  0%, 60%, 100% { transform: scale(0.9); opacity: 0.5; }
  80%           { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .art-rank__row,
  .art-rank__ai .art-rank__line,
  .art-model__wave,
  .art-model__layer span,
  .art-model__out { animation: none; }
  .art-rank__row--1 { border-color: var(--blue); box-shadow: var(--sh-blue); }
  .art-model__wave { opacity: 0; }
  .art-model__out { opacity: 1; transform: none; }
}

/* ── Join opener: a team going past, a place held open ───────────────────
   The strip slides for ever and is masked at both ends, so it reads as "the
   team" without ever resolving into a number you could count. */

.art-join {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 27rem);
  aspect-ratio: 3 / 2;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--r-xl);
}

.art-join__strip {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  gap: var(--s-4);
  transform: translateY(-50%);
  animation: join-drift 24s linear infinite;
  /* Fades at both edges, so faces arrive and leave rather than popping. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.art-join__strip span {
  display: grid;
  place-items: center;
  flex: none;
  width: 5.5rem;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--black-3), var(--black));
  box-shadow: var(--sh-md);
}

.art-join__strip span::before {
  content: "";
  width: 46%;
  aspect-ratio: 1 / 1.15;
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(150deg, var(--blue-bright), var(--blue-deep));
  opacity: 0.9;
}

/* Half the row is a copy of the other half, so the loop has no seam. */
@keyframes join-drift {
  0%   { transform: translate3d(0, -50%, 0); }
  100% { transform: translate3d(-50%, -50%, 0); }
}

.art-join__open {
  position: relative;
  display: grid;
  place-items: center;
  width: 7.5rem;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-xl);
  border: 2px dashed var(--blue);
  background: var(--white);
  color: var(--blue);
  box-shadow: var(--sh-lg);
  animation: join-open 3.2s var(--ease) infinite;
}

.art-join__open svg { width: 34%; height: 34%; }

@keyframes join-open {
  0%, 100% { border-color: var(--blue-wash); transform: scale(0.97); }
  50%      { border-color: var(--blue); transform: scale(1); }
}

/* The crafts row sits under a centred heading, and flex needs telling. */
.chips--center { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .art-join__strip { animation: none; }
  .art-join__open { animation: none; border-color: var(--blue); }
}