/* Homepage styles (home-redesign, 2026-10-15). privacy.html still uses
   styles.css; this sheet is the homepage's alone. */
/* Layout: still black ground with one quiet static glow; motion is spent
   only on scroll, to lead the eye from step to step; one idea per screen; the phone gets its own scroll story; services
   sit in a bento grid of small product illustrations. */
@font-face {
  font-family: "Anybody";
  src: url("/fonts/Anybody.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
:root {
  --ground: #000000;
  --surface: #0c0c0f;
  --raised: #14141a;
  --line: #26262e;
  --text: #f2f4f8;
  --dim: #a3abbb;
  --faint: #7d8494;
  --cyan: #00daea;
  --violet: #813df2;
  --magenta: #ee34be;
  --blue: #4aa9f2;
  --ink: #021016;
  --spectrum: linear-gradient(100deg, var(--cyan) 0%, var(--violet) 54%, var(--magenta) 100%);
  --display: "Anybody", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --body: "Avenir Next", "Avenir", ui-sans-serif, system-ui, "Helvetica Neue", sans-serif;
  --gut: clamp(1.25rem, 5vw, 4rem);
  --page: 1160px;
  --sec: clamp(6.5rem, 14vw, 9rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gut); }
.display {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 118%;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 1.04;
  text-wrap: balance;
  margin: 0;
}
.spectrum { color: var(--cyan); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .spectrum {
    background-image: var(--spectrum);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.cut { border-radius: 16px 4px 16px 4px; }
:where(a, button, input, textarea, summary):focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  padding-block: 1.1rem;
  background: rgba(0, 0, 0, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-mark { display: inline-flex; align-items: center; gap: 0.72rem; font-size: 1.1875rem; text-decoration: none; }
/* 0.699em is the outlined caps' height; the margin is the N's side bearing. */
.nav-mark-word img { display: block; width: auto; height: 0.699em; margin-left: 0.081em; }
.nav-mark-icon { width: 36px; height: 36px; flex: none; }
@media (max-width: 620px) { .nav-mark { font-size: 0.9375rem; } .nav-mark-icon { width: 28px; height: 28px; } }
@media (max-width: 359px) { .nav-mark-icon { display: none; } }
.nav-links { display: none; gap: 2rem; font-size: 0.875rem; color: var(--dim); }
.nav-links a { text-decoration: none; }
@media (hover: hover) { .nav-links a:hover { color: var(--text); } }
@media (min-width: 860px) { .nav-links { display: flex; } }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem; padding: 0 1.7rem;
  font-family: var(--body); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.btn-solid { background: var(--cyan); color: var(--ink); }
@media (hover: hover) { .btn-solid:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -12px var(--cyan); } }
.btn-ghost { color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
@media (hover: hover) { .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--cyan); } }
.nav .btn { min-height: 2.5rem; padding: 0 1.1rem; font-size: 0.75rem; white-space: nowrap; flex: none; }
@media (max-width: 420px) { .nav .btn { padding: 0 0.85rem; } }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(5rem, 16vw, 10rem) clamp(4rem, 10vw, 7rem);
  isolation: isolate;
}
.hero-in { display: grid; gap: 2rem; justify-items: start; }
.hero .eyebrow { color: var(--dim); }
.hero h1 { font-size: clamp(2.15rem, 7.6vw, 5.4rem); max-width: 15ch; }
/* One line tall and clipped, so the outgoing and incoming words only show
   inside the slot. */
.rotor { display: block; position: relative; height: 1.1em; overflow: hidden; }
.rotor span {
  background-image: var(--spectrum); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  position: absolute; left: 0; top: 0; white-space: nowrap;
  transition: transform .7s var(--ease), opacity .7s var(--ease), filter .7s var(--ease);
}
.rotor span.out { transform: translateY(-60%); opacity: 0; filter: blur(6px); }
.rotor span.wait { transform: translateY(60%); opacity: 0; filter: blur(6px); }
.hero-sub { margin: 0; max-width: 34ch; font-size: clamp(1.125rem, 2.3vw, 1.35rem); color: var(--dim); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.5rem; }
/* Phones: the button at its own width, and "See services" as a quiet
   underlined link on its own line below, both on the text's left edge.
   Desktop keeps the two buttons side by side. */
@media (max-width: 559px) {
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 1.75rem; }
  .hero-actions .btn-ghost {
    min-height: 0; padding: 0 0 4px; border-radius: 0;
    box-shadow: none; border-bottom: 1px solid var(--line);
  }
}

/* who it's for: big outlined words that drift sideways, speed up while the
   page scrolls, and fill in as they pass the middle of the screen */
.ticker {
  position: relative; overflow: hidden;
  /* draggable sideways; vertical swipes still scroll the page */
  touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none;
  padding-block: clamp(1.75rem, 5vw, 2.75rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* The CSS animation is the no-JS fallback; the script takes over the
   transform so it can react to scrolling. */
.ticker-track { display: flex; width: max-content; animation: tick 60s linear infinite; will-change: transform; }
.ticker-group { display: flex; align-items: center; }
.ticker span {
  display: inline-flex; align-items: center; gap: clamp(1.25rem, 3.5vw, 2.5rem);
  padding-right: clamp(1.25rem, 3.5vw, 2.5rem);
  font-family: var(--display); font-stretch: 118%; font-weight: 700;
  font-size: clamp(1.6rem, 5.5vw, 3.25rem); line-height: 1; letter-spacing: 0.01em;
  text-transform: uppercase; white-space: nowrap; color: var(--faint);
  transition: color .6s var(--ease), -webkit-text-stroke-color .6s var(--ease);
}
@supports (-webkit-text-stroke: 1px #fff) {
  /* The outline is drawn under a fill the colour of the page. The font's
     letters are built from overlapping pieces, and a bare outline showed
     the joins inside letters like R; the fill covers them. */
  .ticker span { color: var(--ground); -webkit-text-stroke: 2px rgba(242, 244, 248, .32); paint-order: stroke fill; }
  .ticker span.lit { color: var(--text); -webkit-text-stroke-color: transparent; }
}
.ticker span::after {
  content: ""; flex: none; width: 0.28em; height: 0.28em; border-radius: 2px;
  transform: rotate(45deg); background: var(--spectrum);
}
.ticker.dragging { cursor: grabbing; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.sec { padding-block: var(--sec); }
.sec-head { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); max-width: 42rem; }
.sec-title { font-size: clamp(1.8rem, 5.4vw, 3.4rem); }
.sec-lede { margin: 0; color: var(--dim); max-width: 40ch; }

/* reveal: elements below the fold rise in; everything is visible without JS */
/* Only the waiting state is styled, so a revealed element keeps any
   transform of its own (the service tiles zoom). */
.js-armed .rv:not(.in) { opacity: 0; transform: translateY(28px); }
.rv { transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* ---------- statement: words light up as you scroll ---------- */
/* A screen of its own, so it is never read alongside the next section. */
.statement-sec { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-block: clamp(5rem, 14vw, 10rem); }
.statement { margin: 0; max-width: 22ch; font-size: clamp(1.9rem, 6vw, 4rem); line-height: 1.12; }
.statement .w { transition: opacity .35s var(--ease), color .35s; }
.statement.armed .w { opacity: .16; }
.statement.armed .w.lit { opacity: 1; }
.statement .w.hot { color: var(--cyan); }

/* ---------- bento services ---------- */
.bento { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile.wide { grid-column: span 2; }
}
.tile {
  position: relative; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr; gap: 1.5rem;
  padding: 1.6rem; min-height: 320px;
  background: linear-gradient(180deg, var(--raised), var(--surface));
  border: 1px solid var(--line); border-radius: 22px;
  transition: opacity .9s var(--ease), transform .55s var(--ease), border-color .55s var(--ease);
}
/* No coloured glow. At rest each picture is muted; the active tile (hover on
   desktop, the one in the middle of the screen on a phone) zooms a touch,
   its picture comes into full colour, and its little animation plays. */
.tile .art { filter: saturate(.2) brightness(.78); transition: transform .7s var(--ease), filter .7s var(--ease); transform-origin: 50% 100%; }
.tile.on { transform: scale(1.02); }
/* The tile's border lights up in its own colour, drawn round the edge
   from the top when the tile becomes active and undrawn when it leaves. */
@property --sweep { syntax: "<number>"; inherits: false; initial-value: 0; }
.tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from 0deg, var(--hue) calc(var(--sweep) * 1%), transparent 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  --sweep: 0; transition: --sweep .45s var(--ease);
}
.tile.on::after { --sweep: 100; transition: --sweep 1s var(--ease); }
.tile.on .art { filter: none; transform: scale(1.04); }
.tile.play .browser { animation: rise .7s var(--ease) both; }
.tile.play .pin.you { animation: drop .75s cubic-bezier(.3, 1.6, .5, 1) both, ping 2.4s var(--ease) .75s infinite; }
.tile.play .listing { animation: rise .6s var(--ease) .3s both; }
.tile.play .bars i { animation: grow .9s var(--ease) both; }
.tile.play .bars i:nth-child(2) { animation-delay: .07s } .tile.play .bars i:nth-child(3) { animation-delay: .14s }
.tile.play .bars i:nth-child(4) { animation-delay: .21s } .tile.play .bars i:nth-child(5) { animation-delay: .28s }
.tile.play .bars i:nth-child(6) { animation-delay: .35s } .tile.play .bars i:nth-child(7) { animation-delay: .42s }
.tile.play .slot .typing-b { animation: vanish .2s linear 1.1s forwards; }
.tile.play .slot .reply { visibility: visible; animation: rise .5s var(--ease) 1.25s both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes grow { from { transform: scaleY(.06); } }
@keyframes drop { from { opacity: 0; transform: translateY(-28px) rotate(-45deg); } to { opacity: 1; transform: rotate(-45deg); } }
@keyframes vanish { to { opacity: 0; visibility: hidden; } }
.tile-copy { display: grid; gap: 0.4rem; align-content: start; position: relative; }
.tile h3 { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.02em; display: flex; justify-content: space-between; gap: 1rem; }
.tile p { margin: 0; color: var(--dim); max-width: 32ch; }
.art { position: relative; align-self: end; min-height: 150px; }

/* art: browser */
.browser { position: absolute; inset: auto 0 -2.2rem 0; border: 1px solid var(--line); border-radius: 14px 14px 0 0; background: #08080b; padding: 0.7rem; display: grid; gap: 0.7rem; }
.browser .bar { display: flex; gap: 6px; }
.browser .bar i { width: 8px; height: 8px; border-radius: 50%; background: #2a2a33; }
.browser .pg { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.8rem; align-items: center; }
.sk { display: grid; gap: 7px; }
.sk i { display: block; height: 9px; border-radius: 4px; background: #22222b; }
.sk i.h { height: 16px; width: 85%; background: linear-gradient(90deg, #3a3a46, #22222b); }
.sk i:nth-child(3) { width: 70%; }
.pill { justify-self: start; margin-top: 4px; font-size: 0.6875rem; font-weight: 700; padding: 0.35rem 0.7rem; border-radius: 999px; background: var(--cyan); color: var(--ink); }
.ph-img { height: 92px; border-radius: 10px; background: linear-gradient(135deg, #1a3a4a, #2a1a4a 60%, #3a1a3a); }
.score { position: absolute; right: 1rem; top: 0; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--cyan) calc(var(--p, 98) * 1%), #22222b 0); }
.score::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--raised); }
.score b { position: relative; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.score small { position: absolute; bottom: -1.3rem; font-size: 0.625rem; color: var(--faint); white-space: nowrap; letter-spacing: .08em; text-transform: uppercase; }

/* art: map */
.map { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; background:
  linear-gradient(0deg, transparent 48%, #1a1a22 48% 52%, transparent 52%),
  linear-gradient(90deg, transparent 30%, #1a1a22 30% 33%, transparent 33%),
  linear-gradient(60deg, transparent 60%, #16161d 60% 63%, transparent 63%),
  #0d0d12; }
.pin { position: absolute; width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #3a3a46; }
.pin.you { background: var(--blue); box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue) 25%, transparent); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--blue) 0%, transparent); } }
.listing { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.8rem; padding: 0.6rem 0.75rem; border-radius: 10px; background: rgba(12, 12, 16, .9); border: 1px solid color-mix(in srgb, var(--blue) 45%, var(--line)); font-size: 0.75rem; }
.listing b { display: block; font-size: 0.8125rem; }
.listing span { color: #f5c542; }
.listing em { font-style: normal; color: var(--faint); }

/* art: bars */
.bars { position: absolute; inset: 0.5rem 0 0; display: flex; align-items: flex-end; gap: 8px; }
.bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--violet), color-mix(in srgb, var(--violet) 25%, transparent)); height: var(--h); transform-origin: bottom; }
.art-cap { position: absolute; left: 0; top: -0.2rem; font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* art: chat */
.chat { position: relative; display: grid; gap: 0.5rem; font-size: 0.8125rem; }
.chat .b { max-width: 78%; padding: 0.5rem 0.8rem; border-radius: 14px; }
.chat .q { justify-self: start; background: #1d1d24; border-bottom-left-radius: 4px; }
.chat .a { justify-self: end; background: color-mix(in srgb, var(--magenta) 30%, #1d1d24); border-bottom-right-radius: 4px; }
.chat .time { justify-self: center; font-size: 0.6875rem; color: var(--faint); }
/* The typing dots and the reply share one cell, so the swap moves nothing. */
.slot { display: grid; justify-items: start; }
.slot > * { grid-area: 1 / 1; align-self: end; }
.slot .reply { visibility: hidden; }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); animation: dot 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s } .typing i:nth-child(3) { animation-delay: .3s }
@keyframes dot { 30% { transform: translateY(-4px); opacity: 1 } 0%, 60%, 100% { opacity: .4 } }

/* ---------- scroll story: the phone ---------- */
.story-grid { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .story-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 5rem; }
  .story-phone { position: sticky; top: 18vh; align-self: start; }
}
.story-phone { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.phone {
  width: min(100%, 300px);
  padding: 10px; border-radius: 42px;
  background: linear-gradient(160deg, #2a2a33, #0d0d11);
  box-shadow: 0 40px 90px -30px rgba(129, 61, 242, .45), inset 0 0 0 1px #33333d;
}
.screen { border-radius: 33px; background: #0b0b0f; padding: 1rem 0.9rem 1.3rem; display: grid; gap: 0.65rem; min-height: 330px; align-content: start; font-size: 0.8125rem; line-height: 1.4; }
.scr-head { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.7rem; border-bottom: 1px solid #1d1d24; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; color: var(--ink); background: var(--spectrum); }
.scr-head b { display: block; font-size: 0.875rem; }
.scr-head small { color: var(--faint); font-size: 0.6875rem; }
.msg { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.story.armed .msg:not(.on) { opacity: 0; transform: translateY(10px) scale(.97); }
.event { justify-self: center; font-size: 0.6875rem; color: var(--faint); }
.event.miss { color: var(--magenta); }
.event.good { color: var(--cyan); font-weight: 600; padding: 0.4rem 0.8rem; border-radius: 999px; background: color-mix(in srgb, var(--cyan) 12%, transparent); }
.bub { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: 16px; }
.bub.out { justify-self: end; background: #1f6fe5; color: #fff; border-bottom-right-radius: 5px; }
.bub.in { justify-self: start; background: #1d1d24; border-bottom-left-radius: 5px; }
.auto { justify-self: end; font-size: 0.625rem; color: var(--faint); margin-top: -0.4rem; }
.fig-cap { font-size: 0.8125rem; color: var(--faint); text-align: center; max-width: 30ch; margin: 0; }
.beats { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.beat { padding-block: 1.6rem; border-top: 1px solid var(--line); display: grid; gap: 0.4rem; transition: opacity .5s var(--ease); transform-origin: 0 50%; }
@media (min-width: 900px) {
  .beat { min-height: 52vh; align-content: center; border-top: 0; padding-block: 0; }
  .story.armed .beat:not(.on) { opacity: .28; }
}
.beat-n { font-family: var(--display); font-stretch: 118%; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.1em; color: var(--violet); }
.beat h3 { margin: 0; font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 2.2rem); line-height: 1.1; text-transform: uppercase; text-wrap: balance; }
.beat p { margin: 0; color: var(--dim); max-width: 34ch; }

/* ---------- steps: a line fills and each step lights as you reach it ---------- */
.steps-wrap { position: relative; padding-left: 3.25rem; padding-bottom: 2.5rem; }
.steps { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; counter-reset: s; }
.steps-line { position: absolute; left: 1.075rem; top: 0.5rem; bottom: 0; width: 2px; background: var(--line); }
.steps-line i { display: block; width: 100%; height: calc(var(--fill, 1) * 100%); background: linear-gradient(180deg, var(--cyan), var(--violet), var(--magenta)); }
@media (min-width: 760px) {
  .steps-wrap { padding-left: 0; padding-top: 0; padding-bottom: 0; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  /* ends at the centre of the third circle */
  .steps-line { left: 1.1rem; right: calc((100% - 4rem) / 3 - 1.1rem); top: 1.1rem; bottom: auto; width: auto; height: 2px; }
  .steps-line i { height: 100%; width: calc(var(--fill, 1) * 100%); background: var(--spectrum); }
}
.step { position: relative; display: grid; gap: 0.5rem; counter-increment: s; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.step::before {
  content: counter(s); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--ground); box-shadow: inset 0 0 0 2px var(--line); color: var(--faint);
  font-family: var(--display); font-weight: 700; font-size: 0.9rem; position: relative;
  transition: box-shadow .5s var(--ease), color .5s, background .5s;
}
@media (max-width: 759px) { .step::before { position: absolute; left: -3.25rem; top: -0.35rem; } }
.step.on::before { background: var(--violet); box-shadow: 0 0 0 6px color-mix(in srgb, var(--violet) 22%, transparent); color: #fff; }
.steps.armed .step:not(.on) { opacity: .35; }
/* The arrow off the end of the line. When the line fills, a dashed curve
   draws itself from the line's end across to the right, and the arrowhead
   rides along it, finishing at 45 degrees pointing down into the form.
   The script measures the line and the form, so it fits any screen. */
#process { position: relative; padding-bottom: clamp(7rem, 18vw, 9rem); }
.flow { position: absolute; left: 0; top: 0; z-index: 2; overflow: visible; pointer-events: none; }
.flow .trail { fill: none; stroke: var(--magenta); stroke-width: 2; stroke-dasharray: 4 7; stroke-linecap: round; opacity: .75; }
.flow .head { fill: none; stroke: var(--faint); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s var(--ease); }
.flow .head.hot { stroke: var(--magenta); }
/* Phones only: on desktop the steps run across and the form is in plain
   view beside its heading, so the arrow stays out. */
@media (min-width: 760px) {
  #process { padding-bottom: var(--sec); }
  .flow { display: none; }
}
.step h3 { margin: 0.75rem 0 0; font-size: 1.2rem; font-weight: 600; }
@media (max-width: 759px) { .step h3 { margin-top: 0; } }
.step p { margin: 0; color: var(--dim); }

/* ---------- contact ---------- */
.close { position: relative; overflow: hidden; isolation: isolate; }
.close-in { display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .close-in { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }
.close-copy { display: grid; gap: 1.1rem; align-content: start; }
.close-copy p { margin: 0; color: var(--dim); }
.small { font-size: 0.875rem; color: var(--faint); }
.form { display: grid; gap: 1.1rem; padding: clamp(1.25rem, 4vw, 2rem); background: rgba(12, 12, 15, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); min-width: 0; }
.row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.field { display: grid; gap: 0.4rem; min-width: 0; }
.field label { font-size: 0.8125rem; font-weight: 600; color: var(--dim); }
.opt { font-weight: 400; color: var(--faint); }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--ground); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.75rem 0.85rem; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 15%, transparent); outline: none; }
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; font-size: 0.75rem; line-height: 1.5; color: var(--faint); }
.consent input { margin-top: 0.15rem; width: 1.05rem; height: 1.05rem; accent-color: var(--cyan); }
.consent strong { color: var(--dim); }
.form .btn { width: 100%; border: 0; cursor: pointer; }
.form-wrap { min-width: 0; }
.form[hidden] { display: none; }
.form-error { margin: 0; font-size: 0.875rem; color: var(--magenta); }
.form-error:empty { display: none; }
.consent a { color: var(--dim); }
/* honeypot: off-screen for bots, never shown or announced */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity .32s var(--ease), transform .32s var(--ease); pointer-events: none; }
.form-success { display: grid; gap: 0.7rem; justify-items: start; padding: clamp(1.6rem, 4vw, 2.4rem); background: var(--surface); box-shadow: inset 0 0 0 1px var(--cyan); animation: success-in .55s var(--ease) both; }
.form-success[hidden] { display: none; }
.form-success p { margin: 0; color: var(--dim); }
.success-title { font-size: clamp(1.4rem, 3.4vw, 1.9rem); max-width: 20ch; }
@keyframes success-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.foot { padding-block: 2rem 2.5rem; border-top: 1px solid #111116; font-size: 0.8125rem; color: var(--faint); }
.foot-in { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.foot a { text-decoration: none; }
@media (hover: hover) { .foot a:hover { color: var(--text); } }
.foot .sp { margin-left: auto; }
.social-inline { display: inline-flex; align-items: center; gap: 1.4rem; }
.social-inline a { display: inline-flex; align-items: center; gap: 0.45rem; }
.social-glyph { width: 14px; height: 14px; flex: none; }

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