/* Ripple Effect — Ink Basin
   One face (Prompt), still water ground, Ripple-blue ink, hairline rules. */

@font-face { font-family: "Prompt"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/prompt-300.woff2") format("woff2"); }
@font-face { font-family: "Prompt"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/prompt-400.woff2") format("woff2"); }
@font-face { font-family: "Prompt"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/prompt-500.woff2") format("woff2"); }

:root {
  --ground: #f4f7f9;
  --water: #ffffff;
  --mist: #e3ebf0;
  --hair: #c9d5de;
  --hair-strong: #9fb2c2;
  --carbon: #0e1a2b;
  --text-2: #3e4f63;
  --ink: #0a4fa3;
  --ink-deep: #0a2f66;
  --ink-night: #071f45;
  --dilute: #6b8bb3;
  --cyan: #19a9cf;
  --cyan-soft: #a9dcec;
  --net: #00a98a;
  --net-deep: #00705c;
  --net-mist: #e2f3ee;
  --blue-mist: #e4eef7;
  --danger: #b4232f;
  --danger-on-ink: #ffb3ba;

  --font: "Prompt", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --wrap: 78rem;
  --section-y: clamp(5rem, 11vw, 9.5rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --masthead-h: 4.75rem;
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05  0 0 0 0 .12  0 0 0 0 .2  0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--masthead-h); scrollbar-color: var(--dilute) var(--mist); }
body {
  margin: 0;
  background-color: var(--ground);
  background-image: var(--paper);
  color: var(--carbon);
  font-family: var(--font);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  caret-color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--cyan-soft); color: var(--ink-night); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.contact :focus-visible { outline-color: var(--cyan); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--mist); }
::-webkit-scrollbar-thumb { background: var(--dilute); border: 3px solid var(--mist); border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; }

.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink-deep); color: #fff; padding: .6rem 1rem; text-decoration: none; }
.skip:focus { top: 1rem; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* ---------- Buttons ---------- */
.button {
  --b-bg: transparent; --b-fg: var(--carbon); --b-line: var(--carbon);
  display: inline-flex; align-items: center; justify-content: center; gap: .9rem;
  min-height: 3.25rem; padding: .85rem 1.5rem;
  font: 500 .8125rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  color: var(--b-fg); background: var(--b-bg);
  border: 1px solid var(--b-line); border-radius: 2px; cursor: pointer;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.button .icon { transition: transform .45s var(--ease-out); }
.button:hover .icon { transform: translateX(4px); }
.button--ink { --b-bg: var(--ink-deep); --b-fg: #fff; --b-line: var(--ink-deep);
  background-image: linear-gradient(rgb(10 47 102 / .5), rgb(10 47 102 / .5)), url("../img/marble-night.webp");
  background-size: auto, 56rem auto; background-position: 0 0, 32% 46%;
  transition: background-position 1.2s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.button--ink:hover { --b-line: var(--ink); background-position: 0 0, 44% 40%; box-shadow: 0 10px 28px -12px rgb(10 47 102 / .55); }
.button--line:hover { --b-bg: var(--carbon); --b-fg: var(--ground); }
.button[disabled] { opacity: .6; cursor: progress; }

/* ---------- Masthead ---------- */
.masthead {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--masthead-h);
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.masthead.is-scrolled { background: rgb(244 247 249 / .94); box-shadow: 0 1px 0 var(--hair); backdrop-filter: saturate(1.2) blur(10px); }
.masthead__inner { height: 100%; width: min(100% - 2 * var(--gutter), 90rem); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.masthead__brand img { width: clamp(8.5rem, 12vw, 10.5rem); }
.masthead__nav ul { display: flex; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
.masthead__nav a {
  position: relative; display: block; padding: .5rem 0;
  font-weight: 400; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--carbon);
}
.masthead__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
.masthead__nav a:hover::after, .masthead__nav a[aria-current="true"]::after { transform: scaleX(1); }
.masthead__nav a[aria-current="true"] { color: var(--ink); }
.masthead__toggle { display: none; }

/* ---------- Hero: the basin ---------- */
.hero { position: relative; min-height: max(40rem, 100svh); display: grid; grid-template-rows: 1fr auto; overflow: hidden; background: var(--water); isolation: isolate; }
.hero__basin {
  position: absolute; inset: 0; z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 22%, #000 52%), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0 22%, #000 52%), linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 97%);
  mask-composite: intersect;
}
.hero__canvas, .hero__still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__canvas { cursor: crosshair; touch-action: pan-y; }
.hero__still { object-fit: cover; object-position: 78% 50%; }
.hero.is-live .hero__still { display: none; }
.hero__basin { pointer-events: none; }
.hero.is-live .hero__basin { pointer-events: auto; }

.hero__margin {
  align-self: center;
  width: min(100% - 2 * var(--gutter), 90rem); margin-inline: auto;
  padding-top: calc(var(--masthead-h) + 2rem); padding-bottom: 3rem;
  pointer-events: none;
}
.hero__margin > * { pointer-events: auto; max-width: 36rem; }
.hero__title {
  font-weight: 300; font-size: clamp(2.75rem, 5.6vw, 5.5rem); line-height: 1.02; letter-spacing: -0.025em;
  color: var(--carbon); text-wrap: balance; max-width: 12.5ch !important;
}
.hero__lede { margin-top: 1.75rem; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--text-2); max-width: 31rem !important; }
.hero__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: .875rem; }

.hero__rail {
  width: min(100% - 2 * var(--gutter), 90rem); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  border-top: 1px solid var(--hair); padding: 1.1rem 0 1.4rem; pointer-events: none;
}
.hero__readout { display: flex; flex-wrap: wrap; gap: .25rem 0; font-weight: 400; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); font-variant-numeric: tabular-nums; }
.hero__readout li + li::before { content: ""; display: inline-block; width: 1.75rem; height: 1px; margin: 0 .9rem; vertical-align: middle; background: var(--hair-strong); }
.hero__readout li:nth-child(-n+2) { color: var(--ink); }
.hero__hint { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--text-2); white-space: nowrap; }
.hero__hint .icon { color: var(--cyan); }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); }
.section__title { font-weight: 300; font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }

/* Who we are: timeline as widening rings */
.about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(2rem, 6vw, 6rem); }
.about__head { position: sticky; top: calc(var(--masthead-h) + 2rem); align-self: start; }
.timeline { position: relative; display: grid; gap: clamp(3rem, 6vw, 4.5rem); padding-left: 4.5rem; }
.timeline::before { content: ""; position: absolute; left: 1.4rem; top: 1.4rem; bottom: .5rem; width: 1px; background: linear-gradient(var(--hair-strong), var(--hair) 80%, transparent); }
.timeline__item { position: relative; max-width: 40rem; }
.timeline__mark { position: absolute; left: -4.5rem; top: .1rem; width: 2.8rem; height: 2.8rem; display: grid; place-items: center; }
.timeline__mark i { position: absolute; border-radius: 50%; border: 1px solid var(--ink); }
.timeline__mark i:nth-child(1) { width: .5rem; height: .5rem; background: var(--ink); }
.timeline__mark i:nth-child(2) { width: 1.5rem; height: 1.5rem; border-color: var(--dilute); }
.timeline__mark i:nth-child(3) { width: 2.8rem; height: 2.8rem; border-color: var(--cyan-soft); background: var(--ground); z-index: -1; }
.timeline__item--quiet .timeline__mark i:nth-child(1) { background: var(--cyan); border-color: var(--cyan); }
.timeline__year { font-weight: 300; font-size: clamp(3rem, 6vw, 4.75rem); line-height: .95; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.timeline__title { margin-top: .9rem; font-weight: 500; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--carbon); }
.timeline__item--quiet .timeline__title { margin-top: .45rem; font-weight: 300; font-size: clamp(1.75rem, 2.8vw, 2.25rem); letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.timeline__text { margin-top: .9rem; max-width: 65ch; color: var(--text-2); }
.timeline__text:first-of-type::first-line { color: var(--carbon); }

/* Who we serve: two dyes, one basin */
.about { padding-bottom: calc(var(--section-y) * .55); }
.serve { padding-top: calc(var(--section-y) * .55); padding-bottom: 0; }
.trust { padding-top: calc(var(--section-y) * .5); }
.serve__split { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); }
.unit { position: relative; overflow: hidden; padding: clamp(3rem, 6vw, 5.5rem) var(--gutter); }
.unit--blue { background: var(--blue-mist); }
.unit--green { background: var(--net-mist); border-left: 1px solid var(--hair); }
.unit::before {
  content: ""; position: absolute; width: 46rem; aspect-ratio: 1; right: -18rem; bottom: -24rem; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 2.9rem, var(--ring) 2.9rem calc(2.9rem + 1px));
  opacity: .55; -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}
.unit--blue { --ring: var(--dilute); --accent: var(--ink); }
.unit--green { --ring: var(--net); --accent: var(--net-deep); }
.unit__inner { position: relative; max-width: 32rem; margin-left: auto; margin-right: 0; }
.unit--green .unit__inner { margin-left: 0; }
.unit__logo { height: clamp(3.25rem, 5vw, 4.25rem); width: auto; mix-blend-mode: multiply; }
.unit__name { margin-top: 2.5rem; font-weight: 300; font-size: clamp(1.75rem, 2.8vw, 2.375rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--accent); }
.unit__code { font-weight: 400; font-size: .5em; letter-spacing: .16em; vertical-align: .35em; color: var(--text-2); }
.unit__text { margin-top: 1.1rem; color: var(--carbon); max-width: 34rem; }
.unit__channels { margin-top: 2rem; border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.unit__channels li { display: flex; align-items: center; gap: .9rem; padding: .7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); font-size: .9375rem; }
.unit__channels li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; border: 1px solid var(--accent); flex: none; }

/* Seam: a band of combed ink between the two arms and the types of client's trust */
.seam {
  height: clamp(8rem, 15vw, 14rem);
  background: url("../img/marble-seam.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* What we do: Types of Clients' Trust. One round basin, one drop of Ripple ink per kind of trust, stirred together. */
.trust__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: start; }
.trust__aside { position: sticky; top: calc(var(--masthead-h) + 2rem); }
.trust__title { max-width: 11ch; }
.trust__basin {
  position: relative;
  width: min(100%, 30rem, calc(100svh - var(--masthead-h) - 15rem));
  min-width: 15rem;
  aspect-ratio: 1;
  margin: clamp(2rem, 3.5vw, 3rem) 0 0 .75rem;
  border-radius: 50%;
  background: var(--ground);
  box-shadow: 0 0 0 1px var(--hair);
  outline: 1px solid var(--hair);
  outline-offset: .75rem;
}
.trust__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 50%; opacity: 0; transition: opacity .9s var(--ease-out); cursor: crosshair; }
.trust__basin.is-live .trust__canvas { opacity: 1; }
/* Without WebGL2 the basin keeps its rings as a pattern. */
[data-trust].is-flat .trust__basin { background: repeating-radial-gradient(circle, transparent 0 1.6rem, var(--cyan-soft) 1.6rem calc(1.6rem + 1px)), var(--ground); }

.trust__list { border-top: 1px solid var(--hair-strong); }
.trust__item { position: relative; display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: 1.5rem; padding: 2.25rem 1rem 2.5rem 0; border-bottom: 1px solid var(--hair); outline-offset: -2px; transition: background-color .4s var(--ease-out); }
.trust__item:hover, .trust__item:focus-visible, .trust__item.is-on { background: linear-gradient(90deg, var(--blue-mist), transparent 85%); }
.trust__num { grid-row: span 2; font-weight: 300; font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: .95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; color: var(--hair-strong); transition: color .8s var(--ease-out); }
.trust__item.is-dropped .trust__num { color: var(--ink); }
.trust__name { font-weight: 400; font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; max-width: 28ch; text-wrap: balance; }
.trust__text { margin-top: .7rem; max-width: 60ch; color: var(--text-2); }

/* The Ripplers */
.ripplers { background: var(--mist); }
.ripplers__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem clamp(2rem, 6vw, 6rem); align-items: center; }
.ripplers__intro { font-weight: 300; font-size: clamp(1.375rem, 2.4vw, 2rem); line-height: 1.3; color: var(--ink); max-width: 26ch; }
.people { margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair-strong); }
.person { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.75rem; padding: 2.75rem 2rem 2.75rem 0; }
.person + .person { border-left: 1px solid var(--hair); padding-left: 2rem; }
.person__mark svg { width: 8.5rem; height: 8.5rem; overflow: visible; }
.person__mark .person__drip { height: auto; margin-top: 1.5rem; }
.person__mark img { width: 8.5rem; height: 8.5rem; object-fit: cover; border-radius: 50%; }
/* Rippler mark: a drop seen from the side. It falls, splashes, and each decade spreads as a ring on the surface.
   The resting state (drop held above settled rings) is what reduced motion shows. */
.person__surface { stroke: var(--hair-strong); stroke-width: .75; }
.person__ring { --o: calc(1 - (var(--k) - 1) * .2); fill: none; stroke: var(--ink); stroke-width: 1.3; opacity: var(--o); transform-box: fill-box; transform-origin: center; }
.person__ring:nth-of-type(odd) { stroke: var(--cyan); }
.person__core { fill: var(--ink); transform-box: fill-box; transform-origin: center; }
.person__drop { fill: var(--ink); transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(-30px); }
.person__glint { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-opacity: .8; }
.person__jet, .person__spray { fill: var(--ink); opacity: 0; transform-box: fill-box; transform-origin: center; }
.person__spray { fill: var(--cyan); }
.person__drop, .person__ring, .person__core, .person__jet, .person__spray { animation: 4.8s linear var(--delay, 0s) infinite both; }
.person__drop { animation-name: drip-fall; }
.person__jet { animation-name: drip-jet; }
.person__spray { animation-name: drip-spray; }
.person__core { animation-name: drip-core; }
.person__ring { animation-name: drip-ring; animation-delay: calc(var(--delay, 0s) + (var(--k) - 1) * .24s); }
@keyframes drip-fall {
  0% { opacity: 0; transform: translateY(-62px) scale(.8, .9); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  4% { opacity: 1; }
  17% { opacity: 1; transform: translateY(-2px) scale(.85, 1.2); animation-timing-function: ease-out; }
  19%, 100% { opacity: 0; transform: translateY(0) scale(1.6, .2); }
}
@keyframes drip-jet {
  0%, 18% { opacity: 0; transform: translateY(0) scale(.6); }
  19% { opacity: 1; transform: translateY(0) scale(.8, 1.2); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  26% { transform: translateY(-26px) scale(1); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  33% { opacity: 1; transform: translateY(0) scale(.9, 1.1); }
  34%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes drip-spray {
  0%, 18% { opacity: 0; transform: translate(0, 0); }
  19% { opacity: 1; animation-timing-function: ease-out; }
  24% { transform: translate(calc(var(--dx) * .7px), -15px); animation-timing-function: ease-in; }
  30% { opacity: .9; transform: translate(calc(var(--dx) * 1px), 2px); }
  31%, 100% { opacity: 0; transform: translate(calc(var(--dx) * 1px), 2px); }
}
@keyframes drip-core {
  0%, 18% { transform: scale(1); }
  20% { transform: scale(2, 1.6); animation-timing-function: var(--ease-out); }
  34%, 100% { transform: scale(1); }
}
@keyframes drip-ring {
  0%, 18% { opacity: 0; transform: scale(.06); }
  19% { opacity: 1; animation-timing-function: var(--ease-out); }
  44% { opacity: var(--o); transform: scale(1); }
  86% { opacity: var(--o); transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(1.05); }
}
.person__name { font-weight: 300; font-size: clamp(1.625rem, 2.6vw, 2.125rem); line-height: 1.15; letter-spacing: -0.015em; }
.person__role { margin-top: .5rem; font-weight: 500; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.person__role span { color: var(--text-2); font-variant-numeric: tabular-nums; }
.person__bio { margin-top: 1rem; color: var(--text-2); max-width: 46ch; }
.people__legend { margin-top: 1.5rem; display: flex; align-items: center; gap: .75rem; font-size: .8125rem; color: var(--text-2); }
.people__legend-ring { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--ink); box-shadow: 0 0 0 4px var(--mist), 0 0 0 5px var(--cyan); }

/* Contact: the field turns to deep ink */
.contact { background: var(--ink-deep); color: #eaf2fa; position: relative; overflow: hidden; }
.contact::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/marble-night.webp") center / cover no-repeat;
}
.contact::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(10 47 102 / .9) 0%, rgb(10 47 102 / .78) 34%, rgb(10 47 102 / .25) 62%, rgb(10 47 102 / .1) 100%);
}
.contact > .wrap { position: relative; z-index: 1; }
.form { background: rgb(7 31 69 / .82); border: 1px solid rgb(255 255 255 / .12); border-radius: 2px; padding: clamp(1.5rem, 3vw, 2.75rem); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .55); }
.contact__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem clamp(2rem, 6vw, 6rem); }
.contact__title { font-weight: 300; font-size: clamp(2.25rem, 4.2vw, 3.5rem); line-height: 1.08; letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.contact__quote { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .22); font-size: 1.0625rem; color: #b9d0e8; max-width: 34ch; }
.contact__card { margin-top: 2.5rem; font-style: normal; display: grid; gap: .9rem; }
.contact__company { font-weight: 500; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.contact__line { display: flex; align-items: flex-start; gap: .85rem; color: #dbe7f3; font-variant-numeric: tabular-nums; }
.contact__line .icon { margin-top: .2rem; color: var(--cyan); }
.contact__line a { color: #fff; text-decoration-color: rgb(169 220 236 / .5); }
.contact__line a:hover { text-decoration-color: var(--cyan); }

.form { display: grid; gap: 1.75rem; align-content: start; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: start; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: grid; gap: .5rem; align-content: start; min-width: 0; border: 0; padding: 0; margin: 0; }
.field label, .field legend { font-weight: 400; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: #cfe0f0; padding: 0; }
.field__opt { text-transform: none; letter-spacing: 0; color: #9ab8d6; font-weight: 300; margin-left: .35rem; }
.field input, .field textarea {
  width: 100%; font: 300 1.0625rem/1.5 var(--font); color: #fff; caret-color: var(--cyan);
  background: rgb(255 255 255 / .06); border: 0; border-bottom: 1px solid rgb(255 255 255 / .38); border-radius: 2px 2px 0 0;
  padding: .8rem .9rem; transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input:hover, .field textarea:hover { background: rgb(255 255 255 / .09); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--cyan); background: rgb(255 255 255 / .11); box-shadow: 0 1px 0 var(--cyan); }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: var(--danger-on-ink); box-shadow: 0 1px 0 var(--danger-on-ink); }
.field__error { font-size: .875rem; color: var(--danger-on-ink); }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .25rem; }
.field .chip { position: relative; cursor: pointer; font-weight: 300; font-size: 1rem; letter-spacing: 0; text-transform: none; color: inherit; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .55rem 1.05rem; border: 1px solid rgb(255 255 255 / .32); border-radius: 2px; font-size: .9375rem; color: #e3eef8; transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out); }
.chip span::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; border: 1px solid currentColor; transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.chip:hover span { border-color: var(--cyan-soft); }
.chip input:checked + span { background: #fff; border-color: #fff; color: var(--ink-deep); }
.chip input:checked + span::before { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--cyan); }
.chip input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 3px; }
.form__foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }
.form__drop { position: absolute; left: 7rem; top: 1.625rem; width: 0; height: 0; pointer-events: none; z-index: 0; }
.form__foot > .button, .form__foot > .form__status { position: relative; z-index: 1; }
.form__drop img { position: absolute; left: -13rem; top: -13rem; width: 26rem; height: 26rem; max-width: none; opacity: 0; transform: scale(.04); }
.form__drop.is-falling img { animation: ink-drop 2.8s var(--ease-out) forwards; }
@keyframes ink-drop { 0% { opacity: 0; transform: scale(.04); } 10% { opacity: 1; } 55% { opacity: .9; } 100% { opacity: 0; transform: scale(1); } }
.contact .button--ink { --b-bg: #fff; --b-fg: var(--ink-deep); --b-line: #fff; background-image: none; }
.contact .button--ink:hover { --b-bg: var(--cyan-soft); --b-line: var(--cyan-soft); box-shadow: 0 12px 32px -14px rgb(0 0 0 / .6); }
.button--wide { min-width: 14rem; }
.form__status { font-size: .9375rem; color: #cfe0f0; flex: 1 1 16rem; }
.form__status.is-ok { color: #fff; }
.form__status.is-ok::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .6rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgb(25 169 207 / .25); vertical-align: .05em; }
.form__status.is-error { color: var(--danger-on-ink); }

/* Footer */
.footer { padding: 3.5rem 0 2.5rem; background: var(--ground); border-top: 1px solid var(--hair); }
.footer__grid { display: grid; grid-template-columns: auto 1fr; gap: 2rem 3rem; align-items: center; }
.footer__brands { display: flex; align-items: center; gap: 2.5rem; }
.footer__brands img { height: 2.6rem; width: auto; }
.footer__brands img + img { height: 2.1rem; padding-left: 2.5rem; border-left: 1px solid var(--hair); box-sizing: content-box; }
.footer__nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1.75rem; }
.footer__nav a { font-weight: 400; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--text-2); }
.footer__nav a:hover { color: var(--ink); }
.footer__copy { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--hair); font-size: .8125rem; color: var(--text-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .about__grid, .trust__grid, .ripplers__head, .contact__grid { grid-template-columns: 1fr; }
  .about__head, .trust__aside { position: static; }
  .trust__basin { width: min(100% - 1.5rem, 26rem); }
  .people { grid-template-columns: 1fr; }
  .person + .person { border-left: 0; border-top: 1px solid var(--hair); padding-left: 0; }
}

@media (max-width: 860px) {
  :root { --masthead-h: 4rem; }
  .masthead { background: rgb(244 247 249 / .94); box-shadow: 0 1px 0 var(--hair); backdrop-filter: blur(10px); }
  .masthead__toggle {
    display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .4rem .2rem .4rem .6rem;
    background: none; border: 0; color: var(--carbon); font: 400 .8125rem var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  }
  .masthead__nav { position: fixed; inset: var(--masthead-h) 0 auto; background: var(--ground); box-shadow: 0 1px 0 var(--hair), 0 24px 40px -24px rgb(14 26 43 / .25); padding: .5rem var(--gutter) 1.5rem; display: none; }
  .masthead.is-open .masthead__nav { display: block; animation: nav-in .4s var(--ease-out); }
  .masthead__nav ul { flex-direction: column; gap: 0; }
  .masthead__nav a { padding: 1rem 0; font-size: .9375rem; border-bottom: 1px solid var(--hair); }
  .masthead__nav a::after { display: none; }

  .hero { min-height: auto; grid-template-rows: auto auto; }
  .hero__basin { position: relative; inset: auto; height: 58svh; min-height: 22rem; grid-row: 1; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .hero__margin { grid-row: 2; padding-top: 0; margin-top: -4rem; position: relative; }
  .hero__rail { grid-row: 3; flex-direction: column; align-items: flex-start; gap: .75rem; }
  /* dates on the first line, the four channels on the second */
  .hero__readout { display: grid; grid-template-columns: repeat(4, max-content) 1fr; gap: .45rem 1.1rem; }
  .hero__readout li:nth-child(1) { grid-column: 1 / span 2; }
  .hero__readout li:nth-child(2) { grid-column: 3 / -1; }
  .hero__readout li + li::before { display: none; }
  .hero__hint { position: absolute; top: calc(var(--masthead-h) + .75rem); left: var(--gutter); white-space: normal; }

  .serve__split { grid-template-columns: 1fr; }
  .unit--green { border-left: 0; border-top: 1px solid var(--hair); }
  .unit__inner { margin: 0; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__nav ul { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .timeline { padding-left: 3.5rem; }
  .timeline::before { left: 1rem; }
  .timeline__mark { left: -3.5rem; transform: scale(.8); transform-origin: left top; }
  .person { grid-template-columns: 1fr; gap: 1.25rem; }
  .person__mark svg { width: 6rem; height: 6rem; }
  .footer__brands { flex-wrap: wrap; gap: 1.5rem; }
  .footer__brands img + img { padding-left: 0; border-left: 0; }
  .hero__actions .button { flex: 1 1 100%; }
  .trust__item { grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1rem; padding-right: 0; }
}

@keyframes nav-in { from { opacity: 0; transform: translateY(-.5rem); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .person__mark svg * { animation: none !important; }
}